xtablo-source/apps/main/src/components/TabloDiscussionSection.tsx

import { UserTablo } from "@xtablo/shared/types/tablos.types";
import { useEffect } from "react";
import { useChat } from "../hooks/useChat";
import { useTabloMembers } from "../hooks/tablos";
import { useUser } from "../providers/UserStoreProvider";
import { ChatMessages } from "./ChatMessages";

interface TabloDiscussionSectionProps {
  tablo: UserTablo;
  isAdmin: boolean;
}

export const TabloDiscussionSection = ({ tablo }: TabloDiscussionSectionProps) => {
  const user = useUser();
  const {
    messages,
    sendMessage,
    sendTyping,
    typingUsers,
    loadMoreMessages,
    hasMoreMessages,
    markAsRead,
  } = useChat(tablo.id);

  const { data: members = [] } = useTabloMembers(tablo.id);

  // Mark as read when opening the discussion
  useEffect(() => {
    if (messages.length > 0) {
      markAsRead();
    }
  }, [messages.length, markAsRead]);

  return (
    <div className="flex flex-col h-full overflow-hidden">
      <div className="flex-1 overflow-hidden min-h-0">
        <ChatMessages
          messages={messages}
          currentUserId={user.id}
          members={members}
          typingUsers={typingUsers}
          hasMoreMessages={hasMoreMessages}
          onLoadMore={loadMoreMessages}
          onSend={sendMessage}
          onTyping={sendTyping}
        />
      </div>
    </div>
  );
};