Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 9bb58c98 by Finley Ge Committed by GitHub
Options

chore: render tool readmes in v2 modals & fix multiselect schema in agent (#7082) 

* Render tool readmes in v2 modals

* fix(agent): accept system tool descriptions as parameters
parent de43a189
Showing with 372 additions and 105 deletions
packages/global/core/app/jsonschema.ts
...@@ -169,7 +169,7 @@ export const jsonSchema2NodeInput = ({ ...@@ -169,7 +169,7 @@ export const jsonSchema2NodeInput = ({
schemaType === 'http' schemaType === 'http'
? value['x-tool-description'] ? value['x-tool-description']
: schemaType === 'systemTool' : schemaType === 'systemTool'
? value['toolDescription'] ? value['toolDescription'] || value.description
: value.description || key, : value.description || key,
required: jsonSchema?.required?.includes(key), required: jsonSchema?.required?.includes(key),
...getNodeInputRenderTypeFromSchemaInputType(value) ...getNodeInputRenderTypeFromSchemaInputType(value)
......
packages/global/core/workflow/type/node.ts
...@@ -123,6 +123,9 @@ export const ToolDataSchema = z.object({ ...@@ -123,6 +123,9 @@ export const ToolDataSchema = z.object({
courseUrl: z.string().optional().meta({ courseUrl: z.string().optional().meta({
description: '工具教程地址' description: '工具教程地址'
}), }),
readmeUrl: z.string().optional().meta({
description: '工具 README 地址'
}),
name: z.string().optional().meta({ name: z.string().optional().meta({
description: '工具展示名称' description: '工具展示名称'
}), }),
...@@ -171,7 +174,8 @@ export const FlowNodeCommonTypeSchema = z.object({ ...@@ -171,7 +174,8 @@ export const FlowNodeCommonTypeSchema = z.object({
currentCost: NumSchema.optional(), currentCost: NumSchema.optional(),
systemKeyCost: NumSchema.optional(), systemKeyCost: NumSchema.optional(),
hasTokenFee: BoolSchema.optional(), hasTokenFee: BoolSchema.optional(),
hasSystemSecret: BoolSchema.optional() hasSystemSecret: BoolSchema.optional(),
readmeUrl: z.string().optional()
}); });
export type FlowNodeCommonType = z.infer<typeof FlowNodeCommonTypeSchema>; export type FlowNodeCommonType = z.infer<typeof FlowNodeCommonTypeSchema>;
...@@ -199,6 +203,7 @@ export const FlowNodeTemplateTypeSchema = FlowNodeCommonTypeSchema.extend({ ...@@ -199,6 +203,7 @@ export const FlowNodeTemplateTypeSchema = FlowNodeCommonTypeSchema.extend({
diagram: z.string().optional(), diagram: z.string().optional(),
courseUrl: z.string().optional(), courseUrl: z.string().optional(),
readmeUrl: z.string().optional(),
userGuide: z.string().optional(), userGuide: z.string().optional(),
tags: z.array(z.string()).nullish(), tags: z.array(z.string()).nullish(),
......
packages/global/test/core/app/jsonschema.test.ts
...@@ -216,6 +216,44 @@ describe('jsonSchema2NodeInput', () => { ...@@ -216,6 +216,44 @@ describe('jsonSchema2NodeInput', () => {
]); ]);
}); });
it('should keep standard description as tool description for system tool schema', () => {
const jsonSchema: JSONSchemaInputType = {
type: 'object',
properties: {
sources: {
type: 'array',
items: {
type: 'string',
enum: ['36kr', 'zhihu', 'weibo']
},
title: '热榜来源',
description: '选择热榜来源网站（可多选）'
}
},
required: ['sources']
};
const result = jsonSchema2NodeInput({ jsonSchema, schemaType: 'systemTool' });
expect(result).toEqual([
{
key: 'sources',
label: '热榜来源',
valueType: WorkflowIOValueTypeEnum.arrayString,
description: '选择热榜来源网站（可多选）',
toolDescription: '选择热榜来源网站（可多选）',
required: true,
value: [],
renderTypeList: ['multipleSelect', 'reference'],
list: [
{ label: '36kr', value: '36kr' },
{ label: 'zhihu', value: 'zhihu' },
{ label: 'weibo', value: 'weibo' }
]
}
]);
});
it('should stringify enum options to match node input schema', () => { it('should stringify enum options to match node input schema', () => {
const jsonSchema: JSONSchemaInputType = { const jsonSchema: JSONSchemaInputType = {
type: 'object', type: 'object',
......
packages/service/core/app/tool/presenter.ts
...@@ -63,6 +63,7 @@ export async function getToolPreviewNode({ ...@@ -63,6 +63,7 @@ export async function getToolPreviewNode({
intro: toolDetail.intro, intro: toolDetail.intro,
toolDescription: toolDetail.toolDescription, toolDescription: toolDetail.toolDescription,
courseUrl: toolDetail.courseUrl, courseUrl: toolDetail.courseUrl,
readmeUrl: toolDetail.readmeUrl,
userGuide: toolDetail.userGuide ?? undefined, userGuide: toolDetail.userGuide ?? undefined,
showStatus: true, showStatus: true,
isTool: true, isTool: true,
......
packages/service/core/app/utils.ts
...@@ -154,7 +154,8 @@ export async function rewriteAppWorkflowToDetail({ ...@@ -154,7 +154,8 @@ export async function rewriteAppWorkflowToDetail({
status: preview.status, status: preview.status,
diagram: preview.diagram, diagram: preview.diagram,
userGuide: preview.userGuide, userGuide: preview.userGuide,
courseUrl: preview.courseUrl courseUrl: preview.courseUrl,
readmeUrl: preview.readmeUrl
}; };
node.versionLabel = preview.versionLabel; node.versionLabel = preview.versionLabel;
node.isLatestVersion = preview.isLatestVersion; node.isLatestVersion = preview.isLatestVersion;
......
packages/service/core/workflow/dispatch/ai/agent/sub/tool/utils.ts
...@@ -420,11 +420,31 @@ export const getAgentRuntimeTools = async ({ ...@@ -420,11 +420,31 @@ export const getAgentRuntimeTools = async ({
const jsonSchema = param.valueType const jsonSchema = param.valueType
? valueTypeJsonSchemaMap[param.valueType] || toolValueTypeList[0].jsonSchema ? valueTypeJsonSchemaMap[param.valueType] || toolValueTypeList[0].jsonSchema
: toolValueTypeList[0].jsonSchema; : toolValueTypeList[0].jsonSchema;
const enumValues =
properties[param.key] = { param.list?.map((item) => item.value).filter(Boolean) ||
param.enum?.split('\n').filter(Boolean);
const schema = {
...jsonSchema, ...jsonSchema,
description: param.toolDescription || '', description: param.toolDescription || ''
enum: param.enum?.split('\n').filter(Boolean) || undefined };
if (!enumValues?.length) {
properties[param.key] = schema;
return;
}
properties[param.key] =
schema.type === 'array'
? {
...schema,
items: {
...(schema.items && typeof schema.items === 'object' ? schema.items : {}),
enum: enumValues
}
}
: {
...schema,
enum: enumValues
}; };
}); });
......
packages/service/test/core/workflow/dispatch/ai/agent/sub/tool/utils.test.ts
...@@ -3,10 +3,12 @@ import { AppTypeEnum } from '@fastgpt/global/core/app/constants'; ...@@ -3,10 +3,12 @@ import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant'; import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { getAgentRuntimeTools } from '@fastgpt/service/core/workflow/dispatch/ai/agent/sub/tool/utils'; import { getAgentRuntimeTools } from '@fastgpt/service/core/workflow/dispatch/ai/agent/sub/tool/utils';
import type { NodeToolConfigType } from '@fastgpt/global/core/workflow/type/node'; import type { NodeToolConfigType } from '@fastgpt/global/core/workflow/type/node';
import { jsonSchema2NodeInput } from '@fastgpt/global/core/app/jsonschema';
const { authAppByTmbIdMock, getAppVersionByIdMock } = vi.hoisted(() => ({ const { authAppByTmbIdMock, getAppVersionByIdMock, getSystemToolDetailMock } = vi.hoisted(() => ({
authAppByTmbIdMock: vi.fn(), authAppByTmbIdMock: vi.fn(),
getAppVersionByIdMock: vi.fn() getAppVersionByIdMock: vi.fn(),
getSystemToolDetailMock: vi.fn()
})); }));
vi.mock('@fastgpt/service/support/permission/app/auth', () => ({ vi.mock('@fastgpt/service/support/permission/app/auth', () => ({
...@@ -20,7 +22,7 @@ vi.mock('@fastgpt/service/core/app/version/controller', () => ({ ...@@ -20,7 +22,7 @@ vi.mock('@fastgpt/service/core/app/version/controller', () => ({
vi.mock('@fastgpt/service/core/app/tool/systemTool/systemTool.repo', () => ({ vi.mock('@fastgpt/service/core/app/tool/systemTool/systemTool.repo', () => ({
SystemToolRepo: { SystemToolRepo: {
getInstance: vi.fn(() => ({ getInstance: vi.fn(() => ({
getSystemToolDetail: vi.fn() getSystemToolDetail: getSystemToolDetailMock
})) }))
} }
})); }));
...@@ -127,6 +129,7 @@ const createToolsetApp = ({ ...@@ -127,6 +129,7 @@ const createToolsetApp = ({
describe('getAgentRuntimeTools schema loading', () => { describe('getAgentRuntimeTools schema loading', () => {
beforeEach(() => { beforeEach(() => {
vi.clearAllMocks(); vi.clearAllMocks();
getSystemToolDetailMock.mockReset();
authAppByTmbIdMock.mockImplementation(async ({ appId }: { appId: string }) => { authAppByTmbIdMock.mockImplementation(async ({ appId }: { appId: string }) => {
const app = appMap[appId]; const app = appMap[appId];
...@@ -244,4 +247,67 @@ describe('getAgentRuntimeTools schema loading', () => { ...@@ -244,4 +247,67 @@ describe('getAgentRuntimeTools schema loading', () => {
expect(tools[0].requestSchema.function.parameters).not.toEqual(httpInputSchema); expect(tools[0].requestSchema.function.parameters).not.toEqual(httpInputSchema);
expect(tools[0].toolConfig?.httpTool?.toolId).toBe('http-http_app/create'); expect(tools[0].toolConfig?.httpTool?.toolId).toBe('http-http_app/create');
}); });
it('loads system tool params from standard JSON schema description', async () => {
getSystemToolDetailMock.mockResolvedValue({
id: 'systemTool-gpjj5s',
name: '热榜工具',
avatar: 'hot-list.png',
intro: '获取热榜信息，支持36氪、知乎、微博、掘金、头条等多个平台',
toolDescription: '获取热榜信息',
status: 'active',
source: 'system',
isToolSet: false,
hasSystemSecret: false,
systemSecretStatus: 'none',
currentCost: 0,
systemKeyCost: 0,
hasTokenFee: false,
tags: [],
author: '',
version: '1.0.0',
isLatestVersion: true,
outputs: [],
inputs: jsonSchema2NodeInput({
schemaType: 'systemTool',
jsonSchema: {
type: 'object',
properties: {
platform: {
type: 'array',
title: '热榜平台',
description: '选择热榜来源网站（可多选）',
items: {
type: 'string',
enum: ['36kr', 'zhihu', 'weibo', 'juejin', 'toutiao']
}
}
},
required: ['platform']
}
})
});
const tools = await getAgentRuntimeTools({
tmbId: 'tmb_1',
tools: [{ id: 'systemTool-gpjj5s', config: {} }]
});
expect(tools).toHaveLength(1);
expect(tools[0].requestSchema.function.name).toBe('gpjj5s');
expect(tools[0].requestSchema.function.parameters).toEqual({
type: 'object',
properties: {
platform: {
type: 'array',
items: {
type: 'string',
enum: ['36kr', 'zhihu', 'weibo', 'juejin', 'toutiao']
},
description: '选择热榜来源网站（可多选）'
}
},
required: ['platform']
});
});
}); });
packages/web/components/common/Markdown/utils.ts
/** /**
* 读取 README 并修正相对图片地址，避免远端 markdown 图片在弹窗中失效。
*/
export const fetchRemoteMarkdown = async (url: string) => {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch markdown: ${response.status}`);
}
const baseUrl = url.substring(0, url.lastIndexOf('/') + 1);
const content = await response.text();
return content
.replace(/!\[([^\]]*)\]\(\.\/([^)]+)\)/g, (match, alt, path) => `![${alt}](${baseUrl}${path})`)
.replace(
/!\[([^\]]*)\]\((?!http|https|\/\/)([^)]+)\)/g,
(match, alt, path) => `![${alt}](${baseUrl}${path})`
);
};
/**
* Export table data to CSV format * Export table data to CSV format
* @param tableElement - HTML table element to export * @param tableElement - HTML table element to export
* @param filename - Name of the exported file (without extension) * @param filename - Name of the exported file (without extension)
......
packages/web/components/core/plugin/tool/BatchUpdateDrawer.tsx
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback } from 'react';
import { import {
Box, Box,
Button, Button,
...@@ -19,10 +19,10 @@ import MyIconButton from '../../../common/Icon/button'; ...@@ -19,10 +19,10 @@ import MyIconButton from '../../../common/Icon/button';
import LightRowTabs from '../../../common/Tabs/LightRowTabs'; import LightRowTabs from '../../../common/Tabs/LightRowTabs';
import { type ToolCardItemType } from './ToolCard'; import { type ToolCardItemType } from './ToolCard';
import MyBox from '../../../common/MyBox'; import MyBox from '../../../common/MyBox';
import Markdown from '../../../common/Markdown';
import { useTableMultipleSelect } from '../../../../hooks/useTableMultipleSelect'; import { useTableMultipleSelect } from '../../../../hooks/useTableMultipleSelect';
import { import {
ParamSection, ParamSection,
ReadmeBox,
SubToolAccordionItem, SubToolAccordionItem,
useToolDetail, useToolDetail,
drawerScrollbarStyles, drawerScrollbarStyles,
...@@ -76,15 +76,13 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({ ...@@ -76,15 +76,13 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({
autoFetch: viewMode === 'detail' autoFetch: viewMode === 'detail'
}); });
// Reset view mode when drawer closes const handleClose = useCallback(() => {
useEffect(() => {
if (!isOpen) {
setViewMode('list'); setViewMode('list');
setSelectedToolForDetail(null); setSelectedToolForDetail(null);
setActiveTab('params'); setActiveTab('params');
setSelectedItems([]); setSelectedItems([]);
} onClose();
}, [isOpen, setSelectedItems]); }, [onClose, setSelectedItems]);
const handleViewDetail = useCallback((tool: ToolCardItemType) => { const handleViewDetail = useCallback((tool: ToolCardItemType) => {
setSelectedToolForDetail(tool); setSelectedToolForDetail(tool);
...@@ -111,7 +109,7 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({ ...@@ -111,7 +109,7 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({
}, [selectedToolForDetail, onBatchUpdate, handleBack]); }, [selectedToolForDetail, onBatchUpdate, handleBack]);
return ( return (
<Drawer isOpen={isOpen} onClose={onClose} placement="right"> <Drawer isOpen={isOpen} onClose={handleClose} placement="right">
<DrawerOverlay /> <DrawerOverlay />
<DrawerContent maxW="480px" borderLeftRadius="md"> <DrawerContent maxW="480px" borderLeftRadius="md">
<DrawerHeader pt={6} pb={1}> <DrawerHeader pt={6} pb={1}>
...@@ -121,7 +119,7 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({ ...@@ -121,7 +119,7 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({
{t('app:toolkit_updatable_plugins')} {t('app:toolkit_updatable_plugins')}
</Box> </Box>
<Box flex={1} /> <Box flex={1} />
<MyIconButton icon={'common/closeLight'} onClick={onClose} /> <MyIconButton icon={'common/closeLight'} onClick={handleClose} />
</Flex> </Flex>
) : ( ) : (
<Flex gap={1.5}> <Flex gap={1.5}>
...@@ -270,7 +268,12 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({ ...@@ -270,7 +268,12 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({
]} ]}
value={activeTab} value={activeTab}
onChange={(value) => { onChange={(value) => {
if (value === 'guide' && parentTool?.courseUrl) { if (
value === 'guide' &&
parentTool?.courseUrl &&
!parentTool?.readme &&
!parentTool?.userGuide
) {
window.open(parentTool?.courseUrl, '_blank'); window.open(parentTool?.courseUrl, '_blank');
} else { } else {
setActiveTab(value as 'guide' | 'params'); setActiveTab(value as 'guide' | 'params');
...@@ -284,21 +287,11 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({ ...@@ -284,21 +287,11 @@ const BatchUpdateDrawer: React.FC<BatchUpdateDrawerProps> = ({
<Box mt={4}> <Box mt={4}>
{activeTab === 'guide' && ( {activeTab === 'guide' && (
<VStack align="stretch" spacing={4} flex="1" minH="0"> <VStack align="stretch" spacing={4} flex="1" minH="0">
{(readmeContent || parentTool?.userGuide) && ( {(parentTool?.readme || readmeContent || parentTool?.userGuide) && (
<Box <ReadmeBox
px={4} source={readmeContent || parentTool?.userGuide || ''}
py={3} courseUrl={parentTool?.courseUrl}
border="1px solid" />
borderColor="myGray.200"
borderRadius="md"
bg="myGray.50"
fontSize="sm"
color="myGray.900"
flex="1"
overflowY="auto"
>
<Markdown source={readmeContent || parentTool?.userGuide || ''} />
</Box>
)} )}
</VStack> </VStack>
)} )}
......
packages/web/components/core/plugin/tool/ToolDetail/ReadmeBox.tsx 0 → 100644
import React from 'react';
import { Box, Flex, Link } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import MyIcon from '../../../../common/Icon';
import Markdown from '../../../../common/Markdown';
const ReadmeBox = ({
source,
courseUrl,
maxH
}: {
source: string;
courseUrl?: string;
maxH?: string | number;
}) => {
const { t } = useTranslation();
return (
<Box
px={4}
py={3}
border="1px solid"
borderColor="myGray.200"
borderRadius="md"
bg="myGray.50"
fontSize="sm"
color="myGray.900"
flex="1"
overflowY="auto"
maxH={maxH}
>
{courseUrl && (
<Flex
as={Link}
href={courseUrl}
isExternal
alignItems="center"
gap={1.5}
mb={3}
color="primary.600"
fontSize="sm"
textDecoration="none"
_hover={{ textDecoration: 'underline' }}
>
<MyIcon name="common/link" w={4} />
<Box>{t('app:toolkit_tutorial_link')}</Box>
</Flex>
)}
<Markdown source={source} />
</Box>
);
};
export default React.memo(ReadmeBox);
packages/web/components/core/plugin/tool/ToolDetail/hooks.ts
...@@ -10,6 +10,7 @@ import { ...@@ -10,6 +10,7 @@ import {
jsonSchema2NodeOutput, jsonSchema2NodeOutput,
jsonSchema2SecretInput jsonSchema2SecretInput
} from '@fastgpt/global/core/app/jsonschema'; } from '@fastgpt/global/core/app/jsonschema';
import { fetchRemoteMarkdown } from '../../../../common/Markdown/utils';
export type UseToolDetailProps = { export type UseToolDetailProps = {
toolId?: string; toolId?: string;
...@@ -149,23 +150,7 @@ export const useToolDetail = ({ ...@@ -149,23 +150,7 @@ export const useToolDetail = ({
} }
try { try {
const response = await fetch(readmeUrl); setReadmeContent(await fetchRemoteMarkdown(readmeUrl));
if (!response.ok) {
throw new Error(`Failed to fetch README: ${response.status}`);
}
let content = await response.text();
const baseUrl = readmeUrl.substring(0, readmeUrl.lastIndexOf('/') + 1);
content = content.replace(
/!\[([^\]]*)\]\(\.\/([^)]+)\)/g,
(match, alt, path) => `![${alt}](${baseUrl}${path})`
);
content = content.replace(
/!\[([^\]]*)\]\((?!http|https|\/\/)([^)]+)\)/g,
(match, alt, path) => `![${alt}](${baseUrl}${path})`
);
setReadmeContent(content);
} catch (error) { } catch (error) {
console.error('Failed to fetch README:', error); console.error('Failed to fetch README:', error);
setReadmeContent(''); setReadmeContent('');
......
packages/web/components/core/plugin/tool/ToolDetail/index.ts
...@@ -2,3 +2,4 @@ export * from './types'; ...@@ -2,3 +2,4 @@ export * from './types';
export * from './components'; export * from './components';
export * from './hooks'; export * from './hooks';
export * from './styles'; export * from './styles';
export { default as ReadmeBox } from './ReadmeBox';
packages/web/components/core/plugin/tool/ToolDetailDrawer.tsx
...@@ -20,10 +20,10 @@ import MyMenu from '../../../common/MyMenu'; ...@@ -20,10 +20,10 @@ import MyMenu from '../../../common/MyMenu';
import LightRowTabs from '../../../common/Tabs/LightRowTabs'; import LightRowTabs from '../../../common/Tabs/LightRowTabs';
import { type ToolCardItemType } from './ToolCard'; import { type ToolCardItemType } from './ToolCard';
import MyBox from '../../../common/MyBox'; import MyBox from '../../../common/MyBox';
import Markdown from '../../../common/Markdown';
import { useRequest } from '../../../../hooks/useRequest'; import { useRequest } from '../../../../hooks/useRequest';
import { import {
ParamSection, ParamSection,
ReadmeBox,
SubToolAccordionItem, SubToolAccordionItem,
useToolDetail, useToolDetail,
drawerScrollbarStyles, drawerScrollbarStyles,
...@@ -88,21 +88,17 @@ const ToolDetailDrawer = ({ ...@@ -88,21 +88,17 @@ const ToolDetailDrawer = ({
} }
}, [selectedTool.id]); }, [selectedTool.id]);
useEffect(() => { const activeVersion = selectedVersion || toolVersions[0]?.version;
if (!selectedVersion && toolVersions[0]?.version) {
setSelectedVersion(toolVersions[0].version);
}
}, [selectedVersion, toolVersions]);
// Use tool detail hook // Use tool detail hook
const { parentTool, isToolSet, subTools, readmeContent, loadingDetail } = useToolDetail({ const { parentTool, isToolSet, subTools, readmeContent, loadingDetail } = useToolDetail({
toolId: selectedTool.id, toolId: selectedTool.id,
version: selectedVersion, version: activeVersion,
tags: selectedTool.tags || undefined, tags: selectedTool.tags || undefined,
onFetchDetail onFetchDetail
}); });
const currentVersion = selectedVersion || parentTool?.version || selectedTool.version; const currentVersion = activeVersion || parentTool?.version || selectedTool.version;
return ( return (
<Drawer isOpen={true} onClose={onClose} placement="right"> <Drawer isOpen={true} onClose={onClose} placement="right">
...@@ -266,7 +262,12 @@ const ToolDetailDrawer = ({ ...@@ -266,7 +262,12 @@ const ToolDetailDrawer = ({
]} ]}
value={activeTab} value={activeTab}
onChange={(value) => { onChange={(value) => {
if (value === 'guide' && parentTool?.courseUrl) { if (
value === 'guide' &&
parentTool?.courseUrl &&
!parentTool?.readme &&
!parentTool?.userGuide
) {
window.open(parentTool?.courseUrl, '_blank'); window.open(parentTool?.courseUrl, '_blank');
} else { } else {
setActiveTab(value as 'guide' | 'params'); setActiveTab(value as 'guide' | 'params');
...@@ -280,21 +281,11 @@ const ToolDetailDrawer = ({ ...@@ -280,21 +281,11 @@ const ToolDetailDrawer = ({
<Box mt={4}> <Box mt={4}>
{activeTab === 'guide' && ( {activeTab === 'guide' && (
<VStack align="stretch" spacing={4} flex="1" minH="0"> <VStack align="stretch" spacing={4} flex="1" minH="0">
{(readmeContent || parentTool?.userGuide) && ( {(parentTool?.readme || readmeContent || parentTool?.userGuide) && (
<Box <ReadmeBox
px={4} source={readmeContent || parentTool?.userGuide || ''}
py={3} courseUrl={parentTool?.courseUrl}
border="1px solid" />
borderColor="myGray.200"
borderRadius="md"
bg="myGray.50"
fontSize="sm"
color="myGray.900"
flex="1"
overflowY="auto"
>
<Markdown source={readmeContent || parentTool?.userGuide || ''} />
</Box>
)} )}
</VStack> </VStack>
)} )}
......
packages/web/i18n/en/app.json
...@@ -494,6 +494,7 @@ ...@@ -494,6 +494,7 @@
"toolkit_updatable_plugins": "Updatable Plugins", "toolkit_updatable_plugins": "Updatable Plugins",
"toolkit_update_failed": "Update failed", "toolkit_update_failed": "Update failed",
"toolkit_user_guide": "User Guide", "toolkit_user_guide": "User Guide",
"toolkit_tutorial_link": "Open tutorial link",
"toolkit_version_description": "Version Description", "toolkit_version_description": "Version Description",
"toolkit_version_info": "Version Information", "toolkit_version_info": "Version Information",
"tools": "tool", "tools": "tool",
......
packages/web/i18n/zh-CN/app.json
...@@ -494,6 +494,7 @@ ...@@ -494,6 +494,7 @@
"toolkit_updatable_plugins": "可更新的插件", "toolkit_updatable_plugins": "可更新的插件",
"toolkit_update_failed": "更新失败", "toolkit_update_failed": "更新失败",
"toolkit_user_guide": "使用说明", "toolkit_user_guide": "使用说明",
"toolkit_tutorial_link": "查看教程链接",
"toolkit_version_description": "版本描述", "toolkit_version_description": "版本描述",
"toolkit_version_info": "版本信息", "toolkit_version_info": "版本信息",
"tools": "工具", "tools": "工具",
......
packages/web/i18n/zh-Hant/app.json
...@@ -482,6 +482,7 @@ ...@@ -482,6 +482,7 @@
"toolkit_updatable_plugins": "可更新的外掛程式", "toolkit_updatable_plugins": "可更新的外掛程式",
"toolkit_update_failed": "更新失敗", "toolkit_update_failed": "更新失敗",
"toolkit_user_guide": "使用說明", "toolkit_user_guide": "使用說明",
"toolkit_tutorial_link": "查看教學連結",
"toolkit_version_description": "版本描述", "toolkit_version_description": "版本描述",
"toolkit_version_info": "版本資訊", "toolkit_version_info": "版本資訊",
"tools": "工具", "tools": "工具",
......
pro @ 35458b56
Subproject commit 5151345e0b0c883f3b812194430598dfe3113e65 Subproject commit 35458b567a3b719987bdd4e9a18dc747a8b34495
projects/app/src/components/common/Modal/UseGuideModal.tsx
import { Box, ModalBody, useDisclosure } from '@chakra-ui/react'; import { Box, Flex, useDisclosure } from '@chakra-ui/react';
import Markdown from '@/components/Markdown'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { getDocPath } from '@/web/common/system/doc'; import { getDocPath } from '@/web/common/system/doc';
import React, { useCallback } from 'react'; import React, { useCallback, useMemo } from 'react';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { fetchRemoteMarkdown } from '@fastgpt/web/components/common/Markdown/utils';
import ReadmeBox from '@fastgpt/web/components/core/plugin/tool/ToolDetail/ReadmeBox';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import Avatar from '@fastgpt/web/components/common/Avatar';
const UseGuideModal = ({ const UseGuideModal = ({
children, children,
title, title,
iconSrc, iconSrc,
text, text,
link link,
readmeUrl
}: { }: {
children: ({ onClick }: { onClick: () => void }) => React.ReactNode; children: ({ onClick }: { onClick: () => void }) => React.ReactNode;
title?: string; title?: string;
iconSrc?: string; iconSrc?: string;
text?: string; text?: string;
link?: string; link?: string;
readmeUrl?: string;
}) => { }) => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const {
data: readmeContent = '',
loading: loadingReadme,
run: fetchReadme
} = useRequest(fetchRemoteMarkdown, {
manual: true,
errorToast: ''
});
const courseUrl = useMemo(() => (link ? getDocPath(link) : undefined), [link]);
const guideContent = readmeContent || text;
const titleContent = useMemo(() => {
if (!iconSrc) return title;
return (
<Flex alignItems={'center'} gap={3}>
<Avatar src={iconSrc} w={'20px'} borderRadius={'sm'} />
<Box>{title}</Box>
</Flex>
);
}, [iconSrc, title]);
const onClick = useCallback(() => { const onClick = useCallback(() => {
if (link) { if (readmeUrl) {
return window.open(getDocPath(link), '_blank'); fetchReadme(readmeUrl);
return onOpen();
} }
if (text) { if (text) {
return onOpen(); return onOpen();
} }
}, [link, text, onOpen]); if (courseUrl) {
return window.open(courseUrl, '_blank');
}
}, [courseUrl, fetchReadme, readmeUrl, text, onOpen]);
return ( return (
<> <>
{children({ onClick })} {children({ onClick })}
{isOpen && ( {isOpen && (
<MyModal isOpen iconSrc={iconSrc} title={title} onClose={onClose} minW={'600px'}> <MyModal
<ModalBody> isOpen
<Box border={'base'} borderRadius={'10px'} p={4} minH={'500px'}> isCentered
<Markdown source={text} /> size={'lg'}
</Box> title={titleContent}
</ModalBody> onClose={onClose}
h={['90vh', '80vh']}
maxH={['90vh', '700px']}
bodyStyles={{
px: [5, 8],
pt: [4, 6],
pb: [5, 8],
minH: 0
}}
>
<MyBox isLoading={loadingReadme} minH={0} flex={1} display={'flex'}>
<ReadmeBox source={guideContent || ''} courseUrl={readmeUrl ? courseUrl : undefined} />
</MyBox>
</MyModal> </MyModal>
)} )}
</> </>
......
projects/app/src/pageComponents/app/detail/Edit/SimpleApp/utils.ts
...@@ -175,6 +175,8 @@ export const appWorkflow2Form = ({ ...@@ -175,6 +175,8 @@ export const appWorkflow2Form = ({
templateType: FlowNodeTemplateTypeEnum.other, templateType: FlowNodeTemplateTypeEnum.other,
pluginData: node.pluginData, pluginData: node.pluginData,
courseUrl: node.pluginData?.courseUrl, courseUrl: node.pluginData?.courseUrl,
readmeUrl: node.pluginData?.readmeUrl,
userGuide: node.pluginData?.userGuide,
toolConfig: node.toolConfig, toolConfig: node.toolConfig,
hasSystemSecret: node.hasSystemSecret, hasSystemSecret: node.hasSystemSecret,
systemKeyCost: node.systemKeyCost, systemKeyCost: node.systemKeyCost,
...@@ -609,6 +611,9 @@ export function form2AppWorkflow( ...@@ -609,6 +611,9 @@ export function form2AppWorkflow(
}, },
toolConfig: tool.toolConfig, toolConfig: tool.toolConfig,
pluginData: tool.pluginData, pluginData: tool.pluginData,
courseUrl: tool.courseUrl,
readmeUrl: tool.readmeUrl,
userGuide: tool.userGuide,
inputs: tool.inputs.map((input) => { inputs: tool.inputs.map((input) => {
// Special key value // Special key value
if (input.key === NodeInputKeyEnum.forbidStream) { if (input.key === NodeInputKeyEnum.forbidStream) {
......
projects/app/src/pageComponents/app/detail/Edit/component/ConfigToolModal.tsx
import { Button, Flex, HStack, ModalBody, ModalFooter } from '@chakra-ui/react'; import { Button, Flex, HStack, ModalBody, ModalFooter } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/common/MyModal';
import React from 'react'; import React from 'react';
import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon'; import MyIcon from '@fastgpt/web/components/common/Icon';
import { Box } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import { childAppSystemKey } from '../FormComponent/ToolSelector/ToolSelectModal'; import { childAppSystemKey } from '../FormComponent/ToolSelector/ToolSelectModal';
...@@ -59,12 +58,13 @@ const ConfigToolModal = ({ ...@@ -59,12 +58,13 @@ const ConfigToolModal = ({
<HStack mb={4} spacing={1} fontSize={'sm'}> <HStack mb={4} spacing={1} fontSize={'sm'}>
<MyIcon name={'common/info'} color={'primary.600'} w={'1.25rem'} /> <MyIcon name={'common/info'} color={'primary.600'} w={'1.25rem'} />
<Box flex={1}>{t('app:tool_input_param_tip')}</Box> <Box flex={1}>{t('app:tool_input_param_tip')}</Box>
{!!(configTool?.courseUrl || configTool?.userGuide) && ( {!!(configTool?.courseUrl || configTool?.readmeUrl || configTool?.userGuide) && (
<UseGuideModal <UseGuideModal
title={configTool?.name} title={configTool?.name}
iconSrc={configTool?.avatar} iconSrc={configTool?.avatar}
text={configTool?.userGuide} text={configTool?.userGuide}
link={configTool?.courseUrl} link={configTool?.courseUrl}
readmeUrl={configTool?.readmeUrl}
> >
{({ onClick }) => ( {({ onClick }) => (
<Box cursor={'pointer'} color={'primary.500'} onClick={onClick}> <Box cursor={'pointer'} color={'primary.500'} onClick={onClick}>
...@@ -135,6 +135,7 @@ const ConfigToolModal = ({ ...@@ -135,6 +135,7 @@ const ConfigToolModal = ({
hasSystemSecret={configTool?.hasSystemSecret} hasSystemSecret={configTool?.hasSystemSecret}
secretCost={configTool?.systemKeyCost} secretCost={configTool?.systemKeyCost}
courseUrl={configTool?.courseUrl} courseUrl={configTool?.courseUrl}
readmeUrl={configTool?.readmeUrl}
parentId={configTool?.pluginId} parentId={configTool?.pluginId}
onClose={setFalseSecretModal} onClose={setFalseSecretModal}
onSubmit={(data) => { onSubmit={(data) => {
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/components/ToolParamConfig.tsx
...@@ -65,6 +65,7 @@ const ToolConfig = ({ nodeId, inputs }: { nodeId?: string; inputs?: FlowNodeInpu ...@@ -65,6 +65,7 @@ const ToolConfig = ({ nodeId, inputs }: { nodeId?: string; inputs?: FlowNodeInpu
hasSystemSecret={node?.hasSystemSecret} hasSystemSecret={node?.hasSystemSecret}
secretCost={node?.systemKeyCost} secretCost={node?.systemKeyCost}
courseUrl={node?.courseUrl} courseUrl={node?.courseUrl}
readmeUrl={node?.readmeUrl}
parentId={node?.pluginId} parentId={node?.pluginId}
onClose={setFalse} onClose={setFalse}
onSubmit={onSubmit} onSubmit={onSubmit}
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeAgent/useAgentSkillManager.ts
...@@ -25,7 +25,7 @@ export const useAgentSkillManager = ({ ...@@ -25,7 +25,7 @@ export const useAgentSkillManager = ({
); );
const selectedTools: SelectedToolItemType[] = useMemo( const selectedTools: SelectedToolItemType[] = useMemo(
() => (Array.isArray(toolsInput?.value) ? toolsInput!.value : []), () => (Array.isArray(toolsInput?.value) ? toolsInput!.value : []),
[toolsInput?.value] [toolsInput]
); );
const fileLinkInput = useMemo(() => inputs.find((i) => i.key === 'fileLink'), [inputs]); const fileLinkInput = useMemo(() => inputs.find((i) => i.key === 'fileLink'), [inputs]);
......
projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
...@@ -262,13 +262,27 @@ const NodeCard = (props: Props) => { ...@@ -262,13 +262,27 @@ const NodeCard = (props: Props) => {
{ {
onSuccess(res) { onSuccess(res) {
if (!res) return; if (!res) return;
// Execute forcibly updates the courseUrl field // 教程元信息由工具详情实时回写，兼容已保存的旧节点。
onChangeNode({ onChangeNode([
{
nodeId, nodeId,
type: 'attr', type: 'attr',
key: 'courseUrl', key: 'courseUrl',
value: res?.courseUrl value: res?.courseUrl
}); },
{
nodeId,
type: 'attr',
key: 'readmeUrl',
value: res?.readmeUrl
},
{
nodeId,
type: 'attr',
key: 'userGuide',
value: res?.userGuide
}
]);
}, },
manual: false manual: false
} }
...@@ -367,6 +381,7 @@ const NodeCard = (props: Props) => { ...@@ -367,6 +381,7 @@ const NodeCard = (props: Props) => {
<NodeActionButtons <NodeActionButtons
nodeTemplate={nodeTemplate} nodeTemplate={nodeTemplate}
courseUrl={node?.courseUrl} courseUrl={node?.courseUrl}
readmeUrl={node?.readmeUrl}
rtDoms={rtDoms} rtDoms={rtDoms}
/> />
...@@ -392,6 +407,7 @@ const NodeCard = (props: Props) => { ...@@ -392,6 +407,7 @@ const NodeCard = (props: Props) => {
nodeId={nodeId} nodeId={nodeId}
isFolder={node?.isFolder} isFolder={node?.isFolder}
courseUrl={node?.courseUrl} courseUrl={node?.courseUrl}
readmeUrl={node?.readmeUrl}
hasSystemSecret={node?.hasSystemSecret} hasSystemSecret={node?.hasSystemSecret}
pluginId={node?.pluginId} pluginId={node?.pluginId}
systemKeyCost={node?.systemKeyCost} systemKeyCost={node?.systemKeyCost}
...@@ -778,7 +794,8 @@ const MenuRender = React.memo(function MenuRender({ ...@@ -778,7 +794,8 @@ const MenuRender = React.memo(function MenuRender({
currentCost: node.data.currentCost, currentCost: node.data.currentCost,
systemKeyCost: node.data.systemKeyCost, systemKeyCost: node.data.systemKeyCost,
hasTokenFee: node.data.hasTokenFee, hasTokenFee: node.data.hasTokenFee,
hasSystemSecret: node.data.hasSystemSecret hasSystemSecret: node.data.hasSystemSecret,
readmeUrl: node.data.readmeUrl
}; };
return [ return [
...@@ -926,10 +943,12 @@ const NodeActionButtons = React.memo<{ ...@@ -926,10 +943,12 @@ const NodeActionButtons = React.memo<{
name?: string; name?: string;
avatar?: string; avatar?: string;
courseUrl?: string; courseUrl?: string;
readmeUrl?: string;
}; };
courseUrl?: string; courseUrl?: string;
readmeUrl?: string;
rtDoms?: React.ReactNode[]; rtDoms?: React.ReactNode[];
}>(({ nodeTemplate, courseUrl, rtDoms }) => { }>(({ nodeTemplate, courseUrl, readmeUrl, rtDoms }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const buttons = useMemo(() => { const buttons = useMemo(() => {
...@@ -950,14 +969,18 @@ const NodeActionButtons = React.memo<{ ...@@ -950,14 +969,18 @@ const NodeActionButtons = React.memo<{
); );
} }
if (courseUrl || nodeTemplate?.userGuide) { const guideReadmeUrl = nodeTemplate?.readmeUrl || readmeUrl;
const guideCourseUrl = nodeTemplate?.courseUrl || courseUrl;
if (guideCourseUrl || guideReadmeUrl || nodeTemplate?.userGuide) {
result.push( result.push(
<UseGuideModal <UseGuideModal
key="userGuide" key="userGuide"
title={nodeTemplate?.name} title={nodeTemplate?.name}
iconSrc={nodeTemplate?.avatar} iconSrc={nodeTemplate?.avatar}
text={nodeTemplate?.userGuide} text={nodeTemplate?.userGuide}
link={nodeTemplate?.courseUrl || courseUrl} link={guideCourseUrl}
readmeUrl={guideReadmeUrl}
> >
{({ onClick }) => ( {({ onClick }) => (
<MyTooltip label={t('workflow:Node.Open_Node_Course')}> <MyTooltip label={t('workflow:Node.Open_Node_Course')}>
...@@ -973,7 +996,7 @@ const NodeActionButtons = React.memo<{ ...@@ -973,7 +996,7 @@ const NodeActionButtons = React.memo<{
} }
return result; return result;
}, [nodeTemplate, courseUrl, rtDoms, t]); }, [nodeTemplate, courseUrl, readmeUrl, rtDoms, t]);
if (buttons.length === 0) { if (buttons.length === 0) {
return null; return null;
...@@ -1042,6 +1065,7 @@ const NodeSecret = React.memo(function NodeSecret({ ...@@ -1042,6 +1065,7 @@ const NodeSecret = React.memo(function NodeSecret({
nodeId, nodeId,
isFolder, isFolder,
courseUrl, courseUrl,
readmeUrl,
hasSystemSecret, hasSystemSecret,
pluginId, pluginId,
systemKeyCost, systemKeyCost,
...@@ -1050,6 +1074,7 @@ const NodeSecret = React.memo(function NodeSecret({ ...@@ -1050,6 +1074,7 @@ const NodeSecret = React.memo(function NodeSecret({
nodeId: string; nodeId: string;
isFolder?: boolean; isFolder?: boolean;
courseUrl?: string; courseUrl?: string;
readmeUrl?: string;
hasSystemSecret?: boolean; hasSystemSecret?: boolean;
pluginId?: string; pluginId?: string;
systemKeyCost?: number; systemKeyCost?: number;
...@@ -1098,6 +1123,7 @@ const NodeSecret = React.memo(function NodeSecret({ ...@@ -1098,6 +1123,7 @@ const NodeSecret = React.memo(function NodeSecret({
onCloseToolParamConfigModal(); onCloseToolParamConfigModal();
}} }}
courseUrl={courseUrl} courseUrl={courseUrl}
readmeUrl={readmeUrl}
inputConfig={inputConfig} inputConfig={inputConfig}
hasSystemSecret={hasSystemSecret} hasSystemSecret={hasSystemSecret}
parentId={pluginId} parentId={pluginId}
......
projects/app/src/pageComponents/app/tool/SecretInputModal.tsx
...@@ -26,6 +26,7 @@ import { getAppToolTemplates } from '@/web/core/app/api/tool'; ...@@ -26,6 +26,7 @@ import { getAppToolTemplates } from '@/web/core/app/api/tool';
import type { NodeTemplateListItemType } from '@fastgpt/global/core/workflow/type/node'; import type { NodeTemplateListItemType } from '@fastgpt/global/core/workflow/type/node';
import { useRequest } from '@fastgpt/web/hooks/useRequest'; import { useRequest } from '@fastgpt/web/hooks/useRequest';
import { InputTypeEnum } from '@/components/core/app/formRender/constant'; import { InputTypeEnum } from '@/components/core/app/formRender/constant';
import UseGuideModal from '@/components/common/Modal/UseGuideModal';
export type ToolParamsFormType = { export type ToolParamsFormType = {
type: SystemToolSecretInputTypeEnum; type: SystemToolSecretInputTypeEnum;
...@@ -39,6 +40,7 @@ const SecretInputModal = ({ ...@@ -39,6 +40,7 @@ const SecretInputModal = ({
isFolder, isFolder,
inputConfig, inputConfig,
courseUrl, courseUrl,
readmeUrl,
onClose, onClose,
onSubmit onSubmit
}: { }: {
...@@ -48,6 +50,7 @@ const SecretInputModal = ({ ...@@ -48,6 +50,7 @@ const SecretInputModal = ({
hasSystemSecret?: boolean; hasSystemSecret?: boolean;
secretCost?: number; secretCost?: number;
courseUrl?: string; courseUrl?: string;
readmeUrl?: string;
onClose: () => void; onClose: () => void;
onSubmit: (data: ToolParamsFormType) => void; onSubmit: (data: ToolParamsFormType) => void;
}) => { }) => {
...@@ -176,7 +179,8 @@ const SecretInputModal = ({ ...@@ -176,7 +179,8 @@ const SecretInputModal = ({
] ]
: []), : []),
{ {
title: courseUrl ? ( title:
courseUrl || readmeUrl ? (
<HStack <HStack
spacing={2} spacing={2}
color={'myGray.900'} color={'myGray.900'}
...@@ -186,22 +190,31 @@ const SecretInputModal = ({ ...@@ -186,22 +190,31 @@ const SecretInputModal = ({
lineHeight={1} lineHeight={1}
> >
<Box>{t('app:manual_secret')}</Box> <Box>{t('app:manual_secret')}</Box>
<UseGuideModal
title={t('app:manual_secret')}
iconSrc="key"
link={courseUrl}
readmeUrl={readmeUrl}
>
{({ onClick }) => (
<HStack <HStack
spacing={1} spacing={1}
color={'primary.600'} color={'primary.600'}
justifyContent={'flex-end'} justifyContent={'flex-end'}
_hover={{ _hover={{
textDecoration: 'underline', textDecoration: 'underline',
cursor: 'point' cursor: 'pointer'
}} }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
window.open(courseUrl, '_blank'); onClick();
}} }}
> >
<MyIcon name={'book'} w={'14px'} /> <MyIcon name={'book'} w={'14px'} />
<Box fontSize={'sm'}>{t('app:secret_get_course')}</Box> <Box fontSize={'sm'}>{t('app:secret_get_course')}</Box>
</HStack> </HStack>
)}
</UseGuideModal>
</HStack> </HStack>
) : ( ) : (
t('app:manual_secret') t('app:manual_secret')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment