update how I consume file cards

web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx

@@ -4,7 +4,7 @@ import { Command, ReturnKey } from '@/components/ui/icons';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { useMemoizedFn } from '@/hooks';
 import { Button } from '@/components/ui/buttons/Button';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { AppVerticalCodeSplitterProps } from './AppVerticalCodeSplitter';
 import { cn } from '@/lib/classMerge';
 import { ErrorClosableContainer } from '@/components/ui/error/ErrorClosableContainer';
@@ -12,6 +12,7 @@ import { AppDiffCodeEditor } from '@/components/ui/inputs';
 import { Copy2 } from '@/components/ui/icons';
 import { Text } from '@/components/ui/typography';
 import { VersionPill } from '@/components/ui/tags/VersionPill';
+import { FileCard } from '@/components/ui/card/FileCard';
 
 export const DiffSQLContainer: React.FC<{
   className?: string;
@@ -54,19 +55,22 @@ export const DiffSQLContainer: React.FC<{
     });
 
     return (
-      <div
-        className={cn(
-          'flex h-full w-full flex-col overflow-hidden',
-          'bg-background rounded border',
-          className
+      <FileCard
+        headerButtons={useMemo(
+          () => (
+            <Button prefix={<Copy2 />} variant="ghost" onClick={onCopySQL} />
+          ),
+          [onCopySQL]
+        )}
+        fileName={useMemo(
+          () => (
+            <div className="flex items-center gap-x-1.5">
+              <Text>{fileName}</Text>
+              {versionNumber && <VersionPill version_number={versionNumber} />}
+            </div>
+          ),
+          [fileName, versionNumber]
         )}>
-        <div className="bg-item-select flex h-8 w-full items-center justify-between border-b px-2.5">
-          <div className="flex items-center gap-x-1.5">
-            <Text>{fileName}</Text>
-            {versionNumber && <VersionPill version_number={versionNumber} />}
-          </div>
-          <Button prefix={<Copy2 />} variant="ghost" onClick={onCopySQL} />
-        </div>
         <AppDiffCodeEditor
           className="overflow-hidden"
           modified={value || ''}
@@ -75,38 +79,7 @@ export const DiffSQLContainer: React.FC<{
           onChange={setValue}
           readOnly={true}
         />
-        <div className="relative hidden items-center justify-between border-t px-4 py-2.5">
-          <Button onClick={onCopySQL}>Copy SQL</Button>
-
-          <div className="flex items-center gap-2">
-            {onSaveSQL && (
-              <Button
-                disabled={disabledSave || !value || isRunning}
-                variant="black"
-                onClick={onSaveSQL}>
-                Save
-              </Button>
-            )}
-
-            <Button
-              variant="default"
-              loading={isRunning}
-              disabled={!value}
-              className="flex items-center space-x-0"
-              onClick={onRunQueryPreflight}
-              suffix={
-                <div className="flex items-center gap-x-1 text-sm">
-                  <Command />
-                  <ReturnKey />
-                </div>
-              }>
-              Run
-            </Button>
-          </div>
-
-          {error && <ErrorClosableContainer error={error} />}
-        </div>
-      </div>
+      </FileCard>
     );
   }
 );

web/src/components/ui/card/FileCard.tsx

@@ -23,21 +23,27 @@ export const FileCard = React.memo(
     footer,
     footerClassName
   }: FileCardProps) => {
+    const showHeader = !!fileName || !!headerButtons;
+
     return (
       <Card className={cn('h-full', className)}>
-        <CardHeader variant={'gray'} size={'xsmall'} className="justify-center">
-          <div className="flex items-center justify-between gap-x-1">
-            <Text truncate>{fileName}</Text>
-            <div className="flex items-center gap-1">{headerButtons}</div>
-          </div>
-        </CardHeader>
+        {showHeader && (
+          <CardHeader variant={'gray'} size={'xsmall'} className="justify-center">
+            <div className="flex items-center justify-between gap-x-1">
+              {typeof fileName === 'string' ? <Text truncate>{fileName}</Text> : fileName}
+              <div className="flex items-center gap-1">{headerButtons}</div>
+            </div>
+          </CardHeader>
+        )}
 
         <CardContent
           className={cn('bg-background relative h-full overflow-hidden p-0', bodyClassName)}>
           {children}
         </CardContent>
 
-        <CardFooter className={cn('bg-background', footerClassName)}>{footer}</CardFooter>
+        {footer && (
+          <CardFooter className={cn('bg-background', footerClassName)}>{footer}</CardFooter>
+        )}
       </Card>
     );
   }

