@planningcenter/chat-react-native 3.31.0-rc.3 → 3.31.0-rc.4

package/src/components/display/conversation_avatar.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import type { ViewStyle } from 'react-native'
+import type { ConversationResource } from '../../types'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import { AvatarGroup } from './avatar_group'
+import { EmojiAvatar } from './emoji_avatar'
+import { type IconString } from './icon'
+import { IconAvatar } from './icon_avatar'
+
+type ConversationAvatarData = Pick<
+  ConversationResource,
+  | 'customAvatarType'
+  | 'customAvatarKey'
+  | 'customAvatarColor'
+  | 'customAvatarImageUrl'
+  | 'previewAvatarUrls'
+>
+
+type ResolvedAvatar =
+  | { kind: 'image'; url: string }
+  | { kind: 'icon'; iconKey: string; color: string | null }
+  | { kind: 'emoji'; emoji: string; color: string | null }
+  | { kind: 'group'; sources: string[] | undefined }
+
+function resolveAvatar(conversation: ConversationAvatarData): ResolvedAvatar {
+  if (conversation.customAvatarType === 'image' && conversation.customAvatarImageUrl) {
+    return { kind: 'image', url: conversation.customAvatarImageUrl }
+  }
+
+  if (conversation.customAvatarType === 'icon' && conversation.customAvatarKey) {
+    return {
+      kind: 'icon',
+      iconKey: conversation.customAvatarKey,
+      color: conversation.customAvatarColor ?? null,
+    }
+  }
+
+  if (conversation.customAvatarType === 'emoji' && conversation.customAvatarKey) {
+    return {
+      kind: 'emoji',
+      emoji: conversation.customAvatarKey,
+      color: conversation.customAvatarColor ?? null,
+    }
+  }
+
+  return { kind: 'group', sources: conversation.previewAvatarUrls }
+}
+
+interface ConversationAvatarProps {
+  conversation: ConversationAvatarData
+  size?: AvatarRootProps['size']
+  showFallback?: boolean
+  fallbackIconName?: IconString
+  style?: ViewStyle
+}
+
+export function ConversationAvatar({
+  conversation,
+  size = 'lg',
+  showFallback = false,
+  fallbackIconName = 'general.person',
+  style,
+}: ConversationAvatarProps) {
+  const avatar = resolveAvatar(conversation)
+
+  switch (avatar.kind) {
+    case 'image':
+      return (
+        <AvatarPrimitive.Root size={size} style={style}>
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={avatar.url} />
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>
+      )
+    case 'icon':
+      return <IconAvatar iconKey={avatar.iconKey} color={avatar.color} size={size} />
+    case 'emoji':
+      return <EmojiAvatar emoji={avatar.emoji} color={avatar.color} size={size} />
+    case 'group':
+      return (
+        <AvatarGroup
+          sourceUris={avatar.sources || []}
+          size={size}
+          showFallback={showFallback || !avatar.sources || avatar.sources.length === 0}
+          fallbackIconName={fallbackIconName}
+          style={style}
+        />
+      )
+  }
+}

