erxes · Gerelsukh · Sep 18, 2023 · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/exm/modules/exmFeed/components/chat/ChatItem.tsx b/exm/modules/exmFeed/components/chat/ChatItem.tsx
@@ -31,7 +31,7 @@ type Props = {
   handlePin: (chatId: string) => void;
   isForward?: boolean;
   forwardChat?: (id?: string, type?: string) => void;
-  createChats: () => void;
+  createChat: () => void;
   setChatUser: (userId: string) => void;
 };
 
@@ -42,7 +42,7 @@ const ChatItem = (props: Props) => {
     currentUser,
     isForward,
     forwardChat,
-    createChats,
+    createChat,
     setChatUser
   } = props;
 
@@ -58,7 +58,7 @@ const ChatItem = (props: Props) => {
     }
     if (notContactUser) {
       setChatUser(notContactUser._id);
-      createChats();
+      createChat();
     }
   };
 

diff --git a/exm/modules/exmFeed/components/chat/GroupChatAction.tsx b/exm/modules/exmFeed/components/chat/GroupChatAction.tsx
@@ -1,14 +1,15 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 // erxes
 
 // local
-import ModalTrigger from '../../../common/ModalTrigger';
-import Icon from '../../../common/Icon';
-import { ParticipantItemWrapper } from '../../styles';
-import FormGroup from '../../../common/form/Group';
-import FormControl from '../../../common/form/Control';
-import Button from '../../../common/Button';
-import Uploader from '../../../common/Uploader';
+import ModalTrigger from "../../../common/ModalTrigger";
+import Icon from "../../../common/Icon";
+import { ParticipantItemWrapper } from "../../styles";
+import FormGroup from "../../../common/form/Group";
+import FormControl from "../../../common/form/Control";
+import Button from "../../../common/Button";
+import Uploader from "../../../common/Uploader";
+import { ModalFooter } from "../../../styles/main";
 
 type Props = {
   chat?: any;
@@ -18,7 +19,7 @@ type Props = {
 const GroupChat = (props: Props) => {
   const { chat, editChat } = props;
 
-  const [name, setName] = useState(chat.name || '');
+  const [name, setName] = useState(chat.name || "");
   const [featuredImage, setFeaturedImage] = useState(chat.featuredImage || []);
 
   const handleSubmit = (callback) => {
@@ -29,7 +30,6 @@ const GroupChat = (props: Props) => {
   const changeName = (p) => {
     return (
       <>
-        <h3>Change Name</h3>
         <FormGroup>
           <FormControl
             placeholder="Title"
@@ -39,28 +39,19 @@ const GroupChat = (props: Props) => {
             defaultValue={name}
           />
         </FormGroup>
-        <br />
-        <Button
-          style={{ float: 'right' }}
-          onClick={() => handleSubmit(p.closeModal)}
-        >
-          Add
-        </Button>
-        <Button
-          btnStyle="simple"
-          style={{ float: 'right', marginRight: '10px' }}
-          onClick={p.closeModal}
-        >
-          Cancel
-        </Button>
+        <ModalFooter>
+          <Button onClick={() => handleSubmit(p.closeModal)}>Save</Button>
+          <Button btnStyle="simple" onClick={p.closeModal}>
+            Cancel
+          </Button>
+        </ModalFooter>
       </>
     );
   };
 
   const changeImage = (p) => {
     return (
       <>
-        <h3>Change Name</h3>
         <Uploader
           defaultFileList={featuredImage}
           onChange={setFeaturedImage}
@@ -69,64 +60,44 @@ const GroupChat = (props: Props) => {
           single={true}
           btnIconSize={30}
         />
-        <br />
-        <Button
-          style={{ float: 'right' }}
-          onClick={() => handleSubmit(p.closeModal)}
-        >
-          Add
-        </Button>
-        <Button
-          btnStyle="simple"
-          style={{ float: 'right', marginRight: '10px' }}
-          onClick={p.closeModal}
-        >
-          Cancel
-        </Button>
+        <ModalFooter>
+          <Button onClick={() => handleSubmit(p.closeModal)}>Save</Button>
+          <Button btnStyle="simple" onClick={p.closeModal}>
+            Cancel
+          </Button>
+        </ModalFooter>
       </>
     );
   };
 
   return (
     <>
       <ModalTrigger
-        title="Add people"
+        title="Change group chat name"
         trigger={
           <ParticipantItemWrapper>
             <a href="#">
-              <Icon
-                icon="edit"
-                size={13}
-                color="black"
-                style={{ margin: '0 0.6em' }}
-              />
+              <Icon icon="edit" size={13} color="black" />
               Change group chat name
             </a>
           </ParticipantItemWrapper>
         }
         content={(p) => changeName(p)}
         isAnimate={true}
-        hideHeader={true}
       />
 
       <ModalTrigger
-        title="Add people"
+        title="Change group chat image"
         trigger={
           <ParticipantItemWrapper>
             <a href="#">
-              <Icon
-                icon="edit"
-                size={13}
-                color="black"
-                style={{ margin: '0 0.6em' }}
-              />
+              <Icon icon="image-edit" size={13} color="black" />
               Change group chat image
             </a>
           </ParticipantItemWrapper>
         }
         content={(p) => changeImage(p)}
         isAnimate={true}
-        hideHeader={true}
       />
     </>
   );

diff --git a/exm/modules/exmFeed/components/chat/WidgetChatWindow.tsx b/exm/modules/exmFeed/components/chat/WidgetChatWindow.tsx
@@ -1,23 +1,27 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 // erxes
-import Avatar from '../../../../modules/common/nameCard/Avatar';
-import Icon from '../../../../modules/common/Icon';
-import { IUser } from '../../../auth/types';
+import Avatar from "../../../../modules/common/nameCard/Avatar";
+import Icon from "../../../../modules/common/Icon";
+import Button from "../../../../modules/common/Button";
+import Tip from "../../../../modules/common/Tip";
+import { IUser } from "../../../auth/types";
 // local
-import MessageList from '../../containers/chat/MessageList';
-import Editor from '../../containers/chat/Editor';
-import ReplyInfo from './ReplyInfo';
+import MessageList from "../../containers/chat/MessageList";
+import Editor from "../../containers/chat/Editor";
+import ReplyInfo from "./ReplyInfo";
 import {
   ChatGroupAvatar,
   WidgetChatWindowWrapper,
   WidgetChatWindowHeader,
   MinimizedWidgetChatWindow,
-  AvatarImg
-} from '../../styles';
-import { OverlayTrigger, Popover } from 'react-bootstrap';
-import ParticipantList from './participants/ParticipantList';
-import GroupChatAction from '../../containers/chat/GroupChatAction';
-import { readFile } from '../../../utils';
+  AvatarImg,
+  MembersPopoverWrapper,
+  ParticipantItemWrapper,
+} from "../../styles";
+import { OverlayTrigger, Popover } from "react-bootstrap";
+import ParticipantList from "./participants/ParticipantList";
+import GroupChatAction from "../../containers/chat/GroupChatAction";
+import { readFile } from "../../../utils";
 
 type Props = {
   chat: any;
@@ -34,6 +38,7 @@ const WidgetChatWindow = (props: Props) => {
   const { chat, currentUser } = props;
   const [reply, setReply] = useState<any>(null);
   const [isMinimized, setIsMinimized] = useState(false);
+  const [popoverContentType, setPopoverContentType] = useState("main");
 
   const users: any[] = chat.participantUsers || [];
   const user: any =
@@ -52,33 +57,71 @@ const WidgetChatWindow = (props: Props) => {
     setIsMinimized(!isMinimized);
   };
 
-  const popoverContent = (
-    <Popover id="groupMembers-popover">
-      <GroupChatAction chat={chat} />
-      <ParticipantList chat={chat} />
-    </Popover>
-  );
+  const popoverContent = () => {
+    if (popoverContentType === "members") {
+      return (
+        <Popover id="groupMembers-popover">
+          <MembersPopoverWrapper>
+            <Button
+              btnStyle="link"
+              icon="arrow-left"
+              onClick={() => setPopoverContentType("main")}
+            >
+              Back
+            </Button>
+            <ParticipantList type="widget" chat={chat} />
+          </MembersPopoverWrapper>
+        </Popover>
+      );
+    }
+    if (popoverContentType === "main") {
+      return (
+        <Popover id="groupMembers-popover">
+          <GroupChatAction chat={chat} />
+          <ParticipantItemWrapper>
+            <a onClick={() => setPopoverContentType("members")}>
+              <Icon icon="users" color="black" size={13} />
+              See group members
+            </a>
+          </ParticipantItemWrapper>
+        </Popover>
+      );
+    }
+    return null;
+  };
 
   const showActiveChat = () => {
     if (isMinimized) {
       return (
         <MinimizedWidgetChatWindow onClick={() => handleMinimize()}>
           <WidgetChatWindowHeader>
             <div>
-              {chat.type === 'direct' ? (
+              {chat.type === "direct" ? (
                 <Avatar user={user} size={23} />
               ) : (
                 <ChatGroupAvatar>
-                  <Avatar user={users[0]} size={18} />
-                  <Avatar user={users[1]} size={18} />
+                  {chat.featuredImage.length > 0 ? (
+                    <AvatarImg
+                      alt={"author"}
+                      size={23}
+                      src={readFile(chat && chat.featuredImage[0].url, 60)}
+                    />
+                  ) : (
+                    <>
+                      <Avatar user={users[0]} size={18} />
+                      <Avatar user={users[1]} size={18} />
+                    </>
+                  )}
                 </ChatGroupAvatar>
               )}
-              <p>
-                {chat.name || user.details?.fullName || user.email}
-                {chat.type === 'direct' && (
-                  <div className="position">{user.details?.position}</div>
-                )}
-              </p>
+              <Tip
+                text={chat.name || user.details?.fullName || user.email}
+                placement="top"
+              >
+                <p className="name">
+                  {chat.name || user.details?.fullName || user.email}
+                </p>
+              </Tip>
             </div>
             <div>
               <Icon icon="minus-1" size={20} onClick={() => handleMinimize()} />
@@ -97,37 +140,47 @@ const WidgetChatWindow = (props: Props) => {
       <WidgetChatWindowWrapper onKeyDown={handleKeyDown}>
         <WidgetChatWindowHeader>
           <div>
-            {chat.type === 'direct' ? (
+            {chat.type === "direct" ? (
               <Avatar user={user} size={32} />
             ) : (
               <ChatGroupAvatar>
                 {chat.featuredImage.length > 0 ? (
                   <AvatarImg
-                    alt={'author'}
+                    alt={"author"}
+                    size={32}
                     src={readFile(chat && chat.featuredImage[0].url, 60)}
                   />
                 ) : (
                   <>
                     <Avatar user={users[0]} size={24} />
-                    <Avatar user={users[1]} size={24} />{' '}
+                    <Avatar user={users[1]} size={24} />{" "}
                   </>
                 )}
               </ChatGroupAvatar>
             )}
             <p>
-              <div className="name">
-                {chat.name || user?.details?.fullName || user?.email}
-              </div>
-              {chat.type === 'direct' && (
-                <div className="position">{user.details?.position}</div>
+              <Tip
+                text={chat.name || user?.details?.fullName || user?.email}
+                placement="top"
+              >
+                <div className="name">
+                  {chat.name || user?.details?.fullName || user?.email}
+                </div>
+              </Tip>
+
+              {chat.type === "direct" && (
+                <Tip text={user.details?.position} placement="top">
+                  <div className="position">{user.details?.position}</div>
+                </Tip>
               )}
             </p>
-            {chat.type === 'group' && (
+            {chat.type === "group" && (
               <OverlayTrigger
                 trigger="click"
                 rootClose={false}
                 placement="bottom"
-                overlay={popoverContent}
+                overlay={popoverContent()}
+                onExit={() => setPopoverContentType("main")}
               >
                 <Icon icon="downarrow-2" size={14} />
               </OverlayTrigger>

diff --git a/exm/modules/exmFeed/components/chat/participants/ParticipantList.tsx b/exm/modules/exmFeed/components/chat/participants/ParticipantList.tsx
@@ -15,12 +15,13 @@ import { IUser } from "../../../../types";
 
 type Props = {
   chat: any;
+  type?: string;
 };
 type FinalProps = {
   currentUser: IUser;
 } & Props;
 const ParticipantList = (props: FinalProps) => {
-  const { chat, currentUser } = props;
+  const { chat, currentUser, type } = props;
   const participantUserIds = chat?.participantUsers.map((user) => {
     return user._id;
   });
@@ -60,7 +61,7 @@ const ParticipantList = (props: FinalProps) => {
 
   return (
     <>
-      <Title>Group members</Title>
+      {type !== 'widget' && <Title>Group members</Title>}
       <ParticipantListWrapper>
         {(chat?.participantUsers || []).map((u) => (
           <ParticipantItem