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

package/package.json

@@ -1,72 +1,63 @@
 {
   "name": "@bcc-code/vue-bcc-chat-ui",
-  "author": "bcc-code",
-  "license": "Apache-2.0",
-  "version": "6.5.0",
-  "type": "module",
   "private": false,
-  "files": [
-    "dist",
-    "src/components"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bcc-code/bcc-chat.git"
-  },
+  "version": "7.0.2",
+  "type": "module",
   "module": "./dist/vue-bcc-chat-ui.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
-      "import": "./dist/vue-bcc-chat-ui.js",
-      "require": "./dist/vue-bcc-chat-ui.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-bcc-chat-ui.js"
     },
-    "./style.css": {
-      "import": "./dist/vue-bcc-chat-ui.css",
-      "require": "./dist/vue-bcc-chat-ui.css"
-    }
+    "./style.css": "./dist/style.css"
   },
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@auth0/auth0-spa-js": "^2.17.0",
+    "@auth0/auth0-vue": "^2.5.0",
+    "@bcc-code/component-library-vue": "^0.8.8",
+    "@bcc-code/design-tokens": "^5.1.49",
+    "@capacitor/app": "^5.0.8",
+    "@capacitor/browser": "^5.2.1",
+    "@capacitor/core": "^5.7.8",
+    "@cometchat/chat-sdk-javascript": "4.1.8",
+    "@primeuix/themes": "^2.0.3",
+    "dompurify": "^3.3.3",
+    "markdown-it": "^14.1.1",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.5.4",
+    "vue": "^3.5.29"
+  },
   "peerDependencies": {
-    "@bcc-code/component-library-vue": "*",
-    "vue": "^3.0.0"
+    "vue": "^3.5.29"
   },
   "devDependencies": {
-    "@bcc-code/component-library-vue": "latest",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
-    "@types/dompurify": "^3.2.0",
+    "@playwright/test": "^1.53.2",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.17.23",
     "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "path": "^0.12.7",
-    "postcss": "^8.5.3",
-    "sass": "^1.85.1",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.3",
-    "vue": "^3.5.13"
-  },
-  "dependencies": {
-    "@cometchat/chat-sdk-javascript": "4.1.8",
-    "@cometchat/chat-uikit-vue": "4.3.32",
-    "@cometchat/uikit-elements": "4.3.23",
-    "@cometchat/uikit-resources": "4.3.24",
-    "@cometchat/uikit-shared": "4.3.30",
-    "dompurify": "^3.2.4",
-    "fuse.js": "^7.1.0",
-    "markdown-it": "^14.1.0",
-    "panzoom": "^9.4.3"
+    "jsdom": "^29.0.1",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^1.6.1",
+    "vue-tsc": "^1.8.27"
   },
-  "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a",
   "scripts": {
-    "dev": "vite",
-    "build": "npm run hotfix && vite build",
-    "preview": "vite preview",
-    "hotfix": "node applyHotfix.mjs"
+    "dev": "vite --port 5174",
+    "build": "vite build --mode library && vite build --mode demo",
+    "build:lib": "vite build --mode library",
+    "build:demo": "vite build --mode demo",
+    "preview": "vite preview --port 5174",
+    "test:unit": "vitest run",
+    "test:ui": "playwright test",
+    "test:ui:update": "playwright test --update-snapshots"
   }
 }

package/README.md

