FeaturesComponents

Introduction

In the AgentForge Playground tutorial, we briefly mentioned the use of reusable React components and hooks to build a dynamic and interactive UI. These components not only streamline the development process but also ensure consistency and reusability across different parts of your application. This article delves deeper into the reusable components available in AgentForge and demonstrates how to effectively use them.

Reusable React Components and Hooks

AgentForge provides a set of reusable components and hooks that simplify the creation of complex UIs. Among the key components are Chat and ChatInput, which are essential for building interactive chat interfaces. These components are tied together using the useAgents custom hook.

The `Chat` Component

The Chat component is designed to display a series of messages in a conversational format. It supports various configurations, including custom avatars and message formatting, making it highly flexible for different use cases.

The `ChatInput` Component

The ChatInput component provides a user-friendly interface for typing and submitting messages. It handles user input efficiently and integrates seamlessly with the Chat component.

The `useAgents` Hook

The useAgents hook is a custom hook that manages the state and logic for interacting with agents. It handles message state, typing indicators, and form submissions, making it easy to integrate agent interactions into your application.

Example: Using the `Chat` and `ChatInput` Components

Here's a detailed example demonstrating how to use the Chat and ChatInput components together with the useAgents hook to build an interactive chat interface in the AgentForge Playground.

app/components/Playground.ts

1import Chat from '@/components/Chat';
2import ChatInput from '@/components/ChatInput';
3import useAgents from '@/hooks/useAgents';
4
5function Playground() {
6    const [messages, isTyping, handleSubmit] = useAgents();
7
8    return (
9        <div>
10            <ChatInput onSubmit={handleSubmit} />
11            <Chat
12                messages={messages}
13                isTyping={isTyping}
14                roleConfig={{
15                    supervisor: {
16                        img: supervisorImg,
17                        position: 'start',
18                    },
19                    Researcher: { img: DEFAULT_AVATAR_IMG },
20                    Presenter: { img: DEFAULT_AVATAR_IMG },
21                }}
22            />
23        </div>
24    );
25}
26
27export default Playground;

Explanation:

Import Components and Hooks: Import the Chat and ChatInput components, as well as the useAgents hook.

Initialize Hook: Use the useAgents hook to manage message state, typing indicators, and form submission handling.

Render Components: Render the ChatInput component for user input and the Chat component to display the conversation. The roleConfig prop in the Chat component allows customization of avatars and positions for different roles.

Component Configuration

The roleConfig prop in the Chat component allows you to configure different roles, providing custom avatars and positions. This enhances the user experience by visually distinguishing between different participants in the conversation.

1roleConfig={{
2    supervisor: {
3        img: supervisorImg,
4        position: 'start',
5    },
6    Researcher: { img: DEFAULT_AVATAR_IMG },
7    Presenter: { img: DEFAULT_AVATAR_IMG },
8}}

Custom Hook: `useAgents`

The useAgents hook simplifies the management of agent interactions by providing a streamlined interface for message handling and state management.

1const [messages, isTyping, handleSubmit] = useAgents();

messages: An array of messages to be displayed in the Chat component.

isTyping: A boolean indicating whether the agent is currently typing.

handleSubmit: A function to handle the submission of new messages.

Conclusion

The reusable React components and hooks provided by AgentForge, such as Chat, ChatInput, and useAgents, significantly simplify the process of building interactive and dynamic UIs. By leveraging these components, you can create consistent and maintainable applications with ease.

FeaturesComponents

Introduction

Reusable React Components and Hooks

The Chat Component

The ChatInput Component

The useAgents Hook

Example: Using the Chat and ChatInput Components