@meistrari/chat-nuxt 3.10.0 → 3.11.0

package/README.md

@@ -59,7 +59,7 @@ Declared in `src/runtime/embed/types.ts`; prop, feature-flag, and event payload
 | `telaAgentInputs` | `TelaAgentExecutionInput[] \| null` | `undefined` | Inputs sent with each Tela agent run; hides the variables panel when non-null |
 | `workspaceSettings` | `WorkspaceSettings \| null` | `null` | Override settings from host app; not accepted in Tela agent mode |
 | `user` | `ChatActor \| null` | `null` | Override current user display info; not accepted in Tela agent mode |
-| `features` | `Partial<ChatFeatureConfig>` | `{}` | Toggle optional features: `showUsageTab`, `showDebugOption`, `showCancelButton` (all `false`) |
+| `features` | `Partial<ChatFeatureConfig>` | `{}` | Toggle optional features: `showUsageTab`, `showDebugOption`, `showCancelButton` (default `false`) and `showTtft` (default `true`) |
 | `loadingMessages` | `readonly string[] \| null` | Default chat messages | Override pending-response messages |
 | `loadingMessagesMode` | `'ordered' \| 'random' \| null` | `'ordered'` | Rotate custom messages in order or at random; only applies when `loadingMessages` has a non-empty message |
 | `customComponents` | `Record<string, Component>` | `undefined` | Custom markdown renderers keyed by markdown node or tag name |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/embed/components/chat-embed-inner.vue

@@ -18,6 +18,7 @@ import { useConversationFiles } from "../../files/composables/conversation-files
 import { useConversationFilesPanel } from "../../files/composables/conversation-files-panel";
 import { useConversations } from "../../conversations/composables/conversations";
 import { useEmbedConfig } from "../composables/embed-config";
+import { useAgentWake } from "../composables/use-agent-wake";
 import { useFileDrop } from "../../files/composables/file-drop";
 import { useFilePreviewPanel } from "../../files/composables/file-preview-panel";
 import { usePendingConversationGroup } from "../../conversations/composables/pending-conversation-group";
@@ -155,16 +156,26 @@ const {
   generatingTitle,
   animatedTitle,
   hasPendingMessage,
+  streamingActiveMessageId,
+  preparingSteps,
   loadConversation,
   setConversation,
+  adoptConversation,
   setConversationModel,
   pendingModelSelection,
   sendMessage,
   retryMessage,
   cancelConversation,
   startPolling,
-  clearConversation
+  clearConversation,
+  error: chatError
 } = useChat();
