Phidata-stream

Text streaming with phidata, including Markdown support.

Installation

You can install the package using npm:

npm install phidata-stream

Or using yarn:

yarn add phidata-stream

Usage

The phidata-stream package provides a React hook for streaming text responses, particularly useful for AI chat applications. It also includes Markdown formatting support. Here's how to use it in your React component:

import React from 'react';
import { useAIChatStreamer, MarkdownFormatter } from 'phidata-stream';

const ChatComponent = () => {
  const { messages, streamResponse, addUserMessage } = useAIChatStreamer();

  const handleSendMessage = async (userMessage) => {
    // Add the user's message to the chat
    addUserMessage(userMessage);

    // Stream the AI's response
    await streamResponse({
      apiUrl: 'https://your-api-endpoint.com/chat',
      requestBody: {
        message: userMessage,
        // Add any other required parameters for your API
      },
    });
  };

  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index} className={msg.type === 'user' ? 'user-message' : 'ai-message'}>
          <MarkdownFormatter content={msg.content} />
        </div>
      ))}
      {/* Your chat input component here */}
    </div>
  );
};

export default ChatComponent;

API Reference

useAIChatStreamer()

This is the main hook provided by the package. It returns an object with the following properties:

• messages: An array of message objects. Each message has a type ('user' or 'ai') and a content string.
• streamResponse(options): A function to call your API and stream the response.
• addUserMessage(content: string): A function to add a user message to the chat.

streamResponse Options

The streamResponse function accepts an options object with the following properties:

• apiUrl (string, required): The URL of your API endpoint.
• headers (object, optional): Any additional headers to include in the API request.
• requestBody (object, required): The body of the request to send to the API. This should include the user's message and any other required parameters for your API.

MarkdownFormatter

This is a React component that renders Markdown content. It takes a single prop:

• content (string): The Markdown content to be rendered.

Example

Here's a more detailed example of how you might use the phidata-stream package in a chat application with Markdown support:

import React, { useState } from 'react';
import { useAIChatStreamer, MarkdownFormatter } from 'phidata-stream';

const ChatApp = () => {
  const [inputMessage, setInputMessage] = useState('');
  const { messages, streamResponse, addUserMessage } = useAIChatStreamer();

  const handleSendMessage = async () => {
    if (inputMessage.trim()) {
      addUserMessage(inputMessage);
      setInputMessage('');

      await streamResponse({
        apiUrl: 'https://your-api-endpoint.com/chat',
        requestBody: {
          message: inputMessage,
          userId: 'user123', // example of additional API parameters
        },
      });
    }
  };

  return (
    <div className="chat-container">
      <div className="message-list">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.type}`}>
            <MarkdownFormatter content={msg.content} />
          </div>
        ))}
      </div>
      <div className="input-area">
        <input
          type="text"
          value={inputMessage}
          onChange={(e) => setInputMessage(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
        />
        <button onClick={handleSendMessage}>Send</button>
      </div>
    </div>
  );
};

export default ChatApp;

Markdown Support

The MarkdownFormatter component uses react-markdown under the hood to render Markdown content. This means you can include Markdown formatting in your messages, and it will be properly rendered in the chat interface. This is particularly useful for AI responses that might include formatted text, code snippets, or lists.

Notes

• Ensure that your API endpoint supports streaming responses for this package to work effectively.
• The package assumes that the API response will be streamed in chunks of text. If your API has a different response format, you may need to adjust the package or your API to ensure compatibility.
• When using Markdown in your messages, make sure to properly escape any user-generated content to prevent XSS attacks.

License

MIT

Support

For issues, feature requests, or questions, please file an issue on the GitHub repository.