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

package/dist/modules/agent/runtime/app/components/Conversation/Item/Tool/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <BubbleTool :status="toolStatus" :text :expandable="!!detailsComponent">
+    <component
+      :is="detailsComponent"
+      v-if="detailsComponent"
+      :details="details"
+    />
+  </BubbleTool>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import BubbleTool from "../Bubble/Tool/index.vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  timestamp: { type: Number, required: true },
+  type: { type: String, required: true },
+  callId: { type: String, required: true },
+  tool: { type: String, required: true },
+  label: { type: String, required: true },
+  status: { type: String, required: true },
+  isActive: { type: Boolean, required: false },
+  details: { type: null, required: false },
+  detailsComponent: { type: null, required: false }
+});
+const toolStatus = computed(() => {
+  if (props.isActive) return "active";
+  return props.status;
+});
+const text = computed(() => {
+  return props.label || formatToolName(props.tool);
+});
+function formatToolName(tool) {
+  return tool.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+</script>

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Item/Unknown/index.vue

@@ -1,13 +1,10 @@
 <template>
-  <div class="bk-agent-error-bubble">
-    <Icon name="bk_mdi_priority_high" />
-    <span>{{ $t("aiAgentUnknownMessage", "Unknown message type") }}</span>
-  </div>
+  <ErrorBubble :text="$t('aiAgentUnknownMessage', 'Unknown message type')" />
 </template>
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import ErrorBubble from "../ErrorBubble/index.vue";
 defineProps({
   id: { type: String, required: true },
   timestamp: { type: Number, required: true },

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Item/User/index.d.vue.ts

@@ -5,6 +5,8 @@ type __VLS_Props = {
     type: 'user';
     content: string;
     attachments?: Attachment[];
+    historyIndexAtSend?: number;
+    historySignatureAtSend?: string;
 };
 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;

package/dist/modules/agent/runtime/app/components/Conversation/Item/User/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="bk-agent-message bk-is-user _bk_group/message _bk_relative">
+    <InlineActions
+      v-if="!isEditing && (canRollback || content)"
+      class="_bk_absolute _bk_top-[7px] _bk_right-10 _bk_opacity-0 _bk_group-hover/message:opacity-100 _bk_focus-within:opacity-100"
+    >
+      <InlineActionsButton
+        v-if="canRollback"
+        icon="bk_mdi_replay"
+        :label="$t('aiAgentRetry', 'Retry')"
+        @click="onRetry"
+      />
+      <InlineActionsButton
+        v-if="canRollback"
+        icon="bk_mdi_edit"
+        :label="$t('edit', 'Edit')"
+        @click="startEdit"
+      />
+      <InlineActionsButton
+        v-if="content"
+        icon="bk_mdi_content_copy"
+        :label="$t('copy', 'Copy')"
+        @click="onCopy"
+      />
+    </InlineActions>
+
+    <div v-if="isEditing" class="_bk_bg-white _bk_rounded-lg _bk_overflow-hidden">
+      <FlexTextarea
+        v-model="editValue"
+        :max-height="300"
+        :min-height="60"
+        submit-on-enter
+        autofocus
+        class="_bk_w-full _bk_resize-none _bk_text-base _bk_p-10 _bk_border-none _bk_bg-transparent _bk_appearance-none _bk_text-mono-900 _bk_placeholder:text-mono-300 _bk_focus:outline-none"
+        @submit="submitEdit"
+        @keydown="onEditKeydown"
+      />
+      <div
+        class="_bk_flex _bk_justify-end _bk_gap-5 _bk_px-10 _bk_py-10 _bk_border-t _bk_border-t-mono-400 _bk_border-dashed"
+      >
+        <button
+          type="button"
+          class="bk-button bk-scheme-mono bk-is-light bk-is-small"
+          @click="cancelEdit"
+        >
+          {{ $t("cancel", "Cancel") }}
+        </button>
+        <button
+          type="button"
+          class="bk-button bk-scheme-accent bk-is-small"
+          :disabled="!editValue.trim() || editValue.trim() === content.trim()"
+          @click="submitEdit"
+        >
+          {{ $t("save", "Save") }}
+        </button>
+      </div>
+    </div>
+    <template v-else>
+      <Markdown
+        v-if="content"
+        class="bk-agent-message-text"
+        :content="content"
+      />
+      <div
+        v-if="attachments?.length"
+        class="_bk_grid _bk_gap-8"
+        :class="{ '_bk_mt-10': content }"
+      >
+        <AttachmentChip
+          v-for="att in attachments"
+          :key="att.id"
+          :attachment="att"
+          inverted
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import Markdown from "#blokkli/agent/app/components/Markdown/index.vue";
+import AttachmentChip from "../../../Attachment/index.vue";
+import InlineActions from "#blokkli/editor/components/InlineActions/index.vue";
+import InlineActionsButton from "#blokkli/editor/components/InlineActions/Button/index.vue";
+import { FlexTextarea } from "#blokkli/editor/components";
+import { useAgent } from "#blokkli/agent/app/composables/useAgent";
+import { isHistorySnapshotReachable } from "#blokkli/agent/app/helpers/historySignature";
+const props = defineProps({
+  id: { type: String, required: true },
+  timestamp: { type: Number, required: true },
+  type: { type: String, required: true },
+  content: { type: String, required: true },
+  attachments: { type: Array, required: false },
+  historyIndexAtSend: { type: Number, required: false },
+  historySignatureAtSend: { type: String, required: false }
+});
+const { $t, state, ui } = useBlokkli();
+const agent = useAgent(true);
+const isEditing = ref(false);
+const editValue = ref("");
+const canRollback = computed(
+  () => agent && !agent.isProcessing.value && isHistorySnapshotReachable(
+    state.mutations.value,
+    props.historyIndexAtSend,
+    props.historySignatureAtSend
+  )
+);
+function onRetry() {
+  if (!agent) {
+    return;
+  }
+  agent.rollbackAndSend(props.id);
+}
+function onCopy() {
+  ui.copyTextToClipboard(props.content);
+}
+function startEdit() {
+  editValue.value = props.content;
+  isEditing.value = true;
+}
+function cancelEdit() {
+  isEditing.value = false;
+  editValue.value = "";
+}
+function submitEdit() {
+  if (!agent) {
+    return;
+  }
+  const next = editValue.value.trim();
+  if (!next || next === props.content.trim()) {
+    cancelEdit();
+    return;
+  }
+  isEditing.value = false;
+  agent.rollbackAndSend(props.id, next);
+}
+function onEditKeydown(event) {
+  if (event.key === "Escape") {
+    event.stopPropagation();
+    cancelEdit();
+  }
+}
+</script>

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Item/User/index.vue.d.ts

@@ -5,6 +5,8 @@ type __VLS_Props = {
     type: 'user';
     content: string;
     attachments?: Attachment[];
+    historyIndexAtSend?: number;
+    historySignatureAtSend?: string;
 };
 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;

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/Thinking/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="bk-agent-message bk-is-assistant bk-agent-assistant-bubble">
-    <div class="bk-agent-thinking">
-      <Icon name="loader" />
-      <span>{{ $t("aiAgentThinking", "Thinking...") }}</span>
+    <div class="_bk_flex _bk_gap-8 _bk_items-center _bk_text-sm">
+      <Icon name="loader" class="_bk_size-20 _bk_text-mono-700" />
+      <span>{{ $t("aiAgentThinking", "Thinking", { more: true }) }}</span>
     </div>
   </div>
 </template>

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/index.d.vue.ts

@@ -1,9 +1,11 @@
 import type { ConversationItem, ActiveItem } from '#blokkli/agent/app/types';
+import type { AgentConversationFeedbackItem } from '#blokkli/agent/app/features/agent/types';
 type __VLS_Props = {
     history: ConversationItem[];
     activeItem: ActiveItem | null;
     isThinking: boolean;
     toolDetails: Map<string, unknown>;
+    inlineFeedback?: AgentConversationFeedbackItem[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/index.vue

@@ -1,12 +1,17 @@
 <template>
-  <div class="bk-agent-conversation" @click="onClick">
-    <ConversationItemComponent
-      v-for="item in history"
-      :key="item.id"
-      :item="item"
-      :tool-details
-      @retry="emit('retry')"
-    />
+  <div @click="onClick">
+    <template v-for="item in history" :key="item.id">
+      <ConversationItemComponent
+        :item="item"
+        :tool-details
+        @retry="emit('retry')"
+      />
+      <InlineFeedback
+        v-for="entry in feedbackByItemId.get(item.id)"
+        :key="entry.id"
+        :entry="entry"
+      />
+    </template>
     <ConversationItemComponent
       v-if="activeItem"
       :key="activeItem.id"
@@ -19,14 +24,25 @@
 </template>
 
 <script setup>
+import { computed, useBlokkli } from "#imports";
 import ConversationItemComponent from "./Item/index.vue";
 import Thinking from "./Thinking/index.vue";
-import { useBlokkli } from "#imports";
-const _props = defineProps({
+import InlineFeedback from "./InlineFeedback/index.vue";
+const props = defineProps({
   history: { type: Array, required: true },
   activeItem: { type: null, required: true },
   isThinking: { type: Boolean, required: true },
-  toolDetails: { type: Map, required: true }
+  toolDetails: { type: Map, required: true },
+  inlineFeedback: { type: Array, required: false }
+});
+const feedbackByItemId = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const f of props.inlineFeedback ?? []) {
+    const bucket = map.get(f.itemId);
+    if (bucket) bucket.push(f);
+    else map.set(f.itemId, [f]);
+  }
+  return map;
 });
 const emit = defineEmits(["retry"]);
 const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

package/dist/modules/agent/runtime/app/{features/agent/Panel → components}/Conversation/index.vue.d.ts

@@ -1,9 +1,11 @@
 import type { ConversationItem, ActiveItem } from '#blokkli/agent/app/types';
+import type { AgentConversationFeedbackItem } from '#blokkli/agent/app/features/agent/types';
 type __VLS_Props = {
     history: ConversationItem[];
     activeItem: ActiveItem | null;
     isThinking: boolean;
     toolDetails: Map<string, unknown>;
+    inlineFeedback?: AgentConversationFeedbackItem[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/modules/agent/runtime/app/{tools/delegate_text_rewrite/Details → components/FieldDiffDetails}/index.d.vue.ts

@@ -1,3 +1,18 @@
+/**
+ * A before/after diff entry shown in the collapsible tool details panel.
+ * `operations` is set by patch-mode rewrites to show per-operation diffs;
+ * otherwise the full before/after pair is shown.
+ */
+export type FieldDiffDetailItem = {
+    fieldLabel: string;
+    before: string;
+    after: string;
+    mode?: 'full' | 'patch';
+    operations?: Array<{
+        search: string;
+        replace: string;
+    }>;
+};
 type __VLS_Props = {
     details: unknown;
 };

package/dist/modules/agent/runtime/app/{tools/delegate_text_rewrite/Details → components/FieldDiffDetails}/index.vue.d.ts

@@ -1,3 +1,18 @@
+/**
+ * A before/after diff entry shown in the collapsible tool details panel.
+ * `operations` is set by patch-mode rewrites to show per-operation diffs;
+ * otherwise the full before/after pair is shown.
+ */
+export type FieldDiffDetailItem = {
+    fieldLabel: string;
+    before: string;
+    after: string;
+    mode?: 'full' | 'patch';
+    operations?: Array<{
+        search: string;
+        replace: string;
+    }>;
+};
 type __VLS_Props = {
     details: unknown;
 };

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/components/Markdown/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div v-html="html" />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { renderMarkdown } from "#blokkli/agent/app/helpers/markdown";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+const html = computed(
+  () => props.content ? renderMarkdown(props.content) : ""
+);
+</script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+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/composables/index.d.ts

@@ -1,6 +1,10 @@
 export { defineBlokkliAgentTool } from './defineBlokkliAgentTool.js';
 export { defineBlokkliAgentPrompt } from './defineBlokkliAgentPrompt.js';
 export { useAgent } from './useAgent.js';
+export { useAgentFeedbackOptions } from './useAgentFeedbackOptions.js';
+export type { AgentFeedbackOption } from './useAgentFeedbackOptions.js';
+export { useAgentPaginatedQuery } from './useAgentPaginatedQuery.js';
+export type { AgentPaginatedQuery } from './useAgentPaginatedQuery.js';
 export type { PendingMutationState, PendingToolCall, } from '../providers/toolsProvider.js';
 export type { AgentApp } from '../types/index.js';
-export type { AgentConversationData, AgentConversationSummary, } from '../features/agent/types.js';
+export type { AgentConversationData, AgentConversationItem, AgentConversationItemSummary, AgentConversationHostInfo, AgentConversationFeedbackRating, AgentConversationFeedbackItem, AgentConversationQueryResult, AgentConversationFeedbackQueryResult, } from '../features/agent/types.js';

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

@@ -1,3 +1,5 @@
 export { defineBlokkliAgentTool } from "./defineBlokkliAgentTool.js";
 export { defineBlokkliAgentPrompt } from "./defineBlokkliAgentPrompt.js";
 export { useAgent } from "./useAgent.js";
+export { useAgentFeedbackOptions } from "./useAgentFeedbackOptions.js";
+export { useAgentPaginatedQuery } from "./useAgentPaginatedQuery.js";

package/dist/modules/agent/runtime/app/composables/useAgent.d.ts

@@ -3,4 +3,5 @@ import type { AgentApp } from '#blokkli/agent/app/types';
  * Access the agent app from any component below the agent Container.
  * Mirrors `useBlokkli()` for the editor.
  */
-export declare function useAgent(): AgentApp;
+export declare function useAgent(optional: true): AgentApp | undefined;
+export declare function useAgent(optional?: false): AgentApp;

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

@@ -1,8 +1,11 @@
 import { inject } from "#imports";
 import { INJECT_AGENT_APP } from "#blokkli/agent/app/helpers/injections";
-export function useAgent() {
-  const app = inject(INJECT_AGENT_APP);
+export function useAgent(optional) {
+  const app = inject(INJECT_AGENT_APP, void 0);
   if (!app) {
+    if (optional) {
+      return void 0;
+    }
     throw new Error(
       "useAgent() called outside the agent Container \u2014 make sure the agent feature is mounted."
     );

package/dist/modules/agent/runtime/app/composables/useAgentFeedbackOptions.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef } from '#imports';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeContextColorGroup } from '../../../../../global/types/theme.js';
+import type { AgentConversationFeedbackRating } from '../features/agent/types.js';
+export type AgentFeedbackOption = {
+    value: AgentConversationFeedbackRating;
+    label: string;
+    icon: BlokkliIcon;
+    theme: ThemeContextColorGroup;
+};
+export declare function useAgentFeedbackOptions(): ComputedRef<AgentFeedbackOption[]>;

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

@@ -0,0 +1,24 @@
+import { computed, useBlokkli } from "#imports";
+export function useAgentFeedbackOptions() {
+  const { $t } = useBlokkli();
+  return computed(() => [
+    {
+      value: "bad",
+      label: $t("aiAgentFeedbackBad", "Bad"),
+      icon: "bk_mdi_thumb_down",
+      theme: "red"
+    },
+    {
+      value: "fine",
+      label: $t("aiAgentFeedbackFine", "Fine"),
+      icon: "bk_mdi_thumb_up",
+      theme: "yellow"
+    },
+    {
+      value: "good",
+      label: $t("aiAgentFeedbackGood", "Good"),
+      icon: "bk_mdi_thumbs_up_double",
+      theme: "lime"
+    }
+  ]);
+}

package/dist/modules/agent/runtime/app/composables/useAgentPaginatedQuery.d.ts

@@ -0,0 +1,29 @@
+import type { Ref, ComputedRef } from '#imports';
+import type { AdapterSearchArguments } from '#blokkli/editor/adapter';
+import type { PluginConfigInput } from '#blokkli/editor/types/pluginConfig';
+type PaginatedResult<T> = {
+    filters: PluginConfigInput[];
+    items: T[];
+    total: number;
+    perPage: number;
+};
+type QueryFn<T> = (args: AdapterSearchArguments) => Promise<PaginatedResult<T>>;
+export type AgentPaginatedQuery<T> = {
+    page: Ref<number>;
+    items: ComputedRef<T[]>;
+    totalPages: ComputedRef<number>;
+    isLoading: ComputedRef<boolean>;
+    loadError: ComputedRef<string | null>;
+    refresh: () => Promise<void>;
+};
+/**
+ * Drives a paginated admin query (queryConversations, queryFeedback, …).
+ * The adapter method may be absent on backends that don't support admin
+ * listings — in that case `loadError` resolves to `missingMessage` and
+ * `items` stays empty.
+ */
+export declare function useAgentPaginatedQuery<T>(getQuery: () => QueryFn<T> | undefined, errors: {
+    missing: string;
+    failed: string;
+}): Promise<AgentPaginatedQuery<T>>;
+export {};

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

@@ -0,0 +1,30 @@
+import { ref, computed, useAsyncData } from "#imports";
+export async function useAgentPaginatedQuery(getQuery, errors) {
+  const page = ref(0);
+  const { data, status, error, refresh } = await useAsyncData(
+    () => {
+      const query = getQuery();
+      if (!query) throw new Error(errors.missing);
+      return query({ page: page.value, filters: {} }).catch((e) => {
+        console.warn("[blokkli agent] Paginated query failed:", e);
+        throw new Error(errors.failed);
+      });
+    },
+    {
+      watch: [page],
+      default: () => ({ items: [], filters: [], total: 0, perPage: 50 })
+    }
+  );
+  return {
+    page,
+    items: computed(() => data.value.items),
+    totalPages: computed(
+      () => data.value.perPage > 0 ? Math.max(1, Math.ceil(data.value.total / data.value.perPage)) : 1
+    ),
+    isLoading: computed(() => status.value === "pending"),
+    loadError: computed(() => error.value?.message ?? null),
+    refresh: async () => {
+      await refresh();
+    }
+  };
+}

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

@@ -4,14 +4,12 @@ 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<{