@meistrari/chat-nuxt 4.4.0-rc.8 → 4.4.0

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

@@ -14,7 +14,11 @@ type __VLS_Props = {
     showUsageTab?: boolean;
     showDebugOption?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
     rename: () => any;
     duplicate: () => any;
@@ -39,5 +43,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:editTitle"?: ((value: string) => any) | undefined;
     "onUpdate:isEditing"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -21,7 +21,7 @@ const titleInputRef = ref(null);
 const currentTab = computed(() => props.activeTab ?? "chat");
 const tabOptions = computed(() => {
   const options = [
-    { id: "chat", name: "Chat" },
+    { id: "chat", name: "Conversa" },
     { id: "files", name: "Arquivos", count: props.filesCount }
   ];
   if (props.showUsageTab) {
@@ -62,7 +62,7 @@ const headerMenuItems = computed(() => {
   }
   items.push({
     label: "Excluir",
-    icon: "i-ph-trash",
+    icon: "i-ph-trash-bold",
     color: "negative",
     click: () => emit("delete")
   });
@@ -90,13 +90,12 @@ watch(() => props.isEditing, (editing) => {
 <template>
     <div
         flex items-center gap-16px
-        pl-24px pr-16px h-62px
-        border-b-0.5px border
-        bg="white/94"
-        backdrop-blur-sm
-        absolute top-0 right-0 z-10
+        pl-16px pr-16px h-56px
+        absolute top-0 right-0 z-10 class="bg-gradient-to-b from-white to-transparent"
         :style="{ left: 'var(--chat-panel-offset)' }"
     >
+        <slot name="leading" />
+
         <div flex="~ col 1" gap-1.5px min-w-0>
             <div
                 v-if="isEditing"
@@ -160,7 +159,7 @@ watch(() => props.isEditing, (editing) => {
             </div>
         </div>
 
-        <div flex="~" items-center shrink-0>
+        <div flex="~" items-center shrink-0 absolute top="50%" left="50%" translate-x="-50%" translate-y="-50%">
             <div p-4px bg-muted rounded-12px flex="~" items-center>
                 <button
                     v-for="option in tabOptions"

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

@@ -14,7 +14,11 @@ type __VLS_Props = {
     showUsageTab?: boolean;
     showDebugOption?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: () => any;
     rename: () => any;
     duplicate: () => any;
@@ -39,5 +43,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:editTitle"?: ((value: string) => any) | undefined;
     "onUpdate:isEditing"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -24,6 +24,8 @@ type MeistrariChatEmbedEmits = {
 type MeistrariChatEmbedSlots = SlotsType<{
     /** Rendered in a dedicated bottom pane of the conversation sidebar, splitting it in half. Page variant only. */
     'sidebar-bottom'?: () => any;
+    /** Rendered at the start of the conversation topbar, before the title. Page variant only. */
+    'topbar-leading'?: () => any;
     /** Rendered inside a failed assistant message's error box, next to "Tentar novamente"; receives the failed message. */
     'failed-message-actions'?: (props: { message: Message }) => any;
 }>;

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

@@ -118,6 +118,9 @@ const widgetEmbedProps = computed(() => ({
         <template v-if="$slots['sidebar-bottom']" #sidebar-bottom>
             <slot name="sidebar-bottom" />
         </template>
+        <template v-if="$slots['topbar-leading']" #topbar-leading>
+            <slot name="topbar-leading" />
+        </template>
         <template v-if="$slots['failed-message-actions']" #failed-message-actions="slotProps">
             <slot name="failed-message-actions" v-bind="slotProps" />
         </template>

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

@@ -24,6 +24,8 @@ type MeistrariChatEmbedEmits = {
 type MeistrariChatEmbedSlots = SlotsType<{
     /** Rendered in a dedicated bottom pane of the conversation sidebar, splitting it in half. Page variant only. */
     'sidebar-bottom'?: () => any;
+    /** Rendered at the start of the conversation topbar, before the title. Page variant only. */
+    'topbar-leading'?: () => any;
     /** Rendered inside a failed assistant message's error box, next to "Tentar novamente"; receives the failed message. */
     'failed-message-actions'?: (props: { message: Message }) => any;
 }>;

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

@@ -283,7 +283,6 @@ async function handleConversationDrop(event, groupId) {
                 <ChatConversationNewGroupButton />
             </div>
             <ChatConversationSearch v-model="conversationSearch" />
-            <ChatConversationCreatorFilter />
         </div>
 
         <div flex-1 overflow-y-auto px-8px pb-8px>

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

@@ -137,6 +137,11 @@ const submitStatus = computed(() => {
 const promptShellLocked = computed(
   () => isLocked.value && submitStatus.value !== "streaming"
 );
+const showStopRun = computed(() => submitStatus.value === "streaming");
+watch(editorRef, (editor) => {
+  if (editor && content.value && !editor.textContent)
+    setDraft(content.value);
+});
 watch(agentInputVariables, (variables) => {
   const variableNames = new Set(variables.map((input) => input.name));
   agentInputTexts.value = Object.fromEntries(
@@ -636,152 +641,157 @@ defineExpose({
                  its nearest positioned ancestor; a positioned wrapper here
                  would shrink the input. The dropdown positions itself fixed
                  from the caret rect, so it needs no relative ancestor. -->
-            <div>
-                <ChatMentionDropdown
-                    v-if="mentionAutocomplete.isOpen"
-                    :items="mentionAutocomplete.filteredItems"
-                    :commands="mentionAutocomplete.filteredCommands"
-                    :highlighted-index="mentionAutocomplete.highlightedIndex"
-                    :trigger="mentionAutocomplete.activeTrigger"
-                    :query="mentionAutocomplete.query"
-                    :caret-rect="mentionAutocomplete.triggerCaretRect"
-                    @select="mentionAutocomplete.selectItem"
-                    @select-command="mentionAutocomplete.runCommand"
-                />
+            <AnimatePresence mode="popLayout" :initial="false">
+                <TelaChatAnimateEnter v-if="showStopRun" key="stop-run">
+                    <TelaChatStopRunButton label="Parar geração" @stop="emit('cancel')" />
+                </TelaChatAnimateEnter>
+                <TelaChatAnimateEnter v-else key="prompt-input">
+                    <ChatMentionDropdown
+                        v-if="mentionAutocomplete.isOpen"
+                        :items="mentionAutocomplete.filteredItems"
+                        :commands="mentionAutocomplete.filteredCommands"
+                        :highlighted-index="mentionAutocomplete.highlightedIndex"
+                        :trigger="mentionAutocomplete.activeTrigger"
+                        :query="mentionAutocomplete.query"
+                        :caret-rect="mentionAutocomplete.triggerCaretRect"
+                        @select="mentionAutocomplete.selectItem"
+                        @select-command="mentionAutocomplete.runCommand"
+                    />
 
-                <TelaChatPromptInput :locked="promptShellLocked" :class="centered && 'bg-white'">
-                    <TelaChatPromptInputAttachments v-if="hasAttachments">
-                        <TelaChatPromptInputAttachment
-                            v-for="pendingFile in pendingFiles"
-                            :key="pendingFile.id"
-                            :name="pendingFile.file.name"
-                            :icon="getFileIcon(getPendingFileMimeType(pendingFile))"
-                            :meta="formatFileSize(pendingFile.file.size)"
-                            remove-label="Remover anexo"
-                            @remove="removeFile(pendingFile.id)"
-                        >
-                            <select
-                                v-if="fileInputVariables.length > 0"
-                                class="agent-file-variable-select"
-                                :value="pendingFile.inputName ?? ''"
-                                :disabled="isLocked"
-                                @change="updatePendingFileInput(pendingFile.id, $event)"
-                                @click.stop
+                    <TelaChatPromptInput :locked="promptShellLocked" :class="centered && 'bg-white'">
+                        <TelaChatPromptInputAttachments v-if="hasAttachments">
+                            <TelaChatPromptInputAttachment
+                                v-for="pendingFile in pendingFiles"
+                                :key="pendingFile.id"
+                                :name="pendingFile.file.name"
+                                :icon="getFileIcon(getPendingFileMimeType(pendingFile))"
+                                :meta="formatFileSize(pendingFile.file.size)"
+                                remove-label="Remover anexo"
+                                @remove="removeFile(pendingFile.id)"
                             >
-                                <option value="" disabled>
-                                    Selecionar variável
-                                </option>
-                                <option
-                                    v-for="input in fileInputVariables"
-                                    :key="input.id || input.name"
-                                    :value="input.name"
+                                <select
+                                    v-if="fileInputVariables.length > 0"
+                                    class="agent-file-variable-select"
+                                    :value="pendingFile.inputName ?? ''"
+                                    :disabled="isLocked"
+                                    @change="updatePendingFileInput(pendingFile.id, $event)"
+                                    @click.stop
                                 >
-                                    {{ input.name }}
-                                </option>
-                            </select>
-                        </TelaChatPromptInputAttachment>
-                        <component
-                            :is="composerExtension.attachmentsComponent"
-                            v-if="composerExtension?.attachmentsComponent"
-                            :disabled="isLocked"
-                        />
-                    </TelaChatPromptInputAttachments>
-
-                    <TelaChatPromptInputTextarea
-                        ref="promptTextareaRef"
-                        data-testid="chat-message-input"
-                        placeholder="Escreva sua mensagem..."
-                        :empty="!content.trim()"
-                        :flush="hasAttachments"
-                        :disabled="isLocked"
-                        @keydown="handleKeydown"
-                        @input="handleInput"
-                        @paste="handlePaste"
-                        @blur="handleBlur"
-                    />
-
-                    <TelaChatPromptInputToolbar>
-                        <TelaChatPromptInputTools>
-                            <TelaChatPromptInputActionMenu>
-                                <TelaChatPromptInputActionMenuTrigger :locked="isLocked" label="Abrir menu de ações" />
-                                <TelaChatPromptInputActionMenuContent>
-                                    <TelaChatPromptInputActionMenuItem
-                                        icon="i-ph-paperclip"
-                                        :disabled="isLocked"
-                                        @click="openFileDialog()"
+                                    <option value="" disabled>
+                                        Selecionar variável
+                                    </option>
+                                    <option
+                                        v-for="input in fileInputVariables"
+                                        :key="input.id || input.name"
+                                        :value="input.name"
                                     >
-                                        Adicionar arquivos ou fotos
-                                    </TelaChatPromptInputActionMenuItem>
-                                    <TelaChatPromptInputActionMenuSub>
-                                        <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-clock-counter-clockwise">
-                                            Arquivos recentes
-                                        </TelaChatPromptInputActionMenuSubTrigger>
-                                        <TelaChatPromptInputActionMenuSubContent>
-                                            <TelaChatPromptInputActionMenuItem v-if="!fileItems.length" class="text-center" disabled>
-                                                Nenhum arquivo recente
-                                            </TelaChatPromptInputActionMenuItem>
-                                            <TelaChatPromptInputActionMenuItem
-                                                v-for="file in fileItems"
-                                                :key="file.id"
-                                                @click="insertMentionFromMenu(file)"
-                                            >
-                                                <img :src="file.iconUrl" class="w-16px h-16px mr-8px shrink-0" alt="">
-                                                <span class="min-w-0 max-w-200px truncate">{{ file.label }}</span>
-                                            </TelaChatPromptInputActionMenuItem>
-                                        </TelaChatPromptInputActionMenuSubContent>
-                                    </TelaChatPromptInputActionMenuSub>
-                                    <TelaMenubarSeparator />
-                                    <TelaChatPromptInputActionMenuSub>
-                                        <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-notepad" icon-size="16px">
-                                            Skills
-                                        </TelaChatPromptInputActionMenuSubTrigger>
-                                        <TelaChatPromptInputActionMenuSubContent>
-                                            <TelaChatPromptInputActionMenuItem v-if="!skillItems.length" class="text-center" disabled>
-                                                Nenhuma skill disponível
-                                            </TelaChatPromptInputActionMenuItem>
-                                            <TelaChatPromptInputActionMenuItem
-                                                v-for="skill in skillItems"
-                                                :key="skill.id"
-                                                @click="insertMentionFromMenu(skill)"
-                                            >
-                                                <span class="min-w-0 max-w-200px truncate">{{ skill.label }}</span>
-                                            </TelaChatPromptInputActionMenuItem>
-                                        </TelaChatPromptInputActionMenuSubContent>
-                                    </TelaChatPromptInputActionMenuSub>
-                                </TelaChatPromptInputActionMenuContent>
-                            </TelaChatPromptInputActionMenu>
+                                        {{ input.name }}
+                                    </option>
+                                </select>
+                            </TelaChatPromptInputAttachment>
                             <component
-                                :is="composerExtension.component"
-                                v-if="composerExtension?.component"
+                                :is="composerExtension.attachmentsComponent"
+                                v-if="composerExtension?.attachmentsComponent"
                                 :disabled="isLocked"
                             />
-                        </TelaChatPromptInputTools>
+                        </TelaChatPromptInputAttachments>
 
-                        <TelaChatPromptInputActions>
-                            <ChatReasoningEffortSelector
-                                v-model="selectedReasoningEffort"
-                                :disabled="isLocked"
-                                @click.stop
-                            />
-                            <ChatModelSelector
-                                v-model="selectedModel"
-                                :disabled="isLocked"
-                                @click.stop
-                            />
-                            <TelaChatPromptSubmitButton
-                                data-testid="chat-message-submit"
-                                :status="submitStatus"
-                                :disabled="!canSend"
-                                send-label="Enviar mensagem"
-                                stop-label="Parar geração"
-                                uploading-label="Enviando anexos"
-                                @send="handleSend"
-                                @stop="emit('cancel')"
-                            />
-                        </TelaChatPromptInputActions>
-                    </TelaChatPromptInputToolbar>
-                </TelaChatPromptInput>
-            </div>
+                        <TelaChatPromptInputTextarea
+                            ref="promptTextareaRef"
+                            data-testid="chat-message-input"
+                            placeholder="Escreva sua mensagem..."
+                            :empty="!content.trim()"
+                            :flush="hasAttachments"
+                            :disabled="isLocked"
+                            @keydown="handleKeydown"
+                            @input="handleInput"
+                            @paste="handlePaste"
+                            @blur="handleBlur"
+                        />
+
+                        <TelaChatPromptInputToolbar>
+                            <TelaChatPromptInputTools>
+                                <TelaChatPromptInputActionMenu>
+                                    <TelaChatPromptInputActionMenuTrigger :locked="isLocked" label="Abrir menu de ações" />
+                                    <TelaChatPromptInputActionMenuContent>
+                                        <TelaChatPromptInputActionMenuItem
+                                            icon="i-ph-paperclip"
+                                            :disabled="isLocked"
+                                            @click="openFileDialog()"
+                                        >
+                                            Adicionar arquivos ou fotos
+                                        </TelaChatPromptInputActionMenuItem>
+                                        <TelaChatPromptInputActionMenuSub>
+                                            <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-clock-counter-clockwise">
+                                                Arquivos recentes
+                                            </TelaChatPromptInputActionMenuSubTrigger>
+                                            <TelaChatPromptInputActionMenuSubContent>
+                                                <TelaChatPromptInputActionMenuItem v-if="!fileItems.length" class="text-center" disabled>
+                                                    Nenhum arquivo recente
+                                                </TelaChatPromptInputActionMenuItem>
+                                                <TelaChatPromptInputActionMenuItem
+                                                    v-for="file in fileItems"
+                                                    :key="file.id"
+                                                    @click="insertMentionFromMenu(file)"
+                                                >
+                                                    <img :src="file.iconUrl" class="w-16px h-16px mr-8px shrink-0" alt="">
+                                                    <span class="min-w-0 max-w-200px truncate">{{ file.label }}</span>
+                                                </TelaChatPromptInputActionMenuItem>
+                                            </TelaChatPromptInputActionMenuSubContent>
+                                        </TelaChatPromptInputActionMenuSub>
+                                        <TelaMenubarSeparator />
+                                        <TelaChatPromptInputActionMenuSub>
+                                            <TelaChatPromptInputActionMenuSubTrigger icon="i-ph-notepad" icon-size="16px">
+                                                Skills
+                                            </TelaChatPromptInputActionMenuSubTrigger>
+                                            <TelaChatPromptInputActionMenuSubContent>
+                                                <TelaChatPromptInputActionMenuItem v-if="!skillItems.length" class="text-center" disabled>
+                                                    Nenhuma skill disponível
+                                                </TelaChatPromptInputActionMenuItem>
+                                                <TelaChatPromptInputActionMenuItem
+                                                    v-for="skill in skillItems"
+                                                    :key="skill.id"
+                                                    @click="insertMentionFromMenu(skill)"
+                                                >
+                                                    <span class="min-w-0 max-w-200px truncate">{{ skill.label }}</span>
+                                                </TelaChatPromptInputActionMenuItem>
+                                            </TelaChatPromptInputActionMenuSubContent>
+                                        </TelaChatPromptInputActionMenuSub>
+                                    </TelaChatPromptInputActionMenuContent>
+                                </TelaChatPromptInputActionMenu>
+                                <component
+                                    :is="composerExtension.component"
+                                    v-if="composerExtension?.component"
+                                    :disabled="isLocked"
+                                />
+                            </TelaChatPromptInputTools>
+
+                            <TelaChatPromptInputActions>
+                                <ChatReasoningEffortSelector
+                                    v-model="selectedReasoningEffort"
+                                    :disabled="isLocked"
+                                    @click.stop
+                                />
+                                <ChatModelSelector
+                                    v-model="selectedModel"
+                                    :disabled="isLocked"
+                                    @click.stop
+                                />
+                                <TelaChatPromptSubmitButton
+                                    data-testid="chat-message-submit"
+                                    :status="submitStatus"
+                                    :disabled="!canSend"
+                                    send-label="Enviar mensagem"
+                                    stop-label="Parar geração"
+                                    uploading-label="Enviando anexos"
+                                    @send="handleSend"
+                                    @stop="emit('cancel')"
+                                />
+                            </TelaChatPromptInputActions>
+                        </TelaChatPromptInputToolbar>
+                    </TelaChatPromptInput>
+                </TelaChatAnimateEnter>
+            </AnimatePresence>
         </div>
     </div>
 </template>

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

@@ -95,11 +95,8 @@ defineExpose({
     >
         <TelaChatConversation
             ref="conversationRef"
-            :scroll-area="variant === 'widget'"
-            :class="{
-  'pt-72px!': (variant ?? 'page') === 'page',
-  'pt-72px pb-24px px-16px': variant === 'mobile'
-}"
+            :scroll-area="variant !== 'mobile'"
+            :class="{ 'pb-24px px-16px': variant === 'mobile' }"
         >
             <TelaChatConversationContent class="max-w-700px! min-h-full">
                 <template v-if="loading">
@@ -152,19 +149,18 @@ defineExpose({
             <button
                 v-if="!isPinned && hasRoomBelow"
                 type="button"
-                class="chat-message-list__jump"
-                bg="white/55"
-                b=".5px border-default"
+                absolute z-2 left="50%" class="chat-message-list__jump bottom-[calc(var(--chat-input-height,0px)_+_32px)]"
+                bg border-0.5px border inline-flex size-32px flex items-center justify-center rounded-full
                 aria-label="Ir para a mensagem mais recente"
                 title="Ir para a mensagem mais recente"
                 @click="scrollToBottom({ smooth: true })"
             >
-                <TelaIcon name="i-ph-arrow-down" size="16px" color="icon-secondary" />
+                <TelaIcon name="i-ph-arrow-down-bold" size="16px" color="icon-tertiary" />
             </button>
         </Transition>
     </div>
 </template>
 
 <style scoped>
-.chat-message-list>:deep([data-chat-conversation]){flex:1 1 0%;min-height:0;overflow-y:auto}.chat-message-list__jump{align-items:center;backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-radius:999px;bottom:calc(var(--chat-input-height, 0px) + 40px);box-shadow:0 3px 12px rgba(0,0,0,.1);cursor:pointer;display:inline-flex;height:32px;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:32px;z-index:2}.jump-to-latest-enter-active,.jump-to-latest-leave-active{transition:opacity .12s ease,transform .12s ease}.jump-to-latest-enter-from,.jump-to-latest-leave-to{opacity:0;transform:translateX(-50%) translateY(4px)}
+.chat-message-list>:deep([data-chat-conversation]){flex:1 1 0%;min-height:0;overflow-y:auto}.chat-message-list:not([data-variant=widget]) :deep([data-chat-conversation]){padding-top:64px}.chat-message-list[data-variant=page] :deep(.chat-conversation-scrollbar){top:64px!important}.chat-message-list[data-variant=page] :deep(.scroll-fog [data-reka-scroll-area-viewport]){--chat-fog-size:calc(var(--chat-input-height, 64px) + 64px)}.chat-message-list__jump{transform:translateX(-50%);transform-origin:center}.jump-to-latest-enter-active,.jump-to-latest-leave-active{transition:opacity .12s ease,transform .12s ease}.jump-to-latest-enter-from,.jump-to-latest-leave-to{opacity:0;transform:translateX(-50%) scale(.7) translateY(10px)}
 </style>

package/dist/runtime/messages/components/chat-reasoning-effort-selector.vue

@@ -84,24 +84,28 @@ function onKeydown(event) {
         <TelaPopoverTrigger as-child>
             <button
                 type="button"
-                class="effort-trigger hover:bg-muted! data-[state=open]:bg-muted!"
-                :class="effort ? 'text-primary' : 'text-secondary'"
+                class="group pl-10px pr-8px py-7px rounded-8px flex items-center gap-6px duration-80 text-primary hover:bg-muted data-[state=open]:text-secondary data-[state=open]:bg-muted"
                 :disabled="disabled"
                 :aria-label="`Esfor\xE7o de racioc\xEDnio: ${selectedOption?.label ?? AGENT_DEFAULT_LABEL}`"
             >
                 <span body-14-medium whitespace-nowrap>{{ triggerLabel }}</span>
-                <span i-ph-caret-down class="effort-trigger-caret" icon-secondary aria-hidden="true" />
+                <TelaIcon
+                    name="i-ph-caret-down-bold"
+                    size="15px"
+                    color="icon-tertiary"
+                    class="shrink-0 transition-transform ease-out duration-150 group-data-[state=open]:rotate-180"
+                />
             </button>
         </TelaPopoverTrigger>
         <TelaPopoverContent
             side="top"
             align="end"
-            :side-offset="8"
-            class="effort-panel w-260px p-16px rounded-16px bg border-0.5px border [box-shadow:0_4px_16px_0_rgba(85,91,98,0.14)]"
+            :side-offset="3"
+            class="popover-enter-exit origin-[var(--reka-popover-content-transform-origin)] w-260px p-16px rounded-12px! bg border-0.5px! border! [box-shadow:0_4px_16px_0_rgba(85,91,98,0.14)]!"
         >
             <div flex="~ col" gap-16px>
-                <div flex="~ col" items-center gap-4px text-center>
-                    <span body-14-medium text-primary>{{ selectedOption?.label ?? AGENT_DEFAULT_LABEL }}</span>
+                <div flex="~ col" items-center gap-2px text-center>
+                    <span body-14-semibold text-primary>{{ selectedOption?.label ?? AGENT_DEFAULT_LABEL }}</span>
                     <span body-12-regular text-secondary>{{ selectedOption?.description ?? AGENT_DEFAULT_DESCRIPTION }}</span>
                 </div>
 

package/dist/runtime/messages/components/reasoning/chat-reasoning-thought.vue

@@ -51,7 +51,7 @@ const liveFormattedDuration = computed(() => {
     <div class="chat-reasoning-stage" w-full>
         <Transition name="chat-reasoning-presence" :appear="!completed">
             <div v-if="!completed && !hasReasoning" key="thinking" class="chat-reasoning-placeholder">
-                <ChatThinkingIndicator />
+                <ChatThinkingIndicator :started-at="startedAt" />
             </div>
 
             <!-- Com reasoning (loading ou completo): header clicável + steps colapsáveis -->

package/dist/runtime/messages/components/reasoning/chat-thinking-indicator.d.vue.ts

@@ -1,3 +1,6 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    startedAt?: Date | string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/messages/components/reasoning/chat-thinking-indicator.vue

@@ -5,7 +5,16 @@ import {
   getNextChatLoadingMessageIndex,
   resolveChatLoadingMessages
 } from "../../../embed/loading-messages";
+const props = defineProps({
+  startedAt: { type: [Date, String], required: false }
+});
 const embedConfig = useEmbedConfig();
+const startedAtMs = computed(() => {
+  if (!props.startedAt)
+    return void 0;
+  const ms = new Date(props.startedAt).getTime();
+  return Number.isNaN(ms) ? void 0 : ms;
+});
 const currentTextIndex = ref(0);
 const dotCount = ref(0);
 const loadingState = computed(() => resolveChatLoadingMessages({
@@ -52,7 +61,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <TelaChatTextShimmer class="body-16-regular">
-        {{ currentText }}
-    </TelaChatTextShimmer>
+    <div flex flex-col gap-8px>
+        <TelaChatWorkingIndicator label="Trabalhando" :started-at="startedAtMs" />
+        <TelaChatTextShimmer class="body-16-regular">
+            {{ currentText }}
+        </TelaChatTextShimmer>
+    </div>
 </template>

package/dist/runtime/messages/components/reasoning/chat-thinking-indicator.vue.d.ts

@@ -1,3 +1,6 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    startedAt?: Date | string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "4.4.0-rc.8",
+  "version": "4.4.0",
   "type": "module",
   "exports": {
     ".": {
@@ -53,7 +53,7 @@
     "@iconify/vue": "^5.0.0",
     "@meistrari/auth-nuxt": "3.31.0",
     "@meistrari/logger": "^2.1.3",
-    "@meistrari/tela-build": "^1.74.2",
+    "@meistrari/tela-build": "^1.75.1",
     "@sentry/nuxt": "^10.0.0",
     "@vueuse/components": "^12.8.0",
     "@vueuse/core": "^12.8.0",