@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.

Installation

``bash
npm install @katechat/ui
`

or

`bash
yarn add @katechat/ui
`

or

`bash
pnpm add @katechat/ui
`

Peer Dependencies

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"
}
`

Features

- 🎨 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

Package Structure

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.

$3

#### 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.)

$3

#### File Controls (./controls)

- FileDropzone - Drag-and-drop file upload component

$3

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

$3

Custom React hooks:

- useIntersectionObserver - Detect element visibility for lazy loading and infinite scroll
- useTheme - Access and manage application theme

$3

- Markdown Parser - Parse and render markdown with syntax highlighting
- Supports code blocks with language detection
- KaTeX math rendering
- Syntax highlighting with highlight.js

Usage

$3

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";
`

$3

`typescript
import { ChatMessagesContainer, ChatMessagesList, FileDropzone, useTheme, useIntersectionObserver } from "@katechat/ui";
`

$3

`tsx
import { ChatMessagesContainer, ChatMessagesList } from "@katechat/ui";

function ChatView({ messages }) {
return (



);
}
`

$3

`tsx
import { FileDropzone } from "@katechat/ui";

function UploadArea() {
const handleFileDrop = (files: File[]) => {
console.log("Files uploaded:", files);
};

return ;
}
`

$3

`tsx
import { useTheme, useIntersectionObserver } from "@katechat/ui";

function MyComponent() {
const { theme, setTheme } = useTheme();

const { ref, isIntersecting } = useIntersectionObserver({
threshold: 0.5,
});

return

`tsx
import { parseMarkdown } from "@katechat/ui";

function MessageRenderer({ content }) {
const html = parseMarkdown(content);

return