@paramms/chat-widget 0.1.0

package/src/store.ts

@@ -0,0 +1,207 @@
+import type {
+  ServerFrame, Message, ManifestAction, MessageContent,
+  ConversationId, MessageId, UserId, Subject, AnnotationStroke,
+} from './protocol/index.js'
+
+export type SendStatus = 'pending' | 'sent' | 'delivered' | 'read'
+
+export interface RenderMessage extends Message {
+  clientMsgId?: string
+  status?:      SendStatus
+}
+
+/** Pure, DOM-free conversation state. Feed it ServerFrames (and local optimistic
+ *  sends); read an ordered, de-duplicated view out. Ordering is by `seq`; the
+ *  same message arriving twice (live + sync on reconnect) is collapsed by id —
+ *  the structural fix for the old duplicate-bubble bug. */
+export class ChatStore {
+  conversationId?: ConversationId
+  state = ''
+  version = 0
+  hasMoreHistory = true
+  lastReadByOthers = 0
+  assignedAgentId: UserId | undefined
+  accent: string | undefined
+  subject: Subject | undefined
+  name: string | undefined
+  e2e = false
+  offline = false
+  offlineMessage = ''
+  whiteLabel = false
+  readonly typing = new Set<string>()
+  readonly online = new Set<string>()
+  /** Co-browsing: shared whiteboard strokes for this conversation. */
+  annotations: AnnotationStroke[] = []
+  /** Bumped on any annotation change so the renderer can cheaply detect updates. */
+  annotationVersion = 0
+  /** Live sentiment of the guest's latest message (agent-side only). */
+  sentiment: 'positive' | 'neutral' | 'frustrated' | undefined
+  sentimentScore: number | undefined
+
+  private actions: ManifestAction[] = []
+  private readonly byId = new Map<string, RenderMessage>()
+  private readonly keyByClient = new Map<string, string>()
+  private _maxSeq = 0
+  private _sorted: RenderMessage[] | null = null
+
+  constructor(private readonly me: UserId) {}
+
+  messages(): RenderMessage[] {
+    if (!this._sorted) {
+      this._sorted = [...this.byId.values()].sort((a, b) => {
+        const ap = a.status === 'pending', bp = b.status === 'pending'
+        if (ap !== bp) return ap ? 1 : -1
+        if (ap && bp) return a.ts - b.ts
+        return a.seq - b.seq
+      })
+    }
+    return this._sorted
+  }
+
+  visibleActions(): ManifestAction[] {
+    return this.actions.filter(a => !a.availableInStates || a.availableInStates.includes(this.state))
+  }
+
+  highestSeq(): number { return this._maxSeq }
+
+  addOptimistic(clientMsgId: string, content: MessageContent): RenderMessage {
+    const msg: RenderMessage = {
+      id: clientMsgId as MessageId, conversationId: this.conversationId as ConversationId,
+      seq: 0, senderId: this.me, senderRole: 'guest', content, ts: Date.now(),
+      clientMsgId, status: 'pending',
+    }
+    this.byId.set(clientMsgId, msg)
+    this.keyByClient.set(clientMsgId, clientMsgId)
+    this._sorted = null
+    return msg
+  }
+
+  apply(frame: ServerFrame): void {
+    switch (frame.type) {
+      case 'opened':
+        this.conversationId = frame.conversation.id
+        this.state = frame.conversation.state
+        if (frame.subject) this.subject = frame.subject
+        if (frame.annotations) { this.annotations = frame.annotations; this.annotationVersion++ }
+        return
+      case 'manifest':
+        this.actions = frame.actions
+        this.version = frame.version
+        if (frame.name) this.name = frame.name
+        if (frame.theme?.accent) this.accent = frame.theme.accent
+        if (frame.e2e) this.e2e = true
+        if (frame.offline) this.offline = true
+        if (frame.offlineMessage) this.offlineMessage = frame.offlineMessage
+        if (frame.whiteLabel) this.whiteLabel = true
+        return
+      case 'message':
+        this.upsert({ ...frame.message })
+        return
+      case 'ack': {
+        const key = this.keyByClient.get(frame.clientMsgId)
+        const msg = key ? this.byId.get(key) : undefined
+        if (msg && key) {
+          this.byId.delete(key)
+          const confirmed: RenderMessage = { ...msg, id: frame.messageId, seq: frame.seq, ts: frame.ts, status: 'sent' }
+          this.byId.set(frame.messageId, confirmed)
+          this.keyByClient.set(frame.clientMsgId, frame.messageId)
+          if (frame.seq > this._maxSeq) this._maxSeq = frame.seq
+        }
+        this._sorted = null
+        return
+      }
+      case 'delivered':
+        this.markOwnStatus(frame.seq, 'delivered')
+        return
+      case 'read':
+        if (frame.by !== this.me) {
+          this.lastReadByOthers = Math.max(this.lastReadByOthers, frame.seq)
+          this.markOwnStatus(frame.seq, 'read')
+        }
+        return
+      case 'sync':
+        for (const m of frame.messages) this.upsert({ ...m })
+        return
+      case 'history':
+        for (const m of frame.messages) this.upsert({ ...m })
+        this.hasMoreHistory = frame.hasMore
+        return
+      case 'typing':
+        if (frame.userId !== this.me) {
+          if (frame.isTyping) this.typing.add(frame.userId)
+          else this.typing.delete(frame.userId)
+        }
+        return
+      case 'reaction': {
+        const m = this.byId.get(frame.messageId)
+        if (!m) return
+        const reactions: Record<string, UserId[]> = { ...(m.reactions ?? {}) }
+        const users = (reactions[frame.emoji] ?? []).filter(u => u !== frame.by)
+        if (!frame.removed) users.push(frame.by)
+        if (users.length) reactions[frame.emoji] = users; else delete reactions[frame.emoji]
+        this.byId.set(frame.messageId, { ...m, reactions })
+        this._sorted = null
+        return
+      }
+      case 'edited': {
+        const m = this.byId.get(frame.messageId)
+        if (m) { this.byId.set(frame.messageId, { ...m, content: frame.content, editedAt: frame.editedAt }); this._sorted = null }
+        return
+      }
+      case 'deleted': {
+        const m = this.byId.get(frame.messageId)
+        if (m) { this.byId.set(frame.messageId, { ...m, deletedAt: frame.ts }); this._sorted = null }
+        return
+      }
+      case 'state':
+        this.state = frame.state
+        return
+      case 'assigned':
+        this.assignedAgentId = frame.agentId ?? undefined
+        return
+      case 'presence':
+        if (frame.status === 'online') this.online.add(frame.userId)
+        else this.online.delete(frame.userId)
+        return
+      case 'subjectState':
+      case 'invoked':
+      case 'authed':
+      case 'error':
+      case 'pong':
+        return
+      case 'annotation':
+        this.annotations = [...this.annotations, frame.stroke]
+        this.annotationVersion++
+        return
+      case 'annotation_clear':
+        this.annotations = []
+        this.annotationVersion++
+        return
+      case 'sentiment':
+        this.sentiment = frame.label
+        this.sentimentScore = frame.score
+        return
+      default:
+        return
+    }
+  }
+
+  private upsert(msg: RenderMessage): void {
+    const existing = this.byId.get(msg.id)
+    this.byId.set(msg.id, existing ? { ...existing, ...msg } : msg)
+    if (msg.seq > this._maxSeq) this._maxSeq = msg.seq
+    this._sorted = null
+  }
+
+  private markOwnStatus(uptoSeq: number, status: SendStatus): void {
+    for (const [k, m] of this.byId) {
+      if (m.senderId === this.me && m.seq > 0 && m.seq <= uptoSeq && rank(status) > rank(m.status)) {
+        this.byId.set(k, { ...m, status })
+        this._sorted = null
+      }
+    }
+  }
+}
+function rank(s: SendStatus | undefined): number {
+  switch (s) { case 'read': return 3; case 'delivered': return 2; case 'sent': return 1; default: return 0 }
+}

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": [],
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/**/__tests__/**"
+  ]
+}

package/vercel.json

@@ -0,0 +1,22 @@
+{
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "installCommand": "npm install",
+  "framework": null,
+  "headers": [
+    {
+      "source": "/index.html",
+      "headers": [
+        { "key": "Cache-Control", "value": "no-cache, must-revalidate" },
+        { "key": "Access-Control-Allow-Origin", "value": "*" }
+      ]
+    },
+    {
+      "source": "/(index|react)\\.js",
+      "headers": [
+        { "key": "Cache-Control", "value": "public, max-age=300, must-revalidate" },
+        { "key": "Access-Control-Allow-Origin", "value": "*" }
+      ]
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig(({ command }) => {
+  if (command === 'build') {
+    // Two entry points: index.js (vanilla, no deps) and react.js (the optional
+    // React wrapper — react/react-dom are externalized so they're never
+    // bundled; consumers' own React instance is used via peerDependencies).
+    return {
+      build: {
+        lib: {
+          entry: { index: 'src/index.ts', react: 'src/react.tsx' },
+          formats: ['es'],
+        },
+        outDir: 'dist',
+        sourcemap: true,
+        emptyOutDir: false,
+        rollupOptions: {
+          external: ['react', 'react-dom', 'react/jsx-runtime'],
+        },
+      },
+    }
+  }
+  // Dev server serves the full index.html preview
+  return { server: { port: 5174 } }
+})
+

package/vitest.config.ts

@@ -0,0 +1,2 @@
+import { defineConfig } from 'vitest/config'
+export default defineConfig({ test: { environment: 'node' } })