逻辑还要处理

This commit is contained in:
xion 2024-10-02 14:12:36 +08:00
parent 6528ee78c6
commit 987e1dd8a8
4 changed files with 80 additions and 16 deletions

View File

@ -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,
};

View File

@ -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}

View File

@ -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) => {

View File

@ -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);