group-button.tsx

Overview

group-button.tsx defines two React functional components — AssistantGroupButton and UserGroupButton — which render grouped button controls related to chat messages in a conversational UI. These components provide interactive elements such as copying message content, playing audio, feedback submission, message regeneration, and deletion.

AssistantGroupButton: Used for assistant-generated messages; supports feedback (like/dislike), audio playback, showing prompts, and copying text.
UserGroupButton: Used for user-generated messages; supports copying text, regenerating messages, and deleting messages.

These components leverage hooks for state management, translation (i18n), speech synthesis, and modal visibility, integrating with various UI elements from Ant Design and custom components.

Detailed Component Documentation

AssistantGroupButton

interface IProps {
  messageId: string;
  content: string;
  prompt?: string;
  showLikeButton: boolean;
  audioBinary?: string;
  showLoudspeaker?: boolean;
}

export const AssistantGroupButton: React.FC<IProps> = ({ ... }) => { ... }

Description

Renders a group of buttons associated with an assistant's message, enabling users to:

Copy the message content to clipboard
Play/pause the audio version of the message (if provided)
Provide feedback via like/dislike buttons and a feedback modal
View additional prompts in a modal

Parameters

Prop	Type	Description	Optional	Default
`messageId`	string	Unique identifier of the message	No	N/A
`content`	string	Text content of the message	No	N/A
`prompt`	string	Optional prompt text related to the message	Yes	undefined
`showLikeButton`	boolean	Controls visibility of like/dislike feedback buttons	No	N/A
`audioBinary`	string	Optional audio data (base64 or binary) for speech playback	Yes	undefined
`showLoudspeaker`	boolean	Whether to show the loudspeaker (audio) button	Yes	true

Return Value

JSX element rendering the group of interactive buttons and conditionally rendered modals.

Usage Example

<AssistantGroupButton
  messageId="msg-123"
  content="Hello, how can I help you?"
  prompt="Try asking about the weather."
  showLikeButton={true}
  audioBinary={audioData}
/>

Implementation Details

Uses Ant Design's Radio.Group and Radio.Button for the button group UI.
CopyToClipboard component copies the message text on click.
The loudspeaker button toggles audio playback using the useSpeech hook which manages the audio element and playback state.
Like button sends positive feedback via useSendFeedback.
Dislike button opens a FeedbackModal for detailed feedback.
The prompt button opens a PromptModal to display additional prompt information.
Modal visibility is managed via the useSetModalState and useSendFeedback hooks.
Integrates with react-i18next for localization of tooltips.

UserGroupButton

interface UserGroupButtonProps extends Partial<IRemoveMessageById> {
  messageId: string;
  content: string;
  regenerateMessage?: () => void;
  sendLoading: boolean;
}

export const UserGroupButton: React.FC<UserGroupButtonProps> = ({ ... }) => { ... }

Description

Renders a group of buttons associated with a user's message, enabling users to:

Copy the message content to clipboard
Regenerate the message (resend or update)
Delete the message

Parameters

Prop	Type	Description	Optional	Default
`messageId`	string	Unique identifier of the message	No	N/A
`content`	string	Text content of the message	No	N/A
`regenerateMessage`	() => void	Function to trigger message regeneration	Yes	undefined
`sendLoading`	boolean	Flag indicating if message is currently sending/loading	No	N/A
`removeMessageById`	() => void (optional)	Optional callback to remove message by ID	Yes	undefined

Return Value

JSX element rendering the group of buttons.

Usage Example

<UserGroupButton
  messageId="user-msg-456"
  content="What is the weather today?"
  regenerateMessage={handleRegenerate}
  sendLoading={false}
  removeMessageById={handleRemoveMessage}
/>

Implementation Details

Uses Ant Design's Radio.Group and Radio.Button for UI consistency.
CopyToClipboard component copies the message text.
Regenerate button triggers the passed regenerateMessage callback and is disabled while sending.
Delete button triggers removal of the message via a hook useRemoveMessage, which manages deletion state and loading indicator.
Tooltips provide user guidance, localized via react-i18next.

Important Implementation Details and Algorithms

Speech Playback:
The useSpeech hook encapsulates audio playback logic, including toggling play/pause and managing an audio ref. This supports playing pre-generated audio binary data associated with assistant messages.
Feedback Handling:
The useSendFeedback hook manages feedback submission lifecycle: modal visibility, loading state, and submission callback. It abstracts API calls or state updates for user feedback.
Modal State Management:
useSetModalState is a custom hook that handles visibility toggling of modals like the prompt modal, providing showModal and hideModal methods.
UI Consistency:
Using Ant Design's Radio.Group and Radio.Button ensures consistent button styling and behavior across both assistant and user message controls.
Localization:
All user-facing strings for tooltips are localized using react-i18next, enabling multi-language support.

Interaction with Other Parts of the System

CopyToClipboard Component:
Used for copying text content; likely a reusable component elsewhere.
FeedbackModal and PromptModal:
Pop-up dialogs that show detailed feedback forms and prompt details respectively.
Hooks (useSendFeedback, useRemoveMessage, useSpeech, useSetModalState):
Encapsulate logic for feedback submission, message removal, speech playback, and modal visibility, isolating side effects and state management from UI components.
Ant Design Icons and Components:
Provides UI elements such as buttons, icons (like LikeOutlined, DeleteOutlined), tooltips, and radio groups.
Translation (react-i18next):
Ensures all tooltips and UI texts are localized.
Parent Chat Components:
These button groups are likely rendered within message components to provide user interactions per chat message.

Visual Diagram

componentDiagram
    AssistantGroupButton --> CopyToClipboard : uses
    AssistantGroupButton --> useSendFeedback : uses
    AssistantGroupButton --> useSetModalState : uses
    AssistantGroupButton --> useSpeech : uses
    AssistantGroupButton --> FeedbackModal : renders
    AssistantGroupButton --> PromptModal : renders
    AssistantGroupButton --> Radio.Group : UI container
    AssistantGroupButton --> Radio.Button : UI buttons
    AssistantGroupButton --> Tooltip : UI tooltips

    UserGroupButton --> CopyToClipboard : uses
    UserGroupButton --> useRemoveMessage : uses
    UserGroupButton --> Radio.Group : UI container
    UserGroupButton --> Radio.Button : UI buttons
    UserGroupButton --> Tooltip : UI tooltips

Summary

This file provides essential interactive button groups tightly integrated with the chat message UI, offering features tailored to assistant and user messages. It emphasizes modularity through hooks and reusable components, with a strong focus on user experience via audio playback, feedback, message management, and localization. The design leverages Ant Design UI primitives for consistency and clean interaction flows.