Extract MessageInput, MessageBubble and MessagePair components

modified: src/components/ChatInterface.jsx
new file: src/components/MessageBubble.jsx
new file: src/components/MessageInput.jsx
new file: src/components/MessagePair.jsx

src/components/ChatInterface.jsx

@@ -1,17 +1,14 @@
 import { useState } from "react";
+import MessageInput from "./MessageInput";
+import MessagePair from "./MessagePair";
 
 export default function ChatInterface() {
-  const [input, setInput] = useState("");
   const [chatHistory, setChatHistory] = useState([]);
 
-  const handleSend = () => {
-    if (!input.trim()) return;
-
+  const handleMessageSend = (message) => {
     const fakeResponse =
       "This is a simulated response.\nIt can span multiple lines.";
-    const newPair = { user: input, assistant: fakeResponse };
-
-    setInput("");
+    const newPair = { user: message, assistant: fakeResponse };
     setChatHistory([newPair, ...chatHistory]);
   };
 
@@ -27,51 +24,18 @@ export default function ChatInterface() {
       }}
     >
       {/* Input area */}
-      <div style={{ display: "flex", gap: "10px" }}>
-        <input
-          type="text"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Type your message..."
-          style={{ flex: 1, padding: "10px", fontSize: "16px" }}
-        />
-        <button onClick={handleSend} style={{ padding: "10px 20px" }}>
-          Send
-        </button>
+      <div>
+        <MessageInput onSend={handleMessageSend} />
       </div>
 
       {/* Chat history */}
       <div>
         {chatHistory.map((pair, index) => (
-          <div key={index} style={{ marginBottom: "16px" }}>
-            <div style={{ fontWeight: "bold", marginBottom: "4px" }}>User:</div>
-            <div
-              style={{
-                backgroundColor: "#e0f7fa",
-                padding: "10px",
-                borderRadius: "8px",
-                whiteSpace: "pre-wrap",
-                marginBottom: "4px",
-              }}
-            >
-              {pair.user}
-            </div>
-
-            <div style={{ fontWeight: "bold", margin: "8px 0 4px" }}>
-              Assistant:
-            </div>
-            <div
-              style={{
-                backgroundColor: "#f1f1f1",
-                padding: "10px",
-                borderRadius: "8px",
-                whiteSpace: "pre-wrap",
-                marginBottom: "4px",
-              }}
-            >
-              {pair.assistant}
-            </div>
-          </div>
+          <MessagePair
+            key={index}
+            userMessage={pair.user}
+            assistantMessage={pair.assistant}
+          />
         ))}
       </div>
     </div>

src/components/MessageBubble.jsx

@@ -0,0 +1,23 @@
+export default function MessageBubble({ role, content }) {
+  const isUser = role === "user";
+  const bubbleStyle = {
+    backgroundColor: isUser ? "#e0f7fa" : "#f1f1f1",
+    color: "#333",
+    padding: "10px",
+    borderRadius: "8px",
+    whiteSpace: "pre-wrap",
+    marginBottom: "4px",
+  };
+
+  const labelStyle = {
+    fontWeight: "bold",
+    marginBottom: "4px",
+  };
+
+  return (
+    <div>
+      <div style={labelStyle}>{isUser ? "User:" : "Assistant:"}</div>
+      <div style={bubbleStyle}>{content}</div>
+    </div>
+  );
+}

src/components/MessageInput.jsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+export default function MessageInput({ onSend }) {
+  const [input, setInput] = useState("");
+
+  const handleSend = () => {
+    if (!input.trim()) return;
+    onSend(input);
+    setInput("");
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "10px" }}>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Type your message..."
+        style={{ flex: 1, padding: "10px", fontSize: "16px" }}
+      />
+      <button onClick={handleSend} style={{ padding: "10px 20px" }}>
+        Send
+      </button>
+    </div>
+  );
+}

src/components/MessagePair.jsx

@@ -0,0 +1,10 @@
+import MessageBubble from "./MessageBubble";
+
+export default function MessagePair({ userMessage, assistantMessage }) {
+  return (
+    <div style={{ marginBottom: "16px" }}>
+      <MessageBubble role="user" content={userMessage} />
+      <MessageBubble role="assistant" content={assistantMessage} />
+    </div>
+  );
+}