@meistrari/chat-nuxt 4.10.0-rc.1 → 4.10.0-rc.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "4.10.0-rc.1",
+  "version": "4.10.0-rc.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/files/components/{audio-preview.d.vue.ts → chat-file-audio.d.vue.ts}

@@ -1,14 +1,15 @@
+import type { ChatFileMenuItem } from './chat-file-card.vue.js';
 type __VLS_Props = {
-    url: string;
-    name?: string;
-    clickable?: boolean;
+    url?: string;
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => any;
-    loaded: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: (() => any) | undefined;
-    onLoaded?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,94 @@
+<script setup>
+import ChatFileCard from "./chat-file-card.vue";
+import { formatPlaybackTime } from "../formatting";
+const props = defineProps({
+  url: { type: String, required: false },
+  iconSrc: { type: String, required: true },
+  name: { type: String, required: true },
+  meta: { type: String, required: true },
+  menuItems: { type: Array, required: true }
+});
+const emit = defineEmits(["open"]);
+const player = ref();
+const playing = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const failed = ref(false);
+const progress = computed(() => duration.value > 0 ? currentTime.value / duration.value * 100 : 0);
+function togglePlayback() {
+  const audio = player.value;
+  if (!audio)
+    return;
+  if (audio.paused)
+    void audio.play();
+  else
+    audio.pause();
+}
+function seek(event) {
+  const audio = player.value;
+  if (!audio || duration.value <= 0)
+    return;
+  audio.currentTime = Number(event.target.value) / 100 * duration.value;
+}
+watch(() => props.url, () => {
+  playing.value = false;
+  currentTime.value = 0;
+  duration.value = 0;
+  failed.value = false;
+});
+</script>
+
+<template>
+    <ChatFileCard
+        :icon-src="iconSrc"
+        :name="name"
+        :meta="failed ? 'Falha ao carregar \xE1udio' : meta"
+        :menu-items="menuItems"
+        :disabled="!url"
+        @open="emit('open')"
+    >
+        <template #actions>
+            <TelaIconButton
+                :icon="playing ? 'i-ph-pause-fill' : 'i-ph-play-fill'"
+                color="secondary"
+                size="xs"
+                :aria-label="playing ? 'Pausar \xE1udio' : 'Reproduzir \xE1udio'"
+                :disabled="!url || failed"
+                @click="togglePlayback"
+            />
+        </template>
+        <div flex items-center gap-12px px-12px py-10px border-t-0.5px border>
+            <input
+                type="range"
+                min="0"
+                max="100"
+                step="0.1"
+                :value="progress"
+                :disabled="!url || failed || duration <= 0"
+                aria-label="Posição do áudio"
+                flex-1 cursor-pointer text-primary
+                class="chat-file-audio__track"
+                @input="seek"
+            >
+            <span body-12-regular text-secondary tabular-nums shrink-0>
+                {{ formatPlaybackTime(currentTime) }} / {{ formatPlaybackTime(duration) }}
+            </span>
+        </div>
+        <audio
+            v-if="url"
+            ref="player"
+            :src="url"
+            preload="metadata"
+            @play="playing = true"
+            @pause="playing = false"
+            @ended="playing = false"
+            @timeupdate="currentTime = player?.currentTime ?? 0"
+            @loadedmetadata="duration = player?.duration ?? 0"
+            @error="failed = true"
+        />
+    </ChatFileCard>
+</template>
+
+<style scoped>
+.chat-file-audio__track{accent-color:currentColor;height:4px}
+</style>

package/dist/runtime/files/components/{image-preview.d.vue.ts → chat-file-audio.vue.d.ts}

@@ -1,14 +1,15 @@
+import type { ChatFileMenuItem } from './chat-file-card.vue.js';
 type __VLS_Props = {
-    url: string;
-    maxHeight?: number;
-    clickable?: boolean;
+    url?: string;
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => any;
-    loaded: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: (() => any) | undefined;
-    onLoaded?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,31 @@
+export interface ChatFileMenuItem {
+    label: string;
+    icon: string;
+    click: () => void;
+}
+type __VLS_Props = {
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  iconSrc: { type: String, required: true },
+  name: { type: String, required: true },
+  meta: { type: String, required: true },
+  menuItems: { type: Array, required: true },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["open"]);
+</script>
+
+<template>
+    <div w-full max-w-480px rounded-12px border-0.5px border bg overflow-hidden data-chat-file="card">
+        <div flex items-center gap-12px p-12px>
+            <button
+                type="button"
+                flex items-center gap-12px flex-1 min-w-0 text-left
+                :class="disabled ? 'cursor-default' : 'cursor-pointer'"
+                :disabled="disabled"
+                :aria-label="`Abrir ${name}`"
+                @click="emit('open')"
+            >
+                <span size-40px rounded-8px bg-subtle flex items-center justify-center shrink-0>
+                    <img :src="iconSrc" alt="" size-20px>
+                </span>
+                <span flex flex-col min-w-0>
+                    <span body-14-medium text-primary truncate :title="name">{{ name }}</span>
+                    <span body-12-regular text-secondary truncate>{{ meta }}</span>
+                </span>
+            </button>
+            <slot name="actions" />
+            <TelaDropdownMenu :items="menuItems" align="end">
+                <TelaIconButton
+                    icon="i-ph-dots-three"
+                    color="secondary"
+                    size="3xs"
+                    aria-label="Ações do arquivo"
+                    :disabled="disabled"
+                />
+            </TelaDropdownMenu>
+        </div>
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+export interface ChatFileMenuItem {
+    label: string;
+    icon: string;
+    click: () => void;
+}
+type __VLS_Props = {
+    iconSrc: string;
+    name: string;
+    meta: string;
+    menuItems: ChatFileMenuItem[];
+    disabled?: boolean;
+};
+declare var __VLS_1: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,8 +2,11 @@
 import { useFilePreviewPanel } from "../composables/file-preview-panel";
 import { useMediaCache } from "../composables/media-cache";
 import { useVault } from "../composables/vault";
+import ChatFileAudio from "./chat-file-audio.vue";
+import ChatFileCard from "./chat-file-card.vue";
 import { FILE_ICONS } from "../icons";
 import { MIME_TO_EXTENSION, normalizeMimeType } from "../mime";
+import { describeFile, resolveFilePresentation } from "../presentation";
 import { isVaultPermalink } from "../vault-links";
 const props = defineProps({
   file: { type: Object, required: true }
@@ -11,32 +14,17 @@ const props = defineProps({
 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 mediaFailed = ref(false);
 const effectiveMimeType = computed(() => resolvedMimeType.value ?? props.file.mimeType);
 const normalizedMimeType = computed(() => normalizeMimeType(effectiveMimeType.value));
+const presentation = computed(() => resolveFilePresentation(normalizedMimeType.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);
@@ -50,32 +38,17 @@ const displayName = computed(() => {
   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`;
-});
+const mediaUnavailable = computed(() => mediaFailed.value || (presentation.value === "image" || presentation.value === "video") && !effectiveUrl.value);
+const meta = computed(() => describeFile(normalizedMimeType.value, displayName.value));
+const menuItems = computed(() => [
+  { label: "Abrir", icon: "i-ph-arrow-square-out", click: openSidePanel },
+  { label: "Baixar", icon: "i-ph-download-simple", click: () => void download() }
+]);
 async function resolveVaultUrl() {
   const reference = props.file.reference;
   const cleanReference = reference.split("#")[0] ?? reference;
   isLoading.value = true;
+  mediaFailed.value = false;
   const cacheKey = cleanReference;
   try {
     const cached = await getCached(cacheKey);
@@ -142,177 +115,98 @@ function openSidePanel() {
     cachedBase64: cachedBase64.value,
     originalFileName: originalFileName.value,
     resolvedMimeType: resolvedMimeType.value,
-    fileSize: fileSize.value,
-    pdfTotalPages: pdfTotalPages.value,
-    csvInfo: csvInfo.value,
-    textInfo: textInfo.value
+    fileSize: fileSize.value
   });
 }
-function onPdfLoaded(data) {
-  pdfTotalPages.value = data.totalPages;
-}
-function onCsvLoaded(data) {
-  csvInfo.value = data;
-}
-function onTextLoaded(data) {
-  textInfo.value = data;
+async function download() {
+  const url = effectiveUrl.value;
+  if (!url)
+    return;
+  try {
+    const response = await fetch(url);
+    if (!response.ok)
+      throw new Error(`Download failed with status ${response.status}`);
+    const blob = await response.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = displayName.value;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.error("[FilePreview] Failed to download file", error);
+    window.open(url, "_blank", "noopener");
+  }
 }
 </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) -->
+    <TelaSkeleton v-if="isLoading" class="rounded-12px" w-full max-w-480px h-64px data-chat-file="loading" />
+    <div v-else-if="presentation === 'image' && !mediaUnavailable" data-chat-file="media">
         <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"
+            block p-0 border-0 bg-transparent cursor-zoom-in
+            aria-label="Abrir imagem"
             @click="openSidePanel"
         >
-            <!-- Thumbnail Area -->
-            <div
-                class="relative h-80px flex items-center justify-center overflow-hidden bg-gray-100"
+            <img
+                :src="effectiveUrl"
+                :alt="displayName"
+                block max-w-full max-h-480px rounded-12px object-contain
+                @error="mediaFailed = true"
             >
-                <!-- 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>
+    <ChatFileCard
+        v-else-if="presentation === 'video' && !mediaUnavailable"
+        :icon-src="iconSrc"
+        :name="displayName"
+        :meta="meta"
+        :menu-items="menuItems"
+        @open="openSidePanel"
+    >
+        <video
+            :src="effectiveUrl"
+            controls
+            preload="metadata"
+            block w-full max-h-480px bg-black border-t-0.5px border
+            data-chat-file="media"
+            @error="mediaFailed = true"
+        />
+    </ChatFileCard>
+    <ChatFileAudio
+        v-else-if="presentation === 'audio'"
+        :url="effectiveUrl"
+        :icon-src="iconSrc"
+        :name="displayName"
+        :meta="meta"
+        :menu-items="menuItems"
+        @open="openSidePanel"
+    />
+    <ChatFileCard
+        v-else-if="presentation === 'card' || mediaUnavailable"
+        :icon-src="iconSrc"
+        :name="displayName"
+        :meta="mediaUnavailable ? 'Falha ao carregar a pr\xE9via' : meta"
+        :menu-items="menuItems"
+        :disabled="!effectiveUrl"
+        @open="openSidePanel"
+    />
+    <button
+        v-else
+        type="button"
+        class="chat-file-link"
+        inline-flex items-center gap-6px max-w-full text-left
+        :disabled="!effectiveUrl"
+        @click="openSidePanel"
+    >
+        <img :src="iconSrc" alt="" size-14px shrink-0>
+        <span truncate>{{ displayName }}</span>
+    </button>
 </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)}
+.chat-file-link{color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:#a3a3a3;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease}.chat-file-link:hover{text-decoration-color:#525252}.chat-file-link:disabled{cursor:default}
 </style>