:fire: removed all the things

frontend/package.json

@@ -6,17 +6,10 @@
         "build": "vite build",
         "serve": "vite preview",
         "lint": "eslint --ext .js,.vue --fix src",
-        "format": "prettier .  --write",
-        "go": "vue-cli-service serve"
+        "format": "prettier .  --write"
     },
     "dependencies": {
-        "@cometchat-pro/chat": "^3.0.2-beta1",
-        "@vue/cli": "^4.5.15",
-        "dateformat": "^4.5.1",
-        "events": "^3.3.0",
         "joi": "^17.4.0",
-        "process": "^0.11.10",
-        "twemoji": "^13.1.0",
         "vue": "^3.0.5",
         "vue-router": "^4.0.12"
     },

frontend/src/cometchat-pro-vue-ui-kit/package-lock.json

@@ -1,104 +0,0 @@
-{
-  "name": "cometchat-pro-vue-ui-kit",
-  "version": "3.0.2-beta1-1",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@cometchat-pro/chat": {
-      "version": "3.0.2-beta1",
-      "resolved": "https://registry.npmjs.org/@cometchat-pro/chat/-/chat-3.0.2-beta1.tgz",
-      "integrity": "sha512-K5eLrku0beEuMm/qDayUgnM9EtdvMi9lw81sxOZ3TVHCUwEAXgbIiAuQPiQhDhEIJV5GozPSj/lBJteH0jPCBA=="
-    },
-    "dateformat": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.5.1.tgz",
-      "integrity": "sha512-OD0TZ+B7yP7ZgpJf5K2DIbj3FZvFvxgFUuaqA/V5zTjAtAAXZ1E8bktHxmAGs4x5b7PflqA9LeQ84Og7wYtF7Q=="
-    },
-    "exec-sh": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz",
-      "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==",
-      "dev": true,
-      "requires": {
-        "merge": "^1.2.0"
-      }
-    },
-    "fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      },
-      "dependencies": {
-        "jsonfile": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-          "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        }
-      }
-    },
-    "graceful-fs": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
-    },
-    "jsonfile": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
-      "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^0.1.2"
-      }
-    },
-    "merge": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
-      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==",
-      "dev": true
-    },
-    "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
-    "twemoji": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.1.0.tgz",
-      "integrity": "sha512-e3fZRl2S9UQQdBFLYXtTBT6o4vidJMnpWUAhJA+yLGR+kaUTZAt3PixC0cGvvxWSuq2MSz/o0rJraOXrWw/4Ew==",
-      "requires": {
-        "fs-extra": "^8.0.1",
-        "jsonfile": "^5.0.0",
-        "twemoji-parser": "13.1.0",
-        "universalify": "^0.1.2"
-      }
-    },
-    "twemoji-parser": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.1.0.tgz",
-      "integrity": "sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg=="
-    },
-    "universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-    },
-    "watch": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz",
-      "integrity": "sha1-NApxe952Vyb6CqB9ch4BR6VR3ww=",
-      "dev": true,
-      "requires": {
-        "exec-sh": "^0.2.0",
-        "minimist": "^1.2.0"
-      }
-    }
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "cometchat-pro-vue-ui-kit",
-  "version": "3.0.2-beta1-1",
-  "description": "CometChat UI Kit for Vue app.",
-  "scripts": {
-    "develop": "sh develop.sh",
-    "dev": "watch 'npm run develop' ."
-  },
-  "dependencies": {
-    "@cometchat-pro/chat": "3.0.2-beta1",
-    "dateformat": "^4.5.1",
-    "twemoji": "^13.1.0"
-  },
-  "devDependencies": {
-    "watch": "^1.0.2"
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatIncomingCall/CometChatIncomingCall.vue

@@ -1,322 +0,0 @@
-<template>
-  <div
-    v-if="incomingCall"
-    class="callalert__wrapper"
-    :style="styles.incomingCallWrapper"
-  >
-    <div :style="styles.callContainer">
-      <div :style="styles.headerWrapper">
-        <div :style="styles.callDetail">
-          <div :style="styles.name">
-            {{ incomingCall.sender.name }}
-          </div>
-          <div :style="styles.callType">
-            <template v-if="incomingCall.type === 'video'">
-              <img :src="icons.video" :alt="STRINGS.INCOMING_VIDEO_CALL" />
-              <span :style="styles.callType.span">
-                {{ STRINGS.INCOMING_VIDEO_CALL }}
-              </span>
-            </template>
-            <template v-else>
-              <img :src="icons.audio" :alt="STRINGS.INCOMING_AUDIO_CALL" />
-              <span :style="styles.callType.span">
-                {{ STRINGS.INCOMING_AUDIO_CALL }}
-              </span>
-            </template>
-          </div>
-        </div>
-        <div :style="styles.thumbnail">
-          <comet-chat-avatar
-            corner-radius="50%"
-            :image="incomingCall.sender.avatar"
-          />
-        </div>
-      </div>
-      <div :style="styles.headerButton">
-        <button :style="styles.declineButton" @click="rejectCall">
-          {{ STRINGS.DECLINE }}
-        </button>
-        <button :style="styles.acceptButton" @click="acceptCall">
-          {{ STRINGS.ACCEPT }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<!--eslint-disable-->
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import { propertyCheck, cometChatCommon } from "../../../mixins/";
-
-import { CometChatManager } from "../../../util/controller";
-import { SvgAvatar } from "../../../util/svgavatar";
-import * as enums from "../../../util/enums.js";
-
-import { CometChatAvatar } from "../../Shared/";
-
-import { CallAlertManager } from "./controller";
-
-import * as style from "./style";
-
-import audioCallIcon from "./resources/incomingaudiocall.png";
-import videoCallIcon from "./resources/incomingvideocall.png";
-
-import { incomingCallAlert } from "../../../resources/audio/";
-
-let incomingAlert;
-let callAlertManager;
-
-/**
- * Displays the incoming call alert.
- *
- * @displayName CometChatIncomingCall
- */
-export default {
-  name: "CometChatIncomingCall",
-  mixins: [propertyCheck, cometChatCommon],
-  components: { CometChatAvatar },
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The call object that is in progress.
-     */
-    callInProgress: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      incomingCall: null,
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        name: style.nameStyle(),
-        callType: style.callTypeStyle(),
-        thumbnail: style.thumbnailStyle(),
-        callDetail: style.callDetailStyle(),
-        headerButton: style.headerButtonStyle(),
-        callContainer: style.callContainerStyle(),
-        headerWrapper: style.headerWrapperStyle(),
-        acceptButton: style.buttonStyle(this.theme, true),
-        declineButton: style.buttonStyle(this.theme, false),
-        incomingCallWrapper: style.incomingCallWrapperStyle(this.theme),
-      };
-    },
-    /**
-     * Imported icon images.
-     */
-    icons() {
-      return {
-        audio: audioCallIcon,
-        video: videoCallIcon,
-      };
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  methods: {
-    /**
-     * Plays the incoming alert tone
-     */
-    playIncomingAlert() {
-      try {
-        incomingAlert.currentTime = 0;
-        if (typeof incomingAlert.loop == "boolean") {
-          incomingAlert.loop = true;
-        } else {
-          incomingAlert.addEventListener(
-            "ended",
-            function () {
-              this.currentTime = 0;
-              this.play();
-            },
-            false
-          );
-        }
-        incomingAlert.play();
-      } catch (error) {
-        this.logError("Error playing incoming alert", error);
-      }
-    },
-    /**
-     * Pauses the incoming call alert
-     */
-    pauseIncomingAlert() {
-      try {
-        incomingAlert.pause();
-      } catch (error) {
-        this.logError("Error pausing incoming alert", error);
-      }
-    },
-    /**
-     * Marks a message as read
-     */
-    markMessageAsRead(message) {
-      try {
-        if (this.hasProperty(message, "readAt") === false) {
-          CometChat.markAsRead(message);
-        }
-      } catch (error) {
-        this.logError("Error marking message as read", error);
-      }
-    },
-    /**
-     * Function to recieve incoming call
-     */
-    async incomingCallReceived(incomingCall) {
-      const activeCall = CometChat.getActiveCall();
-
-      if (activeCall) {
-        try {
-          const rejectedCall = await CometChat.rejectCall(
-            incomingCall.sessionId,
-            CometChat.CALL_STATUS.BUSY
-          );
-
-          this.markMessageAsRead(incomingCall);
-          this.emitAction("rejectedIncomingCall", {
-            incomingCall,
-            rejectedCall,
-          });
-        } catch (error) {
-          this.emitAction("callError", { error });
-          this.logError("Call rejection failed with error:", error);
-        }
-      } else if (this.incomingCall === null) {
-        try {
-          this.playIncomingAlert();
-
-          if (incomingCall.sender.avatar === false) {
-            const uid = incomingCall.sender.uid;
-            const char = incomingCall.sender.name.charAt(0).toUpperCase();
-
-            incomingCall.sender.avatar = SvgAvatar.getAvatar(uid, char);
-          }
-
-          this.incomingCall = incomingCall;
-        } catch (error) {
-          this.logError("Call rejection failed with error:", error);
-        }
-      }
-    },
-    /**
-     * Function to cancel incoming call
-     */
-    incomingCallCancelled() {
-      try {
-        this.pauseIncomingAlert();
-        this.incomingCall = null;
-      } catch (error) {
-        this.logError("Call cancel failed with error:", error);
-      }
-    },
-    /**
-     * Function to reject incoming call
-     */
-    async rejectCall() {
-      this.pauseIncomingAlert();
-
-      try {
-        const rejectedCall = await CometChatManager.rejectCall(
-          this.incomingCall.sessionId,
-          CometChat.CALL_STATUS.REJECTED
-        );
-
-        this.emitAction("rejectedIncomingCall", {
-          incomingCall: this.incomingCall,
-          rejectedCall,
-        });
-      } catch (error) {
-        this.emitAction("callError", { error });
-      } finally {
-        this.incomingCall = null;
-      }
-    },
-    /**
-     * Function to accept call
-     */
-    acceptCall() {
-      try {
-        this.pauseIncomingAlert();
-        this.emitAction("acceptIncomingCall", {
-          incomingCall: this.incomingCall,
-        });
-
-        setTimeout(() => {
-          this.incomingCall = null;
-        }, 100);
-      } catch (error) {
-        this.logError("Call accept failed with error:", error);
-      }
-    },
-    /**
-     * This function handles the call listeners
-     */
-    callScreenUpdateHandler(key, call) {
-      switch (key) {
-        case enums.INCOMING_CALL_RECEIVED:
-          this.incomingCallReceived(call);
-          break;
-        case enums.INCOMING_CALL_CANCELLED:
-          this.incomingCallCancelled();
-          break;
-        default:
-          break;
-      }
-    },
-  },
-  beforeMount() {
-    incomingAlert = new Audio(incomingCallAlert);
-
-    callAlertManager = new CallAlertManager();
-    callAlertManager.attachListeners(this.callScreenUpdateHandler);
-  },
-  beforeDestroy() {
-    if (callAlertManager) {
-      callAlertManager.removeListeners();
-      callAlertManager = null;
-    }
-  },
-  beforeUnmount() {
-    if (callAlertManager) {
-      callAlertManager.removeListeners();
-      callAlertManager = null;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.callalert__wrapper {
-  animation: slideDown 250ms ease;
-}
-.callalert__wrapper * {
-  box-sizing: border-box !important;
-  font-family: var(--call-alert-font-family) !important;
-}
-@keyframes slideDown {
-  0% {
-    transform: translateY(-50px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatIncomingCall/controller.js

@@ -1,25 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-import * as enums from "../../../util/enums.js";
-
-export class CallAlertManager {
-  callListenerId = "incoming_call_" + new Date().getTime();
-
-  attachListeners(callback) {
-    CometChat.addCallListener(
-      this.callListenerId,
-      new CometChat.CallListener({
-        onIncomingCallReceived: (call) => {
-          callback(enums.INCOMING_CALL_RECEIVED, call);
-        },
-        onIncomingCallCancelled: (call) => {
-          callback(enums.INCOMING_CALL_CANCELLED, call);
-        },
-      })
-    );
-  }
-
-  removeListeners() {
-    CometChat.removeCallListener(this.callListenerId);
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatIncomingCall/style.js

@@ -1,122 +0,0 @@
-export const incomingCallWrapperStyle = (theme) => {
-  let positionValue = "absolute";
-  let leftPos = "0";
-  let rightPos = "0";
-  let topPos = "0";
-  let bottomPos = "unset";
-  let zIndexValue = "999";
-
-  return {
-    position: positionValue,
-    top: topPos,
-    left: leftPos,
-    bottom: bottomPos,
-    right: rightPos,
-    borderRadius: "10px",
-    margin: "15px",
-    backgroundColor: `${theme.backgroundColor.callScreenGrey}`,
-    zIndex: zIndexValue,
-    color: `${theme.color.white}`,
-    textAlign: "center",
-    boxSizing: "border-box",
-    fontFamily: `${theme.fontFamily}`,
-    width: "250px",
-    "--call-alert-font-family": `${theme.fontFamily}`,
-  };
-};
-
-export const callContainerStyle = () => {
-  return {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-    padding: "15px",
-  };
-};
-
-export const headerWrapperStyle = () => {
-  return {
-    width: "100%",
-    display: "flex",
-  };
-};
-
-export const callDetailStyle = () => {
-  return {
-    width: "calc(100% - 36px)",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    textAlign: "left",
-  };
-};
-
-export const nameStyle = () => {
-  return {
-    fontSize: "15px",
-    fontWeight: "600",
-    display: "block",
-    width: "100%",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    lineHeight: "20px",
-  };
-};
-
-export const callTypeStyle = () => {
-  return {
-    fontSize: "13px",
-    width: "100%",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    textTransform: "capitalize",
-    lineHeight: "20px",
-    color: "#8A8A8A",
-    display: "flex",
-    justifyContent: "start",
-    alignItems: "center",
-    padding: "2px 0 0 0px",
-    span: {
-      padding: "0 5px",
-    },
-  };
-};
-
-export const thumbnailStyle = () => {
-  return {
-    width: "36px",
-    height: "36px",
-    display: "flex",
-    justifyContent: "center",
-  };
-};
-
-export const headerButtonStyle = () => {
-  return {
-    width: "100%",
-    display: "flex",
-    justifyContent: "space-between",
-    margin: "10px 0 0 0",
-  };
-};
-
-export const buttonStyle = (theme, action) => {
-  const backgroundColor = action
-    ? `${theme.backgroundColor.blue}`
-    : `${theme.backgroundColor.red}`;
-
-  return {
-    cursor: "pointer",
-    padding: "6px 20px",
-    backgroundColor: backgroundColor,
-    borderRadius: "5px",
-    color: `${theme.color.white}`,
-    fontSize: "14px",
-    outline: "0",
-    border: "0",
-    width: "45%",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatOutgoingCall/CometChatOutgoingCall.vue

@@ -1,459 +0,0 @@
-<template>
-  <div
-    v-if="callInProgress"
-    ref="callScreenFrame"
-    class="callscreen__wrapper"
-    :style="styles.callScreenWrapper"
-  >
-    <div :style="styles.callScreenContainer">
-      <div :style="styles.header">
-        <span :style="styles.headerDuration"> calling... </span>
-        <h6 :style="styles.headerName">
-          {{ callInProgress && callInProgress.receiver.name }}
-        </h6>
-      </div>
-      <div :style="styles.thumbnailWrapper">
-        <div :style="styles.thumbnail">
-          <template v-if="callInProgress">
-            <comet-chat-avatar
-              border-width="1px"
-              corner-radius="50%"
-              v-if="type === 'user'"
-              :border-color="theme.borderColor.primary"
-              :image="callInProgress.receiver.avatar"
-            />
-            <comet-chat-avatar
-              border-width="1px"
-              corner-radius="50%"
-              v-else-if="type === 'group'"
-              :border-color="theme.borderColor.primary"
-              :image="callInProgress.receiver.icon"
-            />
-          </template>
-        </div>
-      </div>
-      <div v-if="errorScreen" :style="styles.errorContainer">
-        <div>{{ errorMessage }}</div>
-      </div>
-
-      <div :style="styles.headerIcon">
-        <div :style="styles.iconWrapper" @click="cancelCall">
-          <div :style="styles.icon"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<!--eslint-disable-->
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_STRING_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon, propertyCheck } from "../../../mixins/";
-
-import { CometChatManager } from "../../../util/controller";
-import { SvgAvatar } from "../../../util/svgavatar";
-import * as enums from "../../../util/enums.js";
-
-import { CallScreenManager } from "./controller";
-
-import { CometChatAvatar } from "../../Shared/";
-
-import * as style from "./style";
-
-import callIcon from "./resources/call-end-white-icon.svg";
-import { outgoingCallAlert } from "../../../resources/audio/";
-
-let outgoingAlert;
-let callScreenManager;
-
-/**
- * Displays the outgoing call window.
- *
- * @displayName CometChatOutgoingCall
- */
-export default {
-  name: "CometChatOutgoingCall",
-  mixins: [cometChatCommon, propertyCheck],
-  components: { CometChatAvatar },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Type of chat item.
-     */
-    type: { ...DEFAULT_STRING_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Incoming call message object.
-     */
-    incomingCall: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Outgoing call message object.
-     */
-    outgoingCall: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      errorScreen: false,
-      errorMessage: null,
-      callInProgress: null,
-      outgoingCallScreen: false,
-    };
-  },
-  watch: {
-    /**
-     * Updates state on outgoing call chnage.
-     */
-    outgoingCall: {
-      handler(newValue, oldValue) {
-        if (oldValue !== newValue && newValue) {
-          this.playOutgoingAlert();
-
-          let call = newValue;
-
-          if (
-            call.receiverType === CometChat.RECEIVER_TYPE.GROUP &&
-            this.hasProperty(call.receiver, "icon") === false
-          ) {
-            const uid = call.receiver.guid;
-            const char = call.receiver.name.charAt(0).toUpperCase();
-
-            call.receiver.icon = SvgAvatar.getAvatar(uid, char);
-          } else if (
-            call.receiverType === CometChat.RECEIVER_TYPE.USER &&
-            this.hasProperty(call.receiver, "avatar") === false
-          ) {
-            const uid = call.receiver.uid;
-            const char = call.receiver.name.charAt(0).toUpperCase();
-
-            call.receiver.avatar = SvgAvatar.getAvatar(uid, char);
-          }
-
-          this.outgoingCallScreen = true;
-          this.callInProgress = call;
-          this.errorScreen = false;
-          this.errorMessage = null;
-        }
-      },
-      deep: true,
-    },
-    /**
-     * Accepts call when change in incoming call is detected.
-     */
-    incomingCall: {
-      handler(newValue, oldValue) {
-        if (oldValue !== newValue && newValue) {
-          this.acceptCall();
-        }
-      },
-      depp: true,
-    },
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        header: style.headerStyle(),
-        thumbnail: style.thumbnailStyle(),
-        headerIcon: style.headerIconStyle(),
-        headerName: style.headerNameStyle(),
-        iconWrapper: style.iconWrapperStyle(),
-        icon: style.iconStyle(callIcon, false),
-        headerDuration: style.headerDurationStyle(),
-        errorContainer: style.errorContainerStyle(),
-        thumbnailWrapper: style.thumbnailWrapperStyle(),
-        callScreenContainer: style.callScreenContainerStyle(),
-        callScreenWrapper: style.callScreenWrapperStyle(this.theme),
-      };
-    },
-  },
-  methods: {
-    /**
-     * Function that handles the call listeners
-     */
-    callScreenUpdateHandler(key, call) {
-      switch (key) {
-        case enums.INCOMING_CALL_CANCELLED:
-          this.callInProgress = null;
-          this.outgoingCallScreen = false;
-          break;
-        case enums.OUTGOING_CALL_ACCEPTED:
-          if (this.outgoingCallScreen === true) {
-            this.pauseOutgoingAlert();
-
-            this.outgoingCallScreen = false;
-            this.callInProgress = call;
-            this.startCall(call);
-          }
-          break;
-        case enums.OUTGOING_CALL_REJECTED:
-          if (call.status && call.status === CometChat.CALL_STATUS.BUSY) {
-            this.errorScreen = true;
-            this.errorMessage = `${call.sender.name} is on another call.`;
-          } else {
-            this.pauseOutgoingAlert();
-
-            this.emitAction("outgoingCallRejected", { call });
-
-            this.callInProgress = null;
-            this.outgoingCallScreen = false;
-          }
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Function to accept call
-     */
-    async acceptCall() {
-      try {
-        const call = await CometChatManager.acceptCall(
-          this.incomingCall.sessionId
-        );
-
-        if (
-          this.hasProperty(call.receiver, "uid") &&
-          this.hasProperty(call.receiver, "avatar") === false
-        ) {
-          const uid = call.receiver.uid;
-          const char = call.receiver.name.charAt(0).toUpperCase();
-
-          call.receiver.avatar = SvgAvatar.getAvatar(uid, char);
-        } else if (
-          this.hasProperty(call.receiver, "guid") &&
-          this.hasProperty(call.receiver, "icon") === false
-        ) {
-          const guid = call.receiver.guid;
-          const char = call.receiver.name.charAt(0).toUpperCase();
-
-          call.receiver.icon = SvgAvatar.getAvatar(guid, char);
-        }
-
-        this.emitAction("acceptedIncomingCall", { call });
-
-        this.outgoingCallScreen = false;
-        this.callInProgress = call;
-        this.errorScreen = false;
-        this.errorMessage = null;
-
-        this.startCall(call);
-      } catch (error) {
-        this.logError("[CometChatOutgoingCall] acceptCall -- error", error);
-        this.emitAction("callError", { error });
-      }
-    },
-    /**
-     * Function to cancel call
-     */
-    async cancelCall() {
-      this.pauseOutgoingAlert();
-
-      try {
-        const call = await CometChatManager.rejectCall(
-          this.callInProgress.sessionId,
-          CometChat.CALL_STATUS.CANCELLED
-        );
-
-        this.emitAction("outgoingCallCancelled", { call });
-      } catch (error) {
-        this.emitAction("callError", { error });
-      } finally {
-        this.outgoingCallScreen = false;
-        this.callInProgress = null;
-      }
-    },
-    /**
-     * Function to start call
-     */
-    startCall(call) {
-      this.$nextTick(() => {
-        const el = this.$refs.callScreenFrame;
-
-        while (el.firstChild) {
-          el.firstChild.remove();
-        }
-
-        const sessionId = call.getSessionId();
-        const audioOnly = call.type === CometChat.CALL_TYPE.AUDIO;
-
-        const callSettings = new CometChat.CallSettingsBuilder()
-          .setSessionID(sessionId)
-          .enableDefaultLayout(true)
-          .setMode(CometChat.CALL_MODE.DEFAULT)
-          .setIsAudioOnlyCall(audioOnly)
-          .build();
-
-        CometChat.startCall(
-          callSettings,
-          el,
-          new CometChat.OngoingCallListener({
-            onUserJoined: (user) => {
-              /* Notification received here if another user joins the call. */
-              /* this method can be use to display message or perform any actions if someone joining the call */
-
-              //call initiator gets the same info in outgoingcallaccpeted event
-              if (
-                call.callInitiator.uid !== this.loggedInUser.uid &&
-                call.callInitiator.uid !== user.uid
-              ) {
-                this.markMessageAsRead(call);
-
-                const callMessage = {
-                  category: call.category,
-                  type: call.type,
-                  action: call.action,
-                  status: call.status,
-                  callInitiator: call.callInitiator,
-                  callReceiver: call.callReceiver,
-                  receiverId: call.receiverId,
-                  receiverType: call.receiverType,
-                  sentAt: call.sentAt,
-                  sender: { ...user },
-                };
-
-                this.emitAction("userJoinedCall", { call: callMessage });
-              }
-            },
-            onUserLeft: (user) => {
-              /* Notification received here if another user left the call. */
-              /* this method can be use to display message or perform any actions if someone leaving the call */
-
-              //call initiator gets the same info in outgoingcallaccpeted event
-              if (
-                call.callInitiator.uid !== this.loggedInUser.uid &&
-                call.callInitiator.uid !== user.uid
-              ) {
-                this.markMessageAsRead(call);
-
-                const callMessage = {
-                  category: call.category,
-                  type: call.type,
-                  action: "left",
-                  status: call.status,
-                  callInitiator: call.callInitiator,
-                  callReceiver: call.callReceiver,
-                  receiverId: call.receiverId,
-                  receiverType: call.receiverType,
-                  sentAt: call.sentAt,
-                  sender: { ...user },
-                };
-
-                this.emitAction("userLeftCall", { call: callMessage });
-              }
-            },
-            onCallEnded: (endedCall) => {
-              /* Notification received here if current ongoing call is ended. */
-
-              this.showOutgoingScreen = false;
-              this.callInProgress = null;
-
-              this.markMessageAsRead(endedCall);
-
-              this.emitAction("callEnded", { call: endedCall });
-              /* hiding/closing the call screen can be done here. */
-            },
-          })
-        );
-      });
-    },
-    /**
-     * Marks a message as read
-     */
-    markMessageAsRead(message) {
-      try {
-        if (this.hasProperty(message, "readAt") === false) {
-          CometChat.markAsRead(message);
-        }
-      } catch (error) {
-        this.logError("Error marking message as read", error);
-      }
-    },
-    /**
-     * Plays the outgoing call alert
-     */
-    playOutgoingAlert() {
-      try {
-        outgoingAlert.currentTime = 0;
-        if (typeof outgoingAlert.loop == "boolean") {
-          outgoingAlert.loop = true;
-        } else {
-          outgoingAlert.addEventListener(
-            "ended",
-            function () {
-              this.currentTime = 0;
-              this.play();
-            },
-            false
-          );
-        }
-        outgoingAlert.play();
-      } catch (error) {
-        this.logError("Alert play failed with error:", error);
-      }
-    },
-    /**
-     * Pauses the outgoing call alert
-     */
-    pauseOutgoingAlert() {
-      try {
-        outgoingAlert.pause();
-      } catch (error) {
-        this.logError("Alert pause failed with error:", error);
-      }
-    },
-  },
-  beforeMount() {
-    outgoingAlert = new Audio(outgoingCallAlert);
-
-    callScreenManager = new CallScreenManager();
-    callScreenManager.attachListeners(this.callScreenUpdateHandler);
-  },
-  beforeDestroy() {
-    if (callScreenManager) {
-      callScreenManager.removeListeners();
-      callScreenManager = null;
-    }
-  },
-  beforeUnmount() {
-    if (callScreenManager) {
-      callScreenManager.removeListeners();
-      callScreenManager = null;
-    }
-  },
-};
-</script>
-<style scoped>
-.callscreen__wrapper {
-  animation: fade-animation 250ms ease;
-}
-.callscreen__wrapper * {
-  box-sizing: border-box;
-  font-family: var(--call-screen-font-family);
-}
-@keyframes fade-animation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatOutgoingCall/controller.js

@@ -1,28 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-import * as enums from "../../../util/enums.js";
-
-export class CallScreenManager {
-  callListenerId = "callscreen_" + new Date().getTime();
-
-  attachListeners(callback) {
-    CometChat.addCallListener(
-      this.callListenerId,
-      new CometChat.CallListener({
-        onOutgoingCallAccepted: (call) => {
-          callback(enums.OUTGOING_CALL_ACCEPTED, call);
-        },
-        onOutgoingCallRejected: (call) => {
-          callback(enums.OUTGOING_CALL_REJECTED, call);
-        },
-        onIncomingCallCancelled: (call) => {
-          callback(enums.INCOMING_CALL_CANCELLED, call);
-        },
-      })
-    );
-  }
-
-  removeListeners() {
-    CometChat.removeCallListener(this.callListenerId);
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatOutgoingCall/resources/call-end-white-icon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="9" viewBox="0 0 24 9"><g><g><path fill="#fff" d="M4.514 8.475l2-1.59c.48-.38.76-.96.76-1.57v-2.6c3.02-.98 6.29-.99 9.32 0v2.61c0 .61.28 1.19.76 1.57l1.99 1.58c.8.63 1.94.57 2.66-.15l1.22-1.22c.8-.8.8-2.13-.05-2.88-6.41-5.66-16.07-5.66-22.48 0-.85.75-.85 2.08-.05 2.88l1.22 1.22c.71.72 1.85.78 2.65.15z"/></g></g></svg>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/CometChatOutgoingCall/style.js

@@ -1,113 +0,0 @@
-export const callScreenWrapperStyle = (theme) => {
-  return {
-    width: "inherit",
-    height: "inherit",
-    position: "absolute",
-    top: "0",
-    right: "0",
-    bottom: "0",
-    left: "0",
-    backgroundColor: `${theme.backgroundColor.darkGrey}`,
-    zIndex: "999",
-    color: `${theme.color.white}`,
-    textAlign: "center",
-    boxSizing: "border-box",
-    fontFamily: `${theme.fontFamily}`,
-    "--call-screen-font-family": `${theme.fontFamily}`,
-  };
-};
-
-export const callScreenContainerStyle = () => {
-  return {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    width: "100%",
-  };
-};
-
-export const headerStyle = () => {
-  return {
-    padding: "20px 10px",
-    width: "100%",
-    height: "20%",
-  };
-};
-
-export const headerDurationStyle = () => {
-  return {
-    fontSize: "13px",
-    display: "inline-block",
-    padding: "5px",
-  };
-};
-
-export const headerNameStyle = () => {
-  return {
-    margin: "0",
-    fontWeight: "700",
-    textTransform: "capitalize",
-    fontSize: "16px",
-  };
-};
-
-export const thumbnailWrapperStyle = () => {
-  return {
-    width: "100%",
-    height: "50%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  };
-};
-
-export const thumbnailStyle = () => {
-  return {
-    width: "200px",
-    flexShrink: "0",
-  };
-};
-
-export const headerIconStyle = () => {
-  return {
-    width: "100%",
-    height: "15%",
-    padding: "10px",
-    display: "flex",
-    justifyContent: "center",
-  };
-};
-
-export const iconWrapperStyle = () => {
-  return {
-    display: "flex",
-  };
-};
-
-export const iconStyle = (img, callAction) => {
-  const bgColor = callAction ? "#008000" : "#ff3b30";
-
-  return {
-    width: "50px",
-    height: "50px",
-    borderRadius: "27px",
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    display: "block",
-    margin: "auto 10px",
-    cursor: "pointer",
-    background: `url(${img}) center center no-repeat ${bgColor}`,
-  };
-};
-
-export const errorContainerStyle = () => {
-  return {
-    color: "#fff",
-    textAlign: "center",
-    borderRadius: "2px",
-    padding: "13px 10px",
-    fontSize: "13px",
-    width: "100%",
-    height: "10%",
-    backgroundColor: "#333",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Calls/index.js

@@ -1,2 +0,0 @@
-export { default as CometChatIncomingCall } from "./CometChatIncomingCall/CometChatIncomingCall";
-export { default as CometChatOutgoingCall } from "./CometChatOutgoingCall/CometChatOutgoingCall";

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationList/controller.js

@@ -1,146 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-import * as enums from "../../../util/enums.js";
-
-/**
- * ConversationListManager class encapsulates the following functionality:
- * - fetching of conversation list
- * - attaching Call listeners
- * - attaching User listeners
- * - attaching Group listeners
- * - attaching Message listeners
- */
-export class ConversationListManager {
-  conversationRequest = null;
-
-  conversationListenerId = "chatlist_" + new Date().getTime();
-  userListenerId = "chatlist_user_" + new Date().getTime();
-  groupListenerId = "chatlist_group_" + new Date().getTime();
-  callListenerId = "chatlist_call_" + new Date().getTime();
-
-  constructor() {
-    this.conversationRequest = new CometChat.ConversationsRequestBuilder()
-      .setLimit(30)
-      .build();
-  }
-
-  fetchNextConversation() {
-    return this.conversationRequest.fetchNext();
-  }
-
-  attachListeners(callback) {
-    CometChat.addUserListener(
-      this.userListenerId,
-      new CometChat.UserListener({
-        onUserOnline: (onlineUser) => {
-          /* when someuser/friend comes online, user will be received here */
-          callback(enums.USER_ONLINE, onlineUser);
-        },
-        onUserOffline: (offlineUser) => {
-          /* when someuser/friend went offline, user will be received here */
-          callback(enums.USER_OFFLINE, offlineUser);
-        },
-      })
-    );
-
-    CometChat.addGroupListener(
-      this.groupListenerId,
-      new CometChat.GroupListener({
-        onGroupMemberScopeChanged: (
-          message,
-          changedUser,
-          newScope,
-          oldScope,
-          changedGroup
-        ) => {
-          callback(enums.GROUP_MEMBER_SCOPE_CHANGED, changedGroup, message, {
-            user: changedUser,
-            scope: newScope,
-          });
-        },
-        onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
-          callback(enums.GROUP_MEMBER_KICKED, kickedFrom, message, {
-            user: kickedUser,
-            hasJoined: false,
-          });
-        },
-        onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
-          callback(enums.GROUP_MEMBER_BANNED, bannedFrom, message, {
-            user: bannedUser,
-          });
-        },
-        onGroupMemberUnbanned: (
-          message,
-          unbannedUser,
-          unbannedBy,
-          unbannedFrom
-        ) => {
-          callback(enums.GROUP_MEMBER_UNBANNED, unbannedFrom, message, {
-            user: unbannedUser,
-          });
-        },
-        onMemberAddedToGroup: (
-          message,
-          userAdded,
-          userAddedBy,
-          userAddedIn
-        ) => {
-          callback(enums.GROUP_MEMBER_ADDED, userAddedIn, message, {
-            user: userAdded,
-            hasJoined: true,
-          });
-        },
-        onGroupMemberLeft: (message, leavingUser, group) => {
-          callback(enums.GROUP_MEMBER_LEFT, group, message, {
-            user: leavingUser,
-          });
-        },
-        onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
-          callback(enums.GROUP_MEMBER_JOINED, joinedGroup, message, {
-            user: joinedUser,
-          });
-        },
-      })
-    );
-
-    CometChat.addMessageListener(
-      this.conversationListenerId,
-      new CometChat.MessageListener({
-        onTextMessageReceived: (textMessage) => {
-          callback(enums.TEXT_MESSAGE_RECEIVED, null, textMessage);
-        },
-        onMediaMessageReceived: (mediaMessage) => {
-          callback(enums.MEDIA_MESSAGE_RECEIVED, null, mediaMessage);
-        },
-        onCustomMessageReceived: (customMessage) => {
-          callback(enums.CUSTOM_MESSAGE_RECEIVED, null, customMessage);
-        },
-        onMessageDeleted: (deletedMessage) => {
-          callback(enums.MESSAGE_DELETED, null, deletedMessage);
-        },
-        onMessageEdited: (editedMessage) => {
-          callback(enums.MESSAGE_EDITED, null, editedMessage);
-        },
-      })
-    );
-
-    CometChat.addCallListener(
-      this.callListenerId,
-      new CometChat.CallListener({
-        onIncomingCallReceived: (call) => {
-          callback(enums.INCOMING_CALL_RECEIVED, null, call);
-        },
-        onIncomingCallCancelled: (call) => {
-          callback(enums.INCOMING_CALL_CANCELLED, null, call);
-        },
-      })
-    );
-  }
-
-  removeListeners() {
-    CometChat.removeMessageListener(this.conversationListenerId);
-    CometChat.removeUserListener(this.userListenerId);
-    CometChat.removeGroupListener(this.groupListenerId);
-    CometChat.removeCallListener(this.callListenerId);
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationList/style.js

@@ -1,78 +0,0 @@
-export const chatsWrapperStyle = () => {
-  return {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    boxSizing: "border-box",
-  };
-};
-
-export const chatsHeaderStyle = (theme) => {
-  return {
-    padding: "19px 16px",
-    display: "flex",
-    alignItems: "center",
-    borderBottom: `1px solid ${theme.color.darkSecondary}`,
-  };
-};
-
-export const chatsHeaderCloseStyle = (img) => {
-  return {
-    cursor: "pointer",
-    display: "none",
-    background: `url(${img}) left center / 18px no-repeat`,
-    height: "24px",
-    width: "33%",
-  };
-};
-
-export const chatsHeaderTitleStyle = (enableCloseMenu) => {
-  const alignment = enableCloseMenu
-    ? {
-        width: "33%",
-        textAlign: "center",
-      }
-    : {};
-
-  return {
-    margin: "0",
-    display: "inline-block",
-    width: "66%",
-    fontWeight: "700",
-    textAlign: "left",
-    fontSize: "20px",
-    ...alignment,
-  };
-};
-
-export const chatsMsgStyle = () => {
-  return {
-    overflow: "hidden",
-    width: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "absolute",
-    top: "50%",
-  };
-};
-
-export const chatsMsgTxtStyle = (theme) => {
-  return {
-    margin: "0",
-    height: "30px",
-    color: `${theme.color.secondary}`,
-    fontSize: "24px!important",
-    fontWeight: "600",
-  };
-};
-
-export const chatsListStyle = () => {
-  return {
-    height: "calc(100% - 75px)",
-    width: "100%",
-    overflowY: "auto",
-    margin: "0",
-    padding: "0",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListActions/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <ul :style="styles.conversationActionStyle" class="list__item__actions">
-    <li>
-      <button 
-        type="button"
-        :style="styles.groupButtonStyle" 
-        class="group__button button__delete"
-        @click="deleteConversation($event)"
-      ></button>
-    </li>
-  </ul>
-</template>
-
-<script>
-
-import { DEFAULT_OBJECT_PROP } from "../../../resources/constants";
-import { propertyCheck } from "../../../mixins/";
-import * as style from "./style";
-import { CometChatEvent } from '../../../util/CometChatEvent';
-import { EVENTS } from '../../../util/enums';
-import loadingIcon from "./resources/progress.svg";
-import deleteIcon from "./resources/delete.svg";
-
-/**
- * 
- *
- * @displayName cometchatConversationListActions
- */
-export default {
-  name: "cometchatConversationListActions",
-  mixins: [propertyCheck],
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Conversation.
-     */
-    conversation: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      deleteInProgress: false
-    }
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */ styles() {
-      return {
-        conversationActionStyle: style.conversationActionStyle(this.theme),
-        groupButtonStyle: style.groupButtonStyle(this.deleteInProgress, loadingIcon, deleteIcon),
-      };
-    },
-  },
-  methods: {
-    /**
-     * Jump to new messages
-     */
-    deleteConversation(event) {
-      event.stopPropagation();
-      CometChatEvent.triggerHandler(EVENTS["DELETE_CONVERSATION"], this.conversation)
-    },
-  },
-};
-</script>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListActions/resources/delete.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.25 21H6.75C6.35218 21 5.97064 20.842 5.68934 20.5607C5.40804 20.2794 5.25 19.8978 5.25 19.5V6H18.75V19.5C18.75 19.8978 18.592 20.2794 18.3107 20.5607C18.0294 20.842 17.6478 21 17.25 21Z" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.75 16.5V10.5" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.25 16.5V10.5" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.25 6H21.75" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.25 3H9.75C9.35218 3 8.97064 3.15804 8.68934 3.43934C8.40804 3.72064 8.25 4.10218 8.25 4.5V6H15.75V4.5C15.75 4.10218 15.592 3.72064 15.3107 3.43934C15.0294 3.15804 14.6478 3 14.25 3Z" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListActions/resources/progress.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><defs><filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0"></feGaussianBlur><feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend></filter></defs><path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="#ffffff" filter="url(#uil-ring-shadow)"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" dur="1s"></animateTransform></path></svg>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListActions/style.js

@@ -1,35 +0,0 @@
-export const conversationActionStyle = theme => {
-	return {
-		display: "flex",
-		listStyleType: "none",
-		padding: "8px",
-		margin: "0",
-		width: "72px",
-		backgroundColor: `${theme.backgroundColor.primary}`,
-		borderRadius: "4px",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		position: "absolute",
-		right: "16px",
-		top: "0px",
-		height: "100%",
-	};
-};
-
-export const groupButtonStyle = (actionInProgress, progressIcon, actionIcon) => {
-
-	const backgroundImage = actionInProgress ? progressIcon : actionIcon;
-
-	return {
-		outline: "0",
-		border: "0",
-		height: "24px",
-		width: "24px",
-		borderRadius: "4px",
-		alignItems: "center",
-		display: "inline-flex",
-		justifyContent: "center",
-		position: "relative",
-		background: `url(${backgroundImage}) center center no-repeat`,
-	};
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListItem/CometChatConversationListItem.vue

@@ -1,313 +0,0 @@
-<template>
-  <div 
-    class="chat__item--hover" 
-    :style="styles.list" 
-    @click="itemClickHandler"
-    @mouseenter="handleMouseHover(true)"
-    @mouseleave="handleMouseHover(false)"
-  >
-    <div :style="styles.thumbnail">
-      <comet-chat-avatar
-        border-width="1px"
-        corner-radius="18px"
-        :image="getAvatar()"
-        :border-color="theme.borderColor.primary"
-      />
-      <comet-chat-user-presence
-        border-width="1px"
-        corner-radius="50%"
-        :border-color="theme.borderColor.primary"
-        :status="conversation.conversationWith.status"
-        v-if="conversation.conversationType === 'user'"
-      />
-    </div>
-    <div :style="styles.detail">
-      <div :style="styles.row">
-        <div
-          :style="styles.name"
-          @mouseenter="toggleTooltip($event, true)"
-          @mouseleave="toggleTooltip($event, false)"
-        >
-          {{ conversation.conversationWith.name }}
-        </div>
-        <span
-          :style="styles.lastMsgTime"
-          class="item__details__timestamp"
-          v-if="conversation.lastMessage"
-          >{{ getLastMessageTime() }}</span
-        >
-      </div>
-      <div :style="styles.row">
-        <div
-          :style="styles.lastMsg"
-          @mouseenter="toggleTooltip($event, true)"
-          @mouseleave="toggleTooltip($event, false)"
-        >
-          {{ getLastMessage() }}
-        </div>
-        <comet-chat-badge-count
-          :theme="theme"
-          :count="conversation.unreadMessageCount"
-        />
-      </div>
-      <div v-if="isHovering">
-        <cometchat-conversation-list-actions
-          :theme="theme"
-          :conversation="conversation"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import dateFormat from "dateformat";
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon, propertyCheck, tooltip } from "../../../mixins/";
-import * as enums from "../../../util/enums.js";
-
-import {
-  CometChatAvatar,
-  CometChatBadgeCount,
-  CometChatUserPresence,
-} from "../../Shared/";
-import cometchatConversationListActions from "../CometChatConversationListActions/index.vue";
-
-import * as style from "./style";
-
-/**
- * The conversation item for conversation list.
- *
- * @displayName CometChatConversationListItem
- */
-export default {
-  name: "CometChatConversationListItem",
-  mixins: [tooltip, propertyCheck, cometChatCommon],
-  components: {
-    CometChatAvatar,
-    CometChatBadgeCount,
-    CometChatUserPresence,
-    cometchatConversationListActions,
-  },
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * @ignore
-     */
-    config: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current conversation object.
-     */
-    conversation: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Selected conversation object.
-     */
-    selectedConversation: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      isHovering: false,
-    }
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        list: style.listItem(
-          this.theme,
-          this.conversation,
-          this.selectedConversation
-        ),
-        row: style.itemRowStyle(),
-        name: style.itemNameStyle(),
-        detail: style.itemDetailStyle(),
-        thumbnail: style.itemThumbnailStyle(),
-        lastMsg: style.itemLastMsgStyle(this.theme),
-        lastMsgTime: style.itemLastMsgTimeStyle(this.theme),
-      };
-    },
-  },
-  methods: {
-    /**
-     * Handles item click
-     */
-    itemClickHandler() {
-      this.emitEvent("click", {
-        item: this.conversation.conversationWith,
-        type: this.conversation.conversationType,
-      });
-    },
-    handleMouseHover(toggleFlag) {
-      if(toggleFlag && !this.isHovering) {
-        this.isHovering = true;
-      } else if(!toggleFlag && this.isHovering) {
-        this.isHovering = false;
-      }
-    },
-    /**
-     * Gets SVG avatar
-     */
-    getAvatar() {
-      let avatar;
-      if (this.conversation.conversationType === "user") {
-        avatar = this.conversation.conversationWith.avatar;
-      } else if (this.conversation.conversationType === "group") {
-        avatar = this.conversation.conversationWith.icon;
-      }
-      return avatar;
-    },
-    /**
-     * Gets last message time
-     */
-    getLastMessageTime() {
-      if (!this.conversation) {
-        return false;
-      }
-
-      if (this.hasProperty(this.conversation, "lastMessage") === false) {
-        return false;
-      }
-
-      if (this.hasProperty(this.conversation.lastMessage, "sentAt") === false) {
-        return false;
-      }
-
-      let timestamp = null;
-
-      const messageTimestamp = new Date(
-        this.conversation.lastMessage.sentAt * 1000
-      );
-      const currentTimestamp = Date.now();
-
-      const diffTimestamp = currentTimestamp - messageTimestamp;
-
-      if (diffTimestamp < 24 * 60 * 60 * 1000) {
-        timestamp = dateFormat(messageTimestamp, "shortTime");
-      } else if (diffTimestamp < 48 * 60 * 60 * 1000) {
-        timestamp = COMETCHAT_CONSTANTS.YESTERDAY;
-      } else if (diffTimestamp < 7 * 24 * 60 * 60 * 1000) {
-        timestamp = dateFormat(messageTimestamp, "dddd");
-      } else {
-        timestamp = dateFormat(messageTimestamp, "dd/mm/yyyy");
-      }
-
-      return timestamp;
-    },
-    getLastMessage() {
-      if (!this.conversation.lastMessage) return "";
-
-      const lastMessage = this.conversation.lastMessage;
-
-      let message = null;
-      if (this.hasProperty(lastMessage, "deletedAt")) {
-        message =
-          this.loggedInUser.uid === lastMessage.sender.uid
-            ? COMETCHAT_CONSTANTS.YOU_DELETED_THIS_MESSAGE
-            : COMETCHAT_CONSTANTS.THIS_MESSAGE_DELETED;
-      } else {
-        switch (lastMessage.category) {
-          case "message":
-            message = this.getMessage(lastMessage);
-            break;
-          case "call":
-            message = this.getCallMessage(lastMessage);
-            break;
-          case "action":
-            message = lastMessage.message;
-            break;
-          case "custom":
-            message = this.getCustomMessage(lastMessage);
-            break;
-          default:
-            break;
-        }
-      }
-      return message;
-    },
-    getMessage(lastMessage) {
-      let message = "";
-      switch (lastMessage.type) {
-        case CometChat.MESSAGE_TYPE.TEXT:
-          message = lastMessage.text;
-          break;
-        case CometChat.MESSAGE_TYPE.MEDIA:
-          message = COMETCHAT_CONSTANTS.MEDIA_MESSAGE;
-          break;
-        case CometChat.MESSAGE_TYPE.IMAGE:
-          message = COMETCHAT_CONSTANTS.MESSAGE_IMAGE;
-          break;
-        case CometChat.MESSAGE_TYPE.FILE:
-          message = COMETCHAT_CONSTANTS.MESSAGE_FILE;
-          break;
-        case CometChat.MESSAGE_TYPE.VIDEO:
-          message = COMETCHAT_CONSTANTS.MESSAGE_VIDEO;
-          break;
-        case CometChat.MESSAGE_TYPE.AUDIO:
-          message = COMETCHAT_CONSTANTS.MESSAGE_AUDIO;
-          break;
-        case CometChat.MESSAGE_TYPE.CUSTOM:
-          message = COMETCHAT_CONSTANTS.CUSTOM_MESSAGE;
-          break;
-        default:
-          break;
-      }
-
-      return message;
-    },
-    getCallMessage(lastMessage) {
-      let message = "";
-      const type = lastMessage.type;
-
-      switch (type) {
-        case CometChat.MESSAGE_TYPE.VIDEO:
-          message = COMETCHAT_CONSTANTS.VIDEO_CALL;
-          break;
-        case CometChat.MESSAGE_TYPE.AUDIO:
-          message = COMETCHAT_CONSTANTS.AUDIO_CALL;
-          break;
-        default:
-          break;
-      }
-
-      return message;
-    },
-    getCustomMessage(lastMessage) {
-      let message = "";
-      switch (lastMessage.type) {
-        case enums.CUSTOM_TYPE_POLL:
-          message = COMETCHAT_CONSTANTS.CUSTOM_MESSAGE_POLL;
-          break;
-        case enums.CUSTOM_TYPE_STICKER:
-          message = COMETCHAT_CONSTANTS.CUSTOM_MESSAGE_STICKER;
-          break;
-        case enums.CUSTOM_TYPE_DOCUMENT:
-          message = COMETCHAT_CONSTANTS.CUSTOM_MESSAGE_DOCUMENT;
-          break;
-        default:
-          break;
-      }
-
-      return message;
-    },
-  },
-};
-</script>
-<style scoped>
-.chat__item--hover:hover {
-  background-color: var(--chat-item-bg-color-hover);
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListItem/style.js

@@ -1,81 +0,0 @@
-export const listItem = (theme, conversation, selectedConversation) => {
-  const selectedState =
-    conversation &&
-    selectedConversation &&
-    selectedConversation.conversationId === conversation.conversationId
-      ? {
-          backgroundColor: `${theme.backgroundColor.primary}`,
-        }
-      : {};
-
-  return {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "left",
-    alignItems: "center",
-    cursor: "pointer",
-    width: "100%",
-    padding: "10px 20px",
-    position: "relative",
-    ...selectedState,
-    "--chat-item-bg-color-hover": `${theme.backgroundColor.primary}`,
-  };
-};
-
-export const itemThumbnailStyle = () => {
-  return {
-    display: "inline-block",
-    width: "36px",
-    height: "36px",
-    flexShrink: "0",
-  };
-};
-
-export const itemDetailStyle = () => {
-  return {
-    width: "calc(100% - 45px)",
-    flexGrow: "1",
-    paddingLeft: "15px",
-  };
-};
-
-export const itemRowStyle = () => {
-  return {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "baseline",
-  };
-};
-
-export const itemNameStyle = () => {
-  return {
-    fontSize: "15px",
-    fontWeight: "600",
-    display: "block",
-    width: "calc(100% - 60px)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-  };
-};
-
-export const itemLastMsgStyle = (theme) => {
-  return {
-    margin: "0",
-    fontSize: "13px",
-    width: "calc(100% - 50px)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    lineHeight: "20px",
-    color: `${theme.color.helpText}`,
-  };
-};
-
-export const itemLastMsgTimeStyle = (theme) => {
-  return {
-    fontSize: "11px",
-    textTransform: "uppercase",
-    color: `${theme.color.helpText}`,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListWithMessages/CometChatConversationListWithMessages.vue

@@ -1,354 +0,0 @@
-<template>
-  <div :style="styles.root" class="cometchat__chats">
-    <div :style="styles.sidebar" class="chats__sidebar">
-      <comet-chat-conversation-list
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        :last-message="lastMessage"
-        :group-to-leave="groupToLeave"
-        :group-to-delete="groupToDelete"
-        :group-to-update="groupToUpdate"
-        :enable-close-menu="isItemPresent"
-        :message-to-mark-read="messageToMarkRead"
-        @action="actionHandler"
-      />
-    </div>
-    <div v-if="isItemPresent" class="chats__main" :style="styles.main">
-      <comet-chat-messages
-        :tab="tab"
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        :call-message="callMessage"
-        :logged-in-user="loggedInUser"
-        :group-messages="groupMessages"
-        :action-from-listener="actionFromListener"
-        :composed-thread-message="composedThreadMessage"
-        @action="actionHandler"
-      />
-    </div>
-    <div
-      v-if="viewDetailScreen"
-      :style="styles.secondary"
-      class="chats__secondary-view"
-    >
-      <comet-chat-user-details
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        v-if="type === 'user'"
-        @action="actionHandler"
-      />
-      <comet-chat-group-details
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        v-else-if="type === 'group'"
-        @action="actionHandler"
-      />
-    </div>
-    <div
-      v-if="viewThreadMessage"
-      :style="styles.secondary"
-      class="chats__secondary-view"
-    >
-      <comet-chat-message-thread
-        :tab="tab"
-        :theme="themeValue"
-        :item="threadMessageItem"
-        :type="threadMessageType"
-        :logged-in-user="loggedInUser"
-        :parent-message="threadMessageParent"
-        @action="actionHandler"
-      />
-    </div>
-    <comet-chat-incoming-call :theme="themeValue" @action="actionHandler" />
-    <comet-chat-outgoing-call
-      :item="item"
-      :type="type"
-      :theme="themeValue"
-      :incoming-call="incomingCall"
-      :outgoing-call="outgoingCall"
-      :logged-in-user="loggedInUser"
-      @action="actionHandler"
-    />
-    <comet-chat-image-viewer
-      :open="true"
-      v-if="imageView"
-      :message="imageView"
-      @action="actionHandler"
-    />
-  </div>
-</template>
-
-<script>
-import { DEFAULT_OBJECT_PROP } from "../../../resources/constants";
-
-import { CometChatManager } from "../../../util/controller";
-import { cometChatScreens } from "../../../mixins/";
-
-import {
-  CometChatMessages,
-  CometChatImageViewer,
-  CometChatMessageThread,
-} from "../../Messages/";
-import { CometChatUserDetails } from "../../Users";
-import { CometChatGroupDetails } from "../../Groups";
-import { CometChatIncomingCall, CometChatOutgoingCall } from "../../Calls";
-
-import CometChatConversationList from "../CometChatConversationList/CometChatConversationList";
-
-import { theme } from "../../../resources/theme";
-
-import * as style from "./style";
-
-/**
- * Displays a list of conversation with messages.
- *
- * @displayName CometChatConversationListItem
- */
-export default {
-  name: "CometChatConversationListWithMessages",
-  mixins: [cometChatScreens],
-  components: {
-    CometChatImageViewer,
-    CometChatIncomingCall,
-    CometChatOutgoingCall,
-    CometChatUserDetails,
-    CometChatGroupDetails,
-    CometChatMessageThread,
-    CometChatConversationList,
-    CometChatMessages,
-  },
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      item: {},
-      type: "",
-      imageView: null,
-      darkTheme: false,
-      lastMessage: {},
-      callMessage: {},
-      groupToLeave: {},
-      groupToDelete: {},
-      groupToUpdate: {},
-      groupMessages: [],
-      viewSidebar: false,
-      incomingCall: null,
-      outgoingCall: null,
-      loggedInUser: null,
-      tab: "conversations",
-      messageToMarkRead: {},
-      threadMessageItem: {},
-      actionFromListener: {},
-      viewDetailScreen: false,
-      threadMessageType: null,
-      threadMessageParent: {},
-      viewThreadMessage: false,
-      composedThreadMessage: {},
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        root: style.chatScreenStyle(this.themeValue),
-        main: style.chatScreenMainStyle(
-          this.viewThreadMessage,
-          this.viewDetailScreen
-        ),
-        sidebar: style.chatScreenSidebarStyle(
-          this.themeValue,
-          this.viewSidebar
-        ),
-        secondary: style.chatScreenSecondaryStyle(
-          this.themeValue,
-          this.viewThreadMessage
-        ),
-      };
-    },
-    /**
-     * Theme computed using default theme and theme coming from prop.
-     */
-    themeValue() {
-      return Object.assign({}, theme, this.theme);
-    },
-  },
-  methods: {
-    /**
-     * Handler for emitted action events
-     */
-    actionHandler({
-      action,
-      key,
-      item,
-      call,
-      type,
-      count,
-      group,
-      members,
-      options,
-      message,
-      messages,
-      incomingCall,
-      rejectedCall,
-    }) {
-      switch (action) {
-        case "item-click":
-          this.itemClicked(item, type);
-          break;
-        case "blockUser":
-          this.blockUser();
-          break;
-        case "unblockUser":
-          this.unblockUser();
-          break;
-        case "audioCall":
-          this.audioCall();
-          break;
-        case "videoCall":
-          this.videoCall();
-          break;
-        case "viewDetail":
-        case "closeDetailClicked":
-          this.toggleDetailView();
-          break;
-        case "menuClicked":
-          this.item = {};
-          this.toggleSideBar();
-          break;
-        case "closeMenuClicked":
-          this.toggleSideBar();
-          break;
-        case "groupUpdated":
-          this.groupUpdated(key, options);
-          break;
-        case "groupDeleted":
-          this.deleteGroup(group);
-          break;
-        case "leftGroup":
-          this.leaveGroup(group);
-          break;
-        case "membersUpdated":
-          this.updateMembersCount(count);
-          break;
-        case "viewMessageThread":
-          this.viewMessageThread(message);
-          break;
-        case "closeThreadClicked":
-          this.closeThreadMessages();
-          break;
-        case "threadMessageComposed":
-          this.onThreadMessageComposed(messages);
-          this.updateLastMessage(messages[0]);
-          break;
-        case "acceptIncomingCall":
-          this.acceptIncomingCall(incomingCall);
-          break;
-        case "acceptedIncomingCall":
-          this.appendCallMessage(call);
-          break;
-        case "rejectedIncomingCall":
-          this.rejectedIncomingCall(incomingCall, rejectedCall);
-          break;
-        case "outgoingCallRejected":
-        case "outgoingCallCancelled":
-        case "callEnded":
-          this.outgoingCallEnded(call);
-          break;
-        case "userJoinedCall":
-        case "userLeftCall":
-          this.appendCallMessage(call);
-          break;
-        case "viewActualImage":
-          this.setImageView(message);
-          break;
-        case "closeActualImage":
-          this.setImageView(null);
-          break;
-        case "membersAdded":
-          this.membersAdded(members);
-          break;
-        case "memberUnbanned":
-          this.memberUnbanned(members);
-          break;
-        case "memberScopeChanged":
-          this.memberScopeChanged(members);
-          break;
-        case "messageDeleted":
-          this.closeThreadMessages();
-          break;
-        case "messageComposed":
-        case "lastMessageEdited":
-        case "lastMessageDeleted":
-          this.updateLastMessage(messages[0]);
-          break;
-        case "messageEdited":
-          this.updateThreadMessage(message);
-          break;
-        case "listenerData":
-          this.actionFromListener = { action: action, messages: [...messages] };
-          break;
-        default:
-          break;
-      }
-    },
-  },
-  beforeMount() {
-    if (!Object.keys(this.item).length) {
-      this.toggleSideBar();
-    }
-
-    (async () => {
-      try {
-        this.loggedInUser = await new CometChatManager().getLoggedInUser();
-      } catch (error) {
-        this.logError(
-          "[CometChatConversationScreen] getLoggedInUser error",
-          error
-        );
-      }
-    })();
-  },
-};
-</script>
-
-<style scoped>
-.cometchat__chats * {
-  box-sizing: border-box;
-  font-family: var(--chat-screen-font-family) !important;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .chats__sidebar {
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    width: 100% !important;
-    transition: all 0.3s ease-out;
-    position: absolute !important;
-    left: var(--cometchat-chats-sidebar-left);
-    background-color: var(--cometchat-chats-sidebar-bg);
-    box-shadow: var(--cometchat-chats-sidebar-box-shadow);
-  }
-  .chats__main {
-    width: 100% !important;
-  }
-  .chats__secondary-view {
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    right: 0 !important;
-    width: 100% !important;
-    position: absolute !important;
-    background-color: var(--chats-secondary-bg-color) !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/CometChatConversationListWithMessages/style.js

@@ -1,64 +0,0 @@
-export const chatScreenStyle = (theme) => {
-  return {
-    display: "flex",
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    fontFamily: `${theme.fontFamily}`,
-    "--chat-screen-font-family": `${theme.fontFamily}`,
-  };
-};
-
-export const chatScreenSidebarStyle = (theme, sidebarView) => {
-  const sidebar = sidebarView
-    ? {
-        "--cometchat-chats-sidebar-left": "0",
-        "--cometchat-chats-sidebar-box-shadow":
-          "rgba(0, 0, 0, .4) -30px 0 30px 30px",
-      }
-    : {};
-
-  return {
-    width: "280px",
-    borderRight: `1px solid ${theme.borderColor.primary}`,
-    height: "100%",
-    position: "relative",
-    "--cometchat-chats-sidebar-left": "-100%",
-    "--cometchat-chats-sidebar-bg": `${theme.backgroundColor.white}`,
-    ...sidebar,
-  };
-};
-
-export const chatScreenMainStyle = (threadMessageView, detailView) => {
-  const secondaryView = threadMessageView
-    ? {
-        width: "calc(100% - 680px)",
-      }
-    : detailView
-    ? {
-        width: "calc(100% - 580px)",
-      }
-    : {};
-
-  return {
-    width: "calc(100% - 280px)",
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    order: "2",
-    ...secondaryView,
-  };
-};
-
-export const chatScreenSecondaryStyle = (theme, threadMessageView) => {
-  return {
-    float: "right",
-    borderLeft: `1px solid ${theme.borderColor.primary}`,
-    height: "100%",
-    width: threadMessageView ? "400px" : "300px",
-    display: "flex",
-    flexDirection: "column",
-    order: "3",
-    "--chats-secondary-bg-color": `${theme.backgroundColor.white}`,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Chats/index.js

@@ -1,4 +0,0 @@
-export { default as CometChatConversationList } from "./CometChatConversationList/CometChatConversationList";
-export { default as CometChatConversationListItem } from "./CometChatConversationListItem/CometChatConversationListItem";
-export { default as CometChatConversationListWithMessages } from "./CometChatConversationListWithMessages/CometChatConversationListWithMessages";
-export { default as cometchatConversationListActions } from "./CometChatConversationListActions/index";

frontend/src/cometchat-pro-vue-ui-kit/src/components/CometChatUI/CometChatNavBar/CometChatNavBar.vue

@@ -1,229 +0,0 @@
-<template>
-  <div class="cometchat__unified__navbar">
-    <template v-if="tab === 'contacts'">
-      <comet-chat-user-list
-        :item="item"
-        :type="type"
-        :theme="theme"
-        :enable-close-menu="enableCloseMenu"
-        @action="actionHandler"
-      />
-    </template>
-    <template v-else-if="tab === 'conversations'">
-      <comet-chat-conversation-list
-        :item="item"
-        :type="type"
-        :theme="theme"
-        :last-message="lastMessage"
-        :group-to-leave="groupToLeave"
-        :group-to-delete="groupToDelete"
-        :group-to-update="groupToUpdate"
-        :enable-close-menu="enableCloseMenu"
-        :message-to-mark-read="messageToMarkRead"
-        @action="actionHandler"
-      />
-    </template>
-    <template v-else-if="tab === 'groups'">
-      <comet-chat-group-list
-        :item="item"
-        :type="type"
-        :theme="theme"
-        :group-to-leave="groupToLeave"
-        :group-to-delete="groupToDelete"
-        :group-to-update="groupToUpdate"
-        :enable-close-menu="enableCloseMenu"
-        @action="actionHandler"
-      />
-    </template>
-    <template v-else-if="tab === 'info'">
-      <comet-chat-user-profile :theme="theme" @action="actionHandler" />
-    </template>
-    <div :style="styles.footer" class="sidebar__footer">
-      <div :style="styles.navbar" class="footer__navbar">
-        <div :style="styles.item" @click="changeTab('conversations')">
-          <span :style="styles.chatsIcon"></span>
-        </div>
-        <div :style="styles.item" @click="changeTab('contacts')">
-          <span :style="styles.contactIcon"></span>
-        </div>
-        <div :style="styles.item" @click="changeTab('groups')">
-          <span :style="styles.groupIcon"></span>
-        </div>
-        <div :style="styles.item" @click="changeTab('info')">
-          <span :style="styles.moreIcon"></span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import {
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_STRING_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon } from "../../../mixins/";
-
-import { CometChatConversationList } from "../../Chats/";
-import { CometChatUserProfile } from "../../UserProfile/";
-import { CometChatGroupList } from "../../Groups";
-import { CometChatUserList } from "../../Users";
-
-import contactGreyIcon from "./resources/contacts-grey.png";
-import contactBlueIcon from "./resources/contacts-blue.png";
-import moreGreyIcon from "./resources/userInfo-grey.png";
-import moreBlueIcon from "./resources/userInfo-blue.png";
-import groupBlueIcon from "./resources/groups-blue.png";
-import groupGreyIcon from "./resources/groups-grey.png";
-import chatGreyIcon from "./resources/chats-grey.png";
-import chatBlueIcon from "./resources/chats-blue.png";
-
-import * as style from "./style";
-
-/**
- * Navigation bar for switching tabs in CometChatUI.
- *
- * @displayName CometChatNavBar
- */
-export default {
-  name: "CometChatNavBar",
-  mixins: [cometChatCommon],
-  components: {
-    CometChatConversationList,
-    CometChatUserProfile,
-    CometChatGroupList,
-    CometChatUserList,
-  },
-  props: {
-    /**
-     * Current active tab.
-     * @values conversations, contacts, groups, info
-     */
-    tab: { ...DEFAULT_STRING_PROP },
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Type of chat item.
-     */
-    type: { ...DEFAULT_STRING_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Last message in message list.
-     */
-    lastMessage: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The group selected to leave.
-     */
-    groupToLeave: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The group selected to update.
-     */
-    groupToUpdate: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The group selected to delete.
-     */
-    groupToDelete: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Shows/hides the close menu button.
-     */
-    enableCloseMenu: { ...DEFAULT_BOOLEAN_PROP },
-    /**
-     * Message marked to read.
-     */
-    messageToMarkRead: { ...DEFAULT_OBJECT_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        item: style.itemStyle(),
-        footer: style.footerStyle(),
-        navbar: style.navbarStyle(),
-        chatsIcon: style.itemLinkStyle(
-          chatGreyIcon,
-          chatBlueIcon,
-          this.isChatsTabActive
-        ),
-        contactIcon: style.itemLinkStyle(
-          contactGreyIcon,
-          contactBlueIcon,
-          this.isContactsTabActive
-        ),
-        groupIcon: style.itemLinkStyle(
-          groupGreyIcon,
-          groupBlueIcon,
-          this.isGroupsTabActive,
-          true
-        ),
-        moreIcon: style.itemLinkStyle(
-          moreGreyIcon,
-          moreBlueIcon,
-          this.isMoreTabActive
-        ),
-      };
-    },
-    /**
-     * Whether chats tab is active.
-     */
-    isChatsTabActive() {
-      return this.tab === "conversations";
-    },
-    /**
-     * Whether users tab is active.
-     */
-    isContactsTabActive() {
-      return this.tab === "contacts";
-    },
-    /**
-     * Whether groups tab is active.
-     */
-    isGroupsTabActive() {
-      return this.tab === "groups";
-    },
-    /**
-     * Whether info tab is active.
-     */
-    isMoreTabActive() {
-      return this.tab === "info";
-    },
-  },
-  methods: {
-    /**
-     * Emits change tab event
-     */
-    changeTab(tab) {
-      this.emitAction("tabChanged", { tab });
-    },
-    /**
-     * Handles emitted action events
-     */
-    actionHandler({ action, ...rest }) {
-      this.emitAction(action, { ...rest });
-    },
-  },
-};
-</script>
-<style scoped>
-.cometchat__unified__navbar {
-  height: 100%;
-  width: 280px;
-}
-.cometchat__unified__navbar .chats__wrapper,
-.cometchat__unified__navbar .groups__wrapper,
-.cometchat__unified__navbar .contacts__wrapper {
-  height: calc(100% - 50px) !important;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .cometchat__unified__navbar {
-    width: 100% !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/CometChatUI/CometChatNavBar/style.js

@@ -1,40 +0,0 @@
-export const footerStyle = () => {
-  return {
-    width: "100%",
-    zIndex: "1",
-  };
-};
-
-export const navbarStyle = () => {
-  return {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-  };
-};
-
-export const itemStyle = () => {
-  return {
-    display: "inline-block",
-    padding: "13px",
-    cursor: "pointer",
-  };
-};
-
-export const itemLinkStyle = (icon, activeStateIcon, isActive, isGroup) => {
-  let background = isActive
-    ? {
-        background: `url(${activeStateIcon}) 0% 0% / contain no-repeat`,
-      }
-    : {
-        background: `url(${icon}) 0% 0% / contain no-repeat`,
-      };
-
-  return {
-    height: "20px",
-    display: "inline-block",
-    width: isGroup ? "28px" : "21px",
-    ...background,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/CometChatUI/CometChatUI.vue

@@ -1,383 +0,0 @@
-<template>
-  <div :style="styles.root" class="cometchat__unified">
-    <div :style="styles.sidebar" class="unified__sidebar">
-      <comet-chat-nav-bar
-        :tab="tab"
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        :last-message="lastMessage"
-        :group-to-leave="groupToLeave"
-        :group-to-update="groupToUpdate"
-        :group-to-delete="groupToDelete"
-        :enable-close-menu="isItemPresent"
-        :message-to-mark-read="messageToMarkRead"
-        @action="actionHandler"
-      />
-    </div>
-    <div v-if="isItemPresent" class="unified__main" :style="styles.main">
-      <comet-chat-messages
-        :tab="tab"
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        :call-message="callMessage"
-        :logged-in-user="loggedInUser"
-        :group-messages="groupMessages"
-        :action-from-listener="actionFromListener"
-        :composed-thread-message="composedThreadMessage"
-        @action="actionHandler"
-      />
-    </div>
-    <div v-else :style="styles.placeholder">
-      {{ placeholderMessage }}
-    </div>
-    <div
-      v-if="viewDetailScreen"
-      :style="styles.secondary"
-      class="unified__secondary"
-    >
-      <comet-chat-user-details
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        v-if="type === 'user'"
-        @action="actionHandler"
-      />
-      <comet-chat-group-details
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        v-else-if="type === 'group'"
-        @action="actionHandler"
-      />
-    </div>
-    <div
-      v-if="viewThreadMessage"
-      :style="styles.secondary"
-      class="unified__secondary"
-    >
-      <comet-chat-message-thread
-        :tab="tab"
-        :theme="themeValue"
-        :item="threadMessageItem"
-        :type="threadMessageType"
-        :logged-in-user="loggedInUser"
-        :parent-message="threadMessageParent"
-        @action="actionHandler"
-      />
-    </div>
-    <comet-chat-incoming-call :theme="themeValue" @action="actionHandler" />
-    <comet-chat-outgoing-call
-      :item="item"
-      :type="type"
-      :theme="themeValue"
-      :incoming-call="incomingCall"
-      :outgoing-call="outgoingCall"
-      :logged-in-user="loggedInUser"
-      @action="actionHandler"
-    />
-    <comet-chat-image-viewer
-      :open="true"
-      v-if="imageView"
-      :message="imageView"
-      @action="actionHandler"
-    />
-  </div>
-</template>
-<script>
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../resources/constants";
-
-import { cometChatScreens } from "../../mixins/";
-import { CometChatManager } from "../../util/controller";
-
-import {
-  CometChatMessages,
-  CometChatImageViewer,
-  CometChatMessageThread,
-} from "../Messages/";
-import { CometChatUserDetails } from "../Users";
-import { CometChatGroupDetails } from "../Groups";
-import { CometChatIncomingCall, CometChatOutgoingCall } from "../Calls";
-
-import CometChatNavBar from "./CometChatNavBar/CometChatNavBar";
-
-import { theme } from "../../resources/theme";
-
-import * as style from "./style";
-
-/**
- * Displays a fully working chat application.
- *
- * @displayName CometChatUI
- */
-export default {
-  name: "CometChatUI",
-  mixins: [cometChatScreens],
-  components: {
-    CometChatNavBar,
-    CometChatImageViewer,
-    CometChatIncomingCall,
-    CometChatOutgoingCall,
-    CometChatUserDetails,
-    CometChatGroupDetails,
-    CometChatMessageThread,
-    CometChatMessages,
-  },
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      item: {},
-      type: "user",
-      imageView: null,
-      darkTheme: false,
-      lastMessage: {},
-      callMessage: {},
-      groupToLeave: {},
-      groupToDelete: {},
-      groupToUpdate: {},
-      groupMessages: [],
-      viewSidebar: false,
-      incomingCall: null,
-      outgoingCall: null,
-      loggedInUser: null,
-      tab: "conversations",
-      messageToMarkRead: {},
-      threadMessageItem: {},
-      actionFromListener: {},
-      viewDetailScreen: false,
-      threadMessageType: null,
-      threadMessageParent: {},
-      viewThreadMessage: false,
-      composedThreadMessage: {},
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        main: style.unifiedMainStyle(
-          this.viewThreadMessage,
-          this.viewDetailScreen
-        ),
-        secondary: style.unifiedSecondaryStyle(
-          this.themeValue,
-          this.viewThreadMessage
-        ),
-        root: style.unifiedStyle(this.themeValue),
-        placeholder: style.unifiedPlaceholderStyle(this.themeValue),
-        sidebar: style.unifiedSidebarStyle(this.themeValue, this.viewSidebar),
-      };
-    },
-    /**
-     * Theme computed using default theme and theme coming from prop.
-     */
-
-    themeValue() {
-      return Object.assign({}, theme, this.theme);
-    },
-    /**
-     * Placeholder message when chat item is not selected.
-     */
-    placeholderMessage() {
-      return this.STRINGS[
-        this.tab === "info"
-          ? "NO_TAB_SELECTED_MESSAGE"
-          : "NO_ITEM_SELECTED_MESSAGE"
-      ];
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  methods: {
-    /**
-     * Handler for emitted action events
-     */
-    actionHandler({
-      action,
-      tab,
-      item,
-      call,
-      type,
-      count,
-      group,
-      members,
-      message,
-      messages,
-      incomingCall,
-      rejectedCall,
-    }) {
-      switch (action) {
-        case "item-click":
-          this.itemClicked(item, type);
-          break;
-        case "tabChanged":
-          this.item = {};
-          this.changeTab(tab);
-          break;
-        case "blockUser":
-          this.blockUser();
-          break;
-        case "unblockUser":
-          this.unblockUser();
-          break;
-        case "audioCall":
-          this.audioCall();
-          break;
-        case "videoCall":
-          this.videoCall();
-          break;
-        case "viewDetail":
-        case "closeDetailClicked":
-          this.toggleDetailView();
-          break;
-        case "menuClicked":
-          this.item = {};
-          this.toggleSideBar();
-          break;
-        case "closeMenuClicked":
-          this.toggleSideBar();
-          break;
-        case "groupUpdated":
-          this.groupUpdated(item, count);
-          break;
-        case "groupDeleted":
-          this.deleteGroup(group);
-          break;
-        case "leftGroup":
-          this.leaveGroup(group);
-          break;
-        case "membersUpdated":
-          this.updateMembersCount(count);
-          break;
-        case "viewMessageThread":
-          this.viewMessageThread(message);
-          break;
-        case "closeThreadClicked":
-          this.closeThreadMessages();
-          break;
-        case "threadMessageComposed":
-          this.onThreadMessageComposed(messages);
-          this.updateLastMessage(messages[0]);
-          break;
-        case "acceptIncomingCall":
-          this.acceptIncomingCall(incomingCall);
-          break;
-        case "acceptedIncomingCall":
-          this.callInitiated(call);
-          break;
-        case "rejectedIncomingCall":
-          this.rejectedIncomingCall(incomingCall, rejectedCall);
-          break;
-        case "outgoingCallRejected":
-        case "outgoingCallCancelled":
-        case "callEnded":
-          this.outgoingCallEnded(call);
-          break;
-        case "userJoinedCall":
-        case "userLeftCall":
-          this.appendCallMessage(call);
-          break;
-        case "viewActualImage":
-          this.setImageView(message);
-          break;
-        case "closeActualImage":
-          this.setImageView(null);
-          break;
-        case "membersAdded":
-          this.membersAdded(members, message);
-          break;
-        case "memberUnbanned":
-          this.memberUnbanned(members, message);
-          break;
-        case "memberScopeChanged":
-          this.memberScopeChanged(members, message);
-          break;
-        case "messageDeleted":
-          this.closeThreadMessages();
-          break;
-        case "messageComposed":
-        case "lastMessageEdited":
-        case "lastMessageDeleted":
-          this.updateLastMessage(messages[0]);
-          break;
-        case "messageEdited":
-          this.updateThreadMessage(message);
-          break;
-        case "listenerData":
-          this.actionFromListener = { action: action, messages: [...messages] };
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Changes tab
-     */
-    changeTab(tab) {
-      this.tab = tab;
-      this.imageView = null;
-      this.viewDetailScreen = false;
-      this.viewThreadMessage = false;
-    },
-  },
-  beforeMount() {
-    if (!Object.keys(this.item).length) {
-      this.toggleSideBar();
-    }
-
-    (async () => {
-      try {
-        this.loggedInUser = await new CometChatManager().getLoggedInUser();
-      } catch (error) {
-        this.logError("[CometChatUnified] getLoggedInUser error", error);
-      }
-    })();
-  },
-};
-</script>
-<style scoped>
-.cometchat__unified {
-  box-sizing: border-box !important;
-  font-family: var(--cometchat-unified-font-family) !important;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .unified__sidebar {
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    width: 100% !important;
-    position: absolute !important;
-    transition: all 0.3s ease-out;
-    left: var(--cometchat-unified-sidebar-left);
-    background-color: var(--cometchat-unified-sidebar-bg-color);
-    box-shadow: var(--cometchat-unified-sidebar-box-shadow, none);
-  }
-  .unified__main {
-    width: 100% !important;
-  }
-  .unified__secondary {
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    right: 0 !important;
-    width: 100% !important;
-    position: absolute !important;
-    background-color: var(--cometchat-unified-sidebar-bg-color);
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/CometChatUI/index.js

@@ -1,3 +0,0 @@
-
-export { default as CometChatUI } from "./CometChatUI";
-export { default as CometChatNavBar } from "./CometChatNavBar/CometChatNavBar";

frontend/src/cometchat-pro-vue-ui-kit/src/components/CometChatUI/style.js

@@ -1,83 +0,0 @@
-export const unifiedStyle = (theme) => {
-  return {
-    display: "flex",
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    fontFamily: `${theme.fontFamily}`,
-    position: "relative",
-    "--cometchat-unified-font-family": `${theme.fontFamily}`,
-  };
-};
-
-export const unifiedSidebarStyle = (theme, viewSidebar) => {
-  const sidebarView = viewSidebar
-    ? {
-        "--cometchat-unified-sidebar-left": "0",
-        "--cometchat-unified-sidebar-box-shadow":
-          "rgba(0, 0, 0, .4) -30px 0 30px 30px",
-      }
-    : {
-        "--cometchat-unified-sidebar-left": "-100%",
-      };
-
-  return {
-    width: "280px",
-    borderRight: `1px solid ${theme.borderColor.primary}`,
-    height: "100%",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    // "> .contacts, .chats, .groups": {
-    //   height: "calc(100% - 50px)",
-    // },
-    "--cometchat-unified-sidebar-bg-color": `${theme.backgroundColor.white}`,
-    ...sidebarView,
-  };
-};
-
-export const unifiedMainStyle = (threadmessageview, detailview) => {
-  const secondaryView = threadmessageview
-    ? {
-        width: "calc(100% - 680px)",
-      }
-    : detailview
-    ? {
-        width: "calc(100% - 580px)",
-      }
-    : {};
-
-  return {
-    width: "calc(100% - 280px)",
-    height: "100%",
-    order: "2",
-    ...secondaryView,
-  };
-};
-
-export const unifiedSecondaryStyle = (theme, threadmessageview) => {
-  return {
-    float: "right",
-    borderLeft: `1px solid ${theme.borderColor.primary}`,
-    height: "100%",
-    width: threadmessageview ? "400px" : "300px",
-    display: "flex",
-    flexDirection: "column",
-    order: "3",
-    "--cometchat-unified-sidebar-bg-color": `${theme.backgroundColor.white}`,
-  };
-};
-
-export const unifiedPlaceholderStyle = (theme) => {
-  return {
-    width: "100%",
-    height: "100%",
-    opacity: "0.4",
-    display: "flex",
-    fontSize: "22px",
-    fontWeight: "700",
-    alignItems: "center",
-    justifyContent: "center",
-    color: `${theme.color.primary}`,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberList/CometChatAddGroupMemberList.vue

@@ -1,383 +0,0 @@
-<template>
-  <div>
-    <comet-chat-backdrop :show="open" @click="emitEvent('close')" />
-    <div :style="styles.modalWrapper" class="cometchat__add__members__wrapper">
-      <span
-        title="Close"
-        :style="styles.modalClose"
-        @click="emitEvent('close')"
-      ></span>
-      <div :style="styles.modalBody">
-        <table :style="styles.modalTable">
-          <caption :style="styles.tableCaption">
-            {{
-              STRINGS.CONTACTS
-            }}
-          </caption>
-          <caption :style="styles.tableSearch">
-            <input
-              type="text"
-              autoComplete="off"
-              placeholder="Search"
-              :style="styles.searchInput"
-              @input="searchUsers"
-            />
-          </caption>
-          <caption v-if="filteredList.length === 0" :style="styles.contactMsg">
-            <p :style="styles.contactMsgTxt">
-              {{ decoratorMessage }}
-            </p>
-          </caption>
-          <tbody
-            :style="styles.tableBody"
-            class="cometchat__add__members__table"
-            @scoll="scrollHandler"
-          >
-            <!--eslint-disable-->
-            <template 
-              v-for="(user, i) in filteredList"
-            >
-              <comet-chat-add-group-member-list-item
-                :user="user"
-                :theme="theme"
-                :members="membersList"
-                :logged-in-user="loggedInUser"
-                @change="membersUpdated"
-              />
-            </template>
-          </tbody>
-          <tfoot>
-            <tr :style="styles.tableFoot.tr">
-              <td colSpan="2" :style="styles.tableFoot.td">
-                <button :style="styles.tableFoot.button" @click="updateMembers">
-                  {{ membersAdding ? STRINGS.ADDING_MESSSAGE : STRINGS.ADD }}
-                </button>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<!--eslint-disable-->
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_ARRAY_PROP,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon } from "../../../mixins/";
-
-import { CometChatManager } from "../../../util/controller";
-import { SvgAvatar } from "../../../util/svgavatar";
-import { AddMembersManager } from "./controller";
-
-import CometChatAddGroupMemberListItem from "../CometChatAddGroupMemberListItem/CometChatAddGroupMemberListItem";
-import { CometChatBackdrop } from "../../Shared";
-
-import * as style from "./style";
-
-import searchIcon from "./resources/search-grey-icon.png";
-import clearIcon from "./resources/close.png";
-
-let timeout;
-let friendsOnly;
-let addMembersManager;
-
-/**
- * Displays list of users for adding in group.
- *
- * @displayName CometChatAddGroupMemberList
- */
-export default {
-  name: "CometChatAddGroupMemberList",
-  mixins: [cometChatCommon],
-  components: {
-    CometChatBackdrop,
-    CometChatAddGroupMemberListItem,
-  },
-  props: {
-    /**
-     * Opens the modal.
-     */
-    open: { ...DEFAULT_BOOLEAN_PROP },
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * List of members.
-     */
-    membersList: { ...DEFAULT_ARRAY_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * List of banned members.
-     */
-    bannedMembersList: { ...DEFAULT_ARRAY_PROP },
-  },
-  data() {
-    return {
-      userList: [],
-      membersToAdd: [],
-      filteredList: [],
-      membersAdding: false,
-      decoratorMessage: COMETCHAT_CONSTANTS.LOADING_MESSSAGE,
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        modalBody: style.modalBodyCtyle(),
-        modalTable: style.modalTableStyle(),
-        contactMsg: style.contactMsgStyle(),
-        tableSearch: style.tableSearchStyle(),
-        tableCaption: style.tableCaptionStyle(),
-        tableBody: style.tableBodyStyle(this.theme),
-        tableFoot: style.tableFootStyle(this.theme),
-        modalClose: style.modalCloseStyle(clearIcon),
-        contactMsgTxt: style.contactMsgTxtStyle(this.theme),
-        searchInput: style.searchInputStyle(this.theme, searchIcon),
-        modalWrapper: style.modalWrapperStyle(this.theme, this.open),
-      };
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  methods: {
-    /**
-     * Updates a user
-     */
-    userUpdateHandler(user) {
-      try {
-        let userlist = [...this.userList];
-
-        let userKey = userlist.findIndex((u) => u.uid === user.uid);
-
-        if (userKey > -1) {
-          let userObj = userlist[userKey];
-          let newUserObj = Object.assign({}, userObj, user);
-          userlist.splice(userKey, 1, newUserObj);
-
-          this.userList = userlist;
-        }
-      } catch (error) {
-        this.logError("Error updating user", error);
-      }
-    },
-    /**
-     * Handles scroll in user list
-     */
-    scrollHandler(e) {
-      try {
-        const bottom =
-          Math.round(
-            e.currentTarget.scrollHeight - e.currentTarget.scrollTop
-          ) === Math.round(e.currentTarget.clientHeight);
-        if (bottom) {
-          this.getUsers();
-        }
-      } catch (error) {
-        this.logError("Error in scrollHandler", error);
-      }
-    },
-    searchUsers(event) {
-      try {
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-
-        let val = event.target.value;
-        timeout = setTimeout(() => {
-          addMembersManager = new AddMembersManager(friendsOnly, val);
-
-          this.userList = [];
-          this.membersToAdd = [];
-          this.membersToRemove = [];
-
-          this.getUsers(true);
-        }, 500);
-      } catch (error) {
-        this.logError("Error in searching users", error);
-      }
-    },
-    async getUsers(search = false) {
-      try {
-        await new CometChatManager().getLoggedInUser();
-
-        const userList = await addMembersManager.fetchNextUsers();
-
-        userList.forEach((user) => (user = this.setAvatar(user)));
-
-        const filteredUserList = userList.filter((user) => {
-          const found = this.membersList.find(
-            (member) => user.uid === member.uid
-          );
-          const foundbanned = this.bannedMembersList.find(
-            (member) => user.uid === member.uid
-          );
-          if (found || foundbanned) {
-            return false;
-          }
-          return true;
-        });
-
-        if (filteredUserList.length === 0) {
-          this.decoratorMessage = COMETCHAT_CONSTANTS.ERROR_NO_USERS_FOUND;
-        }
-
-        if (search) {
-          this.userList = [...userList];
-          this.filteredList = [...filteredUserList];
-        } else {
-          this.userList = [...this.userList, ...userList];
-          this.filteredList = [...this.filteredList, ...filteredUserList];
-        }
-      } catch (error) {
-        this.decoratorMessage = COMETCHAT_CONSTANTS.ERROR;
-        this.logError(
-          "[CometChatAddGroupMemberList] getUsers fetchNext error",
-          error
-        );
-      }
-    },
-    setAvatar(user) {
-      if (!user.getAvatar()) {
-        const uid = user.getUid();
-        const char = user.getName().charAt(0).toUpperCase();
-        user.setAvatar(SvgAvatar.getAvatar(uid, char));
-      }
-    },
-    membersUpdated({ user, value }) {
-      try {
-        if (value) {
-          const members = [...this.membersToAdd];
-          members.push(user);
-
-          this.membersToAdd = [...members];
-        } else {
-          const membersToAdd = [...this.membersToAdd];
-          const index = membersToAdd.findIndex(
-            (member) => member.uid === user.uid
-          );
-          if (index > -1) {
-            membersToAdd.splice(index, 1);
-
-            this.membersToAdd = [...membersToAdd];
-          }
-        }
-      } catch (error) {
-        this.logError("Error in members updated", error);
-      }
-    },
-    async updateMembers() {
-      try {
-        const guid = this.item.guid;
-        const membersList = [];
-
-        this.membersToAdd.forEach((newmember) => {
-          const index = this.membersList.findIndex(
-            (member) => member.uid === newmember.uid
-          );
-          if (index === -1) {
-            const newMember = new CometChat.GroupMember(
-              newmember.uid,
-              CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT
-            );
-            membersList.push(newMember);
-
-            newmember["type"] = "add";
-          }
-        });
-
-        if (membersList.length) {
-          const membersToAdd = [];
-          this.membersAdding = true;
-
-          try {
-            const response = await CometChat.addMembersToGroup(
-              guid,
-              membersList,
-              []
-            );
-
-            if (Object.keys(response).length) {
-              for (const member in response) {
-                if (response[member] === "success") {
-                  const found = this.userList.find(
-                    (user) => user.uid === member
-                  );
-                  found["scope"] = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-                  membersToAdd.push(found);
-                }
-              }
-              this.emitAction("addGroupParticipants", {
-                members: membersToAdd,
-              });
-            }
-            this.emitEvent("close");
-          } catch (error) {
-            this.logError("addMembersToGroup failed with exception:", error);
-          } finally {
-            this.membersAdding = false;
-          }
-        }
-      } catch (error) {
-        this.logError("Error in update members", error);
-      }
-    },
-  },
-  beforeMount() {
-    if (this.friendsOnly) {
-      friendsOnly = this.friendsOnly;
-    }
-
-    addMembersManager = new AddMembersManager(this.friendsOnly);
-
-    this.getUsers();
-    addMembersManager.attachListeners(this.userUpdateHandler);
-  },
-  beforeDestroy() {
-    if (addMembersManager) {
-      addMembersManager.removeListeners();
-      addMembersManager = null;
-    }
-  },
-  beforeUnmount() {
-    if (addMembersManager) {
-      addMembersManager.removeListeners();
-      addMembersManager = null;
-    }
-  },
-};
-</script>
-<style scoped>
-@media (min-width: 320px) and (max-width: 767px) {
-  .cometchat__add__members__wrapper {
-    width: 100% !important;
-    height: 100% !important;
-  }
-  .cometchat__add__members__table {
-    height: 100% !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberList/controller.js

@@ -1,50 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-/**
- * AddMembersManager class encapsulates the following functionality:
- * - fetching of User list
- * - attaching User listener
- */
-export class AddMembersManager {
-  membersRequest = null;
-  userListenerId = new Date().getTime();
-
-  constructor(friendsOnly, searchKey) {
-    if (searchKey) {
-      this.membersRequest = new CometChat.UsersRequestBuilder()
-        .setLimit(30)
-        .friendsOnly(friendsOnly)
-        .setSearchKeyword(searchKey)
-        .build();
-    } else {
-      this.membersRequest = new CometChat.UsersRequestBuilder()
-        .setLimit(30)
-        .friendsOnly(friendsOnly)
-        .build();
-    }
-  }
-
-  fetchNextUsers() {
-    return this.membersRequest.fetchNext();
-  }
-
-  attachListeners(callback) {
-    CometChat.addUserListener(
-      this.userListenerId,
-      new CometChat.UserListener({
-        onUserOnline: (onlineUser) => {
-          /* when someuser/friend comes online, user will be received here */
-          callback(onlineUser);
-        },
-        onUserOffline: (offlineUser) => {
-          /* when someuser/friend went offline, user will be received here */
-          callback(offlineUser);
-        },
-      })
-    );
-  }
-
-  removeListeners() {
-    CometChat.removeUserListener(this.userListenerId);
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberList/style.js

@@ -1,144 +0,0 @@
-export const modalWrapperStyle = (theme, open) => {
-  const show = open
-    ? {
-        display: "block",
-      }
-    : {};
-
-  return {
-    minWidth: "350px",
-    minHeight: "450px",
-    width: "40%",
-    height: "40%",
-    overflow: "hidden",
-    backgroundColor: `${theme.backgroundColor.white}`,
-    position: "fixed",
-    left: "50%",
-    top: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: "1002",
-    margin: "0 auto",
-    boxShadow:
-      "rgba(20, 20, 20, 0.2) 0 16px 32px, rgba(20, 20, 20, 0.04) 0 0 0 1px",
-    borderRadius: "12px",
-    display: "none",
-    ...show,
-  };
-};
-
-export const modalCloseStyle = (img) => {
-  return {
-    position: "absolute",
-    width: "32px",
-    height: "32px",
-    borderRadius: "50%",
-    top: "20px",
-    right: "16px",
-    background: `url(${img}) center center / 18px no-repeat`,
-    cursor: "pointer",
-  };
-};
-
-export const modalBodyCtyle = () => {
-  return {
-    padding: "25px",
-    height: "100%",
-    width: "100%",
-  };
-};
-
-export const modalTableStyle = () => {
-  return {
-    borderCollapse: "collapse",
-    margin: "0",
-    padding: "0",
-    width: "100%",
-    height: "80%",
-  };
-};
-
-export const tableCaptionStyle = () => {
-  return {
-    fontSize: "20px",
-    marginBottom: "15px",
-    fontWeight: "bold",
-    textAlign: "left",
-  };
-};
-
-export const tableSearchStyle = () => {
-  return {
-    fontWeight: "normal",
-    marginBottom: "15px",
-  };
-};
-
-export const searchInputStyle = (theme, img) => {
-  return {
-    width: "100%",
-    border: "0",
-    boxShadow: "rgba(20, 20, 20, 0.04) 0 0 0 1px inset",
-    borderRadius: "8px",
-    padding: "6px 8px 6px 35px",
-    fontSize: "15px",
-    outline: "none",
-    color: `${theme.color.primary}`,
-    background: `url(${img}) 10px center / 16px no-repeat ${theme.backgroundColor.grey}`,
-  };
-};
-
-export const tableBodyStyle = (theme) => {
-  return {
-    height: "100%",
-    overflowY: "auto",
-    display: "block",
-    tr: {
-      border: `1px solid ${theme.borderColor.primary}`,
-      display: "table",
-      width: "100%",
-      tableLayout: "fixed",
-    },
-  };
-};
-
-export const tableFootStyle = (theme) => {
-  return {
-    button: {
-      cursor: "pointer",
-      padding: "10px 20px",
-      backgroundColor: `${theme.backgroundColor.blue}`,
-      borderRadius: "5px",
-      color: `${theme.color.white}`,
-      fontSize: "14px",
-      outline: "0",
-      border: "0",
-    },
-    tr: {
-      border: "none",
-    },
-    td: {
-      textAlign: "center",
-    },
-  };
-};
-
-export const contactMsgStyle = () => {
-  return {
-    overflow: "hidden",
-    width: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "55%",
-  };
-};
-
-export const contactMsgTxtStyle = (theme) => {
-  return {
-    margin: "0",
-    height: "30px",
-    color: `${theme.color.secondary}`,
-    fontSize: "24px!important",
-    fontWeight: "600",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberListItem/CometChatAddGroupMemberListItem.vue

@@ -1,118 +0,0 @@
-<template>
-  <tr :style="styles.tableRow" class="addmembers__table__row">
-    <td
-      :style="styles.tableColumn"
-      @mouseenter="toggleTooltip($event, true)"
-      @mouseleave="toggleTooltip($event, false)"
-    >
-      <div :style="styles.avatar">
-        <comet-chat-avatar
-          border-width="1px"
-          corner-radius="50%"
-          :image="user.avatar"
-          :border-color="theme.borderColor.primary"
-        />
-        <comet-chat-user-presence
-          border-width="1px"
-          corner-radius="50%"
-          :status="user.status"
-          :border-color="theme.borderColor.primary"
-        />
-      </div>
-      <div :style="styles.name">{{ user.name }}</div>
-    </td>
-    <td :style="styles.selectionColumn">
-      <input
-        :id="user.uid"
-        type="checkbox"
-        :checked="checked"
-        class="addmember__checkbox"
-        :style="styles.selectionBox"
-        @change="checkHandler"
-      />
-      <label :style="styles.selectionBox.label" :for="user.uid">&nbsp;</label>
-    </td>
-  </tr>
-</template>
-<script>
-import {
-  DEFAULT_ARRAY_PROP,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import { tooltip, cometChatCommon } from "../../../mixins/";
-
-import { CometChatAvatar, CometChatUserPresence } from "../../Shared";
-
-import * as style from "./style";
-
-import inactiveIcon from "./resources/checkbox-inactive.svg";
-import activeIcon from "./resources/checkbox-blue-active.svg";
-
-/**
- * List item for add group members list.
- *
- * @displayName CometChatAddGroupMemberListItem
- */
-export default {
-  name: "CometChatAddGroupMemberListItem",
-  mixins: [tooltip, cometChatCommon],
-  components: {
-    CometChatAvatar,
-    CometChatUserPresence,
-  },
-  props: {
-    /**
-     * User object.
-     */
-    user: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * List of all members.
-     */
-    members: { ...DEFAULT_ARRAY_PROP },
-  },
-  data() {
-    return {
-      checked: false,
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        name: style.nameStyle(),
-        avatar: style.avatarStyle(),
-        tableColumn: style.tableColumnStyle(),
-        tableRow: style.tableRowStyle(this.theme),
-        selectionColumn: style.selectionColumnStyle(),
-        selectionBox: style.selectionBoxStyle(inactiveIcon, activeIcon),
-      };
-    },
-  },
-  methods: {
-    /**
-     * Handles checkbox input
-     */
-    checkHandler() {
-      this.checked = !this.checked;
-
-      this.emitEvent("change", { user: this.user, value: this.checked });
-    },
-  },
-};
-</script>
-<style scoped>
-.addmembers__table__row:not(:first-of-type) {
-  border-top: none !important;
-}
-.addmember__checkbox:checked + label {
-  background: var(--active-state-background) !important;
-  background-size: 16px;
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberListItem/resources/checkbox-blue-active.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g><g><path fill="#39f" d="M0 5a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v6a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5z"/></g><g><path fill="#fff" d="M10.7 4.4a1 1 0 0 1 1.67 1.095l-.07.105-4.5 6a1 1 0 0 1-1.481.133l-.087-.093-2.5-3a1 1 0 0 1 1.45-1.372l.086.092 1.69 2.027z"/></g></g></svg>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberListItem/resources/checkbox-inactive.svg

@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22">
-    <defs>
-        <path id="a" d="M1.99 0C.892 0 0 .898 0 1.99v16.02C0 19.108.898 20 1.99 20h16.02c1.099 0 1.99-.898 1.99-1.99V1.99C20 .892 19.102 0 18.01 0H1.99z"/>
-        <filter id="b" width="115%" height="115%" x="-7.5%" y="-7.5%" filterUnits="objectBoundingBox">
-            <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5"/>
-            <feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
-            <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
-        </filter>
-    </defs>
-    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-        <use fill="#FFF" xlink:href="#a"/>
-        <use fill="#000" filter="url(#b)" xlink:href="#a"/>
-        <path stroke="#969696" d="M1.99-.5h16.02c1.37 0 2.49 1.117 2.49 2.49v16.02c0 1.37-1.117 2.49-2.49 2.49H1.99A2.495 2.495 0 0 1-.5 18.01V1.99C-.5.62.617-.5 1.99-.5z"/>
-    </g>
-</svg>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatAddGroupMemberListItem/style.js

@@ -1,58 +0,0 @@
-export const tableRowStyle = (theme) => {
-  return {
-    border: `1px solid ${theme.borderColor.primary}`,
-    display: "table",
-    width: "100%",
-    tableLayout: "fixed",
-    fontSize: "14px",
-  };
-};
-
-export const tableColumnStyle = () => {
-  return {
-    padding: "8px",
-    width: "100%",
-  };
-};
-
-export const avatarStyle = () => {
-  return {
-    display: "inline-block",
-    float: "left",
-    width: "36px",
-    height: "36px",
-    marginRight: "8px",
-  };
-};
-
-export const nameStyle = () => {
-  return {
-    margin: "10px",
-    width: "calc(100% - 50px)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-  };
-};
-
-export const selectionColumnStyle = () => {
-  return {
-    padding: "8px",
-    width: "50px",
-  };
-};
-
-export const selectionBoxStyle = (inactiveStateImg, activeStateImg) => {
-  return {
-    display: "none",
-    label: {
-      display: "block",
-      cursor: "pointer",
-      background: `url(${inactiveStateImg}) right center / 16px no-repeat`,
-      "--active-state-background": `url(${activeStateImg}) no-repeat right center`,
-      userSelect: "none",
-      float: "right",
-      padding: ".625em",
-    },
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatBanGroupMemberList/CometChatBanGroupMemberList.vue

@@ -1,199 +0,0 @@
-<template>
-  <div>
-    <comet-chat-backdrop :show="open" @click="emitEvent('close')" />
-    <div :style="styles.modalWrapper" class="cometchat__modal__banmembers">
-      <span :style="styles.modalClose" @click="emitEvent('close')"></span>
-      <div :style="styles.modalBody">
-        <table :style="styles.modalTable">
-          <caption :style="styles.tableCaption">
-            {{
-              STRINGS.BANNED_MEMBERS
-            }}
-          </caption>
-          <thead>
-            <tr :style="styles.modalTable.tr">
-              <th :style="styles.modalTable.th">Name</th>
-              <th
-                :style="{ ...styles.modalTable.th, ...styles.roleColumn }"
-                class="tablehead__rolecolumn"
-              >
-                {{ STRINGS.SCOPE }}
-              </th>
-              <th :style="{ ...styles.modalTable.th, ...styles.actionColumn }">
-                {{ STRINGS.UNBAN }}
-              </th>
-            </tr>
-          </thead>
-          <caption
-            :style="styles.contactMsg"
-            v-if="bannedMembersList.length === 0"
-          >
-            <p :style="styles.contactMsgTxt">{{ decoratorMessage }}</p>
-          </caption>
-          <tbody :style="styles.tableBody" @scroll="scrollHandler">
-            <!-- eslint-disable -->
-            <template 
-              v-for="(member, i) in bannedMembersList"
-            >
-              <comet-chat-ban-group-member-list-item
-                :item="item"
-                :theme="theme"
-                :member="member"
-                :logged-in-user="loggedInUser"
-                @action="memberUpdateHandler"
-              />
-            </template>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_ARRAY_PROP,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon } from "../../../mixins/";
-
-import { CometChatBackdrop } from "../../Shared/";
-import CometChatBanGroupMemberListItem from "../CometChatBanGroupMemberListItem/CometChatBanGroupMemberListItem";
-
-import * as style from "./style";
-
-import clearIcon from "./resources/close.png";
-
-/**
- * Displays list of banned group members.
- *
- * @displayName CometChatBanGroupMemberList
- */
-export default {
-  name: "CometChatBanGroupMemberList",
-  mixins: [cometChatCommon],
-  components: {
-    CometChatBackdrop,
-    CometChatBanGroupMemberListItem,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Opens the modal.
-     */
-    open: { ...DEFAULT_BOOLEAN_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * List of banned group members.
-     */
-    bannedMembersList: { ...DEFAULT_ARRAY_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        tableBody: style.tableBodyStyle(),
-        modalBody: style.modalBodyStyle(),
-        contactMsg: style.contactMsgStyle(),
-        roleColumn: style.roleColumnStyle(),
-        actionColumn: style.actionColumnStyle(),
-        tableCaption: style.tableCaptionStyle(),
-        modalClose: style.modalCloseStyle(clearIcon),
-        modalTable: style.modalTableStyle(this.theme),
-        contactMsgTxt: style.contactMsgTxtStyle(this.theme),
-        modalWrapper: style.modalWrapperStyle(this.theme, this.open),
-      };
-    },
-    /**
-     * Computed decorator message.
-     */
-    decoratorMessage() {
-      return this.bannedMembersList.length === 0
-        ? COMETCHAT_CONSTANTS.NO_BANNED_MEMBERS_FOUND
-        : COMETCHAT_CONSTANTS.LOADING_MESSSAGE;
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  methods: {
-    /**
-     * Unbans a member
-     */
-    async unbanMember(memberToUnBan) {
-      try {
-        const guid = this.item.guid;
-        const response = await CometChat.unbanGroupMember(
-          guid,
-          memberToUnBan.uid
-        );
-
-        if (response) {
-          this.emitAction("unbanGroupMembers", { members: [memberToUnBan] });
-        }
-      } catch (error) {
-        this.logError("Group member banning failed with error", error);
-      }
-    },
-    /**
-     * Handles action emitted by list item
-     */
-    memberUpdateHandler({ action, member }) {
-      switch (action) {
-        case "unBan":
-          this.unbanMember(member);
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Handles list scroll
-     */
-    scrollHandler(e) {
-      try {
-        const bottom =
-          Math.round(
-            e.currentTarget.scrollHeight - e.currentTarget.scrollTop
-          ) === Math.round(e.currentTarget.clientHeight);
-
-        if (bottom) {
-          this.emitAction("fetchBannedMembers");
-        }
-      } catch (error) {
-        this.logError("Error in scroll", error);
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-@media (min-width: 320px) and (max-width: 767px) {
-  .cometchat__modal__banmembers {
-    width: 100% !important;
-    height: 100% !important;
-  }
-  .tablehead__rolecolumn {
-    width: 115px !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatBanGroupMemberList/style.js

@@ -1,119 +0,0 @@
-export const modalWrapperStyle = (theme, open) => {
-  const show = open
-    ? {
-        display: "block",
-      }
-    : {};
-
-  return {
-    minWidth: "350px",
-    minHeight: "450px",
-    width: "40%",
-    height: "40%",
-    overflow: "hidden",
-    backgroundColor: `${theme.backgroundColor.white}`,
-    position: "fixed",
-    left: "50%",
-    top: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: "1002",
-    margin: "0 auto",
-    boxShadow:
-      "rgba(20, 20, 20, 0.2) 0 16px 32px, rgba(20, 20, 20, 0.04) 0 0 0 1px",
-    borderRadius: "12px",
-    display: "none",
-    ...show,
-  };
-};
-
-export const modalCloseStyle = (img) => {
-  return {
-    position: "absolute",
-    width: "32px",
-    height: "32px",
-    borderRadius: "50%",
-    top: "20px",
-    right: "16px",
-    background: `url(${img}) center center / 18px no-repeat`,
-    cursor: "pointer",
-  };
-};
-
-export const modalBodyStyle = () => {
-  return {
-    padding: "25px",
-    height: "100%",
-    width: "100%",
-  };
-};
-
-export const modalTableStyle = (theme) => {
-  return {
-    borderCollapse: "collapse",
-    margin: "0",
-    padding: "0",
-    width: "100%",
-    height: "90%",
-    tr: {
-      border: `1px solid ${theme.borderColor.primary}`,
-      display: "table",
-      width: "100%",
-      tableLayout: "fixed",
-    },
-    th: {
-      padding: "8px",
-      fontSize: "12px",
-      textAlign: "left",
-    },
-  };
-};
-
-export const tableCaptionStyle = () => {
-  return {
-    fontSize: "20px",
-    marginBottom: "15px",
-    fontWeight: "bold",
-    textAlign: "left",
-  };
-};
-
-export const tableBodyStyle = () => {
-  return {
-    height: "340px",
-    overflowY: "auto",
-    display: "block",
-  };
-};
-
-export const roleColumnStyle = () => {
-  return {
-    width: "150px",
-  };
-};
-
-export const actionColumnStyle = () => {
-  return {
-    width: "70px",
-  };
-};
-
-export const contactMsgStyle = () => {
-  return {
-    overflow: "hidden",
-    width: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "55%",
-  };
-};
-
-export const contactMsgTxtStyle = (theme) => {
-  return {
-    margin: "0",
-    height: "30px",
-    color: `${theme.color.secondary}`,
-    fontSize: "24px!important",
-    fontWeight: "600",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatBanGroupMemberListItem/CometChatBanGroupMemberListItem.vue

@@ -1,147 +0,0 @@
-<template>
-  <tr :style="styles.tableRow" class="banmembers__table__row">
-    <td
-      :style="styles.tableRow.td"
-      @mouseenter="toggleTooltip($event, true)"
-      @mouseleave="toggleTooltip($event, false)"
-    >
-      <div :style="styles.avatar">
-        <comet-chat-avatar
-          border-width="1px"
-          corner-radius="50%"
-          :image="member.avatar"
-          :border-color="theme.borderColor.primary"
-        />
-        <comet-chat-user-presence
-          border-width="1px"
-          corner-radius="50%"
-          :status="member.status"
-          :border-color="theme.borderColor.primary"
-        />
-      </div>
-      <div :style="styles.name">{{ member.name }}</div>
-    </td>
-    <td :style="{ ...styles.tableRow.td, ...styles.role }">
-      {{ roles[member.scope] }}
-    </td>
-    <td :style="{ ...styles.tableRow.td, ...styles.action }">
-      <img
-        v-if="canUnBan"
-        :src="unbanImage"
-        :alt="STRINGS.UNBAN"
-        :style="styles.action.img"
-        @click="emitAction('unBan', { member })"
-      />
-    </td>
-  </tr>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon, tooltip } from "../../../mixins/";
-
-import { CometChatAvatar, CometChatUserPresence } from "../../Shared";
-
-import * as style from "./style";
-
-import unban from "./resources/block.png";
-
-/**
- * List item for ban group member list.
- *
- * @displayName CometChatBanGroupMemberListItem
- */
-export default {
-  name: "CometChatBanGroupMemberListItem",
-  mixins: [tooltip, cometChatCommon],
-  components: {
-    CometChatAvatar,
-    CometChatUserPresence,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Member object.
-     */
-    member: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        name: style.nameStyle(),
-        role: style.roleStyle(),
-        action: style.actionStyle(),
-        avatar: style.avatarStyle(),
-        tableRow: style.tableRowStyle(this.theme),
-      };
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-    /**
-     * Unban icon image.
-     */
-    unbanImage() {
-      return unban;
-    },
-    /**
-     * Computed member roles.
-     */
-    roles() {
-      return {
-        [CometChat.GROUP_MEMBER_SCOPE.ADMIN]: COMETCHAT_CONSTANTS.ADMINISTRATOR,
-        [CometChat.GROUP_MEMBER_SCOPE.MODERATOR]: COMETCHAT_CONSTANTS.MODERATOR,
-        [CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT]:
-          COMETCHAT_CONSTANTS.PARTICIPANT,
-      };
-    },
-    /**
-     * Computes if can unban.
-     */
-    canUnBan() {
-      let unBan = true;
-
-      if (
-        this.item.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR &&
-        (this.member.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN ||
-          this.member.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR)
-      ) {
-        unBan = false;
-      }
-
-      if (
-        this.item.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN &&
-        this.member.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN
-      ) {
-        if (this.item.owner !== this.loggedInUser.uid) {
-          unBan = false;
-        }
-      }
-
-      return unBan;
-    },
-  },
-};
-</script>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatBanGroupMemberListItem/style.js

@@ -1,55 +0,0 @@
-export const tableRowStyle = (theme) => {
-  return {
-    border: `1px solid ${theme.borderColor.primary}`,
-    borderTop: "none",
-    display: "table",
-    width: "100%",
-    tableLayout: "fixed",
-    fontSize: "14px",
-    td: {
-      padding: ".625em",
-    },
-  };
-};
-
-export const avatarStyle = () => {
-  return {
-    display: "inline-block",
-    float: "left",
-    width: "36px",
-    height: "36px",
-    marginRight: "8px",
-    span: {
-      top: "26px",
-      left: "-8px",
-    },
-  };
-};
-
-export const nameStyle = () => {
-  return {
-    margin: "10px",
-    width: "calc(100% - 50px)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-  };
-};
-
-export const roleStyle = () => {
-  return {
-    width: "150px",
-    fontSize: "12px",
-  };
-};
-
-export const actionStyle = () => {
-  return {
-    width: "70px",
-    img: {
-      width: "20px!important",
-      height: "20px!important",
-      cursor: "pointer",
-    },
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatCreateGroup/CometChatCreateGroup.vue

@@ -1,297 +0,0 @@
-<template>
-  <div>
-    <comet-chat-backdrop :show="open" @click="closeModal" />
-    <div :style="styles.modalWrapper" class="modal__creategroup__wrapper">
-      <span :style="styles.modalClose" @click="closeModal"></span>
-      <div :style="styles.modalBody">
-        <table class="modal__creategroup__table" :style="styles.modalTable">
-          <caption :style="styles.caption">
-            {{
-              STRINGS.CREATE_GROUP
-            }}
-          </caption>
-          <tbody
-            :style="styles.tableBody"
-            class="modal__creategroup__table__body"
-          >
-            <tr class="error">
-              <td>
-                <div :style="styles.tableError">
-                  {{ error }}
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <input
-                  type="text"
-                  tabIndex="1"
-                  v-model="name"
-                  autocomplete="off"
-                  placeholder="Enter group name"
-                  :style="styles.input"
-                />
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <select tabIndex="2" v-model="type" :style="styles.input">
-                  <option value="">{{ STRINGS.SELECT_GROUP_TYPE }}</option>
-                  <option value="public">{{ STRINGS.PUBLIC }}</option>
-                  <option value="private">{{ STRINGS.PRIVATE }}</option>
-                  <option value="protected">
-                    {{ STRINGS.PASSWORD_PROTECTED }}
-                  </option>
-                </select>
-              </td>
-            </tr>
-            <tr v-if="isPasswordInput">
-              <td>
-                <input
-                  tabIndex="3"
-                  type="password"
-                  autoComplete="off"
-                  v-model="password"
-                  :style="styles.input"
-                  :placeholder="STRINGS.ENTER_GROUP_PASSWORD"
-                />
-              </td>
-            </tr>
-          </tbody>
-          <tfoot :style="{ display: 'inline-block' }">
-            <tr :style="{ border: 'none' }">
-              <td :style="{ textAlign: 'center' }">
-                <button
-                  tabIndex="4"
-                  :disabled="creatingGroup"
-                  @click="createGroupHandler"
-                  :style="styles.tableButton"
-                >
-                  {{
-                    creatingGroup ? STRINGS.CREATING_MESSSAGE : STRINGS.CREATE
-                  }}
-                </button>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-import { cometChatCommon } from "../../../mixins";
-
-import { CometChatBackdrop } from "../../Shared";
-
-import closeIcon from "./resources/close.png";
-
-import * as style from "./style";
-
-/**
- * Modal used to create a group.
- *
- * @displayName CometChatCreateGroup
- */
-export default {
-  name: "CometChatCreateGroup",
-  mixins: [cometChatCommon],
-  components: {
-    CometChatBackdrop,
-  },
-  props: {
-    /**
-     * Opens the modal.
-     */
-    open: { ...DEFAULT_BOOLEAN_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      name: "",
-      type: "",
-      error: null,
-      password: "",
-      creatingGroup: false,
-      isPasswordInput: false,
-    };
-  },
-  computed: {
-    /**
-     * Computed group name.
-     */
-    groupName() {
-      return this.name.trim();
-    },
-    /**
-     * Computed group type.
-     */
-    groupType() {
-      return this.type.trim();
-    },
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        modalBody: style.modalBodyStyle(),
-        tableBody: style.tableBodyStyle(),
-        caption: style.tableCaptionStyle(),
-        modalTable: style.modalTableStyle(),
-        tableError: style.tableErrorStyle(),
-        input: style.inputStyle(this.theme),
-        modalClose: style.modalCloseStyle(closeIcon),
-        tableButton: style.tableButtonStyle(this.theme),
-        modalWrapper: style.modalWrapperStyle(this.theme, this.open),
-      };
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  watch: {
-    /**
-     * Toggles isPasswordInput on value change
-     */
-    type: {
-      handler(value) {
-        this.isPasswordInput = value === "protected";
-      },
-    },
-  },
-  methods: {
-    /**
-     * Handles group creation
-     */
-    async createGroupHandler() {
-      try {
-        if (!this.validate()) {
-          return false;
-        }
-
-        this.creatingGroup = true;
-
-        const name = this.groupName;
-        const password = this.password;
-        const guid = "group_" + new Date().getTime();
-
-        let type = CometChat.GROUP_TYPE.PUBLIC;
-
-        switch (this.groupType) {
-          case "public":
-            type = CometChat.GROUP_TYPE.PUBLIC;
-            break;
-          case "private":
-            type = CometChat.GROUP_TYPE.PRIVATE;
-            break;
-          case "protected":
-            type = CometChat.GROUP_TYPE.PASSWORD;
-            break;
-          default:
-            break;
-        }
-
-        const group = new CometChat.Group(guid, name, type, password);
-
-        try {
-          const createdGroup = await CometChat.createGroup(group);
-          this.logError("Group created successfully:", createdGroup);
-
-          this.clearForm();
-
-          this.emitAction("groupCreated", { group: createdGroup });
-        } catch (error) {
-          this.logError("Group creation failed with exception:", error);
-          this.error = error;
-        } finally {
-          this.creatingGroup = false;
-        }
-      } catch (error) {
-        this.logError("Group creation failed with exception:", error);
-      }
-    },
-    /**
-     * Validates input
-     */
-    validate() {
-      if (!this.groupName) {
-        this.error = COMETCHAT_CONSTANTS.GROUP_NAME_BLANK;
-        return false;
-      }
-
-      if (!this.groupType) {
-        this.error = COMETCHAT_CONSTANTS.GROUP_TYPE_BLANK;
-        return false;
-      }
-
-      let password = "";
-      if (this.groupType === "protected") {
-        password = this.password;
-
-        if (!password.length) {
-          this.error = COMETCHAT_CONSTANTS.GROUP_PASSWORD_BLANK;
-          return false;
-        }
-      }
-      return true;
-    },
-    /**
-     * Closes modal
-     */
-    closeModal() {
-      this.emitEvent("close");
-    },
-    /**
-     * Clears form
-     */
-    clearForm() {
-      this.error = null;
-      this.name = "";
-      this.type = "";
-      this.password = "";
-      this.isPasswordInput = false;
-    },
-  },
-};
-</script>
-<style scoped>
-.modal__creategroup__table tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-.modal__creategroup__table__body td {
-  padding: 8px 0px;
-  font-size: 14px;
-}
-.modal__creategroup__table__body input {
-  width: 100%;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  padding: 10px 14px !important;
-}
-.modal__creategroup__table__body select {
-  outline: none;
-  padding: 10px !important;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .modal__creategroup__wrapper {
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatCreateGroup/style.js

@@ -1,111 +0,0 @@
-export const modalWrapperStyle = (theme, open) => {
-  const show = open
-    ? {
-        display: "block",
-      }
-    : {};
-
-  return {
-    minWidth: "350px",
-    minHeight: "350px",
-    width: "40%",
-    height: "40%",
-    overflow: "hidden",
-    backgroundColor: `${theme.backgroundColor.white}`,
-    position: "fixed",
-    left: "50%",
-    top: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: "1002",
-    margin: "0 auto",
-    boxShadow:
-      "rgba(20, 20, 20, 0.2) 0 16px 32px, rgba(20, 20, 20, 0.04) 0 0 0 1px",
-    borderRadius: "12px",
-    display: "none",
-    ...show,
-  };
-};
-
-export const modalCloseStyle = (img) => {
-  return {
-    position: "absolute",
-    width: "32px",
-    height: "32px",
-    borderRadius: "50%",
-    top: "20px",
-    right: "16px",
-    background: `url(${img}) center center/ 18px no-repeat`,
-    cursor: "pointer",
-  };
-};
-
-export const modalBodyStyle = () => {
-  return {
-    padding: "25px",
-    height: "100%",
-    width: "100%",
-  };
-};
-
-export const modalTableStyle = () => {
-  return {
-    borderCollapse: "collapse",
-    margin: "0",
-    padding: "0",
-    width: "100%",
-    height: "90%",
-  };
-};
-
-export const tableCaptionStyle = () => {
-  return {
-    fontSize: "20px",
-    marginBottom: "15px",
-    fontWeight: "bold",
-    textAlign: "left",
-  };
-};
-
-export const tableBodyStyle = () => {
-  return {
-    height: "calc(100% - 40px)",
-    overflowY: "auto",
-    display: "block",
-  };
-};
-
-export const tableErrorStyle = () => {
-  return {
-    fontSize: "12px",
-    color: "red",
-    textAlign: "center",
-    display: "block",
-  };
-};
-
-export const tableButtonStyle = (theme) => {
-  return {
-    cursor: "pointer",
-    padding: "10px 20px",
-    backgroundColor: `${theme.backgroundColor.blue}`,
-    borderRadius: "5px",
-    color: `${theme.color.white}`,
-    fontSize: "14px",
-    outline: "0",
-    border: "0",
-  };
-};
-
-export const inputStyle = (theme) => {
-  return {
-    display: "block",
-    width: "100%",
-    border: "0",
-    boxShadow: "rgba(20, 20, 20, 0.04) 0 0 0 1px inset",
-    borderRadius: "8px",
-    backgroundColor: `${theme.backgroundColor.grey}`,
-    padding: "6px 8px 6px 30px",
-    color: `${theme.color.helpText}`,
-    fontSize: "15px",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupDetails/CometChatGroupDetails.vue

@@ -1,643 +0,0 @@
-<template>
-  <div :style="styles.root">
-    <div :style="styles.header">
-      <div
-        :style="styles.headerClose"
-        class="cometchat__header__close"
-        @click="emitAction('closeDetailClicked')"
-      ></div>
-      <h4 :style="styles.headerTitle">{{ STRINGS.DETAILS }}</h4>
-    </div>
-    <div :style="styles.detailPane">
-      <div :style="styles.section">
-        <h6 :style="styles.sectionHeader">{{ STRINGS.MEMBERS }}</h6>
-        <div
-          :style="styles.sectionContent"
-          class="cometchat__detailpane__section__content"
-        >
-          <div :style="styles.contentItem">
-            <div :style="styles.itemLink" @click="viewMember = true">
-              {{ STRINGS.VIEW_MEMBERS }}
-            </div>
-          </div>
-          <div :style="styles.contentItem" v-if="showAddMembersBtn">
-            <div :style="styles.itemLink" @click="addMember = true">
-              {{ STRINGS.ADD_MEMBERS }}
-            </div>
-          </div>
-          <div :style="styles.contentItem" v-if="showBannedMembersBtn">
-            <div :style="styles.itemLink" @click="banMember = true">
-              {{ STRINGS.BANNED_MEMBERS }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div :style="styles.section">
-        <h6 :style="styles.sectionHeader">{{ STRINGS.OPTIONS }}</h6>
-        <div
-          :style="styles.sectionContent"
-          class="cometchat__detailpane__section__content"
-        >
-          <div :style="styles.contentItem" v-if="showLeaveGroupBtn">
-            <span :style="styles.itemLink" @click="leaveGroup">
-              {{ STRINGS.LEAVE_GROUP }}
-            </span>
-          </div>
-          <div :style="styles.contentItem" v-if="showDeleteGroupBtn">
-            <span :style="styles.redItemLink" @click="deleteGroup">
-              {{ STRINGS.DELETE_AND_EXIT }}
-            </span>
-          </div>
-        </div>
-      </div>
-      <comet-chat-shared-media-view
-        :item="item"
-        :type="type"
-        :theme="theme"
-        container-height="225px"
-      />
-    </div>
-    <comet-chat-view-group-member-list
-      :item="item"
-      :theme="theme"
-      v-if="viewMember"
-      :open="viewMember"
-      :members-list="membersList"
-      :logged-in-user="loggedInUser"
-      @close="viewMember = false"
-      @action="membersActionHandler"
-    />
-    <comet-chat-add-group-member-list
-      :item="item"
-      :theme="theme"
-      v-if="addMember"
-      :open="addMember"
-      :members-list="membersList"
-      :logged-in-user="loggedInUser"
-      :banned-members-list="bannedMembersList"
-      @close="addMember = false"
-      @action="membersActionHandler"
-    />
-    <comet-chat-ban-group-member-list
-      :item="item"
-      :theme="theme"
-      v-if="banMember"
-      :open="banMember"
-      :logged-in-user="loggedInUser"
-      :banned-members-list="bannedMembersList"
-      @close="banMember = false"
-      @action="membersActionHandler"
-    />
-  </div>
-</template>
-
-<!--eslint-disable-->
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_STRING_PROP,
-} from "../../../resources/constants";
-
-import { propertyCheck, cometChatCommon } from "../../../mixins/";
-import { CometChatManager } from "../../../util/controller";
-import { SvgAvatar } from "../../../util/svgavatar";
-import * as enums from "../../../util/enums.js";
-
-import { GroupDetailManager } from "./controller";
-
-import { CometChatSharedMediaView } from "../../Shared/";
-
-import CometChatViewGroupMemberList from "../CometChatViewGroupMemberList/CometChatViewGroupMemberList";
-import CometChatAddGroupMemberList from "../CometChatAddGroupMemberList/CometChatAddGroupMemberList";
-import CometChatBanGroupMemberList from "../CometChatBanGroupMemberList/CometChatBanGroupMemberList";
-
-import navigateIcon from "./resources/navigate.png";
-
-import * as style from "./style";
-
-let groupDetailManager;
-
-/**
- * Shows group details.
- *
- * @displayName CometChatGroupDetails
- */
-export default {
-  name: "CometChatGroupDetails",
-  mixins: [propertyCheck, cometChatCommon],
-  components: {
-    CometChatSharedMediaView,
-    CometChatAddGroupMemberList,
-    CometChatBanGroupMemberList,
-    CometChatViewGroupMemberList,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The type of chat item.
-     */
-    type: { ...DEFAULT_STRING_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      user: {},
-      membersList: [],
-      loggedInUser: {},
-      addMember: false,
-      banMember: false,
-      viewMember: false,
-      moderatorsList: [],
-      addModerator: false,
-      bannedMembersList: [],
-      administratorsList: [],
-      addAdministrator: false,
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        section: style.sectionStyle(),
-        root: style.detailStyle(this.theme),
-        detailPane: style.detailPaneStyle(),
-        header: style.headerStyle(this.theme),
-        contentItem: style.contentItemStyle(),
-        headerTitle: style.headerTitleStyle(),
-        sectionContent: style.sectionContentStyle(),
-        itemLink: style.itemLinkStyle(this.theme, false),
-        headerClose: style.headerCloseStyle(navigateIcon),
-        redItemLink: style.itemLinkStyle(this.theme, true),
-        sectionHeader: style.sectionHeaderStyle(this.theme),
-      };
-    },
-    /**
-     * Local string constants.
-     */ STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-    /**
-     * Returns if current user is group owner.
-     */
-    isOwner() {
-      return this.item.owner === this.loggedInUser.uid;
-    },
-    /**
-     * Returns if current user is group admin.
-     */
-    isAdmin() {
-      return this.item.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN;
-    },
-    /**
-     * Returns if current user is group participant.
-     */
-    isParticipant() {
-      return this.item.scope === CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-    },
-    /**
-     * Shows add members button.
-     */
-    showAddMembersBtn() {
-      return this.isAdmin;
-    },
-    /**
-     * Shows leave group button.
-     */
-    showLeaveGroupBtn() {
-      return !this.isOwner;
-    },
-    /**
-     * Shows delete group button.
-     */
-    showDeleteGroupBtn() {
-      return this.isAdmin;
-    },
-    /**
-     * Shows banned members button.
-     */
-    showBannedMembersBtn() {
-      return !this.isParticipant;
-    },
-  },
-  methods: {
-    /**
-     * Handles group listener events
-     */
-    groupUpdateHandler(key, message, group, options) {
-      this.logInfo("CometChatGroupDetails: groupUpdateHandler", {
-        key,
-        message,
-        group,
-        options,
-      });
-      if (this.item.guid !== group.guid) {
-        return false;
-      }
-
-      const isActionFromHere = message.actionBy.uid === this.loggedInUser.uid;
-
-      switch (key) {
-        case enums.USER_ONLINE:
-        case enums.USER_OFFLINE:
-          this.groupMemberUpdated(options.user);
-          break;
-        case enums.GROUP_MEMBER_ADDED:
-        case enums.GROUP_MEMBER_JOINED:
-          {
-            const member = options.user;
-            this.setAvatar(member);
-
-            const updatedMember = Object.assign({}, member, {
-              scope: CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT,
-            });
-
-            this.addParticipants([updatedMember], message, isActionFromHere);
-          }
-          break;
-        case enums.GROUP_MEMBER_LEFT:
-        case enums.GROUP_MEMBER_KICKED:
-          {
-            const member = options.user;
-            this.removeParticipants(member, true);
-          }
-          break;
-        case enums.GROUP_MEMBER_BANNED:
-          {
-            const member = this.getMember(options.user);
-            this.logError(member);
-            if (member) {
-              this.setAvatar(member);
-              this.banMembers([member]);
-              this.removeParticipants(member, true);
-            }
-          }
-          break;
-        case enums.GROUP_MEMBER_UNBANNED:
-          {
-            const member = options.user;
-            this.unbanMembers([member], message, isActionFromHere);
-          }
-          break;
-        case enums.GROUP_MEMBER_SCOPE_CHANGED:
-          {
-            const member = options.user;
-            const updatedMember = Object.assign({}, member, {
-              scope: options["scope"],
-            });
-            this.updateParticipants(updatedMember, message);
-          }
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Handles emitted action events
-     */
-    membersActionHandler({ action, member, members }) {
-      switch (action) {
-        case "banGroupMembers":
-          this.banMembers(members);
-          break;
-        case "unbanGroupMembers":
-          this.unbanMembers(members);
-          break;
-        case "addGroupParticipants":
-          this.addParticipants(members);
-          break;
-        case "removeGroupParticipants":
-          this.removeParticipants(member);
-          break;
-        case "updateGroupParticipants":
-          this.updateParticipants(member);
-          break;
-        case "fetchGroupMembers":
-          this.getGroupMembers();
-          break;
-        case "fetchBannedMembers":
-          this.getBannedGroupMembers();
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Gets a given member
-     */
-    getMember(member) {
-      return this.membersList.find((m) => m.uid === member.uid);
-    },
-    /**
-     * Updates group members
-     */
-    groupMemberUpdated(member) {
-      try {
-        let memberlist = [...this.membersList];
-        let memberKey = memberlist.findIndex((m) => m.uid === member.uid);
-        if (memberKey > -1) {
-          let memberObj = memberlist[memberKey];
-          let newMemberObj = Object.assign({}, memberObj, member);
-          memberlist.splice(memberKey, 1, newMemberObj);
-
-          this.membersList = memberlist;
-        }
-
-        let bannedmemberlist = [...this.bannedMembersList];
-        let bannedMemberKey = bannedmemberlist.findIndex(
-          (m) => m.uid === member.uid
-        );
-        if (bannedMemberKey > -1) {
-          let bannedMemberObj = bannedmemberlist[bannedMemberKey];
-          let newBannedMemberObj = Object.assign({}, bannedMemberObj, member);
-          bannedmemberlist.splice(bannedMemberKey, 1, newBannedMemberObj);
-
-          this.bannedMembersList = bannedmemberlist;
-        }
-      } catch (error) {
-        this.logError("Error updating group member", error);
-      }
-    },
-    /**
-     * Adds new members to banned list
-     */
-    banMembers(members = []) {
-      this.bannedMembersList = [...this.bannedMembersList, ...members];
-    },
-    /**
-     * Removes members from banned list
-     */
-    unbanMembers(members, message, triggerUpdate = true) {
-      try {
-        const bannedMembers = [...this.bannedMembersList];
-        const unbannedMembers = [];
-
-        const filteredBannedMembers = bannedMembers.filter((bannedmember) => {
-          const found = members.find(
-            (member) => bannedmember.uid === member.uid
-          );
-          if (found) {
-            unbannedMembers.push(found);
-            return false;
-          }
-          return true;
-        });
-
-        if (triggerUpdate) {
-          this.emitAction("memberUnbanned", {
-            members: unbannedMembers,
-            message,
-          });
-        }
-
-        this.bannedMembersList = filteredBannedMembers;
-      } catch (error) {
-        this.logError("Error unbanning group members", error);
-      }
-    },
-    /**
-     * Adds new participants to group
-     */
-    addParticipants(members, message, isActionFromHere = true) {
-      try {
-        const memberlist = [...this.membersList, ...members];
-
-        this.membersList = memberlist;
-
-        if (isActionFromHere) {
-          this.emitAction("membersAdded", { members, message });
-        }
-
-        this.emitAction("membersUpdated", {
-          item: this.item,
-          count: memberlist.length,
-        });
-      } catch (error) {
-        this.logError("Error adding participants to group", error);
-      }
-    },
-    /**
-     * Removes participants from group
-     */
-    removeParticipants(member, triggerUpdate = true) {
-      try {
-        const groupmembers = [...this.membersList];
-        const filteredMembers = groupmembers.filter((groupmember) => {
-          if (groupmember && groupmember.uid === member.uid) {
-            return false;
-          }
-          return true;
-        });
-
-        this.membersList = filteredMembers;
-
-        if (triggerUpdate) {
-          this.emitAction("membersUpdated", {
-            item: this.item,
-            count: filteredMembers.length,
-          });
-        }
-      } catch (error) {
-        this.logError("Error removing participants from group", error);
-      }
-    },
-    /**
-     * Update participants of group
-     */
-    updateParticipants(updatedMember, message) {
-      try {
-        const memberlist = [...this.membersList];
-
-        const memberKey = memberlist.findIndex(
-          (member) => member.uid === updatedMember.uid
-        );
-        if (memberKey > -1) {
-          const memberObj = memberlist[memberKey];
-          const newMemberObj = Object.assign({}, memberObj, updatedMember, {
-            scope: updatedMember["scope"],
-          });
-
-          memberlist.splice(memberKey, 1, newMemberObj);
-
-          this.emitAction("memberScopeChanged", {
-            members: [newMemberObj],
-            message,
-          });
-
-          this.membersList = memberlist;
-        }
-      } catch (error) {
-        this.logError("Error updating participants of group", error);
-      }
-    },
-    /**
-     * Deletes the current selected group
-     */
-    async deleteGroup() {
-      try {
-        const guid = this.item.guid;
-
-        await CometChat.deleteGroup(guid);
-
-        this.emitAction("groupDeleted", { group: this.item });
-      } catch (error) {
-        this.logError("Group delete failed with exception:", error);
-      }
-    },
-    /**
-     * Leaves the current selected group
-     */
-    async leaveGroup() {
-      try {
-        const guid = this.item.guid;
-
-        await CometChat.leaveGroup(guid);
-
-        this.emitAction("leftGroup", { group: this.item });
-      } catch (error) {
-        this.logError("Group leaving failed with exception:", error);
-      }
-    },
-    /**
-     * Gets group member list
-     */
-    async getGroupMembers() {
-      try {
-        const administratorslist = [];
-        const moderatorslist = [];
-
-        this.doubleCheckManager();
-
-        const groupMembers = await groupDetailManager.fetchNextGroupMembers();
-
-        groupMembers.forEach((member) => {
-          this.setAvatar(member);
-
-          if (member.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN) {
-            administratorslist.push(member);
-          }
-
-          if (member.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR) {
-            moderatorslist.push(member);
-          }
-        });
-
-        this.membersList = [...this.membersList, ...groupMembers];
-        this.administratorsList = [
-          ...this.administratorsList,
-          ...administratorslist,
-        ];
-        this.moderatorsList = [...this.moderatorsList, ...moderatorslist];
-      } catch (error) {
-        console.error(
-          "[CometChatGroupDetails] getGroupMembers fetchNextGroupMembers error",
-          error
-        );
-      }
-    },
-    /**
-     * Get banned members list
-     */
-    async getBannedGroupMembers() {
-      if (this.item.scope === CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT) {
-        return false;
-      }
-
-      try {
-        this.doubleCheckManager();
-
-        const bannedMembers = await groupDetailManager.fetchNextBannedGroupMembers();
-
-        bannedMembers.forEach((member) => this.setAvatar(member));
-
-        this.bannedMembersList = [...this.bannedMembersList, ...bannedMembers];
-      } catch (error) {
-        console.error(
-          "[CometChatGroupDetails] getGroupMembers fetchNextGroupMembers error",
-          error
-        );
-      }
-    },
-    setAvatar(member) {
-      if (!member.avatar) {
-        const uid = member.uid;
-        const char = member.name.charAt(0).toUpperCase();
-
-        member.avatar = SvgAvatar.getAvatar(uid, char);
-      }
-    },
-    doubleCheckManager() {
-      if (!groupDetailManager) {
-        this.createManager();
-        this.attachListeners();
-      }
-    },
-    createManager() {
-      groupDetailManager = new GroupDetailManager(this.item.guid);
-    },
-    attachListeners() {
-      if (groupDetailManager) {
-        groupDetailManager.attachListeners(this.groupUpdateHandler);
-      }
-    },
-    removeManager() {
-      if (groupDetailManager) {
-        groupDetailManager.removeListeners();
-        groupDetailManager = null;
-      }
-    },
-  },
-  beforeMount() {
-    this.membersList = [];
-    this.moderatorsList = [];
-    this.bannedMembersList = [];
-    this.administratorsList = [];
-
-    groupDetailManager = new GroupDetailManager(this.item.guid);
-
-    this.getGroupMembers();
-    this.getBannedGroupMembers();
-    groupDetailManager.attachListeners(this.groupUpdateHandler);
-
-    (async () => {
-      try {
-        this.loggedInUser = await new CometChatManager().getLoggedInUser();
-      } catch (error) {
-        this.logError("[CometChatGroupDetails] getLoggedInUser error", error);
-      }
-    })();
-  },
-  beforeDestroy() {
-    this.removeManager();
-  },
-  beforeUnmount() {
-    this.removeManager();
-  },
-};
-</script>
-<style scoped>
-.cometchat__detailpane__section__content:not(:last-of-type) {
-  margin-bottom: 16px !important;
-}
-.cometchat__detailpane__content__item:first-of-type {
-  padding-top: 0px !important;
-}
-.cometchat__detailpane__content__item:last-of-type {
-  padding-bottom: 0px !important;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .cometchat__header__close {
-    display: block !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupDetails/controller.js

@@ -1,130 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-import * as enums from "../../../util/enums.js";
-
-/**
- * GroupDetailManager class encapsulates the following functionality:
- * - fetching the group list
- * - attaching User listener
- * - attaching Group listener
- */
-export class GroupDetailManager {
-  guid = null;
-  groupMemberRequest = null;
-  bannedGroupMemberRequest = null;
-
-  userListenerId = "group_detail_user_" + new Date().getTime();
-  groupListenerId = "group_detail_group_" + new Date().getTime();
-
-  constructor(guid) {
-    this.guid = guid;
-    this.groupMemberRequest = new CometChat.GroupMembersRequestBuilder(guid)
-      .setLimit(10)
-      .build();
-    this.bannedGroupMemberRequest = new CometChat.BannedMembersRequestBuilder(
-      guid
-    )
-      .setLimit(10)
-      .build();
-  }
-
-  fetchNextGroupMembers() {
-    return this.groupMemberRequest.fetchNext();
-  }
-
-  fetchNextBannedGroupMembers() {
-    return this.bannedGroupMemberRequest.fetchNext();
-  }
-
-  attachListeners(callback) {
-    CometChat.addGroupListener(
-      this.groupListenerId,
-      new CometChat.GroupListener({
-        onGroupMemberScopeChanged: (
-          message,
-          changedUser,
-          newScope,
-          oldScope,
-          changedGroup
-        ) => {
-          callback(enums.GROUP_MEMBER_SCOPE_CHANGED, message, changedGroup, {
-            user: changedUser,
-            scope: newScope,
-          });
-        },
-        onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
-          callback(enums.GROUP_MEMBER_KICKED, message, kickedFrom, {
-            user: kickedUser,
-            hasJoined: false,
-          });
-        },
-        onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
-          callback(enums.GROUP_MEMBER_BANNED, message, bannedFrom, {
-            user: bannedUser,
-          });
-        },
-        onGroupMemberUnbanned: (
-          message,
-          unbannedUser,
-          unbannedBy,
-          unbannedFrom
-        ) => {
-          callback(enums.GROUP_MEMBER_UNBANNED, message, unbannedFrom, {
-            user: unbannedUser,
-            hasJoined: false,
-          });
-        },
-        onMemberAddedToGroup: (
-          message,
-          userAdded,
-          userAddedBy,
-          userAddedIn
-        ) => {
-          callback(enums.GROUP_MEMBER_ADDED, message, userAddedIn, {
-            user: userAdded,
-            hasJoined: true,
-          });
-        },
-        onGroupMemberLeft: (message, leavingUser, group) => {
-          callback(enums.GROUP_MEMBER_LEFT, message, group, {
-            user: leavingUser,
-          });
-        },
-        onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
-          callback(enums.GROUP_MEMBER_JOINED, message, joinedGroup, {
-            user: joinedUser,
-          });
-        },
-      })
-    );
-
-    CometChat.addUserListener(
-      this.userListenerId,
-      new CometChat.UserListener({
-        onUserOnline: (onlineUser) => {
-          /* when someuser/friend comes online, user will be received here */
-          callback(
-            enums.USER_ONLINE,
-            null,
-            { guid: this.guid },
-            { user: onlineUser }
-          );
-        },
-        onUserOffline: (offlineUser) => {
-          /* when someuser/friend went offline, user will be received here */
-          callback(
-            enums.USER_OFFLINE,
-            null,
-            { guid: this.guid },
-            { user: offlineUser }
-          );
-        },
-      })
-    );
-  }
-
-  removeListeners() {
-    CometChat.removeUserListener(this.userListenerId);
-    CometChat.removeGroupListener(this.groupListenerId);
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupDetails/style.js

@@ -1,102 +0,0 @@
-export const detailStyle = (theme) => {
-  return {
-    height: "100%",
-    boxSizing: "border-box",
-    fontFamily: `${theme.fontFamily}`,
-    "--detailpane-font-family": `${theme.fontFamily}`,
-  };
-};
-
-export const headerStyle = (theme) => {
-  return {
-    padding: "19px 16px",
-    position: "relative",
-    borderBottom: `1px solid ${theme.borderColor.primary}`,
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-  };
-};
-
-export const headerCloseStyle = (img) => {
-  return {
-    cursor: "pointer",
-    display: "none",
-    background: `url(${img}) center center no-repeat`,
-    width: "24px",
-    height: "24px",
-    marginRight: "12px",
-  };
-};
-
-export const headerTitleStyle = () => {
-  return {
-    margin: "0",
-    fontWeight: "700",
-    fontSize: "20px",
-  };
-};
-
-export const detailPaneStyle = () => {
-  return {
-    margin: "0",
-    padding: "16px",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-    height: "calc(100% - 70px)",
-  };
-};
-
-export const sectionStyle = () => {
-  return {
-    width: "100%",
-  };
-};
-
-export const sectionHeaderStyle = (theme) => {
-  return {
-    margin: "0",
-    width: "100%",
-    fontSize: "12px",
-    fontWeight: "600",
-    lineHeight: "20px",
-    color: `${theme.color.secondary}`,
-    textTransform: "uppercase",
-  };
-};
-
-export const sectionContentStyle = () => {
-  return {
-    width: "100%",
-    margin: "6px 0",
-  };
-};
-
-export const contentItemStyle = () => {
-  return {
-    position: "relative",
-    display: "flex",
-    clear: "both",
-    width: "100%",
-    padding: " 6px 0",
-  };
-};
-
-export const itemLinkStyle = (theme, deleteLink) => {
-  const deleteCss = deleteLink
-    ? {
-        color: `${theme.color.red}`,
-      }
-    : {};
-
-  return {
-    fontSize: "15px",
-    lineHeight: "20px",
-    display: "inline-block",
-    cursor: "pointer",
-    fontWeight: "600",
-    ...deleteCss,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupList/CometChatGroupList.vue

@@ -1,689 +0,0 @@
-<template>
-  <div :style="styles.wrapper" class="groups__wrapper">
-    <div :style="styles.header">
-      <div
-        class="header__close"
-        v-if="enableCloseMenu"
-        :style="styles.headerClose"
-        @click="emitAction('closeMenuClicked')"
-      />
-      <h4 :style="styles.headerTitle">{{ STRINGS.GROUPS }}</h4>
-      <div
-        :style="styles.add"
-        v-if="canCreateGroup"
-        :title="STRINGS.CREATE_GROUP"
-        @click="createGroupOpen = true"
-      ></div>
-    </div>
-    <div :style="styles.search">
-      <input
-        type="text"
-        autoComplete="off"
-        :style="styles.searchInput"
-        :placeholder="STRINGS.SEARCH"
-        @input="groupSearchHandler"
-      />
-    </div>
-    <div v-if="groupList.length === 0" :style="styles.msg">
-      <p :style="styles.msgText">
-        {{ decoratorMessage }}
-      </p>
-    </div>
-    <div
-      ref="groupListRef"
-      :style="styles.list"
-      v-else-if="groupList.length !== 0"
-      @scroll="groupScrollHandler($event)"
-    >
-      <div v-for="(group, i) in groupList" :key="i">
-        <comet-chat-group-list-item
-          :group="group"
-          :theme="themeValue"
-          :selectedGroup="selectedGroup"
-          @click="groupClickHandler"
-        />
-      </div>
-    </div>
-    <comet-chat-create-group
-      :theme="themeValue"
-      :open="createGroupOpen"
-      @close="createGroupOpen = false"
-      @action="createGroupActionHandler"
-    />
-  </div>
-</template>
-
-<!--eslint-disable-->
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import { CometChatManager } from "../../../util/controller";
-import { SvgAvatar } from "../../../util/svgavatar";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-import * as enums from "../../../util/enums.js";
-
-import { GroupListManager } from "./controller";
-
-import CometChatCreateGroup from "../CometChatCreateGroup/CometChatCreateGroup";
-import CometChatGroupListItem from "../CometChatGroupListItem/CometChatGroupListItem";
-
-import { propertyCheck, cometChatCommon } from "../../../mixins/";
-
-import { theme } from "../../../resources/theme";
-
-import addIcon from "./resources/creategroup.png";
-import navigateIcon from "./resources/navigate.png";
-import searchIcon from "./resources/search-grey-icon.png";
-
-import * as style from "./style";
-
-let timeout;
-let groupListManager;
-let cometChatManager;
-
-/**
- * Displays list of groups.
- *
- * @displayName CometChatGroupList
- */
-export default {
-  name: "CometChatGroupList",
-  mixins: [propertyCheck, cometChatCommon],
-  components: {
-    CometChatGroupListItem,
-    CometChatCreateGroup,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * @ignore
-     */
-    config: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The group selected to leave.
-     */
-    groupToLeave: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The group selected to update.
-     */
-    groupToUpdate: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The group selected to delete.
-     */
-    groupToDelete: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Shows/hides the close menu button.
-     */
-    enableCloseMenu: { ...DEFAULT_BOOLEAN_PROP },
-  },
-  data() {
-    return {
-      searchKey: "",
-      groupList: [],
-      loggedInUser: {},
-      selectedGroup: null,
-      createGroupOpen: false,
-      decoratorMessage: COMETCHAT_CONSTANTS.LOADING_MESSSAGE,
-    };
-  },
-  computed: {
-    /**
-     * Theme computed using default theme and theme coming from prop.
-     */
-    themeValue() {
-      return Object.assign({}, theme, this.theme || {});
-    },
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        msg: style.groupMsgStyle(),
-        list: style.groupListStyle(),
-        search: style.groupSearchStyle(),
-        add: style.groupAddStyle(addIcon),
-        wrapper: style.groupWrapperStyle(),
-        header: style.groupHeaderStyle(this.themeValue),
-        msgText: style.groupMsgTxtStyle(this.themeValue),
-        headerClose: style.groupHeaderCloseStyle(navigateIcon),
-        headerTitle: style.groupHeaderTitleStyle(this.enableCloseMenu),
-        searchInput: style.groupSearchInputStyle(this.themeValue, searchIcon),
-      };
-    },
-    /**
-     * Returns if user can create group.
-     */
-    canCreateGroup() {
-      if (
-        this.config &&
-        this.hasProperty(this.config, "group-create") &&
-        this.config["group-create"] === false
-      ) {
-        return false;
-      }
-
-      return true;
-    },
-    /**
-     * Computed object, made of props, for watcher.
-     */
-    propsForWatcher() {
-      return {
-        item: this.item,
-        groupToLeave: this.groupToLeave,
-        groupToUpdate: this.groupToUpdate,
-        groupToDelete: this.groupToDelete,
-      };
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  watch: {
-    /**
-     * One true watcher that updates state on props update.
-     */
-    propsForWatcher: {
-      handler(_, prevProps) {
-        const previousItem = JSON.stringify(prevProps.item);
-        const currentItem = JSON.stringify(this.item);
-
-        if (previousItem !== currentItem) {
-          if (Object.keys(this.item).length === 0) {
-            if (this.$refs && this.$refs.groupListRef) {
-              this.$refs.groupListRef.scrollTop = 0;
-            }
-            this.selectedGroup = {};
-          } else {
-            let grouplist = [...this.groupList];
-
-            //search for user
-            let groupKey = grouplist.findIndex(
-              (g) => g.guid === this.item.guid
-            );
-            if (groupKey > -1) {
-              let groupObj = { ...grouplist[groupKey] };
-              this.selectedGroup = groupObj;
-            }
-          }
-        }
-
-        if (
-          prevProps.groupToLeave &&
-          prevProps.groupToLeave.guid !== this.groupToLeave.guid
-        ) {
-          const groups = [...this.groupList];
-          const groupKey = groups.findIndex(
-            (member) => member.guid === this.groupToLeave.guid
-          );
-
-          if (groupKey > -1) {
-            const groupToLeave = this.groupToLeave;
-            const groupObj = { ...groups[groupKey] };
-            const membersCount = parseInt(groupToLeave["membersCount"]) - 1;
-
-            let newgroupObj = Object.assign({}, groupObj, {
-              membersCount: membersCount,
-              hasJoined: false,
-            });
-
-            groups.splice(groupKey, 1, newgroupObj);
-            this.groupList = groups;
-          }
-        }
-
-        if (
-          prevProps.groupToDelete &&
-          prevProps.groupToDelete.guid !== this.groupToDelete.guid
-        ) {
-          const groups = [...this.groupList];
-          const groupKey = groups.findIndex(
-            (member) => member.guid === this.groupToDelete.guid
-          );
-          if (groupKey > -1) {
-            groups.splice(groupKey, 1);
-            this.groupList = groups;
-            if (groups.length === 0) {
-              this.decoratorMessage = "No groups found";
-            }
-          }
-        }
-
-        if (
-          prevProps.groupToUpdate &&
-          (prevProps.groupToUpdate.guid !== this.groupToUpdate.guid ||
-            (prevProps.groupToUpdate.guid === this.groupToUpdate.guid &&
-              (prevProps.groupToUpdate.membersCount !==
-                this.groupToUpdate.membersCount ||
-                prevProps.groupToUpdate.scope !== this.groupToUpdate.scope)))
-        ) {
-          const groups = [...this.groupList];
-          const groupToUpdate = this.groupToUpdate;
-
-          const groupKey = groups.findIndex(
-            (group) => group.guid === groupToUpdate.guid
-          );
-          if (groupKey > -1) {
-            const groupObj = groups[groupKey];
-            const newGroupObj = Object.assign({}, groupObj, groupToUpdate, {
-              scope: groupToUpdate["scope"],
-              membersCount: groupToUpdate["membersCount"],
-            });
-
-            groups.splice(groupKey, 1, newGroupObj);
-            this.groupList = groups;
-          }
-        }
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    /**
-     * Handles searching in group
-     */
-    groupSearchHandler(e) {
-      try {
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-
-        let val = e.target.value;
-        this.searchKey = val;
-
-        timeout = setTimeout(() => {
-          groupListManager = new GroupListManager(val);
-          this.getGroups(true);
-        }, 500);
-      } catch (error) {
-        this.logError("Error in searching groups", error);
-      }
-    },
-    /**
-     * Handles group creation
-     */
-    createGroupActionHandler({ action, group }) {
-      try {
-        if (action === "groupCreated") {
-          this.setAvatar(group);
-          const groups = [group, ...this.groupList];
-
-          this.groupClickHandler(group);
-
-          this.groupList = groups;
-          this.createGroupOpen = false;
-        }
-      } catch (error) {
-        this.logError("Error in creating group", error);
-      }
-    },
-    /**
-     * Handles group item click
-     */
-    async groupClickHandler(group) {
-      try {
-        if (group.hasJoined === false) {
-          let password = "";
-          if (group.type === CometChat.GROUP_TYPE.PASSWORD) {
-            password = prompt("Enter your password");
-          }
-          const guid = group.guid;
-          const groupType = group.type;
-
-          try {
-            const response = await CometChat.joinGroup(
-              guid,
-              groupType,
-              password
-            );
-            this.logError(
-              "Group joining success with response",
-              response,
-              "group",
-              group
-            );
-
-            const groups = [...this.groupList];
-            let groupKey = groups.findIndex((g) => g.guid === guid);
-
-            if (groupKey > -1) {
-              const groupObj = groups[groupKey];
-              const newGroupObj = Object.assign({}, groupObj, response, {
-                scope: CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT,
-              });
-
-              groups.splice(groupKey, 1, newGroupObj);
-
-              this.groupList = groups;
-              this.selectedGroup = newGroupObj;
-
-              this.emitAction("item-click", {
-                item: newGroupObj,
-                type: "group",
-              });
-            }
-          } catch (error) {
-            this.logError("Group joining failed with exception:", error);
-          }
-        } else {
-          this.selectedGroup = group;
-          this.emitAction("item-click", { item: group, type: "group" });
-        }
-      } catch (error) {
-        this.logError("Error in group item click", error);
-      }
-    },
-    /**
-     * Handles group list scroll
-     */
-    groupScrollHandler(elem) {
-      try {
-        if (
-          elem.target.offsetHeight + elem.target.scrollTop >=
-          elem.target.scrollHeight - 20
-        ) {
-          this.getGroups();
-        }
-      } catch (error) {
-        this.logError("Error in group scroll", error);
-      }
-    },
-    /**
-     * Gets list of group
-     */
-    async getGroups(clear = false) {
-      cometChatManager = new CometChatManager();
-      try {
-        const user = await cometChatManager.getLoggedInUser();
-        this.loggedInUser = user;
-
-        if (!groupListManager) {
-          groupListManager = new GroupListManager(this.searchKey || "");
-        }
-
-        const groups = await groupListManager.fetchNextGroups();
-
-        if (groups.length === 0) {
-          this.decoratorMessage = "No groups found";
-        }
-
-        groups.forEach((group) => (group = this.setAvatar(group)));
-
-        if (clear) {
-          this.groupList = groups;
-        } else {
-          this.groupList = [...this.groupList, ...groups];
-        }
-      } catch (error) {
-        this.decoratorMessage = COMETCHAT_CONSTANTS.ERROR_LOADING_USERS;
-        console.error("[CometChatGroupList] getGroups error", error);
-      }
-    },
-    /**
-     * Set SVG avatar
-     */
-    setAvatar(group) {
-      if (!this.hasProperty(group, "icon")) {
-        const guid = group.guid;
-        const char = group.name.charAt(0).toUpperCase();
-        group.icon = SvgAvatar.getAvatar(guid, char);
-      }
-      return group;
-    },
-    /**
-     * Updates changed members
-     */
-    updateMemberChanged(group, options) {
-      try {
-        let groups = [...this.groupList];
-
-        let groupKey = groups.findIndex((g) => g.guid === group.guid);
-
-        if (groupKey > -1) {
-          let groupObj = { ...groups[groupKey] };
-          if (options && this.loggedInUser.uid === options.user.uid) {
-            let newgroupObj = Object.assign({}, groupObj, {
-              scope: options.scope,
-            });
-
-            groups.splice(groupKey, 1, newgroupObj);
-            this.groupList = groups;
-          }
-        }
-      } catch (error) {
-        this.logError("Error in member change update", error);
-      }
-    },
-    /**
-     * Updates removed members
-     */
-    updateMemberRemoved(group, options) {
-      try {
-        let groups = [...this.groupList];
-
-        let groupKey = groups.findIndex((g) => g.guid === group.guid);
-
-        if (groupKey > -1) {
-          if (options && this.loggedInUser.uid === options.user.uid) {
-            let groupObj = { ...groups[groupKey] };
-            let membersCount = parseInt(group.membersCount);
-
-            let newgroupObj = Object.assign({}, groupObj, {
-              membersCount: membersCount,
-              hasJoined: false,
-            });
-
-            groups.splice(groupKey, 1, newgroupObj);
-          } else {
-            let groupObj = { ...groups[groupKey] };
-            let membersCount = parseInt(group.membersCount);
-
-            let newgroupObj = Object.assign({}, groupObj, {
-              membersCount: membersCount,
-            });
-
-            groups.splice(groupKey, 1, newgroupObj);
-          }
-          this.groupList = groups;
-        }
-      } catch (error) {
-        this.logError("Error in member change update", error);
-      }
-    },
-    /**
-     * Updates added members
-     */
-    updateMemberAdded(group, options) {
-      try {
-        let groups = [...this.groupList];
-
-        let groupKey = groups.findIndex((g) => g.guid === group.guid);
-
-        if (groupKey > -1) {
-          let groupObj = { ...groups[groupKey] };
-
-          let membersCount = parseInt(group.membersCount);
-
-          let scope = this.hasProperty(group, "scope") ? group.scope : "";
-          let hasJoined = this.hasProperty(group, "hasJoined")
-            ? group.hasJoined
-            : false;
-
-          if (options && this.loggedInUser.uid === options.user.uid) {
-            scope = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-            hasJoined = true;
-          }
-
-          let newgroupObj = Object.assign({}, groupObj, {
-            membersCount: membersCount,
-            hasJoined: hasJoined,
-            scope: scope,
-          });
-
-          groups.splice(groupKey, 1, newgroupObj);
-          this.groupList = groups;
-        } else {
-          let groupObj = { ...group };
-
-          let scope = this.hasProperty(groupObj, "scope") ? groupObj.scope : {};
-          let hasJoined = this.hasProperty(groupObj, "hasJoined")
-            ? groupObj.hasJoined
-            : false;
-          let membersCount = parseInt(groupObj.membersCount);
-          this.setAvatar(groupObj);
-
-          if (options && this.loggedInUser.uid === options.user.uid) {
-            scope = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-            hasJoined = true;
-          }
-
-          let newgroupObj = Object.assign({}, groupObj, {
-            membersCount: membersCount,
-            hasJoined: hasJoined,
-            scope: scope,
-          });
-
-          this.groupList = [newgroupObj, ...groups];
-        }
-      } catch (error) {
-        this.logError("Error in member add update", error);
-      }
-    },
-    /**
-     * Updates joined members
-     */
-    updateMemberJoined(group, options) {
-      try {
-        let groups = [...this.groupList];
-
-        let groupKey = groups.findIndex((g) => g.guid === group.guid);
-
-        if (groupKey > -1) {
-          let groupObj = { ...groups[groupKey] };
-
-          let scope = groupObj.scope;
-          let membersCount = parseInt(group.membersCount);
-
-          if (options && this.loggedInUser.uid === options.user.uid) {
-            scope = CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-          }
-
-          let newgroupObj = Object.assign({}, groupObj, {
-            membersCount: membersCount,
-            scope: scope,
-          });
-
-          groups.splice(groupKey, 1, newgroupObj);
-          this.groupList = groups;
-        }
-      } catch (error) {
-        this.logError("Error in member join update", error);
-      }
-    },
-    /**
-     * Handler for group change listeners
-     */
-    groupsUpdateHandler(key, message, group, options) {
-      this.logInfo("CometChatGroupList: groupUpdateHandler", {
-        key,
-        message,
-        group,
-        options,
-      });
-      switch (key) {
-        case enums.GROUP_MEMBER_SCOPE_CHANGED:
-          this.updateMemberChanged(group, options);
-          break;
-        case enums.GROUP_MEMBER_KICKED:
-        case enums.GROUP_MEMBER_BANNED:
-        case enums.GROUP_MEMBER_LEFT:
-          this.updateMemberRemoved(group, options);
-          break;
-        case enums.GROUP_MEMBER_ADDED:
-          this.updateMemberAdded(group, options);
-          break;
-        case enums.GROUP_MEMBER_JOINED:
-          this.updateMemberJoined(group, options);
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Handles changes in group search input
-     */
-    onSearchChange(event) {
-      try {
-        this.groupList = [];
-        if (this.searchStarted) {
-          clearTimeout(this.searchStarted);
-        }
-        if (event.target.value.trim() !== COMETCHAT_CONSTANTS.EMPTY_STRING) {
-          this.searchStarted = setTimeout(() => {
-            this.decoratorMessage = COMETCHAT_CONSTANTS.SEARCH_LOADING;
-            this.getGroupList(event.target.value);
-          }, 400);
-        } else if (
-          event.target.value.trim() === COMETCHAT_CONSTANTS.EMPTY_STRING &&
-          event.data === null
-        ) {
-          event.target.value = COMETCHAT_CONSTANTS.EMPTY_STRING;
-          this.searchStarted = setTimeout(() => {
-            this.getGroupList();
-          }, 400);
-        } else if (
-          event.target.value.trim() === COMETCHAT_CONSTANTS.EMPTY_STRING &&
-          event.data === COMETCHAT_CONSTANTS.SINGLE_SPACE
-        ) {
-          event.target.value = COMETCHAT_CONSTANTS.EMPTY_STRING;
-        }
-      } catch (error) {
-        this.logError("Error in group search change", error);
-      }
-    },
-  },
-  beforeMount() {
-    groupListManager = new GroupListManager();
-
-    this.getGroups();
-    groupListManager.attachListeners(this.groupsUpdateHandler);
-  },
-  beforeDestroy() {
-    if (groupListManager) {
-      groupListManager.removeListeners();
-      groupListManager = null;
-    }
-  },
-  beforeUnmount() {
-    if (groupListManager) {
-      groupListManager.removeListeners();
-      groupListManager = null;
-    }
-  },
-};
-</script>
-<style scoped>
-.groups__wrapper * {
-  box-sizing: border-box;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .header__close {
-    display: block !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupList/controller.js

@@ -1,98 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-import * as enums from "../../../util/enums.js";
-
-/**
- * GroupListManager class encapsulates the following functionality:
- * - fetching the group list
- * - attaching Group listener
- */
-export class GroupListManager {
-  groupRequest = null;
-  groupListenerId = "grouplist_" + new Date().getTime();
-
-  constructor(searchKey) {
-    if (searchKey) {
-      this.groupRequest = new CometChat.GroupsRequestBuilder()
-        .setLimit(30)
-        .setSearchKeyword(searchKey)
-        .build();
-    } else {
-      this.groupRequest = new CometChat.GroupsRequestBuilder()
-        .setLimit(30)
-        .build();
-    }
-  }
-
-  fetchNextGroups() {
-    return this.groupRequest.fetchNext();
-  }
-
-  attachListeners(callback) {
-    CometChat.addGroupListener(
-      this.groupListenerId,
-      new CometChat.GroupListener({
-        onGroupMemberScopeChanged: (
-          message,
-          changedUser,
-          newScope,
-          oldScope,
-          changedGroup
-        ) => {
-          callback(enums.GROUP_MEMBER_SCOPE_CHANGED, message, changedGroup, {
-            user: changedUser,
-            scope: newScope,
-          });
-        },
-        onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
-          callback(enums.GROUP_MEMBER_KICKED, message, kickedFrom, {
-            user: kickedUser,
-            hasJoined: false,
-          });
-        },
-        onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
-          callback(enums.GROUP_MEMBER_BANNED, message, bannedFrom, {
-            user: bannedUser,
-            hasJoined: false,
-          });
-        },
-        onGroupMemberUnbanned: (
-          message,
-          unbannedUser,
-          unbannedBy,
-          unbannedFrom
-        ) => {
-          callback(enums.GROUP_MEMBER_UNBANNED, message, unbannedFrom, {
-            user: unbannedUser,
-            hasJoined: false,
-          });
-        },
-        onMemberAddedToGroup: (
-          message,
-          userAdded,
-          userAddedBy,
-          userAddedIn
-        ) => {
-          callback(enums.GROUP_MEMBER_ADDED, message, userAddedIn, {
-            user: userAdded,
-            hasJoined: true,
-          });
-        },
-        onGroupMemberLeft: (message, leavingUser, group) => {
-          callback(enums.GROUP_MEMBER_LEFT, message, group, {
-            user: leavingUser,
-          });
-        },
-        onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
-          callback(enums.GROUP_MEMBER_JOINED, message, joinedGroup, {
-            user: joinedUser,
-          });
-        },
-      })
-    );
-  }
-
-  removeListeners() {
-    CometChat.removeGroupListener(this.groupListenerId);
-  }
-}

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupList/style.js

@@ -1,112 +0,0 @@
-export const groupWrapperStyle = () => {
-  return {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    boxSizing: "border-box",
-  };
-};
-
-export const groupHeaderStyle = (theme) => {
-  return {
-    padding: "19px 16px",
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    borderBottom: `1px solid ${theme.borderColor.primary}`,
-  };
-};
-
-export const groupHeaderCloseStyle = (img) => {
-  return {
-    cursor: "pointer",
-    display: "none",
-    background: `url(${img}) left center no-repeat`,
-    height: "24px",
-    width: "33%",
-  };
-};
-
-export const groupHeaderTitleStyle = (enableCloseMenu) => {
-  const alignment =
-    enableCloseMenu.length > 0
-      ? {
-          width: "33%",
-          textAlign: "center",
-        }
-      : {};
-
-  return {
-    margin: "0",
-    fontWeight: "700",
-    display: "inline-block",
-    width: "66%",
-    textAlign: "left",
-    fontSize: "20px",
-    ...alignment,
-  };
-};
-
-export const groupAddStyle = (img) => {
-  return {
-    display: "block",
-    height: "20px",
-    background: `url(${img}) right center / 20px no-repeat`,
-    cursor: "pointer",
-    width: "35%",
-  };
-};
-
-export const groupSearchStyle = () => {
-  return {
-    padding: "16px 16px",
-    position: "relative",
-  };
-};
-
-export const groupSearchInputStyle = (theme, img) => {
-  return {
-    display: "block",
-    width: "100%",
-    border: "0",
-    boxShadow: "rgba(20, 20, 20, 0.04) 0 0 0 1px inset",
-    borderRadius: "8px",
-    lineHeight: "20px",
-    padding: "6px 8px 6px 35px",
-    fontSize: "15px",
-    outline: "none",
-    color: `${theme.color.primary}`,
-    background: `url(${img}) 10px center / 16px no-repeat ${theme.backgroundColor.grey}`,
-  };
-};
-
-export const groupMsgStyle = () => {
-  return {
-    overflow: "hidden",
-    width: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "absolute",
-    top: "50%",
-  };
-};
-
-export const groupMsgTxtStyle = (theme) => {
-  return {
-    margin: "0",
-    height: "30px",
-    color: `${theme.color.secondary}`,
-    fontSize: "24px!important",
-    fontWeight: "600",
-  };
-};
-
-export const groupListStyle = () => {
-  return {
-    height: "calc(100% - 125px)",
-    overflowY: "auto",
-    margin: "0",
-    padding: "0",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupListItem/CometChatGroupListItem.vue

@@ -1,121 +0,0 @@
-<template>
-  <div
-    :style="styles.list"
-    class="group__item--hover"
-    @click="emitEvent('click', group)"
-  >
-    <div :style="styles.thumbnail">
-      <comet-chat-avatar
-        border-width="1px"
-        corner-radius="18px"
-        :image="group.icon"
-        :border-color="theme.borderColor.primary"
-      />
-    </div>
-    <div :style="styles.detail">
-      <div
-        :style="styles.nameWrapper"
-        @mouseenter="toggleTooltip($event, true)"
-        @mouseleave="toggleTooltip($event, false)"
-      >
-        <div :style="styles.name">
-          {{ group.name }}
-        </div>
-        <img
-          :alt="STRINGS.SHIELD"
-          :style="styles.icon"
-          v-if="group.type === 'private'"
-          :src="groupTypeIcons.shieldIcon"
-        />
-        <img
-          :alt="STRINGS.LOCK"
-          :style="styles.icon"
-          :src="groupTypeIcons.lockIcon"
-          v-else-if="group.type === 'password'"
-        />
-      </div>
-      <div :style="styles.description">{{ groupDescription }}</div>
-    </div>
-  </div>
-</template>
-<script>
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import { tooltip, cometChatCommon } from "../../../mixins";
-
-import { CometChatAvatar } from "../../Shared";
-
-import shieldIcon from "./resources/shield.png";
-import lockIcon from "./resources/lock.png";
-
-import * as style from "./style";
-
-/**
- * List item for group list.
- *
- * @displayName CometChatGroupListItem
- */
-export default {
-  name: "CometChatGroupListItem",
-  mixins: [tooltip, cometChatCommon],
-  components: {
-    CometChatAvatar,
-  },
-  props: {
-    /**
-     * Group item.
-     */
-    group: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Selected group item.
-     */
-    selectedGroup: { ...DEFAULT_OBJECT_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        name: style.itemNameStyle(),
-        detail: style.itemDetailStyle(),
-        icon: style.listItemIconStyle(),
-        thumbnail: style.itemThumbnailStyle(),
-        nameWrapper: style.itemNameWrapperStyle(),
-        description: style.itemDescriptionStyle(this.theme),
-        list: style.listItemStyle(this.theme, this.group, this.selectedGroup),
-      };
-    },
-    /**
-     * Icon for group types.
-     */
-    groupTypeIcons() {
-      return { shieldIcon, lockIcon };
-    },
-    /**
-     * Description of group.
-     */
-    groupDescription() {
-      return `${this.group.membersCount} members`;
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-};
-</script>
-<style scoped>
-.group__item--hover:hover {
-  background-color: var(--group-item-bg-color-hover);
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupListItem/style.js

@@ -1,76 +0,0 @@
-export const listItemStyle = (theme, group, selectedGroup) => {
-  const selectedState =
-    selectedGroup && selectedGroup.guid === group.guid
-      ? {
-          backgroundColor: `${theme.backgroundColor.primary}`,
-        }
-      : {};
-
-  return {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "left",
-    alignItems: "center",
-    cursor: "pointer",
-    width: "100%",
-    padding: "10px 20px",
-    ...selectedState,
-    "--group-item-bg-color-hover": `${theme.backgroundColor.primary}`,
-  };
-};
-
-export const listItemIconStyle = () => {
-  return {
-    width: "auto",
-    height: "13px",
-    margin: "0 6px",
-    marginTop: "-1px",
-  };
-};
-
-export const itemThumbnailStyle = () => {
-  return {
-    display: "inline-block",
-    width: "36px",
-    height: "36px",
-    flexShrink: "0",
-  };
-};
-
-export const itemDetailStyle = () => {
-  return {
-    width: "calc(100% - 70px)",
-    flexGrow: "1",
-    paddingLeft: "15px",
-  };
-};
-
-export const itemNameStyle = () => {
-  return {
-    maxWidth: "calc(100% - 30px)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    margin: "0",
-  };
-};
-
-export const itemNameWrapperStyle = () => {
-  return {
-    fontSize: "15px",
-    fontWeight: "600",
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    margin: "0",
-  };
-};
-
-export const itemDescriptionStyle = (theme) => {
-  return {
-    borderBottom: `1px solid ${theme.borderColor.primary}`,
-    color: `${theme.color.helpText}`,
-    padding: "0 0 5px 0",
-    fontSize: "12px",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupListWithMessages/CometChatGroupListWithMessages.vue

@@ -1,391 +0,0 @@
-<template>
-  <div :style="styles.root" class="cometchat__groups">
-    <div :style="styles.sidebar" class="groups__sidebar">
-      <comet-chat-group-list
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        :group-to-leave="groupToLeave"
-        :group-to-delete="groupToDelete"
-        :group-to-update="groupToUpdate"
-        :enable-close-menu="isItemPresent"
-        @action="actionHandler"
-      />
-    </div>
-    <div v-if="isItemPresent" class="groups__main" :style="styles.main">
-      <comet-chat-messages
-        :tab="tab"
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        :call-message="callMessage"
-        :logged-in-user="loggedInUser"
-        :group-messages="groupMessages"
-        :action-from-listener="actionFromListener"
-        :composed-thread-message="composedThreadMessage"
-        @action="actionHandler"
-      />
-    </div>
-    <div
-      v-if="viewDetailScreen"
-      :style="styles.secondary"
-      class="groups__secondary-view"
-    >
-      <comet-chat-group-details
-        :item="item"
-        :type="type"
-        :theme="themeValue"
-        @action="actionHandler"
-      />
-    </div>
-    <div
-      v-if="viewThreadMessage"
-      :style="styles.secondary"
-      class="groups__secondary-view"
-    >
-      <comet-chat-message-thread
-        :tab="tab"
-        :theme="themeValue"
-        :item="threadMessageItem"
-        :type="threadMessageType"
-        :logged-in-user="loggedInUser"
-        :parent-message="threadMessageParent"
-        @action="actionHandler"
-      />
-    </div>
-    <comet-chat-incoming-call :theme="themeValue" @action="actionHandler" />
-    <comet-chat-outgoing-call
-      :item="item"
-      :type="type"
-      :theme="themeValue"
-      :incoming-call="incomingCall"
-      :outgoing-call="outgoingCall"
-      :logged-in-user="loggedInUser"
-      @action="actionHandler"
-    />
-    <comet-chat-image-viewer
-      :open="true"
-      v-if="imageView"
-      :message="imageView"
-      @action="actionHandler"
-    />
-  </div>
-</template>
-
-<script>
-import { DEFAULT_OBJECT_PROP } from "../../../resources/constants";
-
-import { propertyCheck, cometChatScreens } from "../../../mixins/";
-import { CometChatManager } from "../../../util/controller";
-import * as enums from "../../../util/enums.js";
-
-import {
-  CometChatMessages,
-  CometChatImageViewer,
-  CometChatMessageThread,
-} from "../../Messages/";
-
-import { CometChatOutgoingCall, CometChatIncomingCall } from "../../Calls";
-
-import CometChatGroupDetails from "../CometChatGroupDetails/CometChatGroupDetails";
-import CometChatGroupList from "../CometChatGroupList/CometChatGroupList";
-
-import { theme } from "../../../resources/theme";
-
-import * as style from "./style";
-
-/**
- * Displays list of group with messages.
- *
- * @displayName CometChatGroupListWithMessages
- */
-export default {
-  name: "CometChatGroupListWithMessages",
-  mixins: [propertyCheck, cometChatScreens],
-  components: {
-    CometChatImageViewer,
-    CometChatIncomingCall,
-    CometChatGroupList,
-    CometChatOutgoingCall,
-    CometChatGroupDetails,
-    CometChatMessageThread,
-    CometChatMessages,
-  },
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      item: {},
-      type: "group",
-      tab: "groups",
-      imageView: null,
-      callMessage: {},
-      groupMessages: [],
-      groupToLeave: {},
-      groupToDelete: {},
-      groupToUpdate: {},
-      darkTheme: false,
-      incomingCall: null,
-      outgoingCall: null,
-      viewSidebar: false,
-      loggedInUser: null,
-      threadMessageItem: {},
-      actionFromListener: {},
-      threadMessageParent: {},
-      threadMessageYype: null,
-      viewDetailScreen: false,
-      viewThreadMessage: false,
-      composedThreadMessage: {},
-    };
-  },
-  computed: {
-    /**
-     * Theme computed using default theme and theme coming from prop.
-     */
-    themeValue() {
-      return Object.assign({}, theme, this.theme);
-    },
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        root: style.groupScreenStyle(this.themeValue),
-        sidebar: style.groupScreenSidebarStyle(
-          this.themeValue,
-          this.viewSidebar
-        ),
-        main: style.groupScreenMainStyle(
-          this.viewThreadMessage,
-          this.viewDetailScreen
-        ),
-        secondary: style.groupScreenSecondaryStyle(
-          this.themeValue,
-          this.viewThreadMessage
-        ),
-      };
-    },
-  },
-  methods: {
-    /**
-     * Handler for emitted action events
-     */
-    actionHandler({
-      action,
-      key,
-      type,
-      call,
-      item,
-      count,
-      group,
-      message,
-      members,
-      options,
-      messages,
-      incomingCall,
-      rejectedCall,
-    }) {
-      switch (action) {
-        case "item-click":
-          this.itemClicked(item, type);
-          break;
-        case "blockUser":
-          this.blockUser();
-          break;
-        case "unblockUser":
-          this.unblockUser();
-          break;
-        case "audioCall":
-          this.audioCall();
-          break;
-        case "videoCall":
-          this.videoCall();
-          break;
-        case "menuClicked":
-          this.toggleSideBar();
-          this.item = {};
-          break;
-        case "closeMenuClicked":
-          this.toggleSideBar();
-          break;
-        case "viewDetail":
-        case "closeDetailClicked":
-          this.toggleDetailView();
-          break;
-        case "groupUpdated":
-          this.groupUpdated(key, options);
-          break;
-        case "groupDeleted":
-          this.deleteGroup(group);
-          break;
-        case "leftGroup":
-          this.leaveGroup(group);
-          break;
-        case "membersUpdated":
-          this.updateMembersCount(count);
-          break;
-        case "viewMessageThread":
-          this.viewMessageThread(message);
-          break;
-        case "closeThreadClicked":
-          this.closeThreadMessages();
-          break;
-        case "threadMessageComposed":
-          this.onThreadMessageComposed(messages);
-          break;
-        case "acceptIncomingCall":
-          this.acceptIncomingCall(incomingCall);
-          break;
-        case "acceptedIncomingCall":
-          this.appendCallMessage(call);
-          break;
-        case "rejectedIncomingCall":
-          this.rejectedIncomingCall(incomingCall, rejectedCall);
-          break;
-        case "outgoingCallRejected":
-        case "outgoingCallCancelled":
-        case "callEnded":
-          this.outgoingCallEnded(call);
-          break;
-        case "userJoinedCall":
-        case "userLeftCall":
-          this.appendCallMessage(call);
-          break;
-        case "viewActualImage":
-          this.setImageView(message);
-          break;
-        case "closeActualImage":
-          this.setImageView(null);
-          break;
-        case "membersAdded":
-          this.membersAdded(members);
-          break;
-        case "memberUnbanned":
-          this.memberUnbanned(members);
-          break;
-        case "memberScopeChanged":
-          this.memberScopeChanged(members);
-          break;
-        case "messageDeleted":
-          this.closeThreadMessages();
-          break;
-        case "messageEdited":
-          this.updateThreadMessage(message);
-          break;
-        case "listenerData":
-          this.actionFromListener = { action: action, messages: [...messages] };
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Updates group
-     */
-    groupUpdated(key, options) {
-      this.groupMessages = [];
-
-      switch (key) {
-        case enums.GROUP_MEMBER_BANNED:
-        case enums.GROUP_MEMBER_KICKED: {
-          if (options.user.uid === this.loggedInUser.uid) {
-            this.item = {};
-            this.type = "group";
-            this.viewDetailScreen = false;
-          }
-          break;
-        }
-        case enums.GROUP_MEMBER_SCOPE_CHANGED: {
-          if (options.user.uid === this.loggedInUser.uid) {
-            const newObj = Object.assign({}, this.item, {
-              scope: options["scope"],
-            });
-
-            this.item = newObj;
-            this.type = "group";
-            this.viewDetailScreen = false;
-          }
-          break;
-        }
-        default:
-          break;
-      }
-    },
-    /**
-     * Deletes group
-     */
-    deleteGroup(group) {
-      this.groupToDelete = group;
-
-      this.resetGroup();
-    },
-    /**
-     * Leaves group
-     */
-    leaveGroup(group) {
-      this.groupToLeave = group;
-
-      this.resetGroup();
-    },
-    /**
-     * Reset group
-     */
-    resetGroup() {
-      this.item = {};
-      this.type = "group";
-      this.viewDetailScreen = false;
-    },
-  },
-  beforeMount() {
-    if (!Object.keys(this.item).length) {
-      this.toggleSideBar();
-    }
-
-    (async () => {
-      try {
-        this.loggedInUser = await new CometChatManager().getLoggedInUser();
-      } catch (error) {
-        this.logError(
-          "[CometChatUserListWithMessages] getLoggedInUser error",
-          error
-        );
-      }
-    })();
-  },
-};
-</script>
-<style scoped>
-.cometchat__groups * {
-  box-sizing: border-box;
-  font-family: var(--cometchat-font-family) !important;
-}
-@media (min-width: 320px) and (max-width: 767px) {
-  .groups__sidebar {
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    width: 100% !important;
-    transition: all 0.3s ease-out;
-    position: absolute !important;
-    left: var(--cometchat-groups-sidebar-left);
-    background-color: var(--cometchat-groups-sidebar-bg);
-    box-shadow: var(--cometchat-groups-sidebar-box-shadow);
-  }
-  .groups__main {
-    width: 100% !important;
-  }
-  .groups__secondary-view {
-    top: 0;
-    bottom: 0;
-    z-index: 2;
-    right: 0 !important;
-    width: 100% !important;
-    position: absolute !important;
-    background-color: var(--groups-secondary-bg-color) !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatGroupListWithMessages/style.js

@@ -1,64 +0,0 @@
-export const groupScreenStyle = (theme) => {
-  return {
-    display: "flex",
-    height: "100%",
-    width: "100%",
-    boxSizing: "border-box",
-    fontFamily: `${theme.fontFamily}`,
-    "--cometchat-font-family": `${theme.fontFamily}`,
-  };
-};
-
-export const groupScreenSidebarStyle = (theme, sidebarView) => {
-  const sidebar = sidebarView
-    ? {
-        "--cometchat-groups-sidebar-left": "0",
-        "--cometchat-groups-sidebar-box-shadow":
-          "rgba(0, 0, 0, .4) -30px 0 30px 30px",
-      }
-    : {};
-
-  return {
-    width: "280px",
-    borderRight: `1px solid ${theme.borderColor.primary}`,
-    height: "100%",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    "--cometchat-groups-sidebar-left": "-100%",
-    "--cometchat-groups-sidebar-bg": `${theme.backgroundColor.white}`,
-    ...sidebar,
-  };
-};
-
-export const groupScreenMainStyle = (threadMessageView, detailView) => {
-  const secondaryView = threadMessageView
-    ? {
-        width: "calc(100% - 680px)",
-      }
-    : detailView
-    ? {
-        width: "calc(100% - 580px)",
-      }
-    : {};
-
-  return {
-    width: "calc(100% - 280px)",
-    height: "100%",
-    order: "2",
-    ...secondaryView,
-  };
-};
-
-export const groupScreenSecondaryStyle = (theme, threadMessageView) => {
-  return {
-    float: "right",
-    borderLeft: `1px solid ${theme.borderColor.primary}`,
-    height: "100%",
-    width: threadMessageView ? "400px" : "300px",
-    display: "flex",
-    flexDirection: "column",
-    order: "3",
-    "--groups-secondary-bg-color": `${theme.backgroundColor.white}`,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatViewGroupMemberList/CometChatViewGroupMemberList.vue

@@ -1,260 +0,0 @@
-<template>
-  <div>
-    <comet-chat-backdrop :show="open" @click="closeModal" />
-    <div :style="styles.modalWrapper" class="modal__viewmembers">
-      <span title="Close" :style="styles.modalClose" @click="closeModal"></span>
-      <div :style="styles.modalBody">
-        <table :style="styles.modalTable">
-          <caption :style="styles.tableCaption">
-            {{
-              STRINGS.GROUP_MEMBERS
-            }}
-          </caption>
-          <thead>
-            <tr :style="styles.modalTable.tr">
-              <th :style="styles.modalTable.tr.th">{{ STRINGS.NAME }}</th>
-              <th :style="styles.modalTable.tr.th" class="viemembers__scope">
-                {{ STRINGS.SCOPE }}
-              </th>
-              <template v-if="canEdit">
-                <th
-                  :style="{
-                    ...styles.modalTable.tr.th,
-                    ...styles.actionColumn,
-                  }"
-                  class="viemembers__actions"
-                >
-                  {{ STRINGS.BAN }}
-                </th>
-                <th
-                  :style="{
-                    ...styles.modalTable.tr.th,
-                    ...styles.actionColumn,
-                  }"
-                  class="viemembers__actions"
-                >
-                  {{ STRINGS.KICK }}
-                </th>
-              </template>
-            </tr>
-          </thead>
-          <tbody :style="styles.tableBody" @scroll="scrollHandler">
-            <!--eslint-disable-->
-            <template 
-              v-for="(member, i) in membersList"
-            >
-              <comet-chat-view-group-member-list-item
-                :item="item"
-                :theme="theme"
-                :member="member"
-                :logged-in-user="loggedInUser"
-                @action="updateMembersHandler"
-              />
-            </template>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_ARRAY_PROP,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon, propertyCheck } from "../../../mixins/";
-
-import { CometChatBackdrop } from "../../Shared/";
-import CometChatViewGroupMemberListItem from "../CometChatViewGroupMemberListItem/CometChatViewGroupMemberListItem";
-
-import clearIcon from "./resources/close.png";
-
-import * as style from "./style";
-
-/**
- * Displays list of group members.
- *
- * @displayName CometChatViewGroupMemberList
- */
-export default {
-  name: "CometChatViewGroupMemberList",
-  mixins: [cometChatCommon, propertyCheck],
-  components: {
-    CometChatBackdrop,
-    CometChatViewGroupMemberListItem,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Opens the modal.
-     */
-    open: { ...DEFAULT_BOOLEAN_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * List of all members.
-     */
-    membersList: { ...DEFAULT_ARRAY_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        modalBody: style.modalBodyCtyle(),
-        tableBody: style.tableBodyStyle(),
-        tableCaption: style.tableCaptionStyle(),
-        actionColumn: style.actionColumnStyle(),
-        modalClose: style.modalCloseStyle(clearIcon),
-        modalTable: style.modalTableStyle(this.theme),
-        modalWrapper: style.modalWrapperStyle(this.theme, this.open),
-      };
-    },
-    /**
-     * Returns if user can edit scope(ban/kick) members.
-     */
-    canEdit() {
-      let flag = false;
-
-      if (this.item.scope !== CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT) {
-        flag = true;
-      }
-
-      return flag;
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  methods: {
-    /**
-     * Closes modal
-     */
-    closeModal() {
-      this.emitEvent("close");
-    },
-    /**
-     * Handler for group member list scroll
-     */
-    scrollHandler(e) {
-      try {
-        const bottom =
-          Math.round(
-            e.currentTarget.scrollHeight - e.currentTarget.scrollTop
-          ) === Math.round(e.currentTarget.clientHeight);
-
-        if (bottom) {
-          this.emitAction("fetchGroupMembers");
-        }
-      } catch (error) {
-        this.logError("Error in group member scroll ", error);
-      }
-    },
-    /**
-     * Handler for emitted action events
-     */
-    updateMembersHandler({ action, member, scope }) {
-      switch (action) {
-        case "ban":
-          this.banMember(member);
-          break;
-        case "kick":
-          this.kickMember(member);
-          break;
-        case "changeScope":
-          this.changeScope(member, scope);
-          break;
-        default:
-          break;
-      }
-    },
-    /**
-     * Bans a member
-     */
-    async banMember(memberToBan) {
-      try {
-        const guid = this.item.guid;
-
-        const response = await CometChat.banGroupMember(guid, memberToBan.uid);
-
-        if (response) {
-          this.emitAction("removeGroupParticipants", { member: memberToBan });
-        }
-      } catch (error) {
-        this.logError("banGroupMember failed with error: ", error);
-      }
-    },
-    /**
-     * Kicks a member
-     */
-    async kickMember(memberToKick) {
-      try {
-        const guid = this.item.guid;
-        const response = await CometChat.kickGroupMember(
-          guid,
-          memberToKick.uid
-        );
-
-        if (response) {
-          this.emitAction("removeGroupParticipants", { member: memberToKick });
-        }
-      } catch (error) {
-        this.logError("kickGroupMember failed with error: ", error);
-      }
-    },
-    /**
-     * Changes scope of a member
-     */
-    async changeScope(member, scope = "participant") {
-      try {
-        const guid = this.item.guid;
-
-        const response = await CometChat.updateGroupMemberScope(
-          guid,
-          member.uid,
-          scope
-        );
-
-        if (response) {
-          const updatedMember = Object.assign({}, member, { scope: scope });
-          this.emitAction("updateGroupParticipants", { member: updatedMember });
-        }
-      } catch (error) {
-        this.logError("updateGroupMemberScope failed with error: ", error);
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-@media (min-width: 320px) and (max-width: 767px) {
-  .modal__viewmembers {
-    width: 100% !important;
-    height: 100% !important;
-  }
-  .viemembers__scope {
-    width: 170px;
-  }
-  .viemembers__actions {
-    width: 55px !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatViewGroupMemberList/style.js

@@ -1,92 +0,0 @@
-export const modalWrapperStyle = (theme, open) => {
-  const show = open
-    ? {
-        display: "block",
-      }
-    : {};
-
-  return {
-    minWidth: "350px",
-    minHeight: "450px",
-    width: "50%",
-    height: "40%",
-    overflow: "hidden",
-    backgroundColor: `${theme.backgroundColor.white}`,
-    position: "fixed",
-    left: "50%",
-    top: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: "1002",
-    margin: "0 auto",
-    boxShadow:
-      "rgba(20, 20, 20, 0.2) 0 16px 32px, rgba(20, 20, 20, 0.04) 0 0 0 1px",
-    borderRadius: "12px",
-    display: "none",
-    ...show,
-  };
-};
-
-export const modalCloseStyle = (img) => {
-  return {
-    position: "absolute",
-    width: "32px",
-    height: "32px",
-    borderRadius: "50%",
-    top: "20px",
-    right: "16px",
-    background: `url(${img}) center center / 18px no-repeat`,
-    cursor: "pointer",
-  };
-};
-
-export const modalBodyCtyle = () => {
-  return {
-    padding: "25px",
-    height: "100%",
-    width: "100%",
-  };
-};
-
-export const modalTableStyle = (theme) => {
-  return {
-    borderCollapse: "collapse",
-    margin: "0",
-    padding: "0",
-    width: "100%",
-    height: "90%",
-    tr: {
-      border: `1px solid ${theme.borderColor.primary}`,
-      display: "table",
-      width: "100%",
-      tableLayout: "fixed",
-      th: {
-        padding: "8px",
-        fontSize: "12px",
-        textAlign: "left",
-      },
-    },
-  };
-};
-
-export const tableCaptionStyle = () => {
-  return {
-    fontSize: "20px",
-    marginBottom: "15px",
-    fontWeight: "bold",
-    textAlign: "left",
-  };
-};
-
-export const tableBodyStyle = () => {
-  return {
-    height: "325px",
-    overflowY: "auto",
-    display: "block",
-  };
-};
-
-export const actionColumnStyle = () => {
-  return {
-    width: "70px",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatViewGroupMemberListItem/CometChatViewGroupMemberListItem.vue

@@ -1,345 +0,0 @@
-<template>
-  <tr :style="styles.tableRow">
-    <td
-      :style="styles.tableColumn"
-      @mouseenter="toggleTooltip($event, true)"
-      @mouseleave="toggleTooltip($event, false)"
-    >
-      <div :style="styles.avatar" class="member__list__avatar">
-        <comet-chat-avatar
-          border-width="1px"
-          corner-radius="18px"
-          :image="member.avatar"
-          :border-color="theme.borderColor.primary"
-        />
-
-        <comet-chat-user-presence
-          border-width="1px"
-          corner-radius="50%"
-          :status="member.status"
-          :border-color="theme.borderColor.primary"
-        />
-      </div>
-      <div :style="styles.name" class="member__list__name">
-        {{ displayName }}
-      </div>
-    </td>
-    <td class="member__list__scope__column">
-      <div :style="styles.scopeWrapper">
-        <template v-if="showChangeScope && canChangeScope">
-          <select
-            :default-value="member.scope"
-            :style="styles.scopeSelection"
-            @change="scopeChangeHandler"
-          >
-            <option :value="COMET_CHAT.GROUP_MEMBER_SCOPE.PARTICIPANT">
-              {{ roles[COMET_CHAT.GROUP_MEMBER_SCOPE.PARTICIPANT] }}
-            </option>
-            <option :value="COMET_CHAT.GROUP_MEMBER_SCOPE.MODERATOR">
-              {{ roles[COMET_CHAT.GROUP_MEMBER_SCOPE.MODERATOR] }}
-            </option>
-            <option
-              v-if="!isNotAdmin"
-              :value="COMET_CHAT.GROUP_MEMBER_SCOPE.ADMIN"
-            >
-              {{ roles[COMET_CHAT.GROUP_MEMBER_SCOPE.ADMIN] }}
-            </option>
-          </select>
-          <div>
-            <img
-              :src="icons.done"
-              :alt="STRINGS.CHANGE_SCOPE"
-              :style="styles.scopeWrapper.img"
-              @click="updateMemberScope"
-            />
-            <img
-              :src="icons.clear"
-              :alt="STRINGS.CHANGE_SCOPE"
-              :style="{
-                ...styles.scopeWrapper.img,
-                ...styles.scopeWrapper.clear,
-              }"
-              @click="changeScopeView(false)"
-            />
-          </div>
-        </template>
-        <template v-else>
-          <span :style="styles.role">
-            {{ scopeName }}
-          </span>
-
-          <img
-            :src="icons.scope"
-            v-if="canChangeScope"
-            :style="styles.scopeImage"
-            :alt="STRINGS.CHANGE_SCOPE"
-            @click="changeScopeView(true)"
-          />
-        </template>
-      </div>
-    </td>
-    <template v-if="canEdit">
-      <td :style="styles.actionColumn" class="member__list__action__column">
-        <span>
-          <img
-            :src="icons.ban"
-            :alt="STRINGS.BAN"
-            v-if="canViewAction"
-            :style="styles.actionColumn.img"
-            @click="emitAction('ban', { member })"
-        /></span>
-      </td>
-      <td :style="styles.actionColumn" class="member__list__action__column">
-        <span>
-          <img
-            :src="icons.kick"
-            :alt="STRINGS.KICK"
-            v-if="canViewAction"
-            :style="{ ...styles.actionColumn.img, ...styles.actionColumn.kick }"
-            @click="emitAction('kick', { member })"
-        /></span>
-      </td>
-    </template>
-  </tr>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import { tooltip, propertyCheck, cometChatCommon } from "../../../mixins/";
-
-import { CometChatAvatar, CometChatUserPresence } from "../../Shared";
-
-import * as style from "./style";
-
-import clearIcon from "./resources/close.png";
-import kickIcon from "./resources/delete.png";
-import scopeIcon from "./resources/edit.png";
-import doneIcon from "./resources/done.png";
-import banIcon from "./resources/block.png";
-
-/**
- * List item for group member list.
- *
- * @displayName CometChatViewGroupMemberListItem
- */
-
-export default {
-  name: "CometChatViewGroupMemberListItem",
-  mixins: [tooltip, propertyCheck, cometChatCommon],
-  components: {
-    CometChatAvatar,
-    CometChatUserPresence,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Member item.
-     */
-    member: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      roles: {},
-      scope: "participant",
-      showChangeScope: false,
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        role: style.roleStyle(),
-        scopeImage: style.scopeImageStyle(),
-        tableColumn: style.tableColumnStyle(),
-        actionColumn: style.actionColumnStyle(),
-        scopeWrapper: style.scopeWrapperStyle(),
-        tableRow: style.tableRowStyle(this.theme),
-        name: style.nameStyle(this.isParticipant),
-        scopeSelection: style.scopeSelectionStyle(),
-        avatar: style.avatarStyle(this.isParticipant),
-      };
-    },
-    /**
-     * Computed scope name.
-     */
-    scopeName() {
-      return this.isOwner
-        ? COMETCHAT_CONSTANTS.OWNER
-        : this.roles[this.member.scope];
-    },
-    /**
-     * Computed display name.
-     */
-    displayName() {
-      return this.isCurrentUser ? COMETCHAT_CONSTANTS.YOU : this.member.name;
-    },
-    /**
-     * Returns if current member is owner.
-     */
-    isOwner() {
-      return this.item.owner === this.member.uid;
-    },
-    /**
-     * Returns if current member is current user.
-     */
-    isCurrentUser() {
-      return this.loggedInUser.uid === this.member.uid;
-    },
-    /**
-     * Returns if current member is moderator.
-     */
-    isModerator() {
-      return (
-        this.item.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR &&
-        (this.member.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN ||
-          this.member.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR)
-      );
-    },
-    /**
-     * Returns if current member is admin but not owner.
-     */
-    isAdminButNotOwner() {
-      return (
-        this.item.owner !== this.loggedInUser.uid &&
-        this.item.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN &&
-        this.member.scope === CometChat.GROUP_MEMBER_SCOPE.ADMIN
-      );
-    },
-    /**
-     * Returns if current member is not admin.
-     */
-    isNotAdmin() {
-      return (
-        this.item.scope === CometChat.GROUP_MEMBER_SCOPE.MODERATOR &&
-        this.member.scope === CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT
-      );
-    },
-    /**
-     * Returns if current member is participant.
-     */
-    isParticipant() {
-      return this.item.scope === CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT;
-    },
-    /**
-     * Returns if current member can view actions.
-     */
-    canViewAction() {
-      return !(
-        this.isOwner ||
-        this.isCurrentUser ||
-        this.isModerator ||
-        this.isAdminButNotOwner
-      );
-    },
-    /**
-     * Returns if current member can change scope.
-     */
-    canChangeScope() {
-      return !(
-        this.isOwner ||
-        this.isCurrentUser ||
-        this.isModerator ||
-        this.isAdminButNotOwner ||
-        this.isParticipant
-      );
-    },
-
-    /**
-     * Returns if current member can edit(ban/kick).
-     */
-    canEdit() {
-      return this.isParticipant ? false : true;
-    },
-    /**
-     * Icon images.
-     */
-    icons() {
-      return {
-        ban: banIcon,
-        kick: kickIcon,
-        done: doneIcon,
-        scope: scopeIcon,
-        clear: clearIcon,
-      };
-    },
-    /**
-     * Instance of "CometChat" to use in Vue html template.
-     */
-    COMET_CHAT() {
-      return CometChat;
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-  methods: {
-    /**
-     * Updates scope
-     */
-    scopeChangeHandler(event) {
-      this.scope = event.target.value;
-    },
-    /**
-     * Emits changeScope event
-     */
-    updateMemberScope() {
-      this.emitAction("changeScope", {
-        member: this.member,
-        scope: this.scope,
-      });
-      this.changeScopeView(false);
-    },
-    /**
-     * Toggles scope icon view
-     */
-    changeScopeView(value) {
-      this.showChangeScope = value;
-    },
-  },
-  beforeMount() {
-    this.roles[CometChat.GROUP_MEMBER_SCOPE.ADMIN] =
-      COMETCHAT_CONSTANTS.ADMINISTRATOR;
-    this.roles[CometChat.GROUP_MEMBER_SCOPE.MODERATOR] =
-      COMETCHAT_CONSTANTS.MODERATOR;
-    this.roles[CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT] =
-      COMETCHAT_CONSTANTS.PARTICIPANT;
-  },
-};
-</script>
-<style scoped>
-@media (min-width: 320px) and (max-width: 767px) {
-  .member__list__avatar {
-    display: var(--members-avatar-display) !important;
-  }
-  .member__list__name {
-    width: var(--members-name-width) !important;
-  }
-  .member__list__scope__column {
-    width: 180px !important;
-  }
-  .member__list__action__column {
-    width: 54px !important;
-  }
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/CometChatViewGroupMemberListItem/style.js

@@ -1,116 +0,0 @@
-export const tableRowStyle = (theme) => {
-  return {
-    border: `1px solid ${theme.borderColor.primary}`,
-    borderTop: "none",
-    display: "table",
-    width: "100%",
-    tableLayout: "fixed",
-    fontSize: "14px",
-  };
-};
-
-export const tableColumnStyle = () => {
-  return {
-    padding: "8px",
-  };
-};
-
-export const avatarStyle = (participantView) => {
-  const displayProp = participantView
-    ? {
-        "--members-avatar-display": "none",
-      }
-    : {};
-
-  return {
-    display: "inline-block",
-    float: "left",
-    width: "36px",
-    height: "36px",
-    ...displayProp,
-  };
-};
-
-export const nameStyle = (participantView) => {
-  const widthProp = participantView
-    ? {
-        "--members-name-width": "100%",
-      }
-    : {};
-
-  return {
-    margin: "10px 0",
-    paddingLeft: "8px",
-    width: "calc(100% - 50px)",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    ...widthProp,
-  };
-};
-
-export const roleStyle = () => {
-  return {
-    padding: "5px",
-    float: "left",
-    fontSize: "12px",
-  };
-};
-
-export const scopeImageStyle = () => {
-  return {
-    width: "16px",
-    height: "16px",
-    cursor: "pointer",
-    margin: "4px",
-  };
-};
-
-export const actionColumnStyle = () => {
-  return {
-    width: "70px",
-    padding: "8px",
-    img: {
-      width: "20px",
-      height: "20px",
-      cursor: "pointer",
-    },
-    kick: {
-      width: "16px",
-      height: "17px",
-    },
-  };
-};
-
-export const scopeWrapperStyle = () => {
-  return {
-    float: "left",
-    width: "100%",
-    transition: "opacity .1s linear",
-    img: {
-      width: "20px",
-      height: "20px",
-      margin: "4px",
-      cursor: "pointer",
-      float: "left",
-    },
-    clear: {
-      width: "16px",
-      height: "16px",
-      margin: "6px 4px",
-    },
-  };
-};
-
-export const scopeSelectionStyle = () => {
-  return {
-    width: "65%",
-    border: "0",
-    boxShadow: "rgba(20, 20, 20, 0.04) 0 0 0 1px inset",
-    borderRadius: "8px",
-    backgroundColor: `rgba(20, 20, 20, 0.04)`,
-    padding: "6px",
-    color: `rgba(20, 20, 20, 0.6)`,
-    float: "left",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Groups/index.js

@@ -1,11 +0,0 @@
-export { default as CometChatAddGroupMemberList } from "./CometChatAddGroupMemberList/CometChatAddGroupMemberList";
-export { default as CometChatAddGroupMemberListItem } from "./CometChatAddGroupMemberListItem/CometChatAddGroupMemberListItem";
-export { default as CometChatBanGroupMemberList } from "./CometChatBanGroupMemberList/CometChatBanGroupMemberList";
-export { default as CometChatBanGroupMemberListItem } from "./CometChatBanGroupMemberListItem/CometChatBanGroupMemberListItem";
-export { default as CometChatCreateGroup } from "./CometChatCreateGroup/CometChatCreateGroup";
-export { default as CometChatGroupDetails } from "./CometChatGroupDetails/CometChatGroupDetails";
-export { default as CometChatGroupList } from "./CometChatGroupList/CometChatGroupList";
-export { default as CometChatGroupListItem } from "./CometChatGroupListItem/CometChatGroupListItem";
-export { default as CometChatGroupListWithMessages } from "./CometChatGroupListWithMessages/CometChatGroupListWithMessages";
-export { default as CometChatViewGroupMemberList } from "./CometChatViewGroupMemberList/CometChatViewGroupMemberList";
-export { default as CometChatViewGroupMemberListItem } from "./CometChatViewGroupMemberListItem/CometChatViewGroupMemberListItem";

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatActionMessageBubble/CometChatActionMessageBubble.vue

@@ -1,161 +0,0 @@
-<template>
-  <div :style="styles.message">
-    <p :style="styles.messageTxt">{{ messageText }}</p>
-  </div>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-} from "../../../resources/constants";
-
-import * as style from "./style";
-
-/**
- * Message bubble for action messages.
- *
- * @displayName CometChatActionMessageBubble
- */
-export default {
-  name: "CometChatActionMessageBubble",
-  props: {
-    /**
-     * The message object.
-     */
-    message: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Current logged in user.
-     */
-    loggedInUser: { ...DEFAULT_OBJECT_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the bubble.
-     */
-    styles() {
-      return {
-        message: style.callMessageStyle(),
-        messageTxt: style.callMessageTxtStyle(),
-      };
-    },
-    /**
-     * The computed message text to display.
-     */
-    messageText() {
-      const call = this.message;
-      const loggedInUser = this.loggedInUser;
-
-      let message = null;
-      switch (call.status) {
-        case CometChat.CALL_STATUS.INITIATED: {
-          message = COMETCHAT_CONSTANTS.CALL_INITIATED;
-          if (call.type === CometChat.CALL_TYPE.AUDIO) {
-            if (call.receiverType === CometChat.RECEIVER_TYPE.USER) {
-              message =
-                call.callInitiator.uid === loggedInUser.uid
-                  ? COMETCHAT_CONSTANTS.OUTGOING_AUDIO_CALL
-                  : COMETCHAT_CONSTANTS.INCOMING_AUDIO_CALL;
-            } else if (call.receiverType === CometChat.RECEIVER_TYPE.GROUP) {
-              if (call.action === CometChat.CALL_STATUS.INITIATED) {
-                message =
-                  call.callInitiator.uid === loggedInUser.uid
-                    ? COMETCHAT_CONSTANTS.OUTGOING_AUDIO_CALL
-                    : COMETCHAT_CONSTANTS.INCOMING_AUDIO_CALL;
-              } else if (call.action === CometChat.CALL_STATUS.REJECTED) {
-                message =
-                  call.sender.uid === loggedInUser.uid
-                    ? COMETCHAT_CONSTANTS.CALL_REJECTED
-                    : `${call.sender.name} ${COMETCHAT_CONSTANTS.REJECTED_CALL}`;
-              }
-            }
-          } else if (call.type === CometChat.CALL_TYPE.VIDEO) {
-            if (call.receiverType === CometChat.RECEIVER_TYPE.USER) {
-              message =
-                call.callInitiator.uid === loggedInUser.uid
-                  ? COMETCHAT_CONSTANTS.OUTGOING_VIDEO_CALL
-                  : COMETCHAT_CONSTANTS.INCOMING_VIDEO_CALL;
-            } else if (call.receiverType === CometChat.RECEIVER_TYPE.GROUP) {
-              if (call.action === CometChat.CALL_STATUS.INITIATED) {
-                message =
-                  call.callInitiator.uid === loggedInUser.uid
-                    ? COMETCHAT_CONSTANTS.OUTGOING_VIDEO_CALL
-                    : COMETCHAT_CONSTANTS.INCOMING_VIDEO_CALL;
-              } else if (call.action === CometChat.CALL_STATUS.REJECTED) {
-                message =
-                  call.sender.uid === loggedInUser.uid
-                    ? COMETCHAT_CONSTANTS.CALL_REJECTED
-                    : `${call.sender.name} ${COMETCHAT_CONSTANTS.REJECTED_CALL}`;
-              }
-            }
-          }
-          break;
-        }
-        case CometChat.CALL_STATUS.ONGOING: {
-          if (call.receiverType === CometChat.RECEIVER_TYPE.USER) {
-            message = COMETCHAT_CONSTANTS.CALL_ACCEPTED;
-          } else if (call.receiverType === CometChat.RECEIVER_TYPE.GROUP) {
-            if (call.action === CometChat.CALL_STATUS.ONGOING) {
-              message =
-                call.sender.uid === loggedInUser.uid
-                  ? COMETCHAT_CONSTANTS.CALL_ACCEPTED
-                  : `${call.sender.name} ${COMETCHAT_CONSTANTS.JOINED}`;
-            } else if (call.action === CometChat.CALL_STATUS.REJECTED) {
-              message =
-                call.sender.uid === loggedInUser.uid
-                  ? COMETCHAT_CONSTANTS.CALL_REJECTED
-                  : `${call.sender.name} ${COMETCHAT_CONSTANTS.REJECTED_CALL}`;
-            } else if (call.action === "left") {
-              message =
-                call.sender.uid === loggedInUser.uid
-                  ? `${COMETCHAT_CONSTANTS.YOU} ${COMETCHAT_CONSTANTS.LEFT_THE_CALL}`
-                  : `${call.sender.name} ${COMETCHAT_CONSTANTS.LEFT_THE_CALL}`;
-            }
-          }
-
-          break;
-        }
-        case CometChat.CALL_STATUS.UNANSWERED: {
-          message = COMETCHAT_CONSTANTS.CALL_UNANSWERED;
-          if (
-            call.type === CometChat.CALL_TYPE.AUDIO &&
-            (call.receiverType === CometChat.RECEIVER_TYPE.USER ||
-              call.receiverType === CometChat.RECEIVER_TYPE.GROUP)
-          ) {
-            message =
-              call.callInitiator.uid === loggedInUser.uid
-                ? COMETCHAT_CONSTANTS.UNANSWERED_AUDIO_CALL
-                : COMETCHAT_CONSTANTS.MISSED_AUDIO_CALL;
-          } else if (
-            call.type === CometChat.CALL_TYPE.VIDEO &&
-            (call.receiverType === CometChat.RECEIVER_TYPE.USER ||
-              call.receiverType === CometChat.RECEIVER_TYPE.GROUP)
-          ) {
-            message =
-              call.callInitiator.uid === loggedInUser.uid
-                ? COMETCHAT_CONSTANTS.UNANSWERED_VIDEO_CALL
-                : COMETCHAT_CONSTANTS.MISSED_VIDEO_CALL;
-          }
-          break;
-        }
-        case CometChat.CALL_STATUS.REJECTED:
-          message = COMETCHAT_CONSTANTS.CALL_REJECTED;
-          break;
-        case CometChat.CALL_STATUS.CANCELLED:
-          message = COMETCHAT_CONSTANTS.CALL_CANCELLED;
-          break;
-        case CometChat.CALL_STATUS.ENDED:
-          message = COMETCHAT_CONSTANTS.CALL_ENDED;
-          break;
-        case CometChat.CALL_STATUS.BUSY:
-          message = COMETCHAT_CONSTANTS.CALL_BUSY;
-          break;
-        default:
-          break;
-      }
-      return message;
-    },
-  },
-};
-</script>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatActionMessageBubble/style.js

@@ -1,15 +0,0 @@
-export const callMessageStyle = () => {
-  return {
-    padding: "8px 12px",
-    marginBottom: "16px",
-    textAlign: "center",
-  };
-};
-
-export const callMessageTxtStyle = () => {
-  return {
-    fontSize: "13px",
-    fontWeight: "500",
-    margin: "0",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatDeleteMessageBubble/CometChatDeleteMessageBubble.vue

@@ -1,107 +0,0 @@
-<template>
-  <div :style="styles.messageContainer">
-    <div :style="styles.messageWrapper">
-      <template v-if="messageFrom === 'sender'">
-        <div :style="styles.messageTextWrapper">
-          <p :style="styles.messageText">
-            {{ STRINGS.SENDER_DELETED_MESSAGE }}
-          </p>
-        </div>
-        <div :style="styles.messageInfoWrapper">
-          <span :style="styles.messageTimeStamp">{{ messageTime }}</span>
-        </div>
-      </template>
-      <template v-else-if="messageFrom === 'receiver'">
-        <div :style="styles.messageThumbnail" v-if="isGroup">
-          <comet-chat-avatar
-            border-width="1px"
-            corner-radius="50%"
-            :image="message.sender.avatar"
-            :border-color="theme.borderColor.primary"
-          />
-        </div>
-        <div :style="styles.messageDetail">
-          <div :style="styles.nameWrapper" v-if="isGroup">
-            <span :style="styles.name">{{ message.sender.name }}</span>
-          </div>
-          <div :style="styles.messageTextWrapper">
-            <p :style="styles.messageText">
-              {{ STRINGS.RECEIVER_DELETED_MESSAGE }}
-            </p>
-          </div>
-          <div :style="styles.messageInfoWrapper">
-            <span :style="styles.messageTimeStamp">
-              {{ messageTime }}
-            </span>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-<script>
-import {
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_STRING_PROP,
-} from "../../../resources/constants";
-
-import { cometChatBubbles } from "../../../mixins/";
-
-import { CometChatAvatar } from "../../Shared";
-
-import * as style from "./style";
-
-/**
- * Message bubble for deleted messages.
- *
- * @displayName CometChatDeleteMessageBubble
- */
-export default {
-  name: "CometChatDeleteMessageBubble",
-  mixins: [cometChatBubbles],
-  components: {
-    CometChatAvatar,
-  },
-  props: {
-    /**
-     * The selected chat item object.
-     */
-    item: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Type of chat item.
-     */
-    type: { ...DEFAULT_STRING_PROP },
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     *
-     */
-    message: { ...DEFAULT_OBJECT_PROP },
-    messageFrom: { ...DEFAULT_STRING_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the bubble.
-     */
-    styles() {
-      return {
-        messageTextWrapper: style.messageTextWrapperStyle(
-          this.theme,
-          this.messageFrom
-        ),
-        name: style.nameStyle(this.theme),
-        messageText: style.messageTextStyle(this.theme),
-        messageThumbnail: style.messageThumbnailStyle(),
-        messageTimeStamp: style.messageTimeStampStyle(this.theme),
-        messageWrapper: style.messageWrapperStyle(this.messageFrom),
-        messageContainer: style.messageContainerStyle(this.messageFrom),
-        nameWrapper: style.nameWrapperStyle(this.message, this.messageFrom),
-        messageInfoWrapper: style.messageInfoWrapperStyle(this.messageFrom),
-        messageDetail: style.messageDetailStyle(this.message, this.messageFrom),
-      };
-    },
-  },
-};
-</script>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatDeleteMessageBubble/style.js

@@ -1,147 +0,0 @@
-import { CometChat } from "@cometchat-pro/chat";
-
-export const messageContainerStyle = (messageOf) => {
-  const alignment =
-    messageOf === "sender"
-      ? {
-          alignSelf: "flex-end",
-        }
-      : {
-          alignSelf: "flex-start",
-        };
-
-  return {
-    marginBottom: "16px",
-    paddingLeft: "16px",
-    paddingRight: "16px",
-    maxWidth: "65%",
-    clear: "both",
-    flexShrink: "0",
-    ...alignment,
-  };
-};
-
-export const messageWrapperStyle = (messageOf) => {
-  const alignment =
-    messageOf === "sender"
-      ? {
-          display: "flex",
-          flexDirection: "column",
-        }
-      : {};
-
-  return {
-    flex: "1 1",
-    position: "relative",
-    width: "100%",
-    ...alignment,
-  };
-};
-
-export const messageTextWrapperStyle = (theme, messageOf) => {
-  const alignment =
-    messageOf === "sender"
-      ? {
-          alignSelf: "flex-end",
-        }
-      : {
-          alignSelf: "flex-start",
-        };
-
-  return {
-    display: "inline-block",
-    borderRadius: "12px",
-    padding: "8px 12px",
-    alignSelf: "flex-end",
-    Width: "100%",
-    backgroundColor: `${theme.backgroundColor.secondary}`,
-    fontStyle: "italic",
-    ...alignment,
-  };
-};
-
-export const messageTextStyle = (theme) => {
-  return {
-    fontSize: "14px!important",
-    margin: "0",
-    lineHeight: "20px!important",
-    color: `${theme.color.helpText}`,
-  };
-};
-
-export const messageInfoWrapperStyle = (messageOf) => {
-  const alignment =
-    messageOf === "sender"
-      ? {
-          alignSelf: "flex-end",
-        }
-      : {
-          alignSelf: "flex-start",
-        };
-
-  return alignment;
-};
-
-export const messageTimeStampStyle = (theme) => {
-  return {
-    display: "inline-block",
-    fontSize: "11px",
-    fontWeight: 500,
-    lineHeight: "12px",
-    textTransform: "uppercase",
-    color: `${theme.color.helpText}`,
-  };
-};
-
-export const messageThumbnailStyle = () => {
-  return {
-    width: "36px",
-    height: "36px",
-    margin: "12px 0",
-    float: "left",
-  };
-};
-
-export const messageDetailStyle = (message, messageOf) => {
-  let paddingSpace = {};
-  if (
-    messageOf === "receiver" &&
-    message.receiverType === CometChat.RECEIVER_TYPE.GROUP
-  ) {
-    paddingSpace = {
-      paddingLeft: "5px",
-    };
-  }
-
-  return {
-    flex: "1 1",
-    display: "flex",
-    flexDirection: "column",
-    position: "relative",
-    ...paddingSpace,
-  };
-};
-
-export const nameWrapperStyle = (message, messageOf) => {
-  let paddingSpace = {};
-  if (
-    messageOf === "receiver" &&
-    message.receiverType === CometChat.RECEIVER_TYPE.GROUP
-  ) {
-    paddingSpace = {
-      padding: "3px 5px",
-    };
-  }
-
-  return {
-    alignSelf: "flex-start",
-    ...paddingSpace,
-  };
-};
-
-export const nameStyle = (theme) => {
-  return {
-    fontSize: "10px",
-    color: `${theme.color.helpText}`,
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatImageViewer/CometChatImageViewer.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <comet-chat-backdrop :show="open" @click="emitAction('closeActualImage')" />
-    <div :style="styles.imageWrapper" @click="emitAction('closeActualImage')">
-      <img
-        :src="computedImage"
-        :style="styles.image"
-        :alt="STRINGS.FULL_SCREEN_VIEW"
-        @error="() => (error = true)"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon } from "../../../mixins/";
-
-import { CometChatBackdrop } from "../../Shared";
-
-import closeIcon from "./resources/close.png";
-import srcIcon from "./resources/1px.png";
-
-import * as style from "./style";
-
-/**
- * Displays fullscreen image.
- *
- * @displayName CometChatImageViewer
- */
-export default {
-  name: "CometChatImageViewer",
-  mixins: [cometChatCommon],
-  components: { CometChatBackdrop },
-  props: {
-    /**
-     * Opens image viewer.
-     */
-    open: { ...DEFAULT_BOOLEAN_PROP },
-    /**
-     * The message object.
-     */
-    message: { ...DEFAULT_OBJECT_PROP },
-  },
-  data() {
-    return {
-      error: false,
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the component.
-     */
-    styles() {
-      return {
-        image: style.imageStyle(),
-        imageWrapper: style.imageWrapperStyle(closeIcon),
-      };
-    },
-    /**
-     * Computed image based on error state.
-     */
-    computedImage() {
-      return this.error ? srcIcon : this.message.data.url;
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-  },
-};
-</script>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatImageViewer/style.js

@@ -1,21 +0,0 @@
-export const imageWrapperStyle = (img) => {
-  return {
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    padding: "2%",
-    zIndex: "9999",
-    display: "flex",
-    justifyContent: "center",
-    background: `url(${img}) calc(100% - 4px) 4px no-repeat #fff`,
-    cursor: "pointer",
-  };
-};
-
-export const imageStyle = () => {
-  return {
-    objectFit: "contain",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatLiveReactions/CometChatLiveReactions.vue

@@ -1,179 +0,0 @@
-<template>
-  <div ref="parentElement" :style="styles.reactionContainer">
-    <span
-      :key="i"
-      :style="styles.reactionEmoji"
-      class="live__reaction__emoji"
-      v-for="(_, i) in Array(6).fill(0)"
-    >
-      <img :src="reactionIconSrc" :alt="reaction" />
-    </span>
-  </div>
-</template>
-
-<!--eslint-disable-->
-<script>
-import {
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_STRING_PROP,
-} from "../../../resources/constants";
-
-import * as enums from "../../../util/enums.js";
-
-import heart from "./resources/heart.png";
-
-import * as style from "./style";
-
-/**
- * Displays live reaction animation.
- *
- * @displayName CometChatLiveReactions
- */
-export default {
-  name: "CometChatLiveReactions",
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The reaction to animate.
-     */
-    reaction: { ...DEFAULT_STRING_PROP },
-  },
-  data() {
-    return {
-      items: [],
-      counter: 0,
-      timer: null,
-      verticalSpeed: 5,
-      horizontalSpeed: 2,
-      before: Date.now(),
-    };
-  },
-  computed: {
-    /**
-     * Computed styles for the bubble.
-     */
-    styles() {
-      return {
-        reactionEmoji: style.reactionEmojiStyle(),
-        reactionContainer: style.reactionContainerStyle(),
-      };
-    },
-    /**
-     * Computed reaction icon source.
-     */
-    reactionIconSrc() {
-      return this.reaction
-        ? this.icons[enums.LIVE_REACTIONS[this.reaction]]
-        : this.icons[enums.LIVE_REACTIONS["heart"]];
-    },
-    /**
-     * Icons computed from file images.
-     */
-    icons() {
-      return {
-        heart,
-      };
-    },
-  },
-  methods: {
-    /**
-     * Sets the items before animating
-     */
-    setItems() {
-      this.$nextTick(() => {
-        const width = this.$refs.parentElement.offsetWidth;
-        const height = this.$refs.parentElement.offsetHeight;
-
-        const elements = this.$refs.parentElement.querySelectorAll(
-          ".live__reaction__emoji"
-        );
-
-        for (let i = 0; i < elements.length; i++) {
-          const element = elements[i],
-            elementWidth = element.offsetWidth,
-            elementHeight = element.offsetHeight;
-
-          const item = {
-            faded: false,
-            element: element,
-            elementWidth: elementWidth,
-            elementHeight: elementHeight,
-            ySpeed: -this.verticalSpeed,
-            random: (Math.random() / 2 + 0.5) * i * 10000,
-            omega: (2 * Math.PI * this.horizontalSpeed) / (width * 60),
-            x: function (time) {
-              return (
-                ((Math.sin(this.omega * (time + this.random)) + 1) / 2) *
-                (width - elementWidth)
-              );
-            },
-            y: height + (Math.random() + 1) * i * elementHeight,
-          };
-
-          this.items.push(item);
-        }
-      });
-    },
-    /**
-     * Animates the reaction
-     */
-    animate() {
-      this.$nextTick(() => {
-        if (!this.$refs.parentElement) {
-          return false;
-        }
-
-        const height = this.$refs.parentElement.offsetHeight;
-        const time = +new Date();
-
-        for (let i = 0; i < this.items.length; i++) {
-          const item = this.items[i];
-
-          const transformString =
-            "translate3d(" + item.x(time) + "px, " + item.y + "px, 0px)";
-          item.element.style.transform = transformString;
-
-          item.element.style.visibility = "visible";
-
-          if (item.y <= height) {
-            item.element.classList.add("live__reaction__emoji--fade");
-            item.faded = true;
-          }
-
-          item.y += item.ySpeed;
-        }
-
-        if (this.counter < 500) {
-          this.requestAnimation();
-        }
-
-        this.counter++;
-      });
-    },
-    /**
-     * Looper function that controls the animation
-     */
-    requestAnimation() {
-      this.timer = setTimeout(this.animate, 1000 / 60);
-    },
-  },
-  mounted() {
-    this.setItems();
-    this.requestAnimation();
-  },
-  beforeDestroy() {
-    this.timer = null;
-  },
-  beforeUnmount() {
-    this.timer = null;
-  },
-};
-</script>
-<style>
-.live__reaction__emoji--fade {
-  opacity: 0 !important;
-}
-</style>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatLiveReactions/style.js

@@ -1,22 +0,0 @@
-export const reactionContainerStyle = () => {
-  return {
-    width: "100px",
-    height: "calc(100% - 120px)",
-    overflow: "hidden",
-    position: "absolute",
-    top: "70px",
-    right: "0",
-  };
-};
-
-export const reactionEmojiStyle = () => {
-  return {
-    position: "absolute",
-    color: "#DD4144",
-    visibility: "hidden",
-    width: "20px",
-    height: "20px",
-    opacity: "1",
-    transition: "opacity 3s",
-  };
-};

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatMessageActions/CometChatMessageActions.vue

@@ -1,167 +0,0 @@
-<template>
-  <ul
-    v-if="canShowTooltip"
-    class="message__actions"
-    :style="styles.messageAction"
-  >
-    <li :style="styles.actionGroup">
-      <button
-        type="button"
-        :style="styles.groupButtonReact"
-        :data-title="STRINGS.ADD_REACTION"
-        @mouseenter="toggleTooltip($event, true)"
-        @mouseleave="toggleTooltip($event, false)"
-        @click="emitAction('reactToMessage', { message })"
-      />
-    </li>
-    <li :style="styles.actionGroup">
-      <button
-        type="button"
-        v-if="canShowThread"
-        :style="styles.groupButtonReply"
-        :data-title="
-          message.replyCount ? STRINGS.REPLY_TO_THREAD : STRINGS.REPLY_IN_THREAD
-        "
-        @mouseenter="toggleTooltip($event, true)"
-        @mouseleave="toggleTooltip($event, false)"
-        @click="emitAction('viewMessageThread', { message })"
-      />
-    </li>
-    <li :style="styles.actionGroup">
-      <button
-        type="button"
-        v-if="canShowEdit"
-        :style="styles.groupButtonEdit"
-        :data-title="STRINGS.EDIT_MESSAGE"
-        @mouseenter="toggleTooltip($event, true)"
-        @mouseleave="toggleTooltip($event, false)"
-        @click="emitAction('editMessage', { message })"
-      />
-    </li>
-    <li :style="styles.actionGroup">
-      <button
-        type="button"
-        v-if="canShowDelete"
-        :style="styles.groupButtonDelete"
-        :data-title="STRINGS.DELETE_MESSAGE"
-        @mouseenter="toggleTooltip($event, true)"
-        @mouseleave="toggleTooltip($event, false)"
-        @click="emitAction('deleteMessage', { message })"
-      />
-    </li>
-  </ul>
-</template>
-<script>
-import { CometChat } from "@cometchat-pro/chat";
-
-import {
-  COMETCHAT_CONSTANTS,
-  DEFAULT_OBJECT_PROP,
-  DEFAULT_BOOLEAN_PROP,
-} from "../../../resources/constants";
-
-import { cometChatCommon, propertyCheck, tooltip } from "../../../mixins/";
-
-import deleteIcon from "./resources/deletemessage.png";
-import reactIcon from "./resources/add-reaction.svg";
-import replyIcon from "./resources/startThread.png";
-import editIcon from "./resources/edit.png";
-
-import * as style from "./style";
-
-/**
- * A tooltip that displays all actions for a given message.
- *
- * @displayName CometChatMessageActions
- */
-export default {
-  name: "CometChatMessageActions",
-  mixins: [propertyCheck, cometChatCommon, tooltip],
-  props: {
-    /**
-     * Theme of the UI.
-     */
-    theme: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * The message object.
-     */
-    message: { ...DEFAULT_OBJECT_PROP },
-    /**
-     * Whether the message is from group.
-     */
-    isGroup: { ...DEFAULT_BOOLEAN_PROP },
-  },
-  computed: {
-    /**
-     * Computed styles for the bubble.
-     */
-    styles() {
-      return {
-        actionGroup: style.actionGroupStyle(),
-        groupButtonEdit: style.groupButtonStyle(editIcon, "edit"),
-        groupButtonReply: style.groupButtonStyle(replyIcon, "reply"),
-        groupButtonReact: style.groupButtonStyle(reactIcon, "react"),
-        groupButtonDelete: style.groupButtonStyle(deleteIcon, "delete"),
-        messageAction: style.messageActionStyle(
-          this.message,
-          this.theme,
-          this.isGroup
-        ),
-      };
-    },
-    /**
-     * Local string constants.
-     */
-    STRINGS() {
-      return COMETCHAT_CONSTANTS;
-    },
-    /**
-     * Returns if it can show threaded message icon.
-     */
-    canShowThread() {
-      let flag = true;
-
-      if (this.message.parentMessageId) {
-        flag = false;
-      }
-
-      return flag;
-    },
-    /**
-     * Returns if it can show edit message icon.
-     */
-    canShowEdit() {
-      let flag = true;
-
-      if (
-        this.message.messageFrom === "receiver" ||
-        this.message.type !== CometChat.MESSAGE_TYPE.TEXT
-      ) {
-        flag = false;
-      }
-
-      return flag;
-    },
-    /**
-     * Returns if it can show delete message icon.
-     */
-    canShowDelete() {
-      let flag = true;
-
-      if (this.message.messageFrom === "receiver") {
-        flag = false;
-      }
-
-      return flag;
-    },
-    /**
-     * Returns if it can show the message actions/tooltip.
-     */
-    canShowTooltip() {
-      return !this.canShowThread && !this.canShowEdit && !this.canShowDelete
-        ? false
-        : true;
-    },
-  },
-};
-</script>

frontend/src/cometchat-pro-vue-ui-kit/src/components/Messages/CometChatMessageActions/resources/add-reaction.svg

@@ -1,32 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="253.000000pt" height="245.000000pt"
-    viewBox="0 0 253.000000 245.000000" preserveAspectRatio="xMidYMid meet">
-    <metadata>
-        Created by potrace 1.16, written by Peter Selinger 2001-2019
-    </metadata>
-    <g transform="translate(0.000000,245.000000) scale(0.100000,-0.100000)" fill="#929292" stroke="none">
-        <path d="M1910 2195 l0 -184 -60 6 c-33 3 -116 2 -185 -2 l-125 -7 4 -47 c3
--25 5 -52 5 -58 1 -10 44 -13 179 -13 l178 0 0 -180 c-1 -112 3 -181 9 -183 6
--1 33 -3 60 -2 l50 0 3 182 2 183 182 2 181 3 1 55 0 55 -80 7 c-43 4 -125 4
--181 1 l-103 -6 0 187 0 186 -60 0 -60 0 0 -185z" />
-        <path d="M1088 2015 c-2 -1 -32 -5 -68 -8 -197 -18 -414 -128 -561 -283 -71
--76 -111 -134 -159 -236 -54 -114 -80 -220 -87 -358 -12 -254 76 -479 260
--668 195 -200 453 -296 730 -271 444 41 800 413 824 862 l6 107 -62 0 -61 0 0
--58 c0 -175 -76 -380 -193 -517 -152 -179 -352 -275 -582 -278 -184 -2 -322
-39 -469 140 -58 40 -183 167 -192 195 -3 10 -10 18 -15 18 -5 0 -9 5 -9 10 0
-6 -11 27 -24 48 -28 45 -71 166 -85 242 -12 65 -7 243 8 318 38 187 172 379
-339 486 130 83 255 120 432 128 l55 3 3 49 c2 27 -1 53 -6 58 -9 9 -77 19 -84
-13z" />
-        <path d="M814 1512 c-149 -59 -161 -257 -20 -327 63 -32 99 -31 163 1 42 20
-57 35 77 77 31 60 32 97 7 152 -23 52 -71 93 -119 100 -20 3 -44 7 -53 9 -8 2
--33 -4 -55 -12z" />
-        <path d="M1295 1510 c-144 -65 -150 -262 -11 -330 52 -25 99 -25 151 -1 55 25
-85 61 101 121 11 42 11 57 -1 90 -21 61 -53 97 -106 119 -57 25 -81 25 -134 1z" />
-        <path d="M680 980 c0 -6 -3 -9 -7 -9 -19 4 -73 -24 -73 -37 0 -8 15 -45 33
--82 83 -172 290 -301 483 -302 196 0 394 120 487 296 20 40 37 79 37 87 0 13
--17 22 -97 54 -11 4 -41 -50 -47 -84 -3 -17 -53 -79 -96 -121 -73 -69 -179
--112 -277 -112 -97 0 -223 49 -290 112 -34 33 -103 129 -107 150 -6 26 -18 47
--32 52 -8 3 -14 1 -14 -4z" />
-    </g>
-</svg>