Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit f9d83c48 by archer
Options

guide node

parent d346d386
Showing with 312 additions and 278 deletions
client/public/imgs/module/db.png:Zone.Identifier deleted 100644 → 0
[ZoneTransfer]
ZoneId=3
HostUrl=about:internet
client/src/api/response/chat.d.ts
......@@ -3,7 +3,7 @@ import type { ChatItemType } from '@/types/chat';
import { VariableItemType } from '@/types/app';
export interface InitChatResponse {
historyId: string;
chatId: string;
appId: string;
app: {
variableModules?: VariableItemType[];
......@@ -13,6 +13,7 @@ export interface InitChatResponse {
intro: string;
canUse: boolean;
};
customTitle?: string;
title: string;
variables: Record<string, any>;
history: ChatItemType[];
......
client/src/components/ChatBox/index.tsx
......@@ -22,8 +22,8 @@ import Avatar from '@/components/Avatar';
import { adaptChatItem_openAI } from '@/utils/plugin/openai';
import { useMarkdown } from '@/hooks/useMarkdown';
import { VariableItemType } from '@/types/app';
import { VariableInputEnum } from '@/constants/app';
import { AppModuleItemType, VariableItemType } from '@/types/app';
import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
import { useForm } from 'react-hook-form';
import MySelect from '@/components/Select';
import { MessageItemType } from '@/pages/api/openapi/v1/chat/completions';
......@@ -36,6 +36,7 @@ const QuoteModal = dynamic(() => import('./QuoteModal'));
import styles from './index.module.scss';
import { QuoteItemType } from '@/pages/api/app/modules/kb/search';
import { FlowModuleTypeEnum } from '@/constants/flow';
const textareaMinH = '22px';
export type StartChatFnProps = {
......@@ -94,6 +95,18 @@ const Empty = () => {
);
};
const ChatAvatar = ({
src,
order,
ml,
mr
}: {
src: string;
order: number;
ml?: (string | number) | (string | number)[];
mr?: (string | number) | (string | number)[];
}) => <Avatar src={src} w={['24px', '34px']} h={['24px', '34px']} order={order} ml={ml} mr={mr} />;
const ChatBox = (
{
showEmptyIntro = false,
......@@ -375,80 +388,79 @@ const ChatBox = (
w: '100%'
};
const hasVariableInput = useMemo(
() => variableModules || welcomeText,
[variableModules, welcomeText]
const showEmpty = useMemo(
() => showEmptyIntro && chatHistory.length === 0 && !(variableModules || welcomeText),
[chatHistory.length, showEmptyIntro, variableModules, welcomeText]
);
return (
<Flex flexDirection={'column'} h={'100%'}>
<Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 8]} py={[0, 5]}>
<Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 7]} py={[0, 5]}>
<Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}>
{!!welcomeText && (
<Flex alignItems={'flex-start'} py={2}>
{/* avatar */}
<ChatAvatar src={appAvatar} order={1} mr={['6px', 2]} />
{/* message */}
<Flex order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}>
<Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}>
{welcomeText}
</Card>
</Flex>
</Flex>
)}
{/* variable input */}
{hasVariableInput && (
{variableModules && (
<Flex alignItems={'flex-start'} py={2}>
{/* avatar */}
<Avatar
src={appAvatar}
w={['24px', '34px']}
h={['24px', '34px']}
order={1}
mr={['6px', 2]}
/>
<ChatAvatar src={appAvatar} order={1} mr={['6px', 2]} />
{/* message */}
<Flex order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}>
<Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}>
{welcomeText && (
<Box mb={2} pb={2} borderBottom={theme.borders.base}>
{welcomeText}
</Box>
)}
{variableModules && (
<Box>
{variableModules.map((item) => (
<Box w={'min(100%,300px)'} key={item.id} mb={4}>
<VariableLabel required={item.required}>{item.label}</VariableLabel>
{item.type === VariableInputEnum.input && (
<Input
isDisabled={variableIsFinish}
{...register(item.key, {
required: item.required
})}
/>
)}
{item.type === VariableInputEnum.select && (
<MySelect
width={'100%'}
isDisabled={variableIsFinish}
list={(item.enums || []).map((item) => ({
label: item.value,
value: item.value
}))}
value={getValues(item.key)}
onchange={(e) => {
setValue(item.key, e);
setRefresh(!refresh);
}}
/>
)}
</Box>
))}
{!variableIsFinish && (
<Button
leftIcon={<MyIcon name={'chatFill'} w={'16px'} />}
size={'sm'}
maxW={'100px'}
borderRadius={'lg'}
onClick={handleSubmit((data) => {
onUpdateVariable?.(data);
setVariables(data);
})}
>
{'开始对话'}
</Button>
)}
</Box>
)}
<Box>
{variableModules.map((item) => (
<Box w={'min(100%,300px)'} key={item.id} mb={4}>
<VariableLabel required={item.required}>{item.label}</VariableLabel>
{item.type === VariableInputEnum.input && (
<Input
isDisabled={variableIsFinish}
{...register(item.key, {
required: item.required
})}
/>
)}
{item.type === VariableInputEnum.select && (
<MySelect
width={'100%'}
isDisabled={variableIsFinish}
list={(item.enums || []).map((item) => ({
label: item.value,
value: item.value
}))}
value={getValues(item.key)}
onchange={(e) => {
setValue(item.key, e);
setRefresh(!refresh);
}}
/>
)}
</Box>
))}
{!variableIsFinish && (
<Button
leftIcon={<MyIcon name={'chatFill'} w={'16px'} />}
size={'sm'}
maxW={'100px'}
borderRadius={'lg'}
onClick={handleSubmit((data) => {
onUpdateVariable?.(data);
setVariables(data);
})}
>
{'开始对话'}
</Button>
)}
</Box>
</Card>
</Flex>
</Flex>
......@@ -469,10 +481,8 @@ const ChatBox = (
>
{item.obj === 'Human' && <Box flex={1} />}
{/* avatar */}
<Avatar
<ChatAvatar
src={item.obj === 'Human' ? userInfo?.avatar || HUMAN_ICON : appAvatar}
w={['24px', '34px']}
h={['24px', '34px']}
{...(item.obj === 'AI'
? {
order: 1,
......@@ -597,7 +607,7 @@ const ChatBox = (
))}
</Box>
{showEmptyIntro && chatHistory.length === 0 && !hasVariableInput && <Empty />}
{showEmpty && <Empty />}
</Box>
</Box>
{/* input */}
......@@ -770,3 +780,20 @@ export const useChatBox = () => {
onExportChat
};
};
export const getSpecialModule = (modules: AppModuleItemType[]) => {
const welcomeText: string =
modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value || '';
const variableModules: VariableItemType[] =
modules
.find((item) => item.flowType === FlowModuleTypeEnum.variable)
?.inputs.find((item) => item.key === SystemInputEnum.variables)?.value || [];
return {
welcomeText,
variableModules
};
};
client/src/constants/app.ts
import type { AppItemType } from '@/types/app';
import { rawSearchKey } from './chat';
/* app */
export enum AppModuleItemTypeEnum {
'userGuide' = 'userGuide', // default chat input: userChatInput, history
'initInput' = 'initInput', // default chat input: userChatInput, history
'variable' = 'variable',
'userGuide' = 'userGuide',
'initInput' = 'initInput',
'http' = 'http', // send a http request
'switch' = 'switch', // one input and two outputs
'answer' = 'answer' // redirect response
......
client/src/constants/flow/ModuleTemplate.ts
......@@ -9,10 +9,28 @@ import {
} from './inputTemplate';
import { rawSearchKey } from '../chat';
export const VariableInputModule: AppModuleTemplateItemType = {
export const VariableModule: AppModuleTemplateItemType = {
logo: '/imgs/module/variable.png',
name: '全局变量',
intro: '可以在对话开始前，要求用户填写一些内容作为本轮对话的变量。该模块位于开场引导之后。',
description:
'全局变量可以通过 {{变量key}} 的形式注入到其他模块的文本中。目前支持：提示词、限定词。',
type: AppModuleItemTypeEnum.variable,
flowType: FlowModuleTypeEnum.variable,
inputs: [
{
key: SystemInputEnum.variables,
type: FlowInputItemTypeEnum.systemInput,
label: '变量输入',
value: []
}
],
outputs: []
};
export const UserGuideModule: AppModuleTemplateItemType = {
logo: '/imgs/module/userGuide.png',
name: '开场引导',
intro: '可以在每个新对话开始前，给用户发送一段开场白，或要求用户填写一些内容作为本轮对话的变量。',
name: '用户引导',
intro: '可以添加特殊的对话前后引导模块，更好的让用户进行对话',
type: AppModuleItemTypeEnum.userGuide,
flowType: FlowModuleTypeEnum.userGuide,
inputs: [
......@@ -20,12 +38,6 @@ export const VariableInputModule: AppModuleTemplateItemType = {
key: SystemInputEnum.welcomeText,
type: FlowInputItemTypeEnum.input,
label: '开场白'
},
{
key: SystemInputEnum.variables,
type: FlowInputItemTypeEnum.systemInput,
label: '变量输入',
value: []
}
],
outputs: []
......@@ -350,21 +362,17 @@ export const ClassifyQuestionModule: AppModuleTemplateItemType = {
export const ModuleTemplates = [
{
label: '输入模块',
list: [UserInputModule, HistoryModule, VariableInputModule]
list: [UserInputModule, HistoryModule, VariableModule, UserGuideModule]
},
{
label: '对话模块',
list: [ChatModule]
label: '内容生成',
list: [ChatModule, AnswerModule]
},
{
label: '知识库模块',
list: [KBSearchModule]
},
{
label: '工具',
list: [AnswerModule]
},
{
label: 'Agent',
list: [ClassifyQuestionModule]
}
......@@ -1105,7 +1113,7 @@ export const appTemplates: (AppItemType & { avatar: string; intro: string })[] =
moduleId: 'xj0c9p'
},
{
...VariableInputModule,
...VariableModule,
inputs: [
{
key: 'welcomeText',
......
client/src/constants/flow/index.ts
......@@ -19,6 +19,7 @@ export enum FlowOutputItemTypeEnum {
}
export enum FlowModuleTypeEnum {
variable = 'variable',
userGuide = 'userGuide',
questionInputNode = 'questionInput',
historyNode = 'historyNode',
......
client/src/pages/api/chat/init.ts
......@@ -7,18 +7,17 @@ import { ChatItemType } from '@/types/chat';
import { authApp } from '@/service/utils/auth';
import mongoose from 'mongoose';
import type { AppSchema, ChatSchema } from '@/types/mongoSchema';
import { FlowModuleTypeEnum } from '@/constants/flow';
import { SystemInputEnum } from '@/constants/app';
import { quoteLenKey, rawSearchKey } from '@/constants/chat';
import { getSpecialModule } from '@/components/ChatBox';
/* 初始化我的聊天框，需要身份验证 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
const { userId } = await authUser({ req, authToken: true });
let { appId, historyId } = req.query as {
let { appId, chatId } = req.query as {
appId: '' | string;
historyId: '' | string;
chatId: '' | string;
};
await connectToDatabase();
......@@ -53,10 +52,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
// 历史记录
const { chat, history = [] }: { chat?: ChatSchema; history?: ChatItemType[] } =
await (async () => {
if (historyId) {
if (chatId) {
// auth historyId
const chat = await Chat.findOne({
_id: historyId,
_id: chatId,
userId
});
if (!chat) {
......@@ -66,7 +65,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
const history = await Chat.aggregate([
{
$match: {
_id: new mongoose.Types.ObjectId(historyId),
_id: new mongoose.Types.ObjectId(chatId),
userId: new mongoose.Types.ObjectId(userId)
}
},
......@@ -96,20 +95,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
jsonRes<InitChatResponse>(res, {
data: {
historyId,
chatId,
appId,
app: {
variableModules: app.modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs?.find((item) => item.key === SystemInputEnum.variables)?.value,
welcomeText: app.modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
...getSpecialModule(app.modules),
name: app.name,
avatar: app.avatar,
intro: app.intro,
canUse: app.share.isShare || isOwner
},
customTitle: chat?.customTitle,
title: chat?.title || '新对话',
variables: chat?.variables || {},
history
......
client/src/pages/api/chat/shareChat/init.ts
......@@ -7,6 +7,7 @@ import { hashPassword } from '@/service/utils/tools';
import { HUMAN_ICON } from '@/constants/chat';
import { FlowModuleTypeEnum } from '@/constants/flow';
import { SystemInputEnum } from '@/constants/app';
import { getSpecialModule } from '@/components/ChatBox';
/* 初始化我的聊天框，需要身份验证 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
......@@ -48,12 +49,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
?.find((item) => item.flowType === FlowModuleTypeEnum.historyNode)
?.inputs?.find((item) => item.key === 'maxContext')?.value || 0,
app: {
variableModules: app.modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs?.find((item) => item.key === SystemInputEnum.variables)?.value,
welcomeText: app.modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
...getSpecialModule(app.modules),
name: app.name,
avatar: app.avatar,
intro: app.intro
......
client/src/pages/app/detail/components/Settings.tsx
......@@ -28,7 +28,7 @@ const Settings = ({ appId }: { appId: string }) => {
content: '确认删除该应用?'
});
const [settingAppInfo, setSettingAppInfo] = useState<AppSchema>();
const [fullScreen, setFullScreen] = useState(false);
const [fullScreen, setFullScreen] = useState(true);
/* 点击删除 */
const handleDelModel = useCallback(async () => {
......
client/src/pages/app/detail/components/edit/components/ChatTest.tsx
......@@ -11,12 +11,13 @@ import React, {
import { Box, Flex, IconButton, useOutsideClick } from '@chakra-ui/react';
import MyIcon from '@/components/Icon';
import { FlowModuleTypeEnum } from '@/constants/flow';
import { SystemInputEnum } from '@/constants/app';
import { streamFetch } from '@/api/fetch';
import MyTooltip from '@/components/MyTooltip';
import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
import { useToast } from '@/hooks/useToast';
import { getErrText } from '@/utils/tools';
import ChatBox, {
getSpecialModule,
type ComponentRef,
type StartChatFnProps
} from '@/components/ChatBox';
export type ChatTestComponentRef = {
resetChatTest: () => void;
......@@ -36,24 +37,8 @@ const ChatTest = (
) => {
const BoxRef = useRef(null);
const ChatBoxRef = useRef<ComponentRef>(null);
const { toast } = useToast();
const isOpen = useMemo(() => modules && modules.length > 0, [modules]);
const variableModules = useMemo(
() =>
modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs.find((item) => item.key === SystemInputEnum.variables)?.value,
[modules]
);
const welcomeText = useMemo(
() =>
modules
.find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
[modules]
);
const startChat = useCallback(
async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
const historyMaxLen =
......@@ -137,8 +122,7 @@ const ChatTest = (
<ChatBox
ref={ChatBoxRef}
appAvatar={app.avatar}
variableModules={variableModules}
welcomeText={welcomeText}
{...getSpecialModule(modules)}
onStartChat={startChat}
onDelMessage={() => {}}
/>
......
client/src/pages/app/detail/components/edit/components/NodeAnswer.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeAnswer.tsx
import React from 'react';
import { NodeProps } from 'reactflow';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Divider from './modules/Divider';
import Container from './modules/Container';
import RenderInput from './render/RenderInput';
import Divider from '../modules/Divider';
import Container from '../modules/Container';
import RenderInput from '../render/RenderInput';
const NodeAnswer = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
......
client/src/pages/app/detail/components/edit/components/NodeRINode.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeCQNode.tsx
import React from 'react';
import { NodeProps } from 'reactflow';
import { Box, Input, Button, Flex } from '@chakra-ui/react';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Divider from './modules/Divider';
import Container from './modules/Container';
import RenderInput from './render/RenderInput';
import Divider from '../modules/Divider';
import Container from '../modules/Container';
import RenderInput from '../render/RenderInput';
import type { ClassifyQuestionAgentItemType } from '@/types/app';
import { Handle, Position } from 'reactflow';
import { customAlphabet } from 'nanoid';
......@@ -13,7 +13,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 4);
import MyIcon from '@/components/Icon';
import { FlowOutputItemTypeEnum } from '@/constants/flow';
const NodeRINode = ({
const NodeCQNode = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
return (
......@@ -133,4 +133,4 @@ const NodeRINode = ({
</NodeCard>
);
};
export default React.memo(NodeRINode);
export default React.memo(NodeCQNode);
client/src/pages/app/detail/components/edit/components/NodeChat.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeChat.tsx
import React, { useMemo } from 'react';
import { NodeProps } from 'reactflow';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Divider from './modules/Divider';
import Container from './modules/Container';
import RenderInput from './render/RenderInput';
import RenderOutput from './render/RenderOutput';
import Divider from '../modules/Divider';
import Container from '../modules/Container';
import RenderInput from '../render/RenderInput';
import RenderOutput from '../render/RenderOutput';
import { FlowOutputItemTypeEnum } from '@/constants/flow';
import MySelect from '@/components/Select';
import { chatModelList } from '@/store/static';
......
client/src/pages/app/detail/components/edit/components/NodeHistory.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeHistory.tsx
import React from 'react';
import { NodeProps } from 'reactflow';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Divider from './modules/Divider';
import Container from './modules/Container';
import RenderInput from './render/RenderInput';
import RenderOutput from './render/RenderOutput';
import Divider from '../modules/Divider';
import Container from '../modules/Container';
import RenderInput from '../render/RenderInput';
import RenderOutput from '../render/RenderOutput';
const NodeHistory = ({
data: { inputs, outputs, onChangeNode, ...props }
......
client/src/pages/app/detail/components/edit/components/NodeKbSearch.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeKbSearch.tsx
import React from 'react';
import { NodeProps } from 'reactflow';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Divider from './modules/Divider';
import Container from './modules/Container';
import RenderInput from './render/RenderInput';
import RenderOutput from './render/RenderOutput';
import KBSelect from './Plugins/KBSelect';
import Divider from '../modules/Divider';
import Container from '../modules/Container';
import RenderInput from '../render/RenderInput';
import RenderOutput from '../render/RenderOutput';
import KBSelect from '../Plugins/KBSelect';
const NodeKbSearch = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
......
client/src/pages/app/detail/components/edit/components/NodeQuestionInput.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeQuestionInput.tsx
import React from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { Box } from '@chakra-ui/react';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Container from './modules/Container';
import Container from '../modules/Container';
import { SystemInputEnum } from '@/constants/app';
const QuestionInputNode = ({
......
client/src/pages/app/detail/components/edit/components/NodeTFSwitch.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeTFSwitch.tsx
import React from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { Flex, Box } from '@chakra-ui/react';
import NodeCard from './modules/NodeCard';
import NodeCard from '../modules/NodeCard';
import { SystemInputEnum } from '@/constants/app';
import { FlowModuleItemType } from '@/types/flow';
import Divider from './modules/Divider';
import Container from './modules/Container';
import Label from './modules/Label';
import Divider from '../modules/Divider';
import Container from '../modules/Container';
import Label from '../modules/Label';
const NodeTFSwitch = ({ data: { inputs, outputs, ...props } }: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard minW={'220px'} logo={'/icon/logo.png'} name={'TF 开关'} {...props}>
<NodeCard minW={'220px'} {...props}>
<Divider text="输入输出" />
<Container h={'100px'} py={0} px={0} display={'flex'} alignItems={'center'}>
<Box flex={1} pl={'12px'}>
......
client/src/pages/app/detail/components/edit/components/Nodes/NodeUserGuide.tsx 0 → 100644
import React, { useMemo } from 'react';
import { NodeProps } from 'reactflow';
import { Box, Flex, Textarea } from '@chakra-ui/react';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Container from '../modules/Container';
import { SystemInputEnum } from '@/constants/app';
import MyIcon from '@/components/Icon';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
import MyTooltip from '@/components/MyTooltip';
const welcomePlaceholder =
'每次对话开始前，发送一个初始内容。可使用的特殊标记:\n[快捷按键]: 用户点击后可以直接发送该问题';
const NodeUserGuide = ({
data: { inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
const welcomeText = useMemo(
() => inputs.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
[inputs]
);
return (
<>
<NodeCard minW={'300px'} {...props}>
<Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
<>
<Flex mb={1} alignItems={'center'}>
<MyIcon name={'welcomeText'} mr={2} w={'16px'} color={'#E74694'} />
<Box>开场白</Box>
<MyTooltip label={welcomePlaceholder}>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
</Flex>
<Textarea
className="nodrag"
rows={6}
resize={'both'}
defaultValue={welcomeText}
bg={'myWhite.500'}
placeholder={welcomePlaceholder}
onChange={(e) => {
onChangeNode({
moduleId: props.moduleId,
key: SystemInputEnum.welcomeText,
type: 'inputs',
value: e.target.value
});
}}
/>
</>
</Container>
</NodeCard>
</>
);
};
export default React.memo(NodeUserGuide);
client/src/pages/app/detail/components/edit/components/NodeUserGuide.tsx → client/src/pages/app/detail/components/edit/components/Nodes/NodeVariable.tsx
......@@ -27,13 +27,12 @@ import {
useDisclosure,
useTheme,
Grid,
FormControl,
Textarea
FormControl
} from '@chakra-ui/react';
import { QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';
import NodeCard from './modules/NodeCard';
import { AddIcon, SmallAddIcon } from '@chakra-ui/icons';
import NodeCard from '../modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Container from './modules/Container';
import Container from '../modules/Container';
import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
import type { VariableItemType } from '@/types/app';
import MyIcon from '@/components/Icon';
......@@ -41,8 +40,6 @@ import { useForm } from 'react-hook-form';
import { useFieldArray } from 'react-hook-form';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
import { Label } from './render/RenderInput';
import MyTooltip from '@/components/MyTooltip';
const VariableTypeList = [
{ label: '文本', icon: 'settingLight', key: VariableInputEnum.input },
......@@ -118,91 +115,60 @@ const NodeUserGuide = ({
<>
<NodeCard minW={'300px'} {...props}>
<Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
<>
<Flex mb={1} alignItems={'center'}>
<MyIcon name={'welcomeText'} mr={2} w={'16px'} color={'#E74694'} />
<Box>对话开场白</Box>
</Flex>
<Textarea
className="nodrag"
rows={3}
resize={'both'}
defaultValue={welcomeText}
bg={'myWhite.600'}
onChange={(e) => {
onChangeNode({
moduleId: props.moduleId,
key: SystemInputEnum.welcomeText,
type: 'inputs',
value: e.target.value
});
}}
/>
</>
<Box mt={4}>
<Flex alignItems={'center'}>
<MyIcon name={'variable'} mr={2} w={'20px'} color={'#FF8A4C'} />
<Box>变量</Box>
<MyTooltip
label={`变量会在开始对话前输入，仅会在本次对话中生效。\n你可以在任何字符串模块（系统提示词、限定词等）中使用 {{变量key}} 来代表变量输入。`}
>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
</Flex>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th>变量名</Th>
<Th>变量 key</Th>
<Th>必填</Th>
<Th></Th>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th>变量名</Th>
<Th>变量 key</Th>
<Th>必填</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody>
{variables.map((item, index) => (
<Tr key={index}>
<Td>{item.label} </Td>
<Td>{item.key}</Td>
<Td>{item.required ? '✔' : ''}</Td>
<Td>
<MyIcon
mr={3}
name={'settingLight'}
w={'16px'}
cursor={'pointer'}
onClick={() => {
onOpen();
reset({ variable: item });
}}
/>
<MyIcon
name={'delete'}
w={'16px'}
cursor={'pointer'}
onClick={() =>
updateVariables(variables.filter((variable) => variable.id !== item.id))
}
/>
</Td>
</Tr>
</Thead>
<Tbody>
{variables.map((item, index) => (
<Tr key={index}>
<Td>{item.label} </Td>
<Td>{item.key}</Td>
<Td>{item.required ? '✔' : ''}</Td>
<Td>
<MyIcon
mr={3}
name={'settingLight'}
w={'16px'}
cursor={'pointer'}
onClick={() => {
onOpen();
reset({ variable: item });
}}
/>
<MyIcon
name={'delete'}
w={'16px'}
cursor={'pointer'}
onClick={() =>
updateVariables(variables.filter((variable) => variable.id !== item.id))
}
/>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
<Box mt={2} textAlign={'right'}>
<Button
variant={'base'}
onClick={() => {
const newVariable = { ...defaultVariable, id: nanoid() };
updateVariables(variables.concat(newVariable));
reset({ variable: newVariable });
onOpen();
}}
>
+ 新增
</Button>
</Box>
))}
</Tbody>
</Table>
</TableContainer>
<Box mt={2} textAlign={'right'}>
<Button
variant={'base'}
leftIcon={<AddIcon fontSize={'10px'} />}
onClick={() => {
const newVariable = { ...defaultVariable, id: nanoid() };
updateVariables(variables.concat(newVariable));
reset({ variable: newVariable });
onOpen();
}}
>
新增
</Button>
</Box>
</Container>
</NodeCard>
......
client/src/pages/app/detail/components/edit/components/TemplateList.tsx
......@@ -74,7 +74,7 @@ const ModuleStoreList = ({
});
}}
>
<Avatar src={item.logo} w={'34px'} borderRadius={'0'} />
<Avatar src={item.logo} w={'34px'} objectFit={'contain'} borderRadius={'0'} />
<Box ml={5} flex={'1 0 0'}>
<Box color={'black'}>{item.name}</Box>
<Box color={'myGray.500'} fontSize={'sm'}>
......
client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx
......@@ -31,7 +31,7 @@ const NodeCard = ({
return (
<Box minW={minW} bg={'white'} border={theme.borders.md} borderRadius={'md'} boxShadow={'sm'}>
<Flex className="custom-drag-handle" px={4} py={3} alignItems={'center'}>
<Avatar src={logo} borderRadius={'md'} w={'30px'} h={'30px'} />
<Avatar src={logo} borderRadius={'md'} objectFit={'contain'} w={'30px'} h={'30px'} />
<Box ml={3} fontSize={'lg'} color={'myGray.600'}>
{name}
</Box>
......
client/src/pages/app/detail/components/edit/index.tsx
......@@ -31,28 +31,31 @@ import MyTooltip from '@/components/MyTooltip';
import TemplateList from './components/TemplateList';
import ChatTest, { type ChatTestComponentRef } from './components/ChatTest';
const NodeChat = dynamic(() => import('./components/NodeChat'), {
const NodeChat = dynamic(() => import('./components/Nodes/NodeChat'), {
ssr: false
});
const NodeKbSearch = dynamic(() => import('./components/NodeKbSearch'), {
const NodeKbSearch = dynamic(() => import('./components/Nodes/NodeKbSearch'), {
ssr: false
});
const NodeHistory = dynamic(() => import('./components/NodeHistory'), {
const NodeHistory = dynamic(() => import('./components/Nodes/NodeHistory'), {
ssr: false
});
const NodeTFSwitch = dynamic(() => import('./components/NodeTFSwitch'), {
const NodeTFSwitch = dynamic(() => import('./components/Nodes/NodeTFSwitch'), {
ssr: false
});
const NodeAnswer = dynamic(() => import('./components/NodeAnswer'), {
const NodeAnswer = dynamic(() => import('./components/Nodes/NodeAnswer'), {
ssr: false
});
const NodeQuestionInput = dynamic(() => import('./components/NodeQuestionInput'), {
const NodeQuestionInput = dynamic(() => import('./components/Nodes/NodeQuestionInput'), {
ssr: false
});
const NodeRINode = dynamic(() => import('./components/NodeRINode'), {
const NodeCQNode = dynamic(() => import('./components/Nodes/NodeCQNode'), {
ssr: false
});
const NodeUserGuide = dynamic(() => import('./components/NodeUserGuide'), {
const NodeVariable = dynamic(() => import('./components/Nodes/NodeVariable'), {
ssr: false
});
const NodeUserGuide = dynamic(() => import('./components/Nodes/NodeUserGuide'), {
ssr: false
});
......@@ -64,13 +67,14 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
const nodeTypes = {
[FlowModuleTypeEnum.userGuide]: NodeUserGuide,
[FlowModuleTypeEnum.variable]: NodeVariable,
[FlowModuleTypeEnum.questionInputNode]: NodeQuestionInput,
[FlowModuleTypeEnum.historyNode]: NodeHistory,
[FlowModuleTypeEnum.chatNode]: NodeChat,
[FlowModuleTypeEnum.kbSearchNode]: NodeKbSearch,
[FlowModuleTypeEnum.tfSwitchNode]: NodeTFSwitch,
[FlowModuleTypeEnum.answerNode]: NodeAnswer,
[FlowModuleTypeEnum.classifyQuestion]: NodeRINode
[FlowModuleTypeEnum.classifyQuestion]: NodeCQNode
};
const edgeTypes = {
buttonedge: ButtonEdge
......
client/src/pages/chat/components/ChatHistorySlider.tsx
......@@ -161,7 +161,7 @@ const ChatHistorySlider = ({
{item.top ? '取消置顶' : '置顶'}
</MenuItem>
)}
{/* {onUpdateTitle && (
{onUpdateTitle && (
<MenuItem
onClick={(e) => {
e.stopPropagation();
......@@ -174,7 +174,7 @@ const ChatHistorySlider = ({
<MyIcon mr={2} name={'customTitle'} w={'16px'}></MyIcon>
自定义标题
</MenuItem>
)} */}
)}
<MenuItem
_hover={{ color: 'red.500' }}
onClick={(e) => {
......
client/src/pages/chat/index.tsx
......@@ -301,9 +301,7 @@ const Chat = () => {
appAvatar={chatData.app.avatar}
variableModules={chatData.app.variableModules}
welcomeText={chatData.app.welcomeText}
onUpdateVariable={(e) => {
console.log(e);
}}
onUpdateVariable={(e) => {}}
onStartChat={startChat}
onDelMessage={delOneHistoryItem}
/>
......
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