@zeniai/web-components 4.4.70-beta0DI → 4.4.71-beta0AN

package/dist/Editor-CbBxvSmp.js

@@ -0,0 +1,919 @@
+import { j as t } from "./vendor-react-DRsGZW4u.js";
+import c from "@emotion/styled";
+import { registerCodeHighlighting as Me, CodeNode as _e, CodeHighlightNode as Ae } from "@lexical/code";
+import { $isLinkNode as F, TOGGLE_LINK_COMMAND as Q, AutoLinkNode as Oe, LinkNode as Te } from "@lexical/link";
+import { $createListNode as De, $createListItemNode as Re, ListNode as V, $isListNode as Ie, INSERT_UNORDERED_LIST_COMMAND as Pe, REMOVE_LIST_COMMAND as Be, ListItemNode as Fe } from "@lexical/list";
+import { TRANSFORMERS as Ue } from "@lexical/markdown";
+import { AutoFocusPlugin as ze } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer as Ke } from "@lexical/react/LexicalComposer";
+import { ContentEditable as He } from "@lexical/react/LexicalContentEditable";
+import Je from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin as Xe } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin as Qe } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin as Ve } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin as We } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { RichTextPlugin as Ye } from "@lexical/react/LexicalRichTextPlugin";
+import { $isHeadingNode as Ge, HeadingNode as qe, QuoteNode as Ze } from "@lexical/rich-text";
+import { TableNode as et, TableCellNode as tt, TableRowNode as ot } from "@lexical/table";
+import { useTheme as pe } from "@mui/material/styles";
+import { gF as b, fs as r, g6 as rt, gq as st, eu as Z, hz as ue, aP as A, g4 as lt, fh as at, m as it, bx as nt, i$ as ee, fB as dt, dC as ct } from "./SessionTimeoutPopup-BMerO3g4.js";
+import { ParagraphNode as mt, $applyNodeReplacement as pt, $getRoot as te, BLUR_COMMAND as ut, $createTextNode as oe, $createParagraphNode as ht, $getSelection as he, $isRangeSelection as ge, SELECTION_CHANGE_COMMAND as be, CAN_UNDO_COMMAND as gt, CAN_REDO_COMMAND as bt, FORMAT_TEXT_COMMAND as H, FORMAT_ELEMENT_COMMAND as P, INDENT_CONTENT_COMMAND as ft, OUTDENT_CONTENT_COMMAND as xt, UNDO_COMMAND as yt, REDO_COMMAND as Ct } from "lexical";
+import { S as Nt, d as jt, l as kt, g as $t, h as vt, f as Et, b as Lt, k as wt, e as St, c as Mt, i as _t, j as At, t as Ot, E as Tt, C as Dt, a as Rt, P as It, L as Pt } from "./underline-BNKkE4Fr.js";
+import * as re from "react";
+import { useEffect as k, useRef as B, useState as f, useCallback as D } from "react";
+import { useLexicalComposerContext as fe } from "@lexical/react/LexicalComposerContext";
+import { $generateNodesFromDOM as se, $generateHtmlFromNodes as le } from "@lexical/html";
+import { $isParentElementRTL as Bt, $isAtNodeEnd as ae } from "@lexical/selection";
+import { mergeRegister as W, $getNearestNodeOfType as Ft } from "@lexical/utils";
+import { createPortal as Ut } from "react-dom";
+class xe extends mt {
+  __customClass;
+  static getType() {
+    return "custom-paragraph";
+  }
+  constructor(a, s) {
+    super(s), this.__customClass = a;
+  }
+  createDOM(a) {
+    const s = super.createDOM(a);
+    return s.classList.add(this.__customClass), s;
+  }
+  updateDOM(a, s, n) {
+    const m = super.updateDOM(a, s, n);
+    return this.__customClass !== a.__customClass && (s.classList.remove(a.__customClass), s.classList.add(this.__customClass)), m;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "custom-paragraph",
+      customClass: this.__customClass
+    };
+  }
+}
+function ie(e) {
+  return pt(new xe(e));
+}
+function zt() {
+  const [e] = fe();
+  return k(() => Me(e), [e]), null;
+}
+const Kt = (e) => /* @__PURE__ */ re.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ re.createElement("path", { d: "M6.60533 4.32937L7.53159 1.82613C7.69249 1.39129 8.30751 1.39129 8.46841 1.82613L9.39467 4.32937C9.7849 5.38384 10.6162 6.2151 11.6706 6.60533L14.1739 7.53158C14.6087 7.69249 14.6087 8.30751 14.1739 8.46841L11.6706 9.39467C10.6162 9.7849 9.7849 10.6162 9.39467 11.6706L8.46841 14.1739C8.30751 14.6087 7.69248 14.6087 7.53158 14.1739L6.60533 11.6706C6.2151 10.6162 5.38384 9.7849 4.32937 9.39467L1.82613 8.46841C1.39129 8.30751 1.39129 7.69248 1.82613 7.53158L4.32937 6.60533C5.38384 6.2151 6.2151 5.38384 6.60533 4.32937Z", fill: "currentColor", stroke: "currentColor" })), {
+  cockpit: {
+    monthEndReport: { toolbarPluginTooltip: Ht, editorZeniGPTButton: ne }
+  },
+  common: {
+    documents: J,
+    strings: X,
+    texts: { bold: Jt, indent: Xt, italic: Qt, link: Vt, outdent: Wt, redo: Yt, underline: Gt, undo: qt }
+  }
+} = ue.getLocalizedStrings(), R = 1;
+function de() {
+  return /* @__PURE__ */ t.jsx("div", { className: "divider" });
+}
+function ce(e, a) {
+  a === null ? (e.style.opacity = "0", e.style.top = "-1000px", e.style.left = "-1000px") : (e.style.opacity = "1", e.style.top = `${a.top + a.height + window.pageYOffset + 10}px`, e.style.left = `${a.left + window.pageXOffset - e.offsetWidth / 2 + a.width / 2}px`);
+}
+function Zt({ editor: e }) {
+  const a = pe(), s = B(null), n = B(null), m = B(!1), [x, N] = f(""), [$, o] = f(!1), [U, I] = f(null), L = D(() => {
+    const i = he();
+    if (ge(i)) {
+      const y = ye(i), j = y.getParent();
+      F(j) ? N(j.getURL()) : F(y) ? N(y.getURL()) : N("");
+    }
+    const O = s.current, v = window.getSelection(), T = document.activeElement;
+    if (O === null)
+      return;
+    const S = e.getRootElement();
+    if (i !== null && v != null && !v.isCollapsed && S !== null && S.contains(v.anchorNode)) {
+      const y = v.getRangeAt(0);
+      let j;
+      if (v.anchorNode === S) {
+        let M = S;
+        for (; M.firstElementChild != null; )
+          M = M.firstElementChild;
+        j = M.getBoundingClientRect();
+      } else
+        j = y.getBoundingClientRect();
+      m.current || ce(O, j), I(i);
+    } else (!T || T.className !== "link-input") && (ce(O, null), I(null), o(!1), N(""));
+    return !0;
+  }, [e]);
+  return k(() => W(
+    e.registerUpdateListener(({ editorState: i }) => {
+      i.read(() => {
+        L();
+      });
+    }),
+    e.registerCommand(
+      be,
+      () => (L(), !0),
+      R
+    )
+  ), [e, L]), k(() => {
+    e.getEditorState().read(() => {
+      L();
+    });
+  }, [e, L]), k(() => {
+    $ && n.current != null && n.current?.focus();
+  }, [$]), /* @__PURE__ */ t.jsx(so, { ref: s, children: $ ? /* @__PURE__ */ t.jsx(
+    "input",
+    {
+      ref: n,
+      className: "link-input",
+      value: x,
+      onChange: (i) => {
+        N(i.target.value);
+      },
+      onKeyDown: (i) => {
+        i.key === "Enter" ? (i.preventDefault(), U !== null && (x !== "" && e.dispatchCommand(Q, x), o(!1))) : i.key === "Escape" && (i.preventDefault(), o(!1));
+      }
+    }
+  ) : /* @__PURE__ */ t.jsxs(lo, { className: "link-input", children: [
+    /* @__PURE__ */ t.jsx(ao, { href: x, target: "_blank", rel: "noopener noreferrer", children: x }),
+    /* @__PURE__ */ t.jsx(
+      d,
+      {
+        className: "link-edit",
+        type: "button",
+        tabIndex: 0,
+        onMouseDown: (i) => i.preventDefault(),
+        onClick: () => {
+          o(!0);
+        },
+        children: /* @__PURE__ */ t.jsx(
+          lt,
+          {
+            style: {
+              width: r.sp3,
+              height: r.sp3,
+              color: a.colors.primary
+            }
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function ye(e) {
+  const a = e.anchor, s = e.focus, n = e.anchor.getNode(), m = e.focus.getNode();
+  return n === m ? n : e?.isBackward() ? ae(s) ? n : m : ae(a) ? m : n;
+}
+function eo({
+  fileAttached: e,
+  enableZeniGPTFeature: a,
+  isZeniGPTResponseLoading: s,
+  customerRequestData: n,
+  initialHtmlString: m,
+  handleFileInputClick: x,
+  improveUsingZeniGPTClick: N,
+  setZeniRequestsHtml: $
+}) {
+  const [o] = fe(), U = B(null), [I, L] = f(!1), [i, O] = f(!1), [v, T] = f("paragraph"), [, S] = f(!1), [y, j] = f(!1), [M, Ce] = f(!1), [Ne, je] = f(!1), [ke, $e] = f(!1), Y = D(
+    (l) => {
+      const p = new DOMParser().parseFromString(l, "text/html"), E = p.getElementsByTagName("p");
+      for (let C = E.length - 1; C >= 0; C--) {
+        const g = E[C];
+        g.textContent?.trim() === "" && (g.innerHTML = "");
+      }
+      const _ = se(o, p), h = te();
+      h.clear(), h.append(..._);
+    },
+    [o]
+  );
+  k(() => {
+    o.update(() => {
+      m != null && m.length > 0 && Y(m);
+    });
+  }, [o, m, Y]), k(() => {
+    o.update(() => {
+      s === !0 ? o.setEditable(!1) : o.setEditable(!0);
+    });
+  }, [o, s]), k(() => W(
+    o.registerCommand(
+      ut,
+      () => {
+        const l = le(o, null);
+        return $?.(l), !0;
+      },
+      R
+    )
+  ), [o, $]);
+  const ve = () => {
+    o.update(() => {
+      const l = le(o, null);
+      N?.(l);
+    });
+  }, G = D(
+    (l) => {
+      o.update(() => {
+        const w = new DOMParser(), p = ie(Z), E = De("bullet");
+        l.forEach((g) => {
+          const K = w.parseFromString(g, "text/html"), we = se(o, K), q = Re();
+          we.forEach((Se) => {
+            q.append(Se);
+          }), E.append(q);
+        }), p.append(E);
+        const _ = ie(Z);
+        _.append(oe(""));
+        const h = te(), C = h.getFirstChild();
+        C ? C.insertBefore(p) : h.append(p), C ? C.insertBefore(_) : h.append(_), h.getFirstChild() === null && h.append(
+          ht().append(oe(X.empty))
+        ), setTimeout(() => {
+          o.update(() => {
+            const g = V.clone(E);
+            p.replace(g);
+          });
+        }, 1e3);
+      });
+    },
+    [o]
+  );
+  k(() => {
+    n.length > 0 && G(n);
+  }, [n, G]);
+  const z = D(() => {
+    const l = he();
+    if (ge(l)) {
+      const w = l.anchor.getNode(), p = w.getKey() === "root" ? w : w.getTopLevelElementOrThrow(), E = p.getKey();
+      if (o.getElementByKey(E) !== null)
+        if (Ie(p)) {
+          const g = Ft(w, V), K = g ? g.getTag() : p.getTag();
+          T(K);
+        } else {
+          const g = Ge(p) ? p.getTag() : p.getType();
+          T(g);
+        }
+      $e(l.hasFormat("bold")), Ce(l.hasFormat("italic")), je(l.hasFormat("underline")), S(Bt(l));
+      const h = ye(l), C = h.getParent();
+      F(C) || F(h) ? j(!0) : j(!1);
+    }
+  }, [o]);
+  k(() => W(
+    o.registerUpdateListener(({ editorState: l }) => {
+      l.read(() => {
+        z();
+      });
+    }),
+    o.registerCommand(
+      be,
+      (l) => (z(), !1),
+      R
+    ),
+    o.registerCommand(
+      gt,
+      (l) => (L(l), !1),
+      R
+    ),
+    o.registerCommand(
+      bt,
+      (l) => (O(l), !1),
+      R
+    )
+  ), [o, z]);
+  const Ee = D(() => {
+    y ? o.dispatchCommand(Q, null) : o.dispatchCommand(Q, "https://");
+  }, [o, y]), Le = () => {
+    v !== "ul" ? o.dispatchCommand(Pe, void 0) : o.dispatchCommand(Be, void 0);
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "toolbar", ref: U, children: [
+    /* @__PURE__ */ t.jsxs(me, { children: [
+      /* @__PURE__ */ t.jsx(b, { placement: "bottom", title: /* @__PURE__ */ t.jsx(u, { children: Jt }), children: /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          onClick: () => {
+            o.dispatchCommand(H, "bold");
+          },
+          className: "toolbar-item spaced " + (ke ? "active" : ""),
+          style: { padding: r.sp1 },
+          disabled: s,
+          "aria-label": "Format Bold",
+          children: /* @__PURE__ */ t.jsx(Nt, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(u, { children: Qt }),
+          children: /* @__PURE__ */ t.jsx(
+            d,
+            {
+              type: "button",
+              onClick: () => {
+                o.dispatchCommand(H, "italic");
+              },
+              className: "toolbar-item spaced " + (M ? "active" : ""),
+              style: { padding: r.sp1 },
+              disabled: s,
+              "aria-label": "Format Italics",
+              children: /* @__PURE__ */ t.jsx(jt, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(u, { children: Gt }),
+          children: /* @__PURE__ */ t.jsx(
+            d,
+            {
+              type: "button",
+              onClick: () => {
+                o.dispatchCommand(H, "underline");
+              },
+              className: "toolbar-item spaced " + (Ne ? "active" : ""),
+              style: { padding: r.sp1 },
+              disabled: s,
+              "aria-label": "Format Underline",
+              children: /* @__PURE__ */ t.jsx(kt, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(b, { placement: "bottom", title: /* @__PURE__ */ t.jsx(u, { children: Vt }), children: /* @__PURE__ */ t.jsxs(
+        d,
+        {
+          type: "button",
+          onClick: Ee,
+          className: "toolbar-item spaced " + (y ? "active" : ""),
+          style: { padding: r.sp1 },
+          disabled: s,
+          "aria-label": "Insert Link",
+          children: [
+            /* @__PURE__ */ t.jsx(io, { className: "format link" }),
+            /* @__PURE__ */ t.jsx($t, { className: "format" })
+          ]
+        }
+      ) }),
+      y && Ut(/* @__PURE__ */ t.jsx(Zt, { editor: o }), document.body),
+      /* @__PURE__ */ t.jsx(de, {}),
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(u, { children: Ht.list }),
+          children: /* @__PURE__ */ t.jsx(
+            d,
+            {
+              type: "button",
+              onClick: Le,
+              className: "toolbar-item spaced " + (v === "ul" ? "active" : ""),
+              style: { padding: r.sp1 },
+              disabled: s,
+              "aria-label": "Format Underline",
+              children: /* @__PURE__ */ t.jsx(vt, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(de, {}),
+      /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          onClick: () => {
+            o.dispatchCommand(P, "left");
+          },
+          className: "toolbar-item spaced",
+          style: { padding: r.sp1 },
+          disabled: s,
+          "aria-label": "Left Align",
+          children: /* @__PURE__ */ t.jsx(Et, { className: "format" })
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          onClick: () => {
+            o.dispatchCommand(P, "center");
+          },
+          className: "toolbar-item spaced",
+          style: { padding: r.sp1 },
+          disabled: s,
+          "aria-label": "Center Align",
+          children: /* @__PURE__ */ t.jsx(Lt, { className: "format" })
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          onClick: () => {
+            o.dispatchCommand(P, "right");
+          },
+          className: "toolbar-item spaced",
+          style: { padding: r.sp1 },
+          disabled: s,
+          "aria-label": "Right Align",
+          children: /* @__PURE__ */ t.jsx(wt, { className: "format" })
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          onClick: () => {
+            o.dispatchCommand(P, "justify");
+          },
+          className: "toolbar-item",
+          style: { padding: r.sp1 },
+          disabled: s,
+          "aria-label": "Justify Align",
+          children: /* @__PURE__ */ t.jsx(St, { className: "format" })
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(u, { children: Xt }),
+          children: /* @__PURE__ */ t.jsx(
+            d,
+            {
+              type: "button",
+              onClick: () => {
+                o.dispatchCommand(ft, void 0);
+              },
+              className: "toolbar-item",
+              style: { padding: r.sp1 },
+              disabled: s,
+              "aria-label": "Indent",
+              children: /* @__PURE__ */ t.jsx(Mt, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "bottom",
+          title: /* @__PURE__ */ t.jsx(u, { children: Wt }),
+          children: /* @__PURE__ */ t.jsx(
+            d,
+            {
+              type: "button",
+              onClick: () => {
+                o.dispatchCommand(xt, void 0);
+              },
+              className: "toolbar-item",
+              style: { padding: r.sp1 },
+              disabled: s,
+              "aria-label": "Outdent",
+              children: /* @__PURE__ */ t.jsx(_t, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "bottom",
+          style: { padding: `2px ${r.sp2}` },
+          title: /* @__PURE__ */ t.jsxs(no, { children: [
+            /* @__PURE__ */ t.jsxs(u, { children: [
+              J.attachFile,
+              X.space
+            ] }),
+            /* @__PURE__ */ t.jsx(u, { children: J.formatImageAndDocumentAttachments }),
+            /* @__PURE__ */ t.jsxs(u, { children: [
+              X.space,
+              J.attachmentFileSize700KB
+            ] })
+          ] }),
+          children: /* @__PURE__ */ t.jsx(
+            d,
+            {
+              type: "button",
+              onClick: x,
+              className: "toolbar-item",
+              style: { padding: r.sp1 },
+              disabled: s || e,
+              "aria-label": "Attachment",
+              children: /* @__PURE__ */ t.jsx(rt, { className: "format" })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs(me, { children: [
+      a ? /* @__PURE__ */ t.jsx(
+        b,
+        {
+          placement: "top",
+          title: /* @__PURE__ */ t.jsx(u, { children: ne.tooltip }),
+          children: /* @__PURE__ */ t.jsxs(
+            oo,
+            {
+              isZeniGPTResponseLoading: s,
+              type: "button",
+              onClick: ve,
+              disabled: s,
+              children: [
+                /* @__PURE__ */ t.jsx(ro, {}),
+                /* @__PURE__ */ t.jsx(to, { children: ne.label })
+              ]
+            }
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ t.jsx(b, { placement: "bottom", title: /* @__PURE__ */ t.jsx(u, { children: qt }), children: /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          disabled: !I || s,
+          onClick: () => {
+            o.dispatchCommand(yt, void 0);
+          },
+          className: "toolbar-item spaced",
+          style: { padding: r.sp1 },
+          "aria-label": "Undo",
+          children: /* @__PURE__ */ t.jsx(st, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(b, { placement: "bottom", title: /* @__PURE__ */ t.jsx(u, { children: Yt }), children: /* @__PURE__ */ t.jsx(
+        d,
+        {
+          type: "button",
+          disabled: !i || s,
+          onClick: () => {
+            o.dispatchCommand(Ct, void 0);
+          },
+          className: "toolbar-item",
+          style: { padding: r.sp1 },
+          "aria-label": "Redo",
+          children: /* @__PURE__ */ t.jsx(At, { className: "format" })
+        }
+      ) })
+    ] })
+  ] });
+}
+const d = c.button``, me = c.div`
+  display: flex;
+  align-items: center;
+  gap: ${r.sp1};
+`, u = c.div`
+  padding: 2px ${r.sp2};
+  color: ${A.neutralGrey4Light};
+`, to = c(at)`
+  color: ${A.neutralGrey5Light};
+`, oo = c.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 165px;
+  background-color: ${(e) => e.isZeniGPTResponseLoading ? e.theme.colors.brandColorSapphireLight : e.theme.colors.brandColorSapphire};
+  color: ${A.neutralGrey5Light};
+  border-radius: ${r.sp1};
+  border: none;
+  height: 26px;
+  &:hover {
+    background-color: ${A.brandColorSapphireDark};
+  }
+`, ro = c(Kt)`
+  height: ${r.sp3};
+  width: ${r.sp3};
+  margin-right: ${r.sp1};
+  color: ${A.brandColorPearl};
+`, so = c.div`
+  position: absolute;
+  z-index: 100;
+  top: -10000px;
+  left: -10000px;
+  margin-top: -6px;
+  max-width: 300px;
+  width: 100%;
+  opacity: 0;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${r.sp0} 5px 10px ${A.overlayLight};
+  border-radius: ${r.sp2};
+  transition: opacity 0.5s;
+  z-index: 10000;
+
+  .link-input {
+    display: block;
+    box-sizing: border-box;
+    padding: ${r.sp3};
+    border-radius: ${r.sp3};
+    background-color: ${(e) => e.theme.colors.grey5};
+    font-size: 15px;
+    color: ${(e) => e.theme.colors.primary};
+    border: 0;
+    outline: 0;
+    position: relative;
+    font-family: inherit;
+  }
+
+  button.link-edit {
+    display: flex;
+    align-items: center;
+    width: 35px;
+    position: absolute;
+    right: ${r.sp0};
+    top: ${r.sp0};
+    bottom: ${r.sp0};
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .link-input a {
+    color: ${(e) => e.theme.colors.link};
+    text-decoration: none;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 30px;
+    text-overflow: ellipsis;
+  }
+
+  .link-input a:hover {
+    text-decoration: underline;
+  }
+
+  .button {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    padding: 6px;
+    border-radius: ${r.sp2};
+    cursor: pointer;
+    margin: 0 2px;
+  }
+
+  .button.hovered {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    background-color: ${(e) => e.theme.colors.background};
+  }
+
+  .button i,
+  .actions i {
+    background-size: contain;
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    vertical-align: -0.25em;
+  }
+`, lo = c.div``, ao = c.a``, io = c.i``, no = c.div`
+  display: flex;
+  flex-direction: column; /* Align children vertically */
+  align-items: center; /* Center children horizontally */
+  justify-content: center; /* Center children vertically */
+  height: 100%; /* Adjust to your desired height */
+  width: 100%; /* Adjust to your desired width */
+`, {
+  cockpit: {
+    monthEndReport: { editorPlaceholder: co }
+  }
+} = ue.getLocalizedStrings(), mo = c(ct)`
+  color: ${(e) => e.theme.colors.grey2};
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: ${r.sp3};
+  left: 12px;
+  user-select: none;
+  display: inline-block;
+  pointer-events: none;
+`, po = c(dt)`
+  position: relative;
+  margin: ${r.sp0};
+  border-radius: ${r.sp2};
+  color: ${(e) => e.theme.colors.primary};
+  text-align: left;
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  overflow: hidden;
+
+  &:hover {
+    border: ${(e) => `1px solid ${e.isZeniGPTResponseLoading ? e.theme.colors.grey2 : e.theme.colors.primary}`};
+
+    .toolbar {
+      border-bottom: ${(e) => `1px solid ${e.isZeniGPTResponseLoading ? e.theme.colors.grey2 : e.theme.colors.primary}`};
+    }
+  }
+
+  &:focus-within {
+    border: ${(e) => `1px solid ${e.isZeniGPTResponseLoading ? e.theme.colors.grey2 : e.theme.colors.primary}`};
+
+    .toolbar {
+      border-bottom: ${(e) => `1px solid ${e.isZeniGPTResponseLoading ? e.theme.colors.grey2 : e.theme.colors.primary}`};
+    }
+  }
+
+  .editor-input {
+    min-height: 120px;
+    max-height: 360px;
+    overflow: auto;
+    resize: none;
+    ${ee.largeRegular.css};
+    color: ${(e) => e.isZeniGPTResponseLoading ? e.theme.colors.grey2 : e.theme.colors.primary};
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding: ${r.sp3} 12px;
+
+    .editor__link {
+      color: ${(e) => e.isZeniGPTResponseLoading ? e.theme.colors.grey2 : e.theme.colors.link};
+      text-decoration: none;
+    }
+    .editor__link:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .editor-input p {
+    margin: 0;
+  }
+
+  .toolbar {
+    display: flex;
+    margin-bottom: 1px;
+    background: ${(e) => e.theme.colors.grey5};
+    padding: ${r.sp1};
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    vertical-align: middle;
+    border-bottom: 1px solid ${(e) => e.theme.colors.grey2};
+    justify-content: space-between;
+  }
+
+  .toolbar button.toolbar-item {
+    border: 0;
+    display: flex;
+    background: none;
+    border-radius: ${r.sp2};
+    padding: ${r.sp2};
+    cursor: pointer;
+    vertical-align: middle;
+  }
+
+  .toolbar button.toolbar-item:disabled {
+    cursor: not-allowed;
+  }
+
+  .toolbar button.toolbar-item.spaced {
+    margin-right: 2px;
+  }
+
+  .toolbar button.toolbar-item svg.format {
+    background-size: contain;
+    display: inline-block;
+    height: ${r.sp3};
+    width: ${r.sp3};
+    vertical-align: -0.25em;
+    display: flex;
+    color: ${(e) => e.theme.colors.grey1};
+  }
+
+  .toolbar button.toolbar-item:disabled svg.format {
+    opacity: 0.2;
+  }
+
+  .toolbar button.toolbar-item.active {
+    svg.format {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+
+  .toolbar .toolbar-item:hover:not([disabled]) {
+    svg.format {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+
+  .toolbar .divider {
+    width: 1px;
+    background-color: ${(e) => e.theme.colors.background};
+    margin: ${r.sp0} ${r.sp1};
+  }
+
+  .toolbar .toolbar-item .text {
+    display: flex;
+    width: 200px;
+    vertical-align: middle;
+    ${ee.standardRegular.css};
+    color: ${(e) => e.theme.colors.primary};
+    text-overflow: ellipsis;
+    width: 70px;
+    overflow: hidden;
+    height: 20px;
+    text-align: left;
+  }
+`, uo = c.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+`, ho = c.div`
+  background-color: transparent;
+  position: relative;
+`;
+function go() {
+  return /* @__PURE__ */ t.jsx(mo, { children: co });
+}
+const bo = {
+  namespace: "",
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onError(e) {
+    throw e;
+  },
+  nodes: [
+    qe,
+    V,
+    Fe,
+    Ze,
+    _e,
+    Ae,
+    et,
+    tt,
+    ot,
+    Oe,
+    Te,
+    xe
+  ],
+  theme: Ot
+};
+function Ho({
+  fileAttached: e,
+  enableZeniGPTFeature: a,
+  isZeniGPTResponseLoading: s,
+  initialHtmlString: n,
+  customerRequestData: m,
+  handleFileInputClick: x,
+  improveUsingZeniGPTClick: N,
+  setZeniRequestsHtml: $
+}) {
+  const o = pe();
+  return /* @__PURE__ */ t.jsxs(Ke, { initialConfig: bo, children: [
+    /* @__PURE__ */ t.jsx(Tt, {}),
+    /* @__PURE__ */ t.jsxs(po, { isZeniGPTResponseLoading: s, children: [
+      s ? /* @__PURE__ */ t.jsx(uo, { children: /* @__PURE__ */ t.jsx(
+        it,
+        {
+          size: "Standard",
+          start: !0,
+          style: {
+            display: "flex",
+            padding: r.sp4,
+            borderRadius: "100%",
+            backgroundColor: o.colors.grey5,
+            border: `2px solid ${o.colors.grey3}`,
+            boxShadow: `${r.sp0} 2px ${r.sp1} ${o.colors.dropShadowNormal}`
+          }
+        }
+      ) }) : null,
+      /* @__PURE__ */ t.jsx(
+        eo,
+        {
+          handleFileInputClick: x,
+          fileAttached: e,
+          customerRequestData: m,
+          enableZeniGPTFeature: a,
+          isZeniGPTResponseLoading: s,
+          initialHtmlString: n,
+          improveUsingZeniGPTClick: N,
+          setZeniRequestsHtml: $
+        }
+      ),
+      /* @__PURE__ */ t.jsxs(ho, { children: [
+        /* @__PURE__ */ t.jsx(
+          Ye,
+          {
+            contentEditable: /* @__PURE__ */ t.jsx(He, { className: nt }),
+            placeholder: /* @__PURE__ */ t.jsx(go, {}),
+            ErrorBoundary: Je
+          }
+        ),
+        /* @__PURE__ */ t.jsx(Dt, {}),
+        /* @__PURE__ */ t.jsx(Rt, {}),
+        /* @__PURE__ */ t.jsx(Xe, {}),
+        /* @__PURE__ */ t.jsx(ze, {}),
+        /* @__PURE__ */ t.jsx(zt, {}),
+        /* @__PURE__ */ t.jsx(Ve, {}),
+        /* @__PURE__ */ t.jsx(Qe, {}),
+        /* @__PURE__ */ t.jsx(It, {}),
+        /* @__PURE__ */ t.jsx(Pt, { maxDepth: 7 }),
+        /* @__PURE__ */ t.jsx(We, { transformers: Ue })
+      ] })
+    ] })
+  ] });
+}
+export {
+  Ho as default
+};