portfolio view

portfolio-view/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,35 @@
+import type { ChatMessageType } from '../../types'
+
+interface ChatMessageProps {
+  message: ChatMessageType
+}
+
+export function ChatMessage({ message }: ChatMessageProps) {
+  const isUser = message.role === 'user'
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}>
+      {!isUser && (
+        <div className="shrink-0 w-6 h-6 rounded-full bg-accent/20 border border-accent/30 flex items-center justify-center mr-2 mt-0.5">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <circle cx="6" cy="6" r="3" fill="#22d3ee" />
+            <circle cx="6" cy="6" r="5.5" stroke="#22d3ee" strokeOpacity="0.4" />
+          </svg>
+        </div>
+      )}
+
+      <div
+        className={`max-w-[80%] px-3 py-2 rounded-lg text-sm leading-relaxed font-body ${
+          isUser
+            ? 'bg-accent/15 text-zinc-100 border border-accent/20'
+            : 'bg-zinc-800 text-zinc-200 border border-zinc-700'
+        }`}
+      >
+        {message.content}
+        {message.isStreaming && (
+          <span className="inline-block w-1 h-3.5 bg-accent ml-0.5 align-text-bottom animate-pulse" />
+        )}
+      </div>
+    </div>
+  )
+}