Advanced UI Features

Let's explore advanced UI features that make your AI interface more dynamic and user-friendly.

In this section, we'll add suggestions, status updates, and streaming to our AI assistant.

Suggestions help users discover what your AI can do:

• Suggestions are rendered after a message and its component has been generated
• They are based on the current conversation context
• They leverage the tools and components your AI has access to

Status updates help users understand what your AI is doing:

• Status updates are rendered after a message has been received
• They give the user a visual indication of the AI's progress
• Explain the AI is thinking, using tools, or generating a response

Streaming help reduce latency by sending the response in chunks:

• Streaming starts showing the user every response as it comes in
• It's great for long responses or when you want to show the user the AI is still thinking
• It's also great for reducing the load on the server

1. Adding Suggestions

What's happening here:

• Get suggestions using the useHydraThread hook
• Display them as clickable buttons with detailed descriptions
• Accept or dismiss suggestions
• Suggestions update based on context

import { useHydraThread } from "hydra-ai-react";
 
export const MessageThread = () => {
  const { messages, operations } = useHydraThread("my-thread");
  const { suggestions } = useHydraThread("my-thread"); 
  const { items, accept, dismiss } = suggestions; 
 
  return (
    <div>
      {/* Messages */}
      <div>{/* ... existing message rendering ... */}</div>
 
      {/* Render AI Suggestions */}
      {items.length > 0 && (
        <div>
          {items.map((suggestion) => (
            <div key={suggestion.title}>
              <button
                onClick={() => accept(suggestion)}
                title={suggestion.detailedSuggestion}
              >
                {suggestion.title}
              </button>
              <button
                onClick={() => dismiss(suggestion)}
                aria-label={`Dismiss ${suggestion.title} suggestion`}
              >
                ✕
              </button>
            </div>
          ))}
        </div>
      )}
 
      {/* Input form */}
      <form>{/* ... existing form ... */}</form>
    </div>
  );
};

2. Status Updates

Show users what the AI is doing with status updates:

• Status updates are generated as soon as the message is received
• They include the 'thinking' the AI is doing to find the right tools or components
• There are 5 possible statuses: evaluating, tools, generating, complete, and error

What's happening here:

• Get the status from the useHydraThread hook
• Render different icons and messages based on the status state
• Show loading indicators when appropriate

import { useHydraThread } from "hydra-ai-react";
 
export const MessageThread = () => {
  const { messages } = useHydraThread("my-thread");
 
  const renderStatus = (status) => {
    // Status icons for each state
    const icons = {
      evaluating: "🤔",
      tools: "🔧",
      generating: "✨",
    };
 
    return (
      <div role="status">
        {icons[status.state]} {status.message}
      </div>
    );
  };
 
  return (
    <div>
      {messages.map((message: HydraThreadMessage) => (
        <div key={message.content}>
          <div>{message.content}</div>
          {/* Render AI Status Updates */}
          {message.status?.map((status, index) => (
            <div key={index}>{renderStatus(status)}</div>
          ))}
        </div>
      ))}
    </div>
  );
};

3. Streaming Responses

Latency is a big issue when it comes to AI. Streaming responses help reduce the latency by sending the response in chunks.

What's happening here:

• Enable streaming with stream: true option
• Messages automatically update as they arrive

import { useHydraThread } from "hydra-ai-react";
 
export const MessageThread = () => {
  {
    /* Same as before */
  }
 
  const handleSend = async (input: string) => {
    await operations.messages.generate(input, {
      stream: true, // [!code focus]
    });
  };
 
  {
    /* Same as before */
  }
};

Setting up streaming is that easy! Now if you want to more advanced control of streaming, you can use the useMessageStreaming & useComponentStreaming hooks.

Which gives you:

• isStreaming: Boolean flag indicating if a message is currently streaming
• abort: Function to stop the current streaming message
• validation: Validation state tracking including:
  • completedPaths: Paths that are fully received and validated
  • validPaths: Paths that are safe to use (even if incomplete)
  • errors: Any validation errors by path
  • isComplete: Whether the entire data structure is complete

This is useful when you need:

• Show partial updates in real-time
• Allow users to cancel generation
• Track completion status of different parts of the response
• Handle validation states for complex streaming data

What you have now?

• Your AI assistant can now add suggestions to the message thread
• Your AI assistant can now show AI status updates to the user
• Your AI assistant can now stream responses to the user!