@meistrari/chat-nuxt 1.7.0 → 1.8.1

package/dist/module.json

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

package/dist/module.mjs

@@ -196,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,
@@ -241,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,

package/dist/runtime/components/MeistrariChatEmbed.vue

@@ -1,9 +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 },
@@ -15,6 +16,7 @@ defineProps({
   features: { type: Object, required: false }
 });
 defineEmits(["update:conversationId", "action"]);
+const hideSettings = computed(() => props.hideSettings ?? false);
 </script>
 
 <template>
@@ -26,6 +28,7 @@ defineEmits(["update:conversationId", "action"]);
         :initial-conversation-id="initialConversationId"
         :conversation-scope="conversationScope"
         :hide-sidebar="hideSidebar"
+        :hide-settings="hideSettings"
         :features="features"
         :loading-messages="loadingMessages"
         :loading-messages-mode="loadingMessagesMode"
@@ -42,6 +45,7 @@ defineEmits(["update:conversationId", "action"]);
         :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;