多行文本输入, 输入区域样式

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>

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>
   );
 };

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>
     </>
   );

tailwind.config.js

@@ -15,6 +15,7 @@ export default {
         bg: '#ece5dd',
         me: '#ccd5ae',
       },
+      'primary': '#1ba784',
     },
     extend: {
       // gridTemplateColumns: {