@meistrari/chat-nuxt 1.0.0

package/dist/runtime/composables/useMentionAutocomplete.js

@@ -0,0 +1,272 @@
+export function useMentionAutocomplete(options) {
+  const { editorRef, fileItems, skillItems, disabled, onInsert } = options;
+  const activeTrigger = ref(null);
+  const query = ref("");
+  const highlightedIndex = ref(-1);
+  const lastQuery = ref("");
+  let triggerTextOffset = -1;
+  const isOpen = computed(() => activeTrigger.value !== null);
+  const filteredItems = computed(() => {
+    if (!activeTrigger.value)
+      return [];
+    const items = activeTrigger.value === "@" ? fileItems.value : skillItems.value;
+    if (!query.value)
+      return items;
+    const q = query.value.toLowerCase();
+    return items.filter(
+      (item) => item.label.toLowerCase().includes(q) || item.description?.toLowerCase().includes(q)
+    );
+  });
+  function getTextBeforeCursor() {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !editorRef.value)
+      return "";
+    const range = sel.getRangeAt(0);
+    const preRange = document.createRange();
+    preRange.selectNodeContents(editorRef.value);
+    preRange.setEnd(range.startContainer, range.startOffset);
+    return preRange.toString();
+  }
+  function detectTrigger() {
+    if (disabled?.value) {
+      activeTrigger.value = null;
+      return;
+    }
+    const textBefore = getTextBeforeCursor();
+    for (let i = textBefore.length - 1; i >= 0; i--) {
+      const char = textBefore[i];
+      if (char === " " || char === "\n" || char === "\xA0") {
+        activeTrigger.value = null;
+        return;
+      }
+      if (char === "@" || char === "/") {
+        activeTrigger.value = char;
+        triggerTextOffset = i;
+        const newQuery = textBefore.slice(i + 1);
+        if (newQuery !== lastQuery.value) {
+          highlightedIndex.value = -1;
+          lastQuery.value = newQuery;
+        }
+        query.value = newQuery;
+        return;
+      }
+    }
+    activeTrigger.value = null;
+  }
+  function getCaretRangeAtOffset(offset) {
+    const editor = editorRef.value;
+    if (!editor)
+      return null;
+    let current = 0;
+    function walkNode(node) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const len = node.textContent?.length ?? 0;
+        if (current + len >= offset) {
+          const r = document.createRange();
+          r.setStart(node, offset - current);
+          r.collapse(true);
+          return r;
+        }
+        current += len;
+        return null;
+      }
+      if (node.nodeName === "BR") {
+        return null;
+      }
+      if (node.nodeType === Node.ELEMENT_NODE && node.contentEditable === "false") {
+        const len = node.textContent?.length ?? 0;
+        if (current + len > offset) {
+          const r = document.createRange();
+          r.setStartBefore(node);
+          r.collapse(true);
+          return r;
+        }
+        current += len;
+        return null;
+      }
+      for (const child of node.childNodes) {
+        const result = walkNode(child);
+        if (result)
+          return result;
+      }
+      return null;
+    }
+    return walkNode(editor);
+  }
+  function escapeAttr(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  function selectItem(item) {
+    if (!editorRef.value || triggerTextOffset < 0)
+      return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0)
+      return;
+    const textBeforeCursor = getTextBeforeCursor();
+    const charBeforeTrigger = triggerTextOffset > 0 ? textBeforeCursor[triggerTextOffset - 1] : null;
+    const needsSpaceBefore = charBeforeTrigger !== null && charBeforeTrigger !== " " && charBeforeTrigger !== "\n" && charBeforeTrigger !== "\xA0";
+    const triggerRange = getCaretRangeAtOffset(triggerTextOffset);
+    if (!triggerRange)
+      return;
+    const currentRange = sel.getRangeAt(0);
+    const deleteRange = document.createRange();
+    deleteRange.setStart(triggerRange.startContainer, triggerRange.startOffset);
+    deleteRange.setEnd(currentRange.startContainer, currentRange.startOffset);
+    deleteRange.deleteContents();
+    const span = document.createElement("span");
+    span.className = `mention-tag mention-tag-${item.category}`;
+    span.contentEditable = "false";
+    span.dataset.mentionId = item.id;
+    span.dataset.mentionCategory = item.category;
+    span.dataset.mentionLabel = item.label;
+    if (item.description)
+      span.dataset.mentionDescription = item.description;
+    if (item.variables)
+      span.dataset.mentionVariables = JSON.stringify(item.variables);
+    const iconClass = item.category === "file" ? "i-ph-note-blank" : item.category === "canvas" ? "i-ph-wrench" : "i-ph-hexagon";
+    const icon = document.createElement("span");
+    icon.className = iconClass;
+    icon.setAttribute("aria-hidden", "true");
+    span.appendChild(icon);
+    span.appendChild(document.createTextNode(item.label));
+    deleteRange.insertNode(span);
+    if (needsSpaceBefore)
+      span.before(document.createTextNode(" "));
+    const space = document.createTextNode("\xA0");
+    span.after(space);
+    const newRange = document.createRange();
+    newRange.setStartAfter(space);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+    activeTrigger.value = null;
+    lastQuery.value = "";
+    highlightedIndex.value = -1;
+    triggerTextOffset = -1;
+    onInsert?.();
+  }
+  function buildTaggedContent() {
+    if (!editorRef.value)
+      return "";
+    let accumulated = false;
+    function walkNode(node) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent ?? "";
+        if (text)
+          accumulated = true;
+        return text;
+      }
+      if (node.nodeName === "BR") {
+        if (node.dataset?.sentinel)
+          return "";
+        accumulated = true;
+        return "\n";
+      }
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        if (el.contentEditable === "false" && el.dataset.mentionCategory) {
+          const { mentionCategory, mentionId, mentionLabel, mentionDescription } = el.dataset;
+          if (mentionCategory === "file") {
+            const urlAttr = mentionId ? ` url="${escapeAttr(mentionId)}"` : "";
+            accumulated = true;
+            return `<file_mention name="${escapeAttr(mentionLabel ?? "")}"${urlAttr}>Foque neste arquivo espec\xEDfico na sua resposta.</file_mention>`;
+          }
+          if (mentionCategory === "canvas") {
+            const idAttr = mentionId ? ` canvas-id="${escapeAttr(mentionId)}"` : "";
+            const descAttr = mentionDescription ? ` description="${escapeAttr(mentionDescription)}"` : "";
+            const { mentionVariables } = el.dataset;
+            let variablesBlock = "";
+            if (mentionVariables) {
+              try {
+                const vars = JSON.parse(mentionVariables);
+                const varLines = Object.values(vars).map((v) => `- ${v.name} (${v.type}): ${v.description}`).join("\n");
+                variablesBlock = `
+Vari\xE1veis obrigat\xF3rias (use EXATAMENTE estes nomes no JSON):
+${varLines}
+`;
+              } catch {
+              }
+            }
+            accumulated = true;
+            return `<canvas_mention name="${escapeAttr(mentionLabel ?? "")}"${idAttr}${descAttr}>O usu\xE1rio quer usar este canvas do Tela.${variablesBlock}Invoque via Bash: bun run .claude/skills/tela/run.ts "${escapeAttr(mentionId ?? "")}" com as vari\xE1veis em JSON.</canvas_mention>`;
+          }
+          if (mentionCategory === "skill") {
+            const refAttr = mentionId ? ` ref="${escapeAttr(mentionId)}"` : "";
+            const descAttr = mentionDescription ? ` description="${escapeAttr(mentionDescription)}"` : "";
+            accumulated = true;
+            return `<skill_mention name="${escapeAttr(mentionLabel ?? "")}"${refAttr}${descAttr}>O usu\xE1rio quer usar esta skill. Invoque-a diretamente.</skill_mention>`;
+          }
+        }
+        let text = "";
+        if (el.tagName === "DIV" && accumulated)
+          text += "\n";
+        for (const child of el.childNodes)
+          text += walkNode(child);
+        return text;
+      }
+      return "";
+    }
+    let result = "";
+    for (const child of editorRef.value.childNodes)
+      result += walkNode(child);
+    return result.replace(/\u00A0/g, " ");
+  }
+  function resetMentions() {
+    if (editorRef.value)
+      editorRef.value.innerHTML = "";
+    triggerTextOffset = -1;
+    activeTrigger.value = null;
+    lastQuery.value = "";
+    query.value = "";
+  }
+  function dismiss() {
+    activeTrigger.value = null;
+    lastQuery.value = "";
+    highlightedIndex.value = -1;
+  }
+  function handleKeydown(e) {
+    if (!isOpen.value)
+      return;
+    if (e.key === "Escape" || e.key === "Tab") {
+      e.preventDefault();
+      dismiss();
+      return;
+    }
+    const count = filteredItems.value.length;
+    if (count === 0)
+      return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      highlightedIndex.value = (highlightedIndex.value + 1) % count;
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      highlightedIndex.value = highlightedIndex.value <= 0 ? count - 1 : highlightedIndex.value - 1;
+      return;
+    }
+    if (e.key === "Enter") {
+      const item = filteredItems.value[highlightedIndex.value];
+      if (item) {
+        e.preventDefault();
+        selectItem(item);
+      } else {
+        e.preventDefault();
+        dismiss();
+      }
+    }
+  }
+  return reactive({
+    isOpen,
+    activeTrigger: readonly(activeTrigger),
+    query: readonly(query),
+    filteredItems,
+    highlightedIndex,
+    handleKeydown,
+    selectItem,
+    dismiss,
+    detectTrigger,
+    buildTaggedContent,
+    resetMentions
+  });
+}

