first commit

app/components/ChatMessage.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface ChatMessageProps {
+  content: string;
+  sender: 'user' | 'bot';
+  timestamp: Date;
+}
+
+export const ChatMessage: React.FC<ChatMessageProps> = ({ content, sender, timestamp }) => {
+  // 格式化时间戳
+  const formattedTime = timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  
+  // 将消息内容按换行符分割
+  const messageParts = content.split('\n');
+
+  return (
+    <div className={`flex items-end mb-4 ${sender === 'user' ? 'justify-end' : 'justify-start'}`}>
+      {sender === 'bot' && (
+        <div className="user-avatar mr-2">
+          <span>AI</span>
+        </div>
+      )}
+      
+      <div className={`p-3 rounded-lg ${sender === 'user' ? 'message-user' : 'message-bot'}`}>
+        {messageParts.map((part, index) => (
+          <React.Fragment key={index}>
+            {part}
+            {index < messageParts.length - 1 && <br />}
+          </React.Fragment>
+        ))}
+      </div>
+      
+      {sender === 'user' && (
+        <div className="user-avatar ml-2">
+          <span>我</span>
+        </div>
+      )}
+      
+      <span className="text-xs text-gray-500 ml-2 opacity-70">
+        {formattedTime}
+      </span>
+    </div>
+  );
+};