@@ -1,89 +0,0 @@
-# BCC Chat UI
-
-
-## Installation
-
-### Vue Components
-
-1. Add package to project
-```bash
-# npm
-npm install @bcc-code/vue-bcc-chat-ui
-
-```
-2. Register component in the Vue App
-```ts
-import chat from "@bcc-code/vue-bcc-chat-ui";
-
-const app = createApp(App);
-app.use(chat, { environment: "prod", themeMode: "light" });
-
-await chat.login("access-token")
-```
-
-3. Use component in Vue
-```ts
-<script lang="ts" setup>
-import { BccChatMessageList } from '@bcc-code/vue-bcc-chat-ui';
-
-const authToken = ref('....');
-const chatUid = ref('my-chat-id');
-
-</script>
-
-<template>
-   <div>
-      <BccChatMessageList :chatUid="chatUid" />
-   </div>
-</template>
-
-```
-
-
-## Styling
-
-The component can by styled with the folowing styles
-
-```css
-.bcc-chat-message-list {
-  /* 1. Wrapper for Messages component */
-  .cc-messages-wrapper {
-
-    /* 1.1 Messages component */
-    .cc-messages-wrapper__messages {
-     
-      /* 1.1.1 Wrapper for Messages List */
-      .cc-messages-wrapper__messages-list {
-
-        /* 1.1.1.1 Messages List header view */
-        .cc__messagelist__headerview {
-        }
-        
-        /* 1.1.1.2 Messages List messages */
-        .cc-messagelist {
-            .cc-list__wrapper {
-              .cc-list__header {
-              }
-              .cc-list__list {
-              }
-            }
-        }
-
-        /* 1.1.1.3 Message List footer */
-        .cc__messagelist__footerview {
-        }
-      }
-
-      /* 1.1.2 Wrapper for Composer */
-      .cc-messages-wrapper__composer {
-      }
-
-      /* 1.1.3 Wrapper for Live Reaction */
-      .cc__messages__livereaction {
-      }
-
-    }
-
-  }
-}
-```

package/dist/chat/bccuiExtension.d.ts

@@ -1,7 +0,0 @@
-import { ExtensionsDataSource } from '@cometchat/chat-uikit-vue';
-export declare class BccUiExtension extends ExtensionsDataSource {
-    constructor();
-    enable(): void;
-    addExtension(): void;
-    getExtensionId(): string;
-}

package/dist/chat/captionedAttachment.d.ts

@@ -1,7 +0,0 @@
-import { MessageComposerConfiguration } from '@cometchat/uikit-shared';
-export declare function sendMediaMessage(msgComposerConfig: MessageComposerConfiguration & {
-    parentMessageId: number;
-}, fileObject: File, receiverId: string, receiverType: string, messageType: string, dimensions?: {
-    width: number;
-    height: number;
-}, caption?: string): boolean;

package/dist/chat/captionedAttachmentExtension.d.ts

@@ -1,7 +0,0 @@
-import { ExtensionsDataSource } from '@cometchat/chat-uikit-vue';
-export declare class CaptionedAttachmentExtension extends ExtensionsDataSource {
-    constructor();
-    enable(): void;
-    addExtension(): void;
-    getExtensionId(): string;
-}

package/dist/chat/cometChatPatches.d.ts

@@ -1,3 +0,0 @@
-import { CometChatMessages } from '@cometchat/chat-uikit-vue';
-declare const patchedCometChatMessages: typeof CometChatMessages;
-export { patchedCometChatMessages as CometChatMessages };

package/dist/chat/connection.d.ts

@@ -1,14 +0,0 @@
-export declare const connected: import('vue').ComputedRef<boolean>;
-export declare const connecting: import('vue').ComputedRef<boolean>;
-export declare function connect(id?: string): Promise<void>;
-export declare function disconnectAll(): Promise<void>;
-export declare function disconnect(id?: string): Promise<void>;
-export declare const setAccessToken: (token: string) => Promise<void>;
-declare const _default: {
-    setAccessToken: (token: string) => Promise<void>;
-    connect: typeof connect;
-    disconnect: typeof disconnect;
-    connected: import('vue').ComputedRef<boolean>;
-    connecting: import('vue').ComputedRef<boolean>;
-};
-export default _default;

package/dist/chat/logger.d.ts

@@ -1,12 +0,0 @@
-import { LogEntry } from './types';
-declare class Logger {
-    #private;
-    constructor();
-    debug(msg: string, metadata?: Record<string, any>): void;
-    info(msg: string, metadata?: Record<string, any>): void;
-    warn(msg: string, metadata?: Record<string, any>): void;
-    error(msg: string, metadata?: Record<string, any>): void;
-    setCallback(callback: (entry: LogEntry) => void): void;
-}
-declare const logger: Logger;
-export default logger;

