@consilioweb/payload-support 0.8.2 → 0.9.4

package/dist/components/RichTextEditor/index.cjs

@@ -0,0 +1,233 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const RichTextEditor = react.forwardRef(function RichTextEditor2({
+  initialValue = "",
+  onChange,
+  placeholder = "\xC9crivez votre message...",
+  minHeight = 150,
+  onFileUpload,
+  borderColor = "#000",
+  focusBorderColor = "#00E5FF"
+}, ref) {
+  const editorRef = react.useRef(null);
+  const fileInputRef = react.useRef(null);
+  const [focused, setFocused] = react.useState(false);
+  const [isEmpty, setIsEmpty] = react.useState(!initialValue);
+  react.useEffect(() => {
+    if (editorRef.current && initialValue) {
+      editorRef.current.innerHTML = initialValue;
+      const text = editorRef.current.innerText?.trim() || "";
+      setIsEmpty(!text && !editorRef.current.querySelector("img"));
+    }
+  }, []);
+  const emitChange = react.useCallback(() => {
+    if (!editorRef.current) return;
+    const html = editorRef.current.innerHTML;
+    const text = editorRef.current.innerText?.trim() || "";
+    const empty = !text && !editorRef.current.querySelector("img");
+    setIsEmpty(empty);
+    onChange(empty ? "" : html, text);
+  }, [onChange]);
+  const exec = react.useCallback((command, value) => {
+    document.execCommand(command, false, value);
+    editorRef.current?.focus();
+    setTimeout(emitChange, 0);
+  }, [emitChange]);
+  react.useImperativeHandle(ref, () => ({
+    clear: () => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = "";
+        setIsEmpty(true);
+        onChange("", "");
+      }
+    },
+    setContent: (html) => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = html;
+        const text = editorRef.current.innerText?.trim() || "";
+        setIsEmpty(!text && !editorRef.current.querySelector("img"));
+        onChange(html, text);
+      }
+    },
+    getHtml: () => editorRef.current?.innerHTML || "",
+    getPlainText: () => editorRef.current?.innerText?.trim() || "",
+    focus: () => editorRef.current?.focus()
+  }));
+  const handleInsertLink = react.useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed) {
+      const url = prompt("URL du lien :");
+      if (!url) return;
+      const text = prompt("Texte du lien :", url) || url;
+      const safeUrl = url.replace(/"/g, """);
+      const safeText = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      document.execCommand("insertHTML", false, `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeText}</a>`);
+      editorRef.current?.focus();
+      setTimeout(emitChange, 0);
+    } else {
+      const url = prompt("URL du lien :");
+      if (url) exec("createLink", url);
+    }
+  }, [exec, emitChange]);
+  const handleImageClick = react.useCallback(() => {
+    if (onFileUpload) {
+      fileInputRef.current?.click();
+    } else {
+      const url = prompt("URL de l'image :");
+      if (url) {
+        const safeUrl = url.replace(/"/g, "&quot;");
+        document.execCommand("insertHTML", false, `<img src="${safeUrl}" alt="Image" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`);
+        editorRef.current?.focus();
+        setTimeout(emitChange, 0);
+      }
+    }
+  }, [onFileUpload, emitChange]);
+  const handleFileChange = react.useCallback(async (e) => {
+    if (!e.target.files || !onFileUpload) return;
+    for (const file of Array.from(e.target.files)) {
+      if (!file.type.startsWith("image/")) continue;
+      const url = await onFileUpload(file);
+      if (url) {
+        const safeName = file.name.replace(/"/g, "&quot;");
+        document.execCommand("insertHTML", false, `<img src="${url}" alt="${safeName}" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`);
+        editorRef.current?.focus();
+        setTimeout(emitChange, 0);
+      }
+    }
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [onFileUpload, emitChange]);
+  const handlePaste = react.useCallback(async (e) => {
+    if (!onFileUpload) return;
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith("image/")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) {
+          const url = await onFileUpload(file);
+          if (url) {
+            document.execCommand("insertHTML", false, `<img src="${url}" alt="Image coll\xE9e" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`);
+            editorRef.current?.focus();
+            setTimeout(emitChange, 0);
+          }
+        }
+        return;
+      }
+    }
+  }, [onFileUpload, emitChange]);
+  const btn = {
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    padding: "8px 10px",
+    fontSize: "13px",
+    fontWeight: 700,
+    color: "#555",
+    borderRadius: "5px",
+    lineHeight: 1,
+    minHeight: "44px",
+    minWidth: "44px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const sep = {
+    width: "1px",
+    height: "18px",
+    background: "#d1d5db",
+    margin: "0 4px",
+    alignSelf: "center"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: `3px solid ${focused ? focusBorderColor : borderColor}`, borderRadius: "12px", overflow: "hidden", transition: "border-color 0.15s", background: "#fff" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        .rte-toolbar button:hover { background: #e5e7eb !important; }
+        .rte-editor blockquote { border-left: 4px solid #00E5FF; margin: 8px 0; padding: 8px 16px; background: #f0f9ff; border-radius: 0 6px 6px 0; }
+        .rte-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
+        .rte-editor a { color: #00838f; text-decoration: underline; }
+        .rte-editor ul, .rte-editor ol { margin: 8px 0; padding-left: 24px; }
+        .rte-editor li { margin: 2px 0; }
+        .rte-editor p { margin: 0 0 6px 0; }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rte-toolbar", style: { display: "flex", alignItems: "center", gap: "2px", padding: "6px 10px", borderBottom: "2px solid #e5e7eb", backgroundColor: "#f9fafb", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("bold");
+      }, title: "Gras (Ctrl+B)", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "B" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("italic");
+      }, title: "Italique (Ctrl+I)", children: /* @__PURE__ */ jsxRuntime.jsx("em", { style: { fontStyle: "italic" }, children: "I" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("underline");
+      }, title: "Soulign\xE9 (Ctrl+U)", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textDecoration: "underline" }, children: "S" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: sep }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, fontSize: "16px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("formatBlock", "blockquote");
+      }, title: "Citation", children: "\u201C\u201D" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, fontSize: "12px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("insertUnorderedList");
+      }, title: "Liste \xE0 puces", children: "\u2022 Liste" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: { ...btn, fontSize: "12px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("insertOrderedList");
+      }, title: "Liste num\xE9rot\xE9e", children: "1. Liste" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: sep }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        handleInsertLink();
+      }, title: "Ins\xE9rer un lien", children: "\u{1F517}" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        handleImageClick();
+      }, title: "Ins\xE9rer une image", children: "\u{1F5BC}\uFE0F" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+      isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, padding: "14px 16px", color: "#9ca3af", fontSize: "14px", pointerEvents: "none", userSelect: "none" }, children: placeholder }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: editorRef,
+          className: "rte-editor",
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          onInput: emitChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => {
+            setFocused(false);
+            emitChange();
+          },
+          onPaste: handlePaste,
+          style: {
+            minHeight: `${minHeight}px`,
+            padding: "14px 16px",
+            fontSize: "14px",
+            lineHeight: 1.6,
+            color: "#1f2937",
+            outline: "none",
+            overflowY: "auto"
+          }
+        }
+      )
+    ] }),
+    onFileUpload && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        multiple: true,
+        onChange: handleFileChange,
+        style: { display: "none" }
+      }
+    )
+  ] });
+});
+
+exports.RichTextEditor = RichTextEditor;

