@uzum-tech/ui 2.3.0 → 2.3.1

package/dist/index.js

@@ -45099,6 +45099,58 @@
   };
 
   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
     } = vars;
@@ -45113,7 +45165,7 @@
       InternalSelection: internalSelectionLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$17
+    self: self$16
   });
 
   const selectDark = {
@@ -45123,13 +45175,13 @@
       InternalSelection: internalSelectionDark,
       InternalSelectMenu: internalSelectMenuDark
     },
-    self: self$17
+    self: self$16
   };
 
   ({
     style: c$1([])});
 
-  function self$16(vars) {
+  function self$15(vars) {
     const {
       borderRadiusSmall,
       fontWeightStrong,
@@ -45224,13 +45276,13 @@
   const typographyLight = {
     name: "Typography",
     common: derived,
-    self: self$16
+    self: self$15
   };
 
   const typographyDark = {
     name: "Typography",
     common: derived$1,
-    self: self$16
+    self: self$15
   };
 
   const chatInputLight = {
@@ -45268,7 +45320,7 @@
       };
     }
   };
-  function self$15(vars) {
+  function self$14(vars) {
     const {
       borderRadiusLarge,
       elementsQuaternary,
@@ -45335,13 +45387,14 @@
       Button: buttonLight,
       List: listLight,
       Typography: typographyLight,
+      MessageBubble: messageBubbleLight,
       StatusIcon: iconLight,
       FooterAttachIcon: iconLight,
       FooterSuffixIcon: iconLight,
       HeaderShareIcon: iconLight,
       HeaderProfileIcon: iconLight
     },
-    self: self$15
+    self: self$14
   });
 
   const chatDark = createTheme$1({
@@ -45356,6 +45409,7 @@
       Button: buttonDark,
       List: listDark$1,
       Typography: typographyDark,
+      MessageBubble: messageBubbleDark,
       StatusIcon: iconDark$1,
       FooterAttachIcon: iconDark$1,
       FooterSuffixIcon: iconDark$1,
@@ -45363,7 +45417,7 @@
       HeaderProfileIcon: iconDark$1
     },
     self: vars => {
-      const lightVars = self$15(vars);
+      const lightVars = self$14(vars);
       return {
         ...lightVars
       };
@@ -46712,7 +46766,7 @@
     }
   });
 
