From 00179f59bf140d3d1ba9d2c6e1a24606cf495e2a Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 10 Apr 2025 14:05:31 -0600
Subject: [PATCH] reasoning selector updates

---
 web/package.json                              | 16 ++---
 .../ui/indicators/StatusIndicator.tsx         | 32 ++++-----
 .../ReasoningMessages/BarContainer.tsx        | 69 ++++++-------------
 3 files changed, 43 insertions(+), 74 deletions(-)

diff --git a/web/package.json b/web/package.json
index 541195ff5..20306b772 100644
--- a/web/package.json
+++ b/web/package.json
@@ -39,11 +39,11 @@
     "@radix-ui/react-tooltip": "^1.2.0",
     "@supabase/ssr": "^0.6.1",
     "@supabase/supabase-js": "^2.49.4",
-    "@tanstack/query-sync-storage-persister": "^5.72.1",
-    "@tanstack/react-form": "^1.3.0",
-    "@tanstack/react-query": "^5.72.1",
-    "@tanstack/react-query-devtools": "^5.72.1",
-    "@tanstack/react-query-persist-client": "^5.72.1",
+    "@tanstack/query-sync-storage-persister": "^5.73.1",
+    "@tanstack/react-form": "^1.3.1",
+    "@tanstack/react-query": "^5.72.2",
+    "@tanstack/react-query-devtools": "^5.72.2",
+    "@tanstack/react-query-persist-client": "^5.73.1",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "^3.13.6",
     "@types/jest": "^29.5.14",
@@ -77,7 +77,7 @@
     "next-themes": "^0.4.6",
     "papaparse": "^5.5.2",
     "pluralize": "^8.0.0",
-    "posthog-js": "^1.235.0",
+    "posthog-js": "^1.235.4",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "react": "^18",
@@ -102,7 +102,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/eslintrc": "^3",
-    "@next/bundle-analyzer": "^15.2.5",
+    "@next/bundle-analyzer": "^15.3.0",
     "@storybook/addon-controls": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
@@ -125,7 +125,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-storybook": "^0.12.0",
     "msw-storybook-addon": "^2.0.4",
     "sass": "^1.86.3",
diff --git a/web/src/components/ui/indicators/StatusIndicator.tsx b/web/src/components/ui/indicators/StatusIndicator.tsx
index 77c8db828..757358f98 100644
--- a/web/src/components/ui/indicators/StatusIndicator.tsx
+++ b/web/src/components/ui/indicators/StatusIndicator.tsx
@@ -18,24 +18,20 @@ export const StatusIndicator: React.FC<{
   const failed = status === 'failed';
 
   return (
-    <div
-      className={cn(
-        'text-gray-light relative flex h-3 w-3 items-center justify-center rounded-full transition-all duration-300',
-        inProgress && 'text-primary',
-        failed && 'text-danger-foreground'
-      )}>
-      {inProgress && (
-        <div className="bg-primary/30 absolute m-0.5 h-2.5 w-2.5 animate-ping rounded-full duration-1000" />
-      )}
-      <AnimatePresence mode="wait" initial={false}>
-        <motion.div
-          {...animationConfig}
-          key={status === 'failed' ? 'failed' : 'completed'}
-          className={cn('flex items-center justify-center')}>
-          {failed ? <CircleWarning /> : <RadioChecked />}
-        </motion.div>
-      </AnimatePresence>
-    </div>
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        className={cn(
+          'text-gray-light relative flex items-center justify-center transition-all duration-300',
+          inProgress && 'text-primary',
+          failed && 'text-danger-foreground'
+        )}>
+        {inProgress && (
+          <div className="bg-primary/30 absolute top-1/2 left-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 animate-ping rounded-full duration-1000" />
+        )}
+
+        {failed ? <CircleWarning /> : <RadioChecked />}
+      </motion.div>
+    </AnimatePresence>
   );
 });
 
diff --git a/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx b/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
index 86cabfca5..a060ebcbf 100644
--- a/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
+++ b/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
@@ -85,56 +85,29 @@ const TitleContainer: React.FC<{
 }> = React.memo(({ title, secondaryTitle, isCompletedStream }) => {
   return (
     <div className={cn('@container', 'flex w-full items-center space-x-1.5 overflow-hidden')}>
-      <AnimatedThoughtTitle title={title} type="default" isCompletedStream={isCompletedStream} />
-      <AnimatedThoughtTitle
-        title={secondaryTitle}
-        isCompletedStream={isCompletedStream}
-        type="tertiary"
-        className="secondary-text truncate"
-      />
+      <AnimatePresence mode="wait" initial={!isCompletedStream}>
+        <motion.div
+          className="flex items-center space-x-1.5"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ delay: 0 }}
+          key={title + secondaryTitle}>
+          <Text size="sm" className={cn(`whitespace-nowrap`)} variant={'default'}>
+            {title}
+          </Text>
+          {secondaryTitle && (
+            <Text
+              size="sm"
+              className={cn(`hidden whitespace-nowrap @[170px]:flex!`)}
+              variant={'tertiary'}>
+              {secondaryTitle}
+            </Text>
+          )}
+        </motion.div>
+      </AnimatePresence>
     </div>
   );
 });
 
 TitleContainer.displayName = 'TitleContainer';
-
-const AnimatedThoughtTitle = React.memo(
-  ({
-    title,
-    type,
-    isCompletedStream,
-    className = ''
-  }: {
-    title: string | undefined;
-    type: 'tertiary' | 'default';
-    className?: string;
-    isCompletedStream: boolean;
-  }) => {
-    const isSecondaryTitle = type === 'tertiary';
-    return (
-      <AnimatePresence initial={!isCompletedStream && isSecondaryTitle} mode="wait">
-        {title && (
-          <motion.div
-            className="flex"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ delay: isSecondaryTitle ? 0.5 : 0.125 }}
-            key={title}>
-            <Text
-              size="sm"
-              className={cn(
-                `whitespace-nowrap`,
-                isSecondaryTitle ? 'hidden @[170px]:flex!' : '',
-                className
-              )}
-              variant={type}>
-              {title}
-            </Text>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    );
-  }
-);
-AnimatedThoughtTitle.displayName = 'AnimatedThoughtTitle';