package/dist/components/RichTextEditor/index.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+
+const RichTextEditor = forwardRef(function RichTextEditor2({
+  initialValue = "",
+  onChange,
+  placeholder = "\xC9crivez votre message...",
+  minHeight = 150,
+  onFileUpload,
+  borderColor = "#000",
+  focusBorderColor = "#00E5FF"
+}, ref) {
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(!initialValue);
+  useEffect(() => {
+    if (editorRef.current && initialValue) {
+      editorRef.current.innerHTML = initialValue;
+      const text = editorRef.current.innerText?.trim() || "";
+      setIsEmpty(!text && !editorRef.current.querySelector("img"));
+    }
+  }, []);
+  const emitChange = useCallback(() => {
+    if (!editorRef.current) return;
+    const html = editorRef.current.innerHTML;
+    const text = editorRef.current.innerText?.trim() || "";
+    const empty = !text && !editorRef.current.querySelector("img");
+    setIsEmpty(empty);
+    onChange(empty ? "" : html, text);
+  }, [onChange]);
+  const exec = useCallback((command, value) => {
+    document.execCommand(command, false, value);
+    editorRef.current?.focus();
+    setTimeout(emitChange, 0);
+  }, [emitChange]);
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = "";
+        setIsEmpty(true);
+        onChange("", "");
+      }
+    },
+    setContent: (html) => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = html;
+        const text = editorRef.current.innerText?.trim() || "";
+        setIsEmpty(!text && !editorRef.current.querySelector("img"));
+        onChange(html, text);
+      }
+    },
+    getHtml: () => editorRef.current?.innerHTML || "",
+    getPlainText: () => editorRef.current?.innerText?.trim() || "",
+    focus: () => editorRef.current?.focus()
+  }));
+  const handleInsertLink = useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed) {
+      const url = prompt("URL du lien :");
+      if (!url) return;
+      const text = prompt("Texte du lien :", url) || url;
+      const safeUrl = url.replace(/"/g, """);
+      const safeText = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      document.execCommand("insertHTML", false, `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeText}</a>`);
+      editorRef.current?.focus();
+      setTimeout(emitChange, 0);
+    } else {
+      const url = prompt("URL du lien :");
+      if (url) exec("createLink", url);
+    }
+  }, [exec, emitChange]);
+  const handleImageClick = useCallback(() => {
+    if (onFileUpload) {
+      fileInputRef.current?.click();
+    } else {
+      const url = prompt("URL de l'image :");
+      if (url) {
+        const safeUrl = url.replace(/"/g, "&quot;");
+        document.execCommand("insertHTML", false, `<img src="${safeUrl}" alt="Image" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`);
+        editorRef.current?.focus();
+        setTimeout(emitChange, 0);
+      }
+    }
+  }, [onFileUpload, emitChange]);
+  const handleFileChange = useCallback(async (e) => {
+    if (!e.target.files || !onFileUpload) return;
+    for (const file of Array.from(e.target.files)) {
+      if (!file.type.startsWith("image/")) continue;
+      const url = await onFileUpload(file);
+      if (url) {
+        const safeName = file.name.replace(/"/g, "&quot;");
+        document.execCommand("insertHTML", false, `<img src="${url}" alt="${safeName}" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`);
+        editorRef.current?.focus();
+        setTimeout(emitChange, 0);
+      }
+    }
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [onFileUpload, emitChange]);
+  const handlePaste = useCallback(async (e) => {
+    if (!onFileUpload) return;
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith("image/")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) {
+          const url = await onFileUpload(file);
+          if (url) {
+            document.execCommand("insertHTML", false, `<img src="${url}" alt="Image coll\xE9e" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`);
+            editorRef.current?.focus();
+            setTimeout(emitChange, 0);
+          }
+        }
+        return;
+      }
+    }
+  }, [onFileUpload, emitChange]);
+  const btn = {
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    padding: "8px 10px",
+    fontSize: "13px",
+    fontWeight: 700,
+    color: "#555",
+    borderRadius: "5px",
+    lineHeight: 1,
+    minHeight: "44px",
+    minWidth: "44px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const sep = {
+    width: "1px",
+    height: "18px",
+    background: "#d1d5db",
+    margin: "0 4px",
+    alignSelf: "center"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { border: `3px solid ${focused ? focusBorderColor : borderColor}`, borderRadius: "12px", overflow: "hidden", transition: "border-color 0.15s", background: "#fff" }, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .rte-toolbar button:hover { background: #e5e7eb !important; }
+        .rte-editor blockquote { border-left: 4px solid #00E5FF; margin: 8px 0; padding: 8px 16px; background: #f0f9ff; border-radius: 0 6px 6px 0; }
+        .rte-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
+        .rte-editor a { color: #00838f; text-decoration: underline; }
+        .rte-editor ul, .rte-editor ol { margin: 8px 0; padding-left: 24px; }
+        .rte-editor li { margin: 2px 0; }
+        .rte-editor p { margin: 0 0 6px 0; }
+      ` }),
+    /* @__PURE__ */ jsxs("div", { className: "rte-toolbar", style: { display: "flex", alignItems: "center", gap: "2px", padding: "6px 10px", borderBottom: "2px solid #e5e7eb", backgroundColor: "#f9fafb", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("bold");
+      }, title: "Gras (Ctrl+B)", children: /* @__PURE__ */ jsx("strong", { children: "B" }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("italic");
+      }, title: "Italique (Ctrl+I)", children: /* @__PURE__ */ jsx("em", { style: { fontStyle: "italic" }, children: "I" }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("underline");
+      }, title: "Soulign\xE9 (Ctrl+U)", children: /* @__PURE__ */ jsx("span", { style: { textDecoration: "underline" }, children: "S" }) }),
+      /* @__PURE__ */ jsx("span", { style: sep }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, fontSize: "16px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("formatBlock", "blockquote");
+      }, title: "Citation", children: "\u201C\u201D" }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, fontSize: "12px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("insertUnorderedList");
+      }, title: "Liste \xE0 puces", children: "\u2022 Liste" }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: { ...btn, fontSize: "12px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        exec("insertOrderedList");
+      }, title: "Liste num\xE9rot\xE9e", children: "1. Liste" }),
+      /* @__PURE__ */ jsx("span", { style: sep }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        handleInsertLink();
+      }, title: "Ins\xE9rer un lien", children: "\u{1F517}" }),
+      /* @__PURE__ */ jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
+        e.preventDefault();
+        handleImageClick();
+      }, title: "Ins\xE9rer une image", children: "\u{1F5BC}\uFE0F" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      isEmpty && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, padding: "14px 16px", color: "#9ca3af", fontSize: "14px", pointerEvents: "none", userSelect: "none" }, children: placeholder }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorRef,
+          className: "rte-editor",
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          onInput: emitChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => {
+            setFocused(false);
+            emitChange();
+          },
+          onPaste: handlePaste,
+          style: {
+            minHeight: `${minHeight}px`,
+            padding: "14px 16px",
+            fontSize: "14px",
+            lineHeight: 1.6,
+            color: "#1f2937",
+            outline: "none",
+            overflowY: "auto"
+          }
+        }
+      )
+    ] }),
+    onFileUpload && /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        multiple: true,
+        onChange: handleFileChange,
+        style: { display: "none" }
+      }
+    )
+  ] });
+});
+
+export { RichTextEditor };

package/dist/components/TicketConversation/components/CodeBlock.cjs

@@ -129,11 +129,12 @@ function SingleCodeBlock({ lang, code }) {
     ] })
   ] });
 }
-function CodeBlockRenderer({ text }) {
+function hasCodeBlocks(text) {
+  return /```[\s\S]*?```/.test(text);
+}
+function MessageWithCodeBlocks({ text, style }) {
   const parts = text.split(/(```[\s\S]*?```)/g);
-  const hasCodeBlock = parts.some((p) => p.startsWith("```"));
-  if (!hasCodeBlock) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, children: parts.map((part, i) => {
     if (part.startsWith("```")) {
       const match = part.match(/^```(\w*)\n?([\s\S]*?)```$/);
       if (match) {
@@ -142,13 +143,29 @@ function CodeBlockRenderer({ text }) {
         return /* @__PURE__ */ jsxRuntime.jsx(SingleCodeBlock, { lang, code }, i);
       }
     }
-    return null;
+    if (!part) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { whiteSpace: "pre-wrap" }, children: part }, i);
   }) });
 }
