@consilioweb/payload-support 0.5.1

package/src/portal/auth/ChatWidget.tsx

@@ -0,0 +1,350 @@
+'use client'
+
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+
+interface ChatMessage {
+  id: string
+  senderType: 'client' | 'agent' | 'system'
+  message: string
+  createdAt: string
+  agent?: { firstName?: string; lastName?: string } | null
+}
+
+export function ChatWidget() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [session, setSession] = useState<string | null>(null)
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState('')
+  const [sending, setSending] = useState(false)
+  const [closed, setClosed] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const lastFetchRef = useRef<string | null>(null)
+  const pollInterval = useRef(3000)
+  const pollTimeout = useRef<NodeJS.Timeout>(undefined)
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [])
+
+  // Receive messages via SSE (with polling fallback)
+  const [pollExpired, setPollExpired] = useState(false)
+  const eventSourceRef = useRef<EventSource | null>(null)
+  const usingSSE = useRef(false)
+
+  useEffect(() => {
+    if (!session || closed || pollExpired) return
+
+    // Helper to merge new messages into state
+    const mergeMessages = (newMsgs: ChatMessage[]) => {
+      setMessages((prev) => {
+        const existingIds = new Set(prev.map((m) => m.id))
+        const filtered = newMsgs.filter((m) => !existingIds.has(m.id))
+        if (filtered.length === 0) return prev
+        return [...prev, ...filtered]
+      })
+      if (newMsgs.length > 0) {
+        lastFetchRef.current = newMsgs[newMsgs.length - 1].createdAt
+        // Check if session was closed by agent
+        const lastMsg = newMsgs[newMsgs.length - 1]
+        if (lastMsg.senderType === 'system' && lastMsg.message.includes('terminé')) {
+          setClosed(true)
+        }
+      }
+    }
+
+    // Try SSE first
+    if (typeof EventSource !== 'undefined') {
+      const es = new EventSource(`/api/support/chat-stream?session=${session}`)
+      eventSourceRef.current = es
+      usingSSE.current = true
+
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data)
+          if (parsed.type === 'messages' && parsed.data?.length > 0) {
+            mergeMessages(parsed.data)
+          } else if (parsed.type === 'closed') {
+            setClosed(true)
+          }
+        } catch {
+          // Ignore parse errors
+        }
+      }
+
+      es.onerror = () => {
+        // SSE connection lost — close and fall back to polling
+        es.close()
+        eventSourceRef.current = null
+        usingSSE.current = false
+      }
+
+      return () => {
+        es.close()
+        eventSourceRef.current = null
+        usingSSE.current = false
+      }
+    }
+
+    // Fallback: adaptive polling (same as before)
+    usingSSE.current = false
+
+    const poll = async () => {
+      let hadNewMessages = false
+      try {
+        const after = lastFetchRef.current || ''
+        const url = `/api/support/chat?session=${session}${after ? `&after=${after}` : ''}`
+        const res = await fetch(url, { credentials: 'include' })
+        if (res.status === 401 || res.status === 403) { setPollExpired(true); return }
+        if (res.ok) {
+          const data = await res.json()
+          if (data.messages?.length > 0) {
+            mergeMessages(data.messages)
+            hadNewMessages = true
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Polling error:', err)
+      }
+      if (hadNewMessages) {
+        pollInterval.current = 3000
+      } else {
+        pollInterval.current = Math.min(pollInterval.current + 2000, 15000)
+      }
+    }
+
+    pollInterval.current = 3000
+    poll()
+
+    const schedulePoll = () => {
+      pollTimeout.current = setTimeout(async () => {
+        if (usingSSE.current) return // SSE reconnected, stop polling
+        await poll()
+        schedulePoll()
+      }, pollInterval.current)
+    }
+    schedulePoll()
+
+    return () => clearTimeout(pollTimeout.current)
+  }, [session, closed, pollExpired])
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages, scrollToBottom])
+
+  const startChat = async () => {
+    try {
+      const res = await fetch('/api/support/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ action: 'start' }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setSession(data.session)
+        setMessages(data.messages || [])
+        lastFetchRef.current = data.messages?.[data.messages.length - 1]?.createdAt || null
+        setClosed(false)
+      }
+    } catch (err) {
+      console.warn('[ChatWidget] Error starting chat:', err)
+    }
+  }
+
+  const sendMessage = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!input.trim() || !session || sending) return
+
+    setSending(true)
+    try {
+      const res = await fetch('/api/support/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ action: 'send', session, message: input.trim() }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setMessages((prev) => [...prev, data.message])
+        lastFetchRef.current = data.message.createdAt
+        setInput('')
+      }
+    } catch (err) {
+      console.warn('[ChatWidget] Error sending message:', err)
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const closeChat = async () => {
+    if (!session) return
+    try {
+      await fetch('/api/support/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ action: 'close', session }),
+      })
+    } catch (err) {
+      console.warn('[ChatWidget] Error closing chat:', err)
+    }
+    setClosed(true)
+  }
+
+  const resetChat = () => {
+    setSession(null)
+    setMessages([])
+    setClosed(false)
+    lastFetchRef.current = null
+  }
+
+  return (
+    <>
+      {/* Chat toggle button */}
+      {!isOpen && (
+        <button
+          onClick={() => setIsOpen(true)}
+          className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full border-3 border-black bg-[#00E5FF] shadow-[4px_4px_0px_#000] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#000] dark:border-gray-600 dark:shadow-[4px_4px_0px_#333]"
+          title="Chat en direct"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+        </button>
+      )}
+
+      {/* Chat window */}
+      {isOpen && (
+        <div className="fixed bottom-6 right-6 z-50 flex h-[500px] w-[380px] max-w-[calc(100vw-2rem)] flex-col rounded-2xl border-4 border-black bg-white shadow-[6px_6px_0px_#000] dark:border-gray-600 dark:bg-gray-900 dark:shadow-[6px_6px_0px_#333]">
+          {/* Header */}
+          <div className="flex items-center justify-between rounded-t-xl border-b-3 border-black bg-[#00E5FF] px-4 py-3 dark:border-gray-600">
+            <div className="flex items-center gap-2">
+              <div className="h-3 w-3 rounded-full border-2 border-black bg-green-400" />
+              <span className="text-sm font-black text-black">Chat en direct</span>
+            </div>
+            <div className="flex items-center gap-1">
+              {session && !closed && (
+                <button
+                  onClick={closeChat}
+                  className="rounded-lg p-1 text-black/60 transition-colors hover:bg-black/10 hover:text-black"
+                  title="Terminer le chat"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                    <line x1="9" y1="9" x2="15" y2="15" />
+                    <line x1="15" y1="9" x2="9" y2="15" />
+                  </svg>
+                </button>
+              )}
+              <button
+                onClick={() => setIsOpen(false)}
+                className="rounded-lg p-1 text-black/60 transition-colors hover:bg-black/10 hover:text-black"
+                title="Réduire"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Messages area */}
+          <div className="flex-1 overflow-y-auto p-4">
+            {!session ? (
+              <div className="flex h-full flex-col items-center justify-center text-center">
+                <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border-3 border-black bg-[#FFD600] shadow-[3px_3px_0px_#000] dark:border-gray-600">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-8 w-8">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                  </svg>
+                </div>
+                <h3 className="mb-2 text-lg font-black text-black dark:text-white">Besoin d&apos;aide ?</h3>
+                <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
+                  Démarrez une conversation avec notre équipe support.
+                </p>
+                <button
+                  onClick={startChat}
+                  className="rounded-xl border-3 border-black bg-[#00E5FF] px-6 py-3 text-sm font-black text-black shadow-[4px_4px_0px_#000] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#000]"
+                >
+                  Démarrer le chat
+                </button>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {messages.map((msg) => (
+                  <div
+                    key={msg.id}
+                    className={`flex ${msg.senderType === 'client' ? 'justify-end' : 'justify-start'}`}
+                  >
+                    {msg.senderType === 'system' ? (
+                      <div className="w-full rounded-lg bg-gray-100 px-3 py-2 text-center text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+                        {msg.message}
+                      </div>
+                    ) : (
+                      <div
+                        className={`max-w-[80%] rounded-2xl px-4 py-2.5 ${
+                          msg.senderType === 'client'
+                            ? 'border-2 border-black bg-[#00E5FF] text-black'
+                            : 'border-2 border-gray-200 bg-gray-100 text-black dark:border-gray-700 dark:bg-gray-800 dark:text-white'
+                        }`}
+                      >
+                        {msg.senderType === 'agent' && msg.agent && (
+                          <p className="mb-1 text-xs font-bold text-gray-500 dark:text-gray-400">
+                            {(msg.agent as { firstName?: string })?.firstName || 'Agent'}
+                          </p>
+                        )}
+                        <p className="text-sm whitespace-pre-wrap">{msg.message}</p>
+                        <p className={`mt-1 text-xs ${msg.senderType === 'client' ? 'text-black/50' : 'text-gray-400'}`}>
+                          {new Date(msg.createdAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                ))}
+                <div ref={messagesEndRef} />
+              </div>
+            )}
+
+            {closed && (
+              <div className="mt-4 text-center">
+                <p className="mb-3 text-sm text-gray-500 dark:text-gray-400">Le chat est terminé.</p>
+                <button
+                  onClick={resetChat}
+                  className="rounded-xl border-2 border-black bg-[#FFD600] px-4 py-2 text-xs font-bold text-black shadow-[2px_2px_0px_#000] transition-all hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_#000]"
+                >
+                  Nouveau chat
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Input area */}
+          {session && !closed && (
+            <form onSubmit={sendMessage} className="border-t-3 border-black p-3 dark:border-gray-600">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Tapez votre message..."
+                  maxLength={2000}
+                  className="flex-1 rounded-xl border-2 border-black px-3 py-2 text-sm outline-none transition-shadow focus:shadow-[2px_2px_0px_#00E5FF] dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                  autoFocus
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim() || sending}
+                  className="rounded-xl border-2 border-black bg-[#00E5FF] px-3 py-2 font-bold text-black transition-all hover:shadow-[2px_2px_0px_#000] disabled:opacity-50 dark:border-gray-600"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
+                    <line x1="22" y1="2" x2="11" y2="13" />
+                    <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                  </svg>
+                </button>
+              </div>
+            </form>
+          )}
+        </div>
+      )}
+    </>
+  )
+}

package/src/portal/auth/ChatbotWidget.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import Link from 'next/link'
+
+interface ChatbotMessage {
+  id: string
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  suggestion?: 'create_ticket' | 'resolved' | null
+}
+
+let messageIdCounter = 0
+function generateId(): string {
+  return `msg-${Date.now()}-${++messageIdCounter}`
+}
+
+export function ChatbotWidget() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [messages, setMessages] = useState<ChatbotMessage[]>([])
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [])
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages, scrollToBottom])
+
+  // Focus input when panel opens
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 100)
+    }
+  }, [isOpen])
+
+  // Show welcome message on first open
+  useEffect(() => {
+    if (isOpen && messages.length === 0) {
+      setMessages([
+        {
+          id: generateId(),
+          role: 'assistant',
+          content:
+            'Bonjour ! Je suis l\'assistant Support. Posez-moi une question et je chercherai dans notre base de connaissances.',
+        },
+      ])
+    }
+  }, [isOpen, messages.length])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const question = input.trim()
+    if (!question || loading) return
+
+    const userMessage: ChatbotMessage = {
+      id: generateId(),
+      role: 'user',
+      content: question,
+    }
+    setMessages((prev) => [...prev, userMessage])
+    setInput('')
+    setLoading(true)
+
+    try {
+      const res = await fetch('/api/support/chatbot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ question }),
+      })
+
+      if (!res.ok) {
+        throw new Error('Erreur serveur')
+      }
+
+      const data = await res.json()
+
+      const botMessage: ChatbotMessage = {
+        id: generateId(),
+        role: 'assistant',
+        content: data.answer || data.message || 'Désolé, je n\'ai pas pu traiter votre demande.',
+        suggestion: data.suggestion === 'create_ticket' ? 'create_ticket' : null,
+      }
+      setMessages((prev) => [...prev, botMessage])
+    } catch {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: generateId(),
+          role: 'system',
+          content: 'Une erreur est survenue. Veuillez réessayer.',
+        },
+      ])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      {/* Floating trigger button — only show when chatbot panel is closed */}
+      {!isOpen && (
+        <button
+          onClick={() => setIsOpen(true)}
+          className="fixed bottom-24 right-6 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-all hover:bg-blue-700 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600"
+          aria-label="Ouvrir l'assistant IA"
+          title="Assistant IA"
+        >
+          {/* Sparkle / AI icon */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="h-6 w-6"
+          >
+            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+          </svg>
+        </button>
+      )}
+
+      {/* Chat panel */}
+      {isOpen && (
+        <div
+          className="fixed bottom-24 right-6 z-40 flex w-[360px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl transition-all dark:border-gray-700 dark:bg-gray-900"
+          style={{ height: '500px' }}
+          role="dialog"
+          aria-label="Assistant Support"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-gray-200 bg-blue-600 px-4 py-3 dark:border-gray-700">
+            <div className="flex items-center gap-2.5">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-4 w-4 text-white"
+                >
+                  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+                </svg>
+              </div>
+              <div>
+                <h2 className="text-sm font-semibold text-white">Assistant Support</h2>
+                <p className="text-xs text-white/70">Base de connaissances</p>
+              </div>
+            </div>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="rounded-lg p-1.5 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+              aria-label="Fermer l'assistant"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-5 w-5"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Messages area */}
+          <div className="flex-1 overflow-y-auto px-4 py-4">
+            <div className="space-y-4">
+              {messages.map((msg) => (
+                <div
+                  key={msg.id}
+                  className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                >
+                  {msg.role === 'system' ? (
+                    <div className="w-full rounded-lg bg-red-50 px-3 py-2 text-center text-xs text-red-600 dark:bg-red-900/20 dark:text-red-400">
+                      {msg.content}
+                    </div>
+                  ) : (
+                    <div
+                      className={`max-w-[85%] rounded-2xl px-4 py-2.5 ${
+                        msg.role === 'user'
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+                      }`}
+                    >
+                      <p className="whitespace-pre-wrap text-sm leading-relaxed">{msg.content}</p>
+
+                      {/* Create ticket CTA */}
+                      {msg.suggestion === 'create_ticket' && (
+                        <Link
+                          href="/support/tickets/new"
+                          className="mt-3 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="h-3.5 w-3.5"
+                          >
+                            <line x1="12" y1="5" x2="12" y2="19" />
+                            <line x1="5" y1="12" x2="19" y2="12" />
+                          </svg>
+                          Créer un ticket
+                        </Link>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {/* Typing indicator */}
+              {loading && (
+                <div className="flex justify-start">
+                  <div className="rounded-2xl bg-gray-100 px-4 py-3 dark:bg-gray-800">
+                    <div className="flex items-center gap-1.5">
+                      <span className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:0ms]" />
+                      <span className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:150ms]" />
+                      <span className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:300ms]" />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <div ref={messagesEndRef} />
+            </div>
+          </div>
+
+          {/* Input area */}
+          <form onSubmit={handleSubmit} className="border-t border-gray-200 p-3 dark:border-gray-700">
+            <div className="flex gap-2">
+              <input
+                ref={inputRef}
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Posez votre question..."
+                maxLength={500}
+                disabled={loading}
+                className="flex-1 rounded-xl border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 outline-none transition-all placeholder:text-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 dark:focus:border-blue-400"
+              />
+              <button
+                type="submit"
+                disabled={!input.trim() || loading}
+                className="flex h-[42px] w-[42px] flex-shrink-0 items-center justify-center rounded-xl bg-blue-600 text-white transition-all hover:bg-blue-700 disabled:opacity-40 disabled:hover:bg-blue-600 dark:bg-blue-500 dark:hover:bg-blue-600"
+                aria-label="Envoyer"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-4 w-4"
+                >
+                  <line x1="22" y1="2" x2="11" y2="13" />
+                  <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                </svg>
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </>
+  )
+}