package/dist/chat/login.d.ts

@@ -1,14 +0,0 @@
-interface StoredToken {
-    sub: string;
-    token: string;
-}
-export declare const loggedIn: import('vue').Ref<boolean, boolean>;
-export declare function login(accessToken?: string): Promise<void>;
-export declare function logout(): Promise<void>;
-export declare function retrieveCcToken(): StoredToken | null;
-declare const _default: {
-    loggedIn: import('vue').Ref<boolean, boolean>;
-    login: typeof login;
-    logout: typeof logout;
-};
-export default _default;

package/dist/chat/message.d.ts

@@ -1,15 +0,0 @@
-export declare class Message {
-    chatUid?: string;
-    type?: MessageType;
-    text?: string;
-    mediaUrl?: string;
-    metadata?: MessageMetadata;
-}
-export declare enum MessageType {
-    MessageTypeText = "Text",
-    MessageTypeMedia = "Media"
-}
-export declare class MessageMetadata {
-    scheduleDate?: string;
-    file?: File;
-}

package/dist/chat/replyExtension.d.ts

@@ -1,26 +0,0 @@
-import { ExtensionsDataSource, OptionsStyle } from '@cometchat/chat-uikit-vue';
-import { ReplyPreviewStyle } from './replyStyle';
-export declare const bccReplyOptionId = "bccreply";
-declare class InlineReplyExtensionConfiguration {
-    private style;
-    private optionIconURL;
-    private optionStyle;
-    constructor(configuration: {
-        style?: ReplyPreviewStyle;
-        optionIconURL?: string;
-        optionStyle?: OptionsStyle;
-    });
-    getReplyPreviewStyle(): ReplyPreviewStyle | undefined;
-    getOptionIconURL(): string | undefined;
-    getOptionStyle(): OptionsStyle | undefined;
-}
-export declare class InlineReplyExtension extends ExtensionsDataSource {
-    configuration: InlineReplyExtensionConfiguration;
-    constructor({ configuration }?: {
-        configuration: InlineReplyExtensionConfiguration;
-    });
-    enable(): void;
-    addExtension(): void;
-    getExtensionId(): string;
-}
-export {};

package/dist/chat/replyStyle.d.ts

@@ -1,30 +0,0 @@
-import { CometChatTheme } from '@cometchat/uikit-resources';
-import { BaseStyle } from '@cometchat/uikit-shared';
-/**
- * ReplyPreviewStyle
- *
- * @property {string} height - The height of the component.
- * @property {string} width - The width of the component.
- * @property {string} border - The border of the component.
- * @property {string} borderRadius - The border radius of the component.
- * @property {string} background - The background color of the component.
- * @property {string} titleFont - The font of the title text.
- * @property {string} titleColor - The color of the title text.
- * @property {string} subtitleFont - The font of the subtitle text.
- * @property {string} subtitleColor - The color of the subtitle text.
- * @property {string} closeButtonIconTint - The color of the close button.
- */
-export declare class ReplyPreviewStyle extends BaseStyle {
-    titleFont: string;
-    titleColor?: string;
-    subtitleFont: string;
-    subtitleColor?: string;
-    closeButtonIconTint?: string;
-    barLeftPosition: string;
-    barWidth: string;
-    barBackground?: string;
-    barOpacity: string;
-    previewWrapperPadding?: string;
-    previewWrapperOpacity?: string;
-    constructor(props: Partial<ReplyPreviewStyle>, theme: CometChatTheme);
-}

package/dist/chat/rescheduleExtension.d.ts

