Creating a Chat Interface

Build a chat interface for your CRM assistant to manage customer notes and emails.

Let's build a chat interface that helps users manage customer interactions through natural language.

By the end of this section you will have a chat interface that allows users to message your CRM assistant. The next sections will add the components for note generation and email drafting.

1. Creating the Component

Let's set up the chat with a customer context.

What's happening here:

We use useHydraThread to manage our conversation state
The hook provides messages and operations for the thread
We maintain a simple input state for the message field

src/components/CrmChatThread.tsx

import { useHydraThread } from "hydra-ai-react";
import { useState } from "react";
 
export const CrmChatThread = ({ threadId }: { threadId: string }) => {
  const { messages, operations } = useHydraThread(threadId);
  const [input, setInput] = useState("");
 
  const handleSend = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    await operations.generate(input);
    setInput("");
  };

Notes:

Threads are identified by a unique threadId
If you provide an existing threadId, the hook will use the existing thread

2. Displaying Messages

Now let's show the conversation.

What's happening here:

Display the conversation history
Shows both user requests and assistant responses
Renders any AI-injected components (notes/email previews)

<div>
  {messages.map((message: HydraThreadMessage, index) => (
    <div key={`${message.type}-${index}`}>
      <div>{message.content}</div>
      {message.component && (
        <div>
          {/* Render the component with its props */}
          <message.component.Component {...message.component.props} />
        </div>
      )}
    </div>
  ))}
</div>

3. Adding the Input Form

Finally, let's add the input form.

What's happening here:

Controlled input field with local state
Form submission handled by our handleSend function
Input and button are disabled while loading
Simple UX with just an input and send button

<form onSubmit={handleSend}>
  <input
    value={input}
    onChange={(e) => setInput(e.target.value)}
    placeholder="Type a message..."
    disabled={operations.status?.isLoading}
  />
  <button type="submit" disabled={operations.status?.isLoading}>
    Send
  </button>
</form>

What you have now?

A fully functional AI chat with the ability create, and save new message threads
A simple input form to send new message to the AI assistant

In the next sections, we'll add the components for note generation and email drafting.

Creating a Chat Interface

1. Creating the Component

2. Displaying Messages

3. Adding the Input Form

What you have now?

On this page