updates

.gitignore

@@ -63,4 +63,5 @@ node_modules/
 
 .secrets
 
-/prds
+/prds
+.DS_Store

web/src/components/ui/icons/customIcons/Microsoft.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 function Microsoft() {
   return (
     <svg height="1em" width="1em" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-      <g fill="#212121">
+      <g fill="currentColor">
         <path d="M3,3H15.381V15.381H3V3Z" />
         <path d="M16.619,3h12.381V15.381h-12.381V3Z" />
         <path d="M3,16.619H15.381v12.381H3v-12.381Z" />

web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx

@@ -15,13 +15,24 @@ export const BarContainer: React.FC<{
   title: string;
   secondaryTitle?: string;
   contentClassName?: string;
+  animationKey?: string;
 }> = React.memo(
-  ({ showBar, status, isCompletedStream, children, title, secondaryTitle, contentClassName }) => {
+  ({
+    showBar,
+    status,
+    isCompletedStream,
+    children,
+    title,
+    secondaryTitle,
+    contentClassName,
+    animationKey
+  }) => {
     return (
-      <AnimatePresence initial={!isCompletedStream}>
+      <AnimatePresence initial={!isCompletedStream} mode="wait">
         <motion.div
           className={'relative flex space-x-1.5 overflow-hidden'}
-          {...itemAnimationConfig}>
+          {...itemAnimationConfig}
+          key={animationKey}>
           <VerticalBarContainer showBar={showBar} status={status} />
 
           <div className={`flex w-full flex-col space-y-2 overflow-hidden ${contentClassName}`}>

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningBlackBoxMessage.tsx

@@ -4,7 +4,6 @@ import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 import { queryKeys } from '@/api/query_keys';
 import { BarContainer } from './BarContainer';
-import { Text } from '@/components/ui/typography';
 
 export const BlackBoxMessage: React.FC<{ messageId: string }> = React.memo(({ messageId }) => {
   const blackBoxMessage = useQuery({
@@ -24,7 +23,7 @@ export const BlackBoxMessage: React.FC<{ messageId: string }> = React.memo(({ me
     );
   }
 
-  return <span className="text-red-500">no black box {messageId}</span>;
+  return null;
 });
 
 BlackBoxMessage.displayName = 'BlackBoxMessage';

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessageSelector.tsx

@@ -10,6 +10,7 @@ export interface ReasoningMessageProps {
   messageId: string;
   isCompletedStream: boolean;
   chatId: string;
+  animationKey?: string;
 }
 
 const ReasoningMessageRecord: Record<
@@ -45,7 +46,8 @@ export const ReasoningMessageSelector: React.FC<ReasoningMessageSelectorProps> =
 
   return (
     <ReasoningMessage
-      key={reasoningMessageId + reasoningMessageType} //force in case the type changes
+      key={reasoningMessageId} //force in case the type changes
+      animationKey={reasoningMessageId + reasoningMessageType}
       reasoningMessageId={reasoningMessageId}
       isCompletedStream={isCompletedStream}
       messageId={messageId}

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningMessage_Files.tsx

@@ -12,22 +12,19 @@ const getReasoningMessage = (x: BusterChatMessage | undefined, reasoningMessageI
   x?.reasoning_messages[reasoningMessageId] as BusterChatMessageReasoning_files;
 
 export const ReasoningMessage_Files: React.FC<ReasoningMessageProps> = React.memo(
-  ({ isCompletedStream, chatId, reasoningMessageId, messageId }) => {
+  ({ isCompletedStream, chatId, reasoningMessageId, messageId, animationKey }) => {
     const status = useMessageIndividual(
       messageId,
       (x) => getReasoningMessage(x, reasoningMessageId)?.status
     );
-
     const file_ids = useMessageIndividual(
       messageId,
       (x) => getReasoningMessage(x, reasoningMessageId)?.file_ids
     );
-
     const title = useMessageIndividual(
       messageId,
       (x) => getReasoningMessage(x, reasoningMessageId)?.title
     );
-
     const secondary_title = useMessageIndividual(
       messageId,
       (x) => getReasoningMessage(x, reasoningMessageId)?.secondary_title
@@ -35,14 +32,13 @@ export const ReasoningMessage_Files: React.FC<ReasoningMessageProps> = React.mem
 
     if (!title) return null;
 
-    console.log(reasoningMessageId, isCompletedStream);
-
     return (
       <BarContainer
         showBar={true}
         status={status}
         isCompletedStream={isCompletedStream}
         title={title}
+        animationKey={animationKey}
         secondaryTitle={secondary_title}
         contentClassName="mb-2">
         <div className="flex flex-col gap-3">

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePillsContainer.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ReasoningMessagePillsContainer } from './ReasoningMessagePillsContainer';
+import { ReasoningMessage_Text } from '../ReasoningMessage_Text';
 import type { BusterChatMessageReasoning_pills, ThoughtFileType } from '@/api/asset_interfaces';
 import { useState } from 'react';
 import { Button } from '@/components/ui/buttons';
@@ -98,6 +99,10 @@ export const Loading: Story = {
   render: () => <InteractiveLoadingWrapper />
 };
 
+export const LoadingTextThenPills: Story = {
+  render: () => <InteractiveLoadingWrapper />
+};
+
 export const Failed: Story = {
   args: {
     ...mockReasoningMessage,

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePillsContainer.tsx

@@ -39,8 +39,9 @@ export const ReasoningMessagePillsContainer: React.FC<
   BusterChatMessageReasoning_pills & {
     status: NonNullable<BusterChatMessageReasoning_pills['status']>;
     isCompletedStream: boolean;
+    animationKey?: string;
   }
-> = ({ title, secondary_title, pill_containers, status, isCompletedStream }) => {
+> = ({ title, secondary_title, pill_containers, status, isCompletedStream, animationKey }) => {
   const hasPills = !!pill_containers && pill_containers.length > 0;
   const loadingStatus: NonNullable<BusterChatMessageReasoning_pills['status']> = status;
 
@@ -48,6 +49,7 @@ export const ReasoningMessagePillsContainer: React.FC<
     <BarContainer
       showBar={hasPills}
       status={loadingStatus}
+      animationKey={animationKey}
       isCompletedStream={isCompletedStream}
       title={title}
       secondaryTitle={secondary_title}

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessage_PillsContainer.tsx

@@ -5,7 +5,7 @@ import { useMessageIndividual } from '@/context/Chats';
 import { ReasoningMessagePillsContainer } from './ReasoningMessagePillsContainer';
 
 export const ReasoningMessage_PillsContainer: React.FC<ReasoningMessageProps> = React.memo(
-  ({ reasoningMessageId, messageId, isCompletedStream }) => {
+  ({ reasoningMessageId, messageId, isCompletedStream, animationKey }) => {
     const reasoningMessage = useMessageIndividual(
       messageId,
       (x) => x?.reasoning_messages[reasoningMessageId]
@@ -19,6 +19,7 @@ export const ReasoningMessage_PillsContainer: React.FC<ReasoningMessageProps> =
         {...reasoningMessagePills}
         status={status}
         isCompletedStream={isCompletedStream}
+        animationKey={animationKey}
       />
     );
   }

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Text/ReasoningMessage_Text.tsx

@@ -6,7 +6,7 @@ import { BarContainer } from '../BarContainer';
 import { useMessageIndividual } from '@/context/Chats';
 
 export const ReasoningMessage_Text: React.FC<ReasoningMessageProps> = React.memo(
-  ({ reasoningMessageId, messageId, isCompletedStream }) => {
+  ({ reasoningMessageId, messageId, isCompletedStream, animationKey }) => {
     const reasoningMessage = useMessageIndividual(
       messageId,
       (x) => x?.reasoning_messages[reasoningMessageId]
@@ -19,6 +19,7 @@ export const ReasoningMessage_Text: React.FC<ReasoningMessageProps> = React.memo
       <BarContainer
         showBar={!!message?.length}
         status={status}
+        animationKey={animationKey}
         isCompletedStream={isCompletedStream}
         title={title}
         secondaryTitle={secondary_title}>