@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.04 kB
Source Map (JSON)
{"version":3,"file":"AgentSkillCard.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/AgentSkillCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Bot, UserRound } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport Segmented from '@/base-ui/Segmented';\nimport Icon from '@/Icon';\nimport Snippet from '@/Snippet';\n\nimport { DEFAULT_SKILL_AGENTS } from './agents';\nimport { styles } from './style';\nimport type { AgentSkillCardMode, AgentSkillCardProps } from './type';\n\nconst AVATAR_SIZE = 28;\n\nconst AgentSkillCard = memo<AgentSkillCardProps>(\n ({\n agent,\n agents = DEFAULT_SKILL_AGENTS,\n className,\n defaultMode = 'agent',\n footer,\n human,\n mode: controlledMode,\n onModeChange,\n ...rest\n }) => {\n const [innerMode, setInnerMode] = useState<AgentSkillCardMode>(defaultMode);\n const mode = human ? (controlledMode ?? innerMode) : 'agent';\n const panel = mode === 'human' && human ? human : agent;\n const shell = panel.shell ?? mode === 'human';\n\n return (\n <div className={cx(styles.root, className)} {...rest}>\n {human && (\n <Segmented<AgentSkillCardMode>\n block\n size={'large'}\n value={mode}\n variant={'outlined'}\n options={[\n {\n icon: <Icon icon={Bot} size={16} />,\n label: agent.label ?? \"I'm an Agent\",\n value: 'agent',\n },\n {\n icon: <Icon icon={UserRound} size={16} />,\n label: human.label ?? \"I'm a Human\",\n value: 'human',\n },\n ]}\n onChange={(next) => {\n setInnerMode(next);\n onModeChange?.(next);\n }}\n />\n )}\n <div className={styles.panel}>\n {mode === 'agent' && agents.length > 0 && (\n <div className={styles.agents}>\n {agents.map(({ avatar, title }) => (\n <span className={styles.agent} key={title} title={title}>\n {renderLandingIcon(avatar, AVATAR_SIZE)}\n </span>\n ))}\n </div>\n )}\n {panel.description && <p className={styles.description}>{panel.description}</p>}\n <Snippet\n className={styles.code}\n language={'bash'}\n prefix={shell ? '$' : undefined}\n variant={'outlined'}\n >\n {panel.code}\n </Snippet>\n </div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n },\n);\n\nAgentSkillCard.displayName = 'AgentSkillCard';\n\nexport default AgentSkillCard;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,cAAc;AAEpB,MAAM,iBAAiB,MACpB,EACC,OACA,SAAS,sBACT,WACA,cAAc,SACd,QACA,OACA,MAAM,gBACN,cACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAA6B,WAAW;CAC1E,MAAM,OAAO,QAAS,kBAAkB,YAAa;CACrD,MAAM,QAAQ,SAAS,WAAW,QAAQ,QAAQ;CAClD,MAAM,QAAQ,MAAM,SAAS,SAAS;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,GAAI;EAAhD,UAAA;GACG,SACC,oBAAC,WAAD;IACE,OAAA;IACA,MAAM;IACN,OAAO;IACP,SAAS;IACT,SAAS,CACP;KACE,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAK,MAAM;KAAK,CAAA;KAClC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,GACA;KACE,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM;KAAK,CAAA;KACxC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,CACF;IACA,WAAW,SAAS;KAClB,aAAa,IAAI;KACjB,eAAe,IAAI;IACrB;GACD,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA;KACG,SAAS,WAAW,OAAO,SAAS,KACnC,oBAAC,OAAD;MAAK,WAAW,OAAO;MACpB,UAAA,OAAO,KAAK,EAAE,QAAQ,YACrB,oBAAC,QAAD;OAAM,WAAW,OAAO;OAA0B;OAC/C,UAAA,kBAAkB,QAAQ,WAAW;MAClC,GAF8B,KAE9B,CACP;KACE,CAAA;KAEN,MAAM,eAAe,oBAAC,KAAD;MAAG,WAAW,OAAO;MAAc,UAAA,MAAM;KAAe,CAAA;KAC9E,oBAAC,SAAD;MACE,WAAW,OAAO;MAClB,UAAU;MACV,QAAQ,QAAQ,MAAM,KAAA;MACtB,SAAS;MAER,UAAA,MAAM;KACA,CAAA;IACN;;GACJ,UAAU,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAS,UAAA;GAAY,CAAA;EACpD;;AAET,CACF;AAEA,eAAe,cAAc"}