okhanyu / minichat Goto Github PK

import React from 'react';

const AnonymousChatUI = () => {
  const users = {
    'Alice': 'text-blue-600',
    'Bob': 'text-green-600',
    'Charlie': 'text-purple-600',
    'Diana': 'text-red-600'
  };

  const messages = [
    { id: 1, sender: 'Alice', content: '大家好!我们来讨论一下今天的话题吧。', time: '10:00' },
    { id: 2, sender: 'Bob', content: '好的,你想讨论什么?', time: '10:02' },
    { id: 3, sender: 'Charlie', content: '我们可以谈谈最近的新闻事件。', time: '10:05' },
    { id: 4, sender: 'Diana', content: '听起来不错,我最近看到了一篇关于人工智能的有趣文章。', time: '10:07' },
    { id: 5, sender: 'Alice', content: '人工智能确实是个热门话题,你们怎么看待它对未来的影响?', time: '10:10' },
  ];

  return (
    <div className="flex flex-col h-screen bg-gray-100">
      {/* 在线用户列表 */}
      <div className="bg-white p-2 text-xs text-gray-500 border-b border-gray-200">
        在线用户：Alice, Bob, Charlie, Diana
      </div>

      {/* 聊天记录 */}
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((message) => (
          <div key={message.id} className={`mb-4 flex ${message.sender === 'Alice' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[70%] flex flex-col ${message.sender === 'Alice' ? 'items-end' : 'items-start'}`}>
              <div className={`font-semibold mb-1 ${users[message.sender]}`}>
                {message.sender}
              </div>
              <div className={`rounded-lg p-3 ${
                message.sender === 'Alice' ? 'bg-blue-100' : 'bg-gray-200'
              }`}>
                <p className="text-gray-800">{message.content}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 输入框 */}
      <div className="bg-white border-t border-gray-200 p-4">
        <div className="flex items-center">
          <input
            type="text"
            placeholder="输入消息..."
            className="flex-1 bg-gray-100 border border-gray-300 rounded-full py-2 px-4 mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>
    </div>
  );
};

export default AnonymousChatUI;