@bcc-code/vue-bcc-chat-ui 6.5.0 → 7.0.1

package/src/components/BccChatSendButton.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { localize } from "@cometchat/uikit-resources";
-import { SendIcon } from "@cometchat/chat-uikit-vue";
-import { sendMediaMessage } from "../chat/captionedAttachment";
-import { ChatInstance } from "../chat/types";
-import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref } from "vue";
-import chat from "../chat";
-
-const sendButtonIconURL = SendIcon;
-const sendButtonStyle = {
-    height: "24px",
-    width: "24px",
-    border: "none",
-    borderRadius: "0",
-    buttonIconTint: "var(--cc__primary150, #3F4669)",
-    background: "transparent"
-}
-
-const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
-const vueInstance: any = getCurrentInstance();
-const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
-const msgComposerProps = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.props;
-
-function sendMessage() {
-    if (chat.onlineStatus.value === "offline") return;
-    if (!msgComposerData) return false;
-    if (!chatInstance?.value.captionedAttachment?.fileObject) return false;
-    if (!msgComposerProps?.group && !msgComposerProps?.user) return false;
-
-    const receiverId = msgComposerProps?.group?.getGuid() || msgComposerProps?.user?.getUid();
-    const receiverType = msgComposerProps?.group ? "group" : "user";
-    const fileObject = chatInstance.value.captionedAttachment.fileObject;
-    const caption = msgComposerData.messageText;
-    const dimensions = chatInstance.value.captionedAttachment.dimensions;
-
-    const sendMessageResult = sendMediaMessage(msgComposerProps, fileObject, receiverId, receiverType, "image", dimensions, caption);
-    if (sendMessageResult) {
-        msgComposerData.showSendButton = false;
-        // Clear text input
-        msgComposerData.messageText = "";
-        msgComposerData.textRef = "";
-        msgComposerData.inputRef?.emptyInputField();
-        return true;
-    }
-    return false;
-}
-
-function sendMessageOnEnter(textEnteredEvent: CustomEventInit) {
-    if (chat.onlineStatus.value === "offline") return;
-    if (!msgComposerData) return;
-    msgComposerData.messageText = textEnteredEvent.detail.value;
-    if (sendMessage()) {
-        msgComposerData.showMentionsCountWarning = false;
-        msgComposerData.showListForMentions = false;
-    }
-}
-
-// The following will send the message when **enter is pressed** in the input box and the input box **is not empty**.
-const originalSendMessageOnEnter = msgComposerData?.sendMessageOnEnter;
-onMounted(() => {
-    if (!msgComposerData) return;
-    msgComposerData.sendMessageOnEnter = sendMessageOnEnter;
-});
-onBeforeUnmount(() => {
-    msgComposerData.sendMessageOnEnter = originalSendMessageOnEnter;
-});
-
-if (chatInstance) {
-    // Here we add an additional onKeyDown event on the input field that sends our image when pressing Enter if the input field **is empty**.
-    // We need this in addition to hooking into the "cc-text-input-entered" event because that event isn't triggered if the input field is empty.
-    const ccTextInput = msgComposerData.inputRef.querySelector(".messageinput-input");
-    ccTextInput.addEventListener("keydown", function (event: KeyboardEvent) {
-        if (msgComposerData.messageText?.trim() == "" && event.keyCode === 13 && !event.shiftKey) sendMessage();
-    });
-}
-
-</script>
-
-<template>
-    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton"
-        :style="{ 'background': !msgComposerData || !msgComposerProps ? '#f00' : 'unset' }">
-        <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
-            :hoverText="localize('SEND_MESSAGE')" @click=sendMessage() />
-    </div>
-</template>
-
-<style scoped>
-.cc-messagecomposer-wrapper__sendbutton {
-    margin: 0 5px
-}
-</style>

package/src/components/BccCometChatFullScreenViewer.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="cc__imageviewer__full-screen-viewer">
-    <div class="cc__imageviewer__zoom-container" ref="zoomContainer">
-      <img class="cc__imageviewer__loading" :src="placeholderImage" v-if="!isImageLoaded" />
-      <img :src="proxyImage(url)" @load="imageLoaded" />
-    </div>
-  </div>
-  <div class="cc__imageviewer-option cc__imageviewer-option--close" @click="dispatchCloseClickEvent">
-    <CloseIcon class="w-6 h-6 text-white" />
-  </div>
-  <div class="cc__imageviewer-option cc__imageviewer-option--download" @click="openImage">
-    <DownloadIcon class="w-6 h-6 text-white" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { CloseIcon, DownloadIcon } from '@bcc-code/icons-vue';
-import { CometChatIcon } from '@cometchat/chat-uikit-vue';
-import createPanZoom from 'panzoom';
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { proxyImage } from '../chat/data';
-
-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 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-option {
-  position: fixed;
-  cursor: pointer;
-  z-index: 10001;
-  padding: 10px;
-}
-
-.cc__imageviewer-option--close {
-  top: 0;
-  right: 0;
-  margin-top: env(safe-area-inset-top);
-}
-
-.cc__imageviewer-option--download {
-  top: 0;
-  left: 0;
-  margin-top: env(safe-area-inset-top);
-}
-</style>

