@consilioweb/payload-support 0.6.1 → 0.6.2

package/dist/views/ChatView/client.cjs

@@ -0,0 +1,253 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+
+const ChatViewClient = () => {
+  const { t } = useTranslation.useTranslation();
+  const [sessions, setSessions] = react.useState({ active: [], closed: [] });
+  const [selectedSession, setSelectedSession] = react.useState(null);
+  const [messages, setMessages] = react.useState([]);
+  const [input, setInput] = react.useState("");
+  const [sending, setSending] = react.useState(false);
+  const [showClosed, setShowClosed] = react.useState(false);
+  const [loading, setLoading] = react.useState(true);
+  const [cannedResponses, setCannedResponses] = react.useState([]);
+  const messagesEndRef = react.useRef(null);
+  const lastFetchRef = react.useRef(null);
+  const [sessionExpired, setSessionExpired] = react.useState(false);
+  const sessionsESRef = react.useRef(null);
+  const messagesESRef = react.useRef(null);
+  const fetchSessions = react.useCallback(async () => {
+    try {
+      const res = await fetch("/api/support/admin-chat");
+      if (res.status === 401 || res.status === 403) {
+        setSessionExpired(true);
+        return;
+      }
+      if (res.ok) {
+        const data = await res.json();
+        setSessions({ active: data.active || [], closed: data.closed || [] });
+      }
+    } catch {
+    }
+    setLoading(false);
+  }, []);
+  react.useEffect(() => {
+    if (sessionExpired) return;
+    fetchSessions();
+    if (typeof EventSource !== "undefined") {
+      const es = new EventSource("/api/support/admin-chat-stream");
+      sessionsESRef.current = es;
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.type === "sessions" && parsed.data) {
+            setSessions({ active: parsed.data.active || [], closed: parsed.data.closed || [] });
+            setLoading(false);
+          }
+        } catch {
+        }
+      };
+      es.onerror = () => {
+        es.close();
+        sessionsESRef.current = null;
+        const iv2 = setInterval(fetchSessions, 5e3);
+        return () => clearInterval(iv2);
+      };
+      return () => {
+        es.close();
+        sessionsESRef.current = null;
+      };
+    }
+    const iv = setInterval(fetchSessions, 5e3);
+    return () => clearInterval(iv);
+  }, [fetchSessions, sessionExpired]);
+  react.useEffect(() => {
+    fetch("/api/canned-responses?sort=sortOrder&limit=50&depth=0", { credentials: "include" }).then((res) => res.ok ? res.json() : null).then((data) => {
+      if (data?.docs) setCannedResponses(data.docs);
+    }).catch(() => {
+    });
+  }, []);
+  react.useEffect(() => {
+    if (!selectedSession) return;
+    const fetchMessages = async () => {
+      try {
+        const after = lastFetchRef.current || "";
+        const url = `/api/support/admin-chat?session=${selectedSession}${after ? `&after=${after}` : ""}`;
+        const res = await fetch(url);
+        if (res.ok) {
+          const data = await res.json();
+          if (!lastFetchRef.current) {
+            setMessages(data.messages || []);
+          } else if (data.messages?.length > 0) {
+            setMessages((prev) => {
+              const ids = new Set(prev.map((m) => m.id));
+              const newMsgs = data.messages.filter((m) => !ids.has(m.id));
+              return newMsgs.length > 0 ? [...prev, ...newMsgs] : prev;
+            });
+          }
+          if (data.messages?.length > 0) {
+            lastFetchRef.current = data.messages[data.messages.length - 1].createdAt;
+          }
+        }
+      } catch {
+      }
+    };
+    lastFetchRef.current = null;
+    fetchMessages();
+    if (typeof EventSource !== "undefined") {
+      const es = new EventSource(`/api/support/admin-chat-stream?session=${selectedSession}`);
+      messagesESRef.current = es;
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.type === "messages" && parsed.data?.length > 0) {
+            setMessages((prev) => {
+              const ids = new Set(prev.map((m) => m.id));
+              const newMsgs = parsed.data.filter((m) => !ids.has(m.id));
+              return newMsgs.length > 0 ? [...prev, ...newMsgs] : prev;
+            });
+          }
+        } catch {
+        }
+      };
+      es.onerror = () => {
+        es.close();
+        messagesESRef.current = null;
+        const iv2 = setInterval(fetchMessages, 3e3);
+        fetchMessages._fallbackIv = iv2;
+      };
+      return () => {
+        es.close();
+        messagesESRef.current = null;
+        if (fetchMessages._fallbackIv) clearInterval(fetchMessages._fallbackIv);
+      };
+    }
+    const iv = setInterval(fetchMessages, 3e3);
+    return () => clearInterval(iv);
+  }, [selectedSession]);
+  react.useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const sendMessage = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || !selectedSession || sending) return;
+    setSending(true);
+    try {
+      const res = await fetch("/api/support/admin-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "send", session: selectedSession, message: input.trim() }) });
+      if (res.ok) {
+        const data = await res.json();
+        setMessages((prev) => [...prev, data.message]);
+        lastFetchRef.current = data.message.createdAt;
+        setInput("");
+      }
+    } catch {
+    }
+    setSending(false);
+  };
+  const closeSession = async () => {
+    if (!selectedSession) return;
+    try {
+      await fetch("/api/support/admin-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "close", session: selectedSession }) });
+      setSelectedSession(null);
+      fetchSessions();
+    } catch {
+    }
+  };
+  const getClientName = (client) => {
+    if (typeof client === "number") return `Client #${client}`;
+    const parts = [client.firstName, client.lastName].filter(Boolean);
+    if (parts.length > 0) return parts.join(" ");
+    return client.email || `Client #${client.id}`;
+  };
+  const displayedSessions = showClosed ? sessions.closed : sessions.active;
+  const S = {
+    page: { padding: "20px 30px", maxWidth: 1200, margin: "0 auto" },
+    container: { display: "grid", gridTemplateColumns: "320px 1fr", gap: 16, minHeight: "calc(100vh - 300px)" },
+    sidebar: { borderRight: "1px solid var(--theme-elevation-200)" },
+    sessionItem: { display: "block", width: "100%", padding: "10px 14px", border: "none", background: "none", cursor: "pointer", textAlign: "left", borderBottom: "1px solid var(--theme-elevation-100)", fontSize: 13 },
+    sessionActive: { background: "var(--theme-elevation-50)" },
+    chatPanel: { display: "flex", flexDirection: "column" },
+    messagesArea: { flex: 1, overflowY: "auto", padding: "12px 0" },
+    bubble: { maxWidth: "70%", padding: "8px 12px", borderRadius: 10, marginBottom: 8, fontSize: 14 },
+    bubbleAgent: { background: "#dbeafe", color: "#1e3a5f", marginLeft: "auto" },
+    bubbleClient: { background: "var(--theme-elevation-100)", color: "var(--theme-text)" },
+    bubbleSystem: { margin: "4px auto", padding: "4px 12px", fontSize: 11, color: "#6b7280", textAlign: "center" },
+    composer: { borderTop: "1px solid var(--theme-elevation-200)", padding: "8px 0" },
+    composerInput: { flex: 1, padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+    sendBtn: { padding: "8px 16px", borderRadius: 8, background: "#2563eb", color: "#fff", border: "none", fontWeight: 600, cursor: "pointer", fontSize: 13 },
+    tabsRow: { display: "flex", gap: 4, padding: "8px 14px", borderBottom: "1px solid var(--theme-elevation-200)" },
+    tab: { padding: "4px 10px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 12, color: "var(--theme-elevation-500)" },
+    tabActive: { background: "var(--theme-elevation-100)", fontWeight: 700, color: "var(--theme-text)" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.page, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("chat.title") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--theme-elevation-500)", fontSize: 13, margin: "4px 0 0" }, children: sessions.active.length !== 1 ? t("chat.sessionCountPlural", { count: String(sessions.active.length) }) : t("chat.sessionCount", { count: String(sessions.active.length) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.tabsRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => setShowClosed(false), style: { ...S.tab, ...!showClosed ? S.tabActive : {} }, children: [
+            t("chat.tabs.active"),
+            " (",
+            sessions.active.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => setShowClosed(true), style: { ...S.tab, ...showClosed ? S.tabActive : {} }, children: [
+            t("chat.tabs.closed"),
+            " (",
+            sessions.closed.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : displayedSessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: showClosed ? t("chat.noSessionClosed") : t("chat.noSessionActive") }) : displayedSessions.map((s2) => /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => setSelectedSession(s2.session), style: { ...S.sessionItem, ...selectedSession === s2.session ? S.sessionActive : {} }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: getClientName(s2.client) }),
+            s2.unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#dc2626", color: "#fff", fontSize: 10, fontWeight: 700 }, children: s2.unreadCount })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: s2.lastMessage }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", marginTop: 2 }, children: [
+            new Date(s2.lastMessageAt).toLocaleString("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }),
+            " -- ",
+            s2.messageCount,
+            " ",
+            t("chat.msg")
+          ] })
+        ] }, s2.session)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.chatPanel, children: !selectedSession ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#94a3b8", fontSize: 14 }, children: t("chat.selectSession") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 14px", borderBottom: "1px solid var(--theme-elevation-200)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: "monospace", fontSize: 12, color: "var(--theme-elevation-500)" }, children: selectedSession }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: closeSession, style: { padding: "4px 12px", borderRadius: 6, border: "1px solid #dc2626", background: "none", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: t("chat.closeChat") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.messagesArea, children: [
+          messages.map((msg) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: msg.senderType === "agent" ? "row-reverse" : "row", padding: "2px 14px" }, children: msg.senderType === "system" ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.bubbleSystem, children: msg.message }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...S.bubble, ...msg.senderType === "agent" ? S.bubbleAgent : S.bubbleClient }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 600, marginBottom: 2 }, children: msg.senderType === "agent" ? t("chat.you") : t("chat.clientLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: msg.message }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 10, color: msg.senderType === "agent" ? "#1e40af" : "var(--theme-elevation-400)", marginTop: 2 }, children: new Date(msg.createdAt).toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }) })
+          ] }) }, msg.id)),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: sendMessage, style: S.composer, children: [
+          cannedResponses.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("select", { onChange: (e) => {
+            const cr = cannedResponses.find((c) => String(c.id) === e.target.value);
+            if (cr) setInput(cr.body);
+            e.target.value = "";
+          }, style: { padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 11, marginBottom: 6, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("chat.quickReply") }),
+            cannedResponses.map((cr) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: t("chat.inputPlaceholder"), maxLength: 2e3, style: S.composerInput, autoFocus: true }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: !input.trim() || sending, style: S.sendBtn, children: t("chat.sendButton") })
+          ] })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+
+exports.ChatViewClient = ChatViewClient;

