From 2ba75e242bb5281ce24bad2e9f86e77c89173635 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 11 Feb 2025 17:09:12 -0700
Subject: [PATCH] animate reasoning title

---
 .../ReasoningMessages/BarContainer.tsx        | 50 ++++++++++++-------
 .../ChatLayout/hooks/useInitialChatLayout.tsx |  6 +++
 .../Chats/ChatProvider/useChatSelectors.ts    |  2 +-
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/web/src/app/app/_controllers/ReasoningController/ReasoningMessages/BarContainer.tsx b/web/src/app/app/_controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
index 0752cc20d..2e7848458 100644
--- a/web/src/app/app/_controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
+++ b/web/src/app/app/_controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
@@ -78,12 +78,12 @@ const TextContainer: React.FC<{
         styles.hideSecondaryText,
         'flex w-full items-center space-x-1.5 overflow-hidden'
       )}>
-      <AnimatedThoughtTitle title={title} />
-      {secondaryTitle && (
-        <Text size="sm" type="tertiary" className="secondary-text truncate" lineHeight={lineHeight}>
-          {secondaryTitle}
-        </Text>
-      )}
+      <AnimatedThoughtTitle title={title} type="default" />
+      <AnimatedThoughtTitle
+        title={secondaryTitle}
+        type="tertiary"
+        className="secondary-text truncate"
+      />
     </div>
   );
 });
@@ -96,17 +96,33 @@ const animations = {
   exit: { opacity: 0 }
 };
 
-const AnimatedThoughtTitle = React.memo(({ title }: { title: string }) => {
-  return (
-    <AnimatePresence initial={false} mode="wait">
-      <motion.div className="flex" {...animations} key={title}>
-        <Text size="sm" className="whitespace-nowrap" lineHeight={lineHeight}>
-          {title}
-        </Text>
-      </motion.div>
-    </AnimatePresence>
-  );
-});
+const AnimatedThoughtTitle = React.memo(
+  ({
+    title,
+    type,
+    className = ''
+  }: {
+    title: string | undefined;
+    type: 'tertiary' | 'default';
+    className?: string;
+  }) => {
+    return (
+      <AnimatePresence initial={false} mode="wait">
+        {title && (
+          <motion.div className="flex" {...animations} key={title}>
+            <Text
+              size="sm"
+              className={`whitespace-nowrap ${className}`}
+              type={type}
+              lineHeight={lineHeight}>
+              {title}
+            </Text>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
+  }
+);
 AnimatedThoughtTitle.displayName = 'AnimatedThoughtTitle';
 
 const useStyles = createStyles(({ token, css }) => ({
diff --git a/web/src/app/app/_layouts/ChatLayout/hooks/useInitialChatLayout.tsx b/web/src/app/app/_layouts/ChatLayout/hooks/useInitialChatLayout.tsx
index 4aef2406e..54675054b 100644
--- a/web/src/app/app/_layouts/ChatLayout/hooks/useInitialChatLayout.tsx
+++ b/web/src/app/app/_layouts/ChatLayout/hooks/useInitialChatLayout.tsx
@@ -44,6 +44,12 @@ export const useInitialChatLayout = ({
     }
   }, [chatId]);
 
+  // useEffect(() => {
+  //   if (isReasoningFile) {
+  //     setIsCollapseOpen(false);
+  //   }
+  // }, [isReasoningFile]);
+
   return {
     isPureFile,
     isPureChat,
diff --git a/web/src/context/Chats/ChatProvider/useChatSelectors.ts b/web/src/context/Chats/ChatProvider/useChatSelectors.ts
index afdfc5137..dc842fee6 100644
--- a/web/src/context/Chats/ChatProvider/useChatSelectors.ts
+++ b/web/src/context/Chats/ChatProvider/useChatSelectors.ts
@@ -30,7 +30,7 @@ export const useChatSelectors = ({
   );
 
   const getChatMessagesMemoized = useMemoizedFn((chatId: string) => {
-    const chatMessageIds = chatsRef.current[chatId].messages || [];
+    const chatMessageIds = chatsRef.current[chatId]?.messages || [];
     return chatMessageIds.map((messageId) => chatsMessagesRef.current[messageId]);
   });