use-chat-logic.ts

Overview

use-chat-logic.ts defines a custom React hook useAwaitCompentData that encapsulates the logic for managing and interacting with chat messages in a conversational UI, particularly focused on handling messages that require user input before proceeding. The hook provides utility functions to extract input data from chat messages, build input lists suitable for forms, handle user submissions, and determine whether the chat is currently waiting for user interaction.

This file is part of a chat application feature where users engage in a conversation with an assistant (likely an AI or bot), and some assistant messages trigger forms to be filled out by the user. The hook abstracts and centralizes the logic needed for this interaction, improving code reuse and separation of concerns in the UI components.

Detailed Explanation

Types and Imports

• Imports:

  • MessageType — Constants for message roles/types.

  • Message — Interface describing chat message structure.

  • IMessage — Interface for UI-facing message data.

  • get from lodash — Safe getter utility.

  • React hooks: useCallback, useMemo.

  • BeginQuery — Interface/type representing user input queries.

  • buildBeginQueryWithObject — Utility to transform query inputs.

• Type IAwaitCompentData

  type IAwaitCompentData = {
    derivedMessages: IMessage[];
    sendFormMessage: (params: { inputs: Record<string, BeginQuery>; id: string }) => void;
    canvasId: string;
  };
  

  Represents the input props to the hook:

  • derivedMessages: List of current chat messages.

  • sendFormMessage: Callback to send user inputs back to the chat system.

  • canvasId: Identifier for the current chat session or canvas.

Hook: useAwaitCompentData

const useAwaitCompentData = (props: IAwaitCompentData) => { ... }

A custom React hook that manages the data and interactions related to chat messages awaiting user input.

Parameters

• props (of type IAwaitCompentData): Provides messages, a message-sending callback, and the canvas ID.

Returns

An object containing:

• getInputs(message: Message): Record<string, BeginQuery>
  Extracts the inputs object from the data field of a given message. Returns empty object if none found.
  Usage: Used internally to access the form inputs embedded in a message.

• buildInputList(message: Message): Array<BeginQuery & { key: string }>
  Converts the inputs record from a message into an array of objects, each augmented with its key.
  This is useful for rendering dynamic form fields from the message data.
  Usage: To build UI input lists.

• handleOk(message: Message): (values: BeginQuery[]) => void
  Returns a callback function that accepts an array of user input values, merges them with the original inputs, and sends them back via sendFormMessage.
  This handles user form submission based on a particular message’s input schema.
  Usage: Pass as onSubmit handler to form components.

• isWaitting: boolean
  A memoized boolean indicating if the chat is currently waiting for user input.
  Determined by checking if the last message is from the assistant and contains input data.
  Usage: To conditionally render UI states (e.g., showing a form).

Implementation Details and Algorithms

• Safe Input Extraction:
  getInputs uses lodash.get to safely access nested data (message.data.inputs) without risking runtime errors from undefined properties.

• Input List Construction:
  buildInputList transforms the object of inputs into an array, adding the original key to each input object. This facilitates iteration and rendering in React forms.

• Handling User Submission:
  handleOk combines the original inputs with user-provided values by leveraging buildBeginQueryWithObject, which presumably merges or updates the input queries appropriately. It then triggers sendFormMessage to propagate the changes upstream, referencing the current canvasId to maintain context.

• Waiting State Detection:
  isWaitting uses useMemo to efficiently compute if the last message from the assistant contains input data, thus signaling the UI should show a waiting state for user input.

Usage Example

import { useAwaitCompentData } from './use-chat-logic';
import { Message } from '@/interfaces/database/chat';

function ChatInputForm({ derivedMessages, sendFormMessage, canvasId }) {
  const { buildInputList, handleOk, isWaitting } = useAwaitCompentData({
    derivedMessages,
    sendFormMessage,
    canvasId,
  });

  if (!isWaitting) return null;

  const lastMessage = derivedMessages[derivedMessages.length - 1];

  const inputs = buildInputList(lastMessage);

  const onSubmit = handleOk(lastMessage);

  return (
    <Form inputs={inputs} onSubmit={onSubmit} />
  );
}

In this example, the hook helps the component detect if the chat is waiting for user input, builds the input list from the last assistant message, and handles form submission.

Interaction with Other Parts of the System

• Chat UI Components:
  The hook is intended to be used within React components that render the chat interface. It helps components interpret assistant messages that require user input and manage the form lifecycle.

• Message Data Layer:
  It depends on the Message and IMessage interfaces that define the structure of chat messages, linking UI representation with backend data.

• Constants and Utilities:
  Uses MessageType constants to identify assistant messages and utility functions like buildBeginQueryWithObject to process query inputs.

• Communication:
  The sendFormMessage callback allows the hook to send user inputs back to the broader chat system, possibly triggering backend calls or state updates.

Mermaid Diagram: Hook Function Flow

flowchart TD
    A[Start: useAwaitCompentData(props)] --> B{derivedMessages}
    B --> C[getInputs(message)]
    C --> D[buildInputList(message)]
    D --> E[handleOk(message) -> (values) => void]
    E --> F[sendFormMessage(inputs, canvasId)]
    B --> G[isWaitting: boolean]
    G --> H[Check last message role and data]
    H --> I{Returns true if waiting for input}

Summary

• File: use-chat-logic.ts

• Purpose: Provides a reusable React hook to manage chat messages that require user input, facilitating extraction of inputs, building forms, handling submissions, and detecting waiting states.

• Key Functions:

  • getInputs: Extracts form inputs from a message.

  • buildInputList: Converts inputs into an iterable list.

  • handleOk: Handles user form submission.

  • isWaitting: Indicates if the chat awaits user input.

• Usage: Supports chat UI components in managing form-based interactions within conversations.

• Integration: Bridges chat message data, UI rendering, and backend communication via message sending.

This modular approach helps maintain clean separation between UI components and chat logic, improving maintainability and extensibility of the chat application.