Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 9bdd5f52 by archer
Options

feat: v4

parent 4c54e182
Showing with 2796 additions and 444 deletions
client/package.json
......@@ -49,6 +49,7 @@
"react-hook-form": "^7.43.1",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.5.0",
"reactflow": "^11.7.4",
"rehype-katex": "^6.0.2",
"remark-breaks": "^3.0.3",
"remark-gfm": "^3.0.1",
......
client/src/api/model.ts → client/src/api/app.ts
import { GET, POST, DELETE, PUT } from './request';
import type { ModelSchema } from '@/types/mongoSchema';
import type { AppSchema } from '@/types/mongoSchema';
import type { ModelUpdateParams } from '@/types/model';
import { RequestPaging } from '../types/index';
import type { ModelListResponse } from './response/model';
......@@ -22,13 +22,13 @@ export const delModelById = (id: string) => DELETE(`/model/del?modelId=${id}`);
/**
* 根据 ID 获取模型
*/
export const getModelById = (id: string) => GET<ModelSchema>(`/model/detail?modelId=${id}`);
export const getModelById = (id: string) => GET<AppSchema>(`/model/detail?modelId=${id}`);
/**
* 根据 ID 更新模型
*/
export const putModelById = (id: string, data: ModelUpdateParams) =>
PUT(`/model/update?modelId=${id}`, data);
export const putAppById = (id: string, data: ModelUpdateParams) =>
PUT(`/model/update?appId=${id}`, data);
/* 共享市场 */
/**
......
client/src/api/fetch.ts
import { Props, ChatResponseType } from '@/pages/api/openapi/v1/chat/completions';
import { Props } from '@/pages/api/openapi/v1/chat/completions';
import { sseResponseEventEnum } from '@/constants/chat';
import { getErrText } from '@/utils/tools';
import { parseStreamChunk } from '@/utils/adapt';
......@@ -9,10 +9,10 @@ interface StreamFetchProps {
abortSignal: AbortController;
}
export const streamFetch = ({ data, onMessage, abortSignal }: StreamFetchProps) =>
new Promise<ChatResponseType & { responseText: string; errMsg: string }>(
new Promise<{ responseText: string; errMsg: string; newChatId: string | null }>(
async (resolve, reject) => {
try {
const response = await window.fetch('/api/openapi/v1/chat/test', {
const response = await window.fetch('/api/openapi/v1/chat/completions2', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
......@@ -37,9 +37,8 @@ export const streamFetch = ({ data, onMessage, abortSignal }: StreamFetchProps)
// response data
let responseText = '';
let newChatId = '';
let quoteLen = 0;
let errMsg = '';
const newChatId = response.headers.get('newChatId');
const read = async () => {
try {
......@@ -48,9 +47,8 @@ export const streamFetch = ({ data, onMessage, abortSignal }: StreamFetchProps)
if (response.status === 200) {
return resolve({
responseText,
newChatId,
quoteLen,
errMsg
errMsg,
newChatId
});
} else {
return reject('响应过程出现异常~');
......@@ -72,11 +70,6 @@ export const streamFetch = ({ data, onMessage, abortSignal }: StreamFetchProps)
const answer: string = data?.choices?.[0].delta.content || '';
onMessage(answer);
responseText += answer;
} else if (item.event === sseResponseEventEnum.chatResponse) {
const chatResponse = data as ChatResponseType;
newChatId =
chatResponse.newChatId !== undefined ? chatResponse.newChatId : newChatId;
quoteLen = chatResponse.quoteLen !== undefined ? chatResponse.quoteLen : quoteLen;
} else if (item.event === sseResponseEventEnum.error) {
errMsg = getErrText(data, '流响应错误');
}
......@@ -86,9 +79,8 @@ export const streamFetch = ({ data, onMessage, abortSignal }: StreamFetchProps)
if (err?.message === 'The user aborted a request.') {
return resolve({
responseText,
newChatId,
quoteLen,
errMsg
errMsg,
newChatId
});
}
reject(getErrText(err, '请求异常'));
......
client/src/api/response/chat.d.ts
import type { ChatPopulate, ModelSchema } from '@/types/mongoSchema';
import type { ChatPopulate, AppSchema } from '@/types/mongoSchema';
import type { ChatItemType } from '@/types/chat';
export interface InitChatResponse {
......@@ -12,7 +12,7 @@ export interface InitChatResponse {
intro: string;
canUse: boolean;
};
chatModel: ModelSchema['chat']['chatModel']; // 对话模型名
chatModel: AppSchema['chat']['chatModel']; // 对话模型名
history: ChatItemType[];
}
......@@ -24,5 +24,5 @@ export interface InitShareChatResponse {
avatar: string;
intro: string;
};
chatModel: ModelSchema['chat']['chatModel']; // 对话模型名
chatModel: AppSchema['chat']['chatModel']; // 对话模型名
}
client/src/api/response/model.d.ts
import { ModelListItemType } from '@/types/model';
export type ModelListResponse = {
myModels: ModelListItemType[];
myCollectionModels: ModelListItemType[];
myApps: ModelListItemType[];
myCollectionApps: ModelListItemType[];
};
client/src/components/Icon/icons/save.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688217440856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2309" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M819.823 83.694H206.991c-67.703 0-122.588 54.885-122.588 122.588v612.833c0 67.703 54.885 122.588 122.588 122.588h612.833c67.703 0 122.588-54.885 122.588-122.588V206.282c-0.001-67.703-54.885-122.588-122.589-122.588z m-124.435 63.313v241.142H331.772V147.007h363.616z m185.787 672.274c0.027 33.765-27.323 61.158-61.088 61.185H207.133c-16.389 0-31.864-6.297-43.454-17.887s-18.039-26.91-18.039-43.298v-612.94c0.061-33.923 27.57-61.395 61.493-61.41h61.327v245.294c-0.05 33.771 27.286 61.187 61.057 61.237h367.888c33.853 0 61.299-27.387 61.299-61.237V144.931h61.206c33.872 0.036 61.301 27.524 61.265 61.396V819.281z" fill="" p-id="2310"></path><path d="M574.817 329.936c17.483 0 31.656-14.173 31.656-31.656v-61.292c0-17.483-14.173-31.656-31.656-31.656s-31.656 14.173-31.656 31.656v61.292c0 17.483 14.173 31.656 31.656 31.656z" fill="" p-id="2311"></path></svg>
\ No newline at end of file
client/src/components/Icon/index.tsx
......@@ -34,7 +34,8 @@ const map = {
history: require('./icons/history.svg').default,
kbTest: require('./icons/kbTest.svg').default,
date: require('./icons/date.svg').default,
apikey: require('./icons/apikey.svg').default
apikey: require('./icons/apikey.svg').default,
save: require('./icons/save.svg').default
};
export type IconName = keyof typeof map;
......
client/src/components/Layout/index.tsx
......@@ -14,7 +14,8 @@ import { getUnreadCount } from '@/api/user';
const pcUnShowLayoutRoute: Record<string, boolean> = {
'/': true,
'/login': true,
'/chat/share': true
'/chat/share': true,
'/app/edit': true
};
const phoneUnShowLayoutRoute: Record<string, boolean> = {
'/': true,
......@@ -60,10 +61,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
return (
<>
<Box
h={'100%'}
bgGradient={'linear(to-t,rgba(173, 206, 255, 0.05) 0%, rgba(173, 206, 255, 0.12) 100%)'}
>
<Box h={'100%'} bg={'#F3F4F5E0'}>
<Box h={'100%'} display={['none', 'block']}>
{pcUnShowLayoutRoute[router.pathname] ? (
<Auth>{children}</Auth>
......
client/src/components/Layout/navbar.tsx
......@@ -29,6 +29,12 @@ const Navbar = ({ unread }: { unread: number }) => {
{
label: '应用',
icon: 'model',
link: `/app/list`,
activeLink: ['/app/list']
},
{
label: '旧应用',
icon: 'model',
link: `/model?modelId=${lastModelId}`,
activeLink: ['/model']
},
......
client/src/components/Select/index.tsx
import React, { useRef } from 'react';
import { Menu, MenuButton, MenuList, MenuItem, Button, useDisclosure } from '@chakra-ui/react';
import {
Menu,
Box,
MenuList,
MenuItem,
MenuButton,
Button,
useDisclosure,
useOutsideClick
} from '@chakra-ui/react';
import type { ButtonProps } from '@chakra-ui/react';
import { ChevronDownIcon } from '@chakra-ui/icons';
interface Props extends ButtonProps {
......@@ -7,13 +16,14 @@ interface Props extends ButtonProps {
placeholder?: string;
list: {
label: string;
id: string;
value: string;
}[];
onchange?: (val: string) => void;
}
const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props }: Props) => {
const ref = useRef<HTMLDivElement>(null);
const SelectRef = useRef(null);
const menuItemStyles = {
borderRadius: 'sm',
py: 2,
......@@ -25,9 +35,16 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
};
const { isOpen, onOpen, onClose } = useDisclosure();
useOutsideClick({
ref: SelectRef,
handler: () => {
onClose();
}
});
return (
<Menu autoSelect={false} onOpen={onOpen} onClose={onClose}>
<MenuButton style={{ width: '100%', position: 'relative' }} as={'span'}>
<Menu autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
<Box ref={SelectRef} position={'relative'} onClick={() => (isOpen ? onClose() : onOpen())}>
<Button
ref={ref}
width={width}
......@@ -36,6 +53,9 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
display={'flex'}
alignItems={'center'}
justifyContent={'space-between'}
_active={{
transform: ''
}}
{...(isOpen
? {
boxShadow: '0px 0px 4px #A8DBFF',
......@@ -44,44 +64,48 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
: {})}
{...props}
>
{list.find((item) => item.id === value)?.label || placeholder}
{list.find((item) => item.value === value)?.label || placeholder}
<ChevronDownIcon />
</Button>
</MenuButton>
<MenuList
minW={(() => {
const w = ref.current?.clientWidth;
if (w) {
return `${w}px !important`;
<MenuList
minW={(() => {
const w = ref.current?.clientWidth;
if (w) {
return `${w}px !important`;
}
return Array.isArray(width)
? width.map((item) => `${item} !important`)
: `${width} !important`;
})()}
p={'6px'}
border={'1px solid #fff'}
boxShadow={
'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
}
return Array.isArray(width)
? width.map((item) => `${item} !important`)
: `${width} !important`;
})()}
p={'6px'}
border={'1px solid #fff'}
boxShadow={'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'}
zIndex={99}
>
{list.map((item) => (
<MenuItem
key={item.id}
{...menuItemStyles}
{...(value === item.id
? {
color: 'myBlue.600'
zIndex={99}
transform={'translateY(35px) !important'}
>
{list.map((item) => (
<MenuItem
key={item.value}
{...menuItemStyles}
{...(value === item.value
? {
color: 'myBlue.600'
}
: {})}
onClick={() => {
if (onchange && value !== item.value) {
onchange(item.value);
}
: {})}
onClick={() => {
if (onchange && value !== item.id) {
onchange(item.id);
}
}}
>
{item.label}
</MenuItem>
))}
</MenuList>
}}
>
{item.label}
</MenuItem>
))}
</MenuList>
</Box>
</Menu>
);
};
......
client/src/components/Slider/index.tsx
......@@ -10,8 +10,8 @@ import {
const MySlider = ({
markList = [],
setVal,
activeVal,
onChange,
value,
max = 100,
min = 0,
step = 1,
......@@ -21,8 +21,8 @@ const MySlider = ({
label: string | number;
value: number;
}[];
activeVal: number;
setVal: (index: number) => void;
value: number;
onChange?: (index: number) => void;
max?: number;
min?: number;
step?: number;
......@@ -40,10 +40,6 @@ const MySlider = ({
top: 0,
transform: 'translateY(-3px)'
};
const value = useMemo(() => {
const index = markList.findIndex((item) => item.value === activeVal);
return index > -1 ? index : 0;
}, [activeVal, markList]);
return (
<Slider
......@@ -51,9 +47,9 @@ const MySlider = ({
min={min}
step={step}
size={'lg'}
value={activeVal}
value={value}
width={width}
onChange={setVal}
onChange={onChange}
>
{markList?.map((item, i) => (
<SliderMark
......@@ -71,7 +67,7 @@ const MySlider = ({
</SliderMark>
))}
<SliderMark
value={activeVal}
value={value}
textAlign="center"
bg="myBlue.600"
color="white"
......@@ -84,7 +80,7 @@ const MySlider = ({
transform={'translate(-50%, -170%)'}
boxSizing={'border-box'}
>
{activeVal}
{value}
</SliderMark>
<SliderTrack
bg={'#EAEDF3'}
......
client/src/constants/data.ts 0 → 100644
export enum ChatModelEnum {
'GPT35' = 'gpt-3.5-turbo',
'GPT3516k' = 'gpt-3.5-turbo-16k',
'GPT4' = 'gpt-4',
'GPT432k' = 'gpt-4-32k'
}
export const chatModelList = [
{ label: 'Gpt35-16k', value: ChatModelEnum.GPT3516k },
{ label: 'Gpt35-4k', value: ChatModelEnum.GPT35 },
{ label: 'Gpt4-8k', value: ChatModelEnum.GPT4 }
];
client/src/constants/flow/ModuleTemplate.ts 0 → 100644
import { AppModuleItemTypeEnum, SystemInputEnum } from '../app';
import { FlowModuleTypeEnum, FlowInputItemTypeEnum, FlowOutputItemTypeEnum } from './index';
import type { AppModuleTemplateItemType } from '@/types/app';
import { chatModelList } from '../data';
import {
Input_Template_History,
Input_Template_TFSwitch,
Input_Template_UserChatInput
} from './inputTemplate';
export const UserInputModule: AppModuleTemplateItemType = {
logo: '',
name: '用户问题',
intro: '用户输入的内容。该模块通常作为应用的入口，用户在发送消息后会首先执行该模块。',
type: AppModuleItemTypeEnum.initInput,
flowType: FlowModuleTypeEnum.questionInputNode,
url: '/openapi/modules/init/userChatInput',
inputs: [
{
key: SystemInputEnum.userChatInput,
type: FlowInputItemTypeEnum.systemInput,
label: '用户问题'
}
],
outputs: [
{
key: SystemInputEnum.userChatInput,
label: '用户问题',
type: FlowOutputItemTypeEnum.source,
targets: []
}
]
};
export const HistoryModule: AppModuleTemplateItemType = {
logo: '',
name: '聊天记录',
intro: '用户输入的内容。该模块通常作为应用的入口，用户在发送消息后会首先执行该模块。',
type: AppModuleItemTypeEnum.initInput,
flowType: FlowModuleTypeEnum.historyNode,
url: '/openapi/modules/init/history',
inputs: [
{
key: 'maxContext',
type: FlowInputItemTypeEnum.numberInput,
label: '最长记录数',
value: 4,
min: 0,
max: 50
},
{
key: SystemInputEnum.history,
type: FlowInputItemTypeEnum.hidden,
label: '聊天记录'
}
],
outputs: [
{
key: SystemInputEnum.history,
label: '聊天记录',
type: FlowOutputItemTypeEnum.source,
targets: []
}
]
};
export const ChatModule: AppModuleTemplateItemType = {
logo: '',
name: 'AI 对话',
intro: 'OpenAI GPT 大模型对话。',
flowType: FlowModuleTypeEnum.chatNode,
type: AppModuleItemTypeEnum.http,
url: '/openapi/modules/chat/gpt',
inputs: [
{
key: 'model',
type: FlowInputItemTypeEnum.select,
label: '对话模型',
value: chatModelList[0].value,
list: chatModelList
},
{
key: 'temperature',
type: FlowInputItemTypeEnum.slider,
label: '温度',
value: 0,
min: 0,
max: 10,
step: 1,
markList: [
{ label: '严谨', value: 0 },
{ label: '发散', value: 10 }
]
},
{
key: 'maxToken',
type: FlowInputItemTypeEnum.slider,
label: '回复上限',
value: 3000,
min: 0,
max: 4000,
step: 50,
markList: [
{ label: '0', value: 0 },
{ label: '4000', value: 4000 }
]
},
{
key: 'systemPrompt',
type: FlowInputItemTypeEnum.textarea,
label: '系统提示词',
description:
'模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。',
placeholder:
'模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。',
value: ''
},
{
key: 'limitPrompt',
type: FlowInputItemTypeEnum.textarea,
label: '限定词',
description:
'限定模型对话范围，会被放置在本次提问前，拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍，参考知识库回答问题，与 "Laf" 无关内容，直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题，其他问题回复: "xxxx"',
placeholder:
'限定模型对话范围，会被放置在本次提问前，拥有强引导和限定性。例如:\n1. 知识库是关于 Laf 的介绍，参考知识库回答问题，与 "Laf" 无关内容，直接回复: "我不知道"。\n2. 你仅回答关于 "xxx" 的问题，其他问题回复: "xxxx"',
value: ''
},
Input_Template_TFSwitch,
{
key: 'quotePrompt',
type: FlowInputItemTypeEnum.target,
label: '引用内容'
},
Input_Template_History,
Input_Template_UserChatInput
],
outputs: [
{
key: 'answer',
label: '模型回复',
description: '直接响应，无需配置',
type: FlowOutputItemTypeEnum.hidden,
targets: []
}
]
};
export const KBSearchModule: AppModuleTemplateItemType = {
logo: '',
name: '知识库搜索',
intro: '去知识库中搜索对应的答案。可作为 AI 对话引用参考。',
flowType: FlowModuleTypeEnum.kbSearchNode,
type: AppModuleItemTypeEnum.http,
url: '/openapi/modules/kb/search',
inputs: [
{
key: 'kb_ids',
type: FlowInputItemTypeEnum.custom,
label: '关联的知识库',
value: [],
list: []
},
{
key: 'similarity',
type: FlowInputItemTypeEnum.slider,
label: '相似度',
value: 0.8,
min: 0,
max: 1,
step: 0.01,
markList: [
{ label: '0', value: 0 },
{ label: '1', value: 1 }
]
},
{
key: 'limit',
type: FlowInputItemTypeEnum.slider,
label: '单次搜索上限',
value: 5,
min: 1,
max: 20,
step: 1,
markList: [
{ label: '1', value: 1 },
{ label: '20', value: 20 }
]
},
Input_Template_TFSwitch,
Input_Template_UserChatInput
],
outputs: [
{
key: 'rawSearch',
label: '源搜索数据',
type: FlowOutputItemTypeEnum.hidden,
response: true,
targets: []
},
{
key: 'isEmpty',
label: '搜索结果为空',
type: FlowOutputItemTypeEnum.source,
targets: []
},
{
key: 'quotePrompt',
label: '引用内容',
description: '搜索结果为空时不触发',
type: FlowOutputItemTypeEnum.source,
targets: []
}
]
};
export const AnswerModule: AppModuleTemplateItemType = {
logo: '',
name: '指定回复',
intro: '该模块可以直接回复一段指定的内容。常用于引导、提示。',
type: AppModuleItemTypeEnum.answer,
flowType: FlowModuleTypeEnum.answerNode,
inputs: [
Input_Template_TFSwitch,
{
key: 'answerText',
value: '',
type: FlowInputItemTypeEnum.input,
label: '回复的内容'
}
],
outputs: []
};
export const TFSwitchModule: AppModuleTemplateItemType = {
logo: '',
name: 'TF开关',
intro: '可以判断输入的内容为 True 或者 False，从而执行不同操作。',
type: AppModuleItemTypeEnum.switch,
flowType: FlowModuleTypeEnum.tfSwitchNode,
inputs: [
{
key: SystemInputEnum.switch,
type: FlowInputItemTypeEnum.target,
label: '输入'
}
],
outputs: [
{
key: 'true',
label: 'True',
type: FlowOutputItemTypeEnum.source,
targets: []
},
{
key: 'false',
label: 'False',
type: FlowOutputItemTypeEnum.source,
targets: []
}
]
};
export const ClassifyQuestionModule: AppModuleTemplateItemType = {
logo: '',
name: '意图识别',
intro: '可以判断用户问题属于哪方面问题，从而执行不同的操作。',
type: AppModuleItemTypeEnum.switch,
flowType: FlowModuleTypeEnum.tfSwitchNode,
inputs: [
{
key: SystemInputEnum.switch,
type: FlowInputItemTypeEnum.target,
label: '输入'
}
],
outputs: [
{
key: 'true',
label: 'True',
type: FlowOutputItemTypeEnum.source,
targets: []
},
{
key: 'false',
label: 'False',
type: FlowOutputItemTypeEnum.source,
targets: []
}
]
};
export const ModuleTemplates = [
{
label: '输入模块',
list: [UserInputModule, HistoryModule]
},
{
label: '对话模块',
list: [ChatModule]
},
{
label: '知识库模块',
list: [KBSearchModule]
},
{
label: '工具',
list: [AnswerModule, TFSwitchModule]
},
{
label: 'Agent',
list: [ClassifyQuestionModule]
}
];
client/src/constants/flow/defaultModule.ts 0 → 100644
import { CSSProperties } from 'react';
export const nodeDefaultStyle: CSSProperties = {
border: '1px solid #DEE0E2'
};
client/src/constants/flow/index.ts 0 → 100644
export enum FlowInputItemTypeEnum {
systemInput = 'systemInput', // history, userChatInput
input = 'input',
textarea = 'textarea',
numberInput = 'numberInput',
select = 'select',
slider = 'slider',
custom = 'custom',
target = 'target',
none = 'none',
hidden = 'hidden'
}
export enum FlowOutputItemTypeEnum {
answer = 'answer',
source = 'source',
none = 'none',
hidden = 'hidden'
}
export enum FlowModuleTypeEnum {
questionInputNode = 'questionInput',
historyNode = 'historyNode',
chatNode = 'chatNode',
kbSearchNode = 'kbSearchNode',
tfSwitchNode = 'tfSwitchNode',
answerNode = 'answerNode'
}
export const edgeOptions = {
style: {
strokeWidth: 1,
stroke: '#5A646Es'
}
};
export const connectionLineStyle = { strokeWidth: 1, stroke: '#5A646Es' };
client/src/constants/flow/inputTemplate.ts 0 → 100644
import { FlowInputItemType } from '@/types/flow';
import { SystemInputEnum } from '../app';
import { FlowInputItemTypeEnum } from './index';
export const Input_Template_TFSwitch: FlowInputItemType = {
key: SystemInputEnum.switch,
type: FlowInputItemTypeEnum.target,
label: '触发器'
};
export const Input_Template_History: FlowInputItemType = {
key: SystemInputEnum.history,
type: FlowInputItemTypeEnum.target,
label: '聊天记录'
};
export const Input_Template_UserChatInput: FlowInputItemType = {
key: SystemInputEnum.userChatInput,
type: FlowInputItemTypeEnum.target,
label: '用户问题'
};
client/src/constants/model.ts
import type { ShareChatEditType } from '@/types/model';
import type { ModelSchema } from '@/types/mongoSchema';
import type { AppSchema } from '@/types/mongoSchema';
export const embeddingModel = 'text-embedding-ada-002';
export const embeddingPrice = 0.1;
......@@ -64,8 +64,8 @@ export const chatModelList: ChatModelItemType[] = [
ChatModelMap[OpenAiChatEnum.GPT4]
];
export const defaultModel: ModelSchema = {
_id: 'modelId',
export const defaultApp: AppSchema = {
_id: '',
userId: 'userId',
name: '模型名称',
avatar: '/icon/logo.png',
......@@ -86,7 +86,8 @@ export const defaultModel: ModelSchema = {
isShare: false,
isShareDetail: false,
collection: 0
}
},
modules: []
};
export const defaultShareChat: ShareChatEditType = {
......
client/src/constants/theme.ts
import { extendTheme, defineStyleConfig, ComponentStyleConfig } from '@chakra-ui/react';
// @ts-ignore
import { modalAnatomy, switchAnatomy, selectAnatomy, checkboxAnatomy } from '@chakra-ui/anatomy';
import { modalAnatomy, switchAnatomy, selectAnatomy, numberInputAnatomy } from '@chakra-ui/anatomy';
// @ts-ignore
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
......@@ -11,6 +11,8 @@ const { definePartsStyle: switchPart, defineMultiStyleConfig: switchMultiStyle }
createMultiStyleConfigHelpers(switchAnatomy.keys);
const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
createMultiStyleConfigHelpers(selectAnatomy.keys);
const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiStyle } =
createMultiStyleConfigHelpers(numberInputAnatomy.keys);
// modal 弹窗
const ModalTheme = defineMultiStyleConfig({
......@@ -122,6 +124,39 @@ const Input: ComponentStyleConfig = {
}
};
const NumberInput = numInputMultiStyle({
variants: {
outline: numInputPart({
field: {
bg: 'myWhite.300',
border: '1px solid',
borderRadius: 'base',
borderColor: 'myGray.200',
_focus: {
borderColor: 'myBlue.600 !important',
boxShadow: '0px 0px 4px #A8DBFF !important',
bg: 'transparent'
},
_disabled: {
color: 'myGray.400 !important',
bg: 'myWhite.300 !important'
}
},
stepper: {
bg: 'transparent',
border: 'none',
color: 'myGray.600',
_active: {
color: 'myBlue.600'
}
}
})
},
defaultProps: {
variant: 'outline'
}
});
const Textarea: ComponentStyleConfig = {
variants: {
outline: {
......@@ -260,6 +295,7 @@ export const theme = extendTheme({
Input,
Textarea,
Switch,
Select
Select,
NumberInput
}
});
client/src/hooks/useRequest.tsx
import { useToast } from '@/hooks/useToast';
import { useMutation } from '@tanstack/react-query';
import type { UseMutationOptions } from '@tanstack/react-query';
import { getErrText } from '@/utils/tools';
interface Props extends UseMutationOptions<any, any, any, any> {
successToast?: string;
......@@ -23,7 +24,7 @@ export const useRequest = ({ successToast, errorToast, onSuccess, onError, ...pr
onError?.(err, variables, context);
errorToast &&
toast({
title: typeof err === 'string' ? err : err?.message || errorToast,
title: getErrText(err, errorToast),
status: 'error'
});
}
......
client/src/pages/api/chat/init.ts
......@@ -4,9 +4,9 @@ import { connectToDatabase, Chat, Model } from '@/service/mongo';
import type { InitChatResponse } from '@/api/response/chat';
import { authUser } from '@/service/utils/auth';
import { ChatItemType } from '@/types/chat';
import { authModel } from '@/service/utils/auth';
import { authApp } from '@/service/utils/auth';
import mongoose from 'mongoose';
import type { ModelSchema } from '@/types/mongoSchema';
import type { AppSchema } from '@/types/mongoSchema';
/* 初始化我的聊天框，需要身份验证 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
......@@ -21,7 +21,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
await connectToDatabase();
// 没有 modelId 时，直接获取用户的第一个id
const model = await (async () => {
const app = await (async () => {
if (!modelId) {
const myModel = await Model.findOne({ userId });
if (!myModel) {
......@@ -29,23 +29,23 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
name: '应用1',
userId
});
return (await Model.findById(_id)) as ModelSchema;
return (await Model.findById(_id)) as AppSchema;
} else {
return myModel;
}
} else {
// 校验使用权限
const authRes = await authModel({
modelId,
const authRes = await authApp({
appId: modelId,
userId,
authUser: false,
authOwner: false
});
return authRes.model;
return authRes.app;
}
})();
modelId = modelId || model._id;
modelId = modelId || app._id;
// 历史记录
let history: ChatItemType[] = [];
......@@ -87,21 +87,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
]);
}
const isOwner = String(model.userId) === userId;
const isOwner = String(app.userId) === userId;
jsonRes<InitChatResponse>(res, {
data: {
chatId: chatId || '',
modelId: modelId,
model: {
name: model.name,
avatar: model.avatar,
intro: model.intro,
canUse: model.share.isShare || isOwner
name: app.name,
avatar: app.avatar,
intro: app.intro,
canUse: app.share.isShare || isOwner
},
chatModel: model.chat.chatModel,
systemPrompt: isOwner ? model.chat.systemPrompt : '',
limitPrompt: isOwner ? model.chat.limitPrompt : '',
chatModel: app.chat.chatModel,
systemPrompt: isOwner ? app.chat.systemPrompt : '',
limitPrompt: isOwner ? app.chat.limitPrompt : '',
history
}
});
......
client/src/pages/api/chat/saveChat.ts
......@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { ChatItemType } from '@/types/chat';
import { connectToDatabase, Chat, Model } from '@/service/mongo';
import { authModel } from '@/service/utils/auth';
import { authApp } from '@/service/utils/auth';
import { authUser } from '@/service/utils/auth';
import { Types } from 'mongoose';
......@@ -49,7 +49,7 @@ export async function saveChat({
userId
}: Props & { newChatId?: Types.ObjectId; userId: string }): Promise<{ newChatId: string }> {
await connectToDatabase();
const { model } = await authModel({ modelId, userId, authOwner: false });
const { app } = await authApp({ appId: modelId, userId, authOwner: false });
const content = prompts.map((item) => ({
_id: item._id,
......@@ -59,7 +59,7 @@ export async function saveChat({
quote: item.quote || []
}));
if (String(model.userId) === userId) {
if (String(app.userId) === userId) {
await Model.findByIdAndUpdate(modelId, {
updateTime: new Date()
});
......@@ -93,8 +93,8 @@ export async function saveChat({
newChatId: String(res._id)
}))
]),
// update model
...(String(model.userId) === userId
// update app
...(String(app.userId) === userId
? [
Model.findByIdAndUpdate(modelId, {
updateTime: new Date()
......
client/src/pages/api/chat/shareChat/create.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { connectToDatabase, ShareChat } from '@/service/mongo';
import { authModel, authUser } from '@/service/utils/auth';
import { authApp, authUser } from '@/service/utils/auth';
import type { ShareChatEditType } from '@/types/model';
/* create a shareChat */
......@@ -14,8 +14,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
await connectToDatabase();
const { userId } = await authUser({ req, authToken: true });
await authModel({
modelId,
await authApp({
appId: modelId,
userId,
authOwner: false
});
......
client/src/pages/api/chat/shareChat/init.ts
......@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { connectToDatabase, ShareChat, User } from '@/service/mongo';
import type { InitShareChatResponse } from '@/api/response/chat';
import { authModel } from '@/service/utils/auth';
import { authApp } from '@/service/utils/auth';
import { hashPassword } from '@/service/utils/tools';
import { HUMAN_ICON } from '@/constants/chat';
......@@ -35,8 +35,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
}
// 校验使用权限
const { model } = await authModel({
modelId: shareChat.modelId,
const { app } = await authApp({
appId: shareChat.modelId,
userId: String(shareChat.userId),
authOwner: false
});
......@@ -48,11 +48,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
maxContext: shareChat.maxContext,
userAvatar: user?.avatar || HUMAN_ICON,
model: {
name: model.name,
avatar: model.avatar,
intro: model.intro
name: app.name,
avatar: app.avatar,
intro: app.intro
},
chatModel: model.chat.chatModel
chatModel: app.chat.chatModel
}
});
} catch (err) {
......
client/src/pages/api/model/del.ts
......@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { Chat, Model, connectToDatabase, Collection, ShareChat } from '@/service/mongo';
import { authUser } from '@/service/utils/auth';
import { authModel } from '@/service/utils/auth';
import { authApp } from '@/service/utils/auth';
/* 获取我的模型 */
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
......@@ -19,8 +19,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
await connectToDatabase();
// 验证是否是该用户的 model
await authModel({
modelId,
await authApp({
appId: modelId,
userId
});
......
client/src/pages/api/model/detail.tsx
......@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { connectToDatabase } from '@/service/mongo';
import { authUser } from '@/service/utils/auth';
import { authModel } from '@/service/utils/auth';
import { authApp } from '@/service/utils/auth';
/* 获取我的模型 */
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
......@@ -18,14 +18,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
await connectToDatabase();
const { model } = await authModel({
modelId,
const { app } = await authApp({
appId: modelId,
userId,
authOwner: false
});
jsonRes(res, {
data: model
data: app
});
} catch (err) {
jsonRes(res, {
......
client/src/pages/api/model/list.ts
......@@ -13,7 +13,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
await connectToDatabase();
// 根据 userId 获取模型信息
const [myModels, myCollections] = await Promise.all([
const [myApps, myCollections] = await Promise.all([
Model.find(
{
userId
......@@ -33,20 +33,20 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
jsonRes<ModelListResponse>(res, {
data: {
myModels: myModels.map((item) => ({
myApps: myApps.map((item) => ({
_id: item._id,
name: item.name,
avatar: item.avatar,
intro: item.intro
})),
myCollectionModels: myCollections
myCollectionApps: myCollections
.map((item: any) => ({
_id: item.modelId?._id,
name: item.modelId?.name,
avatar: item.modelId?.avatar,
intro: item.modelId?.intro
}))
.filter((item) => !myModels.find((model) => String(model._id) === String(item._id))) // 去重
.filter((item) => !myApps.find((model) => String(model._id) === String(item._id))) // 去重
}
});
} catch (err) {
......
client/src/pages/api/model/update.ts
......@@ -4,16 +4,16 @@ import { connectToDatabase } from '@/service/mongo';
import { authUser } from '@/service/utils/auth';
import { Model } from '@/service/models/model';
import type { ModelUpdateParams } from '@/types/model';
import { authModel } from '@/service/utils/auth';
import { authApp } from '@/service/utils/auth';
/* 获取我的模型 */
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try {
const { name, avatar, chat, share, intro } = req.body as ModelUpdateParams;
const { modelId } = req.query as { modelId: string };
const { name, avatar, chat, share, intro, modules } = req.body as ModelUpdateParams;
const { appId } = req.query as { appId: string };
if (!modelId) {
throw new Error('参数错误');
if (!appId) {
throw new Error('appId is empty');
}
// 凭证校验
......@@ -21,15 +21,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
await connectToDatabase();
await authModel({
modelId,
await authApp({
appId,
userId
});
// 更新模型
await Model.updateOne(
{
_id: modelId,
_id: appId,
userId
},
{
......@@ -40,7 +40,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
...(share && {
'share.isShare': share.isShare,
'share.isShareDetail': share.isShareDetail
})
}),
...(modules && { modules })
}
);
......
client/src/pages/api/openapi/chat/chat.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { connectToDatabase } from '@/service/mongo';
import { authUser, authModel, getApiKey } from '@/service/utils/auth';
import { authUser, authApp, getApiKey } from '@/service/utils/auth';
import { modelServiceToolMap, resStreamResponse } from '@/service/utils/chat';
import { ChatItemType } from '@/types/chat';
import { jsonRes } from '@/service/response';
......@@ -50,19 +50,19 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
/* 凭证校验 */
const { userId } = await authUser({ req });
const { model } = await authModel({
const { app } = await authApp({
userId,
modelId
appId: modelId
});
/* get api key */
const { systemAuthKey: apiKey } = await getApiKey({
model: model.chat.chatModel,
model: app.chat.chatModel,
userId,
mustPay: true
});
const modelConstantsData = ChatModelMap[model.chat.chatModel];
const modelConstantsData = ChatModelMap[app.chat.chatModel];
const prompt = prompts[prompts.length - 1];
const {
......@@ -71,14 +71,14 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
quotePrompt = []
} = await (async () => {
// 使用了知识库搜索
if (model.chat.relatedKbs?.length > 0) {
if (app.chat.relatedKbs?.length > 0) {
const { quotePrompt, userSystemPrompt, userLimitPrompt } = await appKbSearch({
model,
model: app,
userId,
fixedQuote: [],
prompt: prompt,
similarity: model.chat.searchSimilarity,
limit: model.chat.searchLimit
similarity: app.chat.searchSimilarity,
limit: app.chat.searchLimit
});
return {
......@@ -88,19 +88,19 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
};
}
return {
userSystemPrompt: model.chat.systemPrompt
userSystemPrompt: app.chat.systemPrompt
? [
{
obj: ChatRoleEnum.System,
value: model.chat.systemPrompt
value: app.chat.systemPrompt
}
]
: [],
userLimitPrompt: model.chat.limitPrompt
userLimitPrompt: app.chat.limitPrompt
? [
{
obj: ChatRoleEnum.Human,
value: model.chat.limitPrompt
value: app.chat.limitPrompt
}
]
: []
......@@ -108,8 +108,8 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
})();
// search result is empty
if (model.chat.relatedKbs?.length > 0 && !quotePrompt[0]?.value && model.chat.searchEmptyText) {
const response = model.chat.searchEmptyText;
if (app.chat.relatedKbs?.length > 0 && !quotePrompt[0]?.value && app.chat.searchEmptyText) {
const response = app.chat.searchEmptyText;
return res.end(response);
}
......@@ -123,14 +123,14 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
];
// 计算温度
const temperature = (modelConstantsData.maxTemperature * (model.chat.temperature / 10)).toFixed(
const temperature = (modelConstantsData.maxTemperature * (app.chat.temperature / 10)).toFixed(
2
);
// 发出请求
const { streamResponse, responseMessages, responseText, totalTokens } =
await modelServiceToolMap.chatCompletion({
model: model.chat.chatModel,
model: app.chat.chatModel,
apiKey,
temperature: +temperature,
messages: completePrompts,
......@@ -146,7 +146,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
if (isStream) {
try {
const { finishMessages, totalTokens } = await resStreamResponse({
model: model.chat.chatModel,
model: app.chat.chatModel,
res,
chatResponse: streamResponse,
prompts: responseMessages
......@@ -173,7 +173,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
pushChatBill({
isPay: true,
chatModel: model.chat.chatModel,
chatModel: app.chat.chatModel,
userId,
textLen,
tokens,
......
client/src/pages/api/openapi/kb/appKbSearch.ts
......@@ -4,8 +4,8 @@ import { authUser } from '@/service/utils/auth';
import { PgClient } from '@/service/pg';
import { withNextCors } from '@/service/utils/tools';
import type { ChatItemType } from '@/types/chat';
import type { ModelSchema } from '@/types/mongoSchema';
import { authModel } from '@/service/utils/auth';
import type { AppSchema } from '@/types/mongoSchema';
import { authApp } from '@/service/utils/auth';
import { ChatModelMap } from '@/constants/model';
import { ChatRoleEnum } from '@/constants/chat';
import { openaiEmbedding } from '../plugin/openaiEmbedding';
......@@ -54,13 +54,13 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
}
// auth model
const { model } = await authModel({
modelId: appId,
const { app } = await authApp({
appId,
userId
});
const result = await appKbSearch({
model,
model: app,
userId,
fixedQuote: [],
prompt: prompts[prompts.length - 1],
......@@ -88,7 +88,7 @@ export async function appKbSearch({
similarity = 0.8,
limit = 5
}: {
model: ModelSchema;
model: AppSchema;
userId: string;
fixedQuote?: QuoteItemType[];
prompt: ChatItemType;
......
client/src/pages/api/openapi/modules/agent/classifyQuestion.ts
......@@ -106,7 +106,7 @@ export async function classifyQuestion({
if (!arg.type) {
throw new Error('');
}
console.log(adaptMessages, arg.type);
console.log(arg.type);
return {
[arg.type]: 1
......
client/src/pages/api/openapi/modules/chat/gpt.ts
......@@ -5,9 +5,8 @@ import { sseResponse } from '@/service/utils/tools';
import { ChatModelMap, OpenAiChatEnum } from '@/constants/model';
import { adaptChatItem_openAI } from '@/utils/plugin/openai';
import { modelToolMap } from '@/utils/plugin';
import { ChatCompletionType, ChatContextFilter } from '@/service/utils/chat/index';
import { ChatContextFilter } from '@/service/utils/chat/index';
import type { ChatItemType } from '@/types/chat';
import { getSystemOpenAiKey } from '@/service/utils/auth';
import { ChatRoleEnum, sseResponseEventEnum } from '@/constants/chat';
import { parseStreamChunk, textAdaptGptResponse } from '@/utils/adapt';
import { getOpenAIApi, axiosConfig } from '@/service/ai/openai';
......@@ -23,7 +22,7 @@ export type Props = {
systemPrompt?: string;
limitPrompt?: string;
};
export type Response = { history: ChatItemType[] };
export type Response = { answer: string };
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
......@@ -89,7 +88,7 @@ export async function chatCompletion({
userChatInput,
systemPrompt,
limitPrompt
}: Props & { res: NextApiResponse }) {
}: Props & { res: NextApiResponse }): Promise<Response> {
const messages: ChatItemType[] = [
...(quotePrompt
? [
......@@ -131,7 +130,6 @@ export async function chatCompletion({
const adaptMessages = adaptChatItem_openAI({ messages: filterMessages, reserveId: false });
const chatAPI = getOpenAIApi();
console.log(adaptMessages);
/* count response max token */
const promptsToken = modelToolMap[model].countTokens({
......@@ -156,37 +154,35 @@ export async function chatCompletion({
}
);
const { answer, totalTokens } = await (async () => {
const { answer } = await (async () => {
if (stream) {
// sse response
const { answer } = await streamResponse({ res, response });
// count tokens
const finishMessages = filterMessages.concat({
obj: ChatRoleEnum.AI,
value: answer
});
// const finishMessages = filterMessages.concat({
// obj: ChatRoleEnum.AI,
// value: answer
// });
const totalTokens = modelToolMap[model].countTokens({
messages: finishMessages
});
// const totalTokens = modelToolMap[model].countTokens({
// messages: finishMessages
// });
return {
answer,
totalTokens
answer
// totalTokens
};
} else {
const answer = stream ? '' : response.data.choices?.[0].message?.content || '';
const totalTokens = stream ? 0 : response.data.usage?.total_tokens || 0;
// const totalTokens = stream ? 0 : response.data.usage?.total_tokens || 0;
return {
answer,
totalTokens
answer
// totalTokens
};
}
})();
// count price
const unitPrice = ChatModelMap[model]?.price || 3;
return {
answer
};
......
client/src/pages/api/openapi/modules/init/history.tsx 0 → 100644
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { SystemInputEnum } from '@/constants/app';
import { ChatItemType } from '@/types/chat';
export type Props = {
maxContext: number;
[SystemInputEnum.history]: ChatItemType[];
};
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { maxContext = 5, history } = req.body as Props;
jsonRes(res, {
data: {
history: history.slice(-maxContext)
}
});
}
client/src/pages/api/openapi/modules/init/userChatInput.tsx 0 → 100644
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response';
import { SystemInputEnum } from '@/constants/app';
export type Props = {
[SystemInputEnum.userChatInput]: string;
};
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { userChatInput } = req.body as Props;
jsonRes(res, {
data: {
userChatInput
}
});
}
client/src/pages/api/openapi/modules/kb/search.ts
......@@ -25,7 +25,7 @@ type Props = {
type Response = {
rawSearch: QuoteItemType[];
isEmpty?: boolean;
quotePrompt: string;
quotePrompt?: string;
};
export default withNextCors(async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
......@@ -43,7 +43,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
throw new Error('params is error');
}
const result = await appKbSearch({
const result = await kbSearch({
kb_ids,
history,
similarity,
......@@ -64,7 +64,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
}
});
export async function appKbSearch({
export async function kbSearch({
kb_ids = [],
history = [],
similarity = 0.8,
......@@ -108,8 +108,8 @@ export async function appKbSearch({
const rawSearch = searchRes.slice(0, sliceResult.length);
return {
isEmpty: rawSearch.length === 0,
isEmpty: rawSearch.length === 0 ? true : undefined,
rawSearch,
quotePrompt: sliceResult ? `知识库:\n${sliceResult}` : ''
quotePrompt: sliceResult ? `知识库:\n${sliceResult}` : undefined
};
}
client/src/pages/api/openapi/modules/tools/httpRequest.ts deleted 100644 → 0
export type Props = {
url: string;
body: Record<string, any>;
};
client/src/pages/api/openapi/plugin/openaiEmbedding.ts
......@@ -96,7 +96,7 @@ export async function openaiEmbedding_system({ input }: Props) {
input
},
{
timeout: 60000,
timeout: 20000,
...axiosConfig(apiKey)
}
)
......
client/src/pages/api/openapi/v1/chat/completions.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { connectToDatabase } from '@/service/mongo';
import { authUser, authModel, getApiKey, authShareChat } from '@/service/utils/auth';
import { authUser, authApp, getApiKey, authShareChat } from '@/service/utils/auth';
import { modelServiceToolMap, V2_StreamResponse } from '@/service/utils/chat';
import { jsonRes } from '@/service/response';
import { ChatModelMap } from '@/constants/model';
......@@ -79,9 +79,9 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
}
// auth app permission
const { model, showModelDetail } = await authModel({
const { app, showModelDetail } = await authApp({
userId,
modelId: appId,
appId,
authOwner: false,
reserveDetail: true
});
......@@ -90,7 +90,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
/* get api key */
const { systemAuthKey: apiKey, userOpenAiKey } = await getApiKey({
model: model.chat.chatModel,
model: app.chat.chatModel,
userId,
mustPay: authType !== 'token'
});
......@@ -112,14 +112,14 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
quotePrompt = []
} = await (async () => {
// 使用了知识库搜索
if (model.chat.relatedKbs?.length > 0) {
if (app.chat.relatedKbs?.length > 0) {
const { rawSearch, quotePrompt, userSystemPrompt, userLimitPrompt } = await appKbSearch({
model,
model: app,
userId,
fixedQuote: history[history.length - 1]?.quote,
prompt,
similarity: model.chat.searchSimilarity,
limit: model.chat.searchLimit
similarity: app.chat.searchSimilarity,
limit: app.chat.searchLimit
});
return {
......@@ -130,19 +130,19 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
};
}
return {
userSystemPrompt: model.chat.systemPrompt
userSystemPrompt: app.chat.systemPrompt
? [
{
obj: ChatRoleEnum.System,
value: model.chat.systemPrompt
value: app.chat.systemPrompt
}
]
: [],
userLimitPrompt: model.chat.limitPrompt
userLimitPrompt: app.chat.limitPrompt
? [
{
obj: ChatRoleEnum.Human,
value: model.chat.limitPrompt
value: app.chat.limitPrompt
}
]
: []
......@@ -150,15 +150,15 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
})();
// search result is empty
if (model.chat.relatedKbs?.length > 0 && !quotePrompt[0]?.value && model.chat.searchEmptyText) {
const response = model.chat.searchEmptyText;
if (app.chat.relatedKbs?.length > 0 && !quotePrompt[0]?.value && app.chat.searchEmptyText) {
const response = app.chat.searchEmptyText;
if (stream) {
sseResponse({
res,
event: sseResponseEventEnum.answer,
data: textAdaptGptResponse({
text: response,
model: model.chat.chatModel,
model: app.chat.chatModel,
finish_reason: 'stop'
})
});
......@@ -166,9 +166,9 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
} else {
return res.json({
id: chatId || '',
model: model.chat.chatModel,
object: 'chat.completion',
created: 1688608930,
model: app.chat.chatModel,
usage: { prompt_tokens: 0, completion_tokens: 0, total_tokens: 0 },
choices: [
{ message: { role: 'assistant', content: response }, finish_reason: 'stop', index: 0 }
......@@ -186,9 +186,9 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
prompt
];
// chat temperature
const modelConstantsData = ChatModelMap[model.chat.chatModel];
const modelConstantsData = ChatModelMap[app.chat.chatModel];
// FastGpt temperature range: 1~10
const temperature = (modelConstantsData.maxTemperature * (model.chat.temperature / 10)).toFixed(
const temperature = (modelConstantsData.maxTemperature * (app.chat.temperature / 10)).toFixed(
2
);
......@@ -196,13 +196,13 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
input: `${userSystemPrompt[0]?.value}\n${userLimitPrompt[0]?.value}\n${prompt.value}`
});
// start model api. responseText and totalTokens: valid only if stream = false
// start app api. responseText and totalTokens: valid only if stream = false
const { streamResponse, responseMessages, responseText, totalTokens } =
await modelServiceToolMap.chatCompletion({
model: model.chat.chatModel,
model: app.chat.chatModel,
apiKey: userOpenAiKey || apiKey,
temperature: +temperature,
maxToken: model.chat.maxToken,
maxToken: app.chat.maxToken,
messages: completePrompts,
stream,
res
......@@ -242,7 +242,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
});
// response answer
const { finishMessages, totalTokens, responseContent } = await V2_StreamResponse({
model: model.chat.chatModel,
model: app.chat.chatModel,
res,
chatResponse: streamResponse,
prompts: responseMessages
......@@ -300,7 +300,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
id: chatId || '',
object: 'chat.completion',
created: 1688608930,
model: model.chat.chatModel,
model: app.chat.chatModel,
usage: { prompt_tokens: 0, completion_tokens: 0, total_tokens: tokens },
choices: [
{ message: { role: 'assistant', content: answer }, finish_reason: 'stop', index: 0 }
......@@ -310,7 +310,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
pushChatBill({
isPay: !userOpenAiKey,
chatModel: model.chat.chatModel,
chatModel: app.chat.chatModel,
userId,
textLen,
tokens,
......
client/src/pages/api/openapi/v1/chat/test.ts → client/src/pages/api/openapi/v1/chat/completions2.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { connectToDatabase } from '@/service/mongo';
import { authUser, authModel, getApiKey, authShareChat } from '@/service/utils/auth';
import { authUser, authApp, getApiKey, authShareChat } from '@/service/utils/auth';
import { sseErrRes, jsonRes } from '@/service/response';
import { ChatRoleEnum, sseResponseEventEnum } from '@/constants/chat';
import { withNextCors } from '@/service/utils/tools';
......@@ -13,14 +13,14 @@ import { type ChatCompletionRequestMessage } from 'openai';
import {
kbChatAppDemo,
chatAppDemo,
lafClassifyQuestionDemo,
classifyQuestionDemo,
SpecificInputEnum,
AppModuleItemTypeEnum
} from '@/constants/app';
import { Types } from 'mongoose';
import { model, Types } from 'mongoose';
import { moduleFetch } from '@/service/api/request';
import { AppModuleItemType } from '@/types/app';
import { AppModuleItemType, RunningModuleItemType } from '@/types/app';
import { FlowInputItemTypeEnum, FlowOutputItemTypeEnum } from '@/constants/flow';
import { SystemInputEnum } from '@/constants/app';
export type MessageItemType = ChatCompletionRequestMessage & { _id?: string };
type FastGptWebChatProps = {
......@@ -82,8 +82,15 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
throw new Error('appId is empty');
}
// get history
const { history } = await getChatHistory({ chatId, userId });
// auth app, get history
const [{ app }, { history }] = await Promise.all([
authApp({
appId,
userId
}),
getChatHistory({ chatId, userId })
]);
const prompts = history.concat(gptMessage2ChatType(messages));
if (prompts[prompts.length - 1].obj === 'AI') {
prompts.pop();
......@@ -95,12 +102,15 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
throw new Error('Question is empty');
}
/* start process */
const modules = JSON.parse(JSON.stringify(classifyQuestionDemo.modules));
const newChatId = chatId === '' ? new Types.ObjectId() : undefined;
if (stream && newChatId) {
res.setHeader('newChatId', String(newChatId));
}
/* start process */
const { responseData, answerText } = await dispatchModules({
res,
modules,
modules: app.modules,
params: {
history: prompts,
userChatInput: prompt.value
......@@ -110,8 +120,9 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
// save chat
if (typeof chatId === 'string') {
const { newChatId } = await saveChat({
await saveChat({
chatId,
newChatId,
modelId: appId,
prompts: [
prompt,
......@@ -124,28 +135,26 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
],
userId
});
if (newChatId) {
sseResponse({
res,
event: sseResponseEventEnum.chatResponse,
data: JSON.stringify({
newChatId
})
});
}
}
if (stream) {
sseResponse({
res,
event: sseResponseEventEnum.answer,
data: '[DONE]'
});
sseResponse({
res,
event: sseResponseEventEnum.appStreamResponse,
data: JSON.stringify(responseData)
});
res.end();
} else {
res.json({
data: responseData,
data: {
newChatId,
...responseData
},
id: chatId || '',
model: '',
usage: { prompt_tokens: 0, completion_tokens: 0, total_tokens: 0 },
......@@ -183,6 +192,7 @@ async function dispatchModules({
params?: Record<string, any>;
stream?: boolean;
}) {
const runningModules = loadModules(modules);
let storeData: Record<string, any> = {};
let responseData: Record<string, any> = {};
let answerText = '';
......@@ -212,7 +222,10 @@ async function dispatchModules({
...data
};
}
function moduleInput(module: AppModuleItemType, data: Record<string, any> = {}): Promise<any> {
function moduleInput(
module: RunningModuleItemType,
data: Record<string, any> = {}
): Promise<any> {
const checkInputFinish = () => {
return !module.inputs.find((item: any) => item.value === undefined);
};
......@@ -222,50 +235,58 @@ async function dispatchModules({
module.inputs[index].value = value;
};
const set = new Set();
return Promise.all(
Object.entries(data).map(([key, val]: any) => {
updateInputValue(key, val);
if (checkInputFinish()) {
if (!set.has(module.moduleId) && checkInputFinish()) {
set.add(module.moduleId);
return moduleRun(module);
}
})
);
}
function moduleOutput(module: AppModuleItemType, result: Record<string, any> = {}): Promise<any> {
function moduleOutput(
module: RunningModuleItemType,
result: Record<string, any> = {}
): Promise<any> {
return Promise.all(
module.outputs.map((item) => {
if (result[item.key] === undefined) return;
module.outputs.map((outputItem) => {
if (result[outputItem.key] === undefined) return;
/* update output value */
item.value = result[item.key];
outputItem.value = result[outputItem.key];
pushStore({
isResponse: item.response,
answer: item.answer ? item.value : '',
isResponse: outputItem.response,
answer: outputItem.answer ? outputItem.value : '',
data: {
[item.key]: item.value
[outputItem.key]: outputItem.value
}
});
/* update target */
return Promise.all(
item.targets.map((target: any) => {
outputItem.targets.map((target: any) => {
// find module
const targetModule = modules.find((item) => item.moduleId === target.moduleId);
const targetModule = runningModules.find((item) => item.moduleId === target.moduleId);
if (!targetModule) return;
return moduleInput(targetModule, { [target.key]: item.value });
return moduleInput(targetModule, { [target.key]: outputItem.value });
})
);
})
);
}
async function moduleRun(module: AppModuleItemType): Promise<any> {
async function moduleRun(module: RunningModuleItemType): Promise<any> {
if (res.closed) return Promise.resolve();
console.log('run=========', module.type, module.url);
if (module.type === AppModuleItemTypeEnum.answer) {
pushStore({
answer: module.inputs[0].value
answer: module.inputs.find((item) => item.key === SpecificInputEnum.answerText)?.value || ''
});
return AnswerResponse({
return StreamAnswer({
res,
stream,
text: module.inputs.find((item) => item.key === SpecificInputEnum.answerText)?.value
......@@ -276,16 +297,19 @@ async function dispatchModules({
return moduleOutput(module, switchResponse(module));
}
if (module.type === AppModuleItemTypeEnum.http && module.url) {
if (
(module.type === AppModuleItemTypeEnum.http ||
module.type === AppModuleItemTypeEnum.initInput) &&
module.url
) {
// get fetch params
const inputParams: Record<string, any> = {};
const params: Record<string, any> = {};
module.inputs.forEach((item: any) => {
inputParams[item.key] = item.value;
params[item.key] = item.value;
});
const data = {
stream,
...module.body,
...inputParams
...params
};
// response data
......@@ -299,8 +323,12 @@ async function dispatchModules({
}
}
// 从填充 params 开始进入递归
await Promise.all(modules.map((module) => moduleInput(module, params)));
// start process width initInput
const initModules = runningModules.filter(
(item) => item.type === AppModuleItemTypeEnum.initInput
);
await Promise.all(initModules.map((module) => moduleInput(module, params)));
return {
responseData,
......@@ -308,7 +336,29 @@ async function dispatchModules({
};
}
function AnswerResponse({
function loadModules(modules: AppModuleItemType[]): RunningModuleItemType[] {
return modules.map((module) => {
return {
moduleId: module.moduleId,
type: module.type,
url: module.url,
inputs: module.inputs
.filter((item) => item.type !== FlowInputItemTypeEnum.target || item.connected) // filter unconnected target input
.map((item) => ({
key: item.key,
value: item.value
})),
outputs: module.outputs.map((item) => ({
key: item.key,
answer: item.type === FlowOutputItemTypeEnum.answer,
response: item.response,
value: undefined,
targets: item.targets
}))
};
});
}
function StreamAnswer({
res,
stream = false,
text = ''
......@@ -322,13 +372,13 @@ function AnswerResponse({
res,
event: sseResponseEventEnum.answer,
data: textAdaptGptResponse({
text
text: text.replace(/\\n/g, '\n')
})
});
}
return text;
}
function switchResponse(module: any) {
function switchResponse(module: RunningModuleItemType) {
const val = module?.inputs?.[0]?.value;
if (val) {
......
client/src/pages/app/detail/components/API.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Box, Divider, Flex, useTheme, Button, Skeleton, useDisclosure } from '@chakra-ui/react';
import { useCopyData } from '@/utils/tools';
import dynamic from 'next/dynamic';
import MyIcon from '@/components/Icon';
const APIKeyModal = dynamic(() => import('@/components/APIKeyModal'), {
ssr: false
});
const API = ({ modelId }: { modelId: string }) => {
const theme = useTheme();
const { copyData } = useCopyData();
const [baseUrl, setBaseUrl] = useState('https://fastgpt.run/api/openapi');
const {
isOpen: isOpenAPIModal,
onOpen: onOpenAPIModal,
onClose: onCloseAPIModal
} = useDisclosure();
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
setBaseUrl(`${location.origin}/api/openapi`);
}, []);
return (
<Flex flexDirection={'column'} h={'100%'}>
<Box display={['none', 'flex']} px={5} alignItems={'center'}>
<Box flex={1}>
AppId:
<Box
as={'span'}
ml={2}
fontWeight={'bold'}
cursor={'pointer'}
onClick={() => copyData(modelId, '已复制 AppId')}
>
{modelId}
</Box>
</Box>
<Flex
bg={'myWhite.600'}
py={2}
px={4}
borderRadius={'md'}
cursor={'pointer'}
onClick={() => copyData(baseUrl, '已复制 API 地址')}
>
<Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'sm'}>
API服务器
</Box>
<Box ml={2} color={'myGray.900'} fontSize={['sm', 'md']}>
{baseUrl}
</Box>
</Flex>
<Button
ml={3}
leftIcon={<MyIcon name={'apikey'} w={'16px'} color={''} />}
variant={'base'}
onClick={onOpenAPIModal}
>
API 秘钥
</Button>
</Box>
<Divider mt={3} />
<Box flex={1}>
<Skeleton h="100%" isLoaded={isLoaded} fadeDuration={2}>
<iframe
style={{
width: '100%',
height: '100%'
}}
src="https://kjqvjse66l.feishu.cn/docx/DmLedTWtUoNGX8xui9ocdUEjnNh"
frameBorder="0"
onLoad={() => setIsLoaded(true)}
onError={() => setIsLoaded(true)}
/>
</Skeleton>
</Box>
{isOpenAPIModal && <APIKeyModal onClose={onCloseAPIModal} />}
</Flex>
);
};
export default API;
client/src/pages/app/detail/components/Share.tsx 0 → 100644
import React, { useCallback, useState } from 'react';
import {
Flex,
Box,
Tooltip,
Button,
TableContainer,
Table,
Thead,
Tr,
Th,
Td,
Tbody,
useDisclosure,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
FormControl,
Slider,
SliderTrack,
SliderFilledTrack,
SliderThumb,
SliderMark,
Input
} from '@chakra-ui/react';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import MyIcon from '@/components/Icon';
import { useToast } from '@/hooks/useToast';
import { useLoading } from '@/hooks/useLoading';
import { useQuery } from '@tanstack/react-query';
import { getShareChatList, delShareChatById, createShareChat } from '@/api/chat';
import { formatTimeToChatTime, useCopyData, getErrText } from '@/utils/tools';
import { useForm } from 'react-hook-form';
import { defaultShareChat } from '@/constants/model';
import type { ShareChatEditType } from '@/types/model';
const Share = ({ modelId }: { modelId: string }) => {
const { toast } = useToast();
const { Loading, setIsLoading } = useLoading();
const { copyData } = useCopyData();
const {
isOpen: isOpenCreateShareChat,
onOpen: onOpenCreateShareChat,
onClose: onCloseCreateShareChat
} = useDisclosure();
const {
register: registerShareChat,
getValues: getShareChatValues,
setValue: setShareChatValues,
handleSubmit: submitShareChat,
reset: resetShareChat
} = useForm({
defaultValues: defaultShareChat
});
const [refresh, setRefresh] = useState(false);
const {
isFetching,
data: shareChatList = [],
refetch: refetchShareChatList
} = useQuery(['initShareChatList', modelId], () => getShareChatList(modelId));
const onclickCreateShareChat = useCallback(
async (e: ShareChatEditType) => {
try {
setIsLoading(true);
const id = await createShareChat({
...e,
modelId
});
onCloseCreateShareChat();
refetchShareChatList();
const url = `对话地址为：${location.origin}/chat/share?shareId=${id}
${e.password ? `密码为: ${e.password}` : ''}`;
copyData(url, '已复制分享地址');
resetShareChat(defaultShareChat);
} catch (err) {
toast({
title: getErrText(err, '创建分享链接异常'),
status: 'warning'
});
console.log(err);
}
setIsLoading(false);
},
[
copyData,
modelId,
onCloseCreateShareChat,
refetchShareChatList,
resetShareChat,
setIsLoading,
toast
]
);
// format share used token
const formatTokens = (tokens: number) => {
if (tokens < 10000) return tokens;
return `${(tokens / 10000).toFixed(2)}万`;
};
return (
<Box position={'relative'} px={5} minH={'50vh'}>
<Flex justifyContent={'space-between'}>
<Box fontWeight={'bold'}>
免登录聊天窗口
<Tooltip label="可以直接分享该模型给其他用户去进行对话，对方无需登录即可直接进行对话。注意，这个功能会消耗你账号的tokens。请保管好链接和密码。">
<QuestionOutlineIcon ml={1} />
</Tooltip>
</Box>
<Button
variant={'base'}
colorScheme={'myBlue'}
size={['sm', 'md']}
{...(shareChatList.length >= 10
? {
isDisabled: true,
title: '最多创建10组'
}
: {})}
onClick={onOpenCreateShareChat}
>
创建新窗口
</Button>
</Flex>
<TableContainer mt={3}>
<Table variant={'simple'} w={'100%'} overflowX={'auto'}>
<Thead>
<Tr>
<Th>名称</Th>
<Th>密码</Th>
<Th>最大上下文</Th>
<Th>tokens消耗</Th>
<Th>最后使用时间</Th>
<Th>操作</Th>
</Tr>
</Thead>
<Tbody>
{shareChatList.map((item) => (
<Tr key={item._id}>
<Td>{item.name}</Td>
<Td>{item.password === '1' ? '已开启' : '未使用'}</Td>
<Td>{item.maxContext}</Td>
<Td>{formatTokens(item.tokens)}</Td>
<Td>{item.lastTime ? formatTimeToChatTime(item.lastTime) : '未使用'}</Td>
<Td>
<Flex>
<MyIcon
mr={3}
name="copy"
w={'14px'}
cursor={'pointer'}
_hover={{ color: 'myBlue.600' }}
onClick={() => {
const url = `${location.origin}/chat/share?shareId=${item._id}`;
copyData(url, '已复制分享地址');
}}
/>
<MyIcon
name="delete"
w={'14px'}
cursor={'pointer'}
_hover={{ color: 'red' }}
onClick={async () => {
setIsLoading(true);
try {
await delShareChatById(item._id);
refetchShareChatList();
} catch (error) {
console.log(error);
}
setIsLoading(false);
}}
/>
</Flex>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
{shareChatList.length === 0 && !isFetching && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'10vh'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
没有创建分享链接
</Box>
</Flex>
)}
{/* create shareChat modal */}
<Modal isOpen={isOpenCreateShareChat} onClose={onCloseCreateShareChat}>
<ModalOverlay />
<ModalContent>
<ModalHeader>创建免登录窗口</ModalHeader>
<ModalCloseButton />
<ModalBody>
<FormControl>
<Flex alignItems={'center'}>
<Box flex={'0 0 60px'} w={0}>
名称:
</Box>
<Input
placeholder="记录名字，仅用于展示"
maxLength={20}
{...registerShareChat('name', {
required: '记录名称不能为空'
})}
/>
</Flex>
</FormControl>
<FormControl mt={4}>
<Flex alignItems={'center'}>
<Box flex={'0 0 60px'} w={0}>
密码:
</Box>
<Input placeholder={'不设置密码，可直接访问'} {...registerShareChat('password')} />
</Flex>
<Box fontSize={'xs'} ml={'60px'} color={'myGray.600'}>
密码不会再次展示，请记住你的密码
</Box>
</FormControl>
<FormControl mt={9}>
<Flex alignItems={'center'}>
<Box flex={'0 0 120px'} w={0}>
最长上下文（组）
</Box>
<Slider
aria-label="slider-ex-1"
min={1}
max={20}
step={1}
value={getShareChatValues('maxContext')}
onChange={(e) => {
setShareChatValues('maxContext', e);
setRefresh(!refresh);
}}
>
<SliderMark
value={getShareChatValues('maxContext')}
textAlign="center"
bg="myBlue.600"
color="white"
w={'18px'}
h={'18px'}
borderRadius={'100px'}
fontSize={'xs'}
transform={'translate(-50%, -200%)'}
>
{getShareChatValues('maxContext')}
</SliderMark>
<SliderTrack>
<SliderFilledTrack bg={'myBlue.700'} />
</SliderTrack>
<SliderThumb />
</Slider>
</Flex>
</FormControl>
</ModalBody>
<ModalFooter>
<Button variant={'base'} mr={3} onClick={onCloseCreateShareChat}>
取消
</Button>
<Button onClick={submitShareChat(onclickCreateShareChat)}>确认</Button>
</ModalFooter>
</ModalContent>
</Modal>
<Loading loading={isFetching} fixed={false} />
</Box>
);
};
export default Share;
client/src/pages/app/detail/components/edit/components/NodeAnswer.tsx 0 → 100644
import React from 'react';
import { NodeProps } from 'reactflow';
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';
const NodeAnswer = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard
minW={'400px'}
logo={'/icon/logo.png'}
name={'SSE 响应'}
moduleId={moduleId}
{...props}
>
<Divider text="Input" />
<Container>
<RenderInput moduleId={moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
</Container>
</NodeCard>
);
};
export default React.memo(NodeAnswer);
client/src/pages/app/detail/components/edit/components/NodeChat.tsx 0 → 100644
import React, { useMemo } from 'react';
import { NodeProps } from 'reactflow';
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 { FlowOutputItemTypeEnum } from '@/constants/flow';
const NodeChat = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
const outputsLen = useMemo(
() => outputs.filter((item) => item.type !== FlowOutputItemTypeEnum.hidden).length,
[outputs]
);
return (
<NodeCard minW={'400px'} logo={'/icon/logo.png'} name={'对话'} moduleId={moduleId} {...props}>
<Divider text="Input" />
<Container>
<RenderInput moduleId={moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
</Container>
{outputsLen > 0 && (
<>
<Divider text="Output" />
<Container>
<RenderOutput flowOutputList={outputs} />
</Container>
</>
)}
</NodeCard>
);
};
export default React.memo(NodeChat);
client/src/pages/app/detail/components/edit/components/NodeHistory.tsx 0 → 100644
import React from 'react';
import { NodeProps } from 'reactflow';
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';
const NodeHistory = ({
data: { inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard minW={'300px'} {...props}>
<Divider text="Input" />
<Container>
<RenderInput moduleId={props.moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
</Container>
<Divider text="Output" />
<Container>
<RenderOutput flowOutputList={outputs} />
</Container>
</NodeCard>
);
};
export default React.memo(NodeHistory);
client/src/pages/app/detail/components/edit/components/NodeKbSearch.tsx 0 → 100644
import React from 'react';
import { NodeProps } from 'reactflow';
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';
const NodeKbSearch = ({
data: { moduleId, inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard
minW={'400px'}
logo={'/icon/logo.png'}
name={'知识库搜索'}
moduleId={moduleId}
{...props}
>
<Divider text="Input" />
<Container>
<RenderInput
moduleId={moduleId}
onChangeNode={onChangeNode}
flowInputList={inputs}
CustomComponent={{
kb_ids: ({ key, value, onChangeNode }) => (
<KBSelect
relatedKbs={value}
onChange={(e) => {
onChangeNode({
moduleId,
key,
value: e
});
}}
/>
)
}}
/>
</Container>
<Divider text="Output" />
<Container>
<RenderOutput flowOutputList={outputs} />
</Container>
</NodeCard>
);
};
export default React.memo(NodeKbSearch);
client/src/pages/app/detail/components/edit/components/NodeQuestionInput.tsx 0 → 100644
import React from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { Box } from '@chakra-ui/react';
import NodeCard from './modules/NodeCard';
import { FlowModuleItemType } from '@/types/flow';
import Container from './modules/Container';
import { SystemInputEnum } from '@/constants/app';
const QuestionInputNode = ({
data: { inputs, outputs, onChangeNode, ...props }
}: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard minW={'220px'} {...props}>
<Container borderTop={'2px solid'} borderTopColor={'myGray.200'} textAlign={'end'}>
<Box>用户问题</Box>
<Handle
style={{
bottom: '0',
right: '0',
transform: 'translate(50%,-5px)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={SystemInputEnum.userChatInput}
type="source"
position={Position.Right}
/>
</Container>
</NodeCard>
);
};
export default React.memo(QuestionInputNode);
client/src/pages/app/detail/components/edit/components/NodeTFSwitch.tsx 0 → 100644
import React from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { Flex, Box } from '@chakra-ui/react';
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';
const NodeTFSwitch = ({ data: { inputs, outputs, ...props } }: NodeProps<FlowModuleItemType>) => {
return (
<NodeCard minW={'220px'} logo={'/icon/logo.png'} name={'TF 开关'} {...props}>
<Divider text="输入输出" />
<Container h={'100px'} py={0} px={0} display={'flex'} alignItems={'center'}>
<Box flex={1} pl={'12px'}>
<Label
required
description="接收到 false、0、null、undefined或空字符串时，执行 False，反之执行 True"
>
输入
</Label>
<Handle
style={{
top: '50%',
left: '0',
transform: 'translate(-50%,-50%)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={SystemInputEnum.switch}
type="target"
position={Position.Left}
onConnect={(params) => console.log('input onConnect', params)}
/>
</Box>
<Box flex={1} pr={'12px'}>
<Flex alignItems={'center'} justifyContent={'flex-end'} mb={'26px'} position={'relative'}>
<Label>True</Label>
<Handle
style={{
top: '0',
right: '-12px',
transform: 'translate(50%,5px)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={'true'}
type="source"
position={Position.Right}
onConnect={(params) => console.log('handle onConnect', params)}
/>
</Flex>
<Flex alignItems={'center'} justifyContent={'flex-end'} position={'relative'}>
<Label>False</Label>
<Handle
style={{
bottom: '0',
right: '-12px',
transform: 'translate(50%,-5px)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={'false'}
type="source"
position={Position.Right}
onConnect={(params) => console.log('handle onConnect', params)}
/>
</Flex>
</Box>
</Container>
</NodeCard>
);
};
export default React.memo(NodeTFSwitch);
client/src/pages/app/detail/components/edit/components/Plugins/KBSelect.tsx 0 → 100644
import React, { useState, useEffect, useMemo } from 'react';
import {
Card,
Flex,
Box,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
ModalHeader,
ModalFooter,
ModalCloseButton,
useTheme,
useDisclosure,
Grid
} from '@chakra-ui/react';
import { useUserStore } from '@/store/user';
import Avatar from '@/components/Avatar';
const KBSelect = ({
relatedKbs = [],
onChange
}: {
relatedKbs: string[];
onChange: (e: string[]) => void;
}) => {
const theme = useTheme();
const { myKbList, loadKbList } = useUserStore();
const [selectedIdList, setSelectedIdList] = useState<string[]>(relatedKbs);
const {
isOpen: isOpenKbSelect,
onOpen: onOpenKbSelect,
onClose: onCloseKbSelect
} = useDisclosure();
const showKbList = useMemo(
() => myKbList.filter((item) => relatedKbs.includes(item._id)),
[myKbList, relatedKbs]
);
useEffect(() => {
loadKbList();
}, []);
return (
<>
<Grid gridTemplateColumns={'1fr 1fr'} gridGap={4}>
<Button h={'36px'} onClick={onOpenKbSelect}>
选择知识库
</Button>
{showKbList.map((item) => (
<Flex
key={item._id}
alignItems={'center'}
h={'36px'}
border={theme.borders.base}
px={2}
borderRadius={'md'}
>
<Avatar src={item.avatar} w={'24px'}></Avatar>
<Box ml={3} fontWeight={'bold'} fontSize={['md', 'lg', 'xl']}>
{item.name}
</Box>
</Flex>
))}
</Grid>
<Modal isOpen={isOpenKbSelect} onClose={onCloseKbSelect}>
<ModalOverlay />
<ModalContent
display={'flex'}
flexDirection={'column'}
w={'800px'}
maxW={'90vw'}
h={['90vh', 'auto']}
>
<ModalHeader>关联的知识库({selectedIdList.length})</ModalHeader>
<ModalCloseButton />
<ModalBody
flex={['1 0 0', '0 0 auto']}
maxH={'80vh'}
overflowY={'auto'}
display={'grid'}
gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']}
gridGap={3}
>
{myKbList.map((item) => (
<Card
key={item._id}
p={3}
border={theme.borders.base}
boxShadow={'sm'}
h={'80px'}
cursor={'pointer'}
order={relatedKbs.includes(item._id) ? 0 : 1}
_hover={{
boxShadow: 'md'
}}
{...(selectedIdList.includes(item._id)
? {
bg: 'myBlue.300'
}
: {})}
onClick={() => {
let ids = [...selectedIdList];
if (!selectedIdList.includes(item._id)) {
ids = ids.concat(item._id);
} else {
const i = ids.findIndex((id) => id === item._id);
ids.splice(i, 1);
}
ids = ids.filter((id) => myKbList.find((item) => item._id === id));
setSelectedIdList(ids);
}}
>
<Flex alignItems={'center'} h={'38px'}>
<Avatar src={item.avatar} w={['24px', '28px', '32px']}></Avatar>
<Box ml={3} fontWeight={'bold'} fontSize={['md', 'lg', 'xl']}>
{item.name}
</Box>
</Flex>
</Card>
))}
</ModalBody>
<ModalFooter>
<Button
onClick={() => {
onCloseKbSelect();
onChange(selectedIdList);
}}
>
完成
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};
export default KBSelect;
client/src/pages/app/detail/components/edit/components/TemplateList.tsx 0 → 100644
import React from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { ModuleTemplates } from '@/constants/flow/ModuleTemplate';
import type { AppModuleTemplateItemType } from '@/types/app';
import type { XYPosition } from 'reactflow';
import Avatar from '@/components/Avatar';
const ModuleStoreList = ({
isOpen,
onAddNode
}: {
isOpen: boolean;
onAddNode: (e: { template: AppModuleTemplateItemType; position: XYPosition }) => void;
}) => {
return (
<Flex
flexDirection={'column'}
position={'absolute'}
top={'65px'}
left={0}
h={isOpen ? '90%' : '0'}
w={isOpen ? '360px' : '0'}
bg={'white'}
zIndex={1}
boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
borderRadius={'20px'}
overflow={'hidden'}
transition={'.2s ease'}
px={'15px'}
userSelect={'none'}
>
<Box w={'330px'} py={4} fontSize={'xl'} fontWeight={'bold'}>
添加模块
</Box>
<Box w={'330px'} flex={'1 0 0'} overflow={'overlay'}>
{ModuleTemplates.map((item) =>
item.list.map((item) => (
<Flex
key={item.name}
alignItems={'center'}
p={5}
cursor={'pointer'}
_hover={{ bg: 'myWhite.600' }}
borderRadius={'md'}
draggable
onDragEnd={(e) => {
if (e.clientX < 400) return;
onAddNode({
template: item,
position: { x: e.clientX, y: e.clientY }
});
}}
>
<Avatar src={item.logo} w={'34px'} />
<Box ml={5} flex={'1 0 0'}>
<Box color={'black'}>{item.name}</Box>
<Box color={'myGray.500'} fontSize={'sm'}>
{item.intro}
</Box>
</Box>
</Flex>
))
)}
</Box>
</Flex>
);
};
export default ModuleStoreList;
client/src/pages/app/detail/components/edit/components/modules/ButtonEdge.tsx 0 → 100644
import React from 'react';
import { BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath } from 'reactflow';
import { Flex } from '@chakra-ui/react';
import MyIcon from '@/components/Icon';
export default function ButtonEdge({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
style = {},
markerEnd,
data
}: EdgeProps<{
onDelete: (id: string) => void;
}>) {
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition
});
return (
<>
<BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
<EdgeLabelRenderer>
<Flex
alignItems={'center'}
justifyContent={'center'}
position={'absolute'}
transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
pointerEvents={'all'}
w={'20px'}
h={'20px'}
bg={'white'}
borderRadius={'20px'}
color={'black'}
cursor={'pointer'}
border={'1px solid #fff'}
_hover={{
boxShadow: '0 0 6px 2px rgba(0, 0, 0, 0.08)'
}}
onClick={() => data?.onDelete(id)}
>
<MyIcon name="closeSolid" w={'100%'} color={'myGray.600'}></MyIcon>
</Flex>
</EdgeLabelRenderer>
</>
);
}
client/src/pages/app/detail/components/edit/components/modules/Container.tsx 0 → 100644
import React from 'react';
import { Box } from '@chakra-ui/react';
import { BoxProps } from '@chakra-ui/react';
const Container = ({ children, ...props }: BoxProps) => {
return (
<Box px={4} py={3} position={'relative'} {...props}>
{children}
</Box>
);
};
export default Container;
client/src/pages/app/detail/components/edit/components/modules/Divider.tsx 0 → 100644
import React from 'react';
import { Box, useTheme } from '@chakra-ui/react';
const Divider = ({ text }: { text: 'Body' | 'Input' | 'Output' | string }) => {
const theme = useTheme();
return (
<Box
textAlign={'center'}
bg={'#f8f8f8'}
py={2}
borderTop={theme.borders.base}
borderBottom={theme.borders.base}
fontSize={'lg'}
>
{text}
</Box>
);
};
export default Divider;
client/src/pages/app/detail/components/edit/components/modules/Label.tsx 0 → 100644
import React from 'react';
import { Box, Tooltip } from '@chakra-ui/react';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
const Label = ({
required = false,
children,
description
}: {
required?: boolean;
children: React.ReactNode | string;
description?: string;
}) => (
<Box as={'label'} display={'inline-block'} position={'relative'}>
{children}
{required && (
<Box position={'absolute'} top={'-2px'} right={'-10px'} color={'red.500'} fontWeight={'bold'}>
*
</Box>
)}
{description && (
<Tooltip label={description}>
<QuestionOutlineIcon display={['none', 'inline']} fontSize={'12px'} mb={1} ml={1} />
</Tooltip>
)}
</Box>
);
export default Label;
client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx 0 → 100644
import React from 'react';
import { Box, Flex, useTheme } from '@chakra-ui/react';
import MyIcon from '@/components/Icon';
import Avatar from '@/components/Avatar';
import type { FlowModuleItemType } from '@/types/flow';
type Props = {
children: React.ReactNode | React.ReactNode[] | string;
logo?: string;
name?: string;
intro?: string;
minW?: string | number;
moduleId: string;
onDelNode: FlowModuleItemType['onDelNode'];
};
const NodeCard = ({
children,
logo = '/icon/logo.png',
name = '未知模块',
minW = '300px',
onDelNode,
moduleId
}: Props) => {
const theme = useTheme();
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'} />
<Box ml={3} flex={1} fontSize={'lg'} color={'myGray.600'}>
{name}
</Box>
<MyIcon
className={'nodrag'}
name="delete"
cursor={'pointer'}
color={'myGray.600'}
w={'16px'}
_hover={{ color: 'red.600' }}
onClick={() => onDelNode(moduleId)}
/>
</Flex>
{children}
</Box>
);
};
export default React.memo(NodeCard);
client/src/pages/app/detail/components/edit/components/render/RenderInput.tsx 0 → 100644
import React from 'react';
import type { FlowInputItemType, FlowModuleItemType } from '@/types/flow';
import {
Box,
Textarea,
Input,
Tooltip,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper
} from '@chakra-ui/react';
import { FlowInputItemTypeEnum } from '@/constants/flow';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { Handle, Position } from 'reactflow';
import MySelect from '@/components/Select';
import MySlider from '@/components/Slider';
const Label = ({
required = false,
children,
description
}: {
required?: boolean;
children: React.ReactNode | string;
description?: string;
}) => (
<Box as={'label'} display={'inline-block'} position={'relative'}>
{children}
{required && (
<Box position={'absolute'} top={'-2px'} right={'-10px'} color={'red.500'} fontWeight={'bold'}>
*
</Box>
)}
{description && (
<Tooltip label={description}>
<QuestionOutlineIcon display={['none', 'inline']} ml={1} />
</Tooltip>
)}
</Box>
);
const RenderBody = ({
flowInputList,
moduleId,
CustomComponent = {},
onChangeNode
}: {
flowInputList: FlowInputItemType[];
moduleId: string;
CustomComponent?: Record<
string,
(e: {
key: string;
value: any;
onChangeNode: FlowModuleItemType['onChangeNode'];
}) => React.ReactNode
>;
onChangeNode: FlowModuleItemType['onChangeNode'];
}) => {
return (
<>
{flowInputList.map(
(item) =>
item.type !== FlowInputItemTypeEnum.hidden && (
<Box key={item.key} _notLast={{ mb: 7 }} position={'relative'}>
<Label required={item.required} description={item.description}>
{item.label}
</Label>
<Box mt={2} className={'nodrag'}>
{item.type === FlowInputItemTypeEnum.numberInput && (
<NumberInput
defaultValue={item.value}
min={item.min}
max={item.max}
onChange={(e) => {
onChangeNode({
moduleId,
key: item.key,
value: Number(e)
});
}}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
)}
{item.type === FlowInputItemTypeEnum.input && (
<Input
placeholder={item.placeholder}
defaultValue={item.value}
onChange={(e) => {
onChangeNode({
moduleId,
key: item.key,
value: e.target.value
});
}}
/>
)}
{item.type === FlowInputItemTypeEnum.textarea && (
<Textarea
rows={5}
placeholder={item.placeholder}
resize={'both'}
defaultValue={item.value}
onChange={(e) => {
onChangeNode({
moduleId,
key: item.key,
value: e.target.value
});
}}
/>
)}
{item.type === FlowInputItemTypeEnum.select && (
<MySelect
width={'100%'}
value={item.value}
list={item.list || []}
onchange={(e) => {
onChangeNode({
moduleId,
key: item.key,
value: e
});
}}
/>
)}
{item.type === FlowInputItemTypeEnum.slider && (
<Box pt={5} pb={4} px={2}>
<MySlider
markList={item.markList}
width={'100%'}
min={item.min || 0}
max={item.max}
step={item.step || 1}
value={item.value}
onChange={(e) => {
onChangeNode({
moduleId,
key: item.key,
value: e
});
}}
/>
</Box>
)}
{item.type === FlowInputItemTypeEnum.custom && CustomComponent[item.key] && (
<>
{CustomComponent[item.key]({ key: item.key, value: item.value, onChangeNode })}
</>
)}
{item.type === FlowInputItemTypeEnum.target && (
<Handle
style={{
top: '50%',
left: '-14px',
transform: 'translate(-50%,-50%)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
id={item.key}
type="target"
position={Position.Left}
onConnect={(params) => console.log('handle onConnect', params)}
/>
)}
</Box>
</Box>
)
)}
</>
);
};
export default React.memo(RenderBody);
client/src/pages/app/detail/components/edit/components/render/RenderOutput.tsx 0 → 100644
import React from 'react';
import type { FlowOutputItemType } from '@/types/flow';
import { Box, Tooltip, Flex } from '@chakra-ui/react';
import { FlowOutputItemTypeEnum } from '@/constants/flow';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { Handle, Position } from 'reactflow';
const Label = ({
children,
description
}: {
children: React.ReactNode | string;
description?: string;
}) => (
<Flex as={'label'} justifyContent={'right'} alignItems={'center'} position={'relative'}>
{description && (
<Tooltip label={description}>
<QuestionOutlineIcon display={['none', 'inline']} mr={1} />
</Tooltip>
)}
{children}
</Flex>
);
const RenderBody = ({ flowOutputList }: { flowOutputList: FlowOutputItemType[] }) => {
return (
<>
{flowOutputList.map(
(item) =>
item.type !== FlowOutputItemTypeEnum.hidden && (
<Box key={item.key} _notLast={{ mb: 7 }} position={'relative'}>
<Label description={item.description}>{item.label}</Label>
<Box mt={FlowOutputItemTypeEnum.answer ? 0 : 2} className={'nodrag'}>
{item.type === FlowOutputItemTypeEnum.source && (
<Handle
style={{
top: '50%',
right: '-14px',
transform: 'translate(50%,-50%)',
width: '12px',
height: '12px',
background: '#9CA2A8'
}}
type="source"
id={item.key}
position={Position.Right}
/>
)}
</Box>
</Box>
)
)}
</>
);
};
export default React.memo(RenderBody);
client/src/pages/app/detail/components/edit/index.module.scss 0 → 100644
.panel {
.react-flow__panel {
display: none;
}
}
client/src/pages/app/detail/components/edit/index.tsx 0 → 100644
import React, { useCallback, useEffect } from 'react';
import ReactFlow, {
Background,
Controls,
ReactFlowProvider,
addEdge,
useNodesState,
useEdgesState,
XYPosition,
Connection
} from 'reactflow';
import { Box, Flex, IconButton, useTheme, useDisclosure } from '@chakra-ui/react';
import { SmallCloseIcon } from '@chakra-ui/icons';
import { edgeOptions, connectionLineStyle, FlowModuleTypeEnum } from '@/constants/flow';
import { appModule2FlowNode, appModule2FlowEdge } from '@/utils/adapt';
import {
FlowModuleItemType,
FlowOutputTargetItemType,
type FlowModuleItemChangeProps
} from '@/types/flow';
import { customAlphabet } from 'nanoid';
import { putAppById } from '@/api/app';
import { useRequest } from '@/hooks/useRequest';
import type { AppSchema } from '@/types/mongoSchema';
import dynamic from 'next/dynamic';
import MyIcon from '@/components/Icon';
import ButtonEdge from './components/modules/ButtonEdge';
const NodeChat = dynamic(() => import('./components/NodeChat'), {
ssr: false
});
const NodeKbSearch = dynamic(() => import('./components/NodeKbSearch'), {
ssr: false
});
const NodeHistory = dynamic(() => import('./components/NodeHistory'), {
ssr: false
});
const NodeTFSwitch = dynamic(() => import('./components/NodeTFSwitch'), {
ssr: false
});
const NodeAnswer = dynamic(() => import('./components/NodeAnswer'), {
ssr: false
});
const NodeQuestionInput = dynamic(() => import('./components/NodeQuestionInput'), {
ssr: false
});
const TemplateList = dynamic(() => import('./components/TemplateList'), {
ssr: false
});
import 'reactflow/dist/style.css';
import styles from './index.module.scss';
import { AppModuleTemplateItemType } from '@/types/app';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
const nodeTypes = {
[FlowModuleTypeEnum.questionInputNode]: NodeQuestionInput,
[FlowModuleTypeEnum.historyNode]: NodeHistory,
[FlowModuleTypeEnum.chatNode]: NodeChat,
[FlowModuleTypeEnum.kbSearchNode]: NodeKbSearch,
[FlowModuleTypeEnum.tfSwitchNode]: NodeTFSwitch,
[FlowModuleTypeEnum.answerNode]: NodeAnswer
};
const edgeTypes = {
buttonedge: ButtonEdge
};
const AppEdit = ({ app, onBack }: { app: AppSchema; onBack: () => void }) => {
const theme = useTheme();
const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const {
isOpen: isOpenTemplate,
onOpen: onOpenTemplate,
onClose: onCloseTemplate
} = useDisclosure();
const onChangeNode = useCallback(
({ moduleId, key, value, valueKey = 'value' }: FlowModuleItemChangeProps) => {
setNodes((nodes) =>
nodes.map((node) => {
if (node.id !== moduleId) return node;
return {
...node,
data: {
...node.data,
inputs: node.data.inputs.map((item) => {
if (item.key === key) {
return {
...item,
[valueKey]: value
};
}
return item;
})
}
};
})
);
},
[setNodes]
);
const onDelNode = useCallback(
(nodeId: string) => {
setNodes((state) => state.filter((item) => item.id !== nodeId));
setEdges((state) => state.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
},
[setEdges, setNodes]
);
const onAddNode = useCallback(
({ template, position }: { template: AppModuleTemplateItemType; position: XYPosition }) => {
setNodes((state) =>
state.concat(
appModule2FlowNode({
item: {
...template,
position,
moduleId: nanoid()
},
onChangeNode,
onDelNode
})
)
);
},
[onChangeNode, onDelNode, setNodes]
);
const onDelConnect = useCallback(
(id: string) => {
setEdges((state) => state.filter((item) => item.id !== id));
},
[setEdges]
);
const onConnect = useCallback(
({ connect }: { connect: Connection }) => {
setEdges((state) =>
addEdge(
{
...connect,
type: 'buttonedge',
animated: true,
data: {
onDelete: onDelConnect
}
},
state
)
);
},
[onDelConnect, setEdges]
);
const { mutate: onclickSave, isLoading } = useRequest({
mutationFn: () => {
const modules = nodes.map((item) => ({
...item.data,
position: item.position,
onChangeNode: undefined,
onDelNode: undefined,
outputs: item.data.outputs.map((output) => ({
...output,
targets: [] as FlowOutputTargetItemType[]
}))
}));
// update inputs and outputs
modules.forEach((module) => {
module.inputs.forEach((input) => {
input.connected = !!edges.find(
(edge) => edge.target === module.moduleId && edge.targetHandle === input.key
);
});
module.outputs.forEach((output) => {
output.targets = edges
.filter(
(edge) =>
edge.source === module.moduleId &&
edge.sourceHandle === output.key &&
edge.targetHandle
)
.map((edge) => ({
moduleId: edge.target,
key: edge.targetHandle || ''
}));
});
});
return putAppById(app._id, {
modules
});
},
successToast: '保存配置成功',
errorToast: '保存配置异常'
});
const initData = useCallback(
(app: AppSchema) => {
console.log('init');
const edges = appModule2FlowEdge({
modules: app.modules,
onDelete: onDelConnect
});
setEdges(edges);
setNodes(
app.modules.map((item) =>
appModule2FlowNode({
item,
onChangeNode,
onDelNode
})
)
);
},
[onDelConnect, setEdges, setNodes, onChangeNode, onDelNode]
);
useEffect(() => {
initData(JSON.parse(JSON.stringify(app)));
}, [app]);
return (
<Flex h={'100%'} flexDirection={'column'} bg={'#fff'}>
<Flex py={3} px={5} borderBottom={theme.borders.base} alignItems={'center'}>
<IconButton
size={'sm'}
icon={<MyIcon name={'back'} w={'14px'} />}
w={'28px'}
h={'28px'}
borderRadius={'md'}
borderColor={'myGray.300'}
variant={'base'}
aria-label={''}
onClick={onBack}
/>
<Box ml={5} fontSize={'xl'} flex={1}>
{app.name}
</Box>
<IconButton
icon={<MyIcon name={'save'} w={'16px'} />}
borderRadius={'lg'}
isLoading={isLoading}
aria-label={'save'}
onClick={onclickSave}
/>
</Flex>
<Box
flex={'1 0 0'}
w={'100%'}
h={0}
position={'relative'}
onContextMenu={(e) => {
e.preventDefault();
return false;
}}
>
<IconButton
position={'absolute'}
top={5}
left={5}
w={'38px'}
h={'38px'}
borderRadius={'50%'}
icon={<SmallCloseIcon fontSize={'26px'} />}
transform={isOpenTemplate ? '' : 'rotate(135deg)'}
transition={'0.2s ease'}
aria-label={''}
zIndex={1}
boxShadow={'1px 1px 6px #4e83fd'}
onClick={() => (isOpenTemplate ? onCloseTemplate() : onOpenTemplate())}
/>
<ReactFlowProvider>
<ReactFlow
className={styles.panel}
nodes={nodes}
edges={edges}
minZoom={0.4}
maxZoom={1.5}
fitView
defaultEdgeOptions={edgeOptions}
connectionLineStyle={connectionLineStyle}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={(connect) => {
connect.sourceHandle &&
connect.targetHandle &&
onConnect({
connect
});
}}
>
<Background />
<Controls
position={'bottom-center'}
style={{ display: 'flex' }}
showInteractive={false}
/>
</ReactFlow>
</ReactFlowProvider>
<TemplateList isOpen={isOpenTemplate} onAddNode={onAddNode} />
</Box>
</Flex>
);
};
export default AppEdit;
client/src/pages/app/detail/index.tsx 0 → 100644
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useRouter } from 'next/router';
import { Box, Flex } from '@chakra-ui/react';
import { useUserStore } from '@/store/user';
import { useGlobalStore } from '@/store/global';
import dynamic from 'next/dynamic';
import Tabs from '@/components/Tabs';
import Settings from './components/Settings';
import { defaultApp } from '@/constants/model';
const EditApp = dynamic(() => import('./components/edit'), {
ssr: false
});
const Share = dynamic(() => import('./components/Share'), {
ssr: false
});
const API = dynamic(() => import('./components/API'), {
ssr: false
});
enum TabEnum {
'settings' = 'settings',
'edit' = 'edit',
'share' = 'share',
'API' = 'API'
}
const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const router = useRouter();
const { appId } = router.query as { appId: string };
const { isPc } = useGlobalStore();
const { appDetail = defaultApp, loadAppDetail, userInfo } = useUserStore();
const isOwner = useMemo(
() => appDetail.userId === userInfo?._id,
[appDetail.userId, userInfo?._id]
);
const setCurrentTab = useCallback(
(tab: `${TabEnum}`) => {
router.replace({
pathname: router.pathname,
query: {
appId,
currentTab: tab
}
});
},
[appId, router]
);
useEffect(() => {
window.onbeforeunload = (e) => {
e.preventDefault();
e.returnValue = '内容已修改，确认离开页面吗？';
};
return () => {
window.onbeforeunload = null;
};
}, []);
useEffect(() => {
loadAppDetail(appId);
}, [appId, loadAppDetail]);
return (
<Flex
flexDirection={'column'}
h={'100%'}
maxW={'100vw'}
pt={4}
overflow={'overlay'}
position={'relative'}
bg={'white'}
>
{/* 头部 */}
<Box textAlign={['center', 'left']} px={5} mb={4}>
<Box className="textlg" display={['block', 'none']} fontSize={'3xl'} fontWeight={'bold'}>
{appDetail.name}
</Box>
<Tabs
mx={['auto', '0']}
mt={2}
w={['300px', '360px']}
list={[
{ label: '配置', id: TabEnum.settings },
...(isOwner ? [{ label: '编排', id: TabEnum.edit }] : []),
{ label: '分享', id: TabEnum.share },
{ label: 'API', id: TabEnum.API },
{ label: '立即对话', id: 'startChat' }
]}
size={isPc ? 'md' : 'sm'}
activeId={currentTab}
onChange={(e: any) => {
if (e === 'startChat') {
router.push(`/chat?modelId=${appId}`);
} else {
setCurrentTab(e);
}
}}
/>
</Box>
<Box flex={1}>
{currentTab === TabEnum.settings && <Settings modelId={appId} />}
{currentTab === TabEnum.edit && (
<Box position={'fixed'} zIndex={999} top={0} left={0} right={0} bottom={0}>
<EditApp app={appDetail} onBack={() => setCurrentTab(TabEnum.settings)} />
</Box>
)}
{currentTab === TabEnum.API && <API modelId={appId} />}
{currentTab === TabEnum.share && <Share modelId={appId} />}
</Box>
</Flex>
);
};
export async function getServerSideProps(context: any) {
const currentTab = context?.query?.currentTab || TabEnum.settings;
return {
props: { currentTab }
};
}
export default AppDetail;
client/src/pages/app/list/index.tsx 0 → 100644
import React from 'react';
import { Box, useTheme } from '@chakra-ui/react';
import { useRouter } from 'next/router';
const MyApps = () => {
const theme = useTheme();
const router = useRouter();
return (
<Box>
<Box
className="textlg"
borderBottom={theme.borders.base}
letterSpacing={1}
py={3}
px={5}
fontSize={'24px'}
fontWeight={'bold'}
onClick={() => router.push(`/app/detail?appId=642adec15f01d67d4613efdb`)}
>
我的应用
</Box>
</Box>
);
};
export default MyApps;
client/src/pages/chat/components/History.tsx
......@@ -54,11 +54,8 @@ const PcSliderBar = ({
}>();
const { history, loadHistory } = useChatStore();
const { myModels, myCollectionModels, loadMyModels } = useUserStore();
const models = useMemo(
() => [...myModels, ...myCollectionModels],
[myCollectionModels, myModels]
);
const { myApps, myCollectionApps, loadMyModels } = useUserStore();
const models = useMemo(() => [...myApps, ...myCollectionApps], [myCollectionApps, myApps]);
// custom title edit
const { onOpenModal, EditModal: EditTitleModal } = useEditInfo({
......
client/src/pages/chat/components/PhoneSliderBar.tsx
......@@ -35,13 +35,10 @@ const PhoneSliderBar = ({
}) => {
const router = useRouter();
const [currentTab, setCurrentTab] = useState(TabEnum.app);
const { myModels, myCollectionModels, loadMyModels } = useUserStore();
const { myApps, myCollectionApps, loadMyModels } = useUserStore();
const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
const models = useMemo(
() => [...myModels, ...myCollectionModels],
[myCollectionModels, myModels]
);
const models = useMemo(() => [...myApps, ...myCollectionApps], [myCollectionApps, myApps]);
useQuery(['loadModels'], () => loadMyModels(false));
const { history, loadHistory } = useChatStore();
......
client/src/pages/chat/index.tsx
......@@ -175,7 +175,7 @@ const Chat = () => {
const messages = adaptChatItem_openAI({ messages: prompts, reserveId: true });
// 流请求，获取数据
const { newChatId, quoteLen, errMsg } = await streamFetch({
const { newChatId, errMsg } = await streamFetch({
data: {
messages,
chatId,
......@@ -203,6 +203,7 @@ const Chat = () => {
return;
}
// save chat
if (newChatId) {
setForbidLoadChatData(true);
router.replace(`/chat?modelId=${modelId}&chatId=${newChatId}`);
......@@ -219,7 +220,7 @@ const Chat = () => {
return {
...item,
status: 'finish',
quoteLen,
quoteLen: 0,
systemPrompt: `${chatData.systemPrompt}${`${
chatData.limitPrompt ? `\n\n${chatData.limitPrompt}` : ''
}`}`
......
client/src/pages/kb/components/SelectFileModal.tsx
......@@ -270,8 +270,8 @@ const SelectFileModal = ({
min={300}
max={1000}
step={50}
activeVal={modeMap[TrainingModeEnum.index].maxLen}
setVal={(val) => {
value={modeMap[TrainingModeEnum.index].maxLen}
onChange={(val) => {
setModeMap((state) => ({
...state,
[TrainingModeEnum.index]: {
......
client/src/pages/login/components/RegisterForm.tsx
......@@ -7,7 +7,7 @@ import { useSendCode } from '@/hooks/useSendCode';
import type { ResLogin } from '@/api/response/user';
import { useToast } from '@/hooks/useToast';
import { useRouter } from 'next/router';
import { postCreateModel } from '@/api/model';
import { postCreateModel } from '@/api/app';
interface Props {
loginSuccess: (e: ResLogin) => void;
......
client/src/pages/model/components/ModelList.tsx
......@@ -3,7 +3,7 @@ import { Box, Flex, Input, IconButton, Tooltip, useTheme } from '@chakra-ui/reac
import { AddIcon } from '@chakra-ui/icons';
import { useRouter } from 'next/router';
import MyIcon from '@/components/Icon';
import { postCreateModel } from '@/api/model';
import { postCreateModel } from '@/api/app';
import { useLoading } from '@/hooks/useLoading';
import { useToast } from '@/hooks/useToast';
import { useQuery } from '@tanstack/react-query';
......@@ -25,7 +25,7 @@ const ModelList = ({ modelId }: { modelId: string }) => {
const router = useRouter();
const { toast } = useToast();
const { Loading, setIsLoading } = useLoading();
const { myModels, myCollectionModels, loadMyModels, refreshModel } = useUserStore();
const { myApps, myCollectionApps, loadMyModels, refreshModel } = useUserStore();
const [searchText, setSearchText] = useState('');
/* 加载模型 */
......@@ -35,7 +35,7 @@ const ModelList = ({ modelId }: { modelId: string }) => {
setIsLoading(true);
try {
const id = await postCreateModel({
name: `AI应用${myModels.length + 1}`
name: `AI应用${myApps.length + 1}`
});
toast({
title: '创建成功',
......@@ -50,23 +50,23 @@ const ModelList = ({ modelId }: { modelId: string }) => {
});
}
setIsLoading(false);
}, [myModels.length, refreshModel, router, setIsLoading, toast]);
}, [myApps.length, refreshModel, router, setIsLoading, toast]);
const currentModels = useMemo(() => {
const map = {
[MyModelsTypeEnum.my]: {
list: myModels.filter((item) => new RegExp(searchText, 'ig').test(item.name + item.intro)),
list: myApps.filter((item) => new RegExp(searchText, 'ig').test(item.name + item.intro)),
emptyText: '还没有 AI 应用~\n快来创建一个吧'
},
[MyModelsTypeEnum.collection]: {
list: myCollectionModels.filter((item) =>
list: myCollectionApps.filter((item) =>
new RegExp(searchText, 'ig').test(item.name + item.intro)
),
emptyText: '收藏的 AI 应用为空~\n快去市场找一个吧'
}
};
return map[currentTab];
}, [currentTab, myCollectionModels, myModels, searchText]);
}, [currentTab, myCollectionApps, myApps, searchText]);
return (
<Flex
......
client/src/pages/model/components/detail/components/Kb.tsx
......@@ -23,7 +23,7 @@ import { useUserStore } from '@/store/user';
import { useQuery } from '@tanstack/react-query';
import Avatar from '@/components/Avatar';
import { AddIcon, DeleteIcon, QuestionOutlineIcon } from '@chakra-ui/icons';
import { putModelById } from '@/api/model';
import { putAppById } from '@/api/app';
import { useToast } from '@/hooks/useToast';
import { useLoading } from '@/hooks/useLoading';
import { useForm } from 'react-hook-form';
......@@ -34,15 +34,15 @@ const Kb = ({ modelId }: { modelId: string }) => {
const theme = useTheme();
const router = useRouter();
const { toast } = useToast();
const { modelDetail, loadKbList, loadModelDetail } = useUserStore();
const { appDetail, loadKbList, loadAppDetail } = useUserStore();
const { Loading, setIsLoading } = useLoading();
const [selectedIdList, setSelectedIdList] = useState<string[]>([]);
const [refresh, setRefresh] = useState(false);
const { register, reset, getValues, setValue } = useForm({
defaultValues: {
searchSimilarity: modelDetail.chat.searchSimilarity,
searchLimit: modelDetail.chat.searchLimit,
searchEmptyText: modelDetail.chat.searchEmptyText
searchSimilarity: appDetail.chat.searchSimilarity,
searchLimit: appDetail.chat.searchLimit,
searchEmptyText: appDetail.chat.searchEmptyText
}
});
......@@ -68,13 +68,13 @@ const Kb = ({ modelId }: { modelId: string }) => {
) => {
setIsLoading(true);
try {
await putModelById(modelId, {
await putAppById(modelId, {
chat: {
...modelDetail.chat,
...appDetail.chat,
...data
}
});
loadModelDetail(modelId, true);
loadAppDetail(modelId, true);
} catch (err: any) {
toast({
title: err?.message || '更新失败',
......@@ -83,7 +83,7 @@ const Kb = ({ modelId }: { modelId: string }) => {
}
setIsLoading(false);
},
[setIsLoading, modelId, modelDetail.chat, loadModelDetail, toast]
[setIsLoading, modelId, appDetail.chat, loadAppDetail, toast]
);
// init kb select list
......@@ -91,10 +91,10 @@ const Kb = ({ modelId }: { modelId: string }) => {
return (
<Box position={'relative'} px={5} minH={'50vh'}>
<Box fontWeight={'bold'}>关联的知识库({modelDetail.chat?.relatedKbs.length})</Box>
<Box fontWeight={'bold'}>关联的知识库({appDetail.chat?.relatedKbs.length})</Box>
{(() => {
const kbs =
modelDetail.chat?.relatedKbs
appDetail.chat?.relatedKbs
?.map((id) => kbList.find((kb) => kb._id === id))
.filter((item) => item) || [];
return (
......@@ -120,9 +120,9 @@ const Kb = ({ modelId }: { modelId: string }) => {
}}
onClick={() => {
reset({
searchSimilarity: modelDetail.chat.searchSimilarity,
searchLimit: modelDetail.chat.searchLimit,
searchEmptyText: modelDetail.chat.searchEmptyText
searchSimilarity: appDetail.chat.searchSimilarity,
searchLimit: appDetail.chat.searchLimit,
searchEmptyText: appDetail.chat.searchEmptyText
});
onOpenEditParams();
}}
......@@ -139,9 +139,9 @@ const Kb = ({ modelId }: { modelId: string }) => {
调整搜索参数
</Flex>
<Flex mt={3} h={'30px'} color={'myGray.600'} fontSize={'sm'}>
相似度: {modelDetail.chat.searchSimilarity}, 单次搜索数量:{' '}
{modelDetail.chat.searchLimit}, 空搜索时拒绝回复:{' '}
{modelDetail.chat.searchEmptyText !== '' ? 'true' : 'false'}
相似度: {appDetail.chat.searchSimilarity}, 单次搜索数量:{' '}
{appDetail.chat.searchLimit}, 空搜索时拒绝回复:{' '}
{appDetail.chat.searchEmptyText !== '' ? 'true' : 'false'}
</Flex>
</Card>
<Card
......@@ -156,7 +156,7 @@ const Kb = ({ modelId }: { modelId: string }) => {
}}
onClick={() => {
setSelectedIdList(
modelDetail.chat?.relatedKbs ? [...modelDetail.chat?.relatedKbs] : []
appDetail.chat?.relatedKbs ? [...appDetail.chat?.relatedKbs] : []
);
onOpenKbSelect();
}}
......@@ -219,8 +219,8 @@ const Kb = ({ modelId }: { modelId: string }) => {
size={'sm'}
_hover={{ color: 'red.600' }}
onClick={() => {
const ids = modelDetail.chat?.relatedKbs
? [...modelDetail.chat.relatedKbs]
const ids = appDetail.chat?.relatedKbs
? [...appDetail.chat.relatedKbs]
: [];
const i = ids.findIndex((id) => id === item._id);
ids.splice(i, 1);
......@@ -262,7 +262,7 @@ const Kb = ({ modelId }: { modelId: string }) => {
boxShadow={'sm'}
h={'80px'}
cursor={'pointer'}
order={modelDetail.chat?.relatedKbs?.includes(item._id) ? 0 : 1}
order={appDetail.chat?.relatedKbs?.includes(item._id) ? 0 : 1}
_hover={{
boxShadow: 'md'
}}
......@@ -328,8 +328,8 @@ const Kb = ({ modelId }: { modelId: string }) => {
min={0}
max={1}
step={0.01}
activeVal={getValues('searchSimilarity')}
setVal={(val) => {
value={getValues('searchSimilarity')}
onChange={(val) => {
setValue('searchSimilarity', val);
setRefresh(!refresh);
}}
......@@ -345,8 +345,8 @@ const Kb = ({ modelId }: { modelId: string }) => {
]}
min={1}
max={20}
activeVal={getValues('searchLimit')}
setVal={(val) => {
value={getValues('searchLimit')}
onChange={(val) => {
setValue('searchLimit', val);
setRefresh(!refresh);
}}
......
client/src/pages/model/components/detail/components/Settings.tsx
......@@ -16,7 +16,7 @@ import { useRouter } from 'next/router';
import { useUserStore } from '@/store/user';
import { useToast } from '@/hooks/useToast';
import { useLoading } from '@/hooks/useLoading';
import { delModelById, putModelById } from '@/api/model';
import { delModelById, putAppById } from '@/api/app';
import { useSelectFile } from '@/hooks/useSelectFile';
import { compressImg } from '@/utils/file';
import { getErrText } from '@/utils/tools';
......@@ -24,7 +24,7 @@ import { useConfirm } from '@/hooks/useConfirm';
import { ChatModelMap, chatModelList } from '@/constants/model';
import { formatPrice } from '@/utils/user';
import type { ModelSchema } from '@/types/mongoSchema';
import type { AppSchema } from '@/types/mongoSchema';
import Avatar from '@/components/Avatar';
import MySelect from '@/components/Select';
......@@ -39,7 +39,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
const { toast } = useToast();
const router = useRouter();
const { Loading, setIsLoading } = useLoading();
const { userInfo, modelDetail, myModels, loadModelDetail, refreshModel, setLastModelId } =
const { userInfo, appDetail, myApps, loadAppDetail, refreshModel, setLastModelId } =
useUserStore();
const { File, onOpen: onOpenSelectFile } = useSelectFile({
fileType: '.jpg,.png',
......@@ -60,12 +60,12 @@ const Settings = ({ modelId }: { modelId: string }) => {
reset,
handleSubmit
} = useForm({
defaultValues: modelDetail
defaultValues: appDetail
});
const isOwner = useMemo(
() => modelDetail.userId === userInfo?._id,
[modelDetail.userId, userInfo?._id]
() => appDetail.userId === userInfo?._id,
[appDetail.userId, userInfo?._id]
);
const tokenLimit = useMemo(() => {
const max = ChatModelMap[getValues('chat.chatModel')]?.contextMaxToken || 4000;
......@@ -79,10 +79,10 @@ const Settings = ({ modelId }: { modelId: string }) => {
// 提交保存模型修改
const saveSubmitSuccess = useCallback(
async (data: ModelSchema) => {
async (data: AppSchema) => {
setBtnLoading(true);
try {
await putModelById(data._id, {
await putAppById(data._id, {
name: data.name,
avatar: data.avatar,
intro: data.intro,
......@@ -126,16 +126,16 @@ const Settings = ({ modelId }: { modelId: string }) => {
/* 点击删除 */
const handleDelModel = useCallback(async () => {
if (!modelDetail) return;
if (!appDetail) return;
setIsLoading(true);
try {
await delModelById(modelDetail._id);
await delModelById(appDetail._id);
toast({
title: '删除成功',
status: 'success'
});
refreshModel.removeModelDetail(modelDetail._id);
router.replace(`/model?modelId=${myModels[1]?._id}`);
refreshModel.removeModelDetail(appDetail._id);
router.replace(`/model?modelId=${myApps[1]?._id}`);
} catch (err: any) {
toast({
title: err?.message || '删除失败',
......@@ -143,7 +143,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
});
}
setIsLoading(false);
}, [modelDetail, setIsLoading, toast, refreshModel, router, myModels]);
}, [appDetail, setIsLoading, toast, refreshModel, router, myApps]);
const onSelectFile = useCallback(
async (e: File[]) => {
......@@ -168,7 +168,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
);
// load model data
const { isLoading } = useQuery([modelId], () => loadModelDetail(modelId, true), {
const { isLoading } = useQuery([modelId], () => loadAppDetail(modelId, true), {
onSuccess(res) {
res && reset(res);
modelId && setLastModelId(modelId);
......@@ -241,7 +241,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
width={['100%', '300px']}
value={getValues('chat.chatModel')}
list={chatModelList.map((item) => ({
id: item.chatModel,
value: item.chatModel,
label: `${item.name} (${formatPrice(
ChatModelMap[item.chatModel]?.price,
1000
......@@ -266,8 +266,8 @@ const Settings = ({ modelId }: { modelId: string }) => {
width={['95%', '280px']}
min={0}
max={10}
activeVal={getValues('chat.temperature')}
setVal={(val) => {
value={getValues('chat.temperature')}
onChange={(val) => {
setValue('chat.temperature', val);
setRefresh(!refresh);
}}
......@@ -288,8 +288,8 @@ const Settings = ({ modelId }: { modelId: string }) => {
min={100}
max={tokenLimit}
step={50}
activeVal={getValues('chat.maxToken')}
setVal={(val) => {
value={getValues('chat.maxToken')}
onChange={(val) => {
setValue('chat.maxToken', val);
setRefresh(!refresh);
}}
......
client/src/pages/model/components/detail/index.tsx
......@@ -7,7 +7,7 @@ import dynamic from 'next/dynamic';
import Tabs from '@/components/Tabs';
import Settings from './components/Settings';
import { defaultModel } from '@/constants/model';
import { defaultApp } from '@/constants/model';
const Kb = dynamic(() => import('./components/Kb'), {
ssr: false
......@@ -29,12 +29,12 @@ enum TabEnum {
const ModelDetail = ({ modelId }: { modelId: string }) => {
const router = useRouter();
const { isPc } = useGlobalStore();
const { modelDetail = defaultModel, userInfo } = useUserStore();
const { appDetail = defaultApp, userInfo } = useUserStore();
const [currentTab, setCurrentTab] = useState<`${TabEnum}`>(TabEnum.settings);
const isOwner = useMemo(
() => modelDetail.userId === userInfo?._id,
[modelDetail.userId, userInfo?._id]
() => appDetail.userId === userInfo?._id,
[appDetail.userId, userInfo?._id]
);
useEffect(() => {
......@@ -65,7 +65,7 @@ const ModelDetail = ({ modelId }: { modelId: string }) => {
{/* 头部 */}
<Box textAlign={['center', 'left']} px={5} mb={4}>
<Box className="textlg" display={['block', 'none']} fontSize={'3xl'} fontWeight={'bold'}>
{modelDetail.name}
{appDetail.name}
</Box>
<Tabs
mx={['auto', '0']}
......
client/src/pages/model/share/index.tsx
import React, { useState, useRef, useCallback } from 'react';
import { Box, Flex, Card, Grid, Input } from '@chakra-ui/react';
import { useLoading } from '@/hooks/useLoading';
import { getShareModelList, triggerModelCollection } from '@/api/model';
import { getShareModelList, triggerModelCollection } from '@/api/app';
import { usePagination } from '@/hooks/usePagination';
import type { ShareModelItem } from '@/types/model';
import { useUserStore } from '@/store/user';
......
client/src/service/api/request.ts
......@@ -12,6 +12,7 @@ interface Props {
export const moduleFetch = ({ url, data, res }: Props) =>
new Promise<Record<string, any>>(async (resolve, reject) => {
try {
const abortSignal = new AbortController();
const baseUrl = `http://localhost:3000/api`;
const requestUrl = url.startsWith('/') ? `${baseUrl}${url}` : url;
const response = await fetch(requestUrl, {
......@@ -19,9 +20,15 @@ export const moduleFetch = ({ url, data, res }: Props) =>
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
body: JSON.stringify(data),
signal: abortSignal.signal
});
if (response.status >= 300 || response.status < 200) {
const err = await response.json();
return reject(err);
}
if (!response?.body) {
throw new Error('Request Error');
}
......@@ -34,14 +41,19 @@ export const moduleFetch = ({ url, data, res }: Props) =>
const reader = response.body?.getReader();
let chatResponse = {};
let chatResponse: Record<string, any> = {};
const read = async () => {
try {
const { done, value } = await reader.read();
if (done) {
return resolve(chatResponse);
} else if (res.closed) {
resolve(chatResponse);
abortSignal.abort();
return;
}
const chunkResponse = parseStreamChunk(value);
chunkResponse.forEach((item) => {
......@@ -53,12 +65,25 @@ export const moduleFetch = ({ url, data, res }: Props) =>
return {};
}
})();
if (item.event === sseResponseEventEnum.moduleFetchResponse) {
if (!res.closed && item.event === sseResponseEventEnum.moduleFetchResponse) {
chatResponse = {
...chatResponse,
...data
};
} else if (item.event === sseResponseEventEnum.answer && data?.choices?.[0]?.delta) {
} else if (
!res.closed &&
item.event === sseResponseEventEnum.answer &&
data?.choices?.[0]?.delta
) {
// save answer
const answer: string = data?.choices?.[0].delta.content || '';
if (answer) {
chatResponse = {
...chatResponse,
answer: chatResponse.answer ? chatResponse.answer + answer : answer
};
}
sseResponse({
res,
event: sseResponseEventEnum.answer,
......@@ -68,6 +93,9 @@ export const moduleFetch = ({ url, data, res }: Props) =>
});
read();
} catch (err: any) {
if (err?.message === 'The operation was aborted.') {
return;
}
reject(getErrText(err, '请求异常'));
}
};
......
client/src/service/models/model.ts
import { Schema, model, models, Model as MongoModel } from 'mongoose';
import { ModelSchema as ModelType } from '@/types/mongoSchema';
import { AppSchema as ModelType } from '@/types/mongoSchema';
import { ChatModelMap, OpenAiChatEnum } from '@/constants/model';
const ModelSchema = new Schema({
const AppSchema = new Schema({
userId: {
type: Schema.Types.ObjectId,
ref: 'user',
......@@ -91,14 +91,18 @@ const ModelSchema = new Schema({
type: Number,
default: 0
}
},
modules: {
type: Array,
default: []
}
});
try {
ModelSchema.index({ updateTime: -1 });
ModelSchema.index({ 'share.collection': -1 });
AppSchema.index({ updateTime: -1 });
AppSchema.index({ 'share.collection': -1 });
} catch (error) {
console.log(error);
}
export const Model: MongoModel<ModelType> = models['model'] || model('model', ModelSchema);
export const Model: MongoModel<ModelType> = models['model'] || model('model', AppSchema);
client/src/service/response.ts
......@@ -55,7 +55,7 @@ export const jsonRes = <T = any>(
console.log(error);
}
res.json({
res.status(code).json({
code,
statusText: '',
message: msg,
......@@ -92,7 +92,7 @@ export const sseErrRes = (res: NextApiResponse, error: any) => {
} else if (openaiError[error?.response?.statusText]) {
msg = openaiError[error.response.statusText];
}
console.log(error);
console.log('sse error', error);
sseResponse({
res,
......
client/src/service/utils/auth.ts
......@@ -2,10 +2,10 @@ import type { NextApiRequest } from 'next';
import jwt from 'jsonwebtoken';
import Cookie from 'cookie';
import { Chat, Model, OpenApi, User, ShareChat, KB } from '../mongo';
import type { ModelSchema } from '@/types/mongoSchema';
import type { AppSchema } from '@/types/mongoSchema';
import type { ChatItemType } from '@/types/chat';
import mongoose from 'mongoose';
import { defaultModel } from '@/constants/model';
import { defaultApp } from '@/constants/model';
import { formatPrice } from '@/utils/user';
import { ERROR_ENUM } from '../errorCode';
import { ChatModelType, OpenAiChatEnum } from '@/constants/model';
......@@ -204,22 +204,22 @@ export const getApiKey = async ({
};
// 模型使用权校验
export const authModel = async ({
modelId,
export const authApp = async ({
appId,
userId,
authUser = true,
authOwner = true,
reserveDetail = false
}: {
modelId: string;
appId: string;
userId: string;
authUser?: boolean;
authOwner?: boolean;
reserveDetail?: boolean; // focus reserve detail
}) => {
// 获取 model 数据
const model = await Model.findById<ModelSchema>(modelId);
if (!model) {
const app = await Model.findById<AppSchema>(appId);
if (!app) {
return Promise.reject('模型不存在');
}
......@@ -228,21 +228,21 @@ export const authModel = async ({
1. authOwner=true or authUser = true , just owner can use
2. authUser = false and share, anyone can use
*/
if (authOwner || (authUser && !model.share.isShare)) {
if (userId !== String(model.userId)) return Promise.reject(ERROR_ENUM.unAuthModel);
if (authOwner || (authUser && !app.share.isShare)) {
if (userId !== String(app.userId)) return Promise.reject(ERROR_ENUM.unAuthModel);
}
// do not share detail info
if (!reserveDetail && !model.share.isShareDetail && userId !== String(model.userId)) {
model.chat = {
...defaultModel.chat,
chatModel: model.chat.chatModel
if (!reserveDetail && !app.share.isShareDetail && userId !== String(app.userId)) {
app.chat = {
...defaultApp.chat,
chatModel: app.chat.chatModel
};
}
return {
model,
showModelDetail: userId === String(model.userId)
app,
showModelDetail: userId === String(app.userId)
};
};
......@@ -270,9 +270,9 @@ export const authChat = async ({
}) => {
const { userId } = await authUser({ req, authToken: true });
// 获取 model 数据
const { model, showModelDetail } = await authModel({
modelId,
// 获取 app 数据
const { app, showModelDetail } = await authApp({
appId: modelId,
userId,
authOwner: false,
reserveDetail: true
......@@ -304,7 +304,7 @@ export const authChat = async ({
}
// 获取 user 的 apiKey
const { userOpenAiKey, systemAuthKey } = await getApiKey({
model: model.chat.chatModel,
model: app.chat.chatModel,
userId
});
......@@ -313,7 +313,7 @@ export const authChat = async ({
systemAuthKey,
content,
userId,
model,
model: app,
showModelDetail
};
};
......
client/src/store/user.ts
......@@ -2,15 +2,15 @@ import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import type { UserType, UserUpdateParams } from '@/types/user';
import { getMyModels, getModelById } from '@/api/model';
import { getMyModels, getModelById } from '@/api/app';
import { formatPrice } from '@/utils/user';
import { getTokenLogin } from '@/api/user';
import { defaultModel } from '@/constants/model';
import { defaultApp } from '@/constants/model';
import { ModelListItemType } from '@/types/model';
import { KbItemType } from '@/types/plugin';
import { getKbList, getKbById } from '@/api/plugins/kb';
import { defaultKbDetail } from '@/constants/kb';
import type { ModelSchema } from '@/types/mongoSchema';
import type { AppSchema } from '@/types/mongoSchema';
type State = {
userInfo: UserType | null;
......@@ -20,14 +20,14 @@ type State = {
// model
lastModelId: string;
setLastModelId: (id: string) => void;
myModels: ModelListItemType[];
myCollectionModels: ModelListItemType[];
myApps: ModelListItemType[];
myCollectionApps: ModelListItemType[];
loadMyModels: (init?: boolean) => Promise<null>;
modelDetail: ModelSchema;
loadModelDetail: (id: string, init?: boolean) => Promise<ModelSchema>;
appDetail: AppSchema;
loadAppDetail: (id: string, init?: boolean) => Promise<AppSchema>;
refreshModel: {
freshMyModels(): void;
updateModelDetail(model: ModelSchema): void;
updateModelDetail(model: AppSchema): void;
removeModelDetail(modelId: string): void;
};
// kb
......@@ -74,24 +74,24 @@ export const useUserStore = create<State>()(
state.lastModelId = id;
});
},
myModels: [],
myCollectionModels: [],
myApps: [],
myCollectionApps: [],
async loadMyModels(init = false) {
if (get().myModels.length > 0 && !init) return null;
if (get().myApps.length > 0 && !init) return null;
const res = await getMyModels();
set((state) => {
state.myModels = res.myModels;
state.myCollectionModels = res.myCollectionModels;
state.myApps = res.myApps;
state.myCollectionApps = res.myCollectionApps;
});
return null;
},
modelDetail: defaultModel,
async loadModelDetail(id: string, init = false) {
if (id === get().modelDetail._id && !init) return get().modelDetail;
appDetail: defaultApp,
async loadAppDetail(id: string, init = false) {
if (id === get().appDetail._id && !init) return get().appDetail;
const res = await getModelById(id);
set((state) => {
state.modelDetail = res;
state.appDetail = res;
});
return res;
},
......@@ -99,16 +99,16 @@ export const useUserStore = create<State>()(
freshMyModels() {
get().loadMyModels(true);
},
updateModelDetail(model: ModelSchema) {
updateModelDetail(model: AppSchema) {
set((state) => {
state.modelDetail = model;
state.appDetail = model;
});
get().loadMyModels(true);
},
removeModelDetail(modelId: string) {
if (modelId === get().modelDetail._id) {
if (modelId === get().appDetail._id) {
set((state) => {
state.modelDetail = defaultModel;
state.appDetail = defaultApp;
state.lastModelId = '';
});
}
......
client/src/styles/reactflow.scss 0 → 100644
.react-flow__panel {
display: none;
}
client/src/styles/reset.scss
......@@ -83,6 +83,9 @@ textarea::placeholder {
.grecaptcha-badge {
display: none !important;
}
.react-flow__panel.react-flow__attribution {
display: none !important;
}
.textlg {
background: linear-gradient(to bottom right, #1237b3 0%, #3370ff 40%, #4e83fd 80%, #85b1ff 100%);
-webkit-background-clip: text;
......
client/src/types/app.d.ts
import { FlowModuleTypeEnum } from '@/constants/flow';
import { XYPosition } from 'reactflow';
import { AppModuleItemTypeEnum, ModulesInputItemTypeEnum } from '../constants/app';
/* input item */
export type ModuleItemCommonType = {
key: string; // 字段名
formType: `${ModuleInputItemTypeEnum}`;
label: string;
description?: string;
placeholder?: string;
max?: number;
min?: number;
default?: any;
enum?: { label: string; value: any }[];
};
export type ModuleItemOutputItemType = {
key: string;
targets: { moduleId: string; key: string }[];
};
export type ModuleItemType = {
moduleId: string;
avatar: string;
name: string;
description: string;
url: string;
body: ModuleItemCommonType[];
inputs: ModuleItemCommonType[];
outputs: ModuleItemOutputItemType[];
};
/* input item */
type FormItemCommonType = {
key: string; // 字段名
label: string;
description: string;
formType: `${ModulesInputItemTypeEnum}`;
};
import type { FlowInputItemType, FlowOutputItemType } from './flow';
/* agent */
/* question classify */
......@@ -45,25 +11,44 @@ export type ClassifyQuestionAgentItemType = {
};
/* app module */
export type AppModuleItemType = {
export type AppModuleTemplateItemType = {
logo?: string;
name?: string;
intro?: string;
flowType: `${FlowModuleTypeEnum}`;
type: `${AppModuleItemTypeEnum}`;
url?: string;
inputs: FlowInputItemType[];
outputs: FlowOutputItemType[];
};
export type AppModuleItemType = AppModuleTemplateItemType & {
moduleId: string;
position?: XYPosition;
};
export type AppItemType = {
id: string;
name: string;
modules: AppModuleItemType[];
};
export type RunningModuleItemType = {
moduleId: string;
type: `${AppModuleItemTypeEnum}`;
url?: string;
body: Record<string, any>;
inputs: { key: string; value: any }[];
outputs: {
inputs: {
key: string;
value?: any;
}[];
outputs: {
key: string;
answer?: boolean;
response?: boolean;
answer?: boolean; // json response
value?: any;
targets: {
moduleId: string;
key: string;
}[];
}[];
};
export type AppItemType = {
id: string;
modules: AppModuleItemType[];
};
client/src/types/flow.d.ts 0 → 100644
import {
FlowBodyItemTypeEnum,
FlowInputItemTypeEnum,
FlowOutputItemTypeEnum
} from '@/constants/flow';
import { Connection } from 'reactflow';
import type { AppModuleItemType } from './app';
export type FlowInputItemType = {
key: string; // 字段名
value?: any;
type: `${FlowInputItemTypeEnum}`;
label: string;
connected?: boolean;
description?: string;
placeholder?: string;
max?: number;
min?: number;
step?: number;
required?: boolean;
list?: { label: string; value: any }[];
markList?: { label: string; value: any }[];
};
export type FlowOutputTargetItemType = {
moduleId: string;
key: string;
};
export type FlowOutputItemType = {
key: string; // 字段名
label: string;
description?: string;
type: `${FlowOutputItemTypeEnum}`;
response?: boolean;
targets: FlowOutputTargetItemType[];
};
export type FlowModuleItemChangeProps = {
moduleId: string;
key: string;
value: any;
valueKey?: keyof FlowInputItemType & keyof FlowBodyItemType;
};
export type FlowModuleItemType = AppModuleItemType & {
onChangeNode: (e: FlowModuleItemChangeProps) => void;
onDelNode: (id: string) => void;
};
client/src/types/model.d.ts
import type { ModelSchema, kbSchema } from './mongoSchema';
import type { AppSchema, kbSchema } from './mongoSchema';
import { ChatModelType } from '@/constants/model';
export type ModelListItemType = {
......@@ -12,8 +12,9 @@ export interface ModelUpdateParams {
name?: string;
avatar?: string;
intro?: string;
chat?: ModelSchema['chat'];
share?: ModelSchema['share'];
chat?: AppSchema['chat'];
share?: AppSchema['share'];
modules?: AppSchema['modules'];
}
export interface ShareModelItem {
......@@ -22,7 +23,7 @@ export interface ShareModelItem {
name: string;
intro: string;
userId: string;
share: ModelSchema['share'];
share: AppSchema['share'];
isCollection: boolean;
}
......
client/src/types/mongoSchema.d.ts
......@@ -3,6 +3,7 @@ import { ModelNameEnum, ChatModelType, EmbeddingModelType } from '@/constants/mo
import type { DataType } from './data';
import { BillTypeEnum, InformTypeEnum } from '@/constants/user';
import { TrainingModeEnum } from '@/constants/plugin';
import type { AppModuleItemType } from './app';
export interface UserModelSchema {
_id: string;
......@@ -30,7 +31,7 @@ export interface AuthCodeSchema {
expiredTime: number;
}
export interface ModelSchema {
export interface AppSchema {
_id: string;
userId: string;
name: string;
......@@ -53,9 +54,10 @@ export interface ModelSchema {
isShareDetail: boolean;
collection: number;
};
modules: AppModuleItemType[];
}
export interface ModelPopulate extends ModelSchema {
export interface ModelPopulate extends AppSchema {
userId: UserModelSchema;
}
......@@ -93,7 +95,7 @@ export interface ChatSchema {
}
export interface ChatPopulate extends ChatSchema {
userId: UserModelSchema;
modelId: ModelSchema;
modelId: AppSchema;
}
export interface BillSchema {
......
client/src/utils/adapt.ts
......@@ -6,6 +6,12 @@ import { ChatCompletionRequestMessageRoleEnum } from 'openai';
import { ChatRoleEnum } from '@/constants/chat';
import type { MessageItemType } from '@/pages/api/openapi/v1/chat/completions';
import { ChatModelMap, OpenAiChatEnum } from '@/constants/model';
import type { AppModuleItemType } from '@/types/app';
import type { FlowModuleItemType } from '@/types/flow';
import type { Edge, Node } from 'reactflow';
import { connectionLineStyle } from '@/constants/flow';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
export const adaptBill = (bill: BillSchema): UserBillType => {
return {
......@@ -75,3 +81,53 @@ export const parseStreamChunk = (value: BufferSource) => {
return chunkResponse;
};
export const appModule2FlowNode = ({
item,
onChangeNode,
onDelNode
}: {
item: AppModuleItemType;
onChangeNode: FlowModuleItemType['onChangeNode'];
onDelNode: FlowModuleItemType['onDelNode'];
}): Node<FlowModuleItemType> => {
return {
id: item.moduleId,
type: item.flowType,
data: {
...item,
onChangeNode,
onDelNode
},
position: item.position || { x: 0, y: 0 }
};
};
export const appModule2FlowEdge = ({
modules,
onDelete
}: {
modules: AppModuleItemType[];
onDelete: (id: string) => void;
}) => {
console.log(modules);
const edges: Edge[] = [];
modules.forEach((module) =>
module.outputs.forEach((output) =>
output.targets.forEach((target) => {
edges.push({
style: connectionLineStyle,
source: module.moduleId,
target: target.moduleId,
sourceHandle: output.key,
targetHandle: target.key,
id: nanoid(),
animated: true,
type: 'buttonedge',
data: { onDelete }
});
})
)
);
return edges;
};
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