@meistrari/chat-nuxt 1.6.0 → 1.8.0

package/README.md

@@ -161,11 +161,18 @@ The chat workspace is resolved from the authenticated `activeOrganization` provi
 <MeistrariChatEmbed tela-agent-id="agent_123" />
 ```
 
+`conversationScope` works in both runtimes. In default chat mode, it isolates conversations inside the authenticated workspace without requiring a Tela agent:
+
+```vue
+<MeistrariChatEmbed :conversation-scope="`user:${userId}`" />
+```
+
 Host apps can also provide Tela agent inputs directly. When `telaAgentInputs` is non-null, the chat sends those inputs with each agent run and does not render the agent variables panel.
 
 ```vue
 <MeistrariChatEmbed
     tela-agent-id="agent_123"
+    :conversation-scope="`customer:${customerId}`"
     :tela-agent-inputs="[
         { type: 'text', name: 'customer_id', content: customerId },
     ]"
@@ -203,6 +210,7 @@ Key props for embedding:
 - **`:hide-sidebar="true"`** — removes the conversation list, keeps just the chat
 - **`v-model:conversation-id`** — sync the active conversation with your app's state
 - **`:initial-conversation-id`** — open a specific conversation on mount
+- **`conversation-scope`** — isolate conversation history inside the same workspace or Tela agent
 
 ## `<MeistrariChatEmbed>` Props
 
@@ -211,6 +219,7 @@ Key props for embedding:
 | `hideSidebar` | `boolean` | `false` | Hide conversation list sidebar |
 | `conversationId` | `string \| null` | `null` | Controlled conversation (supports v-model) |
 | `initialConversationId` | `string \| null` | `null` | Open this conversation on mount |
+| `conversationScope` | `string \| null` | `null` | Isolate conversation history by technical scope within the current workspace and runtime |
 | `telaAgentId` | `string` | — | Use Tela agent mode for this embed |
 | `telaAgentInputs` | `TelaAgentExecutionInput[] \| null` | `undefined` | Inputs sent with each Tela agent run; hides the variables panel when non-null |
 | `workspaceSettings` | `WorkspaceSettings \| null` | `null` | Override settings from host app |
@@ -221,6 +230,22 @@ Key props for embedding:
 
 `loadingMessagesMode` only applies when `loadingMessages` has at least one non-empty message.
 
