@telefonica/mistica 17.9.0 → 17.10.0

package/src/pagination.tsx

@@ -40,105 +40,125 @@ export type PaginationProps = {
     'aria-label'?: string;
 };
 
-type PageItem = {type: 'page'; page: number; current: boolean};
-type EllipsisItem = {type: 'ellipsis'};
-type PaginationItem = ExclusifyUnion<PageItem | EllipsisItem>;
+type Visibility = 'desktop' | 'mobile' | 'any';
+type ResponsivePaginationItem = ExclusifyUnion<
+    {type: 'page'; page: number; current: boolean} | {type: 'ellipsis'}
+> & {visibility: Visibility};
 
 const DEFAULT_SURROUNDING_PAGE_COUNT = 1;
 const FIRST_PAGE = 1;
-
-const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
-
-export const getPaginationItems = ({
+const DESKTOP_BOUNDARY_SLOT_COUNT = 4;
+const MOBILE_BOUNDARY_SLOT_COUNT = 2;
+
+const getVisibility = (desktop: boolean, mobile: boolean): Visibility =>
+    desktop && mobile ? 'any' : desktop ? 'desktop' : 'mobile';
+
+/**
+ * Creates one ordered list with viewport-specific visibility for pages and ellipses.
+ * With 20 pages and current page 10, desktop shows [1, ..., 9, 10, 11, ..., 20]
+ * and mobile shows [..., 9, 10, 11, ...]; only pages 1 and 20 are desktop-only.
+ */
+const getResponsivePaginationItems = ({
     totalPages,
     currentPage,
     surroundingPageCount = DEFAULT_SURROUNDING_PAGE_COUNT,
-    includeBoundaryPages = true,
 }: {
     totalPages: number;
     currentPage: number;
     surroundingPageCount?: number;
-    includeBoundaryPages?: boolean;
-}): Array<PaginationItem> => {
+}): Array<ResponsivePaginationItem> => {
     if (totalPages <= 1) {
         return [];
     }
 
-    const activePage = clamp(currentPage, FIRST_PAGE, totalPages);
-    const surroundingCount = clamp(Math.floor(surroundingPageCount), 0, totalPages);
+    const activePage = Math.min(Math.max(currentPage, FIRST_PAGE), totalPages);
+    const surroundingCount = Math.min(Math.max(Math.floor(surroundingPageCount), 0), totalPages);
     const dynamicPageCount = 2 * surroundingCount + 1;
+    const createPageRange = (start: number, end: number): Array<number> =>
+        Array.from({length: Math.max(0, end - start + 1)}, (_, index) => start + index);
 
-    if (totalPages <= dynamicPageCount) {
-        return Array.from({length: totalPages}, (_, index) => {
-            const page = index + FIRST_PAGE;
-            return {type: 'page', page, current: page === activePage};
-        });
-    }
-
-    const lastPage = totalPages;
-    const createPageItem = (page: number): PaginationItem => ({
-        type: 'page',
-        page,
-        current: page === activePage,
-    });
-    const createPageRange = (start: number, end: number): Array<PaginationItem> =>
-        Array.from({length: Math.max(0, end - start + 1)}, (_, index) => createPageItem(start + index));
-
-    if (!includeBoundaryPages) {
-        const rangeStart = Math.max(
-            Math.min(activePage - surroundingCount, lastPage - dynamicPageCount),
-            FIRST_PAGE + 1
-        );
-        const rangeEnd = rangeStart + dynamicPageCount - 1;
-        const items: Array<PaginationItem> = [];
-
-        if (rangeStart > FIRST_PAGE + 1) {
-            items.push({type: 'ellipsis'});
-        } else {
-            items.push(createPageItem(FIRST_PAGE));
-        }
-
-        items.push(...createPageRange(rangeStart, rangeEnd));
-
-        if (rangeEnd < lastPage - 1) {
-            items.push({type: 'ellipsis'});
-        } else if (rangeEnd < lastPage) {
-            items.push(createPageItem(lastPage));
-        }
-
-        return items;
-    }
-
-    const rangeStart = Math.max(
-        Math.min(activePage - surroundingCount, lastPage - dynamicPageCount - 1),
+    const desktopRangeStart = Math.max(
+        Math.min(activePage - surroundingCount, totalPages - dynamicPageCount - 1),
         FIRST_PAGE + 2
     );
-    const rangeEnd = Math.min(
+    const desktopRangeEnd = Math.min(
         Math.max(activePage + surroundingCount, FIRST_PAGE + dynamicPageCount + 1),
-        lastPage - 2
+        totalPages - 2
+    );
+    const desktopPages = new Set(
+        totalPages <= dynamicPageCount + DESKTOP_BOUNDARY_SLOT_COUNT
+            ? createPageRange(FIRST_PAGE, totalPages)
+            : [
+                  FIRST_PAGE,
+                  ...(desktopRangeStart > FIRST_PAGE + 2 ? [] : [FIRST_PAGE + 1]),
+                  ...createPageRange(desktopRangeStart, desktopRangeEnd),
+                  ...(desktopRangeEnd < totalPages - 2 ? [] : [totalPages - 1]),
+                  totalPages,
+              ]
     );
 
-    const items: Array<PaginationItem> = [createPageItem(FIRST_PAGE)];
+    const mobileRangeStart = Math.max(
+        Math.min(activePage - surroundingCount, totalPages - dynamicPageCount),
+        FIRST_PAGE + 1
+    );
+    const mobileRangeEnd = mobileRangeStart + dynamicPageCount - 1;
+    const mobilePages = new Set(
+        totalPages <= dynamicPageCount + MOBILE_BOUNDARY_SLOT_COUNT
+            ? createPageRange(FIRST_PAGE, totalPages)
+            : [
+                  ...(mobileRangeStart > FIRST_PAGE + 1 ? [] : [FIRST_PAGE]),
+                  ...createPageRange(mobileRangeStart, mobileRangeEnd),
+                  ...(mobileRangeEnd < totalPages - 1 ? [] : [totalPages]),
+              ]
+    );
 
-    if (rangeStart > FIRST_PAGE + 2) {
-        items.push({type: 'ellipsis'});
-    } else {
-        items.push(createPageItem(FIRST_PAGE + 1));
+    const items: Array<ResponsivePaginationItem> = [];
+    let lastDesktopPage = FIRST_PAGE - 1;
+    let lastMobilePage = FIRST_PAGE - 1;
+    let hasDesktopEllipsis = false;
+    let hasMobileEllipsis = false;
+
+    for (const page of [...new Set([...desktopPages, ...mobilePages])].sort((a, b) => a - b)) {
+        const isDesktop = desktopPages.has(page);
+        const isMobile = mobilePages.has(page);
+        const needsDesktopEllipsis: boolean =
+            !hasDesktopEllipsis && (!isDesktop || page > lastDesktopPage + 1);
+        const needsMobileEllipsis: boolean = !hasMobileEllipsis && (!isMobile || page > lastMobilePage + 1);
+
+        if ((isDesktop && needsDesktopEllipsis) || (isMobile && needsMobileEllipsis)) {
+            items.push({
+                type: 'ellipsis',
+                visibility: getVisibility(needsDesktopEllipsis, needsMobileEllipsis),
+            });
+            hasDesktopEllipsis ||= needsDesktopEllipsis;
+            hasMobileEllipsis ||= needsMobileEllipsis;
+        }
+        items.push({
+            type: 'page',
+            page,
+            current: page === activePage,
+            visibility: getVisibility(isDesktop, isMobile),
+        });
+        if (isDesktop) {
+            lastDesktopPage = page;
+            hasDesktopEllipsis = false;
+        }
+        if (isMobile) {
+            lastMobilePage = page;
+            hasMobileEllipsis = false;
+        }
     }
 
-    items.push(...createPageRange(rangeStart, rangeEnd));
-
-    if (rangeEnd < lastPage - 2) {
-        items.push({type: 'ellipsis'});
-    } else {
-        items.push(createPageItem(lastPage - 1));
+    const needsDesktopEllipsis = lastDesktopPage < totalPages && !hasDesktopEllipsis;
+    const needsMobileEllipsis = lastMobilePage < totalPages && !hasMobileEllipsis;
+    if (needsDesktopEllipsis || needsMobileEllipsis) {
+        items.push({type: 'ellipsis', visibility: getVisibility(needsDesktopEllipsis, needsMobileEllipsis)});
     }
-
-    items.push(createPageItem(lastPage));
-
     return items;
 };
 
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+
 const PaginationLabel = ({children}: {children: React.ReactNode}): JSX.Element => {
     return (
         <Text3 as="span" medium color="currentColor" wordBreak={false}>
@@ -159,13 +179,12 @@ const getEllipsisColor = (variant: NonDeprecatedVariant): string => {
 };
 
 type PageListProps = {
-    items: Array<PaginationItem>;
+    items: Array<ResponsivePaginationItem>;
     disabled?: boolean;
-    className?: string;
     onPageClick: (page: number) => void;
 };
 
-const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX.Element => {
+const PageList = ({items, disabled, onPageClick}: PageListProps): JSX.Element => {
     const {texts, t} = useTheme();
     const variant = useThemeVariant();
     const goToPageLabel = (page: number) =>
@@ -174,11 +193,12 @@ const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX
         t(texts.paginationCurrentPage || tokens.paginationCurrentPage, String(page));
 
     return (
-        <ol className={classnames(styles.pageList, className)}>
+        <ol className={styles.pageList}>
             {items.map((item, index) => {
+                const className = classnames(styles.pageListItem, styles.itemVisibility[item.visibility]);
                 if (item.type === 'ellipsis') {
                     return (
-                        <li key={`ellipsis-${index}`} className={styles.pageListItem} aria-hidden="true">
+                        <li key={`ellipsis-${index}`} className={className} aria-hidden="true">
                             <Text3 as="span" medium color={getEllipsisColor(variant)} wordBreak={false}>
                                 ...
                             </Text3>
@@ -188,7 +208,7 @@ const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX
 
                 if (item.current) {
                     return (
-                        <li key={item.page} className={styles.pageListItem}>
+                        <li key={item.page} className={className}>
                             <Touchable
                                 className={classnames(
                                     styles.currentPage,
@@ -208,7 +228,7 @@ const PageList = ({items, disabled, className, onPageClick}: PageListProps): JSX
                 }
 
                 return (
-                    <li key={item.page} className={styles.pageListItem}>
+                    <li key={item.page} className={className}>
                         <Touchable
                             className={classnames(styles.pageButton, styles.pageButtonVariants[variant])}
                             disabled={disabled}
@@ -281,17 +301,10 @@ export const Pagination = ({
 
     const isPrevDisabled = activePage <= 1;
     const isNextDisabled = activePage >= totalPages;
-    const desktopItems = getPaginationItems({
-        totalPages,
-        currentPage: activePage,
-        surroundingPageCount,
-        includeBoundaryPages: true,
-    });
-    const mobileItems = getPaginationItems({
+    const items = getResponsivePaginationItems({
         totalPages,
         currentPage: activePage,
         surroundingPageCount,
-        includeBoundaryPages: false,
     });
 
     return (
@@ -328,22 +341,7 @@ export const Pagination = ({
                     </ButtonLink>
                 ))}
 
-            {!hidePageList && (
-                <>
-                    <PageList
-                        items={desktopItems}
-                        disabled={disabled}
-                        className={styles.pageListDesktop}
-                        onPageClick={goToPage}
-                    />
-                    <PageList
-                        items={mobileItems}
-                        disabled={disabled}
-                        className={styles.pageListMobile}
-                        onPageClick={goToPage}
-                    />
-                </>
-            )}
+            {!hidePageList && <PageList items={items} disabled={disabled} onPageClick={goToPage} />}
             {!hideNavigationControls &&
                 (mode === 'iconOnly' ? (
                     <IconButton

package/src/skins/blau.tsx

@@ -99,6 +99,16 @@ export const getBlauSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.grey6, 0.05),
             backgroundDropZoneMediaDragover: applyAlpha(palette.grey6, 0.08),
+            messageBubbleBackgroundOutgoing: palette.grey1,
+            messageBubbleBackgroundOutgoingBrand: palette.grey1,
+            messageBubbleBackgroundOutgoingAlternative: palette.grey1,
+            messageBubbleBackgroundOutgoingNegative: palette.grey1,
+            messageBubbleBackgroundOutgoingMedia: palette.grey1,
+            messageBubbleBackgroundIncoming: palette.blauBluePrimary20,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -408,6 +418,16 @@ export const getBlauSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.15),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey5,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,

package/src/skins/esimflag.tsx

@@ -103,6 +103,16 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.blue55, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.blue55, 0.4),
+            messageBubbleBackgroundOutgoing: palette.blue10,
+            messageBubbleBackgroundOutgoingBrand: palette.blue10,
+            messageBubbleBackgroundOutgoingAlternative: palette.blue10,
+            messageBubbleBackgroundOutgoingNegative: palette.blue10,
+            messageBubbleBackgroundOutgoingMedia: palette.blue10,
+            messageBubbleBackgroundIncoming: palette.grey1,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -413,6 +423,16 @@ export const getEsimflagSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.08),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey6,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,
             borderHigh: palette.grey5,

package/src/skins/movistar.tsx

@@ -110,6 +110,16 @@ export const getMovistarSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.movistarBlack, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.movistarBlack, 0.4),
+            messageBubbleBackgroundOutgoing: palette.blueLight,
+            messageBubbleBackgroundOutgoingBrand: palette.blueLight,
+            messageBubbleBackgroundOutgoingAlternative: palette.blueLight,
+            messageBubbleBackgroundOutgoingNegative: palette.blueLight,
+            messageBubbleBackgroundOutgoingMedia: palette.blueLight,
+            messageBubbleBackgroundIncoming: palette.grey100,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey200,
             borderLow: palette.grey100,
             border: palette.grey300,
@@ -419,6 +429,16 @@ export const getMovistarSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.blueDark,
+            messageBubbleBackgroundOutgoingBrand: palette.blueDark,
+            messageBubbleBackgroundOutgoingAlternative: palette.blueDark,
+            messageBubbleBackgroundOutgoingNegative: palette.blueDark,
+            messageBubbleBackgroundOutgoingMedia: palette.blueDark,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey600,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,

package/src/skins/o2.tsx

@@ -11,6 +11,7 @@ import type {GetKnownSkin, KnownSkin} from './types';
 
 export const palette = {
     beyondBlue: '#0050FF',
+    beyondBlue5: '#F2F6FF',
     beyondBlue10: '#E5EDFF',
     beyondBlue15: '#CCDCFF',
     beyondBlue30: '#80A7FF',
@@ -106,6 +107,16 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.beyondBlue90, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.beyondBlue90, 0.4),
+            messageBubbleBackgroundOutgoing: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingBrand: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingAlternative: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingNegative: palette.beyondBlue5,
+            messageBubbleBackgroundOutgoingMedia: palette.beyondBlue5,
+            messageBubbleBackgroundIncoming: palette.grey20,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey30,
             borderLow: palette.grey20,
             border: palette.grey30,
@@ -414,6 +425,16 @@ export const getO2Skin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey6,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             navigationBarBackground: palette.darkModeBlack,
             skeletonWave: palette.grey80,
             borderLow: palette.darkModeBlack,

package/src/skins/skin-contract.css.ts

@@ -47,6 +47,16 @@ const colors: Colors = {
     backgroundDropZoneNegativeDragover: '',
     backgroundDropZoneMediaHover: '',
     backgroundDropZoneMediaDragover: '',
+    messageBubbleBackgroundOutgoing: '',
+    messageBubbleBackgroundOutgoingBrand: '',
+    messageBubbleBackgroundOutgoingAlternative: '',
+    messageBubbleBackgroundOutgoingNegative: '',
+    messageBubbleBackgroundOutgoingMedia: '',
+    messageBubbleBackgroundIncoming: '',
+    messageBubbleBackgroundIncomingBrand: '',
+    messageBubbleBackgroundIncomingAlternative: '',
+    messageBubbleBackgroundIncomingNegative: '',
+    messageBubbleBackgroundIncomingMedia: '',
     skeletonWave: '',
     borderLow: '',
     border: '',

package/src/skins/telefonica.tsx

@@ -107,6 +107,16 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.telefonicaBlue80, 0.2),
             backgroundDropZoneMediaDragover: applyAlpha(palette.telefonicaBlue80, 0.4),
+            messageBubbleBackgroundOutgoing: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingBrand: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingAlternative: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingNegative: palette.telefonicaBlue10,
+            messageBubbleBackgroundOutgoingMedia: palette.telefonicaBlue10,
+            messageBubbleBackgroundIncoming: palette.grey1,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey2,
@@ -416,6 +426,16 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey6,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey6,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey8,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,

package/src/skins/types/colors.tsx

@@ -49,6 +49,16 @@ export type Colors = {
     backgroundDropZoneNegativeDragover: string;
     backgroundDropZoneMediaHover: string;
     backgroundDropZoneMediaDragover: string;
+    messageBubbleBackgroundOutgoing: string;
+    messageBubbleBackgroundOutgoingBrand: string;
+    messageBubbleBackgroundOutgoingAlternative: string;
+    messageBubbleBackgroundOutgoingNegative: string;
+    messageBubbleBackgroundOutgoingMedia: string;
+    messageBubbleBackgroundIncoming: string;
+    messageBubbleBackgroundIncomingBrand: string;
+    messageBubbleBackgroundIncomingAlternative: string;
+    messageBubbleBackgroundIncomingNegative: string;
+    messageBubbleBackgroundIncomingMedia: string;
     skeletonWave: string;
     borderLow: string;
     border: string;

package/src/skins/vivo-evolution.tsx

@@ -140,6 +140,16 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.vivoNeutral0, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurple900, 0.3),
             backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurple900, 0.5),
+            messageBubbleBackgroundOutgoing: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingBrand: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingAlternative: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingNegative: palette.vivoNeutral25,
+            messageBubbleBackgroundOutgoingMedia: palette.vivoNeutral25,
+            messageBubbleBackgroundIncoming: palette.vivoNeutral25,
+            messageBubbleBackgroundIncomingBrand: palette.vivoNeutral0,
+            messageBubbleBackgroundIncomingAlternative: palette.vivoNeutral0,
+            messageBubbleBackgroundIncomingNegative: palette.vivoNeutral0,
+            messageBubbleBackgroundIncomingMedia: palette.vivoNeutral0,
             skeletonWave: palette.vivoNeutral100,
             borderLow: palette.vivoNeutral25,
             border: palette.vivoNeutral200,
@@ -449,6 +459,16 @@ export const getVivoEvolutionSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.vivoNeutral0, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.vivoNeutral0, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.vivoNeutral0, 0.05),
+            messageBubbleBackgroundOutgoing: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingBrand: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingAlternative: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingNegative: palette.vivoNeutral900,
+            messageBubbleBackgroundOutgoingMedia: palette.vivoNeutral900,
+            messageBubbleBackgroundIncoming: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingBrand: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingAlternative: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingNegative: palette.vivoNeutral900,
+            messageBubbleBackgroundIncomingMedia: palette.vivoNeutral900,
             skeletonWave: palette.vivoNeutral600,
             borderLow: palette.vivoNeutral950,
             border: palette.vivoNeutral900,

package/src/skins/vivo.tsx

@@ -96,6 +96,16 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.17),
             backgroundDropZoneMediaHover: applyAlpha(palette.vivoPurpleDark, 0.3),
             backgroundDropZoneMediaDragover: applyAlpha(palette.vivoPurpleDark, 0.5),
+            messageBubbleBackgroundOutgoing: palette.grey1,
+            messageBubbleBackgroundOutgoingBrand: palette.grey1,
+            messageBubbleBackgroundOutgoingAlternative: palette.grey1,
+            messageBubbleBackgroundOutgoingNegative: palette.grey1,
+            messageBubbleBackgroundOutgoingMedia: palette.grey1,
+            messageBubbleBackgroundIncoming: palette.grey1,
+            messageBubbleBackgroundIncomingBrand: palette.white,
+            messageBubbleBackgroundIncomingAlternative: palette.white,
+            messageBubbleBackgroundIncomingNegative: palette.white,
+            messageBubbleBackgroundIncomingMedia: palette.white,
             skeletonWave: palette.grey2,
             borderLow: palette.grey1,
             border: palette.grey3,
@@ -405,6 +415,16 @@ export const getVivoSkin: GetKnownSkin = () => {
             backgroundDropZoneNegativeDragover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneMediaHover: applyAlpha(palette.white, 0.03),
             backgroundDropZoneMediaDragover: applyAlpha(palette.white, 0.05),
+            messageBubbleBackgroundOutgoing: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundOutgoingMedia: palette.darkModeGrey,
+            messageBubbleBackgroundIncoming: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingBrand: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingAlternative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingNegative: palette.darkModeGrey,
+            messageBubbleBackgroundIncomingMedia: palette.darkModeGrey,
             skeletonWave: palette.grey5,
             borderLow: palette.darkModeBlack,
             border: palette.darkModeGrey,

package/src/text-tokens.tsx

@@ -786,3 +786,17 @@ export const fileUploadListLabel: TextToken = {
     de: 'Hochgeladene Dateien',
     pt: 'Arquivos enviados',
 };
+
+export const messageIncoming: TextToken = {
+    es: 'Mensaje',
+    en: 'Message',
+    pt: 'Mensagem',
+    de: 'Nachricht',
+};
+
+export const messageOutgoing: TextToken = {
+    es: 'Tú',
+    en: 'You',
+    pt: 'Você',
+    de: 'Du',
+};

package/src/tooltip.tsx

@@ -70,8 +70,11 @@ const getElementDimensionsWithoutPadding = (element: HTMLElement) => {
         parseFloat(getComputedStyle(element, null).paddingTop) +
         parseFloat(getComputedStyle(element, null).paddingBottom);
 
-    const width = element.offsetWidth - horizontalPadding;
-    const height = element.offsetHeight - verticalPadding;
+    // Chromium can return different offsetWidth/offsetHeight values at different subpixel positions.
+    // Use position-independent dimensions to avoid a measurement/positioning feedback loop.
+    const rect = element.getBoundingClientRect();
+    const width = rect.width - horizontalPadding;
+    const height = rect.height - verticalPadding;
     return {width, height};
 };