npm package: @nsprt/ai-sdk
Description: A React component library for building AI chat interfaces with a modern, clean design.
Latest version: 0.1.5

# @nsprt/ai-sdk

A React component library for building AI chat interfaces with a modern, clean design.

## Installation

Using npm:

```bash
npm install @nsprt/ai-sdk
```

Using pnpm:

```bash
# Install the package
pnpm add @nsprt/ai-sdk

# Install peer dependencies
pnpm add react@^18.0.0 react-dom@^18.0.0
```

Using yarn:

```bash
yarn add @nsprt/ai-sdk
```

### Peer Dependencies

This package has the following peer dependencies that need to be installed in your project:

```json
{
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}
```

When using pnpm, you need to explicitly install peer dependencies as they are not automatically installed.

## Requirements

This package requires:

- React 18 or higher
- Tailwind CSS for styling

## Basic Usage

Here's a complete example of how to create a chat interface:

```tsx
import { useState } from "react";
import {
  ChatContainer,
  ChatInput,
  ChatMessage,
  StopGenerationButton,
  RegenerateButton,
  ChatSuggestions,
} from "@nsprt/ai-sdk";

export default function ChatInterface() {
  const [messages, setMessages] = useState<
    Array<{ role: "user" | "assistant"; content: string }>
  >([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;

    // Add user message
    const newMessages = [...messages, { role: "user", content: input }];
    setMessages(newMessages);
    setInput("");
    setIsLoading(true);

    try {
      // Simulate AI response - replace with your actual API call
      const response = await new Promise((resolve) =>
        setTimeout(() => resolve("This is a simulated AI response."), 1000)
      );

      setMessages([
        ...newMessages,
        { role: "assistant", content: response as string },
      ]);
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleStopGeneration = () => {
    setIsLoading(false);
    // Implement your stop generation logic here
  };

  const handleRegenerate = async () => {
    if (messages.length === 0) return;
    setIsLoading(true);
    // Implement your regenerate logic here
    setIsLoading(false);
  };

  return (
    <div className='flex flex-col h-screen max-w-3xl mx-auto'>
      <ChatContainer className='flex-1 p-4'>
        {messages.map((message, index) => (
          <ChatMessage
            key={index}
            role={message.role}
            content={message.content}
          />
        ))}
        {isLoading && (
          <ChatMessage role='assistant' content='' isLoading={true} />
        )}
      </ChatContainer>

      <div className='p-4'>
        <form onSubmit={handleSubmit}>
          <ChatInput
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder='Type a message...'
            disabled={isLoading}
          >
            <div className='flex items-center gap-2'>
              {isLoading ? (
                <StopGenerationButton onClick={handleStopGeneration} />
              ) : (
                messages.length > 0 && (
                  <RegenerateButton onClick={handleRegenerate} />
                )
              )}
            </div>
          </ChatInput>
        </form>

        <ChatSuggestions
          type='common'
          onSelect={(suggestion) => setInput(suggestion.text)}
          className='mt-4'
        />
      </div>
    </div>
  );
}
```

## Components

### ChatContainer

A scrollable container for chat messages with auto-scroll functionality.

```tsx
<ChatContainer autoScroll={true}>{/* Chat messages */}</ChatContainer>
```

### ChatMessage

Displays a chat message with support for markdown content.

```tsx
<ChatMessage
  role='assistant' // 'user' | 'assistant'
  content='Hello, how can I help you?'
  isLoading={false}
/>
```

### ChatInput

A textarea component with auto-expanding height and a toolbar section.

```tsx
<ChatInput
  value={input}
  onChange={(e) => setInput(e.target.value)}
  placeholder='Type a message...'
  disabled={false}
>
  {/* Optional toolbar items */}
</ChatInput>
```

### ChatSuggestions

Displays suggestion chips for common queries or follow-up questions.

```tsx
<ChatSuggestions
  type='common' // 'common' | 'followUp'
  onSelect={(suggestion) => handleSuggestion(suggestion)}
/>
```

## Styling

This package uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project and configure it properly.

## License

MIT