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

package/src/components/BccAttachmentBox.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { CloseIcon } from "@cometchat/chat-uikit-vue";
-import {
-  CometChatMessageEvents,
-  CometChatTheme,
-  MessageStatus,
-} from "@cometchat/uikit-resources";
-import {
-  getCurrentInstance,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  Ref,
-} from "vue";
-import { ChatInstance } from "../chat/types";
-import BccAttachmentPreview from "./BccAttachmentPreview.vue";
-
-const props = defineProps({
-  captionedAttachment: { type: Object },
-  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({})) });
-
-function closePreview(_event?: MouseEvent) {
-  if (chatInstance) {
-    chatInstance.value.captionedAttachment = null;
-  }
-}
-
-const onMessageEditStart = CometChatMessageEvents.ccMessageEdited.subscribe(
-  ({ status }) => {
-    if (status === MessageStatus.inprogress) {
-      if (chatInstance) chatInstance.value.replyToMessage = null;
-      closePreview();
-    }
-  }
-);
-
-const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
-  ({ status }) => {
-    if (status === MessageStatus.inprogress) {
-      closePreview();
-    }
-  }
-);
-
-onMounted(() => {
-  if (msgComposerData) {
-    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();
-    }
-  }
-});
-
-onBeforeUnmount(() => {
-  onMessageEditStart.unsubscribe();
-  onMessageSend.unsubscribe();
-});
-
-const closeBtnIconStyle = () => {
-  return {
-    buttonIconTint: theme.value.palette.getAccent500(),
-    height: "14px",
-    width: "14px",
-    border: "none",
-    borderRadius: "0",
-    background: "transparent",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  };
-};
-
-const wrapperStyle = () => {
-  return {
-    background: theme.value.palette.getBackground(),
-    border: `1px solid ${theme.value.palette.getAccent200()}`,
-    height: "100%",
-    width: "100%",
-    borderRadius: "12px",
-  };
-};
-</script>
-
-<template>
-  <div class="bcc__attachment_box" :style="wrapperStyle()">
-    <BccAttachmentPreview
-      :captionedAttachment="props.captionedAttachment"
-      :previewStyle="previewStyle"
-    />
-    <div class="bcc__attachment_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__attachment_box {
-  padding: 8px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 0;
-  min-height: 30px;
-}
-.bcc__attachment_preview__close {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-}
-</style>

