hazo_chat 4.0.2 → 4.0.5

package/README.md

@@ -2,6 +2,10 @@
 
 A full-featured React chat component library for group-based communication with document sharing, file attachments, and real-time messaging capabilities.
 
+**Version 4.0.4** - Added `read_only` prop for view-only mode (hides chat input).
+
+**Version 4.0** - Mandatory logging integration with `hazo_logs`. See [Logging Integration](#logging-integration) section.
+
 **Version 3.1** - Generic schema supporting multiple chat patterns: support (client-to-staff), peer (1:1), and group conversations.
 
 **Version 3.0** - Introduced group-based chat architecture. Multiple users can participate in a single chat group, perfect for support staff rotating on client sessions.
@@ -42,7 +46,7 @@ A full-featured React chat component library for group-based communication with
 ## Installation
 
 ```bash
-npm install hazo_chat hazo_connect next
+npm install hazo_chat hazo_connect hazo_logs next
 ```
 
 ## UI Requirements
@@ -480,12 +484,17 @@ export { GET, POST };
 'use client';
 
 import { HazoChat } from 'hazo_chat';
+import { createClientLogger } from 'hazo_logs/ui';
+
+// Create client logger (required in v4.0+)
+const logger = createClientLogger({ packageName: 'hazo_chat' });
 
 export default function ChatPage() {
   return (
     <div className="h-screen">
       <HazoChat
         chat_group_id="group-uuid"
+        logger={logger}
         reference_id="conversation-123"
         reference_type="support"
         title="Chat with Support"
@@ -738,6 +747,8 @@ export async function getUnreadCounts(receiver_user_id: string) {
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `chat_group_id` | `string` | ✅ | - | UUID of the chat group (CHANGED from `receiver_user_id` in v3.0) |
+| `logger` | `ClientLogger` | ✅ | - | Logger instance from hazo_logs/ui (NEW in v4.0) |
+| `read_only` | `boolean` | ❌ | `false` | When true, hides chat input for view-only mode (NEW in v4.0.4) |
 | `reference_id` | `string` | ❌ | - | Reference ID for chat context grouping |
 | `reference_type` | `string` | ❌ | `'chat'` | Type of reference |
 | `api_base_url` | `string` | ❌ | `'/api/hazo_chat'` | Base URL for API endpoints |
@@ -757,8 +768,13 @@ export async function getUnreadCounts(receiver_user_id: string) {
 ### Example with All Props
 
 ```tsx
+import { createClientLogger } from 'hazo_logs/ui';
+
+const logger = createClientLogger({ packageName: 'hazo_chat' });
+
 <HazoChat
   chat_group_id="group-123"
+  logger={logger}
   reference_id="project-456"
   reference_type="project_chat"
   api_base_url="/api/hazo_chat"
@@ -771,6 +787,7 @@ export async function getUnreadCounts(receiver_user_id: string) {
     { id: 'doc-1', type: 'document', name: 'Design.pdf', url: '/files/design.pdf', scope: 'field' }
   ]}
   on_close={() => console.log('Chat closed')}
+  read_only={false}               // set to true for view-only mode
   className="h-[600px]"
 />
 ```
@@ -781,13 +798,31 @@ hazo_chat provides props to customize component appearance and behavior without
 
 ### Common Customizations
 
+#### Read-Only Mode (View Only)
+
+To display chat messages without allowing users to send new messages:
+
+```tsx
+<HazoChat
+  chat_group_id="group-123"
+  logger={logger}
+  read_only={true}  // Hides chat input - view only
+/>
+```
+
+Use cases:
+- Displaying archived conversations
+- Showing chat history to non-participants
+- Read-only audit views
+
 #### 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"
+  chat_group_id="group-123"
+  logger={logger}
   show_sidebar_toggle={true}  // Show hamburger menu button
 />
 ```
@@ -798,7 +833,8 @@ To hide the delete button on chat bubbles:
 
 ```tsx
 <HazoChat
-  receiver_user_id="user-123"
+  chat_group_id="group-123"
+  logger={logger}
   show_delete_button={false}  // Hide delete button
 />
 ```
@@ -809,7 +845,8 @@ To make all chat bubbles fully round (instead of the default style with a tail):
 
 ```tsx
 <HazoChat
-  receiver_user_id="user-123"
+  chat_group_id="group-123"
+  logger={logger}
   bubble_radius="full"  // Fully round all corners
 />
 ```
@@ -818,6 +855,7 @@ To make all chat bubbles fully round (instead of the default style with a tail):
 
 | Prop | Default | Options | Description |
 |------|--------|---------|------------|
+| `read_only` | `false` | `boolean` | Hide chat input for view-only mode |
 | `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 |
@@ -827,9 +865,11 @@ To make all chat bubbles fully round (instead of the default style with a tail):
 ```tsx
 <HazoChat
   chat_group_id="group-123"
+  logger={logger}
   reference_id="project-456"
-  show_sidebar_toggle={false}    // Hide hamburger menu
-  show_delete_button={false}     // Hide delete buttons
+  read_only={false}               // Set true for view-only mode
+  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]"

package/SETUP_CHECKLIST.md

@@ -42,7 +42,7 @@ A comprehensive, step-by-step guide for setting up hazo_chat in a Next.js projec
 ### Step 2.1: Install Core Packages
 
 ```bash
-npm install hazo_chat hazo_connect
+npm install hazo_chat hazo_connect hazo_logs
 ```
 
 ### Step 2.2: Install Peer Dependencies (if not already installed)
@@ -52,7 +52,7 @@ npm install react react-dom next
 ```
 
 ### Verification
-- [ ] `package.json` contains `hazo_chat` and `hazo_connect`
+- [ ] `package.json` contains `hazo_chat`, `hazo_connect`, and `hazo_logs`
 - [ ] No npm installation errors
 - [ ] `node_modules/hazo_chat` exists
 
@@ -777,12 +777,17 @@ export async function GET(request: NextRequest) {
 'use client';
 
 import { HazoChat } from 'hazo_chat';
+import { createClientLogger } from 'hazo_logs/ui';
+
+// Create client logger (required in v4.0+)
+const logger = createClientLogger({ packageName: 'hazo_chat' });
 
 export default function ChatPage() {
   return (
     <div className="h-screen">
       <HazoChat
         chat_group_id="group-uuid-here"
+        logger={logger}
         title="Chat"
         subtitle="Direct Message"
       />
@@ -797,11 +802,15 @@ export default function ChatPage() {
 'use client';
 
 import { HazoChat } from 'hazo_chat';
+import { createClientLogger } from 'hazo_logs/ui';
+
+const logger = createClientLogger({ packageName: 'hazo_chat' });
 
 export default function ChatPage() {
   return (
     <HazoChat
       chat_group_id="group-123"
+      logger={logger}
       reference_id="project-456"
       reference_type="project_chat"
       api_base_url="/api/hazo_chat"
@@ -818,6 +827,7 @@ export default function ChatPage() {
         }
       ]}
       on_close={() => window.history.back()}
+      read_only={false}  // Set true for view-only mode
       className="h-[600px]"
     />
   );

package/dist/api/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * hazo_chat API Module
+ *
+ * Provides exportable API route handlers for Next.js applications.
+ * These handlers can be imported and re-exported in your API routes.
+ *
+ * @example
+ * ```typescript
+ * // app/api/hazo_chat/messages/route.ts
+ * import { createMessagesHandler } from 'hazo_chat/api';
+ * import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+ *
+ * export const dynamic = 'force-dynamic';
+ *
+ * const { GET, POST } = createMessagesHandler({
+ *   getHazoConnect: () => getHazoConnectSingleton()
+ * });
+ *
+ * export { GET, POST };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // app/api/hazo_chat/messages/[id]/route.ts
+ * import { createDeleteHandler } from 'hazo_chat/api';
+ * import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+ *
+ * export const dynamic = 'force-dynamic';
+ *
+ * const { DELETE } = createDeleteHandler({
+ *   getHazoConnect: () => getHazoConnectSingleton()
+ * });
+ *
+ * export { DELETE };
+ * ```
+ */
+export { createMessagesHandler, createMarkAsReadHandler, createDeleteHandler, } from './messages.js';
+export { createUnreadCountFunction } from './unread_count.js';
+export type { MessagesHandlerOptions, ChatMessageInput, ChatMessageRecord, ApiErrorResponse, ApiSuccessResponse, PaginationMeta, } from './types.js';
+export type { UnreadCountFunctionOptions, UnreadCountResult } from './unread_count.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,YAAY,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/api/index.js

@@ -0,0 +1,40 @@
+/**
+ * hazo_chat API Module
+ *
+ * Provides exportable API route handlers for Next.js applications.
+ * These handlers can be imported and re-exported in your API routes.
+ *
+ * @example
+ * ```typescript
+ * // app/api/hazo_chat/messages/route.ts
+ * import { createMessagesHandler } from 'hazo_chat/api';
+ * import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+ *
+ * export const dynamic = 'force-dynamic';
+ *
+ * const { GET, POST } = createMessagesHandler({
+ *   getHazoConnect: () => getHazoConnectSingleton()
+ * });
+ *
+ * export { GET, POST };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // app/api/hazo_chat/messages/[id]/route.ts
+ * import { createDeleteHandler } from 'hazo_chat/api';
+ * import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+ *
+ * export const dynamic = 'force-dynamic';
+ *
+ * const { DELETE } = createDeleteHandler({
+ *   getHazoConnect: () => getHazoConnectSingleton()
+ * });
+ *
+ * export { DELETE };
+ * ```
+ */
+// Export handler factories
+export { createMessagesHandler, createMarkAsReadHandler, createDeleteHandler, } from './messages.js';
+export { createUnreadCountFunction } from './unread_count.js';
+//# sourceMappingURL=index.js.map

package/dist/api/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/api/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,2BAA2B;AAC3B,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/api/messages.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Messages API Handler Factory
+ *
+ * Creates GET, POST, and DELETE handlers for the /api/hazo_chat/messages endpoint.
+ * These handlers should be used in a Next.js API route.
+ *
+ * @example
+ * ```typescript
+ * // app/api/hazo_chat/messages/route.ts
+ * import { createMessagesHandler } from 'hazo_chat/api';
+ * import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+ *
+ * export const dynamic = 'force-dynamic';
+ *
+ * const { GET, POST } = createMessagesHandler({
+ *   getHazoConnect: () => getHazoConnectSingleton()
+ * });
+ *
+ * export { GET, POST };
+ * ```
+ */
+import { NextRequest, NextResponse } from 'next/server';
+import type { MessagesHandlerOptions } from './types.js';
+/**
+ * Creates GET and POST handlers for chat messages
+ *
+ * @param options - Configuration options
+ * @returns Object with GET and POST handlers
+ */
+export declare function createMessagesHandler(options: MessagesHandlerOptions): {
+    GET: (request: NextRequest) => Promise<NextResponse>;
+    POST: (request: NextRequest) => Promise<NextResponse>;
+};
+/**
+ * Creates a PATCH handler for marking a message as read
+ *
+ * This handler should be used in a Next.js API route like:
+ * /api/hazo_chat/messages/[id]/read/route.ts
+ *
+ * @param options - Configuration options
+ * @returns PATCH handler function
+ */
+export declare function createMarkAsReadHandler(options: MessagesHandlerOptions): {
+    PATCH: (request: NextRequest, context: {
+        params: {
+            id: string;
+        } | Promise<{
+            id: string;
+        }>;
+    }) => Promise<NextResponse>;
+};
+/**
+ * Creates a DELETE handler for soft-deleting a message
+ *
+ * This handler should be used in a Next.js API route like:
+ * /api/hazo_chat/messages/[id]/route.ts
+ *
+ * @example
+ * ```typescript
+ * // app/api/hazo_chat/messages/[id]/route.ts
+ * import { createDeleteHandler } from 'hazo_chat/api';
+ * import { getHazoConnectSingleton } from 'hazo_connect/nextjs/setup';
+ *
+ * export const dynamic = 'force-dynamic';
+ *
+ * const { DELETE } = createDeleteHandler({
+ *   getHazoConnect: () => getHazoConnectSingleton()
+ * });
+ *
+ * export { DELETE };
+ * ```
+ *
+ * @param options - Configuration options
+ * @returns DELETE handler function
+ */
+export declare function createDeleteHandler(options: MessagesHandlerOptions): {
+    DELETE: (request: NextRequest, context: {
+        params: {
+            id: string;
+        } | Promise<{
+            id: string;
+        }>;
+    }) => Promise<NextResponse>;
+};
+//# sourceMappingURL=messages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/api/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKxD,OAAO,KAAK,EAAE,sBAAsB,EAAkG,MAAM,YAAY,CAAC;AA2FzJ;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,sBAAsB;mBAevC,WAAW,KAAG,OAAO,CAAC,YAAY,CAAC;oBA2KlC,WAAW,KAAG,OAAO,CAAC,YAAY,CAAC;EAiJjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB;qBAa1D,WAAW,WACX;QAAE,MAAM,EAAE;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO,CAAC;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,KAC5D,OAAO,CAAC,YAAY,CAAC;EA2IzB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,sBAAsB;sBActD,WAAW,WACX;QAAE,MAAM,EAAE;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,GAAG,OAAO,CAAC;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,KAC5D,OAAO,CAAC,YAAY,CAAC;EAgIzB"}