@paramms/chat-widget 1.0.2 → 1.0.4

package/README.md

@@ -24,6 +24,80 @@ npm install @paramms/chat-widget
 
 ## React / Next.js
 
+### General support chat (`ChatWidget`)
+
+```tsx
+'use client'
+import { ChatWidget } from '@paramms/chat-widget/react'
+
+export default function SupportPage({ session }) {
+  return (
+    <ChatWidget
+      url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+      profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
+      userId={session?.user.id}        // optional — anonymous if omitted
+      userName={session?.user.name}    // optional — shown to agents
+      userEmail={session?.user.email}  // optional — shown to agents
+    />
+  )
+}
+```
+
+### Marketplace / multi-listing chat (`MarketplaceChat`)
+
+Two modes — one component:
+
+**On a listing page** (with `listingId`) → opens that item's chat directly. No list. Buyer is already looking at the item.
+
+```tsx
+'use client'
+import { MarketplaceChat } from '@paramms/chat-widget/react'
+
+// Listing detail page — floating bubble in bottom-right corner
+export default function ListingPage({ car, session }) {
+  return (
+    <>
+      <YourPageContent />
+
+      <MarketplaceChat
+        url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+        profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
+        listingId={car.id}
+        listingTitle={car.title}          // shown in chat header
+        listingPrice={car.price}          // shown as "$12,500" tag
+        listingMeta="214,500 km · LPG"   // one line of detail
+        listingStatus="Available"
+        userId={session?.user.id}         // optional — anonymous if omitted
+        userName={session?.user.name}     // optional
+        launcher                          // floating bubble button
+        position="bottom-right"
+      />
+    </>
+  )
+}
+```
+
+**On a /messages page** (without `listingId`) → shows the buyer's full thread list (WhatsApp-style). No conversation opens until they tap one.
+
+```tsx
+// Dedicated inbox page — e.g. /messages
+export default function MessagesPage({ session }) {
+  return (
+    <div style={{ height: '600px' }}>
+      <MarketplaceChat
+        url={process.env.NEXT_PUBLIC_RELAY_WS_URL}
+        profileId={process.env.NEXT_PUBLIC_RELAY_PROFILE_ID}
+        userId={session?.user.id}
+        userName={session?.user.name}
+        // no listingId = inbox mode, shows all threads
+      />
+    </div>
+  )
+}
+```
+
+### Old section below (kept for reference)
+
 ```tsx
 'use client'
 import { ChatWidget } from '@paramms/chat-widget/react'