@yoobic/yobi 8.1.0-48 → 8.1.0-49

package/dist/cjs/yoo-waitlist-location-result.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-waitlist-location-start.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-3fbcad6d.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-walkthrough.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-web-menu.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const commonHelpers = require('./common-helpers-9a0a64e1.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const commonHelpers = require('./common-helpers-16b3d671.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-webcam.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-welcome-banner.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const commonHelpers = require('./common-helpers-9a0a64e1.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const commonHelpers = require('./common-helpers-16b3d671.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-widget-chart.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-3fbcad6d.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-widget-tab.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-3fbcad6d.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-widget-tile.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-workflow-state-dialog.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
-const overlays = require('./overlays-3fbcad6d.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-workflow-state.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-3fbcad6d.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-workflow.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-9a0a64e1.js');
+const commonHelpers = require('./common-helpers-16b3d671.js');
 const index$3 = require('./index-750fb0f5.js');
-const index$1 = require('./index-d0eba14d.js');
+const index$1 = require('./index-6c944843.js');
 const index$2 = require('./index-9c56868f.js');
-const overlays = require('./overlays-3fbcad6d.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-48180ded.js');

package/dist/cjs/yoo-zebra.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-const overlays = require('./overlays-3fbcad6d.js');
-require('./index-f522b712.js');
+const overlays = require('./overlays-4834d61a.js');
+require('./index-469de753.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-f522b712.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
 const annotationsHelpers = require('./annotations-helpers-48180ded.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');
-const overlays = require('./overlays-3fbcad6d.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/collection/collection-manifest.json

@@ -347,7 +347,6 @@
     "./components/scanner/barcode-dialog/barcode-dialog.js",
     "./components/scanner/scandit/scandit.js",
     "./components/scanner/zebra/zebra.js",
-    "./components/storybook-grid/storybook-grid.js",
     "./components/widgets/widget-chart/widget-chart.js",
     "./components/widgets/widget-tab/widget-tab.js",
     "./components/widgets/widget-tile/widget-tile.js"

package/dist/collection/components/2.molecules/context-menu/context-menu.js

@@ -20,51 +20,46 @@ export class YooContextMenuComponent {
      * Show an arrow cursor to the specified position.
      */
     this.cursorPosition = 'none';
-    this.isMenuActive = false;
-    this.closeMenuDialog = async () => {
-      const closed = await closeMenuModal(this.contextMenuDialogRef);
-      if (closed) {
-        this.contextMenuDialogRef = undefined;
-        this.isMenuActive = false;
-      }
-    };
     this.onClick = (event) => {
-      var _a;
       if (!this.hoverMode && !this.disabled) {
-        showContextMenu(event, {
-          multipleSelection: this.multipleSelection,
-          contentButtons: this.contentButtons,
-          placement: this.placement,
-          dialogTitle: this.dialogTitle,
-          subDialogTitle: this.subDialogTitle,
-          selectedItems: this.selectedItems,
-          className: this.host.className,
-          hostElement: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.hostSelector)) || this.host,
-          contextMenuClosed: this.contextMenuClosed,
-          contextMenuOpened: this.contextMenuOpened
-        });
+        showContextMenu(event, this.baseContextMenuProps);
       }
     };
-    this.onMouseMove = (event) => {
-      var _a;
-      if (this.hoverMode && !this.disabled && !this.isMenuActive && this.contextMenuDialogRef === undefined) {
-        this.isMenuActive = true;
-        this.contextMenuDialogRef = showContextMenu(event, {
-          multipleSelection: this.multipleSelection,
-          contentButtons: this.contentButtons,
-          placement: this.placement,
-          dialogTitle: this.dialogTitle,
-          subDialogTitle: this.subDialogTitle,
-          selectedItems: this.selectedItems,
-          className: this.host.className,
-          hostElement: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.hostSelector)) || this.host,
-          contextMenuClosed: { emit: () => this.isMenuActive && this.closeMenuDialog() },
-          contextMenuOpened: this.contextMenuOpened,
-          cursorPosition: this.cursorPosition
-        });
-      }
+  }
+  get contextMenuDialogElement() {
+    return document.querySelector('yoo-context-menu-dialog');
+  }
+  get hasContextMenuActive() {
+    return !!this.contextMenuDialogElement;
+  }
+  async closeMenuDialog() {
+    await closeMenuModal(this.contextMenuDialogElement);
+  }
+  get baseContextMenuProps() {
+    var _a;
+    return {
+      multipleSelection: this.multipleSelection,
+      contentButtons: this.contentButtons,
+      placement: this.placement,
+      dialogTitle: this.dialogTitle,
+      subDialogTitle: this.subDialogTitle,
+      selectedItems: this.selectedItems,
+      className: this.host.className,
+      contextMenuOpened: this.contextMenuOpened,
+      hostElement: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.hostSelector)) || this.host
     };