+function htmlToText(html) {
+  return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div|li|h[1-6]|tr|pre)>/gi, "\n").replace(/<\/?(ul|ol|table|tbody|thead)[^>]*>/gi, "").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\n{3,}/g, "\n\n").trim();
+}
+function MessageWithCodeBlocksHtml({ html, style }) {
+  const text = htmlToText(html);
+  if (!hasCodeBlocks(text)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(MessageWithCodeBlocks, { text, style });
+}
+function CodeBlockRenderer({ text }) {
+  if (!hasCodeBlocks(text)) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(MessageWithCodeBlocks, { text });
+}
 function CodeBlockRendererHtml({ html }) {
-  const stripped = html.replace(/<[^>]+>/g, "");
-  return /* @__PURE__ */ jsxRuntime.jsx(CodeBlockRenderer, { text: stripped });
+  const text = htmlToText(html);
+  return /* @__PURE__ */ jsxRuntime.jsx(CodeBlockRenderer, { text });
 }
 
 exports.CodeBlockRenderer = CodeBlockRenderer;
 exports.CodeBlockRendererHtml = CodeBlockRendererHtml;
+exports.MessageWithCodeBlocks = MessageWithCodeBlocks;
+exports.MessageWithCodeBlocksHtml = MessageWithCodeBlocksHtml;
+exports.hasCodeBlocks = hasCodeBlocks;

package/dist/components/TicketConversation/components/CodeBlock.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 
 const LANG_CONFIG = {
@@ -128,11 +128,12 @@ function SingleCodeBlock({ lang, code }) {
     ] })
   ] });
 }
