@messenger-box/platform-browser 10.0.3-alpha.16 → 10.0.3-alpha.160

package/src/components/messenger/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Row, Input } from 'antd';
 import {
     useGetMessagesQuery,
     useSendMessagesMutation,
@@ -9,12 +8,10 @@ import {
 } from 'common/graphql';
 import { IFileInfo } from 'common';
 import { HiOutlinePaperClip } from '@react-icons/all-files/hi/HiOutlinePaperClip';
-import { MdOutlineEmojiEmotions } from 'react-icons/md';
-import { css } from '@emotion/css';
+import { MdSentimentSatisfied } from '@react-icons/all-files/md/MdSentimentSatisfied';
 import { Picker } from 'emoji-mart';
 import 'emoji-mart/css/emoji-mart.css';
 import { useUploadFiles } from '@messenger-box/platform-client';
-import { styleSheet3 } from './messagesList/style';
 import { MessagesList } from './messagesList';
 
 interface PropsTypes {
@@ -23,37 +20,27 @@ interface PropsTypes {
 }
 
 export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) => {
-    document.getElementsByClassName('demo')[0].setAttribute('style', `{{overflow: 'hidden'}}`);
-    const [enterValue, setEnterValue] = useState<string>('');
-    const [showThread, setShowThread] = useState<boolean>(false);
-    const [flag, setFlag] = useState<boolean>(false);
+    const { t } = useTranslation();
+    const [enterValue, setEnterValue] = useState('');
+    const [showEmoji, setShowEmoji] = useState(false);
+    const [threadEmoji, setThreadEmoji] = useState(false);
+    const [showThread, setShowThread] = useState(false);
+    const fileUploader = useRef<HTMLInputElement>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
     const [userMessagesList, setUserMessagesList] = useState<any>([]);
     const [chosenEmoji, setChosenEmoji] = useState(null);
     const [displayEmoji, setDisplayEmoji] = useState(false);
     const [day, setDay] = useState<string>('Today');
-    const [threadEmoji, setThreadEmoji] = useState(false);
+    const [flag, setFlag] = useState<boolean>(false);
     const [files, setFiles] = useState([]);
     const { startUpload } = useUploadFiles();
-    const { t } = useTranslation();
 
-    // let token;
-    // useEffect(() => {
-    //     token = window.localStorage.getItem('access_token');
-    // }, []);
     const { data, loading, error, refetch } = useGetMessagesQuery({
         variables: {
             channelId: channel.id,
         },
         fetchPolicy: 'cache-first',
     });
-    // useEffect(() => {
-    //     if (isRefetch) {
-    //         refetch().then((value) => {
-    //             setUserMessagesList(value.data.messages.data);
-    //             scrollToBottom();
-    //         });
-    //     }
-    // }, [isRefetch])
     useEffect(() => {
         if (!loading) {
             setUserMessagesList(data?.messages?.data);
@@ -70,8 +57,6 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
                 },
             });
         },
-        // context: {headers: {Authorization: token}},
-        // refetchQueries: ['GetMessages']
     });
 
     const handleEnterButton = useCallback(
@@ -114,10 +99,7 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
         [channel, files, enterValue],
     );
 
-    const [deleteMsg, {}] = useDeleteMessageMutation({
-        // context: {headers: {Authorization: token}},
-        // refetchQueries: ['GetMessages']
-    });
+    const [deleteMsg, {}] = useDeleteMessageMutation({});
     const handleDeleteMessage = (id) => {
         deleteMsg({
             variables: {
@@ -129,9 +111,7 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
     const onEmojiClick = (event, emojiObject) => {
         setChosenEmoji(emojiObject);
     };
-    const [editMessage, {}] = useEditMessageMutation({
-        // refetchQueries: ['GetMessages']
-    });
+    const [editMessage, {}] = useEditMessageMutation({});
     const clickRef = useRef();
     const checkIfClickedOutside = (e) => {
         const node = clickRef.current as any;
@@ -154,7 +134,6 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
     }, [displayEmoji, threadEmoji]);
     const handleOnSelect = (emoji) => {
         setEnterValue(enterValue + emoji.native);
-        // setDisplayEmoji(false);
     };
     const emojiClick = (type) => {
         if (type === 'main') {
@@ -164,12 +143,10 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
             setThreadEmoji(true);
         }
     };
-    const messagesEndRef = useRef(null);
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
 
-    const fileUploader = useRef(null);
     const fileClick = () => {
         fileUploader.current.click();
     };
@@ -229,30 +206,99 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
         });
     }, [files]);
 
