@blokkli/editor 2.0.0-alpha.34 → 2.0.0-alpha.36

package/dist/global/types/blockOptions.d.ts

@@ -344,7 +344,14 @@ type DefinitionOptionRadiosBase<Icon extends string = string> = {
      */
     group?: string;
 } & (DefinitionOptionRadiosColors | DefinitionOptionRadiosGrid | DefinitionOptionRadiosRadios | DefinitionOptionRadiosIconsBase<Icon>);
-export type BlockOptionDefinitionBase<Icon extends string = string> = DefinitionOptionColor | DefinitionOptionCheckbox | DefinitionOptionCheckboxes | DefinitionOptionRadiosBase<Icon> | DefinitionOptionText | DefinitionOptionRange | DefinitionOptionNumber | DefinitionOptionDateTimeLocal;
+type DefinitionOptionJson = {
+    type: 'json';
+    label: string;
+    default: string;
+    description?: string;
+    group?: string;
+};
+export type BlockOptionDefinitionBase<Icon extends string = string> = DefinitionOptionJson | DefinitionOptionColor | DefinitionOptionCheckbox | DefinitionOptionCheckboxes | DefinitionOptionRadiosBase<Icon> | DefinitionOptionText | DefinitionOptionRange | DefinitionOptionNumber | DefinitionOptionDateTimeLocal;
 /**
  * Runtime block option array with validation data.
  * The third element varies by option type:
@@ -353,7 +360,7 @@ export type BlockOptionDefinitionBase<Icon extends string = string> = Definition
  * - datetime-local: optional [min?, max?] tuple
  * - other types: no third element
  */