package/src/components/BccFileBubble.vue

@@ -1,137 +0,0 @@
-<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" />
-      </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;
-}
-.cc__file__icon i {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  background: var(--cc__accent);
-}
-</style>

package/src/components/BccImageBubble.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { MediaMessage } from '@cometchat/chat-sdk-javascript';
-import { ref } from 'vue';
-import BccCometChatFullScreenViewer from './BccCometChatFullScreenViewer.vue';
-
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: null
-  },
-  placeholderImage: {
-    type: String
-  },
-  message: {
-    type: MediaMessage
-  }
-})
-
-const imgDimensions = (props.message?.getMetadata() as any)?.dimensions || { width: 300, height: 150 };
-
-const imageLoaded = ref(false);
-const openFullscreenView = ref(false);
-const imageurlToOpen = ref("");
-
-async function openImageInFullScreen() {
-  imageurlToOpen.value = props.message?.getAttachments()[0]?.getUrl() || props.src;
-  openFullscreenView.value = true;
-}
-
-function closeImageInFullScreen() {
-  imageurlToOpen.value = "";
-  openFullscreenView.value = false;
-}
-</script>
-
-<template>
-  <div class="bcc-image_container">
-      <div class="bg-gradient-to-tr from-brand-200 to-brand-50 dark:from-brand-900 dark:to-brand-700"
-        :class="{ 'animate-pulse': !imageLoaded }"
-        :style="!imageLoaded ? `width: ${imgDimensions.width}px; height: ${imgDimensions.height}px` : ''"
-      >
-        <img @load="imageLoaded = true" :src="src" @click="openImageInFullScreen" />
-      </div>
-  </div>
-  <BccCometChatFullScreenViewer
-    v-if="openFullscreenView"
-    @CcCloseClicked="closeImageInFullScreen"
-    :placeholder-image="placeholderImage"
-    :url="imageurlToOpen"
-  />
-</template>
-
-<style scoped>
-.bcc-image_container {
-  max-height: 300px;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: 10px;
-  isolation: isolate;
-  min-height: 28px;
-  min-width: 84px;
-}
-.bcc-image_container img {
-  max-height: 500px;
-  max-width: 400px;
-  object-fit: contain;
-  object-position: center;
-  position: relative;
-}
-
-.bcc-image_container .placeholder::before {
-  content: "⌛";
-}
-</style>

package/src/components/BccReplyBox.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import {
-  CometChatMessageEvents,
-  CometChatTheme,
-  MessageStatus,
-} from "@cometchat/uikit-resources";
-import { CloseIcon } from "@cometchat/chat-uikit-vue";
-import {
-  getCurrentInstance,
-  ref,
-  inject,
-  Ref,
-  onBeforeUnmount,
-  onMounted,
-} from "vue";
-import { ChatInstance } from "../chat/types";
-import { ReplyPreviewStyle } from "../chat/replyStyle";
-import { BaseMessage } from "@cometchat/chat-sdk-javascript";
-import BccReplyPreview from "./BccReplyPreview.vue";
-
-const props = defineProps({
-  replyToMessage: { type: BaseMessage },
-  titlePrefix: { type: String },
-  closeButtonIconURL: { type: String, default: CloseIcon },
-  previewStyle: { type: Object, default: {} },
-});
-
-const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
-const vueInstance: any = getCurrentInstance();
-const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.setupState;
-
-const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
-const previewStyle = new ReplyPreviewStyle(props.previewStyle, theme.value);
-
-function closePreview(_event?: MouseEvent) {
-  if (chatInstance) {
-    chatInstance.value.replyToMessage = null;
-  }
-}
-
-const onMessageEditStart = CometChatMessageEvents.ccMessageEdited.subscribe(
-  ({ status }) => {
-    if (status === MessageStatus.inprogress) {
-      closePreview();
-    }
-  }
-);
-
-const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
-  ({ status }) => {
-    if (status === MessageStatus.inprogress) {
-      closePreview();
-    }
-  }
-);
-
-let originalGetAttachmentOptions: Function;
-onMounted(() => {
-  if (msgComposerData && chatInstance) {
-    msgComposerData.inputRef.querySelector(".messageinput-input").focus()
-    if (msgComposerData.messageToBeEdited) {
-      msgComposerData.showPreview = false; // This is only used for edit message preview
-      msgComposerData.messageToBeEdited = null;
-      msgComposerData.messageText = "";
-      msgComposerData.textRef = "";
-      msgComposerData.inputRef?.emptyInputField();
-    }
-    originalGetAttachmentOptions = msgComposerData.getAttachmentOptions;
-    msgComposerData.getAttachmentOptions = function() {
-      return originalGetAttachmentOptions().filter((option: any) => option.id === "captionedimage");
-    }
-  }
-});
-
-onBeforeUnmount(() => {
-  msgComposerData.getAttachmentOptions = originalGetAttachmentOptions;
-  onMessageEditStart.unsubscribe();
-  onMessageSend.unsubscribe();
-});
-
-const closeBtnIconStyle = () => {
-  return {
-    buttonIconTint: previewStyle?.closeButtonIconTint,
-    height: "14px",
-    width: "14px",
-    border: "none",
-    borderRadius: "0",
-    background: "transparent",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  };
-};
-
-const wrapperStyle = () => {
-  return {
-    background: previewStyle?.background,
-    border: previewStyle?.border,
-    height: previewStyle?.height,
-    width: previewStyle?.width,
-    borderRadius: previewStyle?.borderRadius,
-  };
-};
-</script>
-
-<template>
-  <div class="bcc__reply_box" :style="wrapperStyle()">
-    <BccReplyPreview 
-      titlePrefix="Reply to "
-      :replyToMessage="props.replyToMessage"
-      :previewStyle="previewStyle"
-    />
-    <div class="bcc__reply_preview__close" @click="closePreview">
-      <cometchat-button
-        :buttonStyle="closeBtnIconStyle()"
-        :iconURL="props.closeButtonIconURL"
-      ></cometchat-button>
-    </div>
-  </div>
-</template>
-
-<style>
-.cc-messagecomposer-wrapper__headerview {
-  position: static !important;
-}
-</style>
-<style scoped>
-.bcc__reply_box {
-  padding: 8px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 0;
-  min-height: 30px;
-}
-.bcc__reply_preview__close {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-}
-</style>

