@meistrari/chat-nuxt 1.0.0

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

@@ -0,0 +1,313 @@
+<script setup>
+import { isVaultPermalink, FILE_ICONS, MIME_TO_EXTENSION, normalizeMimeType } from "../../utils/file";
+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/components/chat/file-preview.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DetectedFile } from '../../utils/file.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/components/chat/files-view.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    conversationId: string;
+};
+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;