-function CodeBlockRenderer({ text }) {
+function hasCodeBlocks(text) {
+  return /```[\s\S]*?```/.test(text);
+}
+function MessageWithCodeBlocks({ text, style }) {
   const parts = text.split(/(```[\s\S]*?```)/g);
-  const hasCodeBlock = parts.some((p) => p.startsWith("```"));
-  if (!hasCodeBlock) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, i) => {
+  return /* @__PURE__ */ jsx("div", { style, children: parts.map((part, i) => {
     if (part.startsWith("```")) {
       const match = part.match(/^```(\w*)\n?([\s\S]*?)```$/);
       if (match) {
@@ -141,12 +142,25 @@ function CodeBlockRenderer({ text }) {
         return /* @__PURE__ */ jsx(SingleCodeBlock, { lang, code }, i);
       }
     }
-    return null;
+    if (!part) return null;
+    return /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-wrap" }, children: part }, i);
   }) });
 }
+function htmlToText(html) {
+  return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div|li|h[1-6]|tr|pre)>/gi, "\n").replace(/<\/?(ul|ol|table|tbody|thead)[^>]*>/gi, "").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\n{3,}/g, "\n\n").trim();
+}
+function MessageWithCodeBlocksHtml({ html, style }) {
+  const text = htmlToText(html);
+  if (!hasCodeBlocks(text)) return null;
+  return /* @__PURE__ */ jsx(MessageWithCodeBlocks, { text, style });
+}
+function CodeBlockRenderer({ text }) {
+  if (!hasCodeBlocks(text)) return null;
+  return /* @__PURE__ */ jsx(MessageWithCodeBlocks, { text });
+}
 function CodeBlockRendererHtml({ html }) {
-  const stripped = html.replace(/<[^>]+>/g, "");
-  return /* @__PURE__ */ jsx(CodeBlockRenderer, { text: stripped });
+  const text = htmlToText(html);
+  return /* @__PURE__ */ jsx(CodeBlockRenderer, { text });
 }
 