-    this.onMouseLeave = (event) => this.isMenuActive && !isMouseInBoundaries(event, this.contextMenuDialogRef, 15, 0) && this.closeMenuDialog();
+  }
+  onMouseMove(event) {
+    if (this.hoverMode && !this.disabled && !this.contextMenuDialogElement) {
+      showContextMenu(event, {
+        ...this.baseContextMenuProps,
+        cursorPosition: this.cursorPosition,
+        contextMenuClosed: { emit: () => this.hasContextMenuActive && this.closeMenuDialog() }
+      });
+    }
+  }
+  onMouseLeave(event) {
+    this.hasContextMenuActive && !isMouseInBoundaries(event, this.contextMenuDialogElement, 15, 0) && this.closeMenuDialog();
   }
   componentWillLoad() {
     if (this.multipleSelection) {
@@ -73,7 +68,7 @@ export class YooContextMenuComponent {
   }
   setSelectedItems(contentButtons) {
     const selectedItems = [];
-    if (contentButtons && contentButtons.length > 0) {
+    if (contentButtons === null || contentButtons === void 0 ? void 0 : contentButtons.length) {
       contentButtons.forEach((contentButton) => {
         selectedItems.push(contentButton.disabled ? null : contentButton.selected === undefined ? false : contentButton.selected);
       });
@@ -84,7 +79,7 @@ export class YooContextMenuComponent {
     const TagType = this.tooltipContent ? 'yoo-tooltip' : 'div';
     return (h(Host, { class: getAppContext(this.host) },
       h(TagType, { placement: "bottom", content: this.tooltipContent },
-        h("span", { "aria-haspopup": "true", "aria-expanded": "false", onClick: this.onClick, onMouseMove: this.onMouseMove, onMouseLeave: this.onMouseLeave },
+        h("span", { "aria-haspopup": "true", "aria-expanded": "false", onClick: this.onClick, onMouseMove: (ev) => this.onMouseMove(ev), onMouseLeave: (ev) => this.onMouseLeave(ev) },
           h("slot", null),
           this.hoverMode && h("yoo-icon", { name: "more", color: "stable" })))));
   }
@@ -106,7 +101,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Specify a custom host element"
@@ -128,7 +123,7 @@ export class YooContextMenuComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Array of buttons to be presented in the menu."
@@ -148,13 +143,13 @@ export class YooContextMenuComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Property used to control where the context menu will show. The options are 'below' & 'above'."
       },
       "attribute": "placement",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'below'"
     },
     "dialogTitle": {
@@ -166,7 +161,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Used to show a menu title."
@@ -200,7 +195,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "If ```true```, the user will be able to select multiple items in the menu."
@@ -218,7 +213,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -235,13 +230,13 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
       "attribute": "disabled",
-      "reflect": false
+      "reflect": true
     },
     "hoverMode": {
       "type": "boolean",
@@ -252,7 +247,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Display the context menu dialog on hover if true.\nDisplay it on click if false."
@@ -270,7 +265,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Show an arrow cursor to the specified position."

package/dist/collection/components/core/chat/chat.css

@@ -1084,11 +1084,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .message-row {
   display: grid;
-  align-items: center;
-}
-:host .message-row.deleteable {
   grid-gap: var(--spacing-16, 1rem);
   grid-template-columns: auto 1fr;
+  align-items: center;
+}
+:host .message-row yoo-form-checkbox,
+:host .message-row yoo-chat-message {
+  transition: transform 0.5s;
+}
+:host .message-row yoo-chat-message[left] {
+  transform: translateX(-2.5rem);
+}
+:host .message-row yoo-form-checkbox {
+  transform: translateX(calc(-100% - 1.5rem));
+}
+:host .message-row.deleteable yoo-chat-message[left] {
+  transform: translateX(0rem);
+}
+:host .message-row.deleteable yoo-form-checkbox {
+  transform: translateX(calc(100% - 1.5rem));
 }
 :host .message-row .notification {
   display: flex;

package/dist/collection/components/core/chat/chat.js

@@ -171,20 +171,10 @@ export class YooChatComponent {
     }
   }
   componentDidLoad() {
-    this.initMessagesAndScrollToBottom();
-    if (this.showBackgroundVideo && !isNativeMobile()) {
-      this.playerReady.emit(this.videoElWrapper);
-    }
+    this.initChat();
   }
   componentDidUpdate() {
-    var _a, _b;
-    !this.scrollLocker && this.initMessagesAndScrollToBottom();
-    this.oldestMostRecentMessageToken && this.refreshMessages();
-    // re-render will remove video player, need to re-create the player
-    if (!isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive) && this.showBackgroundVideo &&
-      ((_b = this.videoElWrapper) === null || _b === void 0 ? void 0 : _b.firstChild).childElementCount <= 0) {
-      this.playerReady.emit(this.videoElWrapper);
-    }
+    this.updateChat();
   }
   disconnectedCallback() {
     if (isNativeMobile()) {
@@ -197,11 +187,27 @@ export class YooChatComponent {
       cancelRequestInterval(this.requestIntervalID['value']);
     }
   }
+  initChat() {
+    this.initMessagesAndScrollToBottom();
+    if (this.showBackgroundVideo && !isNativeMobile()) {
+      this.playerReady.emit(this.videoElWrapper);
+    }
+  }
+  updateChat() {
+    var _a, _b;
+    //   this.initMessagesAndScrollToBottom();
+    this.refreshMessages();
+    // re-render will remove video player, need to re-create the player
+    if (!isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive) && this.showBackgroundVideo &&
+      ((_b = this.videoElWrapper) === null || _b === void 0 ? void 0 : _b.firstChild).childElementCount <= 0) {
+      this.playerReady.emit(this.videoElWrapper);
+    }
+  }
   async initMessagesAndScrollToBottom() {
-    var _a;
+    var _a, _b, _c;
     this.chatFocused.emit(true);
     !this.scroll && (this.scroll = await ((_a = this.ionContent) === null || _a === void 0 ? void 0 : _a.getScrollElement()));
-    if (this.scroll && !this.oldestMostRecentMessageToken) {
+    if (this.scroll && !this.oldestMostRecentMessageToken && !this.scrollLocker && ((_c = (_b = this.messages) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.readonly)) {
       await Promise.allSettled(this.messageElements.map((el) => el === null || el === void 0 ? void 0 : el.initMessage()));
       await this.scroll.scrollToBottom(50);
       this.ionContent.classList.remove('hide');
@@ -226,13 +232,15 @@ export class YooChatComponent {
   }
   async refreshMessages() {
     var _a;
-    const messages = (((_a = this.messageElements) === null || _a === void 0 ? void 0 : _a.filter(e => !e.className.includes('hydrated'))) || []);
-    await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.initMessage()) || Promise.resolve(true)));
-    const lastMessageElement = this.host.shadowRoot.querySelector(`[id="${this.oldestMostRecentMessageToken}"]`);
-    lastMessageElement && this.scroll.scrollTo({ top: lastMessageElement.offsetTop });
-    await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.renderContent()) || Promise.resolve(true)));
-    this.oldestMostRecentMessageToken = null;
-    this.scrollLocker = true;
+    if (this.oldestMostRecentMessageToken) {
+      const messages = (((_a = this.messageElements) === null || _a === void 0 ? void 0 : _a.filter(e => !e.className.includes('hydrated'))) || []);
+      await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.initMessage()) || Promise.resolve(true)));
+      const lastMessageElement = this.host.shadowRoot.querySelector(`[id="${this.oldestMostRecentMessageToken}"]`);
+      lastMessageElement && this.scroll.scrollTo({ top: lastMessageElement.offsetTop });
+      await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.renderContent()) || Promise.resolve(true)));
+      this.oldestMostRecentMessageToken = null;
+      this.scrollLocker = true;
+    }
   }
   onChatFocused() {
     this.chatFocused.emit(true);
@@ -511,15 +519,15 @@ export class YooChatComponent {
       return dateFormat(date, getDateFormats(date).grouped);
     };
     return this.messages.map((m, i) => {
-      var _a;
+      var _a, _b;
       const { notificationParams, messageReceivedInfo } = (m === null || m === void 0 ? void 0 : m.options) || {};
-      const isDeleteable = !m.readonly && (((_a = m === null || m === void 0 ? void 0 : m.author) === null || _a === void 0 ? void 0 : _a._id) === getSession().userId || this.forceDelete);
+      const isDeleteable = !notificationParams && !m.readonly && m.timetoken !== ((_a = this.newMessage) === null || _a === void 0 ? void 0 : _a.timetoken) && (((_b = m === null || m === void 0 ? void 0 : m.author) === null || _b === void 0 ? void 0 : _b._id) === getSession().userId || this.forceDelete);
       const previousDate = getFormattedDateAtIndex(i - 1);
       const currentDate = getFormattedDateAtIndex(i);
       return !(m === null || m === void 0 ? void 0 : m.deleted) && [
         currentDate && (previousDate !== currentDate) && h("p", null, currentDate),
         h("section", { class: { 'message-row': true, deleteable: isDeleteable } },
-          isDeleteable && h("yoo-form-checkbox", { value: m.selected, onInputChanged: (ev) => {
+          h("yoo-form-checkbox", { value: m.selected, onInputChanged: (ev) => {
               m.selected = ev === null || ev === void 0 ? void 0 : ev.detail;
               this.onSelectMessage(m);
             } }),

package/dist/collection/components/core/chat-message/chat-message.js

@@ -1,5 +1,5 @@
 import { MessageType } from '@shared/interfaces';
-import { dateFormat, getExtension, getResizedImageSize, isAudio, isDocument, isFile, isImage, isIOS, isNativeMobile, isPdf, isPhotoEdited, isRichContentMessage, isUnsplashUrl, isVideo, replaceAllLinks, replaceAndGetAllLinks, replaceAtTagToMentionTag, showMessageInfoDialog, translate, translateMulti } from '@shared/utils';
+import { dateFormat, getExtension, getResizedImageSize, getSession, isAudio, isBase64, isDocument, isFile, isImage, isIOS, isNativeMobile, isPdf, isPhotoEdited, isRichContentMessage, isUnsplashUrl, isVideo, replaceAllLinks, replaceAndGetAllLinks, replaceAtTagToMentionTag, showMessageInfoDialog, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State } from '@stencil/core';
 import { debounce } from 'lodash-es';
 import { assignPressActions } from '../../../utils/gesture';
@@ -34,7 +34,7 @@ export class YooChatMessageComponent {
     return !this.isDocument && !this.isAudio && ((isVideo(this.mediaUrl) || (!isNativeMobile() && ((_a = this.mediaUrl) === null || _a === void 0 ? void 0 : _a.startsWith('blob:')))) || ((_b = this.message) === null || _b === void 0 ? void 0 : _b.type) === MessageType.video);
   }
   get isImage() {
-    return !this.isDocument && !this.isVideo && !this.isAudio && (isImage(this.mediaUrl) || isUnsplashUrl(this.mediaUrl));
+    return !this.isDocument && !this.isVideo && !this.isAudio && (isImage(this.mediaUrl) || isUnsplashUrl(this.mediaUrl) || isBase64(this.mediaUrl));
   }
   get isTiffImage() {
     return getExtension(this.mediaUrl).includes('tif');
@@ -78,6 +78,12 @@ export class YooChatMessageComponent {
     var _a, _b, _c;
     return (_c = (_b = (_a = Object.entries(this.messageTypes || {})) === null || _a === void 0 ? void 0 : _a.filter(v => v === null || v === void 0 ? void 0 : v[1])) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[0];
   }
+  get isMe() {
+    var _a;
+    const { isAlternate, author, sender_id } = this.message || {};
+    const messageAuthorId = (author === null || author === void 0 ? void 0 : author._id) || sender_id;
+    return isAlternate !== null && isAlternate !== void 0 ? isAlternate : (messageAuthorId === ((_a = getSession().user) === null || _a === void 0 ? void 0 : _a._id));
+  }
   async initMessage() {
     this.shouldRender = true;
     forceUpdate(this);
@@ -193,9 +199,9 @@ export class YooChatMessageComponent {
       h("yoo-avatar", { onClick: () => { var _a; return this.avatarClicked.emit((_a = this.message) === null || _a === void 0 ? void 0 : _a.author); }, size: "medium", user: (_a = this.message) === null || _a === void 0 ? void 0 : _a.author }) : h("div", { class: "empty-user" });
   }
   renderUsername() {
-    var _a, _b;
+    var _a;
     const { firstName, lastName } = ((_a = this.message) === null || _a === void 0 ? void 0 : _a.author) || {};
-    const shouldDisplayUsername = !!(this.isGroup && !((_b = this.message) === null || _b === void 0 ? void 0 : _b.isAlternate) && firstName && lastName);
+    const shouldDisplayUsername = !!(this.isGroup && !this.isMe && firstName && lastName);
     return shouldDisplayUsername && h("section", { class: "username", onClick: () => { var _a; return this.usernameClicked.emit((_a = this.message) === null || _a === void 0 ? void 0 : _a.author); } }, shouldDisplayUsername ? `${firstName} ${lastName}` : translate('USERDEACTIVATED'));
   }
   renderVideo() {
@@ -218,8 +224,8 @@ export class YooChatMessageComponent {
     ];
   }
   renderBasicMessage() {
-    const { isAlternate, mentions, content } = this.message || {};
-    const textColor = isAlternate ? 'light' : 'app-color';
+    const { mentions, content } = this.message || {};
+    const textColor = this.isMe ? 'light' : 'app-color';
     const convertMentions = (text) => this.hasMentions ? replaceAtTagToMentionTag(text, mentions, textColor) : text;
     const convertLinks = (text) => replaceAllLinks(translateMulti(text), false, textColor);
     return h("section", { id: "text", ...(isRichContentMessage(this.message) || this.mediaUrl) && { 'is-between': true }, class: "content" },
@@ -230,9 +236,9 @@ export class YooChatMessageComponent {
     return (h("yoo-audio-player", { boost: 100, src: this.mediaUrl }));
   }
   renderDocument() {
-    var _a, _b, _c;
+    var _a;
     const document = (_a = this.message) === null || _a === void 0 ? void 0 : _a.payload;
-    return h("yoo-form-document", { class: { 'transparent-light': this.isReply && ((_b = this.message) === null || _b === void 0 ? void 0 : _b.isAlternate), 'transparent-dark': this.isReply && !((_c = this.message) === null || _c === void 0 ? void 0 : _c.isAlternate) }, document: document, showActionSheet: isNativeMobile() && isPdf(document), readonly: true });
+    return h("yoo-form-document", { class: { 'transparent-light': this.isReply && this.isMe, 'transparent-dark': this.isReply && !this.isMe }, document: document, showActionSheet: isNativeMobile() && isPdf(document), readonly: true });
   }
   renderMedia() {
     return (isRichContentMessage(this.message) || this.mediaUrl) && (h("section", { id: "medias", class: "content" },
@@ -254,7 +260,7 @@ export class YooChatMessageComponent {
     const { sentButNotPropagated } = ((_a = this.message) === null || _a === void 0 ? void 0 : _a.options) || {};
     return ((_b = this.message) === null || _b === void 0 ? void 0 : _b.timetoken) >= 0 && (h("section", { id: "status", onClick: (ev) => this.onStatusClicked(ev) },
       h("span", null, dateFormat((_c = this.message) === null || _c === void 0 ? void 0 : _c.time, getDateFormats(new Date(this.message.timetoken)).single)),
-      this.message.isAlternate &&
+      this.isMe &&
         h("yoo-icon", { color: sentButNotPropagated || !this.receivedByOthers ? 'stable' : 'app-color', name: sentButNotPropagated ? 'tick' : 'double-tick', size: "small" })));
   }
   renderReplyPreview() {
@@ -276,13 +282,13 @@ export class YooChatMessageComponent {
       h("yoo-form-url", { class: "rounded", readonly: true, linkPreviews: this.linkPreviews, displayAllPreviews: false, displayErrorPreviews: false, canCloseLinkPreviews: false, bigLinkPreviews: false, linkPreviewImgType: "background", linkPreviewImgScaledUp: false, linkPreviewImgInstant: true, containImage: true, showUrlLink: false })));
   }
   renderGroupMessage() {
-    return (h("section", { id: "group" },
+    return !this.isMe ? (h("section", { id: "group" },
       h("section", { class: "left-column" }, this.renderUser()),
       h("section", { class: "right-column" },
         this.renderUsername(),
-        this.renderMessageContent())));
+        this.renderDirectMessage()))) : this.renderDirectMessage();
   }
-  renderMessageContent() {
+  renderDirectMessage() {
     return (h("section", { ref: (el) => (this.containerElement = el), class: {
         message: true,
         combined: this.isReply || this.hasPreviewLinks,
@@ -295,16 +301,14 @@ export class YooChatMessageComponent {
       this.renderStatus()));
   }
   renderMessage() {
-    var _a;
-    return (this.isGroup && !((_a = this.message) === null || _a === void 0 ? void 0 : _a.isAlternate)) ? this.renderGroupMessage() : this.renderMessageContent();
+    return this.isGroup ? this.renderGroupMessage() : this.renderDirectMessage();
   }
   render() {
-    const { isAlternate } = this.message || {};
     return h(Host, { ...{
         first: this.isFirst && !this.isLast,
         last: this.isLast,
-        right: isAlternate,
-        left: !isAlternate,
+        right: this.isMe,
+        left: !this.isMe,
         type: this.type
       } }, this.renderMessage());
   }