@aichatkit/ui v0.0.0-alpha.4

@aichatkit/ui

React components for building chat interfaces with Hypermode ChatKit.

Installation

npm install @aichatkit/ui

Usage

import { ChatInterface, Avatar } from '@aichatkit/ui';
import { ApolloAdapter } from '@aichatkit/apollo-adapter';
import { LocalStorageAdapter } from '@aichatkit/localstorage-adapter';
import { SendIcon, PlusIcon, XIcon } from 'lucide-react';

// Initialize adapters
const networkAdapter = new ApolloAdapter({
  apiUrl: 'https://your-api.com/graphql',
});

const storageAdapter = new LocalStorageAdapter();

// Use the chat interface in your component
function ChatApp() {
  return (
    <ChatInterface
      networkAdapter={networkAdapter}
      storageAdapter={storageAdapter}
      hypermodeStyle={true}
      sendButtonIcon={<SendIcon size={18} />}
      newConversationIcon={<PlusIcon size={18} />}
      deleteConversationIcon={<XIcon size={16} />}
      userAvatar={<Avatar initial="U" role="user" hypermodeStyle={true} />}
      assistantAvatar={<Avatar initial="A" hypermodeStyle={true} />}
    />
  );
}

Components

Main Components

• ChatInterface: Complete chat interface with messages, input, and sidebar
• ChatBubble: Individual message bubble component
• ChatSidebar: Sidebar for displaying and managing conversations
• LoadingIndicator: Loading animation for messages
• LoadingChatBubble: Message bubble with loading animation

UI Components

• Avatar: User or assistant avatar component
• Button: Reusable button component with variants
• Input: Text input field component

Styling

The components support two styling modes:

1. Default Style: Clean, neutral design with light/dark mode support
2. Hypermode Style: Dark mode with purple accents (enable with hypermodeStyle={true})

CSS

To include the base styles, import:

// Import styles directly
import '@aichatkit/ui/dist/base.css';

// Or use the path constant
import { CHATKIT_CSS_PATH } from '@aichatkit/ui';

Tailwind CSS

If you're using Tailwind CSS, add the component paths to your content configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ...
    'node_modules/@aichatkit/ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
};

License

MIT © Hypermode