@consilioweb/payload-support 0.9.6 → 0.9.8

package/dist/views/TicketDetailView/client.cjs

@@ -138,6 +138,10 @@ const TicketDetailClient = () => {
   const [replyHtml, setReplyHtml] = React.useState("");
   const [isInternal, setIsInternal] = React.useState(false);
   const [notifyClient, setNotifyClient] = React.useState(true);
+  const [sendAsClient, setSendAsClient] = React.useState(false);
+  const [editingMsgId, setEditingMsgId] = React.useState(null);
+  const [editingBody, setEditingBody] = React.useState("");
+  const [editSaving, setEditSaving] = React.useState(false);
   const [sending, setSending] = React.useState(false);
   const [showMenu, setShowMenu] = React.useState(false);
   const [clientTyping, setClientTyping] = React.useState(false);
@@ -419,12 +423,21 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ ticket: Number(ticketId), body: finalBody, ...finalHtml ? { bodyHtml: finalHtml } : {}, authorType: "admin", isInternal, skipNotification: isInternal || !notifyClient })
+        body: JSON.stringify({
+          ticket: Number(ticketId),
+          body: finalBody,
+          ...finalHtml ? { bodyHtml: finalHtml } : {},
+          authorType: sendAsClient ? "client" : "admin",
+          ...sendAsClient && client ? { authorClient: client.id } : {},
+          isInternal: sendAsClient ? false : isInternal,
+          skipNotification: sendAsClient || isInternal || !notifyClient
+        })
       });
       if (res.ok) {
         setReplyBody("");
         setReplyHtml("");
         setIsInternal(false);
+        setSendAsClient(false);
         setPendingFiles([]);
         editorRef.current?.clear();
         fetchAll();
@@ -467,6 +480,34 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
       setUndoToast(null);
     }
   };
+  const startEditMessage = (msg) => {
+    setEditingMsgId(msg.id);
+    setEditingBody(msg.body || "");
+  };
+  const cancelEditMessage = () => {
+    setEditingMsgId(null);
+    setEditingBody("");
+  };
+  const saveEditMessage = async () => {
+    if (editingMsgId === null) return;
+    setEditSaving(true);
+    try {
+      const res = await fetch(`/api/ticket-messages/${editingMsgId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true })
+      });
+      if (res.ok) {
+        setEditingMsgId(null);
+        setEditingBody("");
+        fetchAll();
+      }
+    } catch {
+    } finally {
+      setEditSaving(false);
+    }
+  };
   const handleSplitConfirm = async () => {
     if (!splitModal || !splitSubject.trim()) return;
     try {
@@ -676,7 +717,21 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                       return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#94a3b8" }, children: "\u2713" });
                     })() })
                   ] }),
-                  msg.deletedAt ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.messageBody, style: { color: "#94a3b8", fontStyle: "italic" }, children: t("detail.messageDeleted") }) : msg.bodyHtml && CodeBlock.hasCodeBlocks(msg.bodyHtml.replace(/<[^>]+>/g, "")) ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlockRendererHtml, { html: msg.bodyHtml }) : msg.bodyHtml ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${s__default.default.messageBody} ${s__default.default.rteDisplay}`, dangerouslySetInnerHTML: { __html: msg.bodyHtml } }) : CodeBlock.hasCodeBlocks(msg.body) ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.MessageWithCodeBlocks, { text: msg.body, style: { fontSize: "13px", lineHeight: 1.5 } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.messageBody, children: msg.body }),
+                  editingMsgId === msg.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        value: editingBody,
+                        onChange: (e) => setEditingBody(e.target.value),
+                        style: { width: "100%", minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: "inherit", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+                        autoFocus: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, justifyContent: "flex-end" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: cancelEditMessage, disabled: editSaving, style: { padding: "5px 12px", fontSize: 12, borderRadius: 5, border: "1px solid var(--theme-elevation-200)", background: "var(--theme-elevation-0)", color: "var(--theme-text)", cursor: "pointer" }, children: "Annuler" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: saveEditMessage, disabled: editSaving || !editingBody.trim(), style: { padding: "5px 12px", fontSize: 12, fontWeight: 600, borderRadius: 5, border: "none", background: "#2563eb", color: "#fff", cursor: editSaving ? "wait" : "pointer", opacity: editSaving ? 0.6 : 1 }, children: editSaving ? "Sauvegarde\u2026" : "Enregistrer" })
+                    ] })
+                  ] }) : msg.deletedAt ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.messageBody, style: { color: "#94a3b8", fontStyle: "italic" }, children: t("detail.messageDeleted") }) : msg.bodyHtml && CodeBlock.hasCodeBlocks(msg.bodyHtml.replace(/<[^>]+>/g, "")) ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlockRendererHtml, { html: msg.bodyHtml }) : msg.bodyHtml ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${s__default.default.messageBody} ${s__default.default.rteDisplay}`, dangerouslySetInnerHTML: { __html: msg.bodyHtml } }) : CodeBlock.hasCodeBlocks(msg.body) ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.MessageWithCodeBlocks, { text: msg.body, style: { fontSize: "13px", lineHeight: 1.5 } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.messageBody, children: msg.body }),
                   Array.isArray(msg.attachments) && msg.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.attachments, children: msg.attachments.map((att, i) => {
                     const file = typeof att.file === "object" ? att.file : null;
                     if (!file) return null;
@@ -686,7 +741,8 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                     ] }, i);
                   }) })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.messageActions, children: [
+                editingMsgId !== msg.id && !msg.deletedAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.messageActions, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.actionIcon, title: "\xC9diter", "aria-label": "\xC9diter le message", onClick: () => startEditMessage(msg), style: { fontSize: 11, width: "auto", padding: "4px 8px" }, children: "\xC9diter" }),
                   /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${s__default.default.actionIcon} ${s__default.default.danger}`, title: t("actions.deleteMessage"), "aria-label": t("actions.deleteMessage"), onClick: () => handleDeleteMessage(msg.id), style: { fontSize: 11, width: "auto", padding: "4px 8px" }, children: t("actions.deleteMessage") }),
                   features.splitTicket && !msg.isInternal && /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.actionIcon, title: t("actions.extractMessage"), "aria-label": t("actions.extractToNewTicket"), onClick: () => {
                     setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) });