@@ -1,22 +0,0 @@
-import { ExtensionsDataSource, OptionsStyle } from '@cometchat/chat-uikit-vue';
-export declare const rescheduleOptionId = "reschedule";
-declare class RescheduleExtensionConfiguration {
-    private optionIconURL;
-    private optionStyle;
-    constructor(configuration: {
-        optionIconURL?: string;
-        optionStyle?: OptionsStyle;
-    });
-    getOptionIconURL(): string | undefined;
-    getOptionStyle(): OptionsStyle | undefined;
-}
-export declare class RescheduleExtension extends ExtensionsDataSource {
-    configuration: RescheduleExtensionConfiguration;
-    constructor({ configuration }?: {
-        configuration: RescheduleExtensionConfiguration;
-    });
-    enable(): void;
-    addExtension(): void;
-    getExtensionId(): string;
-}
-export {};

package/dist/chat/scheduledMessage.d.ts

@@ -1,4 +0,0 @@
-import { Ref } from 'vue';
-import { ChatInstance } from './types';
-export declare function rescheduleMessage(scheduleDate: string, originalChatUid: string, muid: string, messageId: number): Promise<boolean>;
-export declare function sendScheduledMessage(scheduleDate: string, originalChatUid: string, chatInstance: Ref<ChatInstance>): Promise<boolean>;

package/dist/chat/styleFix.d.ts

@@ -1,14 +0,0 @@
-/**
- *
- * @param targetSelector
- * @param apply: Array with objects containing the following properties:
- *  - selector Which elements to find and apply the style to
- *  - style The css styles to apply
- *  - shadowDomSelector (optional) If the elements are in a shadow dom, you can specify the selector to find the shadow dom (e.g. 'my-element'
- * @returns
- */
-export declare function watchAndApplyStyle(targetSelector: string, apply: Array<{
-    selector: string;
-    style: Record<string, string>;
-    shadowDomSelector?: string;
-}>): MutationObserver | undefined;

package/dist/chat/translations.d.ts

@@ -1,3 +0,0 @@
-import { Language } from './types';
-export declare function initializeLocalization(setCurrentLanguage?: string): void;
-export declare const setLanguage: (lang: Language) => void;

package/dist/chat/uiKit.d.ts

@@ -1,10 +0,0 @@
-import { Group } from '@cometchat/chat-sdk-javascript';
-import { MessageComposerConfiguration, MessageListConfiguration, ThreadedMessagesConfiguration } from '@cometchat/uikit-shared';
-import { Ref } from 'vue';
-import { ChatInstance } from './types';
-export declare function setupUiKit(): Promise<void>;
-export declare function getMessageComposerConfiguration(chatInstance?: Ref<ChatInstance>): Ref<MessageComposerConfiguration>;
-export declare function getScheduledMessagesComposerConfiguration(originalChatUid: string, chatInstance?: Ref<ChatInstance>): Ref<MessageComposerConfiguration>;
-export declare function getMessageListConfiguration(hideDeletedMessages: boolean, chatInstance?: Ref<ChatInstance>, group?: Ref<Group | undefined>): import('vue').ComputedRef<MessageListConfiguration>;
-export declare function getScheduledMessagesListConfiguration(originalChatUid: string, chatInstance?: Ref<ChatInstance>, group?: Ref<Group | undefined>): Ref<MessageListConfiguration>;
-export declare function getThreadedMessagesConfiguration(chatGroup?: Ref<Group | undefined>): ThreadedMessagesConfiguration;

package/dist/component-overrides/BccBubbleWrapper.vue.d.ts

