Merge 80ac0c92ba into df4350f966

fix(ui): improve dark mode text color for attachment buttons

ui/components/ChatWindow.tsx

@@ -397,6 +397,8 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   const [isMessagesLoaded, setIsMessagesLoaded] = useState(false);
 
+  const [pendingRewrite, setPendingRewrite] = useState<{ content: string; messageId: string } | null>(null);
+
   const [notFound, setNotFound] = useState(false);
 
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -436,6 +438,12 @@ const ChatWindow = ({ id }: { id?: string }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const chatHistoryRef = useRef<[string, string][]>([]);
+
+  useEffect(() => {
+    chatHistoryRef.current = chatHistory;
+  }, [chatHistory]);
+
   const messagesRef = useRef<Message[]>([]);
 
   useEffect(() => {
@@ -478,7 +486,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
         files: fileIds,
         focusMode: focusMode,
         optimizationMode: optimizationMode,
-        history: [...chatHistory, ['human', message]],
+        history: [...chatHistoryRef.current],
       }),
     );
 
@@ -604,15 +612,22 @@ const ChatWindow = ({ id }: { id?: string }) => {
     const message = messages[index - 1];
 
     setMessages((prev) => {
-      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+      return [...prev.slice(0, messages.length >= 2 ? index - 1 : 0)];
     });
     setChatHistory((prev) => {
-      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+      return [...prev.slice(0, messages.length >= 2 ? index - 1 : 0)];
     });
 
-    sendMessage(message.content, message.messageId);
+    setPendingRewrite({content: message.content, messageId: message.messageId});
   };
 
+  useEffect(() => {
+    if (pendingRewrite) {
+      sendMessage(pendingRewrite.content, pendingRewrite.messageId);
+      setPendingRewrite(null);
+    }
+  }, [pendingRewrite]);
+
   useEffect(() => {
     if (isReady && initialMessage && ws?.readyState === 1) {
       sendMessage(initialMessage);

ui/components/MessageBox.tsx

@@ -68,7 +68,7 @@ const MessageBox = ({
   return (
     <div>
       {message.role === 'user' && (
-        <div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8')}>
+        <div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8', 'break-words')}>
           <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
             {message.content}
           </h2>

ui/components/MessageInputActions/Attach.tsx

@@ -110,7 +110,7 @@ const Attach = ({
                 <button
                   type="button"
                   onClick={() => fileInputRef.current.click()}
-                  className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
                 >
                   <input
                     type="file"
@@ -128,7 +128,7 @@ const Attach = ({
                     setFiles([]);
                     setFileIds([]);
                   }}
-                  className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
                 >
                   <Trash size={14} />
                   <p className="text-xs">Clear</p>
@@ -145,7 +145,7 @@ const Attach = ({
                   <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
                     <File size={16} className="text-white/70" />
                   </div>
-                  <p className="text-white/70 text-sm">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25
                       ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
                         '...' +

ui/components/MessageInputActions/AttachSmall.tsx

@@ -82,7 +82,7 @@ const AttachSmall = ({
                 <button
                   type="button"
                   onClick={() => fileInputRef.current.click()}
-                  className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
                 >
                   <input
                     type="file"
@@ -100,7 +100,7 @@ const AttachSmall = ({
                     setFiles([]);
                     setFileIds([]);
                   }}
-                  className="flex flex-row items-center space-x-1 text-white/70 hover:text-white transition duration-200"
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
                 >
                   <Trash size={14} />
                   <p className="text-xs">Clear</p>
@@ -117,7 +117,7 @@ const AttachSmall = ({
                   <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
                     <File size={16} className="text-white/70" />
                   </div>
-                  <p className="text-white/70 text-sm">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25
                       ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
                         '...' +