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

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

@@ -0,0 +1,274 @@
+<template>
+  <div
+    v-if="hasBeenReady || debugStyling"
+    class="bk bk-agent-panel"
+    @mousedown.capture.stop
+    @pointerdown.capture.stop
+    @pointerup.capture.stop
+    @mouseup.capture.stop
+    @contextmenu.capture.stop
+  >
+    <div
+      ref="scrollContainer"
+      class="bk-agent-panel-inner bk-scrollbar-light"
+      @scroll="onScroll"
+    >
+      <div ref="conversationContainer" class="bk-agent-panel-conversation">
+        <button
+          v-if="debugStyling"
+          class="bk-button"
+          @click="debugShowPlan = !debugShowPlan"
+        >
+          {{ debugShowPlan ? "Hide" : "Show" }} Plan
+        </button>
+        <DebugGallery v-if="debugStyling" />
+        <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"
+            @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"
+          />
+        </template>
+      </div>
+
+      <div class="bk-agent-panel-input">
+        <AgentInput
+          ref="inputEl"
+          v-model="inputValue"
+          :is-processing="debugIsProcessing"
+          :is-connected
+          :has-pending-approval="!!(pendingMutation || pendingToolCall)"
+          :has-conversation="conversation.length > 0"
+          :usage-turns
+          :has-active-plan="!!activePlan"
+          @submit="onSubmit"
+          @cancel="emit('cancel')"
+          @new-conversation="onNewConversation"
+          @show-transcript="emit('getTranscript')"
+          @show-conversations="emit('showConversations')"
+        >
+          <TransitionHeight :duration="600" opacity>
+            <Plan
+              v-if="activePlan"
+              :plan="activePlan"
+              :pending-approval="isPlanPendingApproval"
+              @approve="emit('approvePlan')"
+              @reject="emit('rejectPlan')"
+            />
+          </TransitionHeight>
+        </AgentInput>
+      </div>
+    </div>
+    <Transition name="bk-agent-overlay" :duration="500">
+      <div
+        v-if="showConversationList"
+        class="bk-agent-conversation-list-overlay"
+      >
+        <div
+          class="bk-agent-conversation-list-backdrop"
+          @click="emit('hideConversations')"
+        />
+        <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>
+  </div>
+  <div v-else-if="!hasBeenReady" class="bk-agent-connecting">
+    <Icon name="loader" />
+    <span>{{ $t("aiAgentConnecting", "Connecting...") }}</span>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useTemplateRef,
+  nextTick,
+  watch,
+  onBeforeUnmount,
+  useBlokkli
+} from "#imports";
+import { Icon, TransitionHeight } from "#blokkli/editor/components";
+import Conversation from "./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";
+import Plan from "./Plan/index.vue";
+import { mcpTools } from "#blokkli-build/agent-client";
+import { isToolDefinition } from "#blokkli/agent/app/helpers";
+import { itemEntityType } from "#blokkli-build/config";
+const props = defineProps({
+  agentName: { type: String, required: true },
+  isShown: { type: Boolean, required: true },
+  debugStyling: { type: Boolean, required: false },
+  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 },
+  conversationList: { type: Array, required: true },
+  showConversationList: { type: Boolean, required: true },
+  plan: { type: [Object, null], required: true },
+  usageTurns: { type: Array, required: true }
+});
+const emit = defineEmits(["connect", "sendPrompt", "cancel", "approve", "reject", "setAutoApprove", "newConversation", "getTranscript", "toolComponentDone", "switchConversation", "deleteConversation", "showConversations", "hideConversations", "retry", "approvePlan", "rejectPlan"]);
+const app = useBlokkli();
+const { $t } = app;
+watch(
+  () => props.isShown,
+  (isShown) => {
+    if (isShown && !props.debugStyling) {
+      emit("connect");
+    }
+  },
+  { immediate: true }
+);
+const toolContext = computed(() => ({
+  app,
+  itemEntityType,
+  adapter: app.adapter
+}));
+const staticTools = mcpTools.filter(isToolDefinition);
+const pendingToolComponent = computed(() => {
+  if (!props.pendingToolCall) return null;
+  const tool = staticTools.find(
+    (t) => t.name === props.pendingToolCall.toolName
+  );
+  return tool?.component || null;
+});
+const inputValue = ref("");
+const inputEl = useTemplateRef("inputEl");
+const scrollContainer = useTemplateRef("scrollContainer");
+const isAtBottom = ref(true);
+const SCROLL_THRESHOLD = 50;
+function onScroll() {
+  if (!scrollContainer.value) return;
+  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value;
+  isAtBottom.value = scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD;
+}
+function scrollToBottom() {
+  if (!scrollContainer.value) return;
+  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
+}
+const conversationContainer = useTemplateRef("conversationContainer");
+let resizeObserver = null;
+watch(
+  conversationContainer,
+  (el, _oldEl, onCleanup) => {
+    if (!el) return;
+    resizeObserver = new ResizeObserver(() => {
+      if (isAtBottom.value) {
+        scrollToBottom();
+      }
+    });
+    resizeObserver.observe(el);
+    onCleanup(() => {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    });
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+});
+watch(
+  () => props.isProcessing,
+  (isProcessing, wasProcessing) => {
+    if (wasProcessing && !isProcessing) {
+      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 (props.debugStyling) {
+    return debugShowPlan.value;
+  }
+  return props.isProcessing;
+});
+const activePlan = computed(() => {
+  return props.debugStyling ? debugShowPlan.value ? debugPlan : null : props.plan;
+});
+const isPlanPendingApproval = computed(() => {
+  return props.debugStyling || activePlan.value !== null && activePlan.value.steps.every((s) => s.status === "pending");
+});
+const showWelcome = computed(() => {
+  return !props.conversation.length && !props.activeItem && !props.isThinking;
+});
+function onAlwaysApprove() {
+  emit("setAutoApprove", true);
+}
+function scrollToBottomOnSend() {
+  isAtBottom.value = true;
+  nextTick(scrollToBottom);
+}
+function onWelcomePrompt(prompt) {
+  emit("sendPrompt", prompt);
+  scrollToBottomOnSend();
+}
+function onSubmit(submitAttachments) {
+  const text = inputValue.value.trim();
+  if (!text && !submitAttachments.length || props.isProcessing || !props.isConnected)
+    return;
+  if (!submitAttachments.length) {
+    emit("sendPrompt", inputValue.value);
+  } else {
+    const attachmentBlocks = submitAttachments.map(
+      (att) => `<attachment type="${att.type}">
+${att.content}
+</attachment>`
+    ).join("\n\n");
+    const prompt = text ? `${text}
+
+${attachmentBlocks}` : attachmentBlocks;
+    emit("sendPrompt", prompt, text, void 0, submitAttachments);
+  }
+  inputValue.value = "";
+  scrollToBottomOnSend();
+}
+function onNewConversation() {
+  emit("newConversation");
+}
+</script>

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

@@ -0,0 +1,58 @@
+import type { AgentConversationSummary, PendingMutationState, PendingToolCall } from '#blokkli/agent/app/composables';
+import type { ConversationItem, ActiveItem } from '#blokkli/agent/app/types';
+import type { ClientPlanState, UsageTurn } from '#blokkli/agent/shared/types';
+type __VLS_Props = {
+    agentName: string;
+    isShown: boolean;
+    debugStyling?: boolean;
+    conversation: ConversationItem[];
+    activeItem: ActiveItem | null;
+    isThinking: boolean;
+    isProcessing: boolean;
+    isConnected: boolean;
+    hasBeenReady: boolean;
+    pendingToolCall: PendingToolCall | null;
+    pendingMutation: PendingMutationState | null;
+    autoApprove: boolean;
+    conversationList: AgentConversationSummary[];
+    showConversationList: boolean;
+    plan: ClientPlanState | null;
+    usageTurns: UsageTurn[];
+};
+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;
+}, 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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+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>;

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

