@meistrari/chat-nuxt 1.0.0

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

@@ -0,0 +1,265 @@
+<script setup>
+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/components/pdf-viewer.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    url: string;
+    initialPage?: number;
+    initialScale?: number;
+    highlight?: string | null;
+    highlightPage?: number | null;
+};
+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/powered-by-tela.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/powered-by-tela.vue

@@ -0,0 +1,14 @@
+<template>
+    <div flex="~ col" gap-8px items-start>
+        <div body-9-medium text="#9DA2AA">
+            Desenvolvido por
+        </div>
+        <svg h-12px viewBox="0 0 38 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M36.2775 6.40644C36.2775 5.46937 35.6276 4.89503 34.6301 4.89503C33.7081 4.89503 33.0582 5.43914 32.9524 6.34599L31.4712 6.07393C31.7131 4.57763 33.0129 3.59521 34.6301 3.59521C36.5647 3.59521 37.8947 4.68343 37.8947 6.58781V11.3337H36.2775V10.1699C35.8392 10.9407 34.9021 11.4546 33.8895 11.4546C32.3781 11.4546 31.3352 10.5024 31.3352 9.20256C31.3352 7.70626 32.499 6.90521 34.8417 6.66338L36.2775 6.51224V6.40644ZM32.9524 9.15721C32.9524 9.76178 33.4512 10.185 34.222 10.185C35.5067 10.185 36.2624 9.29324 36.2775 8.05388V7.73649L34.8266 7.90274C33.5872 8.03877 32.9524 8.49219 32.9524 9.15721Z" fill="#030C16" />
+            <path d="M28.5046 11.3331V0.632324H30.152V11.3331H28.5046Z" fill="#030C16" />
+            <path d="M20.1277 7.5244C20.1277 5.46888 21.3927 3.59473 23.7463 3.59473C26.1293 3.59473 27.3944 5.37819 27.3944 7.23723C27.3944 7.46394 27.3796 7.78134 27.3649 7.91737H21.7016C21.8487 9.2323 22.6725 10.0485 23.8493 10.0485C24.8201 10.0485 25.5115 9.57992 25.7027 8.74865L27.2178 9.14161C26.8207 10.6077 25.5556 11.4541 23.8199 11.4541C21.4663 11.4541 20.1277 9.57992 20.1277 7.5244ZM21.7752 6.6629H25.688C25.585 5.63513 24.9231 4.89454 23.7463 4.89454C22.7313 4.89454 22.0105 5.52934 21.7752 6.6629Z" fill="#030C16" />
+            <path d="M19.6861 11.2729C19.3234 11.3938 18.9002 11.4543 18.477 11.4543C17.0412 11.4543 15.9681 10.6684 15.9681 8.93023V5.12147H14.638V3.71585H15.9681V1.44873H17.6155V3.71585H19.5803V5.12147H17.6155V8.83954C17.6155 9.59525 18.0387 9.98822 18.6584 9.98822C18.9455 9.98822 19.2932 9.94287 19.5803 9.80685L19.6861 11.2729Z" fill="#030C16" />
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0H0V12H12V0ZM10.2512 1.74939H1.75122V10.2494H10.2512V1.74939Z" fill="#030C16" />
+        </svg>
+    </div>
+</template>