package/dist/runtime/composables/useMermaidRenderer.d.ts

@@ -0,0 +1,5 @@
+export declare function useMermaidRenderer(diagramSource: Ref<string>, svgContainerRef: Ref<HTMLElement | null>): {
+    renderedSvg: any;
+    renderedError: any;
+    isFallbackRendering: any;
+};

package/dist/runtime/composables/useMermaidRenderer.js

@@ -0,0 +1,121 @@
+import { renderMermaidSVG } from "beautiful-mermaid";
+let mermaidLoader = null;
+async function loadMermaid() {
+  if (!mermaidLoader) {
+    mermaidLoader = import("mermaid").then(({ default: mermaid }) => {
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme: "base",
+        fontFamily: 'Inter, "Inter Fallback: Arial", sans-serif',
+        themeVariables: {
+          primaryColor: "#f8fafc",
+          primaryTextColor: "#18181b",
+          primaryBorderColor: "#d1d5db",
+          lineColor: "#64748b",
+          secondaryColor: "#eff6ff",
+          tertiaryColor: "#ffffff",
+          background: "#ffffff",
+          mainBkg: "#f8fafc",
+          secondBkg: "#eff6ff",
+          tertiaryBkg: "#ffffff",
+          textColor: "#18181b",
+          edgeLabelBackground: "#ffffff",
+          clusterBkg: "#f8fafc",
+          clusterBorder: "#d1d5db",
+          actorBkg: "#f8fafc",
+          actorBorder: "#d1d5db",
+          actorTextColor: "#18181b",
+          labelBoxBkgColor: "#ffffff",
+          labelBoxBorderColor: "#d1d5db",
+          cScale0: "#dbeafe",
+          cScale1: "#bfdbfe",
+          cScale2: "#93c5fd",
+          cScale3: "#60a5fa",
+          cScale4: "#3b82f6",
+          pie1: "#2563eb",
+          pie2: "#60a5fa",
+          pie3: "#93c5fd",
+          pie4: "#bfdbfe",
+          pie5: "#dbeafe"
+        }
+      });
+      return mermaid;
+    }).catch((err) => {
+      mermaidLoader = null;
+      throw err;
+    });
+  }
+  return mermaidLoader;
+}
+export function useMermaidRenderer(diagramSource, svgContainerRef) {
+  const instance = getCurrentInstance();
+  const renderIdBase = `mermaid-diagram-${instance?.uid ?? Math.random().toString(36).slice(2)}`;
+  const fallbackSvg = ref("");
+  const fallbackError = ref(null);
+  const isFallbackRendering = ref(false);
+  const beautifulResult = computed(() => {
+    if (!diagramSource.value) {
+      return { svg: "", error: null };
+    }
+    try {
+      return {
+        svg: renderMermaidSVG(diagramSource.value, {
+          bg: "var(--mermaid-bg, #ffffff)",
+          fg: "var(--mermaid-fg, #18181b)",
+          line: "var(--mermaid-line, #64748b)",
+          accent: "var(--mermaid-accent, #2563eb)",
+          muted: "var(--mermaid-muted, #6b7280)",
+          surface: "var(--mermaid-surface, #f8fafc)",
+          border: "var(--mermaid-border, #d1d5db)",
+          font: 'Inter, "Inter Fallback: Arial", sans-serif',
+          padding: 24,
+          transparent: true,
+          interactive: true
+        }),
+        error: null
+      };
+    } catch (error) {
+      return {
+        svg: "",
+        error: error instanceof Error ? error.message : String(error)
+      };
+    }
+  });
+  const renderedSvg = computed(() => beautifulResult.value.svg || fallbackSvg.value);
+  const renderedError = computed(() => {
+    if (renderedSvg.value || isFallbackRendering.value) {
+      return null;
+    }
+    return fallbackError.value ?? beautifulResult.value.error;
+  });
+  watch(diagramSource, async (source) => {
+    fallbackSvg.value = "";
+    fallbackError.value = null;
+    isFallbackRendering.value = false;
+    if (!source || beautifulResult.value.svg || !beautifulResult.value.error || !import.meta.client) {
+      return;
+    }
+    isFallbackRendering.value = true;
+    try {
+      const mermaid = await loadMermaid();
+      const renderId = `${renderIdBase}-${Date.now()}`;
+      const { svg, bindFunctions } = await mermaid.render(renderId, source);
+      fallbackSvg.value = svg;
+      fallbackError.value = null;
+      await nextTick();
+      if (svgContainerRef.value && typeof bindFunctions === "function") {
+        bindFunctions(svgContainerRef.value);
+      }
+    } catch (error) {
+      fallbackError.value = error instanceof Error ? error.message : String(error);
+    } finally {
+      isFallbackRendering.value = false;
+    }
+  }, { immediate: true });
+  return {
+    renderedSvg,
+    renderedError,
+    isFallbackRendering
+  };
+}

