feat(tui): support builtin protocol for handling context from editors (#24034)

packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx

@@ -1,9 +1,11 @@
 import type { BoxRenderable, TextareaRenderable, KeyEvent, ScrollBoxRenderable } from "@opentui/core"
 import { pathToFileURL } from "bun"
 import fuzzysort from "fuzzysort"
+import path from "path"
 import { firstBy } from "remeda"
 import { createMemo, createResource, createEffect, onMount, onCleanup, Index, Show, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
+import { useEditorContext } from "@tui/context/editor"
 import { useSDK } from "@tui/context/sdk"
 import { useSync } from "@tui/context/sync"
 import { getScrollAcceleration } from "../../util/scroll"
@@ -77,6 +79,7 @@ export function Autocomplete(props: {
   agentStyleId: number
   promptPartTypeId: () => number
 }) {
+  const editor = useEditorContext()
   const sdk = useSDK()
   const sync = useSync()
   const command = useCommandDialog()
@@ -221,6 +224,70 @@ export function Autocomplete(props: {
     }
   }
 
+  function createFilePart(item: string, lineRange?: { startLine: number; endLine?: number }) {
+    const baseDir = (sync.path.directory || process.cwd()).replace(/\/+$/, "")
+    const fullPath = path.isAbsolute(item) ? item : path.join(baseDir, item)
+    const urlObj = pathToFileURL(fullPath)
+    const filename =
+      lineRange && !item.endsWith("/")
+        ? `${item}#${lineRange.startLine}${lineRange.endLine ? `-${lineRange.endLine}` : ""}`
+        : item
+
+    if (lineRange && !item.endsWith("/")) {
+      urlObj.searchParams.set("start", String(lineRange.startLine))
+      if (lineRange.endLine !== undefined) {
+        urlObj.searchParams.set("end", String(lineRange.endLine))
+      }
+    }
+
+    return {
+      filename,
+      url: urlObj.href,
+      part: {
+        type: "file" as const,
+        mime: "text/plain",
+        filename,
+        url: urlObj.href,
+        source: {
+          type: "file" as const,
+          text: {
+            start: 0,
+            end: 0,
+            value: "",
+          },
+          path: item,
+        },
+      },
+    }
+  }
+
+  function normalizeMentionPath(filePath: string) {
+    const baseDir = sync.path.directory || process.cwd()
+    const absolute = path.resolve(filePath)
+    const relative = path.relative(baseDir, absolute)
+
+    if (relative && !relative.startsWith("..") && !path.isAbsolute(relative)) {
+      return relative.split(path.sep).join("/")
+    }
+
+    return absolute.split(path.sep).join("/")
+  }
+
+  function insertFileMention(input: { filePath: string; lineStart: number; lineEnd: number }) {
+    const item = normalizeMentionPath(input.filePath)
+    const lineRange = {
+      startLine: input.lineStart,
+      endLine: input.lineEnd > input.lineStart ? input.lineEnd : undefined,
+    }
+    const { filename, part } = createFilePart(item, lineRange)
+    const index = store.visible === "@" ? store.index : props.input().cursorOffset
+
+    command.keybinds(true)
+    setStore("visible", false)
+    setStore("index", index)
+    insertPart(filename, part)
+  }
+
   const [files] = createResource(
     () => search(),
     async (query) => {
@@ -250,18 +317,7 @@ export function Autocomplete(props: {
         const width = props.anchor().width - 4
         options.push(
           ...sortedFiles.map((item): AutocompleteOption => {
-            const baseDir = (sync.path.directory || process.cwd()).replace(/\/+$/, "")
-            const fullPath = `${baseDir}/${item}`
-            const urlObj = pathToFileURL(fullPath)
-            let filename = item
-            if (lineRange && !item.endsWith("/")) {
-              filename = `${item}#${lineRange.startLine}${lineRange.endLine ? `-${lineRange.endLine}` : ""}`
-              urlObj.searchParams.set("start", String(lineRange.startLine))
-              if (lineRange.endLine !== undefined) {
-                urlObj.searchParams.set("end", String(lineRange.endLine))
-              }
-            }
-            const url = urlObj.href
+            const { filename, url, part } = createFilePart(item, lineRange)
 
             const isDir = item.endsWith("/")
             return {
@@ -270,21 +326,7 @@ export function Autocomplete(props: {
               isDirectory: isDir,
               path: item,
               onSelect: () => {
-                insertPart(filename, {
-                  type: "file",
-                  mime: "text/plain",
-                  filename,
-                  url,
-                  source: {
-                    type: "file",
-                    text: {
-                      start: 0,
-                      end: 0,
-                      value: "",
-                    },
-                    path: item,
-                  },
-                })
+                insertPart(filename, part)
               },
             }
           }),
@@ -501,6 +543,14 @@ export function Autocomplete(props: {
   }
 
   onMount(() => {
+    const unsubscribeMention = editor.onMention((mention) => {
+      insertFileMention(mention)
+    })
+
+    onCleanup(() => {
+      unsubscribeMention()
+    })
+
     props.ref({
       get visible() {
         return store.visible