@meistrari/chat-nuxt 1.6.0 → 1.8.0

package/dist/runtime/composables/useConversationFileDownloads.d.ts

@@ -0,0 +1,6 @@
+import type { ConversationFile } from '../types/chat.js';
+export declare function useConversationFileDownloads(): {
+    resolveDownloadUrl: (file: ConversationFile) => Promise<string>;
+    downloadFile: (file: ConversationFile) => Promise<void>;
+    copyFileLink: (file: ConversationFile) => Promise<void>;
+};

package/dist/runtime/composables/useConversationFileDownloads.js

@@ -0,0 +1,50 @@
+import { useClipboard } from "@vueuse/core";
+export function useConversationFileDownloads() {
+  const statusToast = useStatusToast();
+  const { copy } = useClipboard();
+  async function resolveDownloadUrl(file) {
+    if (file.url.startsWith("vault://")) {
+      const { url } = await $fetch("/api/vault/resolve", {
+        method: "POST",
+        body: { reference: file.url }
+      });
+      return url;
+    }
+    return file.url;
+  }
+  async function downloadFile(file) {
+    statusToast.update({ text: "Baixando arquivo...", loading: true });
+    try {
+      const downloadUrl = await resolveDownloadUrl(file);
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = file.name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+      statusToast.update({ text: "Download conclu\xEDdo", icon: "i-ph-check" });
+    } catch (error) {
+      console.error("Failed to download file:", error);
+      statusToast.update({ text: "Erro ao baixar arquivo", icon: "i-ph-warning" });
+    }
+  }
+  async function copyFileLink(file) {
+    try {
+      const publicUrl = await resolveDownloadUrl(file);
+      await copy(publicUrl);
+      statusToast.update({ text: "Link copiado", icon: "i-ph-check" });
+    } catch (error) {
+      console.error("Failed to copy link:", error);
+      statusToast.update({ text: "Erro ao copiar link", icon: "i-ph-warning" });
+    }
+  }
+  return {
+    resolveDownloadUrl,
+    downloadFile,
+    copyFileLink
+  };
+}

package/dist/runtime/composables/useConversationUsage.d.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'vue';
+export declare function useConversationUsage(conversationId: Ref<string | null | undefined>): {
+    usageData: any;
+    billing: any;
+    loading: any;
+    error: any;
+    cacheInsight: any;
+    costBreakdown: any;
+    modelRows: any;
+    costBarSegments: any;
+    formatBillingCost: (cost: number) => string;
+    fetchUsage: () => Promise<void>;
+};

package/dist/runtime/composables/useConversationUsage.js

