@bcc-code/vue-bcc-chat-ui 3.7.2 → 3.8.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.7.2",
+  "version": "3.8.0",
   "type": "module",
   "private": false,
   "files": [
@@ -34,10 +34,10 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/markdown-it": "^13.0.8",
-    "@types/node": "^20.12.10",
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@types/node": "^20.12.12",
+    "@vitejs/plugin-vue": "^5.0.4",
     "path": "^0.12.7",
-    "sass": "^1.77.0",
+    "sass": "^1.77.1",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1",
@@ -45,12 +45,13 @@
   },
   "dependencies": {
     "@cometchat/chat-sdk-javascript": "4.0.5",
-    "@cometchat/chat-uikit-vue": "4.3.6",
+    "@cometchat/chat-uikit-vue": "4.3.7",
     "@cometchat/uikit-resources": "4.3.7",
-    "@cometchat/uikit-shared": "4.3.7",
-    "dompurify": "^3.1.2",
+    "@cometchat/uikit-shared": "4.3.8",
+    "dompurify": "^3.1.3",
     "jwt-decode": "^4.0.0",
-    "markdown-it": "^14.1.0"
+    "markdown-it": "^14.1.0",
+    "panzoom": "^9.4.3"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageList.vue

@@ -79,31 +79,11 @@ onBeforeMount(() => {
 
 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",
-      style: { height: "auto" },
-      shadowDomSelector: "link-preview",
-    },
-    {
-      selector: ".cc__linkpreview-title",
-      style: { color: "var(--cc__text-color)" },
-      shadowDomSelector: "link-preview",
-    },
-    {
-      selector: ".cc__linkpreview-favicon",
-      style: { 'flex-shrink': '0' },
-      shadowDomSelector: "link-preview",
-    },
     {
       selector: ".cc__preview__subtitle",
       style: { 
@@ -114,20 +94,6 @@ onMounted(() => {
         "word-break": "break-all"
       },
       shadowDomSelector: "cometchat-preview",
-    },
-    {
-      selector: ".cc__file__url",
-      style: { 
-        "color": "var(--cc__text-color)"
-      },
-      shadowDomSelector: "cometchat-file-bubble",
-    },
-    {
-      selector: ".cc__file__subtitle",
-      style: { 
-        "color": "var(--cc__accent)"
-      },
-      shadowDomSelector: "cometchat-file-bubble",
     }
   ]);
 });

