@meistrari/chat-nuxt 4.2.0-rc.4 → 4.2.0-rc.6

package/README.md

@@ -35,11 +35,13 @@ Runtime internals under `src/runtime/**`, generated Nuxt aliases, and workspace-
 
 ## Conversation forks
 
-Hover a completed message (or focus its actions with the keyboard) and choose **Iniciar nova
-conversa a partir daqui** from the three-dot menu inside the top-right of either message bubble. Touch devices show the action without requiring
-hover. The embed selects the new conversation and emits its existing `update:conversationId` event.
-A user-message cutoff starts a response automatically; an assistant-message cutoff waits for input.
+Completed assistant responses offer **Iniciar nova conversa a partir daqui** in the three-dot
+menu below the response, beside the feedback controls. User messages cannot be forked.
+The embed selects the new conversation and emits its existing `update:conversationId` event.
+The new conversation stays idle until the user sends a message.
 Fork titles use `<original title> - Cópia <number>` and remain intact when the first response completes.
+New forks show a separator after the copied response with a link to the immediate source conversation.
+Existing forks do not gain this separator.
 
 This feature requires the matching Chat API fork endpoint described in
 [Conversation forks](../chat-api/README.md#conversation-forks). History, tool data and file references

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.2.0-rc.4",
+  "version": "4.2.0-rc.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/conversations/components/chat-conversation-list.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useVirtualList } from "@vueuse/core";
 import { useConversationList } from "../composables/conversation-list";
 const props = defineProps({
   conversations: { type: null, required: true },
@@ -48,11 +49,122 @@ const {
   handleConversationDrop,
   startConversationInGroup
 } = useConversationList(props);
+const rows = computed(() => {
+  const result = [];
+  if (groupItems.value.length > 0)
+    result.push({ type: "folders", key: "folders", height: 18, groupId: null });
+  for (const groupBucket of groupItems.value) {
+    const groupId = groupBucket.group.id;
+    result.push({ type: "group", key: `group:${groupId}`, height: 34, groupId, groupBucket });
+    if (groupBucket.isRenaming && renameGroupError.value)
+      result.push({ type: "error", key: `error:${groupId}`, height: 20, groupId, groupBucket });
+    if (!groupBucket.open)
+      continue;
+    for (const conversation of groupBucket.items)
+      result.push({ type: "conversation", key: conversation.id, height: 33, groupId, conversation });
+    if (groupBucket.showNewConversationAction)
+      result.push({ type: "new", key: `new:${groupId}`, height: 33, groupId, groupBucket });
+    else if (groupBucket.showSearchEmpty)
+      result.push({ type: "empty", key: `empty:${groupId}`, height: 33, groupId, groupBucket });
+  }
+  result.push({ type: "ungrouped", key: "ungrouped", height: 24, groupId: null });
+  for (const conversation of ungroupedConversations.value)
+    result.push({ type: "conversation", key: conversation.id, height: 33, groupId: null, conversation });
+  let offset = 0;
+  return result.map((row) => {
+    const positionedRow = { ...row, offset };
+    offset += row.height;
+    return positionedRow;
+  });
+});
+const { list: visibleRows, containerProps, scrollTo } = useVirtualList(rows, {
+  itemHeight: (index) => rows.value[index].height,
+  overscan: 8
+});
+const retainedRowKey = ref(null);
+const draggedRowKey = ref(null);
+const renderedRows = computed(() => {
+  const indexes = new Set(visibleRows.value.map((row) => row.index));
+  for (const key of [retainedRowKey.value, draggedRowKey.value]) {
+    const index = rows.value.findIndex((row) => row.key === key);
+    if (index >= 0)
+      indexes.add(index);
+  }
+  return [...indexes].sort((a, b) => a - b).map((index) => ({ ...rows.value[index], index }));
+});
+const totalHeight = computed(() => {
+  const last = rows.value.at(-1);
+  return last ? last.offset + last.height : 0;
+});
+function revealRow(index) {
+  const container = containerProps.ref.value;
+  const row = rows.value[index];
+  if (!row || !container)
+    return;
+  if (row.offset < container.scrollTop || row.offset + row.height > container.scrollTop + container.clientHeight)
+    scrollTo(index);
+}
+const activeRowIndex = computed(() => rows.value.findIndex((row) => row.type === "conversation" && row.conversation.id === props.currentId));
+watch([activeRowIndex, containerProps.ref], ([index]) => revealRow(index), { flush: "post" });
+const renamingGroupRowIndex = computed(() => rows.value.findIndex((row) => row.type === "group" && row.groupBucket.isRenaming));
+watch([renamingGroupRowIndex, containerProps.ref], ([index]) => revealRow(index), { flush: "post" });
+async function handleRowKeydown(event, index) {
+  if (event.key !== "Tab" || event.defaultPrevented)
+    return;
+  const selector = 'a[href], button:not([disabled]), input:not([disabled]), [tabindex="0"]';
+  const controls = [...event.currentTarget.querySelectorAll(selector)];
+  if (event.target !== (event.shiftKey ? controls[0] : controls.at(-1)))
+    return;
+  const direction = event.shiftKey ? -1 : 1;
+  let nextIndex = index + direction;
+  while (rows.value[nextIndex] && ["folders", "ungrouped", "empty", "error"].includes(rows.value[nextIndex].type))
+    nextIndex += direction;
+  const nextRow = rows.value[nextIndex];
+  if (!nextRow)
+    return;
+  event.preventDefault();
+  retainedRowKey.value = nextRow.key;
+  revealRow(nextIndex);
+  await nextTick();
+  const nextControls = containerProps.ref.value?.querySelector(`[data-row-index="${nextIndex}"]`)?.querySelectorAll(selector);
+  const target = event.shiftKey ? nextControls?.[nextControls.length - 1] : nextControls?.[0];
+  target?.focus();
+}
+watch(conversationSearch, () => scrollTo(0), { flush: "post" });
+function acceptsDrops(row) {
+  return row.type !== "folders";
+}
+function dropListeners(row) {
+  if (!acceptsDrops(row))
+    return {};
+  return {
+    dragenter: (event) => {
+      event.preventDefault();
+      handleDragEnter(row.groupId);
+    },
+    dragover: (event) => {
+      event.preventDefault();
+      handleDragOver(event, row.groupId);
+    },
+    dragleave: (event) => handleDragLeave(event, row.groupId),
+    drop: (event) => {
+      event.preventDefault();
+      void handleConversationDrop(event, row.groupId);
+    }
+  };
+}
+function dropTargetClass(row) {
+  if (!acceptsDrops(row))
+    return "";
+  if (row.groupId)
+    return groupItems.value.find((group) => group.group.id === row.groupId)?.dropTarget ? "bg-neutral-200" : "";
+  return ungroupedDropTarget.value ? "bg-lowered" : "";
+}
 </script>
 
 <template>
-    <div flex="~ col" gap-12px>
-        <div px-8px flex="~ col" gap-8px>
+    <div flex="~ col" gap-12px h-full min-h-0 overflow-hidden>
+        <div px-8px flex="~ col" gap-8px shrink-0>
             <ChatConversationSearch v-model="conversationSearch" />
             <ChatConversationCreatorFilter />
         </div>
@@ -79,33 +191,39 @@ const {
             </p>
         </div>
 
-        <div v-else flex="~ col" gap-4px mt-4px>
-            <div v-if="groupItems.length > 0" flex="~ col" gap-2px>
-                <span body-12-medium text-secondary pl-10px>
-                    Pastas · {{ groupItems.length }}
-                </span>
-
+        <div v-else v-bind="containerProps" flex-1 min-h-0 mt-4px>
+            <div relative :style="{ height: `${totalHeight}px` }">
                 <div
-                    v-for="groupBucket in groupItems"
-                    :key="groupBucket.group.id"
-                    flex="~ col"
+                    v-for="row in renderedRows"
+                    :key="row.key"
+                    :style="{ height: `${row.height}px`, top: `${row.offset}px` }"
+                    absolute inset-x-0
+                    :data-row-index="row.index"
                     rounded-8px
-                    transition-colors
-                    :class="groupBucket.dropTarget ? 'bg-neutral-200' : ''"
-                    @dragenter.prevent="handleDragEnter(groupBucket.group.id)"
-                    @dragover.prevent="handleDragOver($event, groupBucket.group.id)"
-                    @dragleave="handleDragLeave($event, groupBucket.group.id)"
-                    @drop.prevent="handleConversationDrop($event, groupBucket.group.id)"
+                    :class="dropTargetClass(row)"
+                    @keydown="handleRowKeydown($event, row.index)"
+                    @focusin="retainedRowKey = row.key"
+                    @pointerdown="retainedRowKey = row.key"
+                    @dragstart.capture="draggedRowKey = row.key"
+                    @dragend.capture="draggedRowKey = null"
+                    v-on="dropListeners(row)"
                 >
+                    <span v-if="row.type === 'folders'" body-12-medium text-secondary pl-10px>
+                        Pastas · {{ groupItems.length }}
+                    </span>
+                    <span v-else-if="row.type === 'ungrouped'" block body-12-medium text-secondary pl-10px pt-4px>
+                        {{ ungroupedConversationLabel }}
+                    </span>
                     <div
+                        v-if="row.type === 'group'"
                         rounded-10px
                         class="group"
-                        :class="groupBucket.dropTarget ? '' : groupBucket.open ? 'bg-muted' : 'hover:bg-subtle'"
+                        :class="row.groupBucket.dropTarget ? '' : row.groupBucket.open ? 'bg-muted' : 'hover:bg-subtle'"
                     >
                         <div h-32px w-full pl-10px pr-4px flex items-center gap-8px text-left>
-                            <template v-if="groupBucket.isRenaming">
+                            <template v-if="row.groupBucket.isRenaming">
                                 <TelaIcon
-                                    :name="groupBucket.folderIcon"
+                                    :name="row.groupBucket.folderIcon"
                                     size="16px"
                                     color="icon-secondary"
                                     shrink-0
@@ -116,7 +234,7 @@ const {
                                     mr-4px
                                 >
                                     <input
-                                        :ref="(element) => setRenameGroupInputRef(element, groupBucket.group.id)"
+                                        :ref="(element) => setRenameGroupInputRef(element, row.groupBucket.group.id)"
                                         v-model="renameGroupName"
                                         type="text"
                                         autocomplete="off"
@@ -148,19 +266,20 @@ const {
                                     flex items-center gap-8px
                                     text-left
                                     cursor-pointer
-                                    @click="toggleGroup(groupBucket.group.id)"
+                                    :aria-expanded="row.groupBucket.open"
+                                    @click="toggleGroup(row.groupBucket.group.id)"
                                 >
                                     <TelaIcon
-                                        :name="groupBucket.folderIcon"
+                                        :name="row.groupBucket.folderIcon"
                                         size="16px"
                                         color="icon-secondary"
                                         shrink-0
                                     />
                                     <div flex items-center gap-6px>
-                                        <span min-w-0 truncate body-14-medium :class="groupBucket.open ? 'text-primary' : 'text-secondary group-hover:text-primary'">
-                                            {{ groupBucket.group.name }}
+                                        <span min-w-0 truncate body-14-medium :class="row.groupBucket.open ? 'text-primary' : 'text-secondary group-hover:text-primary'">
+                                            {{ row.groupBucket.group.name }}
                                         </span>
-                                        <TelaAnimatedNumber v-if="groupBucket.conversationCountLabel" :value="groupBucket.conversationCountLabel" body-12-medium text-tertiary />
+                                        <TelaAnimatedNumber v-if="row.groupBucket.conversationCountLabel" :value="row.groupBucket.conversationCountLabel" body-12-medium text-tertiary />
                                     </div>
                                 </button>
 
@@ -169,7 +288,7 @@ const {
                                     class="opacity-0 group-hover:opacity-100 focus-within:opacity-100 [&:has([data-state=open])]:opacity-100"
                                 >
                                     <TelaDropdownMenu
-                                        :items="groupBucket.menuItems"
+                                        :items="row.groupBucket.menuItems"
                                         content-class="chat-sidebar-floating"
                                     >
                                         <button
@@ -194,82 +313,15 @@ const {
                         </div>
                     </div>
 
-                    <div
-                        v-if="groupBucket.isRenaming && renameGroupError"
-                        ml-44px mr-8px mb-4px
-                    >
-                        <span text-12px text-red-600 leading-16px aria-live="polite">
+                    <div v-if="row.type === 'error'" ml-44px mr-8px>
+                        <span block truncate text-12px text-red-600 leading-16px aria-live="polite" :title="renameGroupError ?? void 0">
                             {{ renameGroupError }}
                         </span>
                     </div>
-
-                    <TelaCollapsible :open="groupBucket.open" @update:open="toggleGroup(groupBucket.group.id)">
-                        <TelaCollapsibleContent>
-                            <div flex="~ col" relative>
-                                <div flex="~ col" gap-1px mt-1px>
-                                    <ChatConversationItem
-                                        v-for="conversation in groupBucket.items"
-                                        :key="conversation.id"
-                                        v-bind="getConversationItemProps(conversation)"
-                                        item-class="ml-24px"
-                                        @delete="handleDelete"
-                                        @rename="handleRename"
-                                        @duplicate="handleDuplicate"
-                                        @export="handleExport"
-                                        @drag-start="handleConversationDragStart"
-                                        @drag-end="clearDragState"
-                                    />
-                                    <button
-                                        v-if="groupBucket.showNewConversationAction"
-                                        type="button"
-                                        h-32px px-12px
-                                        flex items-center gap-9px
-                                        rounded-10px
-                                        text-left
-                                        hover:bg-subtle
-                                        cursor-pointer
-                                        @click="startConversationInGroup(groupBucket.group.id)"
-                                    >
-                                        <span body-14-medium text-secondary leading-18px ml-24px>
-                                            Nova conversa
-                                        </span>
-                                        <TelaIcon name="i-ph-plus" size="14px" color="icon-secondary" shrink-0 />
-                                    </button>
-                                    <div
-                                        v-else-if="groupBucket.showSearchEmpty"
-                                        h-32px flex items-center ml-36px
-                                    >
-                                        <span body-14-medium text-tertiary>
-                                            Sem resultados
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <div aria-hidden="true" absolute left-17px h-full w-0.5px bg-border pointer-events-none />
-                            </div>
-                        </TelaCollapsibleContent>
-                    </TelaCollapsible>
-                </div>
-            </div>
-
-            <div
-                flex="~ col" gap-4px
-                rounded-10px
-                :class="ungroupedDropTarget ? 'bg-lowered' : ''"
-                @dragenter.prevent="handleDragEnter(null)"
-                @dragover.prevent="handleDragOver($event, null)"
-                @dragleave="handleDragLeave($event, null)"
-                @drop.prevent="handleConversationDrop($event, null)"
-            >
-                <span body-12-medium text-secondary pl-10px pt-4px>
-                    {{ ungroupedConversationLabel }}
-                </span>
-
-                <div v-if="ungroupedConversations.length > 0" flex="~ col" gap-1px>
                     <ChatConversationItem
-                        v-for="conversation in ungroupedConversations"
-                        :key="conversation.id"
-                        v-bind="getConversationItemProps(conversation)"
+                        v-if="row.type === 'conversation'"
+                        v-bind="getConversationItemProps(row.conversation)"
+                        :item-class="row.groupId ? 'ml-24px' : void 0"
                         @delete="handleDelete"
                         @rename="handleRename"
                         @duplicate="handleDuplicate"
@@ -277,6 +329,29 @@ const {
                         @drag-start="handleConversationDragStart"
                         @drag-end="clearDragState"
                     />
+                    <button
+                        v-if="row.type === 'new'"
+                        type="button"
+                        h-32px px-12px w-full
+                        flex items-center gap-9px
+                        rounded-10px
+                        text-left
+                        hover:bg-subtle
+                        cursor-pointer
+                        @click="startConversationInGroup(row.groupBucket.group.id)"
+                    >
+                        <span body-14-medium text-secondary leading-18px ml-24px>
+                            Nova conversa
+                        </span>
+                        <TelaIcon name="i-ph-plus" size="14px" color="icon-secondary" shrink-0 />
+                    </button>
+                    <div v-if="row.type === 'empty'" h-32px flex items-center ml-36px>
+                        <span body-14-medium text-tertiary>Sem resultados</span>
+                    </div>
+                    <div
+                        v-if="row.groupId && (row.type === 'conversation' || row.type === 'new' || row.type === 'empty')"
+                        aria-hidden="true" absolute top-0 left-17px h-full w-0.5px bg-border pointer-events-none
+                    />
                 </div>
             </div>
         </div>

package/dist/runtime/embed/components/chat-configuration-modal.d.vue.ts

@@ -9,11 +9,11 @@ type __VLS_Props = {
     showCredentialsTab?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:open": (value: boolean) => any;
     save: (payload: ChatConfigurationSavePayload) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onSave?: ((payload: ChatConfigurationSavePayload) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     initialTab: ChatConfigurationTab;
     saving: boolean;

package/dist/runtime/embed/components/chat-configuration-modal.vue.d.ts

@@ -9,11 +9,11 @@ type __VLS_Props = {
     showCredentialsTab?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:open": (value: boolean) => any;
     save: (payload: ChatConfigurationSavePayload) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onSave?: ((payload: ChatConfigurationSavePayload) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     initialTab: ChatConfigurationTab;
     saving: boolean;

package/dist/runtime/embed/components/chat-embed-inner.d.vue.ts

@@ -15,13 +15,13 @@ type __VLS_Props = {
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
-declare var __VLS_11: {}, __VLS_95: any, __VLS_202: any;
+declare var __VLS_11: {}, __VLS_96: any, __VLS_204: any;
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_11) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_95) => any;
+    'failed-message-actions'?: (props: typeof __VLS_96) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_202) => any;
+    'failed-message-actions'?: (props: typeof __VLS_204) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -783,6 +783,32 @@ async function handleShare() {
     statusToast.update({ text: "Erro ao copiar link", icon: "i-ph-warning" });
   }
 }
+const forkEvents = shallowRef([]);
+const displayConversationEvents = computed(() => [...new Map([
+  ...forkEvents.value,
+  ...props.conversationEvents ?? []
+].filter((event) => event.conversationId === currentConversation.value?.id).map((event) => [event.id, event])).values()]);
+watch([
+  () => currentConversation.value?.id,
+  () => JSON.stringify(chatApi.withChatHeaders().headers)
+], async ([conversationId], _previous, onCleanup) => {
+  forkEvents.value = [];
+  if (!conversationId || !chatApi.conversationV2Enabled)
+    return;
+  const controller = new AbortController();
+  onCleanup(() => controller.abort());
+  try {
+    const { events } = await $fetch(
+      chatApi.path(`/conversations/${conversationId}/events`),
+      chatApi.withChatHeaders({ signal: controller.signal })
+    );
+    if (!controller.signal.aborted)
+      forkEvents.value = events.filter((event) => event.type === "conversation_forked");
+  } catch {
+    if (!controller.signal.aborted)
+      statusToast.update({ text: "Erro ao carregar a origem da conversa", icon: "i-ph-warning" });
+  }
+}, { immediate: true });
 const forking = ref(false);
 async function handleFork(messageId) {
   const sourceId = currentConversation.value?.id;
@@ -898,7 +924,7 @@ async function handleDelete() {
 
                     <div
                         min-h-0
-                        overflow-y-auto
+                        overflow-hidden
                         px-4px
                         :class="$slots['sidebar-bottom'] ? '' : 'flex-1'"
                         :style="
@@ -1075,7 +1101,7 @@ async function handleDelete() {
 
                 <ChatMessageList
                     :messages="messages"
-                    :events="conversationEvents"
+                    :events="displayConversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
                     :preparing-steps="preparingSteps"
                     :show-ttft="resolvedFeatures.showTtft"
@@ -1083,6 +1109,7 @@ async function handleDelete() {
                     :fork-enabled="chatApi.conversationV2Enabled"
                     :fork-disabled="forking"
                     @fork="handleFork"
+                    @open-conversation="openConversation"
                     @retry="handleRetry"
                 >
                     <template v-if="$slots['failed-message-actions']" #failed-message-actions="slotProps">
@@ -1288,7 +1315,7 @@ async function handleDelete() {
             >
                 <ChatMessageList
                     :messages="messages"
-                    :events="conversationEvents"
+                    :events="displayConversationEvents"
                     :streaming-active-message-id="streamingActiveMessageId"
                     :preparing-steps="preparingSteps"
                     :show-ttft="resolvedFeatures.showTtft"
@@ -1296,6 +1323,7 @@ async function handleDelete() {
                     :fork-enabled="chatApi.conversationV2Enabled"
                     :fork-disabled="forking"
                     @fork="handleFork"
+                    @open-conversation="openConversation"
                     @retry="handleRetry"
                 >
                     <template v-if="$slots['failed-message-actions']" #failed-message-actions="slotProps">

package/dist/runtime/embed/components/chat-embed-inner.vue.d.ts

@@ -15,13 +15,13 @@ type __VLS_Props = {
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
-declare var __VLS_11: {}, __VLS_95: any, __VLS_202: any;
+declare var __VLS_11: {}, __VLS_96: any, __VLS_204: any;
 type __VLS_Slots = {} & {
     'sidebar-bottom'?: (props: typeof __VLS_11) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_95) => any;
+    'failed-message-actions'?: (props: typeof __VLS_96) => any;
 } & {
-    'failed-message-actions'?: (props: typeof __VLS_202) => any;
+    'failed-message-actions'?: (props: typeof __VLS_204) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;

package/dist/runtime/messages/components/chat-conversation-event.d.vue.ts

@@ -2,6 +2,10 @@ import type { ConversationEvent } from '../../types/schemas/chat/conversations.j
 type __VLS_Props = {
     event: ConversationEvent;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    openConversation: (conversationId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenConversation?: ((conversationId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/messages/components/chat-conversation-event.vue

@@ -1,7 +1,16 @@
 <script setup>
+import { getConversationForkSource } from "../conversation-timeline";
 const props = defineProps({
   event: { type: null, required: true }
 });
+const emit = defineEmits(["openConversation"]);
+const route = useRoute();
+const forkSource = computed(() => getConversationForkSource(props.event));
+const sourceLocation = computed(() => ({
+  path: route.path,
+  query: { ...route.query, conversation: void 0, conversationId: forkSource.value?.sourceConversationId },
+  hash: route.hash
+}));
 const eventDate = computed(() => new Date(props.event.createdAt));
 const eventTime = computed(() => new Intl.DateTimeFormat("pt-BR", {
   hour: "2-digit",
@@ -16,16 +25,28 @@ const eventTime = computed(() => new Intl.DateTimeFormat("pt-BR", {
         items-center
         gap-12px
         py-6px
-        :aria-label="`${event.actorLabel ? `${event.actorLabel} ` : ''}${event.description}, ${eventTime}`"
+        :aria-label="forkSource ? `Conversa iniciada a partir de ${forkSource.sourceTitle}` : `${event.actorLabel ? `${event.actorLabel} ` : ''}${event.description}, ${eventTime}`"
     >
-        <span h-0 flex-1 border-t-0.5px border />
-        <p body-12-regular text-tertiary text-center>
+        <span h-0 flex-1 border-t-0.5px border :class="forkSource && 'min-w-24px'" />
+        <p v-if="forkSource" body-12-regular text-secondary text-center min-w-0>
+            Conversa iniciada a partir de
+            <NuxtLink
+                :to="sourceLocation"
+                body-12-medium
+                underline
+                break-words
+                @click.exact.prevent="emit('openConversation', forkSource.sourceConversationId)"
+            >
+                {{ forkSource.sourceTitle }}
+            </NuxtLink>
+        </p>
+        <p v-else body-12-regular text-tertiary text-center>
             <span v-if="event.actorLabel" body-12-medium text-secondary>{{ event.actorLabel }}</span>
             {{ event.description }}
             <time :datetime="eventDate.toISOString()" :title="eventDate.toLocaleString('pt-BR')">
                 · {{ eventTime }}
             </time>
         </p>
-        <span h-0 flex-1 border-t-0.5px border />
+        <span h-0 flex-1 border-t-0.5px border :class="forkSource && 'min-w-24px'" />
     </div>
 </template>

package/dist/runtime/messages/components/chat-conversation-event.vue.d.ts

@@ -2,6 +2,10 @@ import type { ConversationEvent } from '../../types/schemas/chat/conversations.j
 type __VLS_Props = {
     event: ConversationEvent;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    openConversation: (conversationId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenConversation?: ((conversationId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/messages/components/chat-message-bubble.vue

@@ -137,14 +137,8 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                     variant="contained"
                     align="end"
                     class="chat-message-bubble__content relative"
-                    :class="[isPending && 'op-80', forkEnabled && 'pr-44px!']"
+                    :class="[isPending && 'op-80']"
                 >
-                    <ChatMessageActions
-                        v-if="forkEnabled && message.status === 'completed' && !streamActive"
-                        class="chat-message-bubble__actions absolute right-8px top-8px"
-                        :disabled="forkDisabled"
-                        @fork="emit('fork', message.id)"
-                    />
                     <div v-if="hasFiles" flex="~ col" gap-4px mb-8px>
                         <a
                             v-for="file in message.files"
@@ -204,16 +198,9 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                 max-w-prose
                 class="chat-message-bubble__content relative"
                 :class="[
-  forkEnabled && 'pr-36px! min-h-24px',
   isFailed ? 'flex gap-12px items-start px-12px py-10px bg-subtle border border-solid rounded-12px w-full' : 'rounded-12px'
 ]"
             >
-                <ChatMessageActions
-                    v-if="forkEnabled && message.status === 'completed' && !streamActive"
-                    class="chat-message-bubble__actions absolute right-0 top-0"
-                    :disabled="forkDisabled"
-                    @fork="emit('fork', message.id)"
-                />
                 <template v-if="isFailed">
                     <div i-ph-warning-circle-fill text-16px text-red-600 shrink-0 mt-2px />
                     <div flex flex-col gap-4px grow>
@@ -301,6 +288,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                     </ClientOnly>
                     <div
                         v-if="!isPending"
+                        data-chat-message-footer
                         mt-8px
                         flex
                         items-center
@@ -315,6 +303,11 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                                 {{ formattedTtft }}
                             </span>
                             <ChatMessageFeedback v-if="hasMessageFeedback" :message="message" />
+                            <ChatMessageActions
+                                v-if="forkEnabled && message.role === 'assistant' && message.status === 'completed' && !streamActive"
+                                :disabled="forkDisabled"
+                                @fork="emit('fork', message.id)"
+                            />
                         </div>
                     </div>
                 </template>
@@ -322,7 +315,3 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
         </template>
     </TelaChatMessage>
 </template>
-
-<style scoped>
-@media (hover:hover) and (pointer:fine){.chat-message-bubble__actions{opacity:0}.chat-message-bubble:focus-within .chat-message-bubble__actions,.chat-message-bubble:hover .chat-message-bubble__actions,.chat-message-bubble__actions:has([data-state=open]){opacity:1}}
-</style>

package/dist/runtime/messages/components/chat-message-list.d.vue.ts

@@ -25,9 +25,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     scrollToBottom: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
+    openConversation: (conversationId: string) => any;
     fork: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: ((messageId: string) => any) | undefined;
+    onOpenConversation?: ((conversationId: string) => any) | undefined;
     onFork?: ((messageId: string) => any) | undefined;
 }>, {
     showTtft: boolean;

package/dist/runtime/messages/components/chat-message-list.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   forkEnabled: { type: Boolean, required: false },
   forkDisabled: { type: Boolean, required: false }
 });
-const emit = defineEmits(["retry", "fork"]);
+const emit = defineEmits(["retry", "fork", "openConversation"]);
 defineSlots();
 const conversationRef = ref(null);
 const conversationElements = computed(() => {
@@ -102,6 +102,7 @@ defineExpose({
                         <ChatConversationEvent
                             v-if="item.kind === 'event'"
                             :event="item.value"
+                            @open-conversation="emit('openConversation', $event)"
                         />
                         <ChatMessageBubble
                             v-else

package/dist/runtime/messages/components/chat-message-list.vue.d.ts

@@ -25,9 +25,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     scrollToBottom: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
+    openConversation: (conversationId: string) => any;
     fork: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: ((messageId: string) => any) | undefined;
+    onOpenConversation?: ((conversationId: string) => any) | undefined;
     onFork?: ((messageId: string) => any) | undefined;
 }>, {
     showTtft: boolean;

package/dist/runtime/messages/conversation-timeline.d.ts

@@ -1,4 +1,9 @@
 import type { ConversationEvent, Message } from '../types/schemas/chat/conversations.js';
+export declare function getConversationForkSource(event: ConversationEvent): {
+    sourceConversationId: string;
+    sourceTitle: string;
+    copiedMessageId: string;
+} | null;
 export type ConversationTimelineItem = {
     kind: 'event';
     id: string;

package/dist/runtime/messages/conversation-timeline.js

@@ -1,6 +1,18 @@
+import { z } from "zod";
+const forkSourceSchema = z.object({
+  sourceConversationId: z.string().uuid(),
+  sourceTitle: z.string(),
+  copiedMessageId: z.string().uuid()
+});
+export function getConversationForkSource(event) {
+  if (event.type !== "conversation_forked")
+    return null;
+  const parsed = forkSourceSchema.safeParse(event.payload);
+  return parsed.success ? parsed.data : null;
+}
 export function mergeConversationTimeline(messages, events = []) {
-  return [
-    ...(events ?? []).map((event) => ({ kind: "event", id: event.id, createdAt: event.createdAt, value: event })),
+  const items = [
+    ...(events ?? []).filter((event) => event.type !== "conversation_forked").map((event) => ({ kind: "event", id: event.id, createdAt: event.createdAt, value: event })),
     ...messages.map((message) => ({ kind: "message", id: message.id, createdAt: message.createdAt, value: message }))
   ].sort((left, right) => {
     const difference = new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime();
@@ -10,4 +22,13 @@ export function mergeConversationTimeline(messages, events = []) {
       return left.kind === "event" ? -1 : 1;
     return left.id.localeCompare(right.id);
   });
+  for (const event of events ?? []) {
+    const source = getConversationForkSource(event);
+    if (!source)
+      continue;
+    const index = items.findIndex((item) => item.kind === "message" && item.id === source.copiedMessageId);
+    if (index !== -1)
+      items.splice(index + 1, 0, { kind: "event", id: event.id, createdAt: event.createdAt, value: event });
+  }
+  return items;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "4.2.0-rc.4",
+  "version": "4.2.0-rc.6",
   "type": "module",
   "exports": {
     ".": {