@meistrari/chat-nuxt 1.13.0 → 2.0.0

package/dist/runtime/components/chat/topbar.vue

@@ -1,241 +0,0 @@
-<script setup>
-import { formatRelativeTime } from "../../utils/format-time";
-import { capitalizeFirst } from "../../utils/string";
-const props = defineProps({
-  title: { type: String, required: true },
-  creatorName: { type: String, required: false },
-  creatorEmail: { type: String, required: false },
-  creatorImage: { type: String, required: false },
-  updatedAt: { type: [String, Date], required: true },
-  isEditing: { type: Boolean, required: true },
-  editTitle: { type: String, required: true },
-  generatingTitle: { type: Boolean, required: false },
-  filesCount: { type: Number, required: false },
-  activeTab: { type: String, required: false },
-  showOutdatedBadge: { type: Boolean, required: false },
-  showUsageTab: { type: Boolean, required: false },
-  showDebugOption: { type: Boolean, required: false }
-});
-const emit = defineEmits(["update:isEditing", "update:editTitle", "saveTitle", "cancelEditing", "rename", "duplicate", "export", "copyLink", "debug", "delete", "tabChange"]);
-const titleInputRef = ref(null);
-const currentTab = computed(() => props.activeTab ?? "chat");
-const titleInputWidth = computed(() => `${Math.max(props.editTitle.length + 2, 8)}ch`);
-const headerMenuItems = computed(() => {
-  const items = [
-    {
-      label: "Renomear",
-      icon: "i-ph-pencil-simple",
-      click: () => emit("rename")
-    },
-    {
-      label: "Duplicar",
-      icon: "i-ph-copy",
-      click: () => emit("duplicate")
-    },
-    {
-      label: "Exportar",
-      icon: "i-ph-download-simple",
-      click: () => emit("export")
-    },
-    {
-      label: "Copiar link",
-      icon: "i-ph-link",
-      click: () => emit("copyLink")
-    }
-  ];
-  if (props.showDebugOption) {
-    items.push({
-      label: "Debug",
-      icon: "i-ph-bug",
-      click: () => emit("debug")
-    });
-  }
-  items.push({
-    label: "Excluir",
-    icon: "i-ph-trash",
-    color: "negative",
-    click: () => emit("delete")
-  });
-  return items;
-});
-function handleTitleKeydown(event) {
-  if (event.key === "Enter") {
-    event.preventDefault();
-    emit("saveTitle");
-  } else if (event.key === "Escape") {
-    event.preventDefault();
-    emit("cancelEditing");
-  }
-}
-watch(() => props.isEditing, (editing) => {
-  if (editing) {
-    nextTick(() => {
-      titleInputRef.value?.focus();
-      titleInputRef.value?.select();
-    });
-  }
-});
-</script>
-
-<template>
-    <div
-        flex items-center gap-16px
-        pl-24px pr-16px h-64px
-        b-b=".5px solid rgba(0,0,0,0.08)"
-        bg="white/94"
-        backdrop-blur-sm
-        absolute top-0 right-0 z-10
-        :style="{ left: 'var(--chat-panel-offset)' }"
-    >
-        <div flex="~ col 1" gap-4px min-w-0>
-            <div
-                v-if="isEditing"
-                flex items-center
-                text-primary
-                w-fit max-w-full
-                pb-1px
-                b-b=".5px solid #A3A3A3"
-                :style="{ width: titleInputWidth }"
-            >
-                <input
-                    ref="titleInputRef"
-                    :value="editTitle"
-                    type="text"
-                    autocomplete="off"
-                    aria-label="Nome da conversa"
-                    w-full min-w-0 max-w-full
-                    bg-transparent border-none outline-none
-                    text-16px font-580 text-primary leading-20px tracking="-.2px"
-                    p-0
-                    @input="emit('update:editTitle', $event.target.value)"
-                    @keydown="handleTitleKeydown"
-                    @blur="emit('saveTitle')"
-                >
-            </div>
-            <p
-                v-else
-                text-16px font-580 text-primary leading-20px tracking="-.2px"
-                truncate cursor-text
-                @dblclick.prevent.stop="emit('rename')"
-            >
-                {{ capitalizeFirst(title) }}<span v-if="generatingTitle" class="typing-cursor">|</span>
-            </p>
-
-            <div flex items-center gap-8px>
-                <div flex items-center gap-4px>
-                    <div flex items-center pr-2px>
-                        <div
-                            w-16px h-16px rounded-full overflow-hidden flex-shrink-0
-                            b="2px white"
-                        >
-                            <img
-                                v-if="creatorImage"
-                                :src="creatorImage"
-                                :alt="creatorName ?? 'Usu\xE1rio'"
-                                w-full h-full object-cover
-                            >
-                            <div v-else w-full h-full bg-gray-200 flex items-center justify-center>
-                                <span text-8px text-gray-500 font-medium>
-                                    {{ (creatorName ?? creatorEmail ?? "U").charAt(0).toUpperCase() }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <span text-12px text-secondary leading-16px truncate>
-                        {{ creatorName ?? creatorEmail ?? "Usu\xE1rio" }}
-                    </span>
-                </div>
-                <span text-12px text-tertiary leading-16px>
-                    Atualizado {{ formatRelativeTime(updatedAt) }}
-                </span>
-            </div>
-        </div>
-
-        <div flex gap-2px items-start rounded-10px shrink-0>
-            <button
-                flex gap-8px items-center px-12px py-7px rounded-10px
-                :class="currentTab === 'chat' ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
-                @click="emit('tabChange', 'chat')"
-            >
-                <span
-                    text-14px font-580 leading-18px tracking="-.15px"
-                    :class="currentTab === 'chat' ? 'text-gray-900' : 'text-gray-500'"
-                >
-                    Chat
-                </span>
-            </button>
-
-            <button
-                flex gap-8px items-center px-12px py-7px rounded-10px
-                :class="currentTab === 'files' ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
-                @click="emit('tabChange', 'files')"
-            >
-                <span
-                    text-14px font-580 leading-18px tracking="-.15px"
-                    :class="currentTab === 'files' ? 'text-gray-900' : 'text-gray-500'"
-                >
-                    Arquivos
-                </span>
-                <div
-                    v-if="filesCount !== void 0 && filesCount > 0"
-                    bg-gray-200 rounded-5px px-5px py-3px
-                    flex items-center justify-center
-                >
-                    <span text-9px font-580 text-secondary leading-10px tracking-1px uppercase>
-                        {{ filesCount }}
-                    </span>
-                </div>
-            </button>
-
-            <button
-                v-if="showUsageTab"
-                flex gap-8px items-center px-12px py-7px rounded-10px
-                :class="currentTab === 'usage' ? 'bg-neutral-100' : 'hover:bg-neutral-50'"
-                @click="emit('tabChange', 'usage')"
-            >
-                <span
-                    text-14px font-580 leading-18px tracking="-.15px"
-                    :class="currentTab === 'usage' ? 'text-gray-900' : 'text-gray-500'"
-                >
-                    Uso
-                </span>
-            </button>
-        </div>
-
-        <div flex="~ 1" items-center justify-end gap-12px min-w-0>
-            <TelaTooltip v-if="showOutdatedBadge">
-                <div
-                    flex items-center justify-center
-                    px-5px py-3px
-                    bg="#e8e8e8" rounded-5px
-                    cursor-default
-                >
-                    <span text-9px font-580 text-gray-500 leading-10px tracking-1px uppercase whitespace-nowrap>
-                        Chat Desatualizado
-                    </span>
-                </div>
-                <template #content>
-                    <div max-w-240px text-center>
-                        Inicie uma nova conversa para usar as configurações atualizadas do workspace
-                    </div>
-                </template>
-            </TelaTooltip>
-
-            <TelaDropdownMenu :items="headerMenuItems" align="end">
-                <button
-                    flex items-center justify-center
-                    w-32px h-32px rounded-10px
-                    bg-gray-80
-                    hover:bg-gray-100
-                    transition-colors
-                >
-                    <div i-ph-dots-three text-20px text-gray-900 />
-                </button>
-            </TelaDropdownMenu>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.typing-cursor{animation:blink .7s infinite;color:#6b7280;font-weight:400}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}
-</style>

package/dist/runtime/components/chat/topbar.vue.d.ts

@@ -1,43 +0,0 @@
-import type { TopbarTab } from '../../types/chat.js';
-type __VLS_Props = {
-    title: string;
-    creatorName?: string;
-    creatorEmail?: string;
-    creatorImage?: string;
-    updatedAt: string | Date;
-    isEditing: boolean;
-    editTitle: string;
-    generatingTitle?: boolean;
-    filesCount?: number;
-    activeTab?: TopbarTab;
-    showOutdatedBadge?: boolean;
-    showUsageTab?: boolean;
-    showDebugOption?: boolean;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    delete: () => any;
-    rename: () => any;
-    duplicate: () => any;
-    export: () => any;
-    copyLink: () => any;
-    "update:isEditing": (value: boolean) => any;
-    "update:editTitle": (value: string) => any;
-    saveTitle: () => any;
-    cancelEditing: () => any;
-    debug: () => any;
-    tabChange: (tab: TopbarTab) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDelete?: (() => any) | undefined;
-    onRename?: (() => any) | undefined;
-    onDuplicate?: (() => any) | undefined;
-    onExport?: (() => any) | undefined;
-    onCopyLink?: (() => any) | undefined;
-    "onUpdate:isEditing"?: ((value: boolean) => any) | undefined;
-    "onUpdate:editTitle"?: ((value: string) => any) | undefined;
-    onSaveTitle?: (() => any) | undefined;
-    onCancelEditing?: (() => any) | undefined;
-    onDebug?: (() => any) | undefined;
-    onTabChange?: ((tab: TopbarTab) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,312 +0,0 @@
-<script setup>
-import { formatTokenCount } from "../../utils/calculate-usage";
-import { formatDateWithTime } from "../../utils/format-time";
-const props = defineProps({
-  conversationId: { type: String, required: true },
-  createdAt: { type: [String, Date], required: false },
-  updatedAt: { type: [String, Date], required: false }
-});
-const conversationIdRef = computed(() => props.conversationId);
-const {
-  usageData,
-  billing,
-  loading,
-  error,
-  cacheInsight,
-  costBreakdown,
-  modelRows,
-  costBarSegments,
-  formatBillingCost,
-  fetchUsage
-} = useConversationUsage(conversationIdRef);
-const segmentColorClass = {
-  input: "bg-indigo-400",
-  output: "bg-amber-400"
-};
-onMounted(fetchUsage);
-watch(() => props.conversationId, fetchUsage);
-</script>
-
-<template>
-    <div flex="~ col" gap-24px px-48px py-32px mt-64px overflow-y-auto h-full>
-        <div v-if="loading" flex="~ col" items-center justify-center h-300px gap-16px>
-            <span i-ph-spinner animate-spin text-32px text-tertiary />
-            <p body-14-regular text-tertiary>
-                Carregando dados de uso...
-            </p>
-        </div>
-
-        <div v-else-if="error" flex="~ col" items-center justify-center h-300px gap-16px>
-            <span i-ph-warning text-32px text-warning />
-            <p body-14-regular text-tertiary>
-                {{ error }}
-            </p>
-            <button
-                px-16px py-8px
-                bg-muted rounded-8px
-                body-14-regular text-primary
-                hover:bg-lowered transition cursor-pointer
-                @click="fetchUsage"
-            >
-                Tentar novamente
-            </button>
-        </div>
-
-        <div v-else-if="!usageData" flex="~ col" items-center justify-center h-300px gap-16px>
-            <span i-ph-chart-bar text-32px text-subtle />
-            <p body-14-regular text-tertiary>
-                Nenhum dado de uso disponível ainda
-            </p>
-        </div>
-
-        <template v-else>
-            <!-- Top section: 2 columns -->
-            <div flex gap-24px items-start>
-                <!-- Left column: Custo total + metadata -->
-                <div flex="~ col 1" gap-26px min-w-200px>
-                    <div flex="~ col" gap-4px>
-                        <span body-12-regular text-secondary>Custo total</span>
-                        <span heading-h2-semibold text-primary>
-                            {{ formatBillingCost(usageData.cost.total) }}
-                        </span>
-                    </div>
-
-                    <div flex="~ col" gap-8px>
-                        <div flex items-center justify-between>
-                            <span flex items-center gap-4px body-12-regular text-secondary>
-                                Tokens utilizados
-                                <TelaTooltip content="Unidade de medida do texto processado pela IA" :delay-duration="300">
-                                    <span inline-flex items-center mt-3px>
-                                        <span i-ph-info w-12px h-12px text-tertiary />
-                                    </span>
-                                </TelaTooltip>
-                            </span>
-                            <span body-12-semibold text-primary>{{ formatTokenCount(usageData.tokens.total) }}</span>
-                        </div>
-                        <div flex items-center justify-between>
-                            <span body-12-regular text-secondary>Data de criação</span>
-                            <span body-12-semibold text-primary>{{ formatDateWithTime(createdAt) }}</span>
-                        </div>
-                        <div flex items-center justify-between>
-                            <span body-12-regular text-secondary>Último uso</span>
-                            <span body-12-semibold text-primary>{{ formatDateWithTime(updatedAt) }}</span>
-                        </div>
-                        <div v-if="usageData.metrics.webSearchRequests > 0 || usageData.metrics.webFetchRequests > 0" flex items-center justify-between>
-                            <span body-12-regular text-secondary>Buscas na web</span>
-                            <span body-12-semibold text-primary>{{ usageData.metrics.webSearchRequests + usageData.metrics.webFetchRequests }}</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div border-l-0.5px border-subtle self-stretch />
-
-                <!-- Right column: Cost breakdown + Cache insight -->
-                <div flex="~ col 1" gap-24px min-w-240px>
-                    <!-- Cost breakdown -->
-                    <div flex="~ col" gap-16px>
-                        <span heading-h5-semibold text-primary>
-                            Detalhamento de custos
-                        </span>
-
-                        <div flex="~ col" gap-8px>
-                            <div
-                                v-for="item in costBreakdown"
-                                :key="item.label"
-                                flex items-center justify-between
-                            >
-                                <span flex items-center gap-4px body-12-regular text-secondary>
-                                    {{ item.label }}
-                                    <TelaTooltip :content="item.tooltip" :delay-duration="300">
-                                        <span inline-flex items-center mt-3px>
-                                            <span i-ph-info w-12px h-12px text-tertiary />
-                                        </span>
-                                    </TelaTooltip>
-                                </span>
-                                <div flex gap-8px items-center body-12-regular text-right>
-                                    <span text-tertiary>{{ formatTokenCount(item.tokens) }} tokens</span>
-                                    <span body-12-semibold text-primary>{{ formatBillingCost(item.cost) }}</span>
-                                    <span text-tertiary>({{ item.percentage }}%)</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div v-if="costBarSegments.length > 0" flex="~ col" gap-8px>
-                            <div flex h-8px rounded-full overflow-hidden bg-muted>
-                                <div
-                                    v-for="seg in costBarSegments"
-                                    :key="seg.label"
-                                    :class="segmentColorClass[seg.key]"
-                                    :style="{ width: `${Math.max(seg.percentage, 1)}%` }"
-                                    h-full transition-all duration-300
-                                />
-                            </div>
-                            <div flex gap-12px>
-                                <div
-                                    v-for="seg in costBarSegments"
-                                    :key="seg.label"
-                                    flex gap-4px items-center
-                                >
-                                    <div w-6px h-6px rounded-full :class="segmentColorClass[seg.key]" />
-                                    <span body-11-regular text-tertiary>{{ seg.label }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Cache insight -->
-                    <template v-if="cacheInsight.hasData">
-                        <div border-t-0.5px border-subtle />
-
-                        <div flex="~ col">
-                            <div flex="~ col" gap-4px>
-                                <div flex items-baseline gap-6px>
-                                    <span heading-h2-semibold text-primary>
-                                        {{ cacheInsight.percentage }}%
-                                    </span>
-                                    <span body-13-medium text-secondary>
-                                        do contexto foi reutilizado
-                                    </span>
-                                </div>
-                                <span body-11-regular text-tertiary>
-                                    Contexto reutilizado reduz o custo de processamento
-                                </span>
-                            </div>
-
-                            <span body-11-regular text-tertiary mt-16px mb-6px>
-                                {{ formatTokenCount(cacheInsight.reusedTokens) }} tokens reutilizados · {{ formatTokenCount(cacheInsight.storedTokens) }} tokens novos
-                            </span>
-
-                            <div flex="~ col" gap-8px>
-                                <div flex h-8px rounded-full overflow-hidden bg-emerald-300>
-                                    <div
-                                        :style="{ width: `${cacheInsight.percentage}%` }"
-                                        bg-purple-400 h-full transition-all duration-300
-                                    />
-                                </div>
-                                <div flex gap-12px>
-                                    <div flex gap-4px items-center>
-                                        <div w-6px h-6px rounded-full bg-purple-400 />
-                                        <span body-11-regular text-tertiary>Reutilizado</span>
-                                    </div>
-                                    <div flex gap-4px items-center>
-                                        <div w-6px h-6px rounded-full bg-emerald-300 />
-                                        <span body-11-regular text-tertiary>Novo</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </div>
-            </div>
-
-            <!-- Bottom section: Model table with proportion bars -->
-            <div v-if="usageData.models.length > 0" flex="~ col" gap-8px mt-24px>
-                <div
-                    rounded-12px border-0.5px border overflow-hidden
-                >
-                    <TelaTable :has-scroll-area="false">
-                        <TelaTableHeader>
-                            <TelaTableRow class="hover:bg-transparent!">
-                                <TelaTableHead
-                                    h-56px px-12px
-                                    class="body-12-semibold! text-primary! border-b-0.5px! border!"
-                                >
-                                    <div flex="~ col" gap-2px>
-                                        <span>Modelo</span>
-                                        <span body-11-regular text-tertiary>Modelos auxiliares podem ser utilizados internamente para auxiliar o processamento</span>
-                                    </div>
-                                </TelaTableHead>
-                                <TelaTableHead
-                                    h-56px px-12px
-                                    class="body-12-semibold! text-primary! border-b-0.5px! border!"
-                                >
-                                    <span flex items-center gap-4px>
-                                        Tokens
-                                        <TelaTooltip content="Volume total de texto processado" :delay-duration="300">
-                                            <span inline-flex items-center mt-3px>
-                                                <span i-ph-info w-12px h-12px text-tertiary />
-                                            </span>
-                                        </TelaTooltip>
-                                    </span>
-                                </TelaTableHead>
-                                <TelaTableHead
-                                    h-56px px-12px
-                                    class="body-12-semibold! text-primary! border-b-0.5px! border!"
-                                >
-                                    Custo <span v-if="billing" class="body-12-regular! text-secondary!">
-                                        ({{ billing.mode === "credits" ? "cr\xE9ditos" : "USD" }})
-                                    </span>
-                                </TelaTableHead>
-                                <TelaTableHead
-                                    h-56px px-12px w-120px
-                                    class="body-12-semibold! text-primary! border-b-0.5px! border!"
-                                />
-                            </TelaTableRow>
-                        </TelaTableHeader>
-                        <TelaTableBody>
-                            <TelaTableRow
-                                v-for="(row, idx) in modelRows"
-                                :key="row.modelId"
-                                bg-white
-                                class="h-64px! hover:bg-subtle!"
-                                :class="idx < modelRows.length - 1 ? 'border-b-0.5px! border!' : 'border-b-0!'"
-                            >
-                                <TelaTableCell class="body-14-regular! text-primary! px-12px! py-10px!">
-                                    <span flex items-center gap-6px>
-                                        <IconsAnthropic w-14px h-14px flex-shrink-0 text-primary />
-                                        {{ row.modelName }}
-                                        <TelaTooltip :content="row.modelId" :delay-duration="300">
-                                            <span inline-flex items-center>
-                                                <span i-ph-info w-12px h-12px text-tertiary />
-                                            </span>
-                                        </TelaTooltip>
-                                    </span>
-                                </TelaTableCell>
-                                <TelaTableCell class="body-14-regular! text-primary! px-12px! py-10px!">
-                                    {{ row.tokens }}
-                                </TelaTableCell>
-                                <TelaTableCell class="body-14-regular! text-primary! px-12px! py-10px!">
-                                    {{ row.cost }}
-                                </TelaTableCell>
-                                <TelaTableCell class="px-12px! py-10px!">
-                                    <div flex items-center h-full>
-                                        <div
-                                            h-6px rounded-full bg-indigo-400
-                                            :style="{ width: `${Math.max(row.costShare, 2)}%` }"
-                                            transition-all duration-300
-                                        />
-                                    </div>
-                                </TelaTableCell>
-                            </TelaTableRow>
-                        </TelaTableBody>
-                    </TelaTable>
-                </div>
-            </div>
-
-            <div
-                v-else
-                flex="~ col 1" items-center justify-center gap-24px
-                border-0.5px border-subtle rounded-16px
-                min-h-300px
-            >
-                <div
-                    w-88px h-64px rounded-10px
-                    bg-white border-0.5px border
-                    flex items-center justify-center
-                    shadow-sm
-                >
-                    <span i-ph-chart-bar text-32px text-subtle />
-                </div>
-
-                <div flex="~ col" gap-8px items-center text-center>
-                    <p heading-h3-semibold text-tertiary>
-                        Em breve
-                    </p>
-                    <p body-14-regular text-subtle>
-                        Métricas detalhadas
-                    </p>
-                </div>
-            </div>
-        </template>
-    </div>
-</template>

package/dist/runtime/components/chat/vault-link.vue

@@ -1,34 +0,0 @@
-<script setup>
-import { detectFileFromUrl } from "../../utils/file";
-const props = defineProps({
-  node: { type: Object, required: true },
-  indexKey: { type: [Number, String], required: true },
-  customId: { type: String, required: false }
-});
-const detectedFile = computed(() => detectFileFromUrl(props.node.href));
-const linkText = computed(() => {
-  if (props.node.children?.length > 0) {
-    return props.node.children.map((c) => c.raw).join("");
-  }
-  return props.node.text || props.node.href;
-});
-</script>
-
-<template>
-    <ChatFilePreview
-        v-if="detectedFile"
-        :file="detectedFile"
-        inline-block
-        align-middle
-        w-full
-        my-4px
-    />
-    <a
-        v-else
-        :href="node.href"
-        :title="node.title || void 0"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-blue-600 hover:text-blue-800 underline"
-    >{{ linkText }}</a>
-</template>

package/dist/runtime/components/chat/web-search-widget.d.vue.ts

@@ -1,9 +0,0 @@
-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;