Update ReasoningMessageFile.tsx

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningMessageFile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   BusterChatMessageReasoning_file,
   BusterChatMessageReasoning_files
@@ -7,6 +7,10 @@ import { useMessageIndividual } from '@/context/Chats';
 import { ReasoningFileButtons } from './ReasoningFileButtons';
 import { StreamingMessageCode } from '@/components/ui/streaming/StreamingMessageCode';
 import isEmpty from 'lodash/isEmpty';
+import { Text } from '@/components/ui/typography';
+import { CircleSpinnerLoader } from '@/components/ui/loaders';
+import { CheckDouble, AlertWarning } from '@/components/ui/icons';
+import { AnimatePresence, motion } from 'framer-motion';
 
 export type ReasoningMessageFileProps = {
   chatId: string;
@@ -29,8 +33,9 @@ export const ReasoningMessage_File: React.FC<ReasoningMessageFileProps> = React.
     if (isEmpty(file)) return null;
 
     const { status, file_type, version_id } = file;
-    const isLoading = status === 'loading';
-    const buttons = isLoading ? undefined : (
+    const buttons = !isCompletedStream ? (
+      <StreamingMessageStatus status={status} />
+    ) : (
       <ReasoningFileButtons fileType={file_type} fileId={version_id} type="file" />
     );
 
@@ -41,3 +46,42 @@ export const ReasoningMessage_File: React.FC<ReasoningMessageFileProps> = React.
 );
 
 ReasoningMessage_File.displayName = 'ReasoningMessage_File';
+
+const StreamingMessageStatus = React.memo(
+  ({ status }: { status: BusterChatMessageReasoning_file['status'] }) => {
+    const content = useMemo(() => {
+      if (status === 'loading')
+        return (
+          <Text variant={'secondary'} className="flex gap-1.5">
+            Running SQL... <CircleSpinnerLoader size={9} fill={'var(--color-text-secondary)'} />
+          </Text>
+        );
+      if (status === 'completed')
+        return (
+          <Text variant={'secondary'} className="flex gap-1.5">
+            Completed <CheckDouble />
+          </Text>
+        );
+      if (status === 'failed')
+        return (
+          <Text variant={'danger'} className="flex gap-1.5">
+            Failed <AlertWarning />
+          </Text>
+        );
+    }, [status]);
+
+    return (
+      <AnimatePresence mode="wait">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          key={status}>
+          {content}
+        </motion.div>
+      </AnimatePresence>
+    );
+  }
+);
+
+StreamingMessageStatus.displayName = 'StreamingMessageStatus';