+const agentWake = useAgentWake();
+const modelUpdateInFlight = ref(null);
+watch(chatError, (message) => {
+  if (message)
+    statusToast.update({ text: message, icon: "i-ph-warning" });
+});
 const conversationIdRef = computed(() => currentConversation.value?.id ?? null);
 const { total, files: conversationFiles } = useConversationFiles(conversationIdRef);
 const selectedModel = computed({
@@ -175,14 +186,24 @@ const selectedModel = computed({
     if (conversation && conversation.model !== value) {
       const previousModel = conversation.model;
       setConversationModel(value);
-      void updateConversationModel(conversation.id, value).then((updated) => {
+      const update = updateConversationModel(conversation.id, value).then((updated) => {
         if (!updated && currentConversation.value?.id === conversation.id && currentConversation.value.model === value) {
           setConversationModel(previousModel);
         }
+        return updated;
+      });
+      modelUpdateInFlight.value = update.finally(() => {
+        if (modelUpdateInFlight.value === update)
+          modelUpdateInFlight.value = null;
       });
     }
   }
 });
+watch(selectedModel, (model, previousModel) => {
+  if (!isReady.value || model === previousModel || currentConversation.value?.threadSessionId)
+    return;
+  void agentWake.wake(model);
+});
 const filesCount = computed(() => total.value);
 const hasMessages = computed(() => messages.value.length > 0);
 const mobilePreviewFile = computed(() => {
@@ -222,6 +243,10 @@ function updateConversationId(nextConversationId) {
 }
 async function ensureConversationLoaded(conversationId) {
   if (currentConversation.value?.id === conversationId) {
+    void agentWake.wake(
+      currentConversation.value.model,
+      currentConversation.value.threadSessionId ?? void 0
+    );
     startPolling();
     return;
   }
@@ -232,12 +257,17 @@ async function ensureConversationLoaded(conversationId) {
   try {
     await loadConversation(conversationId);
     if (currentConversation.value?.id !== conversationId) {
+      agentWake.skip();
       statusToast.update({
         text: "Erro ao carregar conversa",
         icon: "i-ph-warning"
       });
       return;
     }
+    void agentWake.wake(
+      currentConversation.value.model,
+      currentConversation.value.threadSessionId ?? void 0
+    );
     startPolling();
   } finally {
     if (loadingConversationId.value === conversationId) {
@@ -247,6 +277,7 @@ async function ensureConversationLoaded(conversationId) {
 }
 function resetConversation(shouldEmit = true) {
   clearConversation();
+  void agentWake.wake(selectedModel.value);
   activeTab.value = "chat";
   closeFilesPanel();
   closePreview();
@@ -404,43 +435,55 @@ const conversationCreator = computed(
     getMember
   })
 );
+function claimableWakeSessionId() {
+  return agentWake.state.value === "ready" && !currentConversation.value?.threadSessionId ? agentWake.sessionId.value : void 0;
+}
 async function handleSend(content, files, agentInputs) {
-  let createdConversationId = null;
-  const resolvedAgentInputs = resolveTelaAgentInputs(
-    agentInputs,
-    embedConfig?.telaAgentInputs?.value
-  );
-  if (!activeConversationId.value || !currentConversation.value) {
-    const conversation = await createConversation({
-      model: selectedModel.value,
-      ...resolvedAgentInputs !== void 0 ? { agentInputs: resolvedAgentInputs } : {}
-    });
+  const resolvedAgentInputs = resolveTelaAgentInputs(agentInputs, embedConfig?.telaAgentInputs?.value);
+  let claimedWakeSessionId;
+  const sent = await sendMessage(content, files.length > 0 ? files : void 0, resolvedAgentInputs, async (signal) => {
+    if (!activeConversationId.value || !currentConversation.value) {
+      const conversation2 = await createConversation({
+        model: selectedModel.value,
+        ...resolvedAgentInputs !== void 0 ? { agentInputs: resolvedAgentInputs } : {}
+      });
+      if (!conversation2)
+        throw new Error("Erro ao criar conversa");
+      const groupId = pendingConversationGroupId.value;
+      clearPendingConversationGroup();
+      const grouped = groupId && await moveConversationToGroup(conversation2.id, groupId);
+      adoptConversation(grouped ? { ...conversation2, groupId } : conversation2);
+      updateConversationId(conversation2.id);
+    }
+    if (modelUpdateInFlight.value)
+      await modelUpdateInFlight.value;
+    const conversation = currentConversation.value;
     if (!conversation)
-      return;
-    const groupId = pendingConversationGroupId.value;
-    clearPendingConversationGroup();
-    if (groupId && await moveConversationToGroup(conversation.id, groupId)) {
-      const groupedConversation = { ...conversation, groupId };
-      setConversation(groupedConversation);
+      throw new Error("Erro ao preparar conversa");
+    if (conversation.threadSessionId) {
+      await agentWake.wake(
+        conversation.model,
+        conversation.threadSessionId
+      );
     } else {
-      setConversation(conversation);
+      await agentWake.waitUntilSettled(signal);
     }
-    createdConversationId = conversation.id;
-  }
-  if (!currentConversation.value)
-    return;
-  const sendPromise = sendMessage(
-    content,
-    files.length > 0 ? files : void 0,
-    resolvedAgentInputs
-  );
-  if (createdConversationId) {
-    updateConversationId(createdConversationId);
-  }
-  await sendPromise;
+    claimedWakeSessionId = claimableWakeSessionId();
+    return claimedWakeSessionId ? { wakeSessionId: claimedWakeSessionId } : {};
+  });
+  if (sent && claimedWakeSessionId)
+    agentWake.consume();
 }
 async function handleRetry(messageId) {
-  await retryMessage(messageId);
+  if (currentConversation.value?.threadSessionId) {
+    await agentWake.wake(
+      currentConversation.value.model,
+      currentConversation.value.threadSessionId
+    );
+  } else {
+    await agentWake.waitUntilSettled();
+  }
+  await retryMessage(messageId, claimableWakeSessionId());
 }
 async function handleNewConversation(groupId) {
   setPendingConversationGroup(groupId);
@@ -765,7 +808,14 @@ async function handleDelete() {
                 @tab-change="handleTabChange"
             >
                 <template #loading>
-                    <ChatMessageList :messages="[]" loading variant="mobile" />
+                    <ChatMessageList
+                        :messages="[]"
+                        :streaming-active-message-id="streamingActiveMessageId"
+                        :preparing-steps="preparingSteps"
+                        :show-ttft="resolvedFeatures.showTtft"
+                        loading
+                        variant="mobile"
+                    />
                     <ChatMessageInput
                         v-model:selected-model="selectedModel"
                         :disabled="true"
@@ -798,7 +848,6 @@ async function handleDelete() {
                             <ChatMessageInput
                                 ref="messageInputRef"
                                 v-model:selected-model="selectedModel"
-                                :disabled="hasPendingMessage"
                                 :loading="hasPendingMessage"
                                 :creator-name="currentUser?.name ?? void 0"
                                 :creator-email="
@@ -823,13 +872,15 @@ async function handleDelete() {
 
                 <ChatMessageList
                     :messages="messages"
+                    :streaming-active-message-id="streamingActiveMessageId"
+                    :preparing-steps="preparingSteps"
+                    :show-ttft="resolvedFeatures.showTtft"
                     variant="mobile"
                     @retry="handleRetry"
                 />
                 <ChatMessageInput
                     ref="messageInputRef"
                     v-model:selected-model="selectedModel"
-                    :disabled="hasPendingMessage"
                     :loading="hasPendingMessage"
                     :creator-name="currentUser?.name ?? void 0"
                     :creator-email="
@@ -950,6 +1001,9 @@ async function handleDelete() {
             >
                 <ChatMessageList
                     :messages="[]"
+                    :streaming-active-message-id="streamingActiveMessageId"
+                    :preparing-steps="preparingSteps"
+                    :show-ttft="resolvedFeatures.showTtft"
                     loading
                     :variant="compact ? 'widget' : 'page'"
                 />
@@ -991,7 +1045,6 @@ async function handleDelete() {
                     <ChatMessageInput
                         ref="messageInputRef"
                         v-model:selected-model="selectedModel"
-                        :disabled="hasPendingMessage"
                         :loading="hasPendingMessage"
                         :creator-name="currentUser?.name ?? void 0"
                         :creator-email="
@@ -1019,13 +1072,15 @@ async function handleDelete() {
             >
                 <ChatMessageList
                     :messages="messages"
+                    :streaming-active-message-id="streamingActiveMessageId"
+                    :preparing-steps="preparingSteps"
+                    :show-ttft="resolvedFeatures.showTtft"
                     :variant="compact ? 'widget' : 'page'"
                     @retry="handleRetry"
                 />
                 <ChatMessageInput
                     ref="messageInputRef"
                     v-model:selected-model="selectedModel"
-                    :disabled="hasPendingMessage"
                     :loading="hasPendingMessage"
                     :creator-name="currentUser?.name ?? void 0"
                     :creator-email="

package/dist/runtime/embed/components/mobile/chat-mobile-shell.vue

@@ -225,7 +225,6 @@ function startNewConversationFromOutdatedSettings() {
                     <ChatMessageInput
                         ref="homeInputRef"
                         v-model:selected-model="selectedModel"
-                        :disabled="hasPendingMessage"
                         :loading="hasPendingMessage"
                         :creator-name="currentUser?.name ?? void 0"
                         :creator-email="currentUser?.email ?? void 0"

package/dist/runtime/embed/composables/use-agent-wake.d.ts

@@ -0,0 +1,23 @@
+import type { TelaAgentWakeResponse } from '../../types/schemas/integrations/tela-agent-api.js';
+export type AgentWakeSnapshot = {
+    state: TelaAgentWakeResponse['status'] | 'idle';
+    sessionId?: string;
+    model?: string;
+};
+export declare function pollAgentWake(options: {
+    request: () => Promise<TelaAgentWakeResponse>;
+    onResponse?: (response: TelaAgentWakeResponse) => void;
+    signal?: AbortSignal;
+    pollIntervalMs?: number;
+    budgetMs?: number;
+    now?: () => number;
+    wait?: (delayMs: number, signal?: AbortSignal) => Promise<void>;
+}): Promise<TelaAgentWakeResponse>;
+export declare function useAgentWake(): {
+    state: any;
+    sessionId: any;
+    wake: (model?: string | null, requestedSessionId?: string) => Promise<TelaAgentWakeResponse>;
+    skip: () => void;
+    consume: () => void;
+    waitUntilSettled: (signal?: AbortSignal) => Promise<AgentWakeSnapshot>;
+};

package/dist/runtime/embed/composables/use-agent-wake.js

@@ -0,0 +1,182 @@
+import { useChatApi } from "../../shared/composables/chat-api.js";
+const WAKE_POLL_INTERVAL_MS = 1500;
+const WAKE_BUDGET_MS = 3e4;
+const WAKE_SETTLE_TIMEOUT_MS = 35e3;
+export async function pollAgentWake(options) {
+  const now = options.now ?? Date.now;
+  const deadline = now() + (options.budgetMs ?? WAKE_BUDGET_MS);
+  const wait = options.wait ?? ((delayMs, signal) => new Promise((resolve, reject) => {
+    let timer;
+    const onAbort = () => {
+      if (timer)
+        clearTimeout(timer);
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    timer = setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, delayMs);
+    if (signal?.aborted)
+      onAbort();
+    else
+      signal?.addEventListener("abort", onAbort, { once: true });
+  }));
+  try {
+    while (!options.signal?.aborted && now() <= deadline) {
+      const response = await options.request();
+      options.onResponse?.(response);
+      if (response.status !== "waking")
+        return response;
+      const remaining = deadline - now();
+      if (remaining <= 0)
+        break;
+      await wait(Math.min(options.pollIntervalMs ?? WAKE_POLL_INTERVAL_MS, remaining), options.signal);
+    }
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "AbortError")
+      throw error;
+    return { status: "unavailable" };
+  }
+  return { status: "unavailable" };
+}
+export function useAgentWake() {
+  const chatApi = useChatApi();
+  const snapshot = ref({ state: "idle" });
+  const state = computed(() => snapshot.value.state);
+  const sessionId = computed(() => snapshot.value.sessionId);
+  let generation = 0;
+  let abortController = null;
+  let activeWake = null;
+  function setSnapshot(next) {
+    snapshot.value = next;
+  }
+  function skip() {
+    generation++;
+    abortController?.abort();
+    abortController = null;
+    activeWake = null;
+    setSnapshot({
+      state: "idle",
+      ...snapshot.value.sessionId ? { sessionId: snapshot.value.sessionId } : {}
+    });
+  }
+  function consume() {
+    generation++;
+    abortController?.abort();
+    abortController = null;
+    activeWake = null;
+    setSnapshot({ state: "idle" });
+  }
+  async function wake(model, requestedSessionId) {
+    generation++;
+    const currentGeneration = generation;
+    abortController?.abort();
+    const controller = new AbortController();
+    abortController = controller;
+    let wakeSessionId = requestedSessionId ?? snapshot.value.sessionId;
+    setSnapshot({
+      state: "waking",
+      ...wakeSessionId ? { sessionId: wakeSessionId } : {},
+      ...model ? { model } : {}
+    });
+    if (import.meta.server) {
+      const unavailable = { status: "unavailable" };
+      setSnapshot({ state: unavailable.status });
+      return unavailable;
+    }
+    const run = async () => {
+      try {
+        const result = await pollAgentWake({
+          signal: controller.signal,
+          request: () => $fetch(
+            chatApi.path("/agent/wake"),
+            chatApi.withChatHeaders({
+              method: "POST",
+              signal: controller.signal,
+              body: {
+                ...wakeSessionId ? { sessionId: wakeSessionId } : {},
+                ...model ? { model } : {}
+              }
+            })
+          ),
+          onResponse: (response) => {
+            if (currentGeneration !== generation)
+              return;
+            wakeSessionId = response.sessionId ?? wakeSessionId;
+            setSnapshot({
+              state: response.status,
+              ...wakeSessionId ? { sessionId: wakeSessionId } : {},
+              ...model ? { model } : {}
+            });
+          }
+        });
+        if (currentGeneration === generation) {
+          setSnapshot({
+            state: result.status,
+            ...result.sessionId ? { sessionId: result.sessionId } : {},
+            ...model ? { model } : {}
+          });
+        }
+        return result;
+      } catch (error) {
+        if (!(error instanceof DOMException && error.name === "AbortError") && currentGeneration === generation)
+          setSnapshot({ state: "unavailable" });
+        return { status: "unavailable" };
+      } finally {
+        if (abortController === controller)
+          abortController = null;
+      }
+    };
+    const pending = run();
+    activeWake = pending;
+    try {
+      return await pending;
+    } finally {
+      if (activeWake === pending)
+        activeWake = null;
+    }
+  }
+  async function waitUntilSettled(signal) {
+    if (snapshot.value.state !== "waking" || !activeWake)
+      return snapshot.value;
+    const pending = activeWake;
+    await new Promise((resolve, reject) => {
+      let settled = false;
+      let timer;
+      let onAbort = () => {
+      };
+      const finish = (error) => {
+        if (settled)
+          return;
+        settled = true;
+        if (timer)
+          clearTimeout(timer);
+        signal?.removeEventListener("abort", onAbort);
+        if (error)
+          reject(error);
+        else
+          resolve();
+      };
+      onAbort = () => finish(new DOMException("Aborted", "AbortError"));
+      timer = setTimeout(() => finish(), WAKE_SETTLE_TIMEOUT_MS);
+      if (signal?.aborted)
+        onAbort();
+      else
+        signal?.addEventListener("abort", onAbort, { once: true });
+      pending.then(() => finish(), () => finish());
+    });
+    return snapshot.value;
+  }
+  onUnmounted(() => {
+    generation++;
+    abortController?.abort();
+  });
+  return {
+    state,
+    sessionId,
+    wake,
+    skip,
+    consume,
+    waitUntilSettled
+  };
+}

package/dist/runtime/embed/feature-config.d.ts

@@ -1,7 +1,4 @@
-/**
- * Optional UI toggles the host passes per embed instance. All default to `false`;
- * the host owns the policy (hardcoded, role-gated, or from a feature-flag provider).
- */
+/** Optional UI toggles the host passes per embed instance. */
 export type ChatFeatureConfig = {
     /** Usage tab in the chat topbar, with per-conversation token and cost stats. */
     showUsageTab?: boolean;
@@ -9,10 +6,13 @@ export type ChatFeatureConfig = {
     showDebugOption?: boolean;
     /** "Stop generation" button while a response streams. */
     showCancelButton?: boolean;
+    /** Time to first token shown in assistant message metadata. Defaults to true. */
+    showTtft?: boolean;
 };
 export type ResolvedChatFeatureConfig = {
     showUsageTab: boolean;
     showDebugOption: boolean;
     showCancelButton: boolean;
+    showTtft: boolean;
 };
 export declare function resolveChatFeatures(features?: Partial<ChatFeatureConfig>): ResolvedChatFeatureConfig;

package/dist/runtime/embed/feature-config.js

@@ -2,6 +2,7 @@ export function resolveChatFeatures(features) {
   return {
     showUsageTab: features?.showUsageTab ?? false,
     showDebugOption: features?.showDebugOption ?? false,
-    showCancelButton: features?.showCancelButton ?? false
+    showCancelButton: features?.showCancelButton ?? false,
+    showTtft: features?.showTtft ?? true
   };
 }

package/dist/runtime/embed/loading-messages.d.ts

@@ -1,4 +1,20 @@
 export declare const DEFAULT_CHAT_LOADING_MESSAGES: readonly ["Analisando sua pergunta", "Processando informações", "Consultando base de conhecimento", "Organizando ideias", "Elaborando resposta", "Refinando detalhes", "Verificando contexto", "Conectando conceitos", "Preparando resultado", "Quase lá", "Finalizando análise", "Estruturando resposta"];
+/**
+ * Stand-in steps for a turn that has not produced its own reasoning yet. They
+ * accumulate, so the bubble reads as an agent working through the wait rather
+ * than as a loading placeholder. The user message is already delivered at this
+ * point, so the wait belongs to the answer.
+ */
+export declare const CHAT_PREPARING_STEPS: readonly ["Preparando o ambiente de trabalho", "Analisando a mensagem"];
+/**
+ * The first delay is measured from the send, every later one from the step
+ * before it — so the sequence paces itself instead of racing a shared clock.
+ * Late enough that a turn answering promptly never shows a stand-in, and
+ * jittered so it does not look like a fixed-timer artifact.
+ */
+export declare const CHAT_PREPARING_STEP_DELAYS_MS: readonly [2500, 4000];
+export declare const CHAT_PREPARING_STEP_JITTER_MS = 500;
+export declare function nextChatPreparingStepDelay(stepIndex: number, random?: () => number): number;
 export type ChatLoadingMessageMode = 'ordered' | 'random';
 export type ChatLoadingMessagesInput = {
     loadingMessages?: readonly string[] | null;

package/dist/runtime/embed/loading-messages.js

@@ -12,6 +12,16 @@ export const DEFAULT_CHAT_LOADING_MESSAGES = [
   "Finalizando an\xE1lise",
   "Estruturando resposta"
 ];
+export const CHAT_PREPARING_STEPS = [
+  "Preparando o ambiente de trabalho",
+  "Analisando a mensagem"
+];
+export const CHAT_PREPARING_STEP_DELAYS_MS = [2500, 4e3];
+export const CHAT_PREPARING_STEP_JITTER_MS = 500;
+export function nextChatPreparingStepDelay(stepIndex, random = Math.random) {
+  const base = CHAT_PREPARING_STEP_DELAYS_MS[stepIndex] ?? CHAT_PREPARING_STEP_DELAYS_MS.at(-1);
+  return base + Math.floor(random() * CHAT_PREPARING_STEP_JITTER_MS);
+}
 function normalizeMessages(messages) {
   if (!messages?.length)
     return [];

package/dist/runtime/messages/components/chat-message-bubble.d.vue.ts

@@ -1,11 +1,20 @@
 import type { Message } from '../../types/schemas/chat/conversations.js';
 type __VLS_Props = {
     message: Message;
+    streamActive?: boolean;
+    /**
+     * Stand-in steps shown while this turn is still working towards its first
+     * output. They yield as soon as the run emits real reasoning or content.
+     */
+    preparingSteps?: readonly string[] | null;
+    showTtft?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: ((messageId: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    showTtft: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/messages/components/chat-message-bubble.vue

@@ -6,7 +6,10 @@ import { isPromptTooLongFailure } from "../../types/schemas/chat/messages.js";
 import { parseContentWithFiles } from "../../files/content-detection";
 import ChatVaultLink from "../../files/components/chat-vault-link.vue";
 const props = defineProps({
-  message: { type: null, required: true }
+  message: { type: null, required: true },
+  streamActive: { type: Boolean, required: false },
+  preparingSteps: { type: [Array, null], required: false },
+  showTtft: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["retry"]);
 const { user } = useChatAuth();
@@ -176,17 +179,24 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
         </template>
 
         <template v-else>
+            <!--
+                A live stream normally owns the pending state, so this block stays
+                out of its way. Stand-in steps are the exception: until the run
+                emits anything the stream has nothing to show, and that silence is
+                exactly what they cover.
+            -->
             <ChatReasoningThought
-                v-if="hasReasoning || isPending"
+                v-if="hasReasoning || preparingSteps?.length && !message.content || isPending && !streamActive"
                 :reasoning-data="message.reasoningData ?? []"
                 :animate="wasEverPending"
                 :completed="!isPending"
+                :preparing-steps="preparingSteps"
                 :created-at="message.createdAt"
                 :updated-at="message.updatedAt"
             />
 
             <div
-                v-if="!isPending && message.content"
+                v-if="!isPending && message.content || isPending && streamActive"
                 max-w-prose
                 :class="[
   isFailed ? 'flex gap-12px items-start bg-subtle border border-solid rounded-12px w-full' : 'rounded-12px code-theme'
@@ -238,7 +248,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                                     :custom-components="mergedCustomComponents"
                                     :custom-html-tags="mergedCustomHtmlTags"
                                     :render-code-blocks-as-pre="true"
-                                    :typewriter="shouldAnimate"
+                                    :typewriter="isPending || shouldAnimate"
                                 />
                             </ClientOnly>
                             <ChatFilePreview
@@ -261,11 +271,12 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                             :custom-components="mergedCustomComponents"
                             :custom-html-tags="mergedCustomHtmlTags"
                             :render-code-blocks-as-pre="true"
-                            :typewriter="shouldAnimate"
+                            :typewriter="isPending || shouldAnimate"
                             text-black-900
                         />
                     </ClientOnly>
                     <div
+                        v-if="!isPending"
                         mt-8px
                         flex
                         items-center
@@ -274,9 +285,9 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                         text-tertiary
                     >
                         <span>{{ formatTime(message.updatedAt || message.createdAt) }}</span>
-                        <TelaDotSeparator v-if="formattedTtft || hasMessageFeedback" />
+                        <TelaDotSeparator v-if="showTtft && formattedTtft || hasMessageFeedback" />
                         <div flex items-center gap-8px>
-                            <span v-if="formattedTtft" flex items-center gap-4px>
+                            <span v-if="showTtft && formattedTtft" flex items-center gap-4px>
                                 {{ formattedTtft }}
                             </span>
                             <ChatMessageFeedback v-if="hasMessageFeedback" :message="message" />