逻辑还要处理
This commit is contained in:
parent
6528ee78c6
commit
987e1dd8a8
@ -90,7 +90,6 @@ export const List = () => {
|
||||
deleteData: state.deleteData,
|
||||
getList: state.getList,
|
||||
loading: state.loading,
|
||||
publishData: state.publishData,
|
||||
updateData: state.updateData,
|
||||
formData: state.formData,
|
||||
};
|
||||
|
@ -2,7 +2,7 @@ import { useShallow } from 'zustand/react/shallow';
|
||||
import { useAiStore } from './store/ai-store';
|
||||
import { CloseOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Dropdown, Form, Input, message, Modal, Tooltip } from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { TextArea } from '../container/components/TextArea';
|
||||
import clsx from 'clsx';
|
||||
import { query } from '@/modules';
|
||||
@ -11,7 +11,23 @@ import { ChatMessage } from './module/ChatMessage';
|
||||
import { isObjectNull } from '@/utils/is-null';
|
||||
import { useNavigate } from 'react-router';
|
||||
const testId = '60aca66b-4be9-4266-9568-6001032c7e13';
|
||||
|
||||
const NormalMessage = ({ onSend }: { onSend: any }) => {
|
||||
const [message, setMessage] = useState('');
|
||||
const onClick = () => {
|
||||
onSend(message);
|
||||
setMessage('');
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<TextArea value={message} onChange={(v) => setMessage(v)} className='scrollbar' style={{ minHeight: 180 }} placeholder='message' />
|
||||
<div className='px-4'>
|
||||
<Button type='primary' className='mt-4' onClick={onClick}>
|
||||
发送
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
type FormModalProps = {
|
||||
send?: any;
|
||||
};
|
||||
@ -23,6 +39,7 @@ const FormModal = (props: FormModalProps) => {
|
||||
showEdit: state.showEdit,
|
||||
setShowEdit: state.setShowEdit,
|
||||
formData: state.formData,
|
||||
setFormData: state.setFormData,
|
||||
setMessage: state.setMessage,
|
||||
};
|
||||
}),
|
||||
@ -47,6 +64,7 @@ const FormModal = (props: FormModalProps) => {
|
||||
};
|
||||
const onClose = () => {
|
||||
aiStore.setShowEdit(false);
|
||||
aiStore.setFormData({});
|
||||
form.resetFields();
|
||||
};
|
||||
const isEdit = aiStore.formData.id;
|
||||
@ -175,6 +193,7 @@ export const AiMoudle = () => {
|
||||
};
|
||||
}),
|
||||
);
|
||||
const [noPrompt, setNoPrompt] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!aiStore.open) {
|
||||
return;
|
||||
@ -185,6 +204,7 @@ export const AiMoudle = () => {
|
||||
} else {
|
||||
form.setFieldsValue({ inputs: [] });
|
||||
}
|
||||
console.log('formData', aiStore.formData);
|
||||
}, [aiStore.open, aiStore.formData]);
|
||||
useEffect(() => {
|
||||
if (!aiStore.open) {
|
||||
@ -198,12 +218,37 @@ export const AiMoudle = () => {
|
||||
const data = form.getFieldsValue();
|
||||
send({ type: 'messages', data: { ...data, root: true } });
|
||||
};
|
||||
const onSendNoPrompt = (value) => {
|
||||
send({ type: 'messages', data: { message: value, root: true } });
|
||||
};
|
||||
const inputs = form.getFieldValue('inputs');
|
||||
const isNotShow = inputs?.length === 0 || !inputs;
|
||||
const OnlyNormalMessage = (
|
||||
<Tooltip title='不需要任何预设prompt'>
|
||||
<div
|
||||
className='text-blue-500 text-xs mt-2 italic cursor-pointer'
|
||||
onClick={() => {
|
||||
setNoPrompt(true);
|
||||
}}>
|
||||
直接发送消息
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
const NeedPromptMessage = (
|
||||
<Tooltip title='需要预设prompt'>
|
||||
<div
|
||||
className='text-blue-500 text-xs mt-2 italic cursor-pointer'
|
||||
onClick={() => {
|
||||
setNoPrompt(false);
|
||||
}}>
|
||||
需要预设prompt
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
const RootForm = (
|
||||
<div className='flex flex-col relative'>
|
||||
<div className={clsx('flex flex-col', isNotShow && 'invisible')}>
|
||||
<div className='mt-1 ml-2'>在当前页面,我能帮助你什么吗?</div>
|
||||
<div className={clsx('flex flex-col absolute top-3 w-full', isNotShow && 'invisible', noPrompt && 'invisible')}>
|
||||
<div className='mt-1 ml-2'>在当前页面,我能帮助你什么吗? {OnlyNormalMessage}</div>
|
||||
<div className='mt-4'>
|
||||
<Form form={form}>
|
||||
<Form.List name={'inputs'} initialValue={[]}>
|
||||
@ -212,13 +257,14 @@ export const AiMoudle = () => {
|
||||
<>
|
||||
{fields.map((field, index) => {
|
||||
const key = form.getFieldValue(['inputs', index, 'key']);
|
||||
const isTitle = key === 'title';
|
||||
return (
|
||||
<div key={field.name + '-' + index} className=''>
|
||||
<Form.Item name={[field.name, 'key']} rules={[{ required: true, message: 'Missing name' }]} hidden noStyle>
|
||||
<Input placeholder='name' />
|
||||
</Form.Item>
|
||||
<Form.Item className='!mb-0' name={[field.name, 'value']} rules={[{ required: true, message: 'Missing value' }]}>
|
||||
<TextArea className='scrollbar' style={{ minHeight: 180 }} placeholder={key} />
|
||||
<TextArea className='scrollbar' style={{ minHeight: isTitle ? 18 : 180 }} placeholder={key} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
@ -235,20 +281,30 @@ export const AiMoudle = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isNotShow && (
|
||||
<div className='mt-2 text-gray-400 flex absolute top-3'>
|
||||
当前页面没有配置,点击
|
||||
<div
|
||||
className='text-blue-500 cursor-pointer'
|
||||
onClick={(e) => {
|
||||
navigate('/chat/chat-prompt/list');
|
||||
}}>
|
||||
去配置
|
||||
{isNotShow && !noPrompt && (
|
||||
<div className='flex flex-col absolute top-3'>
|
||||
<div className='mt-2 text-gray-400 flex '>
|
||||
当前页面没有配置,点击
|
||||
<div
|
||||
className='text-blue-500 cursor-pointer'
|
||||
onClick={(e) => {
|
||||
navigate('/chat/chat-prompt/list');
|
||||
}}>
|
||||
去配置
|
||||
</div>
|
||||
</div>
|
||||
<div>{OnlyNormalMessage}</div>
|
||||
</div>
|
||||
)}
|
||||
{noPrompt && (
|
||||
<div className=''>
|
||||
{NeedPromptMessage}
|
||||
<NormalMessage onSend={onSendNoPrompt} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ChatForm = (
|
||||
<ChatMessage
|
||||
messages={aiStore.messages}
|
||||
|
@ -41,6 +41,9 @@ export type AiStore = {
|
||||
setType?: (type: string) => void;
|
||||
formData: any;
|
||||
setFormData: (data: any) => void;
|
||||
// Context Data
|
||||
data: any;
|
||||
setData: (data: any) => void;
|
||||
title: string; // AI Module的标题
|
||||
setTitle: (title: string) => void;
|
||||
messages: { role: string; content: string }[];
|
||||
@ -73,6 +76,8 @@ export const useAiStore = create<AiStore>((set, get, store) => {
|
||||
setFormData: (data) => set({ formData: data }),
|
||||
title: '',
|
||||
setTitle: (title) => set({ title }),
|
||||
data: {},
|
||||
setData: (data) => set({ data }),
|
||||
messages: [],
|
||||
setMessage: (messages) => set({ messages }),
|
||||
getPrompt: async (key) => {
|
||||
|
@ -158,7 +158,11 @@ export const ContainerList = () => {
|
||||
</div>
|
||||
<div className='flex mt-2 '>
|
||||
<Button.Group>
|
||||
<Button onClick={() => containerStore.publishData(item)} icon={<SettingOutlined />}></Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
// containerStore.publishData(item);
|
||||
}}
|
||||
icon={<SettingOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
containerStore.setFormData(item);
|
||||
|
Loading…
x
Reference in New Issue
Block a user