From 00aaf297dcfe999a4c9b92e4bd0224215f122082 Mon Sep 17 00:00:00 2001
From: Mohammad Kermani <mkermani144@gmail.com>
Date: Thu, 15 May 2025 11:53:41 +0330
Subject: [PATCH] fix: Show thinking message when actual message chunks are not
 received

---
 components/messages.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/messages.tsx b/components/messages.tsx
index fef6317..12844a3 100644
--- a/components/messages.tsx
+++ b/components/messages.tsx
@@ -1,10 +1,12 @@
 import { ChatRequestOptions, Message } from 'ai';
-import { PreviewMessage, ThinkingMessage } from './message';
-import { useScrollToBottom } from './use-scroll-to-bottom';
-import { Overview } from './overview';
+import equal from 'fast-deep-equal';
 import { memo } from 'react';
+
 import { Vote } from '@/lib/db/schema';
-import equal from 'fast-deep-equal';
+
+import { PreviewMessage, ThinkingMessage } from './message';
+import { Overview } from './overview';
+import { useScrollToBottom } from './use-scroll-to-bottom';
 
 interface MessagesProps {
   chatId: string;
@@ -33,14 +35,16 @@ function PureMessages({
   const [messagesContainerRef, messagesEndRef] =
     useScrollToBottom<HTMLDivElement>();
 
+  const nonEmptyMessages = messages.filter((message) => message.content);
+
   return (
     <div
       ref={messagesContainerRef}
       className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
     >
-      {messages.length === 0 && <Overview />}
+      {nonEmptyMessages.length === 0 && <Overview />}
 
-      {messages.map((message, index) => (
+      {nonEmptyMessages.map((message, index) => (
         <PreviewMessage
           key={message.id}
           chatId={chatId}
@@ -58,8 +62,10 @@ function PureMessages({
       ))}
 
       {isLoading &&
-        messages.length > 0 &&
-        messages[messages.length - 1].role === 'user' && <ThinkingMessage />}
+        nonEmptyMessages.length > 0 &&
+        nonEmptyMessages[nonEmptyMessages.length - 1].role === 'user' && (
+          <ThinkingMessage />
+        )}
 
       <div
         ref={messagesEndRef}