use-send-shared-message.ts

Overview

This file provides React hooks and utility logic to facilitate sending messages in a shared chat context, particularly when interacting with external agents (such as chatbots or agentbots). It primarily handles message sending workflows that depend on URL query parameters, external input fetching, and supports different dialogue modes including task-oriented interactions.

The key responsibilities include:

• Parsing and managing shared chat-related URL search parameters.

• Determining when the send button should be disabled based on input.

• Sending messages to agent or chatbot APIs depending on the sharing source.

• Managing modal dialogs for parameter input when necessary.

• Supporting task mode dialogue where messages might be sent automatically based on external inputs.

This file plays a critical role in the messaging flow of a shared chat interface, ensuring messages are correctly composed, sent, and that UI states (like dialogs) are properly handled.

Detailed Documentation

1. useSendButtonDisabled(value: string): boolean

Purpose:
Determines whether the send button should be disabled based on the input message string.

Parameters:

• value - The current string input from the user.

Returns:

• boolean - true if the trimmed input string is empty, otherwise false.

Usage Example:

const isDisabled = useSendButtonDisabled(inputValue);
<button disabled={isDisabled}>Send</button>

Details:
Uses lodash trim to remove whitespace and checks if the resulting string is empty.

2. useGetSharedChatSearchParams(): { from: SharedFrom; sharedId: string | null; locale: string | null; data: Record<string, string>; visibleAvatar: boolean }

Purpose:
Extracts and parses relevant shared chat parameters from the URL query string.

Returns:
An object containing:

• from (SharedFrom): Source of the shared chat (e.g., agent, chatbot).

• sharedId (string | null): Identifier for the shared conversation.

• locale (string | null): Locale setting.

• data (Record<string, string>): Additional data extracted from query parameters prefixed with data_.

• visibleAvatar (boolean): Whether to show avatars; defaults to true unless explicitly set to '1' in query.

Usage Example:

const { from, sharedId, locale, data, visibleAvatar } = useGetSharedChatSearchParams();

Details:
Uses useSearchParams hook from umi to access query parameters. Filters keys starting with data_ and strips the prefix for the returned data object.

3. useSendNextSharedMessage(addEventList: (data: IEventList, messageId: string) => void)

Purpose:
Manages the process of sending the next message in a shared chat, supporting both normal chat and task modes.

Parameters:

• addEventList - Callback to add new events (messages) to the event list, given event data and a message ID.

Returns:
An object with properties and methods:

• All returned members from useSendAgentMessage hook (e.g., sendMessage, loading).

• hasError (boolean): Always false here but potentially for future use.

• parameterDialogVisible (boolean): Whether the parameter input dialog is visible.

• inputsData (external agent inputs): Data fetched from external agent inputs.

• isTaskMode (boolean): Whether the current mode is task dialogue mode.

• hideParameterDialog and showParameterDialog (functions): Controls to toggle parameter dialog visibility.

• ok(params: any[]): Function to confirm parameters and send the message.

Usage Example:

const {
  sendMessage,
  parameterDialogVisible,
  showParameterDialog,
  hideParameterDialog,
  ok,
  isTaskMode,
} = useSendNextSharedMessage(addEventList);

if (!parameterDialogVisible) {
  showParameterDialog();
}

// When parameters are ready:
ok(someParams);

Implementation Details:

• Reads the from and sharedId from URL parameters to construct the API endpoint URL (/api/v1/{agentbots|chatbots}/{conversationId}/completions).

• Fetches external agent inputs using the useFetchExternalAgentInputs hook.

• Uses a local params state to store parameters for message sending.

• Uses a ref sendedTaskMessage to ensure that in task mode, the task-triggered message is sent only once.

• Controls visibility of a parameter input modal via useSetModalState.

• ok method either sends a message immediately (in task mode) or sets parameters for sending later (normal mode).

• Automatically triggers sending in task mode if inputs are empty (runTask effect).

This hook acts as a bridge between UI components and backend APIs for sending shared messages, handling both interactive and automated task flows.

Important Implementation Details & Algorithms

• URL Parameter Parsing:
  The code dynamically extracts parameters prefixed with data_ from the URL, allowing flexible passing of arbitrary data to the shared chat context.

• Mode-based Message Sending:
  Distinguishes between normal chat mode and task mode (AgentDialogueMode.Task):

  • In task mode, if no external inputs are present, sends an empty message immediately once.

  • In normal mode, waits for user to confirm parameters before sending.

• State and Side Effects:
  Uses React hooks (useState, useEffect, useRef, useCallback) to manage asynchronous message sending and modal visibility cleanly without redundant sends.

• Modular Composition:
  Relies on other hooks and utilities (e.g., useSendAgentMessage, buildRequestBody) to handle low-level details like message construction and HTTP requests, keeping this file focused on shared message orchestration.

Interaction with Other Modules

• @/constants/chat: Provides SharedFrom constants indicating chat source.

• @/hooks/common-hooks: Provides modal state management hook useSetModalState.

• @/hooks/use-agent-request: Provides useFetchExternalAgentInputs to fetch agent inputs.

• @/pages/agent/chat/use-send-agent-message: Provides useSendAgentMessage hook and buildRequestBody utility for sending messages.

• lodash: Used for string trimming and emptiness checks.

• umi: Provides useSearchParams for URL query handling.

• ../constant: Provides AgentDialogueMode enum for dialogue mode checks.

This file acts as a layer combining these utilities/hooks to implement the shared message sending logic.

Visual Diagram

flowchart TD
    A[useSendNextSharedMessage] --> B[useGetSharedChatSearchParams]
    A --> C[useFetchExternalAgentInputs]
    A --> D[useSetModalState]
    A --> E[useSendAgentMessage]
    B --> F{Parse URL search params}
    D --> G[Modal visible state]
    E --> H[Send message to API]
    A --> I[State: params, sendedTaskMessage]
    A --> J[Callbacks: ok(), runTask()]
    J --> E
    subgraph Modal Control
        D
        G
    end
    subgraph Message Sending Flow
        I
        J
        E
    end

Diagram Explanation:

• useSendNextSharedMessage composes multiple hooks:

  • useGetSharedChatSearchParams extracts query parameters.

  • useFetchExternalAgentInputs fetches inputs for the agent.

  • useSetModalState manages parameter dialog visibility.

  • useSendAgentMessage handles actual sending of messages.

• Internal state and callbacks control when and how messages are sent.

• Modal control and message sending flows are interlinked.

Summary

use-send-shared-message.ts is a specialized utility file that provides React hooks to manage sending messages in a shared chat setting, supporting both user-driven and automated task modes. It interfaces with URL parameters, external input fetching, modal dialogs, and message sending APIs to orchestrate the message flow reliably and flexibly.

This file is an essential part of the shared chat feature, abstracting complex state and side-effect management, and enabling reusable, clean integration in UI components responsible for shared conversations.