package/dist/views/ChatView/client.js

@@ -0,0 +1,252 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
+
+const ChatViewClient = () => {
+  const { t } = useTranslation();
+  const [sessions, setSessions] = useState({ active: [], closed: [] });
+  const [selectedSession, setSelectedSession] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const [showClosed, setShowClosed] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [cannedResponses, setCannedResponses] = useState([]);
+  const messagesEndRef = useRef(null);
+  const lastFetchRef = useRef(null);
+  const [sessionExpired, setSessionExpired] = useState(false);
+  const sessionsESRef = useRef(null);
+  const messagesESRef = useRef(null);
+  const fetchSessions = useCallback(async () => {
+    try {
+      const res = await fetch("/api/support/admin-chat");
+      if (res.status === 401 || res.status === 403) {
+        setSessionExpired(true);
+        return;
+      }
+      if (res.ok) {
+        const data = await res.json();
+        setSessions({ active: data.active || [], closed: data.closed || [] });
+      }
+    } catch {
+    }
+    setLoading(false);
+  }, []);
+  useEffect(() => {
+    if (sessionExpired) return;
+    fetchSessions();
+    if (typeof EventSource !== "undefined") {
+      const es = new EventSource("/api/support/admin-chat-stream");
+      sessionsESRef.current = es;
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.type === "sessions" && parsed.data) {
+            setSessions({ active: parsed.data.active || [], closed: parsed.data.closed || [] });
+            setLoading(false);
+          }
+        } catch {
+        }
+      };
+      es.onerror = () => {
+        es.close();
+        sessionsESRef.current = null;
+        const iv2 = setInterval(fetchSessions, 5e3);
+        return () => clearInterval(iv2);
+      };
+      return () => {
+        es.close();
+        sessionsESRef.current = null;
+      };
+    }
+    const iv = setInterval(fetchSessions, 5e3);
+    return () => clearInterval(iv);
+  }, [fetchSessions, sessionExpired]);
+  useEffect(() => {
+    fetch("/api/canned-responses?sort=sortOrder&limit=50&depth=0", { credentials: "include" }).then((res) => res.ok ? res.json() : null).then((data) => {
+      if (data?.docs) setCannedResponses(data.docs);
+    }).catch(() => {
+    });
+  }, []);
+  useEffect(() => {
+    if (!selectedSession) return;
+    const fetchMessages = async () => {
+      try {
+        const after = lastFetchRef.current || "";
+        const url = `/api/support/admin-chat?session=${selectedSession}${after ? `&after=${after}` : ""}`;
+        const res = await fetch(url);
+        if (res.ok) {
+          const data = await res.json();
+          if (!lastFetchRef.current) {
+            setMessages(data.messages || []);
+          } else if (data.messages?.length > 0) {
+            setMessages((prev) => {
+              const ids = new Set(prev.map((m) => m.id));
+              const newMsgs = data.messages.filter((m) => !ids.has(m.id));
+              return newMsgs.length > 0 ? [...prev, ...newMsgs] : prev;
+            });
+          }
+          if (data.messages?.length > 0) {
+            lastFetchRef.current = data.messages[data.messages.length - 1].createdAt;
+          }
+        }
+      } catch {
+      }
+    };
+    lastFetchRef.current = null;
+    fetchMessages();
+    if (typeof EventSource !== "undefined") {
+      const es = new EventSource(`/api/support/admin-chat-stream?session=${selectedSession}`);
+      messagesESRef.current = es;
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.type === "messages" && parsed.data?.length > 0) {
+            setMessages((prev) => {
+              const ids = new Set(prev.map((m) => m.id));
+              const newMsgs = parsed.data.filter((m) => !ids.has(m.id));
+              return newMsgs.length > 0 ? [...prev, ...newMsgs] : prev;
+            });
+          }
+        } catch {
+        }
+      };
+      es.onerror = () => {
+        es.close();
+        messagesESRef.current = null;
+        const iv2 = setInterval(fetchMessages, 3e3);
+        fetchMessages._fallbackIv = iv2;
+      };
+      return () => {
+        es.close();
+        messagesESRef.current = null;
+        if (fetchMessages._fallbackIv) clearInterval(fetchMessages._fallbackIv);
+      };
+    }
+    const iv = setInterval(fetchMessages, 3e3);
+    return () => clearInterval(iv);
+  }, [selectedSession]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const sendMessage = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || !selectedSession || sending) return;
+    setSending(true);
+    try {
+      const res = await fetch("/api/support/admin-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "send", session: selectedSession, message: input.trim() }) });
+      if (res.ok) {
+        const data = await res.json();
+        setMessages((prev) => [...prev, data.message]);
+        lastFetchRef.current = data.message.createdAt;
+        setInput("");
+      }
+    } catch {
+    }
+    setSending(false);
+  };
+  const closeSession = async () => {
+    if (!selectedSession) return;
+    try {
+      await fetch("/api/support/admin-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "close", session: selectedSession }) });
+      setSelectedSession(null);
+      fetchSessions();
+    } catch {
+    }
+  };
+  const getClientName = (client) => {
+    if (typeof client === "number") return `Client #${client}`;
+    const parts = [client.firstName, client.lastName].filter(Boolean);
+    if (parts.length > 0) return parts.join(" ");
+    return client.email || `Client #${client.id}`;
+  };
+  const displayedSessions = showClosed ? sessions.closed : sessions.active;
+  const S = {
+    page: { padding: "20px 30px", maxWidth: 1200, margin: "0 auto" },
+    container: { display: "grid", gridTemplateColumns: "320px 1fr", gap: 16, minHeight: "calc(100vh - 300px)" },
+    sidebar: { borderRight: "1px solid var(--theme-elevation-200)" },
+    sessionItem: { display: "block", width: "100%", padding: "10px 14px", border: "none", background: "none", cursor: "pointer", textAlign: "left", borderBottom: "1px solid var(--theme-elevation-100)", fontSize: 13 },
+    sessionActive: { background: "var(--theme-elevation-50)" },
+    chatPanel: { display: "flex", flexDirection: "column" },
+    messagesArea: { flex: 1, overflowY: "auto", padding: "12px 0" },
+    bubble: { maxWidth: "70%", padding: "8px 12px", borderRadius: 10, marginBottom: 8, fontSize: 14 },
+    bubbleAgent: { background: "#dbeafe", color: "#1e3a5f", marginLeft: "auto" },
+    bubbleClient: { background: "var(--theme-elevation-100)", color: "var(--theme-text)" },
+    bubbleSystem: { margin: "4px auto", padding: "4px 12px", fontSize: 11, color: "#6b7280", textAlign: "center" },
+    composer: { borderTop: "1px solid var(--theme-elevation-200)", padding: "8px 0" },
+    composerInput: { flex: 1, padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+    sendBtn: { padding: "8px 16px", borderRadius: 8, background: "#2563eb", color: "#fff", border: "none", fontWeight: 600, cursor: "pointer", fontSize: 13 },
+    tabsRow: { display: "flex", gap: 4, padding: "8px 14px", borderBottom: "1px solid var(--theme-elevation-200)" },
+    tab: { padding: "4px 10px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 12, color: "var(--theme-elevation-500)" },
+    tabActive: { background: "var(--theme-elevation-100)", fontWeight: 700, color: "var(--theme-text)" }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("chat.title") }),
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--theme-elevation-500)", fontSize: 13, margin: "4px 0 0" }, children: sessions.active.length !== 1 ? t("chat.sessionCountPlural", { count: String(sessions.active.length) }) : t("chat.sessionCount", { count: String(sessions.active.length) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.container, children: [
+      /* @__PURE__ */ jsxs("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ jsxs("div", { style: S.tabsRow, children: [
+          /* @__PURE__ */ jsxs("button", { onClick: () => setShowClosed(false), style: { ...S.tab, ...!showClosed ? S.tabActive : {} }, children: [
+            t("chat.tabs.active"),
+            " (",
+            sessions.active.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs("button", { onClick: () => setShowClosed(true), style: { ...S.tab, ...showClosed ? S.tabActive : {} }, children: [
+            t("chat.tabs.closed"),
+            " (",
+            sessions.closed.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : displayedSessions.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: showClosed ? t("chat.noSessionClosed") : t("chat.noSessionActive") }) : displayedSessions.map((s2) => /* @__PURE__ */ jsxs("button", { onClick: () => setSelectedSession(s2.session), style: { ...S.sessionItem, ...selectedSession === s2.session ? S.sessionActive : {} }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: getClientName(s2.client) }),
+            s2.unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#dc2626", color: "#fff", fontSize: 10, fontWeight: 700 }, children: s2.unreadCount })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: s2.lastMessage }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", marginTop: 2 }, children: [
+            new Date(s2.lastMessageAt).toLocaleString("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }),
+            " -- ",
+            s2.messageCount,
+            " ",
+            t("chat.msg")
+          ] })
+        ] }, s2.session)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: S.chatPanel, children: !selectedSession ? /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#94a3b8", fontSize: 14 }, children: t("chat.selectSession") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 14px", borderBottom: "1px solid var(--theme-elevation-200)" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", fontSize: 12, color: "var(--theme-elevation-500)" }, children: selectedSession }),
+          /* @__PURE__ */ jsx("button", { onClick: closeSession, style: { padding: "4px 12px", borderRadius: 6, border: "1px solid #dc2626", background: "none", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: t("chat.closeChat") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.messagesArea, children: [
+          messages.map((msg) => /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: msg.senderType === "agent" ? "row-reverse" : "row", padding: "2px 14px" }, children: msg.senderType === "system" ? /* @__PURE__ */ jsx("div", { style: S.bubbleSystem, children: msg.message }) : /* @__PURE__ */ jsxs("div", { style: { ...S.bubble, ...msg.senderType === "agent" ? S.bubbleAgent : S.bubbleClient }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, marginBottom: 2 }, children: msg.senderType === "agent" ? t("chat.you") : t("chat.clientLabel") }),
+            /* @__PURE__ */ jsx("div", { children: msg.message }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: msg.senderType === "agent" ? "#1e40af" : "var(--theme-elevation-400)", marginTop: 2 }, children: new Date(msg.createdAt).toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }) })
+          ] }) }, msg.id)),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: sendMessage, style: S.composer, children: [
+          cannedResponses.length > 0 && /* @__PURE__ */ jsxs("select", { onChange: (e) => {
+            const cr = cannedResponses.find((c) => String(c.id) === e.target.value);
+            if (cr) setInput(cr.body);
+            e.target.value = "";
+          }, style: { padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 11, marginBottom: 6, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: t("chat.quickReply") }),
+            cannedResponses.map((cr) => /* @__PURE__ */ jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: t("chat.inputPlaceholder"), maxLength: 2e3, style: S.composerInput, autoFocus: true }),
+            /* @__PURE__ */ jsx("button", { type: "submit", disabled: !input.trim() || sending, style: S.sendBtn, children: t("chat.sendButton") })
+          ] })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+
+export { ChatViewClient };

