feat(mobile): bring inline context to native composer and chat

.gitignore

@@ -38,3 +38,6 @@ node_modules/
 *.log
 .env*
 !.env.example
+
+# pnpm content-addressable store; never belongs in the repo.
+.pnpm-store/

apps/mobile/generated-uniwind-default-theme-variables.json

@@ -60,15 +60,15 @@
     "--color-md-blockquote-bg": "rgba(0, 0, 0, 0.02)",
     "--color-md-code-bg": "rgba(0, 0, 0, 0.04)",
     "--color-md-code-text": "#262626",
-    "--color-md-user-code-bg": "rgba(255, 255, 255, 0.22)",
-    "--color-md-user-code-text": "#ffffff",
-    "--color-md-user-fence-bg": "rgba(0, 0, 0, 0.16)",
-    "--color-md-user-fence-text": "#ffffff",
+    "--color-md-user-code-bg": "rgba(0, 0, 0, 0.04)",
+    "--color-md-user-code-text": "#262626",
+    "--color-md-user-fence-bg": "rgba(0, 0, 0, 0.06)",
+    "--color-md-user-fence-text": "#262626",
     "--color-md-hr": "rgba(0, 0, 0, 0.08)",
-    "--color-user-bubble": "#007aff",
-    "--color-user-bubble-foreground": "#ffffff",
-    "--color-user-bubble-foreground-muted": "rgba(255, 255, 255, 0.78)",
-    "--color-user-bubble-skill-foreground": "#f0abfc",
+    "--color-user-bubble": "#ffffff",
+    "--color-user-bubble-foreground": "#262626",
+    "--color-user-bubble-foreground-muted": "rgba(38, 38, 38, 0.78)",
+    "--color-user-bubble-skill-foreground": "#2563eb",
     "--color-backdrop": "rgba(0, 0, 0, 0.22)",
     "--color-drawer": "rgba(255, 255, 255, 0.99)",
     "--color-drawer-shadow": "rgba(0, 0, 0, 0.12)",
@@ -137,15 +137,15 @@
     "--color-md-blockquote-bg": "rgba(255, 255, 255, 0.03)",
     "--color-md-code-bg": "rgba(255, 255, 255, 0.06)",
     "--color-md-code-text": "#e5e5e5",
-    "--color-md-user-code-bg": "rgba(255, 255, 255, 0.18)",
-    "--color-md-user-code-text": "#ffffff",
-    "--color-md-user-fence-bg": "rgba(0, 0, 0, 0.28)",
-    "--color-md-user-fence-text": "#ffffff",
+    "--color-md-user-code-bg": "rgba(255, 255, 255, 0.06)",
+    "--color-md-user-code-text": "#e5e5e5",
+    "--color-md-user-fence-bg": "rgba(255, 255, 255, 0.09)",
+    "--color-md-user-fence-text": "#e5e5e5",
     "--color-md-hr": "rgba(255, 255, 255, 0.08)",
-    "--color-user-bubble": "#0a84ff",
-    "--color-user-bubble-foreground": "#ffffff",
-    "--color-user-bubble-foreground-muted": "rgba(255, 255, 255, 0.78)",
-    "--color-user-bubble-skill-foreground": "#f0abfc",
+    "--color-user-bubble": "#171717",
+    "--color-user-bubble-foreground": "#f5f5f5",
+    "--color-user-bubble-foreground-muted": "rgba(245, 245, 245, 0.78)",
+    "--color-user-bubble-skill-foreground": "#60a5fa",
     "--color-backdrop": "rgba(0, 0, 0, 0.48)",
     "--color-drawer": "rgba(14, 14, 14, 0.99)",
     "--color-drawer-shadow": "rgba(0, 0, 0, 0.32)",

apps/mobile/global.css

@@ -97,17 +97,17 @@
       --color-md-blockquote-bg: rgba(0, 0, 0, 0.02);
       --color-md-code-bg: rgba(0, 0, 0, 0.04);
       --color-md-code-text: #262626;
-      --color-md-user-code-bg: rgba(255, 255, 255, 0.22);
-      --color-md-user-code-text: #ffffff;
-      --color-md-user-fence-bg: rgba(0, 0, 0, 0.16);
-      --color-md-user-fence-text: #ffffff;
+      --color-md-user-code-bg: rgba(0, 0, 0, 0.04);
+      --color-md-user-code-text: #262626;
+      --color-md-user-fence-bg: rgba(0, 0, 0, 0.06);
+      --color-md-user-fence-text: #262626;
       --color-md-hr: rgba(0, 0, 0, 0.08);
 
-      /* iMessage-style user bubble */
-      --color-user-bubble: #007aff;
-      --color-user-bubble-foreground: #ffffff;
-      --color-user-bubble-foreground-muted: rgba(255, 255, 255, 0.78);
-      --color-user-bubble-skill-foreground: #f0abfc;
+      /* User bubble: a raised card on the thread canvas, matching web's message surface */
+      --color-user-bubble: #ffffff;
+      --color-user-bubble-foreground: #262626;
+      --color-user-bubble-foreground-muted: rgba(38, 38, 38, 0.78);
+      --color-user-bubble-skill-foreground: #2563eb;
 
       /* Drawer / modal backdrop */
       --color-backdrop: rgba(0, 0, 0, 0.22);
@@ -208,17 +208,17 @@
       --color-md-blockquote-bg: rgba(255, 255, 255, 0.03);
       --color-md-code-bg: rgba(255, 255, 255, 0.06);
       --color-md-code-text: #e5e5e5;
