Making Components Interactive

Why would we want to make our note components interactive?

Show interactive components in the message thread
Share that state with the AI backend to make followup messages more accurate

Previous sections:

Adding Components

We'll use the same note components from the previous section, but make them interactive.

Creating Interactive Components

1. Update the Note Component to Use Hydra State

Use useHydraState is a hook provided by Hydra to manage the state of the component. It works just like React's useState hook, but it's synced with the AI backend.

What's happening here:

Use the useHydraState hook to manage the state of the component
State is automatically synced with the AI backend through Hydra's context

src/components/InteractiveNote.tsx

import { useHydraState } from "hydra-ai-react";
import type { CustomerNoteProps } from "../schemas/crm-components"; 
 
export const InteractiveNote: React.FC<Readonly<CustomerNoteProps>> = ({
  title,
  content: initialContent,
  associatedLeadId,
}) => {
  const { value, setValue } = useHydraState({
    content: initialContent,
    isSaved: false,
  });
 
  return (
    <div>
      <div>
        <span>Lead ID: {associatedLeadId}</span>
        <h3>{title}</h3>
        <button
          onClick={() => setValue({ ...value, isEditing: !value.isEditing })}
        >
          {value.isSaved ? "Edit" : "Save"}
        </button>
      </div>
      {value.isEditing ? (
        <div>
          <textarea
            value={value.content}
            onChange={(e) => setValue({ ...value, content: e.target.value })}
          />
          <button onClick={() => setValue({ ...value, isSaved: true })}>
            Save
          </button>
        </div>
      ) : (
        <div>{value.content}</div>
      )}
    </div>
  );
};

We should also make the email component interactive, but we'll save that for you to try out on your own.

What you have now?

Interactive Note component that can be used in the chat interface
Now all your message threads will maintain any state changes made by the user!
State is synced with the AI backend for followup messages

Next Steps

We'll see how to add advanced features.

Making Components Interactive

Why would we want to make our note components interactive?

Creating Interactive Components

1. Update the Note Component to Use Hydra State

What you have now?

On this page