Floating btn feature

Client/src/App.css

@@ -41,9 +41,6 @@ body {
   font-size: 1.7rem;
 }
 
-.home-cont {
-  /* display: flex; */
-}
 .mychat-cont {
   color: #ffffff;
   width: 26%;
@@ -200,8 +197,9 @@ p {
   /* border: 2px solid red; */
   width: 100%;
   /* padding: 10px; */
-  max-height: 75%;
-  height: 75%;
+  max-height: 77%;
+  max-height: 760px;
+  height: 63%;
   box-sizing: border-box;
   /* overflow-y: hidden; */
   overflow: auto;
@@ -219,6 +217,9 @@ p {
   display: flex;
   border-top: 1px solid #f0eff5;
   align-items: center;
+  padding-top: 15px;
+  position: relative;
+  padding-left: 10px;
   justify-content: center;
   margin-left: 10px;
 }
@@ -259,8 +260,7 @@ p {
   display: flex;
   align-items: center;
   /* gap: 10px; */
-  /* margin: 5px; */
-}
+  margin: 5px;
 .left-msg {
   background-color: #27b48c;
   padding: 8px;
@@ -311,3 +311,53 @@ p {
 svg {
   cursor: pointer;
 }
+
+.floating-chatbtn {
+  outline-color: transparent;
+  position: fixed;
+  bottom: 18pt;
+  right: 18pt;
+  z-index: 9999999;
+  border-radius: 45pt;
+  border: none;
+  padding: 0;
+  width: 45pt;
+  height: 45pt;
+  background-color: rgb(255, 156, 35);
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px, rgba(0, 0, 0, 0.2) 0px 2px 32px;
+  z-index: 1001;
+  visibility: visible;
+  transform: rotate(0deg);
+  display: block;
+  cursor: pointer;
+}
+
+.floating-chat-icon {
+  border-radius: 45pt;
+  padding: 10px;
+  max-width: 45pt;
+  max-height: 45pt;
+  display: inline;
+}
+
+.floating-chatframe {
+  position: fixed;
+  right: 18pt;
+  z-index: 10000000;
+  width: 440px;
+  min-height: 250px !important;
+  max-height: 1000px !important;
+  /* height: 900px; */
+  height: 80vh;
+  border-radius: 15px;
+  box-shadow: rgb(0 0 0 / 15%) 0 3pt 12pt;
+  /* display: none; */
+  max-width: 88vw;
+  overflow: hidden;
+  background: #fff;
+  display: block;
+  bottom: 100px;
+}
+.emoji-mart {
+  margin-left: 0px;
+}

Client/src/App.jsx

@@ -1,14 +1,18 @@
-import { useState } from "react";
+import { StrictMode } from "react";
 import "./App.css";
-import { AllRoutes } from "./Components/AllRoutes";
+import { FloatingChatBtn } from "./Components/ChatButton/";
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <>
-      <AllRoutes />
-    </>
+    <StrictMode>
+      <FloatingChatBtn
+        apiKey={"b3babb0b3a89f4341d31dc1a01091edcd70f8de7b23d697f"}
+        authToken={""}
+        userId={"top"}
+        displayName={"top"}
+        email={"thanaphon@amity.co"}
+      />
+    </StrictMode>
   );
 }
 

Client/src/Components/Auth/Registration.jsx

@@ -1,5 +1,6 @@
 import "./auth.css";
 import avatar from "./amity-no-bg.png";
+import powerSchool from "./PS.png";
 import React, { useEffect, useState } from "react";
 import { styled } from "@mui/material/styles";
 import Button from "@mui/material/Button";
@@ -173,6 +174,7 @@ export const RegisterComp = () => {
                 {/* <label htmlFor="file" id="uploadBtn"> */}
                 {/* <img id="photo" src={user.pic ? user.pic : avatar} /> */}
                 <img id="photo" src={avatar} />
+                <img id="photo" src={powerSchool} />
                 {/* </label> */}
               </div>
               {/* <p className="profile-text">Choose Profile</p> */}

Client/src/Components/ChatButton/index.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, StrictMode } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import AmityClient, { ConnectionStatus, ApiEndpoint } from "@amityco/js-sdk";
+import { HomeComp } from "../Home";
+import axios from "axios";
+
+export const FloatingChatBtn = ({
+  apiKey,
+  authToken,
+  userId,
+  displayName,
+  email,
+}) => {
+  const { user, loading, error } = useSelector((store) => store.user);
+  const authUser = (payload) => ({ type: "AUTH_ID", payload });
+  const dispatch = useDispatch();
+  const [isReady, setIsReady] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [amityUser, setAmityUser] = useState({
+    displayName: "",
+    userId: "",
+    email: "",
+  });
+  console.log("userId====", amityUser);
+  useEffect(() => {
+    if (apiKey && userId && displayName)
+      return () => {
+        setAmityUser({
+          displayName: displayName,
+          userId: userId,
+          email: email,
+        });
+        dispatch(
+          authUser({
+            displayName: displayName,
+            userId: userId,
+            email: email,
+          })
+        );
+        login();
+      };
+  }, []);
+
+  const login = () => {
+    console.log("LOGIN");
+    const client = new AmityClient({
+      apiKey: apiKey,
+      apiEndpoint: ApiEndpoint.SG,
+    });
+    // modify your server region here e.g ApiEndpoint.EU
+    if (userId.length > 0) {
+      client.registerSession({
+        userId: userId,
+        displayName: displayName,
+      }); // Add your own userId and displayName
+      client.on("connectionStatusChanged", ({ newValue }) => {
+        if (newValue === ConnectionStatus.Connected) {
+          console.log("connected to asc " + displayName);
+          registerUser(userId, displayName, email);
+        } else {
+          console.log(" not connected to asc");
+        }
+      });
+      console.log("client: ", client);
+    }
+  };
+  const registerUser = (userId, displayName, email) => {
+    axios
+      .post("https://power-school-demo.herokuapp.com/v1/users", {
+        userId: userId,
+        displayName: displayName,
+        email: email,
+      })
+      .then(function (response) {
+        console.log("response: ", response);
+
+        setIsReady(true);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  };
+  return (
+    <div>
+      {isOpen & isReady && (
+        <div className="floating-chatframe">
+          <HomeComp />
+        </div>
+      )}
+      {isReady && (
+        <button
+          className="floating-chatbtn"
+          onClick={() => {
+            setIsOpen(!isOpen);
+          }}
+        >
+          <img
+            className="floating-chat-icon"
+            src="https://upload.convolab.ai/convolab/images/convolab-chaticon-2.svg"
+          />
+        </button>
+      )}
+    </div>
+  );
+};

Client/src/Components/ChattingPage.jsx

@@ -48,10 +48,6 @@ export const ChattingPage = ({ onClickStartChat }) => {
   const scrolldiv = createRef();
   const dispatch = useDispatch();
 
-  // useEffect(() => {
-  //   scrollToBottom();
-  // }, [messages]);
-
   function queryChatMessage() {
     const liveCollection = MessageRepository.queryMessages({ channelId: _id });
     let messages = liveCollection.models;
@@ -98,6 +94,7 @@ export const ChattingPage = ({ onClickStartChat }) => {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
   console.log("width: ", width);
+
   function getWindowDimensions() {
     const { innerWidth: width, innerHeight: height } = window;
     console.log("width: ", width);

Client/src/Components/Home.jsx

@@ -17,30 +17,32 @@ import AddChatIcon from "./AddChat.png";
 export const HomeComp = () => {
   const { user, loading, error } = useSelector((store) => store.user);
   const amityUser = useSelector((store) => store.user);
+  console.log("amityUser: ", user);
   const { chatting } = useSelector((store) => store.chatting);
   console.log("chatting: ", chatting);
   const navigate = useNavigate();
   const [isOpenChat, setIsOpenChat] = useState(false);
   console.log("isOpenChat: ", isOpenChat);
-  useEffect(() => {
-    if (amityUser?.userId.userId.length == 0) {
-      navigate("/register");
-    }
-  }, [amityUser]);
+  // useEffect(() => {
+  //   if (amityUser?.userId.userId.length == 0) {
+  //     navigate("/register");
+  //   }
+  // }, [amityUser]);
 
   function onClickAddChat(value) {
+    console.log("value: ", value);
     setIsOpenChat(value);
   }
   return (
     <div className="home-cont">
-      <SideNavbar />
+      {/* <SideNavbar /> */}
       <div className={isOpenChat ? "" : "display-none"}>
         <MyChat onClickStartChat={onClickAddChat} />
       </div>
 
       <div className={!isOpenChat ? "" : "display-none"}>
         {chatting._id ? (
-          <ChattingPage />
+          <ChattingPage onClickStartChat={onClickAddChat} />
         ) : (
           // <MessageStarter
           //   pic={user.pic}

Client/src/Components/MyChat.jsx

@@ -19,6 +19,8 @@ import {
 } from "@amityco/js-sdk";
 import axios from "axios";
 import styled from "@emotion/styled";
+import { MdOutlineArrowBackIos } from "react-icons/md";
+import { height } from "@mui/system";
 import { UserRepository } from "@amityco/js-sdk";
 
 export const MyChat = ({ onClickStartChat }) => {
@@ -240,14 +242,24 @@ export const MyChat = ({ onClickStartChat }) => {
     console.log("userIdArrSearch: ", userIdArrSearch);
     setSearchFilterChat(permittedUser);
   }
+
+  function goBack() {
+    onClickStartChat && onClickStartChat(false);
+  }
 
   // console.log("search_result: ", search_result);
   return (
     <ChatWrap width={width} height={height}>
       {/* <div className="mychat-cont"> */}
       <div>
         <div className="notification">
-          <h2>Chats </h2>
+          {/* <MdOutlineArrowBackIos
+            style={{ cursor: "pointer" }}
+            onClick={() => goBack()}
+            on
+            color="black"
+          /> */}
+          <h2>Chats</h2>
           <p>role: {role}</p>
           {/* <NotificationsIcon /> */}
           <Badge badgeContent={notification} color="error">
@@ -444,6 +456,8 @@ export const SearchUserComp = ({
 
     const ownUserId = storeUserData.userId.userId;
     // setSearch(false);
+    console.log("userIdArr", [userId, _id, "iphone14"]);
+
     console.log("userIdArr", [ownUserId, userId]);
     onClickStartChat && onClickStartChat(false);
     const liveChannel = ChannelRepository.createChannel({
@@ -466,7 +480,8 @@ export const SearchUserComp = ({
           chatName: "Mock",
         })
       );
-      createChannel(data.channelId, ownUserId, userId);
+      createChannel(data.channelId, userId, _id);
+      onClickStartChat && onClickStartChat(false);
     });
   };
 
@@ -495,8 +510,8 @@ const ChatWrap = styled.div`
 
   background-color: #f5f7fb;
   /* Adapt the colors based on primary prop */
-  @media only screen and (max-width: 600px) {
+  /* @media only screen and (max-width: 480px) {
     width: ${(props) => `${props.width}px`};
   */
-  }
+  } */
 `;

Client/src/index.css

@@ -1,13 +1,13 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  /* margin: 0; */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }