@consilioweb/payload-support 0.8.2 → 0.9.4

package/dist/views/ChatView/client.cjs

@@ -3,6 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var styles = require('../../styles/ChatView.module.scss');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 const ChatViewClient = () => {
   const { t } = useTranslation.useTranslation();
@@ -16,10 +21,13 @@ const ChatViewClient = () => {
   const [cannedResponses, setCannedResponses] = react.useState([]);
   const messagesEndRef = react.useRef(null);
   const lastFetchRef = react.useRef(null);
+  const sessionsPollInterval = react.useRef(5e3);
+  const sessionsPollTimeout = react.useRef(void 0);
+  const messagesPollInterval = react.useRef(3e3);
+  const messagesPollTimeout = react.useRef(void 0);
   const [sessionExpired, setSessionExpired] = react.useState(false);
-  const sessionsESRef = react.useRef(null);
-  const messagesESRef = react.useRef(null);
   const fetchSessions = react.useCallback(async () => {
+    let hadChanges = false;
     try {
       const res = await fetch("/api/support/admin-chat");
       if (res.status === 401 || res.status === 403) {
@@ -28,41 +36,36 @@ const ChatViewClient = () => {
       }
       if (res.ok) {
         const data = await res.json();
-        setSessions({ active: data.active || [], closed: data.closed || [] });
+        setSessions((prev) => {
+          const newActive = data.active || [];
+          const newClosed = data.closed || [];
+          if (JSON.stringify(prev.active) !== JSON.stringify(newActive) || JSON.stringify(prev.closed) !== JSON.stringify(newClosed)) {
+            hadChanges = true;
+            return { active: newActive, closed: newClosed };
+          }
+          return prev;
+        });
       }
     } catch {
     }
     setLoading(false);
+    if (hadChanges) {
+      sessionsPollInterval.current = 5e3;
+    } else {
+      sessionsPollInterval.current = Math.min(sessionsPollInterval.current + 2e3, 15e3);
+    }
   }, []);
   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);
+    if (sessionExpired) return;
+    const schedulePoll = () => {
+      sessionsPollTimeout.current = setTimeout(async () => {
+        await fetchSessions();
+        schedulePoll();
+      }, sessionsPollInterval.current);
+    };
+    schedulePoll();
+    return () => clearTimeout(sessionsPollTimeout.current);
   }, [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) => {
@@ -73,6 +76,7 @@ const ChatViewClient = () => {
   react.useEffect(() => {
     if (!selectedSession) return;
     const fetchMessages = async () => {
+      let hadNewMessages = false;
       try {
         const after = lastFetchRef.current || "";
         const url = `/api/support/admin-chat?session=${selectedSession}${after ? `&after=${after}` : ""}`;
@@ -81,12 +85,14 @@ const ChatViewClient = () => {
           const data = await res.json();
           if (!lastFetchRef.current) {
             setMessages(data.messages || []);
+            hadNewMessages = (data.messages?.length || 0) > 0;
           } 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;
             });
+            hadNewMessages = true;
           }
           if (data.messages?.length > 0) {
             lastFetchRef.current = data.messages[data.messages.length - 1].createdAt;
@@ -94,39 +100,23 @@ const ChatViewClient = () => {
         }
       } catch {
       }
+      if (hadNewMessages) {
+        messagesPollInterval.current = 3e3;
+      } else {
+        messagesPollInterval.current = Math.min(messagesPollInterval.current + 1e3, 1e4);
+      }
     };
     lastFetchRef.current = null;
+    messagesPollInterval.current = 3e3;
     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);
+    const schedulePoll = () => {
+      messagesPollTimeout.current = setTimeout(async () => {
+        await fetchMessages();
+        schedulePoll();
+      }, messagesPollInterval.current);
+    };
+    schedulePoll();
+    return () => clearTimeout(messagesPollTimeout.current);
   }, [selectedSession]);
   react.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -136,7 +126,11 @@ const ChatViewClient = () => {
     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() }) });
+      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]);
@@ -150,7 +144,11 @@ const ChatViewClient = () => {
   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 }) });
+      await fetch("/api/support/admin-chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "close", session: selectedSession })
+      });
       setSelectedSession(null);
       fetchSessions();
     } catch {
@@ -162,87 +160,136 @@ const ChatViewClient = () => {
     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)" }
+  const getClientCompany = (client) => {
+    if (typeof client === "number") return "";
+    return client.company || "";
   };
-  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,
-            ")"
-          ] })
+  const displayedSessions = showClosed ? sessions.closed : sessions.active;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.page, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: styles__default.default.title, children: t("chat.title") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.subtitle, 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", { className: styles__default.default.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.sidebar, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabs, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setShowClosed(false),
+              className: `${styles__default.default.tab} ${!showClosed ? styles__default.default.tabActive : ""}`,
+              children: [
+                t("chat.tabs.active"),
+                " (",
+                sessions.active.length,
+                ")"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setShowClosed(true),
+              className: `${styles__default.default.tab} ${showClosed ? styles__default.default.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", { className: styles__default.default.sessionList, children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingState, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: t("common.loading") }) }) : displayedSessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: showClosed ? t("chat.noSessionClosed") : t("chat.noSessionActive") }) : displayedSessions.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setSelectedSession(s.session),
+            className: `${styles__default.default.sessionItem} ${selectedSession === s.session ? styles__default.default.sessionItemActive : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.sessionHeader, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.sessionName, children: getClientName(s.client) }),
+                s.unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.unreadBadge, children: s.unreadCount })
+              ] }),
+              getClientCompany(s.client) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sessionCompany, children: getClientCompany(s.client) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sessionPreview, children: s.lastMessage.startsWith("Note:") ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.sessionRating, children: s.lastMessage.match(/[★☆]+/)?.[0] || "\u2B50" }) : s.lastMessage }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.sessionMeta, children: [
+                new Date(s.lastMessageAt).toLocaleString("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }),
+                " \xB7 ",
+                s.messageCount,
+                " ",
+                t("chat.msg")
+              ] })
+            ]
+          },
+          s.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.jsx("div", { className: styles__default.default.chatPanel, children: !selectedSession ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.chatEmpty, children: t("chat.selectSession") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.chatHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chatSessionId, children: selectedSession }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: closeSession, className: styles__default.default.closeBtn, 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.jsxs("div", { className: styles__default.default.messagesArea, children: [
+          messages.map((msg) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `${styles__default.default.messageRow} ${msg.senderType === "agent" ? styles__default.default.messageRowAgent : msg.senderType === "system" ? styles__default.default.messageRowSystem : styles__default.default.messageRowClient}`,
+              children: msg.senderType === "system" ? msg.message.startsWith("Note:") || msg.message.startsWith("Commentaire:") ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.bubbleRating, children: [
+                msg.message.includes("\u2605") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.ratingStars, children: msg.message.match(/[★☆]+/)?.[0] || "" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.ratingComment, children: msg.message.includes("\u2014") ? msg.message.split("\u2014").slice(1).join("\u2014").trim() : msg.message.replace(/Note:\s*[★☆]+\s*\(\d\/5\)\s*/, "").replace("Commentaire: ", "") }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.ratingMeta, children: [
+                  t("chat.clientReview"),
+                  " \xB7 ",
+                  new Date(msg.createdAt).toLocaleString("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })
+                ] })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.bubbleSystem, children: msg.message }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.bubble} ${msg.senderType === "agent" ? styles__default.default.bubbleAgent : styles__default.default.bubbleClient}`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.bubbleSender, children: msg.senderType === "agent" ? msg.agent ? `${msg.agent.firstName || t("chat.agent")}` : t("chat.you") : t("chat.clientLabel") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.bubbleBody, children: msg.message }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.bubbleTime, 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") })
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: sendMessage, className: styles__default.default.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 = "";
+              },
+              className: styles__default.default.cannedSelect,
+              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", { className: styles__default.default.composerRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: input,
+                onChange: (e) => setInput(e.target.value),
+                placeholder: t("chat.inputPlaceholder"),
+                maxLength: 2e3,
+                className: styles__default.default.composerInput,
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: !input.trim() || sending,
+                className: styles__default.default.sendBtn,
+                children: t("chat.sendButton")
+              }
+            )
           ] })
         ] })
       ] }) })