+Use `conversationScope` when you need multiple chat surfaces to share the same authenticated workspace but keep separate histories. This is useful for per-user inboxes, record detail pages, customer workspaces, template previews, workflow steps, or any app route where the same chat should only show conversations for that route's domain object. The scope is applied together with the workspace and, when present, the `telaAgentId`.
+
+Scoped embeds only see conversations created with the same scope. Unscoped embeds only see unscoped conversations, so adding a scope will not mix with existing workspace-level history. Scope values are technical identifiers: they are trimmed, blank strings become `null`, and server requests accept 1-200 characters from `A-Z`, `a-z`, `0-9`, `.`, `_`, `:`, `/`, and `-`.
+
+```vue
+<!-- Default chat mode: workspace + scope -->
+<MeistrariChatEmbed :conversation-scope="`user:${userId}`" />
+<MeistrariChatEmbed :conversation-scope="`customer:${customerId}`" />
+
+<!-- Tela agent mode: workspace + telaAgentId + scope -->
+<MeistrariChatEmbed
+    tela-agent-id="agent_123"
+    :conversation-scope="`template:${templateId}`"
+/>
+```
+
 **Events:**
 
 | Event | Payload | Description |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { existsSync, readFileSync, mkdirSync, symlinkSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { join, dirname } from 'node:path';
-import { defineNuxtModule, createResolver, addTemplate, addPlugin, addImportsDir, addComponent, addComponentsDir } from 'nuxt/kit';
+import { defineNuxtModule, createResolver, addTemplate, addTypeTemplate, addPlugin, addImportsDir, addComponent, addComponentsDir } from 'nuxt/kit';
 
 const agentEnvironmentResolverCandidates = [
   "server/chat/resolve-agent-environment.ts",
@@ -179,6 +179,7 @@ const DEFAULT_FEATURES = {
   generateTitle: false,
   credentials: false
 };
+const VUE_COMPONENT_EXTENSIONS = [".vue"];
 function resolveChatAuthMode(runtimeConfig) {
   const publicConfig = runtimeConfig.public;
   const telaAuth = publicConfig?.telaAuth;
@@ -195,6 +196,7 @@ export function useChatAuth() {
     return {
         user: auth.user,
         activeOrganization: auth.activeOrganization,
+        logout: auth.logout,
         getToken: auth.getToken,
         getAvailableOrganizations: auth.getAvailableOrganizations,
         switchOrganization: auth.switchOrganization,
@@ -240,6 +242,7 @@ export function useChatAuth() {
     return {
         user: session.user,
         activeOrganization: organization.activeOrganization,
+        logout: session.signOut,
         getToken: session.getToken,
         getAvailableOrganizations: organization.listOrganizations,
         switchOrganization: organization.setActiveOrganization,
@@ -342,6 +345,22 @@ const module$1 = defineNuxtModule({
       filename: "chat-nuxt/auth.mjs",
       getContents: () => buildChatAuthTemplate(chatAuthMode)
     });
+    const chatAuthTypeTemplate = addTypeTemplate({
+      filename: "chat-nuxt/chat-auth.d.ts",
+      src: join(runtimeDir, "types/chat-auth.d.ts")
+    });
+    addTypeTemplate({
+      filename: "chat-nuxt/chat-agent-environment-resolver.d.ts",
+      src: join(runtimeDir, "types/chat-agent-environment-resolver.d.ts")
+    }, {
+      nitro: true,
+      nuxt: true
+    });
+    nuxt.hook("prepare:types", ({ tsConfig }) => {
+      tsConfig.compilerOptions ||= {};
+      tsConfig.compilerOptions.paths ||= {};
+      tsConfig.compilerOptions.paths["#chat-auth"] = [chatAuthTypeTemplate.dst];
+    });
     if (!Array.isArray(nuxt.options.extends)) {
       nuxt.options.extends = nuxt.options.extends ? [nuxt.options.extends] : [];
     }
@@ -401,10 +420,12 @@ const module$1 = defineNuxtModule({
       priority: 1e3
     });
     addComponentsDir({
-      path: join(runtimeDir, "components")
+      path: join(runtimeDir, "components"),
+      extensions: VUE_COMPONENT_EXTENSIONS
     });
     addComponentsDir({
       path: join(runtimeDir, "embed/components"),
+      extensions: VUE_COMPONENT_EXTENSIONS,
       pathPrefix: false
     });
     nuxt.hook("vite:extendConfig", (config, { isServer }) => {

package/dist/runtime/components/MeistrariChatEmbed.vue

@@ -1,8 +1,10 @@
 <script setup>
-defineProps({
+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 },
@@ -14,6 +16,7 @@ defineProps({
   features: { type: Object, required: false }
 });
 defineEmits(["update:conversationId", "action"]);
+const hideSettings = computed(() => props.hideSettings ?? false);
 </script>
 
 <template>
@@ -23,7 +26,9 @@ defineEmits(["update:conversationId", "action"]);
         :tela-agent-inputs="telaAgentInputs"
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
+        :conversation-scope="conversationScope"
         :hide-sidebar="hideSidebar"
+        :hide-settings="hideSettings"
         :features="features"
         :loading-messages="loadingMessages"
         :loading-messages-mode="loadingMessagesMode"
@@ -38,7 +43,9 @@ defineEmits(["update:conversationId", "action"]);
         :user="user"
         :conversation-id="conversationId"
         :initial-conversation-id="initialConversationId"
+        :conversation-scope="conversationScope"
         :hide-sidebar="hideSidebar"
+        :hide-settings="hideSettings"
         :features="features"
         :loading-messages="loadingMessages"
         :loading-messages-mode="loadingMessagesMode"

package/dist/runtime/components/chat/bash-widget.vue

@@ -31,15 +31,15 @@ const isOutputCode = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
-            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+        <div class="px-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                 Bash
             </h3>
             <TelaStatus :variant="statusVariant" :label="statusLabel" />
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- Command section -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/doc-sdk-widget.vue

@@ -31,15 +31,15 @@ const isOutputCode = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
-            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary">
+        <div class="px-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary">
                 {{ skillName }}
             </h3>
             <TelaStatus :variant="statusVariant" :label="statusLabel" />
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- Result -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/files-view.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { useClipboard } from "@vueuse/core";
 import { formatFileSize, formatUploadDate, getFileIcon, getFileTypeLabel } from "../../utils/file";
 const props = defineProps({
   conversationId: { type: String, required: true }
@@ -8,7 +7,7 @@ const conversationIdRef = computed(() => props.conversationId);
 const { files, loading } = useConversationFiles(conversationIdRef);
 const { openPreview, updatePreview, setError } = useFilePreviewPanel();
 const { getCached, fetchUrlAsBase64, setCache } = useMediaCache();
-const { copy } = useClipboard();
+const { downloadFile, copyFileLink } = useConversationFileDownloads();
 const searchQuery = ref("");
 const fileTypeFilter = ref(null);
 const currentRequestId = ref(0);
@@ -144,77 +143,17 @@ async function handleFileClick(file) {
     });
   }
 }
-const statusToast = useStatusToast();
-async function handleDownload(file) {
-  statusToast.update({
-    text: "Baixando arquivo...",
-    loading: true
-  });
-  try {
-    let downloadUrl = file.url;
-    if (file.url.startsWith("vault://")) {
-      const { url } = await $fetch("/api/vault/resolve", {
-        method: "POST",
-        body: { reference: file.url }
-      });
-      downloadUrl = url;
-    }
-    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 handleCopyLink(file) {
-  try {
-    let publicUrl = file.url;
-    if (file.url.startsWith("vault://")) {
-      const { url } = await $fetch("/api/vault/resolve", {
-        method: "POST",
-        body: { reference: file.url }
-      });
-      publicUrl = url;
-    }
-    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"
-    });
-  }
-}
 function getFileMenuItems(file) {
   return [
     {
       label: "Copiar link",
       icon: "i-ph-link",
-      click: () => handleCopyLink(file)
+      click: () => copyFileLink(file)
     },
     {
       label: "Baixar",
       icon: "i-ph-download-simple",
-      click: () => handleDownload(file)
+      click: () => downloadFile(file)
     }
   ];
 }

package/dist/runtime/components/chat/generic-tool-widget.vue

@@ -84,15 +84,15 @@ const isEmptyMessage = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
-            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+        <div class="px-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                 {{ name }}
             </h3>
             <TelaStatus :variant="statusVariant" :label="statusLabel" />
         </div>
 
         <!-- Content -->
-        <div v-if="hasContent" class="px-24px pb-24px space-y-16px">
+        <div v-if="hasContent" class="px-16px pb-16px space-y-16px">
             <!-- Parameters section -->
             <div v-if="input && Object.keys(input).length > 0">
                 <!-- Special handling for TodoWrite tool -->

package/dist/runtime/components/chat/grep-widget.vue

@@ -122,9 +122,9 @@ function highlightMatch(content) {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
+        <div class="px-16px py-16px flex items-center justify-between">
             <div class="flex-1 min-w-0">
-                <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                     Grep
                 </h3>
                 <p class="text-12px text-secondary truncate mt-2px">
@@ -136,7 +136,7 @@ function highlightMatch(content) {
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- Search info -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/message-bubble.vue

@@ -201,7 +201,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                 v-if="hasReasoning || isPending"
                 :reasoning-data="message.reasoningData ?? []"
                 :animate="wasEverPending"
-                :completed="message.status === 'completed'"
+                :completed="!isPending"
                 :created-at="message.createdAt"
                 :updated-at="message.updatedAt"
             />

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

@@ -20,12 +20,14 @@ type __VLS_Props = {
     showCancelButton?: boolean;
 };
 declare function addFiles(files: File[], inputName?: string): void;
+declare function setDraft(text: string): void;
 type __VLS_ModelProps = {
     'model'?: ModelOption;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     addFiles: typeof addFiles;
+    setDraft: typeof setDraft;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model": (value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
 } & {

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

@@ -395,14 +395,31 @@ function addFiles(files, inputName) {
   });
   queueFiles(validFiles, inputName);
 }
+function setDraft(text) {
+  content.value = text;
+  if (editorRef.value) {
+    editorRef.value.textContent = text;
+    const range = document.createRange();
+    range.selectNodeContents(editorRef.value);
+    range.collapse(false);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    if (range)
+      selection?.addRange(range);
+  }
+  nextTick(() => {
+    editorRef.value?.focus();
+  });
+}
 defineExpose({
-  addFiles
+  addFiles,
+  setDraft
 });
 </script>
 
 <template>
-    <div :class="centered ? '' : hasDisclaimer ? 'px-24px' : 'px-24px pb-24px'" bg-transparent>
-        <div :class="centered ? 'w-700px' : 'max-w-800px'" mx-auto>
+    <div :class="centered ? 'w-full' : hasDisclaimer ? 'px-24px' : 'px-24px pb-24px'" bg-transparent>
+        <div :class="centered ? 'w-full max-w-700px' : 'max-w-800px'" mx-auto>
             <Transition name="agent-inputs-panel-motion" mode="out-in" appear>
                 <div
                     v-if="hasAgentInputs"
@@ -511,7 +528,6 @@ defineExpose({
                     </Transition>
                 </div>
             </Transition>
-
             <div v-if="pendingFiles.length > 0" flex flex-wrap gap-8px mb-12px>
                 <div
                     v-for="pendingFile in pendingFiles"
@@ -668,5 +684,5 @@ defineExpose({
 </template>
 
 <style scoped>
-.input-container{border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06);position:relative;z-index:2}.input-locked{background:var(--Base-Gray-gray-100,#f3f4f6);border:.5px solid var(--Base-Neutral-neutral-300,#d9d9d9);box-shadow:0 12px 20px 0 hsla(0,0%,64%,.06)}.agent-inputs-panel{box-shadow:0 3px 10px 0 hsla(0,0%,64%,.06);position:relative;transform-origin:bottom center;will-change:max-height,opacity,transform,filter;z-index:1}.agent-inputs-panel-motion-enter-active,.agent-inputs-panel-motion-leave-active{overflow:hidden;transition:max-height .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-panel-motion-enter-from,.agent-inputs-panel-motion-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(46px) scale(.985)}.agent-inputs-panel-motion-enter-to,.agent-inputs-panel-motion-leave-from{filter:blur(0);max-height:560px;opacity:1;transform:translateY(0) scale(1)}.agent-inputs-content{transform-origin:bottom center;will-change:max-height,opacity,transform,filter}.agent-inputs-content-enter-active,.agent-inputs-content-leave-active{overflow:hidden;transition:max-height .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-content-enter-from,.agent-inputs-content-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(14px) scale(.985)}.agent-inputs-content-enter-to,.agent-inputs-content-leave-from{filter:blur(0);max-height:900px;opacity:1;transform:translateY(0) scale(1)}.agent-text-input{border:.5px solid #e5e7eb;border-radius:8px;color:#111827;font-size:13px;line-height:18px;min-height:64px;outline:none;padding:8px 10px;resize:vertical;width:100%}.agent-text-input:focus{border-color:#d1d5db}.agent-text-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.agent-file-variable-select{background:#fff;border:.5px solid #d1d5db;border-radius:6px;color:#374151;font-size:12px;height:28px;max-width:160px;outline:none;padding:0 8px}.editor-content{caret-color:#111827;color:#111827;max-height:200px;outline:none;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.editor-content.is-empty:before{color:#bdc4cc;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.icon-button:disabled{cursor:not-allowed;opacity:.5}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}.stop-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:relative;transition:opacity .15s ease;width:32px}.stop-button:hover{opacity:.8}.stop-button-ring{border:2px solid #e5e7eb;border-radius:50%;inset:0;position:absolute}.stop-button-ring:before{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#111827;content:"";inset:-2px;position:absolute}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.input-container{border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06);position:relative;z-index:2}.input-locked{background:var(--Base-Gray-gray-100,#f3f4f6);border:.5px solid var(--Base-Neutral-neutral-300,#d9d9d9);box-shadow:0 12px 20px 0 hsla(0,0%,64%,.06)}.agent-inputs-panel{box-shadow:0 3px 10px 0 hsla(0,0%,64%,.06);position:relative;transform-origin:bottom center;will-change:max-height,opacity,transform,filter;z-index:1}.agent-inputs-panel-motion-enter-active,.agent-inputs-panel-motion-leave-active{overflow:hidden;transition:max-height .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-panel-motion-enter-from,.agent-inputs-panel-motion-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(46px) scale(.985)}.agent-inputs-panel-motion-enter-to,.agent-inputs-panel-motion-leave-from{filter:blur(0);max-height:560px;opacity:1;transform:translateY(0) scale(1)}.agent-inputs-content{transform-origin:bottom center;will-change:max-height,opacity,transform,filter}.agent-inputs-content-enter-active,.agent-inputs-content-leave-active{overflow:hidden;transition:max-height .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}.agent-inputs-content-enter-from,.agent-inputs-content-leave-to{filter:blur(2px);max-height:0;opacity:0;transform:translateY(14px) scale(.985)}.agent-inputs-content-enter-to,.agent-inputs-content-leave-from{filter:blur(0);max-height:900px;opacity:1;transform:translateY(0) scale(1)}.agent-text-input{border:.5px solid #e5e7eb;border-radius:8px;color:#111827;font-size:13px;line-height:18px;min-height:64px;outline:none;padding:8px 10px;resize:vertical;width:100%}.agent-text-input:focus{border-color:#d1d5db}.agent-text-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.agent-file-variable-select{background:#fff;border:.5px solid #d1d5db;border-radius:6px;color:#374151;font-size:12px;height:28px;max-width:160px;outline:none;padding:0 8px}.editor-content{caret-color:#111827;color:#111827;max-height:200px;outline:none;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.editor-content.is-empty:before{color:#bdc4cc;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.icon-button:disabled{cursor:not-allowed;opacity:.5}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}@media (max-width:480px){.custom-scrollbar{scrollbar-width:none}.custom-scrollbar::-webkit-scrollbar{display:none}}.stop-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:relative;transition:opacity .15s ease;width:32px}.stop-button:hover{opacity:.8}.stop-button-ring{border:2px solid #e5e7eb;border-radius:50%;inset:0;position:absolute}.stop-button-ring:before{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#111827;content:"";inset:-2px;position:absolute}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
 </style>

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

@@ -20,12 +20,14 @@ type __VLS_Props = {
     showCancelButton?: boolean;
 };
 declare function addFiles(files: File[], inputName?: string): void;
+declare function setDraft(text: string): void;
 type __VLS_ModelProps = {
     'model'?: ModelOption;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     addFiles: typeof addFiles;
+    setDraft: typeof setDraft;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model": (value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
 } & {

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

@@ -27,7 +27,7 @@ onMounted(scrollToBottom);
         ref="containerRef"
         flex-1
         overflow-y-auto
-        pt-88px pb-24px px-24px
+        pt-72px pb-24px px-16px
     >
         <div max-w-800px mx-auto>
             <div v-if="loading" flex="~ col" gap-16px>

package/dist/runtime/components/chat/mobile/files/file-preview.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ConversationFile } from '#chat-runtime/types/chat';
+type __VLS_Props = {
+    file: ConversationFile | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/files/file-preview.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { onKeyStroke } from "@vueuse/core";
+import { formatFileSize, getFileTypeLabel, normalizeMimeType } from "#chat-runtime/utils/file";
+const props = defineProps({
+  file: { type: null, required: true }
+});
+const emit = defineEmits(["close"]);
+const { resolveDownloadUrl, downloadFile } = useConversationFileDownloads();
+const normalizedMimeType = computed(() => normalizeMimeType(props.file?.mimeType ?? ""));
+const isImage = computed(() => normalizedMimeType.value.startsWith("image/"));
+const resolvedUrl = ref(null);
+const resolving = ref(false);
+watch(() => props.file, async (file) => {
+  resolvedUrl.value = null;
+  if (!file) {
+    return;
+  }
+  if (!file.url.startsWith("vault://")) {
+    resolvedUrl.value = file.url;
+    return;
+  }
+  resolving.value = true;
+  try {
+    const url = await resolveDownloadUrl(file);
+    if (props.file?.id === file.id) {
+      resolvedUrl.value = url;
+    }
+  } catch (err) {
+    console.error("Failed to resolve preview URL", err);
+  } finally {
+    resolving.value = false;
+  }
+}, { immediate: true });
+onKeyStroke("Escape", () => {
+  if (props.file) {
+    emit("close");
+  }
+});
+function handleDownload() {
+  if (props.file) {
+    void downloadFile(props.file);
+  }
+}
+</script>
+
+<template>
+    <Transition name="preview">
+        <div
+            v-if="file"
+            class="preview"
+            :class="isImage ? 'preview--image' : 'preview--surface'"
+            role="dialog"
+            aria-modal="true"
+        >
+            <div class="preview__topbar" :class="isImage ? 'preview__topbar--dark' : 'preview__topbar--light'">
+                <button
+                    class="preview__icon-btn"
+                    aria-label="Fechar"
+                    @click="emit('close')"
+                >
+                    <span i-ph-x />
+                </button>
+
+                <div flex="~ col 1" min-w-0 px-8px>
+                    <span class="preview__title" truncate>{{ file.name }}</span>
+                    <span class="preview__meta" truncate>
+                        {{ getFileTypeLabel(file.mimeType) }}<template v-if="file.size">
+                            · {{ formatFileSize(file.size) }}
+                        </template>
+                    </span>
+                </div>
+
+                <button
+                    class="preview__icon-btn"
+                    aria-label="Baixar"
+                    @click="handleDownload"
+                >
+                    <span i-ph-download-simple />
+                </button>
+            </div>
+
+            <div class="preview__body">
+                <div v-if="resolving && !resolvedUrl" flex items-center justify-center h-full w-full>
+                    <span
+                        i-ph-spinner animate-spin text-32px
+                        :class="isImage ? 'text-white' : 'text-neutral-400'"
+                    />
+                </div>
+
+                <img
+                    v-else-if="isImage && resolvedUrl"
+                    :src="resolvedUrl"
+                    :alt="file.name"
+                    class="preview__image"
+                >
+
+                <RenderersArtifactDisplay
+                    v-else-if="resolvedUrl"
+                    :url="resolvedUrl"
+                    :mime-type="normalizedMimeType"
+                    :name="file.name"
+                    class="preview__renderer"
+                    @download="handleDownload"
+                />
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.preview{display:flex;flex-direction:column;inset:0;position:absolute;z-index:50}.preview--image{background:#0a0a0b}.preview--surface{background:#fff}.preview-enter-active,.preview-leave-active{transition:transform .26s cubic-bezier(.2,.8,.2,1)}.preview-enter-from,.preview-leave-to{transform:translateY(100%)}.preview__topbar{align-items:center;display:flex;flex-shrink:0;gap:4px;padding:10px 10px 8px}.preview__topbar--dark{background:rgba(0,0,0,.4);color:#fff}.preview__topbar--light{border-bottom:.5px solid #e8e8e8;color:#171717}.preview__icon-btn{align-items:center;background:transparent;border-radius:8px;color:inherit;display:inline-flex;font-size:20px;height:32px;justify-content:center;transition:background .15s;width:32px}.preview__icon-btn:hover{background:hsla(0,0%,100%,.08)}.preview--surface .preview__icon-btn:hover{background:rgba(0,0,0,.05)}.preview__title{display:block;font-size:14px;font-weight:600;letter-spacing:-.15px;line-height:18px}.preview__meta{display:block;font-size:11px;line-height:14px;opacity:.8}.preview__body{align-items:center;display:flex;flex:1;justify-content:center;min-height:0;overflow:auto}.preview--image .preview__body{overflow:hidden}.preview__image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.preview__renderer{display:block;min-height:100%;width:100%}
+</style>

package/dist/runtime/components/chat/mobile/files/file-preview.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ConversationFile } from '#chat-runtime/types/chat';
+type __VLS_Props = {
+    file: ConversationFile | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/mobile/files/files-view.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    conversationId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    viewInChat: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onViewInChat?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;