@meistrari/chat-nuxt 1.0.0

package/dist/runtime/components/chat/generic-tool-widget.vue

@@ -0,0 +1,334 @@
+<script setup>
+import { isCodeLike } from "../../utils/code-detection";
+const props = defineProps({
+  toolUse: { type: Object, required: true },
+  toolResult: { type: Object, required: false },
+  isActive: { type: Boolean, required: false }
+});
+const expanded = reactive(/* @__PURE__ */ new Map());
+const resultExpanded = ref(false);
+const name = computed(() => props.toolUse.name ?? "");
+const input = computed(() => props.toolUse.input ?? {});
+const todos = computed(() => {
+  const t = input.value?.todos;
+  return Array.isArray(t) ? t : [];
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "error" : "completed";
+  }
+  return "executing";
+});
+const statusLabel = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "Erro" : "Conclu\xEDdo";
+  }
+  return "Executando...";
+});
+const hasContent = computed(() => {
+  return input.value && Object.keys(input.value).length > 0 || !!props.toolResult;
+});
+function isExpanded(key) {
+  return expanded.get(key) ?? false;
+}
+function toggle(key) {
+  expanded.set(key, !isExpanded(key));
+}
+function toggleResult() {
+  resultExpanded.value = !resultExpanded.value;
+}
+function textForValue(value) {
+  if (typeof value === "string")
+    return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function needsToggle(value) {
+  return (textForValue(value) ?? "").length > 500;
+}
+const filePath = computed(() => {
+  const fp = props.toolUse.input?.file_path;
+  return typeof fp === "string" ? fp : null;
+});
+const markdownFields = /* @__PURE__ */ new Set(["description", "prompt", "message"]);
+function shouldRenderAsMarkdown(key) {
+  if (key === "content" && filePath.value) {
+    return filePath.value.endsWith(".md");
+  }
+  return markdownFields.has(key);
+}
+const output = computed(() => props.toolResult?.output ?? "");
+const needsToggleResult = computed(() => output.value.length > 500);
+const isOutputCode = computed(() => isCodeLike(output.value));
+const isEmptyMessage = computed(() => {
+  if (!output.value || output.value.trim().length === 0)
+    return true;
+  const trimmed = output.value.trim().toLowerCase();
+  const emptyPatterns = /* @__PURE__ */ new Set([
+    "no files found",
+    "no matches found",
+    "no results",
+    "nenhum arquivo",
+    "nenhum resultado",
+    "n\xE3o encontrado",
+    "nothing found",
+    "vazio"
+  ]);
+  return emptyPatterns.has(trimmed);
+});
+</script>
+
+<template>
+    <div class="bg-subtle rounded-16px border border-gray-200">
+        <!-- Header -->
+        <div class="px-24px py-24px flex items-center justify-between">
+            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                {{ name }}
+            </h3>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="hasContent" class="px-24px pb-24px space-y-16px">
+            <!-- Parameters section -->
+            <div v-if="input && Object.keys(input).length > 0">
+                <!-- Special handling for TodoWrite tool -->
+                <div v-if="name === 'TodoWrite' && todos.length > 0">
+                    <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                        Tarefas
+                    </div>
+                    <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                        <div class="space-y-2">
+                            <div v-for="(todo, index) in todos" :key="index" class="py-2 border-b border-gray-100 last:border-0">
+                                <div class="flex items-start justify-between">
+                                    <div class="flex-1">
+                                        <div class="text-14px text-primary">
+                                            {{ todo.content }}
+                                        </div>
+                                    </div>
+                                    <TelaStatus
+                                        :variant="todo.status === 'completed' ? 'completed' : todo.status === 'in_progress' ? 'executing' : 'pending-run'"
+                                        :label="todo.status === 'in_progress' ? 'em progresso' : todo.status === 'pending' ? 'pendente' : todo.status === 'completed' ? 'conclu\xEDdo' : todo.status"
+                                        class="ml-3"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Regular Input Parameters -->
+                <div v-else>
+                    <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                        Parâmetros
+                    </div>
+                    <div class="space-y-12px">
+                        <div v-for="(value, key) in input" :key="key">
+                            <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                                {{ key }}
+                            </div>
+
+                            <!-- String values -->
+                            <div v-if="typeof value === 'string'">
+                                <div
+                                    v-if="isCodeLike(value)"
+                                    class="bg-[#1e1e1e] rounded-8px p-12px overflow-auto"
+                                    :style="{ maxHeight: isExpanded(key) ? 'none' : '400px' }"
+                                >
+                                    <pre class="m-0 text-sm text-gray-300 whitespace-pre-wrap font-mono leading-relaxed break-words overflow-wrap-anywhere"><code>{{ value }}</code></pre>
+                                    <div v-if="needsToggle(value)" class="mt-2 flex justify-center">
+                                        <button type="button" class="text-sm text-gray-400 hover:text-gray-300 flex items-center gap-2" :aria-expanded="isExpanded(key)" @click.prevent="toggle(key)">
+                                            {{ isExpanded(key) ? "Ver menos" : "Ver mais" }}
+                                            <i class="i-ph-caret-down" :style="{ transform: isExpanded(key) ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" aria-hidden="true" />
+                                        </button>
+                                    </div>
+                                </div>
+                                <div v-else class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                    <div
+                                        :style="{ maxHeight: isExpanded(key) ? 'none' : '400px' }"
+                                        class="tool-use-content overflow-auto"
+                                    >
+                                        <ClientOnly v-if="shouldRenderAsMarkdown(key)">
+                                            <AppMarkdownRender
+                                                :content="value"
+                                                :render-code-blocks-as-pre="true"
+                                                :typewriter="false"
+                                            />
+                                        </ClientOnly>
+                                        <pre v-else class="m-0 text-14px text-primary whitespace-pre-wrap font-mono leading-relaxed break-words overflow-wrap-anywhere">{{ value }}</pre>
+                                    </div>
+                                    <div v-if="needsToggle(value)" class="mt-2 flex justify-center">
+                                        <button type="button" class="text-sm text-primary-600 hover:opacity-80 flex items-center gap-2" :aria-expanded="isExpanded(key)" @click.prevent="toggle(key)">
+                                            {{ isExpanded(key) ? "Ver menos" : "Ver mais" }}
+                                            <i class="i-ph-caret-down" :style="{ transform: isExpanded(key) ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" aria-hidden="true" />
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Boolean values -->
+                            <div v-else-if="typeof value === 'boolean'">
+                                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                    <span class="text-14px font-mono text-primary">{{ value ? "true" : "false" }}</span>
+                                </div>
+                            </div>
+
+                            <!-- Number values -->
+                            <div v-else-if="typeof value === 'number'">
+                                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                    <span class="text-14px font-mono text-primary">{{ value }}</span>
+                                </div>
+                            </div>
+
+                            <!-- Array values -->
+                            <div v-else-if="Array.isArray(value)">
+                                <div
+                                    v-if="value.length === 0"
+                                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                                >
+                                    <p class="text-14px text-tertiary m-0">
+                                        Array vazio
+                                    </p>
+                                </div>
+                                <div v-else class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                    <div class="text-xs text-gray-500 mb-2">
+                                        {{ value.length }} itens
+                                    </div>
+                                    <div class="space-y-1">
+                                        <div v-for="(item, index) in value" :key="index" class="text-14px text-primary py-0.5">
+                                            <span class="text-gray-500 mr-2 font-mono">{{ index }}:</span>
+                                            <span class="font-mono">{{ typeof item === "string" ? item : JSON.stringify(item) }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Object values -->
+                            <div v-else-if="typeof value === 'object' && value !== null">
+                                <div
+                                    v-if="Object.keys(value).length === 0"
+                                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                                >
+                                    <p class="text-14px text-tertiary m-0">
+                                        Objeto vazio
+                                    </p>
+                                </div>
+                                <div v-else class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                    <div class="text-xs text-gray-500 mb-2">
+                                        {{ Object.keys(value).length }} propriedades
+                                    </div>
+                                    <div
+                                        :style="{ maxHeight: isExpanded(key) ? 'none' : '400px' }"
+                                        class="text-14px text-primary font-mono whitespace-pre-wrap break-words overflow-wrap-anywhere overflow-auto"
+                                    >
+                                        <pre class="m-0 break-words overflow-wrap-anywhere">{{ textForValue(value) }}</pre>
+                                    </div>
+                                    <div v-if="needsToggle(value)" class="mt-2 flex justify-center">
+                                        <button type="button" class="text-sm text-primary-600 hover:opacity-80 flex items-center gap-2" :aria-expanded="isExpanded(key)" @click.prevent="toggle(key)">
+                                            {{ isExpanded(key) ? "Ver menos" : "Ver mais" }}
+                                            <i class="i-ph-caret-down" :style="{ transform: isExpanded(key) ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" aria-hidden="true" />
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Null values -->
+                            <div v-else-if="value === null">
+                                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                    <span class="text-14px font-mono text-primary">null</span>
+                                </div>
+                            </div>
+
+                            <!-- Fallback for other types -->
+                            <div v-else class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                                <div
+                                    :style="{ maxHeight: isExpanded(key) ? 'none' : '400px' }"
+                                    class="overflow-auto"
+                                >
+                                    <pre class="text-14px text-primary font-mono">{{ textForValue(value) }}</pre>
+                                </div>
+                                <div v-if="needsToggle(value)" class="mt-2 flex justify-center">
+                                    <button type="button" class="text-sm text-primary-600 hover:opacity-80 flex items-center gap-2" :aria-expanded="isExpanded(key)" @click.prevent="toggle(key)">
+                                        <i class="i-ph-caret-down" :style="{ transform: isExpanded(key) ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }" aria-hidden="true" />
+                                        {{ isExpanded(key) ? "Ver menos" : "Ver mais" }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Result section -->
+            <div v-if="toolResult">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Resultado
+                </div>
+                <div
+                    v-if="isOutputCode"
+                    class="bg-[#1e1e1e] rounded-8px p-12px overflow-auto"
+                    :style="{ maxHeight: resultExpanded ? 'none' : '400px' }"
+                >
+                    <pre class="font-mono text-12px text-gray-300 whitespace-pre-wrap break-words m-0"><code>{{ output }}</code></pre>
+                    <div v-if="needsToggleResult" class="mt-2 flex justify-center">
+                        <button
+                            type="button"
+                            class="text-sm text-gray-400 hover:text-gray-300 flex items-center gap-2"
+                            :aria-expanded="resultExpanded"
+                            @click="toggleResult"
+                        >
+                            {{ resultExpanded ? "Ver menos" : "Ver mais" }}
+                            <i
+                                class="i-ph-caret-down"
+                                :style="{ transform: resultExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }"
+                                aria-hidden="true"
+                            />
+                        </button>
+                    </div>
+                </div>
+                <div
+                    v-else-if="isEmptyMessage"
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                >
+                    <p class="text-14px text-tertiary m-0">
+                        {{ output || "Nenhum resultado dispon\xEDvel" }}
+                    </p>
+                </div>
+                <div
+                    v-else
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                    :class="toolResult.isError ? 'text-red-600' : 'text-primary'"
+                >
+                    <div
+                        :style="{ maxHeight: resultExpanded ? 'none' : '400px' }"
+                        class="overflow-auto"
+                    >
+                        <pre class="m-0 text-14px text-primary whitespace-pre-wrap font-mono leading-relaxed break-words overflow-wrap-anywhere">{{ output }}</pre>
+                    </div>
+                    <div v-if="needsToggleResult" class="mt-2 flex justify-center">
+                        <button
+                            type="button"
+                            class="text-sm text-primary-600 hover:opacity-80 flex items-center gap-2"
+                            :aria-expanded="resultExpanded"
+                            @click="toggleResult"
+                        >
+                            {{ resultExpanded ? "Ver menos" : "Ver mais" }}
+                            <i
+                                class="i-ph-caret-down"
+                                :style="{ transform: resultExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }"
+                                aria-hidden="true"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.tool-use-content :deep(.markstream-vue *),.tool-use-content :deep(.markstream-vue){font-size:14px}
+</style>

package/dist/runtime/components/chat/generic-tool-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/grep-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/grep-widget.vue

@@ -0,0 +1,259 @@
+<script setup>
+const props = defineProps({
+  toolUse: { type: Object, required: true },
+  toolResult: { type: Object, required: false },
+  isActive: { type: Boolean, required: false }
+});
+const pattern = computed(() => {
+  const p = props.toolUse.input?.pattern;
+  return typeof p === "string" ? p : "";
+});
+const searchPath = computed(() => {
+  const p = props.toolUse.input?.path;
+  return typeof p === "string" ? p : ".";
+});
+const shortPath = computed(() => {
+  if (!searchPath.value || searchPath.value === ".")
+    return "diret\xF3rio atual";
+  const parts = searchPath.value.split("/");
+  if (parts.length <= 2)
+    return searchPath.value;
+  return `.../${parts.slice(-2).join("/")}`;
+});
+const globFilter = computed(() => {
+  const g = props.toolUse.input?.glob;
+  return typeof g === "string" ? g : null;
+});
+const typeFilter = computed(() => {
+  const t = props.toolUse.input?.type;
+  return typeof t === "string" ? t : null;
+});
+const outputMode = computed(() => {
+  const mode = props.toolUse.input?.output_mode;
+  return typeof mode === "string" ? mode : "files_with_matches";
+});
+const isCaseInsensitive = computed(() => {
+  return props.toolUse.input?.["-i"] === true;
+});
+const matchResults = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return [];
+  const lines = props.toolResult.output.trim().split("\n").filter((l) => l.trim());
+  if (outputMode.value === "files_with_matches") {
+    return lines.slice(0, 20).map((line) => ({
+      type: "file",
+      path: line.trim(),
+      fileName: line.trim().split("/").pop() || line.trim()
+    }));
+  }
+  if (outputMode.value === "count") {
+    return lines.slice(0, 20).map((line) => {
+      const [path, count] = line.split(":");
+      return {
+        type: "count",
+        path: path?.trim() || "",
+        fileName: path?.trim().split("/").pop() || "",
+        count: Number.parseInt(count || "0", 10)
+      };
+    });
+  }
+  const results = [];
+  for (const line of lines.slice(0, 30)) {
+    const match = line.match(/^(.+?):(\d+):(.*)$/);
+    if (match && match[1] && match[2]) {
+      const filePath = match[1];
+      results.push({
+        type: "content",
+        path: filePath,
+        fileName: filePath.split("/").pop() || filePath,
+        lineNum: match[2],
+        content: match[3] ?? ""
+      });
+    }
+  }
+  return results;
+});
+const totalMatches = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return 0;
+  const lines = props.toolResult.output.trim().split("\n").filter((l) => l.trim());
+  if (outputMode.value === "count") {
+    return lines.reduce((acc, line) => {
+      const count = Number.parseInt(line.split(":")[1] || "0", 10);
+      return acc + count;
+    }, 0);
+  }
+  return lines.length;
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    if (props.toolResult.isError)
+      return "error";
+    if (totalMatches.value === 0)
+      return "archived";
+    return "completed";
+  }
+  return "running";
+});
+const statusLabel = computed(() => {
+  if (!props.toolResult)
+    return "Buscando...";
+  if (props.toolResult.isError)
+    return void 0;
+  if (totalMatches.value === 0)
+    return "Nenhum resultado";
+  if (outputMode.value === "content")
+    return `${totalMatches.value} ocorr\xEAncias`;
+  return `${totalMatches.value} arquivos`;
+});
+function highlightMatch(content) {
+  if (!pattern.value)
+    return content;
+  try {
+    const flags = isCaseInsensitive.value ? "gi" : "g";
+    const regex = new RegExp(`(${pattern.value})`, flags);
+    return content.replace(regex, '<mark class="bg-amber-300 text-amber-900 px-1 rounded">$1</mark>');
+  } catch {
+    return content;
+  }
+}
+</script>
+
+<template>
+    <div class="bg-subtle rounded-16px border border-gray-200">
+        <!-- Header -->
+        <div class="px-24px py-24px flex items-center justify-between">
+            <div class="flex-1 min-w-0">
+                <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                    Grep
+                </h3>
+                <p class="text-12px text-secondary truncate mt-2px">
+                    <span class="font-mono">{{ pattern.length > 30 ? `${pattern.slice(0, 30)}...` : pattern }}</span>
+                    <span class="opacity-60"> em {{ shortPath }}</span>
+                </p>
+            </div>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+            <!-- Search info -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Busca
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <div class="flex items-center gap-12px flex-wrap">
+                        <div class="flex items-center gap-6px">
+                            <div class="i-ph-magnifying-glass text-12px text-gray-500" />
+                            <code class="text-14px text-primary font-mono">{{ pattern }}</code>
+                        </div>
+                        <div class="flex items-center gap-6px">
+                            <div class="i-ph-folder text-12px text-gray-500" />
+                            <span class="text-14px text-primary font-mono">{{ searchPath }}</span>
+                        </div>
+                        <div v-if="globFilter" class="flex items-center gap-6px">
+                            <div class="i-ph-funnel text-12px text-gray-500" />
+                            <span class="text-14px text-primary font-mono">{{ globFilter }}</span>
+                        </div>
+                        <div v-if="typeFilter" class="flex items-center gap-6px">
+                            <div class="i-ph-file-code text-12px text-gray-500" />
+                            <span class="text-14px text-primary font-mono">.{{ typeFilter }}</span>
+                        </div>
+                        <div v-if="isCaseInsensitive" class="flex items-center gap-6px">
+                            <span class="text-11px text-gray-600">ignora maiúsculas</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Results -->
+            <div v-if="matchResults.length > 0">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Resultados
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <!-- File list mode -->
+                    <div v-if="outputMode === 'files_with_matches'" class="space-y-6px">
+                        <div
+                            v-for="(result, index) in matchResults"
+                            :key="index"
+                            class="flex items-center gap-8px py-6px border-b border-gray-100 last:border-0"
+                        >
+                            <div class="i-ph-file-code text-14px text-gray-500" />
+                            <span class="text-14px text-primary truncate flex-1">{{ result.fileName }}</span>
+                            <span class="text-12px text-gray-500 font-mono truncate">{{ result.path }}</span>
+                        </div>
+                    </div>
+
+                    <!-- Count mode -->
+                    <div v-else-if="outputMode === 'count'" class="space-y-6px">
+                        <div
+                            v-for="(result, index) in matchResults"
+                            :key="index"
+                            class="flex items-center gap-8px py-6px border-b border-gray-100 last:border-0"
+                        >
+                            <div class="i-ph-file-code text-14px text-gray-500" />
+                            <span class="text-14px text-primary truncate flex-1">{{ result.fileName }}</span>
+                            <span class="text-12px font-semibold text-primary bg-gray-100 px-6px py-2px rounded">
+                                {{ result.count }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Content mode -->
+                    <div v-else class="space-y-4px font-mono text-14px">
+                        <div
+                            v-for="(result, index) in matchResults"
+                            :key="index"
+                            class="flex items-start gap-2px py-4px border-b border-gray-100 last:border-0"
+                        >
+                            <div class="flex-shrink-0 px-8px text-gray-500 min-w-60px text-right">
+                                <div class="text-primary truncate text-12px">
+                                    {{ result.fileName }}
+                                </div>
+                                <div class="text-gray-500">
+                                    :{{ result.lineNum }}
+                                </div>
+                            </div>
+                            <div
+                                class="flex-1 px-8px text-primary overflow-x-auto whitespace-pre"
+                                v-html="highlightMatch(result.content)"
+                            />
+                        </div>
+                    </div>
+
+                    <div v-if="totalMatches > matchResults.length" class="text-center text-gray-500 text-11px mt-8px pt-8px border-t border-gray-100">
+                        ... mais {{ totalMatches - matchResults.length }} resultados
+                    </div>
+                </div>
+            </div>
+
+            <!-- No results -->
+            <div
+                v-else-if="toolResult && !toolResult.isError"
+                class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+            >
+                <p class="text-14px text-tertiary m-0">
+                    Nenhuma correspondência encontrada
+                </p>
+            </div>
+
+            <!-- Error message -->
+            <div v-if="toolResult?.isError">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Erro
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <p class="text-14px text-red-600 whitespace-pre-wrap break-words m-0">
+                        {{ toolResult.output }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+mark{background-color:#fde68a;border-radius:2px;color:#78350f;padding:1px 2px}
+</style>

package/dist/runtime/components/chat/grep-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mention-dropdown.d.vue.ts

@@ -0,0 +1,14 @@
+import type { MentionItem } from '../../types/chat.js';
+type __VLS_Props = {
+    items: MentionItem[];
+    highlightedIndex: number;
+    trigger: '@' | '/';
+    query: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: MentionItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MentionItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;