fix the dashboard header buttons

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx

@@ -1,10 +1,11 @@
+'use client';
+
 import React from 'react';
 import { FileContainerButtonsProps } from '../interfaces';
 import { FileButtonContainer } from '../FileButtonContainer';
 import { useChatIndividualContextSelector } from '../../../ChatContext';
 import { SaveDashboardToCollectionButton } from '@/components/features/buttons/SaveDashboardToCollectionButton';
 import { HideButtonContainer } from '../HideButtonContainer';
-import { useChatLayoutContextSelector } from '../../../ChatLayoutContext';
 import { CreateChatButton } from '../CreateChatButtont';
 import { ShareDashboardButton } from '@/components/features/buttons/ShareDashboardButton';
 import { Button } from '@/components/ui/buttons';
@@ -16,9 +17,8 @@ import { canEdit, getIsEffectiveOwner } from '@/lib/share';
 import { useDashboardContentStore } from '@/context/Dashboards';
 
 export const DashboardContainerHeaderButtons: React.FC<FileContainerButtonsProps> = React.memo(
-  ({ selectedFileView }) => {
+  ({ selectedFileId }) => {
-    const selectedFileId = useChatIndividualContextSelector((x) => x.selectedFileId)!;
+    const dashboardId = selectedFileId || '';
-    const dashboardId = selectedFileId;
 
     const { data: permission, error: dashboardError } = useGetDashboard(
       { id: dashboardId },
@@ -33,10 +33,10 @@ export const DashboardContainerHeaderButtons: React.FC<FileContainerButtonsProps
     return (
       <FileButtonContainer>
         <SaveToCollectionButton />
-        {isEffectiveOwner && <ShareDashboardButton dashboardId={selectedFileId} />}
+        {isEffectiveOwner && <ShareDashboardButton dashboardId={dashboardId} />}
         {isEditor && <AddContentToDashboardButton />}
-        <DashboardThreeDotMenu dashboardId={selectedFileId} />
+        <DashboardThreeDotMenu dashboardId={dashboardId} />
-        <HideButtonContainer show={selectedFileView === 'file'}>
+        <HideButtonContainer show>
           <CreateChatButton />
         </HideButtonContainer>
       </FileButtonContainer>

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderSegment.tsx

@@ -1,24 +1,64 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { FileContainerSegmentProps } from './interfaces';
 import type { FileView } from '../../ChatLayoutContext/useLayoutConfig';
 import { AppSegmented } from '@/components/ui/segmented';
 import { useChatLayoutContextSelector } from '../../ChatLayoutContext';
 import { useMemoizedFn } from '@/hooks';
 import { type SegmentedItem } from '@/components/ui/segmented';
-
+import { BusterRoutes, createBusterRoute } from '@/routes';
-const segmentOptions: SegmentedItem<FileView>[] = [
-  { label: 'Dashboard', value: 'dashboard' },
-  { label: 'File', value: 'file' }
-];
 
 export const DashboardContainerHeaderSegment: React.FC<FileContainerSegmentProps> = React.memo(
-  ({ selectedFileView }) => {
+  ({ selectedFileView, chatId, selectedFileId }) => {
     const onSetFileView = useChatLayoutContextSelector((x) => x.onSetFileView);
 
     const onChange = useMemoizedFn((fileView: SegmentedItem<FileView>) => {
       onSetFileView({ fileView: fileView.value });
     });
 
+    const segmentOptions: SegmentedItem<FileView>[] = useMemo(() => {
+      if (chatId) {
+        return [
+          {
+            label: 'Dashboard',
+            value: 'dashboard',
+            link: createBusterRoute({
+              route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID,
+              dashboardId: selectedFileId || '',
+              chatId
+            })
+          },
+          {
+            label: 'File',
+            value: 'file',
+            link: createBusterRoute({
+              route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID,
+              dashboardId: selectedFileId || '',
+              chatId
+            })
+          }
+        ];
+      }
+
+      return [
+        {
+          label: 'Dashboard',
+          value: 'dashboard',
+          link: createBusterRoute({
+            route: BusterRoutes.APP_DASHBOARD_ID,
+            dashboardId: selectedFileId || ''
+          })
+        },
+        {
+          label: 'File',
+          value: 'file',
+          link: createBusterRoute({
+            route: BusterRoutes.APP_DASHBOARD_ID_FILE,
+            dashboardId: selectedFileId || ''
+          })
+        }
+      ];
+    }, [chatId, selectedFileId]);
+
     return (
       <AppSegmented
         type="button"

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeader.tsx

@@ -62,7 +62,9 @@ export const FileContainerHeader: React.FC = React.memo(() => {
         )}
       </div>
 
-      {hasAccess && <SelectedFileButtons selectedFileView={selectedFileView} />}
+      {hasAccess && (
+        <SelectedFileButtons selectedFileView={selectedFileView} selectedFileId={selectedFileId} />
+      )}
     </>
   );
 });

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/interfaces.ts

@@ -8,4 +8,5 @@ export type FileContainerSegmentProps = {
 
 export type FileContainerButtonsProps = {
   selectedFileView: FileView | undefined;
+  selectedFileId: string | undefined;
 };