-export { CodeBlockRenderer, CodeBlockRendererHtml };
+export { CodeBlockRenderer, CodeBlockRendererHtml, MessageWithCodeBlocks, MessageWithCodeBlocksHtml, hasCodeBlocks };

package/dist/index.cjs

@@ -1454,7 +1454,23 @@ function emailRichContent(html, config) {
       return `<${tag}${cleanAttrs} style="${style}">`;
     });
   }
+  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;
+      return chunk.split("\n").map((line) => line.trim() ? `<p>${line}</p>` : "").join("");
+    }).join("");
+  }
   let result = html.replace(/src="\/([^"]+)"/g, `src="${baseUrl}/$1"`);
+  result = convertFencedCodeBlocks(result);
   result = styleTag(result, "blockquote", `border-left: 4px solid ${c.brandColor}; margin: 16px 0; padding: 12px 20px; background: #f0f9fa; border-radius: 0 8px 8px 0;`);
   result = styleTag(result, "img", "max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block;");
   result = styleTag(result, "a", `color: ${c.brandColor}; text-decoration: underline; font-weight: 600;`);
@@ -8074,7 +8090,9 @@ function supportPlugin(config) {
       "support-new-ticket": viewConfig(`${viewsBase}#NewTicketView`, `${bp}/new-ticket`),
       "support-settings": viewConfig(`${viewsBase}#TicketingSettingsView`, `${bp}/settings`),
       "support-logs": viewConfig(`${viewsBase}#LogsView`, `${bp}/logs`),
-      "support-crm": viewConfig(`${viewsBase}#CrmView`, `${bp}/crm`)
+      "support-crm": viewConfig(`${viewsBase}#CrmView`, `${bp}/crm`),
+      "support-billing": viewConfig(`${viewsBase}#BillingView`, `${bp}/billing`),
+      "support-import": viewConfig(`${viewsBase}#ImportConversationView`, `/import-conversation`)
     };
     if (features.chat) {
       supportViews["support-chat"] = viewConfig(`${viewsBase}#ChatView`, `${bp}/chat`);

package/dist/index.js

@@ -1448,7 +1448,23 @@ function emailRichContent(html, config) {
       return `<${tag}${cleanAttrs} style="${style}">`;
     });
   }