@@ -0,0 +1,162 @@
+<template>
+  <PluginSidebar
+    id="agent"
+    v-slot="{ isShown }"
+    :title="agentName"
+    :tour-text="
+  $t('aiAgentTourText', 'Chat with an AI assistant to edit page content.')
+"
+    icon="stars"
+    weight="-900"
+    render-always
+    beta
+  >
+    <AgentPanel
+      :is-shown
+      :debug-styling="DEBUG_STYLING"
+      :agent-name
+      :conversation
+      :active-item
+      :is-thinking
+      :is-processing
+      :is-connected
+      :has-been-ready
+      :pending-tool-call
+      :pending-mutation
+      :auto-approve
+      :conversation-list
+      :show-conversation-list
+      :plan
+      :usage-turns="usageTurns"
+      @connect="connect"
+      @send-prompt="sendPrompt"
+      @retry="retry"
+      @cancel="cancel"
+      @approve="approve"
+      @reject="reject"
+      @set-auto-approve="setAutoApprove"
+      @new-conversation="newConversation"
+      @get-transcript="getTranscript"
+      @tool-component-done="onToolComponentDone"
+      @switch-conversation="switchConversation"
+      @delete-conversation="deleteConversation"
+      @show-conversations="onShowConversations"
+      @hide-conversations="onHideConversations"
+      @approve-plan="approvePlan"
+      @reject-plan="rejectPlan"
+    />
+  </PluginSidebar>
+
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-up">
+      <DialogModal
+        v-if="showTranscript"
+        id="agent-transcript"
+        title="Agent Transcript"
+        :width="900"
+        hide-buttons
+        full-screen
+        @cancel="showTranscript = false"
+      >
+        <pre class="bk-agent-transcript">{{ transcriptContent }}</pre>
+      </DialogModal>
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, onBeforeUnmount } from "#imports";
+import { PluginSidebar } from "#blokkli/editor/plugins";
+import { DialogModal, BlokkliTransition } from "#blokkli/editor/components";
+import agentProvider from "#blokkli/agent/app/composables/agentProvider";
+import { agentPrompts, agentName } from "#blokkli-build/agent-client";
+import AgentPanel from "./Panel/index.vue";
+import { defineItemDropdownAction } from "#blokkli/editor/composables";
+const DEBUG_STYLING = false;
+const { adapter } = defineBlokkliFeature({
+  id: "agent",
+  icon: "stars",
+  label: "AI Agent",
+  description: "Chat with an AI assistant to edit page content.",
+  requiredPermissions: ["use_agent"],
+  requiredAdapterMethods: [
+    "updateFieldValue",
+    "addNewBlock",
+    "deleteBlocks",
+    "moveMultipleBlocks"
+  ]
+});
+const app = useBlokkli();
+const { $t, ui } = app;
+const {
+  isConnected,
+  hasBeenReady,
+  connect,
+  disconnect,
+  conversation,
+  activeItem,
+  isProcessing,
+  isThinking,
+  autoApprove,
+  pendingMutation,
+  pendingToolCall,
+  plan,
+  approvePlan,
+  rejectPlan,
+  usageTurns,
+  sendPrompt,
+  retry,
+  approve,
+  reject,
+  setAutoApprove,
+  cancel,
+  newConversation,
+  getTranscript,
+  onToolComponentDone,
+  transcriptContent,
+  showTranscript,
+  conversationList,
+  showConversationList,
+  switchConversation,
+  deleteConversation,
+  refreshConversationList
+} = agentProvider(app, adapter, agentName);
+async function onShowConversations() {
+  await refreshConversationList();
+  showConversationList.value = true;
+}
+function onHideConversations() {
+  showConversationList.value = false;
+}
+onBeforeUnmount(() => {
+  disconnect();
+});
+defineItemDropdownAction(() => {
+  return agentPrompts.flatMap((promptFactory) => {
+    const promptsResult = "__factory" in promptFactory ? promptFactory.resolve(app) : promptFactory;
+    const prompts = Array.isArray(promptsResult) ? promptsResult : [promptsResult];
+    return prompts.map((prompt) => {
+      const promptText = prompt.getPrompt(app);
+      const userPromptText = prompt.getUserPrompt?.(app);
+      return {
+        id: "agent:prompt:" + prompt.id,
+        label: prompt.getLabel(app),
+        icon: "stars",
+        group: "agent",
+        variant: "agent",
+        weight: -900,
+        callback: () => {
+          app.eventBus.emit("sidebar:open", "agent");
+          sendPrompt(promptText, userPromptText, [...app.selection.uuids.value]);
+        }
+      };
+    });
+  });
+});
+</script>
+
+<script>
+export default {
+  name: "Agent"
+};
+</script>

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+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>;

