@meistrari/chat-nuxt 3.13.0-rc.0 → 3.13.0-rc.2

package/dist/module.json

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

package/dist/runtime/citations/components/chat-citation.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onClickOutside } from "@vueuse/core";
+import { onClickOutside, useElementBounding, useWindowSize } from "@vueuse/core";
 import { useEmbedConfig } from "../../embed/composables/embed-config";
 import { useCitationPanel } from "../composables/citation-panel";
 import { useCitations } from "../composables/citations";
@@ -20,9 +20,55 @@ const status = computed(() => entry.value?.status.value ?? "loading");
 const meta = computed(() => entry.value?.meta.value ?? null);
 const displayLabel = computed(() => props.label?.trim() || meta.value?.identifier || meta.value?.title || "Documento");
 const rootEl = ref(null);
+const popoverEl = ref(null);
 const popoverOpen = ref(false);
 onClickOutside(rootEl, () => {
   popoverOpen.value = false;
+}, {
+  ignore: [popoverEl]
+});
+const POPOVER_WIDTH = 300;
+const POPOVER_GAP = 6;
+const VIEWPORT_PADDING = 8;
+const triggerBounds = useElementBounding(rootEl);
+const popoverBounds = useElementBounding(popoverEl);
+const viewport = useWindowSize();
+const popoverStyle = computed(() => {
+  const maxHeight = Math.max(
+    0,
+    viewport.height.value - VIEWPORT_PADDING * 2
+  );
+  const maxLeft = Math.max(
+    VIEWPORT_PADDING,
+    viewport.width.value - POPOVER_WIDTH - VIEWPORT_PADDING
+  );
+  const left = Math.min(
+    Math.max(triggerBounds.left.value, VIEWPORT_PADDING),
+    maxLeft
+  );
+  const fitsAbove = triggerBounds.top.value >= popoverBounds.height.value + POPOVER_GAP + VIEWPORT_PADDING;
+  const fitsBelow = viewport.height.value - triggerBounds.bottom.value >= popoverBounds.height.value + POPOVER_GAP + VIEWPORT_PADDING;
+  const constrainedStyle = {
+    left: `${left}px`,
+    maxHeight: `${maxHeight}px`,
+    overflowY: "auto"
+  };
+  if (fitsAbove) {
+    return {
+      ...constrainedStyle,
+      bottom: `${viewport.height.value - triggerBounds.top.value + POPOVER_GAP}px`
+    };
+  }
+  if (fitsBelow) {
+    return {
+      ...constrainedStyle,
+      top: `${triggerBounds.bottom.value + POPOVER_GAP}px`
+    };
+  }
+  return {
+    ...constrainedStyle,
+    top: `${VIEWPORT_PADDING}px`
+  };
 });
 function togglePopover() {
   if (status.value === "loading")
@@ -99,88 +145,92 @@ const badgeClasses = computed(() => BADGE_TONE_CLASSES[meta.value?.badge?.tone ?
             @click="togglePopover"
         ><span :class="chipIcon" class="citation-ref-icon" />{{ displayLabel }}</button>
 
-        <div
-            v-if="popoverOpen"
-            absolute bottom-full left-0 mb-6px z-50
-            w-300px
-            bg-white
-            border-0.5px border-solid border-neutral-300
-            rounded-12px p-12px
-            shadow-lg
-            cursor-default
-            flex="~ col" gap-8px
-        >
-            <template v-if="status === 'unresolved'">
-                <div flex items-start gap-6px>
-                    <span i-ph-warning-circle text-14px text-amber-600 mt-2px flex-shrink-0 />
-                    <p text-12px leading-16px text-neutral-700>
-                        Não foi possível verificar esta referência. Ela pode não existir ou não estar disponível para o seu perfil.
-                    </p>
-                </div>
-                <button
-                    type="button"
-                    self-start text-12px leading-16px text-neutral-700 underline cursor-pointer
-                    @click="retry"
-                >
-                    Tentar novamente
-                </button>
-            </template>
-
-            <template v-else-if="meta">
-                <div flex="~ col" gap-2px>
-                    <p text-13px leading-18px font-580 text-neutral-900>
-                        {{ meta.title }}
-                    </p>
-                    <p v-if="meta.sourceLabel || meta.identifier" text-12px leading-16px text-neutral-600>
-                        {{ [meta.sourceLabel, meta.identifier].filter(Boolean).join(" \xB7 ") }}
-                    </p>
-                    <p v-if="formattedDate" text-12px leading-16px text-neutral-500>
-                        {{ meta.dateLabel ? `${meta.dateLabel}: ` : "" }}{{ formattedDate }}
-                    </p>
-                </div>
-
-                <span
-                    v-if="meta.badge"
-                    self-start px-6px py-1px rounded-4px text-11px leading-15px font-580
-                    :class="badgeClasses"
-                >
-                    {{ meta.badge.label }}
-                </span>
-
-                <p v-if="meta.snippet" text-12px leading-17px text-neutral-600 line-clamp-3>
-                    {{ meta.snippet }}
-                </p>
-
-                <div v-if="canOpenDocument || safeSourceUrl" flex items-center gap-12px pt-2px>
+        <Teleport to="body">
+            <div
+                v-if="popoverOpen"
+                ref="popoverEl"
+                class="citation-ref-popover"
+                :style="popoverStyle"
+                w-300px
+                bg-white
+                border-0.5px border-solid border-neutral-300
+                rounded-12px p-12px
+                shadow-lg
+                cursor-default
+                flex="~ col" gap-8px
+            >
+                <template v-if="status === 'unresolved'">
+                    <div flex items-start gap-6px>
+                        <span i-ph-warning-circle text-14px text-amber-600 mt-2px flex-shrink-0 />
+                        <p text-12px leading-16px text-neutral-700>
+                            Não foi possível verificar esta referência. Ela pode não existir ou não estar disponível para o seu perfil.
+                        </p>
+                    </div>
                     <button
-                        v-if="canOpenDocument"
                         type="button"
-                        inline-flex items-center gap-4px
-                        text-12px leading-16px font-580 text-neutral-900
-                        cursor-pointer hover:underline
-                        @click="openDocument"
+                        self-start text-12px leading-16px text-neutral-700 underline cursor-pointer
+                        @click="retry"
                     >
-                        <span i-ph-file-magnifying-glass text-13px />
-                        Ver documento
+                        Tentar novamente
                     </button>
-                    <a
-                        v-if="safeSourceUrl"
-                        :href="safeSourceUrl"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        inline-flex items-center gap-4px
-                        text-12px leading-16px text-neutral-600
-                        hover:underline
+                </template>
+
+                <template v-else-if="meta">
+                    <div flex="~ col" gap-2px>
+                        <p text-13px leading-18px font-580 text-neutral-900>
+                            {{ meta.title }}
+                        </p>
+                        <p v-if="meta.sourceLabel || meta.identifier" text-12px leading-16px text-neutral-600>
+                            {{ [meta.sourceLabel, meta.identifier].filter(Boolean).join(" \xB7 ") }}
+                        </p>
+                        <p v-if="formattedDate" text-12px leading-16px text-neutral-500>
+                            {{ meta.dateLabel ? `${meta.dateLabel}: ` : "" }}{{ formattedDate }}
+                        </p>
+                    </div>
+
+                    <span
+                        v-if="meta.badge"
+                        self-start px-6px py-1px rounded-4px text-11px leading-15px font-580
+                        :class="badgeClasses"
                     >
-                        <span i-ph-arrow-square-out text-13px />
-                        Abrir na fonte
-                    </a>
-                </div>
-            </template>
-        </div>
+                        {{ meta.badge.label }}
+                    </span>
+
+                    <p v-if="meta.snippet" text-12px leading-17px text-neutral-600 line-clamp-3>
+                        {{ meta.snippet }}
+                    </p>
+
+                    <div v-if="canOpenDocument || safeSourceUrl" flex items-center gap-12px pt-2px>
+                        <button
+                            v-if="canOpenDocument"
+                            type="button"
+                            inline-flex items-center gap-4px
+                            text-12px leading-16px font-580 text-neutral-900
+                            cursor-pointer hover:underline
+                            @click="openDocument"
+                        >
+                            <span i-ph-file-magnifying-glass text-13px />
+                            Ver documento
+                        </button>
+                        <a
+                            v-if="safeSourceUrl"
+                            :href="safeSourceUrl"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            inline-flex items-center gap-4px
+                            text-12px leading-16px text-neutral-600
+                            hover:underline
+                        >
+                            <span i-ph-arrow-square-out text-13px />
+                            Abrir na fonte
+                        </a>
+                    </div>
+                </template>
+            </div>
+        </Teleport>
     </span>
 </template>
 
 <style scoped>
-.citation-ref{display:inline;position:relative}.citation-ref-anchor{background:transparent;border:0;border-radius:5px;color:inherit;cursor:pointer;display:inline;font:inherit;margin:0 -2px;padding:1px 3px;text-decoration:underline;text-decoration-color:#a3a3a3;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px;transition:background-color .15s ease,text-decoration-color .15s ease}.citation-ref-anchor:hover{background-color:#f5f5f5;text-decoration-color:#525252}.citation-ref-anchor--loading{cursor:default;opacity:.6;text-decoration-color:#d4d4d4}.citation-ref-anchor--unresolved{text-decoration-color:#f59e0b}.citation-ref-anchor--unresolved:hover{background-color:#fffbeb}.citation-ref-icon{display:inline-block;font-size:.85em;margin-right:.25em;vertical-align:-.08em}
+.citation-ref{display:inline;position:relative}.citation-ref-popover{position:fixed;z-index:50}.citation-ref-anchor{background:transparent;border:0;border-radius:5px;color:inherit;cursor:pointer;display:inline;font:inherit;margin:0 -2px;padding:1px 3px;text-decoration:underline;text-decoration-color:#a3a3a3;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px;transition:background-color .15s ease,text-decoration-color .15s ease}.citation-ref-anchor:hover{background-color:#f5f5f5;text-decoration-color:#525252}.citation-ref-anchor--loading{cursor:default;opacity:.6;text-decoration-color:#d4d4d4}.citation-ref-anchor--unresolved{text-decoration-color:#f59e0b}.citation-ref-anchor--unresolved:hover{background-color:#fffbeb}.citation-ref-icon{display:inline-block;font-size:.85em;margin-right:.25em;vertical-align:-.08em}
 </style>

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -9,6 +9,7 @@ import ChatMobileShell from "./mobile/chat-mobile-shell.vue";
 import { normalizeConversationId } from "../../conversations/scope";
 import { resolveChatFeatures } from "../feature-config";
 import { resolveConversationCreator } from "../../conversations/creator";
+import { buildConversationShareUrl } from "../conversation-share-url";
 import {
   resolveTelaAgentInputs,
   useChat
@@ -59,6 +60,7 @@ function toggleSidebarCollapsed() {
   isSidebarCollapsed.value = !isSidebarCollapsed.value;
 }
 const chatApi = useChatApi();
+const route = useRoute();
 const embedConfig = useEmbedConfig();
 const chatAction = useChatAction();
 const { user: authUser, activeOrganization, logout } = useChatAuth();
@@ -117,8 +119,9 @@ const {
   closePreview
 } = useFilePreviewPanel();
 const { isOpen: isCitationPanelOpen } = useCitationPanel();
+const sharedConversationId = typeof route.query.conversation === "string" ? route.query.conversation : null;
 const activeConversationId = ref(
-  normalizeConversationId(props.conversationId) ?? normalizeConversationId(props.initialConversationId)
+  normalizeConversationId(props.conversationId) ?? normalizeConversationId(props.initialConversationId) ?? normalizeConversationId(sharedConversationId)
 );
 const loadingConversationId = ref(null);
 const isReady = ref(false);
@@ -643,8 +646,14 @@ function cancelEditing() {
 }
 const copiedToClipboard = ref(false);
 async function handleShare() {
+  if (!currentConversation.value)
+    return;
   try {
-    await navigator.clipboard.writeText(window.location.href);
+    const shareUrl = buildConversationShareUrl(
+      window.location.href,
+      currentConversation.value.id
+    );
+    await navigator.clipboard.writeText(shareUrl);
     copiedToClipboard.value = true;
     statusToast.update({ text: "Link copiado", icon: "i-ph-check" });
     setTimeout(() => {

package/dist/runtime/embed/conversation-share-url.d.ts

@@ -0,0 +1 @@
+export declare function buildConversationShareUrl(currentHref: string, conversationId: string): string;

package/dist/runtime/embed/conversation-share-url.js

@@ -0,0 +1,5 @@
+export function buildConversationShareUrl(currentHref, conversationId) {
+  const shareUrl = new URL(currentHref);
+  shareUrl.searchParams.set("conversation", conversationId);
+  return shareUrl.href;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "3.13.0-rc.0",
+  "version": "3.13.0-rc.2",
   "type": "module",
   "exports": {
     ".": {