@uzum-tech/ui 2.2.1 → 2.3.1

package/dist/index.js

@@ -3412,7 +3412,7 @@
   }
 
   /* eslint-disable @typescript-eslint/no-non-null-assertion */
-  const style$1Z = c([c('.v-binder-follower-container', {
+  const style$1_ = c([c('.v-binder-follower-container', {
     position: 'absolute',
     left: '0',
     right: '0',
@@ -3491,7 +3491,7 @@
         }
       });
       const ssrAdapter = useSsrAdapter();
-      style$1Z.mount({
+      style$1_.mount({
         id: 'vueuc/binder',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -4951,7 +4951,7 @@
 
   /* eslint-disable @typescript-eslint/strict-boolean-expressions */
   const hiddenAttr = 'v-hidden';
-  const style$1Y = c('[v-hidden]', {
+  const style$1Z = c('[v-hidden]', {
     display: 'none!important'
   });
   var VOverflow = vue.defineComponent({
@@ -5064,7 +5064,7 @@
         }
       }
       const ssrAdapter = useSsrAdapter();
-      style$1Y.mount({
+      style$1Z.mount({
         id: 'vueuc/overflow',
         head: true,
         anchorMetaName: cssrAnchorMetaName$1,
@@ -14084,7 +14084,7 @@
     builtinThemeOverrides: Object
   };
 
-  var style$1X = cB("base-icon", `
+  var style$1Y = cB("base-icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14120,7 +14120,7 @@
       onMouseup: Function
     },
     setup(props) {
-      useStyle("-base-icon", style$1X, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-icon", style$1Y, vue.toRef(props, "clsPrefix"));
     },
     render() {
       return /* @__PURE__ */ vue.h(
@@ -14155,7 +14155,7 @@
     onClick: Function
   };
 
-  var style$1W = cB("icon", `
+  var style$1X = cB("icon", `
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -14341,7 +14341,7 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
-  function self$1D(vars) {
+  function self$1E(vars) {
     const {
       elementsPrimary
     } = vars;
@@ -14357,13 +14357,13 @@
   const iconLight = {
     name: "Icon",
     common: derived,
-    self: self$1D
+    self: self$1E
   };
 
   const iconDark$1 = {
     name: "Icon",
     common: derived$1,
-    self: self$1D
+    self: self$1E
   };
 
   const FALLBACK_ICON = "&#65533";
@@ -14377,7 +14377,7 @@
         mergedIconPacksRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1W, iconLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Icon", "-icon", style$1X, iconLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           depth
@@ -14518,7 +14518,7 @@
     avatarSize: "16px"
   };
 
-  function self$1C(vars) {
+  function self$1D(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -14548,16 +14548,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1C
+    self: self$1D
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1C
+    self: self$1D
   };
 
-  var style$1V = cB("base-account-option", `
+  var style$1W = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -14612,7 +14612,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1V,
+        style$1W,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -16092,7 +16092,7 @@
     })];
   }
 
-  var style$1U = cB("base-clear", `
+  var style$1V = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -16133,7 +16133,7 @@
       onClear: Function
     },
     setup(props) {
-      useStyle("-base-clear", style$1U, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-clear", style$1V, vue.toRef(props, "clsPrefix"));
       return {
         handleMouseDown(e) {
           e.preventDefault();
@@ -16164,7 +16164,7 @@
     }
   });
 
-  var style$1T = cB("base-close", `
+  var style$1U = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16236,7 +16236,7 @@
       absolute: Boolean
     },
     setup(props) {
-      useStyle("-base-close", style$1T, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-close", style$1U, vue.toRef(props, "clsPrefix"));
       return () => {
         const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
         const Tag = isButtonTag ? "button" : "div";
@@ -16395,7 +16395,7 @@
     }
   });
 
-  var style$1S = c$1([c$1("@keyframes loading-container-rotate", `
+  var style$1T = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -16565,7 +16565,7 @@
       ...exposedLoadingProps
     },
     setup(props) {
-      useStyle("-base-loading", style$1S, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-loading", style$1T, vue.toRef(props, "clsPrefix"));
     },
     render() {
       const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -16695,7 +16695,7 @@
     })];
   }
 
-  var style$1R = cB("base-menu-mask", `
+  var style$1S = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -16718,7 +16718,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-menu-mask", style$1R, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-menu-mask", style$1S, vue.toRef(props, "clsPrefix"));
       const messageRef = vue.ref(null);
       let timerId = null;
       const uncontrolledShowRef = vue.ref(false);
@@ -16906,7 +16906,7 @@
     railColor: "transparent"
   };
 
-  function self$1B(vars) {
+  function self$1C(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -16926,13 +16926,13 @@
   const safeTopScrollbarLight = {
     name: "SafeTopScrollbar",
     common: derived,
-    self: self$1B
+    self: self$1C
   };
 
   const safeTopScrollbarDark = {
     name: "SafeTopScrollbar",
     common: derived$1,
-    self: self$1B
+    self: self$1C
   };
 
   cB("scrollbar", [cM("rtl", `
@@ -16945,7 +16945,7 @@
           right: unset;
         `)])])])]);
 
-  var style$1Q = cB("safe-top-scrollbar", `
+  var style$1R = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -17094,7 +17094,7 @@
       const themeRef = useTheme(
         "SafeTopScrollbar",
         "-safe-top-scrollbar",
-        style$1Q,
+        style$1R,
         safeTopScrollbarLight,
         props,
         mergedClsPrefixRef
@@ -17828,7 +17828,7 @@
     railColor: "transparent"
   };
 
-  function self$1A(vars) {
+  function self$1B(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -17848,13 +17848,13 @@
   const scrollbarLight = {
     name: "Scrollbar",
     common: derived,
-    self: self$1A
+    self: self$1B
   };
 
   const scrollbarDark = {
     name: "Scrollbar",
     common: derived$1,
-    self: self$1A
+    self: self$1B
   };
 
   var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -17872,7 +17872,7 @@
     style: rtlStyle$t
   };
 
-  var style$1P = cB("scrollbar", `
+  var style$1Q = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -18015,7 +18015,7 @@
       const themeRef = useTheme(
         "Scrollbar",
         "-scrollbar",
-        style$1P,
+        style$1Q,
         scrollbarLight,
         props,
         mergedClsPrefixRef
@@ -19387,7 +19387,7 @@
     return treemate;
   }
 
-  function self$1z(vars) {
+  function self$1A(vars) {
     const {
       fontBodyMedium,
       fontTitleLarge,
@@ -19419,16 +19419,16 @@
   const emptyLight = {
     name: "Empty",
     common: derived,
-    self: self$1z
+    self: self$1A
   };
 
   const emptyDark$1 = {
     name: "Empty",
     common: derived$1,
-    self: self$1z
+    self: self$1A
   };
 
-  var style$1O = cB("empty", `
+  var style$1P = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19506,7 +19506,7 @@
       const themeRef = useTheme(
         "Empty",
         "-empty",
-        style$1O,
+        style$1P,
         emptyLight,
         props,
         mergedClsPrefixRef
@@ -19594,7 +19594,7 @@
     }
   });
 
-  function self$1y(vars) {
+  function self$1z(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -19651,7 +19651,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$1y
+    self: self$1z
   });
 
   const internalSelectMenuDark = {
@@ -19661,7 +19661,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$1y
+    self: self$1z
   };
 
   cB("base-select-menu", [cM("rtl", `
@@ -19902,7 +19902,7 @@
     })];
   }
 
-  var style$1N = cB("base-select-menu", `
+  var style$1O = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -20090,7 +20090,7 @@
       const themeRef = useTheme(
         "InternalSelectMenu",
         "-internal-select-menu",
-        style$1N,
+        style$1O,
         internalSelectMenuLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -20558,7 +20558,7 @@
     }
   });
 
-  function self$1x(vars) {
+  function self$1y(vars) {
     const {
       fontBodyMedium,
       containerPrimary,
@@ -20585,13 +20585,13 @@
   const popoverLight = {
     name: "Popover",
     common: derived,
-    self: self$1x
+    self: self$1y
   };
 
   const popoverDark = {
     name: "Popover",
     common: derived$1,
-    self: self$1x
+    self: self$1y
   };
 
   cB("popover", [cM("rtl", `
@@ -20606,7 +20606,7 @@
     right: "left"
   };
   const arrowSize = "var(--u-arrow-height) * 1.414";
-  var style$1M = c$1([cB("popover", `
+  var style$1N = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -20825,7 +20825,7 @@
       const themeRef = useTheme(
         "Popover",
         "-popover",
-        style$1M,
+        style$1N,
         popoverLight,
         props,
         mergedClsPrefixRef
@@ -21655,7 +21655,7 @@
     }
   });
 
-  function self$1w(vars) {
+  function self$1x(vars) {
     const {
       opacityDisabled,
       borderRadiusSmall: borderRadius,
@@ -21753,13 +21753,13 @@
   const tagLight = {
     name: "Tag",
     common: derived,
-    self: self$1w
+    self: self$1x
   };
 
   const tagDark = {
     name: "Tag",
     common: derived$1,
-    self: self$1w
+    self: self$1x
   };
 
   var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -21806,7 +21806,7 @@
     }
   };
 
-  var style$1L = cB("tag", `
+  var style$1M = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -21973,7 +21973,7 @@
       const themeRef = useTheme(
         "Tag",
         "-tag",
-        style$1L,
+        style$1M,
         tagLight,
         props,
         mergedClsPrefixRef
@@ -22337,7 +22337,7 @@
     }
   });
 
-  function self$1v(vars) {
+  function self$1w(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -22357,10 +22357,10 @@
   }
   const skeletonLight$1 = {
     common: derived,
-    self: self$1v
+    self: self$1w
   };
 
-  var style$1K = c$1([cB("skeleton", `
+  var style$1L = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -22416,7 +22416,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1K,
+        style$1L,
         skeletonLight$1,
         props,
         mergedClsPrefixRef
@@ -22532,7 +22532,7 @@
     }
   });
 
-  function self$1u(vars) {
+  function self$1v(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -22690,7 +22690,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1u
+    self: self$1v
   });
 
   const internalSelectionDark = {
@@ -22699,7 +22699,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1u
+    self: self$1v
   };
 
   cB("base-selection", [cM("rtl", `
@@ -22732,7 +22732,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
   }
-  var style$1J = c$1([cB("base-selection", `
+  var style$1K = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -23083,7 +23083,7 @@
       const themeRef = useTheme(
         "InternalSelection",
         "-internal-selection",
-        style$1J,
+        style$1K,
         internalSelectionLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -24164,7 +24164,7 @@
     })];
   }
 
-  var style$1I = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+  var style$1J = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -24283,7 +24283,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-slot-machine", style$1I, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-slot-machine", style$1J, vue.toRef(props, "clsPrefix"));
       const oldValueRef = vue.ref();
       const newValueRef = vue.ref();
       const numbersRef = vue.computed(() => {
@@ -24338,7 +24338,7 @@
     }
   });
 
-  function self$1t(vars) {
+  function self$1u(vars) {
     const {
       borderRadiusSmall,
       brandPrimary500,
@@ -24374,10 +24374,10 @@
   }
   const typographyLight$1 = {
     common: derived,
-    self: self$1t
+    self: self$1u
   };
 
-  var style$1H = cB("text", `
+  var style$1I = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -24685,7 +24685,7 @@
       const themeRef = useTheme(
         "Typography",
         "-text",
-        style$1H,
+        style$1I,
         typographyLight$1,
         props,
         mergedClsPrefixRef
@@ -24773,7 +24773,7 @@
     }
   });
 
-  var style$1G = cB("base-wave", `
+  var style$1H = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -24791,7 +24791,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-wave", style$1G, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-wave", style$1H, vue.toRef(props, "clsPrefix"));
       const selfRef = vue.ref(null);
       const activeRef = vue.ref(false);
       let animationTimerId = null;
@@ -24836,7 +24836,7 @@
     }
   });
 
-  function self$1s(vars) {
+  function self$1t(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -24873,7 +24873,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1s
+    self: self$1t
   });
 
   const tooltipDark = {
@@ -24882,10 +24882,10 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1s
+    self: self$1t
   };
 
-  var style$1F = cB("tooltip", "", [cE("content", `
+  var style$1G = cB("tooltip", "", [cE("content", `
     display: flex;
     align-items: flex-start;
   `), cE("icon", `
@@ -25011,7 +25011,7 @@
       const themeRef = useTheme(
         "Tooltip",
         "-tooltip",
-        props.variant === "plain" ? void 0 : style$1F,
+        props.variant === "plain" ? void 0 : style$1G,
         tooltipLight,
         props,
         mergedClsPrefixRef
@@ -25141,7 +25141,7 @@
     }
   });
 
-  var style$1E = cB("ellipsis", {
+  var style$1F = cB("ellipsis", {
     overflow: "hidden"
   }, [cNotM("line-clamp", `
     white-space: nowrap;
@@ -25179,7 +25179,7 @@
       const mergedTheme = useTheme(
         "Ellipsis",
         "-ellipsis",
-        style$1E,
+        style$1F,
         ellipsisLight,
         props,
         mergedClsPrefixRef
@@ -25336,7 +25336,7 @@
     setup(props, { attrs, slots }) {
       const mouseEnteredRef = vue.ref(false);
       const mergedClsPrefixRef = useMergedClsPrefix();
-      useStyle("-ellipsis", style$1E, mergedClsPrefixRef);
+      useStyle("-ellipsis", style$1F, mergedClsPrefixRef);
       const renderTrigger = () => {
         const { lineClamp } = props;
         const mergedClsPrefix = mergedClsPrefixRef.value;
@@ -25376,7 +25376,7 @@
     }
   });
 
-  function self$1r(vars) {
+  function self$1s(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -25418,21 +25418,21 @@
   const actionCardLight = {
     name: "ActionCard",
     common: derived,
-    self: self$1r
+    self: self$1s
   };
 
   const actionCardDark = {
     name: "ActionCard",
     common: derived$1,
     self: vars => {
-      const lightVars = self$1r(vars);
+      const lightVars = self$1s(vars);
       return {
         ...lightVars
       };
     }
   };
 
-  var style$1D = cB("action-card", `
+  var style$1E = cB("action-card", `
   position: relative;
   width: var(--u-width);
   min-height: var(--u-min-height);
@@ -25553,7 +25553,7 @@
       const themeRef = useTheme(
         "ActionCard",
         "-action-card",
-        style$1D,
+        style$1E,
         actionCardLight,
         props,
         mergedClsPrefixRef
@@ -25684,7 +25684,7 @@
     }
   });
 
-  var style$1C = cB("affix", [cM("affixed", {
+  var style$1D = cB("affix", [cM("affixed", {
     position: "fixed"
   }, [cM("absolute-positioned", {
     position: "absolute"
@@ -25754,7 +25754,7 @@
     props: affixProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-affix", style$1C, mergedClsPrefixRef);
+      useStyle("-affix", style$1D, mergedClsPrefixRef);
       let scrollTarget = null;
       const stickToTopRef = vue.ref(false);
       const stickToBottomRef = vue.ref(false);
@@ -25890,7 +25890,7 @@
     descriptionSpaceBanner: "24px"
   };
 
-  function self$1q(vars) {
+  function self$1r(vars) {
     const {
       iconMedium,
       closeMedium,
@@ -25999,13 +25999,13 @@
   const alertLight = {
     name: "Alert",
     common: derived,
-    self: self$1q
+    self: self$1r
   };
 
   const alertDark = {
     name: "Alert",
     common: derived$1,
-    self: self$1q
+    self: self$1r
   };
 
   var rtlStyle$r = cB("alert", [cM("rtl", `
@@ -26081,7 +26081,7 @@
     `)];
   }
 
-  var style$1B = cB("alert", `
+  var style$1C = cB("alert", `
   line-height: var(--u-line-height);
   position: relative;
   transition: background-color .3s var(--u-bezier);
@@ -26260,7 +26260,7 @@
       const themeRef = useTheme(
         "Alert",
         "-alert",
-        style$1B,
+        style$1C,
         alertLight,
         props,
         mergedClsPrefixRef
@@ -26401,7 +26401,7 @@
     }
   });
 
-  function self$1p(vars) {
+  function self$1q(vars) {
     const {
       borderRadius,
       fontBodyMedium,
@@ -26431,13 +26431,13 @@
   const anchorLight = {
     name: "Anchor",
     common: derived,
-    self: self$1p
+    self: self$1q
   };
 
   const anchorDark = {
     name: "Anchor",
     common: derived$1,
-    self: self$1p
+    self: self$1q
   };
 
   const anchorInjectionKey = createInjectionKey("u-anchor");
@@ -26776,7 +26776,7 @@
     }
   });
 
-  var style$1A = cB("anchor", `
+  var style$1B = cB("anchor", `
   position: relative;
 `, [cNotM("block", `
     padding-left: var(--u-rail-width);
@@ -26866,7 +26866,7 @@
       const themeRef = useTheme(
         "Anchor",
         "-anchor",
-        style$1A,
+        style$1B,
         anchorLight,
         props,
         mergedClsPrefixRef
@@ -26946,7 +26946,7 @@
   isBrowser$1 && navigator.userAgent.includes("Firefox");
   const isSafari = isBrowser$1 && navigator.userAgent.includes("Safari") && !isChrome;
 
-  function self$1o(vars) {
+  function self$1p(vars) {
     const {
       iconMedium,
       textSecondary,
@@ -27057,13 +27057,13 @@
   const inputLight = {
     name: "Input",
     common: derived,
-    self: self$1o
+    self: self$1p
   };
 
   const inputDark = {
     name: "Input",
     common: derived$1,
-    self: self$1o
+    self: self$1p
   };
 
   var rtlStyle$q = cB("input", [cM("rtl", `
@@ -27089,7 +27089,7 @@
 
   const inputInjectionKey = createInjectionKey("u-input");
 
-  var style$1z = cB("input", `
+  var style$1A = cB("input", `
   max-width: 100%;
   cursor: text;
   line-height: 1.5;
@@ -27637,7 +27637,7 @@
     rippleDuration: ".6s"
   };
 
-  function self$1n(vars) {
+  function self$1o(vars) {
     const {
       heightMini,
       heightTiny,
@@ -27893,13 +27893,13 @@
   const buttonLight = {
     name: "Button",
     common: derived,
-    self: self$1n
+    self: self$1o
   };
 
   const buttonDark = {
     name: "Button",
     common: derived$1,
-    self: self$1n
+    self: self$1o
   };
 
   var rtlStyle$p = cB("button", [cM("rtl", `
@@ -27917,7 +27917,7 @@
     style: rtlStyle$p
   };
 
-  var style$1y = c$1([cB("button", `
+  var style$1z = c$1([cB("button", `
     margin: 0;
     font-weight: var(--u-font-weight);
     line-height: 1;
@@ -28248,7 +28248,7 @@
       const themeRef = useTheme(
         "Button",
         "-button",
-        style$1y,
+        style$1z,
         buttonLight,
         props,
         mergedClsPrefixRef
@@ -28682,7 +28682,7 @@
     iconMargin: "0 16px 0 0"
   };
 
-  function self$1m(vars) {
+  function self$1n(vars) {
     const {
       closeMedium,
       iconMedium,
@@ -28767,13 +28767,13 @@
   const messageLight = {
     name: "Message",
     common: derived,
-    self: self$1m
+    self: self$1n
   };
 
   const messageDark = {
     name: "Message",
     common: derived$1,
-    self: self$1m
+    self: self$1n
   };
 
   var rtlStyle$o = cB("message", [cM("rtl", `
@@ -28808,7 +28808,7 @@
     onMouseleave: Function
   };
 
-  var style$1x = c$1([cB("message-wrapper", `
+  var style$1y = c$1([cB("message-wrapper", `
     margin: var(--u-margin);
     z-index: 0;
     transform-origin: top center;
@@ -28929,7 +28929,7 @@
       const themeRef = useTheme(
         "Message",
         "-message",
-        style$1x,
+        style$1y,
         messageLight,
         messageProviderProps,
         mergedClsPrefixRef
@@ -29608,7 +29608,7 @@
       const themeRef = useTheme(
         "Input",
         "-input",
-        style$1z,
+        style$1A,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -30697,7 +30697,7 @@
     }
   });
 
-  var style$1w = cB("input-group", `
+  var style$1x = cB("input-group", `
   display: inline-flex;
   width: 100%;
   flex-wrap: nowrap;
@@ -30760,7 +30760,7 @@
     props: inputGroupProps,
     setup(props) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-input-group", style$1w, mergedClsPrefixRef);
+      useStyle("-input-group", style$1x, mergedClsPrefixRef);
       return {
         mergedClsPrefix: mergedClsPrefixRef
       };
@@ -30771,7 +30771,7 @@
     }
   });
 
-  var style$1v = cB("input-group-label", `
+  var style$1w = cB("input-group-label", `
   position: relative;
   user-select: none;
   -webkit-user-select: none;
@@ -30819,7 +30819,7 @@
       const themeRef = useTheme(
         "Input",
         "-input-group-label",
-        style$1v,
+        style$1w,
         inputLight,
         props,
         mergedClsPrefixRef
@@ -30945,7 +30945,7 @@
     return valOptMap;
   }
 
-  function self$1l(vars) {
+  function self$1m(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -30960,7 +30960,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$1l
+    self: self$1m
   });
 
   const autoCompleteDark = {
@@ -30970,10 +30970,10 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$1l
+    self: self$1m
   };
 
-  var style$1u = c$1([cB("auto-complete", `
+  var style$1v = c$1([cB("auto-complete", `
     z-index: auto;
     position: relative;
     display: inline-flex;
@@ -31103,7 +31103,7 @@
       const themeRef = useTheme(
         "AutoComplete",
         "-auto-complete",
-        style$1u,
+        style$1v,
         autoCompleteLight,
         props,
         mergedClsPrefixRef
@@ -31500,7 +31500,7 @@
     return unobserve;
   };
 
-  function self$1k(vars) {
+  function self$1l(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -31521,16 +31521,16 @@
   const skeletonLight = {
     name: "Skeleton",
     common: derived,
-    self: self$1k
+    self: self$1l
   };
 
   const skeletonDark = {
     name: "Skeleton",
     common: derived$1,
-    self: self$1k
+    self: self$1l
   };
 
-  var style$1t = c$1([cB("skeleton", `
+  var style$1u = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -31589,7 +31589,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1t,
+        style$1u,
         skeletonLight,
         props,
         mergedClsPrefixRef
@@ -31644,7 +31644,7 @@
     }
   });
 
-  function self$1j(vars) {
+  function self$1k(vars) {
     const {
       borderRadius,
       heightSmall,
@@ -31676,18 +31676,18 @@
   const avatarLight = {
     name: "Avatar",
     common: derived,
-    self: self$1j
+    self: self$1k
   };
 
   const avatarDark = {
     name: "Avatar",
     common: derived$1,
-    self: self$1j
+    self: self$1k
   };
 
   const avatarGroupInjectionKey = createInjectionKey("u-avatar-group");
 
-  var style$1s = cB("avatar", `
+  var style$1t = cB("avatar", `
   width: var(--u-merged-size);
   height: var(--u-merged-size);
   color: var(--u-text-color);
@@ -31799,7 +31799,7 @@
       const themeRef = useTheme(
         "Avatar",
         "-avatar",
-        style$1s,
+        style$1t,
         avatarLight,
         props,
         mergedClsPrefixRef
@@ -32010,7 +32010,7 @@
     }
   });
 
-  function self$1i() {
+  function self$1j() {
     return {
       gap: "-12px"
     };
@@ -32021,7 +32021,7 @@
     peers: {
       Avatar: avatarLight
     },
-    self: self$1i
+    self: self$1j
   });
 
   const avatarGroupDark = {
@@ -32030,7 +32030,7 @@
     peers: {
       Avatar: avatarDark
     },
-    self: self$1i
+    self: self$1j
   };
 
   var rtlStyle$n = cB("avatar-group", [cM("rtl", `
@@ -32047,7 +32047,7 @@
     style: rtlStyle$n
   };
 
-  var style$1r = cB("avatar-group", `
+  var style$1s = cB("avatar-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -32082,7 +32082,7 @@
       const mergedThemeRef = useTheme(
         "AvatarGroup",
         "-avatar-group",
-        style$1r,
+        style$1s,
         avatarGroupLight,
         props,
         mergedClsPrefixRef
@@ -32171,7 +32171,7 @@
     }
   });
 
-  function self$1h(vars) {
+  function self$1i(vars) {
     const {
       heightLarge,
       iconMedium,
@@ -32196,13 +32196,13 @@
   const backTopLight = {
     name: "BackTop",
     common: derived,
-    self: self$1h
+    self: self$1i
   };
 
   const backTopDark = {
     name: "BackTop",
     common: derived$1,
-    self: self$1h
+    self: self$1i
   };
 
   var BackTopIcon = /* @__PURE__ */ vue.h(
@@ -32216,7 +32216,7 @@
     /* @__PURE__ */ vue.h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" }, /* @__PURE__ */ vue.h("g", { transform: "translate(-139.000000, -4423.000000)", "fill-rule": "nonzero" }, /* @__PURE__ */ vue.h("g", { transform: "translate(120.000000, 4285.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(7.000000, 126.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" }, /* @__PURE__ */ vue.h("g", { transform: "translate(4.000000, 2.000000)" }, /* @__PURE__ */ vue.h("path", { d: "M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" }), /* @__PURE__ */ vue.h("path", { d: "M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" })))))))
   );
 
-  var style$1q = cB("back-top", `
+  var style$1r = cB("back-top", `
   position: fixed;
   right: 40px;
   bottom: 40px;
@@ -32355,7 +32355,7 @@
       const themeRef = useTheme(
         "BackTop",
         "-back-top",
-        style$1q,
+        style$1r,
         backTopLight,
         props,
         mergedClsPrefixRef
@@ -32506,7 +32506,7 @@
     }
   });
 
-  function self$1g(vars) {
+  function self$1h(vars) {
     const {
       brandQuaternary500,
       elementsPrimary,
@@ -32539,13 +32539,13 @@
   const badgeLight = {
     name: "Badge",
     common: derived,
-    self: self$1g
+    self: self$1h
   };
 
   const badgeDark = {
     name: "Badge",
     common: derived$1,
-    self: self$1g
+    self: self$1h
   };
 
   var rtlStyle$m = cB("badge", [cM("rtl", `
@@ -32562,7 +32562,7 @@
     style: rtlStyle$m
   };
 
-  var style$1p = c$1([c$1("@keyframes badge-wave-spread", {
+  var style$1q = c$1([c$1("@keyframes badge-wave-spread", {
     from: {
       boxShadow: "0 0 0.5px 0px var(--u-ripple-color)",
       opacity: 0.6
@@ -32676,7 +32676,7 @@
       const themeRef = useTheme(
         "Badge",
         "-badge",
-        style$1p,
+        style$1q,
         badgeLight,
         props,
         mergedClsPrefixRef
@@ -32812,7 +32812,7 @@
     }
   });
 
-  function self$1f(vars) {
+  function self$1g(vars) {
     const {
       fontWeightStrong,
       fontBodyMedium,
@@ -32835,16 +32835,16 @@
   const breadcrumbLight = {
     name: "Breadcrumb",
     common: derived,
-    self: self$1f
+    self: self$1g
   };
 
   const breadcrumbDark = {
     name: "Breadcrumb",
     common: derived$1,
-    self: self$1f
+    self: self$1g
   };
 
-  var style$1o = cB("breadcrumb", `
+  var style$1p = cB("breadcrumb", `
   white-space: nowrap;
   cursor: default;
   line-height: var(--u-item-line-height);
@@ -32914,7 +32914,7 @@
       const themeRef = useTheme(
         "Breadcrumb",
         "-breadcrumb",
-        style$1o,
+        style$1p,
         breadcrumbLight,
         props,
         mergedClsPrefixRef
@@ -33099,7 +33099,7 @@
       top: n1
     })])])])]);
   }
-  var style$1n = cB("button-group", `
+  var style$1o = cB("button-group", `
   flex-wrap: nowrap;
   display: inline-flex;
   position: relative;
@@ -33148,7 +33148,7 @@
     props: buttonGroupProps,
     setup(props) {
       const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-      useStyle("-button-group", style$1n, mergedClsPrefixRef);
+      useStyle("-button-group", style$1o, mergedClsPrefixRef);
       vue.provide(buttonGroupInjectionKey, props);
       const rtlEnabledRef = useRtl(
         "ButtonGroup",
@@ -39092,7 +39092,7 @@
     return resultDate.getTime();
   }
 
-  function self$1e(vars) {
+  function self$1f(vars) {
     const {
       borderRadius,
       fontWeightStrong,
@@ -39136,7 +39136,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$1e
+    self: self$1f
   });
 
   const calendarDark = {
@@ -39145,10 +39145,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$1e
+    self: self$1f
   };
 
-  var style$1m = c$1([cB("calendar", `
+  var style$1n = c$1([cB("calendar", `
     line-height: var(--u-line-height);
     font-size: var(--u-font-size);
     color: var(--u-text-color);
@@ -39287,7 +39287,7 @@
       const themeRef = useTheme(
         "Calendar",
         "-calendar",
-        style$1m,
+        style$1n,
         calendarLight,
         props,
         mergedClsPrefixRef
@@ -39575,7 +39575,7 @@
     paddingHuge: "27px 40px 28px"
   };
 
-  function self$1d(vars) {
+  function self$1e(vars) {
     const {
       borderRadius,
       fontWeight,
@@ -39641,13 +39641,13 @@
   const cardLight = {
     name: "Card",
     common: derived,
-    self: self$1d
+    self: self$1e
   };
 
   const cardDark$1 = {
     name: "Card",
     common: derived$1,
-    self: self$1d
+    self: self$1e
   };
 
   var rtlStyle$l = cB("card", [cM("rtl", `
@@ -39670,7 +39670,7 @@
 `, [c$1("&:first-child", {
     paddingTop: "var(--u-padding-bottom)"
   })]);
-  var style$1l = c$1([cB("card", `
+  var style$1m = c$1([cB("card", `
     font-size: var(--u-font-size);
     line-height: var(--u-line-height);
     font-weight: var(--u-font-weight);
@@ -39853,7 +39853,7 @@
       const themeRef = useTheme(
         "Card",
         "-card",
-        style$1l,
+        style$1m,
         cardLight,
         props,
         mergedClsPrefixRef
@@ -40436,7 +40436,7 @@
     }
   });
 
-  function self$1c(vars) {
+  function self$1d(vars) {
     const {
       textSecondary,
       textPrimary,
@@ -40471,10 +40471,10 @@
   const cardListLight = {
     name: "CardList",
     common: derived,
-    self: self$1c
+    self: self$1d
   };
 
-  var style$1k = cB("card-list-item", [c$1("&", {
+  var style$1l = cB("card-list-item", [c$1("&", {
     padding: "16px",
     borderRadius: "var(--u-border-radius)",
     display: "flex",
@@ -40595,7 +40595,7 @@
     props: cardListItemProps,
     setup(props, { slots }) {
       const { mergedClsPrefixRef } = useConfig(props);
-      useStyle("-card-list-item", style$1k, mergedClsPrefixRef);
+      useStyle("-card-list-item", style$1l, mergedClsPrefixRef);
       const isOpen = vue.ref(false);
       const toggle = () => {
         isOpen.value = !isOpen.value;
@@ -40726,7 +40726,7 @@
       const themeRef = useTheme(
         "CardList",
         "-card-list",
-        style$1k,
+        style$1l,
         cardListLight,
         props,
         mergedClsPrefixRef
@@ -40823,7 +40823,7 @@
     }
   });
 
-  function self$1b() {
+  function self$1c() {
     return {
       dotSize: "8px",
       dotColor: "rgba(255, 255, 255, .3)",
@@ -40837,13 +40837,13 @@
   const carouselLight = {
     name: "Carousel",
     common: derived,
-    self: self$1b
+    self: self$1c
   };
 
   const carouselDark = {
     name: "Carousel",
     common: derived$1,
-    self: self$1b
+    self: self$1c
   };
 
   const carouselMethodsInjectionKey = createInjectionKey("u-carousel-methods");
@@ -41127,7 +41127,7 @@
     }
   });
 
-  var style$1j = cB("carousel", `
+  var style$1k = cB("carousel", `
   position: relative;
   width: 100%;
   height: 100%;
@@ -42129,7 +42129,7 @@
       const themeRef = useTheme(
         "Carousel",
         "-carousel",
-        style$1j,
+        style$1k,
         carouselLight,
         props,
         mergedClsPrefixRef
@@ -42289,7 +42289,7 @@
     labelPadding: "0 16px"
   };
 
-  function self$1a(vars) {
+  function self$1b(vars) {
     const {
       lineHeightBodyLarge,
       fontBodyLarge,
@@ -42365,13 +42365,13 @@
   const checkboxLight = {
     name: "Checkbox",
     common: derived,
-    self: self$1a
+    self: self$1b
   };
 
   const checkboxDark = {
     name: "Checkbox",
     common: derived$1,
-    self: self$1a
+    self: self$1b
   };
 
   var rtlStyle$k = cB("checkbox", [cM("rtl", `
@@ -42383,7 +42383,7 @@
     style: rtlStyle$k
   };
 
-  function self$19(vars) {
+  function self$1a(vars) {
     const {
       borderRadius,
       heightMedium,
@@ -42424,7 +42424,7 @@
       Checkbox: checkboxLight,
       Empty: emptyLight
     },
-    self: self$19
+    self: self$1a
   });
 
   const cascaderDark = {
@@ -42437,14 +42437,14 @@
       Checkbox: checkboxDark,
       Empty: emptyLight
     },
-    self: self$19
+    self: self$1a
   };
 
   var CheckMark = /* @__PURE__ */ vue.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", class: "check-icon" }, /* @__PURE__ */ vue.h("path", { d: "M7.95833 14.6458C7.84722 14.6458 7.74306 14.6283 7.64583 14.5933C7.54861 14.5589 7.45833 14.5 7.375 14.4166L3.79167 10.8333C3.63889 10.6805 3.56583 10.4825 3.5725 10.2391C3.57972 9.99637 3.65972 9.79859 3.8125 9.64581C3.96528 9.49304 4.15972 9.41665 4.39583 9.41665C4.63195 9.41665 4.82639 9.49304 4.97917 9.64581L7.95833 12.625L15.0208 5.56248C15.1736 5.4097 15.3717 5.33331 15.615 5.33331C15.8578 5.33331 16.0556 5.4097 16.2083 5.56248C16.3611 5.71526 16.4375 5.91304 16.4375 6.15581C16.4375 6.39915 16.3611 6.5972 16.2083 6.74998L8.54167 14.4166C8.45833 14.5 8.36806 14.5589 8.27083 14.5933C8.17361 14.6283 8.06945 14.6458 7.95833 14.6458Z" }));
 
   var LineMark = /* @__PURE__ */ vue.h("svg", { width: "22", height: "24", viewBox: "0 0 22 24", class: "line-icon" }, /* @__PURE__ */ vue.h("path", { d: "M5.49998 13C5.24026 13 5.0224 12.904 4.8464 12.712C4.67101 12.5207 4.58331 12.2833 4.58331 12C4.58331 11.7167 4.67101 11.479 4.8464 11.287C5.0224 11.0957 5.24026 11 5.49998 11H16.5C16.7597 11 16.9773 11.0957 17.1526 11.287C17.3286 11.479 17.4166 11.7167 17.4166 12C17.4166 12.2833 17.3286 12.5207 17.1526 12.712C16.9773 12.904 16.7597 13 16.5 13H5.49998Z" }));
 
-  var style$1i = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
+  var style$1j = c$1([iconSwitchTransition(), c$1("@keyframes ripple", {
     from: {
       transform: "scale(0)"
     },
@@ -42658,7 +42658,7 @@
       const themeRef = useTheme(
         "Checkbox",
         "-checkbox",
-        style$1i,
+        style$1j,
         checkboxLight,
         props,
         mergedClsPrefixRef
@@ -43732,7 +43732,7 @@
     }
   });
 
-  var style$1h = c$1([cB("cascader-menu", `
+  var style$1i = c$1([cB("cascader-menu", `
     outline: none;
     position: relative;
     margin: 4px 0;
@@ -43974,7 +43974,7 @@
       const themeRef = useTheme(
         "Cascader",
         "-cascader",
-        style$1h,
+        style$1i,
         cascaderLight,
         props,
         mergedClsPrefixRef
@@ -44906,12 +44906,12 @@
     }
   };
 
-  function self$18() {
+  function self$19() {
     return commonVars$7;
   }
   const flexLight = {
     name: "Flex",
-    self: self$18
+    self: self$19
   };
 
   cB("space", [cM("rtl", `
@@ -45029,7 +45029,7 @@
     }
   });
 
-  function self$17(vars) {
+  function self$18(vars) {
     const {
       borderRadius,
       borderRadiusMedium,
@@ -45073,13 +45073,13 @@
   const listLight = {
     name: "List",
     common: derived,
-    self: self$17
+    self: self$18
   };
 
   const listDark$1 = {
     name: "List",
     common: derived$1,
-    self: self$17
+    self: self$18
   };
 
   var rtlStyle$j = cB("list", [cM("rtl", `
@@ -45098,6 +45098,58 @@
     style: rtlStyle$j
   };
 
+  function self$17(vars) {
+    const {
+      borderRadiusLarge,
+      elementsSecondary,
+      elementsTertiary,
+      textPrimary,
+      textSecondary,
+      textTertiary,
+      brandPrimary400,
+      staticGreen,
+      staticRed,
+      staticWhite
+    } = vars;
+    return {
+      messageBubbleBackgroundColorOwn: elementsTertiary,
+      messageBubbleBackgroundColorOther: elementsTertiary,
+      messageBubbleTextColorOwn: textPrimary,
+      messageBubbleTextColorOther: textPrimary,
+      messageTimeColor: textTertiary,
+      messageStatusReadColor: brandPrimary400,
+      messageStatusSuccessColor: staticGreen,
+      attachmentBackgroundColorOwn: staticWhite,
+      attachmentBackgroundColorOther: staticWhite,
+      messageErrorColor: staticRed,
+      messageBorderRadius: borderRadiusLarge,
+      unreadNotificationBackgroundColor: brandPrimary400,
+      unreadNotificationTextColor: elementsSecondary,
+      serviceMessageTextColor: textSecondary,
+      serviceMessageBackgroundColor: "transparent",
+      messageTitleColor: textPrimary
+    };
+  }
+  const messageBubbleLight = createTheme$1({
+    name: "MessageBubble",
+    common: derived,
+    peers: {
+      StatusIcon: iconLight
+    },
+    self: self$17
+  });
+
+  const messageBubbleDark = createTheme$1({
+    name: "MessageBubble",
+    common: derived$1,
+    peers: {
+      StatusIcon: iconDark$1
+    },
+    self: vars => ({
+      ...self$17(vars)
+    })
+  });
+
   function self$16(vars) {
     const {
       shadowDepth2
@@ -45236,7 +45288,7 @@
   const chatInputLight = {
     ...inputLight,
     self(vars) {
-      const originalInputSelf = self$1o(vars);
+      const originalInputSelf = self$1p(vars);
       const {
         elementsTertiary
       } = vars;
@@ -45256,7 +45308,7 @@
   const chatBadgeLight = {
     ...badgeLight,
     self(vars) {
-      const originalBadgeSelf = self$1g(vars);
+      const originalBadgeSelf = self$1h(vars);
       const {
         brandPrimary400,
         elementsSecondary
@@ -45335,6 +45387,7 @@
       Button: buttonLight,
       List: listLight,
       Typography: typographyLight,
+      MessageBubble: messageBubbleLight,
       StatusIcon: iconLight,
       FooterAttachIcon: iconLight,
       FooterSuffixIcon: iconLight,
@@ -45356,6 +45409,7 @@
       Button: buttonDark,
       List: listDark$1,
       Typography: typographyDark,
+      MessageBubble: messageBubbleDark,
       StatusIcon: iconDark$1,
       FooterAttachIcon: iconDark$1,
       FooterSuffixIcon: iconDark$1,
@@ -45471,7 +45525,7 @@
   };
   const listInjectionKey = createInjectionKey("u-list");
 
-  var style$1g = c$1([cB("align-start", `
+  var style$1h = c$1([cB("align-start", `
     align-self: self-start;
   `), cB("align-center", `
     align-self: center;
@@ -45604,7 +45658,7 @@
       const themeRef = useTheme(
         "List",
         "-list",
-        style$1g,
+        style$1h,
         listLight,
         props,
         mergedClsPrefixRef
@@ -46086,7 +46140,7 @@
     }
   });
 
-  var style$1f = cB("a", `
+  var style$1g = cB("a", `
   cursor: pointer;
   transition:
     color .3s var(--u-bezier),
@@ -46109,7 +46163,7 @@
       const themeRef = useTheme(
         "Typography",
         "-a",
-        style$1f,
+        style$1g,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46145,7 +46199,7 @@
     }
   });
 
-  var style$1e = cB("blockquote", `
+  var style$1f = cB("blockquote", `
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   margin: 0;
@@ -46184,7 +46238,7 @@
       const themeRef = useTheme(
         "Typography",
         "-blockquote",
-        style$1e,
+        style$1f,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46233,7 +46287,7 @@
     }
   });
 
-  var style$1d = cB("h", `
+  var style$1e = cB("h", `
   font-size: var(--u-font-size);
   font-weight: var(--u-font-weight);
   margin: var(--u-margin);
@@ -46278,7 +46332,7 @@
         mergedClsPrefixRef,
         inlineThemeDisabled
       } = useConfig(props);
-      const themeRef = useTheme("Typography", "-h", style$1d, typographyLight, props, mergedClsPrefixRef);
+      const themeRef = useTheme("Typography", "-h", style$1e, typographyLight, props, mergedClsPrefixRef);
       const cssVarsRef = vue.computed(() => {
         const {
           type
@@ -46342,7 +46396,7 @@
   const UH5$1 = createHeader("5");
   const UH6$1 = createHeader("6");
 
-  var style$1c = cB("hr", `
+  var style$1d = cB("hr", `
   margin: 12px 0;
   transition: border-color .3s var(--u-bezier);
   border-left: none;
@@ -46367,7 +46421,7 @@
       const themeRef = useTheme(
         "Typography",
         "-hr",
-        style$1c,
+        style$1d,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46421,7 +46475,7 @@
   `), c$1("&:last-child", `
     margin-bottom: 0;
   `)];
-  var style$1b = c$1([cB("ol", {
+  var style$1c = c$1([cB("ol", {
     fontSize: "var(--u-font-size)",
     padding: "var(--u-ol-padding)"
   }, [cM("align-text", {
@@ -46445,7 +46499,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$1b,
+        style$1c,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46498,7 +46552,7 @@
     }
   });
 
-  var style$1a = cB("p", `
+  var style$1b = cB("p", `
   box-sizing: border-box;
   transition: color .3s var(--u-bezier);
   margin: var(--u-margin);
@@ -46519,7 +46573,7 @@
       const themeRef = useTheme(
         "Typography",
         "-p",
-        style$1a,
+        style$1b,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46659,7 +46713,7 @@
       const themeRef = useTheme(
         "Typography",
         "-xl",
-        style$1b,
+        style$1c,
         typographyLight,
         props,
         mergedClsPrefixRef
@@ -46844,7 +46898,7 @@
 
   const uploadInjectionKey = createInjectionKey("u-upload");
 
-  var style$19 = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
+  var style$1a = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
         border: var(--u-dragger-border-hover);
@@ -47305,7 +47359,7 @@
   const cardDark = {
     name: "CardList",
     common: derived$1,
-    self: self$1c
+    self: self$1d
   };
 
   function self$11(vars) {
@@ -50573,7 +50627,7 @@
   };
   const imageContextKey = createInjectionKey("u-image");
 
-  var style$18 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+  var style$19 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -50657,7 +50711,7 @@
       const themeRef = useTheme(
         "Image",
         "-image",
-        style$18,
+        style$19,
         imageLight,
         props,
         mergedClsPrefixRef
@@ -51588,7 +51642,7 @@
     }
   });
 
-  var style$17 = c$1([c$1("@keyframes spin-rotate", `
+  var style$18 = c$1([c$1("@keyframes spin-rotate", `
     from {
       transform: rotate(0);
     }
@@ -51692,7 +51746,7 @@
       const themeRef = useTheme(
         "Spin",
         "-spin",
-        style$17,
+        style$18,
         spinLight,
         props,
         mergedClsPrefixRef
@@ -52949,7 +53003,7 @@
       const themeRef = useTheme(
         "Upload",
         "-upload",
-        style$19,
+        style$1a,
         uploadLight,
         props,
         mergedClsPrefixRef
@@ -53364,6 +53418,98 @@
     }
   });
 
+  var MessageBubbleType = /* @__PURE__ */(MessageBubbleType2 => {
+    MessageBubbleType2["MESSAGE"] = "message";
+    MessageBubbleType2["SERVICE"] = "service";
+    return MessageBubbleType2;
+  })(MessageBubbleType || {});
+  var MessageBubbleServiceVariant = /* @__PURE__ */(MessageBubbleServiceVariant2 => {
+    MessageBubbleServiceVariant2["UNREAD"] = "unread";
+    MessageBubbleServiceVariant2["SYSTEM"] = "system";
+    MessageBubbleServiceVariant2["EVENT"] = "event";
+    MessageBubbleServiceVariant2["DIVIDER"] = "divider";
+    return MessageBubbleServiceVariant2;
+  })(MessageBubbleServiceVariant || {});
+  var MessageBubbleStatus = /* @__PURE__ */(MessageBubbleStatus2 => {
+    MessageBubbleStatus2["READ"] = "read";
+    MessageBubbleStatus2["UNREAD"] = "unread";
+    MessageBubbleStatus2["PENDING"] = "pending";
+    MessageBubbleStatus2["RETRY"] = "retry";
+    return MessageBubbleStatus2;
+  })(MessageBubbleStatus || {});
+  var MessageBubbleAttachmentStatus = /* @__PURE__ */(MessageBubbleAttachmentStatus2 => {
+    MessageBubbleAttachmentStatus2["PENDING"] = "pending";
+    MessageBubbleAttachmentStatus2["UPLOADING"] = "uploading";
+    MessageBubbleAttachmentStatus2["FINISHED"] = "finished";
+    MessageBubbleAttachmentStatus2["ERROR"] = "error";
+    return MessageBubbleAttachmentStatus2;
+  })(MessageBubbleAttachmentStatus || {});
+  const statusIconMapper$1 = {
+    ["read" /* READ */]: CheckmarkDoneSharp,
+    ["pending" /* PENDING */]: MdTime,
+    ["retry" /* RETRY */]: Refresh,
+    ["unread" /* UNREAD */]: CheckmarkDoneSharp
+  };
+  const messageBubbleProps = {
+    ...useTheme.props,
+    type: {
+      type: String,
+      default: "message" /* MESSAGE */
+    },
+    serviceVariant: {
+      type: String,
+      default: "system" /* SYSTEM */
+    },
+    id: {
+      type: [String, Number, Symbol],
+      default: void 0
+    },
+    isOwn: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: [String, Function],
+      default: void 0
+    },
+    content: {
+      type: [String, Function],
+      default: void 0
+    },
+    timestamp: {
+      type: [String, Number, Date, Function],
+      default: void 0
+    },
+    status: {
+      type: String,
+      default: void 0
+    },
+    attachments: {
+      type: [Array, Object],
+      default: void 0
+    },
+    uploadProps: {
+      type: Object,
+      default: void 0
+    },
+    actions: {
+      type: Array,
+      default: void 0
+    },
+    retryText: {
+      type: String,
+      default: void 0
+    },
+    onRetry: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentDownload: {
+      type: Function,
+      default: void 0
+    }
+  };
+
   const dropdownMenuInjectionKey = createInjectionKey("u-dropdown-menu");
   const dropdownInjectionKey = createInjectionKey("u-dropdown");
   const dropdownOptionInjectionKey = createInjectionKey("u-dropdown-option");
@@ -53973,7 +54119,7 @@
     }
   });
 
-  var style$16 = cB("dropdown-menu", `
+  var style$17 = cB("dropdown-menu", `
   transform-origin: var(--v-transform-origin);
   background-color: var(--u-color);
   border-radius: var(--u-border-radius);
@@ -54220,7 +54366,7 @@
       const themeRef = useTheme(
         "Dropdown",
         "-dropdown",
-        style$16,
+        style$17,
         dropdownLight,
         props,
         mergedClsPrefixRef
@@ -54472,93 +54618,264 @@
     }
   });
 
-  var MessageStatus = /* @__PURE__ */(MessageStatus2 => {
-    MessageStatus2["READ"] = "read";
-    MessageStatus2["UNREAD"] = "unread";
-    MessageStatus2["PENDING"] = "pending";
-    MessageStatus2["RETRY"] = "retry";
-    MessageStatus2["INCOME"] = "income";
-    return MessageStatus2;
-  })(MessageStatus || {});
-  var ChatMessageType = /* @__PURE__ */(ChatMessageType2 => {
-    ChatMessageType2["TEXT"] = "text";
-    ChatMessageType2["FILE"] = "file";
-    ChatMessageType2["MARK"] = "mark";
-    return ChatMessageType2;
-  })(ChatMessageType || {});
-  var ChatAttachmentStatus = /* @__PURE__ */(ChatAttachmentStatus2 => {
-    ChatAttachmentStatus2["PENDING"] = "pending";
-    ChatAttachmentStatus2["UPLOADING"] = "uploading";
-    ChatAttachmentStatus2["FINISHED"] = "finished";
-    ChatAttachmentStatus2["ERROR"] = "error";
-    return ChatAttachmentStatus2;
-  })(ChatAttachmentStatus || {});
-  var ChatMarkType = /* @__PURE__ */(ChatMarkType2 => {
-    ChatMarkType2["SYSTEM"] = "system";
-    ChatMarkType2["EVENT"] = "event";
-    ChatMarkType2["DIVIDER"] = "divider";
-    return ChatMarkType2;
-  })(ChatMarkType || {});
-  var ChatBubbleActionKey = /* @__PURE__ */(ChatBubbleActionKey2 => {
-    ChatBubbleActionKey2["EDIT"] = "edit";
-    ChatBubbleActionKey2["COPY"] = "copy";
-    ChatBubbleActionKey2["DELETE"] = "delete";
-    return ChatBubbleActionKey2;
-  })(ChatBubbleActionKey || {});
-  const chatInjectionKey = createInjectionKey("chat");
+  var style$16 = cB("message-bubble", `
+  box-sizing: border-box;
+  width: 100%;
+`, [cE("message", `
+    display: flex;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+    width: 100%;
+  `, [cM("own", `
+      justify-content: flex-end;
+    `), cM("other", `
+      justify-content: flex-start;
+    `)]), cE("message-wrapper", `
+    max-width: 70%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex-shrink: 0;
+  `, [cM("own", `
+      align-items: flex-end;
+    `), cM("other", `
+      align-items: flex-start;
+    `)]), cE("bubble", `
+    border-radius: var(--u-message-bubble-border-radius);
+    font-size: 14px;
+    line-height: 20px;
+    word-wrap: break-word;
+    background-color: var(--u-message-bubble-background-color-other);
+    color: var(--u-message-bubble-text-color-other);
+    border-bottom-left-radius: 6px;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    gap: 12px;
+  `, [cM("own", `
+      background-color: var(--u-message-bubble-background-color-own);
+      color: var(--u-message-bubble-text-color-own);
+      border-bottom-left-radius: var(--u-message-bubble-border-radius);
+      border-bottom-right-radius: 6px;
+    `)]), cE("title", `
+    color: var(--u-message-bubble-title-color);
+    white-space: pre-wrap;
+  `), cE("text", `
+    white-space: pre-wrap;
+  `), cE("after-content", `
+    white-space: normal;
+  `), cE("meta", `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--u-message-bubble-time-color);
+    margin-top: 2px;
+  `, [cM("own", `
+      justify-content: flex-end;
+    `), cM("other", `
+      justify-content: flex-start;
+    `)]), cE("time", `
+    font-size: 11px;
+    color: var(--u-message-bubble-time-color);
+  `), cE("status", `
+    color: var(--u-message-bubble-status-success-color);
+    display: flex;
+    align-items: center;
+  `), cE("status-icon", `
+    color: var(--u-message-bubble-time-color);
+  `, [cM("read", `
+      color: var(--u-message-bubble-status-read-color);
+    `), cM("retry", `
+      color: var(--u-message-bubble-error-color);
+    `)]), cE("retry", `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+  `), cE("retry-icon", `
+    color: var(--u-message-bubble-error-color);
+  `), cE("retry-text", `
+    color: var(--u-message-bubble-error-color);
+    font-size: 11px;
+    font-weight: 500;
+  `), cE("service", `
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 12px 0;
+  `, [c$1("span", `
+      padding: 6px 12px;
+      border-radius: 8px;
+      color: var(--u-message-bubble-service-text-color);
+      background-color: var(--u-message-bubble-service-background-color);
+      text-align: center;
+    `), cM("unread", `
+      background-color: var(--u-message-bubble-unread-background-color);
+      color: var(--u-message-bubble-unread-text-color);
+      padding: 6px 12px;
+      margin: 8px 0;
+    `, [c$1("span", `
+        display: inline-block;
+        white-space: nowrap;
+        padding: 0;
+        border-radius: 0;
+        background-color: transparent;
+        color: inherit;
+      `)])]), c$1(".u-message-bubble__bubble--own .u-upload-file", `
+    background-color: var(--u-message-bubble-attachment-background-color-own);
+  `), c$1(".u-message-bubble__bubble--other .u-upload-file", `
+    background-color: var(--u-message-bubble-attachment-background-color-other);
+  `), c$1(".u-upload-file-list .u-upload-file.u-upload-file--text-type", `
+    margin-bottom: 0px;
+  `)]);
 
-  var ChatAttachmentComponent = vue.defineComponent({
-    name: "ChatAttachment",
-    props: {
-      message: {
-        type: Object,
-        required: true
-      },
-      attachments: {
-        type: Array,
-        required: true
-      },
-      uploadProps: {
-        type: Object,
-        default: void 0
-      },
-      withPadding: {
-        type: Boolean,
-        default: false
-      }
-    },
+  var _UMessageBubble = vue.defineComponent({
+    name: "MessageBubble",
+    props: messageBubbleProps,
+    slots: Object,
     setup(props, { slots }) {
-      const UChat = vue.inject(chatInjectionKey, null);
-      const onAttachmentDownload = UChat?.onAttachmentDownload;
+      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+      const themeRef = useTheme(
+        "MessageBubble",
+        "-message-bubble",
+        style$16,
+        messageBubbleLight,
+        props,
+        mergedClsPrefixRef
+      );
+      const contextMenuShow = vue.ref(false);
+      const mergedRetryTextRef = vue.computed(
+        () => props.retryText ?? "Retry"
+      );
+      const normalizedAttachmentsRef = vue.computed(() => {
+        if (!props.attachments)
+          return [];
+        return Array.isArray(props.attachments) ? props.attachments : [props.attachments];
+      });
+      const messagePayloadRef = vue.computed(() => ({
+        id: props.id,
+        isOwn: props.isOwn,
+        title: props.title,
+        content: props.content,
+        timestamp: props.timestamp,
+        status: props.status,
+        attachments: normalizedAttachmentsRef.value
+      }));
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            messageBubbleBackgroundColorOwn,
+            messageBubbleBackgroundColorOther,
+            messageBubbleTextColorOwn,
+            messageBubbleTextColorOther,
+            messageTimeColor,
+            messageStatusReadColor,
+            messageStatusSuccessColor,
+            attachmentBackgroundColorOwn,
+            attachmentBackgroundColorOther,
+            messageErrorColor,
+            messageBorderRadius,
+            unreadNotificationBackgroundColor,
+            unreadNotificationTextColor,
+            serviceMessageTextColor,
+            serviceMessageBackgroundColor,
+            messageTitleColor
+          }
+        } = themeRef.value;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-message-bubble-background-color-own": messageBubbleBackgroundColorOwn,
+          "--u-message-bubble-background-color-other": messageBubbleBackgroundColorOther,
+          "--u-message-bubble-text-color-own": messageBubbleTextColorOwn,
+          "--u-message-bubble-text-color-other": messageBubbleTextColorOther,
+          "--u-message-bubble-time-color": messageTimeColor,
+          "--u-message-bubble-status-read-color": messageStatusReadColor,
+          "--u-message-bubble-status-success-color": messageStatusSuccessColor,
+          "--u-message-bubble-attachment-background-color-own": attachmentBackgroundColorOwn,
+          "--u-message-bubble-attachment-background-color-other": attachmentBackgroundColorOther,
+          "--u-message-bubble-error-color": messageErrorColor,
+          "--u-message-bubble-border-radius": messageBorderRadius,
+          "--u-message-bubble-unread-background-color": unreadNotificationBackgroundColor,
+          "--u-message-bubble-unread-text-color": unreadNotificationTextColor,
+          "--u-message-bubble-service-text-color": serviceMessageTextColor,
+          "--u-message-bubble-service-background-color": serviceMessageBackgroundColor,
+          "--u-message-bubble-title-color": messageTitleColor
+        };
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass("message-bubble", void 0, cssVarsRef, props) : void 0;
+      const messageContextMenuOptions = vue.computed(() => {
+        if (!props.actions || props.actions.length === 0) {
+          return [];
+        }
+        const result = [];
+        for (const action of props.actions) {
+          if (action.visible && !action.visible(messagePayloadRef.value)) {
+            continue;
+          }
+          result.push({
+            key: action.key,
+            label: typeof action.label === "function" ? action.label() : action.label
+          });
+        }
+        return result;
+      });
+      const resolveRenderContent = (content) => {
+        if (typeof content === "function") {
+          return content();
+        }
+        if (content instanceof Date) {
+          return content.toString();
+        }
+        return content;
+      };
       const getThumbnailUrl = (attachment) => {
         const url = [attachment.preview, attachment.thumbnail].find(
           (value) => typeof value === "string"
         );
         return url ?? null;
       };
-      const handleDownload = async (file) => {
-        if (onAttachmentDownload?.value) {
-          const attachment = props.attachments.find(
-            (att) => att.name === file.name
+      const handleAttachmentDownload = async (file) => {
+        if (props.onAttachmentDownload) {
+          const attachment = normalizedAttachmentsRef.value.find(
+            (item) => item.name === file.name
           );
           if (attachment) {
             try {
-              await onAttachmentDownload.value(attachment);
+              await props.onAttachmentDownload(attachment);
               return false;
-            } catch (error) {
-              console.error("Download failed:", error);
+            } catch {
               return false;
             }
           }
         }
         return true;
       };
-      const renderAttachment = () => {
-        const fileList = props.attachments.map(
+      const handleRetryClick = () => {
+        props.onRetry?.(messagePayloadRef.value);
+      };
+      const handleContextMenuSelect = (key) => {
+        if (!props.actions || props.actions.length === 0) {
+          contextMenuShow.value = false;
+          return;
+        }
+        const action = props.actions.find((action2) => action2.key === key);
+        if (action) {
+          action.handler(messagePayloadRef.value);
+        }
+        contextMenuShow.value = false;
+      };
+      const renderAttachment = (withPadding = false) => {
+        if (slots.messageAttachment) {
+          return slots.messageAttachment(messagePayloadRef.value);
+        }
+        const fileList = normalizedAttachmentsRef.value.map(
           (attachment) => ({
-            id: `${String(attachment.id)}`,
+            id: String(attachment.id),
             name: attachment.name,
-            status: attachment.status || ChatAttachmentStatus.FINISHED,
+            status: attachment.status || MessageBubbleAttachmentStatus.FINISHED,
             percentage: attachment.percentage ?? null,
             url: attachment.url ?? null,
             thumbnailUrl: getThumbnailUrl(attachment),
@@ -54572,48 +54889,274 @@
           {
             abstract: true,
             fileList,
-            fileListStyle: props.withPadding ? {
+            fileListStyle: withPadding ? {
               display: "flex",
               flexDirection: "column",
               gap: "2px",
               marginTop: "0"
             } : void 0,
             showRemoveButton: false,
-            showDownloadButton: props.attachments.some(
-              (attachment) => attachment.status === ChatAttachmentStatus.FINISHED && attachment.url && attachment.url !== "#"
+            showDownloadButton: normalizedAttachmentsRef.value.some(
+              (attachment) => attachment.status === MessageBubbleAttachmentStatus.FINISHED && attachment.url && attachment.url !== "#"
             ),
-            showRetryButton: props.attachments.some(
-              (attachment) => attachment.status === ChatAttachmentStatus.ERROR
+            showRetryButton: normalizedAttachmentsRef.value.some(
+              (attachment) => attachment.status === MessageBubbleAttachmentStatus.ERROR
             ),
-            onDownload: handleDownload,
+            onDownload: handleAttachmentDownload,
             ...props.uploadProps
           },
           {
             default: () => /* @__PURE__ */ vue.h(_UUploadFileList, null, {
               "upload-file-title": slots["upload-file-title"] ? ({ file }) => slots["upload-file-title"]?.(file) : void 0,
               "upload-file-subtitle": slots["upload-file-subtitle"] ? ({ file }) => slots["upload-file-subtitle"]?.(file) : ({ file }) => {
-                const attachment = props.attachments.find(
-                  (attachment2) => attachment2.name === file.name
+                const attachment = normalizedAttachmentsRef.value.find(
+                  (item) => item.name === file.name
                 );
                 return /* @__PURE__ */ vue.h("span", { style: { fontSize: "12px", color: "#999" } }, attachment?.size || file.file?.size);
               }
             })
           }
         );
-        if (props.withPadding) {
+        if (withPadding) {
           return /* @__PURE__ */ vue.h("div", { style: { padding: "2px" } }, uploadComponent);
         }
         return uploadComponent;
       };
-      return () => {
-        if (slots.default) {
-          return slots.default(props.message);
+      const renderMessage = () => {
+        const hasBubbleActionsSlot = slots.bubbleActions !== void 0;
+        const hasBubbleActionsConfig = Boolean(
+          props.actions && props.actions.length > 0
+        );
+        const hasTitle = Boolean(props.title || slots.title);
+        const afterContentSlot = slots.afterContent || slots["after-content"];
+        const hasAfterContent = Boolean(afterContentSlot);
+        const hasContentInsideBubble = Boolean(
+          props.content || slots.default || hasAfterContent || hasTitle || normalizedAttachmentsRef.value.length > 1
+        );
+        const messageBubbleContent = hasContentInsideBubble ? /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefixRef.value}-message-bubble__bubble`,
+              props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__bubble--own` : `${mergedClsPrefixRef.value}-message-bubble__bubble--other`
+            ]
+          },
+          hasTitle && /* @__PURE__ */ vue.h(
+            _UText,
+            {
+              class: `${mergedClsPrefixRef.value}-message-bubble__title`,
+              variant: "body-l-semi-bold"
+            },
+            slots.title ? slots.title(messagePayloadRef.value) : resolveRenderContent(props.title)
+          ),
+          normalizedAttachmentsRef.value.length > 0 && renderAttachment(true),
+          (props.content || slots.default) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content)),
+          hasAfterContent && /* @__PURE__ */ vue.h(
+            "div",
+            {
+              class: `${mergedClsPrefixRef.value}-message-bubble__after-content`
+            },
+            afterContentSlot?.(messagePayloadRef.value)
+          )
+        ) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefixRef.value}-message-bubble__message`,
+              props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message--own` : `${mergedClsPrefixRef.value}-message-bubble__message--other`
+            ]
+          },
+          /* @__PURE__ */ vue.h(
+            "div",
+            {
+              class: [
+                `${mergedClsPrefixRef.value}-message-bubble__message-wrapper`,
+                props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__message-wrapper--own` : `${mergedClsPrefixRef.value}-message-bubble__message-wrapper--other`
+              ]
+            },
+            hasBubbleActionsSlot ? /* @__PURE__ */ vue.h(
+              "div",
+              {
+                onContextmenu: (event) => {
+                  event.preventDefault();
+                  contextMenuShow.value = false;
+                  void vue.nextTick().then(() => {
+                    contextMenuShow.value = true;
+                  });
+                }
+              },
+              slots.bubbleActions?.(messagePayloadRef.value),
+              messageBubbleContent
+            ) : hasBubbleActionsConfig ? /* @__PURE__ */ vue.h(
+              _UDropdown,
+              {
+                show: contextMenuShow.value,
+                trigger: "manual",
+                placement: "bottom-start",
+                options: messageContextMenuOptions.value,
+                onSelect: handleContextMenuSelect,
+                onUpdateShow: (show) => {
+                  contextMenuShow.value = show;
+                },
+                onClickoutside: () => {
+                  contextMenuShow.value = false;
+                }
+              },
+              {
+                default: () => /* @__PURE__ */ vue.h(
+                  "div",
+                  {
+                    onContextmenu: (event) => {
+                      event.preventDefault();
+                      contextMenuShow.value = false;
+                      void vue.nextTick().then(() => {
+                        contextMenuShow.value = true;
+                      });
+                    }
+                  },
+                  messageBubbleContent
+                )
+              }
+            ) : messageBubbleContent,
+            /* @__PURE__ */ vue.h(
+              "div",
+              {
+                class: [
+                  `${mergedClsPrefixRef.value}-message-bubble__meta`,
+                  props.isOwn ? `${mergedClsPrefixRef.value}-message-bubble__meta--own` : `${mergedClsPrefixRef.value}-message-bubble__meta--other`
+                ]
+              },
+              props.status === MessageBubbleStatus.RETRY ? /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__retry`,
+                  onClick: handleRetryClick
+                },
+                /* @__PURE__ */ vue.h(
+                  UIcon$1,
+                  {
+                    size: 16,
+                    component: statusIconMapper$1[MessageBubbleStatus.RETRY],
+                    class: `${mergedClsPrefixRef.value}-message-bubble__retry-icon`,
+                    theme: themeRef.value.peers.StatusIcon,
+                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
+                  }
+                ),
+                /* @__PURE__ */ vue.h(
+                  "span",
+                  {
+                    class: `${mergedClsPrefixRef.value}-message-bubble__retry-text`
+                  },
+                  mergedRetryTextRef.value
+                )
+              ) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
+                "span",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__time`
+                },
+                resolveRenderContent(props.timestamp)
+              ), props.isOwn && props.status && /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefixRef.value}-message-bubble__status`
+                },
+                slots.messageStatus ? slots.messageStatus(messagePayloadRef.value) : statusIconMapper$1[props.status] && /* @__PURE__ */ vue.h(
+                  UIcon$1,
+                  {
+                    size: 16,
+                    component: statusIconMapper$1[props.status],
+                    class: [
+                      `${mergedClsPrefixRef.value}-message-bubble__status-icon`,
+                      `${mergedClsPrefixRef.value}-message-bubble__status-icon--${String(props.status)}`
+                    ],
+                    theme: themeRef.value.peers.StatusIcon,
+                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
+                  }
+                )
+              ))
+            )
+          )
+        );
+      };
+      const renderService = () => {
+        if (slots.service) {
+          return slots.service(props.serviceVariant);
         }
-        return renderAttachment();
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefixRef.value}-message-bubble__service`,
+              `${mergedClsPrefixRef.value}-message-bubble__service--${props.serviceVariant}`
+            ]
+          },
+          props.content && /* @__PURE__ */ vue.h("span", null, resolveRenderContent(props.content))
+        );
+      };
+      return {
+        mergedClsPrefixRef,
+        inlineThemeDisabled,
+        cssVars: cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender,
+        renderMessage,
+        renderService
       };
+    },
+    render() {
+      this.onRender?.();
+      return /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [`${this.mergedClsPrefixRef}-message-bubble`, this.themeClass],
+          style: this.inlineThemeDisabled ? void 0 : this.cssVars
+        },
+        this.type === MessageBubbleType.SERVICE ? this.renderService() : this.renderMessage()
+      );
     }
   });
 
+  var MessageStatus = /* @__PURE__ */(MessageStatus2 => {
+    MessageStatus2["READ"] = "read";
+    MessageStatus2["UNREAD"] = "unread";
+    MessageStatus2["PENDING"] = "pending";
+    MessageStatus2["RETRY"] = "retry";
+    MessageStatus2["INCOME"] = "income";
+    return MessageStatus2;
+  })(MessageStatus || {});
+  var ChatMessageType = /* @__PURE__ */(ChatMessageType2 => {
+    ChatMessageType2["TEXT"] = "text";
+    ChatMessageType2["FILE"] = "file";
+    ChatMessageType2["MARK"] = "mark";
+    return ChatMessageType2;
+  })(ChatMessageType || {});
+  var ChatAttachmentStatus = /* @__PURE__ */(ChatAttachmentStatus2 => {
+    ChatAttachmentStatus2["PENDING"] = "pending";
+    ChatAttachmentStatus2["UPLOADING"] = "uploading";
+    ChatAttachmentStatus2["FINISHED"] = "finished";
+    ChatAttachmentStatus2["ERROR"] = "error";
+    return ChatAttachmentStatus2;
+  })(ChatAttachmentStatus || {});
+  var ChatMarkType = /* @__PURE__ */(ChatMarkType2 => {
+    ChatMarkType2["SYSTEM"] = "system";
+    ChatMarkType2["EVENT"] = "event";
+    ChatMarkType2["DIVIDER"] = "divider";
+    return ChatMarkType2;
+  })(ChatMarkType || {});
+  var ChatBubbleActionKey = /* @__PURE__ */(ChatBubbleActionKey2 => {
+    ChatBubbleActionKey2["EDIT"] = "edit";
+    ChatBubbleActionKey2["COPY"] = "copy";
+    ChatBubbleActionKey2["DELETE"] = "delete";
+    return ChatBubbleActionKey2;
+  })(ChatBubbleActionKey || {});
+  const chatInjectionKey = createInjectionKey("chat");
+  const markTypeToServiceVariantMap = {
+    ["system" /* SYSTEM */]: MessageBubbleServiceVariant.SYSTEM,
+    ["event" /* EVENT */]: MessageBubbleServiceVariant.EVENT,
+    ["divider" /* DIVIDER */]: MessageBubbleServiceVariant.DIVIDER
+  };
+
   var style$15 = cB("chat", `
   height: 100%;
   background-color: transparent;
@@ -54744,7 +55287,10 @@
           height: 100%;
           max-height: 100%;
           min-height: 0;
-        `, [cE("header", `
+        `, [cM("standalone", `
+            border: none;
+            border-radius: 0;
+          `), cE("header", `
             border-bottom: 1px solid var(--u-border-color);
             width: 100%;
             padding: 24px 20px 10px 24px;
@@ -54994,12 +55540,6 @@
     background-color: var(--u-attachment-background-color-other);
   `)]);
 
-  const statusIconMapper$1 = {
-    [MessageStatus.READ]: CheckmarkDoneSharp,
-    [MessageStatus.PENDING]: MdTime,
-    [MessageStatus.RETRY]: Refresh,
-    [MessageStatus.UNREAD]: CheckmarkDoneSharp
-  };
   const chatMessagesProps = {
     ...useTheme.props,
     messages: {
@@ -55059,8 +55599,21 @@
       const { mergedClsPrefixRef } = useConfig(props);
       const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
-      const contextMenuShow = vue.ref(false);
-      const contextMenuMessage = vue.ref();
+      const messageBubbleThemeOverridesRef = vue.computed(() => {
+        const { self, peerOverrides } = themeRef.value;
+        return {
+          messageBubbleBackgroundColorOwn: self.messageBubbleBackgroundColorOwn,
+          messageBubbleBackgroundColorOther: self.messageBubbleBackgroundColorOther,
+          messageBubbleTextColorOwn: self.messageBubbleTextColorOwn,
+          messageBubbleTextColorOther: self.messageBubbleTextColorOther,
+          messageTimeColor: self.messageTimeColor,
+          attachmentBackgroundColorOwn: self.attachmentBackgroundColorOwn,
+          attachmentBackgroundColorOther: self.attachmentBackgroundColorOther,
+          unreadNotificationBackgroundColor: self.unreadNotificationBackgroundColor,
+          unreadNotificationTextColor: self.unreadNotificationTextColor,
+          ...peerOverrides.MessageBubble
+        };
+      });
       const cssVarsRef = vue.computed(() => {
         const {
           common: {
@@ -55148,49 +55701,23 @@
       const handleMessageRetry = (message) => {
         props.onMessageRetry?.(message);
       };
-      const messageContextMenuOptions = vue.computed(() => {
-        const message = contextMenuMessage.value;
-        if (!message)
-          return;
+      const getMessageBubbleActions = (message) => {
         const bubbleActions = UChat?.bubbleActionsRef?.value;
-        if (!bubbleActions || bubbleActions.length === 0) {
-          return [];
-        }
-        const result = [];
-        for (const action of bubbleActions) {
-          if (action.visible && !action.visible(message)) {
-            continue;
-          }
-          const label = typeof action.label === "function" ? action.label() : action.label;
-          result.push({
-            label,
-            key: String(action.key)
-          });
+        if (!bubbleActions?.length) {
+          return void 0;
         }
-        return result;
-      });
-      const handleContextMenuSelect = (key) => {
-        const message = contextMenuMessage.value;
-        if (!message)
-          return;
-        if (key === ChatBubbleActionKey.EDIT) {
-          const startEditing = UChat?.startEditingMessage?.value;
-          if (startEditing) {
-            startEditing(message);
+        return bubbleActions.filter((action) => !action.visible || action.visible(message)).map((action) => ({
+          key: String(action.key),
+          label: action.label,
+          handler: () => {
+            if (action.key === ChatBubbleActionKey.EDIT) {
+              const startEditing = UChat?.startEditingMessage?.value;
+              startEditing?.(message);
+              return;
+            }
+            action.handler(message);
           }
-          contextMenuShow.value = false;
-          return;
-        }
-        const bubbleActions = UChat?.bubbleActionsRef?.value;
-        if (!bubbleActions)
-          return;
-        const action = bubbleActions.find(
-          (action2) => action2.key === key
-        );
-        if (action) {
-          action.handler(message);
-        }
-        contextMenuShow.value = false;
+        }));
       };
       const renderDateSeparator = (date) => {
         return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` }, /* @__PURE__ */ vue.h("span", null, date));
@@ -55198,208 +55725,82 @@
       const renderUnreadNotification = () => {
         const count = props.unreadNotificationCount ?? unreadMessagesCount.value;
         return /* @__PURE__ */ vue.h(
-          "div",
+          _UMessageBubble,
           {
-            class: `${mergedClsPrefixRef.value}-chat-main__unread-notification`
-          },
-          /* @__PURE__ */ vue.h("span", null, count, " ", mergedUnreadNotificationTextRef.value)
+            type: MessageBubbleType.SERVICE,
+            serviceVariant: MessageBubbleServiceVariant.UNREAD,
+            content: `${count} ${mergedUnreadNotificationTextRef.value}`,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
+          }
         );
       };
       const renderMarkMessage = (message) => {
-        const markTypeClass = message.markType === ChatMarkType.SYSTEM ? "system" : message.markType === ChatMarkType.EVENT ? "event" : "divider";
+        const serviceVariant = markTypeToServiceVariantMap[message.markType ?? ChatMarkType.DIVIDER];
         return /* @__PURE__ */ vue.h(
-          "div",
+          _UMessageBubble,
           {
-            key: message.id,
-            class: [
-              `${mergedClsPrefixRef.value}-chat-main__mark`,
-              `${mergedClsPrefixRef.value}-chat-main__mark--${markTypeClass}`
-            ]
-          },
-          message.content && /* @__PURE__ */ vue.h("span", null, message.content)
+            key: String(message.id),
+            type: MessageBubbleType.SERVICE,
+            serviceVariant,
+            content: message.content,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
+          }
         );
       };
       const renderMessage = (message) => {
-        const isOwn = message.isOwn;
         const attachments = message.attachment ? Array.isArray(message.attachment) ? message.attachment : [message.attachment] : [];
-        const isContextMenuForThisMessage = contextMenuShow.value && contextMenuMessage.value?.id === message.id;
-        const hasBubbleActionsSlot = slots.bubbleActions !== void 0;
-        const hasBubbleActionsConfig = UChat?.bubbleActionsRef?.value && UChat.bubbleActionsRef.value.length > 0;
-        const messageBubbleContent = message.content || attachments.length > 1 ? /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: [
-              `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-              isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-bubble--own` : `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`
-            ]
-          },
-          attachments.length > 0 && /* @__PURE__ */ vue.h(
-            ChatAttachmentComponent,
-            {
-              message,
-              attachments,
-              uploadProps: props.uploadProps,
-              withPadding: true
-            },
-            {
-              default: slots.messageAttachment,
-              "upload-file-title": slots.messageAttachmentTitle,
-              "upload-file-subtitle": slots.messageAttachmentSubtitle
-            }
-          ),
-          message.content && /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${mergedClsPrefixRef.value}-chat-main__message-text`
-            },
-            message.content
-          )
-        ) : attachments.length === 1 ? /* @__PURE__ */ vue.h(
-          ChatAttachmentComponent,
+        const messageBubbleAttachments = attachments.map((attachment) => ({
+          id: attachment.id,
+          name: attachment.name,
+          url: attachment.url,
+          size: attachment.size,
+          thumbnail: typeof attachment.thumbnail === "string" ? attachment.thumbnail : void 0,
+          preview: typeof attachment.preview === "string" ? attachment.preview : void 0,
+          status: attachment.status ? String(attachment.status) : void 0,
+          percentage: attachment.percentage,
+          type: attachment.type
+        }));
+        const handleMessageBubbleRetry = () => {
+          handleMessageRetry(message);
+        };
+        const handleMessageBubbleAttachmentDownload = (attachment) => {
+          const originalAttachment = attachments.find(
+            (item) => String(item.id) === String(attachment.id)
+          );
+          if (originalAttachment && UChat?.onAttachmentDownload?.value) {
+            return UChat.onAttachmentDownload.value(originalAttachment);
+          }
+        };
+        return /* @__PURE__ */ vue.h(
+          _UMessageBubble,
           {
-            message,
-            attachments,
-            uploadProps: props.uploadProps
+            key: String(message.id),
+            type: MessageBubbleType.MESSAGE,
+            isOwn: Boolean(message.isOwn),
+            content: message.content,
+            timestamp: message.timestamp,
+            title: message.title,
+            status: message.status,
+            attachments: messageBubbleAttachments,
+            uploadProps: props.uploadProps,
+            retryText: mergedRetryTextRef.value,
+            actions: getMessageBubbleActions(message),
+            onRetry: handleMessageBubbleRetry,
+            onAttachmentDownload: handleMessageBubbleAttachmentDownload,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           },
           {
-            default: slots.messageAttachment,
+            bubbleActions: slots.bubbleActions ? () => slots.bubbleActions?.(message) : void 0,
+            messageStatus: slots.messageStatus ? () => slots.messageStatus?.(message) : void 0,
+            messageAttachment: slots.messageAttachment ? () => slots.messageAttachment?.(message) : void 0,
+            afterContent: slots.messageAfterContent ? () => slots.messageAfterContent?.(message) : void 0,
             "upload-file-title": slots.messageAttachmentTitle,
             "upload-file-subtitle": slots.messageAttachmentSubtitle
           }
-        ) : null;
-        const messageContent = /* @__PURE__ */ vue.h(
-          "div",
-          {
-            key: message.id,
-            class: [
-              `${mergedClsPrefixRef.value}-chat-main__message`,
-              isOwn ? `${mergedClsPrefixRef.value}-chat-main__message--own` : `${mergedClsPrefixRef.value}-chat-main__message--other`
-            ]
-          },
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: [
-                `${mergedClsPrefixRef.value}-chat-main__message-wrapper`,
-                isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-wrapper--own` : `${mergedClsPrefixRef.value}-chat-main__message-wrapper--other`
-              ]
-            },
-            hasBubbleActionsSlot ? /* @__PURE__ */ vue.h(
-              "div",
-              {
-                onContextmenu: (e) => {
-                  e.preventDefault();
-                  contextMenuShow.value = false;
-                  void vue.nextTick().then(() => {
-                    contextMenuShow.value = true;
-                    contextMenuMessage.value = message;
-                  });
-                }
-              },
-              slots.bubbleActions?.(message),
-              messageBubbleContent
-            ) : hasBubbleActionsConfig ? /* @__PURE__ */ vue.h(
-              _UDropdown,
-              {
-                show: isContextMenuForThisMessage,
-                onUpdateShow: (show) => {
-                  if (!show && contextMenuMessage.value?.id === message.id) {
-                    contextMenuShow.value = false;
-                  }
-                },
-                onClickoutside: () => {
-                  if (contextMenuMessage.value?.id === message.id) {
-                    contextMenuShow.value = false;
-                  }
-                },
-                trigger: "manual",
-                placement: "bottom-start",
-                options: messageContextMenuOptions.value,
-                onSelect: handleContextMenuSelect
-              },
-              {
-                default: () => /* @__PURE__ */ vue.h(
-                  "div",
-                  {
-                    onContextmenu: (event) => {
-                      event.preventDefault();
-                      contextMenuShow.value = false;
-                      void vue.nextTick().then(() => {
-                        contextMenuShow.value = true;
-                        contextMenuMessage.value = message;
-                      });
-                    }
-                  },
-                  messageBubbleContent
-                )
-              }
-            ) : messageBubbleContent,
-            /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: [
-                  `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                  isOwn ? `${mergedClsPrefixRef.value}-chat-main__message-meta--own` : `${mergedClsPrefixRef.value}-chat-main__message-meta--other`,
-                  message.status === MessageStatus.RETRY && `${mergedClsPrefixRef.value}-chat-main__message-meta--retry`
-                ]
-              },
-              message.status === MessageStatus.RETRY ? /* @__PURE__ */ vue.h(
-                "div",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-retry`,
-                  onClick: () => {
-                    handleMessageRetry(message);
-                  },
-                  style: { cursor: "pointer" }
-                },
-                /* @__PURE__ */ vue.h(
-                  UIcon$1,
-                  {
-                    size: 16,
-                    component: statusIconMapper$1[MessageStatus.RETRY],
-                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-icon`,
-                    theme: themeRef.value.peers.StatusIcon,
-                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
-                  }
-                ),
-                /* @__PURE__ */ vue.h(
-                  "span",
-                  {
-                    class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text`
-                  },
-                  mergedRetryTextRef.value
-                )
-              ) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
-                "span",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-time`
-                },
-                message.timestamp
-              ), isOwn && message.status && /* @__PURE__ */ vue.h(
-                "div",
-                {
-                  class: `${mergedClsPrefixRef.value}-chat-main__message-status`
-                },
-                slots.messageStatus ? slots.messageStatus(message) : statusIconMapper$1[message.status] && /* @__PURE__ */ vue.h(
-                  UIcon$1,
-                  {
-                    size: 16,
-                    component: statusIconMapper$1[message.status],
-                    class: [
-                      `${mergedClsPrefixRef.value}-chat-main__message-status-icon`,
-                      `${mergedClsPrefixRef.value}-chat-main__message-status-icon--${String(
-                      message.status
-                    )}`
-                    ],
-                    theme: themeRef.value.peers.StatusIcon,
-                    themeOverrides: themeRef.value.peerOverrides.StatusIcon
-                  }
-                )
-              ))
-            )
-          )
         );
-        return messageContent;
       };
       const renderSkeletonMessage = (isOwn, index) => {
         return /* @__PURE__ */ vue.h(
@@ -55451,10 +55852,6 @@
         renderSkeletonMessage,
         renderDateSeparator,
         renderUnreadNotification,
-        contextMenuShow,
-        contextMenuMessage,
-        messageContextMenuOptions,
-        handleContextMenuSelect,
         cssVars: cssVarsRef,
         themeClass: themeClassHandle?.themeClass,
         onRender: themeClassHandle?.onRender
@@ -55561,89 +55958,323 @@
               background: "transparent"
             }
           },
-          /* @__PURE__ */ vue.h(
-            "div",
-            {
-              class: `${mergedClsPrefixRef}-chat-main__messages-container`,
-              onContextmenu: (event) => {
-                const target = event.target;
-                const messagesContainer = event.currentTarget;
-                if (target === messagesContainer) {
-                  event.preventDefault();
-                  this.contextMenuShow = false;
-                }
+          /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` }, messagesWithDates.map(
+            (item) => {
+              if (item.type === "date-separator") {
+                return renderDateSeparator(item.date ?? "");
               }
-            },
-            messagesWithDates.map(
-              (item) => {
-                if (item.type === "date-separator") {
-                  return renderDateSeparator(item.date ?? "");
-                }
-                if (item.type === "unread-notification") {
-                  return renderUnreadNotification();
-                }
-                const message = item;
-                if (message.type === ChatMessageType.MARK) {
-                  return renderMarkMessage(message);
-                }
-                return renderMessage(message);
+              if (item.type === "unread-notification") {
+                return renderUnreadNotification();
               }
-            )
-          )
+              const message = item;
+              if (message.type === ChatMessageType.MARK) {
+                return renderMarkMessage(message);
+              }
+              return renderMessage(message);
+            }
+          ))
         )
       );
     }
   });
 
   const SENDING_DELAY = 100;
-  var ChatMainArea = vue.defineComponent({
+  const chatMainAreaProps = {
+    ...useTheme.props,
+    selectedChat: {
+      type: Object,
+      default: void 0
+    },
+    messages: {
+      type: Array,
+      default: () => []
+    },
+    typingChatIds: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingCount: {
+      type: Number,
+      default: 10
+    },
+    headerButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerIconProps: {
+      type: Object,
+      default: void 0
+    },
+    headerShareButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerProfileButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerCloseButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    headerShareIconProps: {
+      type: Object,
+      default: void 0
+    },
+    headerProfileIconProps: {
+      type: Object,
+      default: void 0
+    },
+    messageUploadProps: {
+      type: Object,
+      default: void 0
+    },
+    footerInputProps: {
+      type: Object,
+      default: void 0
+    },
+    footerButtonProps: {
+      type: Object,
+      default: void 0
+    },
+    footerUploadProps: {
+      type: Object,
+      default: void 0
+    },
+    footerIconProps: {
+      type: Object,
+      default: void 0
+    },
+    footerSuffixIconProps: {
+      type: Object,
+      default: void 0
+    },
+    showAttachButton: {
+      type: Boolean,
+      default: true
+    },
+    inputPlaceholder: {
+      type: String,
+      default: void 0
+    },
+    retryText: {
+      type: String,
+      default: void 0
+    },
+    typingText: {
+      type: String,
+      default: void 0
+    },
+    closeButtonText: {
+      type: String,
+      default: void 0
+    },
+    shareButtonTooltip: {
+      type: String,
+      default: void 0
+    },
+    profileButtonTooltip: {
+      type: String,
+      default: void 0
+    },
+    unreadNotificationText: {
+      type: String,
+      default: void 0
+    },
+    bubbleActions: {
+      type: Array,
+      default: void 0
+    },
+    onMessageSend: {
+      type: Function,
+      default: void 0
+    },
+    onMessageRetry: {
+      type: Function,
+      default: void 0
+    },
+    onFooterInputChange: {
+      type: Function,
+      default: void 0
+    },
+    onChatClose: {
+      type: Function,
+      default: void 0
+    },
+    onChatShare: {
+      type: Function,
+      default: void 0
+    },
+    onUserProfile: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentUpload: {
+      type: Function,
+      default: void 0
+    },
+    onAttachmentDownload: {
+      type: Function,
+      default: void 0
+    },
+    onMessagesScrollToTop: {
+      type: Function,
+      default: void 0
+    },
+    onMessagesScrollToBottom: {
+      type: Function,
+      default: void 0
+    }
+  };
+  var _UChatMainArea = vue.defineComponent({
     name: "ChatMainArea",
-    setup(_, { slots }) {
+    props: chatMainAreaProps,
+    setup(props, { slots }) {
+      const UChat = vue.inject(chatInjectionKey, null);
+      const isStandalone = !UChat;
+      const { mergedClsPrefixRef } = useConfig(props);
+      const mergedThemeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
-      const {
-        mergedClsPrefixRef,
-        mergedThemeRef,
-        selectedChatRef,
-        messagesRef,
-        typingChatIdsRef,
-        messagesLoadingRef,
-        messagesLoadingCountRef,
-        headerButtonPropsRef,
-        headerIconPropsRef,
-        headerShareButtonPropsRef,
-        headerProfileButtonPropsRef,
-        headerCloseButtonPropsRef,
-        headerShareIconPropsRef,
-        headerProfileIconPropsRef,
-        messageUploadPropsRef,
-        footerInputPropsRef,
-        footerButtonPropsRef,
-        footerUploadPropsRef,
-        footerIconPropsRef,
-        footerSuffixIconPropsRef,
-        inputPlaceholderRef,
-        retryTextRef,
-        typingTextRef,
-        closeButtonTextRef,
-        shareButtonTooltipRef,
-        profileButtonTooltipRef,
-        unreadNotificationTextRef,
-        notificationsShownSetRef,
-        unreadCountsBeforeReadRef,
-        markNotificationShown,
-        handleMessageSend,
-        handleMessageRetry,
-        handleFooterInputChange,
-        startEditingMessage: startEditingMessageRef,
-        editMessageIdRef,
-        bubbleActionsRef,
-        onAttachmentUpload,
-        onChatClose,
-        onChatShare,
-        onUserProfile,
-        onMessagesScrollToTop,
-        onMessagesScrollToBottom
-      } = vue.inject(chatInjectionKey);
+      const selectedChatRef = UChat?.selectedChatRef ?? vue.toRef(props, "selectedChat");
+      const messagesRef = UChat?.messagesRef ?? vue.toRef(props, "messages");
+      const typingChatIdsRef = UChat?.typingChatIdsRef ?? vue.toRef(props, "typingChatIds");
+      const messagesLoadingRef = UChat?.messagesLoadingRef ?? vue.toRef(props, "loading");
+      const messagesLoadingCountRef = UChat?.messagesLoadingCountRef ?? vue.toRef(props, "loadingCount");
+      const headerButtonPropsRef = UChat?.headerButtonPropsRef ?? vue.toRef(props, "headerButtonProps");
+      const headerIconPropsRef = UChat?.headerIconPropsRef ?? vue.toRef(props, "headerIconProps");
+      const headerShareButtonPropsRef = UChat?.headerShareButtonPropsRef ?? vue.toRef(props, "headerShareButtonProps");
+      const headerProfileButtonPropsRef = UChat?.headerProfileButtonPropsRef ?? vue.toRef(props, "headerProfileButtonProps");
+      const headerCloseButtonPropsRef = UChat?.headerCloseButtonPropsRef ?? vue.toRef(props, "headerCloseButtonProps");
+      const headerShareIconPropsRef = UChat?.headerShareIconPropsRef ?? vue.toRef(props, "headerShareIconProps");
+      const headerProfileIconPropsRef = UChat?.headerProfileIconPropsRef ?? vue.toRef(props, "headerProfileIconProps");
+      const messageUploadPropsRef = UChat?.messageUploadPropsRef ?? vue.toRef(props, "messageUploadProps");
+      const footerInputPropsRef = UChat?.footerInputPropsRef ?? vue.toRef(props, "footerInputProps");
+      const footerButtonPropsRef = UChat?.footerButtonPropsRef ?? vue.toRef(props, "footerButtonProps");
+      const footerUploadPropsRef = UChat?.footerUploadPropsRef ?? vue.toRef(props, "footerUploadProps");
+      const footerIconPropsRef = UChat?.footerIconPropsRef ?? vue.toRef(props, "footerIconProps");
+      const footerSuffixIconPropsRef = UChat?.footerSuffixIconPropsRef ?? vue.toRef(props, "footerSuffixIconProps");
+      const inputPlaceholderRef = UChat?.inputPlaceholderRef ?? vue.computed(
+        () => props.inputPlaceholder ?? localeRef.value.inputPlaceholder
+      );
+      const retryTextRef = UChat?.retryTextRef ?? vue.computed(() => props.retryText ?? localeRef.value.retryText);
+      const typingTextRef = UChat?.typingTextRef ?? vue.computed(() => props.typingText ?? localeRef.value.typingText);
+      const closeButtonTextRef = UChat?.closeButtonTextRef ?? vue.computed(
+        () => props.closeButtonText ?? localeRef.value.closeButtonText
+      );
+      const shareButtonTooltipRef = UChat?.shareButtonTooltipRef ?? vue.computed(
+        () => props.shareButtonTooltip ?? localeRef.value.shareButtonTooltip
+      );
+      const profileButtonTooltipRef = UChat?.profileButtonTooltipRef ?? vue.computed(
+        () => props.profileButtonTooltip ?? localeRef.value.profileButtonTooltip
+      );
+      const unreadNotificationTextRef = UChat?.unreadNotificationTextRef ?? vue.computed(
+        () => props.unreadNotificationText ?? localeRef.value.unreadNotificationText
+      );
+      const notificationsShownSetRef = UChat?.notificationsShownSetRef ?? vue.ref(/* @__PURE__ */ new Set());
+      const unreadCountsBeforeReadRef = UChat?.unreadCountsBeforeReadRef ?? vue.ref({});
+      const markNotificationShown = UChat?.markNotificationShown ?? ((chatId) => {
+        notificationsShownSetRef.value.add(chatId);
+        notificationsShownSetRef.value = new Set(notificationsShownSetRef.value);
+      });
+      const editMessageIdRef = UChat?.editMessageIdRef ?? vue.ref(null);
+      const startEditingMessageRef = UChat?.startEditingMessage ?? vue.ref();
+      const bubbleActionsRef = UChat?.bubbleActionsRef ?? vue.toRef(props, "bubbleActions");
+      const handleMessageSend = UChat?.handleMessageSend ?? ((content, attachments) => props.onMessageSend?.(content, attachments));
+      const handleMessageRetry = UChat?.handleMessageRetry ?? ((message) => props.onMessageRetry?.(message));
+      const handleFooterInputChange = UChat?.handleFooterInputChange ?? ((value, chatId) => props.onFooterInputChange?.(value, chatId));
+      const onAttachmentUpload = UChat?.onAttachmentUpload ?? vue.toRef(props, "onAttachmentUpload");
+      const onChatClose = UChat?.onChatClose ?? vue.toRef(props, "onChatClose");
+      const onChatShare = UChat?.onChatShare ?? vue.toRef(props, "onChatShare");
+      const onUserProfile = UChat?.onUserProfile ?? vue.toRef(props, "onUserProfile");
+      const onMessagesScrollToTop = UChat?.onMessagesScrollToTop ?? vue.toRef(props, "onMessagesScrollToTop");
+      const onMessagesScrollToBottom = UChat?.onMessagesScrollToBottom ?? vue.toRef(props, "onMessagesScrollToBottom");
+      const cssVarsRef = vue.computed(() => {
+        const {
+          common: {
+            cubicBezierEaseInOut,
+            brandPrimary500,
+            staticGreen,
+            staticRed,
+            textPrimary,
+            textSecondary,
+            textTertiary
+          },
+          self: {
+            backgroundColor,
+            borderColor,
+            sidebarItemSubtitleColor,
+            mainBackgroundColor,
+            headerBackgroundColor,
+            headerBorderColor,
+            headerTitleColor,
+            messageBubbleBackgroundColorOwn,
+            messageBubbleBackgroundColorOther,
+            messageBubbleTextColorOwn,
+            messageBubbleTextColorOther,
+            messageTimeColor,
+            messageStatusColor,
+            attachmentBackgroundColorOwn,
+            attachmentBackgroundColorOther,
+            footerBackgroundColor,
+            footerBorderColor,
+            inputBackgroundColor,
+            inputBorderColor,
+            inputSuffixColor,
+            unreadNotificationBackgroundColor,
+            unreadNotificationTextColor,
+            typingIndicatorColor,
+            dateSeparatorColor,
+            dateSeparatorBackgroundColor,
+            borderRadius,
+            errorColor
+          }
+        } = mergedThemeRef.value;
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-color-primary": brandPrimary500,
+          "--u-color-success": staticGreen,
+          "--u-color-error": errorColor || staticRed,
+          "--u-text-color-base": textPrimary,
+          "--u-text-color-secondary": textSecondary,
+          "--u-text-color-disabled": textTertiary,
+          "--u-background-color": backgroundColor,
+          "--u-border-color": borderColor,
+          "--u-sidebar-item-subtitle-color": sidebarItemSubtitleColor,
+          "--u-main-background-color": mainBackgroundColor,
+          "--u-header-background-color": headerBackgroundColor,
+          "--u-header-border-color": headerBorderColor,
+          "--u-header-title-color": headerTitleColor,
+          "--u-message-bubble-background-color-own": messageBubbleBackgroundColorOwn,
+          "--u-message-bubble-background-color-other": messageBubbleBackgroundColorOther,
+          "--u-message-bubble-text-color-own": messageBubbleTextColorOwn,
+          "--u-message-bubble-text-color-other": messageBubbleTextColorOther,
+          "--u-message-time-color": messageTimeColor,
+          "--u-message-status-color": messageStatusColor,
+          "--u-attachment-background-color-own": attachmentBackgroundColorOwn,
+          "--u-attachment-background-color-other": attachmentBackgroundColorOther,
+          "--u-footer-background-color": footerBackgroundColor,
+          "--u-footer-border-color": footerBorderColor,
+          "--u-input-background-color": inputBackgroundColor,
+          "--u-input-border-color": inputBorderColor,
+          "--u-input-suffix-color": inputSuffixColor,
+          "--u-unread-notification-background-color": unreadNotificationBackgroundColor,
+          "--u-unread-notification-text-color": unreadNotificationTextColor,
+          "--u-typing-indicator-color": typingIndicatorColor,
+          "--u-date-separator-color": dateSeparatorColor,
+          "--u-date-separator-background-color": dateSeparatorBackgroundColor,
+          "--u-border-radius": borderRadius
+        };
+      });
+      const themeClassHandle = useThemeClass(
+        "chat-main-area",
+        vue.computed(() => ""),
+        cssVarsRef,
+        props
+      );
       const messagesBodyRef = vue.ref();
       const inputRef = vue.ref();
       const inputValue = vue.ref("");
@@ -55724,6 +56355,11 @@
         },
         { deep: true, flush: "post" }
       );
+      vue.onMounted(() => {
+        void vue.nextTick(() => {
+          scrollToBottom();
+        });
+      });
       vue.watch(unreadMessagesCount, (newCount, oldCount) => {
         if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
           showNotificationManually.value = false;
@@ -55767,22 +56403,24 @@
         lastScrollTop.value = scrollTop;
       };
       function scrollToBottom() {
-        const el = messagesBodyRef.value;
-        if (!el)
+        const element = messagesBodyRef.value;
+        if (!element)
           return;
-        if ("$el" in el && el.$el instanceof HTMLElement) {
-          const scrollContainer = el.$el.querySelector(".u-scrollbar-content");
+        if ("$el" in element && element.$el instanceof HTMLElement) {
+          const scrollContainer = element.$el.querySelector(
+            ".u-scrollbar-content"
+          );
           if (scrollContainer) {
             scrollContainer.scrollTop = scrollContainer.scrollHeight;
             return;
           }
         }
-        if ("scrollTo" in el && typeof el.scrollTo === "function") {
-          el.scrollTo({ top: 999999, behavior: "auto" });
+        if ("scrollTo" in element && typeof element.scrollTo === "function") {
+          element.scrollTo({ top: 999999, behavior: "auto" });
           return;
         }
-        if ("scrollTop" in el && "scrollHeight" in el) {
-          el.scrollTop = el.scrollHeight;
+        if ("scrollTop" in element && "scrollHeight" in element) {
+          element.scrollTop = element.scrollHeight;
         }
       }
       const toKeyString = (value) => {
@@ -55965,6 +56603,7 @@
             messageAttachmentTitle: slots.messageAttachmentTitle,
             messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
             messageStatus: slots.messageStatus,
+            messageAfterContent: slots.messageAfterContent,
             bubbleActions: slots.bubbleActions
           }
         );
@@ -56159,7 +56798,7 @@
                 class: `${mergedClsPrefixRef.value}-chat-main__input-container`
               },
               {
-                default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(_UUploadTrigger, { abstract: true }, {
+                default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, props.showAttachButton && /* @__PURE__ */ vue.h(_UUploadTrigger, { abstract: true }, {
                   default: ({
                     handleClick
                   }) => /* @__PURE__ */ vue.h(
@@ -56248,7 +56887,60 @@
           }
         ));
       };
+      if (isStandalone) {
+        vue.provide(chatInjectionKey, {
+          mergedClsPrefixRef,
+          mergedThemeRef,
+          selectedChatRef,
+          messagesRef,
+          typingChatIdsRef,
+          messagesLoadingRef,
+          messagesLoadingCountRef,
+          headerButtonPropsRef,
+          headerIconPropsRef,
+          headerShareButtonPropsRef,
+          headerProfileButtonPropsRef,
+          headerCloseButtonPropsRef,
+          headerShareIconPropsRef,
+          headerProfileIconPropsRef,
+          messageUploadPropsRef,
+          footerInputPropsRef,
+          footerButtonPropsRef,
+          footerUploadPropsRef,
+          footerIconPropsRef,
+          footerSuffixIconPropsRef,
+          inputPlaceholderRef,
+          retryTextRef,
+          typingTextRef,
+          closeButtonTextRef,
+          shareButtonTooltipRef,
+          profileButtonTooltipRef,
+          unreadNotificationTextRef,
+          notificationsShownSetRef,
+          unreadCountsBeforeReadRef,
+          markNotificationShown,
+          handleMessageSend,
+          handleMessageRetry,
+          handleFooterInputChange,
+          startEditingMessage: startEditingMessageRef,
+          editMessageIdRef,
+          bubbleActionsRef,
+          onAttachmentUpload,
+          onAttachmentDownload: vue.toRef(props, "onAttachmentDownload"),
+          onChatClose,
+          onChatShare,
+          onUserProfile,
+          onMessagesScrollToTop,
+          onMessagesScrollToBottom
+        });
+      }
       return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        mergedTheme: mergedThemeRef,
+        cssVars: cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender,
+        isStandalone,
         renderHeader,
         renderMessages,
         renderEditingBlock,
@@ -56263,18 +56955,41 @@
       };
     },
     render() {
-      const { mergedClsPrefixRef } = vue.inject(chatInjectionKey);
-      return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main` }, this.renderHeader(), /* @__PURE__ */ vue.h(
-        SafeTopScrollbar,
+      this.onRender?.();
+      const { mergedClsPrefix } = this;
+      const mainArea = /* @__PURE__ */ vue.h(
+        "div",
         {
-          ref: "messagesBodyRef",
-          class: `${mergedClsPrefixRef.value}-chat-main__body`,
-          onScroll: this.handleMessagesScroll
+          class: [
+            `${mergedClsPrefix}-chat-main`,
+            this.isStandalone && `${mergedClsPrefix}-chat-main--standalone`
+          ]
         },
+        !this.isStandalone && this.renderHeader(),
+        /* @__PURE__ */ vue.h(
+          SafeTopScrollbar,
+          {
+            ref: "messagesBodyRef",
+            class: `${mergedClsPrefix}-chat-main__body`,
+            onScroll: this.handleMessagesScroll
+          },
+          {
+            default: () => this.renderMessages()
+          }
+        ),
+        this.renderFooter()
+      );
+      if (!this.isStandalone) {
+        return mainArea;
+      }
+      return /* @__PURE__ */ vue.h(
+        "div",
         {
-          default: () => this.renderMessages()
-        }
-      ), this.renderFooter());
+          class: [`${mergedClsPrefix}-chat`, this.themeClass],
+          style: this.cssVars
+        },
+        mainArea
+      );
     }
   });
 
@@ -58314,7 +59029,7 @@
               chatItemSuffix: $slots.chatItemSuffix
             })
           ]), this.selectedChatId && resolveSlot($slots.default, () => [
-            /* @__PURE__ */ vue.h(ChatMainArea, { ref: "mainAreaRef" }, {
+            /* @__PURE__ */ vue.h(_UChatMainArea, { ref: "mainAreaRef" }, {
               headerActions: $slots.headerActions,
               footerAttachIcon: $slots.footerAttachIcon,
               footerSuffixIcon: $slots.footerSuffixIcon
@@ -92690,7 +93405,7 @@
   const iconPackInputLight = {
     ...inputLight,
     self(vars) {
-      const originalInputSelf = self$1o(vars);
+      const originalInputSelf = self$1p(vars);
       const {
         elementsDarkQuinary,
         elementsPrimary
@@ -115812,6 +116527,7 @@ ${icon.label}`.toLowerCase()
   const UCascader = wrap(_UCascader);
   const UChat = wrap(_UChat);
   const UChatListItems = wrap(_UChatListItems);
+  const UChatMainArea = wrap(_UChatMainArea);
   const UChatMessages = wrap(_UChatMessages);
   const UCheckbox = wrap(_UCheckbox);
   const UCheckboxGroup = wrap(_UCheckboxGroup);
@@ -115899,6 +116615,7 @@ ${icon.label}`.toLowerCase()
   const UMarquee = wrap(_UMarquee);
   const UMention = wrap(_UMention);
   const UMenu = wrap(_UMenu);
+  const UMessageBubble = wrap(_UMessageBubble);
   const UModal = wrap(_UModal);
   const UModalProvider = wrap(UModalProvider$1);
   const UModalFullscreen = wrap(ModalFullscreen);
@@ -115973,6 +116690,10 @@ ${icon.label}`.toLowerCase()
     ChatAttachmentStatus: ChatAttachmentStatus,
     ChatMarkType: ChatMarkType,
     ChatMessageType: ChatMessageType,
+    MessageBubbleAttachmentStatus: MessageBubbleAttachmentStatus,
+    MessageBubbleServiceVariant: MessageBubbleServiceVariant,
+    MessageBubbleStatus: MessageBubbleStatus,
+    MessageBubbleType: MessageBubbleType,
     MessageStatus: MessageStatus,
     NA: a,
     NP: p,
@@ -115999,6 +116720,7 @@ ${icon.label}`.toLowerCase()
     UCascader: UCascader,
     UChat: UChat,
     UChatListItems: UChatListItems,
+    UChatMainArea: UChatMainArea,
     UChatMessages: UChatMessages,
     UCheckbox: UCheckbox,
     UCheckboxGroup: UCheckboxGroup,
@@ -116094,6 +116816,7 @@ ${icon.label}`.toLowerCase()
     UMarquee: UMarquee,
     UMention: UMention,
     UMenu: UMenu,
+    UMessageBubble: UMessageBubble,
     UMessageProvider: UMessageProvider,
     UModal: UModal,
     UModalFullscreen: UModalFullscreen,
@@ -116280,6 +117003,7 @@ ${icon.label}`.toLowerCase()
     mappingCardLight: mappingCardLight,
     mentionProps: mentionProps,
     menuProps: menuProps,
+    messageBubbleProps: messageBubbleProps,
     messageProviderProps: messageProviderProps,
     modalFullscreenProps: modalFullscreenProps,
     modalProps: modalProps,
@@ -116373,7 +117097,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.2.1";
+  var version = "2.3.1";
 
   function create({
     componentPrefix = "U",
@@ -116485,6 +117209,7 @@ ${icon.label}`.toLowerCase()
     Marquee: marqueeLight,
     Menu: menuLight,
     Mention: mentionLight,
+    MessageBubble: messageBubbleLight,
     Message: messageLight,
     Modal: modalLight,
     Notification: notificationLight,
@@ -117109,6 +117834,7 @@ ${icon.label}`.toLowerCase()
     Marquee: marqueeDark,
     Menu: menuDark,
     Mention: listDark,
+    MessageBubble: messageBubbleDark,
     Message: messageDark,
     Modal: modalDark,
     Notification: notificationDark,
@@ -117179,6 +117905,10 @@ ${icon.label}`.toLowerCase()
   exports.ChatAttachmentStatus = ChatAttachmentStatus;
   exports.ChatMarkType = ChatMarkType;
   exports.ChatMessageType = ChatMessageType;
+  exports.MessageBubbleAttachmentStatus = MessageBubbleAttachmentStatus;
+  exports.MessageBubbleServiceVariant = MessageBubbleServiceVariant;
+  exports.MessageBubbleStatus = MessageBubbleStatus;
+  exports.MessageBubbleType = MessageBubbleType;
   exports.MessageStatus = MessageStatus;
   exports.NA = a;
   exports.NP = p;
@@ -117205,6 +117935,7 @@ ${icon.label}`.toLowerCase()
   exports.UCascader = UCascader;
   exports.UChat = UChat;
   exports.UChatListItems = UChatListItems;
+  exports.UChatMainArea = UChatMainArea;
   exports.UChatMessages = UChatMessages;
   exports.UCheckbox = UCheckbox;
   exports.UCheckboxGroup = UCheckboxGroup;
@@ -117300,6 +118031,7 @@ ${icon.label}`.toLowerCase()
   exports.UMarquee = UMarquee;
   exports.UMention = UMention;
   exports.UMenu = UMenu;
+  exports.UMessageBubble = UMessageBubble;
   exports.UMessageProvider = UMessageProvider;
   exports.UModal = UModal;
   exports.UModalFullscreen = UModalFullscreen;
@@ -117550,6 +118282,8 @@ ${icon.label}`.toLowerCase()
   exports.mentionProps = mentionProps;
   exports.menuDark = menuDark;
   exports.menuProps = menuProps;
+  exports.messageBubbleDark = messageBubbleDark;
+  exports.messageBubbleProps = messageBubbleProps;
   exports.messageDark = messageDark;
   exports.messageProviderProps = messageProviderProps;
   exports.modalDark = modalDark;