package/dist/modules/agent/runtime/app/features/agent/types.d.ts

@@ -0,0 +1,58 @@
+export type AgentConversationData = {
+    uuid: string;
+    title: string;
+    clientState: string;
+    serverState: string;
+    hash: string;
+};
+export type AgentConversationSummary = {
+    uuid: string;
+    title: string;
+    createdAt: string;
+    updatedAt: string;
+};
+declare module '#blokkli/editor/types/permissions' {
+    interface UserPermissionMap {
+        use_agent: 'Use the AI agent.';
+    }
+}
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Swap two blocks.
+         */
+        swapBlocks?: (first: string, second: string) => Promise<MutationResponseLike<T>>;
+        /**
+         * Rearrange blocks within a field by specifying the desired order.
+         *
+         * All provided UUIDs must belong to the same field. The blocks
+         * are reordered to match the given UUID array order.
+         */
+        rearrangeBlocks?: (e: {
+            host: import('#blokkli/editor/types/field').BlokkliItemHost;
+            uuids: string[];
+        }) => Promise<MutationResponseLike<T>>;
+        /**
+         * Get an authentication token for the agent WebSocket connection.
+         *
+         * The token is included in the WebSocket init message and validated
+         * server-side using HMAC. The adapter should obtain the token from
+         * an authenticated CMS endpoint.
+         */
+        getAgentAuthToken?: () => Promise<string | null>;
+        /**
+         * Manage persisted agent conversations for the current entity.
+         *
+         * Each conversation is stored as a structured record with separate
+         * fields for client state, server state, and the HMAC hash.
+         * Timestamps (createdAt, updatedAt) are managed by the backend.
+         */
+        agentConversations?: {
+            upsert: (data: AgentConversationData) => Promise<boolean>;
+            load: (uuid: string) => Promise<AgentConversationData | null>;
+            loadLatest: () => Promise<AgentConversationData | null>;
+            list: () => Promise<AgentConversationSummary[]>;
+            delete: (uuid: string) => Promise<boolean>;
+        };
+    }
+}

