Chat Conversation

1'use client'
2 
3import { ImageMessageBubble, MessageBubble } from './message-bubble'
4 
5// Import types from shared types file to avoid circular dependencies
6import type { ChatMessage } from './types'
7// Re-export for backward compatibility
8export type { ChatMessage } from './types'
9 
10import { demoMessages } from './demo/messaging'
11 
12/**
13 * ═══════════════════════════════════════════════════════════════════════════
14 * ChatConversationProps
15 * ═══════════════════════════════════════════════════════════════════════════
16 *
17 * Props for configuring a chat conversation component that displays multiple
18 * messages with support for text and image message types.
19 */
20export interface ChatConversationProps {
21  data?: {
22    /** Array of chat messages to display in the conversation. */
23    messages?: ChatMessage[]
24  }
25}
26 
27/**
28 * A chat conversation component displaying multiple messages.
29 * Supports text and image messages with avatars and status indicators.
30 *
31 * Features:
32 * - Text and image message types
33 * - Message status indicators (sent, delivered, read)
34 * - Avatar support with image URL or letter fallback
35 * - Author name and timestamp display
36 * - Own vs other message styling
37 *
38 * @component
39 * @example
40 * ```tsx
41 * <ChatConversation
42 *   data={{
43 *     messages: [
44 *       { content: "Hello!", isOwn: false, avatarFallback: "S", author: "Sarah" },
45 *       { content: "Hi there!", isOwn: true, status: "read" }
46 *     ]
47 *   }}
48 * />
49 * ```
50 */
51export function ChatConversation({ data }: ChatConversationProps) {
52  const resolved: NonNullable<ChatConversationProps['data']> = data ?? { messages: demoMessages }
53  const messages = resolved.messages
54 
55  if (!messages || messages.length === 0) {
56    return <div className="rounded-xl bg-card p-4" />
57  }
58 
59  return (
60    <div className="rounded-xl bg-card p-4 space-y-4">
61      {messages.map((message, index) => {
62        const messageType = message.type ?? 'text'
63        const isOwn = message.isOwn ?? false
64        const messageKey = message.content ? `${message.author || ''}-${message.content.slice(0, 40)}` : `msg-${index}`
65        return messageType === 'image' ? (
66          <ImageMessageBubble
67            key={messageKey}
68// … truncated