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

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

@@ -1,43 +1,5 @@
 <template>
-  <AgentPanel
-    :is-shown
-    :agent-name
-    :conversation="conversation.items.value"
-    :active-item="conversation.activeItem.value"
-    :is-thinking="agent.isThinking.value"
-    :is-processing="agent.isProcessing.value"
-    :is-connected="socket.isConnected.value"
-    :has-been-ready="agent.hasBeenReady.value"
-    :pending-tool-call="tools.pendingToolCall.value"
-    :pending-mutation="tools.pendingMutation.value"
-    :auto-approve="tools.autoApprove.value"
-    :conversation-list="conversation.conversationList.value"
-    :show-conversation-list="conversation.showConversationList.value"
-    :plan="plan.plan.value"
-    :tool-details="conversation.toolDetails"
-    :usage-turns="conversation.usageTurns.value"
-    :page-context="tools.pageContext.value"
-    :supports-feedback="!!adapter.submitConversationFeedback"
-    :feedback-item-ids="conversation.feedbackItemIds.value"
-    @connect="agent.connect"
-    @send-prompt="agent.sendPrompt"
-    @retry="agent.retry"
-    @cancel="agent.cancel"
-    @approve="tools.approve"
-    @reject="tools.reject"
-    @set-auto-approve="tools.setAutoApprove"
-    @new-conversation="agent.newConversation"
-    @get-transcript="agent.getTranscript"
-    @tool-component-done="tools.onComponentDone"
-    @switch-conversation="agent.switchConversation"
-    @delete-conversation="agent.deleteConversation"
-    @submit-feedback="onSubmitFeedback"
-    @feedback-done="onFeedbackDone"
-    @show-conversations="onShowConversations"
-    @hide-conversations="onHideConversations"
-    @approve-plan="plan.approve"
-    @reject-plan="plan.reject"
-  />
+  <AgentPanel :is-shown />
 
   <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
@@ -45,9 +7,9 @@
         v-if="conversation.showTranscript.value"
         id="agent-transcript"
         title="Agent Transcript"
-        :width="900"
+        :width="1200"
         hide-buttons
-        full-screen
+        mono
         @cancel="conversation.showTranscript.value = false"
       >
         <AgentTranscript
@@ -63,6 +25,7 @@
 import {
   useBlokkli,
   onBeforeUnmount,
+  onMounted,
   watch,
   provide,
   defineAsyncComponent
@@ -75,12 +38,12 @@ import toolsProvider from "#blokkli/agent/app/providers/toolsProvider";
 import agentProvider from "#blokkli/agent/app/providers/agentProvider";
 import { INJECT_AGENT_APP } from "#blokkli/agent/app/helpers/injections";
 import AgentPanel from "./Panel/index.vue";
+import { agentName } from "#blokkli-build/agent-prompts";
 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 }
 });
