npm package: @stacknet/elements
Description: Reusable UI components for building multi modal AI chat interfaces
Latest version: 0.1.1

# @stacknet/elements

Reusable UI components for building AI chat interfaces. Framework-agnostic components with no AI SDK dependencies.

## Installation

```bash
pnpm add @stacknet/elements
```

## Components

### Chat Components

- `ChatContainer` - Main chat container with flex layout
- `ChatMessages` - Scrollable messages container with auto-scroll
- `ChatScrollButton` - Floating scroll-to-bottom button
- `ChatInputArea` - Container for the chat input area
- `ChatEmptyState` - Empty state when no messages

### Prompt Input

- `PromptInput` - Form wrapper for input
- `PromptInputTextarea` - Auto-resizing textarea with IME support
- `PromptInputToolbar` - Toolbar container
- `PromptInputTools` - Tool buttons group
- `PromptInputButton` - Action button
- `PromptInputSubmit` - Submit button with status icons
- `PromptInputModelSelect` - Model selector dropdown

### Message Components

- `MessageContainer` - Message wrapper with role-based alignment
- `MessageContent` - Content box with role-based styling
- `MessageAvatar` - Avatar component
- `MessageText` - Prose-styled text wrapper
- `MessageGroup` - Groups multiple messages
- `MessageTimestamp` - Timestamp display

### Chain of Thought

- `ChainOfThought` - Collapsible container
- `ChainOfThoughtHeader` - Toggle header
- `ChainOfThoughtContent` - Animated content
- `ChainOfThoughtStep` - Step with status icon
- `ChainOfThoughtSearchResults` - Results container
- `ChainOfThoughtSearchResult` - Individual result

### Thinking/Loading

- `Shimmer` - Gradient text animation
- `StacknetThinking` - Animated fibonacci spiral dots

### Media

- `ImageCard` - Image display for generated images
- `ImageGrid` - Grid layout for multiple images
- `MusicPlayer` - Audio player with waveform

### UI Primitives

- `Button` - Button with variants
- `Textarea` - Text input
- `Select` - Dropdown select
- `Collapsible` - Collapsible container
- `Avatar` - User avatar

## Hooks

- `useScrollToBottom` - Scroll management for chat

## Types

The package provides its own types that replace ai-sdk dependencies:

- `ChatStatus` - 'idle' | 'submitted' | 'streaming' | 'error'
- `Message` - Base message interface
- `ChatHelpers` - Chat state and methods
- `ToolInvocation` - Tool call data
- `GeneratedImage` - Image generation result
- `LanguageModelUsage` - Token usage stats

## Usage

```tsx
import {
  ChatContainer,
  ChatMessages,
  ChatInputArea,
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
  MessageContainer,
  MessageContent,
  useScrollToBottom,
  type ChatStatus,
} from '@stacknet/elements';

function Chat() {
  const [status, setStatus] = useState<ChatStatus>('idle');
  const { containerRef, isAtBottom, scrollToBottom } = useScrollToBottom();

  return (
    <ChatContainer>
      <ChatMessages status={status}>
        {messages.map((msg) => (
          <MessageContainer key={msg.id} role={msg.role}>
            <MessageContent role={msg.role}>
              {msg.content}
            </MessageContent>
          </MessageContainer>
        ))}
      </ChatMessages>

      <ChatInputArea>
        <PromptInput onSubmit={handleSubmit}>
          <PromptInputTextarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <PromptInputSubmit status={status} />
        </PromptInput>
      </ChatInputArea>
    </ChatContainer>
  );
}
```

## Tailwind CSS

This package uses Tailwind CSS classes. Make sure to include the package in your Tailwind content configuration:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ...
    './node_modules/@stacknet/elements/dist/**/*.js',
  ],
};
```

## License

MIT