@meistrari/chat-nuxt 3.9.1 → 3.10.0

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

@@ -1,5 +1,5 @@
 import type { ChatFeatureConfig } from '../feature-config.js';
-import type { ChatActor, ChatSidebarConfig } from '../types.js';
+import type { ChatActor, ChatSidebarConfig, ChatSuggestion } from '../types.js';
 type EmbedUser = ChatActor;
 type __VLS_Props = {
     conversationId?: string | null;
@@ -7,7 +7,8 @@ type __VLS_Props = {
     hideSidebar?: boolean;
     sidebar?: ChatSidebarConfig;
     hideSettings?: boolean;
-    hideFolderHint?: boolean;
+    compact?: boolean;
+    suggestions?: readonly ChatSuggestion[] | null;
     user?: EmbedUser | null;
     features?: Partial<ChatFeatureConfig>;
 };
@@ -17,13 +18,15 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;
+    "update:conversationTitle": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+    "onUpdate:conversationTitle"?: ((value: string | null) => any) | undefined;
 }>, {
-    hideFolderHint: boolean;
     hideSettings: boolean;
     hideSidebar: boolean;
     initialConversationId: string | null;
+    compact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,17 +1,44 @@
+import { useChatAuth } from '#chat-auth';
 import { type ChatActionPayload } from '../../messages/composables/chat-action.js';
 import { type MessageFeedbackPayload } from '../../messages/composables/chat-feedback.js';
 import { type ChatMessageTerminalPayload } from '../../messages/composables/chat-message-terminal.js';
-declare var __VLS_11: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    'sidebar-bottom'?: (props: typeof __VLS_11) => any;
+    'sidebar-bottom'?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("../types.js").DefaultChatEmbedProps | import("../types.js").TelaAgentChatEmbedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_base: import("vue").DefineComponent<(import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId?: undefined;
+    telaAgentInputs?: undefined;
+    workspaceSettings?: import("vue").DeepReadonly<useChatAuth> | useChatAuth | null;
+    user?: import("../types.js").ChatActor | null;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps) | (import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId: string;
+    telaAgentInputs?: import("vue").DeepReadonly<useChatAuth[]> | null;
+    workspaceSettings?: never;
+    user?: never;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;
+    "update:conversationTitle": (value: string | null) => any;
     messageFeedback: (payload: MessageFeedbackPayload) => any;
     action: (payload: ChatActionPayload) => any;
     messageTerminal: (payload: ChatMessageTerminalPayload) => any;
-}, string, import("vue").PublicProps, Readonly<import("../types.js").DefaultChatEmbedProps | import("../types.js").TelaAgentChatEmbedProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<(import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId?: undefined;
+    telaAgentInputs?: undefined;
+    workspaceSettings?: import("vue").DeepReadonly<useChatAuth> | useChatAuth | null;
+    user?: import("../types.js").ChatActor | null;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps) | (import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId: string;
+    telaAgentInputs?: import("vue").DeepReadonly<useChatAuth[]> | null;
+    workspaceSettings?: never;
+    user?: never;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps)> & Readonly<{
     "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+    "onUpdate:conversationTitle"?: ((value: string | null) => any) | undefined;
     onMessageFeedback?: ((payload: MessageFeedbackPayload) => any) | undefined;
     onAction?: ((payload: ChatActionPayload) => any) | undefined;
     onMessageTerminal?: ((payload: ChatMessageTerminalPayload) => any) | undefined;

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

@@ -15,7 +15,8 @@ const props = defineProps({
   hideSidebar: { type: Boolean, required: false },
   sidebar: { type: Object, required: false },
   hideSettings: { type: Boolean, required: false },
-  hideFolderHint: { type: Boolean, required: false },
+  compact: { type: Boolean, required: false },
+  suggestions: { type: [Array, null], required: false },
   loadingMessages: { type: [Array, null], required: false },
   loadingMessagesMode: { type: [String, null], required: false },
   customComponents: { type: Object, required: false },
@@ -27,9 +28,12 @@ const props = defineProps({
   telaAgentInputs: { type: null, required: false },
   workspaceSettings: { type: null, required: false },
   user: { type: null, required: false },
-  features: { type: Object, required: false }
+  features: { type: Object, required: false },
+  variant: { type: String, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  launcherLabel: { type: String, required: false }
 });
-const emit = defineEmits(["update:conversationId", "action", "messageFeedback", "messageTerminal"]);
+const emit = defineEmits(["update:conversationId", "update:conversationTitle", "action", "messageFeedback", "messageTerminal"]);
 const parentEmbedConfig = useEmbedConfig();
 const { activeOrganization } = useChatAuth();
 const workspaceId = computed(() => activeOrganization.value?.id?.trim() ?? "");
@@ -98,10 +102,12 @@ provideChatMessageTerminal((payload) => {
         :hide-sidebar="hideSidebar"
         :sidebar="sidebar"
         :hide-settings="hideSettings"
-        :hide-folder-hint="hideFolderHint"
+        :compact="compact"
+        :suggestions="suggestions"
         :user="normalizedTelaAgentId ? null : user"
         :features="features"
         @update:conversation-id="$emit('update:conversationId', $event)"
+        @update:conversation-title="$emit('update:conversationTitle', $event)"
     >
         <template v-if="$slots['sidebar-bottom']" #sidebar-bottom>
             <slot name="sidebar-bottom" />

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

@@ -1,17 +1,44 @@
+import { useChatAuth } from '#chat-auth';
 import { type ChatActionPayload } from '../../messages/composables/chat-action.js';
 import { type MessageFeedbackPayload } from '../../messages/composables/chat-feedback.js';
 import { type ChatMessageTerminalPayload } from '../../messages/composables/chat-message-terminal.js';
-declare var __VLS_11: {};
+declare var __VLS_12: {};
 type __VLS_Slots = {} & {
-    'sidebar-bottom'?: (props: typeof __VLS_11) => any;
+    'sidebar-bottom'?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("../types.js").DefaultChatEmbedProps | import("../types.js").TelaAgentChatEmbedProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_base: import("vue").DefineComponent<(import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId?: undefined;
+    telaAgentInputs?: undefined;
+    workspaceSettings?: import("vue").DeepReadonly<useChatAuth> | useChatAuth | null;
+    user?: import("../types.js").ChatActor | null;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps) | (import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId: string;
+    telaAgentInputs?: import("vue").DeepReadonly<useChatAuth[]> | null;
+    workspaceSettings?: never;
+    user?: never;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:conversationId": (value: string | null) => any;
+    "update:conversationTitle": (value: string | null) => any;
     messageFeedback: (payload: MessageFeedbackPayload) => any;
     action: (payload: ChatActionPayload) => any;
     messageTerminal: (payload: ChatMessageTerminalPayload) => any;
-}, string, import("vue").PublicProps, Readonly<import("../types.js").DefaultChatEmbedProps | import("../types.js").TelaAgentChatEmbedProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<(import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId?: undefined;
+    telaAgentInputs?: undefined;
+    workspaceSettings?: import("vue").DeepReadonly<useChatAuth> | useChatAuth | null;
+    user?: import("../types.js").ChatActor | null;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps) | (import("../types.js").ChatEmbedSharedProps & {
+    telaAgentId: string;
+    telaAgentInputs?: import("vue").DeepReadonly<useChatAuth[]> | null;
+    workspaceSettings?: never;
+    user?: never;
+    features?: Partial<import("../feature-config.js").ChatFeatureConfig>;
+} & import("../types.js").ChatEmbedVariantProps)> & Readonly<{
     "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+    "onUpdate:conversationTitle"?: ((value: string | null) => any) | undefined;
     onMessageFeedback?: ((payload: MessageFeedbackPayload) => any) | undefined;
     onAction?: ((payload: ChatActionPayload) => any) | undefined;
     onMessageTerminal?: ((payload: ChatMessageTerminalPayload) => any) | undefined;

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

@@ -19,27 +19,37 @@ const props = defineProps({
 const emit = defineEmits(["update:isEditing", "update:editTitle", "saveTitle", "cancelEditing", "rename", "duplicate", "export", "copyLink", "debug", "delete", "tabChange"]);
 const titleInputRef = ref(null);
 const currentTab = computed(() => props.activeTab ?? "chat");
+const tabOptions = computed(() => {
+  const options = [
+    { id: "chat", name: "Chat" },
+    { id: "files", name: "Arquivos", count: props.filesCount }
+  ];
+  if (props.showUsageTab) {
+    options.push({ id: "usage", name: "Uso" });
+  }
+  return options;
+});
 const titleInputWidth = computed(() => `${Math.max(props.editTitle.length + 2, 8)}ch`);
 const headerMenuItems = computed(() => {
   const items = [
     {
       label: "Renomear",
-      icon: "i-ph-pencil-simple",
+      icon: "i-ph-pencil-simple-bold",
       click: () => emit("rename")
     },
     {
       label: "Duplicar",
-      icon: "i-ph-copy",
+      icon: "i-ph-copy-bold",
       click: () => emit("duplicate")
     },
     {
       label: "Exportar",
-      icon: "i-ph-download-simple",
+      icon: "i-ph-download-simple-bold",
       click: () => emit("export")
     },
     {
       label: "Copiar link",
-      icon: "i-ph-link",
+      icon: "i-ph-link-bold",
       click: () => emit("copyLink")
     }
   ];
@@ -80,21 +90,20 @@ watch(() => props.isEditing, (editing) => {
 <template>
     <div
         flex items-center gap-16px
-        pl-24px pr-16px h-64px
-        b-b=".5px solid rgba(0,0,0,0.08)"
+        pl-24px pr-16px h-62px
+        border-b-0.5px border
         bg="white/94"
         backdrop-blur-sm
         absolute top-0 right-0 z-10
         :style="{ left: 'var(--chat-panel-offset)' }"
     >
-        <div flex="~ col 1" gap-4px min-w-0>
+        <div flex="~ col 1" gap-1.5px min-w-0>
             <div
                 v-if="isEditing"
                 flex items-center
                 text-primary
                 w-fit max-w-full
-                pb-1px
-                b-b=".5px solid #A3A3A3"
+                b-b=".5px solid border"
                 :style="{ width: titleInputWidth }"
             >
                 <input
@@ -105,101 +114,92 @@ watch(() => props.isEditing, (editing) => {
                     aria-label="Nome da conversa"
                     w-full min-w-0 max-w-full
                     bg-transparent border-none outline-none
-                    text-16px font-580 text-primary leading-20px tracking="-.2px"
+                    heading-h5-semibold text-primary
                     p-0
                     @input="emit('update:editTitle', $event.target.value)"
                     @keydown="handleTitleKeydown"
                     @blur="emit('saveTitle')"
                 >
             </div>
-            <p
+            <h5
                 v-else
-                text-16px font-580 text-primary leading-20px tracking="-.2px"
-                truncate cursor-text
+                heading-h5-semibold text-primary
+                truncate cursor-text border-b-0.5px border-transparent
                 @dblclick.prevent.stop="emit('rename')"
             >
                 {{ capitalizeFirst(title) }}<span v-if="generatingTitle" class="typing-cursor">|</span>
-            </p>
+            </h5>
 
             <div flex items-center gap-8px>
-                <div flex items-center gap-4px>
-                    <div flex items-center pr-2px>
-                        <div
-                            w-16px h-16px rounded-full overflow-hidden flex-shrink-0
-                            b="2px white"
-                        >
-                            <img
+                <span body-12-regular text-secondary>
+                    Atualizado {{ formatRelativeTime(updatedAt) }}
+                </span>
+
+                <TelaDotSeparator />
+
+                <div flex items-center gap-6px>
+                    <div flex items-center>
+                        <div size-16px flex items-center justify-center rounded-full overflow-hidden flex-shrink-0>
+                            <TelaAvatar
                                 v-if="creatorImage"
-                                :src="creatorImage"
+                                :image="creatorImage"
+                                size="2xs"
                                 :alt="creatorName ?? 'Usu\xE1rio'"
-                                w-full h-full object-cover
-                            >
+                            />
                             <div v-else w-full h-full bg-gray-200 flex items-center justify-center>
-                                <span text-8px text-gray-500 font-medium>
+                                <span body-12-regular text-secondary>
                                     {{ (creatorName ?? creatorEmail ?? "U").charAt(0).toUpperCase() }}
                                 </span>
                             </div>
                         </div>
                     </div>
-                    <span text-12px text-secondary leading-16px truncate>
+                    <span body-12-regular text-secondary truncate>
                         {{ creatorName ?? creatorEmail ?? "Usu\xE1rio" }}
                     </span>
                 </div>
-                <span text-12px text-tertiary leading-16px>
-                    Atualizado {{ formatRelativeTime(updatedAt) }}
-                </span>
             </div>
         </div>
 
-        <div flex gap-2px items-start rounded-10px shrink-0>
-            <button
-                flex gap-8px items-center px-12px py-7px rounded-10px
-                :class="currentTab === 'chat' ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
-                @click="emit('tabChange', 'chat')"
-            >
-                <span
-                    text-14px font-580 leading-18px tracking="-.15px"
-                    :class="currentTab === 'chat' ? 'text-gray-900' : 'text-gray-500'"
-                >
-                    Chat
-                </span>
-            </button>
-
-            <button
-                flex gap-8px items-center px-12px py-7px rounded-10px
-                :class="currentTab === 'files' ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
-                @click="emit('tabChange', 'files')"
-            >
-                <span
-                    text-14px font-580 leading-18px tracking="-.15px"
-                    :class="currentTab === 'files' ? 'text-gray-900' : 'text-gray-500'"
-                >
-                    Arquivos
-                </span>
-                <div
-                    v-if="filesCount !== void 0 && filesCount > 0"
-                    bg-gray-200 rounded-5px px-5px py-3px
-                    flex items-center justify-center
+        <div flex="~" items-center shrink-0>
+            <div p-4px bg-muted rounded-12px flex="~" items-center>
+                <button
+                    v-for="option in tabOptions"
+                    :key="option.id"
+                    rounded-10px relative
+                    body-14-semibold
+                    h-full
+                    py-7px px-12px
+                    not-first:ml-2px
+                    class="group"
+                    :class="[currentTab === option.id ? 'text-primary' : 'text-tertiary duration-80 hover:text-secondary']"
+                    @click="emit('tabChange', option.id)"
                 >
-                    <span text-9px font-580 text-secondary leading-10px tracking-1px uppercase>
-                        {{ filesCount }}
+                    <span flex="~" items-center gap-8px relative z-10 h-full>
+                        {{ option.name }}
+                        <span
+                            v-if="option.count !== void 0 && option.count > 0"
+                            bg-gray-200 rounded-5px px-5px py-3px
+                            flex items-center justify-center
+                            text-9px font-580 text-secondary leading-10px tracking-1px uppercase
+                        >
+                            {{ option.count }}
+                        </span>
                     </span>
-                </div>
-            </button>
-
-            <button
-                v-if="showUsageTab"
-                flex gap-8px items-center px-12px py-7px rounded-10px
-                :class="currentTab === 'usage' ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
-                @click="emit('tabChange', 'usage')"
-            >
-                <span
-                    text-14px font-580 leading-18px tracking="-.15px"
-                    :class="currentTab === 'usage' ? 'text-gray-900' : 'text-gray-500'"
-                >
-                    Uso
-                </span>
-            </button>
+                    <AnimatePresence mode="wait" :initial="false">
+                        <Motion
+                            v-if="currentTab === option.id"
+                            aria-hidden="true"
+                            layout-id="chat-topbar-active-tab"
+                            absolute inset-0 bg border-0.5px rounded-inherit size-full
+                            class="z-0 border-black/16 [box-shadow:0_2px_3px_0_rgba(64,64,64,0.03)]"
+                            :initial="{ opacity: 0 }"
+                            :animate="{ opacity: 1 }"
+                            :exit="{ opacity: 0 }"
+                            :transition="{ duration: 0.3, type: 'spring', bounce: 0 }"
+                        />
+                    </AnimatePresence>
+                </button>
+            </div>
         </div>
 
         <div flex="~ 1" items-center justify-end gap-12px min-w-0>
@@ -222,15 +222,13 @@ watch(() => props.isEditing, (editing) => {
             </TelaTooltip>
 
             <TelaDropdownMenu :items="headerMenuItems" align="end">
-                <button
-                    flex items-center justify-center
-                    w-32px h-32px rounded-10px
-                    bg-gray-80
-                    hover:bg-gray-100
-                    transition-colors
-                >
-                    <div i-ph-dots-three text-20px text-gray-900 />
-                </button>
+                <TelaIconButton
+                    size="md"
+                    color="secondary"
+                    icon="i-ph-dots-three-bold"
+                    button-class="group !rounded-12px"
+                    icon-class="group-data-[state=open]:text-neutral-950"
+                />
             </TelaDropdownMenu>
         </div>
     </div>

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

@@ -3,11 +3,13 @@ import type { ChatActionPayload } from '../../messages/composables/chat-action.j
 import type { MessageFeedbackPayload } from '../../messages/composables/chat-feedback.js';
 import type { ChatMessageTerminalPayload } from '../../messages/composables/chat-message-terminal.js';
 import type { ChatFeatureConfig } from '../feature-config.js';
-import type { ChatSidebarConfig, DefaultChatEmbedProps, MeistrariChatEmbedProps, TelaAgentChatEmbedProps } from '../types.js';
+import type { ChatEmbedVariant, ChatEmbedVariantProps, ChatSidebarConfig, ChatSuggestion, DefaultChatEmbedProps, MeistrariChatEmbedProps, TelaAgentChatEmbedProps } from '../types.js';
 
 type MeistrariChatEmbedEmits = {
     /** Fired when the active conversation changes. Pairs with `v-model:conversation-id`. */
     'update:conversationId': (value: string | null) => any;
+    /** Fired when the floating widget window opens or closes. Widget variants only. */
+    'update:open': (value: boolean) => any;
     /** Fired when an assistant message triggers a host-handled action. */
     'action': (payload: ChatActionPayload) => any;
     /** Fired when a user submits feedback for an assistant message. */
@@ -17,7 +19,7 @@ type MeistrariChatEmbedEmits = {
 };
 
 type MeistrariChatEmbedSlots = SlotsType<{
-    /** Rendered in a dedicated bottom pane of the conversation sidebar, splitting it in half. */
+    /** Rendered in a dedicated bottom pane of the conversation sidebar, splitting it in half. Page variant only. */
     'sidebar-bottom'?: () => any;
 }>;
 
@@ -50,4 +52,4 @@ type MeistrariChatEmbedSlots = SlotsType<{
 declare const MeistrariChatEmbed: DefineSetupFnComponent<MeistrariChatEmbedProps, MeistrariChatEmbedEmits, MeistrariChatEmbedSlots>;
 
 export default MeistrariChatEmbed;
-export type { ChatActionPayload, ChatFeatureConfig, ChatMessageTerminalPayload, ChatSidebarConfig, DefaultChatEmbedProps, MeistrariChatEmbedProps, MessageFeedbackPayload, TelaAgentChatEmbedProps };
+export type { ChatActionPayload, ChatEmbedVariant, ChatEmbedVariantProps, ChatFeatureConfig, ChatMessageTerminalPayload, ChatSidebarConfig, ChatSuggestion, DefaultChatEmbedProps, MeistrariChatEmbedProps, MessageFeedbackPayload, TelaAgentChatEmbedProps };