more updates

web/src/components/ui/buttons/Button.tsx

@@ -36,7 +36,7 @@ const sizeVariants = {
 };
 
 export const buttonVariants = cva(
-  'inline-flex items-center overflow-hidden text-base justify-center gap-[5px] shadow rounded transition-all duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress',
+  'inline-flex items-center overflow-hidden text-base justify-center gap-1.5 shadow rounded transition-all duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress',
   {
     variants: {
       variant: buttonTypeClasses,

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

@@ -151,9 +151,9 @@ export const StreamingMessageCode: React.FC<
 const HiddenSection: React.FC<{
   numberOfLinesUnmodified: number;
 }> = ({ numberOfLinesUnmodified }) => (
-  <div className="my-2 flex w-full items-center space-x-1 first:mt-0">
+  <div className="my-2! flex w-full items-center space-x-1 first:mt-0">
     <div className="bg-border h-[0.5px] w-full" />
-    <Text variant="tertiary" size={'sm'} className="whitespace-nowrap">
+    <Text variant="tertiary" size={'xs'} className="whitespace-nowrap">
       {`${numberOfLinesUnmodified} ${pluralize('line', numberOfLinesUnmodified)} unmodified`}
     </Text>
     <div className="bg-border h-[0.5px] w-4" />

web/src/components/ui/tooltip/Popover.tsx

@@ -18,6 +18,7 @@ export interface PopoverProps
   footerContent?: string | React.ReactNode;
   trigger?: PopoverTriggerType;
   size?: PopoverContentVariant['size'];
+  sideOffset?: number;
 }
 
 export const Popover = React.memo<PopoverProps>(
@@ -31,6 +32,7 @@ export const Popover = React.memo<PopoverProps>(
     trigger = 'click',
     size = 'default',
     footerContent,
+    sideOffset,
     ...props
   }) => {
     return (
@@ -43,6 +45,7 @@ export const Popover = React.memo<PopoverProps>(
           side={side}
           className={className}
           size={size}
+          sideOffset={sideOffset}
           headerContent={headerContent && <PopoverHeaderContent title={headerContent} />}
           footerContent={footerContent && <PopoverFooterContent title={footerContent} />}>
           {content}

web/src/controllers/MetricController/MetricViewChart/MetricChartEvaluation.tsx

@@ -1,6 +1,10 @@
 import type { IBusterMetric } from '@/api/asset_interfaces/metric';
 import React, { useMemo } from 'react';
-import { CircleCheck, CircleWarning, CircleDotted } from '@/components/ui/icons';
+import {
+  CircleCheck,
+  CircleWarning,
+  TriangleWarning
+} from '@/components/ui/icons/NucleoIconFilled';
 import { Popover } from '@/components/ui/tooltip/Popover';
 import { Button, type ButtonProps } from '@/components/ui/buttons';
 
@@ -17,7 +21,7 @@ export const MetricChartEvaluation: React.FC<{
 
   const icon = useMemo(() => {
     if (evaluationScore === 'High') return <CircleCheck />;
-    if (evaluationScore === 'Moderate') return <CircleDotted />;
+    if (evaluationScore === 'Moderate') return <TriangleWarning />;
     if (evaluationScore === 'Low') return <CircleWarning />;
     return <CircleCheck />;
   }, [evaluationScore]);
@@ -34,6 +38,7 @@ export const MetricChartEvaluation: React.FC<{
     <Popover
       side="top"
       align="end"
+      sideOffset={11}
       content={<div className="leading-1.3 max-w-[250px]">{evaluationSummary}</div>}>
       <Button variant={variant} prefix={icon}>
         {text}

web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditBarAxisSorting.tsx

@@ -3,12 +3,15 @@ import React, { useMemo } from 'react';
 import { LabelAndInput } from '../Common';
 import { BarSortBy } from '@/components/ui/charts';
 import { AppSegmented, SegmentedItem } from '@/components/ui/segmented';
-import { ChartBarAxisX, ChartBarTrendDown, ChartBarTrendUp } from '@/components/ui/icons';
+import {
+  ChartBarAxisX,
+  ChartBarTrendDown,
+  ChartBarTrendUp
+} from '@/components/ui/icons/NucleoIconFilled';
 import { useMemoizedFn } from '@/hooks';
 
 const options: SegmentedItem<BarSortBy[0]>[] = [
   {
-    label: 'None',
     value: 'none',
     tooltip: 'No sorting',
     icon: <ChartBarAxisX />
@@ -43,7 +46,9 @@ export const EditBarSorting: React.FC<{
 
   return (
     <LabelAndInput label="Sorting">
-      <AppSegmented options={options} value={selectedOption} onChange={onChange} block />
+      <div className="flex justify-end">
+        <AppSegmented options={options} value={selectedOption} onChange={onChange} block={false} />
+      </div>
     </LabelAndInput>
   );
 });

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

@@ -40,7 +40,8 @@ const meta: Meta<typeof ReasoningMessageSelector> = {
       options: ['reasoning-1', 'reasoning-2', 'reasoning-3']
     },
     isCompletedStream: {
-      control: 'boolean'
+      control: 'boolean',
+      defaultValue: false
     }
   }
 };
@@ -52,7 +53,7 @@ export const TextReasoning: Story = {
   args: {
     reasoningMessageId: 'reasoning-1',
     messageId: 'message-1',
-    isCompletedStream: true,
+    isCompletedStream: false,
     chatId: 'chat-1'
   }
 };
@@ -61,7 +62,7 @@ export const PillsReasoning: Story = {
   args: {
     reasoningMessageId: 'reasoning-2',
     messageId: 'message-2',
-    isCompletedStream: true,
+    isCompletedStream: false,
     chatId: 'chat-1'
   }
 };
@@ -70,7 +71,7 @@ export const FilesReasoning: Story = {
   args: {
     reasoningMessageId: 'reasoning-3',
     messageId: 'message-3',
-    isCompletedStream: true,
+    isCompletedStream: false,
     chatId: 'chat-1'
   }
 };

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

@@ -32,6 +32,8 @@ export const ReasoningMessage_Files: React.FC<ReasoningMessageProps> = React.mem
 
     if (!title) return null;
 
+    console.log(status);
+
     return (
       <div className="flex flex-col gap-3">
         {file_ids.map((fileId) => (

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

@@ -23,7 +23,7 @@ const containerVariants = {
     opacity: 1,
     transition: {
       opacity: { duration: duration * 0.5, ease: 'easeIn' },
-      staggerChildren: 0.12
+      staggerChildren: 0.08
     }
   }
 };

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

@@ -1,6 +1,5 @@
 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';

web/src/mocks/chat.ts

@@ -20,15 +20,16 @@ export const mockBusterChatMessage: IBusterChatMessage = {
       type: 'text',
       title: 'Text Reasoning',
       secondary_title: 'Additional Context',
-      message: 'This is a text reasoning message',
-      status: 'completed'
+      message:
+        'This is a text reasoning message. It is generated by the AI. It is a long message that can be scrolled. It is a short message that can be displayed in a single line. It is a long message that can be scrolled. It is a short message that.',
+      status: 'loading'
     },
     'reasoning-2': {
       id: 'reasoning-2',
       type: 'pills',
       title: 'Pills Reasoning',
       secondary_title: 'Selected Files',
-      status: 'completed',
+      status: 'loading',
       pill_containers: [
         {
           title: 'Found Files',
@@ -45,7 +46,7 @@ export const mockBusterChatMessage: IBusterChatMessage = {
       type: 'files',
       title: 'Files Reasoning',
       secondary_title: 'Modified Files',
-      status: 'completed',
+      status: 'loading',
       file_ids: ['file-1', 'file-2'],
       files: {
         'file-1': {
@@ -56,8 +57,27 @@ export const mockBusterChatMessage: IBusterChatMessage = {
           version_id: 'v1',
           status: 'completed',
           file: {
-            text: 'console.log("Hello World");\nconsole.log("Hello World");\nconsole.log("Hello World");\n',
-            modified: [[1, 1]]
+            text: `
+bilbo_baggins:
+  biography:
+    name: "Bilbo Baggins"
+    species: "Hobbit"
+    home: "The Shire"
+    adventures:
+      - title: "The Unexpected Party"
+        description: "Bilbo is invited to join a group of dwarves on an adventure."
+      - title: "The Trolls"
+        description: "Bilbo encounters trolls who capture him and his companions."
+      - title: "Riddles in the Dark"
+        description: "He meets Gollum and engages in a game of riddles."
+      - title: "The Lonely Mountain"
+        description: "Bilbo helps the dwarves reclaim their treasure from Smaug."
+  quotes:
+    - "I think I am quite ready for another adventure."
+    - "The road goes ever on and on, down from the door where it began."
+    - "I have a great deal of experience in dealing with dragons."
+            `,
+            modified: [[5, 9]]
           }
         },
         'file-2': {
@@ -66,9 +86,36 @@ export const mockBusterChatMessage: IBusterChatMessage = {
           file_name: 'example.js',
           version_number: 1,
           version_id: 'v1',
-          status: 'completed',
+          status: 'loading',
           file: {
-            text: 'console.log("Example");\nconsole.log("Example");\nconsole.log("Example");\n',
+            text: `
+hunchback_of_notre_dame:
+  title: "The Hunchback of Notre Dame"
+  author: "Victor Hugo"
+  themes:
+    - name: "Isolation"
+      description: "The struggle of Quasimodo, the hunchback, symbolizes the pain of being an outcast."
+    - name: "Love"
+      description: "The unrequited love of Quasimodo for Esmeralda highlights the complexities of affection."
+    - name: "Justice"
+      description: "The story critiques societal norms and the quest for justice in a flawed world."
+  characters:
+    - name: "Quasimodo"
+      role: "The bell-ringer of Notre Dame, representing physical deformity and inner beauty."
+    - name: "Esmeralda"
+      role: "A kind-hearted gypsy who embodies compassion and freedom."
+    - name: "Frollo"
+      role: "The archdeacon whose obsession leads to tragedy, representing moral conflict."
+  setting:
+    location: "Notre Dame Cathedral, Paris"
+    time_period: "15th century"
+  impact:
+    cultural_significance: "The novel has inspired numerous adaptations in film, theater, and literature."
+    moral_lessons:
+      - "True beauty lies within."
+      - "Society often judges based on appearances."
+      - "Compassion can transcend societal boundaries."
+            `,
             modified: []
           }
         }