模板参数输入

src/views/Conversations/Components/Input/Template.jsx

@@ -1,10 +1,9 @@
 import { useState, useRef, useEffect } from 'react';
 import { App, Popover, Flex, Button, List, Input } from 'antd';
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
-import useAuthStore from '@/stores/AuthStore'
+import useAuthStore from '@/stores/AuthStore';
 import useConversationStore from '@/stores/ConversationStore';
 import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils';
-import { v4 as uuid } from 'uuid';
 import { replaceTemplateString } from '@/lib/msgUtils';
 
 const splitTemplate = (template) => {
@@ -24,9 +23,9 @@ const splitTemplate = (template) => {
 const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const searchInputRef = useRef(null);
   const { notification } = App.useApp();
-  const loginUser = useAuthStore(state => state.loginUser);
+  const loginUser = useAuthStore((state) => state.loginUser);
-  const currentConversation = useConversationStore(state => state.currentConversation);
+  const currentConversation = useConversationStore((state) => state.currentConversation);
-  const templates = useConversationStore(state => state.templates);
+  const templates = useConversationStore((state) => state.templates);
   // 用于替换变量: customer, agent
   const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
   useEffect(() => {
@@ -92,35 +91,44 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
     });
   };
 
-  const renderForm = (tempItem) => {
+  const renderForm = ({ tempItem }) => {
     const templateText = tempItem.components.body?.[0]?.text || '';
     const tempArr = splitTemplate(templateText);
     const keys = (templateText.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
     const paramsVal = keys.reduce((r, k) => ({ ...r, [k]: getNestedValue(valueMapped, [k]) }), {});
 
-    return tempArr.map((ele) =>
+    return (
-      typeof ele === 'string' ? (
+      <>
-        <span key={ele.trim()} className=' text-wrap'>
+        {tempArr.map((ele) =>
-          {ele}
+          typeof ele === 'string' ? (
-        </span>
+            <span key={ele.trim()} className=' text-wrap'>
-      ) : (
+              {ele}
-        <Input
+            </span>
-          key={ele.key}
+          ) : (
-          onChange={(e) => onInput(tempItem, ele.key, e.target.value, paramsVal)}
+            <Input
-          className='w-auto max-w-24'
+              key={ele.key}
-          size={'small'}
+              onChange={(e) => {
-          title={ele.key}
+                onInput(tempItem, ele.key, e.target.value, paramsVal);
-          placeholder={paramsVal[ele.key] || ele.key}
+              }}
-          // defaultValue={paramsVal[ele.key] || ''}
+              className='w-auto max-w-24'
-          onPressEnter={() => handleSendTemplate(tempItem)}
+              size={'small'}
-        />
+              title={ele.key}
-      )
+              placeholder={paramsVal[ele.key] || ele.key}
+              defaultValue={paramsVal[ele.key] || ''}
+              onPressEnter={() => handleSendTemplate(tempItem)}
+            />
+          )
+        )}
+      </>
     );
   };
   return (
     <>
-      <Popover overlayClassName='w-3/5'
+      <Popover
+        overlayClassName='w-3/5'
         fresh
+        forceRender
+        destroyTooltipOnHide={true}
         content={
           <>
             <Input.Search
@@ -141,7 +149,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
               rowKey={'name'}
               pagination={dataSource.length < 4 ? false : { position: 'bottom', pageSize: 3, align: 'start', size: 'small' }}
               renderItem={(item, index) => (
-                <List.Item>
+                <List.Item key={`${currentConversation.sn}_${item.name}`}>
                   <List.Item.Meta
                     className=' '
                     title={
@@ -155,14 +163,9 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
                     description={
                       <>
                         <div className=' max-h-40 overflow-y-auto divide-dashed divide-x-0 divide-y divide-gray-300'>
-                          <div className='text-slate-500'>{renderForm(item)}</div>
+                          <div className='text-slate-500'>{renderForm({ tempItem: 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> */}
                       </>
                     }
                   />