package/dist/runtime/composables/usePdf.d.ts

@@ -0,0 +1,21 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+export interface PdfState {
+    pdfDoc: PDFDocumentProxy | null;
+    totalPages: number;
+    isLoading: boolean;
+    loadError: string | null;
+}
+export interface RenderPageOptions {
+    pageNum: number;
+    canvas: HTMLCanvasElement;
+    textLayer?: HTMLDivElement | null;
+    scale: number;
+    highlight?: string | null;
+    highlightPage?: number | null;
+}
+export declare function usePdf(url: Ref<string>): {
+    state: any;
+    loadPdf: () => Promise<PDFDocumentProxy | null>;
+    renderPage: (options: RenderPageOptions) => Promise<void>;
+    cleanup: () => void;
+};

package/dist/runtime/composables/usePdf.js

@@ -0,0 +1,138 @@
+import * as Sentry from "@sentry/nuxt";
+import * as pdfjsLib from "pdfjs-dist";
+import { markRaw } from "vue";
+pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+export function usePdf(url) {
+  const state = reactive({
+    pdfDoc: null,
+    totalPages: 0,
+    isLoading: true,
+    loadError: null
+  });
+  let isUnmounted = false;
+  async function loadPdf() {
+    if (isUnmounted)
+      return null;
+    state.isLoading = true;
+    state.loadError = null;
+    try {
+      const loadingTask = pdfjsLib.getDocument(url.value);
+      const doc = await loadingTask.promise;
+      if (isUnmounted) {
+        doc.destroy();
+        return null;
+      }
+      state.pdfDoc = markRaw(doc);
+      state.totalPages = doc.numPages;
+      state.isLoading = false;
+      return doc;
+    } catch (err) {
+      if (isUnmounted)
+        return null;
+      Sentry.captureException(err);
+      state.loadError = `Falha ao carregar o PDF: ${err?.message || "Erro desconhecido"}`;
+      state.isLoading = false;
+      return null;
+    }
+  }
+  async function renderPage(options) {
+    if (isUnmounted || !state.pdfDoc)
+      return;
+    const { pageNum, canvas, textLayer, scale, highlight, highlightPage } = options;
+    try {
+      const page = await state.pdfDoc.getPage(pageNum);
+      if (isUnmounted)
+        return;
+      const viewport = page.getViewport({ scale });
+      const context = canvas.getContext("2d");
+      if (!context)
+        return;
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      await page.render({
+        canvasContext: context,
+        viewport,
+        canvas
+      }).promise;
+      if (isUnmounted)
+        return;
+      if (textLayer) {
+        await renderTextLayer(page, viewport, textLayer, highlight, highlightPage, pageNum);
+      }
+    } catch (err) {
+      if (!isUnmounted) {
+        Sentry.captureException(err);
+      }
+    }
+  }
+  async function renderTextLayer(page, viewport, textLayer, highlight, highlightPage, pageNum) {
+    if (isUnmounted)
+      return;
+    textLayer.innerHTML = "";
+    textLayer.style.width = `${viewport.width}px`;
+    textLayer.style.height = `${viewport.height}px`;
+    const textContent = await page.getTextContent();
+    if (isUnmounted)
+      return;
+    const textItems = textContent.items;
+    const searchWords = [];
+    const shouldHighlight = highlight && (!highlightPage || highlightPage === pageNum);
+    if (shouldHighlight && highlight) {
+      const normalized = highlight.toLowerCase().normalize("NFD").replace(/[\u0300-\u036F]/g, "").replace(/[^\w\s]/g, " ").trim();
+      normalized.split(/\s+/).forEach((word) => {
+        if (word.length >= 3) {
+          searchWords.push(word);
+        }
+      });
+      if (normalized.length >= 3) {
+        searchWords.push(normalized);
+      }
+    }
+    for (const item of textItems) {
+      if (isUnmounted)
+        return;
+      const div = document.createElement("span");
+      const tx = pdfjsLib.Util.transform(viewport.transform, item.transform);
+      div.textContent = item.str;
+      div.style.position = "absolute";
+      div.style.left = `${tx[4]}px`;
+      div.style.top = `${tx[5] - item.height}px`;
+      div.style.fontSize = `${Math.abs(tx[0])}px`;
+      div.style.fontFamily = "sans-serif";
+      div.style.color = "transparent";
+      div.style.whiteSpace = "nowrap";
+      if (searchWords.length > 0 && item.str.trim()) {
+        const itemText = item.str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036F]/g, "").trim();
+        if (itemText.length >= 2) {
+          const isMatch = searchWords.some((word) => {
+            return word.includes(itemText) || itemText.includes(word);
+          });
+          if (isMatch) {
+            div.style.backgroundColor = "rgba(255, 235, 59, 0.7)";
+            div.style.borderRadius = "2px";
+          }
+        }
+      }
+      textLayer.appendChild(div);
+    }
+  }
+  function cleanup() {
+    isUnmounted = true;
+    if (state.pdfDoc) {
+      state.pdfDoc.destroy();
+      state.pdfDoc = null;
+    }
+  }
+  watch(url, () => {
+    loadPdf();
+  });
+  onUnmounted(() => {
+    cleanup();
+  });
+  return {
+    state,
+    loadPdf,
+    renderPage,
+    cleanup
+  };
+}

