From 987e1dd8a8430bd86f2426425869b104d601e597 Mon Sep 17 00:00:00 2001
From: xion <xiongxiao1012@outlook.com>
Date: Wed, 2 Oct 2024 14:12:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=BB=E8=BE=91=E8=BF=98=E8=A6=81=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ai-agent/edit/List.tsx    |  1 -
 src/pages/ai-chat/AiModule.tsx      | 84 ++++++++++++++++++++++++-----
 src/pages/ai-chat/store/ai-store.ts |  5 ++
 src/pages/container/edit/List.tsx   |  6 ++-
 4 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/src/pages/ai-agent/edit/List.tsx b/src/pages/ai-agent/edit/List.tsx
index 674a3bb..cc88d39 100644
--- a/src/pages/ai-agent/edit/List.tsx
+++ b/src/pages/ai-agent/edit/List.tsx
@@ -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,
       };
diff --git a/src/pages/ai-chat/AiModule.tsx b/src/pages/ai-chat/AiModule.tsx
index 1c0a2f6..4c82f95 100644
--- a/src/pages/ai-chat/AiModule.tsx
+++ b/src/pages/ai-chat/AiModule.tsx
@@ -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}
diff --git a/src/pages/ai-chat/store/ai-store.ts b/src/pages/ai-chat/store/ai-store.ts
index f3c75df..53067c4 100644
--- a/src/pages/ai-chat/store/ai-store.ts
+++ b/src/pages/ai-chat/store/ai-store.ts
@@ -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) => {
diff --git a/src/pages/container/edit/List.tsx b/src/pages/container/edit/List.tsx
index 54872fc..40e6fd2 100644
--- a/src/pages/container/edit/List.tsx
+++ b/src/pages/container/edit/List.tsx
@@ -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);