perf: tooltip

This commit is contained in:
archer
2023-07-23 22:39:55 +08:00
parent ea35ad2144
commit 6fd83e1e75
17 changed files with 187 additions and 401 deletions

View File

@@ -17,8 +17,6 @@ const ResponseDetailModal = ({
contentId?: string;
responseData?: ChatHistoryItemResType[];
}) => {
console.log(responseData);
const [quoteModalData, setQuoteModalData] = useState<QuoteItemType[]>();
const {
@@ -62,9 +60,11 @@ const ResponseDetailModal = ({
</MyTooltip>
)}
{completeMessages.length > 0 && (
<MyTooltip label={'提示词和限定词分别算 1 条上下文'} forceShow>
<Tag colorSchema="green" cursor={'default'} {...TagStyles}>
{completeMessages.length}
</Tag>
</MyTooltip>
)}
{tokens > 0 && (
<Tag colorSchema="gray" cursor={'default'} {...TagStyles}>

View File

@@ -24,6 +24,5 @@ export const defaultApp: AppSchema = {
};
export const defaultShareChat: ShareChatEditType = {
name: '',
maxContext: 5
name: ''
};

View File

@@ -3,7 +3,68 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { authUser } from '@/service/utils/auth';
import { connectToDatabase, App } from '@/service/mongo';
import { EditFormType } from '@/utils/app';
import { AppModuleInputItemType } from '@/types/app';
import { FlowModuleTypeEnum, SpecialInputKeyEnum } from '@/constants/flow';
import { TaskResponseKeyEnum } from '@/constants/chat';
const chatModelInput = ({
model,
temperature,
maxToken,
systemPrompt,
limitPrompt,
kbList
}: {
model: string;
temperature: number;
maxToken: number;
systemPrompt: string;
limitPrompt: string;
kbList: { kbId: string }[];
}): AppModuleInputItemType[] => [
{
key: 'model',
value: model,
connected: true
},
{
key: 'temperature',
value: temperature,
connected: true
},
{
key: 'maxToken',
value: maxToken,
connected: true
},
{
key: 'systemPrompt',
value: systemPrompt,
connected: true
},
{
key: 'limitPrompt',
value: limitPrompt,
connected: true
},
{
key: 'switch',
connected: kbList.length > 0
},
{
key: 'quoteQA',
connected: kbList.length > 0
},
{
key: 'history',
connected: true
},
{
key: 'userChatInput',
connected: true
}
];
const chatTemplate = ({
model,
temperature,
@@ -19,71 +80,49 @@ const chatTemplate = ({
}) => {
return [
{
logo: '/imgs/module/userChatInput.png',
name: '用户问题',
intro: '用户输入的内容。该模块通常作为应用的入口,用户在发送消息后会首先执行该模块。',
type: 'initInput',
flowType: 'questionInput',
url: '/app/modules/init/userChatInput',
flowType: FlowModuleTypeEnum.questionInput,
inputs: [
{
key: 'userChatInput',
type: 'systemInput',
label: '用户问题',
connected: false
connected: true
}
],
outputs: [
{
key: 'userChatInput',
label: '用户问题',
type: 'source',
targets: [
{
moduleId: '7pacf0',
moduleId: 'chatModule',
key: 'userChatInput'
}
]
}
],
position: {
x: 477.9074315528994,
y: 1604.2106242223683
x: 464.32198615344566,
y: 1602.2698463081606
},
moduleId: '7z5g5h'
moduleId: 'userChatInput'
},
{
logo: '/imgs/module/history.png',
name: '聊天记录',
intro: '用户输入的内容。该模块通常作为应用的入口,用户在发送消息后会首先执行该模块。',
type: 'initInput',
flowType: 'historyNode',
url: '/app/modules/init/history',
flowType: FlowModuleTypeEnum.historyNode,
inputs: [
{
key: 'maxContext',
type: 'numberInput',
label: '最长记录数',
value: 4,
min: 0,
max: 50,
connected: false
value: 10,
connected: true
},
{
key: 'history',
type: 'hidden',
label: '聊天记录',
connected: false
connected: true
}
],
outputs: [
{
key: 'history',
label: '聊天记录',
type: 'source',
targets: [
{
moduleId: '7pacf0',
moduleId: 'chatModule',
key: 'history'
}
]
@@ -93,124 +132,21 @@ const chatTemplate = ({
x: 452.5466249541586,
y: 1276.3930310334215
},
moduleId: 'xj0c9p'
moduleId: 'history'
},
{
logo: '/imgs/module/AI.png',
name: 'AI 对话',
intro: 'AI 大模型对话',
flowType: 'chatNode',
type: 'http',
url: '/app/modules/chat/gpt',
inputs: [
{
key: 'model',
type: 'custom',
label: '对话模型',
value: model,
list: [
{
label: 'FastAI-4k',
value: 'gpt-3.5-turbo'
},
{
label: 'FastAI-16k',
value: 'gpt-3.5-turbo-16k'
},
{
label: 'FastAI-Plus',
value: 'gpt-4'
}
],
connected: false
},
{
key: 'temperature',
type: 'slider',
label: '温度',
value: temperature,
min: 0,
max: 10,
step: 1,
markList: [
{
label: '严谨',
value: 0
},
{
label: '发散',
value: 10
}
],
connected: false
},
{
key: 'maxToken',
type: 'custom',
label: '回复上限',
value: maxToken,
min: 100,
max: 4000,
step: 50,
markList: [
{
label: '100',
value: 100
},
{
label: '4000',
value: 4000
}
],
connected: false
},
{
key: 'systemPrompt',
type: 'textarea',
label: '系统提示词',
description:
'模型固定的引导词,通过调整该内容,可以引导模型聊天方向。该内容会被固定在上下文的开头。',
placeholder:
'模型固定的引导词,通过调整该内容,可以引导模型聊天方向。该内容会被固定在上下文的开头。',
value: systemPrompt,
connected: false
},
{
key: 'limitPrompt',
type: 'textarea',
label: '限定词',
description:
'限定模型对话范围,会被放置在本次提问前,拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍,参考知识库回答问题,与 "Laf" 无关内容,直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题,其他问题回复: "xxxx"',
placeholder:
'限定模型对话范围,会被放置在本次提问前,拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍,参考知识库回答问题,与 "Laf" 无关内容,直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题,其他问题回复: "xxxx"',
value: limitPrompt,
connected: false
},
{
key: 'quotePrompt',
type: 'target',
label: '引用内容',
connected: false
},
{
key: 'history',
type: 'target',
label: '聊天记录',
connected: true
},
{
key: 'userChatInput',
type: 'target',
label: '用户问题',
connected: true
}
],
flowType: FlowModuleTypeEnum.chatNode,
inputs: chatModelInput({
model,
temperature,
maxToken,
systemPrompt,
limitPrompt,
kbList: []
}),
outputs: [
{
key: 'answerText',
label: '模型回复',
description: '直接响应,无需配置',
type: 'hidden',
key: TaskResponseKeyEnum.answerText,
targets: []
}
],
@@ -218,7 +154,7 @@ const chatTemplate = ({
x: 981.9682828103937,
y: 890.014595014464
},
moduleId: '7pacf0'
moduleId: 'chatModule'
}
];
};
@@ -245,340 +181,172 @@ const kbTemplate = ({
}) => {
return [
{
logo: '/imgs/module/userChatInput.png',
name: '用户问题',
intro: '用户输入的内容。该模块通常作为应用的入口,用户在发送消息后会首先执行该模块。',
type: 'initInput',
flowType: 'questionInput',
url: '/app/modules/init/userChatInput',
flowType: FlowModuleTypeEnum.questionInput,
inputs: [
{
key: 'userChatInput',
type: 'systemInput',
label: '用户问题',
connected: false
connected: true
}
],
outputs: [
{
key: 'userChatInput',
label: '用户问题',
type: 'source',
targets: [
{
moduleId: 'q9v14m',
moduleId: 'chatModule',
key: 'userChatInput'
},
{
moduleId: 'qbf8td',
moduleId: 'kbSearch',
key: 'userChatInput'
}
]
}
],
position: {
x: -196.84632684738483,
y: 797.3401378431948
x: 464.32198615344566,
y: 1602.2698463081606
},
moduleId: 'v0nc1s'
moduleId: 'userChatInput'
},
{
logo: '/imgs/module/history.png',
name: '聊天记录',
intro: '用户输入的内容。该模块通常作为应用的入口,用户在发送消息后会首先执行该模块。',
type: 'initInput',
flowType: 'historyNode',
url: '/app/modules/init/history',
flowType: FlowModuleTypeEnum.historyNode,
inputs: [
{
key: 'maxContext',
type: 'numberInput',
label: '最长记录数',
value: 4,
min: 0,
max: 50,
connected: false
value: 10,
connected: true
},
{
key: 'history',
type: 'hidden',
label: '聊天记录',
connected: false
connected: true
}
],
outputs: [
{
key: 'history',
label: '聊天记录',
type: 'source',
targets: [
{
moduleId: 'qbf8td',
moduleId: 'chatModule',
key: 'history'
}
]
}
],
position: {
x: 211.58250540918442,
y: 611.8700401034965
x: 452.5466249541586,
y: 1276.3930310334215
},
moduleId: 'k9y3jm'
moduleId: 'history'
},
{
logo: '/imgs/module/AI.png',
name: 'AI 对话',
intro: 'AI 大模型对话',
flowType: 'chatNode',
type: 'http',
url: '/app/modules/chat/gpt',
inputs: [
{
key: 'model',
type: 'custom',
label: '对话模型',
value: model,
list: [],
connected: false
},
{
key: 'temperature',
type: 'slider',
label: '温度',
value: temperature,
min: 0,
max: 10,
step: 1,
markList: [
{
label: '严谨',
value: 0
},
{
label: '发散',
value: 10
}
],
connected: false
},
{
key: 'maxToken',
type: 'custom',
label: '回复上限',
value: maxToken,
min: 100,
max: 4000,
step: 50,
markList: [
{
label: '100',
value: 100
},
{
label: '4000',
value: 4000
}
],
connected: false
},
{
key: 'systemPrompt',
type: 'textarea',
label: '系统提示词',
description:
'模型固定的引导词,通过调整该内容,可以引导模型聊天方向。该内容会被固定在上下文的开头。',
placeholder:
'模型固定的引导词,通过调整该内容,可以引导模型聊天方向。该内容会被固定在上下文的开头。',
value: systemPrompt,
connected: false
},
{
key: 'limitPrompt',
type: 'textarea',
label: '限定词',
description:
'限定模型对话范围,会被放置在本次提问前,拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍,参考知识库回答问题,与 "Laf" 无关内容,直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题,其他问题回复: "xxxx"',
placeholder:
'限定模型对话范围,会被放置在本次提问前,拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍,参考知识库回答问题,与 "Laf" 无关内容,直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题,其他问题回复: "xxxx"',
value: limitPrompt,
connected: false
},
{
key: 'quotePrompt',
type: 'target',
label: '引用内容',
connected: true
},
{
key: 'history',
type: 'target',
label: '聊天记录',
connected: true
},
{
key: 'userChatInput',
type: 'target',
label: '用户问题',
connected: true
}
],
outputs: [
{
key: 'answerText',
label: '模型回复',
description: '直接响应,无需配置',
type: 'hidden',
targets: []
}
],
position: {
x: 745.484449528062,
y: 259.9361900288137
},
moduleId: 'qbf8td'
},
{
logo: '/imgs/module/db.png',
name: '知识库搜索',
intro: '去知识库中搜索对应的答案。可作为 AI 对话引用参考。',
flowType: 'kbSearchNode',
type: 'http',
url: '/app/modules/kb/search',
flowType: FlowModuleTypeEnum.kbSearchNode,
inputs: [
{
key: 'kbList',
type: 'custom',
label: '关联的知识库',
value: kbList,
list: [],
connected: false
connected: true
},
{
key: 'similarity',
type: 'slider',
label: '相似度',
value: searchSimilarity,
min: 0,
max: 1,
step: 0.01,
markList: [
{
label: '100',
value: 100
},
{
label: '1',
value: 1
}
],
connected: false
connected: true
},
{
key: 'limit',
type: 'slider',
label: '单次搜索上限',
description: '最多取 n 条记录作为本次问题引用',
value: searchLimit,
min: 1,
max: 20,
step: 1,
markList: [
{
label: '1',
value: 1
},
{
label: '20',
value: 20
}
],
connected: false
connected: true
},
{
key: 'switch',
type: 'target',
label: '触发器',
connected: false
},
{
key: 'userChatInput',
type: 'target',
label: '用户问题',
connected: true
}
],
outputs: [
{
key: 'rawSearch',
label: '源搜索数据',
type: 'hidden',
response: true,
targets: []
},
{
key: 'isEmpty',
label: '搜索结果为空',
type: 'source',
targets: searchEmptyText
? [
{
moduleId: 'w8av9y',
moduleId: 'emptyText',
key: 'switch'
}
]
: [
{
moduleId: 'chatModule',
key: 'switch'
}
]
: []
},
{
key: 'quotePrompt',
label: '引用内容',
description: '搜索结果为空时不返回',
type: 'source',
key: 'unEmpty',
targets: [
{
moduleId: 'qbf8td',
key: 'quotePrompt'
moduleId: 'chatModule',
key: 'switch'
}
]
},
{
key: 'quoteQA',
targets: [
{
moduleId: 'chatModule',
key: 'quoteQA'
}
]
}
],
position: {
x: 101.2612930583856,
y: -31.342317423453437
x: 956.0838440206068,
y: 887.462827870246
},
moduleId: 'q9v14m'
moduleId: 'kbSearch'
},
...(searchEmptyText
? [
{
logo: '/imgs/module/reply.png',
name: '指定回复',
intro: '该模块可以直接回复一段指定的内容。常用于引导、提示。',
type: 'answer',
flowType: 'answerNode',
flowType: FlowModuleTypeEnum.answerNode,
inputs: [
{
key: 'switch',
type: 'target',
label: '触发器',
connected: true
},
{
key: 'answerText',
key: SpecialInputKeyEnum.answerText,
value: searchEmptyText,
type: 'textarea',
label: '回复的内容',
connected: false
connected: true
}
],
outputs: [],
position: {
x: 673.6108151684664,
y: -84.13355134221933
x: 1553.5815811529146,
y: 637.8753731306779
},
moduleId: 'w8av9y'
moduleId: 'emptyText'
}
]
: [])
: []),
{
flowType: FlowModuleTypeEnum.chatNode,
inputs: chatModelInput({ model, temperature, maxToken, systemPrompt, limitPrompt, kbList }),
outputs: [
{
key: TaskResponseKeyEnum.answerText,
targets: []
}
],
position: {
x: 1551.71405495818,
y: 977.4911578918461
},
moduleId: 'chatModule'
}
];
};

View File

@@ -174,7 +174,7 @@ const Settings = ({ appId }: { appId: string }) => {
<Flex pr={4} justifyContent={'space-between'}>
<Box fontSize={['md', 'xl']} fontWeight={'bold'}>
<MyTooltip label={'仅包含基础功能,复杂 agent 功能请使用高级编排。'}>
<MyTooltip label={'仅包含基础功能,复杂 agent 功能请使用高级编排。'} forceShow>
<QuestionOutlineIcon ml={2} fontSize={'md'} />
</MyTooltip>
</Box>
@@ -309,7 +309,7 @@ const Settings = ({ appId }: { appId: string }) => {
<Flex mt={10} alignItems={'flex-start'}>
<Box {...LabelStyles}>
<MyTooltip label={ChatModelSystemTip}>
<MyTooltip label={ChatModelSystemTip} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
</Box>
@@ -323,7 +323,7 @@ const Settings = ({ appId }: { appId: string }) => {
<Flex mt={5} alignItems={'flex-start'}>
<Box {...LabelStyles}>
<MyTooltip label={ChatModelLimitTip}>
<MyTooltip label={ChatModelLimitTip} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
</Box>
@@ -381,7 +381,7 @@ const Settings = ({ appId }: { appId: string }) => {
<Flex alignItems={'center'}>
<Avatar src={'/imgs/module/userGuide.png'} w={'18px'} />
<Box mx={2}></Box>
<MyTooltip label={welcomeTextTip}>
<MyTooltip label={welcomeTextTip} forceShow>
<QuestionOutlineIcon />
</MyTooltip>
</Flex>

View File

@@ -26,7 +26,7 @@ const NodeUserGuide = ({
<Flex mb={1} alignItems={'center'}>
<MyIcon name={'welcomeText'} mr={2} w={'16px'} color={'#E74694'} />
<Box></Box>
<MyTooltip label={welcomeTextTip}>
<MyTooltip label={welcomeTextTip} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
</Flex>

View File

@@ -20,7 +20,7 @@ const Label = ({
</Box>
)}
{description && (
<MyTooltip label={description}>
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} fontSize={'12px'} mb={1} ml={1} />
</MyTooltip>
)}

View File

@@ -36,7 +36,7 @@ const NodeCard = ({
{name}
</Box>
{description && (
<MyTooltip label={description}>
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
)}

View File

@@ -34,7 +34,7 @@ export const Label = ({
</Box>
)}
{description && (
<MyTooltip label={description}>
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</MyTooltip>
)}

View File

@@ -15,7 +15,7 @@ const Label = ({
}) => (
<Flex as={'label'} justifyContent={'right'} alignItems={'center'} position={'relative'}>
{description && (
<MyTooltip label={description}>
<MyTooltip label={description} forceShow>
<QuestionOutlineIcon display={['none', 'inline']} mr={1} />
</MyTooltip>
)}

View File

@@ -146,7 +146,7 @@ export const KbParamsModal = ({
<Box display={['block', 'flex']} pt={3} pb={5}>
<Box flex={'0 0 100px'} mb={[8, 0]}>
<MyTooltip label={'高相似度推荐0.8及以上。'}>
<MyTooltip label={'高相似度推荐0.8及以上。'} forceShow>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Box>

View File

@@ -88,7 +88,10 @@ const Share = ({ appId }: { appId: string }) => {
<Flex justifyContent={'space-between'}>
<Box fontWeight={'bold'}>
<MyTooltip label="可以直接分享该模型给其他用户去进行对话对方无需登录即可直接进行对话。注意这个功能会消耗你账号的tokens。请保管好链接和密码。">
<MyTooltip
forceShow
label="可以直接分享该模型给其他用户去进行对话对方无需登录即可直接进行对话。注意这个功能会消耗你账号的tokens。请保管好链接和密码。"
>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Box>

View File

@@ -260,6 +260,7 @@ const ChunkImport = ({ kbId }: { kbId: string }) => {
<MyTooltip
label={'基于 Gpt3.5 的 Token 计算方法进行分段。前后段落会有 30% 的内容重叠。'}
forceShow
>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
@@ -287,7 +288,10 @@ const ChunkImport = ({ kbId }: { kbId: string }) => {
<Flex py={5} alignItems={'center'}>
<Box>
<MyTooltip label={`索引生成计费为: ${formatPrice(unitPrice, 1000)}/1k tokens`}>
<MyTooltip
label={`索引生成计费为: ${formatPrice(unitPrice, 1000)}/1k tokens`}
forceShow
>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Box>

View File

@@ -135,6 +135,7 @@ const CsvImport = ({ kbId }: { kbId: string }) => {
fileExtension={fileExtension}
onSelectFile={onSelectFile}
isLoading={selecting}
tipText={'如果导入文件乱码,请将 CSV 转成 utf-8 编码格式'}
py={emptyFiles ? '100px' : 5}
/>

View File

@@ -7,11 +7,12 @@ import MyIcon from '@/components/Icon';
interface Props extends BoxProps {
fileExtension: string;
tipText?: string;
onSelectFile: (files: File[]) => Promise<void>;
isLoading?: boolean;
}
const FileSelect = ({ fileExtension, onSelectFile, isLoading, ...props }: Props) => {
const FileSelect = ({ fileExtension, onSelectFile, isLoading, tipText, ...props }: Props) => {
const { Loading: FileSelectLoading } = useLoading();
const { File, onOpen } = useSelectFile({
@@ -41,6 +42,11 @@ const FileSelect = ({ fileExtension, onSelectFile, isLoading, ...props }: Props)
</Box>
</Flex>
<Box mt={1}> {fileExtension} </Box>
{tipText && (
<Box mt={1} fontSize={'sm'} color={'myGray.600'}>
{tipText}
</Box>
)}
<FileSelectLoading loading={isLoading} fixed={false} />
<File onSelect={onSelectFile} />
</Box>

View File

@@ -263,6 +263,7 @@ const QAImport = ({ kbId }: { kbId: string }) => {
QA {' '}
<MyTooltip
label={`可输入关于文件内容的范围介绍,例如:\n1. 关于 Laf 的介绍\n2. xxx的简历`}
forceShow
>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
@@ -282,7 +283,10 @@ const QAImport = ({ kbId }: { kbId: string }) => {
<Flex py={5} alignItems={'center'}>
<Box>
<MyTooltip label={`索引生成计费为: ${formatPrice(unitPrice, 1000)}/1k tokens`}>
<MyTooltip
label={`索引生成计费为: ${formatPrice(unitPrice, 1000)}/1k tokens`}
forceShow
>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Box>

View File

@@ -201,7 +201,7 @@ const Info = (
<Flex mt={8} alignItems={'center'} w={'100%'} flexWrap={'wrap'}>
<Box flex={['0 0 90px', '0 0 160px']} w={0}>
<MyTooltip label={'用空格隔开多个标签,便于搜索'}>
<MyTooltip label={'用空格隔开多个标签,便于搜索'} forceShow>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Box>

View File

@@ -161,6 +161,7 @@ const Test = ({ kbId }: { kbId: string }) => {
label={
'根据知识库内容与测试文本的相似度进行排序,你可以根据测试结果调整对应的文本。\n注意测试记录中的数据可能已经被修改过点击某条测试数据后将展示最新的数据。'
}
forceShow
>
<QuestionOutlineIcon
ml={2}