@bcc-code/vue-bcc-chat-ui 2.0.0 → 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": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageList.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted, onUnmounted, ref, watchEffect } from "vue";
+import {
+  nextTick,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watchEffect,
+} from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
 import { CometChatMessages } from "@cometchat/chat-uikit-vue";
 import { Group } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
-import { messageComposerConfiguration, messageListConfiguration } from "../chat/uiKit";
+import {
+  messageComposerConfiguration,
+  messageListConfiguration,
+} from "../chat/uiKit";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -18,23 +28,43 @@ const componentId = ref(
 const chatGroup = ref<Group>();
 
 onMounted(() => {
-  watchAndApplyStyle(
-    ".bcc-chat-message-list-wrapper",
-    [{
-      selector: '.cc__imageviewer__close-button',
+  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'
-    }]
-  );
-})
+      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);
@@ -46,29 +76,30 @@ onUnmounted(async () => {
 
 watchEffect(async () => {
   if (loggedIn.value && props.chatUid && chat.initialized.value) {
-    chatGroup.value = await chat.getGroup(props.chatUid) ?? undefined;
-    await chat.clearGroupChatCount(props.chatUid);  
+    chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
+    await chat.clearGroupChatCount(props.chatUid);
   } else {
     chatGroup.value = undefined;
   }
-})
-
+});
 </script>
 
 <template>
   <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"
-        />
+      <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 class="bcc-chat-message-list-offline"><span>Waiting for connection...</span></div>
   </div>
 </template>
 
@@ -79,7 +110,7 @@ body {
 
   @media (prefers-color-scheme: dark) {
     background: #000;
-    color: #fff;  
+    color: #fff;
   }
 }
 
@@ -101,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;
   }
 
@@ -143,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;
+      }
     }
   }
 
@@ -170,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;
     }
   }