@meistrari/chat-nuxt 3.9.1 → 3.10.0

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

@@ -5,7 +5,7 @@ import { useInputHistory } from "../composables/input-history";
 import { useMentionAutocomplete } from "../composables/mention-autocomplete";
 import { getAgentInputReadiness } from "../input-readiness";
 import { formatFileSize } from "../../files/formatting";
-import { getMimeIcon, getMimeLabel } from "../../files/icons";
+import { getFileIcon, getMimeIcon, getMimeLabel } from "../../files/icons";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
@@ -28,7 +28,8 @@ const selectedModel = defineModel("selectedModel", { type: [String, null], ...{
 const { uploadFiles, uploading, uploadError } = useFileUpload();
 const isCancelEnabled = computed(() => props.showCancelButton === true);
 const content = ref("");
-const editorRef = ref(null);
+const promptTextareaRef = ref(null);
+const editorRef = computed(() => promptTextareaRef.value?.el ?? null);
 const fileInputRef = ref(null);
 const pendingFiles = ref([]);
 const selectedUploadInputName = ref(void 0);
@@ -69,6 +70,7 @@ const fileItems = computed(() => {
         label: f.name,
         description: getMimeLabel(f.mimeType),
         icon: getMimeIcon(f.mimeType),
+        iconUrl: getFileIcon(f.mimeType),
         category: "file"
       });
     }
@@ -81,6 +83,7 @@ const fileItems = computed(() => {
           label: f.name,
           description: "Contexto",
           icon: getMimeIcon(f.mimeType),
+          iconUrl: getFileIcon(f.mimeType),
           category: "file"
         });
       }
@@ -94,6 +97,7 @@ const fileItems = computed(() => {
           label: f.name,
           description: "Contexto do agente",
           icon: getMimeIcon(),
+          iconUrl: getFileIcon(),
           category: "file",
           idKind: "path"
         });
@@ -150,6 +154,16 @@ const mentionAutocomplete = useMentionAutocomplete({
 const canSend = computed(
   () => content.value.trim().length > 0 && !isLocked.value && !uploading.value && !props.agentInputSchemaLoading && agentInputReadiness.value.ready
 );
+const submitStatus = computed(() => {
+  if (uploading.value)
+    return "uploading";
+  if (props.loading && isCancelEnabled.value)
+    return "streaming";
+  return "ready";
+});
+const promptShellLocked = computed(
+  () => isLocked.value && submitStatus.value !== "streaming"
+);
 watch(agentInputVariables, (variables) => {
   const variableNames = new Set(variables.map((input) => input.name));
   agentInputTexts.value = Object.fromEntries(
@@ -407,10 +421,45 @@ function handlePaste(e) {
   sel.addRange(range);
   handleInput();
 }
-function focusEditor() {
-  if (isLocked.value)
+function insertMentionFromMenu(item) {
+  const editor = editorRef.value;
+  if (!editor || isLocked.value)
     return;
-  editorRef.value?.focus();
+  const span = document.createElement("span");
+  span.className = `mention-tag mention-tag-${item.category}`;
+  span.contentEditable = "false";
+  span.dataset.mentionId = item.id;
+  span.dataset.mentionCategory = item.category;
+  span.dataset.mentionLabel = item.label;
+  if (item.idKind)
+    span.dataset.mentionIdKind = item.idKind;
+  if (item.description)
+    span.dataset.mentionDescription = item.description;
+  if (item.variables)
+    span.dataset.mentionVariables = JSON.stringify(item.variables);
+  const iconClass = item.category === "file" ? "i-ph-note-blank" : item.category === "canvas" ? "i-ph-wrench" : "i-ph-hexagon";
+  const icon = document.createElement("span");
+  icon.className = iconClass;
+  icon.setAttribute("aria-hidden", "true");
+  span.appendChild(icon);
+  span.appendChild(document.createTextNode(item.label));
+  const lastChild = editor.lastChild;
+  const needsSpaceBefore = lastChild?.nodeType === Node.TEXT_NODE ? !/[\s\u00A0]$/.test(lastChild.textContent ?? "") : lastChild !== null;
+  if (needsSpaceBefore)
+    editor.appendChild(document.createTextNode(" "));
+  editor.appendChild(span);
+  const space = document.createTextNode("\xA0");
+  editor.appendChild(space);
+  const range = document.createRange();
+  range.setStartAfter(space);
+  range.collapse(true);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+  handleInput();
+  nextTick(() => {
+    editorRef.value?.focus();
+  });
 }
 function addFiles(files, inputName) {
   const validFiles = files.filter((file) => {
@@ -445,7 +494,7 @@ defineExpose({
 
 <template>
     <div :class="centered ? 'w-full' : hasDisclaimer ? 'px-24px' : 'px-24px pb-24px'" bg-transparent>
-        <div :class="centered ? 'w-full max-w-700px' : 'max-w-800px'" mx-auto>
+        <div :class="centered ? 'w-full' : ''" max-w-700px mx-auto>
             <Transition name="agent-inputs-panel-motion" mode="out-in" appear>
                 <div
                     v-if="hasAgentInputs"
@@ -554,53 +603,6 @@ defineExpose({
                     </Transition>
                 </div>
             </Transition>
-            <div v-if="pendingFiles.length > 0" flex flex-wrap gap-8px mb-12px>
-                <div
-                    v-for="pendingFile in pendingFiles"
-                    :key="pendingFile.id"
-                    flex items-center gap-8px flex-wrap
-                    px-12px py-8px
-                    rounded-8px
-                    bg-gray-100
-                    b=".5px gray-200"
-                >
-                    <div i-ph-file text-gray-600 text-16px />
-                    <div flex="~ col" gap-2px>
-                        <span body-12-medium text-black-700 max-w-150px truncate>{{ pendingFile.file.name }}</span>
-                        <span body-11-regular text-gray-500>{{ formatFileSize(pendingFile.file.size) }}</span>
-                    </div>
-                    <select
-                        v-if="fileInputVariables.length > 0"
-                        class="agent-file-variable-select"
-                        :value="pendingFile.inputName ?? ''"
-                        :disabled="isLocked"
-                        @change="updatePendingFileInput(pendingFile.id, $event)"
-                        @click.stop
-                    >
-                        <option value="" disabled>
-                            Selecionar variável
-                        </option>
-                        <option
-                            v-for="input in fileInputVariables"
-                            :key="input.id || input.name"
-                            :value="input.name"
-                        >
-                            {{ input.name }}
-                        </option>
-                    </select>
-                    <TelaIconButton
-                        p-4px
-                        icon="i-ph-x"
-                        rounded-4px
-                        color="secondary"
-                        hover:bg-gray-200
-                        transition
-                        icon-class="text-gray-500 text-12px"
-                        @click="removeFile(pendingFile.id)"
-                    />
-                </div>
-            </div>
-
             <div v-if="hasUnmappedAgentFiles" text-orange-600 body-12-regular mb-8px>
                 Selecione uma variável para cada arquivo anexado.
             </div>
@@ -617,102 +619,142 @@ defineExpose({
                 @change="handleFileSelect"
             >
 
-            <div relative>
+            <!-- Deliberately NOT position:relative — TelaChatBody pins
+                 [data-chat-prompt-input] with absolute left-0 right-0 against
+                 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"
                     :highlighted-index="mentionAutocomplete.highlightedIndex"
                     :trigger="mentionAutocomplete.activeTrigger"
                     :query="mentionAutocomplete.query"
+                    :caret-rect="mentionAutocomplete.triggerCaretRect"
                     @select="mentionAutocomplete.selectItem"
                 />
-            </div>
 
-            <div
-                flex="~ col"
-                gap-8px
-                p-16px
-                rounded-16px
-                class="input-container"
-                transition
-                :class="[
-  content.length > 0 && !isLocked && 'b-gray-300',
-  !isLocked && (centered ? 'bg-white' : 'bg-transparent'),
-  isLocked ? 'input-locked cursor-not-allowed' : 'cursor-text'
-]"
-                @click="focusEditor"
-            >
-                <div
-                    ref="editorRef"
-                    class="editor-content custom-scrollbar"
-                    :class="{ 'is-empty': !content.trim() }"
-                    data-placeholder="Escreva sua mensagem, @ para adicionar arquivos, / para skills"
-                    w-full
-                    min-h-20px
-                    text-16px
-                    font-normal
-                    leading-20px
-                    tracking--0.2px
-                    focus:outline-none
-                    :contenteditable="!isLocked"
-                    @keydown="handleKeydown"
-                    @input="handleInput"
-                    @paste="handlePaste"
-                    @blur="handleBlur"
-                />
-                <div flex items-center gap-8px>
-                    <ChatModelSelector
-                        v-model="selectedModel"
+                <TelaChatPromptInput :locked="promptShellLocked" :class="centered && 'bg-white'">
+                    <TelaChatPromptInputAttachments v-if="pendingFiles.length > 0">
+                        <TelaChatPromptInputAttachment
+                            v-for="pendingFile in pendingFiles"
+                            :key="pendingFile.id"
+                            :name="pendingFile.file.name"
+                            :icon="getFileIcon(pendingFile.file.type)"
+                            :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
+                            >
+                                <option value="" disabled>
+                                    Selecionar variável
+                                </option>
+                                <option
+                                    v-for="input in fileInputVariables"
+                                    :key="input.id || input.name"
+                                    :value="input.name"
+                                >
+                                    {{ input.name }}
+                                </option>
+                            </select>
+                        </TelaChatPromptInputAttachment>
+                    </TelaChatPromptInputAttachments>
+
+                    <TelaChatPromptInputTextarea
+                        ref="promptTextareaRef"
+                        placeholder="Escreva sua mensagem..."
+                        :empty="!content.trim()"
+                        :flush="pendingFiles.length > 0"
                         :disabled="isLocked"
-                        @click.stop
+                        @keydown="handleKeydown"
+                        @input="handleInput"
+                        @paste="handlePaste"
+                        @blur="handleBlur"
                     />
-                    <div flex-1 />
-                    <TelaTooltip :content="pendingFiles.length >= MAX_FILES ? 'Limite de arquivos atingido' : 'Anexar arquivo'" side="top">
-                        <TelaIconButton
-                            icon="i-ph-paperclip"
-                            size="md"
-                            color="secondary"
-                            class="rounded-8px! p-6px! transition-colors" :class="[
-  !isLocked && 'hover:bg-gray-50!'
-]"
-                            icon-class="text-gray-300 text-20px"
-                            :disabled="isLocked || pendingFiles.length >= MAX_FILES"
-                            @click="openFileDialog"
-                        />
-                    </TelaTooltip>
-                    <TelaTooltip :content="loading && isCancelEnabled ? 'Parar gera\xE7\xE3o' : 'Enter para enviar'" side="top">
-                        <button
-                            v-if="loading && isCancelEnabled"
-                            class="stop-button"
-                            @click="emit('cancel')"
-                        >
-                            <span class="stop-button-ring" />
-                            <span i-ph-stop-fill text-14px text-gray-900 />
-                        </button>
-                        <TelaIconButton
-                            v-else
-                            :icon="uploading ? 'i-ph-circle-notch' : 'i-ph-arrow-up'"
-                            size="md"
-                            color="secondary"
-                            class="rounded-10px! p-6px! transition-colors"
-                            :class="[
-  canSend ? 'bg-black-900! text-white! hover:bg-black-800!' : 'bg-gray-100! hover:bg-gray-200!',
-  uploading ? 'animate-spin' : ''
-]"
-                            :icon-class="[
-  'text-20px',
-  canSend ? 'text-white' : 'text-gray-400'
-].join(' ')"
-                            :disabled="!canSend"
-                            @click="handleSend"
-                        />
-                    </TelaTooltip>
-                </div>
+
+                    <TelaChatPromptInputToolbar>
+                        <TelaChatPromptInputTools>
+                            <TelaChatPromptInputActionMenu>
+                                <TelaChatPromptInputActionMenuTrigger :locked="isLocked" label="Abrir menu de ações" />
+                                <TelaChatPromptInputActionMenuContent>
+                                    <TelaChatPromptInputActionMenuItem
+                                        icon="i-ph-paperclip"
+                                        :disabled="isLocked || pendingFiles.length >= MAX_FILES"
+                                        @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>
+                        </TelaChatPromptInputTools>
+
+                        <TelaChatPromptInputActions>
+                            <ChatModelSelector
+                                v-model="selectedModel"
+                                :disabled="isLocked"
+                                @click.stop
+                            />
+                            <TelaChatPromptSubmitButton
+                                :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>
         </div>
     </div>
 </template>
 
 <style scoped>
-.input-container{border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06);position:relative;z-index:2}.input-locked{background:var(--Base-Gray-gray-100,#f3f4f6);border:.5px solid var(--Base-Neutral-neutral-300,#d9d9d9);box-shadow:0 12px 20px 0 hsla(0,0%,64%,.06)}.agent-inputs-panel{box-shadow:0 3px 10px 0 hsla(0,0%,64%,.06);position:relative;transform-origin:bottom center;will-change:max-height,opacity,transform,filter;z-index:1}.agent-inputs-panel-motion-enter-active,.agent-inputs-panel-motion-leave-active{overflow:hidden;transition:max-height .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-panel-motion-enter-from,.agent-inputs-panel-motion-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(46px) scale(.985)}.agent-inputs-panel-motion-enter-to,.agent-inputs-panel-motion-leave-from{filter:blur(0);max-height:560px;opacity:1;transform:translateY(0) scale(1)}.agent-inputs-content{transform-origin:bottom center;will-change:max-height,opacity,transform,filter}.agent-inputs-content-enter-active,.agent-inputs-content-leave-active{overflow:hidden;transition:max-height .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-content-enter-from,.agent-inputs-content-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(14px) scale(.985)}.agent-inputs-content-enter-to,.agent-inputs-content-leave-from{filter:blur(0);max-height:900px;opacity:1;transform:translateY(0) scale(1)}.agent-text-input{border:.5px solid #e5e7eb;border-radius:8px;color:#111827;font-size:13px;line-height:18px;min-height:64px;outline:none;padding:8px 10px;resize:vertical;width:100%}.agent-text-input:focus{border-color:#d1d5db}.agent-text-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.agent-file-variable-select{background:#fff;border:.5px solid #d1d5db;border-radius:6px;color:#374151;font-size:12px;height:28px;max-width:160px;outline:none;padding:0 8px}.editor-content{caret-color:#111827;color:#111827;max-height:200px;outline:none;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.editor-content.is-empty:before{color:#bdc4cc;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.icon-button:disabled{cursor:not-allowed;opacity:.5}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}@media (max-width:480px){.custom-scrollbar{scrollbar-width:none}.custom-scrollbar::-webkit-scrollbar{display:none}}.stop-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:relative;transition:opacity .15s ease;width:32px}.stop-button:hover{opacity:.8}.stop-button-ring{border:2px solid #e5e7eb;border-radius:50%;inset:0;position:absolute}.stop-button-ring:before{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#111827;content:"";inset:-2px;position:absolute}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.agent-inputs-panel{box-shadow:0 3px 10px 0 hsla(0,0%,64%,.06);position:relative;transform-origin:bottom center;will-change:max-height,opacity,transform,filter;z-index:1}.agent-inputs-panel-motion-enter-active,.agent-inputs-panel-motion-leave-active{overflow:hidden;transition:max-height .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-panel-motion-enter-from,.agent-inputs-panel-motion-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(46px) scale(.985)}.agent-inputs-panel-motion-enter-to,.agent-inputs-panel-motion-leave-from{filter:blur(0);max-height:560px;opacity:1;transform:translateY(0) scale(1)}.agent-inputs-content{transform-origin:bottom center;will-change:max-height,opacity,transform,filter}.agent-inputs-content-enter-active,.agent-inputs-content-leave-active{overflow:hidden;transition:max-height .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-content-enter-from,.agent-inputs-content-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(14px) scale(.985)}.agent-inputs-content-enter-to,.agent-inputs-content-leave-from{filter:blur(0);max-height:900px;opacity:1;transform:translateY(0) scale(1)}.agent-text-input{border:.5px solid #e5e7eb;border-radius:8px;color:#111827;font-size:13px;line-height:18px;min-height:64px;outline:none;padding:8px 10px;resize:vertical;width:100%}.agent-text-input:focus{border-color:#d1d5db}.agent-text-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.agent-file-variable-select{background:#fff;border:.5px solid #d1d5db;border-radius:6px;color:#374151;font-size:12px;height:28px;max-width:160px;outline:none;padding:0 8px}
 </style>

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

@@ -2,6 +2,12 @@ import type { Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     messages: readonly Message[];
     loading?: boolean;
+    /**
+     * Where the list renders: `page`/`widget` sit inside a `TelaChatBody` that
+     * owns the conversation padding; `mobile` renders standalone and keeps its
+     * own spacing. Defaults to `page`.
+     */
+    variant?: 'page' | 'widget' | 'mobile';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;

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

@@ -1,10 +1,11 @@
 <script setup>
 const props = defineProps({
   messages: { type: Array, required: true },
-  loading: { type: Boolean, required: false }
+  loading: { type: Boolean, required: false },
+  variant: { type: String, required: false }
 });
 const emit = defineEmits(["retry"]);
-const containerRef = ref(null);
+const conversationRef = ref(null);
 const skeletonMessages = [
   { id: "user-1", align: "end", width: "58%", height: "44px" },
   { id: "assistant-1", align: "start", width: "92%", height: "116px" },
@@ -12,46 +13,49 @@ const skeletonMessages = [
   { id: "assistant-2", align: "start", width: "84%", height: "92px" }
 ];
 function scrollToBottom() {
-  nextTick(() => {
-    if (containerRef.value) {
-      containerRef.value.scrollTop = containerRef.value.scrollHeight;
-    }
-  });
+  conversationRef.value?.scrollToBottom();
 }
+const hasPendingMessage = computed(
+  () => props.messages.some((message) => message.status === "pending")
+);
 watch(() => props.messages.length, scrollToBottom);
 onMounted(scrollToBottom);
 </script>
 
 <template>
-    <div
-        ref="containerRef"
-        flex-1
-        overflow-y-auto
-        pt-72px pb-24px px-16px
+    <TelaChatConversation
+        ref="conversationRef"
+        :class="{
+  'pt-72px!': (variant ?? 'page') === 'page',
+  'pt-72px pb-24px px-16px': variant === 'mobile'
+}"
     >
-        <div max-w-800px mx-auto>
-            <div v-if="loading" flex="~ col" gap-16px>
+        <TelaChatConversationContent class="max-w-700px!">
+            <template v-if="loading">
                 <div
                     v-for="message in skeletonMessages"
                     :key="message.id"
                     flex
                     :class="message.align === 'end' ? 'justify-end' : 'justify-start'"
                 >
-                    <TelaSkeleton
-                        rounded-16px
-                        :style="{ width: message.width, height: message.height }"
-                    />
+                    <TelaSkeleton :style="{ width: message.width, height: message.height }" />
                 </div>
-            </div>
+            </template>
 
-            <div v-else flex="~ col" gap-16px>
+            <template v-else>
                 <ChatMessageBubble
                     v-for="message in messages"
                     :key="message.id"
                     :message="message"
                     @retry="emit('retry', $event)"
                 />
-            </div>
-        </div>
-    </div>
+                <p
+                    v-if="messages.length > 0 && !hasPendingMessage"
+                    text-center body-11-regular text-tertiary
+                >
+                    As respostas podem conter erros. Verifique documentos originais.
+                </p>
+            </template>
+        </TelaChatConversationContent>
+    </TelaChatConversation>
 </template>

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

@@ -2,6 +2,12 @@ import type { Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     messages: readonly Message[];
     loading?: boolean;
+    /**
+     * Where the list renders: `page`/`widget` sit inside a `TelaChatBody` that
+     * owns the conversation padding; `mobile` renders standalone and keeps its
+     * own spacing. Defaults to `page`.
+     */
+    variant?: 'page' | 'widget' | 'mobile';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;

package/dist/runtime/messages/components/chat-model-selector.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { chatModelOptions } from "../../types/schemas/chat/ui.js";
-import AnthropicIcon from "../../shared/components/icons/anthropic.vue";
-import GeminiIcon from "../../shared/components/icons/gemini.vue";
-import OpenAiIcon from "../../shared/components/icons/openai.vue";
+import TelaChatIconsAnthropic from "@meistrari/tela-build/components/tela/chat/icons/anthropic.vue";
+import TelaChatIconsGemini from "@meistrari/tela-build/components/tela/chat/icons/gemini.vue";
+import TelaChatIconsOpenai from "@meistrari/tela-build/components/tela/chat/icons/openai.vue";
 defineProps({
   disabled: { type: Boolean, required: false }
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
 const providerIcons = {
-  Anthropic: AnthropicIcon,
-  OpenAI: OpenAiIcon,
-  Google: GeminiIcon
+  Anthropic: TelaChatIconsAnthropic,
+  OpenAI: TelaChatIconsOpenai,
+  Google: TelaChatIconsGemini
 };
 const options = chatModelOptions.map((option) => ({
   value: option.value,
@@ -30,27 +30,15 @@ const tabLabels = {
   cheap: "Econ\xF4micos",
   multimodal: "Multimodal"
 };
-function getTabLabel(tab) {
-  return tabLabels[tab] ?? tab;
-}
 </script>
 
 <template>
-    <TelaCombobox
-        :model-value="model ?? void 0"
+    <TelaChatModelSelector
+        v-model="model"
         :options="options"
-        :class="disabled && 'opacity-50 pointer-events-none'"
+        :disabled="disabled"
         placeholder="Modelo"
         input-placeholder="Buscar modelo..."
-        :get-tab-label="getTabLabel"
-        trigger-class="border-none!"
-        label-class="!text-14px !leading-18px !font-normal -tracking-0.01em! !text-gray-500"
-        icon-class="scale-110 mr-1px !text-gray-500"
-        label-item-class="!text-gray-500"
-        @update:model-value="model = $event ?? null"
+        :tab-labels="tabLabels"
     />
 </template>
-
-<style>
-[role=option] svg{color:#6b7280}
-</style>

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

@@ -5,7 +5,6 @@ import ChatDocSdkWidget from "../widgets/chat-doc-sdk-widget.vue";
 import ChatGenericToolWidget from "../widgets/chat-generic-tool-widget.vue";
 import ChatGrepWidget from "../widgets/chat-grep-widget.vue";
 import ChatReadWidget from "../widgets/chat-read-widget.vue";
-import ChatReasoningStepItem from "./chat-reasoning-step-item.vue";
 import ChatTelaSkillWidget from "../widgets/chat-tela-skill-widget.vue";
 import ChatThinkingWidget from "../widgets/chat-thinking-widget.vue";
 import ChatWebSearchWidget from "../widgets/chat-web-search-widget.vue";
@@ -64,7 +63,7 @@ const isTitleSameAsContent = computed(() => {
 </script>
 
 <template>
-    <ChatReasoningStepItem
+    <TelaChatReasoningStep
         :title="stepTitle"
         :icon="stepIcon"
         :is-first="isFirst"
@@ -98,5 +97,5 @@ const isTitleSameAsContent = computed(() => {
                 />
             </div>
         </div>
-    </ChatReasoningStepItem>
+    </TelaChatReasoningStep>
 </template>