package/src/components/display/emoji_avatar.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
+
+const EMOJI_SIZE: Record<string, number> = {
+  xs: 8,
+  sm: 10,
+  md: 14,
+  lg: 20,
+}
+
+interface EmojiAvatarProps {
+  emoji: string
+  color?: string | null
+  size?: AvatarRootProps['size']
+}
+
+export function EmojiAvatar({ emoji, color, size = 'lg' }: EmojiAvatarProps) {
+  const gradientProps = getAvatarGradientProps(color)
+
+  return (
+    <AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <LinearGradient {...gradientProps} style={styles.gradientFill}>
+          <View style={styles.contentContainer}>
+            <Text allowFontScaling={false} style={{ fontSize: EMOJI_SIZE[size] }}>
+              {emoji}
+            </Text>
+          </View>
+        </LinearGradient>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}
+
+const styles = StyleSheet.create({
+  gradientFill: {
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/display/icon_avatar.tsx

@@ -0,0 +1,52 @@
+import type { IconName } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
+import { getAvatarGradientProps } from './utils/avatar_gradient_colors'
+
+const ICON_SIZE: Record<string, number> = {
+  xs: 10,
+  sm: 12,
+  md: 16,
+  lg: 20,
+}
+
+interface IconAvatarProps {
+  iconKey: string
+  color?: string | null
+  size?: AvatarRootProps['size']
+}
+
+export function IconAvatar({ iconKey, color, size = 'lg' }: IconAvatarProps) {
+  const gradientProps = getAvatarGradientProps(color)
+
+  return (
+    <AvatarPrimitive.Root size={size}>
+      <AvatarPrimitive.Mask>
+        <LinearGradient {...gradientProps} style={styles.gradientFill}>
+          <View style={styles.contentContainer}>
+            <FontAwesomeIcon
+              icon={['fas', iconKey as IconName]}
+              size={ICON_SIZE[size]}
+              color="white"
+            />
+          </View>
+        </LinearGradient>
+      </AvatarPrimitive.Mask>
+    </AvatarPrimitive.Root>
+  )
+}
+
+const styles = StyleSheet.create({
+  gradientFill: {
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/display/index.ts

@@ -1,6 +1,9 @@
 export * from './avatar_group'
 export * from './avatar'
 export * from './badge'
+export * from './conversation_avatar'
+export * from './emoji_avatar'
+export * from './icon_avatar'
 export * from './banner_collapsible'
 export * from './banner'
 export * from './button'

package/src/components/display/utils/avatar_gradient_colors.ts

@@ -0,0 +1,87 @@
+// Gradient color map for custom conversation avatars.
+// Values ported from chat web constants and @planningcenter/tapestry tokens.
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface AvatarGradientProps {
+  colors: string[]
+  start: Point
+  end: Point
+}
+
+export type CustomAvatarColorKey =
+  | 'warm-sunset'
+  | 'peach'
+  | 'rose-gold'
+  | 'purple-gold'
+  | 'gold'
+  | 'garden'
+  | 'gold-blue'
+  | 'green-blue'
+  | 'iris'
+  | 'cosmic'
+  | 'navy-purple'
+  | 'twilight'
+  | 'steel'
+  | 'mauve'
+  | 'rose-teal'
+  | 'teal-purple'
+  | 'amethyst'
+  | 'rainbow'
+
+export const DEFAULT_AVATAR_COLOR_KEY: CustomAvatarColorKey = 'warm-sunset'
+
+// CSS angle → RN coordinate mapping:
+// 90°  → start: {x:0, y:0.5}, end: {x:1, y:0.5}
+// 120° → start: {x:0, y:0},   end: {x:0.5, y:1}
+// 135° → start: {x:0, y:0},   end: {x:1, y:1}
+// 160° → start: {x:0, y:0},   end: {x:0.35, y:1}
+
+const ANGLE_135: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0 },
+  end: { x: 1, y: 1 },
+}
+
+const ANGLE_90: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0.5 },
+  end: { x: 1, y: 0.5 },
+}
+
+const ANGLE_120: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0 },
+  end: { x: 0.5, y: 1 },
+}
+
+const ANGLE_160: Pick<AvatarGradientProps, 'start' | 'end'> = {
+  start: { x: 0, y: 0 },
+  end: { x: 0.35, y: 1 },
+}
+
+const AVATAR_GRADIENT_MAP: Record<CustomAvatarColorKey, AvatarGradientProps> = {
+  'warm-sunset': { colors: ['#F6D06F', '#FB7946', '#B13825'], ...ANGLE_135 },
+  peach: { colors: ['#FCD983', '#FC9369'], ...ANGLE_90 },
+  'rose-gold': { colors: ['#ED78BE', '#E19084', '#EDB32C'], ...ANGLE_135 },
+  'purple-gold': { colors: ['#8B52D0', '#F8C73F'], ...ANGLE_135 },
+  gold: { colors: ['#F4C652', '#CCA32C'], ...ANGLE_90 },
+  garden: { colors: ['#FCD983', '#8DB95B', '#2A837C'], ...ANGLE_135 },
+  'gold-blue': { colors: ['#F4C652', '#3980C6'], ...ANGLE_90 },
+  'green-blue': { colors: ['#3FA05A', '#2466F5'], ...ANGLE_135 },
+  iris: { colors: ['#9773A5', '#2466F5', '#73BFBA'], ...ANGLE_120 },
+  cosmic: { colors: ['#2466F5', '#784E88', '#CD4932'], ...ANGLE_160 },
+  'navy-purple': { colors: ['#2E58BB', '#8B52D0'], ...ANGLE_160 },
+  twilight: { colors: ['#7FA1EB', '#865F95', '#3B404A'], ...ANGLE_135 },
+  steel: { colors: ['#8F95A3', '#585F6F'], ...ANGLE_135 },
+  mauve: { colors: ['#AD8FB7', '#585F6F'], ...ANGLE_135 },
+  'rose-teal': { colors: ['#E8638A', '#73BFBA'], ...ANGLE_135 },
+  'teal-purple': { colors: ['#6ADCC7', '#713FB0'], ...ANGLE_135 },
+  amethyst: { colors: ['#C69CE8', '#CB691F'], ...ANGLE_135 },
+  rainbow: { colors: ['#E76958', '#CCA32C', '#3FA05A', '#8B52D0'], ...ANGLE_135 },
+}
+
+export function getAvatarGradientProps(colorKey?: string | null): AvatarGradientProps {
+  const key = (colorKey as CustomAvatarColorKey) || DEFAULT_AVATAR_COLOR_KEY
+  return AVATAR_GRADIENT_MAP[key] || AVATAR_GRADIENT_MAP[DEFAULT_AVATAR_COLOR_KEY]
+}

package/src/hooks/use_conversation.ts

@@ -24,6 +24,10 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'last_message_text_preview',
         'latest_read_message_sort_key',
         'preview_avatar_urls',
+        'custom_avatar_type',
+        'custom_avatar_key',
+        'custom_avatar_color',
+        'custom_avatar_image_url',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/screens/design_system_screen.tsx

@@ -10,6 +10,9 @@ import {
   Banner,
   BannerCollapsible,
   Button,
+  ConversationAvatar,
+  EmojiAvatar,
+  IconAvatar,
   ToggleButton,
   Heading,
   Icon,
@@ -811,6 +814,69 @@ function ImageIconsSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="IconAvatar"
+        description="Renders a FontAwesome icon centered on a gradient background. Used by ConversationAvatar for icon-type custom avatars, and reusable in the avatar picker UI."
+      >
+        <Row>
+          <IconAvatar iconKey="church" color="warm-sunset" size="lg" />
+          <IconAvatar iconKey="guitar" color="cosmic" size="lg" />
+          <IconAvatar iconKey="music" color="iris" size="md" />
+          <IconAvatar iconKey="dove" color="rose-teal" size="sm" />
+          <IconAvatar iconKey="cross" color="gold" size="xs" />
+        </Row>
+        <Row>
+          <IconAvatar iconKey="church" color="garden" size="lg" />
+          <IconAvatar iconKey="church" color="twilight" size="lg" />
+          <IconAvatar iconKey="church" color="amethyst" size="lg" />
+          <IconAvatar iconKey="church" color="rainbow" size="lg" />
+        </Row>
+      </Group>
+      <Group
+        title="EmojiAvatar"
+        description="Renders an emoji centered on a gradient background. Used by ConversationAvatar for emoji-type custom avatars."
+      >
+        <Row>
+          <EmojiAvatar emoji="🎉" color="warm-sunset" size="lg" />
+          <EmojiAvatar emoji="🔥" color="cosmic" size="lg" />
+          <EmojiAvatar emoji="💬" color="iris" size="md" />
+          <EmojiAvatar emoji="⭐" color="gold" size="sm" />
+          <EmojiAvatar emoji="🎵" color="navy-purple" size="xs" />
+        </Row>
+      </Group>
+      <Group
+        title="ConversationAvatar"
+        description="Smart avatar that resolves a conversation's custom avatar (image, icon, or emoji) or falls back to the member AvatarGroup. Takes a conversation object and delegates to IconAvatar, EmojiAvatar, or AvatarGroup."
+      >
+        <Row>
+          <ConversationAvatar
+            conversation={{
+              customAvatarType: 'icon',
+              customAvatarKey: 'church',
+              customAvatarColor: 'warm-sunset',
+            }}
+          />
+          <ConversationAvatar
+            conversation={{
+              customAvatarType: 'emoji',
+              customAvatarKey: '🎉',
+              customAvatarColor: 'cosmic',
+            }}
+          />
+          <ConversationAvatar
+            conversation={{
+              customAvatarType: 'image',
+              customAvatarImageUrl: URL.avatar,
+            }}
+          />
+          <ConversationAvatar
+            conversation={{
+              previewAvatarUrls: URL.two_avatars,
+            }}
+          />
+          <ConversationAvatar conversation={{}} fallbackIconName="people.noTextMessage" />
+        </Row>
+      </Group>
       <Group
         title="Icon"
         description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size."

package/src/types/resources/conversation.ts

@@ -15,6 +15,10 @@ export interface ConversationResource {
   genderOption?: string | null
   groups?: GroupResource[]
   previewAvatarUrls?: string[]
+  customAvatarType?: 'image' | 'icon' | 'emoji' | null
+  customAvatarKey?: string | null
+  customAvatarColor?: string | null
+  customAvatarImageUrl?: string | null
   lastMessageAuthorId?: string
   lastMessageAuthorName?: string
   lastMessageCreatedAt?: string

package/src/utils/request/conversation.ts

@@ -37,6 +37,10 @@ export const getConversationsRequestArgs = ({
           'last_message_created_at',
           'last_message_text_preview',
           'preview_avatar_urls',
+          'custom_avatar_type',
+          'custom_avatar_key',
+          'custom_avatar_color',
+          'custom_avatar_image_url',
           'member_ability',
           'muted',
           'replies_disabled',