@@ -0,0 +1,121 @@
+import { formatCost, formatCredits, formatModelName, formatTokenCount } from "../utils/calculate-usage.js";
+export function useConversationUsage(conversationId) {
+  const chatApi = useChatApi();
+  const usageData = ref(null);
+  const billing = ref(null);
+  const loading = ref(false);
+  const error = ref(null);
+  function formatBillingCost(cost) {
+    if (!billing.value || billing.value.mode === "credits") {
+      return formatCredits(cost);
+    }
+    return formatCost(cost);
+  }
+  async function fetchUsage() {
+    const id = conversationId.value;
+    if (!id) {
+      return;
+    }
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await $fetch(
+        chatApi.path(`/conversations/${id}/usage`),
+        chatApi.withChatHeaders()
+      );
+      if (response.error) {
+        error.value = response.error;
+      } else {
+        usageData.value = response.usage;
+        billing.value = response.billing;
+      }
+    } catch (err) {
+      console.error("Failed to fetch usage data:", err);
+      error.value = "Falha ao carregar dados de uso";
+    } finally {
+      loading.value = false;
+    }
+  }
+  const cacheInsight = computed(() => {
+    if (!usageData.value) {
+      return { percentage: 0, reusedTokens: 0, storedTokens: 0, hasData: false };
+    }
+    const hasData = usageData.value.tokens.cacheRead > 0 || usageData.value.tokens.cacheCreation > 0;
+    return {
+      percentage: Math.round(usageData.value.metrics.cacheHitRate * 100),
+      reusedTokens: usageData.value.tokens.cacheRead,
+      storedTokens: usageData.value.tokens.cacheCreation,
+      hasData
+    };
+  });
+  const costBreakdown = computed(() => {
+    if (!usageData.value) {
+      return [];
+    }
+    const total = usageData.value.cost.total;
+    return [
+      {
+        key: "input",
+        label: "Envio",
+        tooltip: "Texto enviado ao modelo: perguntas, contexto e instru\xE7\xF5es",
+        tokens: usageData.value.tokens.prompt,
+        cost: usageData.value.cost.prompt,
+        percentage: total > 0 ? Math.round(usageData.value.cost.prompt / total * 100) : 0
+      },
+      {
+        key: "output",
+        label: "Respostas",
+        tooltip: "Texto gerado pelo modelo",
+        tokens: usageData.value.tokens.completion,
+        cost: usageData.value.cost.completion,
+        percentage: total > 0 ? Math.round(usageData.value.cost.completion / total * 100) : 0
+      }
+    ];
+  });
+  const modelRows = computed(() => {
+    if (!usageData.value) {
+      return [];
+    }
+    const totalCost = usageData.value.cost.total;
+    return usageData.value.models.map((m) => {
+      const totalTokens = m.inputTokens + m.outputTokens + m.cacheReadTokens + m.cacheCreationTokens;
+      return {
+        modelId: m.model,
+        modelName: formatModelName(m.model),
+        tokens: formatTokenCount(totalTokens),
+        cost: formatBillingCost(m.cost),
+        costShare: totalCost > 0 ? m.cost / totalCost * 100 : 0
+      };
+    });
+  });
+  const costBarSegments = computed(() => {
+    if (!usageData.value || usageData.value.cost.total === 0) {
+      return [];
+    }
+    const total = usageData.value.cost.total;
+    return [
+      {
+        key: "input",
+        label: "Envio",
+        percentage: usageData.value.cost.prompt / total * 100
+      },
+      {
+        key: "output",
+        label: "Respostas",
+        percentage: usageData.value.cost.completion / total * 100
+      }
+    ];
+  });
+  return {
+    usageData,
+    billing,
+    loading,
+    error,
+    cacheInsight,
+    costBreakdown,
+    modelRows,
+    costBarSegments,
+    formatBillingCost,
+    fetchUsage
+  };
+}

package/dist/runtime/composables/useConversations.js

