@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

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

@@ -1,109 +1,90 @@
 <template>
   <div class="bk-agent-input-actions">
-    <div class="bk-agent-input-actions-left">
-      <div ref="menuContainer">
+    <TransitionHeight opacity>
+      <div v-if="isExpanded" class="bk-agent-input-actions-expanded">
+        <TokenUsage :usage-turns />
+        <DropdownItem
+          icon="bk_mdi_bug_report"
+          :text="$t('aiAgentShowTranscript', 'Show transcript...')"
+          @click="$emit('show-transcript')"
+        />
+        <DropdownItem
+          icon="bk_mdi_forum"
+          :text="$t('aiAgentPastConversations', 'Past conversations')"
+          :disabled="!isConnected"
+          @click="$emit('show-conversations')"
+        />
+      </div>
+    </TransitionHeight>
+    <div class="bk-agent-input-actions-bar">
+      <div class="bk-agent-input-actions-left">
         <button
-          class="bk-button bk-is-white bk-is-small bk-is-icon-only"
-          :title="$t('aiAgentMoreOptions', 'More options')"
+          class="bk-agent-input-actions-button"
+          :class="{ 'bk-is-active': isExpanded }"
           :disabled="!isConnected"
-          @click="showMenu = !showMenu"
+          @click="isExpanded = !isExpanded"
         >
-          <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"
-            />
+          <Icon
+            :name="isExpanded ? 'bk_mdi_collapse_all' : 'bk_mdi_expand_all'"
+          />
+          <div v-if="!isExpanded" class="bk-tooltip">
+            <span>{{ $t("aiAgentExpandButton", "Show more") }}</span>
           </div>
-        </BlokkliTransition>
+        </button>
+        <button
+          v-show="!hasText && hasConversation"
+          class="bk-agent-input-actions-button"
+          :disabled="!isConnected"
+          @click="$emit('new-conversation')"
+        >
+          <Icon name="bk_mdi_add" />
+          <span>{{
+            $t("aiAgentNewConversation", "Start new conversation")
+          }}</span>
+        </button>
       </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 class="bk-agent-input-actions-right">
+        <div v-show="hasText" class="bk-agent-input-actions-keyboard">
+          {{ $t("textareaNewLineHint", "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>
-      <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, useBlokkli } from "#imports";
 import {
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  useTemplateRef,
-  useBlokkli
-} from "#imports";
-import { Icon, BlokkliTransition } from "#blokkli/editor/components";
-import DropdownItem from "./DropdownItem/index.vue";
+  Icon,
+  DropdownItem,
+  TransitionHeight
+} from "#blokkli/editor/components";
 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 },
+  hasConversation: { 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");
-}
+defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-conversations"]);
+const { $t } = useBlokkli();
+const isExpanded = ref(false);
 </script>

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     isConnected: boolean;
     canSubmit: boolean;
     hasText: boolean;
+    hasConversation: boolean;
     usageTurns: UsageTurn[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -4,7 +4,6 @@
     :class="{
   'bk-is-active': hasActivePlan
 }"
-    @paste.capture="onPaste"
   >
     <TransitionHeight opacity :duration="600">
       <div v-if="attachments.length" class="bk-agent-input-attachments">
@@ -26,6 +25,7 @@
           :max-height="150"
           submit-on-enter
           paste-markdown
+          :on-before-paste="onPaste"
           rows="2"
           :placeholder="placeholder"
           @submit="onSubmit"
@@ -39,6 +39,7 @@
       :can-submit="canSubmit"
       :usage-turns="usageTurns"
       :has-text
+      :has-conversation
       @submit="onSubmit"
       @cancel="$emit('cancel')"
       @new-conversation="$emit('new-conversation')"
