@meistrari/chat-nuxt 1.7.0 → 1.8.0

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

@@ -0,0 +1,243 @@
+<script setup>
+import ChatMobileInfoBubble from "../primitives/info-bubble.vue";
+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,
+  loading,
+  error,
+  cacheInsight,
+  costBreakdown,
+  modelRows,
+  costBarSegments,
+  formatBillingCost,
+  fetchUsage
+} = useConversationUsage(conversationIdRef);
+const COLOR_INPUT = "#6469E8";
+const COLOR_OUTPUT = "#F5B86C";
+const COLOR_REUSED = "#A57BE0";
+const COLOR_NEW = "#7BD9A6";
+const segmentColor = {
+  input: COLOR_INPUT,
+  output: COLOR_OUTPUT
+};
+const breakdownTooltip = {
+  input: "Custo dos tokens enviados (prompt + contexto).",
+  output: "Custo dos tokens gerados pelo modelo."
+};
+onMounted(fetchUsage);
+watch(() => props.conversationId, fetchUsage);
+</script>
+
+<template>
+    <div class="usage-screen" pt-54px h-full overflow-y-auto>
+        <div v-if="loading" flex="~ col" items-center justify-center gap-16px py-64px>
+            <span i-ph-spinner animate-spin text-32px text-neutral-400 />
+            <p text-14px text-neutral-500>
+                Carregando dados de uso...
+            </p>
+        </div>
+
+        <div v-else-if="error" flex="~ col" items-center justify-center gap-16px py-64px px-24px>
+            <span i-ph-warning text-32px text-amber-500 />
+            <p text-14px text-neutral-500 text-center>
+                {{ error }}
+            </p>
+            <button
+                px-16px py-8px rounded-8px
+                bg-neutral-100 text-neutral-900 text-14px
+                @click="fetchUsage"
+            >
+                Tentar novamente
+            </button>
+        </div>
+
+        <div
+            v-else-if="!usageData"
+            flex="~ col" items-center justify-center
+            gap-14px px-28px py-40px text-center
+        >
+            <div
+                w-48px h-48px rounded-14px
+                bg-neutral-100 text-neutral-500
+                flex items-center justify-center
+            >
+                <span i-ph-chart-bar text-22px />
+            </div>
+            <div flex="~ col" gap-4px>
+                <p text-16px font-500 text-neutral-900 leading-20px tracking="-.2px">
+                    Sem dados de uso
+                </p>
+                <p text-14px text-neutral-500 leading-18px max-w-240px>
+                    Métricas de tokens e custo desta conversa aparecerão aqui.
+                </p>
+            </div>
+        </div>
+
+        <div v-else flex="~ col" gap-12px px-14px pt-12px pb-24px>
+            <!-- Hero card -->
+            <div class="card card--hero">
+                <div flex="~ col" gap-4px>
+                    <span class="eyebrow">
+                        Custo total
+                        <ChatMobileInfoBubble text="Soma de todos os custos de processamento desta conversa." />
+                    </span>
+                    <span class="hero-number">
+                        {{ formatBillingCost(usageData.cost.total) }}
+                    </span>
+                </div>
+
+                <div class="hero-divider" />
+
+                <div flex="~ col">
+                    <div class="stat-row stat-row--bordered">
+                        <span class="stat-label">
+                            Tokens utilizados
+                            <ChatMobileInfoBubble text="Total de tokens consumidos por todos os modelos." />
+                        </span>
+                        <span class="stat-value">
+                            {{ formatTokenCount(usageData.tokens.total) }}
+                        </span>
+                    </div>
+                    <div class="stat-row stat-row--bordered">
+                        <span class="stat-label">Data de criação</span>
+                        <span class="stat-value">{{ formatDateWithTime(createdAt) }}</span>
+                    </div>
+                    <div class="stat-row">
+                        <span class="stat-label">Último uso</span>
+                        <span class="stat-value">{{ formatDateWithTime(updatedAt) }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Cost breakdown card -->
+            <div class="card">
+                <span class="card-title">Detalhamento de custos</span>
+
+                <div flex="~ col" mt-12px>
+                    <div
+                        v-for="(item, idx) in costBreakdown"
+                        :key="item.key"
+                        class="breakdown-row"
+                        :class="{ 'breakdown-row--bordered': idx < costBreakdown.length - 1 }"
+                    >
+                        <span class="dot" :style="{ background: segmentColor[item.key] }" />
+                        <span class="stat-label">
+                            {{ item.label }}
+                            <ChatMobileInfoBubble :text="breakdownTooltip[item.key]" />
+                        </span>
+                        <span flex-1 />
+                        <span class="breakdown-tokens">
+                            {{ formatTokenCount(item.tokens) }} tokens
+                        </span>
+                        <span class="breakdown-cost">{{ formatBillingCost(item.cost) }}</span>
+                        <span class="breakdown-pct">({{ item.percentage }}%)</span>
+                    </div>
+                </div>
+
+                <div v-if="costBarSegments.length > 0" mt-14px>
+                    <div class="bar bar--track" aria-hidden="true">
+                        <div
+                            v-for="seg in costBarSegments"
+                            :key="seg.key"
+                            class="bar__fill"
+                            :style="{ width: `${Math.max(seg.percentage, 1)}%`, background: segmentColor[seg.key] }"
+                        />
+                    </div>
+
+                    <div flex items-center gap-14px mt-10px>
+                        <div
+                            v-for="seg in costBarSegments"
+                            :key="seg.key"
+                            flex items-center gap-4px
+                        >
+                            <span class="dot dot--sm" :style="{ background: segmentColor[seg.key] }" />
+                            <span class="legend-label">{{ seg.label }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Context reuse card -->
+            <div v-if="cacheInsight.hasData" class="card">
+                <div flex items-baseline flex-wrap gap-8px>
+                    <span class="reuse-number">{{ cacheInsight.percentage }}%</span>
+                    <span class="reuse-tail">do contexto foi reutilizado</span>
+                </div>
+
+                <p class="reuse-caption">
+                    Contexto reutilizado reduz o custo de processamento.
+                </p>
+
+                <div mt-14px>
+                    <div class="bar bar--track" aria-hidden="true">
+                        <div
+                            class="bar__fill"
+                            :style="{ width: `${cacheInsight.percentage}%`, background: COLOR_REUSED }"
+                        />
+                        <div
+                            class="bar__fill"
+                            :style="{ width: `${100 - cacheInsight.percentage}%`, background: COLOR_NEW }"
+                        />
+                    </div>
+                </div>
+
+                <div flex items-center justify-between mt-10px gap-8px>
+                    <div flex items-center gap-4px>
+                        <span class="dot dot--sm" :style="{ background: COLOR_REUSED }" />
+                        <span class="reuse-token-bold">{{ formatTokenCount(cacheInsight.reusedTokens) }}</span>
+                        <span class="legend-label">reutilizado</span>
+                    </div>
+                    <div flex items-center gap-4px>
+                        <span class="dot dot--sm" :style="{ background: COLOR_NEW }" />
+                        <span class="reuse-token-bold">{{ formatTokenCount(cacheInsight.storedTokens) }}</span>
+                        <span class="legend-label">novo</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Models section -->
+            <div v-if="modelRows.length > 0" flex="~ col" gap-8px mt-4px>
+                <div class="models-header">
+                    <span class="card-title">Modelos</span>
+                    <ChatMobileInfoBubble text="Modelos auxiliares podem ser utilizados internamente para auxiliar o processamento." />
+                </div>
+
+                <div
+                    v-for="row in modelRows"
+                    :key="row.modelId + row.tokens"
+                    class="card card--model"
+                >
+                    <div flex items-center gap-10px>
+                        <div class="provider-badge">
+                            <IconsAnthropic w-14px h-14px text-current />
+                        </div>
+                        <span class="model-name">{{ row.modelName }}</span>
+                        <span class="model-cost">{{ row.cost }}</span>
+                    </div>
+
+                    <div flex items-center gap-8px mt-10px>
+                        <span class="model-tokens">{{ row.tokens }} tokens</span>
+                        <div class="bar bar--track bar--thin" flex-1 aria-hidden="true">
+                            <div
+                                class="bar__fill"
+                                :style="{ width: `${Math.max(row.costShare, 1)}%`, background: COLOR_INPUT }"
+                            />
+                        </div>
+                        <span class="model-pct">{{ Math.round(row.costShare) }}%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.usage-screen{background:#fafafa;font-variant-numeric:tabular-nums}.card{background:#fff;border:.5px solid #e8e8e8;border-radius:12px;box-shadow:0 1px 4px rgba(103,127,148,.03);padding:16px}.card--hero{padding:18px 16px}.card--model{padding:14px}.eyebrow{align-items:center;color:#737373;display:inline-flex;font-size:12px;font-weight:500;gap:4px;letter-spacing:.1px;white-space:nowrap}.hero-number{color:#171717;font-size:40px;font-variant-numeric:tabular-nums;font-weight:580;letter-spacing:-.8px;line-height:1.05;margin-top:4px}.hero-divider{background:#f5f5f5;height:1px;margin:14px -16px 12px}.stat-row{align-items:center;display:flex;gap:8px;justify-content:space-between;padding:8px 0}.stat-row--bordered{border-bottom:.5px solid #f5f5f5}.stat-label{align-items:center;color:#737373;display:inline-flex;font-size:13px;font-weight:460}.stat-value{color:#171717;font-size:13px;font-variant-numeric:tabular-nums;font-weight:500;text-align:right}.card-title{color:#171717;font-size:14px;font-weight:580}.breakdown-row{align-items:center;display:flex;font-size:13px;gap:8px;padding:6px 0}.breakdown-row--bordered{border-bottom:.5px solid #f5f5f5}.dot{border-radius:999px;display:inline-block;flex-shrink:0;height:8px;width:8px}.dot--sm{height:7px;width:7px}.breakdown-tokens{color:#737373;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.breakdown-cost{color:#171717;font-variant-numeric:tabular-nums;font-weight:500;min-width:52px;text-align:right}.breakdown-pct{color:#a3a3a3;font-size:11px;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}.bar{display:flex;overflow:hidden}.bar--track{background:#f5f5f5;border-radius:999px;height:8px}.bar--thin{height:4px}.bar__fill{border-radius:999px;height:100%;transition:width .2s ease}.legend-label{color:#737373;font-size:11.5px}.reuse-number{color:#171717;font-size:32px;font-variant-numeric:tabular-nums;font-weight:580;letter-spacing:-.5px;line-height:1}.reuse-tail{color:#737373;font-size:14px;font-weight:460}.reuse-caption{color:#a3a3a3;font-size:12.5px;line-height:1.45;margin-top:6px}.reuse-token-bold{color:#171717;font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:500}.models-header{align-items:center;display:flex;gap:6px;padding:0 4px}.provider-badge{align-items:center;background:#f5f5f5;border-radius:8px;color:#c2410c;display:inline-flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.model-name{flex:1;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-cost,.model-name{color:#171717;font-weight:500}.model-cost{font-size:13px;font-variant-numeric:tabular-nums}.model-tokens{color:#737373;white-space:nowrap}.model-pct,.model-tokens{font-size:12px;font-variant-numeric:tabular-nums}.model-pct{color:#a3a3a3;min-width:30px;text-align:right}
+</style>

package/dist/runtime/components/chat/mobile/usage/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;

package/dist/runtime/components/chat/model-selector.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { useBreakpoints } from "@vueuse/core";
 import { AVAILABLE_MODELS, DEFAULT_MODEL } from "../../types/chat";
 import AnthropicLogo from "../../components/icons/anthropic.vue";
+import { CHAT_MOBILE_BREAKPOINT } from "../../utils/breakpoints";
 defineProps({
   disabled: { type: Boolean, required: false }
 });
@@ -11,6 +13,9 @@ const options = AVAILABLE_MODELS.map((m) => ({
   description: m.description,
   icon: AnthropicLogo
 }));
+const breakpoints = useBreakpoints({ mobile: CHAT_MOBILE_BREAKPOINT });
+const isMobile = breakpoints.smaller("mobile");
+const contentClass = computed(() => isMobile.value ? "w-280px!" : "");
 </script>
 
 <template>
@@ -24,6 +29,7 @@ const options = AVAILABLE_MODELS.map((m) => ({
         :has-searchbar="false"
         :has-grouping-labels="false"
         :trigger-class="`border-none! ${disabled ? 'bg-[#F3F4F6]!' : ''}`"
+        :content-class="contentClass"
         label-class="!text-14px !leading-18px !font-normal -tracking-0.01em! !text-gray-500"
         icon-class="w-16px h-16px scale-110 mr-1px !text-gray-500"
         label-item-class="!text-gray-500"

package/dist/runtime/components/chat/read-widget.vue

@@ -113,9 +113,9 @@ const isContentCode = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
+        <div class="px-16px py-16px flex items-center justify-between">
             <div class="flex-1 min-w-0">
-                <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                     Read
                 </h3>
                 <p class="text-12px text-secondary truncate mt-2px">
@@ -127,7 +127,7 @@ const isContentCode = computed(() => {
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- File path section -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/reasoning-step-item.vue

@@ -28,7 +28,7 @@ function toggle() {
     <div class="relative flex gap-12px group/step">
         <!-- Status Icon -->
         <div class="flex flex-col items-center flex-shrink-0" :class="{ 'pb-8px': !isLast || !completed }">
-            <div class="z-10 flex items-center justify-center w-24px h-24px group-hover/step:text-gray-700 transition-colors">
+            <div class="flex items-center justify-center w-24px h-24px group-hover/step:text-gray-700 transition-colors">
                 <!-- COMPLETED STATE: Show specific type icons -->
                 <template v-if="completed">
                     <!-- Show error icon if there's an error -->

package/dist/runtime/components/chat/reasoning-steps.vue

@@ -24,7 +24,7 @@ defineExpose({
 </script>
 
 <template>
-    <div v-if="groupedReasoning.length > 0" flex="~ col" w-full p-16px>
+    <div v-if="groupedReasoning.length > 0" flex="~ col" w-full p-12px>
         <ChatReasoningMessage
             v-for="(step, index) in groupedReasoning"
             :key="getStepKey(step, index)"

package/dist/runtime/components/chat/reasoning-thought.vue

@@ -176,7 +176,7 @@ onUnmounted(() => {
                 flex
                 items-center
                 gap-4px
-                px-16px
+                px-4px
                 pt-16px
                 pb-8px
                 w-full
@@ -237,7 +237,7 @@ onUnmounted(() => {
             <div
                 v-if="!completed && !isExpanded"
                 border="~ 0.5 default rounded-16px"
-                m-16px
+                mt-8px mb-16px
                 cursor-pointer
                 @click="toggleExpanded"
             >
@@ -268,7 +268,6 @@ onUnmounted(() => {
                     v-if="isExpanded"
                     overflow-hidden
                     border="~ 0.5 default rounded-16px"
-                    mx-16px
                     mb-16px
                 >
                     <ChatReasoningSteps

package/dist/runtime/components/chat/tela-skill-widget.vue

@@ -39,15 +39,15 @@ const argsValue = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
-            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+        <div class="px-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                 {{ skillName }}
             </h3>
             <TelaStatus :variant="statusVariant" :label="statusLabel" />
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- Arguments section -->
             <div v-if="hasArgs">
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/thinking-widget.vue

@@ -24,15 +24,15 @@ const title = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
-            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+        <div class="px-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                 {{ title }}
             </h3>
             <TelaStatus :variant="statusVariant" :label="statusLabel" />
         </div>
 
         <!-- Content -->
-        <div class="px-24px pb-24px">
+        <div class="px-16px pb-16px">
             <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
                 <div class="reasoning-markdown text-14px text-primary">
                     <ClientOnly>

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

@@ -1,111 +1,30 @@
 <script setup>
-import { formatTokenCount, formatCost, formatCredits, formatModelName } from "../../utils/calculate-usage";
+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 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;
-  }
-}
+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);
-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>
@@ -216,7 +135,7 @@ const costBarSegments = computed(() => {
                                 <div
                                     v-for="seg in costBarSegments"
                                     :key="seg.label"
-                                    :class="seg.colorClass"
+                                    :class="segmentColorClass[seg.key]"
                                     :style="{ width: `${Math.max(seg.percentage, 1)}%` }"
                                     h-full transition-all duration-300
                                 />
@@ -227,7 +146,7 @@ const costBarSegments = computed(() => {
                                     :key="seg.label"
                                     flex gap-4px items-center
                                 >
-                                    <div w-6px h-6px rounded-full :class="seg.colorClass" />
+                                    <div w-6px h-6px rounded-full :class="segmentColorClass[seg.key]" />
                                     <span body-11-regular text-tertiary>{{ seg.label }}</span>
                                 </div>
                             </div>

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

@@ -44,15 +44,15 @@ const sources = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
-            <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+        <div class="px-16px py-16px flex items-center justify-between">
+            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                 WebSearch
             </h3>
             <TelaStatus :variant="statusVariant" :label="statusLabel" />
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- Sources list -->
             <div v-if="sources.length > 0">
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/workstation-query-widget.vue

@@ -336,9 +336,9 @@ const displayName = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
+        <div class="px-16px py-16px flex items-center justify-between">
             <div class="flex-1 min-w-0">
-                <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                     Consulta de Dados
                 </h3>
                 <p v-if="displayName !== 'Workstation'" class="text-12px text-secondary truncate mt-2px">
@@ -355,7 +355,7 @@ const displayName = computed(() => {
         <!-- Filters preview (when collapsed) -->
         <div
             v-if="!expanded && canExpand && (formattedFilters || formattedOutputQuery)"
-            class="px-24px pb-12px"
+            class="px-16px pb-12px"
         >
             <div class="flex flex-wrap items-center gap-6px">
                 <template v-if="formattedFilters">
@@ -386,7 +386,7 @@ const displayName = computed(() => {
         </div>
 
         <!-- Launch message (when only have launching output) -->
-        <div v-if="toolResult && isLaunchMessage" class="px-24px pb-16px">
+        <div v-if="toolResult && isLaunchMessage" class="px-16px pb-16px">
             <div class="bg-blue-50 rounded-xl border-0.5px border-blue-200 px-16px py-12px">
                 <div class="flex items-center gap-8px">
                     <div class="i-ph-clock text-16px text-blue-600 animate-pulse" />
@@ -398,7 +398,7 @@ const displayName = computed(() => {
         </div>
 
         <!-- Expand/Collapse button -->
-        <div v-if="toolResult && !isLaunchMessage" class="px-24px pb-12px">
+        <div v-if="toolResult && !isLaunchMessage" class="px-16px pb-12px">
             <button
                 type="button"
                 class="w-full flex items-center justify-center gap-6px px-12px py-8px text-13px font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-8px transition-colors"
@@ -413,7 +413,7 @@ const displayName = computed(() => {
         </div>
 
         <!-- Expanded content -->
-        <div v-if="expanded && toolResult && !isLaunchMessage" class="px-24px pb-24px space-y-16px">
+        <div v-if="expanded && toolResult && !isLaunchMessage" class="px-16px pb-16px space-y-16px">
             <!-- Filters section -->
             <div v-if="formattedFilters || formattedOutputQuery">
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

package/dist/runtime/components/chat/write-widget.vue

@@ -92,9 +92,9 @@ const hasMoreLines = computed(() => {
 <template>
     <div class="bg-subtle rounded-16px border border-gray-200">
         <!-- Header -->
-        <div class="px-24px py-24px flex items-center justify-between">
+        <div class="px-16px py-16px flex items-center justify-between">
             <div class="flex-1 min-w-0">
-                <h3 class="text-20px font-580 leading-24px tracking-[-0.5px] text-primary truncate">
+                <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
                     Write
                 </h3>
                 <p class="text-12px text-secondary truncate mt-2px">
@@ -106,7 +106,7 @@ const hasMoreLines = computed(() => {
         </div>
 
         <!-- Content -->
-        <div v-if="toolResult" class="px-24px pb-24px space-y-16px">
+        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
             <!-- File path section -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">

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

@@ -0,0 +1,6 @@
+import type { ConversationFile } from '../types/chat.js';
+export declare function useConversationFileDownloads(): {
+    resolveDownloadUrl: (file: ConversationFile) => Promise<string>;
+    downloadFile: (file: ConversationFile) => Promise<void>;
+    copyFileLink: (file: ConversationFile) => Promise<void>;
+};