@lobehub/ui/es/awesome/AgentSkillCard/AgentSkillCard.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Icon from "../../Icon/Icon.mjs";
import Segmented from "../../base-ui/Segmented/Segmented.mjs";
import Snippet from "../../Snippet/Snippet.mjs";
import { DEFAULT_SKILL_AGENTS } from "./agents.mjs";
import { renderLandingIcon } from "../landingIcon.mjs";
import { styles } from "./style.mjs";
import { memo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { Bot, UserRound } from "lucide-react";
//#region src/awesome/AgentSkillCard/AgentSkillCard.tsx
const AVATAR_SIZE = 28;
const AgentSkillCard = memo(({ agent, agents = DEFAULT_SKILL_AGENTS, className, defaultMode = "agent", footer, human, mode: controlledMode, onModeChange, ...rest }) => {
	const [innerMode, setInnerMode] = useState(defaultMode);
	const mode = human ? controlledMode ?? innerMode : "agent";
	const panel = mode === "human" && human ? human : agent;
	const shell = panel.shell ?? mode === "human";
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.root, className),
		...rest,
		children: [
			human && /* @__PURE__ */ jsx(Segmented, {
				block: true,
				size: "large",
				value: mode,
				variant: "outlined",
				options: [{
					icon: /* @__PURE__ */ jsx(Icon, {
						icon: Bot,
						size: 16
					}),
					label: agent.label ?? "I'm an Agent",
					value: "agent"
				}, {
					icon: /* @__PURE__ */ jsx(Icon, {
						icon: UserRound,
						size: 16
					}),
					label: human.label ?? "I'm a Human",
					value: "human"
				}],
				onChange: (next) => {
					setInnerMode(next);
					onModeChange?.(next);
				}
			}),
			/* @__PURE__ */ jsxs("div", {
				className: styles.panel,
				children: [
					mode === "agent" && agents.length > 0 && /* @__PURE__ */ jsx("div", {
						className: styles.agents,
						children: agents.map(({ avatar, title }) => /* @__PURE__ */ jsx("span", {
							className: styles.agent,
							title,
							children: renderLandingIcon(avatar, AVATAR_SIZE)
						}, title))
					}),
					panel.description && /* @__PURE__ */ jsx("p", {
						className: styles.description,
						children: panel.description
					}),
					/* @__PURE__ */ jsx(Snippet, {
						className: styles.code,
						language: "bash",
						prefix: shell ? "$" : void 0,
						variant: "outlined",
						children: panel.code
					})
				]
			}),
			footer && /* @__PURE__ */ jsx("div", {
				className: styles.footer,
				children: footer
			})
		]
	});
});
AgentSkillCard.displayName = "AgentSkillCard";
//#endregion
export { AgentSkillCard as default };

//# sourceMappingURL=AgentSkillCard.mjs.map