@@ -219,18 +216,18 @@ const AiPromptModal = forwardRef(({
}
+ empty={}
data={chatList || []}
streamLoading={false}
labelPosition="top"
- labelFormat={(item) => item.role === 'user' ? t('application.you') : t('application.ai')}
+ labelFormat={(item) => item.role === 'user' ? t(`${source}.you`) : t(`${source}.ai`)}
/>
diff --git a/web/src/views/ApplicationConfig/components/Card.tsx b/web/src/views/ApplicationConfig/components/Card.tsx
index 7437b8f0..bf67d970 100644
--- a/web/src/views/ApplicationConfig/components/Card.tsx
+++ b/web/src/views/ApplicationConfig/components/Card.tsx
@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:27:31
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-03 16:27:31
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-04 13:50:47
*/
import { type FC, type ReactNode } from 'react'
@@ -20,6 +20,7 @@ interface CardProps {
children: ReactNode;
/** Extra content in header */
extra?: ReactNode;
+ variant?: 'borderL';
}
/**
@@ -31,14 +32,16 @@ const Card: FC = ({
subTitle,
children,
extra,
+ variant
}) => {
return (
{children}
diff --git a/web/src/views/ApplicationConfig/components/Skill/SkillListModal.tsx b/web/src/views/ApplicationConfig/components/Skill/SkillListModal.tsx
new file mode 100644
index 00000000..8220878e
--- /dev/null
+++ b/web/src/views/ApplicationConfig/components/Skill/SkillListModal.tsx
@@ -0,0 +1,216 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-05 10:45:08
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:45:08
+ */
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Space, List, Flex, Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx'
+
+import type { SkillModalRef } from './types'
+import type { Skill } from '@/views/Skills/types'
+import RbModal from '@/components/RbModal'
+import { getSkillList } from '@/api/skill'
+import SearchInput from '@/components/SearchInput'
+import Empty from '@/components/Empty'
+
+/**
+ * Props for SkillListModal Component
+ */
+interface SkillModalProps {
+ /** Callback function to refresh parent component with selected skills */
+ refresh: (rows: Skill[], type: 'skill') => void;
+ /** Array of already selected skills to exclude from selection */
+ selectedList: Skill[];
+}
+
+/**
+ * Skill List Modal Component
+ *
+ * A modal dialog for selecting skills from a searchable list.
+ * Features:
+ * - Search functionality to filter skills by keywords
+ * - Grid layout displaying skill cards with icons and descriptions
+ * - Multi-select capability with visual feedback
+ * - Excludes already selected skills from the list
+ * - Displays skill name initial as avatar when no icon available
+ *
+ * @param refresh - Callback to update parent with selected skills
+ * @param selectedList - Currently selected skills to filter out
+ * @param ref - Forwarded ref exposing handleOpen and handleClose methods
+ */
+const SkillListModal = forwardRef(({
+ refresh,
+ selectedList
+}, ref) => {
+ const { t } = useTranslation();
+ const [visible, setVisible] = useState(false);
+ const [list, setList] = useState([])
+ const [filterList, setFilterList] = useState([])
+ const [query, setQuery] = useState<{keywords?: string}>({})
+ const [selectedIds, setSelectedIds] = useState([])
+ const [selectedRows, setSelectedRows] = useState([])
+
+ /**
+ * Closes the modal and resets all state
+ * Clears search query, selected IDs, and selected rows
+ */
+ const handleClose = () => {
+ setVisible(false);
+ setQuery({})
+ setSelectedIds([])
+ setSelectedRows([])
+ };
+
+ /**
+ * Opens the modal and resets selection state
+ * Clears any previous selections when reopening
+ */
+ const handleOpen = () => {
+ setVisible(true);
+ setQuery({})
+ setSelectedIds([])
+ setSelectedRows([])
+ };
+
+ /**
+ * Effect: Fetch skill list when modal is visible or search query changes
+ */
+ useEffect(() => {
+ if (visible) {
+ getList()
+ }
+ }, [query.keywords, visible])
+
+ /**
+ * Fetches the skill list from API with current search parameters
+ * Sorts by creation date in descending order
+ */
+ const getList = () => {
+ getSkillList({
+ ...query,
+ pagesize: 100,
+ })
+ .then(res => {
+ const response = res as { items: Skill[] }
+ setList(response.items || [])
+ })
+ }
+
+ /**
+ * Saves selected skills and closes modal
+ * Passes selected skills to parent component via refresh callback
+ */
+ const handleSave = () => {
+ refresh(selectedRows, 'skill')
+ setVisible(false);
+ }
+
+ /**
+ * Exposes methods to parent component via ref
+ * Allows parent to programmatically open/close the modal
+ */
+ useImperativeHandle(ref, () => ({
+ handleOpen,
+ handleClose
+ }));
+
+ /**
+ * Handles search input changes and resets selection
+ * Clears current selections when search query changes
+ * @param value - Search keyword
+ */
+ const handleSearch = (value?: string) => {
+ setQuery({keywords: value})
+ setSelectedIds([])
+ setSelectedRows([])
+ }
+
+ /**
+ * Toggles skill selection state
+ * Adds skill to selection if not selected, removes if already selected
+ * @param item - Skill to select/deselect
+ */
+ const handleSelect = (item: Skill) => {
+ const index = selectedIds.indexOf(item.id)
+ if (index === -1) {
+ // Add to selection
+ setSelectedIds([...selectedIds, item.id])
+ setSelectedRows([...selectedRows, item])
+ } else {
+ // Remove from selection
+ setSelectedIds(selectedIds.filter(id => id !== item.id))
+ setSelectedRows(selectedRows.filter(row => row.id !== item.id))
+ }
+ }
+
+ /**
+ * Effect: Filter out already selected skills from the display list
+ * Updates filterList whenever list or selectedList changes
+ */
+ useEffect(() => {
+ if (list.length && selectedList.length) {
+ const unSelectedList = list.filter(item => selectedList.findIndex(vo => vo.id === item.id) < 0)
+ setFilterList([...unSelectedList])
+ } else if (list.length) {
+ setFilterList([...list])
+ }
+ }, [list, selectedList])
+
+ return (
+ <>
+
+
+ {/* Search input for filtering skills */}
+
+ {/* Display empty state or skill grid */}
+ {filterList.length === 0
+ ?
+ : (
+
+ {/* Skill card with selection state styling */}
+ handleSelect(item)}>
+
+ {/* Skill avatar showing first letter of name */}
+
+ {item.name[0]}
+
+ {/* Skill name and description */}
+
+
{item.name}
+
+ {item.description}
+
+
+
+
+
+ );
+});
+
+export default SkillListModal;
diff --git a/web/src/views/ApplicationConfig/components/Skill/SkillsItem.tsx b/web/src/views/ApplicationConfig/components/Skill/SkillsItem.tsx
new file mode 100644
index 00000000..35dee5ec
--- /dev/null
+++ b/web/src/views/ApplicationConfig/components/Skill/SkillsItem.tsx
@@ -0,0 +1,161 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-05 10:43:03
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 11:10:01
+ */
+import { type FC, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, Form, Flex, Tooltip, Checkbox } from 'antd'
+import { CloseOutlined, CheckCircleFilled } from '@ant-design/icons'
+
+import type {
+ SkillConfigForm,
+ SkillModalRef,
+} from './types'
+import Empty from '@/components/Empty'
+import SkillListModal from './SkillListModal'
+import Card from '../Card'
+import RbAlert from '@/components/RbAlert'
+import type { Skill } from '@/views/Skills/types'
+
+/**
+ * Props for SkillsItem Component
+ */
+interface SkillsItemProps {
+ /** Title displayed in the card header */
+ title: string;
+ /** Form field path for nested form structure */
+ parentName: string[];
+ /** Whether to show "Allow all skills" checkbox option */
+ supportAll?: boolean;
+ /** Message displayed when no skills are configured */
+ emptyTitle: string;
+}
+
+/**
+ * Skills Item Component
+ *
+ * Displays and manages a list of configured skills with the following features:
+ * - Add new skills via modal selection
+ * - Optional "Allow all skills" toggle
+ * - Display skill cards with icons and descriptions
+ * - Remove individual skills
+ * - Empty state when no skills configured
+ * - Alert message when all skills are enabled
+ *
+ * @param title - Card header title
+ * @param parentName - Form field path array for nested structure
+ * @param supportAll - Enable "Allow all skills" checkbox
+ * @param emptyTitle - Empty state message
+ */
+const SkillsItem: FC = ({
+ title,
+ parentName,
+ supportAll = false,
+ emptyTitle
+}) => {
+ const { t } = useTranslation()
+ const skillModalRef = useRef(null)
+ const form = Form.useFormInstance()
+ const allSkills = Form.useWatch([...parentName, 'all_skills'], form)
+
+ /**
+ * Opens the skill selection modal
+ */
+ const handleAddSkill = () => {
+ skillModalRef.current?.handleOpen()
+ }
+
+ /**
+ * Updates form with newly selected skills
+ * Merges new selections with existing skills, avoiding duplicates
+ * @param values - Array of newly selected skills
+ */
+ const refresh = (values: SkillConfigForm['skill_ids']) => {
+ const currentSkills = form.getFieldValue([...parentName, 'skill_ids']) || []
+ const newSkills = values?.filter(v => !currentSkills?.find((s: Skill) => s.id === (v as Skill).id)) || []
+ form.setFieldValue([...parentName, 'skill_ids'], [...currentSkills, ...newSkills])
+ }
+
+ /**
+ * Effect: Clear skill list when "all skills" is enabled
+ */
+ useEffect(() => {
+ form.setFieldValue([...parentName, 'skill_ids'], [])
+ }, [allSkills])
+
+ return (
+
+ {/* "Allow all skills" checkbox - only shown if supportAll is true */}
+ {supportAll &&
+ {t('application.allSkill')}
+ }
+ {/* Add skill button - disabled when all skills are enabled */}
+
+
+ }
+ variant="borderL"
+ >
+ {/* Show alert when all skills enabled, otherwise show skill list */}
+ {allSkills
+ ? }>{t('application.allSkillIntro')}
+ : <>
+
+ {(fields, { remove }) => (
+ fields.length === 0 ? (
+ /* Empty state when no skills configured */
+
+ ) : (
+ /* Render list of configured skills */
+
+ {fields.map((field) => {
+ const skill = form.getFieldValue([...parentName, 'skill_ids', field.name])
+ return (
+ /* Individual skill card */
+
+
+ {/* Skill icon or fallback initial */}
+ {skill.icon
+ ? 
+ :
+ {skill.name?.[0]}
+
+ }
+ {/* Skill name and description */}
+
+
{skill.name}
+
+ {skill.description}
+
+
+
+ {/* Remove skill button */}
+ remove(field.name)}
+ />
+
+
{index + 1}
+ {/* Step label */}
+ {t(`application.${key}`)}
+
+ {/* Arrow separator between steps (except after last step) */}
+ {index !== processObj.length - 1 && →
}
+ ))}
+
+
+ }
+
+ )
+}
+export default Skill
\ No newline at end of file
diff --git a/web/src/views/ApplicationConfig/components/Skill/types.ts b/web/src/views/ApplicationConfig/components/Skill/types.ts
new file mode 100644
index 00000000..a520663c
--- /dev/null
+++ b/web/src/views/ApplicationConfig/components/Skill/types.ts
@@ -0,0 +1,53 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-05 10:43:09
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:43:09
+ */
+import type { Skill } from '@/views/Skills/types'
+
+/**
+ * Skill Configuration Form Data Structure
+ * Used to manage skill configuration settings in the application
+ */
+export interface SkillConfigForm {
+ /** Whether skill configuration is enabled */
+ enabled?: boolean;
+ /** Whether all skills are accessible */
+ all_skills?: boolean;
+ /** Array of selected skill IDs or full skill objects */
+ skill_ids?: Skill[] | string[];
+}
+
+/**
+ * Skill Binding Mode Types
+ * Defines different strategies for skill assignment
+ */
+export type SkillMode = 'staticBinding' | 'dynamicBinding' | 'mixedMode'
+
+/**
+ * Skill Configuration Modal Reference Interface
+ * Provides methods to control the skill configuration modal
+ */
+export interface SkillConfigModalRef {
+ /** Opens the modal with optional initial data */
+ handleOpen: (data: SkillConfigForm) => void;
+}
+
+/**
+ * Skill Global Configuration Modal Reference Interface
+ * Provides methods to control the global skill configuration modal
+ */
+export interface SkillGlobalConfigModalRef {
+ /** Opens the global configuration modal */
+ handleOpen: () => void;
+}
+
+/**
+ * Skill Selection Modal Reference Interface
+ * Provides methods to control the skill selection modal
+ */
+export interface SkillModalRef {
+ /** Opens the modal with optional skill configuration array */
+ handleOpen: (config?: SkillConfigForm[]) => void;
+}
\ No newline at end of file
diff --git a/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx b/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
index f46dd3f1..1a093b6e 100644
--- a/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
+++ b/web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
@@ -131,7 +131,7 @@ const ToolList: FC<{ value?: ToolOption[]; onChange?: (config: ToolOption[]) =>
+{t('application.addTool')}
+
}
>
{toolList.length === 0
diff --git a/web/src/views/ApplicationConfig/types.ts b/web/src/views/ApplicationConfig/types.ts
index e1a97afa..fc799b91 100644
--- a/web/src/views/ApplicationConfig/types.ts
+++ b/web/src/views/ApplicationConfig/types.ts
@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 16:29:49
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-03 16:29:49
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:31:10
*/
import type { KnowledgeConfig } from './components/Knowledge/types'
import type { Variable } from './components/VariableList/types'
@@ -10,6 +10,7 @@ import type { ToolOption } from './components/ToolList/types'
import type { ChatItem } from '@/components/Chat/types'
import type { GraphRef } from '@/views/Workflow/types';
import type { ApiKey } from '@/views/ApiKeyManagement/types'
+import type { SkillConfigForm } from './components/Skill/types'
/**
* Model configuration parameters
@@ -75,6 +76,7 @@ export interface Config extends MultiAgentConfig {
created_at: number;
/** Last update timestamp */
updated_at: number;
+ skills?: SkillConfigForm | null;
}
/**
@@ -353,6 +355,7 @@ export interface AiPromptForm {
message?: string;
/** Current prompt */
current_prompt?: string;
+ skill?: boolean;
}
/**
diff --git a/web/src/views/Skills/components/ToolList/ToolList.tsx b/web/src/views/Skills/components/ToolList/ToolList.tsx
new file mode 100644
index 00000000..785e0a54
--- /dev/null
+++ b/web/src/views/Skills/components/ToolList/ToolList.tsx
@@ -0,0 +1,192 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-03 16:26:03
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:51:22
+ */
+/**
+ * Tool List Component
+ * Manages tool configurations for the application
+ * Allows adding, removing, and enabling/disabling tools
+ */
+
+import { type FC, useRef, useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Space, Button, List } from 'antd'
+
+import Card from '@/views/ApplicationConfig/components/Card'
+import type {
+ ToolModalRef,
+ ToolOption
+} from './types'
+import Empty from '@/components/Empty'
+import ToolModal from './ToolModal'
+import { getToolMethods, getToolDetail } from '@/api/tools'
+
+/**
+ * Tool List Component Props
+ */
+interface ToolListProps {
+ /** Current tool configurations */
+ value?: ToolOption[];
+ /** Callback when tools change */
+ onChange?: (config: ToolOption[]) => void;
+}
+
+/**
+ * Tool list management component
+ * @param value - Current tool configurations
+ * @param onChange - Callback when tools change
+ */
+const ToolList: FC = ({value, onChange}) => {
+ const { t } = useTranslation()
+ const toolModalRef = useRef(null)
+ const [toolList, setToolList] = useState([])
+ useEffect(() => {
+ if (value) {
+ const processedData = value.map(async (item) => {
+ // Skip if tool already has label (already processed)
+ if (!item.label && item.tool_id) {
+ try {
+ // Fetch tool details and methods in parallel
+ const [toolDetail, methods] = await Promise.all([
+ getToolDetail(item.tool_id),
+ getToolMethods(item.tool_id)
+ ])
+
+ // Process based on tool type
+ switch ((toolDetail as any).tool_type) {
+ case 'mcp':
+ // MCP tools: Find method by operation name
+ const mcpFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
+ return {
+ ...item,
+ label: mcpFilterItem?.description,
+ method_id: mcpFilterItem?.method_id,
+ value: mcpFilterItem?.name,
+ description: mcpFilterItem?.description,
+ parameters: mcpFilterItem?.parameters
+ }
+ break
+ case 'builtin':
+ // Builtin tools: Handle single or multiple methods
+ if ((methods as any[]).length > 1) {
+ const builtinFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
+ return {
+ ...item,
+ label: builtinFilterItem?.description,
+ method_id: builtinFilterItem?.method_id,
+ value: builtinFilterItem?.name,
+ description: builtinFilterItem?.description,
+ parameters: builtinFilterItem?.parameters
+ }
+ }
+ // Single method: Use first method
+ return {
+ ...item,
+ label: (methods as any[])[0]?.description,
+ method_id: (methods as any[])[0]?.method_id,
+ value: (methods as any[])[0]?.name,
+ description: (methods as any[])[0]?.description,
+ parameters: (methods as any[])[0]?.parameters
+ }
+ break
+ default:
+ // Custom tools: Find method by method_id
+ const customFilterItem = (methods as any[]).find(vo => vo.method_id === item.operation)
+ return {
+ ...item,
+ label: customFilterItem?.name,
+ method_id: customFilterItem?.method_id,
+ value: customFilterItem?.name,
+ description: customFilterItem?.description,
+ parameters: customFilterItem?.parameters
+ }
+ }
+ } catch (error) {
+ // Return original item if fetch fails
+ return item
+ }
+ }
+ return item
+ })
+
+ // Wait for all tools to be processed
+ Promise.all(processedData).then(setToolList)
+ }
+ }, [value])
+
+ /**
+ * Opens the tool selection modal
+ */
+ const handleAddTool = () => {
+ toolModalRef.current?.handleOpen()
+ }
+
+ /**
+ * Adds a new tool to the list
+ * Updates both local state and parent component
+ * @param tool - Tool to add
+ */
+ const updateTools = (tool: ToolOption) => {
+ const list = [...toolList, tool]
+ setToolList(list)
+ onChange && onChange(list)
+ }
+
+ /**
+ * Removes a tool from the list by index
+ * Updates both local state and parent component
+ * @param index - Index of tool to remove
+ */
+ const handleDeleteTool = (index: number) => {
+ const list = toolList.filter((_item, idx) => idx !== index)
+ setToolList([...list])
+ onChange && onChange(list)
+ }
+
+ return (
+
+ + {t('application.addTool')}
+
+ }
+ >
+ {/* Show empty state or tool list */}
+ {toolList.length === 0
+ ?
+ :
+ (
+
+ {/* Tool card with delete button */}
+
+ {/* Tool label/description */}
+
+ {item.label}
+
+
+ {/* Delete button with hover effect */}
+ handleDeleteTool(index)}
+ >
+
+
+ )
+}
+export default ToolList
diff --git a/web/src/views/Skills/components/ToolList/ToolModal.tsx b/web/src/views/Skills/components/ToolList/ToolModal.tsx
new file mode 100644
index 00000000..e3dcfd34
--- /dev/null
+++ b/web/src/views/Skills/components/ToolList/ToolModal.tsx
@@ -0,0 +1,209 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-03 16:26:06
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:52:13
+ */
+/**
+ * Tool Selection Modal
+ * Provides cascading selection of tools by type, tool, and method
+ * Supports MCP, builtin, and custom tool types
+ */
+
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Cascader, type CascaderProps } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { ToolModalRef, ToolOption } from './types'
+import RbModal from '@/components/RbModal'
+import { getToolMethods, getTools } from '@/api/tools'
+import type { ToolType, ToolItem } from '@/views/ToolManagement/types'
+
+const FormItem = Form.Item;
+
+/**
+ * Component Props
+ */
+interface ToolModalProps {
+ /** Callback to add selected tool to parent component */
+ refresh: (tool: ToolOption) => void;
+}
+
+/**
+ * Modal for selecting tools
+ */
+const ToolModal = forwardRef(({
+ refresh,
+}, ref) => {
+ const { t } = useTranslation();
+ const [visible, setVisible] = useState(false);
+ const [form] = Form.useForm();
+ const [loading, setLoading] = useState(false)
+
+ /**
+ * Initial cascader options for tool types
+ * Level 1: Tool type selection (MCP, Builtin, Custom)
+ */
+ const [optionList, setOptionList] = useState([
+ { value: 'mcp', label: t('tool.mcp'), isLeaf: false },
+ { value: 'builtin', label: t('tool.inner'), isLeaf: false },
+ { value: 'custom', label: t('tool.custom'), isLeaf: false },
+ ])
+
+ /**
+ * Stores the complete selection path
+ * [0] = Tool type, [1] = Specific tool, [2] = Tool method
+ */
+ const [selectdTools, setSelectedTools] = useState([])
+
+ /**
+ * Closes the modal and resets all state
+ * Clears form, loading state, and selections
+ */
+ const handleClose = () => {
+ setVisible(false);
+ form.resetFields();
+ setLoading(false)
+ setSelectedTools([])
+ };
+
+ /**
+ * Opens the modal and resets state
+ * Clears any previous selections
+ */
+ const handleOpen = () => {
+ setVisible(true);
+ form.resetFields();
+ setSelectedTools([])
+ };
+
+ /**
+ * Saves the selected tool and closes modal
+ */
+ const handleSave = () => {
+ form.validateFields().then(() => {
+ setLoading(false)
+ let operation: any = undefined
+
+ // Determine operation based on tool type
+ if (selectdTools[0].value === 'mcp' ||
+ (selectdTools[0].value === 'builtin' &&
+ selectdTools[1]?.children &&
+ selectdTools[1].children.length > 1)) {
+ // MCP or builtin with multiple methods: use method name
+ operation = selectdTools[2].value
+ } else if (selectdTools[0].value === 'custom') {
+ // Custom tools: use method_id
+ operation = selectdTools[2].method_id
+ }
+
+ // Construct tool object
+ const tool = {
+ ...selectdTools[2],
+ // Custom tools use label, others use description
+ label: selectdTools[0].value === 'custom' ? selectdTools[2].label : selectdTools[2].description,
+ tool_id: selectdTools[1].value as string,
+ enabled: true
+ }
+
+ // Add operation if determined
+ if (operation) {
+ tool.operation = operation
+ }
+
+ refresh(tool)
+ handleClose()
+ })
+ }
+
+ /**
+ * Dynamically loads cascader options based on selection
+ */
+ const loadData = (selectedOptions: ToolOption[]) => {
+ const targetOption = selectedOptions[selectedOptions.length - 1];
+
+ if (selectedOptions.length === 1) {
+ // Level 1 selected: Load tools of this type
+ getTools({ tool_type: targetOption.value as ToolType })
+ .then(res => {
+ const response = res as ToolItem[]
+ targetOption.children = response.map((vo: any) => {
+ return {
+ value: vo.id,
+ label: vo.name,
+ isLeaf: response.length === 0,
+ }
+ })
+ setOptionList([...optionList])
+ })
+ } else {
+ // Level 2 selected: Load methods for this tool
+ getToolMethods(targetOption.value as string)
+ .then(res => {
+ const response = res as Array<{ method_id: string; name: string }>
+ targetOption.children = response.map((vo: any) => {
+ return {
+ value: vo.name,
+ label: vo.name,
+ description: vo.description,
+ isLeaf: true,
+ method_id: vo.method_id,
+ parameters: vo.parameters
+ }
+ })
+ setOptionList([...optionList])
+ })
+ }
+ };
+
+ /**
+ * Handles cascader selection change
+ */
+ const handleChange: CascaderProps['onChange'] = (_value, selectedOptions) => {
+ console.log('selectedOptions', selectedOptions)
+ setSelectedTools(selectedOptions)
+ }
+
+ /**
+ * Exposes methods to parent component via ref
+ */
+ useImperativeHandle(ref, () => ({
+ handleOpen,
+ handleClose
+ }));
+
+ return (
+
+
+
+ );
+});
+
+export default ToolModal;
diff --git a/web/src/views/Skills/components/ToolList/types.ts b/web/src/views/Skills/components/ToolList/types.ts
new file mode 100644
index 00000000..b0380f6a
--- /dev/null
+++ b/web/src/views/Skills/components/ToolList/types.ts
@@ -0,0 +1,67 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-03 16:26:10
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-03 16:26:10
+ */
+/**
+ * Type definitions for tool configuration in application settings
+ */
+
+/**
+ * Tool option for cascader selection
+ */
+export interface ToolOption {
+ /** Option value */
+ value?: string | number | null;
+ /** Display label */
+ label?: React.ReactNode;
+ /** Tool description */
+ description?: string;
+ /** Child options for nested selection */
+ children?: ToolOption[];
+ /** Whether this is a leaf node */
+ isLeaf?: boolean;
+ /** Method ID for API operations */
+ method_id?: string;
+ /** Operation name */
+ operation?: string;
+ /** Method parameters */
+ parameters?: Parameter[];
+ /** Tool ID */
+ tool_id?: string;
+ /** Whether tool is enabled */
+ enabled?: boolean;
+}
+
+/**
+ * Parameter definition for tool methods
+ */
+export interface Parameter {
+ /** Parameter name */
+ name: string;
+ /** Parameter data type */
+ type: string;
+ /** Parameter description */
+ description: string;
+ /** Whether parameter is required */
+ required: boolean;
+ /** Default value */
+ default: any;
+ /** Enum values if applicable */
+ enum: null | string[];
+ /** Minimum value for numeric types */
+ minimum: number;
+ /** Maximum value for numeric types */
+ maximum: number;
+ /** Regex pattern for validation */
+ pattern: null | string;
+}
+
+/**
+ * Modal ref for tool selection
+ */
+export interface ToolModalRef {
+ /** Open tool selection modal */
+ handleOpen: () => void;
+}
\ No newline at end of file
diff --git a/web/src/views/Skills/index.tsx b/web/src/views/Skills/index.tsx
new file mode 100644
index 00000000..1522a3c8
--- /dev/null
+++ b/web/src/views/Skills/index.tsx
@@ -0,0 +1,85 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-05 10:43:49
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:43:49
+ */
+import React, { useRef } from 'react';
+import { Button, Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import type { Skill } from './types'
+import RbCard from '@/components/RbCard/Card'
+import { getSkillListUrl } from '@/api/skill'
+import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
+
+/**
+ * Skills List Page Component
+ *
+ * Main page for displaying and managing skills.
+ * Features:
+ * - Grid layout of skill cards
+ * - Infinite scroll pagination
+ * - Create new skills
+ * - Navigate to skill configuration
+ * - Display skill name and description
+ *
+ * @returns Skills list page with grid of skill cards
+ */
+const Skills: React.FC = () => {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ const scrollListRef = useRef(null)
+
+ /**
+ * Navigate to create new skill page
+ */
+ const handleAdd = () => {
+ navigate('/skills/add')
+ }
+
+ /**
+ * Navigate to skill configuration page
+ * @param item - Skill to view/edit
+ */
+ const handleView = (item: Skill) => {
+ navigate(`/skills/config/${item.id}`)
+ }
+
+ return (
+ <>
+ {/* Create skill button */}
+
+
+
+
+ {/* Infinite scroll skill list */}
+
+ ref={scrollListRef}
+ url={getSkillListUrl}
+ query={{ is_active: true, type: 'service' }}
+ column={3}
+ renderItem={(item) => {
+ return (
+ {item.name[0]} }
+ className="rb:cursor-pointer"
+ onClick={() => handleView(item)}
+ >
+ {/* Skill description with tooltip */}
+
+ {item.description}
+
+
+ );
+ }}
+ />
+
+ );
+};
+
+export default Skills;
diff --git a/web/src/views/Skills/pages/SkillConfig.tsx b/web/src/views/Skills/pages/SkillConfig.tsx
new file mode 100644
index 00000000..6e12e72d
--- /dev/null
+++ b/web/src/views/Skills/pages/SkillConfig.tsx
@@ -0,0 +1,218 @@
+/*
+ * @Author: ZhaoYing
+ * @Date: 2026-02-05 10:44:08
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 10:56:28
+ */
+import { type FC, useEffect, useRef, useState } from "react";
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Form, Input, Button, Space, Select, App } from 'antd'
+
+import Card from '@/views/ApplicationConfig/components/Card'
+import aiPrompt from '@/assets/images/application/aiPrompt.png'
+import AiPromptModal from '@/views/ApplicationConfig/components/AiPromptModal'
+import ToolList from '../components/ToolList/ToolList'
+import type { AiPromptModalRef } from '@/views/ApplicationConfig/types'
+import exitIcon from '@/assets/images/knowledgeBase/exit.png';
+import type { SkillFormData } from '../types'
+import { getSkillDetail, createSkill, updateSkill } from '@/api/skill'
+
+/**
+ * Skill Configuration Page Component
+ *
+ * Page for creating and editing skills with the following sections:
+ * - Manifest: Basic skill information (name, description, keywords)
+ * - Prompt Configuration: AI instructions with AI assistant
+ * - Tool Configuration: Associated tools for the skill
+ *
+ * Features:
+ * - Create new skills or edit existing ones
+ * - AI-powered prompt generation
+ * - Tool selection and management
+ * - Form validation
+ * - Auto-save functionality
+ *
+ * @returns Skill configuration form page
+ */
+const SkillConfig: FC = () => {
+ const { t } = useTranslation();
+ const navigate = useNavigate()
+ const { id } = useParams()
+ const { message } = App.useApp()
+ const [loading, setLoading] = useState(false)
+ const [form] = Form.useForm
();
+
+ /**
+ * Effect: Load skill data if editing existing skill
+ */
+ useEffect(() => {
+ if (id) {
+ getConfig()
+ } else {
+ // Initialize default config for new skill
+ form.setFieldsValue({
+ config: {
+ enabled: false,
+ keywords: []
+ }
+ })
+ }
+ }, [id])
+
+ /**
+ * Fetch skill configuration from API
+ */
+ const getConfig = () => {
+ if (!id) return
+ setLoading(true)
+ getSkillDetail(id)
+ .then(res => {
+ form.setFieldsValue(res as SkillFormData)
+ })
+ .finally(() => {
+ setLoading(false)
+ })
+ }
+
+ const aiPromptModalRef = useRef(null)
+
+ /**
+ * Open AI prompt generation modal
+ */
+ const handlePrompt = () => {
+ aiPromptModalRef.current?.handleOpen()
+ }
+
+ /**
+ * Update prompt field with AI-generated content
+ * @param value - Generated prompt text
+ */
+ const updatePrompt = (value: string) => {
+ form.setFieldValue('prompt', value)
+ }
+
+ /**
+ * Navigate back to skills list
+ */
+ const handleBack = () => {
+ navigate('/skills')
+ };
+
+ /**
+ * Save skill configuration
+ * Validates form and calls create or update API
+ */
+ const handleSave = () => {
+ form.validateFields()
+ .then((values) => {
+ const { tools, ...rest } = values;
+ // Format tools data for API
+ const formData = {
+ ...rest,
+ tools: tools?.map((item: any) => ({
+ tool_id: item.tool_id,
+ operation: item.operation
+ }))
+ }
+ setLoading(true)
+ // Choose create or update based on whether id exists
+ const request = id ? updateSkill(id, formData) : createSkill(formData)
+ request
+ .then(() => {
+ message.success(id ? t('common.saveSuccess') : t('common.createSuccess'))
+ handleBack()
+ })
+ .finally(() => {
+ setLoading(false)
+ })
+ })
+ }
+
+ return (
+
+ {/* Back button */}
+
+
+
{t('common.exit')}
+
+
+
+
+ {/* AI Prompt Generation Modal */}
+
+
+ : avatar ? avatar : null
+ }
+