@meistrari/chat-nuxt 4.4.0-rc.9 → 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/configuration/chat-configuration-mobile-shell.d.vue.ts

@@ -15,13 +15,13 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
-    save: () => any;
     back: () => any;
+    save: () => any;
     selectTab: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
     onSelectTab?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -15,13 +15,13 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
-    save: () => any;
     back: () => any;
+    save: () => any;
     selectTab: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
     onBack?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
     onSelectTab?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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/embed/components/mobile/chat-mobile-shell.d.vue.ts

@@ -66,8 +66,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     export: () => any;
     copyLink: () => any;
     selectConversation: (id: string) => any;
-    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
     settings: () => any;
+    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
     debug: () => any;
     tabChange: (tab: TopbarTab) => any;
     newConversation: (groupId?: string | null | undefined) => any;
@@ -87,10 +87,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onExport?: (() => any) | undefined;
     onCopyLink?: (() => any) | undefined;
     onSelectConversation?: ((id: string) => any) | undefined;
+    onSettings?: (() => any) | undefined;
     onSend?: ((content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any) | undefined;
     "onUpdate:selectedModel"?: ((value: string | null) => any) | undefined;
     "onUpdate:selectedReasoningEffort"?: ((value: any) => any) | undefined;
-    onSettings?: (() => any) | undefined;
     onDebug?: (() => any) | undefined;
     onTabChange?: ((tab: TopbarTab) => any) | undefined;
     onNewConversation?: ((groupId?: string | null | undefined) => any) | undefined;

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

@@ -66,8 +66,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     export: () => any;
     copyLink: () => any;
     selectConversation: (id: string) => any;
-    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
     settings: () => any;
+    send: (content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any;
     debug: () => any;
     tabChange: (tab: TopbarTab) => any;
     newConversation: (groupId?: string | null | undefined) => any;
@@ -87,10 +87,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onExport?: (() => any) | undefined;
     onCopyLink?: (() => any) | undefined;
     onSelectConversation?: ((id: string) => any) | undefined;
+    onSettings?: (() => any) | undefined;
     onSend?: ((content: string, files: FileUploadInput[], agentInputs?: TelaAgentExecutionInput[] | undefined) => any) | undefined;
     "onUpdate:selectedModel"?: ((value: string | null) => any) | undefined;
     "onUpdate:selectedReasoningEffort"?: ((value: any) => any) | undefined;
-    onSettings?: (() => any) | undefined;
     onDebug?: (() => any) | undefined;
     onTabChange?: ((tab: TopbarTab) => any) | undefined;
     onNewConversation?: ((groupId?: string | null | undefined) => any) | undefined;

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.d.vue.ts

@@ -27,12 +27,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     }) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
-    openConversation: (conversationId: string) => any;
     fork: (messageId: string) => any;
+    openConversation: (conversationId: 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;
+    onOpenConversation?: ((conversationId: string) => any) | undefined;
 }>, {
     showTtft: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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-message-list.vue.d.ts

@@ -27,12 +27,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     }) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
-    openConversation: (conversationId: string) => any;
     fork: (messageId: string) => any;
+    openConversation: (conversationId: 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;
+    onOpenConversation?: ((conversationId: string) => any) | undefined;
 }>, {
     showTtft: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;