From 21c0341a02960cd36eac1850eaeb35c6d6d4645b Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 2 Feb 2024 01:00:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E8=A1=8C=E6=96=87=E6=9C=AC=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5,=20=E8=BE=93=E5=85=A5=E5=8C=BA=E5=9F=9F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Conversations/ChatWindow.jsx        |  6 +--
 .../Components/InputComposer.jsx              | 42 ++++++++++++-------
 .../Components/InputTemplate.jsx              | 15 +++++--
 tailwind.config.js                            |  1 +
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/views/Conversations/ChatWindow.jsx b/src/views/Conversations/ChatWindow.jsx
index fd7605d..7b62c6f 100644
--- a/src/views/Conversations/ChatWindow.jsx
+++ b/src/views/Conversations/ChatWindow.jsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Layout, Spin } from 'antd';
 import MessagesHeader from './Components/MessagesHeader';
 import Messages from './Components/Messages';
-import InputBox from './Components/InputComposer';
+import InputComposer from './Components/InputComposer';
 import ConversationsList from './Components/ConversationsList';
 import CustomerProfile from './Components/CustomerProfile';
 
@@ -39,8 +39,8 @@ const ChatWindow = () => {
                 <Messages />
               </div>
             </Content>
-            <Footer className='ant-layout-sider-light p-1'>
-              <InputBox />
+            <Footer className='ant-layout-sider-light p-1 max-h-32'>
+              <InputComposer />
             </Footer>
           </Layout>
         </Content>
diff --git a/src/views/Conversations/Components/InputComposer.jsx b/src/views/Conversations/Components/InputComposer.jsx
index 3c6a0b4..a212257 100644
--- a/src/views/Conversations/Components/InputComposer.jsx
+++ b/src/views/Conversations/Components/InputComposer.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { Input, Flex } from 'antd';
+import { Input, Flex, Button } from 'antd';
 // import { Input } from 'react-chat-elements';
 import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
 import { useAuthContext } from '@/stores/AuthContext';
 import { sentNewMessage } from '@/actions/ConversationActions';
-import { SendOutlined } from '@ant-design/icons';
+import { SendOutlined, MessageOutlined, SmileOutlined } from '@ant-design/icons';
 import { isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
@@ -13,7 +13,7 @@ import InputTemplate from './InputTemplate';
 const InputBox = () => {
   const { loginUser } = useAuthContext();
   const { userId } = loginUser;
-  const { websocket, currentConversation, } = useConversationState();
+  const { websocket, currentConversation } = useConversationState();
   const dispatch = useConversationDispatch();
   const [textContent, setTextContent] = useState('');
 
@@ -47,20 +47,30 @@ const InputBox = () => {
 
   return (
     <div>
-      <Flex gap={8}>
-        <InputTemplate disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
-        <Input.Search
-          disabled={!talkabled}
-          placeholder='Type message here'
-          // enterButton={'Send'}
-          enterButton={<SendOutlined />}
-          size='large'
-          onSearch={handleSendText}
-          value={textContent}
-          onChange={(e) => setTextContent(e.target.value)}
-        />
+      <Input.TextArea
+        size='large'
+        placeholder='Enter for Send, Shift+Enter for new line'
+        rows={2}
+        disabled={!talkabled}
+        value={textContent}
+        onChange={(e) => setTextContent(e.target.value)}
+        className='rounded-b-none'
+        onPressEnter={(e) => {
+          if (!e.shiftKey) {
+            e.preventDefault();
+            handleSendText();
+          }
+        }}
+        autoSize={{minRows: 2, maxRows: 6}}
+      />
+      <Flex justify={'space-between'} className=' bg-gray-200 p-1'>
+        <Flex gap={4} className='divide-y-0 divide-x divide-solid divide-gray-500 '>
+          <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
+        </Flex>
+        <Button key={'send-btn'} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled}>
+          Send
+        </Button>
       </Flex>
-      <div></div>
     </div>
   );
 };
diff --git a/src/views/Conversations/Components/InputTemplate.jsx b/src/views/Conversations/Components/InputTemplate.jsx
index 92dee32..50495bd 100644
--- a/src/views/Conversations/Components/InputTemplate.jsx
+++ b/src/views/Conversations/Components/InputTemplate.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { App, Popover, Flex, Button, List, Input } from 'antd';
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
 import { useAuthContext } from '@/stores/AuthContext';
@@ -22,18 +22,25 @@ const splitTemplate = (template) => {
   return obj;
 };
 const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
+  const searchInputRef = useRef(null);
   const { notification } = App.useApp();
   const { loginUser } = useAuthContext();
   const { currentConversation, templates } = useConversationState();
   // 用于替换变量: customer, agent
   const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
+  useEffect(() => {
+    setDataSource(templates);
+    return () => {};
+  }, [templates]);
 
   const [openTemplates, setOpenTemplates] = useState(false);
   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())));
+      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;
     }
@@ -117,9 +124,11 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   return (
     <>
       <Popover
+        fresh
         content={
           <>
             <Input.Search
+              ref={searchInputRef}
               onSearch={handleSearchTemplates}
               allowClear
               value={searchContent}
@@ -170,7 +179,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
         trigger='click'
         open={openTemplates}
         onOpenChange={setOpenTemplates}>
-        <Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={disabled} />
+        <Button type='text' className=' rounded-none text-primary' icon={<MessageOutlined />} size={'middle'} disabled={disabled} />
       </Popover>
     </>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index acc44fb..238d52f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,7 @@ export default {
         bg: '#ece5dd',
         me: '#ccd5ae',
       },
+      'primary': '#1ba784',
     },
     extend: {
       // gridTemplateColumns: {