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

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

@@ -1,7 +1,7 @@
 <template>
   <DropHandler
-    v-if="hasBeenReady || DEBUG_STYLING"
-    class="bk bk-agent-panel"
+    v-if="hasBeenReady"
+    class="bk _bk_flex _bk_flex-col _bk_h-full _bk_min-h-[200px] _bk_select-text _bk_relative bk-agent-panel"
     @mousedown.capture.stop
     @pointerdown.capture.stop
     @pointerup.capture.stop
@@ -11,120 +11,108 @@
   >
     <div
       ref="scrollContainer"
-      class="bk-agent-panel-inner bk-scrollbar-light"
+      class="bk-agent-panel-inner bk-scrollbar-light _bk_flex-1 _bk_overflow-y-scroll _bk_flex _bk_flex-col"
       :class="{ 'bk-is-pending-approval': isPlanPendingApproval }"
       @scroll="onScroll"
     >
-      <div ref="conversationContainer" class="bk-agent-panel-conversation">
-        <button
-          v-if="DEBUG_STYLING"
-          class="bk-button"
-          @click="debugShowPlan = !debugShowPlan"
-        >
-          {{ debugShowPlan ? "Hide" : "Show" }} Plan
-        </button>
-        <DebugGallery v-if="DEBUG_STYLING" />
-        <template v-else>
-          <Welcome v-if="showWelcome" :agent-name @prompt="onWelcomePrompt" />
-          <Conversation
-            v-if="conversation.length || activeItem || isThinking"
-            :history="conversation"
-            :active-item="activeItem"
-            :is-thinking="isThinking"
-            :tool-details
-            @retry="emit('retry')"
-          />
-          <component
-            :is="pendingToolComponent"
-            v-if="pendingToolComponent && pendingToolCall"
-            :context="toolContext"
-            :params="pendingToolCall.params"
-            @done="(result) => emit('toolComponentDone', result)"
-          />
-          <PendingMutation
-            v-else-if="pendingMutation && !autoApprove"
-            :action="pendingMutation.action"
-            @approve="emit('approve')"
-            @reject="emit('reject')"
-            @always-approve="onAlwaysApprove"
-          />
-          <TransitionHeight opacity :duration="300">
-            <Feedback
-              v-if="
+      <div ref="conversationContainer" class="_bk_p-10 _bk_flex-1 _bk_relative">
+        <Welcome v-if="showWelcome" :agent-name @prompt="onWelcomePrompt" />
+        <Conversation
+          v-if="conversation.length || activeItem || isThinking"
+          :history="conversation"
+          :active-item="activeItem"
+          :is-thinking="isThinking"
+          :tool-details
+          @retry="agent.retry"
+        />
+        <component
+          :is="pendingToolComponent"
+          v-if="pendingToolComponent && pendingToolCall"
+          :context="toolContext"
+          :params="pendingToolCall.params"
+          @done="agent.tools.onComponentDone"
+        />
+        <PendingMutation
+          v-else-if="pendingMutation && !autoApprove"
+          :action="pendingMutation.action"
+          @approve="agent.tools.approve"
+          @reject="agent.tools.reject"
+          @always-approve="onAlwaysApprove"
+        />
+        <TransitionHeight opacity :duration="300">
+          <Feedback
+            v-if="
   supportsFeedback && !isProcessing && !pendingMutation && !pendingToolCall && conversation.length > 0 && conversation[conversation.length - 1]?.type === 'assistant' && !feedbackItemIds.has(conversation[conversation.length - 1].id)
 "
-              @submit="
-  (rating, comment) => emit('submitFeedback', rating, comment)
-"
-              @done="emit('feedbackDone')"
-            />
-          </TransitionHeight>
-        </template>
+            @submit="onSubmitFeedback"
+            @done="onFeedbackDone"
+          />
+        </TransitionHeight>
       </div>
 
-      <div class="bk-agent-panel-input">
+      <SidebarFloater>
         <AgentInput
           ref="inputEl"
           v-model="inputValue"
           v-model:attachments="attachments"
-          :is-processing="debugIsProcessing"
+          :is-processing="isProcessing"
           :is-connected
           :has-pending-approval="!!(pendingMutation || pendingToolCall)"
           :has-conversation="conversation.length > 0"
           :usage-turns
