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

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

@@ -0,0 +1,38 @@
+declare const __VLS_export: <TItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        items: TItem[];
+        getId: (item: TItem) => string;
+        selectedId: string | null;
+        conversationUuid: string | null;
+        isListLoading: boolean;
+        listError: string | null;
+        emptyMessage: string;
+        emptyPrompt: string;
+        totalPages: number;
+    } & {
+        page: number;
+    }) & {
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        header?: () => unknown;
+        item: (props: {
+            item: TItem;
+            isSelected: boolean;
+        }) => unknown;
+    };
+    emit: (evt: "update:page", value: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,137 @@
+<template>
+  <div class="_bk_grid _bk_grid-cols-5 _bk_gap-20">
+    <div class="_bk_col-span-2">
+      <PanelSection>
+        <div class="_bk_h-[70vh] _bk_overflow-y-auto bk-scrollbar-light">
+          <slot name="header" />
+          <div class="_bk_overflow-y-auto">
+            <div
+              v-if="listError"
+              class="_bk_flex _bk_items-center _bk_justify-center _bk_p-30 _bk_text-red-normal _bk_text-sm"
+            >
+              {{ listError }}
+            </div>
+            <ul v-else-if="items.length" class="_bk_flex _bk_flex-col">
+              <li
+                v-for="item in items"
+                :key="getId(item)"
+                class="_bk_flex _bk_items-stretch _bk_border-b _bk_border-mono-200"
+                :class="
+  getId(item) === selectedId ? '_bk_bg-accent-50' : '_bk_bg-white _bk_hover:bg-mono-100'
+"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                  :is-selected="getId(item) === selectedId"
+                />
+              </li>
+            </ul>
+            <div
+              v-else-if="!isListLoading"
+              class="_bk_flex _bk_items-center _bk_justify-center _bk_p-30 _bk_text-mono-600 _bk_text-sm"
+            >
+              {{ emptyMessage }}
+            </div>
+          </div>
+          <div class="_bk_sticky _bk_bottom-0 _bk_z-50">
+            <Pagination
+              v-if="totalPages > 1"
+              v-model="page"
+              :total-pages="totalPages"
+            />
+          </div>
+        </div>
+      </PanelSection>
+    </div>
+    <div class="_bk_col-span-3">
+      <PanelSection>
+        <div
+          class="_bk_flex-1 _bk_overflow-y-auto bk-scrollbar-light _bk_select-text _bk_h-[70vh]"
+        >
+          <ConversationDetail v-if="parsed" :parsed="parsed" />
+          <div
+            v-else-if="error"
+            class="_bk_h-full _bk_flex _bk_items-center _bk_justify-center _bk_p-30 _bk_text-red-normal _bk_text-sm"
+          >
+            {{ error.message }}
+          </div>
+          <div
+            v-else-if="status !== 'pending'"
+            class="_bk_h-full _bk_flex _bk_flex-col _bk_items-center _bk_justify-center _bk_gap-10 _bk_p-30 _bk_text-mono-500 _bk_text-sm _bk_text-center"
+          >
+            <Icon name="bk_mdi_forum" class="_bk_size-50 _bk_text-mono-300" />
+            <p>{{ emptyPrompt }}</p>
+          </div>
+        </div>
+      </PanelSection>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useAsyncData, useBlokkli } from "#imports";
+import { Icon, Pagination } from "#blokkli/editor/components";
+import { parseConversationData } from "#blokkli/agent/app/helpers/parseConversationData";
+import ConversationDetail from "./ConversationDetail.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  getId: { type: Function, required: true },
+  selectedId: { type: [String, null], required: true },
+  conversationUuid: { type: [String, null], required: true },
+  isListLoading: { type: Boolean, required: true },
+  listError: { type: [String, null], required: true },
+  emptyMessage: { type: String, required: true },
+  emptyPrompt: { type: String, required: true },
+  totalPages: { type: Number, required: true }
+});
+const page = defineModel("page", { type: Number, ...{ required: true } });
+defineSlots();
+const { adapter, $t } = useBlokkli();
+const conversationUuid = computed(() => props.conversationUuid);
+const {
+  data: parsed,
+  status,
+  error
+} = await useAsyncData(
+  async () => {
+    const uuid = conversationUuid.value;
+    if (!uuid) return null;
+    const load = adapter.agentConversations?.load;
+    if (!load) {
+      throw new Error(
+        $t(
+          "agentConversationsBackendMissing",
+          "This backend does not expose the admin conversation list."
+        )
+      );
+    }
+    const data = await load(uuid).catch((e) => {
+      console.warn("[blokkli agent] Failed to load conversation:", e);
+      throw new Error(
+        $t("agentConversationsDetailError", "Failed to load conversation.")
+      );
+    });
+    if (!data) {
+      throw new Error(
+        $t(
+          "agentConversationsDetailMissing",
+          "Conversation could not be loaded."
+        )
+      );
+    }
+    const result = parseConversationData(data);
+    if (!result) {
+      throw new Error(
+        $t(
+          "agentConversationsDetailUnparseable",
+          "Conversation data is malformed."
+        )
+      );
+    }
+    return result;
+  },
+  { watch: [conversationUuid], default: () => null }
+);
+</script>

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

