import { jsxs, jsx } from "react/jsx-runtime";
import { tcv, tcx } from "@choiceform/design-system";
import { PromptMessagePlanning } from "@choiceform/icons-react";
import { memo } from "react";
import { Markdown } from "../../../common/markdown/markdown.js";
const MessageProgressTv = tcv({
  slots: {
    root: "flex justify-between gap-1",
    content: "text-secondary-foreground flex-1",
    icon: "text-icon-secondary flex size-5 items-center justify-center",
    progress: "text-secondary-foreground text-message"
  }
});
const MessageProgress = memo(function MessageProgress2(props) {
  const { children, className } = props;
  const extractProgress = (content2) => {
    const percentMatch = content2.match(/(\d+)%/);
    const fractionMatch = content2.match(/(\d+)\/(\d+)/);
    if (percentMatch) {
      return {
        type: "percentage",
        value: parseInt(percentMatch[1]),
        total: 100
      };
    }
    if (fractionMatch) {
      return {
        type: "fraction",
        value: parseInt(fractionMatch[1]),
        total: parseInt(fractionMatch[2])
      };
    }
    return null;
  };
  const content = typeof children === "string" ? children : "";
  const progress = extractProgress(content);
  const tv = MessageProgressTv();
  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
    /* @__PURE__ */ jsx("div", { className: tv.icon(), children: /* @__PURE__ */ jsx(PromptMessagePlanning, {}) }),
    content && /* @__PURE__ */ jsx(Markdown, { className: tv.content(), children: content }),
    progress && /* @__PURE__ */ jsx("span", { className: tv.progress(), children: progress.type === "percentage" ? `${progress.value}%` : `${progress.value}/${progress.total}` })
  ] });
});
export {
  MessageProgress
};
//# sourceMappingURL=message-progress.js.map