-          :has-active-plan="!!activePlan"
+          :has-active-plan="!!plan"
           @submit="onSubmit"
-          @cancel="emit('cancel')"
+          @cancel="agent.cancel"
           @new-conversation="onNewConversation"
-          @show-transcript="emit('getTranscript')"
-          @show-conversations="emit('showConversations')"
+          @show-transcript="agent.getTranscript"
+          @show-conversations="onShowConversations"
         >
           <TransitionHeight opacity :duration="300">
             <div
-              v-if="!isConnected && hasBeenReady && !DEBUG_STYLING"
-              class="bk-agent-disconnected"
+              v-if="!isConnected && hasBeenReady"
+              class="_bk_border-b _bk_border-b-mono-300 _bk_border-dashed _bk_flex _bk_items-center _bk_gap-8 _bk_px-10 _bk_py-10 _bk_text-mono-500 _bk_text-sm _bk_bg-red-light _bk_font-medium _bk_text-red-normal"
             >
-              <Icon name="loader" />
+              <Icon name="loader" class="_bk_size-18" />
               <span>{{
-                $t("aiAgentDisconnected", "Connection lost. Reconnecting...")
+                $t("aiAgentDisconnected", "Connection lost. Reconnecting", {
+  more: true
+})
               }}</span>
             </div>
           </TransitionHeight>
           <TransitionHeight :duration="600" opacity>
             <Plan
-              v-if="activePlan"
-              :plan="activePlan"
+              v-if="plan"
+              :plan
               :pending-approval="isPlanPendingApproval"
-              @approve="emit('approvePlan')"
-              @reject="emit('rejectPlan')"
+              @approve="agent.plan.approve"
+              @reject="agent.plan.reject"
             />
           </TransitionHeight>
         </AgentInput>
-      </div>
+      </SidebarFloater>
     </div>
-    <Transition name="bk-agent-overlay" :duration="500">
-      <div
+    <BlokkliTransition name="panel-sheet">
+      <PanelSheet
         v-if="showConversationList"
-        class="bk-agent-conversation-list-overlay"
+        :title="$t('aiAgentPastConversations', 'Past conversations')"
+        @close="onHideConversations"
       >
-        <div
-          class="bk-agent-conversation-list-backdrop"
-          @click="emit('hideConversations')"
+        <ConversationList
+          :conversations="conversationList"
+          @switch="agent.switchConversation"
+          @delete="agent.deleteConversation"
+          @close="onHideConversations"
         />
-        <div class="bk-agent-conversation-list-sheet bk-scrollbar-light">
-          <ConversationList
-            :conversations="conversationList"
-            @switch="(id) => emit('switchConversation', id)"
-            @delete="(id) => emit('deleteConversation', id)"
-            @close="emit('hideConversations')"
-          />
-        </div>
-      </div>
-    </Transition>
+      </PanelSheet>
+    </BlokkliTransition>
   </DropHandler>
-  <div v-else-if="!hasBeenReady" class="bk-agent-connecting">
+  <div
+    v-else-if="!hasBeenReady"
+    class="_bk_flex _bk_items-center _bk_justify-center _bk_gap-8 _bk_p-20 _bk_text-mono-500"
+  >
     <Icon name="loader" />
-    <span>{{ $t("aiAgentConnecting", "Connecting...") }}</span>
+    <span>{{ $t("aiAgentConnecting", "Connecting", { more: true }) }}</span>
   </div>
 </template>
 
@@ -138,10 +126,13 @@ import {
   onBeforeUnmount,
   useBlokkli
 } from "#imports";
-import { Icon, TransitionHeight } from "#blokkli/editor/components";
-import Conversation from "./Conversation/index.vue";
+import {
+  Icon,
+  TransitionHeight,
+  BlokkliTransition
+} from "#blokkli/editor/components";
+import Conversation from "#blokkli/agent/app/components/Conversation/index.vue";
 import PendingMutation from "./PendingMutation/index.vue";
-import DebugGallery from "./DebugGallery/index.vue";
 import Welcome from "./Welcome/index.vue";
 import AgentInput from "./Input/index.vue";
 import ConversationList from "./ConversationList/index.vue";
@@ -150,36 +141,37 @@ import Plan from "./Plan/index.vue";
 import DropHandler from "./DropHandler/index.vue";
 import { mcpTools } from "#blokkli-build/agent-client";
 import { itemEntityType } from "#blokkli-build/config";