package/dist/runtime/composables/usePolling.d.ts

@@ -0,0 +1,12 @@
+export declare function usePolling({ callback, interval, stopCondition, onFinish, }: {
+    callback: () => Promise<void>;
+    interval: MaybeRef<number>;
+    stopCondition: Ref<boolean>;
+    onFinish?: () => void;
+}): {
+    isPolling: Readonly<import("vue").ShallowRef<boolean>>;
+    stop: () => void;
+    start: () => void;
+    resume: import("@vueuse/core").Fn;
+    waitForResult: () => Promise<void>;
+};

package/dist/runtime/composables/usePolling.js

@@ -0,0 +1,55 @@
+import { useIntervalFn } from "@vueuse/core";
+export function usePolling({
+  callback,
+  interval,
+  stopCondition,
+  onFinish
+}) {
+  let isRunning = false;
+  let hasFinished = false;
+  const { isActive, resume, pause } = useIntervalFn(async () => {
+    if (isRunning)
+      return;
+    if (stopCondition.value) {
+      if (!hasFinished) {
+        hasFinished = true;
+        pause();
+        onFinish?.();
+      }
+      return;
+    }
+    isRunning = true;
+    await callback();
+    isRunning = false;
+  }, interval, { immediate: false });
+  function stop() {
+    if (!hasFinished) {
+      hasFinished = true;
+      pause();
+      onFinish?.();
+    }
+  }
+  function start() {
+    hasFinished = false;
+    isRunning = false;
+    resume();
+  }
+  const waitForResult = () => new Promise((resolve) => {
+    if (stopCondition.value) {
+      return resolve();
+    }
+    const unwatch = watchEffect(() => {
+      if (stopCondition.value) {
+        unwatch();
+        resolve();
+      }
+    });
+  });
+  return {
+    isPolling: isActive,
+    stop,
+    start,
+    resume,
+    waitForResult
+  };
+}

