hanbiro-react16-sdk 1.0.23 → 1.0.24

package/dist/components/ChatAIDraft/SettingPopper.js

@@ -1,381 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { apiGet } from "../../utils/api.js";
-import { AI_LANG_FLAGS } from "../../constants/index.js";
-import CountryFlag from "../CountryFlag/index.js";
-import { TONE_OPTIONS, LENGTH_OPTIONS } from "./constants.js";
-import Settings from "../../node_modules/react-feather/dist/icons/settings.js";
-import ChevronDown from "../../node_modules/react-feather/dist/icons/chevron-down.js";
-import Frown from "../../node_modules/react-feather/dist/icons/frown.js";
-import ThumbsUp from "../../node_modules/react-feather/dist/icons/thumbs-up.js";
-import Smile from "../../node_modules/react-feather/dist/icons/smile.js";
-import Compass from "../../node_modules/react-feather/dist/icons/compass.js";
-import Heart from "../../node_modules/react-feather/dist/icons/heart.js";
-import Award from "../../node_modules/react-feather/dist/icons/award.js";
-import Zap from "../../node_modules/react-feather/dist/icons/zap.js";
-import FileText from "../../node_modules/react-feather/dist/icons/file-text.js";
-import AlignJustify from "../../node_modules/react-feather/dist/icons/align-justify.js";
-import Scissors from "../../node_modules/react-feather/dist/icons/scissors.js";
-const getFlagCode = (value) => {
-  var _a;
-  return (_a = AI_LANG_FLAGS.find((l) => l.value === value)) == null ? void 0 : _a.flagCode;
-};
-class LanguageSelect extends React.Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "ref");
-    __publicField(this, "handleClickOutside", (e) => {
-      if (this.ref.current && !this.ref.current.contains(e.target)) {
-        this.setState({ open: false });
-      }
-    });
-    __publicField(this, "toggle", () => {
-      this.setState((s) => ({ open: !s.open }));
-    });
-    __publicField(this, "pick", (opt) => {
-      this.props.onChange(opt);
-      this.setState({ open: false });
-    });
-    this.state = { open: false };
-    this.ref = React.createRef();
-  }
-  componentDidMount() {
-    document.addEventListener("mousedown", this.handleClickOutside);
-  }
-  componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClickOutside);
-  }
-  render() {
-    const { value, options } = this.props;
-    const { open } = this.state;
-    const selectedFlag = getFlagCode(value == null ? void 0 : value.value);
-    return /* @__PURE__ */ React.createElement("div", { ref: this.ref, style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: this.toggle,
-        style: {
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "8px 10px",
-          border: "1px solid var(--border-main)",
-          borderRadius: 4,
-          background: "#fff",
-          cursor: "pointer",
-          fontFamily: "inherit",
-          fontSize: 13,
-          color: "var(--text-primary)"
-        }
-      },
-      selectedFlag && /* @__PURE__ */ React.createElement(
-        CountryFlag,
-        {
-          flagCode: selectedFlag,
-          style: { width: 18, height: 14, flexShrink: 0 }
-        }
-      ),
-      /* @__PURE__ */ React.createElement("span", { style: { flex: 1, textAlign: "left" } }, (value == null ? void 0 : value.label) || "Select Language"),
-      /* @__PURE__ */ React.createElement(
-        ChevronDown,
-        {
-          size: 14,
-          style: {
-            transform: open ? "rotate(180deg)" : "none",
-            transition: "transform 0.15s"
-          }
-        }
-      )
-    ), open && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "calc(100% + 4px)",
-          left: 0,
-          right: 0,
-          maxHeight: 220,
-          overflowY: "auto",
-          border: "1px solid var(--border-main)",
-          borderRadius: 4,
-          background: "#fff",
-          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
-          zIndex: 2
-        }
-      },
-      options.map((opt) => {
-        const fc = getFlagCode(opt.value);
-        const isActive = (value == null ? void 0 : value.value) === opt.value;
-        return /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            key: opt.value,
-            type: "button",
-            onClick: () => this.pick(opt),
-            className: "chat-ai-lang-option" + (isActive ? " is-active" : ""),
-            style: {
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "8px 10px",
-              border: "none",
-              background: isActive ? "var(--primary-lighter)" : void 0,
-              cursor: "pointer",
-              fontFamily: "inherit",
-              fontSize: 13,
-              textAlign: "left",
-              color: "var(--text-primary)",
-              fontWeight: 400
-            }
-          },
-          fc && /* @__PURE__ */ React.createElement(
-            CountryFlag,
-            {
-              flagCode: fc,
-              style: { width: 18, height: 14, flexShrink: 0 }
-            }
-          ),
-          /* @__PURE__ */ React.createElement("span", null, opt.label)
-        );
-      })
-    ));
-  }
-}
-const ICON_SIZE = 14;
-const TONE_ICONS = {
-  formal: /* @__PURE__ */ React.createElement(Award, { size: ICON_SIZE }),
-  polite: /* @__PURE__ */ React.createElement(Heart, { size: ICON_SIZE }),
-  neutral: /* @__PURE__ */ React.createElement(Compass, { size: ICON_SIZE }),
-  friendly: /* @__PURE__ */ React.createElement(Smile, { size: ICON_SIZE }),
-  firm: /* @__PURE__ */ React.createElement(ThumbsUp, { size: ICON_SIZE }),
-  apologetic: /* @__PURE__ */ React.createElement(Frown, { size: ICON_SIZE })
-};
-const LENGTH_ICONS = {
-  short: /* @__PURE__ */ React.createElement(Scissors, { size: ICON_SIZE }),
-  medium: /* @__PURE__ */ React.createElement(AlignJustify, { size: ICON_SIZE }),
-  long: /* @__PURE__ */ React.createElement(FileText, { size: ICON_SIZE }),
-  one_liner: /* @__PURE__ */ React.createElement(Zap, { size: ICON_SIZE })
-};
-class SettingPopper extends React.Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "containerRef");
-    __publicField(this, "popperRef");
-    __publicField(this, "getLanguageOptions", () => __async(this, null, function* () {
-      var _a;
-      const { data } = yield apiGet("/email/ai/langlist");
-      if (data == null ? void 0 : data.list) {
-        const langs = (_a = Object.keys(data == null ? void 0 : data.list)) == null ? void 0 : _a.map((_key, i) => {
-          var _a2;
-          const _item = (_a2 = data == null ? void 0 : data.list) == null ? void 0 : _a2[_key];
-          return {
-            value: _key,
-            label: _item == null ? void 0 : _item.name
-          };
-        });
-        this.setState({ languageOptions: langs });
-      }
-    }));
-    __publicField(this, "handleClickOutside", (event) => {
-      const target = event.target;
-      if (this.containerRef.current && !this.containerRef.current.contains(target) && (!this.popperRef.current || !this.popperRef.current.contains(target))) {
-        this.setState({ open: false });
-      }
-    });
-    __publicField(this, "togglePopper", () => {
-      this.setState((prevState) => ({ open: !prevState.open }));
-    });
-    __publicField(this, "renderChipGroup", (options, selected, onSelect, iconMap, columns = 3) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-          gap: 6
-        }
-      },
-      options.map((opt) => {
-        const isActive = (selected == null ? void 0 : selected.value) === opt.value;
-        return /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            key: opt.value,
-            type: "button",
-            onClick: () => onSelect(opt),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 6,
-              padding: "8px 10px",
-              borderRadius: 4,
-              border: isActive ? "1px solid var(--primary-main)" : "1px solid var(--border-main)",
-              background: isActive ? "var(--primary-lighter)" : "#fff",
-              color: isActive ? "var(--primary-main)" : "var(--text-primary)",
-              fontWeight: isActive ? 600 : 400,
-              fontSize: 13,
-              cursor: "pointer",
-              fontFamily: "inherit",
-              transition: "background 0.15s, border-color 0.15s",
-              minWidth: 0
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            "span",
-            {
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                flexShrink: 0
-              }
-            },
-            iconMap[opt.value]
-          ),
-          /* @__PURE__ */ React.createElement("span", { style: { whiteSpace: "nowrap" } }, opt.label)
-        );
-      })
-    ));
-    this.state = { open: false, languageOptions: [] };
-    this.containerRef = React.createRef();
-    this.popperRef = React.createRef();
-  }
-  componentDidMount() {
-    document.addEventListener("mousedown", this.handleClickOutside);
-    this.getLanguageOptions();
-  }
-  componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClickOutside);
-  }
-  render() {
-    const { lang, tone, length, parentRef } = this.props;
-    const { open, languageOptions } = this.state;
-    let popperTop = 0;
-    let popperLeft = 0;
-    let popperWidth = 320;
-    if (open && this.containerRef.current) {
-      const rect = this.containerRef.current.getBoundingClientRect();
-      popperTop = rect.top + (window.scrollY || document.documentElement.scrollTop) - 8;
-      popperLeft = rect.left + (window.scrollX || document.documentElement.scrollLeft);
-      if (parentRef && parentRef.current) {
-        const parentRect = parentRef.current.getBoundingClientRect();
-        popperWidth = parentRect.width - 16;
-        popperLeft = parentRect.left + 8;
-      }
-    }
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: this.containerRef,
-        style: { position: "relative", display: "inline-block" }
-      },
-      /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: this.togglePopper,
-          className: "icon-button small"
-        },
-        /* @__PURE__ */ React.createElement(Settings, { size: 16 })
-      ),
-      open && this.containerRef.current && ReactDOM.createPortal(
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            ref: this.popperRef,
-            style: {
-              position: "absolute",
-              top: popperTop,
-              left: popperLeft,
-              transform: "translateY(-100%)",
-              zIndex: 1051,
-              background: "#fff",
-              border: "1px solid #ddd",
-              boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-              borderRadius: 8,
-              padding: 16,
-              width: popperWidth,
-              boxSizing: "border-box"
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              style: { display: "flex", flexDirection: "column", gap: 12 }
-            },
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                style: { display: "flex", flexDirection: "column", gap: 6 }
-              },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Language"),
-              /* @__PURE__ */ React.createElement(
-                LanguageSelect,
-                {
-                  value: lang,
-                  options: languageOptions,
-                  onChange: (opt) => this.props.setLang(opt)
-                }
-              )
-            ),
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                style: { display: "flex", flexDirection: "column", gap: 6 }
-              },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Tone"),
-              this.renderChipGroup(
-                TONE_OPTIONS,
-                tone,
-                (opt) => this.props.setTone(opt),
-                TONE_ICONS
-              )
-            ),
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                style: { display: "flex", flexDirection: "column", gap: 6 }
-              },
-              /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, fontWeight: 600 } }, "Length"),
-              this.renderChipGroup(
-                LENGTH_OPTIONS,
-                length,
-                (opt) => this.props.setLength(opt),
-                LENGTH_ICONS,
-                4
-              )
-            )
-          )
-        ),
-        document.body
-      )
-    );
-  }
-}
-export {
-  SettingPopper as default
-};