-      --color-md-user-code-bg: rgba(255, 255, 255, 0.18);
-      --color-md-user-code-text: #ffffff;
-      --color-md-user-fence-bg: rgba(0, 0, 0, 0.28);
-      --color-md-user-fence-text: #ffffff;
+      --color-md-user-code-bg: rgba(255, 255, 255, 0.06);
+      --color-md-user-code-text: #e5e5e5;
+      --color-md-user-fence-bg: rgba(255, 255, 255, 0.09);
+      --color-md-user-fence-text: #e5e5e5;
       --color-md-hr: rgba(255, 255, 255, 0.08);
 
-      /* iMessage-style user bubble */
-      --color-user-bubble: #0a84ff;
-      --color-user-bubble-foreground: #ffffff;
-      --color-user-bubble-foreground-muted: rgba(255, 255, 255, 0.78);
-      --color-user-bubble-skill-foreground: #f0abfc;
+      /* User bubble: a raised card on the thread canvas, matching web's message surface */
+      --color-user-bubble: #171717;
+      --color-user-bubble-foreground: #f5f5f5;
+      --color-user-bubble-foreground-muted: rgba(245, 245, 245, 0.78);
+      --color-user-bubble-skill-foreground: #60a5fa;
 
       /* Drawer / modal backdrop */
       --color-backdrop: rgba(0, 0, 0, 0.48);

apps/mobile/modules/t3-composer-editor/android/build.gradle

@@ -16,4 +16,5 @@ android {
 
 dependencies {
   implementation project(':expo-modules-core')
+  implementation project(':t3tools-mobile-markdown-text')
 }

apps/mobile/modules/t3-composer-editor/android/src/main/java/expo/modules/t3composereditor/T3ComposerEditorModule.kt

@@ -2,18 +2,83 @@ package expo.modules.t3composereditor
 
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
+import org.json.JSONObject
+import org.json.JSONArray
+
+internal object T3ComposerClipboard {
+  fun write(context: Context, text: String, fragment: String) {
+    val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+    val payload = try {
+      JSONObject(fragment)
+    } catch (_: Exception) {
+      null
+    }
+    val records = payload?.optJSONArray("records")
+    if (payload == null || records == null) {
+      clipboard.setPrimaryClip(ClipData.newPlainText("T3 Code", text))
+      return
+    }
+    val all = (0 until records.length()).map { records.getJSONObject(it) }
+    val selected = all.filter { text.contains("/${it.optString("contextId")})") }.toMutableList()
+    val screenshots = selected.map { it.optString("screenshotContextId") }.toSet()
+    selected.addAll(
+      all.filter {
+        screenshots.contains(it.optString("contextId")) &&
+          !selected.contains(it)
+      }
+    )
+    payload.put("records", JSONArray(selected))
+    val encoded = java.net.URLEncoder.encode(payload.toString(), "UTF-8").replace("+", "%20")
+    val escaped = text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+    clipboard.setPrimaryClip(
+      if (selected.isEmpty()) {
+        ClipData.newPlainText(
+          "T3 Code",
+          text
+        )
+      } else {
+        ClipData.newHtmlText(
+          "T3 Code",
+          text,
+          "<pre data-t3-context-fragment=\"$encoded\">$escaped</pre>"
+        )
+      }
+    )
+  }
+
+  fun read(context: Context): Map<String, String> {
+    val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+    val clip = clipboard.primaryClip
+    val item = if (clip != null && clip.itemCount > 0) clip.getItemAt(0) else null
+    return mapOf(
+      "text" to (item?.text?.toString() ?: ""),
+      "html" to (item?.htmlText ?: ""),
+      "fragment" to ""
+    )
+  }
+}
 
 class T3ComposerEditorModule : Module() {
   override fun definition() = ModuleDefinition {
     Name("T3ComposerEditor")
 
+    AsyncFunction("writeContextClipboard") { text: String, fragment: String ->
+      T3ComposerClipboard.write(requireNotNull(appContext.reactContext), text, fragment)
+    }
+
     View(T3ComposerEditorView::class) {
       Prop("controlledDocumentJson") { view: T3ComposerEditorView, documentJson: String ->
         view.setControlledDocumentJson(documentJson)
       }
       Prop("themeJson") { view: T3ComposerEditorView, themeJson: String ->
         view.setThemeJson(themeJson)
       }
+      Prop("clipboardFragment") { view: T3ComposerEditorView, fragment: String ->
+        view.setClipboardFragment(fragment)
+      }
       Prop("placeholder") { view: T3ComposerEditorView, placeholder: String ->
         view.setPlaceholder(placeholder)
       }
@@ -36,6 +101,9 @@ class T3ComposerEditorModule : Module() {
       Prop("editable") { view: T3ComposerEditorView, editable: Boolean ->
         view.setEditable(editable)
       }
+      Prop("readOnly") { view: T3ComposerEditorView, readOnly: Boolean ->
+        view.setReadOnly(readOnly)
+      }
       Prop("scrollEnabled") { view: T3ComposerEditorView, scrollEnabled: Boolean ->
         view.setScrollEnabled(scrollEnabled)
       }
@@ -55,6 +123,8 @@ class T3ComposerEditorModule : Module() {
         "onComposerFocus",
         "onComposerBlur",
         "onComposerPasteImages",
+        "onComposerContextPress",
+        "onComposerPasteContext",
         "onComposerContentSizeChange",
       )