@blokkli/editor 2.0.0-alpha.31 → 2.0.0-alpha.33

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

@@ -0,0 +1,30 @@
+<template>
+  <ItemUser v-if="item.type === 'user'" v-bind="item" />
+  <ItemAssistant v-else-if="item.type === 'assistant'" v-bind="item" />
+  <ItemTool
+    v-else-if="item.type === 'tool'"
+    v-bind="item"
+    :is-active="isActive"
+  />
+  <ItemServerTool v-else-if="item.type === 'server_tool'" v-bind="item" />
+  <ItemError
+    v-else-if="item.type === 'error'"
+    v-bind="item"
+    @retry="emit('retry')"
+  />
+  <ItemUnknown v-else-if="item.type === 'unknown'" v-bind="item" />
+</template>
+
+<script setup>
+import ItemUser from "./User/index.vue";
+import ItemAssistant from "./Assistant/index.vue";
+import ItemTool from "./Tool/index.vue";
+import ItemServerTool from "./ServerTool/index.vue";
+import ItemError from "./Error/index.vue";
+import ItemUnknown from "./Unknown/index.vue";
+defineProps({
+  item: { type: null, required: true },
+  isActive: { type: Boolean, required: false }
+});
+const emit = defineEmits(["retry"]);
+</script>

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

