@meistrari/chat-nuxt 1.0.0

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

@@ -0,0 +1,223 @@
+<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 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>
+            <input
+                v-if="isEditing"
+                ref="titleInputRef"
+                :value="editTitle"
+                type="text"
+                heading-h4-semibold text-primary
+                bg-white border border-gray-200 rounded-6px px-8px py-2px
+                outline-none focus:border-gray-400
+                @input="emit('update:editTitle', $event.target.value)"
+                @keydown="handleTitleKeydown"
+                @blur="emit('saveTitle')"
+            >
+            <p v-else text-16px font-580 text-primary leading-20px tracking="-.2px" truncate>
+                {{ 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

@@ -0,0 +1,43 @@
+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, {} & {
+    saveTitle: () => any;
+    cancelEditing: () => any;
+    "update:isEditing": (value: boolean) => any;
+    "update:editTitle": (value: string) => any;
+    rename: () => any;
+    duplicate: () => any;
+    export: () => any;
+    copyLink: () => any;
+    debug: () => any;
+    delete: () => any;
+    tabChange: (tab: TopbarTab) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSaveTitle?: (() => any) | undefined;
+    onCancelEditing?: (() => any) | undefined;
+    "onUpdate:isEditing"?: ((value: boolean) => any) | undefined;
+    "onUpdate:editTitle"?: ((value: string) => any) | undefined;
+    onRename?: (() => any) | undefined;
+    onDuplicate?: (() => any) | undefined;
+    onExport?: (() => any) | undefined;
+    onCopyLink?: (() => any) | undefined;
+    onDebug?: (() => any) | undefined;
+    onDelete?: (() => 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.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    conversationId: string;
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+};
+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/chat/usage-view.vue

@@ -0,0 +1,393 @@
+<script setup>
+import { formatTokenCount, formatCost, formatCredits, formatModelName } 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 chatApi = useChatApi();
+const usageData = ref(null);
+const billing = ref(null);
+const loading = ref(false);
+const error = ref(null);
+function formatBillingCost(cost) {
+  if (!billing.value || billing.value.mode === "credits") {
+    return formatCredits(cost);
+  }
+  return formatCost(cost);
+}
+async function fetchUsage() {
+  if (!props.conversationId)
+    return;
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await $fetch(
+      chatApi.path(`/conversations/${props.conversationId}/usage`),
+      chatApi.withChatHeaders()
+    );
+    if (response.error) {
+      error.value = response.error;
+    } else {
+      usageData.value = response.usage;
+      billing.value = response.billing;
+    }
+  } catch (err) {
+    console.error("Failed to fetch usage data:", err);
+    error.value = "Falha ao carregar dados de uso";
+  } finally {
+    loading.value = false;
+  }
+}
+onMounted(fetchUsage);
+watch(() => props.conversationId, fetchUsage);
+const cacheInsight = computed(() => {
+  if (!usageData.value)
+    return { percentage: 0, reusedTokens: 0, storedTokens: 0, hasData: false };
+  const hasData = usageData.value.tokens.cacheRead > 0 || usageData.value.tokens.cacheCreation > 0;
+  return {
+    percentage: Math.round(usageData.value.metrics.cacheHitRate * 100),
+    reusedTokens: usageData.value.tokens.cacheRead,
+    storedTokens: usageData.value.tokens.cacheCreation,
+    hasData
+  };
+});
+const costBreakdown = computed(() => {
+  if (!usageData.value)
+    return [];
+  const total = usageData.value.cost.total;
+  return [
+    {
+      label: "Envio",
+      tooltip: "Texto enviado ao modelo: perguntas, contexto e instru\xE7\xF5es",
+      tokens: usageData.value.tokens.prompt,
+      cost: usageData.value.cost.prompt,
+      percentage: total > 0 ? Math.round(usageData.value.cost.prompt / total * 100) : 0
+    },
+    {
+      label: "Respostas",
+      tooltip: "Texto gerado pelo modelo",
+      tokens: usageData.value.tokens.completion,
+      cost: usageData.value.cost.completion,
+      percentage: total > 0 ? Math.round(usageData.value.cost.completion / total * 100) : 0
+    }
+  ];
+});
+const modelRows = computed(() => {
+  if (!usageData.value)
+    return [];
+  const totalCost = usageData.value.cost.total;
+  return usageData.value.models.map((m) => {
+    const totalTokens = m.inputTokens + m.outputTokens + m.cacheReadTokens + m.cacheCreationTokens;
+    return {
+      modelId: m.model,
+      modelName: formatModelName(m.model),
+      tokens: formatTokenCount(totalTokens),
+      cost: formatBillingCost(m.cost),
+      costShare: totalCost > 0 ? m.cost / totalCost * 100 : 0
+    };
+  });
+});
+const costBarSegments = computed(() => {
+  if (!usageData.value || usageData.value.cost.total === 0)
+    return [];
+  const total = usageData.value.cost.total;
+  return [
+    {
+      label: "Envio",
+      percentage: usageData.value.cost.prompt / total * 100,
+      colorClass: "bg-indigo-400"
+    },
+    {
+      label: "Respostas",
+      percentage: usageData.value.cost.completion / total * 100,
+      colorClass: "bg-amber-400"
+    }
+  ];
+});
+</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="seg.colorClass"
+                                    :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="seg.colorClass" />
+                                    <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/usage-view.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    conversationId: string;
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+};
+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;