Message Inbox

1'use client';
2 
3import React, { useRef, useEffect } from 'react';
4import { MessageChatList, Message } from './message-chat-list';
5import { cn } from '@/lib/utils/deso';
6import { MessageInboxItem } from './message-inbox-item';
7import { UserSearch } from './user-search';
8import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
9import { Badge } from '@/components/ui/badge';
10import { Editor, EditorSubmitData } from './editor';
11 
12export interface ChatUser {
13  publicKey: string;
14  username?: string;
15}
16 
17export interface MessageInboxSidebarItem {
18  publicKey: string;
19  lastMessage: string;
20  lastTimestamp: string | Date;
21  unreadCount?: number;
22}
23 
24export interface MessageInboxProps {
25  users: ChatUser[];
26  currentUserPublicKey: string;
27  messages: Message[];
28  onSendMessage?: (message: string) => void;
29  selectedUserPublicKey: string;
30  onSelectUser?: (publicKey: string) => void;
31  className?: string;
32  primaryItems: MessageInboxSidebarItem[];
33  requestItems?: MessageInboxSidebarItem[];
34  onMarkAsRead?: (publicKey: string) => void;
35  onArchive?: (publicKey: string) => void;
36}
37 
38export function MessageInbox({
39  users,
40  currentUserPublicKey,
41  messages,
42  onSendMessage,
43  selectedUserPublicKey,
44  onSelectUser,
45  className,
46  primaryItems,
47  requestItems = [],
48  onMarkAsRead,
49  onArchive,
50}: MessageInboxProps) {
51  const messagesContainerRef = useRef<HTMLDivElement>(null);
52 
53  // Always scroll to bottom when messages change
54  useEffect(() => {
55    const container = messagesContainerRef.current;
56    if (container) {
57      container.scrollTop = container.scrollHeight;
58    }
59  }, [messages]);
60 
61  const handleSendMessage = (data: EditorSubmitData) => {
62    if (data.postText.trim()) {
63      onSendMessage?.(data.postText);
64    }
65  };
66 
67  return (
68    <div className={cn('flex border border-border rounded-lg overflow-hidden h-[90vh] bg-background', className)}>
69      {/* Sidebar */}
70      <aside className="w-80 border-r border-border bg-muted/30 flex flex-col">
71        <div className="p-4 border-b border-border">
72          <h2 className="text-xl font-bold mb-4">Messages</h2>
73          {onSelectUser && <UserSearch onSelectUser={onSelectUser} />}
74        </div>
75        <Tabs
76          defaultValue="primary"
77          className="flex-1 flex flex-col overflow-y-hidden gap-0"
78        >
79          <TabsList className="h-12 p-2 w-full rounded-none border-b border-border bg-accent -mb-[1px]">
80// … truncated