@consilioweb/payload-support 0.9.5 → 0.9.7

package/dist/index.cjs

@@ -1457,15 +1457,14 @@ function emailRichContent(html, config) {
   function convertFencedCodeBlocks(input) {
     if (!input.includes("```")) return input;
     const normalized = input.replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div)>\s*<(p|div)[^>]*>/gi, "\n").replace(/<(p|div)[^>]*>/gi, "").replace(/<\/(p|div)>/gi, "\n");
-    return normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
-      const cleanCode = escapeHtml((code || "").replace(/\n$/, ""));
-      const label = lang ? lang.trim() : "code";
-      return `<div style="margin: 16px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
-        <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
-        <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
-      </div>`;
-    }).split(/(<div style="margin: 16px 0[\s\S]*?<\/div>)/g).map((chunk) => {
-      if (chunk.startsWith('<div style="margin: 16px 0')) return chunk;
+    const codeBlocks = [];
+    const withMarkers = normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
+      codeBlocks.push(renderCodeBlockHtml(lang || "", code || ""));
+      return `\0CODEBLOCK_${codeBlocks.length - 1}\0`;
+    });
+    return withMarkers.split(/(\x00CODEBLOCK_\d+\x00)/g).map((chunk) => {
+      const markerMatch = chunk.match(/^\x00CODEBLOCK_(\d+)\x00$/);
+      if (markerMatch) return codeBlocks[parseInt(markerMatch[1], 10)];
       return chunk.split("\n").map((line) => line.trim() ? `<p>${line}</p>` : "").join("");
     }).join("");
   }
@@ -1500,9 +1499,40 @@ function emailButton(text, url, color = "primary", config) {
     </div>
   `;
 }
+function renderCodeBlockHtml(lang, code) {
+  const cleanCode = escapeHtml(code.replace(/\n$/, ""));
+  const label = lang ? lang.trim() : "code";
+  return `<div style="margin: 12px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
+    <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
+    <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
+  </div>`;
+}
 function emailQuote(content, borderColor, config) {
   const c = resolveConfig(config);
   const color = borderColor || c.brandColor;
+  if (content && content.includes("```")) {
+    const parts = [];
+    const regex = /```(\w*)\n?([\s\S]*?)```/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      const textBefore = content.slice(lastIndex, match.index).trim();
+      if (textBefore) {
+        parts.push(`<p style="margin: 0 0 12px 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textBefore)}</p>`);
+      }
+      parts.push(renderCodeBlockHtml(match[1] || "", match[2] || ""));
+      lastIndex = match.index + match[0].length;
+    }
+    const textAfter = content.slice(lastIndex).trim();
+    if (textAfter) {
+      parts.push(`<p style="margin: 12px 0 0 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textAfter)}</p>`);
+    }
+    return `
+      <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
+        ${parts.join("")}
+      </div>
+    `;
+  }
   return `
     <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
       <p style="margin: 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(content)}</p>

package/dist/index.js

@@ -1451,15 +1451,14 @@ function emailRichContent(html, config) {
   function convertFencedCodeBlocks(input) {
     if (!input.includes("```")) return input;
     const normalized = input.replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div)>\s*<(p|div)[^>]*>/gi, "\n").replace(/<(p|div)[^>]*>/gi, "").replace(/<\/(p|div)>/gi, "\n");
-    return normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
-      const cleanCode = escapeHtml((code || "").replace(/\n$/, ""));
-      const label = lang ? lang.trim() : "code";
-      return `<div style="margin: 16px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
-        <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
-        <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
-      </div>`;
-    }).split(/(<div style="margin: 16px 0[\s\S]*?<\/div>)/g).map((chunk) => {
-      if (chunk.startsWith('<div style="margin: 16px 0')) return chunk;
+    const codeBlocks = [];
+    const withMarkers = normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
+      codeBlocks.push(renderCodeBlockHtml(lang || "", code || ""));
+      return `\0CODEBLOCK_${codeBlocks.length - 1}\0`;
+    });
+    return withMarkers.split(/(\x00CODEBLOCK_\d+\x00)/g).map((chunk) => {
+      const markerMatch = chunk.match(/^\x00CODEBLOCK_(\d+)\x00$/);
+      if (markerMatch) return codeBlocks[parseInt(markerMatch[1], 10)];
       return chunk.split("\n").map((line) => line.trim() ? `<p>${line}</p>` : "").join("");
     }).join("");
   }
