npm - hazo_chat - Versions diffs - 2.0.8 → 2.0.9 - Mend

hazo_chat 2.0.8 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +104 -0
package/SETUP_CHECKLIST.md +407 -6
package/UI_DESIGN_STANDARDS.md +315 -0
package/dist/components/ui/chat_bubble.d.ts.map +1 -1
package/dist/components/ui/chat_bubble.js +2 -2
package/dist/components/ui/chat_bubble.js.map +1 -1
package/package.json +3 -2

package/README.md CHANGED Viewed

@@ -20,6 +20,7 @@ A full-featured React chat component library for 1-1 communication with document
 ## Table of Contents
 - [Installation](#installation)
+- [UI Requirements](#ui-requirements)
 - [Quick Start](#quick-start)
 - [API Routes Setup](#api-routes-setup)
 - [Props Reference](#props-reference)
@@ -37,6 +38,89 @@ A full-featured React chat component library for 1-1 communication with document
 npm install hazo_chat hazo_connect next
 ```
+## UI Requirements
+hazo_chat requires the following UI setup to match the design standards:
+### Required UI Dependencies
+Install these packages in your consuming project:
+```bash
+npm install sonner @radix-ui/react-alert-dialog
+```
+### Required UI Components (shadcn/ui style)
+The following components must be available in your project at `@/components/ui/`:
+- `AlertDialog` - For user acknowledgment dialogs (must be created by consuming project)
+- `Button` - Included in hazo_chat package
+- `Input` - Included in hazo_chat package
+- All other components are included in hazo_chat package
+**Note:** The `AlertDialog` component is not included in the hazo_chat package. You must create it using shadcn/ui Alert Dialog component. See `test-app/src/components/ui/alert-dialog.tsx` for a reference implementation.
+### Required Global Providers
+Add Sonner Toaster to your root layout:
+```tsx
+// app/layout.tsx
+import { Toaster } from 'sonner';
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Toaster position="top-right" richColors />
+      </body>
+    </html>
+  );
+}
+```
+### Required Tailwind Configuration
+Your `tailwind.config.ts` must include hazo_chat package paths in content:
+```typescript
+export default {
+  content: [
+    // ... your existing paths
+    './node_modules/hazo_chat/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  // ... rest of config
+};
+```
+**Important:** Without this configuration, Tailwind classes used by hazo_chat components may not be compiled, causing styling issues.
+### Required CSS Variables
+Your global CSS must define these CSS variables (shadcn/ui standard):
+**Core Colors:**
+- `--background`, `--foreground`
+- `--primary`, `--primary-foreground`
+- `--secondary`, `--secondary-foreground`
+- `--muted`, `--muted-foreground`
+- `--accent`, `--accent-foreground`
+- `--destructive`, `--destructive-foreground`
+**Border and Input:**
+- `--border`, `--input`, `--ring`
+**Card:**
+- `--card`, `--card-foreground`
+See `test-app/src/app/globals.css` for complete variable definitions with example values.
+### UI Design Standards
+For detailed visual design specifications, component behavior, and layout standards, see [UI_DESIGN_STANDARDS.md](./UI_DESIGN_STANDARDS.md).
 ## Quick Start
 ### Step 1: Create API Routes
@@ -480,6 +564,22 @@ import { DEFAULT_POLLING_INTERVAL, MIME_TYPE_MAP } from 'hazo_chat/lib';
 4. **CORS errors**
    - API routes should be on the same domain as the frontend
+5. **UI components not styled correctly**
+   - Ensure Tailwind config includes hazo_chat package paths in `content` array
+   - Verify CSS variables are defined in `globals.css`
+   - Check that all UI dependencies are installed (see [UI Requirements](#ui-requirements))
+   - Rebuild CSS: `rm -rf .next` and restart dev server
+6. **Toast notifications not appearing**
+   - Ensure Sonner Toaster is added to root layout (see [UI Requirements](#ui-requirements))
+   - Check that `sonner` package is installed
+   - Verify `<Toaster position="top-right" richColors />` is in layout body
+7. **Alert Dialog not working**
+   - Create Alert Dialog component at `src/components/ui/alert-dialog.tsx`
+   - See `test-app/src/components/ui/alert-dialog.tsx` for reference implementation
+   - Ensure `@radix-ui/react-alert-dialog` is installed
 ## Related Packages
 - [hazo_connect](https://github.com/pub12/hazo_connect) - Database adapter
@@ -493,3 +593,7 @@ 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 CHANGED Viewed

@@ -11,9 +11,11 @@ A comprehensive, step-by-step guide for setting up hazo_chat in a Next.js projec
 3. [Database Setup](#3-database-setup)
 4. [API Routes](#4-api-routes)
 5. [Component Integration](#5-component-integration)
-6. [Configuration (Optional)](#6-configuration-optional)
-7. [Verification Checklist](#7-verification-checklist)
-8. [Troubleshooting](#8-troubleshooting)
+6. [UI Components and Styling Setup](#6-ui-components-and-styling-setup)
+7. [Configuration (Optional)](#7-configuration-optional)
+8. [UI Design Standards Compliance](#8-ui-design-standards-compliance)
+9. [Verification Checklist](#9-verification-checklist)
+10. [Troubleshooting](#10-troubleshooting)
 ---
@@ -306,7 +308,327 @@ export default function ChatPage() {
 ---
-## 6. Configuration (Optional)
+## 6. UI Components and Styling Setup
+### Step 6.1: Install UI Dependencies
+Install the required UI packages:
+```bash
+npm install sonner @radix-ui/react-alert-dialog
+```
+**Verification:**
+- [ ] `sonner` package installed
+- [ ] `@radix-ui/react-alert-dialog` installed
+- [ ] `package.json` contains both dependencies
+### Step 6.2: Create Alert Dialog Component
+**File:** `src/components/ui/alert-dialog.tsx`
+Create the Alert Dialog component using shadcn/ui style. This component is used for messages requiring user acknowledgment.
+**Reference Implementation:** See `test-app/src/components/ui/alert-dialog.tsx` for a complete example.
+**Minimum Required Structure:**
+```typescript
+"use client"
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
+```
+**Verification:**
+- [ ] Alert Dialog component created at `src/components/ui/alert-dialog.tsx`
+- [ ] Component exports all required sub-components
+- [ ] No TypeScript errors
+### Step 6.3: Setup Sonner Toaster
+**File:** `src/app/layout.tsx`
+Add the Sonner Toaster component to your root layout for toast notifications:
+```tsx
+import { Toaster } from 'sonner';
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Toaster position="top-right" richColors />
+      </body>
+    </html>
+  );
+}
+```
+**Verification:**
+- [ ] `Toaster` imported from `sonner`
+- [ ] Toaster added to root layout
+- [ ] Position set to `top-right`
+- [ ] `richColors` prop enabled
+### Step 6.4: Configure Tailwind CSS
+**File:** `tailwind.config.ts`
+Ensure hazo_chat package is included in Tailwind content paths:
+```typescript
+import type { Config } from 'tailwindcss';
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    // Include hazo_chat package components
+    './node_modules/hazo_chat/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  // ... rest of your config
+};
+export default config;
+```
+**Important:** Without this configuration, Tailwind classes used by hazo_chat components will not be compiled, causing styling issues.
+**Verification:**
+- [ ] `tailwind.config.ts` includes hazo_chat package path
+- [ ] Path matches your `node_modules` location
+- [ ] Config syntax is valid
+### Step 6.5: Setup CSS Variables
+**File:** `src/app/globals.css`
+Ensure all required CSS variables are defined. hazo_chat uses shadcn/ui standard CSS variables:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --radius: 0.5rem;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+**Reference:** See `test-app/src/app/globals.css` for a complete example with oklch color format.
+**Verification:**
+- [ ] All required CSS variables defined in `:root`
+- [ ] Dark mode variables defined (if supporting dark mode)
+- [ ] Tailwind directives included (`@tailwind base`, etc.)
+- [ ] Base layer styles applied
+### UI Setup Verification Checklist
+- [ ] All UI dependencies installed
+- [ ] Alert Dialog component created and working
+- [ ] Sonner Toaster added to root layout
+- [ ] Tailwind config includes hazo_chat paths
+- [ ] CSS variables defined in globals.css
+- [ ] No build errors related to UI components
+- [ ] Toast notifications working
+- [ ] Alert dialogs displaying correctly
+---
+## 7. Configuration (Optional)
 ### hazo_connect Configuration
@@ -350,7 +672,43 @@ module.exports = nextConfig;
 ---
-## 7. Verification Checklist
+## 8. UI Design Standards Compliance
+### Visual Design Verification
+**Document Preview:**
+- [ ] Empty state shows `IoDocumentOutline` icon (not image icon)
+- [ ] Icon size is 48px × 48px with 50% opacity
+**REFERENCES Section:**
+- [ ] Font size is 9px (`text-[9px]`)
+- [ ] Text is uppercase with wide letter spacing
+- [ ] Section is collapsible with chevron indicator
+**Input Area:**
+- [ ] Padding is 16px (`p-4`) on all sides
+- [ ] Input field and send button are properly aligned
+**Message Display:**
+- [ ] Only timestamp shown under messages (no status icons)
+- [ ] Double green checkmark (`IoCheckmarkDoneSharp`) appears when message is read
+- [ ] Checkmark only shows for sender's messages with `read_at` not null
+**Header:**
+- [ ] Close button visible when `on_close` prop provided
+- [ ] Hamburger menu hidden on desktop (screens >= 768px)
+- [ ] Hamburger menu visible on mobile (screens < 768px)
+**Document Viewer:**
+- [ ] Toggle button visible between viewer and chat area
+- [ ] Smooth expand/collapse transitions
+- [ ] Button position adjusts correctly
+For detailed specifications, see [UI_DESIGN_STANDARDS.md](./UI_DESIGN_STANDARDS.md).
+---
+## 9. Verification Checklist
 ### Installation Verification
 - [ ] All packages installed without errors
@@ -423,7 +781,7 @@ curl "http://localhost:3000/api/hazo_chat/messages?receiver_user_id=user-id"
 ---
-## 8. Troubleshooting
+## 10. Troubleshooting
 ### Error: "Module not found: Can't resolve 'fs'"
@@ -501,6 +859,49 @@ curl "http://localhost:3000/api/hazo_chat/messages?receiver_user_id=user-id"
 3. Check for JavaScript errors in console
 4. Verify API returns `{ success: true, messages: [] }` format
+### Issue: UI components not styled correctly
+**Possible Causes:**
+1. Tailwind CSS not configured to include hazo_chat package paths
+2. CSS variables not defined in globals.css
+3. Missing UI dependencies
+**Solution:**
+1. Ensure `tailwind.config.ts` includes: `'./node_modules/hazo_chat/dist/**/*.{js,ts,jsx,tsx}'` in content array
+2. Verify all required CSS variables are defined (see Step 6.5)
+3. Check that `@tailwind base`, `@tailwind components`, `@tailwind utilities` are in globals.css
+4. Rebuild: `rm -rf .next` and `npm run build`
+### Issue: Alert Dialog not working
+**Cause:** Alert Dialog component not created or not properly imported.
+**Solution:**
+1. Create Alert Dialog component at `src/components/ui/alert-dialog.tsx`
+2. See `test-app/src/components/ui/alert-dialog.tsx` for reference
+3. Ensure `@radix-ui/react-alert-dialog` is installed
+4. Verify component exports all required sub-components
+### Issue: Toast notifications not appearing
+**Cause:** Sonner Toaster not added to root layout.
+**Solution:**
+1. Import `Toaster` from `sonner` in root layout
+2. Add `<Toaster position="top-right" richColors />` to layout body
+3. Ensure `sonner` package is installed
+4. Check browser console for errors
+### Issue: CSS variables not applying
+**Cause:** CSS variables not defined or Tailwind not processing them.
+**Solution:**
+1. Verify CSS variables are in `globals.css` under `@layer base { :root { ... } }`
+2. Check that Tailwind config has correct content paths
+3. Ensure CSS file is imported in root layout
+4. Rebuild CSS: restart dev server or rebuild
 ---
 ## Quick Setup Summary

package/UI_DESIGN_STANDARDS.md ADDED Viewed

@@ -0,0 +1,315 @@
+# UI Design Standards for hazo_chat
+This document defines the visual design standards and component behavior specifications for the hazo_chat component library. 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`)
+**Specification:**
+- 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`
+**File Reference:** `src/components/hazo_chat/hazo_chat_document_viewer.tsx` (EmptyState component)
+### REFERENCES Section Font
+**Location:** References section header (`hazo_chat.tsx`)
+**Specification:**
+- Font size: `text-[9px]` (9px)
+- Font weight: `font-medium`
+- Text transform: `uppercase`
+- Letter spacing: `tracking-wider`
+- Color: `text-muted-foreground`
+**File Reference:** `src/components/hazo_chat/hazo_chat.tsx` (line ~299)
+### Input Area Padding
+**Location:** Chat input container (`HazoChatInput`)
+**Specification:**
+- Padding: `p-4` (16px on all sides)
+- Border: `border-t` (top border only)
+- Background: `bg-background`
+**File Reference:** `src/components/hazo_chat/hazo_chat_input.tsx` (line ~107)
+### Message Timestamp Display
+**Location:** Chat bubble footer (`ChatBubble`)
+**Specification:**
+- 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")
+**File Reference:** `src/components/ui/chat_bubble.tsx` (line ~264)
+### Read Receipt Indicator
+**Location:** Chat bubble footer, after timestamp (`ChatBubble`)
+**Specification:**
+- 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
+**File Reference:** `src/components/ui/chat_bubble.tsx` (line ~267)
+---
+## Component Behavior
+### Close Button
+**Location:** Chat header (`HazoChatHeader`)
+**Specification:**
+- 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
+**File Reference:** `src/components/hazo_chat/hazo_chat_header.tsx` (line ~124-147)
+### Hamburger Menu Button
+**Location:** Chat header (`HazoChatHeader`)
+**Specification:**
+- 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.
+**File Reference:** `src/components/hazo_chat/hazo_chat_header.tsx` (line ~54-77)
+### Document Viewer Toggle Button
+**Location:** Between document viewer and chat area (`hazo_chat.tsx`)
+**Specification:**
+- 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
+**File Reference:** `src/components/hazo_chat/hazo_chat.tsx` (line ~344-367)
+### References Section Collapse/Expand
+**Location:** References row (`hazo_chat.tsx`)
+**Specification:**
+- 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
+- Auto-expand: Automatically expands when references are added
+**File Reference:** `src/components/hazo_chat/hazo_chat.tsx` (line ~288-318)
+---
+## Layout Standards
+### Chat Input Area
+**Location:** Bottom of chat component (`HazoChatInput`)
+**Specification:**
+- Layout: Flex container with `flex items-center gap-2`
+- Components:
+  - Single `Input` field (replaces previous Textarea)
+  - 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
+**File Reference:** `src/components/hazo_chat/hazo_chat_input.tsx` (line ~119-144)
+### Button Alignment and Sizing
+**Specification:**
+- 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
+**Specification:**
+- Mobile: < 768px (default)
+- Desktop: >= 768px (`md:` prefix)
+- Standard Tailwind breakpoints used throughout
+---
+## Color and Theming
+### Required CSS Variables
+The following CSS variables must be defined in the consuming project's global CSS file:
+**Core Colors:**
+- `--background`
+- `--foreground`
+- `--primary` / `--primary-foreground`
+- `--secondary` / `--secondary-foreground`
+- `--muted` / `--muted-foreground`
+- `--accent` / `--accent-foreground`
+- `--destructive` / `--destructive-foreground`
+**Border and Input:**
+- `--border`
+- `--input`
+- `--ring`
+**Card:**
+- `--card` / `--card-foreground`
+**Reference:** See `test-app/src/app/globals.css` for complete variable definitions.
+---
+## 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
+- Pulse animation removed from status indicators
+---
+## 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
+   - Must be created by consuming project
+2. **Toaster** (from `sonner` package)
+   - Used for toast notifications (FYI messages)
+   - Must be added to root layout
+   - Position: `top-right`
+   - Configuration: `richColors` prop enabled
+### 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 Reference
+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
+---
+## Version Information
+**Document Version:** 1.0
+**Last Updated:** 2024
+**Applies to hazo_chat version:** 2.0.8+
+---
+For setup instructions, see [SETUP_CHECKLIST.md](./SETUP_CHECKLIST.md) and [README.md](./README.md).

package/dist/components/ui/chat_bubble.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat_bubble.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chat_bubble.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;~~AAYH~~,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,sBAAsB,CAAC;AA4C/E,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,SAAS,EACT,cAAc,EACd,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,cAAsB,EACtB,SAAS,EACV,EAAE,eAAe,~~2CAyJjB~~;~~yBAlKe~~,UAAU"}
1	+ {"version":3,"file":"chat_bubble.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chat_bubble.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAaH,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,sBAAsB,CAAC;AA4C/E,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,SAAS,EACT,cAAc,EACd,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,cAAsB,EACtB,SAAS,EACV,EAAE,eAAe,2CA4JjB;yBArKe,UAAU"}

package/dist/components/ui/chat_bubble.js CHANGED Viewed

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { format } from 'date-fns';
 import { toZonedTime } from 'date-fns-tz';
-import { IoTrashOutline, IoDocumentAttachSharp } from 'react-icons/io5';
+import { IoTrashOutline, IoDocumentAttachSharp, IoCheckmarkDoneSharp } from 'react-icons/io5';
 import { cn } from '../../lib/utils.js';
 import { DELETED_MESSAGE_PLACEHOLDER } from '../../lib/constants.js';
 import { Avatar, AvatarImage, AvatarFallback } from './avatar.js';
@@ -78,7 +78,7 @@ export function ChatBubble({ message, is_sender, sender_profile, timezone, on_de
                             ? 'bg-primary text-primary-foreground rounded-br-md'
                             : 'bg-muted text-foreground rounded-bl-md', is_deleted && 'opacity-60 italic'), children: [_jsx("p", { className: "cls_bubble_text text-sm whitespace-pre-wrap break-words", children: display_text }), has_references && !is_deleted && (_jsx("div", { className: "cls_bubble_references flex flex-wrap gap-1 mt-2 pt-2 border-t border-current/10", children: message.reference_list?.map((ref) => (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => handle_reference_click(ref), className: cn('cls_bubble_reference_btn', 'h-6 px-2 text-xs', is_sender
                                         ? 'hover:bg-primary-foreground/20'
-                                        : 'hover:bg-background/50'), children: [_jsx(IoDocumentAttachSharp, { className: "w-3 h-3 mr-1" }), _jsx("span", { className: "truncate max-w-[100px]", children: ref.name })] }, ref.id))) })), is_sender && !is_deleted && on_delete && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: show_delete_confirm ? 'destructive' : 'ghost', size: "icon", onClick: handle_delete_click, className: cn('cls_bubble_delete_btn', 'absolute -left-8 top-1/2 -translate-y-1/2', 'w-6 h-6', 'opacity-0 group-hover:opacity-100 transition-opacity'), children: _jsx(IoTrashOutline, { className: "w-3.5 h-3.5" }) }) }), _jsx(TooltipContent, { children: show_delete_confirm ? 'Click again to confirm' : 'Delete message' })] }))] }), _jsx("div", { className: cn('cls_bubble_meta', 'flex items-center mt-1', is_sender ? 'justify-end mr-1' : 'ml-1'), children: _jsx("span", { className: "cls_bubble_time text-xs text-muted-foreground", children: format_timestamp(message.created_at, timezone) }) })] }), is_sender && (_jsxs(Avatar, { className: "cls_bubble_avatar h-8 w-8 ml-2 flex-shrink-0", children: [_jsx(AvatarImage, { src: sender_profile?.avatar_url, alt: "Your avatar" }), _jsx(AvatarFallback, { className: "text-xs bg-primary/20 text-primary", children: get_initials(sender_profile?.name) })] }))] }));
+                                        : 'hover:bg-background/50'), children: [_jsx(IoDocumentAttachSharp, { className: "w-3 h-3 mr-1" }), _jsx("span", { className: "truncate max-w-[100px]", children: ref.name })] }, ref.id))) })), is_sender && !is_deleted && on_delete && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: show_delete_confirm ? 'destructive' : 'ghost', size: "icon", onClick: handle_delete_click, className: cn('cls_bubble_delete_btn', 'absolute -left-8 top-1/2 -translate-y-1/2', 'w-6 h-6', 'opacity-0 group-hover:opacity-100 transition-opacity'), children: _jsx(IoTrashOutline, { className: "w-3.5 h-3.5" }) }) }), _jsx(TooltipContent, { children: show_delete_confirm ? 'Click again to confirm' : 'Delete message' })] }))] }), _jsxs("div", { className: cn('cls_bubble_meta', 'flex items-center gap-1 mt-1', is_sender ? 'justify-end mr-1' : 'ml-1'), children: [_jsx("span", { className: "cls_bubble_time text-xs text-muted-foreground", children: format_timestamp(message.created_at, timezone) }), is_sender && message.read_at && (_jsx(IoCheckmarkDoneSharp, { className: "h-4 w-4 text-green-500" }))] })] }), is_sender && (_jsxs(Avatar, { className: "cls_bubble_avatar h-8 w-8 ml-2 flex-shrink-0", children: [_jsx(AvatarImage, { src: sender_profile?.avatar_url, alt: "Your avatar" }), _jsx(AvatarFallback, { className: "text-xs bg-primary/20 text-primary", children: get_initials(sender_profile?.name) })] }))] }));
 }
 ChatBubble.displayName = 'ChatBubble';
 //# sourceMappingURL=chat_bubble.js.map

package/dist/components/ui/chat_bubble.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat_bubble.js","sourceRoot":"","sources":["../../../src/components/ui/chat_bubble.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EACL,cAAc,EACd,qBAAqB,~~EACtB~~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~~cACE~~,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,~~wBAAwB~~,~~EACxB~~,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACxC,~~YAED~~,eAAM,SAAS,EAAC,+CAA+C,YAC5D,gBAAgB,CAAC,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,GAC1C,~~GACH~~,IACF,EAGL,SAAS,IAAI,CACZ,MAAC,MAAM,IAAC,SAAS,EAAC,8CAA8C,aAC9D,KAAC,WAAW,IACV,GAAG,EAAE,cAAc,EAAE,UAAU,EAC/B,GAAG,EAAC,aAAa,GACjB,EACF,KAAC,cAAc,IAAC,SAAS,EAAC,oCAAoC,YAC3D,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,GACpB,IACV,CACV,IACG,CACP,CAAC;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
1	+ {"version":3,"file":"chat_bubble.js","sourceRoot":"","sources":["../../../src/components/ui/chat_bubble.tsx"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "hazo_chat",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "Chat interface for 1-1 communication with API-first architecture",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,8 @@
   "files": [
     "dist",
     "README.md",
-    "SETUP_CHECKLIST.md"
+    "SETUP_CHECKLIST.md",
+    "UI_DESIGN_STANDARDS.md"
   ],
   "workspaces": [
     "test-app"