perf: WABA模板

src/actions/ConversationActions.js

@@ -12,9 +12,9 @@ import dayjs from 'dayjs';
 export const fetchTemplates = async (params) => {
   const data = await fetchJSON(`${API_HOST}/listtemplates`, params);
   const canUseTemplates = (data?.result?.items || [])
-    .filter((_t) => _t.status === 'APPROVED')
+    .filter((_t) => _t.status === 'APPROVED' && _t.name !== 'say_hello_from_trip_advisor')
     .map((ele) => ({ ...ele, components_origin: ele.components, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) }));
-  const topName = ['free_style_7', 'say_hello_from_trip_advisor', 'free_style_2', 'free_style_1', 'free_style_3', 'free_style_4'];
+  const topName = ['free_style_7', 'online_inquiry_received','say_hello_again', 'first_message_for_not_reply', 'free_style_2', 'free_style_1', 'free_style_3', 'free_style_4'];
   const top = sortArrayByOrder( canUseTemplates.filter((_t) => topName.includes(_t.name)), 'name', topName);
   const raw = canUseTemplates.filter((_t) => !topName.includes(_t.name));
   return [...top, ...raw];

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

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, memo, useMemo, useCallback } from 'react';
-import { App, Popover, Flex, Button, List, Input, Tabs, Tag, Alert } from 'antd';
+import { App, Popover, Flex, Button, List, Input, Tabs, Tag, Alert, Divider } from 'antd';
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
 import useAuthStore from '@/stores/AuthStore';
 import useConversationStore from '@/stores/ConversationStore';
@@ -26,6 +26,7 @@ const splitTemplate = (template) => {
 // UTILITY
 // MARKETING
 const templateCaterogyText = { 'UTILITY': '跟进', 'MARKETING': '营销' }
+const templateCaterogyTipText = { 'UTILITY': '触达率高', 'MARKETING': '' }
 
 const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, activeInput }) => {
   const currentConversation = useConversationStore((state) => state.currentConversation);
@@ -115,7 +116,10 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
             className=' '
             title={
               <Flex justify={'space-between'}>
-                <span>{item.components.header?.[0]?.text || item.name}<Tag style={{...TagColorStyle(item.language.toUpperCase(), true)}} className='ml-1'>{item.language.toUpperCase()}</Tag><Tag style={{...TagColorStyle(item.category.toUpperCase(), true)}}>{templateCaterogyText[item.category]}</Tag></span>
+                <span>{item.components.header?.[0]?.text || item.name}<Tag style={{...TagColorStyle(item.language.toUpperCase(), true)}} className='ml-1'>{item.language.toUpperCase()}</Tag>
+                {/* <Tag style={{...TagColorStyle(item.category.toUpperCase(), true)}}>{templateCaterogyText[item.category]}</Tag> */}
+                {templateCaterogyTipText[item.category] && <Tag style={{...TagColorStyle(item.category.toUpperCase(), true)}}>{templateCaterogyTipText[item.category]}</Tag>}
+                </span>
                 <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
                   Send
                 </Button>
@@ -248,9 +252,25 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
         fresh
         forceRender
         destroyTooltipOnHide={true}
+        title={
+          <div className='flex justify-between mt-0 gap-4 items-center'>
+            <Input.Search prefix={'💬'}
+              ref={searchInputRef}
+              onSearch={handleSearchTemplates}
+              allowClear
+              value={searchContent}
+              onChange={(e) => {
+                setSearchContent(e.target.value);
+                handleSearchTemplates(e.target.value);
+              }}
+              placeholder='搜索名称'
+            />
+            <Button size='small' onClick={() => setOpenTemplates(false)}>&times;</Button>
+          </div>
+        }
         content={
           <>
-            <div className='flex justify-between mt-2 gap-4 content-center'>
+            {/* <div className='flex justify-between mt-2 gap-4 items-center'>
               <Input.Search prefix={'🙋'}
                 ref={searchInputRef}
                 onSearch={handleSearchTemplates}
@@ -263,16 +283,16 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
                 placeholder='搜索名称'
               />
               <Button size='small' onClick={() => setOpenTemplates(false)}>&times;</Button>
-            </div>
+            </div> */}
             {isEmpty(dataSource) && isEmpty(searchContent) ? (
             <Tabs items={[
-              { key: 'marketing', label: '营销', children: <CategoryList key={'utility-templates'} dataSource={templateCMapped?.MARKETING || []} {...{ handleSendTemplate, activeInput, onInput, valueMapped}} />},
-              { key: 'utility', label: '持续跟进', children: <CategoryList key={'utility-templates'} dataSource={templateCMapped?.UTILITY || []} {...{ handleSendTemplate, activeInput, onInput, valueMapped}} />},
+              // { key: 'marketing', label: '首次问候', children: <CategoryList key={'utility-templates'} dataSource={templateCMapped?.MARKETING || []} {...{ handleSendTemplate, activeInput, onInput, valueMapped}} />},
+              // { key: 'utility', label: '再次沟通', children: <CategoryList key={'utility-templates'} dataSource={templateCMapped?.UTILITY || []} {...{ handleSendTemplate, activeInput, onInput, valueMapped}} />},
 
               ...(Object.keys(templateLangMapped).map(lang => ({
                 key: lang, label: lang.toUpperCase(), children: <CategoryList key={'lang-templates-'+lang} dataSource={templateLangMapped[lang]} {...{ handleSendTemplate, activeInput, onInput, valueMapped}} />
               })))
-            ]} defaultActiveKey='utility' tabBarExtraContent={{right: <Alert type='info' message='为提升账号质量, 请尽量使用跟进模板' showIcon className='py-0' />}} size='small' />
+            ]} defaultActiveKey='utility' tabBarExtraContent={{right: <Alert type='info' message='为提升账号质量, 请尽量使用跟进模板' showIcon className='py-0' />, }} size='small' />
           ) :
             (
               // Search result