+import { agentName } from "#blokkli-build/agent-prompts";
+import PanelSheet from "#blokkli/editor/components/Panel/Sheet/index.vue";
+import SidebarFloater from "#blokkli/editor/components/SidebarFloater/index.vue";
+import { useAgent } from "#blokkli/agent/app/composables/useAgent";
 const props = defineProps({
-  agentName: { type: String, required: true },
-  isShown: { type: Boolean, required: true },
-  conversation: { type: Array, required: true },
-  activeItem: { type: null, required: true },
-  isThinking: { type: Boolean, required: true },
-  isProcessing: { type: Boolean, required: true },
-  isConnected: { type: Boolean, required: true },
-  hasBeenReady: { type: Boolean, required: true },
-  pendingToolCall: { type: [Object, null], required: true },
-  pendingMutation: { type: [Object, null], required: true },
-  autoApprove: { type: Boolean, required: true },
-  toolDetails: { type: Map, required: true },
-  conversationList: { type: Array, required: true },
-  showConversationList: { type: Boolean, required: true },
-  plan: { type: [Object, null], required: true },
-  usageTurns: { type: Array, required: true },
-  pageContext: { type: [Object, null], required: true },
-  supportsFeedback: { type: Boolean, required: true },
-  feedbackItemIds: { type: Set, required: true }
+  isShown: { type: Boolean, required: true }
 });
-const emit = defineEmits(["connect", "sendPrompt", "cancel", "approve", "reject", "setAutoApprove", "newConversation", "getTranscript", "toolComponentDone", "switchConversation", "deleteConversation", "showConversations", "hideConversations", "retry", "approvePlan", "rejectPlan", "submitFeedback", "feedbackDone"]);
-const DEBUG_STYLING = import.meta.dev && false;
 const app = useBlokkli();
 const { $t } = app;
+const agent = useAgent();
+const { isThinking, isProcessing, hasBeenReady } = agent;
+const { isConnected } = agent.socket;
+const {
+  items: conversation,
+  activeItem,
+  conversationList,
+  showConversationList,
+  usageTurns,
+  feedbackItemIds,
+  toolDetails
+} = agent.conversation;
+const { pendingToolCall, pendingMutation, autoApprove, pageContext } = agent.tools;
+const { plan } = agent.plan;
+const supportsFeedback = computed(
+  () => !!app.adapter.agentConversations?.submitFeedback
+);
 watch(
   () => props.isShown,
   (isShown) => {
-    if (isShown && !DEBUG_STYLING) {
-      emit("connect");
+    if (isShown) {
+      agent.connect();
     }
   },
   { immediate: true }
@@ -188,11 +180,11 @@ const toolContext = computed(() => ({
   app,
   itemEntityType,
   adapter: app.adapter,
-  pageContext: props.pageContext
+  pageContext: pageContext.value
 }));
 const pendingToolComponent = computed(() => {
-  if (!props.pendingToolCall) return null;
-  const tool = mcpTools.find((t) => t.name === props.pendingToolCall.toolName);
+  if (!pendingToolCall.value) return null;
+  const tool = mcpTools.find((t) => t.name === pendingToolCall.value.toolName);
   return tool?.component || null;
 });
 const inputValue = ref("");
@@ -233,57 +225,34 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect();
   resizeObserver = null;
 });
