use update effect with logging

web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx

@@ -101,10 +101,7 @@ export const StreamingMessageCode: React.FC<
         {lineSegments.map((segment, index) => (
           <div
             key={`${segment.lineNumber}-${index}`}
-            className={cn(
-              'line-number pr-1',
-              !isCompletedStream && 'animate-in fade-in duration-700'
-            )}>
+            className={cn('line-number pr-1', !isCompletedStream && 'fade-in duration-500')}>
             {segment.type === 'text' ? (
               <MemoizedSyntaxHighlighter lineNumber={segment.lineNumber} text={segment.content} />
             ) : (

web/src/components/ui/streaming/StreamingMessage_Text.tsx

@@ -55,8 +55,7 @@ const AnimatedSpan: React.FC<{ children: React.ReactNode; isCompletedStream: boo
   isCompletedStream
 }) => {
   return (
-    <span
-      className={cn('leading-1.5', !isCompletedStream ? 'animate-in fade-in duration-700' : '')}>
+    <span className={cn('leading-1.5', !isCompletedStream ? 'fade-in duration-500' : '')}>
       {children}
     </span>
   );

web/src/components/ui/typography/AppMarkdown/AppMarkdownCommon.tsx

@@ -38,7 +38,7 @@ export const CustomParagraph: React.FC<
       <p
         className={cn(
           'text-size-inherit!',
-          showLoader && 'fade-in transform-none! transition-none duration-700'
+          showLoader && 'fade-in transform-none! transition-none duration-500'
         )}>
         {children}
       </p>
@@ -55,7 +55,7 @@ export const CustomParagraph: React.FC<
     <p
       className={cn(
         'text-size-inherit!',
-        showLoader && 'fade-in transform-none! transition-none duration-700'
+        showLoader && 'fade-in transform-none! transition-none duration-500'
       )}>
       {children}
     </p>
@@ -91,7 +91,7 @@ export const CustomHeading: React.FC<
     <HeadingTag
       className={cn(
         headingVariants({ level: stripFormatting ? 'base' : level }),
-        showLoader && 'fade-in transform-none! transition-none duration-700'
+        showLoader && 'fade-in transform-none! transition-none duration-500'
       )}>
       {children}
     </HeadingTag>
@@ -109,7 +109,7 @@ export const CustomList: React.FC<
   const ListTag = ordered ? 'ol' : 'ul';
   return (
     <ListTag
-      className={cn('', showLoader && 'fade-in transform-none! transition-none duration-700')}
+      className={cn('', showLoader && 'fade-in transform-none! transition-none duration-500')}
       {...rest}>
       {children}
     </ListTag>
@@ -130,7 +130,7 @@ export const CustomOrderedList: React.FC<
       start={start}
       className={cn(
         'mt-1 space-y-1',
-        showLoader && 'fade-in transform-none! transition-none duration-700'
+        showLoader && 'fade-in transform-none! transition-none duration-500'
       )}>
       {children}
     </ol>
@@ -149,7 +149,7 @@ export const CustomUnorderedList: React.FC<
     <ul
       className={cn(
         'mt-1 space-y-1',
-        showLoader && 'fade-in transform-none! transition-none duration-700'
+        showLoader && 'fade-in transform-none! transition-none duration-500'
       )}
       //@ts-ignore
       start={start}>
@@ -169,7 +169,7 @@ export const CustomListItem: React.FC<
     <li
       className={cn(
         'space-y-1',
-        showLoader && 'fade-in transform-none! transition-none duration-700'
+        showLoader && 'fade-in transform-none! transition-none duration-500'
       )}>
       {children}
     </li>
@@ -185,7 +185,7 @@ export const CustomBlockquote: React.FC<
 > = ({ children, markdown, showLoader, ...rest }) => {
   return (
     <blockquote
-      className={cn('', showLoader && 'fade-in transform-none! transition-none duration-700')}>
+      className={cn('', showLoader && 'fade-in transform-none! transition-none duration-500')}>
       {children}
     </blockquote>
   );
@@ -199,7 +199,7 @@ export const CustomTable: React.FC<
   } & ExtraPropsExtra
 > = ({ children, markdown, showLoader, ...rest }) => {
   return (
-    <table className={cn('', showLoader && 'fade-in transform-none! transition-none duration-700')}>
+    <table className={cn('', showLoader && 'fade-in transform-none! transition-none duration-500')}>
       {children}
     </table>
   );
@@ -213,7 +213,7 @@ export const CustomSpan: React.FC<
   } & ExtraPropsExtra
 > = ({ children, markdown, showLoader, ...rest }) => {
   return (
-    <span className={cn('', showLoader && 'fade-in transform-none! transition-none duration-700')}>
+    <span className={cn('', showLoader && 'fade-in transform-none! transition-none duration-500')}>
       {children}
     </span>
   );

web/src/layouts/ChatLayout/ChatLayoutContext/useGetChatParams.tsx

@@ -1,20 +1,14 @@
 'use client';
 
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
-import { useParams, useSearchParams } from 'next/navigation';
+import { useParams, usePathname, useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import { FileViewSecondary } from './useLayoutConfig';
+import { useWhyDidYouUpdate } from '@/hooks';
+import { pathNameToRoute } from '@/routes/helpers';
 
 export const useGetChatParams = () => {
-  const {
-    chatId,
-    versionNumber: versionNumberPath,
-    metricId,
-    dashboardId,
-    collectionId,
-    datasetId,
-    messageId
-  } = useParams() as {
+  const params = useParams() as {
     versionNumber: string | undefined;
     chatId: string | undefined;
     metricId: string | undefined;
@@ -23,11 +17,22 @@ export const useGetChatParams = () => {
     datasetId: string | undefined;
     messageId: string | undefined;
   };
+  const {
+    chatId,
+    versionNumber: versionNumberPath,
+    metricId,
+    dashboardId,
+    collectionId,
+    datasetId,
+    messageId
+  } = params;
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const queryMetricVersionNumber = searchParams.get('metric_version_number');
   const queryDashboardVersionNumber = searchParams.get('dashboard_version_number');
   const secondaryView = searchParams.get('secondary_view') as FileViewSecondary | undefined;
-  const currentRoute = useAppLayoutContextSelector((x) => x.currentRoute);
+  const currentRoute = pathNameToRoute(pathname, params);
+  const iCurrentRoute = useAppLayoutContextSelector((x) => x.currentRoute);
 
   const metricVersionNumber = useMemo(() => {
     if (!metricId) return undefined;
@@ -50,6 +55,7 @@ export const useGetChatParams = () => {
 
   return useMemo(
     () => ({
+      currentRoute,
       isVersionHistoryMode,
       chatId,
       metricId,
@@ -59,10 +65,11 @@ export const useGetChatParams = () => {
       messageId,
       metricVersionNumber,
       dashboardVersionNumber,
-      currentRoute,
       secondaryView
     }),
+    //So... currentRoute was always one render cycle behind the app context selector. So we calculate it here.
     [
+      currentRoute,
       isVersionHistoryMode,
       chatId,
       metricId,
@@ -72,7 +79,6 @@ export const useGetChatParams = () => {
       messageId,
       metricVersionNumber,
       dashboardVersionNumber,
-      currentRoute,
       secondaryView
     ]
   );