multiple-chat-box.tsx

Overview

The multiple-chat-box.tsx file implements a React component that manages multiple chat conversations simultaneously within a user interface. It provides an interactive multi-chat environment where each chat box corresponds to a conversation thread with its own messages, settings, and controls.

This file contains two main React components:

• MultipleChatBox: The top-level container component that renders multiple chat boxes and a shared message input area.

• ChatCard: A single chat box component representing an individual conversation, displaying messages and allowing user interaction such as sending messages, applying model configurations, and managing chat boxes.

The components collaborate with various hooks and utility functions to fetch data, send messages, handle file uploads, and provide a smooth user experience by managing scrolling, loading states, and UI controls dynamically.

Components and Types

Types

type MultipleChatBoxProps = {
  controller: AbortController;
  chatBoxIds: string[];
} & Pick<
  ReturnType<typeof useAddChatBox>,
  'removeChatBox' | 'addChatBox' | 'chatBoxIds'
>;

type ChatCardProps = {
  id: string;
  idx: number;
  derivedMessages: IMessage[];
  sendLoading: boolean;
} & Pick<
  MultipleChatBoxProps,
  'controller' | 'removeChatBox' | 'addChatBox' | 'chatBoxIds'
> &
  Pick<ReturnType<typeof useClickDrawer>, 'clickDocumentButton'>;

• MultipleChatBoxProps: Properties for MultipleChatBox including an AbortController, a list of active chat box IDs, and methods for adding/removing chat boxes.

• ChatCardProps: Properties for each ChatCard including its id, index position, array of messages, loading state, controller, chat box management methods, and a callback to handle document button clicks.

ChatCard Component

A forward-ref React component representing an individual chat box in the multi-chat UI.

Props

• controller: AbortController - Controller to abort ongoing requests for this chat.

• removeChatBox(id: string): void - Function to remove this chat box.

• id: string - Unique identifier for the chat box.

• idx: number - Index of the chat box in the list.

• addChatBox(): void - Function to add a new chat box.

• chatBoxIds: string[] - List of all chat box IDs currently active.

• derivedMessages: IMessage[] - Array of messages belonging to this chat box.

• sendLoading: boolean - Loading state indicating message send in progress.

• clickDocumentButton: () => void - Callback triggered when a document-related button is clicked.

Key Functionalities

• Form Management: Uses react-hook-form with a Zod schema (LlmSettingSchema) to handle large language model (LLM) configurations per chat box.

• Message Display: Renders each message via the MessageItem component, with loading indicators if the assistant is generating a response.

• Scroll Management: Uses a custom hook useScrollToBottom to keep the message container scrolled to the latest message.

• Chat Box Controls:

  • Apply LLM model configurations to the current dialog.

  • Add or remove chat boxes based on the current position and total count.

• Imperative Handle: Exposes a method getFormData() to parent components for accessing form values.

Usage Example

const chatCardRef = useRef(null);

<ChatCard
  ref={chatCardRef}
  controller={controller}
  removeChatBox={removeChatBox}
  id="chat1"
  idx={0}
  addChatBox={addChatBox}
  chatBoxIds={['chat1', 'chat2']}
  derivedMessages={messagesForChat1}
  sendLoading={false}
  clickDocumentButton={() => console.log('Document clicked')}
/>;

// Access form data imperatively
const formData = chatCardRef.current?.getFormData();

MultipleChatBox Component

The main container component managing multiple chat boxes and the shared message input interface.

Props

• controller: AbortController - Controller for aborting requests related to message sending or fetching.

• chatBoxIds: string[] - List of chat box IDs currently active.

• removeChatBox(id: string): void - Function to remove a chat box.

• addChatBox(): void - Function to add a new chat box.

Key Functionalities

• Message State and Sending: Uses useSendMultipleChatMessage hook to manage inputs, message records per chat box, sending logic, and file uploads.

• Conversation Preparation: Uses useCreateConversationBeforeUploadDocument to prepare conversations before uploading documents.

• Send Button State: Controls button disabled states via useGetSendButtonDisabled and useSendButtonDisabled.

• PDF Drawer Modal: Displays a PDF viewer drawer triggered by document-related actions (useClickDrawer hook).

• Layout:

  • Renders all active chat boxes horizontally with spacing.

  • Provides a shared NextMessageInput for sending messages across chats.

  • Conditionally renders PdfDrawer modal for document viewing.

Usage Example

<MultipleChatBox
  controller={new AbortController()}
  chatBoxIds={['chat1', 'chat2']}
  removeChatBox={(id) => console.log('Remove chat', id)}
  addChatBox={() => console.log('Add new chat')}
/>

Important Implementation Details

• ForwardRef Usage: ChatCard uses forwardRef and useImperativeHandle to expose internal form data to its parent component.

• Message Uniqueness: Messages use a unique ID generated by buildMessageUuidWithRole for efficient React keying.

• Dynamic UI Controls: The ability to add or remove chat boxes depends on the current index and total chat box count, enforcing a maximum of three chat boxes displayed.

• Model Configuration: Each chat box includes a form to select and apply LLM configurations to the current dialog, leveraging setDialog for state updates.

• Scroll Synchronization: The chat message container automatically scrolls to the latest message on new messages or user actions.

• Document Interaction: The file supports interaction with PDF documents via a drawer modal (PdfDrawer) and a related hook (useClickDrawer).

Integration and Interaction with Other System Parts

• Hooks:

  • useSendMultipleChatMessage: Manages multiple chat messages, input state, sending, and uploading.

  • useAddChatBox: Provides methods and state for adding/removing chat boxes.

  • useClickDrawer: Manages the state and handlers for the PDF drawer modal.

  • useFetchDialog, useFetchConversation, useFetchUserInfo: Fetch dialog, conversation, and user data respectively.

  • useSetDialog: Updates the current dialog state with new configurations.

  • useScrollToBottom: Handles automatic scrolling behavior.

  • useGetSendButtonDisabled and useSendButtonDisabled: Manage send button enabled/disabled states.

• Components:

  • MessageItem: Displays individual messages within a chat.

  • NextMessageInput: UI component for inputting and sending messages.

  • PdfDrawer: Modal drawer for displaying PDF documents.

  • UI components like Card, Button, Tooltip from a design system.

• Utilities:

  • buildMessageUuidWithRole: Generates unique message keys.

  • buildMessageItemReference: Builds references for messages, likely for quoting or linking.

  • omit from lodash: Used to remove fields when applying configurations.

The file is a key part of a chat application UI, enabling parallel conversations with configurable AI models and document integration.

Component Structure Diagram

classDiagram
    class MultipleChatBox {
        +controller: AbortController
        +chatBoxIds: string[]
        +removeChatBox(id: string): void
        +addChatBox(): void
        +render()
    }

    class ChatCard {
        +controller: AbortController
        +removeChatBox(id: string): void
        +id: string
        +idx: number
        +addChatBox(): void
        +chatBoxIds: string[]
        +derivedMessages: IMessage[]
        +sendLoading: boolean
        +clickDocumentButton(): void
        +getFormData(): object
        +render()
    }

    MultipleChatBox "1" *-- "*" ChatCard : renders >

Summary

The multiple-chat-box.tsx file implements a multi-chat UI component in React that supports simultaneous chat conversations with independent message streams and LLM configurations. It leverages advanced React patterns like forwardRef and hooks for state management, data fetching, and UI responsiveness. The file is tightly integrated with chat-specific hooks and UI components, providing a rich user experience for managing multiple chat dialogues and associated document interactions.