@blokkli/editor 2.0.0-alpha.53 → 2.0.0-alpha.55

package/dist/global/constants/index.d.ts

@@ -2,6 +2,6 @@ export declare const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";
 export declare const BK_VISIBLE_LANGUAGES = "bkVisibleLanguages";
 export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavior", "beta", "advanced"];
 export declare const VIEWPORT: readonly ["mobile", "desktop"];
-export declare const LANGUAGES: readonly ["de", "fr", "it", "gsw_CH"];
+export declare const TRANSLATION_LANGUAGES: readonly ["de", "fr", "it", "gsw_CH"];
 export type SettingsGroup = (typeof SETTINGS_GROUP)[number];
 export type Viewport = (typeof VIEWPORT)[number];

package/dist/global/constants/index.js

@@ -8,4 +8,4 @@ export const SETTINGS_GROUP = [
   "advanced"
 ];
 export const VIEWPORT = ["mobile", "desktop"];
-export const LANGUAGES = ["de", "fr", "it", "gsw_CH"];
+export const TRANSLATION_LANGUAGES = ["de", "fr", "it", "gsw_CH"];

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

@@ -37,7 +37,7 @@ export type FeatureDefinitionSettingMethod<T> = {
     viewports?: Viewport[];
 };
 export type FeatureDefinitionSettingBase<Icon extends string = string> = FeatureDefinitionSettingCheckbox | FeatureDefinitionSettingRadios<Icon> | FeatureDefinitionSettingMethod<any> | FeatureDefinitionSettingSlider;
