style:

src/views/Conversations/Components/CustomerProfile.jsx

@@ -27,8 +27,8 @@ const CustomerProfile = (({ customer }) => {
   const { quotes, contact, last_contact, ...order } = orderInfo;
 
   return (
-    <div className=' divide-x-0 divide-y divide-slate-300 divide-dotted'>
+    <div className=' divide-x-0 divide-y divide-dashed divide-gray-300 '>
-      <Card className='p-2'
+      <Card className='p-2 '
         bordered={false}
         title={order?.order_no}
         extra={<Radio.Group size={'small'} options={orderTags} value={'important'} onChange={({ target: { value } }) => {}} optionType='button' buttonStyle={'solid'} />}>

src/views/Conversations/Components/InputBox.jsx

@@ -4,14 +4,14 @@ import { Input, Button, Tabs, List, Space, Popover, Flex } from 'antd';
 import { useConversationContext } from '@/stores/Conversations/ConversationContext';
 import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils';
-import { v4 as uuid } from "uuid";
+import { v4 as uuid } from 'uuid';
 import { whatsappTemplatesParamMapped } from '@/lib/msgUtils';
 
-const InputBox = (({ onSend }) => {
+const InputBox = ({ onSend }) => {
   const { currentConversation, templates } = useConversationContext();
   const [textContent, setTextContent] = useState('');
 
-  const talkabled = ! isEmpty( currentConversation.sn);
+  const talkabled = !isEmpty(currentConversation.sn);
 
   const handleSendText = () => {
     if (typeof onSend === 'function' && textContent.trim() !== '') {
@@ -32,7 +32,7 @@ const InputBox = (({ onSend }) => {
   const handleSendTemplate = (fromTemplate) => {
     console.log(fromTemplate, 'fromTemplate');
     if (typeof onSend === 'function') {
-      const _conversation = {...cloneDeep(currentConversation), };
+      const _conversation = { ...cloneDeep(currentConversation) };
       const msgObj = {
         type: 'whatsappTemplate',
         to: currentConversation.whatsapp_phone_number,
@@ -45,22 +45,24 @@ const InputBox = (({ onSend }) => {
           name: fromTemplate.name,
           language: { code: fromTemplate.language },
           ...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0
-            ? { components: [
+            ? {
-              {
+                components: [
-                'type': 'body',
+                  {
-                'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' }))
+                    'type': 'body',
-                // [
+                    'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })),
-                //   {
+                    // [
-                //     'type': 'text',
+                    //   {
-                //     'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
+                    //     'type': 'text',
-                //   },
+                    //     'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
-                //   { // debug:
+                    //   },
-                //     'type': 'text',
+                    //   { // debug:
-                //     'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
+                    //     'type': 'text',
-                //   },
+                    //     'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
-                // ],
+                    //   },
-              },
+                    // ],
-            ], }
+                  },
+                ],
+              }
             : {}),
         },
         template_origin: fromTemplate,
@@ -84,13 +86,19 @@ const InputBox = (({ onSend }) => {
               itemLayout='horizontal'
               dataSource={templates}
               renderItem={(item, index) => (
-                <List.Item
+                <List.Item>
-                  actions={[
+                  <List.Item.Meta
-                    <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
+                    className=' text-neutral-800'
-                      Send
+                    title={
-                    </Button>,
+                      <Flex justify={'space-between'}>
-                  ]}>
+                        <>{item.components.header?.[0]?.text || item.name}</>
-                  <List.Item.Meta className=' text-neutral-800' title={item.components.header?.[0]?.text || item.name} description={item.components.body?.[0]?.text} />
+                        <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
+                          Send
+                        </Button>
+                      </Flex>
+                    }
+                    description={item.components.body?.[0]?.text}
+                  />
                 </List.Item>
               )}
             />
@@ -99,12 +107,13 @@ const InputBox = (({ onSend }) => {
           trigger='click'
           open={openTemplates}
           onOpenChange={handleOpenChange}>
-          {/* <Button type="primary">Click me</Button> */}
           <Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={!talkabled} />
         </Popover>
-        <Input.Search disabled={!talkabled}
+        <Input.Search
+          disabled={!talkabled}
           placeholder='Type message here'
-          enterButton='Send'
+          // enterButton={'Send'}
+          enterButton={<SendOutlined />}
           size='large'
           onSearch={handleSendText}
           value={textContent}
@@ -114,6 +123,6 @@ const InputBox = (({ onSend }) => {
       <div></div>
     </div>
   );
-});
+};
 
 export default InputBox;

tailwind.config.js

@@ -1,15 +1,20 @@
 /** @type {import('tailwindcss').Config} */
+import colors from 'tailwindcss/colors'
+
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   darkMode: 'media',
   theme: {
     colors: {
-      'whatsapp': '#25D366',
+      ...colors,
-      'whatsapp-dark': '#075E54',
+      'whatsapp': {
-      'whatsapp-second': '#128c7e',
+        DEFAULT: '#25D366',
-      'whatsapp-gossip': '#dcf8c6',
+        dark: '#075E54',
-      'whatsapp-bg': '#ece5dd',
+        second: '#128c7e',
-      'whatsappme': '#ccd5ae',
+        gossip: '#dcf8c6',
+        bg: '#ece5dd',
+        me: '#ccd5ae',
+      },
     },
     extend: {
       // gridTemplateColumns: {
@@ -19,6 +24,7 @@ export default {
   },
   plugins: [],
   corePlugins: {
-    preflight: false
+    preflight: false,
+    divideColor: true,
   }
 };