Message Chat List

1'use client';
2 
3import React from 'react';
4import { MessageChatItem } from './message-chat-item';
5import { cn } from '@/lib/utils/deso';
6import { Reaction } from './post-reactions';
7 
8export interface Message {
9  publicKey: string;
10  message: string;
11  style?: 'rounded' | 'square';
12  timestamp: string | Date;
13  reactions?: Reaction[];
14  onReactionClick?: (emoji: string) => void;
15}
16 
17export interface MessageChatListProps {
18  messages: Message[];
19  currentUserPublicKey: string;
20  className?: string;
21  groupingVariant?: 'grouped' | 'none';
22  bubbleVariant?: 'rounded' | 'square';
23}
24 
25export function MessageChatList({
26  messages,
27  currentUserPublicKey,
28  className,
29  groupingVariant = 'grouped',
30  bubbleVariant = 'rounded',
31}: MessageChatListProps) {
32  // Group consecutive messages from the same user
33  let rendered: React.ReactNode[] = [];
34  if (groupingVariant === 'grouped') {
35    let group: Message[] = [];
36    let lastPublicKey: string | null = null;
37    messages.forEach((msg, idx) => {
38      if (msg.publicKey === lastPublicKey) {
39        group.push(msg);
40      } else {
41        if (group.length > 0) {
42          rendered.push(
43            <MessageGroup
44              key={group[0].timestamp + '-' + group[0].publicKey}
45              group={group}
46              currentUserPublicKey={currentUserPublicKey}
47              bubbleVariant={bubbleVariant}
48            />
49          );
50        }
51        group = [msg];
52        lastPublicKey = msg.publicKey;
53      }
54      // Push the last group
55      if (idx === messages.length - 1 && group.length > 0) {
56        rendered.push(
57          <MessageGroup
58            key={group[0].timestamp + '-' + group[0].publicKey}
59            group={group}
60            currentUserPublicKey={currentUserPublicKey}
61            bubbleVariant={bubbleVariant}
62          />
63        );
64      }
65    });
66  } else {
67    rendered = messages.map((msg, idx) => (
68      <MessageChatItem
69        key={msg.timestamp + '-' + idx}
70        publicKey={msg.publicKey}
71        message={msg.message}
72        timestamp={msg.timestamp}
73        isSent={msg.publicKey === currentUserPublicKey}
74        bubbleVariant={bubbleVariant}
75        reactions={msg.reactions}
76        onReactionClick={msg.onReactionClick}
77      />
78    ));
79  }
80 
81  return (
82    <div className={cn('flex flex-col gap-4', className)}>
83      {rendered}
84    </div>
85  );
86}
87 
88interface MessageGroupProps {
89  group: Message[];
90  currentUserPublicKey: string;
91  bubbleVariant: 'rounded' | 'square';
92}
93 
94// … truncated