@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -0,0 +1,867 @@
+<script setup>
+import { useChatAuth } from "#chat-auth";
+import { useBreakpoints } from "@vueuse/core";
+import { exportConversationToMarkdown } from "../../conversations/export";
+import { CHAT_MOBILE_BREAKPOINT } from "../../shared/breakpoints";
+import ChatMobileFilePreview from "./mobile/chat-mobile-file-preview.vue";
+import ChatMobileShell from "./mobile/chat-mobile-shell.vue";
+import { normalizeConversationId } from "../../conversations/scope";
+import { resolveChatFeatures } from "../feature-config";
+import { resolveConversationCreator } from "../../conversations/creator";
+import { 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";
+import { useConversationFilesPanel } from "../../files/composables/conversation-files-panel";
+import { useConversations } from "../../conversations/composables/conversations";
+import { useEmbedConfig } from "../composables/embed-config";
+import { useFileDrop } from "../../files/composables/file-drop";
+import { useFilePreviewPanel } from "../../files/composables/file-preview-panel";
+import { usePendingConversationGroup } from "../../conversations/composables/pending-conversation-group";
+import { useSelectedModel } from "../../messages/composables/selected-model";
+import { useStatusToast } from "../../shared/composables/status-toast";
+import { useTelaAgentMetadata } from "../composables/tela-agent-metadata";
+import { useWorkspaceMembers } from "../../workspace/composables/workspace-members";
+import { useWorkspaceSettings } from "../../workspace/composables/workspace-settings";
+import { useWorkspaceSwitchModal } from "../../workspace/composables/workspace-switch-modal";
+const props = defineProps({
+  conversationId: { type: [String, null], required: false },
+  initialConversationId: { type: [String, null], required: false, default: null },
+  hideSidebar: { type: Boolean, required: false, default: true },
+  hideSettings: { type: Boolean, required: false, default: false },
+  user: { type: [Object, null], required: false },
+  features: { type: Object, required: false }
+});
+const emit = defineEmits(["update:conversationId"]);
+const chatApi = useChatApi();
+const embedConfig = useEmbedConfig();
+const chatAction = useChatAction();
+const { user: authUser, activeOrganization, logout } = useChatAuth();
+const { getMember, getMemberImage } = useWorkspaceMembers();
+const statusToast = useStatusToast();
+const { conversations, loading: conversationsLoading, fetchConversations, createConversation, deleteConversation, renameConversation, duplicateConversation, moveConversationToGroup, updateConversationInList } = useConversations();
+const { settings: workspaceSettingsState, fetchSettings } = useWorkspaceSettings();
+const { metadata: telaAgentMetadata, loading: telaAgentMetadataLoading, fetchAgentMetadata } = useTelaAgentMetadata();
+const isTelaAgentMode = computed(() => !!embedConfig?.telaAgentId.value);
+const hasConfiguredTelaAgentInputs = computed(() => embedConfig?.telaAgentInputs?.value !== void 0 && embedConfig?.telaAgentInputs?.value !== null);
+const shouldLoadTelaAgentMetadata = computed(() => isTelaAgentMode.value && !hasConfiguredTelaAgentInputs.value);
+const telaAgentInputSchema = computed(
+  () => hasConfiguredTelaAgentInputs.value ? null : isTelaAgentMode.value ? telaAgentMetadata.value?.inputSchema ?? [] : null
+);
+const effectiveWorkspaceSettings = computed(() => {
+  if (isTelaAgentMode.value)
+    return void 0;
+  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 activeConversationId = ref(
+  normalizeConversationId(props.conversationId) ?? normalizeConversationId(props.initialConversationId)
+);
+const loadingConversationId = ref(null);
+const isReady = ref(false);
+const {
+  pendingConversationGroupId,
+  setPendingConversationGroup,
+  clearPendingConversationGroup
+} = usePendingConversationGroup();
+const resolvedFeatures = computed(() => resolveChatFeatures(props.features));
+const dropZoneRef = ref(null);
+const activeTab = ref("chat");
+const messageInputRef = ref(null);
+const breakpoints = useBreakpoints({ mobile: CHAT_MOBILE_BREAKPOINT });
+const isMobile = breakpoints.smaller("mobile");
+const drawerOpen = ref(false);
+const { isDragging, setupDropZone } = useFileDrop({
+  onDrop: (files) => {
+    messageInputRef.value?.addFiles(files);
+  }
+});
+setupDropZone(dropZoneRef);
+const {
+  currentConversation,
+  messages,
+  loading,
+  generatingTitle,
+  animatedTitle,
+  hasPendingMessage,
+  loadConversation,
+  setConversation,
+  sendMessage,
+  retryMessage,
+  cancelConversation,
+  startPolling,
+  clearConversation
+} = useChat();
+const conversationModelTarget = computed(() => {
+  if (!currentConversation.value)
+    return null;
+  return {
+    id: currentConversation.value.id,
+    model: currentConversation.value.model
+  };
+});
+const selectedModel = useSelectedModel(conversationModelTarget);
+const conversationIdRef = computed(() => currentConversation.value?.id ?? null);
+const { total, files: conversationFiles } = useConversationFiles(conversationIdRef);
+const filesCount = computed(() => total.value);
+const hasMessages = computed(() => messages.value.length > 0);
+const mobilePreviewFile = computed(() => {
+  if (!isPreviewPanelOpen.value || !currentPreviewFile.value)
+    return null;
+  const file = currentPreviewFile.value;
+  return {
+    id: file.file.reference,
+    url: file.resolvedUrl ?? file.file.reference,
+    name: file.file.hashParams?.filename ?? file.originalFileName ?? file.file.name,
+    mimeType: file.resolvedMimeType ?? file.file.mimeType,
+    source: "message",
+    size: file.fileSize
+  };
+});
+const visibleTelaAgentInputSchema = computed(() => !hasMessages.value ? telaAgentInputSchema.value : null);
+const visibleTelaAgentInputSchemaLoading = computed(() => !hasMessages.value && shouldLoadTelaAgentMetadata.value && telaAgentMetadataLoading.value);
+const visibleConversations = computed(
+  () => conversations.value.filter((conversation) => conversation.title || conversation.id === activeConversationId.value)
+);
+function syncConversationId(nextConversationId) {
+  activeConversationId.value = normalizeConversationId(nextConversationId);
+}
+function updateConversationId(nextConversationId) {
+  const normalizedConversationId = normalizeConversationId(nextConversationId);
+  const didChange = activeConversationId.value !== normalizedConversationId;
+  activeConversationId.value = normalizedConversationId;
+  if (didChange) {
+    emit("update:conversationId", normalizedConversationId);
+  }
+}
+async function ensureConversationLoaded(conversationId) {
+  if (currentConversation.value?.id === conversationId) {
+    startPolling();
+    return;
+  }
+  if (loadingConversationId.value === conversationId) {
+    return;
+  }
+  loadingConversationId.value = conversationId;
+  try {
+    await loadConversation(conversationId);
+    if (currentConversation.value?.id !== conversationId) {
+      statusToast.update({ text: "Erro ao carregar conversa", icon: "i-ph-warning" });
+      return;
+    }
+    startPolling();
+  } finally {
+    if (loadingConversationId.value === conversationId) {
+      loadingConversationId.value = null;
+    }
+  }
+}
+function resetConversation(shouldEmit = true) {
+  clearConversation();
+  activeTab.value = "chat";
+  closeFilesPanel();
+  closePreview();
+  if (shouldEmit) {
+    updateConversationId(null);
+  } else {
+    syncConversationId(null);
+  }
+}
+async function openConversation(nextConversationId) {
+  const normalizedConversationId = normalizeConversationId(nextConversationId);
+  if (!normalizedConversationId) {
+    return;
+  }
+  clearPendingConversationGroup();
+  if (activeConversationId.value !== normalizedConversationId) {
+    closePreview();
+  }
+  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) {
+    syncConversationId(normalizedConversationId);
+    return;
+  }
+  if (normalizedConversationId === activeConversationId.value && currentConversation.value?.id === normalizedConversationId) {
+    return;
+  }
+  if (!normalizedConversationId) {
+    resetConversation(false);
+    return;
+  }
+  syncConversationId(normalizedConversationId);
+  closePreview();
+  await ensureConversationLoaded(normalizedConversationId);
+});
+onMounted(async () => {
+  void fetchConversations();
+  if (shouldLoadTelaAgentMetadata.value) {
+    void fetchAgentMetadata();
+  } else if (!effectiveWorkspaceSettings.value) {
+    void fetchSettings();
+  }
+  isReady.value = true;
+  if (activeConversationId.value) {
+    await ensureConversationLoaded(activeConversationId.value);
+  } else {
+    resetConversation(false);
+  }
+});
+const MAX_DISMISSED_CHAT_IDS = 100;
+const dismissedChats = ref(/* @__PURE__ */ new Set());
+const dismissedStorageKey = computed(
+  () => `embed-dismissed-outdated-settings:${embedConfig?.workspaceId.value.trim() || "default"}`
+);
+onMounted(() => {
+  try {
+    const stored = localStorage.getItem(dismissedStorageKey.value);
+    if (stored)
+      dismissedChats.value = new Set(JSON.parse(stored));
+  } catch {
+  }
+});
+const isSettingsOutdated = computed(() => {
+  if (!effectiveWorkspaceSettings.value || !currentConversation.value)
+    return false;
+  if (!currentConversation.value.appliedSettingsSnapshot)
+    return false;
+  const rawAppliedAt = currentConversation.value.appliedSettingsSnapshot.updatedAt ?? currentConversation.value.appliedSettingsAt;
+  if (!rawAppliedAt)
+    return false;
+  const appliedAt = new Date(rawAppliedAt).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);
+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));
+  try {
+    localStorage.setItem(dismissedStorageKey.value, JSON.stringify([...dismissedChats.value]));
+  } catch {
+  }
+}
+const optimisticTitle = ref(null);
+const displayTitle = computed(() => {
+  if (optimisticTitle.value !== null)
+    return optimisticTitle.value;
+  if (animatedTitle.value !== null)
+    return animatedTitle.value;
+  return currentConversation.value?.title ?? "";
+});
+watch(
+  () => [currentConversation.value?.id ?? null, currentConversation.value?.title ?? null],
+  ([conversationId, conversationTitle], [previousConversationId, previousTitle]) => {
+    if (conversationId !== previousConversationId) {
+      optimisticTitle.value = null;
+      return;
+    }
+    if (optimisticTitle.value !== null && conversationTitle === optimisticTitle.value) {
+      optimisticTitle.value = null;
+    }
+    if (conversationTitle && conversationTitle !== previousTitle && currentConversation.value) {
+      updateConversationInList(currentConversation.value);
+    }
+  }
+);
+const currentUser = computed(() => props.user ?? authUser.value ?? null);
+const conversationCreator = computed(
+  () => resolveConversationCreator(currentConversation.value?.userId, {
+    currentUser: currentUser.value,
+    getMember
+  })
+);
+async function handleSend(content, files, model, agentInputs) {
+  let createdConversationId = null;
+  if (!activeConversationId.value || !currentConversation.value) {
+    const conversation = await createConversation(isTelaAgentMode.value ? void 0 : { model: model ?? selectedModel.value });
+    if (!conversation)
+      return;
+    const groupId = pendingConversationGroupId.value;
+    clearPendingConversationGroup();
+    if (groupId && await moveConversationToGroup(conversation.id, groupId)) {
+      const groupedConversation = { ...conversation, groupId };
+      setConversation(groupedConversation);
+    } else {
+      setConversation(conversation);
+    }
+    createdConversationId = conversation.id;
+  }
+  if (!currentConversation.value)
+    return;
+  const sendPromise = sendMessage(content, files.length > 0 ? files : void 0, model, agentInputs);
+  if (createdConversationId) {
+    updateConversationId(createdConversationId);
+  }
+  await sendPromise;
+}
+async function handleRetry(messageId) {
+  await retryMessage(messageId);
+}
+async function handleNewConversation(groupId) {
+  setPendingConversationGroup(groupId);
+  resetConversation();
+}
+const workspaceSheetOpen = ref(false);
+const {
+  settings: workspaceSettingsForModal,
+  fetchSettings: fetchWorkspaceSettingsForModal,
+  openModal: openWorkspaceSettingsModal
+} = useWorkspaceSettings();
+const { openModal: openWorkspaceSwitchModal } = useWorkspaceSwitchModal();
+async function handleOpenWorkspaceSettings() {
+  if (!workspaceSettingsForModal.value) {
+    try {
+      await fetchWorkspaceSettingsForModal();
+    } catch (err) {
+      console.error("Failed to load workspace settings:", err);
+      return;
+    }
+  }
+  openWorkspaceSettingsModal();
+}
+function handleSwitchWorkspace() {
+  openWorkspaceSwitchModal();
+}
+async function handleSignout() {
+  chatAction.emit("signout");
+  await logout();
+}
+const workspaceName = computed(() => activeOrganization.value?.name ?? "Workspace");
+const workspaceLogo = computed(() => activeOrganization.value?.logo ?? void 0);
+function handleTabChange(tab) {
+  activeTab.value = tab;
+  if (tab === "chat")
+    closeFilesPanel();
+}
+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");
+function startEditing() {
+  editTitle.value = displayTitle.value;
+  isEditing.value = true;
+  justStartedEditing.value = true;
+  setTimeout(() => {
+    justStartedEditing.value = false;
+  }, 100);
+}
+async function saveTitle() {
+  if (justStartedEditing.value)
+    return;
+  const trimmed = editTitle.value.trim();
+  if (trimmed && trimmed !== currentConversation.value?.title && currentConversation.value) {
+    optimisticTitle.value = trimmed;
+    const success = await renameConversation(currentConversation.value.id, trimmed);
+    if (!success)
+      optimisticTitle.value = null;
+  }
+  isEditing.value = false;
+  justStartedEditing.value = false;
+}
+function cancelEditing() {
+  isEditing.value = false;
+  editTitle.value = "";
+  justStartedEditing.value = false;
+}
+const copiedToClipboard = ref(false);
+async function handleShare() {
+  try {
+    await navigator.clipboard.writeText(window.location.href);
+    copiedToClipboard.value = true;
+    statusToast.update({ text: "Link copiado", icon: "i-ph-check" });
+    setTimeout(() => {
+      copiedToClipboard.value = false;
+    }, 2e3);
+  } catch {
+    statusToast.update({ text: "Erro ao copiar link", icon: "i-ph-warning" });
+  }
+}
+async function handleDuplicate() {
+  if (!currentConversation.value)
+    return;
+  const duplicated = await duplicateConversation(currentConversation.value.id);
+  if (duplicated) {
+    setConversation(duplicated);
+    updateConversationId(duplicated.id);
+  }
+}
+async function handleExport() {
+  if (!currentConversation.value)
+    return;
+  try {
+    const conversation = await $fetch(
+      chatApi.path(`/conversations/${currentConversation.value.id}`),
+      chatApi.withChatHeaders()
+    );
+    exportConversationToMarkdown(conversation);
+  } catch (err) {
+    console.error("Failed to export conversation:", err);
+  }
+}
+const showDeleteModal = ref(false);
+async function handleDelete() {
+  if (!currentConversation.value)
+    return;
+  showDeleteModal.value = false;
+  const deleted = await deleteConversation(currentConversation.value.id);
+  if (deleted) {
+    await handleNewConversation();
+  }
+}
+</script>
+
+<template>
+    <div ref="dropZoneRef" h-full flex bg-white relative>
+        <!-- Sidebar -->
+        <div
+            v-if="!hideSidebar && !isMobile"
+            w-240px h-full flex="~ col" flex-shrink-0
+            bg-neutral-50 b-r=".5px 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
+                    @click="() => handleNewConversation()"
+                >
+                    <span i-ph-chat-circle text-12px text-gray-900 />
+                    <span text-14px font-semibold text-neutral-900 tracking="-.15px" leading-18px>
+                        Nova conversa
+                    </span>
+                </button>
+                <ChatConversationNewGroupButton />
+            </div>
+
+            <div flex-1 overflow-y-auto px-4px>
+                <ChatConversationList
+                    :conversations="visibleConversations"
+                    :current-id="activeConversationId ?? void 0"
+                    :get-member-image="getMemberImage"
+                    :select-conversation="openConversation"
+                    :reset-conversation="handleNewConversation"
+                    :start-conversation="handleNewConversation"
+                    :loading="conversationsLoading"
+                />
+            </div>
+        </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" />
+
+            <ChatMobileShell
+                v-if="isMobile"
+                v-model:drawer-open="drawerOpen"
+                v-model:edit-title="editTitle"
+                v-model:model="selectedModel"
+                v-model:workspace-sheet-open="workspaceSheetOpen"
+                :current-conversation="currentConversation"
+                :display-title="displayTitle"
+                :conversation-creator="conversationCreator"
+                :current-user="currentUser"
+                :active-tab="activeTab"
+                :active-conversation-id="activeConversationId"
+                :conversations="visibleConversations"
+                :conversations-loading="conversationsLoading"
+                :conversation-files="conversationFiles"
+                :files-count="filesCount"
+                :generating-title="generatingTitle"
+                :has-messages="hasMessages"
+                :has-pending-message="hasPendingMessage"
+                :hide-settings="hideSettings"
+                :hide-sidebar="hideSidebar"
+                :is-editing="isEditing"
+                :loading="loading"
+                :messages="messages"
+                :allow-model-selection="!isTelaAgentMode"
+                :agent-input-schema="visibleTelaAgentInputSchema"
+                :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                :show-model-selector="resolvedFeatures.showModelSelector"
+                :show-cancel-button="resolvedFeatures.showCancelButton"
+                :show-debug-option="resolvedFeatures.showDebugOption"
+                :show-outdated-badge="showOutdatedBadge"
+                :show-outdated-banner="showOutdatedBanner"
+                :show-usage-tab="resolvedFeatures.showUsageTab"
+                :workspace-logo="workspaceLogo"
+                :workspace-name="workspaceName"
+                :workspace-settings="effectiveWorkspaceSettings"
+                @cancel="cancelConversation"
+                @cancel-editing="cancelEditing"
+                @copy-link="handleShare"
+                @debug="showDebugModal = true"
+                @delete="showDeleteModal = true"
+                @dismiss-outdated-banner="dismissOutdatedBanner"
+                @duplicate="handleDuplicate"
+                @export="handleExport"
+                @new-conversation="handleNewConversation"
+                @rename="startEditing"
+                @save-title="saveTitle"
+                @select-conversation="openConversation"
+                @send="handleSend"
+                @settings="handleOpenWorkspaceSettings"
+                @signout="handleSignout"
+                @switch-workspace="handleSwitchWorkspace"
+                @tab-change="handleTabChange"
+            >
+                <template #loading>
+                    <ChatMessageList
+                        :messages="[]"
+                        loading
+                    />
+                    <ChatMessageInput
+                        v-model:model="selectedModel"
+                        :disabled="true"
+                        :allow-model-selection="!isTelaAgentMode"
+                        :agent-input-schema="visibleTelaAgentInputSchema"
+                        :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                        :show-model-selector="resolvedFeatures.showModelSelector"
+                        :show-cancel-button="resolvedFeatures.showCancelButton"
+                    />
+                </template>
+
+                <template #empty>
+                    <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>
+                        <ChatMessageInput
+                            ref="messageInputRef"
+                            v-model: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"
+                            :allow-model-selection="!isTelaAgentMode"
+                            :agent-input-schema="visibleTelaAgentInputSchema"
+                            :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                            :show-model-selector="resolvedFeatures.showModelSelector"
+                            :show-cancel-button="resolvedFeatures.showCancelButton"
+                            centered
+                            @send="handleSend"
+                            @cancel="cancelConversation"
+                        />
+                    </div>
+                </template>
+
+                <ChatMessageList
+                    :messages="messages"
+                    @retry="handleRetry"
+                />
+                <ChatMessageInput
+                    ref="messageInputRef"
+                    v-model: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"
+                    :allow-model-selection="!isTelaAgentMode"
+                    :agent-input-schema="visibleTelaAgentInputSchema"
+                    :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                    :show-model-selector="resolvedFeatures.showModelSelector"
+                    :show-cancel-button="resolvedFeatures.showCancelButton"
+                    has-disclaimer
+                    @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"
+                :title="displayTitle"
+                :creator-name="conversationCreator?.name ?? void 0"
+                :creator-email="currentConversation.createdBy ?? void 0"
+                :creator-image="conversationCreator?.image ?? void 0"
+                :updated-at="currentConversation.updatedAt"
+                :is-editing="isEditing"
+                :edit-title="editTitle"
+                :generating-title="generatingTitle"
+                :files-count="filesCount"
+                :active-tab="activeTab"
+                :show-outdated-badge="showOutdatedBadge"
+                :show-usage-tab="resolvedFeatures.showUsageTab"
+                :show-debug-option="resolvedFeatures.showDebugOption"
+                @update:is-editing="isEditing = $event"
+                @update:edit-title="editTitle = $event"
+                @save-title="saveTitle"
+                @cancel-editing="cancelEditing"
+                @rename="startEditing"
+                @duplicate="handleDuplicate"
+                @export="handleExport"
+                @copy-link="handleShare"
+                @debug="showDebugModal = true"
+                @delete="showDeleteModal = true"
+                @tab-change="handleTabChange"
+            />
+
+            <div
+                v-if="!isMobile && showOutdatedBanner"
+                mt-64px flex items-center h-36px px-12px bg="#FFF1D8"
+            >
+                <div flex items-center gap-8px flex-1>
+                    <span i-ph-warning text-12px text-gray-900 shrink-0 />
+                    <span text-12px font-580 text-gray-900 leading-16px>
+                        Configurações do workspace alteradas
+                    </span>
+                    <span text-12px text-gray-700 leading-16px>
+                        Inicie uma nova conversa para usar as configurações atualizadas
+                    </span>
+                </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
+                        @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
+                        @click="dismissOutdatedBanner"
+                    >
+                        <span i-ph-x text-12px text-gray-900 />
+                    </button>
+                </div>
+            </div>
+
+            <template v-if="!isMobile && activeTab === 'files' && currentConversation">
+                <ChatFilesView :conversation-id="currentConversation.id" />
+            </template>
+
+            <template v-else-if="!isMobile && activeTab === 'usage' && resolvedFeatures.showUsageTab && currentConversation">
+                <ChatUsageView
+                    :conversation-id="currentConversation.id"
+                    :created-at="currentConversation.createdAt"
+                    :updated-at="currentConversation.updatedAt"
+                />
+            </template>
+
+            <template v-else-if="!isMobile && loading">
+                <ChatMessageList
+                    :messages="[]"
+                    loading
+                />
+                <ChatMessageInput
+                    v-model:model="selectedModel"
+                    :disabled="true"
+                    :allow-model-selection="!isTelaAgentMode"
+                    :agent-input-schema="visibleTelaAgentInputSchema"
+                    :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                    :show-model-selector="resolvedFeatures.showModelSelector"
+                    :show-cancel-button="resolvedFeatures.showCancelButton"
+                />
+            </template>
+
+            <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>
+                    <ChatMessageInput
+                        ref="messageInputRef"
+                        v-model: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"
+                        :allow-model-selection="!isTelaAgentMode"
+                        :agent-input-schema="visibleTelaAgentInputSchema"
+                        :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                        :show-model-selector="resolvedFeatures.showModelSelector"
+                        :show-cancel-button="resolvedFeatures.showCancelButton"
+                        centered
+                        @send="handleSend"
+                        @cancel="cancelConversation"
+                    />
+                </div>
+            </template>
+
+            <template v-else-if="!isMobile">
+                <ChatMessageList
+                    :messages="messages"
+                    @retry="handleRetry"
+                />
+                <ChatMessageInput
+                    ref="messageInputRef"
+                    v-model: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"
+                    :allow-model-selection="!isTelaAgentMode"
+                    :agent-input-schema="visibleTelaAgentInputSchema"
+                    :agent-input-schema-loading="visibleTelaAgentInputSchemaLoading"
+                    :show-model-selector="resolvedFeatures.showModelSelector"
+                    :show-cancel-button="resolvedFeatures.showCancelButton"
+                    has-disclaimer
+                    @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>
+
+            <Transition name="fade">
+                <div
+                    v-if="isDragging"
+                    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
+                    >
+                        <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>
+                            <p text-18px font-semibold text-gray-800>
+                                Solte o arquivo aqui
+                            </p>
+                            <p text-14px text-gray-500 mt-4px>
+                                O arquivo será anexado à sua mensagem
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+
+            <TelaConfirmationModal
+                v-model:open="showDeleteModal"
+                title="Excluir conversa"
+                variant="danger"
+                confirm-button-text="Excluir"
+                cancel-button-text="Cancelar"
+                @confirm="handleDelete"
+                @cancel="showDeleteModal = false"
+            >
+                Tem certeza que deseja excluir esta conversa? Esta ação não pode ser desfeita.
+            </TelaConfirmationModal>
+
+            <TelaModal
+                :model-value="showDebugModal"
+                title="Debug"
+                hide-dividers
+                compact
+                class="w-520px!"
+                @close="showDebugModal = false"
+            >
+                <div flex="~ col" w-full my-24px gap-24px>
+                    <div flex="~ col" gap-4px w-full>
+                        <p text-14px font-580 text-gray-700 leading-18px>
+                            Chat Id
+                        </p>
+                        <div
+                            px-12px py-10px
+                            rounded-8px
+                            bg-gray-50
+                            justify-between
+                            flex items-center
+                            border="0.5px gray-200"
+                        >
+                            <p text-13px text-gray-700 break-all leading-18px>
+                                {{ activeConversationId ?? "Conversa ainda n\xE3o criada" }}
+                            </p>
+                            <TelaCopyButton :content="activeConversationId ?? ''" />
+                        </div>
+                    </div>
+                    <div flex="~ col" gap-4px w-full>
+                        <p text-14px font-580 text-gray-700 leading-18px>
+                            Thread Session Id (Agent API)
+                        </p>
+                        <div
+                            px-12px py-10px
+                            rounded-8px
+                            bg-gray-50
+                            justify-between
+                            flex items-center
+                            border="0.5px gray-200"
+                        >
+                            <p text-13px text-gray-700 break-all leading-18px>
+                                {{ debugSessionId }}
+                            </p>
+                            <TelaCopyButton :content="debugSessionId" />
+                        </div>
+                    </div>
+                </div>
+            </TelaModal>
+        </div>
+
+        <ChatMobileFilePreview
+            v-if="isPreviewPanelOpen && isMobile"
+            :file="mobilePreviewFile"
+            @close="closePreview"
+        />
+
+        <div
+            v-if="isPreviewPanelOpen && !isMobile"
+            h-full flex-shrink-0 pt-64px
+            :style="{ width: `${previewPanelWidth}px` }"
+        >
+            <FilePreviewPanel />
+        </div>
+    </div>
+</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}
+</style>