manually parse the pathname... what a bummer

web/src/layouts/ChatLayout/hooks/useDefaultFile.test.ts

@@ -0,0 +1,74 @@
+import { parsePathnameSegments } from './useDefaultFile';
+
+describe('parsePathnameSegments', () => {
+  it('should parse chat with reasoning pathname correctly', () => {
+    const pathname =
+      '/app/chats/c2adc995-82b9-45a6-8dff-1cf897665fb0/reasoning/6cd53c00-0b5e-44fc-9a22-c50c00860610';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({
+      chatId: 'c2adc995-82b9-45a6-8dff-1cf897665fb0',
+      messageId: '6cd53c00-0b5e-44fc-9a22-c50c00860610'
+    });
+  });
+
+  it('should parse chat with metric pathname correctly', () => {
+    const pathname = '/app/chats/c2adc995-82b9-45a6-8dff-1cf897665fb0/metric/1234567890';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({
+      chatId: 'c2adc995-82b9-45a6-8dff-1cf897665fb0',
+      metricId: '1234567890'
+    });
+  });
+
+  it('should parse dashboard pathname correctly', () => {
+    const pathname = '/app/dashboards/c2adc995-82b9-45a6-8dff-1cf897665fb0';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({
+      dashboardId: 'c2adc995-82b9-45a6-8dff-1cf897665fb0'
+    });
+  });
+
+  it('should parse dataset pathname correctly', () => {
+    const pathname = '/app/datasets/c2adc995-82b9-45a6-8dff-1cf897665fb0';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({
+      datasetId: 'c2adc995-82b9-45a6-8dff-1cf897665fb0'
+    });
+  });
+
+  it('should handle empty pathname', () => {
+    const pathname = '';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({});
+  });
+
+  it('should handle root pathname', () => {
+    const pathname = '/';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({});
+  });
+
+  it('should handle pathname with trailing slash', () => {
+    const pathname = '/app/chats/c2adc995-82b9-45a6-8dff-1cf897665fb0/';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({
+      chatId: 'c2adc995-82b9-45a6-8dff-1cf897665fb0'
+    });
+  });
+
+  it('should parse collection pathname correctly', () => {
+    const pathname = '/app/collection/c2adc995-82b9-45a6-8dff-1cf897665fb0';
+    const result = parsePathnameSegments(pathname);
+
+    expect(result).toEqual({
+      collectionId: 'c2adc995-82b9-45a6-8dff-1cf897665fb0'
+    });
+  });
+});

web/src/layouts/ChatLayout/hooks/useDefaultFile.ts

@@ -2,41 +2,73 @@
 
 import { useMemo } from 'react';
 import type { ChatLayoutView, SelectedFile } from '../interfaces';
-import { useParams, usePathname, useSelectedLayoutSegments, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
-export const useSelectedFileByParams = () => {
+interface ParsedParams {
-  const { metricId, collectionId, datasetId, dashboardId, chatId, messageId } = useParams() as {
   metricId?: string;
   collectionId?: string;
   datasetId?: string;
   dashboardId?: string;
   chatId?: string;
   messageId?: string;
-  };
+}
 
-  const segments = useSelectedLayoutSegments();
+export const parsePathnameSegments = (pathname: string): ParsedParams => {
+  const params: ParsedParams = {};
+
+  // Remove leading slash and split into segments
+  //example: /app/chats/c2adc995-82b9-45a6-8dff-1cf897665fb0/reasoning/6cd53c00-0b5e-44fc-9a22-c50c00860610
+  //example: /app/chats/c2adc995-82b9-45a6-8dff-1cf897665fb0/metric/1234567890
+  //example: /app/dashboards/c2adc995-82b9-45a6-8dff-1cf897665fb0
+  //example: /app/datasets/c2adc995-82b9-45a6-8dff-1cf897665fb0
+
+  const segments = pathname.split('/').filter(Boolean);
+
+  segments.forEach((segment, index) => {
+    // Check for chats segment
+    if (segment === 'chats' && segments[index + 1]) {
+      params.chatId = segments[index + 1];
+    }
+
+    // Check for dashboards segment
+    if (segment === 'dashboards' && segments[index + 1]) {
+      params.dashboardId = segments[index + 1];
+    }
+
+    // Check for datasets segment
+    if (segment === 'datasets' && segments[index + 1]) {
+      params.datasetId = segments[index + 1];
+    }
+
+    // Check for reasoning segment with messageId
+    if (segment === 'reasoning' && segments[index + 1]) {
+      params.messageId = segments[index + 1];
+    }
+
+    // Check for metric segment
+    if (segment === 'metric' && segments[index + 1]) {
+      params.metricId = segments[index + 1];
+    }
+
+    if (segment === 'collection' && segments[index + 1]) {
+      params.collectionId = segments[index + 1];
+    }
+  });
+
+  return params;
+};
+
+export const useSelectedFileByParams = () => {
   const pathname = usePathname();
 
-  const isReasoningSegments = useMemo(() => {
+  const params = useMemo(() => parsePathnameSegments(pathname), [pathname]);
-    return segments.some((segment) => segment === 'reasoning');
+  const { metricId, collectionId, datasetId, dashboardId, chatId, messageId } = params;
-  }, [segments]);
 
   const selectedFile: SelectedFile | undefined = useMemo(() => {
     if (metricId) return { id: metricId, type: 'metric' };
     if (dashboardId) return { id: dashboardId, type: 'dashboard' };
-    if (messageId && isReasoningSegments) return { id: messageId, type: 'reasoning' };
+    if (messageId) return { id: messageId, type: 'reasoning' };
-    // if (collectionId) return { id: collectionId, type: 'collection' };
+  }, [metricId, dashboardId, messageId, pathname]);
-    // if (datasetId) return { id: datasetId, type: 'dataset' };
-  }, [
-    metricId,
-    collectionId,
-    datasetId,
-    dashboardId,
-    chatId,
-    messageId,
-    isReasoningSegments,
-    pathname
-  ]);
 
   const selectedLayout: ChatLayoutView = useMemo(() => {
     const hasFileId = metricId || collectionId || datasetId || dashboardId || messageId;