@meistrari/chat-nuxt 1.0.0

package/dist/runtime/components/chat/mention-dropdown.vue

@@ -0,0 +1,90 @@
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: true },
+  highlightedIndex: { type: Number, required: true },
+  trigger: { type: String, required: true },
+  query: { type: String, required: true }
+});
+const emit = defineEmits(["select"]);
+const listRef = ref(null);
+const sections = computed(() => {
+  if (props.trigger === "@") {
+    return [{
+      title: "Arquivos",
+      items: props.items.map((item, i) => ({ item, globalIndex: i }))
+    }];
+  }
+  const canvasItems = [];
+  const skillItems = [];
+  props.items.forEach((item, i) => {
+    if (item.category === "canvas")
+      canvasItems.push({ item, globalIndex: i });
+    else
+      skillItems.push({ item, globalIndex: i });
+  });
+  const result = [];
+  if (canvasItems.length > 0)
+    result.push({ title: "Canvas", items: canvasItems });
+  if (skillItems.length > 0)
+    result.push({ title: "Skills", items: skillItems });
+  return result;
+});
+const emptyMessage = computed(() => {
+  if (props.query)
+    return "Nenhum resultado encontrado";
+  return props.trigger === "@" ? "Nenhum arquivo dispon\xEDvel" : "Nenhuma skill configurada";
+});
+watch(() => props.highlightedIndex, () => {
+  nextTick(() => {
+    const el = listRef.value?.querySelector('[data-highlighted="true"]');
+    el?.scrollIntoView({ block: "nearest" });
+  });
+});
+</script>
+
+<template>
+    <div
+        absolute bottom="100%" left-0 right-0 mb-4px
+        z-10
+        bg-white
+        rounded-12px
+        class="mention-dropdown custom-scrollbar"
+        max-h-240px
+        overflow-y-auto
+    >
+        <div v-if="items.length === 0" px-12px py-10px>
+            <span text-13px text-gray-400>{{ emptyMessage }}</span>
+        </div>
+
+        <div ref="listRef" pb-8px flex="~ col" gap-4px>
+            <template v-for="section in sections" :key="section.title">
+                <div px-12px pt-10px pb-0>
+                    <span text-11px font-500 text-gray-400 uppercase tracking-wide>{{ section.title }}</span>
+                </div>
+                <button
+                    v-for="entry in section.items"
+                    :key="entry.item.id"
+                    :data-highlighted="entry.globalIndex === highlightedIndex"
+                    flex items-center gap-8px
+                    w-full
+                    h-48px
+                    px-12px
+                    text-left
+                    transition-colors
+                    :class="entry.globalIndex === highlightedIndex ? 'bg-gray-200' : 'hover:bg-gray-50'"
+                    @mousedown.prevent="emit('select', entry.item)"
+                >
+                    <div :class="entry.item.icon" text-16px text-gray-500 shrink-0 />
+                    <div flex="~ col" min-w-0>
+                        <span text-13px text-gray-900 truncate>{{ entry.item.label }}</span>
+                        <span v-if="entry.item.description" text-11px text-gray-400 truncate>{{ entry.item.description }}</span>
+                    </div>
+                </button>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.mention-dropdown{animation:mention-dropdown-in .25s ease-out;border:.5px solid #e5e7eb;box-shadow:0 3px 10px 0 hsla(0,0%,64%,.08),0 12px 20px 0 hsla(0,0%,64%,.06)}.custom-scrollbar{scrollbar-color:#d1d5db transparent;scrollbar-width:thin}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:3px}@keyframes mention-dropdown-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+</style>

package/dist/runtime/components/chat/mention-dropdown.vue.d.ts

@@ -0,0 +1,14 @@
+import type { MentionItem } from '../../types/chat.js';
+type __VLS_Props = {
+    items: MentionItem[];
+    highlightedIndex: number;
+    trigger: '@' | '/';
+    query: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: MentionItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: MentionItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/message-bubble.d.vue.ts

@@ -0,0 +1,11 @@
+import type { Message } from '../../types/chat.js';
+type __VLS_Props = {
+    message: Message;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: (messageId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: ((messageId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/message-bubble.vue

@@ -0,0 +1,288 @@
+<script setup>
+import { parseContentWithFiles } from "../../utils/file";
+import ChatVaultLink from "./vault-link.vue";
+const props = defineProps({
+  message: { type: Object, required: true }
+});
+const emit = defineEmits(["retry"]);
+const { user } = useTelaApplicationAuth();
+const { getMemberByEmail } = useWorkspaceMembers();
+const senderMember = computed(() => {
+  const createdBy = props.message.createdBy?.trim();
+  if (!createdBy) {
+    return void 0;
+  }
+  return getMemberByEmail(createdBy);
+});
+const senderName = computed(() => {
+  const createdBy = props.message.createdBy?.trim();
+  return senderMember.value?.name ?? (createdBy && createdBy === user.value?.email ? user.value?.name : void 0) ?? createdBy ?? "Usu\xE1rio";
+});
+const senderImage = computed(() => {
+  const createdBy = props.message.createdBy?.trim();
+  return senderMember.value?.image ?? (createdBy && createdBy === user.value?.email ? user.value?.image : void 0) ?? void 0;
+});
+const isOwnMessage = computed(() => {
+  const createdBy = props.message.createdBy?.trim();
+  const email = user.value?.email?.trim();
+  return Boolean(createdBy && email && createdBy === email);
+});
+const isPending = computed(() => props.message.status === "pending");
+const isFailed = computed(() => props.message.status === "failed");
+const hasReasoning = computed(() => {
+  const data = props.message.reasoningData;
+  return props.message.role === "assistant" && data && Array.isArray(data) && data.length > 0;
+});
+const hasFiles = computed(() => {
+  const files = props.message.files;
+  return props.message.role === "user" && files && files.length > 0;
+});
+function formatTime(date) {
+  const d = date instanceof Date ? date : new Date(date);
+  return d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+}
+const wasEverPending = ref(false);
+const shouldAnimate = ref(false);
+watch(() => props.message.status, (status, oldStatus) => {
+  if (status === "pending") {
+    wasEverPending.value = true;
+  }
+  if (oldStatus === "pending" && status === "completed" && wasEverPending.value) {
+    shouldAnimate.value = true;
+  }
+}, { immediate: true });
+const displayContent = computed(() => props.message.content ?? "");
+const userContentHtml = computed(() => {
+  if (props.message.role !== "user")
+    return "";
+  const raw = displayContent.value;
+  const escaped = raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return escaped.replace(/&lt;file_mention name=&quot;((?:[^&]|&(?!quot;))+)&quot;[\s\S]*?&lt;\/file_mention&gt;/g, (_match, encodedName) => {
+    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
+    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<span class="mention-tag mention-tag-file"><span class="i-ph-note-blank" aria-hidden="true"></span>${safeName}</span>`;
+  }).replace(/&lt;canvas_mention name=&quot;((?:[^&]|&(?!quot;))+)&quot;[\s\S]*?&lt;\/canvas_mention&gt;/g, (_match, encodedName) => {
+    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
+    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<span class="mention-tag mention-tag-canvas"><span class="i-ph-wrench" aria-hidden="true"></span>${safeName}</span>`;
+  }).replace(/&lt;skill_mention name=&quot;((?:[^&]|&(?!quot;))+)&quot;[\s\S]*?&lt;\/skill_mention&gt;/g, (_match, encodedName) => {
+    const name = encodedName.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"');
+    const safeName = name.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<span class="mention-tag mention-tag-skill"><span class="i-ph-hexagon" aria-hidden="true"></span>${safeName}</span>`;
+  });
+});
+const hasUserMentions = computed(
+  () => props.message.role === "user" && (displayContent.value.includes("<file_mention") || displayContent.value.includes("<canvas_mention") || displayContent.value.includes("<skill_mention"))
+);
+const formattedTtft = computed(() => {
+  if (props.message.role !== "assistant" || !props.message.ttft)
+    return null;
+  const ms = Number.parseInt(props.message.ttft, 10);
+  if (Number.isNaN(ms))
+    return null;
+  return ms >= 1e3 ? `${(ms / 1e3).toFixed(1)}s` : `${ms}ms`;
+});
+const contentSegments = computed(() => {
+  if (props.message.role !== "assistant")
+    return [];
+  const content = displayContent.value;
+  if (!content)
+    return [];
+  return parseContentWithFiles(content);
+});
+const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type === "file"));
+</script>
+
+<template>
+    <div
+        flex="~ col"
+        :class="isOwnMessage ? 'items-end' : 'items-start'"
+    >
+        <template v-if="message.role === 'user'">
+            <div
+                max-w-prose
+                flex="~ col"
+                :class="isOwnMessage ? 'items-end' : 'items-start'"
+            >
+                <div
+                    v-if="!isOwnMessage"
+                    mb-8px
+                    flex
+                    items-center
+                    gap-4px
+                >
+                    <div h-16px w-16px flex-shrink-0 overflow-hidden rounded-full>
+                        <img
+                            v-if="senderImage"
+                            :src="senderImage"
+                            :alt="senderName"
+                            h-full w-full object-cover
+                        >
+                        <div
+                            v-else
+                            h-full w-full
+                            flex
+                            items-center
+                            justify-center
+                            bg-neutral-200
+                        >
+                            <span text-8px text-neutral-500 font-medium>
+                                {{ senderName.charAt(0).toUpperCase() }}
+                            </span>
+                        </div>
+                    </div>
+                    <span text-12px leading-16px font-semibold text-primary>
+                        {{ senderName }}
+                    </span>
+                </div>
+
+                <div
+                    flex="~ col"
+                    gap-12px
+                    px-24px
+                    pt-16px
+                    pb-20px
+                    bg-subtle
+                    text-primary
+                    border-0.5px
+                    border-solid
+                    border-subtle
+                    :class="[
+  isOwnMessage ? 'rounded-tl-[16px] rounded-tr-[16px] rounded-br-[4px] rounded-bl-[16px]' : 'rounded-tl-[4px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px]',
+  isPending && 'op-80'
+]"
+                >
+                    <div v-if="hasFiles" flex="~ col" gap-4px mb-8px>
+                        <a
+                            v-for="file in message.files"
+                            :key="file.url"
+                            :href="file.url"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            flex
+                            items-center
+                            gap-6px
+                            body-12-regular
+                            text-gray-600
+                            op-80
+                            hover:op-100
+                            transition-opacity
+                        >
+                            <span i-ph-paperclip text-14px />
+                            <span truncate max-w-200px>{{ file.name }}</span>
+                        </a>
+                    </div>
+                    <div v-if="hasUserMentions" body-16-regular whitespace-pre-wrap v-html="userContentHtml" />
+                    <div v-else body-16-regular whitespace-pre-wrap>
+                        {{ message.content }}
+                    </div>
+                </div>
+
+                <div
+                    mt-8px
+                    body-10-regular
+                    text-tertiary
+                    :class="isOwnMessage ? 'self-end' : 'self-start'"
+                >
+                    {{ formatTime(message.createdAt) }}
+                </div>
+            </div>
+        </template>
+
+        <template v-else>
+            <ChatReasoningThought
+                v-if="hasReasoning || isPending"
+                :reasoning-data="message.reasoningData ?? []"
+                :animate="wasEverPending"
+                :completed="message.status === 'completed'"
+                :created-at="message.createdAt"
+                :updated-at="message.updatedAt"
+            />
+
+            <div
+                v-if="!isPending && message.content"
+                max-w-prose
+                :class="[
+  isFailed ? 'flex gap-12px items-start p-16px bg-subtle border border-solid rounded-12px w-full' : 'p-16px rounded-12px code-theme'
+]"
+            >
+                <template v-if="isFailed">
+                    <div i-ph-warning-circle-fill text-16px text-red-600 shrink-0 mt-2px />
+                    <div flex flex-col gap-4px grow>
+                        <div flex items-center gap-4px>
+                            <span heading-h5-semibold text-primary>Erro</span>
+                            <span body-10-regular text-secondary>{{ formatTime(message.createdAt) }}</span>
+                        </div>
+                        <div body-12-regular text-secondary whitespace-pre-wrap>
+                            {{ displayContent }}
+                        </div>
+                        <button
+                            mt-8px
+                            flex items-center gap-6px
+                            px-12px py-6px
+                            rounded-6px
+                            bg-gray-100
+                            hover:bg-gray-200
+                            text-13px text-gray-700
+                            transition-colors
+                            cursor-pointer
+                            self-start
+                            @click="emit('retry', message.id)"
+                        >
+                            <div i-ph-arrow-clockwise text-14px />
+                            <span>Tentar novamente</span>
+                        </button>
+                    </div>
+                </template>
+                <template v-else>
+                    <div v-if="hasDetectedFiles" body-16-regular text-black-900>
+                        <template v-for="(segment, index) in contentSegments" :key="index">
+                            <ClientOnly v-if="segment.type === 'text'">
+                                <AppMarkdownRender
+                                    :id="`message-${message.id}-segment-${index}`"
+                                    :content="segment.content"
+                                    :custom-components="{ link: ChatVaultLink }"
+                                    :render-code-blocks-as-pre="true"
+                                    :typewriter="shouldAnimate"
+                                />
+                            </ClientOnly>
+                            <ChatFilePreview
+                                v-else
+                                :file="segment.file"
+                                inline-block
+                                align-middle
+                                w-full
+                                my-4px
+                            />
+                        </template>
+                    </div>
+                    <ClientOnly v-else>
+                        <AppMarkdownRender
+                            :content="displayContent"
+                            :custom-components="{ link: ChatVaultLink }"
+                            :render-code-blocks-as-pre="true"
+                            :typewriter="shouldAnimate"
+                            text-black-900
+                        />
+                    </ClientOnly>
+                    <div
+                        mt-8px
+                        flex
+                        items-center
+                        gap-6px
+                        body-11-regular
+                        text-black-400
+                    >
+                        <div w-full flex items-center justify-between gap-12px>
+                            <span>{{ formatTime(message.updatedAt || message.createdAt) }}</span>
+                            <span v-if="formattedTtft" flex items-center gap-4px text-black-300>
+                                <span i-ph-timer text-12px />
+                                TTFT: {{ formattedTtft }}
+                            </span>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </template>
+    </div>
+</template>

package/dist/runtime/components/chat/message-bubble.vue.d.ts

@@ -0,0 +1,11 @@
+import type { Message } from '../../types/chat.js';
+type __VLS_Props = {
+    message: Message;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: (messageId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: ((messageId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/message-input.d.vue.ts

@@ -0,0 +1,34 @@
+import type { ConversationFile, FileUploadInput, Message, ModelOption } from '../../types/chat.js';
+import type { DeepReadonly } from 'vue';
+import type { WorkspaceSettings } from '../../composables/useWorkspaceSettings.js';
+type __VLS_Props = {
+    disabled?: boolean;
+    loading?: boolean;
+    creatorName?: string;
+    creatorEmail?: string;
+    creatorImage?: string;
+    centered?: boolean;
+    hasDisclaimer?: boolean;
+    messages?: Message[];
+    conversationFiles?: ConversationFile[];
+    workspaceSettings?: DeepReadonly<WorkspaceSettings> | null;
+};
+declare function addFiles(files: File[]): void;
+type __VLS_ModelProps = {
+    'model'?: ModelOption;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    addFiles: typeof addFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:model": (value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
+} & {
+    cancel: () => any;
+    send: (content: string, files: FileUploadInput[], model: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSend?: ((content: string, files: FileUploadInput[], model: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any) | undefined;
+    "onUpdate:model"?: ((value: "claude-sonnet-4-5" | "claude-sonnet-4-6" | "claude-haiku-4-5" | "claude-opus-4-5" | "claude-opus-4-6") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;