@meistrari/chat-nuxt 3.9.2 → 3.10.0

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

@@ -8,7 +8,10 @@ import ChatMobileShell from "./mobile/chat-mobile-shell.vue";
 import { normalizeConversationId } from "../../conversations/scope";
 import { resolveChatFeatures } from "../feature-config";
 import { resolveConversationCreator } from "../../conversations/creator";
-import { resolveTelaAgentInputs, useChat } from "../../messages/composables/chat";
+import {
+  resolveTelaAgentInputs,
+  useChat
+} from "../../messages/composables/chat";
 import { useChatAction } from "../../messages/composables/chat-action";
 import { useChatApi } from "../../shared/composables/chat-api";
 import { useConversationFiles } from "../../files/composables/conversation-files";
@@ -30,17 +33,22 @@ const props = defineProps({
   hideSidebar: { type: Boolean, required: false, default: true },
   sidebar: { type: Object, required: false },
   hideSettings: { type: Boolean, required: false, default: false },
-  hideFolderHint: { type: Boolean, required: false, default: false },
+  compact: { type: Boolean, required: false, default: false },
+  suggestions: { type: [Array, null], required: false },
   user: { type: [Object, null], required: false },
   features: { type: Object, required: false }
 });
-const emit = defineEmits(["update:conversationId"]);
+const emit = defineEmits(["update:conversationId", "update:conversationTitle"]);
 const sidebarPosition = computed(() => props.sidebar?.position ?? "left");
 const sidebarWidth = computed(() => props.sidebar?.width ?? 240);
-const sidebarBottomHeight = computed(() => Math.min(100, Math.max(0, props.sidebar?.bottomHeight ?? 50)));
+const sidebarBottomHeight = computed(
+  () => Math.min(100, Math.max(0, props.sidebar?.bottomHeight ?? 50))
+);
 const sidebarCollapsible = computed(() => props.sidebar?.collapsible ?? false);
 const isSidebarCollapsed = ref(props.sidebar?.defaultCollapsed ?? false);
