@meistrari/chat-nuxt 3.9.2 → 3.11.0

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

@@ -1,4 +1,5 @@
 <script setup>
+import { resolveDisplayedReasoning } from "../../reasoning";
 import { resolveToolTitle } from "../../tool-registry";
 import ChatReasoningSteps from "./chat-reasoning-steps.vue";
 const props = defineProps({
@@ -6,7 +7,8 @@ const props = defineProps({
   completed: { type: Boolean, required: true },
   animate: { type: Boolean, required: false },
   createdAt: { type: [Date, String], required: true },
-  updatedAt: { type: [Date, String, null], required: false }
+  updatedAt: { type: [Date, String, null], required: false },
+  preparingSteps: { type: [Array, null], required: false }
 });
 const SUCCESS_ANIMATION_DURATION_MS = 1e3;
 const DOT_ANIMATION_INTERVAL_MS = 500;
@@ -23,11 +25,10 @@ let dotInterval;
 let timerInterval;
 const storageKey = computed(() => `reasoning-timer-${new Date(props.createdAt).getTime()}`);
 const showGradient = computed(() => !props.completed && !isExpanded.value);
-const groupedReasoning = computed(() => {
-  if (!props.reasoningData || !Array.isArray(props.reasoningData))
-    return [];
-  return props.reasoningData;
-});
+const displayedReasoning = computed(
+  () => resolveDisplayedReasoning(props.reasoningData, props.preparingSteps)
+);
+const groupedReasoning = computed(() => displayedReasoning.value);
 const hasReasoning = computed(() => groupedReasoning.value.length > 0);
 const lastStep = computed(() => {
   const steps = groupedReasoning.value;
@@ -169,69 +170,69 @@ onUnmounted(() => {
         <ChatThinkingIndicator v-if="!completed && !hasReasoning" key="thinking" />
 
         <!-- Com reasoning (loading ou completo): header clicável + steps colapsáveis -->
-        <div v-else-if="hasReasoning" key="reasoning">
-            <button
-                type="button"
-                class="group"
-                flex
-                items-center
-                gap-4px
-                px-4px
-                pt-16px
-                pb-8px
-                w-full
-                text-left
-                transition-colors
-                rounded-8px
-                cursor-pointer
-                :aria-expanded="isExpanded"
-                :aria-busy="!completed"
-                aria-label="Toggle reasoning steps"
-                @click="toggleExpanded"
-            >
-                <span
-                    v-if="completed && showingSuccess"
-                    key="success-text"
-                    class="text-16px static-gradient-text"
-                >
-                    Trabalho concluído
-                </span>
-                <div
-                    v-else-if="completed"
-                    key="completed-text"
-                    class="text-16px flex items-center gap-4px"
-                >
-                    <span class="text-secondary group-hover:text-gray-900 transition-colors">Trabalhou por</span>
-                    <span class="text-tertiary group-hover:text-gray-900 transition-colors">{{ formattedDuration || "alguns momentos" }}</span>
-                </div>
-                <div
-                    v-else
-                    key="loading-text"
-                    class="text-16px flex items-center gap-8px"
+        <TelaCollapsible v-else-if="hasReasoning" key="reasoning" v-model:open="isExpanded">
+            <TelaCollapsibleTrigger as-child>
+                <button
+                    type="button"
+                    class="group"
+                    flex
+                    items-center
+                    gap-4px
+                    pt-16px
+                    pb-8px
+                    w-full
+                    text-left
+                    transition-colors
+                    rounded-8px
+                    cursor-pointer
+                    :aria-busy="!completed"
+                    aria-label="Toggle reasoning steps"
+                    @click="userHasExpanded = true"
                 >
                     <span
-                        :class="hasReasoning ? 'text-gray-700' : 'running-gradient-text'"
+                        v-if="completed && showingSuccess"
+                        key="success-text"
+                        class="body-14-regular static-gradient-text"
                     >
-                        {{ hasReasoning ? currentStepName : loadingText }}
+                        Trabalho concluído
                     </span>
-                    <span
-                        v-if="liveFormattedDuration"
-                        class="text-12px text-gray-500 timer-mono"
+                    <div
+                        v-else-if="completed"
+                        key="completed-text"
+                        class="body-14-regular flex items-center gap-4px"
                     >
-                        ({{ liveFormattedDuration }})
-                    </span>
-                </div>
+                        <span class="text-secondary group-hover:text-gray-900 transition-colors">Trabalhou por</span>
+                        <span class="text-tertiary group-hover:text-gray-900 transition-colors">{{ formattedDuration || "alguns momentos" }}</span>
+                    </div>
+                    <div
+                        v-else
+                        key="loading-text"
+                        class="body-14-regular flex items-center gap-8px"
+                    >
+                        <span
+                            :class="hasReasoning ? 'text-gray-700' : 'running-gradient-text'"
+                        >
+                            {{ hasReasoning ? currentStepName : loadingText }}
+                        </span>
+                        <span
+                            v-if="liveFormattedDuration"
+                            class="text-12px text-gray-500 timer-mono"
+                        >
+                            ({{ liveFormattedDuration }})
+                        </span>
+                    </div>
 
-                <div
-                    i-ph-caret-right
-                    text-12px
-                    text-gray-500
-                    group-hover:text-gray-700
-                    transition-all
-                    duration-200
-                    :class="{ 'rotate-90': isExpanded }"
-                />
-            </button>
+                    <div
+                        i-ph-caret-right
+                        text-12px
+                        text-gray-500
+                        group-hover:text-gray-700
+                        transition-all
+                        duration-200
+                        :class="{ 'rotate-90': isExpanded }"
+                    />
+                </button>
+            </TelaCollapsibleTrigger>
 
             <!-- Preview mode: Always visible during loading, with gradient -->
             <div
@@ -247,7 +248,7 @@ onUnmounted(() => {
                     :class="{ 'with-gradient': showGradient }"
                 >
                     <ChatReasoningSteps
-                        :reasoning-data="reasoningData"
+                        :reasoning-data="displayedReasoning"
                         :animate="animate && !completed"
                         :completed="completed"
                         :is-preview-mode="true"
@@ -256,28 +257,19 @@ onUnmounted(() => {
             </div>
 
             <!-- Expanded mode: Full content without gradient -->
-            <Transition
-                enter-active-class="transition-all duration-300 ease-out"
-                leave-active-class="transition-all duration-200 ease-in"
-                enter-from-class="opacity-0 -translate-y-8px max-h-0"
-                enter-to-class="opacity-100 translate-y-0 max-h-[2000px]"
-                leave-from-class="opacity-100 translate-y-0 max-h-[2000px]"
-                leave-to-class="opacity-0 -translate-y-8px max-h-0"
-            >
+            <TelaCollapsibleContent>
                 <div
-                    v-if="isExpanded"
-                    overflow-hidden
                     border="~ 0.5 default rounded-16px"
                     mb-16px
                 >
                     <ChatReasoningSteps
-                        :reasoning-data="reasoningData"
+                        :reasoning-data="displayedReasoning"
                         :animate="animate && !completed"
                         :completed="completed"
                     />
                 </div>
-            </Transition>
-        </div>
+            </TelaCollapsibleContent>
+        </TelaCollapsible>
     </div>
 </template>
 

package/dist/runtime/messages/components/reasoning/chat-reasoning-thought.vue.d.ts

@@ -1,10 +1,11 @@
-import type { ReasoningStep } from '../../reasoning.js';
+import { type ReasoningStep } from '../../reasoning.js';
 type __VLS_Props = {
     reasoningData: ReasoningStep[];
     completed: boolean;
     animate?: boolean;
     createdAt: Date | string;
     updatedAt?: Date | string | null;
+    preparingSteps?: readonly string[] | null;
 };
 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;

package/dist/runtime/messages/components/reasoning/chat-thinking-indicator.vue

@@ -52,13 +52,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div flex justify-start pl-16px py-16px>
-        <span class="running-gradient-text" body-16-regular>
-            {{ currentText }}
-        </span>
-    </div>
+    <TelaChatTextShimmer class="body-16-regular">
+        {{ currentText }}
+    </TelaChatTextShimmer>
 </template>
-
-<style scoped>
-.running-gradient-text{background:linear-gradient(90deg,#9da2aa,#f4f5f7 50%,#9da2aa);background-clip:text;-webkit-background-clip:text;background-size:200% 100%;-webkit-text-fill-color:transparent;animation:gradientAnimation 1.5s linear infinite}@keyframes gradientAnimation{0%{background-position:200% 50%}to{background-position:0 50%}}
-</style>

package/dist/runtime/messages/components/widgets/chat-bash-widget.vue

@@ -29,17 +29,8 @@ const isOutputCode = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <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">
-                Bash
-            </h3>
-            <TelaStatus :variant="statusVariant" :label="statusLabel" />
-        </div>
-
-        <!-- Content -->
-        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
+    <TelaChatWidgetCard title="Bash" :status-variant="statusVariant" :status-label="statusLabel">
+        <div v-if="toolResult" class="space-y-16px">
             <!-- Command section -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
@@ -82,5 +73,5 @@ const isOutputCode = computed(() => {
                 </div>
             </div>
         </div>
-    </div>
+    </TelaChatWidgetCard>
 </template>

package/dist/runtime/messages/components/widgets/chat-doc-sdk-widget.vue

@@ -29,17 +29,8 @@ const isOutputCode = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <div class="px-16px py-16px flex items-center justify-between">
-            <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary">
-                {{ skillName }}
-            </h3>
-            <TelaStatus :variant="statusVariant" :label="statusLabel" />
-        </div>
-
-        <!-- Content -->
-        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
+    <TelaChatWidgetCard :title="skillName" :status-variant="statusVariant" :status-label="statusLabel">
+        <div v-if="toolResult" class="space-y-16px">
             <!-- Result -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
@@ -70,5 +61,5 @@ const isOutputCode = computed(() => {
                 </div>
             </div>
         </div>
-    </div>
+    </TelaChatWidgetCard>
 </template>

package/dist/runtime/messages/components/widgets/chat-generic-tool-widget.vue

@@ -82,17 +82,8 @@ const isEmptyMessage = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <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">
-                {{ name }}
-            </h3>
-            <TelaStatus :variant="statusVariant" :label="statusLabel" />
-        </div>
-
-        <!-- Content -->
-        <div v-if="hasContent" class="px-16px pb-16px space-y-16px">
+    <TelaChatWidgetCard :title="name" :status-variant="statusVariant" :status-label="statusLabel">
+        <div v-if="hasContent" class="space-y-16px">
             <!-- Parameters section -->
             <div v-if="input && Object.keys(input).length > 0">
                 <!-- Special handling for TodoWrite tool -->
@@ -326,7 +317,7 @@ const isEmptyMessage = computed(() => {
                 </div>
             </div>
         </div>
-    </div>
+    </TelaChatWidgetCard>
 </template>
 
 <style scoped>

package/dist/runtime/messages/components/widgets/chat-grep-widget.vue

@@ -120,23 +120,13 @@ function highlightMatch(content) {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <div class="px-16px py-16px flex items-center justify-between">
-            <div class="flex-1 min-w-0">
-                <h3 class="text-16px font-580 leading-20px tracking-[-0.3px] text-primary truncate">
-                    Grep
-                </h3>
-                <p class="text-12px text-secondary truncate mt-2px">
-                    <span class="font-mono">{{ pattern.length > 30 ? `${pattern.slice(0, 30)}...` : pattern }}</span>
-                    <span class="opacity-60"> em {{ shortPath }}</span>
-                </p>
-            </div>
-            <TelaStatus :variant="statusVariant" :label="statusLabel" />
-        </div>
+    <TelaChatWidgetCard title="Grep" :status-variant="statusVariant" :status-label="statusLabel ?? ''">
+        <template #subtitle>
+            <span class="font-mono">{{ pattern.length > 30 ? `${pattern.slice(0, 30)}...` : pattern }}</span>
+            <span class="opacity-60"> em {{ shortPath }}</span>
+        </template>
 
-        <!-- Content -->
-        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
+        <div v-if="toolResult" class="space-y-16px">
             <!-- Search info -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
@@ -251,7 +241,7 @@ function highlightMatch(content) {
                 </div>
             </div>
         </div>
-    </div>
+    </TelaChatWidgetCard>
 </template>
 
 <style scoped>

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

@@ -111,23 +111,13 @@ const isContentCode = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <div class="px-16px py-16px flex items-center justify-between">
-            <div class="flex-1 min-w-0">
-                <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">
-                    {{ fileName }}
-                    <span v-if="parentDir" class="opacity-60">em {{ parentDir }}</span>
-                </p>
-            </div>
-            <TelaStatus :variant="statusVariant" :label="statusLabel" />
-        </div>
+    <TelaChatWidgetCard title="Read" :status-variant="statusVariant" :status-label="statusLabel ?? ''">
+        <template #subtitle>
+            {{ fileName }}
+            <span v-if="parentDir" class="opacity-60">em {{ parentDir }}</span>
+        </template>
 
-        <!-- Content -->
-        <div v-if="toolResult" class="px-16px pb-16px space-y-16px">
+        <div v-if="toolResult" class="space-y-16px">
             <!-- File path section -->
             <div>
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
@@ -187,7 +177,7 @@ const isContentCode = computed(() => {
                 </div>
             </div>
         </div>
-    </div>
+    </TelaChatWidgetCard>
 </template>
 
 <style scoped>

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

@@ -37,17 +37,8 @@ const argsValue = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <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-16px pb-16px space-y-16px">
+    <TelaChatWidgetCard :title="skillName" :status-variant="statusVariant" :status-label="statusLabel">
+        <template v-if="toolResult">
             <!-- Arguments section -->
             <div v-if="hasArgs">
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
@@ -89,6 +80,6 @@ const argsValue = computed(() => {
                     </p>
                 </div>
             </div>
-        </div>
-    </div>
+        </template>
+    </TelaChatWidgetCard>
 </template>

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

@@ -22,30 +22,19 @@ const title = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <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-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>
-                        <AppMarkdownRender
-                            :content="content"
-                            :render-code-blocks-as-pre="true"
-                            :typewriter="false"
-                        />
-                    </ClientOnly>
-                </div>
+    <TelaChatWidgetCard :title="title" :status-variant="statusVariant" :status-label="statusLabel">
+        <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>
+                    <AppMarkdownRender
+                        :content="content"
+                        :render-code-blocks-as-pre="true"
+                        :typewriter="false"
+                    />
+                </ClientOnly>
             </div>
         </div>
-    </div>
+    </TelaChatWidgetCard>
 </template>
 
 <style scoped>

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

@@ -42,49 +42,22 @@ const sources = computed(() => {
 </script>
 
 <template>
-    <div class="bg-subtle rounded-16px border border-gray-200">
-        <!-- Header -->
-        <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-16px pb-16px space-y-16px">
+    <TelaChatWidgetCard title="WebSearch" :status-variant="statusVariant" :status-label="statusLabel">
+        <template v-if="toolResult">
             <!-- Sources list -->
             <div v-if="sources.length > 0">
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
                     Fontes
                 </div>
-                <div class="bg-white rounded-xl border-0.5px border-gray-200 px-3 py-2">
-                    <div class="flex flex-col gap-6px">
-                        <a
-                            v-for="source in sources"
-                            :key="source.url"
-                            :href="source.url"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="flex items-center gap-8px py-8px border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors group"
-                        >
-                            <img
-                                :src="`https://www.google.com/s2/favicons?domain=${source.domain}&sz=32`"
-                                :alt="source.domain"
-                                class="w-16px h-16px rounded-4px"
-                            >
-                            <div class="flex-1 min-w-0">
-                                <div class="text-14px font-medium text-primary truncate group-hover:text-blue-700">
-                                    {{ source.title }}
-                                </div>
-                                <div class="text-12px text-gray-500 truncate">
-                                    {{ source.domain }}
-                                </div>
-                            </div>
-                            <div class="i-ph-arrow-square-out text-14px text-gray-400 group-hover:text-blue-500" />
-                        </a>
-                    </div>
-                </div>
+                <TelaChatWidgetSources>
+                    <TelaChatWidgetSource
+                        v-for="source in sources"
+                        :key="source.url"
+                        :title="source.title || source.url"
+                        :domain="source.domain"
+                        :href="source.url"
+                    />
+                </TelaChatWidgetSources>
             </div>
 
             <!-- Result -->
@@ -116,6 +89,6 @@ const sources = computed(() => {
                     </p>
                 </div>
             </div>
-        </div>
-    </div>
+        </template>
+    </TelaChatWidgetCard>
 </template>