+  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;
+      return chunk.split("\n").map((line) => line.trim() ? `<p>${line}</p>` : "").join("");
+    }).join("");
+  }
   let result = html.replace(/src="\/([^"]+)"/g, `src="${baseUrl}/$1"`);
+  result = convertFencedCodeBlocks(result);
   result = styleTag(result, "blockquote", `border-left: 4px solid ${c.brandColor}; margin: 16px 0; padding: 12px 20px; background: #f0f9fa; border-radius: 0 8px 8px 0;`);
   result = styleTag(result, "img", "max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block;");
   result = styleTag(result, "a", `color: ${c.brandColor}; text-decoration: underline; font-weight: 600;`);
@@ -8068,7 +8084,9 @@ function supportPlugin(config) {
       "support-new-ticket": viewConfig(`${viewsBase}#NewTicketView`, `${bp}/new-ticket`),
       "support-settings": viewConfig(`${viewsBase}#TicketingSettingsView`, `${bp}/settings`),
       "support-logs": viewConfig(`${viewsBase}#LogsView`, `${bp}/logs`),
-      "support-crm": viewConfig(`${viewsBase}#CrmView`, `${bp}/crm`)
+      "support-crm": viewConfig(`${viewsBase}#CrmView`, `${bp}/crm`),
+      "support-billing": viewConfig(`${viewsBase}#BillingView`, `${bp}/billing`),
+      "support-import": viewConfig(`${viewsBase}#ImportConversationView`, `/import-conversation`)
     };
     if (features.chat) {
       supportViews["support-chat"] = viewConfig(`${viewsBase}#ChatView`, `${bp}/chat`);