-const sidebarCollapsed = computed(() => sidebarCollapsible.value && isSidebarCollapsed.value);
+const sidebarCollapsed = computed(
+  () => sidebarCollapsible.value && isSidebarCollapsed.value
+);
 const sidebarToggleIcon = computed(() => {
   const pointsRight = sidebarPosition.value === "right" ? !sidebarCollapsed.value : sidebarCollapsed.value;
   return pointsRight ? "i-ph-caret-right" : "i-ph-caret-left";
@@ -54,12 +62,32 @@ const chatAction = useChatAction();
 const { user: authUser, activeOrganization, logout } = useChatAuth();
 const { getMember, getMemberImage } = useWorkspaceMembers();
 const statusToast = useStatusToast();
-const { conversations, loading: conversationsLoading, fetchConversations, createConversation, deleteConversation, renameConversation, updateConversationModel, duplicateConversation, moveConversationToGroup, updateConversationInList } = useConversations();
+const {
+  conversations,
+  loading: conversationsLoading,
+  fetchConversations,
+  createConversation,
+  deleteConversation,
+  renameConversation,
+  updateConversationModel,
+  duplicateConversation,
+  moveConversationToGroup,
+  updateConversationInList
+} = useConversations();
 const { settings: workspaceSettingsState, fetchSettings } = useWorkspaceSettings();
-const { metadata: telaAgentMetadata, loading: telaAgentMetadataLoading, fetchAgentMetadata } = useTelaAgentMetadata();
-const { summary: workspaceAgentSummary, fetchSummary: fetchWorkspaceAgentSummary } = useWorkspaceAgentSummary();
+const {
+  metadata: telaAgentMetadata,
+  loading: telaAgentMetadataLoading,
+  fetchAgentMetadata
+} = useTelaAgentMetadata();
+const {
+  summary: workspaceAgentSummary,
+  fetchSummary: fetchWorkspaceAgentSummary
+} = useWorkspaceAgentSummary();
 const isTelaAgentMode = computed(() => !!embedConfig?.telaAgentId.value);
-const hasConfiguredTelaAgentInputs = computed(() => embedConfig?.telaAgentInputs?.value !== void 0 && embedConfig?.telaAgentInputs?.value !== null);
+const hasConfiguredTelaAgentInputs = computed(
+  () => embedConfig?.telaAgentInputs?.value !== void 0 && embedConfig?.telaAgentInputs?.value !== null
+);
 const shouldLoadTelaAgentMetadata = computed(() => isTelaAgentMode.value);
 const telaAgentInputSchema = computed(
   () => hasConfiguredTelaAgentInputs.value ? null : isTelaAgentMode.value ? telaAgentMetadata.value?.inputSchema ?? [] : null
@@ -80,7 +108,12 @@ const effectiveWorkspaceSettings = computed(() => {
   return embedConfig?.workspaceSettings.value !== void 0 ? embedConfig.workspaceSettings.value : workspaceSettingsState.value;
 });
 const { closePanel: closeFilesPanel } = useConversationFilesPanel();
-const { isOpen: isPreviewPanelOpen, panelWidth: previewPanelWidth, currentFile: currentPreviewFile, closePreview } = useFilePreviewPanel();
+const {
+  isOpen: isPreviewPanelOpen,
+  panelWidth: previewPanelWidth,
+  currentFile: currentPreviewFile,
+  closePreview
+} = useFilePreviewPanel();
 const { isOpen: isCitationPanelOpen } = useCitationPanel();
 const activeConversationId = ref(
   normalizeConversationId(props.conversationId) ?? normalizeConversationId(props.initialConversationId)
@@ -96,6 +129,16 @@ const resolvedFeatures = computed(() => resolveChatFeatures(props.features));
 const dropZoneRef = ref(null);
 const activeTab = ref("chat");
 const messageInputRef = ref(null);
+const PROMPT_INPUT_HINTS = [
+  { icon: "i-ph-at-bold", label: "Para mencionar arquivos" },
+  { char: "/", label: "Para acionar skills" }
+];
+const resolvedSuggestions = computed(
+  () => props.suggestions ?? []
+);
+function applySuggestion(prompt) {
+  messageInputRef.value?.setDraft(prompt);
+}
 const breakpoints = useBreakpoints({ mobile: CHAT_MOBILE_BREAKPOINT });
 const isMobile = breakpoints.smaller("mobile");
 const drawerOpen = ref(false);
@@ -133,8 +176,9 @@ const selectedModel = computed({
       const previousModel = conversation.model;
       setConversationModel(value);
       void updateConversationModel(conversation.id, value).then((updated) => {
-        if (!updated && currentConversation.value?.id === conversation.id && currentConversation.value.model === value)
+        if (!updated && currentConversation.value?.id === conversation.id && currentConversation.value.model === value) {
           setConversationModel(previousModel);
+        }
       });
     }
   }
@@ -154,10 +198,16 @@ const mobilePreviewFile = computed(() => {
     size: file.fileSize
   };
 });
-const visibleTelaAgentInputSchema = computed(() => !hasMessages.value ? telaAgentInputSchema.value : null);
-const visibleTelaAgentInputSchemaLoading = computed(() => !hasMessages.value && isTelaAgentMode.value && !hasConfiguredTelaAgentInputs.value && telaAgentMetadataLoading.value);
+const visibleTelaAgentInputSchema = computed(
+  () => !hasMessages.value ? telaAgentInputSchema.value : null
+);
+const visibleTelaAgentInputSchemaLoading = computed(
+  () => !hasMessages.value && isTelaAgentMode.value && !hasConfiguredTelaAgentInputs.value && telaAgentMetadataLoading.value
+);
 const visibleConversations = computed(
-  () => conversations.value.filter((conversation) => conversation.title || conversation.id === activeConversationId.value)
+  () => conversations.value.filter(
+    (conversation) => conversation.title || conversation.id === activeConversationId.value
+  )
 );
 function syncConversationId(nextConversationId) {
   activeConversationId.value = normalizeConversationId(nextConversationId);
@@ -182,7 +232,10 @@ async function ensureConversationLoaded(conversationId) {
   try {
     await loadConversation(conversationId);
     if (currentConversation.value?.id !== conversationId) {
-      statusToast.update({ text: "Erro ao carregar conversa", icon: "i-ph-warning" });
+      statusToast.update({
+        text: "Erro ao carregar conversa",
+        icon: "i-ph-warning"
+      });
       return;
     }
     startPolling();
@@ -215,29 +268,32 @@ async function openConversation(nextConversationId) {
   updateConversationId(normalizedConversationId);
   await ensureConversationLoaded(normalizedConversationId);
 }
-watch(() => props.conversationId, async (nextConversationId) => {
-  if (nextConversationId === void 0) {
-    return;
-  }
-  const normalizedConversationId = normalizeConversationId(nextConversationId);
-  if (normalizedConversationId) {
-    clearPendingConversationGroup();
-  }
-  if (!isReady.value) {
+watch(
+  () => props.conversationId,
+  async (nextConversationId) => {
+    if (nextConversationId === void 0) {
+      return;
+    }
+    const normalizedConversationId = normalizeConversationId(nextConversationId);
+    if (normalizedConversationId) {
+      clearPendingConversationGroup();
+    }
+    if (!isReady.value) {
+      syncConversationId(normalizedConversationId);
+      return;
+    }
+    if (normalizedConversationId === activeConversationId.value && currentConversation.value?.id === normalizedConversationId) {
+      return;
+    }
+    if (!normalizedConversationId) {
+      resetConversation(false);
+      return;
+    }
     syncConversationId(normalizedConversationId);
-    return;
-  }
-  if (normalizedConversationId === activeConversationId.value && currentConversation.value?.id === normalizedConversationId) {
-    return;
-  }
-  if (!normalizedConversationId) {
-    resetConversation(false);
-    return;
+    closePreview();
+    await ensureConversationLoaded(normalizedConversationId);
   }
-  syncConversationId(normalizedConversationId);
-  closePreview();
-  await ensureConversationLoaded(normalizedConversationId);
-});
+);
 onMounted(async () => {
   void fetchConversations();
   if (shouldLoadTelaAgentMetadata.value) {
@@ -277,23 +333,34 @@ const isSettingsOutdated = computed(() => {
   if (!rawAppliedAt)
     return false;
   const appliedAt = new Date(rawAppliedAt).getTime();
-  const updatedAt = new Date(effectiveWorkspaceSettings.value.updatedAt).getTime();
+  const updatedAt = new Date(
+    effectiveWorkspaceSettings.value.updatedAt
+  ).getTime();
   return appliedAt < updatedAt;
 });
 const isBannerDismissed = computed(
   () => currentConversation.value ? dismissedChats.value.has(currentConversation.value.id) : false
 );
-const showOutdatedBanner = computed(() => isSettingsOutdated.value && !isBannerDismissed.value);
-const showOutdatedBadge = computed(() => isSettingsOutdated.value && isBannerDismissed.value);
+const showOutdatedBanner = computed(
+  () => isSettingsOutdated.value && !isBannerDismissed.value
+);
+const showOutdatedBadge = computed(
+  () => isSettingsOutdated.value && isBannerDismissed.value
+);
 function dismissOutdatedBanner() {
   if (!currentConversation.value)
     return;
   dismissedChats.value.delete(currentConversation.value.id);
   dismissedChats.value.add(currentConversation.value.id);
   const nextDismissedChats = [...dismissedChats.value];
-  dismissedChats.value = new Set(nextDismissedChats.slice(-MAX_DISMISSED_CHAT_IDS));
+  dismissedChats.value = new Set(
+    nextDismissedChats.slice(-MAX_DISMISSED_CHAT_IDS)
+  );
   try {
-    localStorage.setItem(dismissedStorageKey.value, JSON.stringify([...dismissedChats.value]));
+    localStorage.setItem(
+      dismissedStorageKey.value,
+      JSON.stringify([...dismissedChats.value])
+    );
   } catch {
   }
 }
@@ -306,7 +373,10 @@ const displayTitle = computed(() => {
   return currentConversation.value?.title ?? "";
 });
 watch(
-  () => [currentConversation.value?.id ?? null, currentConversation.value?.title ?? null],
+  () => [
+    currentConversation.value?.id ?? null,
+    currentConversation.value?.title ?? null
+  ],
   ([conversationId, conversationTitle], [previousConversationId, previousTitle]) => {
     if (conversationId !== previousConversationId) {
       optimisticTitle.value = null;
@@ -320,6 +390,13 @@ watch(
     }
   }
 );
+watch(
+  () => currentConversation.value?.title ?? null,
+  (title) => {
+    emit("update:conversationTitle", title);
+  },
+  { immediate: true }
+);
 const currentUser = computed(() => props.user ?? authUser.value ?? null);
 const conversationCreator = computed(
   () => resolveConversationCreator(currentConversation.value?.userId, {
@@ -329,7 +406,10 @@ const conversationCreator = computed(
 );
 async function handleSend(content, files, agentInputs) {
   let createdConversationId = null;
-  const resolvedAgentInputs = resolveTelaAgentInputs(agentInputs, embedConfig?.telaAgentInputs?.value);
+  const resolvedAgentInputs = resolveTelaAgentInputs(
+    agentInputs,
+    embedConfig?.telaAgentInputs?.value
+  );
   if (!activeConversationId.value || !currentConversation.value) {
     const conversation = await createConversation({
       model: selectedModel.value,
@@ -349,7 +429,11 @@ async function handleSend(content, files, agentInputs) {
   }
   if (!currentConversation.value)
     return;
-  const sendPromise = sendMessage(content, files.length > 0 ? files : void 0, resolvedAgentInputs);
+  const sendPromise = sendMessage(
+    content,
+    files.length > 0 ? files : void 0,
+    resolvedAgentInputs
+  );
   if (createdConversationId) {
     updateConversationId(createdConversationId);
   }
@@ -387,8 +471,12 @@ async function handleSignout() {
   chatAction.emit("signout");
   await logout();
 }
-const workspaceName = computed(() => activeOrganization.value?.name ?? "Workspace");
-const workspaceLogo = computed(() => activeOrganization.value?.logo ?? void 0);
+const workspaceName = computed(
+  () => activeOrganization.value?.name ?? "Workspace"
+);
+const workspaceLogo = computed(
+  () => activeOrganization.value?.logo ?? void 0
+);
 function handleTabChange(tab) {
   activeTab.value = tab;
   if (tab === "chat")
@@ -398,7 +486,9 @@ const isEditing = ref(false);
 const editTitle = ref("");
 const justStartedEditing = ref(false);
 const showDebugModal = ref(false);
-const debugSessionId = computed(() => currentConversation.value?.threadSessionId ?? "Sess\xE3o ainda n\xE3o criada");
+const debugSessionId = computed(
+  () => currentConversation.value?.threadSessionId ?? "Sess\xE3o ainda n\xE3o criada"
+);
 async function copyDebugInfo() {
   const conversation = currentConversation.value;
   const conversationId = conversation?.id ?? activeConversationId.value;
@@ -422,7 +512,10 @@ async function copyDebugInfo() {
     await navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2));
     statusToast.update({ text: "Dados de debug copiados", icon: "i-ph-check" });
   } catch {
-    statusToast.update({ text: "Erro ao copiar dados de debug", icon: "i-ph-warning" });
+    statusToast.update({
+      text: "Erro ao copiar dados de debug",
+      icon: "i-ph-warning"
+    });
   }
 }
 function startEditing() {
@@ -439,7 +532,10 @@ async function saveTitle() {
   const trimmed = editTitle.value.trim();
   if (trimmed && trimmed !== currentConversation.value?.title && currentConversation.value) {
     optimisticTitle.value = trimmed;
-    const success = await renameConversation(currentConversation.value.id, trimmed);
+    const success = await renameConversation(
+      currentConversation.value.id,
+      trimmed
+    );
     if (!success)
       optimisticTitle.value = null;
   }
@@ -510,27 +606,48 @@ async function handleDelete() {
   sidebarCollapsed ? 'chat-sidebar--collapsed' : ''
 ]"
             :style="{ '--chat-sidebar-width': `${sidebarWidth}px` }"
-            h-full flex-shrink-0 relative
+            h-full
+            flex-shrink-0
+            relative
         >
             <div class="chat-sidebar__clip">
                 <div
                     class="chat-sidebar__panel"
                     :inert="sidebarCollapsed || void 0"
-                    h-full flex="~ col"
+                    h-full
+                    flex="~ col"
                     bg-neutral-50
                     :style="{ width: `${sidebarWidth}px` }"
-                    :class="sidebarPosition === 'right' ? 'border-l-0.5px border-l-neutral-200' : 'border-r-0.5px border-r-neutral-200'"
+                    :class="
+  sidebarPosition === 'right' ? 'border-l-0.5px border-l-neutral-200' : 'border-r-0.5px border-r-neutral-200'
+"
                 >
                     <div px-12px pt-16px pb-8px flex gap-8px>
                         <button
-                            flex items-center justify-center gap-6px
-                            h-32px px-12px flex-1 min-w-0
-                            bg-white b=".5px neutral-300" rounded-10px
-                            hover:bg-neutral-50 transition-colors cursor-pointer
+                            flex
+                            items-center
+                            justify-center
+                            gap-6px
+                            h-32px
+                            px-12px
+                            flex-1
+                            min-w-0
+                            bg-white
+                            b=".5px neutral-300"
+                            rounded-10px
+                            hover:bg-neutral-50
+                            transition-colors
+                            cursor-pointer
                             @click="() => handleNewConversation()"
                         >
                             <span i-ph-chat-circle text-12px text-gray-900 />
-                            <span text-14px font-semibold text-neutral-900 tracking="-.15px" leading-18px>
+                            <span
+                                text-14px
+                                font-semibold
+                                text-neutral-900
+                                tracking="-.15px"
+                                leading-18px
+                            >
                                 Nova conversa
                             </span>
                         </button>
@@ -538,9 +655,13 @@ async function handleDelete() {
                     </div>
 
                     <div
-                        min-h-0 overflow-y-auto px-4px
+                        min-h-0
+                        overflow-y-auto
+                        px-4px
                         :class="$slots['sidebar-bottom'] ? '' : 'flex-1'"
-                        :style="$slots['sidebar-bottom'] ? { flexGrow: 100 - sidebarBottomHeight, flexBasis: 0 } : void 0"
+                        :style="
+  $slots['sidebar-bottom'] ? { flexGrow: 100 - sidebarBottomHeight, flexBasis: 0 } : void 0
+"
                     >
                         <ChatConversationList
                             :conversations="visibleConversations"
@@ -550,13 +671,13 @@ async function handleDelete() {
                             :reset-conversation="handleNewConversation"
                             :start-conversation="handleNewConversation"
                             :loading="conversationsLoading"
-                            :hide-folder-hint="hideFolderHint"
                         />
                     </div>
 
                     <div
                         v-if="$slots['sidebar-bottom']"
-                        min-h-0 overflow-y-auto
+                        min-h-0
+                        overflow-y-auto
                         b-t=".5px neutral-200"
                         :style="{ flexGrow: sidebarBottomHeight, flexBasis: 0 }"
                     >
@@ -569,7 +690,9 @@ async function handleDelete() {
                 v-if="sidebarCollapsible"
                 type="button"
                 class="chat-sidebar__toggle"
-                :aria-label="sidebarCollapsed ? 'Expandir conversas' : 'Recolher conversas'"
+                :aria-label="
+  sidebarCollapsed ? 'Expandir conversas' : 'Recolher conversas'
+"
                 :aria-expanded="!sidebarCollapsed"
                 @click="toggleSidebarCollapsed"
             >
@@ -578,9 +701,14 @@ async function handleDelete() {
         </div>
 
         <!-- Main content -->
-        <div flex-1 h-full flex="~ col" overflow-hidden relative style="--chat-panel-offset: 0px">
-            <div v-if="loading && currentConversation" class="loading-bar" />
-
+        <div
+            flex-1
+            h-full
+            flex="~ col"
+            overflow-hidden
+            relative
+            style="--chat-panel-offset: 0px"
+        >
             <ChatMobileShell
                 v-if="isMobile"
                 v-model:drawer-open="drawerOpen"
@@ -602,8 +730,8 @@ async function handleDelete() {
                 :has-pending-message="hasPendingMessage"
                 :hide-settings="hideSettings"
                 :hide-sidebar="hideSidebar"
-                :hide-folder-hint="hideFolderHint"
                 :is-editing="isEditing"
+                :suggestions="resolvedSuggestions"
                 :loading="loading"
                 :messages="messages"
                 :agent-input-schema="visibleTelaAgentInputSchema"
@@ -637,10 +765,7 @@ async function handleDelete() {
                 @tab-change="handleTabChange"
             >
                 <template #loading>
-                    <ChatMessageList
-                        :messages="[]"
-                        loading
-                    />
+                    <ChatMessageList :messages="[]" loading variant="mobile" />
                     <ChatMessageInput
                         v-model:selected-model="selectedModel"
                         :disabled="true"
@@ -651,43 +776,54 @@ async function handleDelete() {
                 </template>
 
                 <template #empty>
-                    <div
-                        flex-1 flex="~ col" items-center justify-center gap-40px px-24px
-                        :class="currentConversation ? 'pt-64px' : ''"
+                    <TelaChatEmptyState
+                        compact
+                        :title="`Ol\xE1, ${currentUser?.name?.split(' ')[0] ?? 'usu\xE1rio'}`"
+                        description="Como posso te ajudar hoje?"
                     >
-                        <div flex="~ col" items-center gap-8px text-center>
-                            <h1 text-24px font-semibold text-gray-800 leading-28px tracking="-.8px">
-                                Olá, {{ currentUser?.name?.split(" ")[0] ?? "usu\xE1rio" }}
-                            </h1>
-                            <p text-16px text-gray-500 leading-20px tracking="-.2px">
-                                Como posso te ajudar hoje?
-                            </p>
-                        </div>
-                        <ChatMessageInput
-                            ref="messageInputRef"
-                            v-model:selected-model="selectedModel"
-                            :disabled="hasPendingMessage"
-                            :loading="hasPendingMessage"
-                            :creator-name="currentUser?.name ?? void 0"
-                            :creator-email="currentConversation?.createdBy ?? currentUser?.email ?? void 0"
-                            :creator-image="currentUser?.image ?? void 0"
-                            :messages="messages"
-                            :conversation-files="conversationFiles"
-                            :workspace-settings="effectiveWorkspaceSettings"
-                            :agent-input-schema="visibleTelaAgentInputSchema"
-                            :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
-                            :agent-skills="agentSkills"
-                            :agent-context-files="agentContextFiles"
-                            :show-cancel-button="resolvedFeatures.showCancelButton"
-                            centered
-                            @send="handleSend"
-                            @cancel="cancelConversation"
-                        />
-                    </div>
+                        <TelaChatSuggestions v-if="resolvedSuggestions.length">
+                            <TelaChatSuggestion
+                                v-for="suggestion in resolvedSuggestions"
+                                :key="suggestion.title"
+                                :suggestion="suggestion.prompt"
+                                @click="applySuggestion($event)"
+                            >
+                                {{ suggestion.title }}
+                            </TelaChatSuggestion>
+                        </TelaChatSuggestions>
+
+                        <TelaChatPromptInputHints size="sm" :hints="PROMPT_INPUT_HINTS" />
+
+                        <template #input>
+                            <ChatMessageInput
+                                ref="messageInputRef"
+                                v-model:selected-model="selectedModel"
+                                :disabled="hasPendingMessage"
+                                :loading="hasPendingMessage"
+                                :creator-name="currentUser?.name ?? void 0"
+                                :creator-email="
+  currentConversation?.createdBy ?? currentUser?.email ?? void 0
+"
+                                :creator-image="currentUser?.image ?? void 0"
+                                :messages="messages"
+                                :conversation-files="conversationFiles"
+                                :workspace-settings="effectiveWorkspaceSettings"
+                                :agent-input-schema="visibleTelaAgentInputSchema"
+                                :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                                :agent-skills="agentSkills"
+                                :agent-context-files="agentContextFiles"
+                                :show-cancel-button="resolvedFeatures.showCancelButton"
+                                centered
+                                @send="handleSend"
+                                @cancel="cancelConversation"
+                            />
+                        </template>
+                    </TelaChatEmptyState>
                 </template>
 
                 <ChatMessageList
                     :messages="messages"
+                    variant="mobile"
                     @retry="handleRetry"
                 />
                 <ChatMessageInput
@@ -696,7 +832,9 @@ async function handleDelete() {
                     :disabled="hasPendingMessage"
                     :loading="hasPendingMessage"
                     :creator-name="currentUser?.name ?? void 0"
-                    :creator-email="currentConversation?.createdBy ?? currentUser?.email ?? void 0"
+                    :creator-email="
+  currentConversation?.createdBy ?? currentUser?.email ?? void 0
+"
                     :creator-image="currentUser?.image ?? void 0"
                     :messages="messages"
                     :conversation-files="conversationFiles"
@@ -710,13 +848,10 @@ async function handleDelete() {
                     @send="handleSend"
                     @cancel="cancelConversation"
                 />
-                <p text-center text-12px font-400 leading-16px text-tertiary my-8px>
-                    As respostas podem conter erros. Verifique documentos originais.
-                </p>
             </ChatMobileShell>
 
             <ChatTopbar
-                v-if="currentConversation && !isMobile"
+                v-if="currentConversation && !isMobile && !compact"
                 :title="displayTitle"
                 :creator-name="conversationCreator?.name ?? void 0"
                 :creator-email="currentConversation.createdBy ?? void 0"
@@ -745,7 +880,12 @@ async function handleDelete() {
 
             <div
                 v-if="!isMobile && showOutdatedBanner"
-                mt-64px flex items-center h-36px px-12px bg="#FFF1D8"
+                flex
+                items-center
+                h-36px
+                px-12px
+                bg="#FFF1D8"
+                :class="compact ? '' : 'mt-64px'"
             >
                 <div flex items-center gap-8px flex-1>
                     <span i-ph-warning text-12px text-gray-900 shrink-0 />
@@ -758,17 +898,27 @@ async function handleDelete() {
                 </div>
                 <div flex items-center gap-24px shrink-0>
                     <button
-                        flex items-center gap-4px px-10px py-4px
-                        b=".5px gray-500" rounded-8px
-                        class="hover:bg-white/50" transition-colors
+                        flex
+                        items-center
+                        gap-4px
+                        px-10px
+                        py-4px
+                        b=".5px gray-500"
+                        rounded-8px
+                        class="hover:bg-white/50"
+                        transition-colors
                         @click="() => handleNewConversation()"
                     >
                         <span i-ph-plus text-12px text-gray-900 />
                         <span text-12px font-580 text-gray-900 leading-16px>Nova conversa</span>
                     </button>
                     <button
-                        flex items-center justify-center
-                        class="hover:bg-black/5" transition-colors rounded-4px
+                        flex
+                        items-center
+                        justify-center
+                        class="hover:bg-black/5"
+                        transition-colors
+                        rounded-4px
                         @click="dismissOutdatedBanner"
                     >
                         <span i-ph-x text-12px text-gray-900 />
@@ -776,11 +926,17 @@ async function handleDelete() {
                 </div>
             </div>
 
-            <template v-if="!isMobile && activeTab === 'files' && currentConversation">
+            <template
+                v-if="!isMobile && activeTab === 'files' && currentConversation"
+            >
                 <ChatFilesView :conversation-id="currentConversation.id" />
             </template>
 
-            <template v-else-if="!isMobile && activeTab === 'usage' && resolvedFeatures.showUsageTab && currentConversation">
+            <template
+                v-else-if="
+  !isMobile && activeTab === 'usage' && resolvedFeatures.showUsageTab && currentConversation
+"
+            >
                 <ChatUsageView
                     :conversation-id="currentConversation.id"
                     :created-at="currentConversation.createdAt"
@@ -788,10 +944,14 @@ async function handleDelete() {
                 />
             </template>
 
-            <template v-else-if="!isMobile && loading">
+            <TelaChatBody
+                v-else-if="!isMobile && loading"
+                :variant="compact ? 'widget' : 'page'"
+            >
                 <ChatMessageList
                     :messages="[]"
                     loading
+                    :variant="compact ? 'widget' : 'page'"
                 />
                 <ChatMessageInput
                     v-model:selected-model="selectedModel"
@@ -800,28 +960,43 @@ async function handleDelete() {
                     :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
                     :show-cancel-button="resolvedFeatures.showCancelButton"
                 />
-            </template>
+            </TelaChatBody>
 
-            <template v-else-if="!isMobile && !hasMessages">
-                <div
-                    flex-1 flex="~ col" items-center justify-center gap-40px px-24px
-                    :class="currentConversation ? 'pt-64px' : ''"
-                >
-                    <div flex="~ col" items-center gap-8px text-center>
-                        <h1 text-24px font-semibold text-gray-800 leading-28px tracking="-.8px">
-                            Olá, {{ currentUser?.name?.split(" ")[0] ?? "usu\xE1rio" }}
-                        </h1>
-                        <p text-16px text-gray-500 leading-20px tracking="-.2px">
-                            Como posso te ajudar hoje?
-                        </p>
-                    </div>
+            <!-- Outside TelaChatBody on purpose: the body pins any [data-chat-prompt-input]
+                 to its bottom edge, which would tear the input out of the empty-state stack. -->
+            <TelaChatEmptyState
+                v-else-if="!isMobile && !hasMessages"
+                :compact="compact"
+                :title="`Ol\xE1, ${currentUser?.name?.split(' ')[0] ?? 'usu\xE1rio'}`"
+                description="Como posso te ajudar hoje?"
+                :class="currentConversation && !compact ? 'pt-64px' : ''"
+            >
+                <TelaChatSuggestions v-if="resolvedSuggestions.length">
+                    <TelaChatSuggestion
+                        v-for="suggestion in resolvedSuggestions"
+                        :key="suggestion.title"
+                        :suggestion="suggestion.prompt"
+                        @click="applySuggestion($event)"
+                    >
+                        {{ suggestion.title }}
+                    </TelaChatSuggestion>
+                </TelaChatSuggestions>
+
+                <TelaChatPromptInputHints
+                    :size="compact ? 'sm' : 'md'"
+                    :hints="PROMPT_INPUT_HINTS"
+                />
+
+                <template #input>
                     <ChatMessageInput
                         ref="messageInputRef"
                         v-model:selected-model="selectedModel"
                         :disabled="hasPendingMessage"
                         :loading="hasPendingMessage"
                         :creator-name="currentUser?.name ?? void 0"
-                        :creator-email="currentConversation?.createdBy ?? currentUser?.email ?? void 0"
+                        :creator-email="
+  currentConversation?.createdBy ?? currentUser?.email ?? void 0
+"
                         :creator-image="currentUser?.image ?? void 0"
                         :messages="messages"
                         :conversation-files="conversationFiles"
@@ -835,12 +1010,16 @@ async function handleDelete() {
                         @send="handleSend"
                         @cancel="cancelConversation"
                     />
-                </div>
-            </template>
+                </template>
+            </TelaChatEmptyState>
 
-            <template v-else-if="!isMobile">
+            <TelaChatBody
+                v-else-if="!isMobile"
+                :variant="compact ? 'widget' : 'page'"
+            >
                 <ChatMessageList
                     :messages="messages"
+                    :variant="compact ? 'widget' : 'page'"
                     @retry="handleRetry"
                 />
                 <ChatMessageInput
@@ -849,7 +1028,9 @@ async function handleDelete() {
                     :disabled="hasPendingMessage"
                     :loading="hasPendingMessage"
                     :creator-name="currentUser?.name ?? void 0"
-                    :creator-email="currentConversation?.createdBy ?? currentUser?.email ?? void 0"
+                    :creator-email="
+  currentConversation?.createdBy ?? currentUser?.email ?? void 0
+"
                     :creator-image="currentUser?.image ?? void 0"
                     :messages="messages"
                     :conversation-files="conversationFiles"
@@ -863,10 +1044,7 @@ async function handleDelete() {
                     @send="handleSend"
                     @cancel="cancelConversation"
                 />
-                <p text-center text-12px font-400 leading-16px text-tertiary my-8px>
-                    As respostas podem conter erros. Verifique documentos originais.
-                </p>
-            </template>
+            </TelaChatBody>
 
             <Transition name="fade">
                 <div
@@ -874,10 +1052,23 @@ async function handleDelete() {
                     class="absolute inset-0 z-50 flex items-center justify-center bg-white/90 backdrop-blur-sm"
                 >
                     <div
-                        flex="~ col" items-center gap-16px p-40px rounded-24px
-                        border="2 dashed gray-300" bg-gray-50
+                        flex="~ col"
+                        items-center
+                        gap-16px
+                        p-40px
+                        rounded-24px
+                        border="2 dashed gray-300"
+                        bg-gray-50
                     >
-                        <div w-64px h-64px rounded-full bg-gray-100 flex items-center justify-center>
+                        <div
+                            w-64px
+                            h-64px
+                            rounded-full
+                            bg-gray-100
+                            flex
+                            items-center
+                            justify-center
+                        >
                             <span i-ph-upload-simple text-32px text-gray-500 />
                         </div>
                         <div text-center>
@@ -901,7 +1092,8 @@ async function handleDelete() {
                 @confirm="handleDelete"
                 @cancel="showDeleteModal = false"
             >
-                Tem certeza que deseja excluir esta conversa? Esta ação não pode ser desfeita.
+                Tem certeza que deseja excluir esta conversa? Esta ação não pode ser
+                desfeita.
             </TelaConfirmationModal>
 
             <TelaModal
@@ -918,11 +1110,13 @@ async function handleDelete() {
                             Conversation Id
                         </p>
                         <div
-                            px-12px py-10px
+                            px-12px
+                            py-10px
                             rounded-8px
                             bg-gray-50
                             justify-between
-                            flex items-center
+                            flex
+                            items-center
                             border="0.5px gray-200"
                         >
                             <p text-13px text-gray-700 break-all leading-18px>
@@ -936,11 +1130,13 @@ async function handleDelete() {
                             Session Id
                         </p>
                         <div
-                            px-12px py-10px
+                            px-12px
+                            py-10px
                             rounded-8px
                             bg-gray-50
                             justify-between
-                            flex items-center
+                            flex
+                            items-center
                             border="0.5px gray-200"
                         >
                             <p text-13px text-gray-700 break-all leading-18px>
@@ -955,7 +1151,13 @@ async function handleDelete() {
                         <p text-12px font-400 leading-16px text-tertiary>
                             Inclui os ids da conversa e os links de debug no Datadog e no Tela
                         </p>
-                        <TelaButton variant="primary" icon="i-ph-copy" leading flex-shrink-0 @click="copyDebugInfo">
+                        <TelaButton
+                            variant="primary"
+                            icon="i-ph-copy"
+                            leading
+                            flex-shrink-0
+                            @click="copyDebugInfo"
+                        >
                             Copiar dados completos
                         </TelaButton>
                     </div>
@@ -971,7 +1173,9 @@ async function handleDelete() {
 
         <div
             v-if="isPreviewPanelOpen && !isMobile"
-            h-full flex-shrink-0 pt-64px
+            h-full
+            flex-shrink-0
+            pt-64px
             :style="{ width: `${previewPanelWidth}px` }"
         >
             <FilePreviewPanel />
@@ -979,14 +1183,19 @@ async function handleDelete() {
 
         <div
             v-if="isCitationPanelOpen && !isMobile"
-            h-full flex-shrink-0 pt-64px
+            h-full
+            flex-shrink-0
+            pt-64px
             w-440px
         >
             <CitationDocumentPanel />
         </div>
         <div
             v-else-if="isCitationPanelOpen && isMobile"
-            fixed inset-0 z-50 bg-neutral-50
+            fixed
+            inset-0
+            z-50
+            bg-neutral-50
         >
             <CitationDocumentPanel />
         </div>
@@ -994,5 +1203,9 @@ async function handleDelete() {
 </template>
 
 <style scoped>
-.loading-bar{animation:loading-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,transparent,#ea580b,#fb923c,#fdba74,transparent);background-size:200% 100%;height:4px;left:0;position:absolute;right:0;top:0;z-index:100}@keyframes loading-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}.chat-sidebar{width:var(--chat-sidebar-width)}.chat-sidebar__clip{display:flex;height:100%;width:100%}.chat-sidebar__panel{flex:none}.chat-sidebar--collapsible{min-width:0;transition:width .26s cubic-bezier(.2,.8,.2,1)}.chat-sidebar--collapsible .chat-sidebar__clip{overflow:hidden}.chat-sidebar--collapsible.chat-sidebar--right .chat-sidebar__clip{justify-content:flex-end}.chat-sidebar--collapsible .chat-sidebar__panel{transition:opacity .2s ease}.chat-sidebar--collapsed{width:0}.chat-sidebar--collapsed .chat-sidebar__panel{opacity:0}.chat-sidebar__toggle{align-items:center;background:#fff;border:.5px solid #e5e5e5;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.06);cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;position:absolute;top:50%;transition:transform .26s cubic-bezier(.2,.8,.2,1),background-color .12s ease;width:20px;z-index:20}.chat-sidebar__toggle:hover{background:#fafafa}.chat-sidebar--right .chat-sidebar__toggle{left:0;transform:translate(-50%,-50%)}.chat-sidebar--right.chat-sidebar--collapsed .chat-sidebar__toggle{transform:translate(-100%,-50%)}.chat-sidebar--left .chat-sidebar__toggle{right:0;transform:translate(50%,-50%)}.chat-sidebar--left.chat-sidebar--collapsed .chat-sidebar__toggle{transform:translate(100%,-50%)}@media (prefers-reduced-motion:reduce){.chat-sidebar__clip,.chat-sidebar__panel,.chat-sidebar__toggle{transition:none}}
+.chat-sidebar{width:var(--chat-sidebar-width)}.chat-sidebar__clip{display:flex;height:100%;width:100%}.chat-sidebar__panel{flex:none}.chat-sidebar--collapsible{min-width:0;transition:width .26s cubic-bezier(.2,.8,.2,1)}.chat-sidebar--collapsible .chat-sidebar__clip{overflow:hidden}.chat-sidebar--collapsible.chat-sidebar--right .chat-sidebar__clip{justify-content:flex-end}.chat-sidebar--collapsible .chat-sidebar__panel{transition:opacity .2s ease}.chat-sidebar--collapsed{width:0}.chat-sidebar--collapsed .chat-sidebar__panel{opacity:0}.chat-sidebar__toggle{align-items:center;background:#fff;border:.5px solid #e5e5e5;border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.06);cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;position:absolute;top:50%;transition:transform .26s cubic-bezier(.2,.8,.2,1),background-color .12s ease;width:20px;z-index:20}.chat-sidebar__toggle:hover{background:#fafafa}.chat-sidebar--right .chat-sidebar__toggle{left:0;transform:translate(-50%,-50%)}.chat-sidebar--right.chat-sidebar--collapsed .chat-sidebar__toggle{transform:translate(-100%,-50%)}.chat-sidebar--left .chat-sidebar__toggle{right:0;transform:translate(50%,-50%)}.chat-sidebar--left.chat-sidebar--collapsed .chat-sidebar__toggle{transform:translate(100%,-50%)}@media (prefers-reduced-motion:reduce){.chat-sidebar__clip,.chat-sidebar__panel,.chat-sidebar__toggle{transition:none}}
+</style>
+
+<style>
+[data-chat-body][data-variant=page] [data-chat-prompt-input]{margin-inline:auto!important;max-width:700px}
 </style>