@@ -1494,9 +1493,40 @@ function emailButton(text, url, color = "primary", config) {
     </div>
   `;
 }
+function renderCodeBlockHtml(lang, code) {
+  const cleanCode = escapeHtml(code.replace(/\n$/, ""));
+  const label = lang ? lang.trim() : "code";
+  return `<div style="margin: 12px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
+    <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
+    <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
+  </div>`;
+}
 function emailQuote(content, borderColor, config) {
   const c = resolveConfig(config);
   const color = borderColor || c.brandColor;
+  if (content && content.includes("```")) {
+    const parts = [];
+    const regex = /```(\w*)\n?([\s\S]*?)```/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      const textBefore = content.slice(lastIndex, match.index).trim();
+      if (textBefore) {
+        parts.push(`<p style="margin: 0 0 12px 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textBefore)}</p>`);
+      }
+      parts.push(renderCodeBlockHtml(match[1] || "", match[2] || ""));
+      lastIndex = match.index + match[0].length;
+    }
+    const textAfter = content.slice(lastIndex).trim();
+    if (textAfter) {
+      parts.push(`<p style="margin: 12px 0 0 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textAfter)}</p>`);
+    }
+    return `
+      <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
+        ${parts.join("")}
+      </div>
+    `;
+  }
   return `
     <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
       <p style="margin: 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(content)}</p>

package/dist/views/TicketDetailView/client.cjs

@@ -138,6 +138,7 @@ 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 [sending, setSending] = React.useState(false);
   const [showMenu, setShowMenu] = React.useState(false);
   const [clientTyping, setClientTyping] = React.useState(false);
@@ -419,12 +420,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();
@@ -789,18 +799,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,7 @@ const TicketDetailClient = () => {
   const [replyHtml, setReplyHtml] = useState("");
   const [isInternal, setIsInternal] = useState(false);
   const [notifyClient, setNotifyClient] = useState(true);
+  const [sendAsClient, setSendAsClient] = useState(false);
   const [sending, setSending] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [clientTyping, setClientTyping] = useState(false);
@@ -412,12 +413,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();
@@ -782,18 +792,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.5",
+  "version": "0.9.7",
   "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/utils/emailTemplate.ts

@@ -88,19 +88,19 @@ export function emailRichContent(html: string, config?: EmailTemplateConfig): st
       .replace(/<(p|div)[^>]*>/gi, '')
       .replace(/<\/(p|div)>/gi, '\n')
 
-    return normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
-      const cleanCode = escapeHtml((code || '').replace(/\n$/, ''))
-      const label = lang ? lang.trim() : 'code'
-      return `<div style="margin: 16px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
-        <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
-        <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
-      </div>`
+    // Replace code blocks with markers to protect them from paragraph wrapping
+    const codeBlocks: string[] = []
+    const withMarkers = normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
+      codeBlocks.push(renderCodeBlockHtml(lang || '', code || ''))
+      return `\x00CODEBLOCK_${codeBlocks.length - 1}\x00`
     })
-      // Re-wrap non-code text chunks in paragraphs (split by our <div> blocks)
-      .split(/(<div style="margin: 16px 0[\s\S]*?<\/div>)/g)
+
+    // Wrap non-marker text lines in <p>, then restore code blocks
+    return withMarkers
+      .split(/(\x00CODEBLOCK_\d+\x00)/g)
       .map((chunk) => {
-        if (chunk.startsWith('<div style="margin: 16px 0')) return chunk
-        // Non-code chunk: wrap text lines in <p>
+        const markerMatch = chunk.match(/^\x00CODEBLOCK_(\d+)\x00$/)
+        if (markerMatch) return codeBlocks[parseInt(markerMatch[1], 10)]
         return chunk
           .split('\n')
           .map((line) => line.trim() ? `<p>${line}</p>` : '')
@@ -165,11 +165,52 @@ export function emailButton(text: string, url: string, color: ButtonColor = 'pri
 }
 
 /**
- * Quote block for message previews
+ * Render a single fenced code block as styled email HTML.
+ * Email clients don't run JS so we just use a nice static layout.
+ */
+function renderCodeBlockHtml(lang: string, code: string): string {
+  const cleanCode = escapeHtml(code.replace(/\n$/, ''))
+  const label = lang ? lang.trim() : 'code'
+  return `<div style="margin: 12px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
+    <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
+    <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
+  </div>`
+}
+
+/**
+ * Quote block for message previews — supports fenced code blocks.
  */
 export function emailQuote(content: string, borderColor?: string, config?: EmailTemplateConfig): string {
   const c = resolveConfig(config)
   const color = borderColor || c.brandColor
+
+  // If content has fenced code blocks, render them as styled blocks
+  if (content && content.includes('```')) {
+    const parts: string[] = []
+    const regex = /```(\w*)\n?([\s\S]*?)```/g
+    let lastIndex = 0
+    let match: RegExpExecArray | null
+    while ((match = regex.exec(content)) !== null) {
+      // Text before the code block
+      const textBefore = content.slice(lastIndex, match.index).trim()
+      if (textBefore) {
+        parts.push(`<p style="margin: 0 0 12px 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textBefore)}</p>`)
+      }
+      parts.push(renderCodeBlockHtml(match[1] || '', match[2] || ''))
+      lastIndex = match.index + match[0].length
+    }
+    // Remaining text after the last code block
+    const textAfter = content.slice(lastIndex).trim()
+    if (textAfter) {
+      parts.push(`<p style="margin: 12px 0 0 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(textAfter)}</p>`)
+    }
+    return `
+      <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
+        ${parts.join('')}
+      </div>
+    `
+  }
+
   return `
     <div style="margin: 24px 0; padding: 20px 24px; background: #f8f9fa; border-left: 4px solid ${color}; border-radius: 0 8px 8px 0;">
       <p style="margin: 0; font-size: 15px; line-height: 1.75; color: #333333; white-space: pre-wrap;">${escapeHtml(content)}</p>

package/src/views/TicketDetailView/client.tsx

@@ -132,6 +132,7 @@ export const TicketDetailClient: React.FC = () => {
   const [replyHtml, setReplyHtml] = useState('')
   const [isInternal, setIsInternal] = useState(false)
   const [notifyClient, setNotifyClient] = useState(true)
+  const [sendAsClient, setSendAsClient] = useState(false)
   const [sending, setSending] = useState(false)
 
   const [showMenu, setShowMenu] = useState(false)
@@ -396,8 +397,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) }
   }
 
@@ -718,13 +727,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>