package/dist/runtime/composables/useSelectedModel.d.ts

@@ -0,0 +1,4 @@
+import type { Conversation } from '../types/chat.js';
+type ConversationModelTarget = Pick<Conversation, 'id' | 'model'>;
+export declare function useSelectedModel<T extends ConversationModelTarget>(conversation?: Readonly<Ref<T | null | undefined>>): any;
+export {};

package/dist/runtime/composables/useSelectedModel.js

@@ -0,0 +1,46 @@
+import { DEFAULT_MODEL } from "../types/chat.js";
+export function useSelectedModel(conversation) {
+  const chatApi = useChatApi();
+  const statusToast = useStatusToast();
+  const override = ref(null);
+  let requestSeq = 0;
+  if (conversation) {
+    watch(() => conversation.value?.id, () => {
+      override.value = null;
+    });
+  }
+  const model = computed({
+    get() {
+      if (override.value) {
+        return override.value;
+      }
+      if (conversation?.value?.model) {
+        return conversation.value.model;
+      }
+      return DEFAULT_MODEL;
+    },
+    set(value) {
+      const previous = override.value;
+      override.value = value;
+      if (conversation?.value?.id) {
+        const seq = ++requestSeq;
+        $fetch(
+          chatApi.path(`/conversations/${conversation.value.id}`),
+          chatApi.withChatHeaders({
+            method: "PATCH",
+            body: { model: value }
+          })
+        ).catch(() => {
+          if (seq !== requestSeq)
+            return;
+          override.value = previous;
+          statusToast.update({
+            text: "Erro ao salvar modelo selecionado",
+            icon: "i-ph-warning"
+          });
+        });
+      }
+    }
+  });
+  return model;
+}

package/dist/runtime/composables/useSplashScreen.d.ts

@@ -0,0 +1,3 @@
+export declare function useSplashScreen(): {
+    isSplashScreenVisible: any;
+};

package/dist/runtime/composables/useSplashScreen.js

@@ -0,0 +1,4 @@
+export function useSplashScreen() {
+  const isSplashScreenVisible = useState("is-splash-screen-visible", () => true);
+  return { isSplashScreenVisible };
+}