@consilioweb/payload-support 0.16.0 → 1.1.0

package/src/components/TicketConversation/RewriteDropdown.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import React, { useState } from 'react'
+import { REWRITE_STYLES, s } from './constants'
+
+export const RewriteDropdown: React.FC<{
+  disabled: boolean
+  loading: boolean
+  onSelect: (style: string) => void
+}> = ({ disabled, loading, onSelect }) => {
+  const [open, setOpen] = useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        disabled={disabled}
+        style={{
+          ...s.outlineBtn('#0891b2', disabled),
+          fontSize: '11px',
+          padding: '3px 10px',
+          borderRadius: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+        }}
+      >
+        {loading ? 'Reformulation...' : '✏️ Reformuler'}
+        {!loading && <span style={{ fontSize: 9, opacity: 0.7 }}>▼</span>}
+      </button>
+      {open && !disabled && !loading && (
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '100%',
+            left: 0,
+            marginBottom: 4,
+            background: 'var(--theme-elevation-0, #fff)',
+            border: '1px solid var(--theme-elevation-200, #e5e7eb)',
+            borderRadius: 8,
+            boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+            zIndex: 100,
+            minWidth: 180,
+            overflow: 'hidden',
+          }}
+        >
+          {REWRITE_STYLES.map((style) => (
+            <button
+              key={style.id}
+              type="button"
+              onClick={() => { setOpen(false); onSelect(style.id) }}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                padding: '8px 12px',
+                border: 'none',
+                background: 'transparent',
+                cursor: 'pointer',
+                textAlign: 'left',
+                borderBottom: '1px solid var(--theme-elevation-100, #f3f4f6)',
+                transition: 'background 120ms',
+              }}
+              onMouseEnter={(e) => { (e.target as HTMLElement).style.background = 'var(--theme-elevation-50, #f9fafb)' }}
+              onMouseLeave={(e) => { (e.target as HTMLElement).style.background = 'transparent' }}
+            >
+              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--theme-text, #111)' }}>{style.label}</span>
+              <span style={{ fontSize: 10, color: 'var(--theme-elevation-500, #6b7280)' }}>{style.desc}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TicketConversation/SkeletonText.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+
+// Inline skeleton replacement (no external dependency)
+export function SkeletonText({ lines = 3 }: { lines?: number }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '12px 0' }}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            height: '14px',
+            borderRadius: '4px',
+            backgroundColor: '#e2e8f0',
+            width: i === lines - 1 ? '60%' : '100%',
+            animation: 'pulse 1.5s ease-in-out infinite',
+          }}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/TicketConversation/constants.ts

@@ -1,5 +1,34 @@
 import type React from 'react'
 