-    console.log(channel);
     return (
-        <div className={css(styleSheet3.customInputStyle)} ref={clickRef}>
-            <div className="chat_container">
-                <div className="left_chat_box">
-                    <div className="msg_list">
-                        <Row gutter={[24, 6]} className="msg_row">
-                            <Col>
-                                <MessagesList
-                                    channel={channel}
-                                    userMessagesList={userMessagesList}
-                                    handleShowSideBar={handleShowSideBar}
-                                    handleDeleteMessage={handleDeleteMessage}
-                                    handleEditMessage={handleEditMessage}
-                                    currentUsrId={currentUsrId}
+        <div className="flex flex-col h-full">
+            <div className="flex flex-1 min-h-0">
+                {/* Main Content */}
+                <div className="flex-1 flex flex-col">
+                    <div className="flex-1 overflow-y-auto">
+                        <MessagesList
+                            userMessagesList={userMessagesList}
+                            handleShowSideBar={handleShowSideBar}
+                            handleDeleteMessage={handleDeleteMessage}
+                            handleEditMessage={handleEditMessage}
+                            channel={channel}
+                            currentUsrId={currentUsrId}
+                        />
+                        <div ref={messagesEndRef} />
+                    </div>
+
+                    {/* Message Input Area */}
+                    <div className="p-4 border-t border-gray-200">
+                        {displayEmoji && (
+                            <div className="absolute bottom-20">
+                                <Picker
+                                    onSelect={handleOnSelect}
+                                    native={true}
+                                    set="apple"
+                                    emoji="point_up"
+                                    title={t('messenger_box_browser.pick_your_emoji')}
+                                    emojiSize={24}
+                                    perLine={6}
+                                    color="#ae65c5"
+                                    sheetSize={16}
+                                    showPreview={true}
+                                    showSkinTones={false}
+                                    notFoundEmoji="sleuth_or_spy"
                                 />
-                                <div ref={messagesEndRef} />
-                            </Col>
-                        </Row>
+                            </div>
+                        )}
+                        <div className="relative">
+                            <input
+                                value={enterValue}
+                                onChange={(e) => setEnterValue(e.target.value)}
+                                onKeyPress={(e) => e.key === 'Enter' && handleEnterButton(e)}
+                                placeholder={t('messenger_box_browser.please_enter')}
+                                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            />
+                            <div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center space-x-2">
+                                <button
+                                    onClick={fileClick}
+                                    className="p-2 text-gray-500 hover:text-gray-700 transition-colors"
+                                >
+                                    <HiOutlinePaperClip className="w-5 h-5" />
+                                </button>
+                                <button
+                                    onClick={(e) => emojiClick('main')}
+                                    className="p-2 text-gray-500 hover:text-gray-700 transition-colors"
+                                >
+                                    <MdSentimentSatisfied className="w-5 h-5" />
+                                </button>
+                            </div>
+                        </div>
+                        <input type="file" ref={fileUploader} className="hidden" onChange={handleFileChange} />
+                        <div id="preview_img" className="mt-2 space-y-2"></div>
                     </div>
-                    <Row>
-                        <Col className="input_row">
-                            <div className="input_class">
-                                {displayEmoji ? (
+                </div>
+
+                {/* Thread Sidebar - Commented out for now */}
+                {/*showThread && (
+                    <div className="w-80 border-l border-gray-200 flex flex-col">
+                        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+                            <div>
+                                <span className="font-medium">Thread</span>
+                                <button className="ml-2 text-blue-600 hover:text-blue-700">surveybot</button>
+                            </div>
+                            <button
+                                onClick={handleShowSideBar}
+                                className="text-gray-500 hover:text-gray-700"
+                            >
+                                <IoIosClose className="w-6 h-6" />
+                            </button>
+                        </div>
+                        <div className="flex-1 overflow-y-auto">
+                            <ThreadMessagesList
+                                userMessagesList={userMessagesList}
+                                handleShowSideBar={handleShowSideBar}
+                                handleDeleteMessage={handleDeleteMessage}
+                                handleEditMessage={{}}
+                                channel={channel}
+                            />
+                            <div ref={messagesEndRef} />
+                        </div>
+                        <div className="p-4 border-t border-gray-200">
+                            {threadEmoji && (
+                                <div className="absolute bottom-20 right-4">
                                     <Picker
                                         onSelect={handleOnSelect}
                                         native={true}
@@ -267,115 +313,34 @@ export const MessengerComponent: FC<PropsTypes> = ({ channel, currentUsrId }) =>
                                         showSkinTones={false}
                                         notFoundEmoji="sleuth_or_spy"
                                     />
-                                ) : (
-                                    ''
-                                )}
-                                <div className="input_msg">
-                                    <div style={{ display: 'flex', position: 'relative' }}>
-                                        <Input
-                                            value={enterValue}
-                                            onChange={(e: any) => setEnterValue(e?.target?.value)}
-                                            onPressEnter={(e) => handleEnterButton(e)}
-                                            placeholder={t('messenger_box_browser.please_enter')}
-                                            className="msg_input"
-                                        />
-                                        <div className="icon_box">
-                                            <div className="icon_style">
-                                                <input
-                                                    type="file"
-                                                    onChange={handleFileChange}
-                                                    ref={fileUploader}
-                                                    style={{ display: 'none' }}
-                                                    multiple={true}
-                                                />
-                                                <button style={{ border: '0px' }} onClick={fileClick}>
-                                                    <HiOutlinePaperClip />
-                                                </button>
-                                            </div>
-                                            <div className="icon_style">
-                                                <button style={{ border: '0px' }} onClick={(e) => emojiClick('main')}>
-                                                    <MdOutlineEmojiEmotions />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div id="preview_img" className="preview_imgs"></div>
+                                </div>
+                            )}
+                            <div className="relative">
+                                <input
+                                    value={enterValue}
+                                    onChange={(e) => setEnterValue(e.target.value)}
+                                    onKeyPress={(e) => e.key === 'Enter' && handleEnterButton(e)}
+                                    placeholder={t('messenger_box_browser.please_enter')}
+                                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                />
+                                <div className="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center space-x-2">
+                                    <button
+                                        onClick={fileClick}
+                                        className="p-2 text-gray-500 hover:text-gray-700 transition-colors"
+                                    >
+                                        <HiOutlinePaperClip className="w-5 h-5" />
+                                    </button>
+                                    <button
+                                        onClick={(e) => emojiClick('thread')}
+                                        className="p-2 text-gray-500 hover:text-gray-700 transition-colors"
+                                    >
+                                        <MdSentimentSatisfied className="w-5 h-5" />
+                                    </button>
                                 </div>
                             </div>
-                        </Col>
-                    </Row>
-                </div>
-                {/*{showThread ? (
-                    <div className="right_chat_box">
-                        <div className="thread_head">
-                            <div>
-                                <span>Thread</span>
-                                <button>surveybot</button>
-                            </div>
-                            <button onClick={handleShowSideBar} style={{ border: '0px', fontSize: '20px' }}>
-                                <IoIosClose />
-                            </button>
-                        </div>
-                        <div className="msg_list">
-                            <Row gutter={[24, 6]} className="msg_row">
-                                <Col>
-                                    <ThreadMessagesList
-                                        userMessagesList={userMessagesList}
-                                        handleShowSideBar={handleShowSideBar}
-                                        handleDeleteMessage={handleDeleteMessage}
-                                        handleEditMessage={{}}
-                                        channel={channel}
-                                    />
-                                    <div ref={messagesEndRef} />
-                                </Col>
-                                <Col className="thread_input_row">
-                                    <div className="input_class">
-                                        {threadEmoji ? (
-                                            <Picker
-                                                onSelect={handleOnSelect}
-                                                native={true}
-                                                set="apple"
-                                                emoji="point_up"
-                                                title={t('messenger_box_browser.pick_your_emoji')}
-                                                emojiSize={24}
-                                                perLine={6}
-                                                color="#ae65c5"
-                                                sheetSize={16}
-                                                showPreview={true}
-                                                showSkinTones={false}
-                                                notFoundEmoji="sleuth_or_spy"
-                                            />
-                                        ) : (
-                                            ''
-                                        )}
-                                        <Input
-                                            value={enterValue}
-                                            onChange={(e: any) => setEnterValue(e?.target?.value)}
-                                            onPressEnter={(e) => handleEnterButton(e)}
-                                            placeholder={t('messenger_box_browser.please_enter')}
-                                            className="msg_input"
-                                        />
-                                        <div className="icon_box">
-                                            <div className="icon_style">
-                                                <input type="file" ref={fileUploader} style={{ display: 'none' }} />
-                                                <button style={{ border: '0px' }} onClick={fileClick}>
-                                                    <HiOutlinePaperClip />
-                                                </button>
-                                            </div>
-                                            <div className="icon_style">
-                                                <button style={{ border: '0px' }} onClick={(e) => emojiClick('thread')}>
-                                                    <MdOutlineEmojiEmotions />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </Col>
-                            </Row>
                         </div>
                     </div>
-                ) : (
-                    ''
-                )}*/}
+                )*/}
             </div>
         </div>
     );