模板搜索和分页

src/views/Conversations/Components/InputTemplate.jsx

@@ -29,9 +29,17 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
 
   const [openTemplates, setOpenTemplates] = useState(false);
-  const handleOpenChange = (newOpen) => {
-    setOpenTemplates(newOpen);
+  const [dataSource, setDataSource] = useState(templates);
+  const [searchContent, setSearchContent] = useState('');
+  const handleSearchTemplates = (val) => {
+    if (val.toLowerCase().trim() !== '') {
+      const res = templates.filter((item) => item.name.includes(val.toLowerCase().trim()) || item.components_origin.some((itemc) => itemc.text.toLowerCase().includes(val.toLowerCase().trim())));
+      setDataSource(res);
+      return false;
+    }
+    setDataSource(templates);
   };
+
   const handleSendTemplate = (fromTemplate) => {
     const mergeInput = { ...cloneDeep(valueMapped), ...activeInput[fromTemplate.name] };
     let valid = true;
@@ -51,7 +59,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 !== (paramText).filter(s => s).length ? false : valid;
+          valid = keys.length !== paramText.filter((s) => s).length ? false : valid;
           return {
             type: citem.type.toLowerCase(),
             parameters: params,
@@ -110,46 +118,58 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
     <>
       <Popover
         content={
-          <List
-            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
-                  className=' '
-                  title={
-                    <Flex justify={'space-between'}>
-                      <>{item.components.header?.[0]?.text || item.name}</>
-                      <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
-                        Send
-                      </Button>
-                    </Flex>
-                  }
-                  description={
-                    <>
-                      <div className='divide-dashed divide-x-0 divide-y divide-gray-300'>
-                        <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'>
+          <>
+            <Input.Search
+              onSearch={handleSearchTemplates}
+              allowClear
+              value={searchContent}
+              onChange={(e) => {
+                setSearchContent(e.target.value);
+                handleSearchTemplates(e.target.value);
+              }}
+              placeholder='搜索名称'
+            />
+            <List
+              className='w-96 h-4/6 overflow-y-auto text-slate-900'
+              itemLayout='horizontal'
+              dataSource={dataSource}
+              rowKey={'name'}
+              pagination={dataSource.length < 6 ? false : { position: 'bottom', pageSize: 5, align: 'start', size: 'small' }}
+              renderItem={(item, index) => (
+                <List.Item>
+                  <List.Item.Meta
+                    className=' '
+                    title={
+                      <Flex justify={'space-between'}>
+                        <>{item.components.header?.[0]?.text || item.name}</>
+                        <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
+                          Send
+                        </Button>
+                      </Flex>
+                    }
+                    description={
+                      <>
+                        <div className='divide-dashed divide-x-0 divide-y divide-gray-300'>
+                          <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> */}
-                    </>
-                  }
-                />
-              </List.Item>
-            )}
-          />
+                      </>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </>
         }
         title='🙋打招呼'
         trigger='click'
         open={openTemplates}
-        onOpenChange={handleOpenChange}>
+        onOpenChange={setOpenTemplates}>
         <Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={disabled} />
       </Popover>
     </>