@@ -79,23 +80,20 @@ const placeholder = computed(() => {
 const emit = defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-conversations"]);
 const model = defineModel({ type: String, ...{ required: true } });
 const attachments = ref([]);
-function onPaste(e) {
-  const text = e.clipboardData?.getData("text/plain");
-  if (!text || text.length < ATTACHMENT_THRESHOLD) {
-    return;
+function onPaste(data) {
+  const content = data.toMarkdown();
+  if (!content || content.length < ATTACHMENT_THRESHOLD) {
+    return false;
   }
-  if (attachments.value.some((a) => a.content === text)) {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
+  if (attachments.value.some((a) => a.content === content)) {
+    return true;
   }
-  e.preventDefault();
-  e.stopPropagation();
   attachments.value.push({
     type: "text",
     id: generateUUID(),
-    content: text
+    content
   });
+  return true;
 }
 function removeAttachment(id) {
   attachments.value = attachments.value.filter((a) => a.id !== id);

package/dist/modules/agent/runtime/app/features/agent/Panel/Welcome/de.md

@@ -10,10 +10,10 @@ brauchst:
 - **Vorlagen einfügen** aus der Vorlagenbibliothek
 - **Inhalte übersetzen** in andere Sprachen
 
-Ein paar Dinge, die du beachten solltest:
+Ein paar Dinge, die ich nicht kann:
 
 - **Speichern oder veröffentlichen** — das musst du selbst machen
-- **Andere Seiten bearbeiten** — ich kann nur auf der aktuellen Seite arbeiten
+- **Andere Seiten bearbeiten** — ich kann nur auf der aktuellen arbeiten
 - **Globale Inhalte löschen** wie Bilder, Videos oder Seiten
 
 Probier eines davon aus, um loszulegen:

package/dist/modules/agent/runtime/app/features/agent/Panel/Welcome/en.md

@@ -9,10 +9,10 @@ I can help you shape this page — just tell me what you need:
 - **Insert templates** from the template library
 - **Translate** content to other languages
 
-A few things to keep in mind:
+A few things I can't do:
 
 - **Save or publish** changes — you need to do that yourself
-- **Edit other pages** — I can only work on the current page
+- **Edit other pages** — I can only work on the current one
 - **Delete global content** like images, videos or pages
 
 Try one of these to get started:

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

@@ -121,7 +121,6 @@ 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 },
@@ -158,12 +157,9 @@ const toolContext = computed(() => ({
   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
-  );
+  const tool = mcpTools.find((t) => t.name === props.pendingToolCall.toolName);
   return tool?.component || null;
 });
 const inputValue = ref("");

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>;

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

@@ -0,0 +1,138 @@
+<template>
+  <div class="bk-agent-transcript">
+    <section class="bk-agent-transcript-section">
+      <h3>System Prompts ({{ transcript.system.length }})</h3>
+      <details
+        v-for="prompt in transcript.system"
+        :key="prompt.id"
+        class="bk-agent-transcript-entry"
+      >
+        <summary>{{ prompt.name }}</summary>
+        <pre class="bk-agent-transcript-block">{{ prompt.content }}</pre>
+      </details>
+    </section>
+
+    <section class="bk-agent-transcript-section">
+      <h3>Tools ({{ transcript.tools.length }})</h3>
+      <details
+        v-for="tool in transcript.tools"
+        :key="tool.name"
+        class="bk-agent-transcript-entry"
+      >
+        <summary>{{ tool.name }}</summary>
+        <div class="bk-agent-transcript-block">
+          <p>{{ tool.description }}</p>
+          <pre>{{ JSON.stringify(tool.input_schema, null, 2) }}</pre>
+        </div>
+      </details>
+    </section>
+
+    <section class="bk-agent-transcript-section">
+      <h3>Messages ({{ transcript.messages.length }})</h3>
+      <div
+        v-for="(message, i) in transcript.messages"
+        :key="i"
+        class="bk-agent-transcript-message"
+      >
+        <div class="bk-agent-transcript-role">
+          {{ message.type === "agent" ? "AGENT" : "USER" }}
+          <span v-if="message.full" class="bk-agent-transcript-pruned"
+            >(pruned)</span
+          >
+        </div>
+        <div class="bk-agent-transcript-content">
+          <template v-if="typeof message.seen === 'string'">
+            <pre class="bk-agent-transcript-block">{{ message.seen }}</pre>
+          </template>
+          <template v-else>
+            <div
+              v-for="(block, j) in message.seen"
+              :key="j"
+              class="bk-agent-transcript-block"
+            >
+              <template v-if="block.type === 'text'">
+                <pre>{{ block.text }}</pre>
+              </template>
+              <template v-else-if="block.type === 'skill'">
+                <div class="bk-agent-transcript-label">
+                  Skill: {{ block.name }}
+                </div>
+                <pre>{{ block.text }}</pre>
+              </template>
+              <template v-else-if="block.type === 'tool_use'">
+                <div class="bk-agent-transcript-label">
+                  Tool Use: {{ block.name }} ({{ block.id }})
+                </div>
+                <pre>{{ JSON.stringify(block.input, null, 2) }}</pre>
+              </template>
+              <template v-else-if="block.type === 'tool_result'">
+                <div class="bk-agent-transcript-label">
+                  Tool Result ({{ block.tool_use_id }})
+                  <span v-if="block.is_error" class="bk-agent-transcript-error"
+                    >ERROR</span
+                  >
+                </div>
+                <pre>{{ block.content }}</pre>
+              </template>
+            </div>
+          </template>
+        </div>
+
+        <details v-if="message.full" class="bk-agent-transcript-entry">
+          <summary>Original (before pruning)</summary>
+          <div class="bk-agent-transcript-content">
+            <template v-if="typeof message.full === 'string'">
+              <pre class="bk-agent-transcript-block">{{ message.full }}</pre>
+            </template>
+            <template v-else>
+              <div
+                v-for="(block, j) in message.full"
+                :key="j"
+                class="bk-agent-transcript-block"
+              >
+                <template v-if="block.type === 'text'">
+                  <pre>{{ block.text }}</pre>
+                </template>
+                <template v-else-if="block.type === 'skill'">
+                  <div class="bk-agent-transcript-label">
+                    Skill: {{ block.name }}
+                  </div>
+                  <pre>{{ block.text }}</pre>
+                </template>
+                <template v-else-if="block.type === 'tool_use'">
+                  <div class="bk-agent-transcript-label">
+                    Tool Use: {{ block.name }} ({{ block.id }})
+                  </div>
+                  <pre>{{ JSON.stringify(block.input, null, 2) }}</pre>
+                </template>
+                <template v-else-if="block.type === 'tool_result'">
+                  <div class="bk-agent-transcript-label">
+                    Tool Result ({{ block.tool_use_id }})
+                    <span
+                      v-if="block.is_error"
+                      class="bk-agent-transcript-error"
+                      >ERROR</span
+                    >
+                  </div>
+                  <pre>{{ block.content }}</pre>
+                </template>
+              </div>
+            </template>
+          </div>
+        </details>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  transcript: { type: Object, required: true }
+});
+</script>
+
+<script>
+export default {
+  name: "AgentTranscript"
+};
+</script>

package/dist/modules/agent/runtime/app/features/agent/Transcript/index.vue.d.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>;

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

@@ -1,8 +1,8 @@
 <template>
   <PluginSidebar
     id="agent"
-    v-slot="{ isShown }"
     :title="agentName"
+    :tooltip-title
     :tour-text="
   $t('aiAgentTourText', 'Chat with an AI assistant to edit page content.')
 "
@@ -10,41 +10,48 @@
     weight="-900"
     render-always
     beta
+    region="right-bottom"
+    @toggle="closeAgentPopup"
   >
-    <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"
-    />
+    <template #icon>
+      <Icon name="stars" class="bk-is-animated" />
+    </template>
+    <template #default="{ isShown }">
+      <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"
+      />
+    </template>
   </PluginSidebar>
 
   <Teleport :to="ui.mainLayoutElement.value">
@@ -58,19 +65,47 @@
         full-screen
         @cancel="showTranscript = false"
       >
-        <pre class="bk-agent-transcript">{{ transcriptContent }}</pre>
+        <AgentTranscript
+          v-if="transcriptContent"
+          :transcript="transcriptContent"
+        />
       </DialogModal>
     </BlokkliTransition>
+
+    <Popup
+      id="agent"
+      ref="popup"
+      :title="$t('aiAgentPopupTitle', 'AI-Assistant')"
+      :cta="$t('aiAgentIntroPopupCta', 'Get started')"
+      theme="primary"
+      position="bottom-right"
+      @submit="openAgent"
+    >
+      <Icon name="stars" class="bk-is-animated" />
+      <p v-html="popupText" />
+    </Popup>
   </Teleport>
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, onBeforeUnmount } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  onBeforeUnmount,
+  computed,
+  useTemplateRef
+} from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
-import { DialogModal, BlokkliTransition } from "#blokkli/editor/components";
+import {
+  DialogModal,
+  BlokkliTransition,
+  Icon,
+  Popup
+} 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 AgentTranscript from "./Transcript/index.vue";
 import { defineItemDropdownAction } from "#blokkli/editor/composables";
 const DEBUG_STYLING = false;
 const { adapter } = defineBlokkliFeature({
@@ -88,6 +123,27 @@ const { adapter } = defineBlokkliFeature({
 });
 const app = useBlokkli();
 const { $t, ui } = app;
+const popup = useTemplateRef("popup");
+function closeAgentPopup() {
+  if (popup.value) {
+    popup.value.closePopup();
+  }
+}
+function openAgent() {
+  app.eventBus.emit("sidebar:open", "agent");
+}
+const popupText = computed(() => {
+  return $t(
+    "aiAgentIntroPopup",
+    "Need help editing? @name is your AI assistant \u2014 it can add, move, and update blocks and much more. Give it a try!"
+  ).replace("@name", `<em>${agentName}</em>`);
+});
+const tooltipTitle = computed(() => {
+  return $t("agentSidebarTooltipLabel", "@name (AI-Assistant)").replace(
+    "@name",
+    agentName
+  );
+});
 const {
   isConnected,
   hasBeenReady,