@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/modules/agent/index.d.mts

@@ -1,8 +1,9 @@
-import { B as BlokkliModule } from '../../shared/editor.Bpw1EP57.mjs';
+import { B as BlokkliModule } from '../../shared/editor.D28NbXr3.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';
 import '../../../dist/global/types/theme.js';
+import '../../../dist/global/types/colorOptions.js';
 import '@nuxt/kit';
 import '../../../dist/global/types/features.js';
 

package/dist/modules/agent/index.mjs

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 import * as path from 'node:path';
 import { defineBlokkliModule } from '../index.mjs';
 import * as fs from 'node:fs';
-import { C as Collector, a as CollectedFile, e as extractStringProperty } from '../../shared/editor.FygP6XeF.mjs';
+import { C as Collector, a as CollectedFile, b as extractStringProperty } from '../../shared/editor.Gu7mgJ5Q.mjs';
 import { d as defineCodeTemplate } from '../../shared/editor.6D5vApr0.mjs';
 import MagicString from 'magic-string';
 import { parse } from 'acorn';
@@ -17,10 +17,11 @@ function toImportName(prefix, fileName) {
   return `${prefix}${name}`;
 }
 class CollectedAgentFile extends CollectedFile {
-  constructor(filePath, fileContents, composable, importPrefix) {
+  constructor(filePath, fileContents, composable, importPrefix, requiresName) {
     super(filePath, fileContents);
     this.composable = composable;
     this.importPrefix = importPrefix;
+    this.requiresName = requiresName;
   }
   item = null;
   async handleChange() {
@@ -37,6 +38,11 @@ class CollectedAgentFile extends CollectedFile {
       [this.composable],
       "name"
     );
+    if (this.requiresName && !name) {
+      console.warn(
+        `[blokkli agent] ${this.filePath}: \`${this.composable}\` definition has no static string \`name\`. It will be excluded from the generated definitions. Use a string literal for \`name\`.`
+      );
+    }
     this.item = {
       filePath: this.filePath,
       importName,
@@ -89,7 +95,8 @@ class AgentCollector extends Collector {
       filePath,
       fileContents,
       this.options.composable,
-      this.options.importPrefix
+      this.options.importPrefix,
+      this.options.requiresName ?? false
     );
   }
   getDependencyTypes() {
@@ -299,7 +306,7 @@ function createServerTemplate(options) {
       }
       const toolDefinitionsExport = tools.length === 0 ? `export const toolDefinitions = []` : `export const toolDefinitions = [
   ${tools.map((t) => t.importName).join(",\n  ")},
-].filter(v => v !== null)`;
+]`;
       const originsJson = JSON.stringify(allowedFetchOrigins, null, 2);
       return `${imports.join("\n")}
 
@@ -349,9 +356,7 @@ const PROPERTIES_TO_KEEP = /* @__PURE__ */ new Set([
   "modes",
   "lazy",
   "volatile",
-  "requiredAdapterMethods",
-  "requiredFeatures",
-  "resolve"
+  "requiredAdapterMethods"
 ]);
 function agentToolStripPlugin() {
   return {
@@ -650,6 +655,7 @@ export default defineNuxtConfig({
       composable: "defineBlokkliAgentTool",
       importPrefix: "tool",
       dependency: "agent-mcp-tools",
+      requiresName: true,
       dirs: [
         moduleToolsDir,
         projectToolsDir,
@@ -689,6 +695,7 @@ export default defineNuxtConfig({
       composable: "defineBlokkliAgentSkill",
       importPrefix: "skill",
       dependency: "agent-server",
+      requiresName: true,
       dirs: [
         moduleSkillsDir,
         projectSkillsDir,

package/dist/modules/agent/runtime/app/components/Attachment/PreviewCode/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <pre
+    class="_bk_text-sm _bk_overflow-auto _bk_bg-mono-100 _bk_rounded _bk_p-15"
+  ><code class="_bk_font-mono">{{ content }}</code></pre>
+</template>
+
+<script setup>
+defineProps({
+  content: { type: String, required: true }
+});
+</script>

package/dist/modules/agent/runtime/app/components/Attachment/PreviewCsv/index.vue

@@ -0,0 +1,56 @@
+<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>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-agent-attachment-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+.bk-agent-attachment-table th,.bk-agent-attachment-table td {
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-inline: 10px;
+  padding-block: 5px;
+  text-align: left;
+}
+.bk-agent-attachment-table th {
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.bk-agent-attachment-table tr:hover td {
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+}
+</style>

package/dist/modules/agent/runtime/app/{features/agent/Panel/Attachment/PreviewCode → components/Attachment/PreviewHtml}/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <pre class="bk-agent-attachment-code"><code>{{ content }}</code></pre>
+  <div class="_bk_whitespace-normal bk-agent-message-text" v-html="content" />
 </template>
 
 <script setup>

package/dist/modules/agent/runtime/app/components/Attachment/PreviewMarkdown/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <Markdown class="_bk_whitespace-normal bk-agent-message-text" :content />
+</template>
+
+<script setup>
+import Markdown from "#blokkli/agent/app/components/Markdown/index.vue";
+defineProps({
+  content: { type: String, required: true }
+});
+</script>

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Attachment/index.d.vue.ts

@@ -2,6 +2,7 @@ import type { Attachment } from '#blokkli/agent/app/types';
 type __VLS_Props = {
     attachment: Attachment;
     removable?: boolean;
+    inverted?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: () => any;

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Attachment/index.vue

@@ -1,21 +1,30 @@
 <template>
-  <div class="bk-agent-attachment">
+  <div class="_bk_relative _bk_max-w-full _bk_min-w-0">
     <button
       v-if="removable"
       :title="$t('aiAgentRemoveAttachment', 'Remove attachment')"
-      class="bk-agent-attachment-close"
+      class="_bk_absolute _bk_-top-5 _bk_-right-5 _bk_bg-white _bk_border _bk_border-mono-300 _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_shrink-0 _bk_cursor-pointer _bk_rounded-full _bk_text-mono-700 _bk_hover:bg-red-normal _bk_hover:text-white _bk_hover:border-red-normal"
       @click="$emit('remove')"
     >
-      <Icon name="bk_mdi_close" />
+      <Icon name="bk_mdi_close" class="_bk_size-15" />
     </button>
     <button
-      class="bk-agent-attachment-text"
       :title="$t('aiAgentViewAttachment', 'View attachment')"
+      class="_bk_p-10 _bk_text-xs _bk_rounded _bk_border _bk_w-full _bk_text-left"
+      :class="{
+  '_bk_bg-accent-50 _bk_border-accent-300 _bk_text-accent-700/70 _bk_hover:bg-accent-100 _bk_hover:border-accent-400': !inverted,
+  '_bk_bg-accent-800 _bk_border-accent-500 _bk_text-white/70 _bk_hover:bg-accent-900 _bk_hover:border-accent-400': inverted
+}"
       @click="showAttachment = true"
     >
-      <div>
-        <span class="bk-agent-attachment-title">{{ title }}</span>
-        <span class="bk-agent-attachment-preview">{{ preview }}</span>
+      <div class="_bk_line-clamp-4">
+        <span
+          class="_bk_font-semibold _bk_mb-2 _bk_uppercase _bk_tracking-wider _bk_block"
+          :class="inverted ? '_bk_text-white' : '_bk_text-accent-800'"
+        >
+          {{ title }}
+        </span>
+        <span class="_bk_break-all">{{ preview }}</span>
       </div>
     </button>
   </div>
@@ -27,10 +36,12 @@
         :title
         :width="1200"
         hide-buttons
-        class="bk-agent-attachment-modal"
+        flush
         @cancel="showAttachment = false"
       >
-        <component :is="previewComponent" :content="bodyContent" />
+        <div class="_bk_p-10 _bk_whitespace-pre-wrap _bk_select-text">
+          <component :is="previewComponent" :content="bodyContent" />
+        </div>
       </DialogModal>
     </BlokkliTransition>
   </Teleport>
@@ -56,7 +67,8 @@ const PREVIEW_COMPONENTS = {
 };
 const props = defineProps({
   attachment: { type: Object, required: true },
-  removable: { type: Boolean, required: false }
+  removable: { type: Boolean, required: false },
+  inverted: { type: Boolean, required: false }
 });
 defineEmits(["remove"]);
 const { $t, ui } = useBlokkli();

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Attachment/index.vue.d.ts

@@ -2,6 +2,7 @@ import type { Attachment } from '#blokkli/agent/app/types';
 type __VLS_Props = {
     attachment: Attachment;
     removable?: boolean;
+    inverted?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: () => any;

package/dist/modules/agent/runtime/app/components/Conversation/InlineFeedback/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { AgentConversationFeedbackItem } from '#blokkli/agent/app/features/agent/types';
+type __VLS_Props = {
+    entry: AgentConversationFeedbackItem;
+};
+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/components/Conversation/InlineFeedback/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="bk-agent-inline-feedback _bk_flex _bk_items-center _bk_gap-10 _bk_p-10 _bk_my-10 _bk_rounded-xl _bk_border _bk_border-mono-200"
+  >
+    <span
+      class="_bk_shrink-0 _bk_size-25 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center _bk_bg-scheme-normal _bk_text-scheme-text _bk_mt-2"
+      :class="'bk-scheme-' + option.theme"
+    >
+      <Icon :name="option.icon" class="_bk_size-[14px]" />
+    </span>
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div
+        class="_bk_text-sm"
+        :class="{
+  '_bk_italic _bk_text-mono-500': !entry.comment,
+  '_bk_text-mono-900': entry.comment
+}"
+      >
+        {{ entry.comment || $t("agentRatingsNoComment", "No comment") }}
+      </div>
+      <div class="_bk_text-xs _bk_text-mono-500 _bk_flex _bk_items-center _bk_gap-5 _bk_flex-wrap">
+        <RelativeTime :timestamp="entry.createdAt" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon, RelativeTime } from "#blokkli/editor/components";
+import { useAgentFeedbackOptions } from "#blokkli/agent/app/composables";
+const props = defineProps({
+  entry: { type: Object, required: true }
+});
+const { $t } = useBlokkli();
+const options = useAgentFeedbackOptions();
+const option = computed(
+  () => options.value.find((o) => o.value === props.entry.rating) ?? options.value[0]
+);
+</script>

package/dist/modules/agent/runtime/app/components/Conversation/InlineFeedback/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AgentConversationFeedbackItem } from '#blokkli/agent/app/features/agent/types';
+type __VLS_Props = {
+    entry: AgentConversationFeedbackItem;
+};
+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/components/Conversation/Item/Assistant/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="bk-agent-message bk-is-assistant bk-agent-assistant-bubble">
+    <Markdown class="bk-agent-message-text" :content="renderedContent" />
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import Markdown from "#blokkli/agent/app/components/Markdown/index.vue";
+import { PLACEHOLDER_USER_NAME } from "#blokkli/agent/shared/placeholders";
+const props = defineProps({
+  id: { type: String, required: true },
+  timestamp: { type: Number, required: true },
+  type: { type: String, required: true },
+  content: { type: String, required: true }
+});
+const { state } = useBlokkli();
+const renderedContent = computed(
+  () => props.content.replaceAll(
+    PLACEHOLDER_USER_NAME,
+    state.owner.value?.name || ""
+  )
+);
+</script>

package/dist/modules/agent/runtime/app/components/Conversation/Item/Bubble/Tool/index.d.vue.ts

@@ -0,0 +1,20 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    text: string;
+    icon?: BlokkliIcon;
+    status?: 'pending' | 'active' | 'success' | 'error';
+    expandable?: boolean;
+};
+declare var __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/modules/agent/runtime/app/components/Conversation/Item/Bubble/Tool/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="bk-agent-assistant-bubble bk-is-tool">
+    <div class="bk-agent-tool-call">
+      <div class="_bk_flex _bk_items-start _bk_text-sm _bk_gap-5">
+        <StatusIcon v-if="status" :status class="_bk_shrink-0" />
+        <Icon
+          v-else-if="icon"
+          :name="icon"
+          class="_bk_shrink-0 _bk_size-20 _bk_text-mono-500"
+        />
+        <span class="_bk_flex-1 _bk_break-words _bk_min-w-0">{{ text }}</span>
+        <button
+          v-if="$slots.default && expandable"
+          class="_bk_shrink-0 _bk_size-18 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-mono-500 _bk_hover:text-mono-900 _bk_hover:bg-mono-200"
+          :class="{ 'bk-is-expanded': isExpanded }"
+          @click="isExpanded = !isExpanded"
+        >
+          <Icon
+            name="bk_mdi_keyboard_arrow_down"
+            class="_bk_size-15 _bk_fill-current _bk_transition-transform _bk_duration-200 _bk_ease-swing"
+            :class="{
+  '_bk_rotate-180': isExpanded
+}"
+          />
+        </button>
+      </div>
+      <TransitionHeight
+        v-if="$slots.default && expandable"
+        :duration="200"
+        opacity
+      >
+        <div v-if="isExpanded" class="bk-agent-tool-details">
+          <div class="_bk_pt-10">
+            <slot />
+          </div>
+        </div>
+      </TransitionHeight>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "#imports";
+import { Icon, StatusIcon, TransitionHeight } from "#blokkli/editor/components";
+defineProps({
+  text: { type: String, required: true },
+  icon: { type: null, required: false },
+  status: { type: String, required: false },
+  expandable: { type: Boolean, required: false }
+});
+const isExpanded = ref(false);
+</script>

package/dist/modules/agent/runtime/app/components/Conversation/Item/Bubble/Tool/index.vue.d.ts

@@ -0,0 +1,20 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    text: string;
+    icon?: BlokkliIcon;
+    status?: 'pending' | 'active' | 'success' | 'error';
+    expandable?: boolean;
+};
+declare var __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Item/Error/index.d.vue.ts

@@ -1,8 +1,9 @@
+import type { AgentErrorType } from '#blokkli/agent/shared/types';
 type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'error';
-    errorType: 'authentication' | 'rate_limit' | 'overloaded' | 'not_found' | 'bad_request' | 'connection' | 'unauthorized' | 'unknown';
+    errorType: AgentErrorType;
     retryable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Item/Error/index.vue

@@ -1,28 +1,18 @@
 <template>
-  <div class="bk-agent-error-bubble">
-    <Icon name="bk_mdi_priority_high" />
-    <span>{{ errorMessage }}</span>
-    <button
-      v-if="retryable"
-      class="bk-agent-error-retry"
-      @click="emit('retry')"
-    >
-      {{ $t("aiAgentRetry", "Retry") }}
-    </button>
-  </div>
+  <ErrorBubble :text="errorMessage" retryable @retry="$emit('retry')" />
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import ErrorBubble from "../ErrorBubble/index.vue";
 const props = defineProps({
   id: { type: String, required: true },
   timestamp: { type: Number, required: true },
   type: { type: String, required: true },
-  errorType: { type: String, required: true },
+  errorType: { type: null, required: true },
   retryable: { type: Boolean, required: false }
 });
-const emit = defineEmits(["retry"]);
+defineEmits(["retry"]);
 const { $t } = useBlokkli();
 const errorMessage = computed(() => {
   switch (props.errorType) {

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Item/Error/index.vue.d.ts

@@ -1,8 +1,9 @@
+import type { AgentErrorType } from '#blokkli/agent/shared/types';
 type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'error';
-    errorType: 'authentication' | 'rate_limit' | 'overloaded' | 'not_found' | 'bad_request' | 'connection' | 'unauthorized' | 'unknown';
+    errorType: AgentErrorType;
     retryable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/modules/agent/runtime/app/components/Conversation/Item/ErrorBubble/index.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    text: string;
+    retryable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/components/Conversation/Item/ErrorBubble/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="_bk_flex _bk_items-start _bk_gap-8 _bk_p-10 _bk_rounded-xl _bk_my-15 _bk_bg-red-light _bk_text-red-dark _bk_text-sm"
+  >
+    <Icon
+      name="bk_mdi_priority_high"
+      class="_bk_size-18 _bk_shrink-0 _bk_bg-red-normal _bk_text-white _bk_rounded-full _bk_p-2"
+    />
+    <span>{{ text }}</span>
+    <button
+      v-if="retryable"
+      class="_bk_text-red-dark _bk_font-bold _bk_underline _bk_cursor-pointer _bk_ml-auto"
+      @click.prevent="$emit('retry')"
+    >
+      {{ $t("aiAgentRetry", "Retry") }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  text: { type: String, required: true },
+  retryable: { type: Boolean, required: false }
+});
+defineEmits(["retry"]);
+const { $t } = useBlokkli();
+</script>

package/dist/modules/agent/runtime/app/components/Conversation/Item/ErrorBubble/index.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    text: string;
+    retryable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,8 +1,9 @@
+import type { ServerToolName } from '#blokkli/agent/app/types';
 type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'server_tool';
-    tool: 'load_skills' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
+    tool: ServerToolName;
     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 → components}/Conversation/Item/ServerTool/index.vue

@@ -1,29 +1,19 @@
 <template>
-  <div class="bk-agent-assistant-bubble bk-is-tool bk-is-server-tool">
-    <div class="bk-agent-tool-call bk-is-server-tool">
-      <div class="bk-agent-tool-call-inner">
-        <Icon
-          :name="getServerSideToolIcon(tool)"
-          class="bk-agent-tool-call-status"
-        />
-        <span>{{ serverToolLabel }}</span>
-      </div>
-    </div>
-  </div>
+  <BubbleTool :text :icon />
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import BubbleTool from "../Bubble/Tool/index.vue";
 const props = defineProps({
   id: { type: String, required: true },
   timestamp: { type: Number, required: true },
   type: { type: String, required: true },
-  tool: { type: String, required: true },
+  tool: { type: null, required: true },
   label: { type: String, required: true }
 });
 const { $t } = useBlokkli();
-const serverToolLabel = computed(() => {
+const text = computed(() => {
   if (props.tool === "load_skills") {
     return $t("aiAgentLoadSkill", 'Using skill "@label"').replace(
       "@label",
@@ -56,19 +46,16 @@ const serverToolLabel = computed(() => {
   }
   return props.label;
 });
-function getServerSideToolIcon(id) {
-  if (id === "load_skills") {
+const icon = computed(() => {
+  if (props.tool === "load_skills") {
     return "bk_mdi_book_2";
-  }
-  if (id === "create_plan") {
+  } else if (props.tool === "create_plan") {
     return "bk_mdi_inventory";
-  }
-  if (id === "complete_plan_step") {
+  } else if (props.tool === "complete_plan_step") {
     return "bk_mdi_check";
-  }
-  if (id === "plan_completed") {
+  } else if (props.tool === "plan_completed") {
     return "bk_mdi_done_all";
   }
   return "bk_mdi_build-fill";
-}
+});
 </script>

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

@@ -1,8 +1,9 @@
+import type { ServerToolName } from '#blokkli/agent/app/types';
 type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'server_tool';
-    tool: 'load_skills' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
+    tool: ServerToolName;
     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>;