KateChat - AI Chat Interface modules collection
npm install @katechat/ui

KateChat - AI Chat Interface UI Components Library
A comprehensive collection of React components, hooks, and utilities for building AI chat interfaces. This package is extracted from the KateChat project to provide reusable UI modules for AI-powered chat applications.
``bash`
npm install @katechat/ui
or
`bash`
yarn add @katechat/ui
or
`bash`
pnpm add @katechat/ui
This package requires the following peer dependencies:
`json`
{
"@mantine/carousel": "8.3.3",
"@mantine/core": "8.3.3",
"@mantine/dates": "8.3.3",
"@mantine/form": "8.3.3",
"@mantine/hooks": "8.3.3",
"@mantine/modals": "8.3.3",
"@mantine/notifications": "8.3.3",
"@tabler/icons-react": "^3.1.0",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-redux": "^9.2.0",
"react-router-dom": "^6.23.1"
}
- šØ Built with Mantine UI - Modern, accessible components
- š¬ Chat Components - Ready-to-use chat message containers and lists
- š Modular Architecture - Import only what you need
- šÆ TypeScript - Full type safety
- šŖ Custom Hooks - Reusable React hooks
- šØ Theme Support - Customizable theming system
- š Markdown Support - Rich text rendering with code highlighting
This package is distributed with both ESM and CommonJS builds for maximum compatibility:
``
dist/
āāā esm/ # ES Module build (import)
āāā cjs/ # CommonJS build (require)
āāā types/ # TypeScript type definitions
The package automatically uses the correct build format based on your bundler and module system.
#### Chat Components (./components/chat)
- ChatMessagesContainer - Container component for chat messages with scrolling behavior
- ChatMessagesList - List component for rendering chat messages
- Chat Input - Input components for user messages
- Chat Message - Individual message display components
#### Modal Components (./components/modal)
- ImagePopup - Modal for displaying images in fullscreen
#### Icon Components (./components/icons)
- ProviderIcon - Icons for different AI providers (OpenAI, Anthropic, etc.)
#### File Controls (./controls)
- FileDropzone - Drag-and-drop file upload component
Type definitions and utilities for:
- Message Types - Chat message structures and interfaces
- Model Types - AI model configurations and metadata
- User Types - User profile and authentication types
- AI Types - AI provider and configuration types
Custom React hooks:
- useIntersectionObserver - Detect element visibility for lazy loading and infinite scroll
- useTheme - Access and manage application theme
- Markdown Parser - Parse and render markdown with syntax highlighting
- Supports code blocks with language detection
- KaTeX math rendering
- Syntax highlighting with highlight.js
The package includes pre-bundled CSS with all Mantine styles. Import it in your main entry file:
`scss`
// In your main SCSS file
@import "@katechat/ui/styles.css";
Or in your JavaScript/TypeScript:
`typescript`
// In your main entry file (e.g., index.tsx)
import "@katechat/ui/styles.css";
`typescript`
import { ChatMessagesContainer, ChatMessagesList, FileDropzone, useTheme, useIntersectionObserver } from "@katechat/ui";
`tsx
import { ChatMessagesContainer, ChatMessagesList } from "@katechat/ui";
function ChatView({ messages }) {
return (
);
}
`
`tsx
import { FileDropzone } from "@katechat/ui";
function UploadArea() {
const handleFileDrop = (files: File[]) => {
console.log("Files uploaded:", files);
};
return
}
`
`tsx
import { useTheme, useIntersectionObserver } from "@katechat/ui";
function MyComponent() {
const { theme, setTheme } = useTheme();
const { ref, isIntersecting } = useIntersectionObserver({
threshold: 0.5,
});
return
$3
`tsx
import { parseMarkdown } from "@katechat/ui";function MessageRenderer({ content }) {
const html = parseMarkdown(content);
return
;
}
`Development
This package is part of the KateChat monorepo.
$3
`bash
npm run build
`$3
`bash
npm run typecheck
`$3
`bash
npm test
`$3
`bash
npm run format
``The package includes the following built-in dependencies:
- highlight.js - Syntax highlighting for code blocks
- i18next - Internationalization framework
- lodash - Utility functions
- marked - Markdown parser
- marked-highlight - Syntax highlighting for marked
- marked-katex-extension - KaTeX math rendering for marked
Contributions are welcome! Please visit the main repository at https://github.com/artiz/kate-chat to contribute.
MIT
- GitHub Repository: https://github.com/artiz/kate-chat
- Issues: https://github.com/artiz/kate-chat/issues
- NPM Package: https://www.npmjs.com/package/@katechat/ui
For questions, issues, or feature requests, please open an issue on the GitHub repository.
---
Made with ā¤ļø by the KateChat team