fix(app): websearch and codesearch tool rendering

2026-03-30 05:43:55 +00:00 · 2026-03-05 07:46:31 -06:00 · 2026-03-05 07:46:31 -06:00 · 1a420a1a71
commit 1a420a1a71
parent 4c185c70f2
20 changed files with 213 additions and 2 deletions
--- a/packages/ui/src/components/basic-tool.tsx
+++ b/packages/ui/src/components/basic-tool.tsx
@ -203,6 +203,41 @@ export function BasicTool(props: BasicToolProps) {
  )
 }

-export function GenericTool(props: { tool: string; status?: string; hideDetails?: boolean }) {
-  return <BasicTool icon="mcp" status={props.status} trigger={{ title: props.tool }} hideDetails={props.hideDetails} />
+function label(input: Record<string, unknown> | undefined) {
+  const keys = ["description", "query", "url", "filePath", "path", "pattern", "name"]
+  return keys.map((key) => input?.[key]).find((value): value is string => typeof value === "string" && value.length > 0)
+}
+
+function args(input: Record<string, unknown> | undefined) {
+  if (!input) return []
+  const skip = new Set(["description", "query", "url", "filePath", "path", "pattern", "name"])
+  return Object.entries(input)
+    .filter(([key]) => !skip.has(key))
+    .flatMap(([key, value]) => {
+      if (typeof value === "string") return [`${key}=${value}`]
+      if (typeof value === "number") return [`${key}=${value}`]
+      if (typeof value === "boolean") return [`${key}=${value}`]
+      return []
+    })
+    .slice(0, 3)
+}
+
+export function GenericTool(props: {
+  tool: string
+  status?: string
+  hideDetails?: boolean
+  input?: Record<string, unknown>
+}) {
+  return (
+    <BasicTool
+      icon="mcp"
+      status={props.status}
+      trigger={{
+        title: `Called \`${props.tool}\``,
+        subtitle: label(props.input),
+        args: args(props.input),
+      }}
+      hideDetails={props.hideDetails}
+    />
+  )
 }
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@ -577,6 +577,46 @@
  justify-content: center;
 }

