@consilioweb/payload-support 0.16.0 → 1.0.0

package/dist/components/TicketConversation/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { C, s } from './constants.js';
+import { C, layoutStyles, s } from './constants.js';
 import { getDateLabel, formatMessageDate } from './utils.js';
 import { CodeBlockRendererHtml, CodeBlockRenderer } from './components/CodeBlock.js';
 import { CodeBlockInserter } from './components/CodeBlockInserter.js';
@@ -18,149 +18,12 @@ import { useMessageActions } from './hooks/useMessageActions.js';
 import { useTicketActions } from './hooks/useTicketActions.js';
 import { useReply } from './hooks/useReply.js';
 import { useAI } from './hooks/useAI.js';
+import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl.js';
 import { getFeatures } from './config.js';
+import { SkeletonText } from './SkeletonText.js';
+import { RewriteDropdown } from './RewriteDropdown.js';
 import '../../styles/theme.css';
 
-function useDocumentIdFromUrl() {
-  const [id, setId] = useState(void 0);
-  useEffect(() => {
-    const match = window.location.pathname.match(
-      /\/admin\/collections\/[^/]+\/([^/?#]+)/
-    );
-    if (match && match[1] !== "create") {
-      const raw = match[1];
-      const num = Number(raw);
-      setId(Number.isFinite(num) && String(num) === raw ? num : raw);
-    }
-  }, []);
-  return { id };
-}
-function SkeletonText({ lines = 3 }) {
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px", padding: "12px 0" }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        height: "14px",
-        borderRadius: "4px",
-        backgroundColor: "#e2e8f0",
-        width: i === lines - 1 ? "60%" : "100%",
-        animation: "pulse 1.5s ease-in-out infinite"
-      }
-    },
-    i
-  )) });
-}
-const layoutStyles = {
-  root: { padding: "12px 0" },
-  twoColumns: {
-    display: "grid",
-    gridTemplateColumns: "1fr 320px",
-    gap: "16px",
-    alignItems: "start"
-  },
-  mainColumn: { minWidth: 0 },
-  sideColumn: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    position: "sticky",
-    top: "80px"
-  }
-};
-const REWRITE_STYLES = [
-  { id: "auto", label: "\u270F\uFE0F Auto", desc: "Garde le ton actuel" },
-  { id: "tutoyer", label: "\u{1F44B} Tutoyer", desc: "Passe en tu" },
-  { id: "vouvoyer", label: "\u{1F3A9} Vouvoyer", desc: "Passe en vous" },
-  { id: "formel", label: "\u{1F4BC} Formel", desc: "Ton professionnel" },
-  { id: "amical", label: "\u{1F60A} Amical", desc: "Ton chaleureux" },
-  { id: "court", label: "\u26A1 Court", desc: "Version concise" }
-];
-const RewriteDropdown = ({ disabled, loading, onSelect }) => {
-  const [open, setOpen] = useState(false);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (!open) return;
-    const close = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", close);
-    return () => document.removeEventListener("mousedown", close);
-  }, [open]);
-  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen(!open),
-        disabled,
-        style: {
-          ...s.outlineBtn("#0891b2", disabled),
-          fontSize: "11px",
-          padding: "3px 10px",
-          borderRadius: "14px",
-          display: "flex",
-          alignItems: "center",
-          gap: "4px"
-        },
-        children: [
-          loading ? "Reformulation..." : "\u270F\uFE0F Reformuler",
-          !loading && /* @__PURE__ */ jsx("span", { style: { fontSize: 9, opacity: 0.7 }, children: "\u25BC" })
-        ]
-      }
-    ),
-    open && !disabled && !loading && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          bottom: "100%",
-          left: 0,
-          marginBottom: 4,
-          background: "var(--theme-elevation-0, #fff)",
-          border: "1px solid var(--theme-elevation-200, #e5e7eb)",
-          borderRadius: 8,
-          boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
-          zIndex: 100,
-          minWidth: 180,
-          overflow: "hidden"
-        },
-        children: REWRITE_STYLES.map((style) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setOpen(false);
-              onSelect(style.id);
-            },
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              width: "100%",
-              padding: "8px 12px",
-              border: "none",
-              background: "transparent",
-              cursor: "pointer",
-              textAlign: "left",
-              borderBottom: "1px solid var(--theme-elevation-100, #f3f4f6)",
-              transition: "background 120ms"
-            },
-            onMouseEnter: (e) => {
-              e.target.style.background = "var(--theme-elevation-50, #f9fafb)";
-            },
-            onMouseLeave: (e) => {
-              e.target.style.background = "transparent";
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "var(--theme-text, #111)" }, children: style.label }),
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "var(--theme-elevation-500, #6b7280)" }, children: style.desc })
-            ]
-          },
-          style.id
-        ))
-      }
-    )
-  ] });
-};
 const TicketConversation = () => {
   const { id } = useDocumentIdFromUrl();
   const [features] = useState(() => getFeatures());