@consilioweb/payload-support 0.5.1

package/src/components/TicketConversation/components/CodeBlock.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import React, { useState } from 'react'
+
+const LANG_CONFIG: Record<string, { label: string; accent: string }> = {
+  javascript: { label: 'JavaScript', accent: '#f7df1e' },
+  js: { label: 'JavaScript', accent: '#f7df1e' },
+  typescript: { label: 'TypeScript', accent: '#3178c6' },
+  ts: { label: 'TypeScript', accent: '#3178c6' },
+  tsx: { label: 'TSX', accent: '#3178c6' },
+  jsx: { label: 'JSX', accent: '#f7df1e' },
+  php: { label: 'PHP', accent: '#777bb4' },
+  python: { label: 'Python', accent: '#3776ab' },
+  py: { label: 'Python', accent: '#3776ab' },
+  html: { label: 'HTML', accent: '#e34f26' },
+  css: { label: 'CSS', accent: '#1572b6' },
+  scss: { label: 'SCSS', accent: '#cc6699' },
+  json: { label: 'JSON', accent: '#292929' },
+  sql: { label: 'SQL', accent: '#e48e00' },
+  bash: { label: 'Bash', accent: '#4eaa25' },
+  sh: { label: 'Shell', accent: '#4eaa25' },
+  yaml: { label: 'YAML', accent: '#cb171e' },
+  yml: { label: 'YAML', accent: '#cb171e' },
+  xml: { label: 'XML', accent: '#f16529' },
+  markdown: { label: 'Markdown', accent: '#083fa1' },
+  md: { label: 'Markdown', accent: '#083fa1' },
+  diff: { label: 'Diff', accent: '#41b883' },
+  go: { label: 'Go', accent: '#00add8' },
+  rust: { label: 'Rust', accent: '#dea584' },
+  java: { label: 'Java', accent: '#ed8b00' },
+  c: { label: 'C', accent: '#555555' },
+  cpp: { label: 'C++', accent: '#00599c' },
+  ruby: { label: 'Ruby', accent: '#cc342d' },
+  swift: { label: 'Swift', accent: '#f05138' },
+  nginx: { label: 'Nginx', accent: '#009639' },
+  docker: { label: 'Docker', accent: '#2496ed' },
+  dockerfile: { label: 'Dockerfile', accent: '#2496ed' },
+  env: { label: '.env', accent: '#ecd53f' },
+}
+
+const DEFAULT_CONFIG = { label: 'Code', accent: '#6b7280' }
+
+function SingleCodeBlock({ lang, code }: { lang: string; code: string }) {
+  const [copied, setCopied] = useState(false)
+  const config = LANG_CONFIG[lang.toLowerCase()] || (lang ? { label: lang.toUpperCase(), accent: '#6b7280' } : DEFAULT_CONFIG)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  const lines = code.split('\n')
+
+  return (
+    <div style={{
+      marginTop: 8,
+      marginBottom: 8,
+      borderRadius: 8,
+      overflow: 'hidden',
+      border: '1px solid #334155',
+      backgroundColor: '#0f172a',
+      fontSize: 13,
+    }}>
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '6px 12px',
+        backgroundColor: '#1e293b',
+        borderBottom: '1px solid #334155',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{
+            display: 'inline-block',
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: config.accent,
+            flexShrink: 0,
+          }} />
+          <span style={{
+            fontSize: 11,
+            fontWeight: 700,
+            color: '#e2e8f0',
+            letterSpacing: '0.02em',
+          }}>
+            {config.label}
+          </span>
+        </div>
+        <button
+          onClick={handleCopy}
+          style={{
+            background: 'none',
+            border: '1px solid #475569',
+            borderRadius: 4,
+            padding: '2px 10px',
+            fontSize: 11,
+            color: copied ? '#4ade80' : '#94a3b8',
+            cursor: 'pointer',
+            fontWeight: 600,
+            transition: 'color 150ms',
+          }}
+        >
+          {copied ? 'Copié !' : 'Copier'}
+        </button>
+      </div>
+      {/* Code with line numbers */}
+      <div style={{ display: 'flex', overflowX: 'auto' }}>
+        <div style={{
+          padding: '12px 0',
+          borderRight: '1px solid #334155',
+          userSelect: 'none',
+          flexShrink: 0,
+        }}>
+          {lines.map((_, i) => (
+            <div key={i} style={{
+              padding: '0 12px',
+              fontSize: 12,
+              lineHeight: '20px',
+              color: '#475569',
+              textAlign: 'right',
+              fontFamily: '"SF Mono", "Fira Code", "JetBrains Mono", monospace',
+            }}>
+              {i + 1}
+            </div>
+          ))}
+        </div>
+        <pre style={{
+          margin: 0,
+          padding: 12,
+          overflow: 'auto',
+          flex: 1,
+        }}>
+          <code style={{
+            fontSize: 12,
+            lineHeight: '20px',
+            fontFamily: '"SF Mono", "Fira Code", "JetBrains Mono", monospace',
+            color: '#e2e8f0',
+            whiteSpace: 'pre',
+          }}>
+            {code}
+          </code>
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Renders text with fenced code blocks (```lang ... ```) styled per language.
+ * Non-code text is passed through as-is.
+ */
+export function CodeBlockRenderer({ text }: { text: string }) {
+  // Match ```lang\n...\n``` blocks
+  const parts = text.split(/(```[\s\S]*?```)/g)
+  const hasCodeBlock = parts.some((p) => p.startsWith('```'))
+  if (!hasCodeBlock) return null
+
+  return (
+    <>
+      {parts.map((part, i) => {
+        if (part.startsWith('```')) {
+          const match = part.match(/^```(\w*)\n?([\s\S]*?)```$/)
+          if (match) {
+            const lang = match[1] || ''
+            const code = match[2].replace(/\n$/, '')
+            return <SingleCodeBlock key={i} lang={lang} code={code} />
+          }
+        }
+        return null
+      })}
+    </>
+  )
+}
+
+/**
+ * For HTML content, parses <pre><code> blocks from the RTE.
+ * Also handles ```lang blocks that survived as text in HTML.
+ */
+export function CodeBlockRendererHtml({ html }: { html: string }) {
+  // Check for fenced code blocks in raw text within HTML
+  const stripped = html.replace(/<[^>]+>/g, '')
+  return <CodeBlockRenderer text={stripped} />
+}

package/src/components/TicketConversation/components/CodeBlockInserter.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import React, { useState, useRef, useEffect } from 'react'
+
+const LANGUAGES = [
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'php', label: 'PHP' },
+  { value: 'python', label: 'Python' },
+  { value: 'html', label: 'HTML' },
+  { value: 'css', label: 'CSS' },
+  { value: 'scss', label: 'SCSS' },
+  { value: 'json', label: 'JSON' },
+  { value: 'sql', label: 'SQL' },
+  { value: 'bash', label: 'Bash' },
+  { value: 'yaml', label: 'YAML' },
+  { value: 'xml', label: 'XML' },
+  { value: 'markdown', label: 'Markdown' },
+  { value: 'diff', label: 'Diff' },
+  { value: 'go', label: 'Go' },
+  { value: 'rust', label: 'Rust' },
+  { value: 'java', label: 'Java' },
+  { value: 'ruby', label: 'Ruby' },
+  { value: 'swift', label: 'Swift' },
+  { value: 'docker', label: 'Dockerfile' },
+  { value: 'nginx', label: 'Nginx' },
+  { value: 'env', label: '.env' },
+]
+
+interface CodeBlockInserterProps {
+  onInsert: (block: string) => void
+  className?: string
+  style?: React.CSSProperties
+}
+
+/**
+ * Toolbar button that opens a language picker dropdown.
+ * When a language is selected, calls onInsert with the fenced code block template.
+ */
+export function CodeBlockInserter({ onInsert, className, style }: CodeBlockInserterProps) {
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = useState('')
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open && inputRef.current) inputRef.current.focus()
+  }, [open])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false)
+        setFilter('')
+      }
+    }
+    if (open) document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  const filtered = filter
+    ? LANGUAGES.filter((l) => l.label.toLowerCase().includes(filter.toLowerCase()) || l.value.includes(filter.toLowerCase()))
+    : LANGUAGES
+
+  const handleSelect = (lang: string) => {
+    onInsert(`\n\`\`\`${lang}\n\n\`\`\`\n`)
+    setOpen(false)
+    setFilter('')
+  }
+
+  return (
+    <div ref={dropdownRef} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={className}
+        style={{
+          fontSize: 11,
+          fontWeight: 700,
+          padding: '4px 10px',
+          width: 'auto',
+          cursor: 'pointer',
+          ...style,
+        }}
+        type="button"
+        aria-label="Insérer un bloc de code"
+        data-tooltip="Bloc de code"
+      >
+        &lt;/&gt; Code
+      </button>
+
+      {open && (
+        <div style={{
+          position: 'absolute',
+          bottom: '100%',
+          left: 0,
+          marginBottom: 4,
+          width: 200,
+          maxHeight: 280,
+          backgroundColor: '#1e293b',
+          border: '1px solid #334155',
+          borderRadius: 8,
+          boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+          zIndex: 1000,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
+          <div style={{ padding: '8px 8px 4px' }}>
+            <input
+              ref={inputRef}
+              type="text"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') { setOpen(false); setFilter('') }
+                if (e.key === 'Enter' && filtered.length > 0) handleSelect(filtered[0].value)
+              }}
+              placeholder="Rechercher..."
+              style={{
+                width: '100%',
+                padding: '6px 10px',
+                fontSize: 12,
+                backgroundColor: '#0f172a',
+                border: '1px solid #334155',
+                borderRadius: 6,
+                color: '#e2e8f0',
+                outline: 'none',
+                boxSizing: 'border-box',
+              }}
+            />
+          </div>
+          <div style={{ overflowY: 'auto', maxHeight: 230, padding: '4px 0' }}>
+            {filtered.map((lang) => (
+              <button
+                key={lang.value}
+                onClick={() => handleSelect(lang.value)}
+                style={{
+                  display: 'block',
+                  width: '100%',
+                  padding: '6px 12px',
+                  fontSize: 12,
+                  fontWeight: 500,
+                  color: '#e2e8f0',
+                  backgroundColor: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  textAlign: 'left',
+                }}
+                onMouseEnter={(e) => { (e.target as HTMLElement).style.backgroundColor = '#334155' }}
+                onMouseLeave={(e) => { (e.target as HTMLElement).style.backgroundColor = 'transparent' }}
+                type="button"
+              >
+                {lang.label}
+              </button>
+            ))}
+            {filtered.length === 0 && (
+              <div style={{ padding: '12px', fontSize: 12, color: '#64748b', textAlign: 'center' }}>
+                Aucun langage trouvé
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TicketConversation/components/QuickActions.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import React from 'react'
+import { C, s } from '../constants'
+
+interface QuickActionsProps {
+  statusTransitions: Array<{ status: string; label: string; color: string }>
+  statusUpdating: boolean
+  onStatusChange: (status: string) => void
+  snoozeUntil: string | null
+  snoozeSaving: boolean
+  onCancelSnooze: () => void
+  // Panel toggles
+  showMerge: boolean
+  showExtMsg: boolean
+  showSnooze: boolean
+  onToggleMerge: () => void
+  onToggleExtMsg: () => void
+  onToggleSnooze: () => void
+  onNextTicket: () => void
+  // Next ticket banner
+  showNextTicket: boolean
+  nextTicketId: number | null
+  nextTicketInfo: string
+  onCloseNextTicket: () => void
+}
+
+export function QuickActions({
+  statusTransitions, statusUpdating, onStatusChange,
+  snoozeUntil, snoozeSaving, onCancelSnooze,
+  showMerge: _showMerge, showExtMsg: _showExtMsg, showSnooze: _showSnooze,
+  onToggleMerge, onToggleExtMsg, onToggleSnooze, onNextTicket,
+  showNextTicket, nextTicketId, nextTicketInfo, onCloseNextTicket,
+}: QuickActionsProps) {
+  return (
+    <>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px', alignItems: 'center' }}>
+        {statusTransitions.map((a) => (
+          <button
+            key={a.status}
+            onClick={() => onStatusChange(a.status)}
+            disabled={statusUpdating}
+            style={s.outlineBtn(a.color, statusUpdating)}
+          >
+            {a.label}
+          </button>
+        ))}
+        {snoozeUntil && new Date(snoozeUntil) > new Date() && (
+          <button onClick={onCancelSnooze} disabled={snoozeSaving} style={{ ...s.ghostBtn('#7c3aed', snoozeSaving), fontSize: '12px', padding: '5px 10px' }}>
+            Annuler snooze
+          </button>
+        )}
+        <span style={{ borderLeft: `1px solid ${C.border}`, height: '20px', margin: '0 4px' }} />
+        <button onClick={onToggleMerge} style={s.ghostBtn('#be185d')}>Fusionner</button>
+        <button onClick={onToggleExtMsg} style={s.ghostBtn('#4f46e5')}>+ Message reçu</button>
+        <button onClick={onToggleSnooze} style={s.ghostBtn('#7c3aed')}>Snooze</button>
+        <button onClick={onNextTicket} style={s.ghostBtn('#16a34a')}>Ticket suivant</button>
+      </div>
+
+      {showNextTicket && (
+        <div style={{ padding: '10px 14px', borderRadius: '8px', backgroundColor: '#f0fdf4', border: `1px solid ${C.border}`, marginBottom: '14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          {nextTicketId ? (
+            <>
+              <span style={{ fontSize: '13px', color: '#166534', fontWeight: 600 }}>
+                Ticket suivant : <strong>{nextTicketInfo}</strong>
+              </span>
+              <button
+                onClick={() => { window.location.href = `/admin/support/ticket?id=${nextTicketId}` }}
+                style={{ ...s.btn(C.statusResolved), color: C.white, fontSize: '12px', padding: '5px 14px' }}
+              >
+                Ouvrir
+              </button>
+            </>
+          ) : (
+            <span style={{ fontSize: '13px', color: '#166534', fontWeight: 700 }}>{nextTicketInfo}</span>
+          )}
+          <button onClick={onCloseNextTicket} style={{ border: 'none', background: 'none', color: C.textMuted, cursor: 'pointer', fontSize: '16px', fontWeight: 700, marginLeft: '8px' }}>&times;</button>
+        </div>
+      )}
+    </>
+  )
+}

package/src/components/TicketConversation/components/TicketHeader.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import React from 'react'
+import type { SatisfactionSurvey } from '../types'
+import { statusLabels, C, s } from '../constants'
+
+const sourceLabels: Record<string, string> = {
+  email: 'Email',
+  'live-chat': 'Live Chat',
+  portal: 'Portail',
+  admin: 'Admin',
+}
+
+interface TicketHeaderProps {
+  ticketNumber: string
+  currentStatus: string
+  clientSentiment: { emoji: string; label: string; color: string } | null
+  ticketSource: string
+  chatSession: string
+  snoozeUntil: string | null
+  satisfaction: SatisfactionSurvey | null
+  copiedLink: 'admin' | 'client' | null
+  onCopyLink: (type: 'admin' | 'client') => void
+}
+
+export function TicketHeader({
+  ticketNumber, currentStatus, clientSentiment, ticketSource, chatSession,
+  snoozeUntil, satisfaction, copiedLink, onCopyLink,
+}: TicketHeaderProps) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: '10px', padding: '10px 14px',
+      borderRadius: '8px', backgroundColor: 'var(--theme-elevation-100)',
+      marginBottom: '12px', flexWrap: 'wrap',
+    }}>
+      {ticketNumber && (
+        <span style={{ fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace", fontWeight: 700, fontSize: '14px', color: C.textPrimary }}>{ticketNumber}</span>
+      )}
+      {currentStatus && (() => {
+        const st = statusLabels[currentStatus] || statusLabels.open
+        return <span style={s.badge(st.bg, st.color)}>{st.label}</span>
+      })()}
+      {clientSentiment && (
+        <span
+          style={{ ...s.badge(`${clientSentiment.color}15`, clientSentiment.color), fontSize: '11px' }}
+          title={`Sentiment : ${clientSentiment.label}`}
+        >
+          {clientSentiment.emoji} {clientSentiment.label}
+        </span>
+      )}
+      {ticketSource && ticketSource !== 'portal' && (
+        <span style={s.badge('#f1f5f9', '#475569')}>{sourceLabels[ticketSource] || ticketSource}</span>
+      )}
+      {chatSession && ticketSource === 'live-chat' && (
+        <span style={{ fontSize: '11px', color: C.textMuted }}>
+          Session : {chatSession.slice(0, 16)}...
+        </span>
+      )}
+      {snoozeUntil && new Date(snoozeUntil) > new Date() && (
+        <span style={s.badge('#f5f3ff', '#7c3aed')}>
+          Snoozé {new Date(snoozeUntil).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}
+        </span>
+      )}
+      {satisfaction && (
+        <span style={s.badge(
+          satisfaction.rating >= 4 ? '#dcfce7' : satisfaction.rating >= 3 ? '#fef9c3' : '#fee2e2',
+          satisfaction.rating >= 4 ? '#166534' : satisfaction.rating >= 3 ? '#854d0e' : '#991b1b',
+        )}>
+          {Array.from({ length: 5 }, (_, i) => i < satisfaction.rating ? '\u2605' : '\u2606').join('')} {satisfaction.rating}/5
+        </span>
+      )}
+      <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+        <button
+          onClick={() => onCopyLink('admin')}
+          title="Copier le lien admin"
+          style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '13px', opacity: copiedLink === 'admin' ? 1 : 0.5, padding: '2px 4px' }}
+        >
+          {copiedLink === 'admin' ? '\u2705' : '\uD83D\uDCCB'}
+        </button>
+        <button
+          onClick={() => onCopyLink('client')}
+          title="Copier le lien client"
+          style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '13px', opacity: copiedLink === 'client' ? 1 : 0.5, padding: '2px 4px' }}
+        >
+          {copiedLink === 'client' ? '\u2705' : '\uD83D\uDD17'}
+        </button>
+        {copiedLink && <span style={{ fontSize: '11px', color: '#16a34a', fontWeight: 600 }}>Copié</span>}
+      </span>
+    </div>
+  )
+}