@linktr.ee/messaging-react 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/Avatar/avatarColors.ts

@@ -1,34 +1,9 @@
 /**
  * Generate avatar background and text colors based on a string
- * Uses the ID to deterministically select from design system colors
+ * Returns a consistent background color
  */
-export function getAvatarColor(id: string): {
+export function getAvatarColor(_id: string): {
   color: string
 } {
-  // Map of color combinations from Linktree design system
-  // Selected for good contrast at 20% opacity
-  const colors = [
-    { color: '#8129D9' }, // purple
-    { color: '#254f1a' }, // dark green
-    { color: '#061492' }, // dark blue
-    { color: '#1e2330' }, // dark blue-gray
-    { color: '#502274' }, // dark purple
-    { color: '#d717e7' }, // magenta
-    { color: '#780016' }, // dark red
-    { color: '#c41500' }, // red
-    { color: '#fc3e4b' }, // pink
-    { color: '#4c2e05' }, // brown
-    { color: '#ff6c02' }, // orange
-    { color: '#70764d' }, // olive green
-  ]
-
-  // Simple hash function to get consistent index
-  let hash = 0
-  for (let i = 0; i < id.length; i++) {
-    hash = (hash << 5) - hash + id.charCodeAt(i)
-    hash = hash & hash // Convert to 32bit integer
-  }
-
-  const index = Math.abs(hash) % colors.length
-  return colors[index]
+  return { color: '#FBFAF9' }
 }

package/src/components/Avatar/getAvatarEmoji.ts

@@ -0,0 +1,44 @@
+/**
+ * Generate a fruit emoji based on a string id
+ * Returns a consistent fruit emoji for the same id
+ */
+const EMOJIS = [
+  '🍎', // Apple
+  '🍌', // Banana
+  '🍇', // Grape
+  '🍊', // Orange
+  '🍓', // Strawberry
+  '🥥', // Coconut
+  '🍒', // Cherry
+  '🥭', // Mango
+  '🍉', // Watermelon
+  '🍋', // Lemon
+  '🥝', // Kiwi
+  '🫒', // Olive
+  '🍈', // Melon
+]
+
+/**
+ * Simple hash function to convert string to number
+ */
+function hashString(str: string): number {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32-bit integer
+  }
+  return Math.abs(hash)
+}
+
+/**
+ * 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]
+}
+

package/src/components/Avatar/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { getAvatarColor } from './avatarColors'
+import { getAvatarEmoji } from './getAvatarEmoji'
 
 export interface AvatarProps {
   id: string
@@ -16,14 +16,13 @@ export interface AvatarProps {
  */
 export const Avatar: React.FC<AvatarProps> = ({
   id,
-  name,
   image,
   size = 40,
   className,
 }) => {
-  const { color } = getAvatarColor(id)
-  const initial = name.charAt(0).toUpperCase()
+  const emoji = getAvatarEmoji(id)
 
+  const DEFAULT_COLOR = '#FBFAF9'
   // Determine font size based on avatar size
   const getFontSizeClass = () => {
     if (size < 32) return 'text-xs'
@@ -36,7 +35,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       className={classNames(
-        'flex-shrink-0 overflow-hidden rounded-full',
+        'flex-shrink-0 overflow-hidden rounded-lg',
         className
       )}
       style={{ width: `${size}px`, height: `${size}px` }}
@@ -51,15 +50,15 @@ export const Avatar: React.FC<AvatarProps> = ({
         <div
           aria-hidden="true"
           className={classNames(
-            'flex h-full w-full items-center justify-center font-semibold',
+            'flex h-full w-full items-center justify-center font-semibold rounded-sm',
             fontSizeClass
           )}
           style={{
-            color,
-            backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+            color: DEFAULT_COLOR,
+            backgroundColor: `color-mix(in srgb, ${DEFAULT_COLOR} 60%, solid)`,
           }}
         >
-          {initial}
+          {emoji}
         </div>
       )}
     </div>