@messenger-box/platform-browser 10.0.3-alpha.7 → 10.0.3-alpha.72

package/src/components/messenger/threadSidebar/index.tsx

@@ -2,23 +2,23 @@ import React, { useState, useRef, useEffect } from 'react';
 import { MessagesList } from './../messagesList/index';
 import { messagesData } from './../mock';
 import { IMessageList } from './../types/message';
-import { css } from '@emotion/css';
-import { Input, Col, Row } from 'antd';
 import { AiOutlineClose } from '@react-icons/all-files/ai/AiOutlineClose';
-import { HiOutlinePaperClip } from 'react-icons/hi';
-import { MdOutlineEmojiEmotions } from 'react-icons/md';
+import { HiOutlinePaperClip } from '@react-icons/all-files/hi/HiOutlinePaperClip';
+import { MdSentimentSatisfied } from '@react-icons/all-files/md/MdSentimentSatisfied';
 import { useTranslation } from 'react-i18next';
 import { Picker } from 'emoji-mart';
-import { styleSheet } from './style';
 import { PostMessage } from './../postMessage/postMessage';
 import { SidebarThreadList } from './../sidebarThreadList';
 
 export const ThreadSidebar = (props) => {
-    // const { handleEnterButton } = props;
     const [enterValue, setEnterValue] = useState<string>('');
     const { t } = useTranslation();
     const [flag, setFlag] = useState<boolean>(false);
     const [userMessagesReplyList, setUserMessagesReplyList] = useState<IMessageList | any>([]);
+    const [displayEmoji, setDisplayEmoji] = useState(false);
+    const messagesEndRef = useRef(null);
+    const fileUploader = useRef(null);
+
     useEffect(() => {
         if (flag === true) {
             setTimeout(() => {
@@ -36,94 +36,107 @@ export const ThreadSidebar = (props) => {
         }
         scrollToBottom();
     }, [flag]);
-    const messagesEndRef = useRef(null);
+
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
-    document.body.onclick = () => {
-        setDisplayEmoji(false);
-    };
-    const [displayEmoji, setDisplayEmoji] = useState(false);
-    const emojiClick = () => {
+
+    useEffect(() => {
+        const handleClickOutside = () => {
+            setDisplayEmoji(false);
+        };
+        document.body.addEventListener('click', handleClickOutside);
+        return () => {
+            document.body.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+
+    const emojiClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
         setDisplayEmoji(true);
     };
-    const fileUploader = useRef(null);
+
     const fileClick = () => {
         fileUploader.current.click();
     };
-    const handleEnterButton = (e) => {
-        setEnterValue(e.target.value);
-        setUserMessagesReplyList([
-            ...userMessagesReplyList,
-            {
-                threadId: Math.random(),
-                message: enterValue,
-                loginUser: true,
-                timeIsToday: true,
-            },
-        ]);
-        setEnterValue('');
-        setFlag(true);
+
+    const handleEnterButton = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' && enterValue.trim()) {
+            setUserMessagesReplyList([
+                ...userMessagesReplyList,
+                {
+                    threadId: Math.random(),
+                    message: enterValue,
+                    loginUser: true,
+                    timeIsToday: true,
+                },
+            ]);
+            setEnterValue('');
+            setFlag(true);
+        }
     };
 
     return (
-        <div className={css(styleSheet.ThreadSidebarStyles)}>
-            <Col>
-                <div className="close-icon">
-                    <AiOutlineClose />
-                </div>
-            </Col>
-            <Col md={16}>
+        <div className="flex flex-col h-full bg-white">
+            <div className="flex justify-end p-4">
+                <button className="text-gray-500 hover:text-gray-700 transition-colors">
+                    <AiOutlineClose className="w-5 h-5" />
+                </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto">
                 <SidebarThreadList userMessagesList={userMessagesReplyList} />
                 <div ref={messagesEndRef} />
-            </Col>
-            <Col md={16} className="input_row_thread">
-                <div className="input_class">
-                    {displayEmoji ? (
-                        <Picker
-                            native={true}
-                            set="apple"
-                            emoji="point_up"
-                            title={t('messenger_box_browser.pick_your_emoji')}
-                            emojiSize={24}
-                            perLine={6}
-                            color="#ae65c5"
-                            // skin={null}
-                            // defaultSkin={1}
-                            sheetSize={16}
-                            // emojisToShowFilter={null}
-                            showPreview={true}
-                            showSkinTones={false}
-                            // emojiTooltip={false}
-                            // autoFocus={false}
-                            // skinEmoji=""
-                            notFoundEmoji="sleuth_or_spy"
-                        />
-                    ) : (
-                        ''
+            </div>
+
+            <div className="p-4 border-t border-gray-200">
+                <div className="relative">
+                    {displayEmoji && (
+                        <div className="absolute bottom-full mb-2">
+                            <Picker
+                                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>
                     )}
-                    <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 />
+
+                    <div className="flex items-center space-x-2 bg-white rounded-lg border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
+                        <input
+                            type="text"
+                            value={enterValue}
+                            onChange={(e) => setEnterValue(e.target.value)}
+                            onKeyPress={handleEnterButton}
+                            placeholder={t('messenger_box_browser.please_enter')}
+                            className="flex-1 px-4 py-2 bg-transparent outline-none placeholder-gray-500"
+                        />
+
+                        <div className="flex items-center space-x-2 px-2">
+                            <input type="file" ref={fileUploader} className="hidden" />
+                            <button
+                                onClick={fileClick}
+                                className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 transition-colors"
+                            >
+                                <HiOutlinePaperClip className="w-5 h-5" />
                             </button>
-                        </div>
-                        <div className="icon_style">
-                            <button style={{ border: '0px' }} onClick={emojiClick}>
-                                <MdOutlineEmojiEmotions />
+                            <button
+                                onClick={emojiClick}
+                                className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 transition-colors"
+                            >
+                                <MdSentimentSatisfied className="w-5 h-5" />
                             </button>
                         </div>
                     </div>
                 </div>
-            </Col>
+            </div>
         </div>
     );
 };

package/src/components/messenger/types/message.ts

@@ -1,16 +1,17 @@
+export interface IUser {
+    id: string;
+    name: string;
+    avatar?: string;
+}
+
 export interface IMessageList {
-    id: number;
-    loginUser: boolean;
+    id: string;
     message: string;
-    timeIsToday: boolean;
-    isReply: boolean;
-    thread?: IMessageReplyList[]
-    isPin?: boolean
+    user_id: string;
+    create_at: number;
+    user?: IUser;
 }
 
-export interface IMessageReplyList {
-    threadId: number;
-    message: string
-    time: string;
-    timeIsToday: boolean;
+export interface IMessageReplyList extends IMessageList {
+    isBot?: boolean;
 }

package/src/components/post/channel_view/channel_view.tsx

@@ -44,7 +44,7 @@ export const ChannelView = (props) => {
 
     let createPost;
     if (deactivatedChannel) {
-        console.log(deactivatedChannel,'deactivatedChannel');
+        console.log(deactivatedChannel, 'deactivatedChannel');
         createPost = (
             <div className="post-create__container" id="post-create">
                 <div className="channel-archived__message">
@@ -75,7 +75,7 @@ export const ChannelView = (props) => {
     } else if (!baseProps.channelRolesLoading) {
         createPost = (
             <div className="post-create__container" id="post-create">
-                <CreatePost getChannelView={getChannelView} />
+                <CreatePost />
             </div>
         );
     }

package/src/components/post/create_post/create_post.tsx

@@ -5,18 +5,26 @@ import * as Utils from '../../../utils/utils';
 import { t } from '../../../utils/i18n';
 import { FormattedMessage } from 'react-intl';
 import TutorialTip from '../../post/tutorial/tutorial_tip/tutorial_tip';
+import { MdSentimentSatisfied } from '@react-icons/all-files/md/MdSentimentSatisfied';
+import { MdAttachFile } from '@react-icons/all-files/md/MdAttachFile';
 
-export const CreatePost = (props) => {
-    console.log({ props }, 'create post page');
-    const currentChannelProp = {
-        id: 'owsyt8n43jfxjpzh9np93mx1wa',
-        type: 'O',
-        display_name: 'default name',
+interface CreatePostProps {
+    draft?: {
+        message?: string;
     };
-    const { draft, fullWidthTextBox, canPost } = props;
-
-    const [message, setMessage] = useState(props?.draft?.message);
-    const [caretPosition, setCaretPosition] = useState(props?.draft?.message?.length);
+    fullWidthTextBox?: boolean;
+    canPost?: boolean;
+    readOnlyChannel?: boolean;
+}
+
+export const CreatePost: React.FC<CreatePostProps> = ({
+    draft,
+    fullWidthTextBox,
+    canPost = true,
+    readOnlyChannel = false,
+}) => {
+    const [message, setMessage] = useState(draft?.message || '');
+    const [caretPosition, setCaretPosition] = useState(draft?.message?.length || 0);
     const [submitting, setSubmitting] = useState(false);
     const [showPostDeletedModal, setShowPostDeletedModal] = useState(false);
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -25,201 +33,102 @@ export const CreatePost = (props) => {
     const [uploadsProgressPercent, setUploadsProgressPercent] = useState({});
     const [renderScrollbar, setRenderScrollbar] = useState(false);
     const [scrollbarWidth, setScrollbarWidth] = useState(0);
-    const [currentChannel, setCurrentChannel] = useState(currentChannelProp);
-    const [mentions, setMentions] = useState([]);
-    const [memberNotifyCount, setMemberNotifyCount] = useState(0);
-    const [errorClass, setErrorClass] = useState(null);
-    const [serverError, setServerError] = useState(null);
+    const [errorClass, setErrorClass] = useState<string | null>(null);
+    const [serverError, setServerError] = useState<string | null>(null);
     const [showTutorialTip, setShowTutorialTip] = useState(true);
 
-    const readOnlyChannel = props.readOnlyChannel || !canPost;
-
-    const topDiv = useRef();
-    const textboxRef = useRef();
-    const fileUploadRef = useRef();
-    const createPostControlsRef = useRef();
-
-    const ariaLabelMessageInput = Utils.localizeMessage(
-        'accessibility.sections.centerFooter',
-        'message input complimentary region',
-    );
+    const textboxRef = useRef<HTMLTextAreaElement>(null);
+    const fileUploadRef = useRef<HTMLInputElement>(null);
 
-    const createTutorialTip = () => {
-        const screens = [];
+    const isPostAllowed = !readOnlyChannel && canPost;
 
-        screens.push(
-            <div>
-                <h4>
-                    <FormattedMessage id="create_post.tutorialTip.title" defaultMessage="Send a message" />
-                </h4>
-                {/* <p>
-                    <FormattedMarkdownMessage
-                        id='create_post.tutorialTip1'
-                        defaultMessage='Type your first message and select **Enter** to send it.'
-                    />
-                </p>
-                <p>
-                    <FormattedMarkdownMessage
-                        id='create_post.tutorialTip2'
-                        defaultMessage='Use the **Attachments** and **Emoji** buttons to add files and emojis to your messages.'
-                    />
-                </p> */}
-            </div>,
-        );
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!message.trim() || !isPostAllowed) return;
 
-        return (
-            <TutorialTip
-                placement="top"
-                screens={screens}
-                overlayClass="tip-overlay--chat"
-                telemetryTag="tutorial_tip_1_sending_messages"
-            />
-        );
+        setSubmitting(true);
+        // Add your submission logic here
+        setMessage('');
+        setSubmitting(false);
     };
 
-    let tutorialTip = null;
-    if (showTutorialTip) {
-        tutorialTip = createTutorialTip();
-    }
-
-    let centerClass = '';
-    if (!fullWidthTextBox) {
-        centerClass = 'center';
-    }
-
-    let sendButtonClass = 'send-button theme';
-    // if (!shouldEnableSendButton()) {
-    //     sendButtonClass += ' disabled';
-    // }
-
-    let attachmentsDisabled = '';
-    if (!props.canUploadFiles) {
-        attachmentsDisabled = ' post-create--attachment-disabled';
-    }
-
-    let scrollbarClass = '';
-    if (renderScrollbar) {
-        scrollbarClass = ' scroll';
-    }
-
-    let callButton;
-    if (!readOnlyChannel && !props.shouldShowPreview) {
-        callButton = <h1>call button</h1>;
-        // callButton = <CallButton />;
-    }
-
-    let fileUpload;
-    if (!readOnlyChannel && !props.shouldShowPreview) {
-        fileUpload = (
-            <h1>text</h1>
-            // <FileUpload
-            //     ref={fileUploadRef}
-            //     fileCount={getFileCount()}
-            //     getTarget={getFileUploadTarget}
-            //     onFileUploadChange={handleFileUploadChange}
-            //     onUploadStart={handleUploadStart}
-            //     onFileUpload={handleFileUploadComplete}
-            //     onUploadError={handleUploadError}
-            //     onUploadProgress={handleUploadProgress}
-            //     postType='post'
-            //     channelId={currentChannel.id}
-            // />
-        );
-    }
-
-    let createMessage;
-    if (readOnlyChannel) {
-        createMessage = Utils.localizeMessage(
-            'create_post.read_only',
-            'This channel is read-only. Only members with permission can post here.',
-        );
-    } else {
-        createMessage = <h1>createMessage</h1>;
-        // createMessage = formatMessage(
-        //     { id: 'create_post.write', defaultMessage: 'Write to {channelDisplayName}' },
-        //     { channelDisplayName: currentChannel.display_name },
-        // );
-    }
+    const handleFileUpload = () => {
+        fileUploadRef.current?.click();
+    };
 
     return (
-        <form
-            id="create_post"
-            // ref={topDiv}
-            className={centerClass}
-            // onSubmit={handleSubmit}
-        >
-            <div
-                className={'post-create' + attachmentsDisabled + scrollbarClass}
-                style={
-                    renderScrollbar && scrollbarWidth
-                        ? ({ '--detected-scrollbar-width': `${scrollbarWidth}px` } as any)
-                        : undefined
-                }
-            >
-                <div className="post-create-body">
-                    <div
-                        role="application"
-                        id="centerChannelFooter"
-                        aria-label={ariaLabelMessageInput as any}
-                        tabIndex={-1}
-                        className="post-body__cell a11y__region"
-                        data-a11y-sort-order="2"
+        <div className="flex flex-col p-4 border-t border-gray-200">
+            {showTutorialTip && (
+                <div className="mb-4 p-4 bg-blue-50 text-blue-700 rounded-md">
+                    <FormattedMessage
+                        id="create_post.tutorialTip"
+                        defaultMessage="Type here to write a message. Use the buttons on the right for file uploads and emoji."
+                    />
+                    <button
+                        onClick={() => setShowTutorialTip(false)}
+                        className="ml-2 text-blue-500 hover:text-blue-700"
                     >
-                        {/* <Textbox/> */}
-                        <span className="post-body__actions">
-                            {/* {callButton} */}
-                            {/* {fileUpload} */}
-
-                            {/* {emojiPicker} */}
-                            <a
-                                role="button"
-                                tabIndex={0}
-                                aria-label="Send a message"
-                                // aria-label={formatMessage({
-                                //     id: 'create_post.send_message',
-                                //     defaultMessage: 'Send a message',
-                                // })}
-                                className={sendButtonClass}
-                                // onClick={handleSubmit}
-                            >
-                                {/* <LocalizedIcon
-                                    className="fa fa-paper-plane"
-                                    title={{
-                                        id: t('create_post.icon'),
-                                        defaultMessage: 'Create a post',
-                                    }}
-                                /> */}
-                            </a>
-                        </span>
-                    </div>
-                    {tutorialTip}
+                        Got it
+                    </button>
                 </div>
-                {/* <div id="postCreateFooter" role="form" className={postFooterClassName}>
-                    <div className="d-flex justify-content-between">
-                        <MsgTyping channelId={currentChannel.id} postId="" />
-                        <TextboxLinks
-                            characterLimit={props.maxPostSize}
-                            showPreview={props.shouldShowPreview}
-                            updatePreview={setShowPreview}
-                            message={readOnlyChannel ? '' : message}
-                        />
-                    </div>
-                    <div>
-                        {postError}
-                        {preview}
-                        {serverError}
-                    </div>
-                </div> */}
-            </div>
-            {/* <PostDeletedModal show={showPostDeletedModal} onHide={hidePostDeletedModal} /> */}
-            {/* <ConfirmModal
-                title={notifyAllTitle}
-                message={notifyAllMessage}
-                confirmButtonText={notifyAllConfirm}
-                show={showConfirmModal}
-                onConfirm={handleNotifyAllConfirmation}
-                onCancel={hideNotifyAllModal}
-            /> */}
-        </form>
+            )}
+
+            <form onSubmit={handleSubmit} className="relative">
+                <textarea
+                    ref={textboxRef}
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder={t('create_post.write')}
+                    disabled={!isPostAllowed || submitting}
+                    className={`w-full px-4 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
+                        errorClass ? 'border-red-500' : 'border-gray-300'
+                    } ${!isPostAllowed || submitting ? 'bg-gray-100' : 'bg-white'}`}
+                    rows={3}
+                />
+
+                <div className="absolute right-2 bottom-2 flex items-center space-x-2">
+                    <button
+                        type="button"
+                        onClick={handleFileUpload}
+                        disabled={!isPostAllowed}
+                        className="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <MdAttachFile className="h-5 w-5" />
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                        disabled={!isPostAllowed}
+                        className="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <MdSentimentSatisfied className="h-5 w-5" />
+                    </button>
+                    <button
+                        type="submit"
+                        disabled={!message.trim() || submitting || !isPostAllowed}
+                        className={`px-4 py-2 rounded-md ${
+                            !message.trim() || submitting || !isPostAllowed
+                                ? 'bg-gray-300 cursor-not-allowed'
+                                : 'bg-primary-600 hover:bg-primary-700'
+                        } text-white font-medium`}
+                    >
+                        {submitting ? 'Sending...' : 'Send'}
+                    </button>
+                </div>
+
+                <input
+                    type="file"
+                    ref={fileUploadRef}
+                    className="hidden"
+                    multiple
+                    onChange={(e) => {
+                        // Handle file upload
+                        console.log(e.target.files);
+                    }}
+                />
+            </form>
+
+            {serverError && <div className="mt-2 text-red-500 text-sm">{serverError}</div>}
+        </div>
     );
 };