​

useUpvote

​

Purpose

The useUpvote hook is used to send an upvote for a specific chat message.

​

Usage

const [upvoteState, upvote] = useUpvote(messageId, onSuccessCallback);

​

Parameters

• id (string): The unique identifier of the chat message to be upvoted.
• onSuccess (optional function): A callback function to be executed after a successful upvote.

​

Returns

An array containing:

1. upvoteState: An object representing the current state of the upvote operation (loading, error, value).
2. upvote: A function to trigger the upvote action.

​

Implementation Details

• Sends a POST request to /chat/vote/${id} using the axiosInstance from the ChatProvider.
• Returns a message confirming the upvote action.

​

useDownvote

​

Usage

const [downvoteState, downvote] = useDownvote(messageId, onSuccessCallback);

​

Parameters

• id (string): The unique identifier of the chat message to be downvoted.
• onSuccess (optional function): A callback function to be executed after a successful downvote.

​

Returns

An array containing:

1. downvoteState: An object representing the current state of the downvote operation (loading, error, value).
2. downvote: A function to trigger the downvote action.

​

Implementation Details

• Uses useAsyncFn to manage the asynchronous DELETE request.
• Sends a DELETE request to /chat/vote/${id} using the axiosInstance from the ChatProvider.
• Returns a message confirming the downvote action.

​

Common Features

Both hooks:

• Utilize the useChat hook to access the axiosInstance for making API requests.
• Leverage useAsyncFn for efficient handling of asynchronous operations, including loading states and error handling.
• Accept an optional onSuccess callback for custom actions after successful operations.
• Are memoized based on their dependencies (axiosInstance, id, and onSuccess) to prevent unnecessary re-renders.

​

Example Usage

import React from 'react';

function ChatMessage({ serverId }) {
  const [upvoteState, upvote] = useUpvote(serverId, () => console.log('Upvoted!'));
  const [downvoteState, downvote] = useDownvote(serverId, () => console.log('Downvoted!'));

  return (
    <div>
      <button onClick={upvote} disabled={upvoteState.loading}>
        {upvoteState.loading ? 'Upvoting...' : 'Upvote'}
      </button>
      <button onClick={downvote} disabled={downvoteState.loading}>
        {downvoteState.loading ? 'Downvoting...' : 'Downvote'}
      </button>
      {upvoteState.error && <p>Error upvoting: {upvoteState.error.message}</p>}
      {downvoteState.error && <p>Error downvoting: {downvoteState.error.message}</p>}
    </div>
  );
}

​

useChat Hook

The useChat hook manages chat functionality, including sending and receiving messages, handling session management, and interacting with a socket connection.

​

Usage

const chatInterface = useChat({
  apiUrl,
  socketUrl,
  botToken,
  defaultHookSettings,
  onHandoff,
  onSessionDestroy
});

​

Return Value

The useChat hook returns an object with the following properties and methods:

​

Properties

1. state (object): The current state of the chat.

   • lastUpdated (number | null): Timestamp of the last update.
   • messages(MessageType[]): Array of chat messages.

2. session (ChatSession | null): The current chat session or null if no session exists.

3. noMessages (boolean): True if there are no messages in the chat.

4. initialData (object): Initial data for the chat, including FAQ, history, initial questions, and logo.

5. info (ReactNode | null): Information about the current state of the chat, often related to socket connection status.

6. events (TypedEventTarget): Event emitter for various chat events.

7. hookState (string): Current state of the hook (‘loading’, ‘error’, or ‘idle’).

8. settings (object): Current settings for the chat.

   • persistSession (boolean): Whether the session is being persisted.
   • useSoundEffects (boolean): Whether sound effects are enabled.

9. axiosInstance (AxiosInstance): Axios instance configured for making API calls.

​

Methods

1. recreateSession(): Clears the current session and creates a new one.

2. clearSession(): Clears the current session and all messages.

3. sendMessage(messageData: object): Sends a new message to the chat.

   • messageData.content.text (string): The text content of the message.
   • messageData.headers (optional object): Additional headers for the message.
   • messageData.user (optional object): User information.
   • messageData.query_params (optional object): Additional query parameters.

4. setSettings(newSettings: object): Updates the chat settings.

​

Functionality

• Manages the chat state, including messages and session information.
• Handles WebSocket connections for real-time communication.
• Provides methods for sending messages and managing the chat session.
• Offers event handling for various chat events (new messages, handoffs, etc.).
• Integrates with a backend API for data persistence and retrieval.
• Supports customizable settings for session persistence and sound effects.
• Handles initial data loading, including chat history and FAQ.
• Provides real-time status updates about the chat and socket connection.

This hook encapsulates the core functionality needed for implementing a chat interface, making it easier to integrate chat capabilities into a React application.