@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/embed/components/mobile/chat-mobile-drawer.vue

@@ -0,0 +1,486 @@
+<script setup>
+import { useChatAuth } from "#chat-auth";
+import { useConversationGroups } from "../../../conversations/composables/conversation-groups";
+import { useConversations } from "../../../conversations/composables/conversations";
+import { useEmbedConfig } from "../../composables/embed-config";
+import { groupConversationsByGroup } from "../../../conversations/groups";
+import { conversationListSkeletonRows } from "../../../conversations/list-skeleton";
+import { filterConversationsByTitle } from "../../../conversations/search";
+import { formatRelativeTime } from "../../../shared/date-formatting";
+import { resolveChatStateScope } from "../../../conversations/scope";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  conversations: { type: null, required: true },
+  activeId: { type: [String, null], required: true },
+  loading: { type: Boolean, required: false },
+  userName: { type: String, required: false },
+  userEmail: { type: String, required: false },
+  userImage: { type: String, required: false }
+});
+const emit = defineEmits(["close", "select", "newConvo"]);
+const DRAG_OPEN_GROUP_DELAY_MS = 400;
+const initial = computed(() => {
+  const source = props.userName ?? props.userEmail ?? "U";
+  return source.charAt(0).toUpperCase();
+});
+const conversationSearch = ref("");
+const draggedConversationId = ref(null);
+const dropTargetGroupId = ref(void 0);
+const openGroupIds = ref(/* @__PURE__ */ new Set());
+const groupsReady = ref(false);
+let dragOpenGroupTimeout = null;
+let dragOpenGroupId = null;
+const embedConfig = useEmbedConfig();
+const { activeOrganization } = useChatAuth();
+const { groups, fetchGroups } = useConversationGroups();
+const { moveConversationToGroup } = useConversations();
+const runtimeScope = computed(() => resolveChatStateScope(
+  embedConfig?.workspaceId.value || activeOrganization.value?.id,
+  embedConfig?.telaAgentId.value,
+  embedConfig?.conversationScope?.value
+));
+const openGroupsStorageKey = computed(() => `conversation-group-open:${runtimeScope.value}`);
+const filteredConversations = computed(
+  () => filterConversationsByTitle(props.conversations, conversationSearch.value, {
+    fallbackTitle: "Nova conversa",
+    shouldInclude: (conversation) => !conversation.title && conversation.id === props.activeId
+  })
+);
+const hasConversationSearchQuery = computed(() => conversationSearch.value.trim().length > 0);
+const filteredGroupedConversations = computed(() => groupConversationsByGroup(filteredConversations.value, groups.value));
+const allGroupedConversations = computed(() => groupConversationsByGroup(props.conversations, groups.value));
+const groupedConversations = computed(() => {
+  if (!hasConversationSearchQuery.value)
+    return filteredGroupedConversations.value;
+  const allItemsByGroupId = new Map(
+    allGroupedConversations.value.groups.map((groupBucket) => [groupBucket.group.id, groupBucket.items])
+  );
+  return {
+    groups: filteredGroupedConversations.value.groups.map(
+      (groupBucket) => doesGroupMatchSearch(groupBucket.group.name) ? {
+        ...groupBucket,
+        items: allItemsByGroupId.get(groupBucket.group.id) ?? []
+      } : groupBucket
+    ),
+    unfiled: filteredGroupedConversations.value.unfiled
+  };
+});
+const visibleGroupBuckets = computed(() => groupedConversations.value.groups.filter((groupBucket) => {
+  if (!hasConversationSearchQuery.value)
+    return true;
+  return groupBucket.items.length > 0 || doesGroupMatchSearch(groupBucket.group.name);
+}).map((groupBucket) => {
+  const open = isGroupOpen(groupBucket.group.id) || hasConversationSearchQuery.value && (groupBucket.items.length > 0 || doesGroupMatchSearch(groupBucket.group.name));
+  return {
+    ...groupBucket,
+    open,
+    folderIcon: open ? "i-ph-folder-open" : "i-ph-folder",
+    conversationCountLabel: groupBucket.items.length > 0 ? String(groupBucket.items.length) : null,
+    showNewConversationAction: !hasConversationSearchQuery.value,
+    showSearchEmpty: hasConversationSearchQuery.value && groupBucket.items.length === 0
+  };
+}));
+const showGroupCreationPrompt = computed(
+  () => groupsReady.value && !hasConversationSearchQuery.value && groups.value.length === 0
+);
+const hasConversationContent = computed(() => {
+  if (hasConversationSearchQuery.value)
+    return visibleGroupBuckets.value.length > 0 || groupedConversations.value.unfiled.length > 0;
+  return showGroupCreationPrompt.value || groups.value.length > 0 || filteredConversations.value.length > 0;
+});
+const shouldShowUngroupedHeader = computed(() => visibleGroupBuckets.value.length > 0);
+const ungroupedConversationLabel = computed(() => `Conversas \xB7 ${groupedConversations.value.unfiled.length}`);
+const activeGroupId = computed(() => {
+  const currentConversation = props.conversations.find((conversation) => conversation.id === props.activeId);
+  return currentConversation?.groupId ?? null;
+});
+onMounted(() => {
+  void Promise.resolve(fetchGroups()).finally(() => {
+    groupsReady.value = true;
+  });
+  try {
+    const stored = localStorage.getItem(openGroupsStorageKey.value);
+    if (stored) {
+      openGroupIds.value = new Set(JSON.parse(stored));
+    }
+  } catch {
+  }
+});
+watch(openGroupIds, (groupIds) => {
+  if (typeof localStorage === "undefined")
+    return;
+  try {
+    localStorage.setItem(openGroupsStorageKey.value, JSON.stringify([...groupIds]));
+  } catch {
+  }
+});
+watch(activeGroupId, (groupId) => {
+  if (groupId) {
+    setGroupOpen(groupId, true);
+  }
+}, { immediate: true });
+onBeforeUnmount(() => {
+  clearDragOpenGroup();
+});
+function isGroupOpen(groupId) {
+  return openGroupIds.value.has(groupId);
+}
+function setGroupOpen(groupId, open) {
+  const nextOpenGroupIds = new Set(openGroupIds.value);
+  if (open) {
+    nextOpenGroupIds.add(groupId);
+  } else {
+    nextOpenGroupIds.delete(groupId);
+  }
+  openGroupIds.value = nextOpenGroupIds;
+}
+function toggleGroup(groupId) {
+  setGroupOpen(groupId, !isGroupOpen(groupId));
+}
+function doesGroupMatchSearch(groupName) {
+  const query = conversationSearch.value.trim().toLowerCase();
+  return query.length > 0 && groupName.toLowerCase().includes(query);
+}
+function handleSelect(id) {
+  emit("select", id);
+  emit("close");
+}
+function handleNew(groupId) {
+  if (groupId) {
+    setGroupOpen(groupId, true);
+  }
+  emit("newConvo", groupId);
+  emit("close");
+}
+function handleConversationDragStart(event, id) {
+  draggedConversationId.value = id;
+  event.dataTransfer?.setData("text/plain", id);
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+  }
+}
+function clearDragState() {
+  draggedConversationId.value = null;
+  dropTargetGroupId.value = void 0;
+  clearDragOpenGroup();
+}
+function clearDragOpenGroup() {
+  if (dragOpenGroupTimeout) {
+    clearTimeout(dragOpenGroupTimeout);
+  }
+  dragOpenGroupTimeout = null;
+  dragOpenGroupId = null;
+}
+function scheduleDragOpenGroup(groupId) {
+  if (!groupId || isGroupOpen(groupId)) {
+    clearDragOpenGroup();
+    return;
+  }
+  if (dragOpenGroupId === groupId)
+    return;
+  clearDragOpenGroup();
+  dragOpenGroupId = groupId;
+  dragOpenGroupTimeout = setTimeout(() => {
+    setGroupOpen(groupId, true);
+    clearDragOpenGroup();
+  }, DRAG_OPEN_GROUP_DELAY_MS);
+}
+function handleDragEnter(groupId) {
+  if (!draggedConversationId.value)
+    return;
+  dropTargetGroupId.value = groupId;
+  scheduleDragOpenGroup(groupId);
+}
+function handleDragOver(event, groupId) {
+  if (!draggedConversationId.value)
+    return;
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = "move";
+  }
+  dropTargetGroupId.value = groupId;
+  scheduleDragOpenGroup(groupId);
+}
+function handleDragLeave(event, groupId) {
+  const currentTarget = event.currentTarget;
+  const relatedTarget = event.relatedTarget;
+  if (currentTarget && relatedTarget && currentTarget.contains(relatedTarget))
+    return;
+  if (dropTargetGroupId.value === groupId) {
+    dropTargetGroupId.value = void 0;
+    clearDragOpenGroup();
+  }
+}
+function isDropTarget(groupId) {
+  return draggedConversationId.value !== null && dropTargetGroupId.value === groupId;
+}
+async function handleConversationDrop(event, groupId) {
+  const conversationId = event.dataTransfer?.getData("text/plain") || draggedConversationId.value;
+  clearDragState();
+  if (!conversationId)
+    return;
+  await moveConversationToGroup(conversationId, groupId);
+}
+</script>
+
+<template>
+    <Transition name="scrim">
+        <div
+            v-if="open"
+            absolute inset-0 z-30
+            bg="black/32"
+            @click="emit('close')"
+        />
+    </Transition>
+
+    <div
+        absolute top-0 bottom-0 left-0 z-31
+        flex="~ col"
+        bg-white
+        class="mobile-drawer"
+        :class="open ? 'mobile-drawer--open' : ''"
+    >
+        <div
+            flex items-center gap-8px
+            pt-14px pr-14px pb-14px pl-14px
+            b-b=".5px solid"
+            style="border-bottom-color: #F5F5F5"
+        >
+            <div w-28px h-28px rounded-full overflow-hidden flex-shrink-0>
+                <img
+                    v-if="userImage"
+                    :src="userImage"
+                    :alt="userName ?? 'Usu\xE1rio'"
+                    w-full h-full object-cover
+                >
+                <div v-else w-full h-full bg-purple-500 flex items-center justify-center>
+                    <span text-12px text-white font-semibold>{{ initial }}</span>
+                </div>
+            </div>
+            <span flex-1 text-14px font-580 text-neutral-900 truncate tracking="-.15px">
+                {{ userName ?? userEmail ?? "Usu\xE1rio" }}
+            </span>
+            <button
+                flex items-center justify-center
+                w-32px h-32px rounded-8px
+                class="hover:bg-neutral-100 active:scale-94"
+                transition-all
+                aria-label="Fechar menu"
+                @click="emit('close')"
+            >
+                <span i-ph-x text-18px text-neutral-700 />
+            </button>
+        </div>
+
+        <div p-12px flex="~ col" gap-8px>
+            <div flex gap-8px>
+                <button
+                    flex items-center justify-center gap-6px
+                    flex-1 min-w-0 px-12px py-10px rounded-10px
+                    bg-white b=".5px neutral-300" shadow-sm
+                    class="hover:bg-neutral-50"
+                    transition-colors cursor-pointer
+                    @click="handleNew()"
+                >
+                    <span i-ph-chat-circle text-16px text-neutral-900 />
+                    <span text-14px font-580 text-neutral-900 leading-18px tracking="-.15px">
+                        Nova conversa
+                    </span>
+                </button>
+                <ChatConversationNewGroupButton />
+            </div>
+            <ChatConversationSearch v-model="conversationSearch" />
+            <ChatConversationCreatorFilter />
+        </div>
+
+        <div flex-1 overflow-y-auto px-8px pb-8px>
+            <div v-if="loading && conversations.length === 0" flex="~ col" gap-1px py-4px>
+                <div
+                    v-for="row in conversationListSkeletonRows"
+                    :key="row.id"
+                    flex items-center h-44px px-12px rounded-10px
+                >
+                    <TelaSkeleton rounded-6px bg-neutral-200 :style="{ width: row.width, height: '13px' }" />
+                </div>
+            </div>
+            <div v-else-if="!hasConversationContent" p-16px text-center>
+                <p text-14px text-neutral-400>
+                    {{ hasConversationSearchQuery ? "Nenhuma conversa encontrada" : "Nenhuma conversa ainda" }}
+                </p>
+            </div>
+            <div v-else flex="~ col" gap-8px>
+                <div
+                    v-if="showGroupCreationPrompt"
+                    mx-4px
+                    flex="~ col" gap-10px
+                >
+                    <div h-20px flex items-center px-4px>
+                        <span text-12px font-semibold text-neutral-400 uppercase style="letter-spacing: 0">
+                            PASTAS
+                        </span>
+                    </div>
+                    <div flex="~ col" gap-6px>
+                        <div
+                            h-36px px-10px
+                            flex items-center gap-10px
+                            rounded-10px
+                            b=".5px dashed neutral-200"
+                        >
+                            <span i-ph-folder text-16px text-neutral-400 shrink-0 />
+                            <span h-10px w-120px rounded-full bg-neutral-100 />
+                        </div>
+                        <div
+                            h-36px px-10px
+                            flex items-center gap-10px
+                            rounded-10px
+                            b=".5px dashed neutral-200"
+                        >
+                            <span i-ph-folder text-16px text-neutral-400 shrink-0 />
+                            <span h-10px w-84px rounded-full bg-neutral-100 />
+                        </div>
+                    </div>
+                    <p px-4px text-14px text-neutral-500 leading-20px>
+                        Suas pastas aparecem aqui. Crie uma para começar a agrupar conversas.
+                    </p>
+                    <ChatConversationNewGroupButton label="Criar pasta" variant="empty-state" />
+                </div>
+
+                <div v-if="visibleGroupBuckets.length > 0" flex="~ col" gap-2px>
+                    <div
+                        v-for="groupBucket in visibleGroupBuckets"
+                        :key="groupBucket.group.id"
+                        flex="~ col"
+                        rounded-10px
+                        transition-colors
+                        :class="isDropTarget(groupBucket.group.id) ? 'bg-neutral-100' : ''"
+                        @dragenter.prevent="handleDragEnter(groupBucket.group.id)"
+                        @dragover.prevent="handleDragOver($event, groupBucket.group.id)"
+                        @dragleave="handleDragLeave($event, groupBucket.group.id)"
+                        @drop.prevent="handleConversationDrop($event, groupBucket.group.id)"
+                    >
+                        <div rounded-10px>
+                            <button
+                                type="button"
+                                flex items-center gap-8px
+                                w-full h-40px px-10px rounded-10px text-left
+                                transition-colors cursor-pointer
+                                class="hover:bg-neutral-50"
+                                @click="toggleGroup(groupBucket.group.id)"
+                            >
+                                <span
+                                    i-ph-caret-right
+                                    text-12px text-neutral-400
+                                    transition-transform
+                                    :class="groupBucket.open && 'rotate-90'"
+                                />
+                                <span
+                                    :class="groupBucket.folderIcon"
+                                    text-16px text-neutral-500 shrink-0
+                                />
+                                <span flex-1 text-14px font-semibold text-neutral-900 leading-18px truncate>
+                                    {{ groupBucket.group.name }}
+                                </span>
+                                <span v-if="groupBucket.conversationCountLabel" text-12px font-medium text-neutral-400 tabular-nums>
+                                    {{ groupBucket.conversationCountLabel }}
+                                </span>
+                            </button>
+                        </div>
+
+                        <Transition name="group-slide">
+                            <div v-if="groupBucket.open" class="group-slide-panel">
+                                <div class="group-slide__inner">
+                                    <div flex="~ col" gap-1px ml-18px>
+                                        <button
+                                            v-for="conv in groupBucket.items"
+                                            :key="conv.id"
+                                            draggable="true"
+                                            flex="~ col" gap-2px
+                                            w-full px-12px py-10px rounded-10px text-left
+                                            transition-colors cursor-pointer
+                                            :class="conv.id === activeId ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
+                                            @click="handleSelect(conv.id)"
+                                            @dragstart="handleConversationDragStart($event, conv.id)"
+                                            @dragend="clearDragState"
+                                        >
+                                            <div flex items-center gap-8px w-full>
+                                                <span flex-1 text-14px font-medium text-neutral-900 leading-18px truncate>
+                                                    {{ conv.title || "Nova conversa" }}
+                                                </span>
+                                                <span text-12px text-neutral-400 leading-16px shrink-0>
+                                                    {{ formatRelativeTime(conv.updatedAt) }}
+                                                </span>
+                                            </div>
+                                        </button>
+                                        <button
+                                            v-if="groupBucket.showNewConversationAction"
+                                            type="button"
+                                            flex items-center gap-8px
+                                            w-full px-12px py-10px rounded-10px text-left
+                                            transition-colors cursor-pointer
+                                            class="hover:bg-neutral-50"
+                                            @click="handleNew(groupBucket.group.id)"
+                                        >
+                                            <span i-ph-plus text-14px text-neutral-500 shrink-0 />
+                                            <span text-14px font-medium text-neutral-500 leading-18px>
+                                                Nova conversa
+                                            </span>
+                                        </button>
+                                        <div
+                                            v-else-if="groupBucket.showSearchEmpty"
+                                            px-12px py-10px
+                                        >
+                                            <span text-13px text-neutral-400 leading-17px>
+                                                Sem resultados
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </Transition>
+                    </div>
+                </div>
+
+                <div
+                    flex="~ col" gap-1px
+                    rounded-10px
+                    transition-colors
+                    :class="isDropTarget(null) ? 'bg-neutral-50' : ''"
+                    @dragenter.prevent="handleDragEnter(null)"
+                    @dragover.prevent="handleDragOver($event, null)"
+                    @dragleave="handleDragLeave($event, null)"
+                    @drop.prevent="handleConversationDrop($event, null)"
+                >
+                    <div v-if="shouldShowUngroupedHeader" px-6px pt-4px pb-2px>
+                        <span text-12px font-semibold uppercase text-neutral-400 style="letter-spacing: 0">
+                            {{ ungroupedConversationLabel }}
+                        </span>
+                    </div>
+                    <button
+                        v-for="conv in groupedConversations.unfiled"
+                        :key="conv.id"
+                        draggable="true"
+                        flex="~ col" gap-2px
+                        w-full px-12px py-10px rounded-10px text-left
+                        transition-colors cursor-pointer
+                        :class="conv.id === activeId ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
+                        @click="handleSelect(conv.id)"
+                        @dragstart="handleConversationDragStart($event, conv.id)"
+                        @dragend="clearDragState"
+                    >
+                        <div flex items-center gap-8px w-full>
+                            <span flex-1 text-14px font-medium text-neutral-900 leading-18px truncate>
+                                {{ conv.title || "Nova conversa" }}
+                            </span>
+                            <span text-12px text-neutral-400 leading-16px shrink-0>
+                                {{ formatRelativeTime(conv.updatedAt) }}
+                            </span>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.mobile-drawer{box-shadow:0 3px 12px rgba(103,127,148,.08),0 12px 52px rgba(103,127,148,.16);transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);width:82%}.mobile-drawer--open{transform:translateX(0)}.scrim-enter-active,.scrim-leave-active{transition:opacity .2s linear}.scrim-enter-from,.scrim-leave-to{opacity:0}.group-slide-panel{display:grid;grid-template-rows:1fr}.group-slide-enter-active,.group-slide-leave-active{overflow:hidden;transition:grid-template-rows .18s cubic-bezier(.2,.8,.2,1),opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1)}.group-slide-enter-from,.group-slide-leave-to{grid-template-rows:0fr;opacity:0;transform:translateY(-4px)}.group-slide-enter-to,.group-slide-leave-from{grid-template-rows:1fr;opacity:1;transform:translateY(0)}.group-slide__inner{min-height:0;overflow:hidden}
+</style>

package/dist/runtime/embed/components/mobile/chat-mobile-drawer.vue.d.ts

@@ -0,0 +1,22 @@
+import type { DeepReadonly } from 'vue';
+import type { Conversation } from '../../../types/schemas/chat/conversations.js';
+type __VLS_Props = {
+    open: boolean;
+    conversations: DeepReadonly<Conversation[]>;
+    activeId: string | null;
+    loading?: boolean;
+    userName?: string;
+    userEmail?: string;
+    userImage?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    close: () => any;
+    newConvo: (groupId?: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNewConvo?: ((groupId?: string | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { ConversationFile } from '../../../types/schemas/chat/files.js';
+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/embed/components/mobile/chat-mobile-file-preview.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { onKeyStroke } from "@vueuse/core";
+import { useConversationFileDownloads } from "../../../files/composables/conversation-file-downloads";
+import { formatFileSize, getFileTypeLabel } from "../../../files/formatting";
+import { normalizeMimeType } from "../../../files/mime";
+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/embed/components/mobile/chat-mobile-file-preview.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ConversationFile } from '../../../types/schemas/chat/files.js';
+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;