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

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="bk-agent-input-actions">
+  <div class="_bk_border-t _bk_border-t-mono-300 _bk_border-dashed _bk_relative _bk_z-50">
     <TransitionHeight opacity>
-      <div v-if="isExpanded" class="bk-agent-input-actions-expanded">
+      <div v-if="isExpanded" class="_bk_border-b _bk_border-b-mono-300 _bk_border-dashed">
         <TokenUsage :usage-turns />
         <DropdownItem
           icon="bk_mdi_bug_report"
-          :text="$t('aiAgentShowTranscript', 'Show transcript...')"
+          :text="$t('aiAgentShowTranscript', 'Show transcript', { more: true })"
           @click="$emit('show-transcript')"
         />
         <DropdownItem
@@ -16,8 +16,8 @@
         />
       </div>
     </TransitionHeight>
-    <div class="bk-agent-input-actions-bar">
-      <div class="bk-agent-input-actions-left">
+    <div class="_bk_flex _bk_items-center _bk_justify-between">
+      <div class="_bk_flex _bk_items-center _bk_relative">
         <button
           class="bk-agent-input-actions-button _bk_group/tooltip"
           :class="{ 'bk-is-active': isExpanded }"
@@ -45,13 +45,13 @@
           }}</span>
         </button>
       </div>
