@meistrari/chat-nuxt 1.13.0 → 2.0.0

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

@@ -0,0 +1,318 @@
+<script setup>
+import { useFilePreviewPanel } from "../composables/file-preview-panel";
+import { useMediaCache } from "../composables/media-cache";
+import { useVault } from "../composables/vault";
+import { FILE_ICONS } from "../icons";
+import { MIME_TO_EXTENSION, normalizeMimeType } from "../mime";
+import { isVaultPermalink } from "../vault-links";
+const props = defineProps({
+  file: { type: Object, required: true }
+});
+const { getFileInfo, isVaultReference } = useVault();
+const { getCached, setCache, fetchUrlWithMetadata, base64ToDataUrl } = useMediaCache();
+const { openPreview } = useFilePreviewPanel();
+const FILE_COLORS = {
+  default: { bg: "bg-gray-100", text: "text-gray-600", border: "border-gray-200" }
+};
+const resolvedUrl = ref();
+const cachedBase64 = ref();
+const originalFileName = ref();
+const resolvedMimeType = ref();
+const isLoading = ref(false);
+const isHovered = ref(false);
+const fileSize = ref();
+const pdfTotalPages = ref();
+const csvInfo = ref();
+const textInfo = ref();
+const effectiveMimeType = computed(() => resolvedMimeType.value ?? props.file.mimeType);
+const normalizedMimeType = computed(() => normalizeMimeType(effectiveMimeType.value));
+const iconSrc = computed(() => FILE_ICONS[normalizedMimeType.value] ?? FILE_ICONS.unknown);
+const fileColors = computed(() => FILE_COLORS.default ?? { bg: "bg-gray-100", text: "text-gray-600", border: "border-gray-200" });
+const isPdf = computed(() => normalizedMimeType.value === "application/pdf");
+const isImage = computed(() => normalizedMimeType.value.startsWith("image/"));
+const isVideo = computed(() => normalizedMimeType.value.startsWith("video/"));
+const isAudio = computed(() => normalizedMimeType.value.startsWith("audio/"));
+const isCsv = computed(() => normalizedMimeType.value === "text/csv");
+const isJson = computed(() => normalizedMimeType.value === "application/json");
+const isText = computed(() => normalizedMimeType.value.startsWith("text/") && !isCsv.value || isJson.value);
+const initialPage = computed(() => props.file.hashParams?.pageNumber);
+const hasInlinePreview = computed(() => isPdf.value || isImage.value || isVideo.value || isAudio.value || isCsv.value || isText.value);
+const effectiveUrl = computed(() => {
+  if (cachedBase64.value && normalizedMimeType.value)
+    return base64ToDataUrl(cachedBase64.value, normalizedMimeType.value);
+  return resolvedUrl.value;
+});
+const displayName = computed(() => {
+  const name = props.file.hashParams?.filename ?? originalFileName.value ?? props.file.name;
+  const hasExtension = /\.[a-zA-Z0-9]+$/.test(name);
+  if (hasExtension)
+    return name;
+  const ext = MIME_TO_EXTENSION[normalizedMimeType.value];
+  return ext ? `${name}.${ext}` : name;
+});
+const shortName = computed(() => {
+  const name = displayName.value;
+  if (name.length <= 24)
+    return name;
+  const ext = name.split(".").pop() ?? "";
+  const baseName = name.slice(0, name.length - ext.length - 1);
+  return `${baseName.slice(0, 16)}...${ext ? `.${ext}` : ""}`;
+});
+const fileExtension = computed(() => {
+  const parts = displayName.value.split(".");
+  return parts.length > 1 ? parts.pop()?.toUpperCase() : "ARQUIVO";
+});
+const formattedSize = computed(() => {
+  if (!fileSize.value)
+    return null;
+  const bytes = fileSize.value;
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+});
+async function resolveVaultUrl() {
+  const reference = props.file.reference;
+  const cleanReference = reference.split("#")[0] ?? reference;
+  isLoading.value = true;
+  const cacheKey = cleanReference;
+  try {
+    const cached = await getCached(cacheKey);
+    if (cached) {
+      cachedBase64.value = cached;
+    }
+    if (!isVaultReference(cleanReference)) {
+      if (isVaultPermalink(reference)) {
+        try {
+          const metadata = await $fetch("/api/vault/permalink-metadata", {
+            method: "POST",
+            body: { url: reference }
+          });
+          if (metadata.mimeType)
+            resolvedMimeType.value = metadata.mimeType;
+          if (metadata.fileSize)
+            fileSize.value = metadata.fileSize;
+          if (metadata.originalFileName)
+            originalFileName.value = metadata.originalFileName;
+          resolvedUrl.value = reference;
+        } catch (err) {
+          console.error("[FilePreview] Failed to fetch permalink metadata", err);
+          resolvedUrl.value = reference;
+        }
+        return;
+      }
+      resolvedUrl.value = reference;
+      if (!cached) {
+        fetchUrlWithMetadata(reference).then(({ base64, mimeType }) => {
+          cachedBase64.value = base64;
+          setCache(cacheKey, base64);
+          if (mimeType)
+            resolvedMimeType.value = mimeType;
+        }).catch((err) => console.error("[MediaCache] Failed to cache file", err));
+      }
+      return;
+    }
+    const fileInfo = await getFileInfo(cleanReference);
+    resolvedUrl.value = fileInfo.url;
+    originalFileName.value = fileInfo.originalFileName;
+    resolvedMimeType.value = fileInfo.mimeType;
+    if (fileInfo.url && !cached) {
+      fetchUrlWithMetadata(fileInfo.url).then(({ base64, mimeType }) => {
+        cachedBase64.value = base64;
+        setCache(cacheKey, base64);
+        if (mimeType && !resolvedMimeType.value)
+          resolvedMimeType.value = mimeType;
+      }).catch((err) => console.error("[MediaCache] Failed to cache file", err));
+    }
+  } catch (error) {
+    console.error("Failed to resolve vault URL:", error);
+    resolvedUrl.value = void 0;
+  } finally {
+    isLoading.value = false;
+  }
+}
+watch(() => props.file.reference, resolveVaultUrl, { immediate: true });
+function openSidePanel() {
+  if (!effectiveUrl.value)
+    return;
+  openPreview({
+    file: props.file,
+    resolvedUrl: resolvedUrl.value,
+    cachedBase64: cachedBase64.value,
+    originalFileName: originalFileName.value,
+    resolvedMimeType: resolvedMimeType.value,
+    fileSize: fileSize.value,
+    pdfTotalPages: pdfTotalPages.value,
+    csvInfo: csvInfo.value,
+    textInfo: textInfo.value
+  });
+}
+function onPdfLoaded(data) {
+  pdfTotalPages.value = data.totalPages;
+}
+function onCsvLoaded(data) {
+  csvInfo.value = data;
+}
+function onTextLoaded(data) {
+  textInfo.value = data;
+}
+</script>
+
+<template>
+    <div>
+        <!-- Wide Layout for files with inline preview -->
+        <div v-if="hasInlinePreview" class="w-full">
+            <!-- Header -->
+            <div class="flex items-center gap-12px p-12px rounded-t-16px" style="background-color: #F5F5F5;">
+                <!-- File Icon -->
+                <img :src="iconSrc" :alt="displayName" class="w-16px h-16px flex-shrink-0">
+
+                <!-- File Info -->
+                <div class="flex-1 min-w-0">
+                    <p class="text-14px font-medium text-gray-900 truncate">
+                        {{ displayName }}
+                    </p>
+                    <p class="text-12px text-gray-500">
+                        <span v-if="isPdf && pdfTotalPages">{{ pdfTotalPages }} páginas</span>
+                        <span v-else-if="isCsv && csvInfo">{{ csvInfo.totalRows }} linhas · {{ csvInfo.totalColumns }} colunas</span>
+                        <span v-else-if="isText && textInfo">{{ textInfo.totalLines }} linhas</span>
+                        <span v-if="(isPdf && pdfTotalPages || isCsv && csvInfo || isText && textInfo) && formattedSize"> · </span>
+                        <span v-if="formattedSize">{{ formattedSize }}</span>
+                        <span v-if="isLoading">Carregando...</span>
+                    </p>
+                </div>
+
+                <!-- Visualizar Button -->
+                <TelaButton
+                    variant="secondary"
+                    :disabled="isLoading || !effectiveUrl"
+                    @click="openSidePanel"
+                >
+                    Visualizar
+                </TelaButton>
+            </div>
+
+            <!-- Preview Content -->
+            <div v-if="effectiveUrl" class="rounded-b-16px overflow-hidden" style="background-color: #F5F5F5;">
+                <!-- PDF Preview -->
+                <PdfPreview
+                    v-if="isPdf"
+                    :url="effectiveUrl"
+                    :initial-page="initialPage"
+                    :max-height="300"
+                    :clickable="false"
+                    @loaded="onPdfLoaded"
+                    @click="openSidePanel"
+                />
+
+                <!-- Image Preview -->
+                <ImagePreview
+                    v-else-if="isImage"
+                    :url="effectiveUrl"
+                    :max-height="300"
+                    :clickable="false"
+                    @click="openSidePanel"
+                />
+
+                <!-- Video Preview -->
+                <VideoPreview
+                    v-else-if="isVideo"
+                    :url="effectiveUrl"
+                    :max-height="300"
+                    :clickable="false"
+                    @click="openSidePanel"
+                />
+
+                <!-- Audio Preview -->
+                <AudioPreview
+                    v-else-if="isAudio"
+                    :url="effectiveUrl"
+                    :name="displayName"
+                    :clickable="false"
+                    @click="openSidePanel"
+                />
+
+                <!-- CSV Preview -->
+                <CsvPreview
+                    v-else-if="isCsv"
+                    :url="effectiveUrl"
+                    :max-height="300"
+                    :clickable="false"
+                    @loaded="onCsvLoaded"
+                    @click="openSidePanel"
+                />
+
+                <!-- Text Preview -->
+                <TextPreview
+                    v-else-if="isText"
+                    :url="effectiveUrl"
+                    :mime-type="normalizedMimeType"
+                    :max-height="300"
+                    :clickable="false"
+                    @loaded="onTextLoaded"
+                    @click="openSidePanel"
+                />
+            </div>
+        </div>
+
+        <!-- Regular File Card (for unsupported types) -->
+        <button
+            v-else
+            type="button"
+            class="group relative w-140px rounded-12px border overflow-hidden transition-all duration-200"
+            :class="[
+  fileColors.border,
+  isLoading || !effectiveUrl ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:shadow-md hover:scale-102'
+]"
+            :disabled="isLoading || !effectiveUrl"
+            @mouseenter="isHovered = true"
+            @mouseleave="isHovered = false"
+            @click="openSidePanel"
+        >
+            <!-- Thumbnail Area -->
+            <div
+                class="relative h-80px flex items-center justify-center overflow-hidden bg-gray-100"
+            >
+                <!-- Loading State -->
+                <div v-if="isLoading" class="flex items-center justify-center w-full h-full">
+                    <TelaSkeleton class="rounded-8px" style="width: 120px; height: 60px;" />
+                </div>
+
+                <!-- File Icon -->
+                <div v-else class="flex flex-col items-center gap-4px">
+                    <img :src="iconSrc" :alt="displayName" class="w-32px h-32px">
+                    <span class="text-10px font-bold uppercase tracking-wide px-6px py-2px rounded-4px bg-white/80 text-gray-600">
+                        {{ fileExtension }}
+                    </span>
+                </div>
+
+                <!-- Hover Overlay -->
+                <Transition name="fade">
+                    <div
+                        v-if="isHovered && !isLoading && effectiveUrl"
+                        class="absolute inset-0 bg-black/50 flex items-center justify-center"
+                    >
+                        <div class="w-36px h-36px rounded-full bg-white flex items-center justify-center shadow-lg">
+                            <span class="i-ph-eye text-18px text-gray-700" />
+                        </div>
+                    </div>
+                </Transition>
+            </div>
+
+            <!-- File Info -->
+            <div class="px-10px py-8px bg-white">
+                <p class="text-12px font-medium text-gray-800 truncate text-left">
+                    {{ shortName }}
+                </p>
+                <p v-if="formattedSize" class="text-10px text-gray-400 text-left mt-2px">
+                    {{ formattedSize }}
+                </p>
+            </div>
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.fade-enter-active,.fade-leave-active{transition:opacity .15s ease}.fade-enter-from,.fade-leave-to{opacity:0}.hover\:scale-102:hover{transform:scale(1.02)}
+</style>

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

