update

web/package.json

@@ -83,7 +83,7 @@
     "ts-jest": "^29.2.6",
     "use-context-selector": "^2.0.0",
     "utility-types": "^3.11.0",
-    "virtua": "^0.40.1"
+    "virtua": "^0.40.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.5",

web/src/components/ui/typography/ShimmerText.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { cn } from '@/lib/classMerge';
 import { motion } from 'framer-motion';
 import React, { useMemo } from 'react';
 
@@ -8,6 +9,7 @@ interface ShimmerText2Props {
   colors?: string[];
   duration?: number;
   fontSize?: number;
+  className?: string;
 }
 
 const animate = {
@@ -19,7 +21,8 @@ export const ShimmerText: React.FC<ShimmerText2Props> = React.memo(
     text,
     colors = ['var(--color-foreground)', 'var(--color-text-tertiary)'],
     duration = 1.5,
-    fontSize = 13
+    fontSize = 13,
+    className = ''
   }) => {
     if (colors.length < 2) {
       throw new Error('ShimmerText requires at least 2 colors');
@@ -51,7 +54,7 @@ export const ShimmerText: React.FC<ShimmerText2Props> = React.memo(
     return (
       <>
         <motion.div
-          className="shimmer-text"
+          className={cn('shimmer-text', className)}
           style={memoizedStyle}
           animate={animate}
           transition={memoizedTransition}>

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseReasoning.tsx

@@ -37,7 +37,7 @@ export const ChatResponseReasoning: React.FC<{
 
   const text: string = useMemo(() => {
     if (finalReasoningMessage) return finalReasoningMessage;
-    if (blackBoxMessage) return blackBoxMessage + '⬛️';
+    if (blackBoxMessage) return blackBoxMessage;
     if (lastMessageTitle) return lastMessageTitle;
     return lastMessageTitle || 'Thinking...';
   }, [lastMessageTitle, finalReasoningMessage, blackBoxMessage]);
@@ -51,9 +51,13 @@ export const ChatResponseReasoning: React.FC<{
 
   return (
     <AnimatePresence initial={!isCompletedStream} mode="wait">
-      <motion.div {...animations} key={text} className="mb-3.5 w-fit" onClick={onClickReasoning}>
+      <motion.div
+        {...animations}
+        key={text}
+        className="mb-3.5 w-fit cursor-pointer"
+        onClick={onClickReasoning}>
         {isReasonginFileSelected ? (
-          <Text className="cursor-pointer hover:underline">{text}</Text>
+          <Text className="hover:underline">{text}</Text>
         ) : (
           <ShimmerText text={text ?? ''} />
         )}