@@ -789,18 +845,39 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
               ] }, i)) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.composerFooter, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.composerOptions, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: isInternal, onChange: (e) => setIsInternal(e.target.checked) }),
-                    " ",
-                    t("detail.internalNote")
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: notifyClient, onChange: (e) => setNotifyClient(e.target.checked), disabled: isInternal }),
-                    " ",
-                    t("detail.notify")
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "select",
+                    {
+                      value: sendAsClient ? "client" : "admin",
+                      onChange: (e) => {
+                        const asClient = e.target.value === "client";
+                        setSendAsClient(asClient);
+                        if (asClient) {
+                          setIsInternal(false);
+                          setNotifyClient(false);
+                        }
+                      },
+                      style: { fontSize: "12px", padding: "4px 8px", fontWeight: 600, borderRadius: 6, border: "1px solid var(--theme-elevation-200)", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "admin", children: "En tant que : Support" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "client", children: "En tant que : Client" })
+                      ]
+                    }
+                  ),
+                  !sendAsClient && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: isInternal, onChange: (e) => setIsInternal(e.target.checked) }),
+                      " ",
+                      t("detail.internalNote")
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: notifyClient, onChange: (e) => setNotifyClient(e.target.checked), disabled: isInternal }),
+                      " ",
+                      t("detail.notify")
+                    ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${s__default.default.sendBtn} ${isInternal ? s__default.default.sendBtnInternal : ""}`, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
+                /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${s__default.default.sendBtn} ${isInternal ? s__default.default.sendBtnInternal : ""}`, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : sendAsClient ? "Ajouter message client" : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
               ] })
             ]
           }

package/dist/views/TicketDetailView/client.js

@@ -131,6 +131,10 @@ const TicketDetailClient = () => {
   const [replyHtml, setReplyHtml] = useState("");
   const [isInternal, setIsInternal] = useState(false);
   const [notifyClient, setNotifyClient] = useState(true);
+  const [sendAsClient, setSendAsClient] = useState(false);
+  const [editingMsgId, setEditingMsgId] = useState(null);
+  const [editingBody, setEditingBody] = useState("");
+  const [editSaving, setEditSaving] = useState(false);
   const [sending, setSending] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [clientTyping, setClientTyping] = useState(false);
@@ -412,12 +416,21 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ ticket: Number(ticketId), body: finalBody, ...finalHtml ? { bodyHtml: finalHtml } : {}, authorType: "admin", isInternal, skipNotification: isInternal || !notifyClient })
+        body: JSON.stringify({
+          ticket: Number(ticketId),
+          body: finalBody,
+          ...finalHtml ? { bodyHtml: finalHtml } : {},
+          authorType: sendAsClient ? "client" : "admin",
+          ...sendAsClient && client ? { authorClient: client.id } : {},
+          isInternal: sendAsClient ? false : isInternal,
+          skipNotification: sendAsClient || isInternal || !notifyClient
+        })
       });
       if (res.ok) {
         setReplyBody("");
         setReplyHtml("");
         setIsInternal(false);
+        setSendAsClient(false);
         setPendingFiles([]);
         editorRef.current?.clear();
         fetchAll();
@@ -460,6 +473,34 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
       setUndoToast(null);
     }
   };
