@bcc-code/vue-bcc-chat-ui 1.6.3 → 2.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.6.3",
+  "version": "2.0.1",
   "type": "module",
   "private": false,
   "files": [
@@ -22,7 +22,6 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
@@ -37,8 +36,7 @@
     "@cometchat/chat-uikit-vue": "^4.2.1",
     "@cometchat/uikit-resources": "^4.2.2",
     "@cometchat/uikit-shared": "^4.2.2",
-    "jwt-decode": "^4.0.0",
-    "lodash-es": "^4.17.21"
+    "jwt-decode": "^4.0.0"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageList.vue

@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted, onUnmounted, ref, nextTick, watch, Ref  } from "vue";
+import {
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watchEffect,
+} from "vue";
 import chat from "../chat";
-import { connect, disconnect, connected } from "../chat/connection";
+import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
-
-import {
-  CometChatMessages,
-  CometChatMessageTemplate,
-  CometChatUIKit,
-  ImageBubbleStyle,
-  MessageBubbleAlignment,
-} from "@cometchat/chat-uikit-vue";
+import { CometChatMessages } from "@cometchat/chat-uikit-vue";
+import { Group } from "@cometchat/chat-sdk-javascript";
+import { watchAndApplyStyle } from "../chat/styleFix";
 import {
-  MessageListConfiguration,
-  MessageComposerConfiguration,
-} from "@cometchat/uikit-shared";
-import { CometChatTheme } from "@cometchat/uikit-resources";
-import { BaseMessage, Group, User } from "@cometchat/chat-sdk-javascript";
-import { watchAndApplyStyle } from "../chat/mobileView";
+  messageComposerConfiguration,
+  messageListConfiguration,
+} from "../chat/uiKit";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -26,176 +25,82 @@ const props = defineProps({
 const componentId = ref(
   `component-${Math.random().toString(36).substring(2, 11)}`
 );
-const chatGroup = ref<Group | null>(null);
-
-watch(chatGroup, (exists: null) => {
-  if (!exists) return;
-
-  nextTick(() => {
-    watchAndApplyStyle(
-      ".bcc-chat-message-list",
-      [{
-        selector: '.cc__imageviewer__close-button',
-        style: { "padding-top": "env(safe-area-inset-top)" },
-        shadowDomSelector: 'cometchat-full-screen-viewer'
-      }, {
-        selector: '.cc__text',
-        style: { color: 'var(--cc__text-color)' },
-        shadowDomSelector: 'cometchat-text-bubble'
-      }, {
-        selector: '.cc__linkpreview-title',
-        style: { color: 'var(--cc__text-color)' },
-        shadowDomSelector: 'link-preview'
-      }]
-    );
-  });
-})
+const chatGroup = ref<Group>();
+
+onMounted(() => {
+  watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
+    {
+      selector: ".cc__imageviewer__close-button",
+      style: { "padding-top": "env(safe-area-inset-top)" },
+      shadowDomSelector: "cometchat-full-screen-viewer",
+    },
+    {
+      selector: ".cc__text",
+      style: { color: "var(--cc__text-color)" },
+      shadowDomSelector: "cometchat-text-bubble",
+    },
+    {
+      selector: ".cc__linkpreview-title",
+      style: { color: "var(--cc__text-color)" },
+      shadowDomSelector: "link-preview",
+    },
+    {
+      selector: ".cc__messageinput",
+      style: {
+        "border-radius": "8px 8px 0 0",
+        "box-shadow":
+          "0px -1px 2px 0px rgba(17, 24, 39, 0.05), 1px -1px 3px 0px rgba(17, 24, 39, 0.1)",
+      },
+      shadowDomSelector: "cometchat-message-input",
+    },
+    {
+      selector: ".cc__messageinput-input",
+      style: {
+        "font-size": "16px",
+        padding: "8px",
+        "max-height": "none",
+        height: "64px",
+      },
+      shadowDomSelector: "cometchat-message-input",
+    },
+  ]);
+});
 
 onBeforeMount(async () => {
   await connect(componentId.value);
-  await loadData();
 });
 
 onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