+[data-component="exa-tool-output"] {
+  width: 100%;
+  padding-top: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-slot="basic-tool-tool-subtitle"].exa-tool-query {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-slot="exa-tool-links"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+[data-slot="exa-tool-link"] {
+  display: block;
+  max-width: 100%;
+  color: var(--text-interactive-base);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--text-interactive-base);
+  }
+
+  &:visited {
+    color: var(--text-interactive-base);
+  }
+}
+
 [data-component="todos"] {
  padding: 10px 0 24px 0;
  display: flex;
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@ -243,6 +243,18 @@ export function getToolInfo(tool: string, input: any = {}): ToolInfo {
        title: i18n.t("ui.tool.webfetch"),
        subtitle: input.url,
      }
+    case "websearch":
+      return {
+        icon: "window-cursor",
+        title: i18n.t("ui.tool.websearch"),
+        subtitle: input.query,
+      }
+    case "codesearch":
+      return {
+        icon: "code",
+        title: i18n.t("ui.tool.codesearch"),
+        subtitle: input.query,
+      }
    case "task":
      return {
        icon: "task",
@ -303,6 +315,18 @@ export function getToolInfo(tool: string, input: any = {}): ToolInfo {
  }
 }

+function urls(text: string | undefined) {
+  if (!text) return []
+  const seen = new Set<string>()
+  return [...text.matchAll(/https?:\/\/[^\s<>"'`)\]]+/g)]
+    .map((item) => item[0].replace(/[),.;:!?]+$/g, ""))
+    .filter((item) => {
+      if (seen.has(item)) return false
+      seen.add(item)
+      return true
+    })
+}
+
 const CONTEXT_GROUP_TOOLS = new Set(["read", "glob", "grep", "list"])
 const HIDDEN_TOOLS = new Set(["todowrite", "todoread"])

@ -598,6 +622,32 @@ function contextToolSummary(parts: ToolPart[]) {
  return { read, search, list }
 }

+function ExaOutput(props: { output?: string }) {
+  const links = createMemo(() => urls(props.output))
+
+  return (
+    <Show when={links().length > 0}>
+      <div data-component="exa-tool-output">
+        <div data-slot="exa-tool-links">
+          <For each={links()}>
+            {(url) => (
+              <a
+                data-slot="exa-tool-link"
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(event) => event.stopPropagation()}
+              >
+                {url}
+              </a>
+            )}
+          </For>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
 export function registerPartComponent(type: string, component: PartComponent) {
  PART_MAPPING[type] = component
 }
@ -1467,6 +1517,58 @@ ToolRegistry.register({
  },
 })

+ToolRegistry.register({
+  name: "websearch",
+  render(props) {
+    const i18n = useI18n()
+    const query = createMemo(() => {
+      const value = props.input.query
+      if (typeof value !== "string") return ""
+      return value
+    })
+
+    return (
+      <BasicTool
+        {...props}
+        icon="window-cursor"
+        trigger={{
+          title: i18n.t("ui.tool.websearch"),
+          subtitle: query(),
+          subtitleClass: "exa-tool-query",
+        }}
+      >
+        <ExaOutput output={props.output} />
+      </BasicTool>
+    )
+  },
+})
+
+ToolRegistry.register({
+  name: "codesearch",
+  render(props) {
+    const i18n = useI18n()
+    const query = createMemo(() => {
+      const value = props.input.query
+      if (typeof value !== "string") return ""
+      return value
+    })
+
+    return (
+      <BasicTool
+        {...props}
+        icon="code"
+        trigger={{
+          title: i18n.t("ui.tool.codesearch"),
+          subtitle: query(),
+          subtitleClass: "exa-tool-query",
+        }}
+      >
+        <ExaOutput output={props.output} />
+      </BasicTool>
+    )
+  },
+})
+
 ToolRegistry.register({
  name: "task",
  render(props) {
--- a/packages/ui/src/i18n/ar.ts
+++ b/packages/ui/src/i18n/ar.ts
@ -94,6 +94,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "جلب الويب",
+  "ui.tool.websearch": "بحث الويب",
+  "ui.tool.codesearch": "بحث الكود",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "تصحيح",
  "ui.tool.todos": "المهام",
--- a/packages/ui/src/i18n/br.ts
+++ b/packages/ui/src/i18n/br.ts
@ -94,6 +94,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Buscar Web",
+  "ui.tool.websearch": "Pesquisa na Web",
+  "ui.tool.codesearch": "Pesquisa de Código",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Tarefas",
--- a/packages/ui/src/i18n/bs.ts
+++ b/packages/ui/src/i18n/bs.ts
@ -98,6 +98,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Web preuzimanje",
+  "ui.tool.websearch": "Pretraga weba",
+  "ui.tool.codesearch": "Pretraga koda",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Lista zadataka",
--- a/packages/ui/src/i18n/da.ts
+++ b/packages/ui/src/i18n/da.ts
@ -93,6 +93,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webhentning",
+  "ui.tool.websearch": "Websøgning",
+  "ui.tool.codesearch": "Kodesøgning",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Opgaver",
--- a/packages/ui/src/i18n/de.ts
+++ b/packages/ui/src/i18n/de.ts
@ -99,6 +99,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webabruf",
+  "ui.tool.websearch": "Websuche",
+  "ui.tool.codesearch": "Codesuche",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Aufgaben",
--- a/packages/ui/src/i18n/en.ts
+++ b/packages/ui/src/i18n/en.ts
@ -95,6 +95,8 @@ export const dict: Record<string, string> = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "Web Search",
+  "ui.tool.codesearch": "Code Search",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "To-dos",
--- a/packages/ui/src/i18n/es.ts
+++ b/packages/ui/src/i18n/es.ts
@ -94,6 +94,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "Búsqueda web",
+  "ui.tool.codesearch": "Búsqueda de código",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Parche",
  "ui.tool.todos": "Tareas",
--- a/packages/ui/src/i18n/fr.ts
+++ b/packages/ui/src/i18n/fr.ts
@ -94,6 +94,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "Recherche Web",
+  "ui.tool.codesearch": "Recherche de code",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Tâches",
--- a/packages/ui/src/i18n/ja.ts
+++ b/packages/ui/src/i18n/ja.ts
@ -93,6 +93,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "Web検索",
+  "ui.tool.codesearch": "コード検索",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Todo",
--- a/packages/ui/src/i18n/ko.ts
+++ b/packages/ui/src/i18n/ko.ts
@ -94,6 +94,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "웹 가져오기",
+  "ui.tool.websearch": "웹 검색",
+  "ui.tool.codesearch": "코드 검색",
  "ui.tool.shell": "셸",
  "ui.tool.patch": "패치",
  "ui.tool.todos": "할 일",
--- a/packages/ui/src/i18n/no.ts
+++ b/packages/ui/src/i18n/no.ts
@ -97,6 +97,8 @@ export const dict: Record<Keys, string> = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webhenting",
+  "ui.tool.websearch": "Nettsøk",
+  "ui.tool.codesearch": "Kodesøk",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Gjøremål",
--- a/packages/ui/src/i18n/pl.ts
+++ b/packages/ui/src/i18n/pl.ts
@ -93,6 +93,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Pobieranie sieciowe",
+  "ui.tool.websearch": "Wyszukiwanie w sieci",
+  "ui.tool.codesearch": "Wyszukiwanie kodu",
  "ui.tool.shell": "Terminal",
  "ui.tool.patch": "Patch",
  "ui.tool.todos": "Zadania",
--- a/packages/ui/src/i18n/ru.ts
+++ b/packages/ui/src/i18n/ru.ts
@ -93,6 +93,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "Веб-поиск",
+  "ui.tool.codesearch": "Поиск кода",
  "ui.tool.shell": "Оболочка",
  "ui.tool.patch": "Патч",
  "ui.tool.todos": "Задачи",
--- a/packages/ui/src/i18n/th.ts
+++ b/packages/ui/src/i18n/th.ts
@ -95,6 +95,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "ดึงจากเว็บ",
+  "ui.tool.websearch": "ค้นหาเว็บ",
+  "ui.tool.codesearch": "ค้นหาโค้ด",
  "ui.tool.shell": "เชลล์",
  "ui.tool.patch": "แพตช์",
  "ui.tool.todos": "รายการงาน",
--- a/packages/ui/src/i18n/tr.ts
+++ b/packages/ui/src/i18n/tr.ts
@ -90,6 +90,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Web getir",
+  "ui.tool.websearch": "Web Araması",
+  "ui.tool.codesearch": "Kod Araması",
  "ui.tool.shell": "Kabuk",
  "ui.tool.patch": "Yama",
  "ui.tool.todos": "Görevler",
--- a/packages/ui/src/i18n/zh.ts
+++ b/packages/ui/src/i18n/zh.ts
@ -98,6 +98,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "网络搜索",
+  "ui.tool.codesearch": "代码搜索",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "补丁",
  "ui.tool.todos": "待办",
--- a/packages/ui/src/i18n/zht.ts
+++ b/packages/ui/src/i18n/zht.ts
@ -98,6 +98,8 @@ export const dict = {
  "ui.tool.glob": "Glob",
  "ui.tool.grep": "Grep",
  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "網頁搜尋",
+  "ui.tool.codesearch": "程式碼搜尋",
  "ui.tool.shell": "Shell",
  "ui.tool.patch": "修補",
  "ui.tool.todos": "待辦",