@meistrari/chat-nuxt 4.6.0-rc.9 → 4.6.0

package/dist/module.json

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

package/dist/runtime/conversations/components/chat-conversation-item.d.vue.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     draggable?: boolean;
     itemClass?: HTMLAttributes['class'];
     userImage?: string;
+    userName?: string;
     selectConversation?: (id: string) => void | Promise<void>;
     copyLink?: (id: string) => void | Promise<void>;
     debug?: (id: string) => void;

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

@@ -6,6 +6,7 @@ const props = defineProps({
   draggable: { type: Boolean, required: false },
   itemClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
   userImage: { type: String, required: false },
+  userName: { type: String, required: false },
   selectConversation: { type: Function, required: false },
   copyLink: { type: Function, required: false },
   debug: { type: Function, required: false }
@@ -53,13 +54,13 @@ function setRenameInputRef(element) {
         <div flex items-center justify-between h-full :class="props.itemClass">
             <!-- User Avatar -->
             <div
-                v-if="userImage"
+                v-if="userName"
                 translate-x--48px w-0 opacity-0 shrink-0 overflow-hidden
                 class="[transition:width_0.26s_cubic-bezier(0.22,1,0.36,1),transform_0.26s_cubic-bezier(0.22,1,0.36,1),opacity_0.2s] group-hover:w-22px group-hover:translate-x-0 group-hover:opacity-100"
             >
                 <TelaAvatar
                     :image="userImage"
-                    alt="Usuário"
+                    :alt="userName"
                     size="2xs"
                     class="rounded-full!"
                 />

package/dist/runtime/conversations/components/chat-conversation-item.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     draggable?: boolean;
     itemClass?: HTMLAttributes['class'];
     userImage?: string;
+    userName?: string;
     selectConversation?: (id: string) => void | Promise<void>;
     copyLink?: (id: string) => void | Promise<void>;
     debug?: (id: string) => void;

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

@@ -3,7 +3,10 @@ import type { Conversation } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
-    getMemberImage?: (userId: string) => string | undefined;
+    getMember?: (userId: string) => {
+        name: string;
+        image?: string;
+    } | undefined;
     selectConversation?: (id: string) => void | Promise<void>;
     resetConversation?: () => void | Promise<void>;
     startConversation?: (groupId?: string | null) => void | Promise<void>;

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

@@ -4,7 +4,7 @@ import { useConversationList } from "../composables/conversation-list";
 const props = defineProps({
   conversations: { type: null, required: true },
   currentId: { type: String, required: false },
-  getMemberImage: { type: Function, required: false },
+  getMember: { type: Function, required: false },
   selectConversation: { type: Function, required: false },
   resetConversation: { type: Function, required: false },
   startConversation: { type: Function, required: false },

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

@@ -3,7 +3,10 @@ import type { Conversation } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
-    getMemberImage?: (userId: string) => string | undefined;
+    getMember?: (userId: string) => {
+        name: string;
+        image?: string;
+    } | undefined;
     selectConversation?: (id: string) => void | Promise<void>;
     resetConversation?: () => void | Promise<void>;
     startConversation?: (groupId?: string | null) => void | Promise<void>;

package/dist/runtime/conversations/composables/conversation-item.d.ts

@@ -5,6 +5,7 @@ export type ConversationItemOptions = {
     active: boolean;
     draggable?: boolean;
     userImage?: string;
+    userName?: string;
     selectConversation?: (id: string) => void | Promise<void>;
     copyLink?: (id: string) => void | Promise<void>;
     debug?: (id: string) => void;

package/dist/runtime/conversations/composables/conversation-list.d.ts

@@ -3,7 +3,10 @@ import type { Conversation } from '../../types/schemas/chat/conversations.js';
 export type ConversationListOptions = {
     conversations: DeepReadonly<Conversation[]>;
     currentId?: string;
-    getMemberImage?: (userId: string) => string | undefined;
+    getMember?: (userId: string) => {
+        name: string;
+        image?: string;
+    } | undefined;
     selectConversation?: (id: string) => void | Promise<void>;
     resetConversation?: () => void | Promise<void>;
     startConversation?: (groupId?: string | null) => void | Promise<void>;
@@ -120,6 +123,7 @@ export declare function useConversationList(options: ConversationListOptions): {
         active: boolean;
         draggable: boolean;
         userImage: string | undefined;
+        userName: string | undefined;
         selectConversation: ((id: string) => void | Promise<void>) | undefined;
         copyLink: (conversationId: string) => Promise<void>;
         debug: (() => void) | undefined;

package/dist/runtime/conversations/composables/conversation-list.js

@@ -492,11 +492,13 @@ export function useConversationList(options) {
     return draggedConversationId.value !== null && dropTargetGroupId.value === groupId;
   }
   function getConversationItemProps(conversation) {
+    const author = options.getMember?.(conversation.userId);
     return {
       conversation,
       active: conversation.id === options.currentId,
       draggable: true,
-      userImage: options.getMemberImage?.(conversation.userId),
+      userImage: author?.image,
+      userName: author?.name,
       selectConversation: options.selectConversation,
       copyLink: copyConversationLink,
       debug: options.showDebugOption ? () => {

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

@@ -85,7 +85,7 @@ const route = useRoute();
 const embedConfig = useEmbedConfig();
 const chatAction = useChatAction();
 const { user: authUser, activeOrganization, logout } = useChatAuth();
-const { getMember, getMemberImage } = useWorkspaceMembers();
+const { getMember } = useWorkspaceMembers();
 const statusToast = useStatusToast();
 const {
   conversations,
@@ -928,7 +928,7 @@ async function handleDelete() {
                         <ChatConversationList
                             :conversations="visibleConversations"
                             :current-id="activeConversationId ?? void 0"
-                            :get-member-image="getMemberImage"
+                            :get-member="getMember"
                             :select-conversation="openConversation"
                             :reset-conversation="handleNewConversation"
                             :start-conversation="handleNewConversation"

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

@@ -1,4 +1,6 @@
 type __VLS_Props = {
+    createdAt: Date | string;
+    forkEnabled?: boolean;
     disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,24 +1,37 @@
 <script setup>
+import { formatMessageMenuTimestamp } from "../message-timestamps";
 defineProps({
+  createdAt: { type: [Date, String], required: true },
+  forkEnabled: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["fork"]);
 </script>
 
 <template>
-    <div>
-        <TelaDropdownMenu
-            :items="[{ label: 'Continuar em nova conversa', icon: 'i-ph-git-branch', disabled, click: () => emit('fork') }]"
-            align="end"
-            :should-be-modal="false"
-        >
-            <TelaIconButton
-                icon="i-ph-dots-three"
-                color="secondary"
-                size="xs"
-                :disabled="disabled"
-                aria-label="Ações da mensagem"
-            />
-        </TelaDropdownMenu>
+    <div data-allow-mismatch @click.stop>
+        <TelaDropdownMenuRoot :modal="false">
+            <TelaDropdownMenuTrigger as-child class="data-[state=open]:bg-muted">
+                <TelaIconButton
+                    icon="i-ph-dots-three"
+                    color="secondary"
+                    size="xs"
+                    aria-label="Ações da mensagem"
+                />
+            </TelaDropdownMenuTrigger>
+            <TelaDropdownMenuContent align="end" class="!min-w-128px !z-605">
+                <TelaDropdownMenuLabel body-12-regular text-tertiary class="!font-normal !pb-4px">
+                    {{ formatMessageMenuTimestamp(createdAt) }}
+                </TelaDropdownMenuLabel>
+                <TelaDropdownMenuItem
+                    v-if="forkEnabled"
+                    icon="i-ph-git-branch"
+                    :disabled="disabled"
+                    @click="emit('fork')"
+                >
+                    Continuar em nova conversa
+                </TelaDropdownMenuItem>
+            </TelaDropdownMenuContent>
+        </TelaDropdownMenuRoot>
     </div>
 </template>

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

@@ -1,4 +1,6 @@
 type __VLS_Props = {
+    createdAt: Date | string;
+    forkEnabled?: boolean;
     disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -328,7 +328,9 @@ const attachedFiles = computed(() => {
                             </span>
                             <ChatMessageFeedback v-if="hasMessageFeedback" :message="message" />
                             <ChatMessageActions
-                                v-if="forkEnabled && message.role === 'assistant' && message.status === 'completed' && !streamActive"
+                                v-if="message.role === 'assistant' && message.status === 'completed' && !streamActive"
+                                :created-at="message.createdAt"
+                                :fork-enabled="forkEnabled"
                                 :disabled="forkDisabled"
                                 @fork="emit('fork', message.id)"
                             />

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

@@ -2,6 +2,8 @@
 import ChatMessageBubble from "./chat-message-bubble.vue";
 import { useStickToBottom } from "../composables/use-stick-to-bottom";
 import { mergeConversationTimeline } from "../conversation-timeline";
+import { getTimestampSeparatorLabels } from "../message-timestamps";
+import { useCurrentDay } from "../composables/current-day";
 const props = defineProps({
   messages: { type: Array, required: true },
   events: { type: [Array, null], required: false },
@@ -45,6 +47,8 @@ const skeletonMessages = [
   { id: "assistant-2", align: "start", width: "84%", height: "92px" }
 ];
 const timelineItems = computed(() => mergeConversationTimeline(props.messages, props.events));
+const today = useCurrentDay();
+const timestampSeparators = computed(() => getTimestampSeparatorLabels(props.messages, today.value));
 const latestMessageId = computed(() => props.messages.at(-1)?.id ?? null);
 const latestOutputSignal = computed(() => {
   const latestMessage = props.messages.at(-1);
@@ -112,6 +116,16 @@ defineExpose({
 
                 <template v-else>
                     <template v-for="item in timelineItems" :key="`${item.kind}:${item.id}`">
+                        <p
+                            v-if="item.kind === 'message' && timestampSeparators.has(item.id)"
+                            data-chat-timestamp-separator
+                            my-8px
+                            text-center
+                            body-12-regular
+                            text-tertiary
+                        >
+                            {{ timestampSeparators.get(item.id) }}
+                        </p>
                         <ChatConversationEvent
                             v-if="item.kind === 'event'"
                             :event="item.value"

package/dist/runtime/messages/composables/current-day.d.ts

@@ -0,0 +1 @@
+export declare function useCurrentDay(): import("vue").Ref<Date, Date>;

package/dist/runtime/messages/composables/current-day.js

@@ -0,0 +1,17 @@
+import { onScopeDispose, ref } from "vue";
+function msUntilNextMidnight(now) {
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime() - now.getTime();
+}
+export function useCurrentDay() {
+  const today = ref(/* @__PURE__ */ new Date());
+  let timeout;
+  function scheduleNextDay() {
+    timeout = setTimeout(() => {
+      today.value = /* @__PURE__ */ new Date();
+      scheduleNextDay();
+    }, msUntilNextMidnight(today.value));
+  }
+  scheduleNextDay();
+  onScopeDispose(() => clearTimeout(timeout));
+  return today;
+}

package/dist/runtime/messages/message-timestamps.d.ts

@@ -0,0 +1,5 @@
+import type { Message } from '../types/schemas/chat/conversations.js';
+export declare function formatMessageSeparatorTimestamp(value: Date | string, now?: Date): string;
+export declare function formatMessageMenuTimestamp(value: Date | string, now?: Date): string;
+export declare function shouldShowTimestampSeparator(value: Date | string, previousValue: Date | string | null): boolean;
+export declare function getTimestampSeparatorLabels(messages: readonly Pick<Message, 'id' | 'role' | 'createdAt'>[], now?: Date): Map<string, string>;

package/dist/runtime/messages/message-timestamps.js

@@ -0,0 +1,43 @@
+const SEPARATOR_GAP_MS = 60 * 60 * 1e3;
+const timeFormat = new Intl.DateTimeFormat("pt-BR", { hour: "2-digit", minute: "2-digit" });
+const weekdayFormat = new Intl.DateTimeFormat("pt-BR", { weekday: "short", day: "numeric", month: "short" });
+const weekdayWithYearFormat = new Intl.DateTimeFormat("pt-BR", { weekday: "short", day: "numeric", month: "short", year: "numeric" });
+const menuFormat = new Intl.DateTimeFormat("pt-BR", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+const menuWithYearFormat = new Intl.DateTimeFormat("pt-BR", { day: "numeric", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" });
+function toDate(value) {
+  return value instanceof Date ? value : new Date(value);
+}
+function isSameDay(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+}
+export function formatMessageSeparatorTimestamp(value, now = /* @__PURE__ */ new Date()) {
+  const date = toDate(value);
+  const time = timeFormat.format(date);
+  if (isSameDay(date, now))
+    return `Hoje ${time}`;
+  const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+  if (isSameDay(date, yesterday))
+    return `Ontem ${time}`;
+  const day = date.getFullYear() === now.getFullYear() ? weekdayFormat : weekdayWithYearFormat;
+  return `${day.format(date)} \xE0s ${time}`;
+}
+export function formatMessageMenuTimestamp(value, now = /* @__PURE__ */ new Date()) {
+  const date = toDate(value);
+  const format = date.getFullYear() === now.getFullYear() ? menuFormat : menuWithYearFormat;
+  return format.format(date);
+}
+export function shouldShowTimestampSeparator(value, previousValue) {
+  if (!previousValue)
+    return true;
+  const date = toDate(value);
+  const previous = toDate(previousValue);
+  return !isSameDay(date, previous) || date.getTime() - previous.getTime() >= SEPARATOR_GAP_MS;
+}
+export function getTimestampSeparatorLabels(messages, now = /* @__PURE__ */ new Date()) {
+  const labels = /* @__PURE__ */ new Map();
+  messages.forEach((message, index) => {
+    if (message.role === "user" && shouldShowTimestampSeparator(message.createdAt, messages[index - 1]?.createdAt ?? null))
+      labels.set(message.id, formatMessageSeparatorTimestamp(message.createdAt, now));
+  });
+  return labels;
+}

package/dist/runtime/messages/tool-registry.js

@@ -45,6 +45,11 @@ const TOOL_REGISTRY = {
     widgetId: "bash",
     labels: { active: "Executando comando", executed: "Executou comando" }
   },
+  "check_execution": {
+    icon: "i-ph-wrench",
+    widgetId: "generic",
+    labels: { active: "Verificando execu\xE7\xE3o", executed: "Verificou execu\xE7\xE3o" }
+  },
   "Write": {
     icon: "i-ph-file-plus",
     widgetId: "write",

package/dist/runtime/workspace/composables/workspace-members.d.ts

@@ -6,7 +6,6 @@ type MemberUser = {
 export declare function useWorkspaceMembers(): {
     members: any;
     membersMap: any;
-    getMemberImage: (userId: string) => string | undefined;
     getMember: (userId: string) => MemberUser | undefined;
     getMemberByEmail: (email: string) => MemberUser | undefined;
 };

package/dist/runtime/workspace/composables/workspace-members.js

@@ -19,9 +19,6 @@ export function useWorkspaceMembers() {
     }
     return map;
   });
-  function getMemberImage(userId) {
-    return membersMap.value.get(userId)?.image ?? void 0;
-  }
   function getMember(userId) {
     return membersMap.value.get(userId);
   }
@@ -31,7 +28,6 @@ export function useWorkspaceMembers() {
   return {
     members,
     membersMap,
-    getMemberImage,
     getMember,
     getMemberByEmail
   };

package/package.json

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