package/src/components/BccCometChatFullScreenViewer.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="cc__imageviewer__full-screen-viewer">
+    <div class="cc__imageviewer__zoom-container" ref="zoomContainer">
+      <img class="cc__imageviewer__loading" :src="props.placeholderImage ?? placeholderIcon" v-if="!isImageLoaded"/>
+      <img :src="props.URL" @load="imageLoaded"/>
+    </div>
+  </div>
+  <div class="cc__imageviewer__button cc__imageviewer__close-button" @click="dispatchCloseClickEvent">
+    <cometchat-icon :URL="Close2xIcon" :iconStyle="iconStyle"></cometchat-icon>
+  </div>
+  <!-- <div class="cc__imageviewer__button cc__imageviewer__download-button" @click="openImage">
+    <cometchat-icon :URL="dowloadIcon" :iconStyle="iconStyle"></cometchat-icon>
+  </div> -->
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { Close2xIcon, CometChatIcon } from '@cometchat/chat-uikit-vue';
+import createPanZoom from 'panzoom';
+
+if (!window.customElements.get('cometchat-icon')) {
+  window.customElements.define('cometchat-icon', CometChatIcon);
+}
+
+const props = defineProps({
+  URL: {
+    type: String,
+    required: true
+  },
+  placeholderImage: {
+    type: String
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'cc-close-clicked'): void;
+}>();
+
+const dispatchCloseClickEvent = (event: Event) => {
+  event?.stopPropagation();
+  emit('cc-close-clicked');
+};
+
+const placeholderIcon = "data:image/png;base64,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";
+// const dowloadIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PGc+PHBhdGggZD0nTTE0LjI5MyAxMy4yOTMgMTMgMTQuNTg2VjdhMSAxIDAgMCAwLTIgMHY3LjU4NmwtMS4yOTMtMS4yOTNhMSAxIDAgMCAwLTEuNDE0IDEuNDE0bDMgM2ExIDEgMCAwIDAgMS40MTQgMGwzLTNhMSAxIDAgMCAwLTEuNDE0LTEuNDE0eicgc3R5bGU9J2ZpbGw6IzFjMWIxZScvPjxwYXRoIGQ9J00xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwLjAxMSAxMC4wMTEgMCAwIDAgMTIgMnptMCAxOGE4IDggMCAxIDEgOC04IDguMDA5IDguMDA5IDAgMCAxLTggOHonIHN0eWxlPSdmaWxsOiMxYzFiMWUnLz48L2c+PC9zdmc+"
+
+const iconStyle = {
+  height: '24px',
+  width: '24px',
+  iconTint: "white",
+};
+
+// const openImage = () => {
+//   window.open(props.URL, '_blank');
+// };
+
+const isImageLoaded = ref(false);
+const imageLoaded = () => {
+  isImageLoaded.value = true;
+}
+
+const zoomContainer = ref();
+let panZoomInstance: any;
+onMounted(() => {
+  panZoomInstance = createPanZoom(zoomContainer.value, {
+    bounds: true,
+    boundsPadding: 1,
+    maxZoom: 10,
+    minZoom: 1,
+  });
+});
+
+onBeforeUnmount(() => {
+  panZoomInstance.dispose();
+})
+</script>
+
+<style scoped>
+.cc__imageviewer__full-screen-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 10000;
+}
+
+.cc__imageviewer__zoom-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.cc__imageviewer__loading {
+  position: absolute;
+  z-index: -1;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cc__imageviewer__button {
+  position: fixed;
+  right: 0;
+  cursor: pointer;
+  z-index: 10001;
+  padding: 10px;
+}
+
+.cc__imageviewer__close-button {
+  top: 0;
+  margin-top: env(safe-area-inset-top);
+}
+
+.cc__imageviewer__download-button {
+  top: 49px;
+}
+</style>

package/src/components/BccFileBubble.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    :style="messageKitBlockStyle"
+    class="bcc-chat-msg-bubble cc__file__bubble"
+  >
+    <div class="message__block">
+      <div class="cc__file__title">
+        <a
+          :href="fileURL"
+          target="_blank"
+          :style="messageTitleStyle"
+          class="cc__file__url"
+          >{{ title }}</a
+        >
+      </div>
+      <div :style="messageSubTitleStyle" class="cc__file__subtitle">
+        {{ subtitle }}
+      </div>
+    </div>
+    <div class="cc__file__icon">
+      <a :href="fileURL" target="_blank"
+        ><i :style="messageFileIconStyle"></i
+      ></a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+  fileURL: {
+    type: String,
+    default: "",
+  },
+  downloadIconURL: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+  fileStyle: {
+    type: Object,
+    default: () => ({
+      width: "fit-content",
+      height: "fit-content",
+      border: "none",
+      background: "transparent",
+      borderRadius: "none",
+      titleFont: "600 14px Archivo,Inter,sans-serif",
+      titleColor: "rgb(20, 20, 20)",
+      subtitleFont: "400 13px Archivo,Inter,sans-serif",
+      subtitleColor: "rgba(20, 20, 20, 0.58)",
+    }),
+  },
+});
+
+const downloadIcon =
+  "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3EIcons%2F24%2FDownload%3C%2Ftitle%3E%20%20%20%20%3Cg%20id%3D%22Icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Icons%2F24%2FDownload%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%281.000000%2C%201.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolyline%20id%3D%22Path%22%20points%3D%227.33333333%2013.2%2011%2016.8666667%2014.6666667%2013.2%22%3E%3C%2Fpolyline%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%2211%22%20y1%3D%225.86666667%22%20x2%3D%2211%22%20y2%3D%2216.8666667%22%20id%3D%22Path%22%3E%3C%2Fline%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C11%20C0%2C17.0751322%204.92486775%2C22%2011%2C22%20C17.0751322%2C22%2022%2C17.0751322%2022%2C11%20C22%2C4.92486775%2017.0751322%2C0%2011%2C0%20C4.92486775%2C0%200%2C4.92486775%200%2C11%20Z%22%20id%3D%22Path%22%3E%3C%2Fpath%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+const downloadIconURL = props.downloadIconURL ?? downloadIcon;
+
+const messageKitBlockStyle = computed(() => ({
+  width: props.fileStyle.width,
+  height: props.fileStyle.height,
+  border: props.fileStyle.border,
+  borderRadius: props.fileStyle.borderRadius,
+  background: props.fileStyle.background,
+}));
+
+const messageTitleStyle = computed(() => ({
+  font: props.fileStyle.titleFont,
+  color: props.fileStyle.titleColor,
+}));
+
+const messageSubTitleStyle = computed(() => ({
+  font: props.fileStyle.subtitleFont,
+  color: props.fileStyle.subtitleColor,
+}));
+
+const messageFileIconStyle = computed(() => {
+  let isDisable = !props.fileURL;
+  return {
+    WebkitMask: `url(${downloadIconURL})`,
+    WebkitMaskSize: "contain",
+    opacity: isDisable ? 0.5 : 1,
+  };
+});
+</script>
+
+<style scoped>
+.cc__file__bubble {
+  background: transparent;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+  gap: 8px;
+}
+.message__block {
+  word-wrap: break-word;
+  text-align: left;
+  overflow: hidden;
+}
+.cc__file__title {
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.cc__file__url {
+  all: unset;
+  color: var(--cc__text-color);
+  cursor: pointer;
+}
+.cc__file__subtitle {
+  margin-top: 4px;
+}
+.cc__file__icon {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  width: fit-content;
+  line-height: 36px;
+}
+i {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  background: var(--cc__accent);
+}
+</style>

package/src/components/BccImageBubble.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import BccCometChatFullScreenViewer from './BccCometChatFullScreenViewer.vue';
+import { MediaMessage } from '@cometchat/chat-sdk-javascript';
+
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: null
+  },
+  placeholderImage: {
+    type: String
+  },
+  imageStyle: {
+    type: Object
+  },
+  message: {
+    type: MediaMessage
+  }
+})
+
+const imageStyle = {
+  height: "auto",
+  maxHeight: "500px",
+  maxWidth: "400px",
+  borderRadius: "8px",
+  ...props.imageStyle
+};
+
+const openFullscreenView = ref(false);
+const imageurlToOpen = ref("");
+
+async function openImageInFullScreen(thisObj: any) {
+  imageurlToOpen.value = props.message?.getAttachments()[0]?.getUrl() ?? thisObj.detail.url;
+  openFullscreenView.value = true;
+}
+
+function closeImageInFullScreen() {
+  imageurlToOpen.value = "";
+  openFullscreenView.value = false;
+}
+
+</script>
+
+<template>
+  <cometchat-image-bubble
+    :src="props.src"
+    :placeholderImage="props.placeholderImage"
+    :imageStyle="imageStyle"
+    :onCcImageClicked="openImageInFullScreen"
+  />
+  <BccCometChatFullScreenViewer v-if="openFullscreenView"
+    :onCcCloseClicked="closeImageInFullScreen"
+    :URL="imageurlToOpen"
+  />
+</template>
+
+<style scoped>
+
+</style>