mirror of https://github.com/buster-so/buster.git
reasoning selector updates
This commit is contained in:
Nate Kelley
parent
d99f61c289
commit
00179f59bf
|
|
@ -39,11 +39,11 @@
|
|||
"@radix-ui/react-tooltip": "^1.2.0",
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"@supabase/supabase-js": "^2.49.4",
|
||||
"@tanstack/query-sync-storage-persister": "^5.72.1",
|
||||
"@tanstack/react-form": "^1.3.0",
|
||||
"@tanstack/react-query": "^5.72.1",
|
||||
"@tanstack/react-query-devtools": "^5.72.1",
|
||||
"@tanstack/react-query-persist-client": "^5.72.1",
|
||||
"@tanstack/query-sync-storage-persister": "^5.73.1",
|
||||
"@tanstack/react-form": "^1.3.1",
|
||||
"@tanstack/react-query": "^5.72.2",
|
||||
"@tanstack/react-query-devtools": "^5.72.2",
|
||||
"@tanstack/react-query-persist-client": "^5.73.1",
|
||||
"@tanstack/react-table": "^8.21.2",
|
||||
"@tanstack/react-virtual": "^3.13.6",
|
||||
"@types/jest": "^29.5.14",
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
"next-themes": "^0.4.6",
|
||||
"papaparse": "^5.5.2",
|
||||
"pluralize": "^8.0.0",
|
||||
"posthog-js": "^1.235.0",
|
||||
"posthog-js": "^1.235.4",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"react": "^18",
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "^3.2.6",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@next/bundle-analyzer": "^15.2.5",
|
||||
"@next/bundle-analyzer": "^15.3.0",
|
||||
"@storybook/addon-controls": "^8.6.12",
|
||||
"@storybook/addon-essentials": "^8.6.12",
|
||||
"@storybook/addon-interactions": "^8.6.12",
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
"@types/react-syntax-highlighter": "^15.5.13",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.2.4",
|
||||
"eslint-config-prettier": "^10.1.1",
|
||||
"eslint-config-prettier": "^10.1.2",
|
||||
"eslint-plugin-storybook": "^0.12.0",
|
||||
"msw-storybook-addon": "^2.0.4",
|
||||
"sass": "^1.86.3",
|
||||
|
|
|
|||
|
|
@ -18,24 +18,20 @@ export const StatusIndicator: React.FC<{
|
|||
const failed = status === 'failed';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'text-gray-light relative flex h-3 w-3 items-center justify-center rounded-full transition-all duration-300',
|
||||
inProgress && 'text-primary',
|
||||
failed && 'text-danger-foreground'
|
||||
)}>
|
||||
{inProgress && (
|
||||
<div className="bg-primary/30 absolute m-0.5 h-2.5 w-2.5 animate-ping rounded-full duration-1000" />
|
||||
)}
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
{...animationConfig}
|
||||
key={status === 'failed' ? 'failed' : 'completed'}
|
||||
className={cn('flex items-center justify-center')}>
|
||||
{failed ? <CircleWarning /> : <RadioChecked />}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
className={cn(
|
||||
'text-gray-light relative flex items-center justify-center transition-all duration-300',
|
||||
inProgress && 'text-primary',
|
||||
failed && 'text-danger-foreground'
|
||||
)}>
|
||||
{inProgress && (
|
||||
<div className="bg-primary/30 absolute top-1/2 left-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 animate-ping rounded-full duration-1000" />
|
||||
)}
|
||||
|
||||
{failed ? <CircleWarning /> : <RadioChecked />}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -85,56 +85,29 @@ const TitleContainer: React.FC<{
|
|||
}> = React.memo(({ title, secondaryTitle, isCompletedStream }) => {
|
||||
return (
|
||||
<div className={cn('@container', 'flex w-full items-center space-x-1.5 overflow-hidden')}>
|
||||
<AnimatedThoughtTitle title={title} type="default" isCompletedStream={isCompletedStream} />
|
||||
<AnimatedThoughtTitle
|
||||
title={secondaryTitle}
|
||||
isCompletedStream={isCompletedStream}
|
||||
type="tertiary"
|
||||
className="secondary-text truncate"
|
||||
/>
|
||||
<AnimatePresence mode="wait" initial={!isCompletedStream}>
|
||||
<motion.div
|
||||
className="flex items-center space-x-1.5"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ delay: 0 }}
|
||||
key={title + secondaryTitle}>
|
||||
<Text size="sm" className={cn(`whitespace-nowrap`)} variant={'default'}>
|
||||
{title}
|
||||
</Text>
|
||||
{secondaryTitle && (
|
||||
<Text
|
||||
size="sm"
|
||||
className={cn(`hidden whitespace-nowrap @[170px]:flex!`)}
|
||||
variant={'tertiary'}>
|
||||
{secondaryTitle}
|
||||
</Text>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
TitleContainer.displayName = 'TitleContainer';
|
||||
|
||||
const AnimatedThoughtTitle = React.memo(
|
||||
({
|
||||
title,
|
||||
type,
|
||||
isCompletedStream,
|
||||
className = ''
|
||||
}: {
|
||||
title: string | undefined;
|
||||
type: 'tertiary' | 'default';
|
||||
className?: string;
|
||||
isCompletedStream: boolean;
|
||||
}) => {
|
||||
const isSecondaryTitle = type === 'tertiary';
|
||||
return (
|
||||
<AnimatePresence initial={!isCompletedStream && isSecondaryTitle} mode="wait">
|
||||
{title && (
|
||||
<motion.div
|
||||
className="flex"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ delay: isSecondaryTitle ? 0.5 : 0.125 }}
|
||||
key={title}>
|
||||
<Text
|
||||
size="sm"
|
||||
className={cn(
|
||||
`whitespace-nowrap`,
|
||||
isSecondaryTitle ? 'hidden @[170px]:flex!' : '',
|
||||
className
|
||||
)}
|
||||
variant={type}>
|
||||
{title}
|
||||
</Text>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
);
|
||||
AnimatedThoughtTitle.displayName = 'AnimatedThoughtTitle';
|
||||
|
|
|
|||
Loading…
Reference in New Issue