hazo_chat 2.0.9 → 2.0.11

package/README.md

@@ -119,7 +119,178 @@ See `test-app/src/app/globals.css` for complete variable definitions with exampl
 
 ### UI Design Standards
 
-For detailed visual design specifications, component behavior, and layout standards, see [UI_DESIGN_STANDARDS.md](./UI_DESIGN_STANDARDS.md).
+This section defines the visual design standards and component behavior specifications for hazo_chat. All consuming projects should follow these standards to ensure consistent UI appearance and behavior.
+
+#### Visual Design Elements
+
+**Document Preview Icon:**
+- Location: Empty state in document viewer (`HazoChatDocumentViewer`)
+- Icon: `IoDocumentOutline` (from `react-icons/io5`)
+- Size: `w-12 h-12` (48px × 48px)
+- Opacity: `opacity-50`
+- Text: "Select a document to preview" in `text-sm`
+
+**REFERENCES Section Font:**
+- Location: References section header
+- Font size: `text-[9px]` (9px)
+- Font weight: `font-medium`
+- Text transform: `uppercase`
+- Letter spacing: `tracking-wider`
+- Color: `text-muted-foreground`
+
+**Input Area Padding:**
+- Location: Chat input container (`HazoChatInput`)
+- Padding: `p-4` (16px on all sides)
+- Border: `border-t` (top border only)
+- Background: `bg-background`
+
+**Message Timestamp Display:**
+- Location: Chat bubble footer (`ChatBubble`)
+- Only timestamp is displayed (no status icons for sent/unread messages)
+- Font size: `text-xs`
+- Color: `text-muted-foreground`
+- Format: 24-hour format (e.g., "10:37 AM", "15:51")
+- Timezone: Respects `timezone` prop (default: "GMT+10")
+
+**Read Receipt Indicator:**
+- Location: Chat bubble footer, after timestamp
+- Icon: `IoCheckmarkDoneSharp` (from `react-icons/io5`)
+- Size: `h-4 w-4` (16px × 16px)
+- Color: `text-green-500`
+- Display condition: Only shown when `read_at` is not null AND message is from sender
+- Position: After timestamp with `gap-1` spacing
+
+#### Component Behavior
+
+**Close Button:**
+- Visibility: Always visible when `on_close` prop is provided to `HazoChat` component
+- Icon: `IoClose` (from `react-icons/io5`)
+- Size: `h-8 w-8` (32px × 32px)
+- Variant: `ghost`
+- Hover state: `hover:bg-destructive/10 hover:text-destructive`
+- Position: Top-right of header, after refresh button
+
+**Hamburger Menu Button:**
+- Desktop behavior: Hidden (`md:hidden` class)
+- Mobile behavior: Visible on screens < 768px
+- Purpose: Toggle document viewer sidebar on mobile
+- Icon: `IoMenuOutline` (from `react-icons/io5`)
+- Size: `h-8 w-8` (32px × 32px)
+- Position: Top-left of header, before title
+
+**Important:** If hamburger button appears on desktop, check Tailwind CSS configuration and ensure `md:` breakpoint utilities are working correctly.
+
+**Document Viewer Toggle Button:**
+- Icon: Chevron (`IoChevronBack` when expanded, `IoChevronForward` when collapsed)
+- Size: `h-8 w-6` (32px height × 24px width)
+- Position: Absolute, vertically centered between columns
+- Variant: `outline`
+- Border: `rounded-r-md rounded-l-none border-l-0`
+- Behavior: Smooth transitions with `transition-all duration-300`
+- Desktop: Visible when document viewer column is present
+- Mobile: Hidden when sidebar is closed
+
+**References Section Collapse/Expand:**
+- Collapsed height: `max-h-8`
+- Expanded height: `max-h-96`
+- Transition: `transition-all duration-300 ease-in-out`
+- Indicator: Chevron icon (`IoChevronDown` when collapsed, `IoChevronUp` when expanded)
+- Default state: Collapsed when no references, expanded when references exist
+
+#### Layout Standards
+
+**Chat Input Area:**
+- Layout: Flex container with `flex items-center gap-2`
+- Components: Single `Input` field and Send button (`Button` with `IoSend` icon)
+- No attachment buttons: Attachment/image buttons removed for simplified design
+- Input padding: `p-4` on container
+- Button alignment: Aligned with input height using flex
+
+**Button Alignment and Sizing:**
+- Send button: Standard button size, aligned with input
+- All interactive buttons: Consistent sizing for visual harmony
+- Icon sizes within buttons: `w-4 h-4` (16px × 16px)
+
+**Responsive Breakpoints:**
+- Mobile: < 768px (default)
+- Desktop: >= 768px (`md:` prefix)
+- Standard Tailwind breakpoints used throughout
+
+#### Container Requirements
+
+**Important:** When wrapping HazoChat in containers (e.g., Card components):
+
+1. **Avoid nested `overflow-hidden`**: Nested overflow-hidden containers can clip rounded corners. Use overflow-hidden only on the HazoChat component itself.
+
+2. **Padding**: If wrapping in a Card, ensure proper padding is maintained. Avoid `p-0` on CardContent as it may affect internal spacing.
+
+3. **Tailwind Configuration**: Ensure `./node_modules/hazo_chat/dist/**/*.{js,ts,jsx,tsx}` is included in your Tailwind `content` array so all utility classes (including `rounded-*` classes) are compiled.
+
+#### Typography
+
+**Font Families:**
+- Primary: System font stack or custom font via `--font-sans` CSS variable
+- Monospace: System monospace or custom font via `--font-mono` CSS variable
+
+**Font Sizes:**
+- Header title: `text-sm` (14px)
+- Header subtitle: `text-xs` (12px)
+- Message text: `text-sm` (14px)
+- Timestamp: `text-xs` (12px)
+- References header: `text-[9px]` (9px)
+- Empty state text: `text-sm` (14px)
+
+#### Spacing and Padding
+
+**Standard Padding Values:**
+- Container padding: `p-4` (16px)
+- Header padding: `px-4` (16px horizontal)
+- Message bubble padding: `px-4 py-2` (16px horizontal, 8px vertical)
+- Gap between elements: `gap-2` (8px) or `gap-1` (4px) for tight spacing
+
+#### Animation and Transitions
+
+**Standard Transitions:**
+- Component state changes: `transition-all duration-300`
+- Hover states: `transition-colors`
+- Smooth animations for expand/collapse: `ease-in-out`
+
+**Loading States:**
+- Skeleton loaders for initial message load
+- Spinner animation for refresh button when loading
+
+#### Accessibility
+
+**ARIA Labels:**
+All interactive elements must have appropriate ARIA labels:
+- Input fields: `aria-label="Message input"`
+- Buttons: `aria-label` describing action (e.g., "Send message", "Refresh chat history")
+- Close button: `aria-label="Close chat"`
+- Toggle buttons: `aria-label` and `aria-expanded` attributes
+
+**Keyboard Navigation:**
+- Send message: Enter key
+- Close dialogs: Escape key (handled by Alert Dialog component)
+
+#### Component Dependencies
+
+**Required External Components:**
+The following components must be available in consuming projects:
+1. **AlertDialog** (shadcn/ui style) - Used for user acknowledgment dialogs, not included in hazo_chat package
+2. **Toaster** (from `sonner` package) - Used for toast notifications, must be added to root layout with `position="top-right"` and `richColors` prop
+
+**Included Components:**
+The following UI components are included in hazo_chat package:
+- Button, Input, Textarea, Avatar, ScrollArea, Tooltip, Separator, Badge
+- ChatBubble (chat-specific), LoadingSkeleton (chat-specific)
+
+**Example References:**
+For complete implementation examples, see:
+- `test-app/src/app/page.tsx` - Usage example
+- `test-app/src/app/layout.tsx` - Toaster setup
+- `test-app/src/components/ui/alert-dialog.tsx` - Alert Dialog implementation
+- `test-app/src/app/globals.css` - CSS variables example
+- `test-app/tailwind.config.ts` - Tailwind configuration example
 
 ## Quick Start
 