@@ -0,0 +1,38 @@
+declare const __VLS_export: <TItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        items: TItem[];
+        getId: (item: TItem) => string;
+        selectedId: string | null;
+        conversationUuid: string | null;
+        isListLoading: boolean;
+        listError: string | null;
+        emptyMessage: string;
+        emptyPrompt: string;
+        totalPages: number;
+    } & {
+        page: number;
+    }) & {
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        header?: () => unknown;
+        item: (props: {
+            item: TItem;
+            isSelected: boolean;
+        }) => unknown;
+    };
+    emit: (evt: "update:page", value: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,7 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,45 @@
+<template>
+  <DialogModal
+    id="agentConversations"
+    :title="$t('agentConversations', 'Agent conversations')"
+    icon="bk_mdi_forum"
+    :width="1200"
+    hide-buttons
+    mono
+    @cancel="emit('cancel')"
+  >
+    <template #tabs>
+      <Tabs v-model="tab" :tabs mono />
+    </template>
+    <div class="_bk_relative">
+      <ConversationsTab v-if="tab === 'conversations'" />
+      <RatingsTab v-else />
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { DialogModal, Tabs } from "#blokkli/editor/components";
+import ConversationsTab from "./ConversationsTab/index.vue";
+import RatingsTab from "./RatingsTab/index.vue";
+const emit = defineEmits(["cancel"]);
+const { $t } = useBlokkli();
+const tab = ref("conversations");
+const tabs = computed(() => [
+  {
+    id: "conversations",
+    label: $t("agentConversationsTabConversations", "Conversations")
+  },
+  {
+    id: "ratings",
+    label: $t("agentConversationsTabRatings", "Ratings")
+  }
+]);
+</script>
+
+<script>
+export default {
+  name: "AgentConversationsDialog"
+};
+</script>

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

@@ -0,0 +1,7 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,6 +1,6 @@
-import type { AgentConversationSummary } from '#blokkli/agent/app/composables';
+import type { AgentConversationItemSummary } from '#blokkli/agent/app/composables';
 type __VLS_Props = {
-    conversations: AgentConversationSummary[];
+    conversations: AgentConversationItemSummary[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     switch: (id: string) => any;

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

@@ -1,47 +1,34 @@
 <template>
-  <div class="bk-agent-conversation-list">
-    <div class="bk-agent-conversation-list-header">
-      <span>{{ $t("aiAgentPastConversations", "Past conversations") }}</span>
-      <button @click="emit('close')">
-        <Icon name="bk_mdi_close" />
-      </button>
-    </div>
-    <div
-      v-if="conversations.length"
-      class="bk-agent-conversation-list-items bk-scrollbar-light"
+  <div v-if="conversations.length">
+    <PanelItem
+      v-for="conv in conversations"
+      :key="conv.uuid"
+      :title="conv.title"
+      is-button
+      @click="emit('switch', conv.uuid)"
     >
-      <div
-        v-for="conv in conversations"
-        :key="conv.uuid"
-        class="bk-agent-conversation-list-item"
-        @click="emit('switch', conv.uuid)"
-      >
-        <div class="bk-agent-conversation-list-item-content">
-          <div class="bk-agent-conversation-list-item-text">
-            {{ conv.title }}
-          </div>
-          <span class="bk-agent-conversation-list-item-time">
-            <RelativeTime :timestamp="conv.updatedAt" />
-          </span>
-        </div>
-        <button
-          class="bk-agent-conversation-list-item-delete"
-          :title="$t('aiAgentDeleteConversation', 'Delete conversation')"
+      <template #description>
+        <RelativeTime :timestamp="conv.updatedAt" />
+      </template>
+      <template #actions>
+        <ButtonAction
+          :label="$t('deleteConversation', 'Delete conversation')"
+          icon="bk_mdi_delete"
           @click.stop="emit('delete', conv.uuid)"
-        >
-          <Icon name="bk_mdi_delete" />
-        </button>
-      </div>
-    </div>
-    <div v-else class="bk-agent-conversation-list-empty">
-      {{ $t("aiAgentNoConversations", "No past conversations.") }}
-    </div>
+        />
+      </template>
+    </PanelItem>
+  </div>
+  <div v-else class="_bk_text-sm _bk_text-mono-400 _bk_text-center _bk_py-20">
+    {{ $t("aiAgentNoConversations", "No past conversations.") }}
   </div>
 </template>
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { Icon, RelativeTime } from "#blokkli/editor/components";
+import { RelativeTime } from "#blokkli/editor/components";
+import PanelItem from "#blokkli/editor/components/Panel/Item/index.vue";
+import ButtonAction from "#blokkli/editor/components/ButtonAction/index.vue";
 defineProps({
   conversations: { type: Array, required: true }
 });

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

@@ -1,6 +1,6 @@
-import type { AgentConversationSummary } from '#blokkli/agent/app/composables';
+import type { AgentConversationItemSummary } from '#blokkli/agent/app/composables';
 type __VLS_Props = {
-    conversations: AgentConversationSummary[];
+    conversations: AgentConversationItemSummary[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     switch: (id: string) => any;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="_bk_mt-10 _bk_p-10 _bk_border _bk_border-mono-300 _bk_rounded-lg">
+  <div class="_bk_mt-10 _bk_p-10 _bk_border _bk_border-mono-300 _bk_rounded-xl">
     <div class="_bk_flex _bk_items-center _bk_justify-between _bk_gap-8">
       <span class="_bk_text-sm _bk_font-semibold">
         {{
@@ -41,12 +41,13 @@
           class="_bk_text-sm _bk_p-8 _bk_rounded _bk_border _bk_border-mono-300 _bk_bg-white _bk_resize-none _bk_focus:border-mono-500 _bk_focus:outline-none"
           :rows="2"
           :placeholder="
-  $t('aiAgentFeedbackPlaceholder', 'Tell us more (optional)...')
+  $t('aiAgentFeedbackPlaceholder', 'Tell us more (optional)', {
+    more: true
+  })
 "
         />
         <button
-          class="bk-button bk-is-small bk-is-primary _bk_self-end"
-          :disabled="!comment"
+          class="bk-button bk-is-small bk-scheme-accent _bk_self-end"
           @click="onSubmit"
         >
           {{ $t("aiAgentFeedbackSubmit", "Submit") }}
@@ -57,32 +58,12 @@
 </template>
 
 <script setup>
-import { computed, ref, useBlokkli } from "#imports";
+import { ref, useBlokkli } from "#imports";
 import { Icon, TransitionHeight, Tooltip } from "#blokkli/editor/components";
+import { useAgentFeedbackOptions } from "#blokkli/agent/app/composables";
 const { $t } = useBlokkli();
 const emit = defineEmits(["submit", "done"]);
-const options = computed(() => {
-  return [
-    {
-      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"
-    }
-  ];
-});
+const options = useAgentFeedbackOptions();
 const rating = ref(null);
 const comment = ref("");
 const submitted = ref(false);
@@ -96,7 +77,9 @@ function onRate(value) {
 function onSubmit() {
   if (!rating.value) return;
   submitted.value = true;
-  emit("submit", rating.value, comment.value || void 0);
+  if (comment.value) {
+    emit("submit", rating.value, comment.value || void 0);
+  }
   emit("done");
 }
 </script>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title: string;
+    tooltip: string;
+    value: 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/features/agent/Panel/Input/Actions/TokenUsage/Item.vue

@@ -0,0 +1,20 @@
+<template>
+  <li :title="tooltip" class="_bk_h-30 _bk_flex-1 _bk_cursor-help _bk_px-10">
+    <div
+      class="_bk_text-[10px] _bk_font-medium _bk_uppercase _bk_tracking-wide _bk_mb-3 _bk_text-mono-500 _bk_flex _bk_items-center"
+    >
+      {{ title }}
+    </div>
+    <div class="_bk_font-mono _bk_text-xs">
+      {{ value }}
+    </div>
+  </li>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  tooltip: { type: String, required: true },
+  value: { type: String, required: true }
+});
+</script>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title: string;
+    tooltip: string;
+    value: 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/features/agent/Panel/Input/Actions/TokenUsage/Separator.d.vue.ts

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

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

@@ -0,0 +1,3 @@
+<template>
+  <li class="_bk_w-0 _bk_shrink-0 _bk_flex-none _bk_border-r _bk_border-dashed _bk_border-r-mono-400" />
+</template>

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

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

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

@@ -1,45 +1,45 @@
 <template>
-  <div class="bk-agent-token-usage">
-    <ul>
-      <li
-        :title="
+  <div
+    class="_bk_py-8 _bk_whitespace-nowrap _bk_leading-none _bk_border-b _bk_border-b-mono-300 _bk_border-dashed"
+  >
+    <ul class="_bk_flex _bk_justify-evenly _bk_flex-1">
+      <TokenUsageItem
+        :tooltip="
   $t('aiAgentTokensInput', 'Tokens used to send context to the AI')
 "
-      >
-        <div>{{ $t("aiAgentTokensInputLabel", "Input") }}</div>
-        <div>
-          {{ ui.formatNumber(totals.inputTokens) }}
-        </div>
-      </li>
-      <li class="bk-is-separator" />
-      <li :title="$t('aiAgentTokensCached', 'Reused input tokens (cheaper)')">
-        <div>{{ $t("aiAgentTokensCachedLabel", "Cached") }}</div>
-        <div>
-          {{ ui.formatNumber(totals.cacheReadInputTokens) }}
-        </div>
-      </li>
-      <li class="bk-is-separator" />
-      <li
-        :title="
+        :title="$t('aiAgentTokensInputLabel', 'Input')"
+        :value="ui.formatNumber(totals.inputTokens)"
+      />
+      <Separator />
+      <TokenUsageItem
+        :tooltip="$t('aiAgentTokensCached', 'Reused input tokens (cheaper)')"
+        :title="$t('aiAgentTokensCachedLabel', 'Cached')"
+        :value="ui.formatNumber(totals.cacheReadInputTokens)"
+      />
+      <Separator />
+      <TokenUsageItem
+        :tooltip="
   $t('aiAgentTokensOutput', 'Tokens generated by the AI in responses')
 "
-      >
-        <div>{{ $t("aiAgentTokensOutputLabel", "Output") }}</div>
-        <div>{{ ui.formatNumber(totals.outputTokens) }}</div>
-      </li>
-      <li class="bk-is-separator" />
-      <li
-        :title="$t('aiAgentTokensCost', 'Estimated cost for this conversation')"
-      >
-        <div>{{ $t("aiAgentTokensCostLabel", "Cost") }}</div>
-        <div>{{ totals.cost }}</div>
-      </li>
+        :title="$t('aiAgentTokensOutputLabel', 'Output')"
+        :value="ui.formatNumber(totals.outputTokens)"
+      />
+      <Separator />
+      <TokenUsageItem
+        :tooltip="
+  $t('aiAgentTokensCost', 'Estimated cost for this conversation')
+"
+        :title="$t('aiAgentTokensCostLabel', 'Cost')"
+        :value="totals.cost"
+      />
     </ul>
   </div>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
+import TokenUsageItem from "./Item.vue";
+import Separator from "./Separator.vue";
 const props = defineProps({
   usageTurns: { type: Array, required: true }
 });