package/dist/modules/agent/runtime/app/helpers/index.d.ts

@@ -0,0 +1,55 @@
+import type { McpToolDefinition, McpToolFactory, McpToolItem, McpToolContext, McpToolCategory, MutationAction, QueryResult, ToolError } from '#blokkli/agent/app/types';
+import type { ClientToolDefinition } from '#blokkli/agent/shared/types';
+import type { BlokkliAdapter } from '#blokkli/editor/adapter';
+import type { EditMode } from '#blokkli/editor/types/state';
+/**
+ * Create a map of tool name to tool definition for quick lookup.
+ */
+export declare function createToolMap(tools: McpToolDefinition[]): Record<string, McpToolDefinition>;
+/**
+ * Get tools formatted for the server with JSON schemas.
+ * Filters by edit mode and adapter methods if provided.
+ */
+export declare function getToolsForServer(tools: McpToolDefinition[], editMode: EditMode, adapter?: BlokkliAdapter<unknown>): ClientToolDefinition[];
+/**
+ * Execute a tool by name with the given context and parameters.
+ * Validates parameters with Zod before executing.
+ */
+export declare function executeTool(toolMap: Record<string, McpToolDefinition>, name: string, context: McpToolContext, params: Record<string, unknown>): Promise<unknown>;
+/**
+ * Get the category of a tool by name.
+ */
+export declare function getToolCategory(toolMap: Record<string, McpToolDefinition>, name: string): McpToolCategory;
+/**
+ * Get the tool definition by name.
+ */
+export declare function getToolDefinition(toolMap: Record<string, McpToolDefinition>, name: string): McpToolDefinition;
+/**
+ * Check if a result is a MutationAction.
+ */
+export declare function isMutationAction(result: unknown): result is MutationAction;
+/**
+ * Check if a result is a QueryResult.
+ */
+export declare function isQueryResult(result: unknown): result is QueryResult;
+/**
+ * Check if a result is a ToolError.
+ */
+export declare function isToolError(result: unknown): result is ToolError;
+/**
+ * Check if a tool item is a factory (produces tools dynamically at runtime).
+ */
+export declare function isToolFactory(item: McpToolItem): item is McpToolFactory;
+/**
+ * Check if a tool item is a static tool definition (not a factory).
+ */
+export declare function isToolDefinition(item: McpToolItem): item is McpToolDefinition;
+/**
+ * Resolve an array of tool items (static definitions + factories) into
+ * a flat array of McpToolDefinition objects.
+ *
+ * Each factory's resolve callback is called to produce tools. The individual
+ * tools returned by factories have their own requiredAdapterMethods, which
+ * are checked later by getToolsForServer.
+ */
+export declare function resolveTools(tools: McpToolItem[], context: McpToolContext): Promise<McpToolDefinition[]>;