@katechat/ui 1.0.4 → 1.0.6

package/README.md

@@ -72,25 +72,30 @@ The package automatically uses the correct build format based on your bundler an
 ### Components
 
 #### 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.)
 
 ### Controls
 
 #### File Controls (`./controls`)
+
 - **FileDropzone** - Drag-and-drop file upload component
 
 ### Core Types & Utilities (`./core`)
 
 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
@@ -99,6 +104,7 @@ Type definitions and utilities for:
 ### Hooks (`./hooks`)
 
 Custom React hooks:
+
 - **useIntersectionObserver** - Detect element visibility for lazy loading and infinite scroll
 - **useTheme** - Access and manage application theme
 
@@ -111,22 +117,32 @@ Custom React hooks:
 
 ## Usage
 
+### Importing Styles
+
+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";
+```
+
 ### Basic Import
 
 ```typescript
-import {
-  ChatMessagesContainer,
-  ChatMessagesList,
-  FileDropzone,
-  useTheme,
-  useIntersectionObserver
-} from '@katechat/ui';
+import { ChatMessagesContainer, ChatMessagesList, FileDropzone, useTheme, useIntersectionObserver } from "@katechat/ui";
 ```
 
 ### Using Chat Components
 
 ```tsx
-import { ChatMessagesContainer, ChatMessagesList } from '@katechat/ui';
+import { ChatMessagesContainer, ChatMessagesList } from "@katechat/ui";
 
 function ChatView({ messages }) {
   return (
@@ -140,11 +156,11 @@ function ChatView({ messages }) {
 ### Using File Upload
 
 ```tsx
-import { FileDropzone } from '@katechat/ui';
+import { FileDropzone } from "@katechat/ui";
 
 function UploadArea() {
   const handleFileDrop = (files: File[]) => {
-    console.log('Files uploaded:', files);
+    console.log("Files uploaded:", files);
   };
 
   return <FileDropzone onDrop={handleFileDrop} />;
@@ -154,31 +170,27 @@ function UploadArea() {
 ### Using Custom Hooks
 
 ```tsx
-import { useTheme, useIntersectionObserver } from '@katechat/ui';
+import { useTheme, useIntersectionObserver } from "@katechat/ui";
 
 function MyComponent() {
   const { theme, setTheme } = useTheme();
-  
+
   const { ref, isIntersecting } = useIntersectionObserver({
-    threshold: 0.5
+    threshold: 0.5,
   });
 
-  return (
-    <div ref={ref}>
-      {isIntersecting && <div>Element is visible!</div>}
-    </div>
-  );
+  return <div ref={ref}>{isIntersecting && <div>Element is visible!</div>}</div>;
 }
 ```
 
 ### Using Markdown Parser
 
 ```tsx
-import { parseMarkdown } from '@katechat/ui';
+import { parseMarkdown } from "@katechat/ui";
 
 function MessageRenderer({ content }) {
   const html = parseMarkdown(content);
-  
+
   return <div dangerouslySetInnerHTML={{ __html: html }} />;
 }
 ```