@@ -0,0 +1,7 @@
+import type { DetectedFile } from '../content-detection.js';
+type __VLS_Props = {
+    file: DetectedFile;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,343 @@
+<script setup>
+import { useConversationFileDownloads } from "../composables/conversation-file-downloads";
+import { useConversationFiles } from "../composables/conversation-files";
+import { useFilePreviewPanel } from "../composables/file-preview-panel";
+import { useMediaCache } from "../composables/media-cache";
+import { formatFileSize, formatUploadDate, getFileTypeLabel } from "../formatting";
+import { getFileIcon } from "../icons";
+const props = defineProps({
+  conversationId: { type: String, required: true }
+});
+const conversationIdRef = computed(() => props.conversationId);
+const { files, loading } = useConversationFiles(conversationIdRef);
+const { openPreview, updatePreview, setError } = useFilePreviewPanel();
+const { getCached, fetchUrlAsBase64, setCache } = useMediaCache();
+const { downloadFile, copyFileLink } = useConversationFileDownloads();
+const searchQuery = ref("");
+const fileTypeFilter = ref(null);
+const currentRequestId = ref(0);
+const fileTypeOptions = [
+  { label: "Todos", value: null },
+  { label: "PDF", value: "pdf" },
+  { label: "Documento", value: "document" },
+  { label: "Planilha", value: "spreadsheet" },
+  { label: "Texto", value: "text" },
+  { label: "Imagem", value: "image" },
+  { label: "V\xEDdeo", value: "video" },
+  { label: "\xC1udio", value: "audio" }
+];
+const fileSourceFilter = ref(null);
+const fileSourceOptions = [
+  { label: "Todos", value: null },
+  { label: "Upload do usu\xE1rio", value: "user" },
+  { label: "Gerado pelo assistente", value: "assistant" }
+];
+function getSourceLabel(role) {
+  if (role === "user")
+    return "Usu\xE1rio";
+  if (role === "assistant")
+    return "Assistente";
+  return "-";
+}
+const filteredFiles = computed(() => {
+  let result = files.value;
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    result = result.filter((f) => f.name.toLowerCase().includes(query));
+  }
+  if (fileTypeFilter.value) {
+    result = result.filter((f) => {
+      const mime = f.mimeType.toLowerCase();
+      switch (fileTypeFilter.value) {
+        case "pdf":
+          return mime.includes("pdf");
+        case "document":
+          return mime.includes("word") || mime.includes("document");
+        case "spreadsheet":
+          return mime.includes("excel") || mime.includes("spreadsheet") || mime.includes("csv");
+        case "text":
+          return mime.startsWith("text/") || mime.includes("json");
+        case "image":
+          return mime.startsWith("image/");
+        case "video":
+          return mime.startsWith("video/");
+        case "audio":
+          return mime.startsWith("audio/");
+        default:
+          return true;
+      }
+    });
+  }
+  if (fileSourceFilter.value) {
+    result = result.filter((f) => f.messageRole === fileSourceFilter.value);
+  }
+  return result;
+});
+async function handleFileClick(file) {
+  const requestId = ++currentRequestId.value;
+  const detectedFile = {
+    type: file.url.startsWith("vault://") ? "vault" : "url",
+    reference: file.url,
+    name: file.name,
+    mimeType: file.mimeType
+  };
+  if (file.url.startsWith("vault://")) {
+    let cachedBase64 = null;
+    try {
+      cachedBase64 = await Promise.race([
+        getCached(file.url),
+        new Promise((resolve) => setTimeout(() => resolve(null), 1e3))
+      ]);
+    } catch {
+    }
+    if (requestId !== currentRequestId.value)
+      return;
+    if (cachedBase64) {
+      openPreview({
+        file: detectedFile,
+        originalFileName: file.name,
+        resolvedMimeType: file.mimeType,
+        cachedBase64
+      });
+      return;
+    }
+    openPreview({
+      file: detectedFile,
+      originalFileName: file.name,
+      resolvedMimeType: file.mimeType
+    });
+    try {
+      const { url, mimeType, originalFileName } = await $fetch("/api/vault/resolve", {
+        method: "POST",
+        body: { reference: file.url }
+      });
+      if (requestId !== currentRequestId.value)
+        return;
+      updatePreview({
+        resolvedUrl: url,
+        resolvedMimeType: mimeType ?? file.mimeType,
+        originalFileName: originalFileName ?? file.name
+      });
+      fetchUrlAsBase64(url).then((base64) => {
+        if (base64 && requestId === currentRequestId.value) {
+          setCache(file.url, base64);
+        }
+      }).catch(() => {
+      });
+    } catch {
+      if (requestId !== currentRequestId.value)
+        return;
+      setError();
+    }
+  } else {
+    let cachedBase64;
+    if (file.mimeType.startsWith("image/") || file.mimeType.startsWith("video/") || file.mimeType.startsWith("audio/")) {
+      try {
+        cachedBase64 = await fetchUrlAsBase64(file.url) ?? void 0;
+      } catch {
+      }
+    }
+    if (requestId !== currentRequestId.value)
+      return;
+    openPreview({
+      file: detectedFile,
+      resolvedUrl: file.url,
+      cachedBase64,
+      originalFileName: file.name,
+      resolvedMimeType: file.mimeType
+    });
+  }
+}
+function getFileMenuItems(file) {
+  return [
+    {
+      label: "Copiar link",
+      icon: "i-ph-link",
+      click: () => copyFileLink(file)
+    },
+    {
+      label: "Baixar",
+      icon: "i-ph-download-simple",
+      click: () => downloadFile(file)
+    }
+  ];
+}
+</script>
+
+<template>
+    <div flex="~ col" h-full pt-96px px-48px pb-32px>
+        <div flex="~ col 1" gap-40px min-h-0>
+            <div flex items-end w-full>
+                <div flex gap-16px items-center>
+                    <div flex gap-8px items-center>
+                        <TelaDropdownMenu
+                            :items="fileTypeOptions.map((opt) => ({
+  label: opt.label,
+  click: () => fileTypeFilter = opt.value
+}))"
+                            align="start"
+                        >
+                            <button
+                                flex gap-6px items-center justify-center
+                                px-12px py-7px
+                                bg-white b=".5px grey-160" rounded-10px
+                                shadow-sm
+                                hover:bg-neutral-50 transition-colors
+                                whitespace-nowrap shrink-0
+                            >
+                                <span text-14px font-580 text-gray-900 leading-18px tracking="-.15px">
+                                    {{ fileTypeFilter ? fileTypeOptions.find((o) => o.value === fileTypeFilter)?.label : "Tipo de arquivo" }}
+                                </span>
+                                <span i-ph-caret-down text-12px text-gray-900 shrink-0 />
+                            </button>
+                        </TelaDropdownMenu>
+
+                        <TelaDropdownMenu
+                            :items="fileSourceOptions.map((opt) => ({
+  label: opt.label,
+  click: () => fileSourceFilter = opt.value
+}))"
+                            align="start"
+                        >
+                            <button
+                                flex gap-6px items-center justify-center
+                                px-12px py-7px
+                                bg-white b=".5px grey-160" rounded-10px
+                                shadow-sm
+                                hover:bg-neutral-50 transition-colors
+                                whitespace-nowrap shrink-0
+                            >
+                                <span text-14px font-580 text-gray-900 leading-18px tracking="-.15px">
+                                    {{ fileSourceFilter ? fileSourceOptions.find((o) => o.value === fileSourceFilter)?.label : "Origem do arquivo" }}
+                                </span>
+                                <span i-ph-caret-down text-12px text-gray-900 shrink-0 />
+                            </button>
+                        </TelaDropdownMenu>
+
+                        <div
+                            flex items-center justify-between
+                            pl-12px pr-8px py-4px
+                            bg-white b=".5px grey-160" rounded-10px
+                            shadow-sm w-176px
+                        >
+                            <div flex flex-1 gap-8px items-center>
+                                <span i-ph-magnifying-glass text-12px text-gray-400 />
+                                <input
+                                    v-model="searchQuery"
+                                    type="text"
+                                    placeholder="Buscar"
+                                    text-14px text-primary placeholder-gray-400
+                                    outline-none bg-transparent leading-18px tracking="-.15px"
+                                    w-full
+                                >
+                            </div>
+                        </div>
+                    </div>
+
+                    <span text-14px text-secondary leading-18px tracking="-.15px" whitespace-nowrap shrink-0>
+                        {{ filteredFiles.length }} {{ filteredFiles.length === 1 ? "arquivo" : "arquivos" }}
+                    </span>
+                </div>
+            </div>
+
+            <div flex="~ col" overflow-hidden min-h-0>
+                <div
+                    flex items-center w-full
+                    bg-white b-y=".5px border-default"
+                >
+                    <div flex items-center self-stretch flex-1 min-w-200px>
+                        <div px-20px py-12px>
+                            <span text-12px font-580 text-primary leading-16px whitespace-nowrap>Nome</span>
+                        </div>
+                    </div>
+                    <div shrink-0 px-20px py-12px w-80px>
+                        <span text-12px font-580 text-primary leading-16px whitespace-nowrap>Tipo</span>
+                    </div>
+                    <div shrink-0 px-20px py-12px w-90px>
+                        <span text-12px font-580 text-primary leading-16px whitespace-nowrap>Tamanho</span>
+                    </div>
+                    <div shrink-0 px-20px py-12px w-140px>
+                        <span text-12px font-580 text-primary leading-16px whitespace-nowrap>Data de upload</span>
+                    </div>
+                    <div shrink-0 px-20px py-12px w-100px>
+                        <span text-12px font-580 text-primary leading-16px whitespace-nowrap>Origem</span>
+                    </div>
+                    <div w-40px h-48px shrink-0 />
+                </div>
+
+                <div v-if="loading" flex="~ col" items-center justify-center py-64px>
+                    <span i-ph-spinner animate-spin text-32px text-gray-400 />
+                </div>
+
+                <div
+                    v-else-if="filteredFiles.length === 0"
+                    flex="~ col" items-center justify-center py-64px gap-12px
+                >
+                    <span i-ph-files-duotone text-48px text-gray-300 />
+                    <p text-14px text-tertiary>
+                        {{ searchQuery || fileTypeFilter || fileSourceFilter ? "Nenhum arquivo encontrado" : "Nenhum arquivo nessa conversa" }}
+                    </p>
+                </div>
+
+                <div v-else flex="~ col" overflow-y-auto>
+                    <button
+                        v-for="file in filteredFiles"
+                        :key="file.id"
+                        flex items-center w-full
+                        bg-white b-b=".5px border-subtle"
+                        hover:bg-neutral-50 transition-colors
+                        text-left
+                        @click="handleFileClick(file)"
+                    >
+                        <div flex gap-8px items-center h-48px px-20px py-12px flex-1 min-w-200px>
+                            <img
+                                :src="getFileIcon(file.mimeType)"
+                                :alt="file.name"
+                                w-16px h-16px flex-shrink-0
+                            >
+                            <span
+                                text-14px text-primary leading-18px tracking="-.15px"
+                                truncate flex-1
+                                :title="file.name"
+                            >
+                                {{ file.name }}
+                            </span>
+                        </div>
+                        <div shrink-0 w-80px h-48px px-20px py-12px flex items-center>
+                            <span text-12px text-tertiary leading-16px whitespace-nowrap>
+                                {{ getFileTypeLabel(file.mimeType) }}
+                            </span>
+                        </div>
+                        <div shrink-0 w-90px h-48px px-20px py-12px flex items-center>
+                            <span text-12px text-tertiary leading-16px whitespace-nowrap>
+                                {{ formatFileSize(file.size) }}
+                            </span>
+                        </div>
+                        <div shrink-0 w-140px h-48px px-20px py-12px flex items-center>
+                            <span text-12px text-tertiary leading-16px whitespace-nowrap>
+                                {{ formatUploadDate(file.createdAt) }}
+                            </span>
+                        </div>
+                        <div shrink-0 w-100px h-48px px-20px py-12px flex items-center>
+                            <span text-12px text-tertiary leading-16px whitespace-nowrap>
+                                {{ getSourceLabel(file.messageRole) }}
+                            </span>
+                        </div>
+                        <div w-40px shrink-0 px-8px py-12px flex items-start @click.stop>
+                            <TelaDropdownMenu :items="getFileMenuItems(file)" align="end">
+                                <div
+                                    flex items-center justify-center
+                                    p-4px rounded-6px
+                                    hover:bg-neutral-100
+                                    cursor-pointer
+                                >
+                                    <span i-ph-dots-three text-16px text-gray-900 />
+                                </div>
+                            </TelaDropdownMenu>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>