Function _SkillForm

agent-flow/src/components/llm/SkillForm.jsx:29–92

({toolOptions, disabled})

 * @returns {JSX.Element} 大模型节点技能表单的DOM。
 */
const _SkillForm = ({toolOptions, disabled}) => {
  const dispatch = useDispatch();
  const shape = useShapeContext();
  const {t} = useTranslation();

  /**
   * 添加添加技能的回调函数
   *
   * @param event 事件
   */
  const onAddSkillClick = event => {
    event.preventDefault();
    shape.page.triggerEvent({
      type: 'SELECT_SKILL',
      value: {
        onSelect: onSelect,
      },
    });
    event.stopPropagation();
  };

  /**
   * 选择工具后的回调
   *
   * @param data 选择的工具数据
   */
  const onSelect = (data) => {
    // 提取 appId 和 tenantId
    const appId = data.runnables?.APP?.appId;
    const tenantId = data.schema?.parameters?.properties?.tenantId?.default;
    
    dispatch({
      type: 'addSkill',
      value: data.uniqueName || data,
      appId: appId,
      tenantId: tenantId,
    });
  };

  return (
    <JadeCollapse defaultActiveKey={['skillPanel']}>
      {
        <Panel
          key={'skillPanel'}
          header={
            <div className='panel-header' style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start'}}>
              <span className='jade-panel-header-font'>{t('skill')}</span>
              <Button disabled={disabled}
                      type='text' className='icon-button jade-panel-header-icon-position'
                      onClick={(event) => {
                        onAddSkillClick(event);
                      }}>
                <PlusOutlined/>
              </Button>
            </div>
          }
          className='jade-panel'
        >