-export type RuntimeBlockOptionArray = ['text', string] | ['checkbox', boolean] | ['color', `#${string}`] | ['radios', string, string[]] | ['checkboxes', string[], string[]] | ['number', number, [number, number]] | ['range', number, [number, number]] | ['datetime-local', string | undefined] | [
+export type RuntimeBlockOptionArray = ['text', string] | ['json', string] | ['checkbox', boolean] | ['color', `#${string}`] | ['radios', string, string[]] | ['checkboxes', string[], string[]] | ['number', number, [number, number]] | ['range', number, [number, number]] | ['datetime-local', string | undefined] | [
     'datetime-local',
     string | undefined,
     [

package/dist/global/types/definitions.d.ts

@@ -15,7 +15,14 @@ export type BlockDefinitionRenderForFieldListBase<FieldListTypes extends string
 export type BlockDefinitionRenderForFieldListTypeBase<FieldListTypes extends string = string> = {
     fieldListType: FieldListTypes;
 };
-export type BlockDefinitionRenderForBase<BundleWithNested extends string = string, FieldListTypes extends string = string> = BlockDefinitionRenderForParentBase<BundleWithNested> | BlockDefinitionRenderForFieldListBase<FieldListTypes> | BlockDefinitionRenderForFieldListTypeBase<FieldListTypes>;
+export type BlockDefinitionRenderForProviderTypeBase<ProviderType extends string = string> = {
+    providerType: ProviderType;
+};
+export type PropsFieldMapping = {
+    type: 'editable' | 'droppable' | 'field';
+    name: string;
+};
+export type BlockDefinitionRenderForBase<BundleWithNested extends string = string, FieldListTypes extends string = string, ProviderType extends string = string> = BlockDefinitionRenderForParentBase<BundleWithNested> | BlockDefinitionRenderForFieldListBase<FieldListTypes> | BlockDefinitionRenderForFieldListTypeBase<FieldListTypes> | BlockDefinitionRenderForProviderTypeBase<ProviderType>;
 export type BlokkliDefinitionInputEditorBase<Options extends BlockDefinitionOptionsInputBase = BlockDefinitionOptionsInputBase, Icon extends string = string, PropsType = Record<string, any>> = {
     /**
      * The icon rendered in the editor.
@@ -152,7 +159,7 @@ export type BlokkliDefinitionInputEditorBase<Options extends BlockDefinitionOpti
      */
     mapDiffProps?: (props?: PropsType) => Record<string, string>;
 };
-export type BlockDefinitionInputBase<Options extends BlockDefinitionOptionsInputBase = BlockDefinitionOptionsInputBase, GlobalOptions extends string[] | undefined = string[], Bundle extends string = string, ChunkNames extends string = string, BundleWithNested extends string = string, FieldListTypes extends string = string, Icon extends string = string, BundlePropsMap extends Record<string, Record<string, any>> = Record<string, Record<string, any>>> = {
+export type BlockDefinitionInputBase<Options extends BlockDefinitionOptionsInputBase = BlockDefinitionOptionsInputBase, GlobalOptions extends string[] | undefined = string[], Bundle extends string = string, ChunkNames extends string = string, BundleWithNested extends string = string, FieldListTypes extends string = string, Icon extends string = string, BundlePropsMap extends Record<string, Record<string, any>> = Record<string, Record<string, any>>, ProviderTypes extends string = string> = {
     /**
      * The bundle ID of the block, e.g. "text" or "section_title".
      */
@@ -162,7 +169,7 @@ export type BlockDefinitionInputBase<Options extends BlockDefinitionOptionsInput
      * If a bundle is defined, then this component will be rendered if the
      * parent matches the given bundle.
      */
-    renderFor?: BlockDefinitionRenderForBase<BundleWithNested, FieldListTypes> | BlockDefinitionRenderForBase<BundleWithNested, FieldListTypes>[];
+    renderFor?: BlockDefinitionRenderForBase<BundleWithNested, FieldListTypes, ProviderTypes> | BlockDefinitionRenderForBase<BundleWithNested, FieldListTypes, ProviderTypes>[];
     /**
      * The name of the chunk group.
      *
@@ -216,7 +223,7 @@ export type BlockDefinitionInputBase<Options extends BlockDefinitionOptionsInput
      * </script>
      * ```
      */
-    propsFieldMapping?: Bundle extends keyof BundlePropsMap ? Partial<Record<keyof BundlePropsMap[Bundle], string>> : never;
+    propsFieldMapping?: Bundle extends keyof BundlePropsMap ? Record<keyof BundlePropsMap[Bundle], PropsFieldMapping | null> : Record<string, PropsFieldMapping | null>;
 };
 export type FragmentDefinitionInputBase<Options extends BlockDefinitionOptionsInputBase = BlockDefinitionOptionsInputBase, GlobalOptions extends string[] | undefined = string[], ChunkNames extends string = string, Icon extends string = string> = {
     /**
@@ -274,5 +281,5 @@ export type ProviderDefinitionInputBase<Options extends BlockDefinitionOptionsIn
      * These options will be merged with the component-specific options.
      */
     globalOptions?: GlobalOptions;
-    propsFieldMapping?: Record<string, string>;
+    propsFieldMapping?: Record<string, PropsFieldMapping | null>;
 };

package/dist/module.d.mts

@@ -1,6 +1,6 @@
 import { NuxtModule } from 'nuxt/schema';
-import { M as ModuleOptions } from './shared/editor.Iax3GCvt.mjs';
-export { a as ModuleHooks } from './shared/editor.Iax3GCvt.mjs';
+import { M as ModuleOptions } from './shared/editor.CWQIFIEQ.mjs';
+export { a as ModuleHooks } from './shared/editor.CWQIFIEQ.mjs';
 import 'consola';
 import '../dist/global/types/definitions.js';
 import '../dist/global/types/theme.js';

package/dist/module.json

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

package/dist/module.mjs

@@ -8,16 +8,17 @@ import * as ts from 'typescript';
 import { parseAndWalk } from 'oxc-walker';
 import path__default, { basename, dirname as dirname$1 } from 'node:path';
 import { dirname, resolve, relative } from 'pathe';
-import { C as Collector, a as CollectedFile, d as defineCodeTemplate, b as defineFileTemplate, w as withHelper } from './shared/editor.DMFfaLVE.mjs';
+import { C as Collector, a as CollectedFile } from './shared/editor.BFIzNSQM.mjs';
 import micromatch from 'micromatch';
 import { hash } from 'ohash';
 import fs__default, { readFileSync, existsSync, readdirSync } from 'node:fs';
 import { LANGUAGES, BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from './global/constants';
 import { createRequire } from 'node:module';
+import { d as defineCodeTemplate, a as defineFileTemplate, w as withHelper } from './shared/editor.6D5vApr0.mjs';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.34";
+const version = "2.0.0-alpha.36";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -277,6 +278,8 @@ function getVariations(definition) {
         return `block:${bundle}__p:${v.parentBundle}`;
       } else if ("fieldList" in v) {
         return `block:${bundle}__f:${v.fieldList}`;
+      } else if ("providerType" in v) {
+        return `block:${bundle}__t:${v.providerType}`;
       } else {
         return `block:${bundle}__f:${v.fieldListType}`;
       }
@@ -1140,6 +1143,10 @@ class ModuleHelper {
     if (!fieldListTypes.includes("default")) {
       fieldListTypes.push("default");
     }
+    const providerTypes = providedOptions.providerTypes || [];
+    if (!providerTypes.includes("default")) {
+      providerTypes.push("default");
+    }
     const chunkNames = providedOptions.chunkNames || [];
     if (!chunkNames.includes("global")) {
       chunkNames.push("global");
@@ -1148,6 +1155,7 @@ class ModuleHelper {
       ...providedOptions,
       pattern,
       fieldListTypes: fieldListTypes.filter(onlyUnique),
+      providerTypes: providerTypes.filter(onlyUnique),
       chunkNames: chunkNames.filter(onlyUnique)
     };
     this.paths.editAdapter = this.findEditAdapterPath();
@@ -1261,7 +1269,17 @@ class ModuleContext {
   templates = [];
   templateContents = /* @__PURE__ */ new Map();
   adapterExtensions = [];
+  featureFragments = /* @__PURE__ */ new Set();
   collectors = [];
+  addFeatureFragment(name) {
+    if (this.featureFragments.has(name)) {
+      throw new Error(`A feature fragment with name "${name}" already exists.`);
+    }
+    this.featureFragments.add(name);
+  }
+  getFeatureFragmentNames() {
+    return [...this.featureFragments.values()];
+  }
   registerAdapterExtension(namespace, path) {
     if (this.adapterExtensions.some((e) => e.namespace === namespace)) {
       throw new Error(`Duplicate adapter extension namespace: ${namespace}`);
@@ -1469,9 +1487,12 @@ function toTypeLiteral(value) {
 const USED_MATERIAL_ICONS = [
   "bk_mdi_account_tree",
   "bk_mdi_add",
+  "bk_mdi_add_column_right",
   "bk_mdi_add_comment",
+  "bk_mdi_add_row_below",
   "bk_mdi_anchor",
   "bk_mdi_architecture",
+  "bk_mdi_area_chart",
   "bk_mdi_arrow_downward",
   "bk_mdi_arrow_drop_down",
   "bk_mdi_arrow_left",
@@ -1504,6 +1525,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_dock_to_left",
   "bk_mdi_dock_to_right",
   "bk_mdi_done_all",
+  "bk_mdi_donut_large",
   "bk_mdi_drag_pan",
   "bk_mdi_edit",
   "bk_mdi_exit_to_app",
@@ -1530,10 +1552,12 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_palette",
   "bk_mdi_person",
   "bk_mdi_person-fill",
+  "bk_mdi_pie_chart",
   "bk_mdi_priority_high",
   "bk_mdi_publish",
   "bk_mdi_qr_code",
   "bk_mdi_question_mark",
+  "bk_mdi_radar",
   "bk_mdi_radio_button_checked",
   "bk_mdi_redo",
   "bk_mdi_remove",
@@ -1548,6 +1572,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_sentiment_dissatisfied",
   "bk_mdi_sentiment_worried",
   "bk_mdi_settings",
+  "bk_mdi_show_chart",
   "bk_mdi_speed",
   "bk_mdi_stack_group",
   "bk_mdi_stop",
@@ -1557,6 +1582,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_text_select_end",
   "bk_mdi_texture",
   "bk_mdi_title",
+  "bk_mdi_track_changes",
   "bk_mdi_trackpad_input",
   "bk_mdi_translate",
   "bk_mdi_tune",
@@ -2686,6 +2712,7 @@ const editorConfig = defineCodeTemplate(
   "editor-config",
   (ctx) => {
     const settingsOverride = ctx.helper.options.settingsOverride || {};
+    const featureFragmentNames = ctx.getFeatureFragmentNames();
     return `
 export const hasCustomTheme = ${JSON.stringify(ctx.theme.hasCustomTheme)}
 
@@ -2708,6 +2735,8 @@ export const defaultLanguage = ${JSON.stringify(
 export const forceDefaultLanguage = ${JSON.stringify(
       !!ctx.helper.options.forceDefaultLanguage
     )}
+
+export const featureFragmentNames = ${JSON.stringify(featureFragmentNames)}
 `;
   },
   (ctx) => {
@@ -2760,6 +2789,11 @@ export declare const templateEntityType: string | null
  * Whether to always force the default language, even on translation pages.
  */
 export declare const forceDefaultLanguage: boolean
+
+/**
+ * The fragment names provided by features.
+ */
+export declare const featureFragmentNames: string[]
 `;
   }
 );
@@ -2978,6 +3012,8 @@ function toRuntimeOptionArray(option) {
     return [option.type, option.default];
   } else if (option.type === "color") {
     return [option.type, option.default];
+  } else if (option.type === "json") {
+    return [option.type, option.default];
   }
   return [option.type, option.default];
 }
@@ -3026,9 +3062,20 @@ const runtimeOptions = defineCodeTemplate(
       });
       if (isBlock(item.definition)) {
         if (item.definition.propsFieldMapping) {
+          const mapping = Object.entries(
+            item.definition.propsFieldMapping
+          ).reduce(
+            (acc, [propName, mapping2]) => {
+              if (mapping2) {
+                acc[propName] = [mapping2.type, mapping2.name];
+              }
+              return acc;
+            },
+            {}
+          );
           FIELD_MAPPING.set(
             item.definition.bundle,
-            JSON.stringify(item.definition.propsFieldMapping, null, 2)
+            JSON.stringify(mapping, null, 2)
           );
         }
       }
@@ -3094,8 +3141,10 @@ export type RuntimeBlockOptions = {
 ${runtimeMappedOptionTypes}
 }
 
+export type PropsFieldMappingType = 'editable' | 'droppable' | 'field'
+
 export declare const OPTIONS: Record<string, Record<string, RuntimeBlockOptionArray>>
-export declare const FIELD_MAPPING: Record<string, Record<string, string>>
+export declare const FIELD_MAPPING: Record<string, Record<string, [PropsFieldMappingType, string]>>
 `;
   },
   {
@@ -3191,6 +3240,7 @@ const generatedTypes = defineCodeTemplate(
     };
     const chunkNames = ctx.helper.options.chunkNames || ["global"];
     const fieldListTypes = ctx.helper.options.fieldListTypes || ["default"];
+    const providerTypes = ctx.helper.options.providerTypes || ["default"];
     const globalOptions = ctx.helper.options.globalOptions || {};
     const validGlobalOptions = Object.keys(globalOptions);
     const blockBundlesWithNested = [];
@@ -3250,6 +3300,8 @@ import type { FieldListItem } from "${ctx.helper.relativePaths.TYPES}"
 
 export type ValidFieldListTypes = ${toStringUnion(fieldListTypes)}
 
+export type ValidProviderTypes = ${toStringUnion(providerTypes)}
+
 export type BlockBundle = ${toStringUnion(validBlockBundles)}
 
 export type BlockBundleWithNested = ${toStringUnion(blockBundlesWithNested)}

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

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.Iax3GCvt.mjs';
+import { B as BlokkliModule } from '../../shared/editor.CWQIFIEQ.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/agent/index.mjs

@@ -3,7 +3,8 @@ import { fileURLToPath } from 'node:url';
 import * as path from 'node:path';
 import { d as defineBlokkliModule } from '../../shared/editor.CGf7C_0M.mjs';
 import * as fs from 'node:fs';
-import { C as Collector, a as CollectedFile, d as defineCodeTemplate } from '../../shared/editor.DMFfaLVE.mjs';
+import { C as Collector, a as CollectedFile } from '../../shared/editor.BFIzNSQM.mjs';
+import { d as defineCodeTemplate } from '../../shared/editor.6D5vApr0.mjs';
 
 function toImportName(prefix, fileName) {
   const name = fileName.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
@@ -90,7 +91,7 @@ class AgentCollector extends Collector {
   }
 }
 
-function createClientTemplate(toolCollector, promptCollector, defaultPrompts, models, agentName) {
+function createClientTemplate(toolCollector, promptCollector, options) {
   return defineCodeTemplate(
     "agent-client",
     (ctx) => {
@@ -126,10 +127,15 @@ function createClientTemplate(toolCollector, promptCollector, defaultPrompts, mo
         );
       }
       exports$1.push(
-        `export const defaultPrompts = ${JSON.stringify(defaultPrompts)}`
+        `export const defaultPrompts = ${JSON.stringify(options.defaultPrompts ?? [])}`
+      );
+      exports$1.push(`export const models = ${JSON.stringify(options.models)}`);
+      exports$1.push(
+        `export const agentName = ${JSON.stringify(options.agentName ?? "Blocki")}`
+      );
+      exports$1.push(
+        `export const hasWebFetch = ${JSON.stringify(!!options.allowedFetchOrigins)}`
       );
-      exports$1.push(`export const models = ${JSON.stringify(models)}`);
-      exports$1.push(`export const agentName = ${JSON.stringify(agentName)}`);
       const parts = [];
       if (imports.length > 0) {
         parts.push(imports.join("\n"));
@@ -146,6 +152,7 @@ export const agentPrompts: AgentPromptItem[]
 export const defaultPrompts: string[]
 export const agentName: string
 export const models: AgentModelDefinition[]
+export const hasWebFetch: boolean
 `;
     }
   );
@@ -283,15 +290,19 @@ export default defineNuxtConfig({
       "#blokkli/agent/server",
       moduleResolver.resolve("./runtime/server")
     );
+    const moduleBlokkliDirs = ctx.helper.options.blokkliDirs || [];
     const moduleToolsDir = moduleResolver.resolve("./runtime/app/tools");
     const projectToolsDir = path.resolve(nuxt.options.rootDir, "blokkli/tools");
     const mcpTools = new AgentCollector(ctx.helper, {
       composable: "defineBlokkliAgentTool",
       importPrefix: "tool",
       dependency: "agent-mcp-tools",
-      dirs: [moduleToolsDir, projectToolsDir]
+      dirs: [
+        moduleToolsDir,
+        projectToolsDir,
+        ...moduleBlokkliDirs.map((d) => path.join(d, "tools"))
+      ]
     });
-    await mcpTools.init();
     ctx.context.addCollector(mcpTools);
     const projectPromptsDir = path.resolve(
       nuxt.options.rootDir,
@@ -301,18 +312,14 @@ export default defineNuxtConfig({
       composable: "defineBlokkliAgentPrompt",
       importPrefix: "prompt",
       dependency: "agent-prompts",
-      dirs: [projectPromptsDir]
+      dirs: [
+        projectPromptsDir,
+        ...moduleBlokkliDirs.map((d) => path.join(d, "prompts"))
+      ]
     });
-    await promptsCollector.init();
     ctx.context.addCollector(promptsCollector);
     ctx.context.addTemplate(
-      createClientTemplate(
-        mcpTools,
-        promptsCollector,
-        options.defaultPrompts || [],
-        options.models,
-        options.agentName ?? "Blocki"
-      )
+      createClientTemplate(mcpTools, promptsCollector, options)
     );
     const relativeToolsDir = path.relative(
       nuxt.options.buildDir,
@@ -326,6 +333,11 @@ export default defineNuxtConfig({
       projectPromptsDir
     );
     nuxt.options.typescript.tsConfig.include.push(relativePromptsDir);
+    for (const dir of moduleBlokkliDirs) {
+      const toolsDir = path.join(dir, "tools");
+      const relDir = path.relative(nuxt.options.buildDir, toolsDir);
+      nuxt.options.typescript.tsConfig.include.push(relDir);
+    }
     const moduleSkillsDir = moduleResolver.resolve(
       "./runtime/server/default-skills"
     );
@@ -337,9 +349,12 @@ export default defineNuxtConfig({
       composable: "defineBlokkliAgentSkill",
       importPrefix: "skill",
       dependency: "agent-server",
-      dirs: [moduleSkillsDir, projectSkillsDir]
+      dirs: [
+        moduleSkillsDir,
+        projectSkillsDir,
+        ...moduleBlokkliDirs.map((d) => path.join(d, "skills"))
+      ]
     });
-    await skillsCollector.init();
     ctx.context.addCollector(skillsCollector);
     const moduleSystemPromptsDir = moduleResolver.resolve(
       "./runtime/server/default-system-prompts"
@@ -352,9 +367,12 @@ export default defineNuxtConfig({
       composable: "defineBlokkliAgentSystemPrompt",
       importPrefix: "systemPrompt",
       dependency: "agent-server",
-      dirs: [moduleSystemPromptsDir, projectSystemPromptsDir]
+      dirs: [
+        moduleSystemPromptsDir,
+        projectSystemPromptsDir,
+        ...moduleBlokkliDirs.map((d) => path.join(d, "system-prompts"))
+      ]
     });
-    await systemPromptCollector.init();
     ctx.context.addCollector(systemPromptCollector);
     ctx.context.addTemplate(
       createServerTemplate({

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

@@ -1,6 +1,6 @@
 import { type Ref } from '#imports';
 import { type Attachment, type ConversationItem, type ActiveItem, type MutationAction } from '#blokkli/agent/app/types';
-import type { ClientPlanState, UsageTurn } from '#blokkli/agent/shared/types';
+import type { ClientPlanState, UsageTurn, Transcript } from '#blokkli/agent/shared/types';
 import type { AgentConversationSummary } from '#blokkli/agent/app/features/agent/types';
 import type { BlokkliApp } from '#blokkli/editor/types/app';
 import type { FullBlokkliAdapter } from '#blokkli/editor/adapter';
@@ -43,7 +43,7 @@ export type AgentProvider = {
     newConversation: () => void;
     getTranscript: () => void;
     onToolComponentDone: (result: unknown) => void;
-    transcriptContent: Ref<string>;
+    transcriptContent: Ref<Transcript | null>;
     showTranscript: Ref<boolean>;
     conversationList: Ref<AgentConversationSummary[]>;
     showConversationList: Ref<boolean>;

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

@@ -38,7 +38,7 @@ export default function(app, adapter, agentName) {
   const pendingToolCall = ref(null);
   let pendingToolCallResolve = null;
   const plan = ref(null);
-  const transcriptContent = ref("");
+  const transcriptContent = ref(null);
   const showTranscript = ref(false);
   const activeConversationId = ref(null);
   const conversationList = ref([]);
@@ -283,7 +283,7 @@ export default function(app, adapter, agentName) {
     send({ type: "init", tools, pageContext });
     isReady.value = true;
     hasBeenReady.value = true;
-    if (adapter.agentConversations) {
+    if (adapter.agentConversations && !pendingPrompt) {
       try {
         const latest = await adapter.agentConversations.loadLatest();
         if (latest) {
@@ -492,7 +492,7 @@ export default function(app, adapter, agentName) {
         }
         break;
       case "transcript":
-        transcriptContent.value = data.content;
+        transcriptContent.value = data.transcript;
         showTranscript.value = true;
         break;
       case "conversation_state":

package/dist/modules/agent/runtime/app/features/agent/Panel/Input/Actions/index.vue

@@ -1,38 +1,34 @@
 <template>
   <div class="bk-agent-input-actions">
     <div class="bk-agent-input-actions-left">
-      <div ref="menuContainer">
-        <button
-          class="bk-button bk-is-white bk-is-small bk-is-icon-only"
-          :title="$t('aiAgentMoreOptions', 'More options')"
-          :disabled="!isConnected"
-          @click="showMenu = !showMenu"
-        >
-          <Icon name="bk_mdi_more_horiz" />
-        </button>
-        <BlokkliTransition name="drop-up">
-          <div v-if="showMenu" class="bk-agent-more-dropdown">
-            <TokenUsage :usage-turns />
-            <hr />
-            <DropdownItem
-              icon="bk_mdi_add"
-              :text="$t('aiAgentNewConversation', 'Start new conversation')"
-              @click="onNewConversation"
-            />
-            <DropdownItem
-              icon="bk_mdi_history"
-              :text="$t('aiAgentPastConversations', 'Past conversations')"
-              @click="onShowConversations"
-            />
-            <hr />
-            <DropdownItem
-              icon="bk_mdi_bug_report"
-              :text="$t('aiAgentShowTranscript', 'Show transcript...')"
-              @click="onShowTranscript"
-            />
+      <Dropdown ref="dropdown" :disabled="!isConnected">
+        <template #button>
+          <div
+            class="bk-button bk-is-white bk-is-small bk-is-icon-only"
+            :title="$t('aiAgentMoreOptions', 'More options')"
+          >
+            <Icon name="bk_mdi_more_horiz" />
           </div>
-        </BlokkliTransition>
-      </div>
+        </template>
+        <TokenUsage :usage-turns />
+        <hr />
+        <DropdownItem
+          icon="bk_mdi_add"
+          :text="$t('aiAgentNewConversation', 'Start new conversation')"
+          @click="onNewConversation"
+        />
+        <DropdownItem
+          icon="bk_mdi_history"
+          :text="$t('aiAgentPastConversations', 'Past conversations')"
+          @click="onShowConversations"
+        />
+        <hr />
+        <DropdownItem
+          icon="bk_mdi_bug_report"
+          :text="$t('aiAgentShowTranscript', 'Show transcript...')"
+          @click="onShowTranscript"
+        />
+      </Dropdown>
     </div>
     <div class="bk-agent-input-actions-right">
       <div v-show="hasText" class="bk-agent-input-actions-keyboard">
@@ -59,15 +55,8 @@
 </template>
 
 <script setup>
-import {
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  useTemplateRef,
-  useBlokkli
-} from "#imports";
-import { Icon, BlokkliTransition } from "#blokkli/editor/components";
-import DropdownItem from "./DropdownItem/index.vue";
+import { useTemplateRef, useBlokkli } from "#imports";
+import { Icon, Dropdown, DropdownItem } from "#blokkli/editor/components";
 import TokenUsage from "./TokenUsage/index.vue";
 defineProps({
   isProcessing: { type: Boolean, required: true },
@@ -77,33 +66,18 @@ defineProps({
   usageTurns: { type: Array, required: true }
 });
 const emit = defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-conversations"]);
-const { $t, eventBus } = useBlokkli();
-const menuContainer = useTemplateRef("menuContainer");
-const showMenu = ref(false);
-function closeMenu() {
-  showMenu.value = false;
-}
-function onDocumentClick(e) {
-  if (!menuContainer.value?.contains(e.target)) {
-    closeMenu();
-  }
-}
-eventBus.on("mouse:up", closeMenu);
-onMounted(() => document.addEventListener("click", onDocumentClick));
-onBeforeUnmount(() => {
-  document.removeEventListener("click", onDocumentClick);
-  eventBus.off("mouse:up", closeMenu);
-});
+const { $t } = useBlokkli();
+const dropdown = useTemplateRef("dropdown");
 function onNewConversation() {
-  showMenu.value = false;
+  dropdown.value?.close();
   emit("new-conversation");
 }
 function onShowConversations() {
-  showMenu.value = false;
+  dropdown.value?.close();
   emit("show-conversations");
 }
 function onShowTranscript() {
-  showMenu.value = false;
+  dropdown.value?.close();
   emit("show-transcript");
 }
 </script>

package/dist/modules/agent/runtime/app/features/agent/Transcript/index.d.vue.ts

@@ -0,0 +1,8 @@
+import type { Transcript } from '#blokkli/agent/shared/types';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    transcript: Transcript;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    transcript: Transcript;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;