@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -0,0 +1,334 @@
+<script setup>
+import { isCodeLike } from "../../../rendering/markdown/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-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
+                {{ name }}
+            </h3>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="hasContent" class="px-16px pb-16px 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/messages/components/widgets/chat-generic-tool-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../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/messages/components/widgets/chat-grep-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../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/messages/components/widgets/chat-grep-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../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/messages/components/widgets/chat-read-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../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/messages/components/widgets/chat-read-widget.vue

@@ -0,0 +1,195 @@
+<script setup>
+import { isCodeLike } from "../../../rendering/markdown/code-detection";
+const props = defineProps({
+  toolUse: { type: Object, required: true },
+  toolResult: { type: Object, required: false },
+  isActive: { type: Boolean, required: false }
+});
+const filePath = computed(() => {
+  const path = props.toolUse.input?.file_path;
+  return typeof path === "string" ? path : "";
+});
+const fileName = computed(() => {
+  if (!filePath.value)
+    return "arquivo";
+  const parts = filePath.value.split("/");
+  return parts[parts.length - 1] || "arquivo";
+});
+const fileExtension = computed(() => {
+  const name = fileName.value;
+  const lastDot = name.lastIndexOf(".");
+  if (lastDot === -1)
+    return "";
+  return name.slice(lastDot + 1).toLowerCase();
+});
+const parentDir = computed(() => {
+  if (!filePath.value)
+    return "";
+  const parts = filePath.value.split("/");
+  if (parts.length <= 2)
+    return "";
+  const relevantParts = parts.slice(-3, -1);
+  return relevantParts.join("/");
+});
+const fileIcon = computed(() => {
+  const ext = fileExtension.value;
+  if (["ts", "tsx", "mts", "cts"].includes(ext))
+    return "i-ph-file-ts";
+  if (["js", "jsx", "mjs", "cjs"].includes(ext))
+    return "i-ph-file-js";
+  if (ext === "vue")
+    return "i-ph-file-vue";
+  if (["css", "scss", "sass", "less"].includes(ext))
+    return "i-ph-file-css";
+  if (["html", "htm"].includes(ext))
+    return "i-ph-file-html";
+  if (["json", "jsonc"].includes(ext))
+    return "i-ph-brackets-curly";
+  if (["yaml", "yml", "toml"].includes(ext))
+    return "i-ph-file-text";
+  if (["md", "mdx"].includes(ext))
+    return "i-ph-markdown-logo";
+  if (["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext))
+    return "i-ph-image";
+  if (ext === "py")
+    return "i-ph-file-py";
+  if (["sh", "bash", "zsh"].includes(ext))
+    return "i-ph-terminal";
+  if (ext === "sql")
+    return "i-ph-database";
+  if (ext === "pdf")
+    return "i-ph-file-pdf";
+  return "i-ph-file-code";
+});
+const contentPreview = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return [];
+  const lines = props.toolResult.output.split("\n");
+  const parsed = [];
+  for (const line of lines.slice(0, 20)) {
+    const match = line.match(/^(\s*\d+)→(.*)$/);
+    if (match && match[1]) {
+      parsed.push({
+        lineNum: match[1].trim(),
+        content: match[2] ?? ""
+      });
+    } else if (line.trim()) {
+      parsed.push({
+        lineNum: "",
+        content: line
+      });
+    }
+  }
+  return parsed.slice(0, 15);
+});
+const totalLinesRead = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return 0;
+  return props.toolResult.output.split("\n").filter((l) => l.match(/^\s*\d+→/)).length;
+});
+const hasMoreLines = computed(() => {
+  return totalLinesRead.value > 15;
+});
+const statusVariant = computed(() => {
+  if (props.toolResult) {
+    return props.toolResult.isError ? "error" : "completed";
+  }
+  return "running";
+});
+const statusLabel = computed(() => {
+  if (!props.toolResult)
+    return "Lendo...";
+  if (props.toolResult.isError)
+    return void 0;
+  return totalLinesRead.value > 0 ? `${totalLinesRead.value} linhas` : "Lido";
+});
+const isContentCode = computed(() => {
+  if (!props.toolResult?.output || props.toolResult.isError)
+    return false;
+  return isCodeLike(props.toolResult.output);
+});
+</script>
+
+<template>
+    <div class="bg-subtle rounded-16px border border-gray-200">
+        <!-- Header -->
+        <div class="px-16px py-16px flex items-center justify-between">
+            <div class="flex-1 min-w-0">
+                <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
+                    Read
+                </h3>
+                <p class="text-12px text-secondary truncate mt-2px">
+                    {{ fileName }}
+                    <span v-if="parentDir" class="opacity-60">em {{ parentDir }}</span>
+                </p>
+            </div>
+            <TelaStatus :variant="statusVariant" :label="statusLabel" />
+        </div>
+
+        <!-- Content -->
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
+            <!-- File path section -->
+            <div>
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Arquivo
+                </div>
+                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
+                    <div class="flex items-center gap-8px">
+                        <div class="text-14px text-gray-500" :class="fileIcon" />
+                        <span class="text-14px text-primary font-mono truncate">{{ filePath }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Content section -->
+            <div v-if="contentPreview.length > 0 || toolResult.isError">
+                <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
+                    Conteúdo
+                </div>
+                <div
+                    v-if="isContentCode"
+                    class="bg-[#1e1e1e] rounded-8px p-12px overflow-auto max-h-300px"
+                >
+                    <div class="font-mono text-11px text-gray-300">
+                        <div class="flex">
+                            <!-- Line numbers -->
+                            <div class="flex flex-col py-8px px-12px bg-slate-900/50 text-slate-600 select-none border-r border-slate-800 text-right">
+                                <span v-for="(line, index) in contentPreview" :key="index" class="leading-5">
+                                    {{ line.lineNum || " " }}
+                                </span>
+                            </div>
+                            <!-- Code content -->
+                            <div class="flex-1 py-8px px-12px overflow-x-auto">
+                                <pre class="text-slate-300 m-0"><code><template v-for="(line, index) in contentPreview" :key="index">{{ line.content }}
+</template></code></pre>
+                            </div>
+                        </div>
+                        <div v-if="hasMoreLines" class="text-slate-600 px-12px py-8px border-t border-slate-800 text-center text-11px">
+                            ... mais {{ totalLinesRead - 15 }} linhas
+                        </div>
+                    </div>
+                </div>
+                <div
+                    v-else-if="toolResult.isError"
+                    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
+                    v-else
+                    class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2"
+                >
+                    <p class="text-14px text-primary whitespace-pre-wrap break-words m-0">
+                        {{ toolResult.output }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+pre{margin:0;white-space:pre}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
+</style>

package/dist/runtime/messages/components/widgets/chat-read-widget.vue.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../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/messages/components/widgets/chat-tela-skill-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../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;