-watch(
-  [loggedIn, connected, chat.initialized, () => props.chatUid],
-  () => {
-    loadData();
-  }
-);
-
-// Loads data if logged in
-const loadData = async () => {
-  if (
-    loggedIn.value &&
-    chat.initialized.value
-  ) {
-    initTemplates();
-    if (props.chatUid) {
-      // Retreive group
-      chatGroup.value = await chat.data.getGroup(props.chatUid);
-
-      // Clear group chat count - assume user is viewing chat
-      if (chatGroup.value) {
-        await chat.data.clearGroupChatCount(props.chatUid);
-      }
-    } else {
-      chatGroup.value = null;
-    }
+watchEffect(async () => {
+  if (loggedIn.value && props.chatUid && chat.initialized.value) {
+    chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
+    await chat.clearGroupChatCount(props.chatUid);
   } else {
-    if (!loggedIn.value) {
-      chatGroup.value = null;
-    }
+    chatGroup.value = undefined;
   }
-};
-
-const messageComposerConfiguration = new MessageComposerConfiguration({
-  hideLiveReaction: true,
-  hideVoiceRecording: true,
 });
-const messageListConfiguration: Ref<any> = ref(null);
-
-// Templates cannot be initialized before CometChat is initiazlied
-// CometChatUIKit.getDataSource().getAllMessageTemplates() will return null before cometchat is initialized
-// So we postpone overriding the templates until cometchat is logged in
-let templatesInitialized = false;
-const initTemplates = () => {
-  if (templatesInitialized) {
-    return;
-  }
-  templatesInitialized = true;
-  messageListConfiguration.value = getMessageListConfiguration();
-};
-
-// Override message list configuration
-function getMessageListConfiguration(): MessageListConfiguration {
-  let templates = CometChatUIKit.getDataSource()
-    .getAllMessageTemplates()
-    .map((template: CometChatMessageTemplate) => {
-      // Override options
-      template.options = (
-        loggedInUser: User,
-        message: BaseMessage,
-        theme: CometChatTheme,
-        group: Group | undefined
-      ) => {
-        return getOptionsView(loggedInUser, message, theme, group);
-      };
-
-      // Override image styling
-      if (template.category === "message" && template.type === "image") {
-        template.contentView = getImageMessageContentView;
-      }
-      return template;
-    });
-
-  function getImageMessageContentView(
-    message: CometChat.BaseMessage,
-    _alignment: MessageBubbleAlignment
-  ) {
-    if (message.getDeletedAt()) {
-      return CometChatUIKit.getDataSource().getDeleteMessageBubble(
-        message,
-        new CometChatTheme({})
-      );
-    }
-    return {
-      componentName: "CometChatImageBubble",
-      props: {
-        src: message.getData().url,
-        imageStyle: new ImageBubbleStyle({
-          // you can adjust image styles here
-          width: "100%",
-          height: "100%",
-        }),
-      },
-    };
-  }
-
-  const getOptionsView = (
-    loggedInUser: User,
-    message: BaseMessage,
-    theme: any,
-    group: Group | undefined
-  ) => {
-    const optionsData = CometChatUIKit.getDataSource().getMessageOptions(
-      loggedInUser,
-      message,
-      theme,
-      group
-    );
-    const customOptionsView = optionsData.filter(
-      (ele) => ele.id !== "sendMessagePrivately"
-    );
-    return customOptionsView;
-  };
-
-  return new MessageListConfiguration({
-    scrollToBottomOnNewMessages: true,
-    templates: templates,
-  });
-}
 </script>
 
 <template>
-  <div v-if="chatGroup" class="bcc-chat-message-list">
-    <CometChatMessages
-      :hideMessageHeader="true"
-      :disableSoundForMessages="true"
-      :messageComposerConfiguration="messageComposerConfiguration"
-      :messageListConfiguration="messageListConfiguration"
-      :hideMessageComposer="false"
-      :hideDetails="true"
-      :group="chatGroup"
-    />
-    <div v-if="!connected" class="bcc-chat-message-composer-offline">
-      <span>Offline</span>
+  <div class="bcc-chat-message-list-wrapper">
+    <div v-if="chatGroup" class="bcc-chat-message-list">
+      <CometChatMessages
+        :hideMessageHeader="true"
+        :disableSoundForMessages="true"
+        :messageComposerConfiguration="messageComposerConfiguration"
+        :messageListConfiguration="messageListConfiguration"
+        :hideMessageComposer="false"
+        :hideDetails="true"
+        :group="chatGroup"
+      />
+    </div>
+    <div class="bcc-chat-message-list-offline">
+      <span>Waiting for connection...</span>
     </div>
   </div>
-  <div class="bcc-chat-message-list-offline"><span>Waiting for connection...</span></div>
 </template>
 
 <style lang="scss">
@@ -205,10 +110,15 @@ body {
 
   @media (prefers-color-scheme: dark) {
     background: #000;
-    color: #fff;  
+    color: #fff;
   }
 }
 
+.bcc-chat-message-list-wrapper {
+  position: relative;
+  height: 100%;
+}
+
 /*
 primary: my bubble
 accent: message bar text
@@ -222,37 +132,37 @@ accent900: text in avatar
 
 .bcc-chat-message-list {
   height: 100%;
-  --cc__primary: #CFEAC8;
-  --cc__background: #F3FAF7;
+  --cc__primary: #cfeac8;
+  --cc__background: #f3faf7;
   --cc__secondary: white;
   --cc__accent: #004e48;
   --cc__accent50: rgba(62, 142, 117, 0.04);
-  --cc__accent100: #FFFFFF;
+  --cc__accent100: #ffffff;
   --cc__accent200: rgba(62, 142, 117, 0.15);
   --cc__accent300: rgba(62, 142, 117, 0.24);
   --cc__accent400: rgba(62, 142, 117, 0.33);
   --cc__accent500: rgba(62, 142, 117, 0.46);
-  --cc__accent600: #004E48;
-  --cc__accent700: #254A40;
+  --cc__accent600: #004e48;
+  --cc__accent700: #254a40;
   --cc__accent800: rgba(62, 142, 117, 0.82);
-  --cc__accent900: #F3FAF7;
+  --cc__accent900: #f3faf7;
   --cc__text-color: #000;
 
   @media (prefers-color-scheme: dark) {
-    --cc__primary: #57639E;
+    --cc__primary: #57639e;
     --cc__background: hsl(230, 25%, 15%);
     --cc__secondary: #111827;
-    --cc__accent: #6274AE;
+    --cc__accent: #6274ae;
     --cc__accent50: rgba(98, 116, 174, 0.24);
     --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
     --cc__accent200: rgba(98, 116, 174, 0.35);
     --cc__accent300: rgba(98, 116, 174, 0.44);
     --cc__accent400: rgba(98, 116, 174, 0.53);
     --cc__accent500: rgba(98, 116, 174, 0.66);
-    --cc__accent600: #758ABC;
-    --cc__accent700: #6274AE;
+    --cc__accent600: #758abc;
+    --cc__accent700: #6274ae;
     --cc__accent800: rgba(98, 116, 174, 0.92);
-    --cc__accent900: #F3FAF7;
+    --cc__accent900: #f3faf7;
     --cc__text-color: #fff;
   }
 
@@ -264,6 +174,11 @@ accent900: text in avatar
       .cc-messages-wrapper__messages-list {
         height: calc(100% - 96px);
       }
+
+      /* 1.1.2 Wrapper for Messages Composer */
+      .cc-messagecomposer-wrapper {
+        padding: 0;
+      }
     }
   }
 
@@ -291,7 +206,7 @@ accent900: text in avatar
       display: flex;
       justify-content: center;
       align-items: center;
-      background: rgba(255,255,255,0.75);
+      background: rgba(255, 255, 255, 0.75);
       border-radius: 12px;
     }
   }