@blokkli/editor 2.0.0-alpha.37 → 2.0.0-alpha.39

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.37",
+  "version": "2.0.0-alpha.39",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -18,7 +18,7 @@ import { d as defineCodeTemplate, a as defineFileTemplate, w as withHelper } fro
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.37";
+const version = "2.0.0-alpha.39";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -1555,6 +1555,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_info-fill",
   "bk_mdi_ink_selection",
   "bk_mdi_inventory",
+  "bk_mdi_keyboard_arrow_down",
   "bk_mdi_keyboard_command_key",
   "bk_mdi_lists",
   "bk_mdi_logo_dev",

package/dist/modules/agent/index.mjs

@@ -8,7 +8,7 @@ import { d as defineCodeTemplate } from '../../shared/editor.6D5vApr0.mjs';
 import MagicString from 'magic-string';
 import { parse } from 'acorn';
 import { walk } from 'estree-walker-ts';
-import { transformSync } from 'esbuild';
+import { transformSync, buildSync } from 'esbuild';
 
 function toImportName(prefix, fileName) {
   const name = fileName.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
@@ -253,27 +253,18 @@ export const toolDefinitions: ServerToolMetadata[]
 }
 
 const QUERY = "?blokkliAgentTool";
-const PROPERTIES_TO_REMOVE = /* @__PURE__ */ new Set([
-  "execute",
-  "resultSchema",
-  "component",
-  "label",
-  "prunedSummary",
-  "mockParams",
-  "mockParamsVariants",
-  "requiresApproval",
-  "icon"
-]);
-const SERVER_SAFE_IMPORTS = /* @__PURE__ */ new Set([
-  "zod",
-  "../schemas",
-  "#blokkli/agent/app/tools/schemas",
-  "../chart_schemas",
-  "#blokkli-build/charts-config"
+const PROPERTIES_TO_KEEP = /* @__PURE__ */ new Set([
+  "name",
+  "description",
+  "category",
+  "paramsSchema",
+  "modes",
+  "lazy",
+  "volatile",
+  "requiredAdapterMethods",
+  "requiredFeatures",
+  "resolve"
 ]);
-function isServerSafeImport(source) {
-  return SERVER_SAFE_IMPORTS.has(source);
-}
 function agentToolStripPlugin() {
   return {
     name: "blokkli:agent-tool-strip",
@@ -299,7 +290,7 @@ function agentToolStripPlugin() {
       try {
         rawSource = fs.readFileSync(filePath, "utf-8");
       } catch {
-        this.error(`Cannot read agent tool file: ${filePath}`);
+        return this.error(`Cannot read agent tool file: ${filePath}`);
       }
       const { code: jsSource } = transformSync(rawSource, {
         loader: "ts",
@@ -395,25 +386,61 @@ function validateTransformedOutput(output, filePath) {
   }
   return null;
 }
-function transformToolSource(source, filePath) {
-  const ast = parse(source, {
+function treeShake(code) {
+  const result = buildSync({
+    stdin: { contents: code, loader: "js", resolveDir: "/tmp" },
+    bundle: true,
+    write: false,
+    format: "esm",
+    target: "esnext",
+    treeShaking: true,
+    external: ["*"]
+  });
+  return result.outputFiles[0].text;
+}
+function removeDeadImports(code) {
+  const ast = parse(code, {
     sourceType: "module",
     ecmaVersion: "latest"
   });
-  const exportInfo = findToolExport(ast);
-  if (!exportInfo) {
-    return source;
-  }
-  const s = new MagicString(source);
-  const { toolObject, call } = exportInfo;
+  const importRanges = [];
+  walk(ast, {
+    enter(node) {
+      if (node.type === "ImportDeclaration") {
+        const n = node;
+        importRanges.push({ start: n.start, end: n.end });
+      }
+    },
+    leave() {
+    }
+  });
+  const usedIds = /* @__PURE__ */ new Set();
+  walk(ast, {
+    enter(node) {
+      if (node.type === "Identifier") {
+        const n = node;
+        const inImport = importRanges.some(
+          (r) => n.start >= r.start && n.start < r.end
+        );
+        if (!inImport) {
+          usedIds.add(n.name);
+        }
+      }
+    },
+    leave() {
+    }
+  });
+  const s = new MagicString(code);
   walk(ast, {
     enter(node) {
       if (node.type !== "ImportDeclaration") return;
       const importDecl = node;
-      const importSource = importDecl.source.value;
-      if (!isServerSafeImport(importSource)) {
+      const hasUsedBinding = (importDecl.specifiers || []).some(
+        (spec) => usedIds.has(spec.local.name)
+      );
+      if (!hasUsedBinding) {
         let removeEnd = importDecl.end;
-        if (source[removeEnd] === "\n") {
+        if (code[removeEnd] === "\n") {
           removeEnd++;
         }
         s.remove(importDecl.start, removeEnd);
@@ -422,6 +449,19 @@ function transformToolSource(source, filePath) {
     leave() {
     }
   });
+  return s.toString();
+}
+function transformToolSource(source, filePath) {
+  const ast = parse(source, {
+    sourceType: "module",
+    ecmaVersion: "latest"
+  });
+  const exportInfo = findToolExport(ast);
+  if (!exportInfo) {
+    return source;
+  }
+  const s = new MagicString(source);
+  const { toolObject, call } = exportInfo;
   for (const prop of toolObject.properties) {
     if (prop.type !== "Property") continue;
     const key = prop.key;
@@ -431,7 +471,7 @@ function transformToolSource(source, filePath) {
     } else if (key.type === "Literal" && typeof key.value === "string") {
       name = key.value;
     }
-    if (name && PROPERTIES_TO_REMOVE.has(name)) {
+    if (name && !PROPERTIES_TO_KEEP.has(name)) {
       const propNode = prop;
       let removeEnd = propNode.end;
       const afterProp = source.substring(removeEnd);
@@ -444,7 +484,7 @@ function transformToolSource(source, filePath) {
   }
   s.overwrite(call.start, toolObject.start, "");
   s.overwrite(toolObject.end, call.end, "");
-  const result = s.toString();
+  const result = removeDeadImports(treeShake(s.toString()));
   const error = validateTransformedOutput(result, filePath);
   if (error) {
     throw new Error(error);

package/dist/modules/agent/runtime/app/composables/agentProvider.d.ts

@@ -43,6 +43,7 @@ export type AgentProvider = {
     newConversation: () => void;
     getTranscript: () => void;
     onToolComponentDone: (result: unknown) => void;
+    toolDetails: Map<string, unknown>;
     transcriptContent: Ref<Transcript | null>;
     showTranscript: Ref<boolean>;
     conversationList: Ref<AgentConversationSummary[]>;

package/dist/modules/agent/runtime/app/composables/agentProvider.js

@@ -1,4 +1,4 @@
-import { ref, readonly, watch } from "#imports";
+import { ref, readonly, reactive, watch } from "#imports";
 import {
   conversationItemSchema
 } from "#blokkli/agent/app/types";
@@ -21,7 +21,8 @@ export default function(app, adapter, agentName) {
   let ws = null;
   let reconnectTimeout = null;
   let pingInterval = null;
-  let hasEverConnected = false;
+  let reconnectAttempts = 0;
+  const MAX_RECONNECT_ATTEMPTS = 10;
   const isConnected = ref(false);
   const isReady = ref(false);
   const hasBeenReady = ref(false);
@@ -43,6 +44,7 @@ export default function(app, adapter, agentName) {
   const activeConversationId = ref(null);
   const conversationList = ref([]);
   const showConversationList = ref(false);
+  const toolDetails = reactive(/* @__PURE__ */ new Map());
   async function saveCurrentConversation(serverState) {
     if (!adapter.agentConversations) return;
     if (!conversation.value.length) return;
@@ -177,15 +179,30 @@ export default function(app, adapter, agentName) {
   }
   function onWebSocketOpen() {
     isConnected.value = true;
+    reconnectAttempts = 0;
     pingInterval = window.setInterval(() => {
       send({ type: "ping" });
     }, 3e4);
     onConnect();
   }
   function onWebSocketClose() {
+    if (pingInterval) {
+      window.clearInterval(pingInterval);
+      pingInterval = null;
+    }
     isConnected.value = false;
     isReady.value = false;
     isProcessing.value = false;
+    reconnectAttempts++;
+    if (reconnectAttempts > MAX_RECONNECT_ATTEMPTS) {
+      conversation.value.push({
+        type: "error",
+        id: generateId(),
+        errorType: "connection",
+        timestamp: Date.now()
+      });
+      return;
+    }
     reconnectTimeout = window.setTimeout(() => {
       if (!isConnected.value) {
         connect();
@@ -204,8 +221,16 @@ export default function(app, adapter, agentName) {
     }
   }
   function connect() {
-    if (hasEverConnected) return;
-    hasEverConnected = true;
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    if (ws) {
+      ws.removeEventListener("open", onWebSocketOpen);
+      ws.removeEventListener("close", onWebSocketClose);
+      ws.removeEventListener("error", onWebSocketError);
+      ws.removeEventListener("message", onWebSocketMessage);
+      ws = null;
+    }
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const url = `${protocol}//${window.location.host}/api/blokkli/agent`;
     ws = new WebSocket(url);
@@ -584,13 +609,29 @@ export default function(app, adapter, agentName) {
           timestamp
         });
         activeItem.value = null;
+        if (toolDef.buildDetails) {
+          try {
+            const detailsSource = typeof result === "object" && result !== null && "_details" in result ? result._details : result;
+            const details = toolDef.buildDetails(detailsSource);
+            if (details != null) {
+              toolDetails.set(callId, details);
+            }
+          } catch {
+          }
+        }
         let resultForServer = result;
-        if (toolDef.prunedSummary && typeof result === "object" && result !== null) {
+        if (typeof result === "object" && result !== null) {
+          if ("_details" in result) {
+            const { _details: _, ...rest } = result;
+            resultForServer = rest;
+          }
+        }
+        if (toolDef.prunedSummary && typeof resultForServer === "object" && resultForServer !== null) {
           try {
-            const summary = toolDef.prunedSummary(result);
+            const summary = toolDef.prunedSummary(resultForServer);
             if (summary) {
               resultForServer = {
-                ...result,
+                ...resultForServer,
                 _summary: summary
               };
             }
@@ -834,6 +875,7 @@ export default function(app, adapter, agentName) {
     activeConversationId.value = null;
     plan.value = null;
     usageTurns.value = [];
+    toolDetails.clear();
     send({ type: "new_conversation" });
   }
   function getTranscript() {
@@ -878,6 +920,8 @@ export default function(app, adapter, agentName) {
     newConversation,
     getTranscript,
     onToolComponentDone,
+    // Tool details (ephemeral)
+    toolDetails,
     // Transcript dialog state
     transcriptContent,
     showTranscript,

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCode/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCode/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <pre class="bk-agent-attachment-code"><code>{{ content }}</code></pre>
+</template>
+
+<script setup>
+defineProps({
+  content: { type: String, required: true }
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCode/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCsv/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCsv/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <table class="bk-agent-attachment-table">
+    <thead>
+      <tr>
+        <th v-for="(cell, j) in headerRow" :key="j">{{ cell }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, i) in bodyRows" :key="i">
+        <td v-for="(cell, j) in row" :key="j">{{ cell }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+function parseRow(line) {
+  return line.split(",").map((cell) => cell.trim());
+}
+const headerRow = computed(() => {
+  const firstLine = props.content.trim().split("\n")[0];
+  return firstLine ? parseRow(firstLine) : [];
+});
+const bodyRows = computed(() => {
+  return props.content.trim().split("\n").slice(1).map(parseRow);
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCsv/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewHtml/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewHtml/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="bk-agent-attachment-rendered bk-agent-message-text"
+    v-html="content"
+  />
+</template>
+
+<script setup>
+defineProps({
+  content: { type: String, required: true }
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewHtml/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewMarkdown/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewMarkdown/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="bk-agent-attachment-rendered bk-agent-message-text"
+    v-html="html"
+  />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { marked } from "marked";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+const html = computed(() => {
+  return marked.parse(props.content, { gfm: true, breaks: true });
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewMarkdown/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/modules/agent/runtime/app/features/agent/Panel/Attachment/index.vue

@@ -30,7 +30,7 @@
         class="bk-agent-attachment-modal"
         @cancel="showAttachment = false"
       >
-        <div>{{ attachment.content }}</div>
+        <component :is="previewComponent" :content="bodyContent" />
       </DialogModal>
     </BlokkliTransition>
   </Teleport>
@@ -43,6 +43,17 @@ import {
   BlokkliTransition,
   DialogModal
 } from "#blokkli/editor/components";
+import PreviewMarkdown from "./PreviewMarkdown/index.vue";
+import PreviewHtml from "./PreviewHtml/index.vue";
+import PreviewCode from "./PreviewCode/index.vue";
+import PreviewCsv from "./PreviewCsv/index.vue";
+const PREVIEW_COMPONENTS = {
+  markdown: PreviewMarkdown,
+  html: PreviewHtml,
+  code: PreviewCode,
+  csv: PreviewCsv,
+  plaintext: PreviewCode
+};
 const props = defineProps({
   attachment: { type: Object, required: true },
   removable: { type: Boolean, required: false }
@@ -50,12 +61,31 @@ const props = defineProps({
 defineEmits(["remove"]);
 const { $t, ui } = useBlokkli();
 const showAttachment = ref(false);
+const FILE_PREFIX = "--- File: ";
 const title = computed(() => {
   if (props.attachment.type === "text") {
+    const content = props.attachment.content;
+    if (content.startsWith(FILE_PREFIX)) {
+      const endIndex = content.indexOf(" ---\n");
+      if (endIndex !== -1) {
+        return content.slice(FILE_PREFIX.length, endIndex);
+      }
+    }
     return $t("aiAgentPastedText", "Pasted text");
   }
   return "";
 });
+const bodyContent = computed(() => {
+  const content = props.attachment.content;
+  const headerEnd = content.indexOf(" ---\n");
+  if (content.startsWith(FILE_PREFIX) && headerEnd !== -1) {
+    return content.slice(headerEnd + 5);
+  }
+  return content;
+});
+const previewComponent = computed(() => {
+  return PREVIEW_COMPONENTS[props.attachment.format];
+});
 const preview = computed(() => {
   return props.attachment.content.replace(/\s+/g, " ").trim().slice(0, 200);
 });

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/ServerTool/index.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'server_tool';
-    tool: 'load_skill' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
+    tool: 'load_skills' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
     label: string;
 };
 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>;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/ServerTool/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="bk-agent-assistant-bubble bk-is-tool bk-is-server-tool">
     <div class="bk-agent-tool-call bk-is-server-tool">
-      <Icon
-        :name="getServerSideToolIcon(tool)"
-        class="bk-agent-tool-call-status"
-      />
-      <span>{{ serverToolLabel }}</span>
+      <div class="bk-agent-tool-call-inner">
+        <Icon
+          :name="getServerSideToolIcon(tool)"
+          class="bk-agent-tool-call-status"
+        />
+        <span>{{ serverToolLabel }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -22,7 +24,7 @@ const props = defineProps({
 });
 const { $t } = useBlokkli();
 const serverToolLabel = computed(() => {
-  if (props.tool === "load_skill") {
+  if (props.tool === "load_skills") {
     return $t("aiAgentLoadSkill", 'Using skill "@label"').replace(
       "@label",
       props.label
@@ -55,7 +57,7 @@ const serverToolLabel = computed(() => {
   return props.label;
 });
 function getServerSideToolIcon(id) {
-  if (id === "load_skill") {
+  if (id === "load_skills") {
     return "bk_mdi_book_2";
   }
   if (id === "create_plan") {

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/ServerTool/index.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'server_tool';
-    tool: 'load_skill' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
+    tool: 'load_skills' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
     label: string;
 };
 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>;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/Tool/index.d.vue.ts

@@ -1,3 +1,4 @@
+import { type Component } from '#imports';
 type __VLS_Props = {
     id: string;
     timestamp: number;
@@ -7,6 +8,8 @@ type __VLS_Props = {
     label: string;
     status: 'active' | 'success' | 'error';
     isActive?: boolean;
+    details?: unknown;
+    detailsComponent?: Component;
 };
 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;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/Tool/index.vue

@@ -1,17 +1,38 @@
 <template>
   <div class="bk-agent-assistant-bubble bk-is-tool">
     <div class="bk-agent-tool-call" :class="toolStatusClass">
-      <StatusIcon :status="toolStatus" />
-      <span class="bk-agent-tool-call-name">{{
-        label || formatToolName(tool)
-      }}</span>
+      <div class="bk-agent-tool-call-inner">
+        <StatusIcon :status="toolStatus" />
+        <span class="bk-agent-tool-call-name">{{
+          label || formatToolName(tool)
+        }}</span>
+        <button
+          v-if="details != null && detailsComponent"
+          class="bk-agent-tool-details-toggle"
+          :class="{ 'bk-is-expanded': isExpanded }"
+          @click="isExpanded = !isExpanded"
+        >
+          <Icon name="bk_mdi_keyboard_arrow_down" />
+        </button>
+      </div>
+      <TransitionHeight
+        v-if="details != null && detailsComponent"
+        :duration="200"
+        opacity
+      >
+        <div v-if="isExpanded" class="bk-agent-tool-details">
+          <div class="bk-agent-tool-details-inner">
+            <component :is="detailsComponent" :details="details" />
+          </div>
+        </div>
+      </TransitionHeight>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "#imports";
-import { StatusIcon } from "#blokkli/editor/components";
+import { computed, ref } from "#imports";
+import { StatusIcon, Icon, TransitionHeight } from "#blokkli/editor/components";
 const props = defineProps({
   id: { type: String, required: true },
   timestamp: { type: Number, required: true },
@@ -20,8 +41,11 @@ const props = defineProps({
   tool: { type: String, required: true },
   label: { type: String, required: true },
   status: { type: String, required: true },
-  isActive: { type: Boolean, required: false }
+  isActive: { type: Boolean, required: false },
+  details: { type: null, required: false },
+  detailsComponent: { type: null, required: false }
 });
+const isExpanded = ref(false);
 const toolStatus = computed(() => {
   if (props.isActive) return "active";
   return props.status;