@@ -0,0 +1,12 @@
+import type { ConversationItem } from '#blokkli/agent/app/types';
+type __VLS_Props = {
+    item: ConversationItem;
+    isActive?: 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/Conversation/Thinking/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="bk-agent-message bk-is-assistant bk-agent-assistant-bubble">
+    <div class="bk-agent-thinking">
+      <Icon name="loader" />
+      <span>{{ $t("aiAgentThinking", "Thinking...") }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+import { useBlokkli } from "#imports";
+const { $t } = useBlokkli();
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { ConversationItem, ActiveItem } from '#blokkli/agent/app/types';
+type __VLS_Props = {
+    history: ConversationItem[];
+    activeItem: ActiveItem | null;
+    isThinking: 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/Conversation/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="bk-agent-conversation" @click="onClick">
+    <ConversationItemComponent
+      v-for="item in history"
+      :key="item.id"
+      :item="item"
+      @retry="emit('retry')"
+    />
+    <ConversationItemComponent
+      v-if="activeItem"
+      :key="activeItem.id"
+      :item="activeItem"
+      is-active
+    />
+    <Thinking v-if="isThinking" />
+  </div>
+</template>
+
+<script setup>
+import ConversationItemComponent from "./Item/index.vue";
+import Thinking from "./Thinking/index.vue";
+import { useBlokkli } from "#imports";
+defineProps({
+  history: { type: Array, required: true },
+  activeItem: { type: null, required: true },
+  isThinking: { type: Boolean, required: true }
+});
+const emit = defineEmits(["retry"]);
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const { eventBus, dom, blocks } = useBlokkli();
+function onClick(e) {
+  const target = e.target;
+  if (target.tagName !== "A") return;
+  const href = target.getAttribute("href");
+  if (!href || !href.startsWith("#")) return;
+  const uuid = href.slice(1);
+  if (!UUID_REGEX.test(uuid)) return;
+  e.preventDefault();
+  eventBus.emit("scrollIntoView", { uuid, center: true });
+  const block = blocks.getBlock(uuid);
+  if (!block) return;
+  const element = dom.getDragElement(block);
+  if (!element) return;
+  eventBus.emit("highlight", element);
+}
+</script>

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

@@ -0,0 +1,13 @@
+import type { ConversationItem, ActiveItem } from '#blokkli/agent/app/types';
+type __VLS_Props = {
+    history: ConversationItem[];
+    activeItem: ActiveItem | null;
+    isThinking: 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/ConversationList/index.d.vue.ts

@@ -0,0 +1,15 @@
+import type { AgentConversationSummary } from '#blokkli/agent/app/composables';
+type __VLS_Props = {
+    conversations: AgentConversationSummary[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    switch: (id: string) => any;
+    delete: (id: string) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwitch?: ((id: string) => any) | undefined;
+    onDelete?: ((id: string) => any) | undefined;
+    onClose?: (() => 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/ConversationList/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="bk-agent-conversation-list">
+    <div class="bk-agent-conversation-list-header">
+      <span>{{ $t("aiAgentPastConversations", "Past conversations") }}</span>
+      <button @click="emit('close')">
+        <Icon name="bk_mdi_close" />
+      </button>
+    </div>
+    <div
+      v-if="conversations.length"
+      class="bk-agent-conversation-list-items bk-scrollbar-light"
+    >
+      <div
+        v-for="conv in conversations"
+        :key="conv.uuid"
+        class="bk-agent-conversation-list-item"
+        @click="emit('switch', conv.uuid)"
+      >
+        <div class="bk-agent-conversation-list-item-content">
+          <div class="bk-agent-conversation-list-item-text">
+            {{ conv.title }}
+          </div>
+          <span class="bk-agent-conversation-list-item-time">
+            <RelativeTime :timestamp="conv.updatedAt" />
+          </span>
+        </div>
+        <button
+          class="bk-agent-conversation-list-item-delete"
+          :title="$t('aiAgentDeleteConversation', 'Delete conversation')"
+          @click.stop="emit('delete', conv.uuid)"
+        >
+          <Icon name="bk_mdi_delete" />
+        </button>
+      </div>
+    </div>
+    <div v-else class="bk-agent-conversation-list-empty">
+      {{ $t("aiAgentNoConversations", "No past conversations.") }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { Icon, RelativeTime } from "#blokkli/editor/components";
+defineProps({
+  conversations: { type: Array, required: true }
+});
+const emit = defineEmits(["switch", "delete", "close"]);
+const { $t } = useBlokkli();
+</script>

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

@@ -0,0 +1,15 @@
+import type { AgentConversationSummary } from '#blokkli/agent/app/composables';
+type __VLS_Props = {
+    conversations: AgentConversationSummary[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    switch: (id: string) => any;
+    delete: (id: string) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwitch?: ((id: string) => any) | undefined;
+    onDelete?: ((id: string) => any) | undefined;
+    onClose?: (() => 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/DebugGallery/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,160 @@
+<template>
+  <div class="bk-agent-debug-gallery">
+    <h3>Conversation</h3>
+    <Conversation
+      :history="mockHistory"
+      :active-item="mockActiveItem"
+      :is-thinking="false"
+    />
+
+    <h3>Pending Mutations</h3>
+    <PendingMutation
+      v-for="action in mockMutations"
+      :key="action.type"
+      :action="action"
+      @approve="() => {
+}"
+      @reject="() => {
+}"
+      @always-approve="() => {
+}"
+    />
+
+    <h3>Tool Components</h3>
+    <template v-for="tool in toolsWithMockParams" :key="tool.name">
+      <component
+        :is="tool.component"
+        :context="mockContext"
+        :params="tool.mockParams()"
+        @done="() => {
+}"
+      />
+      <component
+        :is="tool.component"
+        v-for="(variant, i) in tool.mockParamsVariants?.() ?? []"
+        :key="`${tool.name}-variant-${i}`"
+        :context="mockContext"
+        :params="variant"
+        @done="() => {
+}"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import Conversation from "../Conversation/index.vue";
+import PendingMutation from "../PendingMutation/index.vue";
+import { mcpTools } from "#blokkli-build/agent-client";
+import { isToolDefinition } from "#blokkli/agent/app/helpers";
+const mockContext = {
+  app: null,
+  itemEntityType: "paragraph",
+  adapter: {}
+};
+const mockHistory = [
+  {
+    type: "user",
+    id: "msg-1",
+    content: "Add a new text block with a welcome message to the hero section.",
+    timestamp: Date.now() - 12e4
+  },
+  {
+    type: "tool",
+    id: "call-1",
+    callId: "call-1",
+    tool: "get_child_blocks",
+    label: "Get child blocks",
+    status: "success",
+    timestamp: Date.now() - 118e3
+  },
+  {
+    type: "tool",
+    id: "call-2",
+    callId: "call-2",
+    tool: "add_block",
+    label: "Add block",
+    status: "success",
+    timestamp: Date.now() - 116e3
+  },
+  {
+    type: "assistant",
+    id: "msg-2",
+    content: "I've added a text block with a welcome message to your hero section.",
+    timestamp: Date.now() - 115e3
+  },
+  {
+    type: "user",
+    id: "msg-3",
+    content: "Now delete the old introduction block.",
+    timestamp: Date.now() - 9e4
+  },
+  {
+    type: "tool",
+    id: "call-3",
+    callId: "call-3",
+    tool: "delete_block",
+    label: "Delete block",
+    status: "error",
+    timestamp: Date.now() - 88e3
+  },
+  {
+    type: "assistant",
+    id: "msg-4",
+    content: "I tried to delete the block but encountered an error.",
+    timestamp: Date.now() - 85e3
+  },
+  {
+    type: "user",
+    id: "msg-5",
+    content: "Can you rewrite the title and move the card block?",
+    timestamp: Date.now() - 6e4
+  },
+  {
+    type: "tool",
+    id: "call-4",
+    callId: "call-4",
+    tool: "batch_rewrite_text",
+    label: "Rewrite text",
+    status: "success",
+    timestamp: Date.now() - 58e3
+  }
+];
+const mockActiveItem = {
+  type: "tool",
+  id: "call-5",
+  callId: "call-5",
+  tool: "move_block",
+  label: "Move block after hero section",
+  status: "active",
+  timestamp: Date.now() - 55e3
+};
+const mockMutations = [
+  {
+    type: "add",
+    label: "Add image block to content field",
+    apply: () => void 0
+  },
+  {
+    type: "delete",
+    label: 'Delete text block "Introduction"',
+    apply: () => void 0
+  },
+  {
+    type: "move",
+    label: "Move card block after hero section",
+    apply: () => void 0
+  },
+  {
+    type: "rewrite",
+    label: "Rewrite title field content",
+    apply: () => void 0
+  }
+];
+const toolsWithMockParams = computed(
+  () => mcpTools.filter(isToolDefinition).filter(
+    (tool) => !!tool.component && !!tool.mockParams
+  )
+);
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon: BlokkliIcon;
+    text: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => 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/Input/Actions/DropdownItem/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <button @click="$emit('click')">
+    <Icon :name="icon" />
+    <span>{{ text }}</span>
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  icon: { type: null, required: true },
+  text: { type: String, required: true }
+});
+defineEmits(["click"]);
+</script>

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

@@ -0,0 +1,12 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon: BlokkliIcon;
+    text: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => 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/Input/Actions/TokenUsage/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { UsageTurn } from '#blokkli/agent/shared/types';
+type __VLS_Props = {
+    usageTurns: UsageTurn[];
+};
+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/Input/Actions/TokenUsage/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="bk-agent-token-usage">
+    <ul>
+      <li
+        :title="
+  $t('aiAgentTokensInput', 'Tokens used to send context to the AI')
+"
+      >
+        <div>{{ $t("aiAgentTokensInputLabel", "Input") }}</div>
+        <div>
+          {{ ui.formatNumber(totals.inputTokens) }}
+        </div>
+      </li>
+      <li class="bk-is-separator" />
+      <li :title="$t('aiAgentTokensCached', 'Reused input tokens (cheaper)')">
+        <div>{{ $t("aiAgentTokensCachedLabel", "Cached") }}</div>
+        <div>
+          {{ ui.formatNumber(totals.cacheReadInputTokens) }}
+        </div>
+      </li>
+      <li class="bk-is-separator" />
+      <li
+        :title="
+  $t('aiAgentTokensOutput', 'Tokens generated by the AI in responses')
+"
+      >
+        <div>{{ $t("aiAgentTokensOutputLabel", "Output") }}</div>
+        <div>{{ ui.formatNumber(totals.outputTokens) }}</div>
+      </li>
+      <li class="bk-is-separator" />
+      <li
+        :title="$t('aiAgentTokensCost', 'Estimated cost for this conversation')"
+      >
+        <div>{{ $t("aiAgentTokensCostLabel", "Cost") }}</div>
+        <div>{{ totals.cost }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+const props = defineProps({
+  usageTurns: { type: Array, required: true }
+});
+const { $t, ui } = useBlokkli();
+const totals = computed(() => {
+  let inputTokens = 0;
+  let outputTokens = 0;
+  let cacheReadInputTokens = 0;
+  let cost = 0;
+  for (const turn of props.usageTurns) {
+    inputTokens += turn.inputTokens;
+    outputTokens += turn.outputTokens;
+    cacheReadInputTokens += turn.cacheReadInputTokens;
+    if (turn.pricing) {
+      cost += (turn.inputTokens * turn.pricing.input + turn.cacheCreationInputTokens * turn.pricing.cacheWrite + turn.cacheReadInputTokens * turn.pricing.cacheRead + turn.outputTokens * turn.pricing.output) / 1e6;
+    }
+  }
+  return {
+    inputTokens,
+    outputTokens,
+    cacheReadInputTokens,
+    cost: ui.formatPrice(cost)
+  };
+});
+</script>

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

@@ -0,0 +1,7 @@
+import type { UsageTurn } from '#blokkli/agent/shared/types';
+type __VLS_Props = {
+    usageTurns: UsageTurn[];
+};
+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/Input/Actions/index.d.vue.ts

@@ -0,0 +1,23 @@
+import type { UsageTurn } from '#blokkli/agent/shared/types';
+type __VLS_Props = {
+    isProcessing: boolean;
+    isConnected: boolean;
+    canSubmit: boolean;
+    hasText: boolean;
+    usageTurns: UsageTurn[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    submit: () => any;
+    "new-conversation": () => any;
+    "show-transcript": () => any;
+    "show-conversations": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    "onNew-conversation"?: (() => any) | undefined;
+    "onShow-transcript"?: (() => any) | undefined;
+    "onShow-conversations"?: (() => 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/Input/Actions/index.vue

@@ -0,0 +1,109 @@
+<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"
+            />
+          </div>
+        </BlokkliTransition>
+      </div>
+    </div>
+    <div class="bk-agent-input-actions-right">
+      <div v-show="hasText" class="bk-agent-input-actions-keyboard">
+        {{ $t("aiAgentNewLineHint", "Shift + Enter for new line") }}
+      </div>
+      <button
+        v-if="isProcessing"
+        class="bk-button bk-is-danger bk-is-small bk-is-icon-only"
+        :disabled="!isConnected"
+        @click="$emit('cancel')"
+      >
+        <Icon name="bk_mdi_stop" />
+      </button>
+      <button
+        v-else
+        class="bk-button bk-is-primary bk-is-small bk-is-icon-only"
+        :disabled="!canSubmit"
+        @click="$emit('submit')"
+      >
+        <Icon name="bk_mdi_arrow_upward" />
+      </button>
+    </div>
+  </div>
+</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 TokenUsage from "./TokenUsage/index.vue";
+defineProps({
+  isProcessing: { type: Boolean, required: true },
+  isConnected: { type: Boolean, required: true },
+  canSubmit: { type: Boolean, required: true },
+  hasText: { type: Boolean, required: true },
+  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);
+});
+function onNewConversation() {
+  showMenu.value = false;
+  emit("new-conversation");
+}
+function onShowConversations() {
+  showMenu.value = false;
+  emit("show-conversations");
+}
+function onShowTranscript() {
+  showMenu.value = false;
+  emit("show-transcript");
+}
+</script>