Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update how I consume file cards

This commit is contained in:
Nate Kelley 2025-04-03 22:07:07 -06:00
parent 43c24aff57
commit 5aa6fa7dd1
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
6 changed files with 52 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx
View File

@ -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>
);
}
);

20
web/src/components/ui/card/FileCard.tsx
View File

@ -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>
);
}

5
web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx
View File

@ -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}>

16
web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCodeTitle.tsx
View File

@ -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';

16
web/src/components/ui/typography/TextAndVersionPill.tsx Normal file
View File

@ -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';

6
web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_File/ChatResponseMessage_File.tsx
View File

@ -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>
);
});