@linktr.ee/messaging-react 4.1.6-rc-1787176721 → 4.1.6-rc-1787179587

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.6-rc-1787176721",
+  "version": "4.1.6-rc-1787179587",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.5.0-rc-1787176721",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787179587",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/Avatar/Avatar.test.tsx

@@ -27,4 +27,130 @@ describe('Avatar', () => {
   it('keeps fixed emoji sizes for larger avatars', () => {
     expect(emojiFontSize(40)).toHaveStyle({ fontSize: '14px' })
   })
+
+  it.each([
+    [32, '14px'],
+    [55, '14px'],
+    [56, '18px'],
+    [119, '18px'],
+    [120, '36px'],
+  ])(
+    'uses the exact fixed font size at the %spx boundary',
+    (size, fontSize) => {
+      expect(emojiFontSize(size)).toHaveStyle({ fontSize })
+    }
+  )
+
+  it('does not show a star by default but shows one when starred', () => {
+    const defaultAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" />
+    )
+    expect(defaultAvatar.container.querySelector('svg')).not.toBeInTheDocument()
+
+    const starredAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" starred />
+    )
+    expect(starredAvatar.container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('uses a squircle by default and a circle when explicitly requested', () => {
+    const squircleAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" />
+    )
+    const squircleElements = squircleAvatar.container.querySelectorAll(
+      '[style*="border-radius"]'
+    )
+    expect(squircleElements).toHaveLength(3)
+    squircleElements.forEach((element) =>
+      expect(element).toHaveStyle({ borderRadius: '1rem' })
+    )
+
+    const circleAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" shape="circle" />
+    )
+    const circleElements = circleAvatar.container.querySelectorAll(
+      '[style*="border-radius"]'
+    )
+    expect(circleElements).toHaveLength(3)
+    circleElements.forEach((element) =>
+      expect(element).toHaveStyle({ borderRadius: '50%' })
+    )
+  })
+
+  it('only applies the AI ring when dmAgentEnabled is true', () => {
+    const defaultAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={40} />
+    )
+    expect(
+      defaultAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).not.toHaveStyle({
+      borderWidth: '2px',
+      borderStyle: 'solid',
+    })
+
+    const enabledAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
+    )
+    expect(
+      enabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).toHaveStyle({
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: 'var(--AI-Gradient, #7F22FE)',
+      boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
+    })
+
+    const smallEnabledAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
+    )
+    expect(
+      smallEnabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).toHaveStyle({ borderWidth: '1px' })
+  })
+
+  it('renders an image instead of the emoji fallback when image is provided', () => {
+    const fallbackAvatar = renderWithProviders(<Avatar id="" name="Alice" />)
+    expect(
+      fallbackAvatar.container.querySelector('img')
+    ).not.toBeInTheDocument()
+    expect(fallbackAvatar.container).toHaveTextContent('🍎')
+    expect(
+      fallbackAvatar.container.querySelector('.avatar-fallback')
+    ).toHaveClass(
+      'avatar-fallback',
+      'flex',
+      'h-full',
+      'w-full',
+      'items-center',
+      'justify-center',
+      'font-semibold',
+      'select-none',
+      'transition-colors'
+    )
+
+    const imageAvatar = renderWithProviders(
+      <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
+    )
+    expect(imageAvatar.container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://example.com/avatar.png'
+    )
+    expect(imageAvatar.container).not.toHaveTextContent('🍎')
+  })
+
+  it('applies the fallback background color and forwards custom classes', () => {
+    const { container } = renderWithProviders(
+      <Avatar id="" name="Alice" className="custom-avatar" />
+    )
+    const root = container.firstElementChild
+    const ring = container.querySelector('[data-testid="avatar-ring"]')
+
+    expect(root).toHaveClass('relative', 'flex-shrink-0', 'custom-avatar')
+    expect(ring).toHaveClass('h-full', 'w-full', 'bg-transparent')
+    expect(root).toHaveStyle({
+      backgroundColor: '#FFD1DD',
+      width: '40px',
+      height: '40px',
+    })
+  })
 })

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

@@ -29,4 +29,43 @@ describe('getAvatarBgColor', () => {
     expect(color).toBe(emojiBgColors[emoji])
     expect(getAvatarBgColor(id)).toBe(color)
   })
+
+  it.each([
+    ['', '🍎', '#FFD1DD'],
+    ['id-2', '🍌', '#FFF1C9'],
+    ['id-3', '🍇', '#E6D9FF'],
+    ['id-4', '🍊', '#D6F4FF'],
+    ['id-5', '🍓', '#FFE0AE'],
+    ['id-6', '🥥', '#F7E7D8'],
+    ['id-7', '🍒', '#DFF4D8'],
+    ['id-8', '🥭', '#FFD8C2'],
+    ['id-9', '🍉', '#D6EBFF'],
+    ['id-10', '🍋', '#CAEEB5'],
+    ['id-11', '🥝', '#FFE7C7'],
+    ['id-12', '🫒', '#F6E3B4'],
+    ['id-13', '🍈', '#D9F7E1'],
+  ])('returns the exact fruit pair for %j', (id, emoji, bgColor) => {
+    expect(getAvatarEmoji(id)).toBe(emoji)
+    expect(getAvatarBgColor(id)).toBe(bgColor)
+  })
+
+  it('uses the absolute hash value for ids with a negative raw hash', () => {
+    const id = 'id-100'
+
+    expect(getAvatarEmoji(id)).toBe('🥭')
+    expect(getAvatarBgColor(id)).toBe('#FFD8C2')
+  })
+
+  it('is deterministic and keeps emoji and background color paired', () => {
+    const ids = ['', 'id-2', 'id-7', 'id-13', 'id-100']
+
+    ids.forEach((id) => {
+      const emoji = getAvatarEmoji(id)
+      const color = getAvatarBgColor(id)
+
+      expect(getAvatarEmoji(id)).toBe(emoji)
+      expect(getAvatarBgColor(id)).toBe(color)
+      expect(emojiBgColors[emoji]).toBe(color)
+    })
+  })
 })