@@ -38,7 +38,8 @@ export function useConversations() {
   const isTelaAgentMode = computed(() => !!embedConfig?.telaAgentId.value);
   const workspaceScope = computed(() => resolveChatStateScope(
     embedConfig?.workspaceId.value || activeOrganization.value?.id,
-    embedConfig?.telaAgentId.value
+    embedConfig?.telaAgentId.value,
+    embedConfig?.conversationScope?.value
   ));
   const conversations = computed({
     get: () => conversationBuckets.value[workspaceScope.value] ?? [],
@@ -230,6 +231,7 @@ export function useConversations() {
         appliedSettingsSnapshot: cloneAppliedSettingsSnapshot(updated.appliedSettingsSnapshot),
         telaAgentId: updated.telaAgentId,
         createdBy: updated.createdBy,
+        conversationScope: updated.conversationScope,
         createdAt: updated.createdAt,
         updatedAt: updated.updatedAt
       };

package/dist/runtime/composables/useEmbedConfig.d.ts

@@ -6,9 +6,11 @@ type ConfiguredTelaAgentInputs = DeepReadonly<TelaAgentExecutionInput[]> | null
 export type EmbedConfig = {
     workspaceId: Ref<string>;
     telaAgentId: Ref<string | null>;
+    conversationScope: Ref<string | null>;
     telaAgentInputs: Ref<ConfiguredTelaAgentInputs>;
     workspaceSettings: Ref<DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null | undefined>;
     hideSidebar: Ref<boolean>;
+    hideSettings: Ref<boolean>;
     loadingMessages: Ref<readonly string[] | null | undefined>;
     loadingMessagesMode: Ref<ChatLoadingMessageMode | null | undefined>;
     customComponents: Ref<Record<string, Component> | undefined>;
@@ -17,9 +19,11 @@ export type EmbedConfig = {
 type EmbedConfigInput = {
     workspaceId: MaybeRefOrGetter<string>;
     telaAgentId?: MaybeRefOrGetter<string | null | undefined>;
+    conversationScope?: MaybeRefOrGetter<string | null | undefined>;
     telaAgentInputs?: MaybeRefOrGetter<ConfiguredTelaAgentInputs>;
     workspaceSettings?: MaybeRefOrGetter<DeepReadonly<WorkspaceSettings> | WorkspaceSettings | null | undefined>;
     hideSidebar?: MaybeRefOrGetter<boolean | undefined>;
+    hideSettings?: MaybeRefOrGetter<boolean | undefined>;
     loadingMessages?: MaybeRefOrGetter<readonly string[] | null | undefined>;
     loadingMessagesMode?: MaybeRefOrGetter<ChatLoadingMessageMode | null | undefined>;
     customComponents?: MaybeRefOrGetter<Record<string, Component> | undefined>;

package/dist/runtime/composables/useEmbedConfig.js

@@ -1,3 +1,4 @@
+import { normalizeConversationScope } from "../utils/tela-chat.js";
 const EMBED_CONFIG_KEY = "embed-config";
 function useGlobalCustomComponentsState() {
   const nuxtApp = useNuxtApp();
@@ -9,9 +10,11 @@ function useGlobalEmbedConfigState() {
     provided: useState("chat-embed-config-provided", () => false),
     workspaceId: useState("chat-embed-config-workspace-id", () => ""),
     telaAgentId: useState("chat-embed-config-tela-agent-id", () => null),
+    conversationScope: useState("chat-embed-config-conversation-scope", () => null),
     telaAgentInputs: useState("chat-embed-config-tela-agent-inputs", () => void 0),
     workspaceSettings: useState("chat-embed-config-workspace-settings", () => void 0),
     hideSidebar: useState("chat-embed-config-hide-sidebar", () => void 0),
+    hideSettings: useState("chat-embed-config-hide-settings", () => void 0),
     loadingMessages: useState("chat-embed-config-loading-messages", () => void 0),
     loadingMessagesMode: useState("chat-embed-config-loading-messages-mode", () => void 0),
     customComponents: useGlobalCustomComponentsState(),
@@ -22,9 +25,11 @@ export function provideEmbedConfig(input, options = {}) {
   const config = {
     workspaceId: computed(() => toValue(input.workspaceId)),
     telaAgentId: computed(() => toValue(input.telaAgentId) ?? null),
+    conversationScope: computed(() => normalizeConversationScope(toValue(input.conversationScope))),
     telaAgentInputs: computed(() => toValue(input.telaAgentInputs)),
     workspaceSettings: computed(() => toValue(input.workspaceSettings)),
     hideSidebar: computed(() => toValue(input.hideSidebar) ?? true),
+    hideSettings: computed(() => toValue(input.hideSettings) ?? false),
     loadingMessages: computed(() => toValue(input.loadingMessages)),
     loadingMessagesMode: computed(() => toValue(input.loadingMessagesMode)),
     customComponents: computed(() => toValue(input.customComponents)),
@@ -36,9 +41,11 @@ export function provideEmbedConfig(input, options = {}) {
       globalConfig.provided.value = true;
       globalConfig.workspaceId.value = config.workspaceId.value;
       globalConfig.telaAgentId.value = config.telaAgentId.value;
+      globalConfig.conversationScope.value = config.conversationScope.value;
       globalConfig.telaAgentInputs.value = config.telaAgentInputs.value;
       globalConfig.workspaceSettings.value = config.workspaceSettings.value;
       globalConfig.hideSidebar.value = config.hideSidebar.value;
+      globalConfig.hideSettings.value = config.hideSettings.value;
       globalConfig.loadingMessages.value = config.loadingMessages.value;
       globalConfig.loadingMessagesMode.value = config.loadingMessagesMode.value;
       globalConfig.customComponents.value = config.customComponents.value;
@@ -57,9 +64,11 @@ export function useEmbedConfig() {
   return {
     workspaceId: computed(() => globalConfig.workspaceId.value),
     telaAgentId: computed(() => globalConfig.telaAgentId.value),
+    conversationScope: computed(() => globalConfig.conversationScope.value),
     telaAgentInputs: computed(() => globalConfig.telaAgentInputs.value),
     workspaceSettings: computed(() => globalConfig.workspaceSettings.value),
     hideSidebar: computed(() => globalConfig.hideSidebar.value ?? true),
+    hideSettings: computed(() => globalConfig.hideSettings.value ?? false),
     loadingMessages: computed(() => globalConfig.loadingMessages.value),
     loadingMessagesMode: computed(() => globalConfig.loadingMessagesMode.value),
     customComponents: computed(() => globalConfig.customComponents.value),

package/dist/runtime/composables/useMentionAutocomplete.d.ts

@@ -6,5 +6,11 @@ type UseMentionAutocompleteOptions = {
     disabled?: Ref<boolean | undefined>;
     onInsert?: () => void;
 };
+export declare function isMentionTriggerBoundary(textBeforeTrigger: string): boolean;
+export declare function findMentionTrigger(textBeforeCursor: string): {
+    trigger: '@' | '/';
+    query: string;
+    offset: number;
+} | null;
 export declare function useMentionAutocomplete(options: UseMentionAutocompleteOptions): any;
 export {};

package/dist/runtime/composables/useMentionAutocomplete.js

@@ -1,3 +1,26 @@
+export function isMentionTriggerBoundary(textBeforeTrigger) {
+  if (textBeforeTrigger.length === 0)
+    return true;
+  const previousChar = textBeforeTrigger[textBeforeTrigger.length - 1];
+  return previousChar === " " || previousChar === "\n" || previousChar === "\xA0";
+}
+export function findMentionTrigger(textBeforeCursor) {
+  for (let i = textBeforeCursor.length - 1; i >= 0; i--) {
+    const char = textBeforeCursor[i];
+    if (char === " " || char === "\n" || char === "\xA0")
+      return null;
+    if (char === "@" || char === "/") {
+      if (!isMentionTriggerBoundary(textBeforeCursor.slice(0, i)))
+        return null;
+      return {
+        trigger: char,
+        query: textBeforeCursor.slice(i + 1),
+        offset: i
+      };
+    }
+  }
+  return null;
+}
 export function useMentionAutocomplete(options) {
   const { editorRef, fileItems, skillItems, disabled, onInsert } = options;
   const activeTrigger = ref(null);
@@ -22,36 +45,59 @@ export function useMentionAutocomplete(options) {
     if (!sel || sel.rangeCount === 0 || !editorRef.value)
       return "";
     const range = sel.getRangeAt(0);
-    const preRange = document.createRange();
-    preRange.selectNodeContents(editorRef.value);
-    preRange.setEnd(range.startContainer, range.startOffset);
-    return preRange.toString();
+    const editor = editorRef.value;
+    let text = "";
+    function walkNode(node) {
+      if (node === range.startContainer) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          text += (node.textContent ?? "").slice(0, range.startOffset);
+          return true;
+        }
+        for (const child of Array.from(node.childNodes).slice(0, range.startOffset)) {
+          if (walkNode(child))
+            return true;
+        }
+        return true;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent ?? "";
+        return false;
+      }
+      if (node.nodeName === "BR") {
+        if (!node.dataset?.sentinel)
+          text += "\n";
+        return false;
+      }
+      if (node.nodeType === Node.ELEMENT_NODE && node.contentEditable === "false") {
+        text += node.textContent ?? "";
+        return false;
+      }
+      for (const child of node.childNodes) {
+        if (walkNode(child))
+          return true;
+      }
+      return false;
+    }
+    walkNode(editor);
+    return text;
   }
   function detectTrigger() {
     if (disabled?.value) {
       activeTrigger.value = null;
       return;
     }
-    const textBefore = getTextBeforeCursor();
-    for (let i = textBefore.length - 1; i >= 0; i--) {
-      const char = textBefore[i];
-      if (char === " " || char === "\n" || char === "\xA0") {
-        activeTrigger.value = null;
-        return;
-      }
-      if (char === "@" || char === "/") {
-        activeTrigger.value = char;
-        triggerTextOffset = i;
-        const newQuery = textBefore.slice(i + 1);
-        if (newQuery !== lastQuery.value) {
-          highlightedIndex.value = -1;
-          lastQuery.value = newQuery;
-        }
-        query.value = newQuery;
-        return;
-      }
+    const mentionTrigger = findMentionTrigger(getTextBeforeCursor());
+    if (!mentionTrigger) {
+      activeTrigger.value = null;
+      return;
     }
-    activeTrigger.value = null;
+    activeTrigger.value = mentionTrigger.trigger;
+    triggerTextOffset = mentionTrigger.offset;
+    if (mentionTrigger.query !== lastQuery.value) {
+      highlightedIndex.value = -1;
+      lastQuery.value = mentionTrigger.query;
+    }
+    query.value = mentionTrigger.query;
   }
   function getCaretRangeAtOffset(offset) {
     const editor = editorRef.value;
@@ -71,6 +117,8 @@ export function useMentionAutocomplete(options) {
         return null;
       }
       if (node.nodeName === "BR") {
+        if (!node.dataset?.sentinel)
+          current += 1;
         return null;
       }
       if (node.nodeType === Node.ELEMENT_NODE && node.contentEditable === "false") {

package/dist/runtime/composables/useWorkspaceSwitchModal.d.ts

@@ -0,0 +1,5 @@
+export declare function useWorkspaceSwitchModal(): {
+    isOpen: any;
+    openModal: () => void;
+    closeModal: () => void;
+};

package/dist/runtime/composables/useWorkspaceSwitchModal.js

@@ -0,0 +1,14 @@
+export function useWorkspaceSwitchModal() {
+  const isOpen = useState("chat-nuxt:workspace-switch-modal-open", () => false);
+  function openModal() {
+    isOpen.value = true;
+  }
+  function closeModal() {
+    isOpen.value = false;
+  }
+  return {
+    isOpen,
+    openModal,
+    closeModal
+  };
+}

package/dist/runtime/embed/components/ChatConfigurationModal.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { useMagicKeys } from "@vueuse/core";
+import { useBreakpoints, useMagicKeys } from "@vueuse/core";
+import { CHAT_MOBILE_BREAKPOINT } from "../../utils/breakpoints";
+import ChatConfigurationMobileShell from "./configuration/ChatConfigurationMobileShell.vue";
 const props = defineProps({
   open: { type: Boolean, required: true },
   settings: { type: null, required: false },
@@ -11,6 +13,8 @@ const { uploadFiles, uploading } = useFileUpload();
 const { canvas, projects, workstations, loadingWorkstations } = useTela();
 const { setKnowledgeSources } = useKnowledgeSources();
 const statusToast = useStatusToast();
+const breakpoints = useBreakpoints({ mobile: CHAT_MOBILE_BREAKPOINT });
+const isMobile = breakpoints.smaller("mobile");
 const { escape } = useMagicKeys();
 const {
   settings: workspaceSettings,
@@ -21,6 +25,7 @@ const {
 const features = useChatNuxtFeatures();
 const searchQuery = ref("");
 const activeTab = ref(props.initialTab);
+const activeMobileTab = ref(null);
 const showDiscardConfirm = ref(false);
 const loadingInitialSettings = ref(false);
 const hasSettingsOverride = computed(() => props.settings !== void 0);
@@ -56,6 +61,7 @@ watch(() => props.open, (isOpen) => {
   if (isOpen) {
     searchQuery.value = "";
     activateTab(props.initialTab);
+    activeMobileTab.value = null;
     if (!hasSettingsOverride.value && !mutableSettings.value) {
       void loadSettings();
       return;
@@ -91,6 +97,10 @@ function activateTab(tab) {
   if (activeTab.value === "external-skills")
     void externalSkills.fetchGitHubConnection();
 }
+function activateMobileTab(tab) {
+  activateTab(tab);
+  activeMobileTab.value = activeTab.value;
+}
 async function loadSettings() {
   loadingInitialSettings.value = true;
   try {
@@ -182,7 +192,103 @@ function cancelDiscard() {
 </script>
 
 <template>
+    <Teleport to="body">
+        <ChatConfigurationMobileShell
+            v-if="isMobile && open"
+            :tabs="settingsTabs"
+            :active-tab="activeMobileTab"
+            :has-changes="hasChanges"
+            :is-busy="isBusy"
+            @select-tab="activateMobileTab"
+            @back="activeMobileTab = null"
+            @close="handleClose"
+            @save="handleSave"
+        >
+            <div
+                v-if="loadingInitialSettings"
+                h-full min-h-320px flex="~ col" items-center justify-center gap-12px
+            >
+                <div i-ph-spinner animate-spin text-24px text-gray-500 />
+                <p text-14px text-gray-500>
+                    Carregando configurações...
+                </p>
+            </div>
+
+            <ChatConfigurationPersonalizationTab
+                v-else-if="activeTab === 'personalization'"
+                v-model:system-message="personalization.localSystemMessage.value"
+            />
+
+            <ChatConfigurationContextFilesTab
+                v-else-if="activeTab === 'context-files'"
+                :search-query="searchQuery"
+                :filtered-context-files="contextFiles.filteredContextFiles.value"
+                :filtered-pending-files="contextFiles.filteredPendingFiles.value"
+                :current-file-count="contextFiles.currentFileCount.value"
+                :max-files="contextFiles.maxFiles"
+                :get-file-type="contextFiles.getFileType"
+                @update:search-query="searchQuery = $event"
+                @handle-file-select="contextFiles.handleFileSelect"
+                @remove-pending-file="contextFiles.removePendingFile"
+                @remove-context-file="contextFiles.removeContextFile"
+            />
+
+            <ChatConfigurationKnowledgeSourcesTab
+                v-else-if="activeTab === 'knowledge-sources'"
+                :search-query="searchQuery"
+                :workstations="workstations"
+                :loading-workstations="loadingWorkstations"
+                :filtered-workstations="knowledgeSources.filteredWorkstations.value"
+                :selected-ids="knowledgeSources.selectedKnowledgeSourceIds.value"
+                :get-project-name-for-workstation="knowledgeSources.getProjectNameForWorkstation"
+                @update:search-query="searchQuery = $event"
+                @toggle="knowledgeSources.toggleKnowledgeSource"
+            />
+
+            <ChatConfigurationTelaToolsTab
+                v-else-if="activeTab === 'tela-tools'"
+                :search-query="searchQuery"
+                :canvas="canvas"
+                :filtered-canvas-tools="telaTools.filteredCanvasTools.value"
+                :selected-tool-ids="telaTools.selectedToolIds.value"
+                :all-tools-selected="telaTools.allToolsSelected.value"
+                :get-project-name="telaTools.getProjectName"
+                @update:search-query="searchQuery = $event"
+                @toggle-tool="telaTools.toggleCanvasTool"
+                @toggle-all="telaTools.toggleAllTools"
+            />
+
+            <ChatConfigurationExternalSkillsTab
+                v-else-if="activeTab === 'external-skills'"
+                :search-query="searchQuery"
+                :displayed-skills="externalSkills.displayedSkills.value"
+                :filtered-skills="externalSkills.filteredSkills.value"
+                :has-changes="externalSkills.hasChanges.value"
+                :is-pending="externalSkills.isPending"
+                :skill-modal-open="externalSkills.skillModalOpen.value"
+                :skill-ref-input="externalSkills.skillRefInput.value"
+                :skill-error="externalSkills.skillError.value"
+                :discovering-skills="externalSkills.discoveringSkills.value"
+                :git-hub-button-text="gitHubButtonText"
+                @update:search-query="searchQuery = $event"
+                @update:skill-modal-open="externalSkills.skillModalOpen.value = $event"
+                @update:skill-ref-input="externalSkills.skillRefInput.value = $event"
+                @remove-skill="externalSkills.removeSkill"
+                @close-skill-modal="externalSkills.closeSkillModal"
+                @handle-add-skill-and-close="externalSkills.handleAddSkillAndClose"
+                @connect-git-hub="externalSkills.connectGitHub"
+            />
+
+            <ChatConfigurationCredentialsTab
+                v-else-if="activeTab === 'credentials' && features.credentials"
+                :search-query="searchQuery"
+                @update:search-query="searchQuery = $event"
+            />
+        </ChatConfigurationMobileShell>
+    </Teleport>
+
     <TelaModal
+        v-if="!isMobile"
         :model-value="open"
         modal-width="lg"
         compact
@@ -359,17 +465,17 @@ function cancelDiscard() {
                 </div>
             </div>
         </div>
-
-        <TelaConfirmationModal
-            v-model:open="showDiscardConfirm"
-            title="Descartar alterações?"
-            variant="danger"
-            confirm-button-text="Descartar"
-            cancel-button-text="Continuar editando"
-            @confirm="confirmDiscard"
-            @cancel="cancelDiscard"
-        >
-            Você tem alterações não salvas. Deseja descartá-las?
-        </TelaConfirmationModal>
     </TelaModal>
+
+    <TelaConfirmationModal
+        v-model:open="showDiscardConfirm"
+        title="Descartar alterações?"
+        variant="danger"
+        confirm-button-text="Descartar"
+        cancel-button-text="Continuar editando"
+        @confirm="confirmDiscard"
+        @cancel="cancelDiscard"
+    >
+        Você tem alterações não salvas. Deseja descartá-las?
+    </TelaConfirmationModal>
 </template>

package/dist/runtime/embed/components/ChatEmbed.vue

@@ -2,12 +2,14 @@
 import { useChatAuth } from "#chat-auth";
 import { provideEmbedConfig, useEmbedConfig } from "../../composables/useEmbedConfig";
 import { provideChatAction } from "../../composables/useChatAction";
-import { normalizeTelaAgentId } from "../../utils/tela-chat";
+import { normalizeConversationScope, normalizeTelaAgentId, resolveConversationScopeKeySegment } from "../../utils/tela-chat";
 import ChatEmbedInner from "./ChatEmbedInner.vue";
 const props = defineProps({
   conversationId: { type: [String, null], required: false },
   initialConversationId: { type: [String, null], required: false },
+  conversationScope: { type: [String, null], required: false },
   hideSidebar: { type: Boolean, required: false },
+  hideSettings: { type: Boolean, required: false },
   loadingMessages: { type: [Array, null], required: false },
   loadingMessagesMode: { type: [String, null], required: false },
   customComponents: { type: Object, required: false },
@@ -23,13 +25,17 @@ const parentEmbedConfig = useEmbedConfig();
 const { activeOrganization } = useChatAuth();
 const workspaceId = computed(() => activeOrganization.value?.id?.trim() ?? "");
 const normalizedTelaAgentId = computed(() => normalizeTelaAgentId(props.telaAgentId));
+const normalizedConversationScope = computed(() => normalizeConversationScope(props.conversationScope));
+const hideSettings = computed(() => props.hideSettings ?? false);
 const ignoredPropsWarningKey = ref(null);
 provideEmbedConfig({
   workspaceId,
   telaAgentId: normalizedTelaAgentId,
+  conversationScope: normalizedConversationScope,
   telaAgentInputs: computed(() => props.telaAgentInputs),
   workspaceSettings: computed(() => props.workspaceSettings),
   hideSidebar: computed(() => props.hideSidebar),
+  hideSettings,
   loadingMessages: computed(() => props.loadingMessages),
   loadingMessagesMode: computed(() => props.loadingMessagesMode),
   customComponents: computed(() => props.customComponents),
@@ -62,10 +68,11 @@ provideChatAction((payload) => {
 <template>
     <ChatEmbedInner
         v-if="workspaceId"
-        :key="`${workspaceId}:${normalizedTelaAgentId ?? 'default-chat'}`"
+        :key="`${workspaceId}:${normalizedTelaAgentId ?? 'default-chat'}:scope:${resolveConversationScopeKeySegment(normalizedConversationScope)}`"
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
         :hide-sidebar="hideSidebar"
+        :hide-settings="hideSettings"
         :user="normalizedTelaAgentId ? null : user"
         :features="features"
         @update:conversation-id="$emit('update:conversationId', $event)"