From 85eb0557f464f6a315b85f2e103883e136d73ceb Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Thu, 17 Apr 2025 00:57:19 -0600 Subject: [PATCH] ghost scroll is back --- .../buster_rest/dashboards/queryRequests.ts | 2 -- .../NewDatasetGroupModal.tsx | 2 +- .../NewPermissionGroupModal.tsx | 3 +- .../ui/layouts/AppPageLayout.stories.tsx | 31 +++++++++++++++++++ .../ui/layouts/AppSplitter/AppSplitter.tsx | 4 +-- .../components/ui/scroll-area/ScrollArea.tsx | 2 +- .../AppMarkdown/AppMarkdown.stories.tsx | 7 +++++ .../ChatContainer/ChatContainer.tsx | 7 ++--- .../ChatContainer/ChatContent/ChatContent.tsx | 5 +-- .../ChatLayout/ChatLayout/ChatLayout.tsx | 2 +- 10 files changed, 50 insertions(+), 15 deletions(-) diff --git a/web/src/api/buster_rest/dashboards/queryRequests.ts b/web/src/api/buster_rest/dashboards/queryRequests.ts index 8ca5392ee..ddb6a78b4 100644 --- a/web/src/api/buster_rest/dashboards/queryRequests.ts +++ b/web/src/api/buster_rest/dashboards/queryRequests.ts @@ -257,8 +257,6 @@ export const useAddDashboardToCollection = () => { const mutationFn = useMemoizedFn( async (variables: { dashboardIds: string[]; collectionIds: string[] }) => { const { dashboardIds, collectionIds } = variables; - console.log('dashboardIds', dashboardIds); - console.log('collectionIds', collectionIds); return await Promise.all( collectionIds.map((collectionId) => addAssetToCollection({ diff --git a/web/src/components/features/PermissionComponents/NewDatasetGroupModal.tsx b/web/src/components/features/PermissionComponents/NewDatasetGroupModal.tsx index 3294e966d..d4774963e 100644 --- a/web/src/components/features/PermissionComponents/NewDatasetGroupModal.tsx +++ b/web/src/components/features/PermissionComponents/NewDatasetGroupModal.tsx @@ -64,8 +64,8 @@ export const NewDatasetGroupModal: React.FC = React.m return (
+ -
); diff --git a/web/src/components/features/PermissionComponents/NewPermissionGroupModal.tsx b/web/src/components/features/PermissionComponents/NewPermissionGroupModal.tsx index aab8eb42d..31e36be9d 100644 --- a/web/src/components/features/PermissionComponents/NewPermissionGroupModal.tsx +++ b/web/src/components/features/PermissionComponents/NewPermissionGroupModal.tsx @@ -59,12 +59,13 @@ export const NewPermissionGroupModal: React.FC = R return (
- +
); diff --git a/web/src/components/ui/layouts/AppPageLayout.stories.tsx b/web/src/components/ui/layouts/AppPageLayout.stories.tsx index 3f363dcbc..9bda9dc70 100644 --- a/web/src/components/ui/layouts/AppPageLayout.stories.tsx +++ b/web/src/components/ui/layouts/AppPageLayout.stories.tsx @@ -67,3 +67,34 @@ export const LongContent: Story = { ) } }; + +/* + } + headerBorderVariant="ghost" + scrollable + className="flex h-full w-full min-w-[295px] flex-col"> + + +*/ + +export const LongContentGhostHeader: Story = { + args: { + contentContainerId: 'chat-container-content', + header:
Header Content
, + scrollable: true, + // className: 'flex h-full w-full min-w-[295px] flex-col', + headerBorderVariant: 'ghost', + children: ( +
+ {Array.from({ length: 100 }, (_, i) => ( +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. +

+ ))} +
+ ) + } +}; diff --git a/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx b/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx index a8760df29..f6004d1fc 100644 --- a/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx +++ b/web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx @@ -272,14 +272,14 @@ export const AppSplitter = React.memo( className="left-pane flex h-full flex-col" minSize={leftPanelMinSize} maxSize={leftPanelMaxSize}> - {leftHidden || size?.width === 0 ? null : leftChildren} + {leftHidden || size?.width === 0 || size?.width === undefined ? null : leftChildren} - {rightHidden || size?.width === 0 ? null : rightChildren} + {rightHidden || size?.width === 0 || size?.width === undefined ? null : rightChildren} diff --git a/web/src/components/ui/scroll-area/ScrollArea.tsx b/web/src/components/ui/scroll-area/ScrollArea.tsx index 79d0f2054..12e14ce63 100644 --- a/web/src/components/ui/scroll-area/ScrollArea.tsx +++ b/web/src/components/ui/scroll-area/ScrollArea.tsx @@ -18,7 +18,7 @@ const ScrollArea = React.forwardRef< {...props}> {children} diff --git a/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx b/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx index 5dd7fd8e8..5798fdc4c 100644 --- a/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx +++ b/web/src/components/ui/typography/AppMarkdown/AppMarkdown.stories.tsx @@ -323,3 +323,10 @@ The goal is to build a comprehensive dashboard on product sales YTD. The dashboa This plan should provide a clear and comprehensive dashboard covering overall sales trends, key players in both sales and buying, and categorical breakdown for the top and bottom 10 products.` } }; + +export const WithHiddenNewlines: Story = { + args: { + markdown: 'This is line one.\nThis is line two.\nThis is line three.', + className: 'whitespace-pre-wrap' + } +}; diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx index 4fea26eac..34a6102a9 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx @@ -3,16 +3,13 @@ import { ChatHeader } from './ChatHeader'; import { ChatContent } from './ChatContent'; import { AppPageLayout } from '@/components/ui/layouts'; -export const CHAT_CONTENT_CONTAINER_ID = 'chat-container-content'; - -export const ChatContainer = React.memo(() => { +export const ChatContainer = React.memo(({ mounted }: { mounted?: boolean }) => { return ( } headerBorderVariant="ghost" scrollable - className="flex h-full w-full min-w-[295px] flex-col"> + className="chat-container-content flex h-full w-full min-w-[295px] flex-col"> ); diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx index 07862d2ae..edc069049 100644 --- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx +++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx @@ -5,7 +5,6 @@ import { useChatIndividualContextSelector } from '../../ChatContext'; import { ChatMessageBlock } from './ChatMessageBlock'; import { ChatInput } from './ChatInput'; import { useAutoScroll } from '@/hooks/useAutoScroll'; -import { CHAT_CONTENT_CONTAINER_ID } from '../ChatContainer'; import { ChatScrollToBottom } from './ChatScrollToBottom'; const autoClass = 'mx-auto max-w-[600px] w-full'; @@ -21,7 +20,9 @@ export const ChatContent: React.FC<{}> = React.memo(() => { }); useEffect(() => { - const container = document.getElementById(CHAT_CONTENT_CONTAINER_ID); + const container = document.querySelector( + '.chat-container-content .scroll-area-viewport' + ) as HTMLElement; if (!container) return; containerRef.current = container; enableAutoScroll(); diff --git a/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx b/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx index 768831d5d..7d5323755 100644 --- a/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx +++ b/web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx @@ -35,7 +35,7 @@ export const ChatLayout: React.FC = ({ children }) => { mounted && , [mounted])} + leftChildren={useMemo(() => mounted && , [mounted])} rightChildren={useMemo( () => mounted && {children}, [children, mounted]