@veritone/chat-ui

A React component library for building chat interfaces that interact with veri-agents-api APIs via the @veritone/agent-sdk.

Overview

@veritone/chat-ui provides a set of reusable React components to easily integrate chat functionalities into your applications. It leverages hooks from the @veritone/agent-sdk to handle communication with APIs utilizing the veri-agents-api library, including fetching chat history, sending messages, and processing streamed responses.

Features

• Chat Thread Display: Renders a conversational thread with support for human, AI, and tool messages.
• Message Input and Controls: Provides UI for users to send messages and manage chat interactions.
• Agent SDK Integration: Seamlessly connects to the veri-agents-api through @veritone/agent-sdk's React hooks for data fetching and mutations.
• Customizable Message Rendering: Allows for custom rendering of tool calls and different message types.
• Auto-scrolling: Automatically scrolls to the bottom of the chat as new messages arrive.

Installation

npm install @veritone/chat-ui @veritone/agent-sdk
# or
yarn add @veritone/chat-ui @veritone/agent-sdk

In index.tsx or App.tsx, add this import:

import "@veritone/chat-ui/styles.css";

Usage

The core component is Thread, which provides a complete chat interface. To enable the Thread component to communicate with the veri-agents-api, you need to provide an AgentThreadApiClient instance via the AgentThreadApiClientProvider. This is typically done at a higher level in your application's component tree.

import React from 'react';
import { AgentThreadApiClient } from '@veritone/agent-sdk/thread';
import { AgentThreadApiClientProvider } from '@veritone/agent-sdk/thread/react';
import { Thread } from '@veritone/chat-ui/agents/thread';

const agentClient = new AgentThreadApiClient({
  url: 'http://localhost:5002/chat', // Replace with your agent's API endpoint
});

function MyChatApplication() {
  return (
    <AgentThreadApiClientProvider client={agentClient}>
      <div style={{ height: '500px', width: '400px', border: '1px solid #ccc' }}>
        <Thread />
      </div>
    </AgentThreadApiClientProvider>
  );
}

export default MyChatApplication;

Custom Tool UI

The Thread component can render custom UIs for tool calls. This is achieved by passing a ToolCallMapping object to the Thread component's Tools prop. The ToolCallMapping is an object where keys are tool names (strings) and values are React components that will render the UI for that tool.

Each custom tool component receives CustomToolCallComponentProps which includes the message object containing details about the tool call, such as its status and content.

Here's an example of how to define and use a custom tool UI:

import React from "react";
import { Thread, type CustomToolCallComponentProps, type ToolCallMapping } from "@veritone/chat-ui/agents/thread";
import { PrettyPrintContent } from "@veritone/chat-ui/components";
import { CircularProgress, Typography } from "@veritone-ce/design-system";

function ThrowBaseballTool({ message }: CustomToolCallComponentProps) {
  return (
    <div>
      <Typography variant="h1" style={{ margin: 0 }}>
        ⚾️{" "}
        {message.status == "success" ? (
          "✅"
        ) : message.status == "error" ? (
          "⛔️"
        ) : (
          <CircularProgress size={20} />
        )}
      </Typography>
      <PrettyPrintContent content={message.content} />
    </div>
  );
}

const customToolMapping: ToolCallMapping = {
  throw_baseball: ThrowBaseballTool,
};

function MyChatApplicationWithCustomTools() {
  return (
    <Thread
      Tools={customToolMapping}
      // ... other props
    />
  );
}

In this example, if the agent makes a tool call named throw_baseball, the ThrowBaseballTool component will be rendered to display its status and content.

Components

This library exports several components, which can be used individually or as part of the main Thread component.

• MessageMarkdown: Renders markdown content within chat messages. It utilizes the @veritone-ce/design-system/extras/markdown component for rich text display.

• HumanMessage: Displays a message originating from the human user.

• AIMessage: Displays a message from the AI agent, including indicators for tool calls.

• ToolMessage: Renders raw tool messages, typically used for displaying the output of tool executions.

• CustomToolMessageContainer: A wrapper component designed to contain custom renderings of tool messages.

• PrettyPrintContent: A utility component that formats and displays various content types (strings, JSON objects) in a human-readable format, often used within message components.

• ThreadControls: Provides the interactive elements at the bottom of the chat interface, including a text input area and a send button.

• ThreadLineItem: A foundational container component for individual entries within the chat thread, ensuring consistent layout and styling for all message types.

Development

Refer to the package.json scripts for common development tasks:

• npm run build: Builds the library.
• npm run typecheck: Checks TypeScript types.
• npm run format: Formats the code using Prettier.
• npm run lint: Lints the code using ESLint.
• npm run storybook: Starts the Storybook development server for component development and documentation.
• npm run build-storybook: Builds Storybook for deployment.