+  const startEditMessage = (msg) => {
+    setEditingMsgId(msg.id);
+    setEditingBody(msg.body || "");
+  };
+  const cancelEditMessage = () => {
+    setEditingMsgId(null);
+    setEditingBody("");
+  };
+  const saveEditMessage = async () => {
+    if (editingMsgId === null) return;
+    setEditSaving(true);
+    try {
+      const res = await fetch(`/api/ticket-messages/${editingMsgId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true })
+      });
+      if (res.ok) {
+        setEditingMsgId(null);
+        setEditingBody("");
+        fetchAll();
+      }
+    } catch {
+    } finally {
+      setEditSaving(false);
+    }
+  };
   const handleSplitConfirm = async () => {
     if (!splitModal || !splitSubject.trim()) return;
     try {
@@ -669,7 +710,21 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                       return /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8" }, children: "\u2713" });
                     })() })
                   ] }),
-                  msg.deletedAt ? /* @__PURE__ */ jsx("div", { className: s.messageBody, style: { color: "#94a3b8", fontStyle: "italic" }, children: t("detail.messageDeleted") }) : msg.bodyHtml && hasCodeBlocks(msg.bodyHtml.replace(/<[^>]+>/g, "")) ? /* @__PURE__ */ jsx(CodeBlockRendererHtml, { html: msg.bodyHtml }) : msg.bodyHtml ? /* @__PURE__ */ jsx("div", { className: `${s.messageBody} ${s.rteDisplay}`, dangerouslySetInnerHTML: { __html: msg.bodyHtml } }) : hasCodeBlocks(msg.body) ? /* @__PURE__ */ jsx(MessageWithCodeBlocks, { text: msg.body, style: { fontSize: "13px", lineHeight: 1.5 } }) : /* @__PURE__ */ jsx("div", { className: s.messageBody, children: msg.body }),
+                  editingMsgId === msg.id ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        value: editingBody,
+                        onChange: (e) => setEditingBody(e.target.value),
+                        style: { width: "100%", minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: "inherit", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+                        autoFocus: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, justifyContent: "flex-end" }, children: [
+                      /* @__PURE__ */ jsx("button", { onClick: cancelEditMessage, disabled: editSaving, style: { padding: "5px 12px", fontSize: 12, borderRadius: 5, border: "1px solid var(--theme-elevation-200)", background: "var(--theme-elevation-0)", color: "var(--theme-text)", cursor: "pointer" }, children: "Annuler" }),
+                      /* @__PURE__ */ jsx("button", { onClick: saveEditMessage, disabled: editSaving || !editingBody.trim(), style: { padding: "5px 12px", fontSize: 12, fontWeight: 600, borderRadius: 5, border: "none", background: "#2563eb", color: "#fff", cursor: editSaving ? "wait" : "pointer", opacity: editSaving ? 0.6 : 1 }, children: editSaving ? "Sauvegarde\u2026" : "Enregistrer" })
+                    ] })
+                  ] }) : msg.deletedAt ? /* @__PURE__ */ jsx("div", { className: s.messageBody, style: { color: "#94a3b8", fontStyle: "italic" }, children: t("detail.messageDeleted") }) : msg.bodyHtml && hasCodeBlocks(msg.bodyHtml.replace(/<[^>]+>/g, "")) ? /* @__PURE__ */ jsx(CodeBlockRendererHtml, { html: msg.bodyHtml }) : msg.bodyHtml ? /* @__PURE__ */ jsx("div", { className: `${s.messageBody} ${s.rteDisplay}`, dangerouslySetInnerHTML: { __html: msg.bodyHtml } }) : hasCodeBlocks(msg.body) ? /* @__PURE__ */ jsx(MessageWithCodeBlocks, { text: msg.body, style: { fontSize: "13px", lineHeight: 1.5 } }) : /* @__PURE__ */ jsx("div", { className: s.messageBody, children: msg.body }),
                   Array.isArray(msg.attachments) && msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: s.attachments, children: msg.attachments.map((att, i) => {
                     const file = typeof att.file === "object" ? att.file : null;
                     if (!file) return null;
@@ -679,7 +734,8 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                     ] }, i);
                   }) })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: s.messageActions, children: [
+                editingMsgId !== msg.id && !msg.deletedAt && /* @__PURE__ */ jsxs("div", { className: s.messageActions, children: [
+                  /* @__PURE__ */ jsx("button", { className: s.actionIcon, title: "\xC9diter", "aria-label": "\xC9diter le message", onClick: () => startEditMessage(msg), style: { fontSize: 11, width: "auto", padding: "4px 8px" }, children: "\xC9diter" }),
                   /* @__PURE__ */ jsx("button", { className: `${s.actionIcon} ${s.danger}`, title: t("actions.deleteMessage"), "aria-label": t("actions.deleteMessage"), onClick: () => handleDeleteMessage(msg.id), style: { fontSize: 11, width: "auto", padding: "4px 8px" }, children: t("actions.deleteMessage") }),
                   features.splitTicket && !msg.isInternal && /* @__PURE__ */ jsx("button", { className: s.actionIcon, title: t("actions.extractMessage"), "aria-label": t("actions.extractToNewTicket"), onClick: () => {
                     setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) });
@@ -782,18 +838,39 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
               ] }, i)) }),
               /* @__PURE__ */ jsxs("div", { className: s.composerFooter, children: [
                 /* @__PURE__ */ jsxs("div", { className: s.composerOptions, children: [
-                  /* @__PURE__ */ jsxs("label", { children: [
-                    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: isInternal, onChange: (e) => setIsInternal(e.target.checked) }),
-                    " ",
-                    t("detail.internalNote")
-                  ] }),
-                  /* @__PURE__ */ jsxs("label", { children: [
-                    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: notifyClient, onChange: (e) => setNotifyClient(e.target.checked), disabled: isInternal }),
-                    " ",
-                    t("detail.notify")
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: sendAsClient ? "client" : "admin",
+                      onChange: (e) => {
+                        const asClient = e.target.value === "client";
+                        setSendAsClient(asClient);
+                        if (asClient) {
+                          setIsInternal(false);
+                          setNotifyClient(false);
+                        }
+                      },
+                      style: { fontSize: "12px", padding: "4px 8px", fontWeight: 600, borderRadius: 6, border: "1px solid var(--theme-elevation-200)", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "admin", children: "En tant que : Support" }),
+                        /* @__PURE__ */ jsx("option", { value: "client", children: "En tant que : Client" })
+                      ]
+                    }
+                  ),
+                  !sendAsClient && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("label", { children: [
+                      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: isInternal, onChange: (e) => setIsInternal(e.target.checked) }),
+                      " ",
+                      t("detail.internalNote")
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { children: [
+                      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: notifyClient, onChange: (e) => setNotifyClient(e.target.checked), disabled: isInternal }),
+                      " ",
+                      t("detail.notify")
+                    ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx("button", { className: `${s.sendBtn} ${isInternal ? s.sendBtnInternal : ""}`, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
+                /* @__PURE__ */ jsx("button", { className: `${s.sendBtn} ${isInternal ? s.sendBtnInternal : ""}`, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : sendAsClient ? "Ajouter message client" : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
               ] })
             ]
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/views/TicketDetailView/client.tsx

@@ -132,6 +132,11 @@ export const TicketDetailClient: React.FC = () => {
   const [replyHtml, setReplyHtml] = useState('')
   const [isInternal, setIsInternal] = useState(false)
   const [notifyClient, setNotifyClient] = useState(true)
+  const [sendAsClient, setSendAsClient] = useState(false)
+  // Inline message edit
+  const [editingMsgId, setEditingMsgId] = useState<string | number | null>(null)
+  const [editingBody, setEditingBody] = useState('')
+  const [editSaving, setEditSaving] = useState(false)
   const [sending, setSending] = useState(false)
 
   const [showMenu, setShowMenu] = useState(false)
@@ -396,8 +401,16 @@ const [clientTyping, setClientTyping] = useState(false)
       const finalHtml = uploadedLinks.length > 0 ? `${replyHtml || replyBody.trim()}<br/><br/>${uploadedLinks.map((l) => l.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')).join('<br/>')}` : (replyHtml || undefined)
 
       const res = await fetch('/api/ticket-messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
-        body: JSON.stringify({ ticket: Number(ticketId), body: finalBody, ...(finalHtml ? { bodyHtml: finalHtml } : {}), authorType: 'admin', isInternal, skipNotification: isInternal || !notifyClient }) })
-      if (res.ok) { setReplyBody(''); setReplyHtml(''); setIsInternal(false); setPendingFiles([]); editorRef.current?.clear(); fetchAll() }
+        body: JSON.stringify({
+          ticket: Number(ticketId),
+          body: finalBody,
+          ...(finalHtml ? { bodyHtml: finalHtml } : {}),
+          authorType: sendAsClient ? 'client' : 'admin',
+          ...(sendAsClient && client ? { authorClient: client.id } : {}),
+          isInternal: sendAsClient ? false : isInternal,
+          skipNotification: sendAsClient || isInternal || !notifyClient,
+        }) })
+      if (res.ok) { setReplyBody(''); setReplyHtml(''); setIsInternal(false); setSendAsClient(false); setPendingFiles([]); editorRef.current?.clear(); fetchAll() }
     } catch {} finally { setSending(false) }
   }
 
