模板变量输入和替换, 回车发送

src/views/Conversations/Components/InputTemplate.jsx

@@ -3,7 +3,7 @@ import { App, Popover, Flex, Button, List, Input } from 'antd';
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
 import { useAuthContext } from '@/stores/AuthContext';
 import { useConversationState } from '@/stores/ConversationContext';
-import { cloneDeep, flush, getNestedValue, objectMapper } from '@/utils/utils';
+import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { replaceTemplateString } from '@/lib/msgUtils';
 
@@ -22,7 +22,7 @@ const splitTemplate = (template) => {
   return obj;
 };
 const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
-  const { notification } = App.useApp()
+  const { notification } = App.useApp();
   const { loginUser } = useAuthContext();
   const { currentConversation, templates } = useConversationState();
   // 用于替换变量: customer, agent
@@ -33,7 +33,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
     setOpenTemplates(newOpen);
   };
   const handleSendTemplate = (fromTemplate) => {
-    const mergeInput = {...cloneDeep(valueMapped), ...activeInput[fromTemplate.name]};
+    const mergeInput = { ...cloneDeep(valueMapped), ...activeInput[fromTemplate.name] };
     let valid = true;
     const msgObj = {
       type: 'whatsappTemplate',
@@ -51,7 +51,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
           const params = keys.map((v) => ({ type: 'text', text: getNestedValue(mergeInput, [v]) }));
           const paramText = params.map((p) => p.text);
           const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
-          valid = keys.length !== flush(paramText).length ? false : valid;
+          valid = keys.length !== (paramText).filter(s => s).length ? false : valid;
           return {
             type: citem.type.toLowerCase(),
             parameters: params,
@@ -67,7 +67,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
         description: '信息未填写完整, 请补充填写',
         placement: 'top',
         duration: 3,
-      })
+      });
       return false;
     }
     invokeSendMessage(msgObj);
@@ -100,6 +100,8 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
           size={'small'}
           title={ele.key}
           placeholder={paramsVal[ele.key] || ele.key}
+          defaultValue={paramsVal[ele.key] || ''}
+          onPressEnter={() => handleSendTemplate(tempItem)}
         />
       )
     );
@@ -112,6 +114,8 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
             className='w-96 h-4/6 overflow-y-auto text-slate-900'
             itemLayout='horizontal'
             dataSource={templates}
+            rowKey={'name'}
+            pagination={templates.length < 6 ? false : { position: 'bottom', pageSize: 4, align: 'start', size: 'small' }}
             renderItem={(item, index) => (
               <List.Item>
                 <List.Item.Meta
@@ -130,6 +134,11 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
                         <div className='text-slate-500'>{renderForm(item)}</div>
                         {item.components?.footer?.[0] ? <div className=''>{item.components.footer[0].text || ''}</div> : null}
                       </div>
+                      {/* <div className='text-right px-2'>
+                        <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
+                          Send
+                        </Button>
+                      </div> */}
                     </>
                   }
                 />