package/dist/runtime/components/powered-by-tela.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/artifact-display.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    url: string;
+    mimeType: string;
+    name?: string;
+    isDownloading?: boolean;
+    initialPdfScale?: number;
+    initialPdfPage?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    download: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDownload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/artifact-display.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { normalizeMimeType } from "../../utils/file";
+const props = defineProps({
+  url: { type: String, required: true },
+  mimeType: { type: String, required: true },
+  name: { type: String, required: false },
+  isDownloading: { type: Boolean, required: false },
+  initialPdfScale: { type: Number, required: false },
+  initialPdfPage: { type: Number, required: false }
+});
+const emit = defineEmits(["download"]);
+const normalizedMimeType = computed(() => normalizeMimeType(props.mimeType));
+const isImage = computed(() => normalizedMimeType.value.startsWith("image/"));
+const isPdf = computed(() => normalizedMimeType.value === "application/pdf");
+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 isMarkdown = computed(() => {
+  const mime = normalizedMimeType.value;
+  if (mime === "text/markdown" || mime === "text/x-markdown")
+    return true;
+  const name = props.name?.toLowerCase() ?? "";
+  return name.endsWith(".md") || name.endsWith(".markdown");
+});
+const isText = computed(() => {
+  const mime = normalizedMimeType.value;
+  if (isCsv.value || isMarkdown.value)
+    return false;
+  return mime.startsWith("text/") || isJson.value || mime === "application/xml";
+});
+</script>
+
+<template>
+    <div class="relative h-full min-h-[60vh] p-16px">
+        <!-- Image -->
+        <RenderersImageRenderer
+            v-if="isImage"
+            :url="url"
+            :alt="name"
+        />
+
+        <!-- PDF -->
+        <PdfViewer v-else-if="isPdf" :url="url" :initial-scale="initialPdfScale" :initial-page="initialPdfPage" @download="emit('download')" />
+
+        <!-- Video -->
+        <RenderersVideoRenderer
+            v-else-if="isVideo"
+            :url="url"
+        />
+
+        <!-- Audio -->
+        <RenderersAudioRenderer
+            v-else-if="isAudio"
+            :url="url"
+            :name="name"
+        />
+
+        <!-- CSV -->
+        <RenderersCsvRenderer
+            v-else-if="isCsv"
+            :url="url"
+        />
+
+        <!-- Markdown -->
+        <RenderersMarkdownRenderer
+            v-else-if="isMarkdown"
+            :url="url"
+        />
+
+        <!-- Text/Code -->
+        <RenderersTextRenderer
+            v-else-if="isText"
+            :url="url"
+            :mime-type="normalizedMimeType"
+        />
+
+        <!-- Generic Fallback -->
+        <div v-else class="h-full flex items-center justify-center p-40px">
+            <div class="text-center">
+                <div class="w-80px h-80px mx-auto mb-16px rounded-20px flex items-center justify-center bg-gray-100">
+                    <TelaIcon name="i-ph-file" class="text-48px text-gray-400" />
+                </div>
+                <p class="text-14px text-gray-500">
+                    Preview não disponível
+                </p>
+                <p class="text-12px text-gray-400 mt-4px">
+                    Use o botão de download para baixar o arquivo
+                </p>
+                <TelaButton
+                    v-if="url"
+                    class="mt-16px"
+                    variant="secondary"
+                    :loading="isDownloading"
+                    @click="emit('download')"
+                >
+                    <template #leading>
+                        <TelaIcon name="i-ph-download-simple" />
+                    </template>
+                    Download
+                </TelaButton>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/renderers/artifact-display.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    url: string;
+    mimeType: string;
+    name?: string;
+    isDownloading?: boolean;
+    initialPdfScale?: number;
+    initialPdfPage?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    download: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDownload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/audio-renderer.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    url: string;
+    name?: 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/renderers/audio-renderer.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineProps({
+  url: { type: String, required: true },
+  name: { type: String, required: false }
+});
+const isLoading = ref(true);
+const error = ref(false);
+function onCanPlay() {
+  isLoading.value = false;
+}
+function onError() {
+  isLoading.value = false;
+  error.value = true;
+}
+</script>
+
+<template>
+    <div class="h-full flex flex-col min-h-[60vh]">
+        <!-- Loading -->
+        <div v-if="isLoading" class="flex-1 flex items-center justify-center">
+            <TelaIconSpinner animate-spin class="text-24px text-gray-400" />
+        </div>
+
+        <!-- Error -->
+        <div v-else-if="error" class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-speaker-x" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    Falha ao carregar áudio
+                </p>
+            </div>
+        </div>
+
+        <div v-show="!isLoading && !error" class="flex-1 flex items-center justify-center p-20px">
+            <div class="w-full max-w-400px">
+                <div class="w-80px h-80px mx-auto mb-16px rounded-full flex items-center justify-center bg-gray-100">
+                    <span class="i-ph-music-notes text-32px text-gray-600" />
+                </div>
+                <p v-if="name" class="text-center text-14px text-gray-700 mb-12px truncate">
+                    {{ name }}
+                </p>
+                <audio
+                    :src="url"
+                    controls
+                    class="w-full"
+                    @canplay="onCanPlay"
+                    @error="onError"
+                />
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/renderers/audio-renderer.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    url: string;
+    name?: 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/renderers/csv-renderer.d.vue.ts

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