@@ -1,156 +0,0 @@
-import { CometChatContextMenu } from '@cometchat/chat-uikit-vue';
-import { MessageBubbleAlignment } from '@cometchat/uikit-resources';
-declare class VueComponentOrHTML {
-    html?: string;
-    componentName?: string;
-    props?: object;
-    slots?: object;
-    listeners?: any;
-}
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    messageBubbleStyle: {
-        type: ObjectConstructor;
-        default: () => {
-            width: string;
-            height: string;
-            background: string;
-            borderRadius: string;
-            border: string;
-        };
-    };
-    options: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    alignment: {
-        type: NumberConstructor;
-        default: () => MessageBubbleAlignment;
-    };
-    id: {
-        type: null;
-        default: undefined;
-    };
-    moreIconURL: {
-        type: StringConstructor;
-        default: string;
-    };
-    topMenuSize: {
-        type: NumberConstructor;
-        default: number;
-    };
-    leadingView: {
-        type: typeof VueComponentOrHTML;
-    };
-    contentView: {
-        type: typeof VueComponentOrHTML;
-    };
-    bottomView: {
-        type: typeof VueComponentOrHTML;
-    };
-    headerView: {
-        type: typeof VueComponentOrHTML;
-    };
-    footerView: {
-        type: typeof VueComponentOrHTML;
-    };
-    replyView: {
-        type: typeof VueComponentOrHTML;
-    };
-    threadView: {
-        type: {
-            (arrayLength: number): VueComponentOrHTML[];
-            (...items: VueComponentOrHTML[]): VueComponentOrHTML[];
-            new (arrayLength: number): VueComponentOrHTML[];
-            new (...items: VueComponentOrHTML[]): VueComponentOrHTML[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-    };
-    statusInfoView: {
-        type: typeof VueComponentOrHTML;
-    };
-}>, any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    messageBubbleStyle: {
-        type: ObjectConstructor;
-        default: () => {
-            width: string;
-            height: string;
-            background: string;
-            borderRadius: string;
-            border: string;
-        };
-    };
-    options: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    alignment: {
-        type: NumberConstructor;
-        default: () => MessageBubbleAlignment;
-    };
-    id: {
-        type: null;
-        default: undefined;
-    };
-    moreIconURL: {
-        type: StringConstructor;
-        default: string;
-    };
-    topMenuSize: {
-        type: NumberConstructor;
-        default: number;
-    };
-    leadingView: {
-        type: typeof VueComponentOrHTML;
-    };
-    contentView: {
-        type: typeof VueComponentOrHTML;
-    };
-    bottomView: {
-        type: typeof VueComponentOrHTML;
-    };
-    headerView: {
-        type: typeof VueComponentOrHTML;
-    };
-    footerView: {
-        type: typeof VueComponentOrHTML;
-    };
-    replyView: {
-        type: typeof VueComponentOrHTML;
-    };
-    threadView: {
-        type: {
-            (arrayLength: number): VueComponentOrHTML[];
-            (...items: VueComponentOrHTML[]): VueComponentOrHTML[];
-            new (arrayLength: number): VueComponentOrHTML[];
-            new (...items: VueComponentOrHTML[]): VueComponentOrHTML[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-    };
-    statusInfoView: {
-        type: typeof VueComponentOrHTML;
-    };
-}>> & Readonly<{}>, {
-    id: any;
-    alignment: number;
-    options: unknown[];
-    messageBubbleStyle: Record<string, any>;
-    moreIconURL: string;
-    topMenuSize: number;
-}, {}, {
-    CometChatContextMenu: typeof CometChatContextMenu;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/component-overrides/CometChatMessageListOverride.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/BccAttachmentBox.vue.d.ts

@@ -1,29 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    captionedAttachment: {
-        type: ObjectConstructor;
-    };
-    closeButtonIconURL: {
-        type: StringConstructor;
-        default: string;
-    };
-    previewStyle: {
-        type: ObjectConstructor;
-        default: {};
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    captionedAttachment: {
-        type: ObjectConstructor;
-    };
-    closeButtonIconURL: {
-        type: StringConstructor;
-        default: string;
-    };
-    previewStyle: {
-        type: ObjectConstructor;
-        default: {};
-    };
-}>> & Readonly<{}>, {
-    previewStyle: Record<string, any>;
-    closeButtonIconURL: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/dist/components/BccAttachmentPreview.vue.d.ts

@@ -1,23 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    captionedAttachment: {
-        type: ObjectConstructor;
-        default: {};
-    };
-    previewStyle: {
-        type: ObjectConstructor;
-        default: {};
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    captionedAttachment: {
-        type: ObjectConstructor;
-        default: {};
-    };
-    previewStyle: {
-        type: ObjectConstructor;
-        default: {};
-    };
-}>> & Readonly<{}>, {
-    previewStyle: Record<string, any>;
-    captionedAttachment: Record<string, any>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;