From 1cf8bd01def19f0e3f4b97ee268b36106cd0ec70 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Tue, 26 Aug 2025 22:07:12 +0530
Subject: [PATCH] Update copilot loading states

---
 .../app/projects/[projectId]/copilot/app.tsx   | 12 ++----------
 .../copilot/components/messages.tsx            | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
index 2e901e7f..b3704a15 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
@@ -265,18 +265,10 @@ const App = forwardRef<{ handleCopyChat: () => void; handleUserMessage: (message
                         workflow={workflowRef.current}
                         dispatch={dispatch}
                         onStatusBarChange={handleStatusBarChange}
+                        toolCalling={toolCalling}
+                        toolQuery={toolQuery}
                     />
                 </div>
-                {toolCalling && (
-                    <div className="shrink-0 px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-gray-950/20 rounded-2xl mx-1 mb-2">
-                        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
-                            <Spinner size="sm" className="ml-2" />
-                            <span>
-                                Searching for tools{toolQuery ? ` to ${toolQuery}` : '...'}
-                            </span>
-                        </div>
-                    </div>
-                )}
                 <div className="shrink-0 px-1">
                     {responseError && (
                         <div className="mb-4 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex gap-2 justify-between items-center text-sm">
diff --git a/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx b/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx
index c0e9865c..08db50cd 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/components/messages.tsx
@@ -507,7 +507,9 @@ export function Messages({
     loadingResponse,
     workflow,
     dispatch,
-    onStatusBarChange
+    onStatusBarChange,
+    toolCalling,
+    toolQuery
 }: {
     messages: z.infer<typeof CopilotMessage>[];
     streamingResponse: string;
@@ -515,6 +517,8 @@ export function Messages({
     workflow: z.infer<typeof Workflow>;
     dispatch: (action: any) => void;
     onStatusBarChange?: (status: any) => void;
+    toolCalling?: boolean;
+    toolQuery?: string | null;
 }) {
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const [displayMessages, setDisplayMessages] = useState(messages);
@@ -582,11 +586,15 @@ export function Messages({
                         {renderMessage(message, index)}
                     </div>
                 ))}
-                {loadingResponse && (
-                    <div className="text-xs text-gray-500">
-                        <Spinner size="sm" className="ml-2" />
+                {!streamingResponse && (toolCalling ? (
+                    <div className="text-sm text-gray-600 dark:text-gray-400 mb-2 px-4">
+                        <span className="animate-pulse [animation-duration:2s]">Searching for tools{toolQuery ? ` to ${toolQuery}` : ''}...</span>
                     </div>
-                )}
+                ) : loadingResponse ? (
+                    <div className="text-sm text-gray-600 dark:text-gray-400 mb-2 px-4">
+                        <span className="animate-pulse [animation-duration:2s]">Thinking...</span>
+                    </div>
+                ) : null)}
             </div>
             <div ref={messagesEndRef} />
         </div>