From 3cd5c7c9e4fa0bcfd44a37740e236b6881b85bcb Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 1 Apr 2025 22:12:27 -0600
Subject: [PATCH] status indicator is updated

---
 web/src/components/ui/indicators/StatusIndicator.tsx        | 2 +-
 .../MetricStylingApp/Common/WarningIcon.tsx                 | 2 +-
 .../ReasoningController/ReasoningMessages/BarContainer.tsx  | 6 +++---
 .../ReasoningMessagePills.tsx                               | 4 ++--
 .../ChatContainer/ChatContent/ChatUserMessage.tsx           | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/ui/indicators/StatusIndicator.tsx b/web/src/components/ui/indicators/StatusIndicator.tsx
index 2eb4c5436..77c8db828 100644
--- a/web/src/components/ui/indicators/StatusIndicator.tsx
+++ b/web/src/components/ui/indicators/StatusIndicator.tsx
@@ -25,7 +25,7 @@ export const StatusIndicator: React.FC<{
         failed && 'text-danger-foreground'
       )}>
       {inProgress && (
-        <div className="bg-primary/30 absolute inset-0 -ml-[1px] animate-ping rounded-full duration-1000" />
+        <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
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
index f74478a4d..eeae57682 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
@@ -11,7 +11,7 @@ export const WarningIcon: React.FC<{
 }> = React.memo(
   ({
     rowCount,
-    rowCountThreshold = 35,
+    rowCountThreshold = 25,
     warningText = 'Data labels will be hidden if there are too many.'
   }) => {
     if (rowCount <= rowCountThreshold) {
diff --git a/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx b/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
index 86bcf182b..e2e895a6e 100644
--- a/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
+++ b/web/src/controllers/ReasoningController/ReasoningMessages/BarContainer.tsx
@@ -15,7 +15,7 @@ export const BarContainer: React.FC<{
   secondaryTitle?: string;
 }> = React.memo(({ showBar, isCompletedStream, status, children, title, secondaryTitle }) => {
   return (
-    <div className={'relative flex space-x-1.5 overflow-hidden'}>
+    <div className={'relative flex space-x-1.5 overflow-visible'}>
       <VerticalBarContainer
         showBar={showBar}
         status={status}
@@ -42,8 +42,8 @@ const VerticalBarContainer: React.FC<{
   isCompletedStream: boolean;
 }> = React.memo(({ showBar, isCompletedStream, status }) => {
   return (
-    <div className="ml-2 flex w-5 min-w-5 flex-col items-center">
-      <StatusIndicator status={status} />
+    <div className="ml-2 flex w-5 min-w-5 flex-col items-center pt-0.5">
+      <StatusIndicator status={'loading'} />
       <VerticalBar show={showBar} isCompletedStream={isCompletedStream} />
     </div>
   );
diff --git a/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePills.tsx b/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePills.tsx
index a25f6537b..c92d4afcb 100644
--- a/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePills.tsx
+++ b/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_PillContainers/ReasoningMessagePills.tsx
@@ -63,8 +63,8 @@ export const ReasoningMessagePills: React.FC<{
         animate={pills.length > 0 ? 'visible' : 'hidden'}
         className={'flex w-full flex-wrap gap-1.5 overflow-hidden'}>
         {pills.map((pill) => (
-          <Link href={makeHref(pill)}>
-            <Pill key={pill.id} useAnimation={useAnimation} {...pill} />
+          <Link href={makeHref(pill)} key={pill.id}>
+            <Pill useAnimation={useAnimation} {...pill} />
           </Link>
         ))}
       </motion.div>
diff --git a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx
index c893eff35..4a9663d52 100644
--- a/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx
+++ b/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatUserMessage.tsx
@@ -45,7 +45,7 @@ export const ChatUserMessage: React.FC<{
         />
       ) : (
         <>
-          <Paragraph>{request}</Paragraph>
+          <Paragraph className="whitespace-pre-wrap">{request}</Paragraph>
           {isCompletedStream && (
             <RequestMessageTooltip
               isTooltipOpen={isTooltipOpen}