select file update

web/src/controllers/MetricController/MetricViewFile/MetricViewFile.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useMemoizedFn } from '@/hooks';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { useGetMetric, useUpdateMetric } from '@/api/buster_rest/metrics';

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_File/ChatResponseMessage_File.tsx

@@ -6,15 +6,15 @@ import type {
 } from '@/api/asset_interfaces';
 import { Text } from '@/components/ui/typography';
 import { StatusIndicator } from '@/components/ui/indicators';
-import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
 import { StreamingMessage_File } from '@/components/ui/streaming/StreamingMessage_File';
 import { useGetChatMessage } from '@/api/buster_rest/chats';
 import { useMount } from '@/hooks';
 import { useChatLayoutContextSelector } from '@/layouts/ChatLayout';
 import Link from 'next/link';
-import { createBusterRoute, BusterRoutes } from '@/routes';
 import { useRouter } from 'next/navigation';
 import { TextAndVersionPill } from '@/components/ui/typography/TextAndVersionPill';
+import { useGetIsSelectedFile } from './useGetIsSelectedFile';
+import { useGetFileHref } from './useGetFileHref';
 
 export const ChatResponseMessage_File: React.FC<ChatResponseMessageProps> = React.memo(
   ({ isCompletedStream, chatId, responseMessageId, messageId }) => {
@@ -24,43 +24,12 @@ export const ChatResponseMessage_File: React.FC<ChatResponseMessageProps> = Reac
       (x) => x?.response_messages?.[responseMessageId]
     ) as BusterChatResponseMessage_file;
 
-    const isSelectedFile = useChatIndividualContextSelector(
-      (x) => x.selectedFileId === responseMessage.id
-    );
-    const onSetSelectedFile = useChatLayoutContextSelector((x) => x.onSetSelectedFile);
-
     const { file_type, id } = responseMessage;
 
-    const href = useMemo(() => {
+    const isSelectedFile = useGetIsSelectedFile({ responseMessage });
-      if (!chatId) return '';
+    const onSetSelectedFile = useChatLayoutContextSelector((x) => x.onSetSelectedFile);
 
-      if (isSelectedFile) {
+    const href = useGetFileHref({ responseMessage, isSelectedFile, chatId });
-        return createBusterRoute({
-          route: BusterRoutes.APP_CHAT_ID,
-          chatId
-        });
-      }
-
-      if (file_type === 'metric') {
-        return createBusterRoute({
-          route: BusterRoutes.APP_CHAT_ID_METRIC_ID_CHART,
-          chatId,
-          metricId: id
-        });
-      }
-
-      if (file_type === 'dashboard') {
-        return createBusterRoute({
-          route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID,
-          chatId,
-          dashboardId: id
-        });
-      }
-
-      console.warn('Unknown file type', file_type);
-
-      return '';
-    }, [chatId, file_type, id, isSelectedFile]);
 
     useMount(() => {
       if (href) {
@@ -69,7 +38,10 @@ export const ChatResponseMessage_File: React.FC<ChatResponseMessageProps> = Reac
     });
 
     return (
-      <Link href={href} prefetch onClick={() => onSetSelectedFile({ id, type: file_type })}>
+      <Link
+        href={href}
+        prefetch
+        onClick={() => onSetSelectedFile(isSelectedFile ? { id, type: file_type } : null)}>
         <StreamingMessage_File
           isCompletedStream={isCompletedStream}
           responseMessage={responseMessage}

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_File/useGetFileHref.tsx

@@ -0,0 +1,51 @@
+import { BusterChatResponseMessage_file } from '@/api/asset_interfaces/chat';
+import { BusterRoutes } from '@/routes';
+
+import { createBusterRoute } from '@/routes';
+import { useMemo } from 'react';
+
+export const useGetFileHref = ({
+  responseMessage,
+  isSelectedFile,
+  chatId
+}: {
+  responseMessage: BusterChatResponseMessage_file;
+  isSelectedFile: boolean;
+  chatId: string;
+}) => {
+  const { file_type, id, version_number } = responseMessage;
+
+  const href = useMemo(() => {
+    if (!chatId) return '';
+
+    if (isSelectedFile) {
+      return createBusterRoute({
+        route: BusterRoutes.APP_CHAT_ID,
+        chatId
+      });
+    }
+
+    if (file_type === 'metric') {
+      console.log(responseMessage);
+      return createBusterRoute({
+        route: BusterRoutes.APP_CHAT_ID_METRIC_ID_CHART,
+        chatId,
+        metricId: id
+      });
+    }
+
+    if (file_type === 'dashboard') {
+      return createBusterRoute({
+        route: BusterRoutes.APP_CHAT_ID_DASHBOARD_ID,
+        chatId,
+        dashboardId: id
+      });
+    }
+
+    console.warn('Unknown file type', file_type);
+
+    return '';
+  }, [chatId, file_type, id, version_number, isSelectedFile]);
+
+  return href;
+};

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_File/useGetIsSelectedFile.tsx

@@ -0,0 +1,39 @@
+import { BusterChatResponseMessage_file } from '@/api/asset_interfaces';
+import { queryKeys } from '@/api/query_keys';
+import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useGetIsSelectedFile = ({
+  responseMessage
+}: {
+  responseMessage: Pick<BusterChatResponseMessage_file, 'file_type' | 'id' | 'version_number'>;
+}) => {
+  const queryClient = useQueryClient();
+  const isSelectedFile = useChatIndividualContextSelector(
+    (x) => x.selectedFileId === responseMessage.id
+  );
+
+  const versionNumber = responseMessage.version_number;
+
+  switch (responseMessage.file_type) {
+    case 'metric': {
+      const options = queryKeys.metricsGetMetric(responseMessage.id);
+      const data = queryClient.getQueryData(options.queryKey);
+      const lastVersion = data?.versions[data.versions.length - 1];
+      return isSelectedFile && lastVersion?.version_number === versionNumber;
+    }
+    case 'dashboard': {
+      const options = queryKeys.dashboardGetDashboard(responseMessage.id);
+      const data = queryClient.getQueryData(options.queryKey)?.dashboard;
+      const lastVersion = data?.versions[data.versions.length - 1];
+      return isSelectedFile && lastVersion?.version_number === versionNumber;
+    }
+    case 'reasoning': {
+      return false;
+    }
+    default: {
+      const exhaustiveCheck: never = responseMessage.file_type;
+      return false;
+    }
+  }
+};