Correct react implementation of rust backend

web-app/src/components/ui/chat/chat-window.jsx

@@ -4,10 +4,11 @@ import { MARKDOWN_COMPONENTS } from "src/config/markdown";
 
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
+  const isError = !!message.error;
   return (
     <div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
       <div
-        className={`p-3 rounded-xl  ${isUser ? "bg-indigo-600 text-white rounded-tr-sm" : "bg-gray-700 text-slate-100 rounded-tl-sm"}`}
+        className={`p-3 rounded-xl ${isUser ? "bg-indigo-600 text-white rounded-tr-sm" : "bg-gray-700 text-slate-100 rounded-tl-sm"} ${isError ? "border border-red-500/60 bg-red-900/50" : ""}`}
       >
         {isUser ? (
           <div className="text-sm">{message.content}</div>
@@ -22,12 +23,21 @@ function MessageBubble({ message }) {
 }
 
 export default function ChatWindow({ messages }) {
+  const bottomRef = useRef(null);
+
+  useEffect(() => {
+    if (bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages]);
+
   return (
     <div className="flex-1 overflow-auto px-2 pt-4 pb-32">
       <div className="">
         {messages.map((m, i) => (
-          <MessageBubble key={i} message={m} />
+          <MessageBubble key={m.id ?? i} message={m} />
         ))}
+        <div ref={bottomRef} />
       </div>
     </div>
   );