-export type FeatureDefinitionBase<AdapterMethodsType extends string = string, Icon extends string = string, FeatureId extends string = string> = {
+export type FeatureDefinitionBase<AdapterMethodsType extends string = string, Icon extends string = string> = {
     /**
      * The unique ID of the feature.
      */
@@ -54,14 +54,6 @@ export type FeatureDefinitionBase<AdapterMethodsType extends string = string, Ic
      * Description of the feature.
      */
     description?: string;
-    /**
-     * Dependencies of the feature.
-     *
-     * Loads this feature only after all of the given features have loaded.
-     *
-     * If one of the dependencies does not load, this feature won't load too.
-     */
-    dependencies?: FeatureId[];
     /**
      * The viewports for which this feature will be loaded.
      */
@@ -88,4 +80,8 @@ export type FeatureDefinitionBase<AdapterMethodsType extends string = string, Ic
      * If true, the feature has to be explicitly enabled before it is loaded.
      */
     beta?: boolean;
+    /**
+     * If true, the feature is only enabled in dev mode.
+     */
+    devOnly?: boolean;
 };

package/dist/module.json

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

package/dist/module.mjs

@@ -10,7 +10,7 @@ import { dirname, resolve, relative } from 'pathe';
 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 { TRANSLATION_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';
@@ -19,7 +19,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.53";
+const version = "2.0.0-alpha.55";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -1540,12 +1540,14 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_join",
   "bk_mdi_keyboard_arrow_down",
   "bk_mdi_keyboard_command_key",
+  "bk_mdi_laptop_mac",
   "bk_mdi_lists",
   "bk_mdi_lock",
   "bk_mdi_logo_dev",
   "bk_mdi_menu",
   "bk_mdi_mobile",
   "bk_mdi_mobile_rotate",
+  "bk_mdi_monitor",
   "bk_mdi_newspaper",
   "bk_mdi_open_in_new",
   "bk_mdi_palette",
@@ -1562,6 +1564,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_redo",
   "bk_mdi_remove",
   "bk_mdi_replay",
+  "bk_mdi_resize",
   "bk_mdi_robot",
   "bk_mdi_save",
   "bk_mdi_school-fill",
@@ -1580,6 +1583,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_swap_horiz",
   "bk_mdi_swap_horizontal_circle",
   "bk_mdi_swap_vert",
+  "bk_mdi_tablet",
   "bk_mdi_text_compare",
   "bk_mdi_text_select_end",
   "bk_mdi_texture",
@@ -1684,6 +1688,9 @@ const features = defineCodeTemplate(
     const declarations = [];
     const imports = /* @__PURE__ */ new Map();
     for (const feature of features) {
+      if (feature.definition.devOnly && !ctx.helper.isDev) {
+        continue;
+      }
       const componentVarName = toValidVariableName(`component_${feature.id}`);
       const declarationVarName = toValidVariableName(`feature_${feature.id}`);
       declarations.push(
@@ -1761,43 +1768,35 @@ const TRANSLATIONS_DIR = "./runtime/editor/translations";
 const translations = defineCodeTemplate(
   "translations",
   (ctx) => {
-    const imports = LANGUAGES.map((lang) => {
+    const userTranslations = ctx.helper.options.translations;
+    const hasUserTranslations = userTranslations && Object.keys(userTranslations).length > 0;
+    const loaderEntries = TRANSLATION_LANGUAGES.map((lang) => {
       const relativePath = ctx.helper.toModuleBuildRelative(
         ctx.helper.resolvers.module.resolve(`${TRANSLATIONS_DIR}/${lang}.json`)
       );
-      return `import raw_${lang} from '${relativePath}'`;
-    }).join("\n");
-    const userTranslations = ctx.helper.options.translations;
-    const processedEntries = LANGUAGES.map((lang) => {
-      return `  '${lang}': Object.fromEntries(
-    Object.entries(raw_${lang}).map(([k, v]) => [k, v.translation])
-  )`;
+      const body = hasUserTranslations ? `defu(userTranslations['${lang}'] ?? {}, mod.default)` : `mod.default`;
+      return `  '${lang}': async () => {
+    const mod = await import('${relativePath}')
+    return ${body}
+  }`;
     }).join(",\n");
-    const hasUserTranslations = userTranslations && Object.keys(userTranslations).length > 0;
-    if (hasUserTranslations) {
-      return `import { defu } from 'defu'
-${imports}
+    const preamble = hasUserTranslations ? `import { defu } from 'defu'
 
-const defaultTranslations = {
-${processedEntries}
-}
+const userTranslations = ${JSON.stringify(userTranslations)}
 
-export const translations = defu(${JSON.stringify(userTranslations)}, defaultTranslations)
-`;
-    }
-    return `${imports}
-
-export const translations = {
-${processedEntries}
+` : "";
+    return `${preamble}export const translationLoaders = {
+${loaderEntries}
 }
 `;
   },
   () => {
-    const typeUnion = LANGUAGES.map((lang) => `'${lang}'`).join(" | ");
+    const typeUnion = ["en", ...TRANSLATION_LANGUAGES].map((lang) => `'${lang}'`).join(" | ");
     return `
 export type InterfaceLanguage = ${typeUnion}
 export type TranslationMap = Record<string, string>
-export const translations: Record<InterfaceLanguage, TranslationMap>
+export type TranslationLoaders = Partial<Record<InterfaceLanguage, () => Promise<TranslationMap>>>
+export const translationLoaders: TranslationLoaders
 `;
   }
 );
@@ -3071,10 +3070,9 @@ export default definitions
       if (!file.definition) {
         continue;
       }
-      if (isBlock(file.definition)) {
-        continue;
+      if (isFragment(file.definition)) {
+        fragmentNames.push(`'${file.definition.name}'`);
       }
-      fragmentNames.push(`'${file.definition.name}'`);
     }
     return `
 import type { GlobalOptionsKey } from '#blokkli-build/generated-types'
@@ -3905,12 +3903,7 @@ class FeatureCollector extends Collector {
     );
   }
   getEnabledFeatures() {
-    return [...this.files.values()].filter((v) => v.isEnabled()).map((v) => v.getDefinition()).filter(falsy).filter((v) => !this.disabledFeatures.has(v.id)).filter((v) => {
-      if (!this.helper.isDev && v.id === "dev-mode") {
-        return false;
-      }
-      return true;
-    });
+    return [...this.files.values()].filter((v) => v.isEnabled()).map((v) => v.getDefinition()).filter(falsy).filter((v) => !this.disabledFeatures.has(v.id));
   }
   async init() {
     const builtinFeatures = await resolveFiles(

package/dist/modules/agent/index.mjs

@@ -109,13 +109,12 @@ class AgentCollector extends Collector {
   }
 }
 
-function createClientTemplate(toolCollector, promptCollector, skillsCollector, options, routes) {
+function createClientTemplate(toolCollector, skillsCollector, options, routes) {
   return defineCodeTemplate(
     "agent-client",
     (ctx) => {
       const rel = (p) => ctx.helper.toModuleBuildRelative(p).replace(/\.ts$/, "");
       const tools = toolCollector.getItems();
-      const prompts = promptCollector.getItems();
       const imports = [];
       const exports$1 = [];
       for (const tool of tools) {
@@ -127,20 +126,6 @@ function createClientTemplate(toolCollector, promptCollector, skillsCollector, o
         exports$1.push(
           `export const mcpTools = [
   ${tools.map((t) => t.importName).join(",\n  ")}
-]`
-        );
-      }
-      for (const prompt of prompts) {
-        imports.push(
-          `import ${prompt.importName} from '${rel(prompt.filePath)}'`
-        );
-      }
-      if (prompts.length === 0) {
-        exports$1.push("export const agentPrompts = []");
-      } else {
-        exports$1.push(
-          `export const agentPrompts = [
-  ${prompts.map((p) => p.importName).join(",\n  ")}
 ]`
         );
       }
@@ -148,9 +133,6 @@ function createClientTemplate(toolCollector, promptCollector, skillsCollector, o
         `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 ?? "Superbl\xF6kkli")}`
-      );
       exports$1.push(
         `export const hasWebFetch = ${JSON.stringify(!!options.allowedFetchOrigins)}`
       );
@@ -200,7 +182,7 @@ ${entries}
         agentToolNameType = "string";
       }
       return `import type { z } from 'zod'
-import type { McpToolDefinition, AgentPromptItem } from '#blokkli/agent/app/types'
+import type { McpToolDefinition } from '#blokkli/agent/app/types'
 import type { AgentModelDefinition } from '#blokkli/agent/shared/types'
 
 type _ToolParams<T> = T extends { paramsSchema: infer P extends z.ZodType } ? z.infer<P> : never
@@ -216,9 +198,7 @@ export const routeFetch: string
 export const routeStream: string
 export const routeRoute: string
 export const mcpTools: McpToolDefinition[]
-export const agentPrompts: AgentPromptItem[]
 export const defaultPrompts: string[]
-export const agentName: string
 export const models: AgentModelDefinition[]
 export const hasWebFetch: boolean
 export const toolNames: readonly AgentToolName[]
@@ -228,6 +208,48 @@ export const skillNames: readonly AgentSkillName[]
   );
 }
 
+function createPromptsTemplate(promptCollector, options) {
+  return defineCodeTemplate(
+    "agent-prompts",
+    (ctx) => {
+      const rel = (p) => ctx.helper.toModuleBuildRelative(p).replace(/\.ts$/, "");
+      const prompts = promptCollector.getItems();
+      const imports = [];
+      const exports$1 = [];
+      for (const prompt of prompts) {
+        imports.push(
+          `import ${prompt.importName} from '${rel(prompt.filePath)}'`
+        );
+      }
+      if (prompts.length === 0) {
+        exports$1.push("export const agentPrompts = []");
+      } else {
+        exports$1.push(
+          `export const agentPrompts = [
+  ${prompts.map((p) => p.importName).join(",\n  ")}
+]`
+        );
+      }
+      exports$1.push(
+        `export const agentName = ${JSON.stringify(options.agentName ?? "Superbl\xF6kkli")}`
+      );
+      const parts = [];
+      if (imports.length > 0) {
+        parts.push(imports.join("\n"));
+      }
+      parts.push(exports$1.join("\n"));
+      return parts.join("\n\n") + "\n";
+    },
+    () => {
+      return `import type { AgentPromptItem } from '#blokkli/agent/app/types'
+
+export const agentPrompts: AgentPromptItem[]
+export const agentName: string
+`;
+    }
+  );
+}
+
 function createServerTemplate(options) {
   const {
     moduleOptions,
@@ -675,14 +697,9 @@ export default defineNuxtConfig({
     });
     ctx.context.addCollector(skillsCollector);
     ctx.context.addTemplate(
-      createClientTemplate(
-        mcpTools,
-        promptsCollector,
-        skillsCollector,
-        options,
-        routes
-      )
+      createClientTemplate(mcpTools, skillsCollector, options, routes)
     );
+    ctx.context.addTemplate(createPromptsTemplate(promptsCollector, options));
     const moduleSystemPromptsDir = moduleResolver.resolve(
       "./runtime/server/default-system-prompts"
     );

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

@@ -281,9 +281,10 @@ export default function(app, adapter, agentName) {
     const ctx = createToolContext();
     const resolved = await resolveTools(mcpTools, ctx);
     toolMap = createToolMap(resolved);
-    const toolNames = getToolInfoForServer(
+    const toolNames = await getToolInfoForServer(
       resolved,
       state.editMode.value,
+      app,
       adapter
     );
     let contentSearchTabs;

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

@@ -0,0 +1,19 @@
+import type { PendingPromptRequest } from './types.js';
+import type { FullBlokkliAdapter } from '#blokkli/editor/adapter';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    isShown: boolean;
+    agentName: string;
+    adapter: FullBlokkliAdapter<any>;
+    pendingPromptRequest: PendingPromptRequest | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    consumed: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    isShown: boolean;
+    agentName: string;
+    adapter: FullBlokkliAdapter<any>;
+    pendingPromptRequest: PendingPromptRequest | null;
+}> & Readonly<{
+    onConsumed?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,195 @@
+<template>
+  <AgentPanel
+    :is-shown
+    :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
+    :tool-details
+    :usage-turns="usageTurns"
+    :page-context="pageContext"
+    :supports-feedback="!!adapter.submitConversationFeedback"
+    :feedback-item-ids="feedbackItemIds"
+    @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"
+    @submit-feedback="onSubmitFeedback"
+    @feedback-done="onFeedbackDone"
+    @show-conversations="onShowConversations"
+    @hide-conversations="onHideConversations"
+    @approve-plan="approvePlan"
+    @reject-plan="rejectPlan"
+  />
+
+  <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"
+      >
+        <AgentTranscript
+          v-if="transcriptContent"
+          :transcript="transcriptContent"
+        />
+      </DialogModal>
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  onBeforeUnmount,
+  watch,
+  defineAsyncComponent
+} from "#imports";
+import { DialogModal, BlokkliTransition } from "#blokkli/editor/components";
+import agentProvider from "#blokkli/agent/app/composables/agentProvider";
+import AgentPanel from "./Panel/index.vue";
+const AgentTranscript = defineAsyncComponent(
+  () => import("./Transcript/index.vue")
+);
+const props = defineProps({
+  isShown: { type: Boolean, required: true },
+  agentName: { type: String, required: true },
+  adapter: { type: Object, required: true },
+  pendingPromptRequest: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["consumed"]);
+const app = useBlokkli();
+const { ui } = app;
+const {
+  connect,
+  disconnect,
+  conversation,
+  activeItem,
+  isProcessing,
+  isThinking,
+  isConnected,
+  hasBeenReady,
+  autoApprove,
+  pendingMutation,
+  pendingToolCall,
+  plan,
+  approvePlan,
+  rejectPlan,
+  usageTurns,
+  sendPrompt,
+  runToolForPrompt,
+  retry,
+  approve,
+  reject,
+  setAutoApprove,
+  cancel,
+  newConversation,
+  getTranscript,
+  onToolComponentDone,
+  transcriptContent,
+  showTranscript,
+  toolDetails,
+  conversationList,
+  showConversationList,
+  switchConversation,
+  deleteConversation,
+  refreshConversationList,
+  activeConversationId,
+  feedbackItemIds,
+  pageContext
+} = agentProvider(app, props.adapter, props.agentName);
+async function onSubmitFeedback(rating, comment) {
+  if (!props.adapter.submitConversationFeedback) return;
+  const conversationId = activeConversationId.value;
+  if (!conversationId) return;
+  const lastItem = conversation.value[conversation.value.length - 1];
+  if (!lastItem) return;
+  try {
+    await props.adapter.submitConversationFeedback({
+      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) {
+    feedbackItemIds.value.add(lastItem.id);
+  }
+}
+async function onShowConversations() {
+  await refreshConversationList();
+  showConversationList.value = true;
+}
+function onHideConversations() {
+  showConversationList.value = false;
+}
+watch(
+  () => props.pendingPromptRequest,
+  async (request) => {
+    if (!request) return;
+    emit("consumed");
+    const { prompt, selectedUuids } = request;
+    const promptText = prompt.getPrompt(app);
+    const userPromptText = prompt.getUserPrompt?.(app);
+    let preSeededResults = void 0;
+    let autoExecuteTools = void 0;
+    if (prompt.preExecute) {
+      const preResult = await prompt.preExecute({
+        app,
+        selectedUuids,
+        runTool: runToolForPrompt
+      });
+      if (preResult) {
+        preSeededResults = preResult.preSeededResults;
+        autoExecuteTools = preResult.autoExecuteTools;
+      }
+    }
+    sendPrompt(
+      promptText,
+      userPromptText,
+      selectedUuids,
+      void 0,
+      prompt.tools,
+      prompt.skills,
+      preSeededResults,
+      autoExecuteTools
+    );
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  disconnect();
+});
+</script>
+
+<script>
+export default {
+  name: "AgentContainer"
+};
+</script>

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

@@ -0,0 +1,19 @@
+import type { PendingPromptRequest } from './types.js';
+import type { FullBlokkliAdapter } from '#blokkli/editor/adapter';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    isShown: boolean;
+    agentName: string;
+    adapter: FullBlokkliAdapter<any>;
+    pendingPromptRequest: PendingPromptRequest | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    consumed: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    isShown: boolean;
+    agentName: string;
+    adapter: FullBlokkliAdapter<any>;
+    pendingPromptRequest: PendingPromptRequest | null;
+}> & Readonly<{
+    onConsumed?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;