npm package: @phidata/phidata-stream
Description: Text streaming with phidata.
Author: anuragts
Latest version: 1.5.2

# Phidata-stream

Text streaming with phidata, including Markdown support.

## Installation

You can install the package using npm:

```bash
npm install phidata-stream
```

Or using yarn:

```bash
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:

```jsx
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:

```jsx
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.