@meistrari/chat-nuxt 1.0.0

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

@@ -0,0 +1,399 @@
+<script setup>
+import { useClipboard } from "@vueuse/core";
+import { formatFileSize, formatUploadDate, getFileIcon, getFileTypeLabel } from "../../utils/file";
+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 { copy } = useClipboard();
+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
+    });
+  }
+}
+const statusToast = useStatusToast();
+async function handleDownload(file) {
+  statusToast.update({
+    text: "Baixando arquivo...",
+    loading: true
+  });
+  try {
+    let downloadUrl = file.url;
+    if (file.url.startsWith("vault://")) {
+      const { url } = await $fetch("/api/vault/resolve", {
+        method: "POST",
+        body: { reference: file.url }
+      });
+      downloadUrl = url;
+    }
+    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 handleCopyLink(file) {
+  try {
+    let publicUrl = file.url;
+    if (file.url.startsWith("vault://")) {
+      const { url } = await $fetch("/api/vault/resolve", {
+        method: "POST",
+        body: { reference: file.url }
+      });
+      publicUrl = url;
+    }
+    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"
+    });
+  }
+}
+function getFileMenuItems(file) {
+  return [
+    {
+      label: "Copiar link",
+      icon: "i-ph-link",
+      click: () => handleCopyLink(file)
+    },
+    {
+      label: "Baixar",
+      icon: "i-ph-download-simple",
+      click: () => handleDownload(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>

package/dist/runtime/components/chat/files-view.vue.d.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;

package/dist/runtime/components/chat/generic-tool-widget.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ToolUse, ToolResult } from '../../types/reasoning.js';
+type __VLS_Props = {
+    toolUse: ToolUse;
+    toolResult?: ToolResult;
+    isActive?: boolean;
+};
+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;