@linktr.ee/messaging-react 3.5.5-rc-1782987115 → 3.5.5

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Bt9H9JKb.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cjf7FPAs.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-Bo9wjHNl.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-6Q-jnVFS.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.5.5-rc-1782987115",
+  "version": "3.5.5",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1782987115",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/index.tsx

@@ -57,7 +57,7 @@ const AttachmentCard: React.FC<AttachmentCardProps> = ({
       data-testid={dataTestId}
       className={classNames(
         'relative w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]',
-        isDark ? 'bg-[#1e2330]' : 'bg-white'
+        isDark ? 'bg-[#121110]' : 'bg-white'
       )}
     >
       {topLeft ? (

package/src/components/Avatar/getAvatarEmoji.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import { getAvatarBgColor, getAvatarEmoji } from './getAvatarEmoji'
+
+const emojiBgColors: Record<string, string> = {
+  '🍉': '#D6EBFF',
+  '🍎': '#FFD1DD',
+  '🍓': '#FFE0AE',
+  '🍋': '#CAEEB5',
+  '🍌': '#FFF1C9',
+  '🍇': '#E6D9FF',
+  '🍊': '#D6F4FF',
+  '🥥': '#F7E7D8',
+  '🍒': '#DFF4D8',
+  '🥭': '#FFD8C2',
+  '🥝': '#FFE7C7',
+  '🫒': '#F6E3B4',
+  '🍈': '#D9F7E1',
+}
+
+describe('getAvatarBgColor', () => {
+  it('returns the mapped color for the avatar emoji and stays consistent for the same id', () => {
+    const id = 'user-123'
+
+    const emoji = getAvatarEmoji(id)
+    const color = getAvatarBgColor(id)
+
+    expect(getAvatarEmoji(id)).toBe(emoji)
+    expect(color).toBe(emojiBgColors[emoji])
+    expect(getAvatarBgColor(id)).toBe(color)
+  })
+})

package/src/components/Avatar/getAvatarEmoji.ts

@@ -1,21 +1,21 @@
 /**
- * Generate a fruit emoji based on a string id
- * Returns a consistent fruit emoji for the same id
+ * Fruit emojis paired with their avatar background color.
+ * Single source of truth for both `getAvatarEmoji` and `getAvatarBgColor`.
  */
-const EMOJIS = [
-  '🍎', // Apple
-  '🍌', // Banana
-  '🍇', // Grape
-  '🍊', // Orange
-  '🍓', // Strawberry
-  '🥥', // Coconut
-  '🍒', // Cherry
-  '🥭', // Mango
-  '🍉', // Watermelon
-  '🍋', // Lemon
-  '🥝', // Kiwi
-  '🫒', // Olive
-  '🍈', // Melon
+const FRUITS = [
+  { emoji: '🍎', bgColor: '#FFD1DD' }, // Apple
+  { emoji: '🍌', bgColor: '#FFF1C9' }, // Banana
+  { emoji: '🍇', bgColor: '#E6D9FF' }, // Grape
+  { emoji: '🍊', bgColor: '#D6F4FF' }, // Orange
+  { emoji: '🍓', bgColor: '#FFE0AE' }, // Strawberry
+  { emoji: '🥥', bgColor: '#F7E7D8' }, // Coconut
+  { emoji: '🍒', bgColor: '#DFF4D8' }, // Cherry
+  { emoji: '🥭', bgColor: '#FFD8C2' }, // Mango
+  { emoji: '🍉', bgColor: '#D6EBFF' }, // Watermelon
+  { emoji: '🍋', bgColor: '#CAEEB5' }, // Lemon
+  { emoji: '🥝', bgColor: '#FFE7C7' }, // Kiwi
+  { emoji: '🫒', bgColor: '#F6E3B4' }, // Olive
+  { emoji: '🍈', bgColor: '#D9F7E1' }, // Melon
 ]
 
 /**
@@ -31,14 +31,27 @@ function hashString(str: string): number {
   return Math.abs(hash)
 }
 
+/**
+ * Pick a consistent fruit for an id string
+ */
+function getFruit(id: string) {
+  return FRUITS[hashString(id) % FRUITS.length]
+}
+
 /**
  * Get a fruit emoji based on an id string
  * @param id - The string id to generate emoji from
  * @returns A fruit emoji string
  */
 export function getAvatarEmoji(id: string): string {
-  const hash = hashString(id)
-  const index = hash % EMOJIS.length
-  return EMOJIS[index]
+  return getFruit(id).emoji
 }
 
+/**
+ * Get the background color paired with an id's fruit emoji
+ * @param id - The string id to generate the color from
+ * @returns A hex color string
+ */
+export function getAvatarBgColor(id: string): string {
+  return getFruit(id).bgColor
+}

package/src/components/Avatar/index.tsx

@@ -2,7 +2,7 @@ import { StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React from 'react'
 
-import { getAvatarEmoji } from './getAvatarEmoji'
+import { getAvatarBgColor, getAvatarEmoji } from './getAvatarEmoji'
 
 export interface AvatarProps {
   id: string
@@ -28,6 +28,7 @@ export const Avatar = ({
   dmAgentEnabled = false,
 }: AvatarProps) => {
   const emoji = getAvatarEmoji(id)
+  const bgColor = getAvatarBgColor(id)
 
   // Small avatars scale the emoji with the avatar so it doesn't overpower a
   // tiny circle — a fixed floor read ~60% of a 17px avatar vs ~35% at 40px.
@@ -62,7 +63,7 @@ export const Avatar = ({
         <div
           aria-hidden="true"
           className={classNames(
-            'avatar-fallback flex h-full w-full items-center justify-center bg-[#E6E5E3] font-semibold select-none transition-colors'
+            'avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors'
           )}
           style={{ fontSize, lineHeight: 1 }}
         >
@@ -75,13 +76,15 @@ export const Avatar = ({
   return (
     <div
       className={classNames(
-        'relative flex-shrink-0 !bg-transparent',
+        'relative flex-shrink-0',
         className
       )}
       style={{
         '--str-chat__avatar-size': `${size}px`,
         width: `${size}px`,
         height: `${size}px`,
+        backgroundColor: image ? undefined : bgColor,
+        ...borderStyle,
       } as React.CSSProperties}
     >
       {starred && (

package/src/components/CustomLinkPreviewList/CustomLinkPreviewCard.tsx

@@ -23,7 +23,7 @@ const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
       href={og_scrape_url}
       target="_blank"
       rel="noopener noreferrer"
-      className="relative block w-full rounded-[24px] bg-[#1e2330] p-2 no-underline transition-opacity hover:opacity-90"
+      className="relative block w-full rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
     >
       {image_url && (
         <img

package/src/components/CustomMessage/MessageAttachmentConversations.stories.tsx

@@ -42,7 +42,7 @@ interface ChatNode {
 }
 
 const TEXT_BG_BY_ROLE: Record<ChatRole, string> = {
-  sender: 'bg-[#1e2330] text-white',
+  sender: 'bg-[#121110] text-white',
   receiver: 'bg-[#e9eaed] text-[#080707]',
 }
 

package/src/components/CustomMessage/MessageTag.stories.tsx

@@ -83,7 +83,7 @@ ChatbotReceiverText.parameters = skipInChromatic
 export const ChatbotSenderText: StoryFn<ComponentProps> = (args) => {
   return (
     <div className="p-12">
-      <div className="bg-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
+      <div className="bg-[#121110] rounded-[24px] px-4 py-3 w-[280px]">
         <MessageTag {...args} />
       </div>
     </div>
@@ -150,7 +150,7 @@ export const AllVariants: StoryFn = () => {
       </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">Chatbot (sender):</span>
-        <div className="bg-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
+        <div className="bg-[#121110] rounded-[24px] px-4 py-3 w-[280px]">
           <MessageTag
             message={createMockMessage({
               metadata: { custom_type: 'MESSAGE_CHATBOT' },

package/src/components/LinkAttachment/components/_shared/CardShell.tsx

@@ -64,7 +64,7 @@ const CardShell: React.FC<CardShellProps> = ({
   const isInteractive = href != null || onClick != null
   const className = classNames(
     SHELL_CLASS,
-    bgClassName ?? (variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'),
+    bgClassName ?? (variant === 'dark' ? 'bg-[#121110]' : 'bg-white'),
     // `focus-ring` is a design-system utility from the component-library
     // tailwind preset — outline-none + a black 2px focus-visible ring
     // with offset, so keyboard users can see the focused card.

package/src/components/LockedAttachment/components/_shared/LockedCardShell.tsx

@@ -26,7 +26,7 @@ const LockedCardShell: React.FC<LockedCardShellProps> = ({
     className={classNames(
       'relative w-[280px] select-none overflow-hidden rounded-md',
       'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
-      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'
+      variant === 'dark' ? 'bg-[#121110]' : 'bg-white'
     )}
   >
     {children}

package/src/components/MediaMessage/index.tsx

@@ -15,7 +15,7 @@ function formatBytes(bytes: number): string {
 }
 
 function linkCardShellClass(isMyMessage: boolean) {
-  const bg = isMyMessage ? 'bg-[#1e2330]' : 'bg-[#F3F3F1]'
+  const bg = isMyMessage ? 'bg-[#121110]' : 'bg-[#F3F3F1]'
   return `w-[280px] select-none overflow-hidden rounded-[24px] ${bg} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`
 }
 

package/src/components/MessageAttachment/_shared/Bubble.tsx

@@ -30,7 +30,7 @@ export interface BubbleProps {
 // `.str-chat__message-bubble` token set so attachments visually drop
 // into a normal `CustomMessage` thread without any seams:
 //   - light  → `--str-chat__secondary-surface-color` = grey200 (#e9eaed)
-//   - dark   → `.str-chat__message--me` override in `styles.css` (#1e2330)
+//   - dark   → `.str-chat__message--me` override in `styles.css` (#121110)
 //   - text padding → `--str-chat__spacing-2 --str-chat__spacing-4` = 8px 16px
 //   - border-radius → `--str-chat__border-radius-md` = 18px
 //
@@ -41,7 +41,7 @@ export interface BubbleProps {
 // rebrand would need to touch every site. A central token would
 // collapse the migration to one definition.
 const BUBBLE_BG_BY_VARIANT: Record<BubbleVariant, string> = {
-  dark: 'bg-[#1e2330]',
+  dark: 'bg-[#121110]',
   light: 'bg-[#e9eaed]',
 }
 
@@ -104,7 +104,7 @@ const CORNER_CLASSES_BY_SIDE_AND_POSITION: Record<
  * is the file', 'Here is the image').
  *
  * Two visual variants:
- *   - `dark` — sender-side (Composer / Sent), white text on `#1e2330`.
+ *   - `dark` — sender-side (Composer / Sent), white text on `#121110`.
  *   - `light` — recipient-side (Received), dark text on `#e9eaed`.
  *
  * Background colors, padding, border-radius, and inherited font come

package/src/styles.css

@@ -8,10 +8,10 @@
   --str-chat__font-family: inherit;
 
   --str-chat__message-bubble-border-radius: 1.5rem;
-  --str-chat__message-bubble-background-color: #f2f1ef;
-  --str-chat__message-bubble-color: #000000;
+  --str-chat__message-bubble-background-color: #f1f0ee;
+  --str-chat__message-bubble-color: #181818;
 
-  --str-chat__own-message-bubble-background-color: #1e2330;
+  --str-chat__own-message-bubble-background-color: #121110;
   --str-chat__own-message-bubble-color: #fff;
 }
 
@@ -560,8 +560,7 @@
 
 .str-chat__message .str-chat__message-bubble {
   font-size: 0.875rem;
-  line-height: 1.3125rem;
-  letter-spacing: 0.14px;
+  line-height: 1.25rem;
 }
 
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
@@ -675,55 +674,11 @@
   }
 
   .str-chat__message--other .str-chat__message-bubble {
-    border-end-start-radius: 0;
-  }
-
-  .str-chat__message--other
-    .str-chat__message-bubble-wrapper
-    > .str-chat__message-bubble:last-child {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-block-end: 0;
-      inset-inline-start: calc(-1 * 0.25rem);
-      width: 1.375rem;
-      height: 1.5rem;
-      background-color: var(--str-chat__message-bubble-background-color);
-      pointer-events: none;
-      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 22 20 23'%3E%3Cpath d='M45 22H30C30 32.1934 29.1413 37.2345 25.8323 43.4893C25.4732 44.168 25.9613 44.9917 26.7255 44.9178C39.8236 43.6506 44.6803 28.0737 45 22Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 22 20 23'%3E%3Cpath d='M45 22H30C30 32.1934 29.1413 37.2345 25.8323 43.4893C25.4732 44.168 25.9613 44.9917 26.7255 44.9178C39.8236 43.6506 44.6803 28.0737 45 22Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-    }
-  }
-
-  .str-chat__message--me
-    .str-chat__message-bubble-wrapper
-    > .str-chat__message-bubble:last-child {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-block-end: 0;
-      inset-inline-end: calc(-1 * 0.25rem);
-      width: 1.375rem;
-      height: 1.5rem;
-      background-color: var(--str-chat__own-message-bubble-background-color);
-      pointer-events: none;
-      transform: scaleX(-1);
-      transform-origin: center;
-      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 22 20 23'%3E%3Cpath d='M45 22H30C30 32.1934 29.1413 37.2345 25.8323 43.4893C25.4732 44.168 25.9613 44.9917 26.7255 44.9178C39.8236 43.6506 44.6803 28.0737 45 22Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25 22 20 23'%3E%3Cpath d='M45 22H30C30 32.1934 29.1413 37.2345 25.8323 43.4893C25.4732 44.168 25.9613 44.9917 26.7255 44.9178C39.8236 43.6506 44.6803 28.0737 45 22Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-    }
+    border-end-start-radius: var(--str-chat__message-bubble-border-radius);
   }
 
   .str-chat__message--me .str-chat__message-bubble {
-    border-end-end-radius: 0;
+    border-end-end-radius: var(--str-chat__message-bubble-border-radius);
   }
 }