初始提交：CodingRoom 机器人与 AI 平台

components/ChatBot.tsx

@@ -0,0 +1,96 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { getRoboticsChatResponse } from '../services/geminiService';
+import { Message } from '../types';
+import { BrainIcon } from './SVGIcons';
+
+const ChatBot: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading]);
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return;
+
+    const userMsg: Message = { role: 'user', text: input };
+    setMessages(prev => [...prev, userMsg]);
+    setInput('');
+    setIsLoading(true);
+
+    const botResponse = await getRoboticsChatResponse(messages, input);
+    
+    setMessages(prev => [...prev, { role: 'model', text: botResponse }]);
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="flex flex-col h-[600px] w-full max-w-2xl mx-auto glass rounded-2xl overflow-hidden shadow-2xl border border-blue-500/20">
+      <div className="bg-blue-600/20 p-4 border-b border-blue-500/30 flex items-center gap-3">
+        <BrainIcon />
+        <div>
+          <h3 className="font-bold text-blue-400">机器人专家助手</h3>
+          <p className="text-xs text-slate-400">由 CodingRoom AI 驱动</p>
+        </div>
+      </div>
+
+      <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
+        {messages.length === 0 && (
+          <div className="text-center py-20 text-slate-500 italic">
+            "你可以问我关于 ROS2、逆运动学，或者如何为你的下一个机器人编程。"
+          </div>
+        )}
+        {messages.map((msg, i) => (
+          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div className={`max-w-[80%] p-3 rounded-2xl text-sm ${
+              msg.role === 'user' 
+              ? 'bg-blue-600 text-white rounded-tr-none shadow-lg' 
+              : 'bg-slate-800 text-slate-200 rounded-tl-none border border-slate-700'
+            }`}>
+              {msg.text}
+            </div>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="bg-slate-800 p-3 rounded-2xl rounded-tl-none border border-slate-700">
+              <div className="flex gap-1">
+                <span className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce"></span>
+                <span className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce [animation-delay:0.2s]"></span>
+                <span className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce [animation-delay:0.4s]"></span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="p-4 bg-slate-900/50 border-t border-slate-800">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+            placeholder="输入你的机器人技术问题..."
+            className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-white"
+          />
+          <button 
+            onClick={handleSend}
+            disabled={isLoading}
+            className="bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white px-5 py-2 rounded-lg transition-all font-medium text-sm shadow-lg shadow-blue-500/20"
+          >
+            发送
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBot;

components/SVGIcons.tsx

@@ -0,0 +1,27 @@
+
+import React from 'react';
+
+// Added missing BrainIcon component used in ChatBot header
+export const BrainIcon = () => (
+  <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+  </svg>
+);
+
+export const CuteRobot = ({ className }: { className?: string }) => (
+  <svg viewBox="0 0 200 200" className={className} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="100" cy="100" r="90" fill="#fef3c7" />
+    <rect x="60" y="70" width="80" height="70" rx="20" fill="#f97316" stroke="#431407" strokeWidth="4" />
+    <circle cx="85" cy="95" r="8" fill="white" />
+    <circle cx="115" cy="95" r="8" fill="white" />
+    <path d="M85 120 Q100 130 115 120" stroke="white" strokeWidth="4" strokeLinecap="round" />
+    <rect x="95" y="45" width="10" height="25" fill="#431407" />
+    <circle cx="100" cy="40" r="10" fill="#a855f7" />
+  </svg>
+);
+
+export const FunGear = () => (
+  <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+  </svg>
+);