+// ── Rewrite style dropdown options ──────────────────────────────────────
+export const REWRITE_STYLES = [
+  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
+  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
+  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
+  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
+  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
+  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
+]
+
+// Inline layout styles
+export const layoutStyles = {
+  root: { padding: '12px 0' } as React.CSSProperties,
+  twoColumns: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 320px',
+    gap: '16px',
+    alignItems: 'start',
+  } as React.CSSProperties,
+  mainColumn: { minWidth: 0 } as React.CSSProperties,
+  sideColumn: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '12px',
+    position: 'sticky' as const,
+    top: '80px',
+  } as React.CSSProperties,
+}
+
 export const statusLabels: Record<string, { label: string; bg: string; color: string }> = {
   open: { label: 'Ouvert', bg: '#dbeafe', color: '#1e40af' },
   waiting_client: { label: 'Attente', bg: '#fef3c7', color: '#92400e' },

package/src/components/TicketConversation/hooks/useDocumentIdFromUrl.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+// Replacement for @payloadcms/ui's useDocumentInfo — avoids importing
+// @payloadcms/ui (which has chunk splits that break webpack resolution
+// when this bundle is consumed from node_modules).
+// Extracts the document id from the admin URL pattern:
+// /admin/collections/:slug/:id  or  /admin/globals/:slug
+export function useDocumentIdFromUrl(): { id: string | number | undefined } {
+  const [id, setId] = useState<string | number | undefined>(undefined)
+  useEffect(() => {
+    const match = window.location.pathname.match(
+      /\/admin\/collections\/[^/]+\/([^/?#]+)/
+    )
+    if (match && match[1] !== 'create') {
+      const raw = match[1]
+      const num = Number(raw)
+      setId(Number.isFinite(num) && String(num) === raw ? num : raw)
+    }
+  }, [])
+  return { id }
+}

package/src/components/TicketConversation/index.tsx

@@ -1,29 +1,9 @@
 'use client'
 
 import React, { useState, useEffect, useCallback, useRef } from 'react'
-
-// Replacement for @payloadcms/ui's useDocumentInfo — avoids importing
-// @payloadcms/ui (which has chunk splits that break webpack resolution
-// when this bundle is consumed from node_modules).
-// Extracts the document id from the admin URL pattern:
-// /admin/collections/:slug/:id  or  /admin/globals/:slug
-function useDocumentIdFromUrl(): { id: string | number | undefined } {
-  const [id, setId] = useState<string | number | undefined>(undefined)
-  useEffect(() => {
-    const match = window.location.pathname.match(
-      /\/admin\/collections\/[^/]+\/([^/?#]+)/
-    )
-    if (match && match[1] !== 'create') {
-      const raw = match[1]
-      const num = Number(raw)
-      setId(Number.isFinite(num) && String(num) === raw ? num : raw)
-    }
-  }, [])
-  return { id }
-}
 import type { Message, TimeEntry, ClientInfo, CannedResponse, ActivityEntry, SatisfactionSurvey } from './types'
 import type { RichTextEditorHandle } from './context'
-import { C, s } from './constants'
+import { C, s, layoutStyles } from './constants'
 import { getDateLabel, formatMessageDate } from './utils'
 import { CodeBlockRenderer, CodeBlockRendererHtml } from './components/CodeBlock'
 import { CodeBlockInserter } from './components/CodeBlockInserter'
@@ -40,140 +20,12 @@ import { useMessageActions } from './hooks/useMessageActions'
 import { useTicketActions } from './hooks/useTicketActions'
 import { useReply } from './hooks/useReply'
 import { useAI } from './hooks/useAI'
+import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl'
 import { getFeatures, type TicketingFeatures } from './config'
+import { SkeletonText } from './SkeletonText'
+import { RewriteDropdown } from './RewriteDropdown'
 import '../../styles/theme.css'
 
-// Inline skeleton replacement (no external dependency)
-function SkeletonText({ lines = 3 }: { lines?: number }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '12px 0' }}>
-      {Array.from({ length: lines }).map((_, i) => (
-        <div
-          key={i}
-          style={{
-            height: '14px',
-            borderRadius: '4px',
-            backgroundColor: '#e2e8f0',
-            width: i === lines - 1 ? '60%' : '100%',
-            animation: 'pulse 1.5s ease-in-out infinite',
-          }}
-        />
-      ))}
-    </div>
-  )
-}
-
-// Inline layout styles (replacing Layout.module.scss)
-const layoutStyles = {
-  root: { padding: '12px 0' } as React.CSSProperties,
-  twoColumns: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 320px',
-    gap: '16px',
-    alignItems: 'start',
-  } as React.CSSProperties,
-  mainColumn: { minWidth: 0 } as React.CSSProperties,
-  sideColumn: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    gap: '12px',
-    position: 'sticky' as const,
-    top: '80px',
-  } as React.CSSProperties,
-}
-
-// ── Rewrite style dropdown ──────────────────────────────────────────────
-const REWRITE_STYLES = [
-  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
-  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
-  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
-  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
-  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
-  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
-]
-
-const RewriteDropdown: React.FC<{
-  disabled: boolean
-  loading: boolean
-  onSelect: (style: string) => void
-}> = ({ disabled, loading, onSelect }) => {
-  const [open, setOpen] = useState(false)
-  const ref = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (!open) return
-    const close = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', close)
-    return () => document.removeEventListener('mousedown', close)
-  }, [open])
-
-  return (
-    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        disabled={disabled}
-        style={{
-          ...s.outlineBtn('#0891b2', disabled),
-          fontSize: '11px',
-          padding: '3px 10px',
-          borderRadius: '14px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px',
-        }}
-      >
-        {loading ? 'Reformulation...' : '✏️ Reformuler'}
-        {!loading && <span style={{ fontSize: 9, opacity: 0.7 }}>▼</span>}
-      </button>
-      {open && !disabled && !loading && (
-        <div
-          style={{
-            position: 'absolute',
-            bottom: '100%',
-            left: 0,
-            marginBottom: 4,
-            background: 'var(--theme-elevation-0, #fff)',
-            border: '1px solid var(--theme-elevation-200, #e5e7eb)',
-            borderRadius: 8,
-            boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
-            zIndex: 100,
-            minWidth: 180,
-            overflow: 'hidden',
-          }}
-        >
-          {REWRITE_STYLES.map((style) => (
-            <button
-              key={style.id}
-              type="button"
-              onClick={() => { setOpen(false); onSelect(style.id) }}
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                padding: '8px 12px',
-                border: 'none',
-                background: 'transparent',
-                cursor: 'pointer',
-                textAlign: 'left',
-                borderBottom: '1px solid var(--theme-elevation-100, #f3f4f6)',
-                transition: 'background 120ms',
-              }}
-              onMouseEnter={(e) => { (e.target as HTMLElement).style.background = 'var(--theme-elevation-50, #f9fafb)' }}
-              onMouseLeave={(e) => { (e.target as HTMLElement).style.background = 'transparent' }}
-            >
-              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--theme-text, #111)' }}>{style.label}</span>
-              <span style={{ fontSize: 10, color: 'var(--theme-elevation-500, #6b7280)' }}>{style.desc}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
 const TicketConversation: React.FC = () => {
   const { id } = useDocumentIdFromUrl()
   const [features] = useState<TicketingFeatures>(() => getFeatures())

package/src/endpoints/admin-chat-stream.ts

@@ -1,6 +1,7 @@
 import type { Endpoint } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
 import { requireAdmin, handleAuthError } from '../utils/auth'
+import { dbFind } from '../utils/db'
 
 /**
  * GET /api/support/admin-chat-stream?session=xxx
@@ -58,8 +59,7 @@ function createSessionStream(
       // Poll DB every 2 seconds for new messages in this session
       const interval = setInterval(async () => {
         try {
-          const messages = await req.payload.find({
-            collection: slugs.chatMessages as any,
+          const messages = await dbFind(req.payload, slugs.chatMessages, {
             where: {
               session: { equals: sessionId },
               createdAt: { greater_than: lastCheck },
@@ -140,8 +140,7 @@ function createSessionListStream(req: any, slugs: CollectionSlugs): Response {
 
       const interval = setInterval(async () => {
         try {
-          const recentMessages = await req.payload.find({
-            collection: slugs.chatMessages as any,
+          const recentMessages = await dbFind(req.payload, slugs.chatMessages, {
             sort: '-createdAt',
             limit: 50,
             depth: 1,

package/src/endpoints/admin-chat.ts

@@ -3,6 +3,7 @@ import type { Where } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
 import { RateLimiter } from '../utils/rateLimiter'
 import { requireAdmin, handleAuthError } from '../utils/auth'
+import { dbFind, dbCreate, dbUpdate } from '../utils/db'
 
 const adminChatLimiter = new RateLimiter(60_000, 30) // 30 per minute
 
@@ -28,8 +29,7 @@ export function createAdminChatGetEndpoint(slugs: CollectionSlugs): Endpoint {
           const where: Where = { session: { equals: session } }
           if (after) where.createdAt = { greater_than: after }
 
-          const messages = await payload.find({
-            collection: slugs.chatMessages as any,
+          const messages = await dbFind(payload, slugs.chatMessages, {
             where,
             sort: 'createdAt',
             limit: 200,
@@ -46,8 +46,7 @@ export function createAdminChatGetEndpoint(slugs: CollectionSlugs): Endpoint {
         }
 
         // List recent sessions: fetch only recent messages, limit to 50
-        const recentMessages = await payload.find({
-          collection: slugs.chatMessages as any,
+        const recentMessages = await dbFind(payload, slugs.chatMessages, {
           sort: '-createdAt',
           limit: 50,
           depth: 1,
@@ -134,8 +133,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
           return Response.json({ error: 'Session requise' }, { status: 400 })
         }
 
-        const sessionMsg = await payload.find({
-          collection: slugs.chatMessages as any,
+        const sessionMsg = await dbFind(payload, slugs.chatMessages, {
           where: { session: { equals: session } },
           limit: 1,
           depth: 0,
@@ -161,8 +159,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
             return Response.json({ error: 'Message invalide (1-2000 caractères).' }, { status: 400 })
           }
 
-          const newMsg = await payload.create({
-            collection: slugs.chatMessages as any,
+          const newMsg = await dbCreate(payload, slugs.chatMessages, {
             data: {
               session,
               client: clientId,
@@ -176,8 +173,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
 
           // Try to link to ticket
           try {
-            const linkedTicket = await payload.find({
-              collection: slugs.tickets as any,
+            const linkedTicket = await dbFind(payload, slugs.tickets, {
               where: { chatSession: { equals: session } },
               limit: 1,
               depth: 0,
@@ -185,8 +181,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
             })
             if (linkedTicket.docs.length > 0) {
               const ticketId = linkedTicket.docs[0].id
-              await payload.create({
-                collection: slugs.ticketMessages as any,
+              await dbCreate(payload, slugs.ticketMessages, {
                 data: {
                   ticket: ticketId,
                   body: trimmedMessage,
@@ -195,8 +190,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
                 },
                 overrideAccess: true,
               })
-              await payload.update({
-                collection: slugs.chatMessages as any,
+              await dbUpdate(payload, slugs.chatMessages, {
                 id: newMsg.id,
                 data: { ticket: ticketId },
                 overrideAccess: true,
@@ -211,8 +205,7 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
 
         // Admin closes session
         if (action === 'close') {
-          await payload.create({
-            collection: slugs.chatMessages as any,
+          await dbCreate(payload, slugs.chatMessages, {
             data: {
               session,
               client: clientId,
@@ -224,16 +217,14 @@ export function createAdminChatPostEndpoint(slugs: CollectionSlugs): Endpoint {
           })
 
           try {
-            const linkedTicket = await payload.find({
-              collection: slugs.tickets as any,
+            const linkedTicket = await dbFind(payload, slugs.tickets, {
               where: { chatSession: { equals: session } },
               limit: 1,
               depth: 0,
               overrideAccess: true,
             })
             if (linkedTicket.docs.length > 0) {
-              await payload.create({
-                collection: slugs.ticketMessages as any,
+              await dbCreate(payload, slugs.ticketMessages, {
                 data: {
                   ticket: linkedTicket.docs[0].id,
                   body: 'Session de chat terminée par un agent.',