@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/files/components/pdf-viewer.client.vue

@@ -0,0 +1,266 @@
+<script setup>
+import { usePdf } from "../composables/pdf";
+const props = defineProps({
+  url: { type: String, required: true },
+  initialPage: { type: Number, required: false },
+  initialScale: { type: Number, required: false },
+  highlight: { type: [String, null], required: false },
+  highlightPage: { type: [Number, null], required: false }
+});
+const url = computed(() => props.url);
+const { state, loadPdf, renderPage } = usePdf(url);
+const scrollContainerRef = ref(null);
+const pageRefs = ref(/* @__PURE__ */ new Map());
+const scale = ref(props.initialScale ?? 0.95);
+const renderedPages = ref(/* @__PURE__ */ new Set());
+const currentPage = ref(1);
+const pageInputValue = ref("1");
+const isDragging = ref(false);
+const isPanMode = ref(false);
+const dragStart = ref({ x: 0, y: 0, scrollLeft: 0, scrollTop: 0 });
+function handleMouseDown(e) {
+  if (!scrollContainerRef.value || !isPanMode.value)
+    return;
+  isDragging.value = true;
+  dragStart.value = {
+    x: e.clientX,
+    y: e.clientY,
+    scrollLeft: scrollContainerRef.value.scrollLeft,
+    scrollTop: scrollContainerRef.value.scrollTop
+  };
+}
+function handleMouseMove(e) {
+  if (!isDragging.value || !scrollContainerRef.value)
+    return;
+  e.preventDefault();
+  const dx = e.clientX - dragStart.value.x;
+  const dy = e.clientY - dragStart.value.y;
+  scrollContainerRef.value.scrollLeft = dragStart.value.scrollLeft - dx;
+  scrollContainerRef.value.scrollTop = dragStart.value.scrollTop - dy;
+}
+function handleMouseUp() {
+  isDragging.value = false;
+}
+function handleMouseLeave() {
+  isDragging.value = false;
+}
+function togglePanMode() {
+  isPanMode.value = !isPanMode.value;
+}
+function handleScroll() {
+  if (!scrollContainerRef.value)
+    return;
+  const container = scrollContainerRef.value;
+  const containerRect = container.getBoundingClientRect();
+  const containerCenter = containerRect.top + containerRect.height / 2;
+  let closestPage = 1;
+  let closestDistance = Infinity;
+  for (const [pageNum, el] of pageRefs.value) {
+    const rect = el.getBoundingClientRect();
+    const pageCenter = rect.top + rect.height / 2;
+    const distance = Math.abs(pageCenter - containerCenter);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestPage = pageNum;
+    }
+  }
+  if (currentPage.value !== closestPage) {
+    currentPage.value = closestPage;
+    pageInputValue.value = String(closestPage);
+  }
+}
+function handlePageInputChange() {
+  const pageNum = Number.parseInt(pageInputValue.value, 10);
+  if (!Number.isNaN(pageNum) && pageNum >= 1 && pageNum <= state.totalPages) {
+    currentPage.value = pageNum;
+    scrollToPage(pageNum);
+  } else {
+    pageInputValue.value = String(currentPage.value);
+  }
+}
+function fitToScreen() {
+  scale.value = 0.95;
+  reRenderAllPages();
+}
+function setPageRef(pageNum, el) {
+  if (el) {
+    pageRefs.value.set(pageNum, el);
+  } else {
+    pageRefs.value.delete(pageNum);
+  }
+}
+async function renderAllPages() {
+  if (!state.pdfDoc)
+    return;
+  for (let pageNum = 1; pageNum <= state.totalPages; pageNum++) {
+    await renderPageWithTextLayer(pageNum);
+  }
+}
+async function renderPageWithTextLayer(pageNum) {
+  if (!state.pdfDoc)
+    return;
+  const pageContainer = pageRefs.value.get(pageNum);
+  if (!pageContainer)
+    return;
+  const canvas = pageContainer.querySelector("canvas");
+  const textLayer = pageContainer.querySelector(".text-layer");
+  if (!canvas)
+    return;
+  await renderPage({
+    pageNum,
+    canvas,
+    textLayer,
+    scale: scale.value,
+    highlight: props.highlight,
+    highlightPage: props.highlightPage
+  });
+  renderedPages.value.add(pageNum);
+}
+function scrollToPage(pageNum) {
+  const pageContainer = pageRefs.value.get(pageNum);
+  if (pageContainer && scrollContainerRef.value) {
+    pageContainer.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}
+async function reRenderAllPages() {
+  renderedPages.value.clear();
+  await nextTick();
+  await renderAllPages();
+}
+function zoomIn() {
+  if (scale.value < 3) {
+    scale.value = Math.min(scale.value + 0.25, 3);
+    reRenderAllPages();
+  }
+}
+function zoomOut() {
+  if (scale.value > 0.5) {
+    scale.value = Math.max(scale.value - 0.25, 0.5);
+    reRenderAllPages();
+  }
+}
+onMounted(async () => {
+  await nextTick();
+  const doc = await loadPdf();
+  if (doc) {
+    await nextTick();
+    await renderAllPages();
+    scrollToPage(props.initialPage || 1);
+  }
+});
+watch(url, async () => {
+  renderedPages.value.clear();
+  const doc = await loadPdf();
+  if (doc) {
+    await nextTick();
+    await renderAllPages();
+    scrollToPage(props.initialPage || 1);
+  }
+});
+watch(() => props.initialPage, (page) => {
+  if (page && page > 0 && page <= state.totalPages) {
+    scrollToPage(page);
+  }
+});
+</script>
+
+<template>
+    <div class="flex flex-col h-full min-h-[60vh]">
+        <div v-if="state.isLoading" class="flex-1 flex items-center justify-center bg-gray-100 rounded-8px">
+            <div flex items-center gap-8px text-secondary>
+                <TelaIconSpinner animate-spin />
+                <span body-small-regular>Carregando documento...</span>
+            </div>
+        </div>
+
+        <div v-else-if="state.loadError" flex-1 flex items-center justify-center bg-gray-100 rounded-8px>
+            <div flex items-center gap-8px text-negative-dark>
+                <TelaIcon name="i-ph-warning" />
+                <span body-small-regular>{{ state.loadError }}</span>
+            </div>
+        </div>
+
+        <template v-else>
+            <div class="relative flex-1 min-h-0">
+                <div
+                    ref="scrollContainerRef"
+                    class="absolute inset-0 overflow-auto bg-gray-100 rounded-8px select-none"
+                    :class="[
+  isPanMode ? isDragging ? 'cursor-grabbing' : 'cursor-grab' : 'cursor-default'
+]"
+                    @mousedown="handleMouseDown"
+                    @mousemove="handleMouseMove"
+                    @mouseup="handleMouseUp"
+                    @mouseleave="handleMouseLeave"
+                    @scroll="handleScroll"
+                >
+                    <div class="flex flex-col items-start gap-16px p-16px pb-80px">
+                        <div
+                            v-for="pageNum in state.totalPages"
+                            :key="pageNum"
+                            :ref="(el) => setPageRef(pageNum, el)"
+                            class="relative flex-shrink-0 bg-white rounded-12px overflow-hidden mx-auto"
+                            style="border: 0.5px solid rgba(0, 0, 0, 0.08);"
+                        >
+                            <canvas />
+                            <div class="text-layer absolute top-0 left-0 pointer-events-none" />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    v-if="state.totalPages > 0"
+                    class="floating-nav absolute bottom-16px left-1/2 -translate-x-1/2 flex items-center gap-4px px-6px shrink-0"
+                >
+                    <div class="flex items-center shrink-0">
+                        <button
+                            class="nav-btn"
+                            :disabled="scale >= 3"
+                            @click="zoomIn"
+                        >
+                            <span class="i-ph-magnifying-glass-plus w-20px h-20px" :class="scale >= 3 ? 'text-neutral-500' : 'text-white'" />
+                        </button>
+                        <button
+                            class="nav-btn"
+                            :disabled="scale <= 0.5"
+                            @click="zoomOut"
+                        >
+                            <span class="i-ph-magnifying-glass-minus w-20px h-20px" :class="scale <= 0.5 ? 'text-neutral-500' : 'text-white'" />
+                        </button>
+                        <button
+                            class="nav-btn"
+                            @click="fitToScreen"
+                        >
+                            <span class="i-ph-corners-in w-20px h-20px text-white" />
+                        </button>
+                        <button
+                            class="nav-btn"
+                            :class="isPanMode ? 'bg-white/12' : ''"
+                            @click="togglePanMode"
+                        >
+                            <span class="i-ph-hand w-20px h-20px text-white" />
+                        </button>
+                    </div>
+
+                    <div class="divider" />
+
+                    <div class="flex items-center gap-5px px-12px py-10px shrink-0">
+                        <span class="text-12px text-white leading-16px">Página</span>
+                        <input
+                            v-model="pageInputValue"
+                            type="text"
+                            class="page-input"
+                            @keydown.enter="handlePageInputChange"
+                            @blur="handlePageInputChange"
+                        >
+                        <span class="text-12px text-white leading-16px whitespace-nowrap">de {{ state.totalPages }}</span>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.floating-nav{backdrop-filter:blur(8px);background:rgba(0,0,0,.8);border-radius:16px;box-shadow:0 6px 16px 0 rgba(0,0,0,.24);height:48px}.nav-btn{align-items:center;background:transparent;border-radius:6px;cursor:pointer;display:flex;height:40px;justify-content:center;transition:background-color .15s ease;width:40px}.nav-btn:hover:not(:disabled){background:hsla(0,0%,100%,.12)}.nav-btn:disabled{cursor:not-allowed}.page-input{background:rgba(0,0,0,.24);border:.5px solid hsla(0,0%,100%,.12);border-radius:6px;color:#fff;font-size:12px;font-weight:460;line-height:16px;outline:none;padding:2px 8px;text-align:center;width:32px}.page-input:focus{border-color:hsla(0,0%,100%,.24)}.divider{background:hsla(0,0%,100%,.5);flex-shrink:0;height:24px;width:1px}
+</style>

package/dist/runtime/files/composables/conversation-file-downloads.d.ts

@@ -0,0 +1,6 @@
+import type { ConversationFile } from '../../types/schemas/chat/files.js';
+export declare function useConversationFileDownloads(): {
+    resolveDownloadUrl: (file: ConversationFile) => Promise<string>;
+    downloadFile: (file: ConversationFile) => Promise<void>;
+    copyFileLink: (file: ConversationFile) => Promise<void>;
+};

package/dist/runtime/files/composables/conversation-file-downloads.js

@@ -0,0 +1,51 @@
+import { useClipboard } from "@vueuse/core";
+import { useStatusToast } from "../../shared/composables/status-toast.js";
+export function useConversationFileDownloads() {
+  const statusToast = useStatusToast();
+  const { copy } = useClipboard();
+  async function resolveDownloadUrl(file) {
+    if (file.url.startsWith("vault://")) {
+      const { url } = await $fetch("/api/vault/resolve", {
+        method: "POST",
+        body: { reference: file.url }
+      });
+      return url;
+    }
+    return file.url;
+  }
+  async function downloadFile(file) {
+    statusToast.update({ text: "Baixando arquivo...", loading: true });
+    try {
+      const downloadUrl = await resolveDownloadUrl(file);
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = file.name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+      statusToast.update({ text: "Download conclu\xEDdo", icon: "i-ph-check" });
+    } catch (error) {
+      console.error("Failed to download file:", error);
+      statusToast.update({ text: "Erro ao baixar arquivo", icon: "i-ph-warning" });
+    }
+  }
+  async function copyFileLink(file) {
+    try {
+      const publicUrl = await resolveDownloadUrl(file);
+      await copy(publicUrl);
+      statusToast.update({ text: "Link copiado", icon: "i-ph-check" });
+    } catch (error) {
+      console.error("Failed to copy link:", error);
+      statusToast.update({ text: "Erro ao copiar link", icon: "i-ph-warning" });
+    }
+  }
+  return {
+    resolveDownloadUrl,
+    downloadFile,
+    copyFileLink
+  };
+}

package/dist/runtime/files/composables/conversation-files.d.ts

@@ -0,0 +1,17 @@
+import type { MessageFile } from '../../types/schemas/chat/files.js';
+import type { MessageRole } from '../../types/schemas/chat/primitives.js';
+export declare function addFilesToConversation(conversationId: string, newFiles: MessageFile[], messageId: string, messageRole: MessageRole): void;
+export declare function useConversationFileActions(): {
+    addFilesToConversation: (conversationId: string, newFiles: MessageFile[], messageId: string, messageRole: MessageRole) => void;
+};
+export declare function useConversationFiles(conversationId: Ref<string | null | undefined>): {
+    files: any;
+    total: any;
+    loading: any;
+    error: any;
+    hasFiles: any;
+    imageFiles: any;
+    documentFiles: any;
+    otherFiles: any;
+    fetchFiles: () => Promise<void>;
+};

package/dist/runtime/files/composables/conversation-files.js

@@ -0,0 +1,113 @@
+import { generateFileId } from "../references.js";
+import { useChatApi } from "../../shared/composables/chat-api.js";
+function useConversationFilesState() {
+  return {
+    files: useState("conversationFiles", () => ({})),
+    loading: useState("conversationFilesLoading", () => ({})),
+    error: useState("conversationFilesError", () => ({}))
+  };
+}
+function addFilesToConversationState(state, conversationId, newFiles, messageId, messageRole) {
+  const current = state.files.value[conversationId] ?? [];
+  const filesToAdd = newFiles.filter((f) => !current.some((existing) => existing.url === f.url)).map((f) => ({
+    id: generateFileId(f.url),
+    url: f.url,
+    name: f.name,
+    mimeType: f.mimeType ?? "application/octet-stream",
+    source: "message",
+    messageId,
+    messageRole,
+    createdAt: /* @__PURE__ */ new Date(),
+    size: f.size
+  }));
+  if (filesToAdd.length > 0) {
+    state.files.value = {
+      ...state.files.value,
+      [conversationId]: [...filesToAdd, ...current]
+    };
+  }
+}
+export function addFilesToConversation(conversationId, newFiles, messageId, messageRole) {
+  addFilesToConversationState(useConversationFilesState(), conversationId, newFiles, messageId, messageRole);
+}
+export function useConversationFileActions() {
+  const state = useConversationFilesState();
+  return {
+    addFilesToConversation: (conversationId, newFiles, messageId, messageRole) => addFilesToConversationState(state, conversationId, newFiles, messageId, messageRole)
+  };
+}
+export function useConversationFiles(conversationId) {
+  const chatApi = useChatApi();
+  const state = useConversationFilesState();
+  const files = computed(() => {
+    const id = conversationId.value;
+    return id ? state.files.value[id] ?? [] : [];
+  });
+  const total = computed(() => files.value.length);
+  const loading = computed(() => {
+    const id = conversationId.value;
+    return id ? state.loading.value[id] ?? false : false;
+  });
+  const error = computed(() => {
+    const id = conversationId.value;
+    return id ? state.error.value[id] ?? null : null;
+  });
+  let currentFetchId = 0;
+  async function fetchFiles() {
+    const id = conversationId.value;
+    if (!id)
+      return;
+    const fetchId = ++currentFetchId;
+    state.loading.value = { ...state.loading.value, [id]: true };
+    state.error.value = { ...state.error.value, [id]: null };
+    try {
+      const response = await $fetch(
+        chatApi.path(`/conversations/${id}/files`),
+        chatApi.withChatHeaders()
+      );
+      if (fetchId === currentFetchId) {
+        state.files.value = { ...state.files.value, [id]: response.files };
+      }
+    } catch (err) {
+      if (fetchId === currentFetchId) {
+        state.error.value = {
+          ...state.error.value,
+          [id]: err instanceof Error ? err.message : "Falha ao buscar arquivos"
+        };
+        state.files.value = { ...state.files.value, [id]: [] };
+      }
+    } finally {
+      if (fetchId === currentFetchId) {
+        state.loading.value = { ...state.loading.value, [id]: false };
+      }
+    }
+  }
+  const hasFiles = computed(() => files.value.length > 0);
+  const imageFiles = computed(
+    () => files.value.filter((f) => f.mimeType.startsWith("image/"))
+  );
+  const documentFiles = computed(
+    () => files.value.filter(
+      (f) => f.mimeType.includes("pdf") || f.mimeType.includes("document") || f.mimeType.includes("spreadsheet") || f.mimeType.includes("presentation")
+    )
+  );
+  const otherFiles = computed(
+    () => files.value.filter(
+      (f) => !f.mimeType.startsWith("image/") && !f.mimeType.includes("pdf") && !f.mimeType.includes("document") && !f.mimeType.includes("spreadsheet") && !f.mimeType.includes("presentation")
+    )
+  );
+  watch(conversationId, () => {
+    fetchFiles();
+  }, { immediate: true });
+  return {
+    files,
+    total,
+    loading,
+    error,
+    hasFiles,
+    imageFiles,
+    documentFiles,
+    otherFiles,
+    fetchFiles
+  };
+}

package/dist/runtime/files/composables/file-preview-panel.d.ts

@@ -0,0 +1,30 @@
+import type { DetectedFile } from '../content-detection.js';
+export type FilePreviewData = {
+    file: DetectedFile;
+    resolvedUrl?: string;
+    cachedBase64?: string;
+    originalFileName?: string;
+    resolvedMimeType?: string;
+    fileSize?: number;
+    pdfTotalPages?: number;
+    csvInfo?: {
+        totalRows: number;
+        totalColumns: number;
+    };
+    textInfo?: {
+        totalLines: number;
+    };
+};
+export declare function useFilePreviewPanel(): {
+    isOpen: any;
+    isLoading: any;
+    currentFile: any;
+    panelWidth: any;
+    minPanelWidth: number;
+    maxPanelWidth: number;
+    openPreview: (data: FilePreviewData) => void;
+    updatePreview: (data: Partial<FilePreviewData>) => void;
+    setError: () => void;
+    closePreview: () => void;
+    setPanelWidth: (width: number) => void;
+};

package/dist/runtime/files/composables/file-upload.d.ts

@@ -0,0 +1,7 @@
+import type { FileUploadInput } from '../../types/schemas/chat/files.js';
+export declare function useFileUpload(): {
+    uploading: any;
+    uploadError: any;
+    uploadFile: (file: File) => Promise<FileUploadInput>;
+    uploadFiles: (files: File[]) => Promise<FileUploadInput[]>;
+};

package/dist/runtime/files/composables/media-cache.js

@@ -0,0 +1,98 @@
+import { useIDB } from "../../shared/composables/use-idb.js";
+let mediaCache = null;
+function getMediaCache() {
+  mediaCache ??= useIDB({
+    storeName: "vault-media-cache",
+    version: 2
+  });
+  return mediaCache;
+}
+export function useMediaCache() {
+  const mediaCache2 = getMediaCache();
+  async function getCached(cacheKey) {
+    try {
+      const cachedData = await mediaCache2.get(cacheKey);
+      if (cachedData)
+        return cachedData;
+      return null;
+    } catch {
+      return null;
+    }
+  }
+  async function setCache(cacheKey, base64) {
+    try {
+      await mediaCache2.set(cacheKey, base64);
+    } catch {
+    }
+  }
+  async function removeFromCache(cacheKey) {
+    try {
+      await mediaCache2.remove(cacheKey);
+    } catch {
+    }
+  }
+  async function fetchWithCache(cacheKey, fetchFn) {
+    const cached = await getCached(cacheKey);
+    if (cached)
+      return cached;
+    try {
+      const base64 = await fetchFn();
+      if (base64)
+        setCache(cacheKey, base64);
+      return base64;
+    } catch {
+      return null;
+    }
+  }
+  async function fetchUrlAsBase64(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result;
+        const base64 = result.split(",")[1];
+        if (base64)
+          resolve(base64);
+        else
+          reject(new Error("Falha ao extrair base64 da URL de dados"));
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+  async function fetchUrlWithMetadata(url) {
+    const response = await fetch(url);
+    const mimeType = response.headers.get("content-type")?.split(";")[0]?.trim() ?? null;
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result;
+        const base64 = result.split(",")[1];
+        if (base64)
+          resolve({ base64, mimeType: mimeType || blob.type || null });
+        else
+          reject(new Error("Falha ao extrair base64 da URL de dados"));
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+  async function getOrFetchBase64(vaultReference, resolvedUrl) {
+    return fetchWithCache(vaultReference, () => fetchUrlAsBase64(resolvedUrl));
+  }
+  function base64ToDataUrl(base64, mimeType) {
+    return `data:${mimeType};base64,${base64}`;
+  }
+  return {
+    getCached,
+    setCache,
+    removeFromCache,
+    fetchWithCache,
+    fetchUrlAsBase64,
+    fetchUrlWithMetadata,
+    getOrFetchBase64,
+    base64ToDataUrl
+  };
+}

package/dist/runtime/files/composables/vault.d.ts

@@ -0,0 +1,8 @@
+import type { VaultResolveResponse } from '../../types/schemas/chat/files.js';
+export declare function useVault(): {
+    loading: any;
+    error: any;
+    getFilePublicUrl: (reference: string) => Promise<string>;
+    getFileInfo: (reference: string) => Promise<VaultResolveResponse>;
+    isVaultReference: (url: string) => boolean;
+};

package/dist/runtime/files/content-detection.d.ts

@@ -0,0 +1,18 @@
+import { type VaultHashParams } from './vault-links.js';
+export type DetectedFile = {
+    type: 'vault' | 'url';
+    reference: string;
+    name: string;
+    mimeType: string;
+    hashParams?: VaultHashParams;
+};
+export type ContentSegment = {
+    type: 'text';
+    content: string;
+} | {
+    type: 'file';
+    file: DetectedFile;
+};
+export declare function detectFilesInText(text: string): DetectedFile[];
+export declare function parseContentWithFiles(text: string): ContentSegment[];
+export declare function detectFileFromUrl(url: string): DetectedFile | null;