-  function self$14(vars) {
+  function self$13(vars) {
     const {
       fontWeight,
       fontBodyMedium,
@@ -46753,16 +46807,16 @@
   const progressLight = {
     name: "Progress",
     common: derived,
-    self: self$14
+    self: self$13
   };
 
   const progressDark = {
     name: "Progress",
     common: derived$1,
-    self: self$14
+    self: self$13
   };
 
-  function self$13(vars) {
+  function self$12(vars) {
     const {
       staticGreen,
       staticRed,
@@ -46819,7 +46873,7 @@
       Button: buttonLight,
       Progress: progressLight
     },
-    self: self$13
+    self: self$12
   });
 
   const uploadDark = {
@@ -46829,7 +46883,7 @@
       Button: buttonDark,
       Progress: progressDark
     },
-    self: self$13
+    self: self$12
   };
 
   var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -47308,7 +47362,7 @@
     self: self$1d
   };
 
-  function self$12(vars) {
+  function self$11(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -47336,12 +47390,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$12
+    self: self$11
   };
 
-  function self$11(vars) {
+  function self$10(vars) {
     return {
-      ...self$12(vars),
+      ...self$11(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -47357,10 +47411,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$11
+    self: self$10
   };
 
-  function self$10(vars) {
+  function self$$(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -47371,13 +47425,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$10
+    self: self$$
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$10
+    self: self$$
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -47390,7 +47444,7 @@
     style: rtlStyle$g
   };
 
-  function self$$(vars) {
+  function self$_(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -47430,13 +47484,13 @@
   const collapseLight = {
     name: "Collapse",
     common: derived,
-    self: self$$
+    self: self$_
   };
 
   const collapseDark = {
     name: "Collapse",
     common: derived$1,
-    self: self$$
+    self: self$_
   };
 
   var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -47459,7 +47513,7 @@
     style: rtlStyle$f
   };
 
-  function self$_(vars) {
+  function self$Z(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -47546,7 +47600,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$_
+    self: self$Z
   });
 
   const dropdownDark = {
@@ -47555,7 +47609,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$_
+    self: self$Z
   };
 
   const popselect = {
@@ -47567,7 +47621,7 @@
     }
   };
 
-  function self$Z(vars) {
+  function self$Y(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -47582,10 +47636,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$Z
+    self: self$Y
   });
 
-  function self$Y(vars) {
+  function self$X(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -47683,7 +47737,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$Y
+    self: self$X
   });
 
   const paginationDark = {
@@ -47694,7 +47748,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$Y
+    self: self$X
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47711,7 +47765,7 @@
     peers: [inputRtl]
   };
 
-  function self$X(vars) {
+  function self$W(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -47803,13 +47857,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$X
+    self: self$W
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$X
+    self: self$W
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -47837,7 +47891,7 @@
     style: rtlStyle$d
   };
 
-  function self$W(vars) {
+  function self$V(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -47938,7 +47992,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$W
+    self: self$V
   });
 
   const dataTableDark = {
@@ -47955,10 +48009,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$W
+    self: self$V
   };
 
-  function self$V(vars) {
+  function self$U(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -48000,7 +48054,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$V
+    self: self$U
   });
 
   const timePickerDark = {
@@ -48011,7 +48065,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$V
+    self: self$U
   };
 
   const itemWidth = "38px";
@@ -48057,7 +48111,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$U(vars) {
+  function self$T(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -48158,7 +48212,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$U
+    self: self$T
   });
 
   const datePickerDark = {
@@ -48171,10 +48225,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$U
+    self: self$T
   };
 
-  function self$T(vars) {
+  function self$S(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -48224,13 +48278,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$T
+    self: self$S
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$T
+    self: self$S
   };
 
   var commonVars$5 = {
@@ -48244,7 +48298,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$S(vars) {
+  function self$R(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -48301,7 +48355,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$S
+    self: self$R
   });
 
   const dialogDark = {
@@ -48310,10 +48364,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$S
+    self: self$R
   };
 
-  function self$R(vars) {
+  function self$Q(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -48333,13 +48387,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$R
+    self: self$Q
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$R
+    self: self$Q
   };
 
   var commonVars$4 = {
@@ -48355,7 +48409,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$Q(vars) {
+  function self$P(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48404,7 +48458,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$Q
+    self: self$P
   });
 
   const drawerDark = {
@@ -48413,7 +48467,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$Q
+    self: self$P
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48447,7 +48501,7 @@
     }
   };
 
-  function self$P() {
+  function self$O() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -48457,7 +48511,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$P
+    self: self$O
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48498,12 +48552,12 @@
     }
   };
 
-  function self$O() {
+  function self$N() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$O
+    self: self$N
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -48575,7 +48629,7 @@
     }
   };
 
-  function self$N(vars) {
+  function self$M(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -48591,7 +48645,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$N
+    self: self$M
   };
 
   const floatButtonDark = {
@@ -48626,7 +48680,7 @@
     }
   };
 
-  function self$M(vars) {
+  function self$L(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -48655,10 +48709,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$M
+    self: self$L
   };
 
-  function self$L(vars) {
+  function self$K(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -48713,16 +48767,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$L
+    self: self$K
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$L
+    self: self$K
   };
 
-  function self$K(vars) {
+  function self$J(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -48759,16 +48813,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$K
+    self: self$J
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$K
+    self: self$J
   };
 
-  function self$J(vars) {
+  function self$I(vars) {
     const {
       textSecondary
     } = vars;
@@ -48783,7 +48837,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$J
+    self: self$I
   });
 
   const inputNumberDark = {
@@ -48793,10 +48847,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$J
+    self: self$I
   };
 
-  function self$I() {
+  function self$H() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -48812,7 +48866,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$I
+    self: self$H
   });
 
   const inputOtpDark = {
@@ -48821,7 +48875,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$I
+    self: self$H
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48833,7 +48887,7 @@
     style: rtlStyle$8
   };
 
-  function self$H(vars) {
+  function self$G(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -48879,7 +48933,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$H
+    self: self$G
   });
 
   const layoutDark = {
@@ -48888,7 +48942,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$H
+    self: self$G
   };
 
   const rowDark = {
@@ -48925,7 +48979,7 @@
     style: rtlStyle$7
   };
 
-  function self$G(vars) {
+  function self$F(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -48939,16 +48993,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$G
+    self: self$F
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$G
+    self: self$F
   };
 
-  function self$F(vars) {
+  function self$E(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -48971,7 +49025,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$F
+    self: self$E
   });
 
   const logDark = {
@@ -48981,25 +49035,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$F
+    self: self$E
   };
 
-  function self$E() {
+  function self$D() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$E
+    self: self$D
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$E
+    self: self$D
   };
 
-  function self$D(vars) {
+  function self$C(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -49014,7 +49068,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$D
+    self: self$C
   });
 
   const listDark = {
@@ -49024,7 +49078,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$D
+    self: self$C
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49067,7 +49121,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$C(vars) {
+  function self$B(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -49135,7 +49189,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$C
+    self: self$B
   });
 
   const menuDark = {
@@ -49145,60 +49199,8 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$C
-  };
-
-  function self$B(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$B
-  });
-
-  const messageBubbleDark = createTheme$1({
-    name: "MessageBubble",
-    common: derived$1,
-    peers: {
-      StatusIcon: iconDark$1
-    },
-    self: vars => ({
-      ...self$B(vars)
-    })
-  });
+  };
 
   function self$A(vars) {
     const {
@@ -54649,6 +54651,8 @@
     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);
@@ -54656,16 +54660,12 @@
       border-bottom-right-radius: 6px;
     `)]), cE("title", `
     color: var(--u-message-bubble-title-color);
-    padding: 12px 16px 0;
     white-space: pre-wrap;
   `), cE("text", `
-    padding: 12px 16px;
     white-space: pre-wrap;
-  `), cE("text", `
-    padding-top: 8px;
-  `, [c$1("&&:first-child", `
-      padding-top: 12px;
-    `)]), cE("meta", `
+  `), cE("after-content", `
+    white-space: normal;
+  `), cE("meta", `
     display: flex;
     align-items: center;
     gap: 4px;
@@ -54928,8 +54928,10 @@
           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 || hasTitle || normalizedAttachmentsRef.value.length > 1
+          props.content || slots.default || hasAfterContent || hasTitle || normalizedAttachmentsRef.value.length > 1
         );
         const messageBubbleContent = hasContentInsideBubble ? /* @__PURE__ */ vue.h(
           "div",
@@ -54948,7 +54950,14 @@
             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))
+          (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",
@@ -55590,6 +55599,21 @@
       const { mergedClsPrefixRef } = useConfig(props);
       const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
       const { localeRef } = useLocale("Chat");
+      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: {
@@ -55705,7 +55729,9 @@
           {
             type: MessageBubbleType.SERVICE,
             serviceVariant: MessageBubbleServiceVariant.UNREAD,
-            content: `${count} ${mergedUnreadNotificationTextRef.value}`
+            content: `${count} ${mergedUnreadNotificationTextRef.value}`,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           }
         );
       };
@@ -55717,7 +55743,9 @@
             key: String(message.id),
             type: MessageBubbleType.SERVICE,
             serviceVariant,
-            content: message.content
+            content: message.content,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           }
         );
       };
@@ -55760,12 +55788,15 @@
             retryText: mergedRetryTextRef.value,
             actions: getMessageBubbleActions(message),
             onRetry: handleMessageBubbleRetry,
-            onAttachmentDownload: handleMessageBubbleAttachmentDownload
+            onAttachmentDownload: handleMessageBubbleAttachmentDownload,
+            theme: themeRef.value.peers.MessageBubble,
+            themeOverrides: messageBubbleThemeOverridesRef.value
           },
           {
             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
           }
@@ -56572,6 +56603,7 @@
             messageAttachmentTitle: slots.messageAttachmentTitle,
             messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
             messageStatus: slots.messageStatus,
+            messageAfterContent: slots.messageAfterContent,
             bubbleActions: slots.bubbleActions
           }
         );
@@ -117065,7 +117097,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.3.0";
+  var version = "2.3.1";
 
   function create({
     componentPrefix = "U",