group-button.tsx

Overview

The group-button.tsx file contains React functional components that render grouped button controls related to chat messages within an agent-user chat interface. These buttons provide interactive features such as copying message content, playing audio, sending feedback (like/dislike), showing prompts, regenerating user messages, deleting messages, and viewing logs.

This file exports two main components:

• AssistantGroupButton: Displays controls for assistant-generated messages, enabling feedback, audio playback, prompt viewing, and log inspection.

• UserGroupButton: Displays controls for user-generated messages, enabling message regeneration, deletion, and copying.

The components leverage Ant Design UI elements, custom hooks, and context to manage state and interact with the rest of the application.

Components

AssistantGroupButton

Description

Renders a set of toggle buttons that allow users to interact with assistant (AI) messages. Features include copy-to-clipboard, audio playback, feedback submission (like/dislike), prompt viewing, and viewing message logs.

Props

Usage Example

<AssistantGroupButton
  messageId="msg123"
  content="Hello, how can I assist you?"
  prompt="Did you mean to ask about pricing?"
  showLikeButton={true}
  audioBinary={audioData}
  showLoudspeaker={true}
  showLog={true}
/>

Implementation Details

• Uses useSendFeedback hook to manage feedback modal visibility, feedback submission, and loading state.

• Uses useSetModalState to manage prompt modal visibility.

• Uses useSpeech hook to handle audio playback, including play/pause state.

• Displays a ToggleGroup (single selection) containing:

  • Copy button (always shown)

  • Loudspeaker button (conditionally shown) with play/pause icon and attached audio element

  • Like and dislike buttons (conditionally shown)

  • Prompt button (if prompt exists)

  • Log button (conditionally shown)

• Shows FeedbackModal when dislike is clicked.

• Shows PromptModal when prompt button is clicked.

• Calls showLogSheet from AgentChatContext to display detailed logs for the message.

UserGroupButton

Description

Renders a group of buttons that let users interact with their own messages: copying, regenerating, or deleting messages.

Props

Usage Example

<UserGroupButton
  messageId="userMsg456"
  content="What's the weather today?"
  regenerateMessage={() => resendMessage()}
  sendLoading={false}
  removeMessageById={() => deleteMessage('userMsg456')}
/>

Implementation Details

• Uses useRemoveMessage hook to handle message deletion logic and loading state.

• Renders an Ant Design Radio.Group with buttons for:

  • Copying message content (always present)

  • Regenerating message (if regenerateMessage is provided)

  • Deleting message (if removeMessageById is provided)

• Buttons show tooltips for accessibility.

• Regenerate and delete buttons show loading spinners when their respective actions are in progress and disable interactions.

Hooks and Context Interaction

• useSendFeedback: Manages feedback modal state and submission for assistant messages.

• useSetModalState: Generic modal visibility management (used for prompt modal).

• useSpeech: Manages audio playback state and ref for assistant messages.

• useRemoveMessage: Handles deletion of user messages, providing loading feedback.

• AgentChatContext: Provides showLogSheet function to display detailed logs related to a message.

These integrations allow the buttons to trigger complex UI workflows (like modal opening, audio playback) and communicate user actions (feedback, regenerate, delete) with the backend or global state.

Important Implementation Details

• The file uses the ToggleGroup and ToggleGroupItem components to create visually consistent and accessible toggle button groups.

• Audio playback is implemented using an HTML <audio> element with a React ref, allowing play/pause toggling based on isPlaying state.

• Feedback submission distinguishes between like (direct click) and dislike (opens modal for more feedback).

• The prompt button only appears if a prompt string is passed, maintaining minimal UI clutter.

• The user message buttons use Ant Design Radio.Group and Radio.Button for a consistent look and feel.

• Loading states on regenerate and delete buttons provide immediate feedback and prevent duplicate actions.

Interaction With Other Parts of the Application

• Assets and Icons: Imports icons from Ant Design, custom icons (e.g., PromptIcon), and third-party icon libraries.

• Modals: Uses FeedbackModal and PromptModal components to gather user feedback or display extra information.

• Hooks: Relies heavily on custom hooks from the application (useSendFeedback, useRemoveMessage, useSpeech, useSetModalState) to encapsulate logic.

• Context: Uses AgentChatContext to invoke log sheet display, linking the buttons to broader agent chat functionalities.

• UI Library: Employs Ant Design and a custom ToggleGroup UI for consistent button grouping.

Visual Diagram

componentDiagram
    component AssistantGroupButton {
      +messageId: string
      +content: string
      +prompt?: string
      +audioBinary?: string
      +showLikeButton: boolean
      +showLoudspeaker?: boolean
      +showLog?: boolean
      ---
      +handleLike()
      +handleRead()
      +handleShowLogSheet()
    }

    component UserGroupButton {
      +messageId: string
      +content: string
      +regenerateMessage?: () => void
      +sendLoading: boolean
      +removeMessageById?: () => void
      ---
      +onRemoveMessage()
    }

    AssistantGroupButton --> FeedbackModal : shows/hides
    AssistantGroupButton --> PromptModal : shows/hides
    AssistantGroupButton ..> useSendFeedback : uses hook
    AssistantGroupButton ..> useSpeech : uses hook
    AssistantGroupButton ..> AgentChatContext : consumes context
    UserGroupButton ..> useRemoveMessage : uses hook

Summary

The group-button.tsx file defines grouped button components for chat messages—one for assistant messages (with rich interactivity including audio and feedback) and one for user messages (with regeneration and deletion support). It integrates tightly with custom hooks, modals, and context to provide a cohesive user experience in the chat application UI. The file focuses on presenting interactive controls that trigger various chat-related workflows while maintaining accessibility and UI consistency.