feat: WABA 切换账户

src/views/Conversations/Online/ReplyWrapper.jsx

@@ -1,6 +1,6 @@
 import { Children, createContext, useEffect, useState } from 'react';
-import { Tabs } from 'antd';
-import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
+import { Dropdown, Space, Tabs } from 'antd';
+import { MailFilled, MailOutlined, WhatsAppOutlined, DownOutlined } from '@ant-design/icons';
 import InputComposer from './Input/InputComposer';
 import EmailComposer from './Input/EmailChannelTab';
 import { WABIcon } from '@/components/Icons';
@@ -8,8 +8,36 @@ import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 
 const DEFAULT_CHANNEL = 'waba';
+const Wabas = [
+  { key: 'Global Highlights', label: 'Global Highlights' },
+  { key: 'Global Highlights-Multi', label: 'Global Highlights-Multi' },
+];
+const Wabas_mapped = Wabas.reduce((acc, cur) => ({...acc, [cur.key]: cur}), {});
 
-const ReplyWrapper = ({ ...props }) => {
+const WABASwitcher = ({ onSelect, }) => {
+  const [pickV, setPickV] = useState({}); // todo: 全局管理? 后端管理?
+  return (
+    <Dropdown
+    // trigger={['contextMenu', 'hover']}
+      selectable
+      menu={{
+        items: Wabas,
+        onClick: ({ key, domEvent, ...x }) => {
+          domEvent.stopPropagation();
+          setPickV(Wabas_mapped[key]);
+          onSelect?.(Wabas_mapped[key]);
+        },
+      }}>
+      <Space>
+        <WABIcon />
+        {pickV.label || 'WABA'}
+        <DownOutlined />
+      </Space>
+    </Dropdown>
+  );
+};
+
+const ReplyWrapper = () => {
   const [activeChannel, setActiveChannel] = useState(DEFAULT_CHANNEL);
   const onChannelTabsChange = (activeKey) => {
     setActiveChannel(activeKey);
@@ -26,7 +54,8 @@ const ReplyWrapper = ({ ...props }) => {
   }, [activeMessages]);
 
   const replyTypes = [
-    { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
+    { key: 'waba0', label: (<WABASwitcher />), children: <InputComposer isWABA channel={'waba'} /> },
+    // { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
     { key: 'email', label: 'Email', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer /> },
     { key: 'whatsapp', label: 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
   ];