@uzum-tech/ui 2.3.0 → 2.3.1

package/dist/index.mjs

@@ -45095,6 +45095,58 @@ const listRtl = {
 };
 
 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;
@@ -45109,7 +45161,7 @@ const selectLight = createTheme$1({
     InternalSelection: internalSelectionLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$17
+  self: self$16
 });
 
 const selectDark = {
@@ -45119,13 +45171,13 @@ const selectDark = {
     InternalSelection: internalSelectionDark,
     InternalSelectMenu: internalSelectMenuDark
   },
-  self: self$17
+  self: self$16
 };
 
 ({
   style: c$1([])});
 
-function self$16(vars) {
+function self$15(vars) {
   const {
     borderRadiusSmall,
     fontWeightStrong,
@@ -45220,13 +45272,13 @@ function self$16(vars) {
 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 = {
@@ -45264,7 +45316,7 @@ const chatBadgeLight = {
     };
   }
 };
-function self$15(vars) {
+function self$14(vars) {
   const {
     borderRadiusLarge,
     elementsQuaternary,
@@ -45331,13 +45383,14 @@ const chatLight = createTheme$1({
     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({
@@ -45352,6 +45405,7 @@ const chatDark = createTheme$1({
     Button: buttonDark,
     List: listDark$1,
     Typography: typographyDark,
+    MessageBubble: messageBubbleDark,
     StatusIcon: iconDark$1,
     FooterAttachIcon: iconDark$1,
     FooterSuffixIcon: iconDark$1,
@@ -45359,7 +45413,7 @@ const chatDark = createTheme$1({
     HeaderProfileIcon: iconDark$1
   },
   self: vars => {
-    const lightVars = self$15(vars);
+    const lightVars = self$14(vars);
     return {
       ...lightVars
     };
@@ -46708,7 +46762,7 @@ var _UUl = defineComponent({
   }
 });
 
-function self$14(vars) {
+function self$13(vars) {
   const {
     fontWeight,
     fontBodyMedium,
@@ -46749,16 +46803,16 @@ function self$14(vars) {
 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,
@@ -46815,7 +46869,7 @@ const uploadLight = createTheme$1({
     Button: buttonLight,
     Progress: progressLight
   },
-  self: self$13
+  self: self$12
 });
 
 const uploadDark = {
@@ -46825,7 +46879,7 @@ const uploadDark = {
     Button: buttonDark,
     Progress: progressDark
   },
-  self: self$13
+  self: self$12
 };
 
 var rtlStyle$i = cB("upload", [cM("rtl", `
@@ -47304,7 +47358,7 @@ const cardDark = {
   self: self$1d
 };
 
-function self$12(vars) {
+function self$11(vars) {
   const {
     textPrimary,
     fontBodyMedium,
@@ -47332,12 +47386,12 @@ function self$12(vars) {
 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",
@@ -47353,10 +47407,10 @@ function self$11(vars) {
 const codeDark = {
   name: "Code",
   common: derived$1,
-  self: self$11
+  self: self$10
 };
 
-function self$10(vars) {
+function self$$(vars) {
   const {
     cubicBezierEaseInOut
   } = vars;
@@ -47367,13 +47421,13 @@ function self$10(vars) {
 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", `
@@ -47386,7 +47440,7 @@ const collapseTransitionRtl = {
   style: rtlStyle$g
 };
 
-function self$$(vars) {
+function self$_(vars) {
   const {
     fontWeight,
     fontBodyLarge,
@@ -47426,13 +47480,13 @@ function self$$(vars) {
 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", `
@@ -47455,7 +47509,7 @@ const collapseRtl = {
   style: rtlStyle$f
 };
 
-function self$_(vars) {
+function self$Z(vars) {
   const {
     borderRadius,
     fontBodySmall,
@@ -47542,7 +47596,7 @@ const dropdownLight = createTheme$1({
   peers: {
     Popover: popoverLight
   },
-  self: self$_
+  self: self$Z
 });
 
 const dropdownDark = {
@@ -47551,7 +47605,7 @@ const dropdownDark = {
   peers: {
     Popover: popoverDark
   },
-  self: self$_
+  self: self$Z
 };
 
 const popselect = {
@@ -47563,7 +47617,7 @@ const popselect = {
   }
 };
 
-function self$Z(vars) {
+function self$Y(vars) {
   const {
     shadowDepth2
   } = vars;
@@ -47578,10 +47632,10 @@ const popselectLight = createTheme$1({
     Popover: popoverLight,
     InternalSelectMenu: internalSelectMenuLight
   },
-  self: self$Z
+  self: self$Y
 });
 
-function self$Y(vars) {
+function self$X(vars) {
   const {
     brandPrimary100,
     transparencySecondary,
@@ -47679,7 +47733,7 @@ const paginationLight = createTheme$1({
     Input: inputLight,
     Popselect: popselectLight
   },
-  self: self$Y
+  self: self$X
 });
 
 const paginationDark = {
@@ -47690,7 +47744,7 @@ const paginationDark = {
     Input: inputDark,
     Popselect: popselect
   },
-  self: self$Y
+  self: self$X
 };
 
 var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -47707,7 +47761,7 @@ const paginationRtl = {
   peers: [inputRtl]
 };
 
-function self$X(vars) {
+function self$W(vars) {
   const {
     heightTiny,
     heightSmall,
@@ -47799,13 +47853,13 @@ function self$X(vars) {
 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", `
@@ -47833,7 +47887,7 @@ const radioRtl = {
   style: rtlStyle$d
 };
 
-function self$W(vars) {
+function self$V(vars) {
   const {
     borderRadius,
     opacityDisabled,
@@ -47934,7 +47988,7 @@ const dataTableLight = createTheme$1({
     Ellipsis: ellipsisLight,
     Dropdown: dropdownLight
   },
-  self: self$W
+  self: self$V
 });
 
 const dataTableDark = {
@@ -47951,10 +48005,10 @@ const dataTableDark = {
     Ellipsis: ellipsisDark,
     Dropdown: dropdownDark
   },
-  self: self$W
+  self: self$V
 };
 
-function self$V(vars) {
+function self$U(vars) {
   const {
     opacityDisabled,
     borderRadius,
@@ -47996,7 +48050,7 @@ const timePickerLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$V
+  self: self$U
 });
 
 const timePickerDark = {
@@ -48007,7 +48061,7 @@ const timePickerDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$V
+  self: self$U
 };
 
 const itemWidth = "38px";
@@ -48053,7 +48107,7 @@ var commonVars$6 = {
   calendarRightPaddingYearrange: "0"
 };
 
-function self$U(vars) {
+function self$T(vars) {
   const {
     iconMedium,
     fontWeightStrong,
@@ -48154,7 +48208,7 @@ const datePickerLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Select: internalSelectionLight
   },
-  self: self$U
+  self: self$T
 });
 
 const datePickerDark = {
@@ -48167,10 +48221,10 @@ const datePickerDark = {
     Scrollbar: scrollbarDark,
     Select: internalSelectionDark
   },
-  self: self$U
+  self: self$T
 };
 
-function self$T(vars) {
+function self$S(vars) {
   const {
     borderRadius,
     lineHeightBodyLarge,
@@ -48220,13 +48274,13 @@ function self$T(vars) {
 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 = {
@@ -48240,7 +48294,7 @@ var commonVars$5 = {
   closeBorderRadius: "100px"
 };
 
-function self$S(vars) {
+function self$R(vars) {
   const {
     borderRadius,
     containerPrimary,
@@ -48297,7 +48351,7 @@ const dialogLight = createTheme$1({
   peers: {
     Button: buttonLight
   },
-  self: self$S
+  self: self$R
 });
 
 const dialogDark = {
@@ -48306,10 +48360,10 @@ const dialogDark = {
   peers: {
     Button: buttonDark
   },
-  self: self$S
+  self: self$R
 };
 
-function self$R(vars) {
+function self$Q(vars) {
   const {
     elementsQuaternary,
     textPrimary,
@@ -48329,13 +48383,13 @@ function self$R(vars) {
 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 = {
@@ -48351,7 +48405,7 @@ var commonVars$4 = {
   contentBorderRadius: "24px"
 };
 
-function self$Q(vars) {
+function self$P(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -48400,7 +48454,7 @@ const drawerLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$Q
+  self: self$P
 });
 
 const drawerDark = {
@@ -48409,7 +48463,7 @@ const drawerDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$Q
+  self: self$P
 };
 
 var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -48443,7 +48497,7 @@ const dynamicInputDark = {
   }
 };
 
-function self$P() {
+function self$O() {
   return commonVariables$1;
 }
 const dynamicInputLight = createTheme$1({
@@ -48453,7 +48507,7 @@ const dynamicInputLight = createTheme$1({
     Input: inputLight,
     Button: buttonLight
   },
-  self: self$P
+  self: self$O
 });
 
 var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -48494,12 +48548,12 @@ const spaceDark = {
   }
 };
 
-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", `
@@ -48571,7 +48625,7 @@ const floatButtonGroupDark = {
   }
 };
 
-function self$N(vars) {
+function self$M(vars) {
   const {
     containerPrimary,
     elementsQuaternary,
@@ -48587,7 +48641,7 @@ function self$N(vars) {
 const themeLight$4 = {
   name: "FloatButtonGroup",
   common: derived,
-  self: self$N
+  self: self$M
 };
 
 const floatButtonDark = {
@@ -48622,7 +48676,7 @@ const floatButtonDark = {
   }
 };
 
-function self$M(vars) {
+function self$L(vars) {
   const {
     containerPrimary,
     textPrimary,
@@ -48651,10 +48705,10 @@ function self$M(vars) {
 const themeLight$3 = {
   name: "FloatButton",
   common: derived,
-  self: self$M
+  self: self$L
 };
 
-function self$L(vars) {
+function self$K(vars) {
   const {
     heightSmall,
     heightMedium,
@@ -48709,16 +48763,16 @@ function self$L(vars) {
 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,
@@ -48755,16 +48809,16 @@ function self$K(vars) {
 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;
@@ -48779,7 +48833,7 @@ const inputNumberLight = createTheme$1({
     Button: buttonLight,
     Input: inputLight
   },
-  self: self$J
+  self: self$I
 });
 
 const inputNumberDark = {
@@ -48789,10 +48843,10 @@ const inputNumberDark = {
     Button: buttonDark,
     Input: inputDark
   },
-  self: self$J
+  self: self$I
 };
 
-function self$I() {
+function self$H() {
   return {
     inputWidthSmall: "44px",
     inputWidthMedium: "50px",
@@ -48808,7 +48862,7 @@ const inputOtpLight = createTheme$1({
   peers: {
     Input: inputLight
   },
-  self: self$I
+  self: self$H
 });
 
 const inputOtpDark = {
@@ -48817,7 +48871,7 @@ const inputOtpDark = {
   peers: {
     Input: inputDark
   },
-  self: self$I
+  self: self$H
 };
 
 var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -48829,7 +48883,7 @@ const inputOtpRtl = {
   style: rtlStyle$8
 };
 
-function self$H(vars) {
+function self$G(vars) {
   const {
     textPrimary,
     textQuaternary,
@@ -48875,7 +48929,7 @@ const layoutLight = createTheme$1({
   peers: {
     Scrollbar: scrollbarLight
   },
-  self: self$H
+  self: self$G
 });
 
 const layoutDark = {
@@ -48884,7 +48938,7 @@ const layoutDark = {
   peers: {
     Scrollbar: scrollbarDark
   },
-  self: self$H
+  self: self$G
 };
 
 const rowDark = {
@@ -48921,7 +48975,7 @@ const rowRtl = {
   style: rtlStyle$7
 };
 
-function self$G(vars) {
+function self$F(vars) {
   const {
     brandPrimary500,
     staticRed
@@ -48935,16 +48989,16 @@ function self$G(vars) {
 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,
@@ -48967,7 +49021,7 @@ const logLight = createTheme$1({
     Scrollbar: scrollbarLight,
     Code: codeLight
   },
-  self: self$F
+  self: self$E
 });
 
 const logDark = {
@@ -48977,25 +49031,25 @@ const logDark = {
     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;
@@ -49010,7 +49064,7 @@ const mentionLight = createTheme$1({
     InternalSelectMenu: internalSelectMenuLight,
     Input: inputLight
   },
-  self: self$D
+  self: self$C
 });
 
 const listDark = {
@@ -49020,7 +49074,7 @@ const listDark = {
     InternalSelectMenu: internalSelectMenuDark,
     Input: inputDark
   },
-  self: self$D
+  self: self$C
 };
 
 function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49063,7 +49117,7 @@ function createPartialInvertedVars(color, activeItemColor, activeTextColor, grou
     groupTextColorInverted: groupTextColor
   };
 }
-function self$C(vars) {
+function self$B(vars) {
   const {
     textSecondary,
     borderRadiusSmall,
@@ -49131,7 +49185,7 @@ const menuLight = createTheme$1({
     Tooltip: tooltipLight,
     Dropdown: dropdownLight
   },
-  self: self$C
+  self: self$B
 });
 
 const menuDark = {
@@ -49141,60 +49195,8 @@ const menuDark = {
     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 {
@@ -54645,6 +54647,8 @@ var style$16 = cB("message-bubble", `
     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);
@@ -54652,16 +54656,12 @@ var style$16 = cB("message-bubble", `
       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;
@@ -54924,8 +54924,10 @@ var _UMessageBubble = defineComponent({
         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__ */ h(
         "div",
@@ -54944,7 +54946,14 @@ var _UMessageBubble = defineComponent({
           slots.title ? slots.title(messagePayloadRef.value) : resolveRenderContent(props.title)
         ),
         normalizedAttachmentsRef.value.length > 0 && renderAttachment(true),
-        (props.content || slots.default) && /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content))
+        (props.content || slots.default) && /* @__PURE__ */ h("div", { class: `${mergedClsPrefixRef.value}-message-bubble__text` }, slots.default ? slots.default(messagePayloadRef.value) : resolveRenderContent(props.content)),
+        hasAfterContent && /* @__PURE__ */ h(
+          "div",
+          {
+            class: `${mergedClsPrefixRef.value}-message-bubble__after-content`
+          },
+          afterContentSlot?.(messagePayloadRef.value)
+        )
       ) : normalizedAttachmentsRef.value.length === 1 ? renderAttachment() : null;
       return /* @__PURE__ */ h(
         "div",
@@ -55586,6 +55595,21 @@ var _UChatMessages = defineComponent({
     const { mergedClsPrefixRef } = useConfig(props);
     const themeRef = UChat?.mergedThemeRef ?? useTheme("Chat", "-chat", style$15, chatLight, props, mergedClsPrefixRef);
     const { localeRef } = useLocale("Chat");
+    const messageBubbleThemeOverridesRef = 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 = computed(() => {
       const {
         common: {
@@ -55701,7 +55725,9 @@ var _UChatMessages = defineComponent({
         {
           type: MessageBubbleType.SERVICE,
           serviceVariant: MessageBubbleServiceVariant.UNREAD,
-          content: `${count} ${mergedUnreadNotificationTextRef.value}`
+          content: `${count} ${mergedUnreadNotificationTextRef.value}`,
+          theme: themeRef.value.peers.MessageBubble,
+          themeOverrides: messageBubbleThemeOverridesRef.value
         }
       );
     };
@@ -55713,7 +55739,9 @@ var _UChatMessages = defineComponent({
           key: String(message.id),
           type: MessageBubbleType.SERVICE,
           serviceVariant,
-          content: message.content
+          content: message.content,
+          theme: themeRef.value.peers.MessageBubble,
+          themeOverrides: messageBubbleThemeOverridesRef.value
         }
       );
     };
@@ -55756,12 +55784,15 @@ var _UChatMessages = defineComponent({
           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
         }
@@ -56568,6 +56599,7 @@ var _UChatMainArea = defineComponent({
           messageAttachmentTitle: slots.messageAttachmentTitle,
           messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
           messageStatus: slots.messageStatus,
+          messageAfterContent: slots.messageAfterContent,
           bubbleActions: slots.bubbleActions
         }
       );
@@ -117061,7 +117093,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.3.0";
+var version = "2.3.1";
 
 function create({
   componentPrefix = "U",