web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx

@@ -10,8 +10,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { Text } from '@/components/ui/typography';
 import pluralize from 'pluralize';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { StreamingMessageCodeTitle } from './StreamingMessageCodeTitle';
-import { TextDotLoader } from '../../loaders/PulseLoader';
+import { TextAndVersionPill } from '../../typography/TextAndVersionPill';
 
 const style = SyntaxHighlighterLightTheme;
 
@@ -120,7 +119,7 @@ export const StreamingMessageCode: React.FC<
 
   return (
     <AppCodeBlockWrapper
-      title={<StreamingMessageCodeTitle file_name={file_name} version_number={version_number} />}
+      title={<TextAndVersionPill fileName={file_name} versionNumber={version_number} />}
       language={'yaml'}
       showCopyButton={false}
       buttons={buttons}>

web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCodeTitle.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Text } from '@/components/ui/typography';
-import { VersionPill } from '@/components/ui/tags/VersionPill';
-
-export const StreamingMessageCodeTitle = React.memo(
-  ({ file_name, version_number }: { file_name: string; version_number: number }) => {
-    return (
-      <div className="flex items-center gap-1.5">
-        <Text>{file_name}</Text>
-        {version_number && <VersionPill version_number={version_number} />}
-      </div>
-    );
-  }
-);
-
-StreamingMessageCodeTitle.displayName = 'StreamingMessageCodeTitle';

web/src/components/ui/typography/TextAndVersionPill.tsx

@@ -0,0 +1,16 @@
+import { VersionPill } from '../tags/VersionPill';
+import React from 'react';
+import { Text } from './Text';
+
+export const TextAndVersionPill = React.memo(
+  ({ fileName, versionNumber }: { fileName: string; versionNumber: number }) => {
+    return (
+      <div className="flex items-center gap-1.5">
+        <Text>{fileName}</Text>
+        {versionNumber !== undefined && <VersionPill version_number={versionNumber} />}
+      </div>
+    );
+  }
+);
+
+TextAndVersionPill.displayName = 'TextAndVersionPill';

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_File/ChatResponseMessage_File.tsx

@@ -15,6 +15,7 @@ import { useChatLayoutContextSelector } from '@/layouts/ChatLayout';
 import Link from 'next/link';
 import { createBusterRoute, BusterRoutes } from '@/routes';
 import { useRouter } from 'next/navigation';
+import { TextAndVersionPill } from '@/components/ui/typography/TextAndVersionPill';
 
 export const ChatResponseMessage_File: React.FC<ChatResponseMessageProps> = React.memo(
   ({ isCompletedStream, chatId, responseMessageId, messageId }) => {
@@ -78,9 +79,8 @@ ChatResponseMessage_File.displayName = 'ChatResponseMessage_File';
 const ChatResponseMessageHeader: React.FC<{ file_name: string; version_number: number }> =
   React.memo(({ file_name, version_number }) => {
     return (
-      <div className="file-header bg-item-hover border-border flex h-8 w-full items-center space-x-1.5 overflow-hidden border-b px-2.5">
-        <Text truncate>{file_name}</Text>
-        <VersionPill version_number={version_number} />
+      <div className="file-header bg-item-hover border-border flex h-8 w-full overflow-hidden border-b px-2.5">
+        <TextAndVersionPill fileName={file_name} versionNumber={version_number} />
       </div>
     );
   });