From caf51eae15e6538af69785a37a1470bf0a028f46 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Thu, 3 Apr 2025 22:15:22 -0600 Subject: [PATCH] use file card in more places --- .../DiffSQLContainer.tsx | 6 +-- .../StreamingMessage_File.stories.tsx | 2 +- .../ui/streaming/StreamingMessage_File.tsx | 39 +++++-------------- .../ReasoningFileButtons.tsx | 2 - web/src/styles/tailwind.css | 16 ++++---- 5 files changed, 21 insertions(+), 44 deletions(-) diff --git a/web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx b/web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx index 5e817acba..b85dcad79 100644 --- a/web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx +++ b/web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx @@ -13,6 +13,7 @@ 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'; +import { TextAndVersionPill } from '@/components/ui/typography/TextAndVersionPill'; export const DiffSQLContainer: React.FC<{ className?: string; @@ -64,10 +65,7 @@ export const DiffSQLContainer: React.FC<{ )} fileName={useMemo( () => ( -
- {fileName} - {versionNumber && } -
+ ), [fileName, versionNumber] )}> diff --git a/web/src/components/ui/streaming/StreamingMessage_File.stories.tsx b/web/src/components/ui/streaming/StreamingMessage_File.stories.tsx index e1aac5f0b..d6f7910d0 100644 --- a/web/src/components/ui/streaming/StreamingMessage_File.stories.tsx +++ b/web/src/components/ui/streaming/StreamingMessage_File.stories.tsx @@ -38,7 +38,7 @@ const mockResponseMessage: BusterChatResponseMessage_file = { }, { status: 'loading', - message: 'Analyzing file contents', + message: 'Analyzing file contents with a really long message that should truncate in the ui', timestamp: 1.2 } ] diff --git a/web/src/components/ui/streaming/StreamingMessage_File.tsx b/web/src/components/ui/streaming/StreamingMessage_File.tsx index efe5efa8c..2b1d8c0b0 100644 --- a/web/src/components/ui/streaming/StreamingMessage_File.tsx +++ b/web/src/components/ui/streaming/StreamingMessage_File.tsx @@ -7,8 +7,8 @@ import { Text } from '@/components/ui/typography'; import { motion, AnimatePresence } from 'framer-motion'; import { itemAnimationConfig } from './animationConfig'; import { StatusIndicator } from '@/components/ui/indicators'; -import { VersionPill } from '@/components/ui/tags/VersionPill'; -import { cn } from '@/lib/classMerge'; +import { FileCard } from '../card/FileCard'; +import { TextAndVersionPill } from '../typography/TextAndVersionPill'; export const StreamingMessage_File: React.FC<{ isSelectedFile: boolean; @@ -24,15 +24,11 @@ export const StreamingMessage_File: React.FC<{ return ( - - - + + }> + + ); @@ -40,19 +36,6 @@ export const StreamingMessage_File: React.FC<{ StreamingMessage_File.displayName = 'StreamingMessage_File'; -const StreamHeader: React.FC<{ file_name: string; version_number: number }> = React.memo( - ({ file_name, version_number }) => { - return ( -
- {file_name} - -
- ); - } -); - -StreamHeader.displayName = 'ChatResponseMessageHeader'; - const StreamingMessageBody: React.FC<{ metadata: BusterChatResponseMessage_fileMetadata[]; }> = React.memo(({ metadata }) => { @@ -79,15 +62,13 @@ const MetadataItem: React.FC<{ metadata: BusterChatResponseMessage_fileMetadata return (
-
- -
+ - + {message} diff --git a/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningFileButtons.tsx b/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningFileButtons.tsx index 317d117f7..5c5633ce9 100644 --- a/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningFileButtons.tsx +++ b/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningFileButtons.tsx @@ -3,8 +3,6 @@ import { AppTooltip } from '@/components/ui/tooltip'; import { ArrowUpRight } from '@/components/ui/icons'; import { Button } from '@/components/ui/buttons'; import React, { useMemo } from 'react'; -import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext'; -import { useMemoizedFn } from '@/hooks'; import Link from 'next/link'; import { createChatAssetRoute } from '@/layouts/ChatLayout/ChatLayoutContext/helpers'; diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css index f7c7b357a..c7f6c2290 100644 --- a/web/src/styles/tailwind.css +++ b/web/src/styles/tailwind.css @@ -21,25 +21,25 @@ --text-3xs: 6px; --text-3xs--line-height: 1; --text-2xs: 8px; - --text-2xs--line-height: 1; + --text-2xs--line-height: 1.3; --text-xs: 11px; - --text-xs--line-height: 1; + --text-xs--line-height: 1.3; --text-sm: 12px; --text-sm--line-height: 1.3; --text-base: 13px; --text-base--line-height: 1.3; --text-md: 14px; - --text-md--line-height: 1; + --text-md--line-height: 1.3; --text-lg: 16px; - --text-lg--line-height: 1; + --text-lg--line-height: 1.3; --text-xl: 18px; - --text-xl--line-height: 1; + --text-xl--line-height: 1.3; --text-2xl: 20px; - --text-2xl--line-height: 1; + --text-2xl--line-height: 1.3; --text-3xl: 24px; - --text-3xl--line-height: 1; + --text-3xl--line-height: 1.3; --text-4xl: 30px; - --text-4xl--line-height: 1; + --text-4xl--line-height: 1.3; --text-size-inherit: inherit; --text-icon-size: 16px;