-      <div class="bk-agent-input-actions-right">
-        <div v-show="hasText" class="bk-agent-input-actions-keyboard">
+      <div class="_bk_flex _bk_gap-8 _bk_items-center _bk_pr-5">
+        <div v-show="hasText" class="_bk_text-xs _bk_text-mono-500">
           {{ $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"
+          class="bk-button bk-scheme-red bk-is-small bk-is-icon-only"
           :disabled="!isConnected"
           @click="$emit('cancel')"
         >
@@ -59,7 +59,7 @@
         </button>
         <button
           v-else
-          class="bk-button bk-is-primary bk-is-small bk-is-icon-only"
+          class="bk-button bk-scheme-accent bk-is-small bk-is-icon-only"
           :disabled="!canSubmit"
           @click="$emit('submit')"
         >
@@ -91,3 +91,49 @@ defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-co
 const { $t } = useBlokkli();
 const isExpanded = ref(false);
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-agent-input-actions-button {
+  display: flex;
+  height: 40px;
+  min-width: 40px;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding-inline: 8px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+@media (hover: hover) {
+  .bk-agent-input-actions-button:hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
+}
+@media (hover: hover) {
+  .bk-agent-input-actions-button:hover {
+    color: rgb(var(--bk-theme-accent-700) / 1);
+  }
+}
+.bk-agent-input-actions-button:not(:first-child) {
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 1px;
+  --bk-tw-border-style: dashed;
+  border-style: dashed;
+  border-left-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk-agent-input-actions-button.bk-is-active {
+  color: rgb(var(--bk-theme-accent-700) / 1);
+}
+.bk-agent-input-actions-button[disabled] {
+  pointer-events: none;
+  color: rgb(var(--bk-theme-mono-200) / 1);
+}
+.bk-agent-input-actions-button svg {
+  width: 18px;
+  height: 18px;
+  fill: currentcolor;
+}
+</style>

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

@@ -1,12 +1,15 @@
 <template>
   <div
-    class="bk-agent-input"
+    class="bk-agent-input _bk_flex _bk_flex-col _bk_shrink-0"
     :class="{
   'bk-is-active': hasActivePlan
 }"
   >
     <TransitionHeight opacity :duration="600">
-      <div v-if="attachments.length" class="bk-agent-input-attachments">
+      <div
+        v-if="attachments.length"
+        class="_bk_flex _bk_flex-wrap _bk_gap-5 _bk_p-10 _bk_border-b _bk_border-b-mono-300 _bk_border-dashed"
+      >
         <AttachmentChip
           v-for="att in attachments"
           :key="att.id"
@@ -28,6 +31,7 @@
           :on-before-paste="onPaste"
           rows="2"
           :placeholder="placeholder"
+          class="_bk_min-h-60 _bk_w-full _bk_resize-none _bk_text-base _bk_p-10 _bk_pb-0 _bk_border-none _bk_bg-transparent _bk_appearance-none _bk_text-mono-800 _bk_rounded-t-lg _bk_focus:outline-none _bk_focus:shadow-none _bk_placeholder:text-mono-400"
           @submit="onSubmit"
         />
       </div>
@@ -52,7 +56,7 @@
 <script setup>
 import { computed, useBlokkli, useTemplateRef } from "#imports";
 import { FlexTextarea, TransitionHeight } from "#blokkli/editor/components";
-import AttachmentChip from "../Attachment/index.vue";
+import AttachmentChip from "#blokkli/agent/app/components/Attachment/index.vue";
 import Actions from "./Actions/index.vue";
 import { generateUUID } from "#blokkli/editor/helpers/uuid";
 const ATTACHMENT_THRESHOLD = 500;
@@ -67,13 +71,15 @@ const props = defineProps({
 const { $t } = useBlokkli();
 const placeholder = computed(() => {
   if (props.isProcessing) {
-    return $t("aiAgentProcessing", "Processing...");
+    return $t("aiAgentProcessing", "Processing", { more: true });
   }
   if (props.hasPendingApproval) {
-    return $t("aiAgentAwaitingApproval", "Awaiting your approval...");
+    return $t("aiAgentAwaitingApproval", "Awaiting your approval", {
+      more: true
+    });
   }
   if (props.hasConversation) {
-    return $t("aiAgentPlaceholderReply", "Reply...");
+    return $t("reply", "Reply", { more: true });
   }
   return $t("aiAgentPlaceholder", "What should we work on?");
 });

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

@@ -2,14 +2,14 @@
   <ToolCard :icon="actionIcon" :title="action.label" @cancel="$emit('reject')">
     <template #actions>
       <button
-        class="bk-button bk-is-small bk-is-lime bk-is-fullwidth"
+        class="bk-button bk-is-small bk-scheme-lime bk-is-fullwidth"
         @click="$emit('approve')"
       >
         <Icon name="bk_mdi_check" />
         {{ $t("aiAgentApprove", "Approve") }}
       </button>
       <button
-        class="bk-button bk-is-small bk-is-lime-outline"
+        class="bk-button bk-is-small bk-scheme-lime bk-is-outline"
         @click="$emit('always-approve')"
       >
         <Icon name="bk_mdi_done_all" />

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

@@ -1,33 +1,36 @@
 <template>
   <ToolCard
-    class="bk-agent-plan"
+    class="_bk_mt-0! _bk_overflow-hidden _bk_border-0 _bk_rounded-b-none _bk_rounded-t-lg _bk_border-dashed _bk_border-b _bk_border-b-mono-300"
     icon="bk_mdi_inventory"
     :title="plan.title"
     :hide-cancel="!pendingApproval"
     @cancel="$emit('reject')"
   >
-    <div class="bk-agent-plan-steps">
+    <div class="_bk_flex _bk_flex-col _bk_gap-10 _bk_px-10 _bk_text-sm _bk_py-8">
       <div
         v-for="(step, index) in plan.steps"
         :key="index"
-        class="bk-agent-plan-step"
-        :class="{
-  'bk-is-pending': step.status === 'pending',
-  'bk-is-in-progress': step.status === 'in_progress',
-  'bk-is-completed': step.status === 'completed'
-}"
+        class="_bk_flex _bk_items-center _bk_gap-8"
       >
         <StatusIcon
           :status="planStepToStatus(step.status)"
           :bullet-text="index + 1"
         />
-        <span class="bk-agent-plan-step-label">{{ step.label }}</span>
+        <span
+          :class="{
+  '_bk_text-mono-500 _bk_line-through': step.status === 'completed',
+  '_bk_font-medium': step.status === 'in_progress',
+  '_bk_text-mono-600': step.status === 'pending'
+}"
+        >
+          {{ step.label }}
+        </span>
       </div>
     </div>
 
     <template v-if="pendingApproval" #actions>
       <button
-        class="bk-button bk-is-lime bk-is-fullwidth"
+        class="bk-button bk-scheme-lime bk-is-fullwidth"
         @click="$emit('approve')"
       >
         <Icon name="bk_mdi_check" />

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

@@ -4,11 +4,11 @@ type __VLS_Props = {
     title: string;
     hideCancel?: boolean;
 };
-declare var __VLS_16: {}, __VLS_18: {};
+declare var __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    actions?: (props: typeof __VLS_18) => any;
+    actions?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;

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

@@ -1,34 +1,36 @@
 <template>
-  <div class="bk-agent-tool-card">
-    <div class="bk-agent-tool-card-header">
-      <div class="bk-agent-tool-card-header-left">
-        <Icon :name="icon" />
-        <span>{{ title }}</span>
+  <div class="_bk_mt-15 _bk_border _bk_border-mono-300 _bk_bg-white _bk_rounded _bk_overflow-hidden">
+    <div
+      class="_bk_flex _bk_items-center _bk_gap-5 _bk_font-medium _bk_justify-between _bk_bg-mono-100 _bk_border-b _bk_border-mono-300 _bk_pl-10 _bk_pr-5 _bk_py-10"
+    >
+      <div class="_bk_flex _bk_text-sm _bk_gap-5">
+        <Icon :name="icon" class="_bk_size-18" />
+        <span class="_bk_flex-1">{{ title }}</span>
       </div>
-      <div
-        v-if="!hideCancel"
-        class="bk-agent-tool-card-header-cancel _bk_group/tooltip _bk_relative"
-      >
-        <button type="button" @click="$emit('cancel')">
-          <Icon name="bk_mdi_close" />
-        </button>
-        <Tooltip
+      <div v-if="!hideCancel" class="_bk_-my-5">
+        <ButtonAction
           :label="$t('aiAgentReject', 'Reject')"
-          placement="above-right"
+          icon="bk_mdi_close"
+          theme="danger"
+          class="_bk_relative"
+          @click="$emit('cancel')"
         />
       </div>
     </div>
 
     <slot />
 
-    <div v-if="$slots.actions" class="bk-agent-tool-card-actions">
+    <div
+      v-if="$slots.actions"
+      class="_bk_flex _bk_gap-8 _bk_p-10 _bk_bg-white _bk_border-t _bk_border-t-mono-200"
+    >
       <slot name="actions" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { Icon, Tooltip } from "#blokkli/editor/components";
+import { Icon, ButtonAction } from "#blokkli/editor/components";
 import { useBlokkli } from "#imports";
 defineProps({
   icon: { type: null, required: true },

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

@@ -4,11 +4,11 @@ type __VLS_Props = {
     title: string;
     hideCancel?: boolean;
 };
-declare var __VLS_16: {}, __VLS_18: {};
+declare var __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    actions?: (props: typeof __VLS_18) => any;
+    actions?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;

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

@@ -1,40 +1,39 @@
 <template>
-  <div class="bk-agent-welcome">
-    <div class="bk-agent-message-text" v-html="welcomeHtml" />
-    <div v-if="defaultPrompts.length" class="bk-agent-welcome-prompts">
+  <div>
+    <Markdown
+      class="bk-agent-message-text bk-agent-welcome-text"
+      :content="welcomeContent"
+    />
+    <div v-if="defaultPrompts.length" class="_bk_grid _bk_gap-5 _bk_mt-10">
       <button
         v-for="(prompt, index) in defaultPrompts"
         :key="index"
         type="button"
+        class="_bk_flex _bk_text-sm _bk_bg-accent-100 _bk_text-accent-700 _bk_py-5 _bk_px-8 _bk_gap-5 _bk_rounded _bk_hover:bg-accent-700 _bk_hover:text-white _bk_font-medium"
         @click.prevent="emit('prompt', prompt)"
       >
-        <Icon name="bk_mdi_chat" />
+        <Icon name="bk_mdi_chat" class="_bk_size-15 _bk_mt-2" />
         <span>{{ prompt }}</span>
       </button>
     </div>
-    <div class="bk-agent-welcome-disclaimer">
-      <div v-html="disclaimer" />
-      <Icon name="bk_mdi_priority_high" />
-    </div>
+    <InfoBox :text="disclaimer" class="_bk_mt-20" small />
   </div>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { marked } from "marked";
 import welcomeMdEn from "./en.md?raw";
 import welcomeMdDe from "./de.md?raw";
 import { defaultPrompts } from "#blokkli-build/agent-client";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, InfoBox } from "#blokkli/editor/components";
+import Markdown from "#blokkli/agent/app/components/Markdown/index.vue";
 const props = defineProps({
   agentName: { type: String, required: true }
 });
 const emit = defineEmits(["prompt"]);
 const { $t, ui } = useBlokkli();
 const welcomeMd = ui.interfaceLanguage.value === "de" ? welcomeMdDe : welcomeMdEn;
-const welcomeHtml = await Promise.resolve(marked.parse(welcomeMd)).then(
-  (v) => v.replaceAll("@agent-name", props.agentName)
-);
+const welcomeContent = welcomeMd.replaceAll("@agent-name", props.agentName);
 const disclaimer = computed(() => {
   return $t(
     "aiAgentWelcomeDisclaimer",
@@ -42,3 +41,35 @@ const disclaimer = computed(() => {
   ).replace("@agent", props.agentName);
 });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-agent-welcome-text ul + p {
+  margin-top: 30px;
+}
+.bk-agent-welcome-text ul:nth-child(3),.bk-agent-welcome-text ul:nth-child(5) {
+  list-style-type: none;
+  padding-left: 0px;
+}
+:is(.bk-agent-welcome-text ul:nth-child(3),.bk-agent-welcome-text ul:nth-child(5)) li {
+  position: relative;
+  padding-left: 1.5em;
+  text-wrap: pretty;
+}
+:is(:is(.bk-agent-welcome-text ul:nth-child(3),.bk-agent-welcome-text ul:nth-child(5)) li):not(:last-child) {
+  margin-bottom: 3px;
+}
+:is(:is(.bk-agent-welcome-text ul:nth-child(3),.bk-agent-welcome-text ul:nth-child(5)) li):before {
+  font-size: 0.8em;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+:is(:is(.bk-agent-welcome-text ul:nth-child(3)) li):before {
+  content: '';
+  color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+:is(:is(.bk-agent-welcome-text ul:nth-child(5)) li):before {
+  content: '';
+  color: rgb(var(--bk-theme-red-normal) / 1);
+}
+</style>

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