tmp/webapp-docs/frontend/components/single/PromptCard.js

/**
 * The prompt (or negative) card for the single-image view: its layers — sent / AI translation /
 * engine roll / DPL source — most-relevant first, duplicate layers collapsed, each a copyable row
 * with optional inline re-roll / make-variation actions.
 * @module gui/components/single/PromptCard
 */
import { useIntl } from "react-intl";
import { msgs } from "./messages.js";

/**
 * A labeled, copyable block of prompt/negative text (skipped when empty), with optional inline
 * actions (re-roll / make-variation) styled like the copy link.
 */
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
function TextRow({
  label,
  value,
  mono,
  accent,
  extras
}) {
  const intl = useIntl();
  if (!value) return null;
  const copy = () => navigator.clipboard?.writeText(String(value)).catch(() => {});
  return /*#__PURE__*/_jsxDEV("div", {
    className: `g-text-row${accent ? " accent" : ""}`,
    children: [/*#__PURE__*/_jsxDEV("div", {
      className: "g-text-head",
      children: [/*#__PURE__*/_jsxDEV("span", {
        className: "g-text-label",
        children: label
      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
        className: "g-text-acts",
        children: [(extras || []).map(a => /*#__PURE__*/_jsxDEV("button", {
          className: `g-copy g-act${a.disabled ? " is-locked" : ""}`,
          onClick: a.onClick,
          disabled: a.disabled,
          title: a.title,
          children: [a.label, a.disabled && /*#__PURE__*/_jsxDEV("span", {
            "aria-hidden": "true",
            children: " 🔒"
          }, void 0, false)]
        }, a.key, true)), /*#__PURE__*/_jsxDEV("button", {
          className: "g-copy",
          onClick: copy,
          children: intl.formatMessage(msgs.copy)
        }, void 0, false)]
      }, void 0, true)]
    }, void 0, true), /*#__PURE__*/_jsxDEV("p", {
      className: `g-text-val${mono ? " mono" : ""}`,
      children: value
    }, void 0, false)]
  }, void 0, true);
}

/** The prompt (or negative) card: its layers, most-relevant first, dupes collapsed. */
export default function PromptCard({
  title,
  layers,
  extrasFor
}) {
  const intl = useIntl();
  if (!layers.final && !layers.ai && !layers.roll && !layers.dpl) return null;
  const showRoll = layers.roll && layers.roll !== layers.final;
  const showAi = layers.ai && layers.ai !== layers.final;
  const ex = key => extrasFor ? extrasFor(key) : [];
  return /*#__PURE__*/_jsxDEV("section", {
    className: "g-card",
    children: [/*#__PURE__*/_jsxDEV("h3", {
      className: "g-card-title",
      children: title
    }, void 0, false), /*#__PURE__*/_jsxDEV(TextRow, {
      label: intl.formatMessage(msgs.sentToModel),
      value: layers.final,
      accent: true,
      extras: ex("final")
    }, void 0, false), showAi && /*#__PURE__*/_jsxDEV(TextRow, {
      label: intl.formatMessage(msgs.aiTranslation),
      value: layers.ai,
      extras: ex("ai")
    }, void 0, false), showRoll && /*#__PURE__*/_jsxDEV(TextRow, {
      label: intl.formatMessage(msgs.engineRoll),
      value: layers.roll,
      extras: ex("roll")
    }, void 0, false), /*#__PURE__*/_jsxDEV(TextRow, {
      label: intl.formatMessage(msgs.dplSource),
      value: layers.dpl,
      mono: true,
      extras: ex("dpl")
    }, void 0, false)]
  }, void 0, true);
}