import { o as B } from "./rolldown-runtime.js";
import { i as V, n as O, t as R } from "./vendor/react.js";
import { t as W } from "./check.js";
import { n as q, t as L } from "./thumbs-up.js";
import { t as E } from "./proxy.js";
import { t as M } from "./AnimatePresence.js";
import { t as N } from "./Button.js";
import { t as w } from "./dist.js";
import { t as m } from "./utils.js";
import { t as D } from "./Textarea2.js";
var o = /* @__PURE__ */ B(V(), 1), r = R(), S = w("flex items-center gap-2 rounded-xl border transition-colors", {
  variants: {
    variant: {
      default: "bg-background border-border",
      subtle: "bg-muted border-border",
      inline: "bg-transparent border-transparent"
    },
    size: {
      sm: "px-2 py-1",
      md: "px-3 py-2",
      lg: "px-4 py-3"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "md"
  }
}), H = w("flex items-center justify-center rounded-full transition-colors", {
  variants: {
    variant: {
      default: "hover:bg-accent",
      selected: "bg-primary/10 text-primary",
      positive: "bg-success/10 text-success",
      negative: "bg-destructive/10 text-destructive"
    },
    size: {
      sm: "size-9",
      md: "size-10",
      lg: "size-11"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "md"
  }
});
function k({ type: e, isSelected: t, onClick: s, size: i = "md", disabled: n = !1 }) {
  const c = e === "positive" ? L : q;
  return /* @__PURE__ */ (0, r.jsx)("button", {
    type: "button",
    onClick: s,
    disabled: n,
    className: m(H({
      variant: t ? e : "default",
      size: i
    }), "delight-click-ripple focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors duration-150 ease-out motion-reduce:transition-none", n && "opacity-50 cursor-not-allowed"),
    "aria-label": e === "positive" ? "Helpful" : "Not helpful",
    "aria-pressed": t,
    children: /* @__PURE__ */ (0, r.jsx)(c, { className: {
      sm: "size-4",
      md: "size-5",
      lg: "size-6"
    }[i] })
  });
}
function Z({ reasons: e, selected: t, onSelect: s }) {
  return /* @__PURE__ */ (0, r.jsx)("div", {
    className: "flex flex-wrap gap-2",
    role: "group",
    "aria-label": "Feedback reasons",
    children: e.map((i) => /* @__PURE__ */ (0, r.jsx)("button", {
      type: "button",
      onClick: () => s(i.key),
      "aria-pressed": t === i.key,
      className: m("px-3 py-1.5 rounded-full text-sm transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", t === i.key ? "bg-primary text-primary-foreground" : "bg-muted text-secondary-foreground hover:bg-accent"),
      children: i.label
    }, i.key))
  });
}
function $({ feedbackType: e, reasons: t, onSubmit: s, onCancel: i, placeholder: n, commentRequired: c = !1 }) {
  const [l, d] = o.useState(""), [a, b] = o.useState(), u = e === "negative" ? "What could be improved?" : "What did you find helpful?";
  return /* @__PURE__ */ (0, r.jsx)(E.div, {
    initial: {
      opacity: 0,
      height: 0
    },
    animate: {
      opacity: 1,
      height: "auto"
    },
    exit: {
      opacity: 0,
      height: 0
    },
    className: "overflow-hidden",
    children: /* @__PURE__ */ (0, r.jsxs)("div", {
      className: "pt-3 space-y-3",
      children: [
        t && t.length > 0 && /* @__PURE__ */ (0, r.jsx)(Z, {
          reasons: t,
          selected: a,
          onSelect: b
        }),
        /* @__PURE__ */ (0, r.jsx)(D, {
          value: l,
          onChange: (g) => d(g.target.value),
          placeholder: n || u,
          rows: 3,
          className: "text-sm",
          required: c
        }),
        /* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex items-center justify-end gap-2",
          children: [/* @__PURE__ */ (0, r.jsx)(N, {
            appearance: "ghost",
            variant: "secondary",
            size: "sm",
            onClick: i,
            children: "Cancel"
          }), /* @__PURE__ */ (0, r.jsx)(N, {
            size: "sm",
            onClick: () => s({
              reason: a,
              comment: l
            }),
            disabled: c && !l.trim(),
            children: "Submit"
          })]
        })
      ]
    })
  });
}
function z({ value: e, onChange: t, showForm: s = !1, reasons: i, prompt: n = "Was this helpful?", thankYouMessage: c = "Thanks for your feedback!", commentPlaceholder: l, commentRequired: d = !1, allowChange: a = !0, variant: b, size: u, className: g }) {
  const [f, _] = o.useState(e || null), [T, v] = o.useState(!1), [x, j] = o.useState(!1);
  o.useEffect(() => {
    e !== void 0 && _(e);
  }, [e]);
  const C = (y) => {
    if (x && !a) return;
    const p = f === y ? null : y;
    _(p), s && p ? v(!0) : (t?.({ type: p }), p && j(!0));
  }, I = ({ reason: y, comment: p }) => {
    t?.({
      type: f,
      reason: y,
      comment: p
    }), v(!1), j(!0);
  }, P = () => {
    v(!1), _(null);
  };
  return x && !a ? /* @__PURE__ */ (0, r.jsxs)(E.div, {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    "data-slot": "ai-feedback-bar",
    className: m(S({
      variant: b,
      size: u
    }), "motion-reduce:!opacity-100", g),
    children: [/* @__PURE__ */ (0, r.jsx)(W, { className: "size-4 text-success delight-check-bounce motion-reduce:!animate-none" }), /* @__PURE__ */ (0, r.jsx)("span", {
      className: "text-sm text-muted-foreground",
      children: c
    })]
  }) : /* @__PURE__ */ (0, r.jsxs)("div", {
    "data-slot": "ai-feedback-bar",
    className: m("space-y-0", g),
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: m(S({
        variant: b,
        size: u
      })),
      children: [n && /* @__PURE__ */ (0, r.jsx)("span", {
        className: "text-sm text-foreground me-1",
        children: n
      }), /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex items-center gap-1",
        role: "group",
        "aria-label": "Rate this response",
        children: [/* @__PURE__ */ (0, r.jsx)(k, {
          type: "positive",
          isSelected: f === "positive",
          onClick: () => C("positive"),
          size: u || "md",
          disabled: x && !a
        }), /* @__PURE__ */ (0, r.jsx)(k, {
          type: "negative",
          isSelected: f === "negative",
          onClick: () => C("negative"),
          size: u || "md",
          disabled: x && !a
        })]
      })]
    }), /* @__PURE__ */ (0, r.jsx)(M, { children: T && /* @__PURE__ */ (0, r.jsx)($, {
      feedbackType: f,
      reasons: i,
      onSubmit: I,
      onCancel: P,
      placeholder: l,
      commentRequired: d
    }) })]
  });
}
z.displayName = "AIFeedbackBar";
function J({ value: e, onChange: t, size: s = "md", className: i }) {
  const [n, c] = o.useState(e || null);
  o.useEffect(() => {
    e !== void 0 && c(e);
  }, [e]);
  const l = (d) => {
    const a = n === d ? null : d;
    c(a), t?.(a);
  };
  return /* @__PURE__ */ (0, r.jsxs)("div", {
    "data-slot": "ai-feedback-icons",
    className: m("flex items-center gap-1", i),
    role: "group",
    "aria-label": "Rate this response",
    children: [/* @__PURE__ */ (0, r.jsx)(k, {
      type: "positive",
      isSelected: n === "positive",
      onClick: () => l("positive"),
      size: s
    }), /* @__PURE__ */ (0, r.jsx)(k, {
      type: "negative",
      isSelected: n === "negative",
      onClick: () => l("negative"),
      size: s
    })]
  });
}
J.displayName = "AIFeedbackIcons";
var U = O();
function X(e) {
  return { onChange: (t) => {
    e.dispatchEvent(new CustomEvent("change", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function Y(e) {
  const { _hostElement: t, ...s } = e, i = o.useMemo(() => t ? X(t) : {}, [t]);
  return o.createElement(z, {
    ...s,
    ...i
  });
}
var h = {
  variant: "string",
  size: "string",
  value: "string",
  showForm: "boolean",
  reasons: "json",
  prompt: "string",
  thankYouMessage: "string",
  commentPlaceholder: "string",
  commentRequired: "boolean",
  allowChange: "boolean",
  className: "string"
};
function F(e, t) {
  if (e !== null)
    switch (t) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var A = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, U.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(h).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const s = h[e] || "string";
    this._props[e] = this._parseValue(t, s), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = h[e] || "string";
    return F(this.getAttribute(t), s);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [s, i] of Object.entries(h)) if (s in this._props) e[s] = this._props[s];
    else {
      const n = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = F(this.getAttribute(n), i);
    }
    const t = o.createElement(Y, {
      ...e,
      _hostElement: this
    });
    this._root.render(t);
  }
};
for (const e of Object.keys(h)) Object.defineProperty(A.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-feedback-bar") && customElements.define("hf-ai-feedback-bar", A);
export {
  A as AIFeedbackBarWC,
  A as default
};

//# sourceMappingURL=hf-ai-feedback-bar.js.map