package/src/components/BccReplyPreview.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
-import { CometChatTheme, CometChatUIKitConstants } from "@cometchat/uikit-resources";
-import { inject, ref } from "vue";
-import chat from '../chat';
-import { getMessageTextPreview, getSenderDisplayName, proxyImage } from "../chat/data";
-import { ReplyPreviewStyle } from "../chat/replyStyle";
-
-const props = defineProps({
-  replyToMessage: { type: BaseMessage },
-  titlePrefix: { type: String, default: "" },
-  previewStyle: { type: Object, default: {} },
-});
-
-const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
-const previewStyle = new ReplyPreviewStyle(props.previewStyle, theme.value);
-
-const subtitleStyle = () => {
-  return {
-    font: previewStyle?.subtitleFont,
-    color: previewStyle?.subtitleColor,
-  };
-};
-
-const titleStyle = () => {
-  return {
-    font: previewStyle?.titleFont,
-    color: previewStyle?.titleColor,
-  };
-}
-
-const barStyle = () => {
-  return {
-    insetInlineStart: previewStyle?.barLeftPosition,
-    width: previewStyle?.barWidth,
-    background: previewStyle?.barBackground,
-    opacity: previewStyle?.barOpacity,
-  };
-};
-
-const previewWrapperStyle = () => {
-  return {
-    padding: previewStyle?.previewWrapperPadding,
-    opacity: previewStyle?.previewWrapperOpacity,
-  };
-};
-
-function getThumbnailURL() {
-  const msg = props.replyToMessage as MediaMessage;
-  const url = 
-    (msg?.getMetadata() as any)?.['@injected']?.extensions?.['thumbnail-generation']?.url_small || 
-    (msg?.getData() as any)?.url;
-  return proxyImage(url);
-}
-
-</script>
-
-<template>
-  <div class="bcc__reply_preview__content_wrapper" :style="previewWrapperStyle()">
-    <div class="bcc__reply_preview__content_bar" :style="barStyle()"></div>
-    <div v-if="props.replyToMessage?.getType() === CometChatUIKitConstants.MessageTypes.image" class="bcc__reply_preview__thumbnail">
-      <img :src="getThumbnailURL()" />
-    </div>
-    <div class="bcc__reply_preview__content">
-      <p class="bcc__reply_preview__title" :style="titleStyle()">
-        {{ props.titlePrefix + ( getSenderDisplayName(props.replyToMessage) || "" ) || "Reply to ..." }}
-      </p>
-      <p class="cc__preview__subtitle" v-html="chat.toMarkdownHtml(getMessageTextPreview(props?.replyToMessage), props.replyToMessage?.getMentionedUsers()) || '‎'" :style="subtitleStyle()"/>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.bcc__reply_preview__content_wrapper {
-  padding: 0 12px;
-  position: relative;
-  display: grid;
-  justify-content: start;
-}
-.bcc__reply_preview__content_bar {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-radius: 25px;
-}
-.bcc__reply_preview__content {
-  grid-column: 2;
-}
-.bcc__reply_preview__content > p {
-  margin: 0;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 8;
-  word-break: break-all;
-}
-.bcc__reply_preview__content > .bcc__reply_preview__title {
-  margin-bottom: 2px;
-}
-.bcc__reply_preview__thumbnail {
-  grid-column: 1;
-  width: 2rem;
-  height: 2rem;
-  align-self: center;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-right: 5px;
-}
-.bcc__reply_preview__thumbnail > img {
-  width: 100%;
-  height: 100%;
-}
-</style>