模板搜索和分页

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) => {
+  const [dataSource, setDataSource] = useState(templates);
-    setOpenTemplates(newOpen);
+  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,12 +118,23 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
     <>
       <Popover
         content={
+          <>
+            <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={templates}
+              dataSource={dataSource}
               rowKey={'name'}
-            pagination={templates.length < 6 ? false : { position: 'bottom', pageSize: 4, align: 'start', size: 'small' }}
+              pagination={dataSource.length < 6 ? false : { position: 'bottom', pageSize: 5, align: 'start', size: 'small' }}
               renderItem={(item, index) => (
                 <List.Item>
                   <List.Item.Meta
@@ -145,11 +164,12 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
                 </List.Item>
               )}
             />
+          </>
         }
         title='🙋打招呼'
         trigger='click'
         open={openTemplates}
-        onOpenChange={handleOpenChange}>
+        onOpenChange={setOpenTemplates}>
         <Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={disabled} />
       </Popover>
     </>