-watch(
-  () => props.isProcessing,
-  (isProcessing, wasProcessing) => {
-    if (wasProcessing && !isProcessing) {
-      nextTick(() => inputEl.value?.focus());
-    }
+watch(isProcessing, (isProcessing2, wasProcessing) => {
+  if (wasProcessing && !isProcessing2) {
+    nextTick(() => inputEl.value?.focus());
   }
-);
-const debugPlan = {
-  title: "Restructure page content",
-  steps: [
-    { label: "Analyze current page structure", status: "completed" },
-    { label: "Add hero section with title", status: "completed" },
-    { label: "Rewrite introduction text", status: "in_progress" },
-    { label: "Add feature cards grid", status: "pending" },
-    { label: "Add footer with contact info", status: "pending" }
-  ]
-};
-const debugShowPlan = ref(true);
-const debugIsProcessing = computed(() => {
-  if (DEBUG_STYLING) {
-    return debugShowPlan.value;
-  }
-  return props.isProcessing;
-});
-const activePlan = computed(() => {
-  return DEBUG_STYLING ? debugShowPlan.value ? debugPlan : null : props.plan;
 });
 const isPlanPendingApproval = computed(() => {
-  return activePlan.value !== null && activePlan.value.steps.every((s) => s.status === "pending");
+  return plan.value !== null && plan.value.steps.every((s) => s.status === "pending");
 });
 const showWelcome = computed(() => {
-  return !props.conversation.length && !props.activeItem && !props.isThinking;
+  return !conversation.value.length && !activeItem.value && !isThinking.value;
 });
 function onAlwaysApprove() {
-  emit("setAutoApprove", true);
+  agent.tools.setAutoApprove(true);
 }
 function scrollToBottomOnSend() {
   isAtBottom.value = true;
   nextTick(scrollToBottom);
 }
 function onWelcomePrompt(prompt) {
-  emit("sendPrompt", prompt);
+  agent.sendPrompt({ prompt });
   scrollToBottomOnSend();
 }
 function onSubmit(submitAttachments) {
   const text = inputValue.value.trim();
-  if (!text && !submitAttachments.length || props.isProcessing || !props.isConnected)
+  if (!text && !submitAttachments.length || isProcessing.value || !isConnected.value)
     return;
   if (!submitAttachments.length) {
-    emit("sendPrompt", inputValue.value);
+    agent.sendPrompt({ prompt: inputValue.value });
   } else {
     const attachmentBlocks = submitAttachments.map(
       (att) => `<attachment type="${att.type}">
@@ -293,7 +262,11 @@ ${att.content}
     const prompt = text ? `${text}
 
 ${attachmentBlocks}` : attachmentBlocks;
-    emit("sendPrompt", prompt, text, void 0, submitAttachments);
+    agent.sendPrompt({
+      prompt,
+      displayPrompt: text,
+      attachments: submitAttachments
+    });
   }
   inputValue.value = "";
   attachments.value = [];
@@ -304,6 +277,36 @@ function onFileDrop(dropped) {
   nextTick(() => inputEl.value?.focus());
 }
 function onNewConversation() {
-  emit("newConversation");
+  agent.newConversation();
+}
+async function onSubmitFeedback(rating, comment) {
+  if (!app.adapter.agentConversations?.submitFeedback) return;
+  const conversationId = agent.conversation.activeConversationId.value;
+  if (!conversationId) return;
+  const lastItem = conversation.value[conversation.value.length - 1];
+  if (!lastItem) return;
+  try {
+    await app.adapter.agentConversations.submitFeedback({
+      conversationId,
+      rating,
+      lastItemId: lastItem.id,
+      comment
+    });
+  } catch (e) {
+    console.warn("[blokkli agent] Failed to submit feedback:", e);
+  }
+}
+function onFeedbackDone() {
+  const lastItem = conversation.value[conversation.value.length - 1];
+  if (lastItem) {
+    agent.conversation.feedbackItemIds.value.add(lastItem.id);
+  }
+}
+async function onShowConversations() {
+  await agent.refreshConversationList();
+  agent.conversation.showConversationList.value = true;
+}
+function onHideConversations() {
+  agent.conversation.showConversationList.value = false;
 }
 </script>

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

@@ -1,66 +1,6 @@
-import type { AgentConversationFeedbackRating } from '../types.js';
-import type { AgentConversationSummary, PendingMutationState, PendingToolCall } from '#blokkli/agent/app/composables';
-import type { ConversationItem, ActiveItem } from '#blokkli/agent/app/types';
-import type { ClientPlanState, PageContext, UsageTurn } from '#blokkli/agent/shared/types';
 type __VLS_Props = {
-    agentName: string;
     isShown: boolean;
-    conversation: ConversationItem[];
-    activeItem: ActiveItem | null;
-    isThinking: boolean;
-    isProcessing: boolean;
-    isConnected: boolean;
-    hasBeenReady: boolean;
-    pendingToolCall: PendingToolCall | null;
-    pendingMutation: PendingMutationState | null;
-    autoApprove: boolean;
-    toolDetails: Map<string, unknown>;
-    conversationList: AgentConversationSummary[];
-    showConversationList: boolean;
-    plan: ClientPlanState | null;
-    usageTurns: UsageTurn[];
-    pageContext: PageContext | null;
-    supportsFeedback: boolean;
-    feedbackItemIds: Set<string>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cancel: () => any;
-    retry: () => any;
-    approve: () => any;
-    reject: () => any;
-    newConversation: () => any;
-    showConversations: () => any;
-    connect: () => any;
-    sendPrompt: (prompt: string, displayPrompt?: string | undefined, selectedUuids?: string[] | undefined, attachments?: Attachment[] | undefined) => any;
-    setAutoApprove: (value: boolean) => any;
-    getTranscript: () => any;
-    toolComponentDone: (result: unknown) => any;
-    switchConversation: (id: string) => any;
-    deleteConversation: (id: string) => any;
-    hideConversations: () => any;
-    approvePlan: () => any;
-    rejectPlan: () => any;
-    submitFeedback: (rating: AgentConversationFeedbackRating, comment?: string | undefined) => any;
-    feedbackDone: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCancel?: (() => any) | undefined;
-    onRetry?: (() => any) | undefined;
-    onApprove?: (() => any) | undefined;
-    onReject?: (() => any) | undefined;
-    onNewConversation?: (() => any) | undefined;
-    onShowConversations?: (() => any) | undefined;
-    onConnect?: (() => any) | undefined;
-    onSendPrompt?: ((prompt: string, displayPrompt?: string | undefined, selectedUuids?: string[] | undefined, attachments?: Attachment[] | undefined) => any) | undefined;
-    onSetAutoApprove?: ((value: boolean) => any) | undefined;
-    onGetTranscript?: (() => any) | undefined;
-    onToolComponentDone?: ((result: unknown) => any) | undefined;
-    onSwitchConversation?: ((id: string) => any) | undefined;
-    onDeleteConversation?: ((id: string) => any) | undefined;
-    onHideConversations?: (() => any) | undefined;
-    onApprovePlan?: (() => any) | undefined;
-    onRejectPlan?: (() => any) | undefined;
-    onSubmitFeedback?: ((rating: AgentConversationFeedbackRating, comment?: string | undefined) => any) | undefined;
-    onFeedbackDone?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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/Transcript/MessageContent.d.vue.ts

@@ -0,0 +1,7 @@
+import type { GenericContentBlock } from '#blokkli/agent/shared/types';
+type __VLS_Props = {
+    content: string | GenericContentBlock[];
+};
+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/Transcript/MessageContent.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="_bk_flex _bk_flex-col _bk_gap-5">
+    <template v-if="typeof content === 'string'">
+      <pre class="bk-agent-transcript-block">{{ content }}</pre>
+    </template>
+    <template v-else>
+      <div v-for="(block, j) in content" :key="j" class="_bk_flex _bk_flex-col _bk_gap-3">
+        <template v-if="block.type === 'text'">
+          <pre class="bk-agent-transcript-block">{{ block.text }}</pre>
+        </template>
+        <template v-else-if="block.type === 'skill'">
+          <div class="_bk_text-teal-dark _bk_text-xs _bk_font-sans">
+            Skill: {{ block.name }}
+          </div>
+          <pre class="bk-agent-transcript-block">{{ block.text }}</pre>
+        </template>
+        <template v-else-if="block.type === 'tool_use'">
+          <div class="_bk_text-teal-dark _bk_text-xs _bk_font-sans">
+            Tool Use: {{ block.name }} ({{ block.id }})
+          </div>
+          <pre class="bk-agent-transcript-block">{{
+            JSON.stringify(block.input, null, 2)
+          }}</pre>
+        </template>
+        <template v-else-if="block.type === 'tool_result'">
+          <div class="_bk_text-teal-dark _bk_text-xs _bk_font-sans">
+            Tool Result ({{ block.tool_use_id }})
+            <span v-if="block.is_error" class="_bk_text-red-dark _bk_ml-5">ERROR</span>
+          </div>
+          <pre class="bk-agent-transcript-block">{{ block.content }}</pre>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  content: { type: [String, Array], required: true }
+});
+</script>

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

@@ -0,0 +1,7 @@
+import type { GenericContentBlock } from '#blokkli/agent/shared/types';
+type __VLS_Props = {
+    content: string | GenericContentBlock[];
+};
+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;