@@ -173,6 +344,7 @@ hazo_chat requires these API endpoints:
 |----------|--------|-------------|
 | `/api/hazo_chat/messages` | GET | Fetch chat messages |
 | `/api/hazo_chat/messages` | POST | Send a new message |
+| `/api/hazo_chat/unread_count` | GET | Get unread message counts by reference_id (optional) |
 | `/api/hazo_auth/me` | GET | Get current authenticated user |
 | `/api/hazo_auth/profiles` | POST | Fetch user profiles by IDs |
 
@@ -201,6 +373,157 @@ export { GET, POST };
 
 If you need more control, implement the endpoints manually. See [SETUP_CHECKLIST.md](./SETUP_CHECKLIST.md) for detailed examples.
 
+## Library Functions
+
+hazo_chat provides server-side library functions that can be used in API routes, server components, or server actions.
+
+### hazo_chat_get_unread_count
+
+Get unread message counts grouped by reference_id for a receiver user.
+
+**Purpose:** Returns an array of reference IDs with the count of unread messages (where `read_at` is `null`) for a given receiver user ID. Useful for displaying unread message badges or notifications.
+
+**Usage:**
+
+```typescript
+import { createUnreadCountFunction } from 'hazo_chat/api';
+import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+
+// Create the function using the factory
+const hazo_chat_get_unread_count = createUnreadCountFunction({
+  getHazoConnect: () => getHazoConnectSingleton()
+});
+
+// Use the function
+const unreadCounts = await hazo_chat_get_unread_count('receiver-user-id-123');
+// Returns: [
+//   { reference_id: 'ref-1', count: 5 },
+//   { reference_id: 'ref-2', count: 3 },
+//   { reference_id: '', count: 1 }  // Empty reference_id for general messages
+// ]
+```
+
+**Return Type:**
+
+```typescript
+interface UnreadCountResult {
+  reference_id: string;  // The reference ID (empty string for messages without reference)
+  count: number;         // Number of unread messages for this reference
+}
+```
+
+**Function Behavior:**
+- Only counts messages where `read_at` is `null` and `deleted_at` is `null`
+- Groups results by `reference_id`
+- Sorts results by count (descending - most unread first)
+- Returns empty array if no unread messages found
+- Returns empty array on errors (doesn't throw)
+
+**Example: API Route Implementation**
+
+```typescript
+// app/api/hazo_chat/unread_count/route.ts
+import { createUnreadCountFunction } from 'hazo_chat/api';
+import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+const hazo_chat_get_unread_count = createUnreadCountFunction({
+  getHazoConnect: () => getHazoConnectSingleton()
+});
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const receiver_user_id = searchParams.get('receiver_user_id');
+
+    if (!receiver_user_id) {
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: 'receiver_user_id is required',
+          unread_counts: []
+        },
+        { status: 400 }
+      );
+    }
+
+    const unread_counts = await hazo_chat_get_unread_count(receiver_user_id);
+
+    return NextResponse.json({
+      success: true,
+      receiver_user_id,
+      unread_counts,
+      total_references: unread_counts.length,
+      total_unread: unread_counts.reduce((sum, item) => sum + item.count, 0)
+    });
+  } catch (error) {
+    const error_message = error instanceof Error ? error.message : 'Unknown error';
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: error_message,
+        unread_counts: []
+      },
+      { status: 500 }
+    );
+  }
+}
+```
+
+**Example: Server Component Usage**
+
+```typescript
+// app/chat/unread-badge.tsx
+import { createUnreadCountFunction } from 'hazo_chat/api';
+import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+
+const hazo_chat_get_unread_count = createUnreadCountFunction({
+  getHazoConnect: () => getHazoConnectSingleton()
+});
+
+export default async function UnreadBadge({ 
+  receiver_user_id 
+}: { 
+  receiver_user_id: string 
+}) {
+  const unread_counts = await hazo_chat_get_unread_count(receiver_user_id);
+  const total_unread = unread_counts.reduce((sum, item) => sum + item.count, 0);
+
+  if (total_unread === 0) return null;
+
+  return (
+    <div className="flex gap-2">
+      {unread_counts.map((item) => (
+        <div key={item.reference_id || 'general'}>
+          <span>{item.reference_id || 'General'}: {item.count}</span>
+        </div>
+      ))}
+      <span>Total: {total_unread}</span>
+    </div>
+  );
+}
+```
+
+**Example: Server Action Usage**
+
+```typescript
+// app/actions/chat.ts
+'use server';
+
+import { createUnreadCountFunction } from 'hazo_chat/api';
+import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+
+const hazo_chat_get_unread_count = createUnreadCountFunction({
+  getHazoConnect: () => getHazoConnectSingleton()
+});
+
+export async function getUnreadCounts(receiver_user_id: string) {
+  return await hazo_chat_get_unread_count(receiver_user_id);
+}
+```
+
 ## Props Reference
 
 ### HazoChatProps
@@ -219,6 +542,9 @@ If you need more control, implement the endpoints manually. See [SETUP_CHECKLIST
 | `title` | `string` | ❌ | - | Chat header title |
 | `subtitle` | `string` | ❌ | - | Chat header subtitle |
 | `on_close` | `() => void` | ❌ | - | Close button callback |
+| `show_sidebar_toggle` | `boolean` | ❌ | `false` | Show sidebar toggle button (hamburger menu) |
+| `show_delete_button` | `boolean` | ❌ | `true` | Show delete button on chat bubbles |
+| `bubble_radius` | `'default' \| 'full'` | ❌ | `'default'` | Bubble border radius style: `'default'` (rounded with tail) or `'full'` (fully round) |
 | `className` | `string` | ❌ | - | Additional CSS classes |
 
 ### Example with All Props
@@ -242,6 +568,186 @@ If you need more control, implement the endpoints manually. See [SETUP_CHECKLIST
 />
 ```
 
+## Customization
+
+hazo_chat provides props to customize component appearance and behavior without needing CSS overrides. This eliminates the need for extensive CSS customizations in consuming projects.
+
+### Common Customizations
+
+#### Hide Sidebar Toggle Button (Hamburger Menu)
+
+By default, the sidebar toggle button is hidden (`show_sidebar_toggle={false}`). To show it:
+
+```tsx
+<HazoChat
+  receiver_user_id="user-123"
+  show_sidebar_toggle={true}  // Show hamburger menu button
+/>
+```
+
+#### Hide Delete Button on Chat Bubbles
+
+To hide the delete button on chat bubbles:
+
+```tsx
+<HazoChat
+  receiver_user_id="user-123"
+  show_delete_button={false}  // Hide delete button
+/>
+```
+
+#### Make Chat Bubbles Fully Round
+
+To make all chat bubbles fully round (instead of the default style with a tail):
+
+```tsx
+<HazoChat
+  receiver_user_id="user-123"
+  bubble_radius="full"  // Fully round all corners
+/>
+```
+
+### Customization Props Summary
+
+| Prop | Default | Options | Description |
+|------|--------|---------|------------|
+| `show_sidebar_toggle` | `false` | `boolean` | Show/hide the hamburger menu button |
+| `show_delete_button` | `true` | `boolean` | Show/hide delete button on chat bubbles |
+| `bubble_radius` | `'default'` | `'default' \| 'full'` | Bubble border radius style |
+
+### Example: Full Customization
+
+```tsx
+<HazoChat
+  receiver_user_id="user-123"
+  reference_id="project-456"
+  show_sidebar_toggle={false}    // Hide hamburger menu
+  show_delete_button={false}     // Hide delete buttons
+  bubble_radius="full"            // Fully round bubbles
+  title="Project Chat"
+  className="h-[600px]"
+/>
+```
+
+### Why Use Props Instead of CSS?
+
+Using props instead of CSS overrides provides:
+- **Type safety**: TypeScript will catch invalid values
+- **Consistency**: Ensures all instances use the same styling
+- **Maintainability**: Easier to update across the codebase
+- **No CSS conflicts**: Avoids specificity issues with Tailwind utilities
+
+If you need more advanced styling that isn't covered by props, you can still use CSS overrides, but props should cover most common customization needs.
+
+## Checking for Messages
+
+If you need to check whether messages exist for a given reference (without loading all messages), you can call the messages API endpoint directly. This is useful for showing indicators or badges.
+
+**Important:** The API requires `receiver_user_id` as a query parameter and returns an object response, not a direct array.
+
+### Correct API Usage Pattern
+
+```typescript
+// ✅ CORRECT: Include receiver_user_id and handle object response
+async function checkMessagesExist(
+  recipient_user_id: string,
+  reference_id: string,
+  reference_type?: string
+): Promise<boolean> {
+  const params = new URLSearchParams({
+    receiver_user_id: recipient_user_id,  // ✅ Required parameter
+    reference_id,
+    ...(reference_type && { reference_type }),
+  });
+
+  const response = await fetch(`/api/hazo_chat/messages?${params.toString()}`, {
+    credentials: 'include'
+  });
+
+  if (!response.ok) {
+    return false;
+  }
+
+  const data = await response.json();
+  
+  // ✅ Handle object response format: { success: true, messages: [], current_user_id }
+  const messages = data.messages || data;  // Handle both object and array responses
+  const has_messages_result = Array.isArray(messages) && messages.length > 0;
+  
+  return has_messages_result;
+}
+```
+
+### Common Mistakes to Avoid
+
+```typescript
+// ❌ WRONG: Missing receiver_user_id parameter
+const params = new URLSearchParams({
+  reference_id,
+  ...(reference_type && { reference_type }),
+});
+// This will return a 400 error: "receiver_user_id is required"
+
+// ❌ WRONG: Expecting direct array response
+const data = await response.json();
+const has_messages_result = Array.isArray(data) && data.length > 0;
+// This fails because API returns: { success: true, messages: [], current_user_id }
+```
+
+### Example: Custom Hook Implementation
+
+```typescript
+'use client';
+
+import { useState, useEffect } from 'react';
+
+function useChatMessagesCheck(
+  recipient_user_id: string,
+  reference_id: string,
+  reference_type?: string
+) {
+  const [has_messages, set_has_messages] = useState(false);
+  const [is_checking, set_is_checking] = useState(true);
+
+  useEffect(() => {
+    async function check() {
+      if (!recipient_user_id || !reference_id) {
+        set_is_checking(false);
+        return;
+      }
+
+      try {
+        const params = new URLSearchParams({
+          receiver_user_id: recipient_user_id,  // ✅ Required
+          reference_id,
+          ...(reference_type && { reference_type }),
+        });
+
+        const response = await fetch(
+          `/api/hazo_chat/messages?${params.toString()}`,
+          { credentials: 'include' }
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          const messages = data.messages || data;  // ✅ Handle object response
+          set_has_messages(Array.isArray(messages) && messages.length > 0);
+        }
+      } catch (error) {
+        console.error('[useChatMessagesCheck] Error:', error);
+        set_has_messages(false);
+      } finally {
+        set_is_checking(false);
+      }
+    }
+
+    check();
+  }, [recipient_user_id, reference_id, reference_type]);
+
+  return { has_messages, is_checking };
+}
+```
+
 ## Hooks
 
 ### useChatMessages
@@ -536,7 +1042,7 @@ npm run build:test-app
 import { HazoChat, useChatMessages, useChatReferences, useFileUpload } from 'hazo_chat';
 
 // API handlers (for server-side routes)
-import { createMessagesHandler } from 'hazo_chat/api';
+import { createMessagesHandler, createUnreadCountFunction } from 'hazo_chat/api';
 
 // Components only
 import { HazoChat, ChatBubble } from 'hazo_chat/components';
@@ -593,7 +1099,3 @@ MIT © Pubs Abayasiri
 ---
 
 For detailed setup instructions, see [SETUP_CHECKLIST.md](./SETUP_CHECKLIST.md).
-
-For UI design standards and visual specifications, see [UI_DESIGN_STANDARDS.md](./UI_DESIGN_STANDARDS.md).
-
-For UI design standards and specifications, see [UI_DESIGN_STANDARDS.md](./UI_DESIGN_STANDARDS.md).

package/SETUP_CHECKLIST.md

@@ -233,11 +233,101 @@ export async function POST(request: NextRequest) {
 }
 ```
 
+### Step 4.4: Unread Count API (Optional - For Unread Badges)
+
+**File: `src/app/api/hazo_chat/unread_count/route.ts`**
+
+This endpoint is optional but useful for displaying unread message counts or badges in your UI.
+
+```typescript
+/**
+ * API route to get unread message counts grouped by reference_id
+ * Uses the exportable library function from hazo_chat
+ */
+
+export const dynamic = 'force-dynamic';
+
+import { createUnreadCountFunction } from 'hazo_chat/api';
+import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+import { NextRequest, NextResponse } from 'next/server';
+
+// Create the unread count function using the factory
+const hazo_chat_get_unread_count = createUnreadCountFunction({
+  getHazoConnect: () => getHazoConnectSingleton()
+});
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const receiver_user_id = searchParams.get('receiver_user_id');
+
+    if (!receiver_user_id) {
+      return NextResponse.json(
+        { 
+          success: false, 
+          error: 'receiver_user_id is required',
+          unread_counts: []
+        },
+        { status: 400 }
+      );
+    }
+
+    // Call the library function
+    const unread_counts = await hazo_chat_get_unread_count(receiver_user_id);
+
+    return NextResponse.json({
+      success: true,
+      receiver_user_id,
+      unread_counts,
+      total_references: unread_counts.length,
+      total_unread: unread_counts.reduce((sum, item) => sum + item.count, 0)
+    });
+  } catch (error) {
+    const error_message = error instanceof Error ? error.message : 'Unknown error';
+    console.error('[hazo_chat/unread_count] Error:', error_message, error);
+    
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: error_message,
+        unread_counts: []
+      },
+      { status: 500 }
+    );
+  }
+}
+```
+
+**What this endpoint does:**
+- Takes `receiver_user_id` as a query parameter
+- Returns an array of objects with `reference_id` and `count` of unread messages
+- Only counts messages where `read_at` is `null` and `deleted_at` is `null`
+- Groups results by `reference_id`
+- Sorts by count (descending - most unread first)
+
+**Response format:**
+```json
+{
+  "success": true,
+  "receiver_user_id": "user-123",
+  "unread_counts": [
+    { "reference_id": "ref-1", "count": 5 },
+    { "reference_id": "ref-2", "count": 3 },
+    { "reference_id": "", "count": 1 }
+  ],
+  "total_references": 3,
+  "total_unread": 9
+}
+```
+
+**Note:** This endpoint is optional. Only create it if you need to display unread message counts in your UI.
+
 ### API Routes Summary
 
 | Endpoint | Method | File | Purpose |
 |----------|--------|------|---------|
 | `/api/hazo_chat/messages` | GET, POST | `api/hazo_chat/messages/route.ts` | Message CRUD |
+| `/api/hazo_chat/unread_count` | GET | `api/hazo_chat/unread_count/route.ts` | Get unread counts (optional) |
 | `/api/hazo_auth/me` | GET | `api/hazo_auth/me/route.ts` | Get current user |
 | `/api/hazo_auth/profiles` | POST | `api/hazo_auth/profiles/route.ts` | Get user profiles |
 
@@ -246,6 +336,7 @@ export async function POST(request: NextRequest) {
 - [ ] `GET /api/hazo_auth/me` returns user data when logged in
 - [ ] `POST /api/hazo_auth/profiles` returns profiles for given IDs
 - [ ] `GET /api/hazo_chat/messages?receiver_user_id=xxx` works
+- [ ] `GET /api/hazo_chat/unread_count?receiver_user_id=xxx` returns unread counts (if implemented)
 
 ---
 
@@ -704,7 +795,7 @@ module.exports = nextConfig;
 - [ ] Smooth expand/collapse transitions
 - [ ] Button position adjusts correctly
 
-For detailed specifications, see [UI_DESIGN_STANDARDS.md](./UI_DESIGN_STANDARDS.md).
+For detailed specifications, see the [UI Design Standards](#ui-design-standards) section in README.md.
 
 ---
 
@@ -735,6 +826,9 @@ curl -X POST http://localhost:3000/api/hazo_auth/profiles \
 
 # Test messages endpoint
 curl "http://localhost:3000/api/hazo_chat/messages?receiver_user_id=user-id"
+
+# Test unread count endpoint (if implemented)
+curl "http://localhost:3000/api/hazo_chat/unread_count?receiver_user_id=user-id"
 ```
 
 ### UI Verification & Responsive Behavior
@@ -912,6 +1006,7 @@ npm install hazo_chat hazo_connect
 
 # 2. Create API routes
 mkdir -p src/app/api/hazo_chat/messages
+mkdir -p src/app/api/hazo_chat/unread_count  # Optional: for unread counts
 mkdir -p src/app/api/hazo_auth/me
 mkdir -p src/app/api/hazo_auth/profiles
 

package/dist/api/index.d.ts

@@ -20,5 +20,7 @@
  * ```
  */
 export { createMessagesHandler } from './messages.js';
+export { createUnreadCountFunction } from './unread_count.js';
 export type { MessagesHandlerOptions, ChatMessageInput, ChatMessageRecord } from './types.js';
+export type { UnreadCountFunctionOptions, UnreadCountResult } from './unread_count.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/api/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,YAAY,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,YAAY,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,0BAA0B,EAC1B,iBAAiB,EAClB,MAAM,mBAAmB,CAAC"}