1 files changed, 66 insertions, 0 deletions

diff --git a/renderer/src/components/ChatPane.tsx b/renderer/src/components/ChatPane.tsx
new file mode 100644
index 0000000..917d462
--- /dev/null
+++ b/renderer/src/components/ChatPane.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useRef, useEffect } from "react";
+import type { Message } from "../types";
+
+interface ChatPaneProps {
+  messages: Message[];
+  onSend: (message: string) => void;
+  isLoading: boolean;
+  disabled: boolean;
+  placeholder: string;
+}
+
+export function ChatPane({
+  messages,
+  onSend,
+  isLoading,
+  disabled,
+  placeholder,
+}: ChatPaneProps) {
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSend = () => {
+    if (!input.trim() || isLoading || disabled) return;
+    onSend(input.trim());
+    setInput("");
+  };
+
+  return (
+    <div className="chat-pane">
+      <div className="chat-messages">
+        {messages.map((msg) => (
+          <div key={msg.id} className={`message ${msg.role}`}>
+            <div className="message-content">{msg.content}</div>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="message assistant loading">
+            <div className="message-content">Thinking...</div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chat-input">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
+          placeholder={placeholder}
+          disabled={disabled || isLoading}
+        />
+        <button
+          onClick={handleSend}
+          disabled={disabled || isLoading || !input.trim()}
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}