diff --git a/src/components/ChatBox.jsx b/src/components/ChatBox.jsx
new file mode 100644
index 0000000..2efbfc8
--- /dev/null
+++ b/src/components/ChatBox.jsx
@@ -0,0 +1,202 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Input, Button, Avatar, Typography, List, Popover, message as antdMessage } from 'antd';
+import { SendOutlined, SmileOutlined } from '@ant-design/icons';
+import { getChatsBetweenUsers, createChat } from '../api/chat';
+import axios from 'axios';
+import './chat.css';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+// 完整表情数组
+const emojis = [
+  "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇",
+  "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚",
+  "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🤩",
+  "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣",
+  "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡", "🤬",
+  "🤯", "😳", "🥵", "🥶", "😱", "😨", "😰", "😥", "😓", "🤗",
+  "🤔", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄", "😯",
+  "😦", "😧", "😮", "😲", "🥱", "😴", "🤤", "😪", "😵", "🤐",
+  "🥴", "🤢", "🤮", "🤧", "😷", "🤒", "🤕", "🤑", "🤠", "😈",
+  "👿", "👹", "👺", "🤡", "💩", "👻", "💀", "☠️", "👽", "👾",
+  "🤖", "🎃", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿",
+  "😾", "👋", "🤚", "🖐", "✋", "🖖", "👌", "🤏", "✌️", "🤞",
+  "🤟", "🤘", "🤙", "👈", "👉", "👆", "🖕", "👇", "☝️", "👍",
+  "👎", "✊", "👊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🤝",
+  "🙏", "✍️", "💅", "🤳", "💪", "🦾", "🦵", "🦿", "🦶", "👂",
+  "🦻", "👃", "🧠", "🦷", "🦴", "👀", "👁", "👅", "👄", "💋",
+  "🩸", "💘", "💝", "💖", "💗", "💓", "💞", "💕", "💟", "❣️",
+  "💔", "❤️", "🧡", "💛", "💚", "💙", "💜", "🤎", "🖤", "🤍",
+  "💯", "💢", "💥", "💫", "💦", "💨", "🕳", "💣", "💬", "👁️‍🗨️",
+  "🗨", "🗯", "💭", "💤", "👋", "🤚", "🖐", "✋", "🖖", "👌"
+];
+
+const ChatBox = ({ senderId, receiverId }) => {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [showEmojis, setShowEmojis] = useState(false);
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const [users, setUsers] = useState({}); // {id: {username, avatar}}
+
+  const formatTime = timeStr => new Date(timeStr).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  const fetchUserInfo = async (id) => {
+    if (!id || users[id]) return;
+    try {
+      const res = await axios.get(`http://localhost:8080/user/getDecoration?userid=${id}`);
+      const info = res.data.data;
+      setUsers(u => ({ ...u, [id]: { username: info.username, avatar: info.image } }));
+    } catch (e) {
+      console.error('获取用户信息失败', e);
+      setUsers(u => ({ ...u, [id]: { username: `用户${id}`, avatar: null } }));
+    }
+  };
+
+  const fetchMessages = async () => {
+    if (!senderId || !receiverId) return;
+    try {
+      await fetchUserInfo(senderId);
+      await fetchUserInfo(receiverId);
+      const data = await getChatsBetweenUsers(senderId, receiverId);
+      setMessages(data.sort((a, b) => new Date(a.talkTime) - new Date(b.talkTime)));
+    } catch {
+      antdMessage.error('加载聊天记录失败');
+    }
+  };
+
+  useEffect(fetchMessages, [senderId, receiverId]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSend = async () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    setLoading(true);
+    const newChat = { senderId, receiverId, content: trimmed, talkTime: new Date().toISOString() };
+    try {
+      await createChat(newChat);
+      setInput('');
+      fetchMessages();
+    } catch {
+      antdMessage.error('发送失败，请重试');
+    }
+    setLoading(false);
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleEmojiInsert = emoji => {
+    const start = input.slice(0, cursorPosition);
+    const end = input.slice(cursorPosition);
+    const newText = start + emoji + end;
+    setInput(newText);
+    setShowEmojis(false);
+    setTimeout(() => {
+      const pos = start.length + emoji.length;
+      inputRef.current.focus();
+      inputRef.current.setSelectionRange(pos, pos);
+      setCursorPosition(pos);
+    }, 0);
+  };
+
+  const handleInputSelection = () => inputRef.current && setCursorPosition(inputRef.current.selectionStart);
+
+  const renderEmojiPicker = () => (
+    <div className="emoji-picker">
+      {emojis.map((e, i) => (
+        <span key={i} className="emoji-item" onClick={() => handleEmojiInsert(e)}>
+          {e}
+        </span>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="chatbox-container">
+      <div className="chatbox-header">
+        <Text strong style={{ fontSize: 20 }}>
+          🟢 Chat with {users[receiverId]?.username || receiverId}
+        </Text>
+      </div>
+
+      <div className="chatbox-content">
+        {messages.length === 0 ? (
+          <div className="no-messages">暂无聊天记录</div>
+        ) : (
+          <List
+            dataSource={messages}
+            renderItem={msg => {
+              const isSender = msg.senderId === senderId;
+              const otherId = isSender ? senderId : receiverId;
+              const user = users[otherId] || {};
+              const avatarContent = user.avatar ? (
+                <Avatar src={user.avatar} className="avatar" />
+              ) : (
+                <Avatar className="avatar">{String(otherId).slice(-2)}</Avatar>
+              );
+              return (
+                <List.Item key={msg.informationid} className={`chat-message ${isSender ? 'sender' : 'receiver'}`}>
+                  {!isSender && avatarContent}
+                  <div className="message-bubble-wrapper">
+                    <div className="message-bubble">
+                      <Text>{msg.content}</Text>
+                      <div className="message-time">{formatTime(msg.talkTime)}</div>
+                    </div>
+                  </div>
+                  {isSender && avatarContent}
+                </List.Item>
+              );
+            }}
+          />
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chatbox-footer">
+        <Popover
+          content={renderEmojiPicker()}
+          title="选择表情"
+          trigger="click"
+          open={showEmojis}
+          onOpenChange={setShowEmojis}
+          placement="topLeft"
+          overlayClassName="emoji-popover"
+          arrow={false}
+        >
+          <Button icon={<SmileOutlined />} type="text" className="emoji-btn" />
+        </Popover>
+        <TextArea
+          ref={inputRef}
+          value={input}
+          onChange={e => { setInput(e.target.value); setCursorPosition(e.target.selectionStart); }}
+          onClick={handleInputSelection}
+          onSelect={handleInputSelection}
+          onKeyUp={handleInputSelection}
+          onKeyDown={handleKeyDown}
+          placeholder="输入消息，Enter发送，Shift+Enter换行"
+          autoSize={{ minRows: 2, maxRows: 6 }}
+          disabled={loading}
+          maxLength={500}
+          showCount
+          className="chat-input"
+        />
+        <Button type="primary" icon={<SendOutlined />} onClick={handleSend} loading={loading} disabled={!input.trim()} className="send-btn">
+          发送
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBox;
\ No newline at end of file
diff --git a/src/components/chat.css b/src/components/chat.css
new file mode 100644
index 0000000..b02d961
--- /dev/null
+++ b/src/components/chat.css
@@ -0,0 +1,216 @@
+/* chat.css */
+.chatbox-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.chatbox-header {
+    padding: 16px;
+    background-color: #f0f5ff;
+    border-bottom: 1px solid #adc6ff;
+    text-align: center;
+}
+
+.chatbox-content {
+    flex: 1;
+    padding: 16px;
+    background-color: #fff;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #91d5ff transparent;
+}
+
+.chatbox-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chatbox-content::-webkit-scrollbar-thumb {
+    background-color: #91d5ff;
+    border-radius: 4px;
+}
+
+.chatbox-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.no-messages {
+    color: #999;
+    text-align: center;
+    margin-top: 40px;
+    font-size: 14px;
+}
+
+.chat-message {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 10px;
+    gap: 8px;
+    max-width: 100%;
+}
+
+.chat-message.sender {
+    justify-content: flex-end;
+}
+
+.chat-message.receiver {
+    justify-content: flex-start;
+}
+
+.message-bubble-wrapper {
+    max-width: 75%;
+}
+
+.message-bubble {
+    padding: 10px 14px;
+    border-radius: 14px;
+    font-size: 14px;
+    word-break: break-word;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.chat-message.sender .message-bubble {
+    background-color: #69c0ff;
+    color: #fff;
+    border-bottom-right-radius: 0;
+}
+
+.chat-message.receiver .message-bubble {
+    background-color: #e6f7ff;
+    color: #000;
+    border-bottom-left-radius: 0;
+}
+
+.message-time {
+    font-size: 10px;
+    color: #666;
+    margin-top: 4px;
+    text-align: right;
+}
+
+.avatar {
+    flex-shrink: 0;
+    user-select: none;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.chatbox-footer {
+    display: flex;
+    padding: 12px;
+    border-top: 1px solid #f0f0f0;
+    background-color: #fff;
+    gap: 8px;
+    align-items: flex-end;
+}
+
+.chat-input {
+    flex: 1;
+    border-radius: 8px;
+    resize: none;
+}
+
+.send-btn {
+    min-width: 80px;
+    border-radius: 8px;
+    height: 44px;
+}
+
+.emoji-btn {
+    background: white;
+    border: none;
+    padding: 6px;
+    border-radius: 8px;
+    color: #666;
+    font-size: 18px;
+    cursor: pointer;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.emoji-btn:hover {
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+.emoji-picker {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 6px;
+    padding: 10px;
+    width: 280px;
+    max-height: 260px;
+    overflow-y: auto;
+}
+
+.emoji-item {
+    font-size: 20px;
+    padding: 4px;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.emoji-item:hover {
+    transform: scale(1.2);
+    background: #f0f9ff;
+    border-radius: 4px;
+}
+
+.emoji-popover .ant-popover-inner {
+    padding: 0;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.emoji-popover .ant-popover-title {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    font-weight: bold;
+    background-color: #f9f9f9;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .chatbox-container {
+        border-radius: 0;
+        border: none;
+    }
+
+    .chatbox-header {
+        padding: 12px;
+    }
+
+    .chatbox-content {
+        padding: 12px;
+    }
+
+    .message-bubble-wrapper {
+        max-width: 85%;
+    }
+
+    .chatbox-footer {
+        padding: 8px;
+        gap: 6px;
+    }
+
+    .emoji-picker {
+        width: 240px;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .send-btn {
+        min-width: 60px;
+        height: 40px;
+    }
+
+    .emoji-btn {
+        height: 40px;
+    }
+}
\ No newline at end of file