package/src/components/BccAttachmentPreview.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { PlaceholderImage } from '@cometchat/chat-uikit-vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  captionedAttachment: { type: Object, default: {} },
-  previewStyle: { type: Object, default: {} },
-});
-
-const previewUrl = computed(() => {
-  if (!props.captionedAttachment?.fileObject)
-    return PlaceholderImage;
-
-  const blob = new Blob([props.captionedAttachment.fileObject]);
-  return URL.createObjectURL(blob);
-});
-
-function imgLoaded(event: Event) {
-  if (props.captionedAttachment) {
-    props.captionedAttachment.dimensions = {
-      width: (event.target as HTMLImageElement)?.naturalWidth,
-      height: (event.target as HTMLImageElement)?.naturalHeight
-    };
-  }
-}
-</script>
-
-<template>
-  <div class="bcc__attachment_preview__content_wrapper">
-    <div class="bcc__attachment_preview__content">
-      <img :src="previewUrl" @load="imgLoaded" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.bcc__attachment_preview__content_wrapper {
-  padding: 0 5px 0 20px;
-  position: relative;
-  width: 100%;
-}
-
-.bcc__attachment_preview__content {
-  width: 100%;
-  max-height: 350px;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.bcc__attachment_preview__content>img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-</style>

package/src/components/BccChatMessageBubble.vue

@@ -1,219 +0,0 @@
-<script setup lang="ts">
-import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript';
-import { CometChatTheme, fontHelper } from '@cometchat/uikit-resources';
-import { inject, ref } from 'vue';
-import chat from "../chat";
-import { offlineStore } from '../offline';
-import BccImageBubble from './BccImageBubble.vue';
-import BccReplyPreview from "./BccReplyPreview.vue";
-
-const props = defineProps({
-	id: {
-		type: String,
-		required: false,
-		default: ""
-	},
-	text: {
-		type: String,
-		required: true
-	},
-	metadata: {
-		type: Object
-	},
-	guid: {
-		type: String,
-		default: ""
-	},
-	mentionedUsers: {
-    type: Array<User>
-  },
-	message: {
-    type: MediaMessage,
-    default: null
-  },
-	placeholderImage: {
-    type: String,
-    default: null
-  },
-	src: {
-    type: String,
-    default: null
-  }
-})
-
-let parentMsgRef = ref<BaseMessage>();
-if (props.metadata?.replyToMessageId) {
-	let guidString = props.guid?.toString()
-	let group = offlineStore.getGroup(guidString)
-
-	//for read only replies
-	if (group != null && group?.hasJoined == undefined) {
-		let message = offlineStore.getMessage(props.metadata.replyToMessageId).data
-		
-		if (message !== undefined) {
-			if (message.type == CometChat.MESSAGE_TYPE.TEXT) {
-				let text = new CometChat.TextMessage(message.receiver, message.data.text, message.receiverType)
-				text.setData(message.data)
-				parentMsgRef.value = text
-			} else {
-				let media = new CometChat.MediaMessage(message.receiver, {}, message.type, message.receiverType)
-				media.setData(message.data)
-				parentMsgRef.value = media
-			}
-		} else {
-			parentMsgRef.value = new CometChat.TextMessage("","Cannot load message","")
-		}
-	} else {
-		CometChat.getMessageDetails(props.metadata.replyToMessageId).then((msg: BaseMessage) => parentMsgRef.value = msg).catch(() => parentMsgRef.value = new CometChat.TextMessage("","Unknown message",""));
-	}
-};
-
-const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
-const replyPreviewStyle = {
-	previewWrapperPadding: "6px 12px 6px 9px",
-	barLeftPosition: "0px",
-	titleColor: theme.value.palette.getAccent800(),
-	subtitleColor: theme.value.palette.getAccent800(),
-	titleFont: fontHelper(theme.value.typography.title2),
-};
-</script>
-
-<template>
-	<div class="bcc-message-wrapper" :class="{'has-text': text, 'has-image': src != null}" >
-		<div v-if="metadata?.replyToMessageId" class="bcc-chat-msg-bubble">
-			<div class="bcc-chat-msg-bubble--reply">
-				<BccReplyPreview
-					:replyToMessage="parentMsgRef"
-					:previewStyle="replyPreviewStyle"
-				/>
-			</div>
-		</div>
-		<div v-if="src != null" class="bcc-chat-img-msg-bubble">
-			<BccImageBubble
-				:message="message"
-				:placeholderImage="placeholderImage" 
-				:src="src"
-			/>
-		</div>
-		<div v-if="text && metadata && metadata.translated_message" v-html="chat.toMarkdownHtml(metadata.translated_message, mentionedUsers)"
-			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
-		<div v-if="text" v-html="chat.toMarkdownHtml(text, mentionedUsers)" class="bcc-chat-msg-bubble" :id="id"
-			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
-	</div>
-</template>
-
-<style lang="scss">
-.bcc-chat-img-msg-bubble {
-	display: block;
-	width: max-content;
-	max-width: 100%;
-	margin: 0 auto;
-	border-radius: 8px;
-	padding-bottom: 8px;
-	position: relative;
-
-	&:last-child {
-		padding-bottom: 0;
-	}
-}
-.bcc-chat-msg-bubble {
-	padding: 0 12px 8px;
-	width: auto;
-	max-width: 500px;
-	line-height: 1.2;
-	font: 400 14px Archivo, sans-serif, Inter;
-	color: var(--cc__text-color);
-
-	&:first-child {
-		padding-top: 8px;
-	}
-
-	p {
-		color: var(--cc__text-color);
-		line-height: 1.2;
-		word-break: break-word;
-		text-align: left;
-		white-space: normal;
-		margin: 8px 0;
-	}
-
-	p:first-child {
-		margin-top: 0;
-	}
-
-	p:last-child {
-		margin-bottom: 0;
-	}
-
-	h1 {
-		font-size: 1.6em;
-		font-weight: 800;
-	}
-
-	h2 {
-		font-size: 1.4em;
-		font-weight: 700;
-	}
-
-	h3 {
-		font-size: 1.2em;
-		font-weight: 600;
-	}
-
-	h4 {
-		font-size: 1em;
-		font-weight: 500;
-	}
-
-	a {
-		color: var(--cc__link-color);
-		text-decoration: underline;
-		font-weight: 500;
-	}
-
-	ul {
-		padding-left: 16px;
-		list-style: disc;
-		margin: 8px 0;
-	}
-
-	ol {
-		padding-left: 16px;
-		list-style: decimal;
-		margin: 8px 0;
-	}
-
-	&--translated {
-		border-top: 1px solid;
-		opacity: 0.8;
-
-		&:before {
-			content: 'original: ';
-			opacity: 0.8;
-			margin-bottom: 8px;
-			font-size: 12px;
-			display: block;
-		}
-	}
-
-	&--reply {
-		position: relative;
-		z-index: 0;
-		margin-top: 3px;
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	&--reply::before {
-		content: "";
-		position: absolute;
-		top: 0; 
-		left: 0;
-		width: 100%; 
-		height: 100%;  
-		opacity: .5; 
-		z-index: -1;
-		background-color: var(--cc__background);
-	}
-}
-</style>