@@ -432,6 +445,37 @@ const [clientTyping, setClientTyping] = useState(false)
     }
   }
 
+  // Inline edit message (body only, clears bodyHtml so the edit shows as plain text)
+  const startEditMessage = (msg: Message) => {
+    setEditingMsgId(msg.id)
+    setEditingBody(msg.body || '')
+  }
+
+  const cancelEditMessage = () => {
+    setEditingMsgId(null)
+    setEditingBody('')
+  }
+
+  const saveEditMessage = async () => {
+    if (editingMsgId === null) return
+    setEditSaving(true)
+    try {
+      const res = await fetch(`/api/ticket-messages/${editingMsgId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true }),
+      })
+      if (res.ok) {
+        setEditingMsgId(null)
+        setEditingBody('')
+        fetchAll()
+      }
+    } catch { /* silent */ } finally {
+      setEditSaving(false)
+    }
+  }
+
   // #2 — Split ticket with modal
   const handleSplitConfirm = async () => {
     if (!splitModal || !splitSubject.trim()) return
@@ -608,7 +652,20 @@ const [clientTyping, setClientTyping] = useState(false)
                           })()}
                         </span>
                       </div>
-                      {(msg as unknown as { deletedAt?: string }).deletedAt ? (
+                      {editingMsgId === msg.id ? (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                          <textarea
+                            value={editingBody}
+                            onChange={(e) => setEditingBody(e.target.value)}
+                            style={{ width: '100%', minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: 'inherit', border: '1px solid var(--theme-elevation-200)', borderRadius: 6, background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' }}
+                            autoFocus
+                          />
+                          <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
+                            <button onClick={cancelEditMessage} disabled={editSaving} style={{ padding: '5px 12px', fontSize: 12, borderRadius: 5, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', cursor: 'pointer' }}>Annuler</button>
+                            <button onClick={saveEditMessage} disabled={editSaving || !editingBody.trim()} style={{ padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 5, border: 'none', background: '#2563eb', color: '#fff', cursor: editSaving ? 'wait' : 'pointer', opacity: editSaving ? 0.6 : 1 }}>{editSaving ? 'Sauvegarde…' : 'Enregistrer'}</button>
+                          </div>
+                        </div>
+                      ) : (msg as unknown as { deletedAt?: string }).deletedAt ? (
                         <div className={s.messageBody} style={{ color: '#94a3b8', fontStyle: 'italic' }}>{t('detail.messageDeleted')}</div>
                       ) : msg.bodyHtml && hasCodeBlocks(msg.bodyHtml.replace(/<[^>]+>/g, '')) ? (
                         <CodeBlockRendererHtml html={msg.bodyHtml} />
@@ -632,13 +689,16 @@ const [clientTyping, setClientTyping] = useState(false)
                       )}
                     </div>
                     {/* Hover actions — icon buttons with aria-labels (#7) */}
-                    <div className={s.messageActions}>
-                      {/* #2 — Undo toast instead of confirm() */}
-                      <button className={`${s.actionIcon} ${s.danger}`} title={t('actions.deleteMessage')} aria-label={t('actions.deleteMessage')} onClick={() => handleDeleteMessage(msg.id)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.deleteMessage')}</button>
-                      {/* #2 — Split modal instead of prompt() */}
-                      {features.splitTicket && !msg.isInternal && <button className={s.actionIcon} title={t('actions.extractMessage')} aria-label={t('actions.extractToNewTicket')} onClick={() => { setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) }); setSplitSubject(`Split: ${ticket.subject}`) }} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.extractMessage')}</button>}
-                      {isAdmin && !msg.isInternal && <button className={s.actionIcon} title={t('actions.resendEmail')} aria-label={t('actions.resendEmail')} onClick={() => fetch('/api/support/resend-notification', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ messageId: msg.id }) })} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.resendEmail')}</button>}
-                    </div>
+                    {editingMsgId !== msg.id && !(msg as unknown as { deletedAt?: string }).deletedAt && (
+                      <div className={s.messageActions}>
+                        <button className={s.actionIcon} title="Éditer" aria-label="Éditer le message" onClick={() => startEditMessage(msg)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>Éditer</button>
+                        {/* #2 — Undo toast instead of confirm() */}
+                        <button className={`${s.actionIcon} ${s.danger}`} title={t('actions.deleteMessage')} aria-label={t('actions.deleteMessage')} onClick={() => handleDeleteMessage(msg.id)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.deleteMessage')}</button>
+                        {/* #2 — Split modal instead of prompt() */}
+                        {features.splitTicket && !msg.isInternal && <button className={s.actionIcon} title={t('actions.extractMessage')} aria-label={t('actions.extractToNewTicket')} onClick={() => { setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) }); setSplitSubject(`Split: ${ticket.subject}`) }} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.extractMessage')}</button>}
+                        {isAdmin && !msg.isInternal && <button className={s.actionIcon} title={t('actions.resendEmail')} aria-label={t('actions.resendEmail')} onClick={() => fetch('/api/support/resend-notification', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ messageId: msg.id }) })} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.resendEmail')}</button>}
+                      </div>
+                    )}
                   </div>
                 </React.Fragment>
               )
@@ -718,13 +778,27 @@ const [clientTyping, setClientTyping] = useState(false)
             )}
             <div className={s.composerFooter}>
               <div className={s.composerOptions}>
-                {/* #9 — "Internal" -> "Note interne", "Notify" -> "Notifier" */}
-                <label><input type="checkbox" checked={isInternal} onChange={(e) => setIsInternal(e.target.checked)} /> {t('detail.internalNote')}</label>
-                <label><input type="checkbox" checked={notifyClient} onChange={(e) => setNotifyClient(e.target.checked)} disabled={isInternal} /> {t('detail.notify')}</label>
+                <select
+                  value={sendAsClient ? 'client' : 'admin'}
+                  onChange={(e) => {
+                    const asClient = e.target.value === 'client'
+                    setSendAsClient(asClient)
+                    if (asClient) { setIsInternal(false); setNotifyClient(false) }
+                  }}
+                  style={{ fontSize: '12px', padding: '4px 8px', fontWeight: 600, borderRadius: 6, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' }}
+                >
+                  <option value="admin">En tant que : Support</option>
+                  <option value="client">En tant que : Client</option>
+                </select>
+                {!sendAsClient && (
+                  <>
+                    <label><input type="checkbox" checked={isInternal} onChange={(e) => setIsInternal(e.target.checked)} /> {t('detail.internalNote')}</label>
+                    <label><input type="checkbox" checked={notifyClient} onChange={(e) => setNotifyClient(e.target.checked)} disabled={isInternal} /> {t('detail.notify')}</label>
+                  </>
+                )}
               </div>
-              {/* #9 — "Send ->" -> "Envoyer ->" */}
               <button className={`${s.sendBtn} ${isInternal ? s.sendBtnInternal : ''}`} onClick={handleSend} disabled={sending || !replyBody.trim()} data-action="send-reply">
-                {sending ? t('detail.sending') : isInternal ? t('detail.sendNote') : t('detail.sendReply')}
+                {sending ? t('detail.sending') : sendAsClient ? 'Ajouter message client' : isInternal ? t('detail.sendNote') : t('detail.sendReply')}
               </button>
             </div>
           </div>