@meistrari/chat-nuxt 3.9.2 → 3.10.0

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

@@ -169,69 +169,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
@@ -256,17 +256,8 @@ 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
                 >
@@ -276,8 +267,8 @@ onUnmounted(() => {
                         :completed="completed"
                     />
                 </div>
-            </Transition>
-        </div>
+            </TelaCollapsibleContent>
+        </TelaCollapsible>
     </div>
 </template>
 

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>

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

@@ -335,86 +335,73 @@ const displayName = 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">
-                    Consulta de Dados
-                </h3>
-                <p v-if="displayName !== 'Workstation'" class="text-12px text-secondary truncate mt-2px">
-                    {{ displayName }}
-                </p>
-            </div>
-            <TelaStatus
-                :variant="statusVariant"
-                :label="statusLabel"
-                :is-icon-animated="!toolResult"
-            />
-        </div>
+    <TelaChatWidgetCard
+        title="Consulta de Dados"
+        :status-variant="statusVariant"
+        :status-label="statusLabel ?? ''"
+        :is-icon-animated="!toolResult"
+    >
+        <template v-if="displayName !== 'Workstation'" #subtitle>
+            {{ displayName }}
+        </template>
 
         <!-- Filters preview (when collapsed) -->
         <div
             v-if="!expanded && canExpand && (formattedFilters || formattedOutputQuery)"
-            class="px-16px pb-12px"
+            class="flex flex-wrap items-center gap-6px"
         >
-            <div class="flex flex-wrap items-center gap-6px">
-                <template v-if="formattedFilters">
-                    <span
-                        v-for="filter in formattedFilters.slice(0, 3)"
-                        :key="filter"
-                        class="text-11px px-8px py-3px rounded-6px bg-gray-100 text-gray-600"
-                    >
-                        {{ filter }}
-                    </span>
-                </template>
-                <template v-if="formattedOutputQuery">
-                    <span
-                        v-for="query in formattedOutputQuery.slice(0, 3)"
-                        :key="query"
-                        class="text-11px px-8px py-3px rounded-6px bg-blue-100 text-blue-700"
-                    >
-                        {{ query }}
-                    </span>
-                </template>
+            <template v-if="formattedFilters">
                 <span
-                    v-if="(formattedFilters?.length || 0) + (formattedOutputQuery?.length || 0) > 3"
-                    class="text-11px text-gray-400"
+                    v-for="filter in formattedFilters.slice(0, 3)"
+                    :key="filter"
+                    class="text-11px px-8px py-3px rounded-6px bg-gray-100 text-gray-600"
                 >
-                    +{{ (formattedFilters?.length || 0) + (formattedOutputQuery?.length || 0) - 3 }} mais
+                    {{ filter }}
                 </span>
-            </div>
+            </template>
+            <template v-if="formattedOutputQuery">
+                <span
+                    v-for="query in formattedOutputQuery.slice(0, 3)"
+                    :key="query"
+                    class="text-11px px-8px py-3px rounded-6px bg-blue-100 text-blue-700"
+                >
+                    {{ query }}
+                </span>
+            </template>
+            <span
+                v-if="(formattedFilters?.length || 0) + (formattedOutputQuery?.length || 0) > 3"
+                class="text-11px text-gray-400"
+            >
+                +{{ (formattedFilters?.length || 0) + (formattedOutputQuery?.length || 0) - 3 }} mais
+            </span>
         </div>
 
         <!-- Launch message (when only have launching output) -->
-        <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" />
-                    <p class="text-13px text-blue-700 m-0">
-                        Aguardando resultados da consulta...
-                    </p>
-                </div>
+        <div v-if="toolResult && isLaunchMessage" 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" />
+                <p class="text-13px text-blue-700 m-0">
+                    Aguardando resultados da consulta...
+                </p>
             </div>
         </div>
 
         <!-- Expand/Collapse button -->
-        <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"
-                @click="expanded = !expanded"
-            >
-                <span>{{ expanded ? "Ocultar detalhes" : "Ver detalhes" }}</span>
-                <div
-                    class="i-ph-caret-down text-12px transition-transform"
-                    :class="expanded && 'rotate-180'"
-                />
-            </button>
-        </div>
+        <button
+            v-if="toolResult && !isLaunchMessage"
+            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"
+            @click="expanded = !expanded"
+        >
+            <span>{{ expanded ? "Ocultar detalhes" : "Ver detalhes" }}</span>
+            <div
+                class="i-ph-caret-down text-12px transition-transform"
+                :class="expanded && 'rotate-180'"
+            />
+        </button>
 
         <!-- Expanded content -->
-        <div v-if="expanded && toolResult && !isLaunchMessage" class="px-16px pb-16px space-y-16px">
+        <template v-if="expanded && toolResult && !isLaunchMessage">
             <!-- Filters section -->
             <div v-if="formattedFilters || formattedOutputQuery">
                 <div class="text-14px font-580 leading-16px tracking-[-0.15px] text-gray-700 mb-2">
@@ -548,6 +535,6 @@ const displayName = computed(() => {
                     <pre class="text-14px text-primary whitespace-pre-wrap break-words m-0">{{ toolResult.output }}</pre>
                 </div>
             </div>
-        </div>
-    </div>
+        </template>
+    </TelaChatWidgetCard>
 </template>