package/dist/views/ChatView/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var templates = require('@payloadcms/next/templates');
+var navigation = require('next/navigation');
+var ErrorBoundary = require('../shared/ErrorBoundary');
+var client = require('./client');
+
+const ChatView = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult;
+  if (!req.user) {
+    navigation.redirect("/admin/login");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    templates.DefaultTemplate,
+    {
+      i18n: req.i18n,
+      locale: initPageResult.locale,
+      params: {},
+      payload: req.payload,
+      permissions: initPageResult.permissions,
+      searchParams: {},
+      user: req.user,
+      visibleEntities,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary.AdminErrorBoundary, { viewName: "ChatView", children: /* @__PURE__ */ jsxRuntime.jsx(client.ChatViewClient, {}) })
+    }
+  );
+};
+var ChatView_default = ChatView;
+
+exports.ChatView = ChatView;
+exports.default = ChatView_default;

package/dist/views/ChatView/index.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { redirect } from 'next/navigation';
+import { AdminErrorBoundary } from '../shared/ErrorBoundary';
+import { ChatViewClient } from './client';
+
+const ChatView = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult;
+  if (!req.user) {
+    redirect("/admin/login");
+  }
+  return /* @__PURE__ */ jsx(
+    DefaultTemplate,
+    {
+      i18n: req.i18n,
+      locale: initPageResult.locale,
+      params: {},
+      payload: req.payload,
+      permissions: initPageResult.permissions,
+      searchParams: {},
+      user: req.user,
+      visibleEntities,
+      children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "ChatView", children: /* @__PURE__ */ jsx(ChatViewClient, {}) })
+    }
+  );
+};
+var ChatView_default = ChatView;
+
+export { ChatView, ChatView_default as default };