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

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.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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;
@@ -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.5",
   "type": "module",
   "exports": {
     ".": {