@@ -99,13 +62,12 @@ const tools = toolsProvider({
 const agent = agentProvider({
   app: blokkli,
   adapter: props.adapter,
-  agentName: props.agentName,
+  agentName,
   socket,
   conversation,
   plan,
   tools
 });
-const adapter = props.adapter;
 const agentApp = {
   socket,
   conversation,
@@ -114,69 +76,45 @@ const agentApp = {
   ...agent
 };
 provide(INJECT_AGENT_APP, agentApp);
-async function onSubmitFeedback(rating, comment) {
-  if (!adapter.submitConversationFeedback) return;
-  const conversationId = conversation.activeConversationId.value;
-  if (!conversationId) return;
-  const lastItem = conversation.items.value[conversation.items.value.length - 1];
-  if (!lastItem) return;
-  try {
-    await adapter.submitConversationFeedback({
-      conversationId,
-      rating,
-      lastItemId: lastItem.id,
-      comment
+async function consumePromptRequest(request) {
+  emit("consumed");
+  const { prompt, selectedUuids } = request;
+  const promptText = prompt.getPrompt(blokkli);
+  const userPromptText = prompt.getUserPrompt?.(blokkli);
+  let preSeededResults = void 0;
+  let autoExecuteTools = void 0;
+  if (prompt.preExecute) {
+    const preResult = await prompt.preExecute({
+      app: blokkli,
+      selectedUuids,
+      runTool: tools.runForPrompt
     });
-  } catch (e) {
-    console.warn("[blokkli agent] Failed to submit feedback:", e);
+    if (preResult) {
+      preSeededResults = preResult.preSeededResults;
+      autoExecuteTools = preResult.autoExecuteTools;
+    }
   }
+  agent.sendPrompt({
+    prompt: promptText,
+    displayPrompt: userPromptText,
+    selectedUuids,
+    autoLoadTools: prompt.tools,
+    autoLoadSkills: prompt.skills,
+    preSeededResults,
+    autoExecuteTools,
+    promptId: prompt.id
+  });
 }
-function onFeedbackDone() {
-  const lastItem = conversation.items.value[conversation.items.value.length - 1];
-  if (lastItem) {
-    conversation.feedbackItemIds.value.add(lastItem.id);
+onMounted(() => {
+  if (props.pendingPromptRequest) {
+    consumePromptRequest(props.pendingPromptRequest);
   }
-}
-async function onShowConversations() {
-  await agent.refreshConversationList();
-  conversation.showConversationList.value = true;
-}
-function onHideConversations() {
-  conversation.showConversationList.value = false;
-}
+});
 watch(
   () => props.pendingPromptRequest,
-  async (request) => {
-    if (!request) return;
-    emit("consumed");
-    const { prompt, selectedUuids } = request;
-    const promptText = prompt.getPrompt(blokkli);
-    const userPromptText = prompt.getUserPrompt?.(blokkli);
-    let preSeededResults = void 0;
-    let autoExecuteTools = void 0;
-    if (prompt.preExecute) {
-      const preResult = await prompt.preExecute({
-        app: blokkli,
-        selectedUuids,
-        runTool: tools.runForPrompt
-      });
-      if (preResult) {
-        preSeededResults = preResult.preSeededResults;
-        autoExecuteTools = preResult.autoExecuteTools;
-      }
-    }
-    agent.sendPrompt(
-      promptText,
-      userPromptText,
-      selectedUuids,
-      void 0,
-      prompt.tools,
-      prompt.skills,
-      preSeededResults,
-      autoExecuteTools
-    );
-  },
-  { immediate: true }
+  (request) => {
+    if (request) consumePromptRequest(request);
+  }
 );
 onBeforeUnmount(() => {
   agent.disconnect();

package/dist/modules/agent/runtime/app/features/agent/Container.vue.d.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<{

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

@@ -0,0 +1,13 @@
+import type { AgentConversationItem } from '#blokkli/agent/app/features/agent/types';
+type __VLS_Props = {
+    item: AgentConversationItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    delete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/ConversationsTab/Item.vue

@@ -0,0 +1,46 @@
+<template>
+  <button
+    type="button"
+    class="_bk_flex-1 _bk_flex _bk_items-start _bk_gap-10 _bk_p-10 _bk_text-left _bk_min-w-0 _bk_[--bk-avatar-size:30px]"
+    @click="emit('select')"
+  >
+    <Avatar
+      :deleted="!item.author"
+      :name="item.author?.name || $t('userDeleted', '[deleted]')"
+      :seed="item.author?.id"
+      :image-url="item.author?.imageUrl"
+    />
+    <span class="_bk_flex _bk_flex-col _bk_gap-2 _bk_min-w-0 _bk_flex-1">
+      <span class="_bk_text-sm _bk_font-medium _bk_text-mono-900 _bk_truncate">
+        {{ item.title || $t("agentConversationsUntitled", "Untitled") }}
+      </span>
+      <span class="_bk_text-xs _bk_text-mono-600 _bk_truncate _bk_flex _bk_gap-2">
+        <span>{{ item.author?.name || $t("userDeleted", "[deleted]") }}</span>
+        <span v-if="item.host?.label" class="_bk_truncate">
+          · {{ item.host.label }}
+        </span>
+      </span>
+      <span class="_bk_text-xs _bk_text-mono-500">
+        <RelativeTime :timestamp="item.updatedAt" />
+      </span>
+    </span>
+  </button>
+  <div class="_bk_shrink-0 _bk_flex _bk_items-center _bk_px-5 _bk_relative">
+    <ButtonAction
+      :label="$t('deleteConversation', 'Delete conversation')"
+      icon="bk_mdi_delete"
+      theme="danger"
+      @click.stop="emit('delete')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { Avatar, ButtonAction, RelativeTime } from "#blokkli/editor/components";
+defineProps({
+  item: { type: Object, required: true }
+});
+const emit = defineEmits(["select", "delete"]);
+const { $t } = useBlokkli();
+</script>

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

@@ -0,0 +1,13 @@
+import type { AgentConversationItem } from '#blokkli/agent/app/features/agent/types';
+type __VLS_Props = {
+    item: AgentConversationItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+    delete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,74 @@
+<template>
+  <SplitView
+    v-model:page="page"
+    :items="items"
+    :get-id="getId"
+    :selected-id="selectedUuid"
+    :conversation-uuid="selectedUuid"
+    :is-list-loading="isLoading"
+    :list-error="loadError"
+    :empty-message="
+  $t('agentConversationsListEmpty', 'No agent conversations yet.')
+"
+    :empty-prompt="
+  $t(
+    'agentConversationsSelectPrompt',
+    'Select a conversation from the list to view it.'
+  )
+"
+    :total-pages="totalPages"
+  >
+    <template #item="{ item }">
+      <Item
+        :item="item"
+        @select="selectedUuid = item.uuid"
+        @delete="onDelete(item.uuid)"
+      />
+    </template>
+  </SplitView>
+</template>
+
+<script setup>
+import { ref, useBlokkli } from "#imports";
+import { useAgentPaginatedQuery } from "#blokkli/agent/app/composables";
+import SplitView from "../SplitView/index.vue";
+import Item from "./Item.vue";
+const { adapter, $t } = useBlokkli();
+const selectedUuid = ref(null);
+const { page, items, totalPages, isLoading, loadError, refresh } = await useAgentPaginatedQuery(
+  () => adapter.agentConversations?.queryConversations,
+  {
+    missing: $t(
+      "agentConversationsBackendMissing",
+      "This backend does not expose the admin conversation list."
+    ),
+    failed: $t(
+      "agentConversationsListError",
+      "Failed to load conversations."
+    )
+  }
+);
+function getId(item) {
+  return item.uuid;
+}
+async function onDelete(uuid) {
+  if (!adapter.agentConversations?.delete) return;
+  const confirmed = window.confirm(
+    $t(
+      "agentConversationsDeleteConfirm",
+      "Delete this conversation? This cannot be undone."
+    )
+  );
+  if (!confirmed) return;
+  try {
+    await adapter.agentConversations.delete(uuid);
+  } catch (e) {
+    console.warn("[blokkli agent] Failed to delete conversation:", e);
+    return;
+  }
+  if (selectedUuid.value === uuid) {
+    selectedUuid.value = null;
+  }
+  await refresh();
+}
+</script>

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

@@ -0,0 +1,11 @@
+import type { AgentConversationFeedbackItem } from '#blokkli/agent/app/features/agent/types';
+type __VLS_Props = {
+    item: AgentConversationFeedbackItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/RatingsTab/Item.vue

@@ -0,0 +1,55 @@
+<template>
+  <button
+    type="button"
+    class="_bk_flex-1 _bk_flex _bk_items-start _bk_gap-10 _bk_p-10 _bk_text-left _bk_min-w-0 _bk_[--bk-avatar-size:24px]"
+    @click="emit('select')"
+  >
+    <span
+      class="_bk_shrink-0 _bk_size-25 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center"
+      :class="'bk-scheme-' + option.theme"
+    >
+      <span
+        class="_bk_size-20 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center _bk_bg-scheme-normal _bk_text-scheme-text"
+      >
+        <Icon :name="option.icon" class="_bk_size-[12px]" />
+      </span>
+    </span>
+    <span class="_bk_flex _bk_flex-col _bk_gap-2 _bk_min-w-0 _bk_flex-1">
+      <span v-if="item.comment" class="_bk_text-sm _bk_text-mono-900 _bk_line-clamp-2">
+        {{ item.comment }}
+      </span>
+      <span v-else class="_bk_text-sm _bk_text-mono-500 _bk_italic">
+        {{ $t("agentRatingsNoComment", "No comment") }}
+      </span>
+      <span class="_bk_text-xs _bk_text-mono-500 _bk_flex _bk_items-center _bk_gap-5 _bk_mt-3">
+        <Avatar
+          :deleted="!item.author"
+          :name="item.author?.name || $t('userDeleted', '[deleted]')"
+          :seed="item.author?.id"
+          :image-url="item.author?.imageUrl"
+        />
+        <span class="_bk_truncate">{{
+          item.author?.name || $t("userDeleted", "[deleted]")
+        }}</span>
+        <span class="_bk_ml-auto _bk_shrink-0">
+          <RelativeTime :timestamp="item.createdAt" />
+        </span>
+      </span>
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Avatar, Icon, RelativeTime } from "#blokkli/editor/components";
+import { useAgentFeedbackOptions } from "#blokkli/agent/app/composables";
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+const emit = defineEmits(["select"]);
+const { $t } = useBlokkli();
+const options = useAgentFeedbackOptions();
+const option = computed(
+  () => options.value.find((o) => o.value === props.item.rating) ?? options.value[0]
+);
+</script>

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

@@ -0,0 +1,11 @@
+import type { AgentConversationFeedbackItem } from '#blokkli/agent/app/features/agent/types';
+type __VLS_Props = {
+    item: AgentConversationFeedbackItem;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/RatingsTab/index.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/ConversationsAdmin/RatingsTab/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <SplitView
+    v-model:page="page"
+    :items="items"
+    :get-id="getId"
+    :selected-id="selectedRatingId"
+    :conversation-uuid="selectedConversationUuid"
+    :is-list-loading="isLoading"
+    :list-error="loadError"
+    :empty-message="$t('agentRatingsEmpty', 'No ratings yet.')"
+    :empty-prompt="
+  $t(
+    'agentRatingsSelectPrompt',
+    'Select a rating to view the conversation it was given on.'
+  )
+"
+    :total-pages="totalPages"
+  >
+    <template #header>
+      <div
+        v-if="items.length"
+        class="_bk_px-15 _bk_py-15 _bk_border-b _bk_border-mono-200 _bk_bg-white"
+      >
+        <div class="_bk_flex _bk_items-center _bk_gap-15">
+          <DonutChart
+            :data="chartData"
+            :center-text="String(items.length)"
+            class="_bk_text-mono-700"
+          />
+          <ul class="_bk_flex-1 _bk_flex _bk_flex-col _bk_gap-5">
+            <li
+              v-for="opt in optionsReversed"
+              :key="opt.value"
+              class="_bk_flex _bk_items-center _bk_gap-5 _bk_text-xs"
+              :class="'bk-scheme-' + opt.theme"
+            >
+              <Icon :name="opt.icon" class="_bk_size-[14px] _bk_text-scheme-normal" />
+              <span class="_bk_font-medium _bk_text-mono-700">{{ opt.label }}</span>
+              <span class="_bk_ml-auto _bk_font-semibold _bk_text-mono-900">
+                {{ aggregates[opt.value].count }}
+              </span>
+              <span class="_bk_text-mono-500">
+                ({{ aggregates[opt.value].percent }}%)
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <Item :item="item" @select="onSelect(item)" />
+    </template>
+  </SplitView>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { DonutChart, Icon } from "#blokkli/editor/components";
+import { rgbaToString } from "#blokkli/editor/helpers/color";
+import {
+  useAgentFeedbackOptions,
+  useAgentPaginatedQuery
+} from "#blokkli/agent/app/composables";
+import SplitView from "../SplitView/index.vue";
+import Item from "./Item.vue";
+const { adapter, $t, theme } = useBlokkli();
+const ratingOptions = useAgentFeedbackOptions();
+const selectedRatingId = ref(null);
+const selectedConversationUuid = ref(null);
+const { page, items, totalPages, isLoading, loadError } = await useAgentPaginatedQuery(
+  () => adapter.agentConversations?.queryFeedback,
+  {
+    missing: $t(
+      "agentRatingsBackendMissing",
+      "This backend does not expose the ratings list."
+    ),
+    failed: $t("agentRatingsListError", "Failed to load ratings.")
+  }
+);
+const aggregates = computed(() => {
+  const counts = {
+    bad: 0,
+    fine: 0,
+    good: 0
+  };
+  for (const e of items.value) counts[e.rating]++;
+  const total = items.value.length || 1;
+  return {
+    bad: { count: counts.bad, percent: Math.round(counts.bad / total * 100) },
+    fine: {
+      count: counts.fine,
+      percent: Math.round(counts.fine / total * 100)
+    },
+    good: {
+      count: counts.good,
+      percent: Math.round(counts.good / total * 100)
+    }
+  };
+});
+const optionsReversed = computed(() => [...ratingOptions.value].reverse());
+const chartData = computed(
+  () => optionsReversed.value.map((opt) => ({
+    label: opt.label,
+    value: aggregates.value[opt.value].count,
+    color: rgbaToString(theme[opt.theme].value.normal)
+  }))
+);
+function getId(item) {
+  return item.id;
+}
+function onSelect(item) {
+  selectedRatingId.value = item.id;
+  selectedConversationUuid.value = item.conversationUuid;
+}
+</script>

package/dist/modules/agent/runtime/app/features/agent/ConversationsAdmin/RatingsTab/index.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/ConversationsAdmin/SplitView/ConversationDetail.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ParsedConversation } from '#blokkli/agent/app/helpers/parseConversationData';
+type __VLS_Props = {
+    parsed: ParsedConversation;
+};
+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/ConversationsAdmin/SplitView/ConversationDetail.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <header class="_bk_pb-15 _bk_border-b _bk_border-mono-300 _bk_py-15 _bk_px-20">
+      <h4 class="_bk_text-lg _bk_font-bold _bk_text-mono-900 _bk_mb-5">
+        {{ parsed.title || $t("agentConversationsUntitled", "Untitled") }}
+      </h4>
+      <div
+        class="_bk_flex _bk_flex-wrap _bk_items-center _bk_gap-15 _bk_text-sm _bk_text-mono-600 _bk_[--bk-avatar-size:24px]"
+      >
+        <span class="_bk_flex _bk_items-center _bk_gap-5">
+          <Avatar
+            :deleted="!parsed.author"
+            :name="parsed.author?.name || $t('userDeleted', '[deleted]')"
+            :seed="parsed.author?.id"
+            :image-url="parsed.author?.imageUrl"
+          />
+          {{ parsed.author?.name || $t("userDeleted", "[deleted]") }}
+        </span>
+        <span
+          v-if="parsed.host?.label"
+          class="_bk_flex _bk_items-center _bk_gap-3 _bk_truncate"
+        >
+          <Icon name="bk_mdi_link" class="_bk_size-15 _bk_text-mono-500" />
+          <a
+            v-if="parsed.host.editUrl"
+            :href="parsed.host.editUrl"
+            target="_blank"
+            rel="noopener"
+            class="_bk_text-accent-700 _bk_hover:underline"
+          >
+            {{ parsed.host.label }}
+          </a>
+          <span v-else>{{ parsed.host.label }}</span>
+        </span>
+        <span class="_bk_text-mono-500">
+          <RelativeTime :timestamp="parsed.updatedAt" />
+        </span>
+      </div>
+    </header>
+    <div class="_bk_p-20">
+      <Conversation
+        :history="parsed.conversation"
+        :active-item="null"
+        :is-thinking="false"
+        :tool-details="EMPTY_TOOL_DETAILS"
+        :inline-feedback="parsed.feedback"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { Avatar, Icon, RelativeTime } from "#blokkli/editor/components";
+import Conversation from "#blokkli/agent/app/components/Conversation/index.vue";
+const EMPTY_TOOL_DETAILS = /* @__PURE__ */ new Map();
+defineProps({
+  parsed: { type: Object, required: true }
+});
+const { $t } = useBlokkli();
+</script>

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

@@ -0,0 +1,7 @@
+import type { ParsedConversation } from '#blokkli/agent/app/helpers/parseConversationData';
+type __VLS_Props = {
+    parsed: ParsedConversation;
+};
+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;