ghost scroll is back

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({

web/src/components/features/PermissionComponents/NewDatasetGroupModal.tsx

@@ -64,8 +64,8 @@ export const NewDatasetGroupModal: React.FC<NewDatasetGroupModalProps> = React.m
     return (
       <AppModal open={isOpen} onClose={onClose} header={header} footer={footer}>
         <div className="flex flex-col gap-2.5">
+          <Input ref={inputRef} autoFocus placeholder="Name of dataset group" />
           <SelectedDatasetInput onSetDatasetId={onSetDatasetId} />
-          <Input ref={inputRef} placeholder="Name of dataset group" />
         </div>
       </AppModal>
     );

web/src/components/features/PermissionComponents/NewPermissionGroupModal.tsx

@@ -59,12 +59,13 @@ export const NewPermissionGroupModal: React.FC<NewPermissionGroupModalProps> = R
     return (
       <AppModal open={isOpen} onClose={onClose} header={header} footer={footer}>
         <div className="flex flex-col gap-2.5">
-          <SelectedDatasetInput onSetDatasetId={setDatasetsIdsToAssign} />
           <Input
             ref={inputRef}
+            autoFocus
             placeholder="Name of permission group"
             onPressEnter={onCreateNewPermissionGroup}
           />
+          <SelectedDatasetInput onSetDatasetId={setDatasetsIdsToAssign} />
         </div>
       </AppModal>
     );

web/src/components/ui/layouts/AppPageLayout.stories.tsx

@@ -67,3 +67,34 @@ export const LongContent: Story = {
     )
   }
 };
+
+/*
+    <AppPageLayout
+      contentContainerId={CHAT_CONTENT_CONTAINER_ID}
+      header={<ChatHeader />}
+      headerBorderVariant="ghost"
+      scrollable
+      className="flex h-full w-full min-w-[295px] flex-col">
+      <ChatContent />
+    </AppPageLayout>
+*/
+
+export const LongContentGhostHeader: Story = {
+  args: {
+    contentContainerId: 'chat-container-content',
+    header: <div className="">Header Content</div>,
+    scrollable: true,
+    //  className: 'flex h-full w-full min-w-[295px] flex-col',
+    headerBorderVariant: 'ghost',
+    children: (
+      <div className="">
+        {Array.from({ length: 100 }, (_, i) => (
+          <p key={i} className="mb-4">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua.
+          </p>
+        ))}
+      </div>
+    )
+  }
+};

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}
             </Pane>
             <Pane
               className="right-pane flex h-full flex-col"
               style={memoizedRightPaneStyle}
               minSize={rightPanelMinSize}
               maxSize={rightPanelMaxSize}>
-              {rightHidden || size?.width === 0 ? null : rightChildren}
+              {rightHidden || size?.width === 0 || size?.width === undefined ? null : rightChildren}
             </Pane>
           </SplitPane>
         </div>

web/src/components/ui/scroll-area/ScrollArea.tsx

@@ -18,7 +18,7 @@ const ScrollArea = React.forwardRef<
     {...props}>
     <ScrollAreaPrimitive.Viewport
       ref={viewportRef}
-      className="h-full w-full rounded-[inherit] [&>div]:!block"
+      className="scroll-area-viewport h-full w-full rounded-[inherit] [&>div]:!block"
       id={id}>
       {children}
     </ScrollAreaPrimitive.Viewport>

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'
+  }
+};

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 (
     <AppPageLayout
-      contentContainerId={CHAT_CONTENT_CONTAINER_ID}
       header={<ChatHeader />}
       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">
       <ChatContent />
     </AppPageLayout>
   );

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();

web/src/layouts/ChatLayout/ChatLayout/ChatLayout.tsx

@@ -35,7 +35,7 @@ export const ChatLayout: React.FC<ChatSplitterProps> = ({ children }) => {
       <ChatContextProvider>
         <AppSplitter
           ref={appSplitterRef}
-          leftChildren={useMemo(() => mounted && <ChatContainer />, [mounted])}
+          leftChildren={useMemo(() => mounted && <ChatContainer mounted={mounted} />, [mounted])}
           rightChildren={useMemo(
             () => mounted && <FileContainer>{children}</FileContainer>,
             [children, mounted]