@planningcenter/chat-react-native 3.1.0-rc.13 → 3.1.0-rc.14

package/build/utils/native_adapters/index.js

@@ -1,3 +1,5 @@
 export * from './clipboard';
 export * from './configuration';
+export * from './audio';
+export * from './video';
 //# sourceMappingURL=index.js.map

package/build/utils/native_adapters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA","sourcesContent":["export * from './clipboard'\nexport * from './configuration'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA","sourcesContent":["export * from './clipboard'\nexport * from './configuration'\nexport * from './audio'\nexport * from './video'\n"]}

package/build/utils/native_adapters/video.d.ts

@@ -0,0 +1,25 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface VideoPlayerProps {
+    source: {
+        uri: string;
+    };
+    aspectRatio?: number;
+    style?: StyleProp<ViewStyle>;
+    onFullscreenPlayerWillPresent?: () => void;
+    onFullscreenPlayerDidPresent?: () => void;
+    onFullscreenPlayerWillDismiss?: () => void;
+    onFullscreenPlayerDidDismiss?: () => void;
+}
+export interface VideoPlayerHandle {
+    play: () => void;
+    pause: () => void;
+    presentFullscreenPlayer: () => void;
+    dismissFullscreen: () => void;
+}
+type VideoPlayer = React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>>;
+export declare class VideoAdapter {
+    Player: VideoPlayer;
+    constructor(methods: VideoAdapter);
+}
+export {};
+//# sourceMappingURL=video.d.ts.map

package/build/utils/native_adapters/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/utils/native_adapters/video.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1C,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAA;IACzC,6BAA6B,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1C,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,uBAAuB,EAAE,MAAM,IAAI,CAAA;IACnC,iBAAiB,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,yBAAyB,CAChD,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAC1D,CAAA;AAED,qBAAa,YAAY;IACvB,MAAM,EAAE,WAAW,CAAA;gBAEP,OAAO,EAAE,YAAY;CAGlC"}

package/build/utils/native_adapters/video.js

@@ -0,0 +1,7 @@
+export class VideoAdapter {
+    Player;
+    constructor(methods) {
+        this.Player = methods.Player;
+    }
+}
+//# sourceMappingURL=video.js.map

package/build/utils/native_adapters/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sourceRoot":"","sources":["../../../src/utils/native_adapters/video.ts"],"names":[],"mappings":"AAuBA,MAAM,OAAO,YAAY;IACvB,MAAM,CAAa;IAEnB,YAAY,OAAqB;QAC/B,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IAC9B,CAAC;CACF","sourcesContent":["import { StyleProp, ViewStyle } from 'react-native'\n\nexport interface VideoPlayerProps {\n  source: { uri: string }\n  aspectRatio?: number\n  style?: StyleProp<ViewStyle>\n  onFullscreenPlayerWillPresent?: () => void\n  onFullscreenPlayerDidPresent?: () => void\n  onFullscreenPlayerWillDismiss?: () => void\n  onFullscreenPlayerDidDismiss?: () => void\n}\n\nexport interface VideoPlayerHandle {\n  play: () => void\n  pause: () => void\n  presentFullscreenPlayer: () => void\n  dismissFullscreen: () => void\n}\n\ntype VideoPlayer = React.ForwardRefExoticComponent<\n  VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>\n>\n\nexport class VideoAdapter {\n  Player: VideoPlayer\n\n  constructor(methods: VideoAdapter) {\n    this.Player = methods.Player\n  }\n}\n"]}

package/build/utils/pluralize.d.ts

@@ -0,0 +1,2 @@
+export declare function pluralize(count: number, singularWord: string, includeCount?: boolean): string;
+//# sourceMappingURL=pluralize.d.ts.map

package/build/utils/pluralize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pluralize.d.ts","sourceRoot":"","sources":["../../src/utils/pluralize.ts"],"names":[],"mappings":"AAEA,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,UAAO,UAQjF"}

package/build/utils/pluralize.js

@@ -0,0 +1,10 @@
+const irregularInflections = { person: 'people' };
+export function pluralize(count, singularWord, includeCount = true) {
+    const plural = count !== 1;
+    const pluralWord = irregularInflections[singularWord] || `${singularWord}s`;
+    return [
+        includeCount ? `${count.toLocaleString()} ` : '',
+        plural ? pluralWord : singularWord,
+    ].join('');
+}
+//# sourceMappingURL=pluralize.js.map

package/build/utils/pluralize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pluralize.js","sourceRoot":"","sources":["../../src/utils/pluralize.ts"],"names":[],"mappings":"AAAA,MAAM,oBAAoB,GAA2B,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAA;AAEzE,MAAM,UAAU,SAAS,CAAC,KAAa,EAAE,YAAoB,EAAE,YAAY,GAAG,IAAI;IAChF,MAAM,MAAM,GAAG,KAAK,KAAK,CAAC,CAAA;IAC1B,MAAM,UAAU,GAAG,oBAAoB,CAAC,YAAY,CAAC,IAAI,GAAG,YAAY,GAAG,CAAA;IAE3E,OAAO;QACL,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;QAChD,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;KACnC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACZ,CAAC","sourcesContent":["const irregularInflections: Record<string, string> = { person: 'people' }\n\nexport function pluralize(count: number, singularWord: string, includeCount = true) {\n  const plural = count !== 1\n  const pluralWord = irregularInflections[singularWord] || `${singularWord}s`\n\n  return [\n    includeCount ? `${count.toLocaleString()} ` : '',\n    plural ? pluralWord : singularWord,\n  ].join('')\n}\n"]}

package/build/utils/request/conversation.d.ts

@@ -0,0 +1,10 @@
+import { GetRequest } from '../client/types';
+export interface ConversationRequestArgs {
+    filter: string;
+    gids: string;
+    group: string;
+    chat_group_graph_id?: string;
+    group_source_app_name?: string;
+}
+export declare const getConversationsRequestArgs: ({ filter, gids, group, group_source_app_name, }?: Partial<ConversationRequestArgs>) => GetRequest;
+//# sourceMappingURL=conversation.d.ts.map

package/build/utils/request/conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../src/utils/request/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,eAAO,MAAM,2BAA2B,qDAKrC,OAAO,CAAC,uBAAuB,CAAC,KAAQ,UA8BzC,CAAA"}

package/build/utils/request/conversation.js

@@ -0,0 +1,32 @@
+export const getConversationsRequestArgs = ({ filter, gids, group, group_source_app_name, } = {}) => ({
+    url: '/me/conversations',
+    data: {
+        perPage: 20,
+        order: '-last_message',
+        filter,
+        group,
+        gids,
+        group_source_app_name,
+        fields: {
+            Conversation: [
+                'created_at',
+                'badges',
+                'groups',
+                'last_message_author_id',
+                'last_message_author_name',
+                'last_message_created_at',
+                'last_message_text_preview',
+                'preview_avatar_urls',
+                'member_ability',
+                'muted',
+                'replies_disabled',
+                'title',
+                'unread_count',
+                'updated_at',
+            ],
+            ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
+        },
+        include: ['badges'],
+    },
+});
+//# sourceMappingURL=conversation.js.map

package/build/utils/request/conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.js","sourceRoot":"","sources":["../../../src/utils/request/conversation.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,MAAM,EACN,IAAI,EACJ,KAAK,EACL,qBAAqB,MACe,EAAE,EAAc,EAAE,CAAC,CAAC;IACxD,GAAG,EAAE,mBAAmB;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,eAAe;QACtB,MAAM;QACN,KAAK;QACL,IAAI;QACJ,qBAAqB;QACrB,MAAM,EAAE;YACN,YAAY,EAAE;gBACZ,YAAY;gBACZ,QAAQ;gBACR,QAAQ;gBACR,wBAAwB;gBACxB,0BAA0B;gBAC1B,yBAAyB;gBACzB,2BAA2B;gBAC3B,qBAAqB;gBACrB,gBAAgB;gBAChB,OAAO;gBACP,kBAAkB;gBAClB,OAAO;gBACP,cAAc;gBACd,YAAY;aACb;YACD,iBAAiB,EAAE,CAAC,UAAU,EAAE,mBAAmB,EAAE,MAAM,CAAC;SAC7D;QACD,OAAO,EAAE,CAAC,QAAQ,CAAC;KACpB;CACF,CAAC,CAAA","sourcesContent":["import { GetRequest } from '../client/types'\n\nexport interface ConversationRequestArgs {\n  filter: string\n  gids: string\n  group: string\n  chat_group_graph_id?: string\n  group_source_app_name?: string\n}\n\nexport const getConversationsRequestArgs = ({\n  filter,\n  gids,\n  group,\n  group_source_app_name,\n}: Partial<ConversationRequestArgs> = {}): GetRequest => ({\n  url: '/me/conversations',\n  data: {\n    perPage: 20,\n    order: '-last_message',\n    filter,\n    group,\n    gids,\n    group_source_app_name,\n    fields: {\n      Conversation: [\n        'created_at',\n        'badges',\n        'groups',\n        'last_message_author_id',\n        'last_message_author_name',\n        'last_message_created_at',\n        'last_message_text_preview',\n        'preview_avatar_urls',\n        'member_ability',\n        'muted',\n        'replies_disabled',\n        'title',\n        'unread_count',\n        'updated_at',\n      ],\n      ConversationBadge: ['app_name', 'pco_resource_type', 'text'],\n    },\n    include: ['badges'],\n  },\n})\n"]}

package/build/utils/request/messages.d.ts

@@ -0,0 +1,15 @@
+export declare const getMessagesRequestArgs: ({ conversation_id }: {
+    conversation_id: number;
+}) => {
+    url: string;
+    data: {
+        perPage: number;
+        fields: {
+            Message: string[];
+            Person: string[];
+            ReactionCount: string[];
+        };
+        include: string[];
+    };
+};
+//# sourceMappingURL=messages.d.ts.map

package/build/utils/request/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../src/utils/request/messages.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,wBAAyB;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;CAoBrF,CAAA"}

package/build/utils/request/messages.js

@@ -0,0 +1,22 @@
+export const getMessagesRequestArgs = ({ conversation_id }) => ({
+    url: `/me/conversations/${conversation_id}/messages`,
+    data: {
+        perPage: 25,
+        fields: {
+            Message: [
+                'text',
+                'text_edited_at',
+                'mine',
+                'attachments',
+                'created_at',
+                'deleted_at',
+                'author',
+                'reaction_counts',
+            ],
+            Person: ['name', 'avatar'],
+            ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
+        },
+        include: ['author', 'reaction_counts'],
+    },
+});
+//# sourceMappingURL=messages.js.map

package/build/utils/request/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/utils/request/messages.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE,CAAC,CAAC;IAC3F,GAAG,EAAE,qBAAqB,eAAe,WAAW;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE;QACX,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,MAAM;gBACN,gBAAgB;gBAChB,MAAM;gBACN,aAAa;gBACb,YAAY;gBACZ,YAAY;gBACZ,QAAQ;gBACR,iBAAiB;aAClB;YACD,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;YAC1B,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,CAAC;SACtE;QACD,OAAO,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC;KACvC;CACF,CAAC,CAAA","sourcesContent":["export const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({\n  url: `/me/conversations/${conversation_id}/messages`,\n  data: {\n    perPage: 25,\n    fields: {\n      Message: [\n        'text',\n        'text_edited_at',\n        'mine',\n        'attachments',\n        'created_at',\n        'deleted_at',\n        'author',\n        'reaction_counts',\n      ],\n      Person: ['name', 'avatar'],\n      ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],\n    },\n    include: ['author', 'reaction_counts'],\n  },\n})\n"]}

package/build/utils/theme.d.ts

@@ -22,7 +22,7 @@ export interface DefaultTheme {
     button: {
         borderRadius: number;
     };
-    showBadgeLogo: boolean;
+    showBadgeProductLogo: boolean;
 }
 export declare const defaultTheme: (colorScheme: ColorSchemeName) => ChatTheme;
 export type TemporaryDefaultColorsType = Partial<ChatColors>;

package/build/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAe3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,sBAAsB,EAAE,MAAM,CAAA;CAC/B"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AAE/E,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,GAC5B,CAAC,OAAO,mBAAmB,CAAC,KAAK,GAAG,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;CACvE;AAED;;;;;;;;;;;;;gDAagD;AAEhD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,oBAAoB,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,gBAAiB,eAAe,KAAG,SAe3D,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE5D,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,cAAc,EAAE,MAAM,CAAA;IACtB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,iBAAiB,EAAE,MAAM,CAAA;IACzB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,sBAAsB,EAAE,MAAM,CAAA;CAC/B"}

package/build/utils/theme.js

@@ -11,7 +11,7 @@ export const defaultTheme = (colorScheme) => {
         button: {
             borderRadius: 40,
         },
-        showBadgeLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
+        showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
     };
 };
 const colorsChatLight = {

package/build/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        borderRadius: number\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  button: {\n    borderRadius: number\n  }\n  showBadgeLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n  const scheme = colorScheme || 'light'\n\n  const defaultColors = {\n    ...chatThemeColorMap[scheme],\n    ...aliasTokensColorMap[scheme],\n  }\n\n  return {\n    colors: defaultColors,\n    button: {\n      borderRadius: 40,\n    },\n    showBadgeLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  switchTrackTrue: string | undefined\n  switchTrackFalse: string | undefined\n  switchThumbColor: string | undefined\n  testColor: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBackground: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBackground: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBackground: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBackground: string\n  statusNeutralIcon: string\n  statusNeutralText: string\n  statusNeutralBackground: string\n  borderColorStatusError: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralText: tokens.textColorStatusNeutral,\n  statusNeutralBackground: tokens.fillColorStatusNeutralGhost,\n  borderColorStatusError: tokens.borderColorStatusError,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralText: tokens.textColorStatusNeutralDark,\n  statusNeutralBackground: tokens.fillColorStatusNeutralGhostDark,\n  borderColorStatusError: tokens.borderColorStatusErrorDark,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAA;AA8B/E,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,WAA4B,EAAa,EAAE;IACtE,MAAM,MAAM,GAAG,WAAW,IAAI,OAAO,CAAA;IAErC,MAAM,aAAa,GAAG;QACpB,GAAG,iBAAiB,CAAC,MAAM,CAAC;QAC5B,GAAG,mBAAmB,CAAC,MAAM,CAAC;KAC/B,CAAA;IAED,OAAO;QACL,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE;YACN,YAAY,EAAE,EAAE;SACjB;QACD,oBAAoB,EAAE,IAAI,EAAE,sEAAsE;KACnG,CAAA;AACH,CAAC,CAAA;AA+BD,MAAM,eAAe,GAAe;IAClC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,2BAA2B;IAC/C,eAAe,EAAE,SAAS;IAC1B,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,MAAM,CAAC,0BAA0B;IACjD,cAAc,EAAE,MAAM,CAAC,mBAAmB;IAC1C,oBAAoB,EAAE,MAAM,CAAC,wBAAwB;IACrD,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,eAAe,EAAE,MAAM,CAAC,2BAA2B;IACnD,eAAe,EAAE,MAAM,CAAC,oBAAoB;IAC5C,qBAAqB,EAAE,MAAM,CAAC,yBAAyB;IACvD,iBAAiB,EAAE,MAAM,CAAC,6BAA6B;IACvD,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;IAChD,uBAAuB,EAAE,MAAM,CAAC,2BAA2B;IAC3D,sBAAsB,EAAE,MAAM,CAAC,sBAAsB;CACtD,CAAA;AAED,MAAM,cAAc,GAAe;IACjC,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,MAAM,CAAC,+BAA+B;IACnD,eAAe,EAAE,SAAS;IAC1B,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,SAAS;IAC3B,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,MAAM,CAAC,8BAA8B;IACrD,cAAc,EAAE,MAAM,CAAC,uBAAuB;IAC9C,oBAAoB,EAAE,MAAM,CAAC,4BAA4B;IACzD,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,eAAe,EAAE,MAAM,CAAC,+BAA+B;IACvD,eAAe,EAAE,MAAM,CAAC,wBAAwB;IAChD,qBAAqB,EAAE,MAAM,CAAC,6BAA6B;IAC3D,iBAAiB,EAAE,MAAM,CAAC,iCAAiC;IAC3D,iBAAiB,EAAE,MAAM,CAAC,0BAA0B;IACpD,uBAAuB,EAAE,MAAM,CAAC,+BAA+B;IAC/D,sBAAsB,EAAE,MAAM,CAAC,0BAA0B;CAC1D,CAAA;AAED,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;CACrB,CAAA","sourcesContent":["import { ColorSchemeName } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\nimport { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'\n\nexport interface ChatTheme extends DefaultTheme {\n  colors: DefaultTheme['colors'] &\n    (typeof aliasTokensColorMap.light | typeof aliasTokensColorMap.dark)\n}\n\n/** =============================================\n  NOTE: The specific values for `colors` and the `productBadge` are temporary examples that can be replaced once we start building out UI. This line's comment can be removed at that time too.\n\n  The default theme is intended to support two types of customizations:\n  1. Specific color properties for a chat component (eg. `primaryButtonBackgroundColor`)\n  2. Any styles for a specific component. (Use only one level of nesting.)\n    ```\n      primaryButton: {\n        borderRadius: number\n        container: ViewStyle\n        text: TextStyle\n      }\n    ```\n============================================= */\n\nexport interface DefaultTheme {\n  colors: ChatColors\n  button: {\n    borderRadius: number\n  }\n  showBadgeProductLogo: boolean\n}\n\nexport const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {\n  const scheme = colorScheme || 'light'\n\n  const defaultColors = {\n    ...chatThemeColorMap[scheme],\n    ...aliasTokensColorMap[scheme],\n  }\n\n  return {\n    colors: defaultColors,\n    button: {\n      borderRadius: 40,\n    },\n    showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`\n  }\n}\n\nexport type TemporaryDefaultColorsType = Partial<ChatColors>\n\ninterface ChatColors {\n  name: string\n  buttonStart: string | undefined\n  buttonEnd: string | undefined\n  interaction: string\n  switchTrackTrue: string | undefined\n  switchTrackFalse: string | undefined\n  switchThumbColor: string | undefined\n  testColor: string\n  statusInfoIcon: string\n  statusInfoText: string\n  statusInfoBackground: string\n  statusSuccessIcon: string\n  statusSuccessText: string\n  statusSuccessBackground: string\n  statusWarningIcon: string\n  statusWarningText: string\n  statusWarningBackground: string\n  statusErrorIcon: string\n  statusErrorText: string\n  statusErrorBackground: string\n  statusNeutralIcon: string\n  statusNeutralText: string\n  statusNeutralBackground: string\n  borderColorStatusError: string\n}\n\nconst colorsChatLight: ChatColors = {\n  name: 'light',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefault,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'hotpink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimary,\n  statusInfoText: tokens.textColorStatusInfo,\n  statusInfoBackground: tokens.fillColorStatusInfoGhost,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimary,\n  statusSuccessText: tokens.textColorStatusSuccess,\n  statusSuccessBackground: tokens.fillColorStatusSuccessGhost,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimary,\n  statusWarningText: tokens.textColorStatusWarning,\n  statusWarningBackground: tokens.fillColorStatusWarningGhost,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimary,\n  statusErrorText: tokens.textColorStatusError,\n  statusErrorBackground: tokens.fillColorStatusErrorGhost,\n  statusNeutralIcon: tokens.iconColorStatusNeutralPrimary,\n  statusNeutralText: tokens.textColorStatusNeutral,\n  statusNeutralBackground: tokens.fillColorStatusNeutralGhost,\n  borderColorStatusError: tokens.borderColorStatusError,\n}\n\nconst colorsChatDark: ChatColors = {\n  name: 'dark',\n  buttonStart: undefined,\n  buttonEnd: undefined,\n  interaction: tokens.fillColorInteractionDefaultDark,\n  switchTrackTrue: undefined,\n  switchTrackFalse: undefined,\n  switchThumbColor: undefined,\n  testColor: 'pink',\n  statusInfoIcon: tokens.iconColorStatusInfoPrimaryDark,\n  statusInfoText: tokens.textColorStatusInfoDark,\n  statusInfoBackground: tokens.fillColorStatusInfoGhostDark,\n  statusSuccessIcon: tokens.iconColorStatusSuccessPrimaryDark,\n  statusSuccessText: tokens.textColorStatusSuccessDark,\n  statusSuccessBackground: tokens.fillColorStatusSuccessGhostDark,\n  statusWarningIcon: tokens.iconColorStatusWarningPrimaryDark,\n  statusWarningText: tokens.textColorStatusWarningDark,\n  statusWarningBackground: tokens.fillColorStatusWarningGhostDark,\n  statusErrorIcon: tokens.iconColorStatusErrorPrimaryDark,\n  statusErrorText: tokens.textColorStatusErrorDark,\n  statusErrorBackground: tokens.fillColorStatusErrorGhostDark,\n  statusNeutralIcon: tokens.iconColorStatusNeutralPrimaryDark,\n  statusNeutralText: tokens.textColorStatusNeutralDark,\n  statusNeutralBackground: tokens.fillColorStatusNeutralGhostDark,\n  borderColorStatusError: tokens.borderColorStatusErrorDark,\n}\n\nconst chatThemeColorMap = {\n  light: colorsChatLight,\n  dark: colorsChatDark,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.1.0-rc.13",
+  "version": "3.1.0-rc.14",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -52,5 +52,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "16426849214eaeee850eee8999bdd7c0f69dbe36"
+  "gitHead": "48ab2ec3519c19745d277059d6f3ed4f2576e6e5"
 }

package/src/__tests__/utils/pluralize.tsx

@@ -0,0 +1,17 @@
+import { pluralize } from '../../utils'
+
+describe('pluralize', () => {
+  it('includes count and adds an s', () => {
+    expect(pluralize(0, 'kid')).toEqual('0 kids')
+    expect(pluralize(1, 'kid')).toEqual('1 kid')
+    expect(pluralize(2, 'kid')).toEqual('2 kids')
+    expect(pluralize(10, 'kid')).toEqual('10 kids')
+  })
+  it('can optionally not include count', () => {
+    expect(pluralize(1, 'kid', false)).toEqual('kid')
+    expect(pluralize(2, 'kid', false)).toEqual('kids')
+  })
+  it('can convert "person" to "people"', () => {
+    expect(pluralize(2, 'person', false)).toEqual('people')
+  })
+})

package/src/components/conversation/attachments/attachment_card.tsx

@@ -0,0 +1,46 @@
+import React, { ComponentProps, ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'
+import { Text } from '../../display'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { useTheme } from '../../../hooks'
+
+type AttachmentCardProps = ComponentProps<typeof View>
+
+export function AttachmentCard({ children, ...props }: AttachmentCardProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.card} {...props}>
+      {children}
+    </View>
+  )
+}
+
+export function AttachmentCardTitle({ children }: { children: ReactNode }) {
+  const styles = useStyles()
+
+  return (
+    <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail" selectable={false}>
+      {children}
+    </Text>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    card: {
+      padding: 4,
+      backgroundColor: 'white',
+      borderRadius: 8,
+      minWidth: MESSAGE_ATTACHMENT_WIDTH_SINGLE,
+      minHeight: 48,
+    },
+    title: {
+      color: colors.textColorDefaultPrimary,
+      fontSize: tokens.fontSizeSm,
+    },
+  })
+}

package/src/components/conversation/attachments/audio_attachment.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { IconButton } from '../../display'
+import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { useTheme } from '../../../hooks'
+import { Audio } from '../../../utils/native_adapters'
+
+export function AudioAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, filename } = attributes
+  const sound = Audio.useAudio(url)
+
+  function toggleAudio() {
+    if (!sound.isPlaying) {
+      sound.play()
+    } else {
+      sound.pause()
+    }
+  }
+
+  const progress = sound.duration > 0 ? sound.position / sound.duration : 0
+
+  function durationText() {
+    if (sound.duration > 0) {
+      return `${Math.floor(sound.position / 1000)}s / ${Math.floor(sound.duration / 1000)}s`
+    } else {
+      return 'Loading...'
+    }
+  }
+
+  return (
+    <AttachmentCard>
+      <View style={styles.container}>
+        <IconButton
+          name={sound.isPlaying ? 'services.pause' : 'services.play'}
+          size="md"
+          accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}
+          onPress={toggleAudio}
+          disabled={!sound}
+          style={styles.button}
+        />
+        <View style={styles.details}>
+          <AttachmentCardTitle>{filename}</AttachmentCardTitle>
+          <View style={styles.progressContainer}>
+            <View style={[styles.progressBar, { width: `${progress * 100}%` }]} />
+          </View>
+          <Text style={styles.durationText}>{durationText()}</Text>
+        </View>
+      </View>
+    </AttachmentCard>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+    },
+    button: {
+      width: 42,
+      height: 42,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 25,
+      backgroundColor: '#eee',
+      borderColor: '#aaa',
+      borderWidth: 1,
+    },
+    buttonText: {
+      fontSize: 32,
+      lineHeight: 32,
+    },
+    details: {
+      flex: 1,
+      marginLeft: 10,
+      gap: 5,
+    },
+    progressContainer: {
+      height: 5,
+      backgroundColor: '#ccc',
+      borderRadius: 2.5,
+      overflow: 'hidden',
+    },
+    progressBar: {
+      height: '100%',
+      backgroundColor: 'blue',
+    },
+    durationText: {
+      fontSize: tokens.fontSizeXs,
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

package/src/components/conversation/attachments/constants.ts

@@ -0,0 +1,5 @@
+const MESSAGE_BUBBLE_ATTACHMENT_PADDING = 2
+
+export const MESSAGE_BUBBLE_WIDTH_SINGLE = 232
+export const MESSAGE_ATTACHMENT_WIDTH_SINGLE =
+  MESSAGE_BUBBLE_WIDTH_SINGLE - MESSAGE_BUBBLE_ATTACHMENT_PADDING * 2

package/src/components/conversation/attachments/download_attachment_button.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { IconButton } from '../../display'
+import { useTheme } from '../../../hooks'
+import { Linking, StyleSheet } from 'react-native'
+
+interface DownloadAttachmentButtonProps {
+  to: string
+  filename: string
+  title: string
+}
+
+export function DownloadAttachmentButton({ to, title }: DownloadAttachmentButtonProps) {
+  const styles = useStyles()
+  async function handleDownload() {
+    if (to) {
+      // Open link in the default web browser
+      Linking.openURL(to)
+    }
+  }
+
+  return (
+    <IconButton
+      name="general.fromCloudArrow"
+      size="md"
+      accessibilityLabel={title}
+      onPress={handleDownload}
+      style={styles.iconButton}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    iconButton: {
+      color: colors.fillColorInteractionDefault,
+      backgroundColor: colors.fillColorNeutral070,
+      borderWidth: 1,
+      borderColor: colors.fillColorNeutral060,
+      borderRadius: 4,
+      width: 24,
+      height: 24,
+    },
+  })
+}

package/src/components/conversation/attachments/expanded_link.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Image, Linking, Pressable, StyleSheet, Text, View } from 'react-native'
+import { useTheme } from '../../../hooks'
+import { tokens } from '../../../vendor/tapestry/tokens'
+
+export function ExpandedLink({ attachment }: { attachment: any }) {
+  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, title, description, imageUrl, imageHeight, imageWidth } = attributes
+
+  const aspectRatio = imageWidth && imageHeight ? imageWidth / imageHeight : 1
+
+  async function openUrl() {
+    if (url) Linking.openURL(url)
+  }
+
+  return (
+    <Pressable style={styles.container} onPress={openUrl}>
+      {imageUrl && (
+        <Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title} />
+      )}
+      {(title || description) && (
+        <View style={styles.textWrapper}>
+          {title && <Text style={styles.title}>{title}</Text>}
+          {description && <Text style={styles.description}>{description}</Text>}
+        </View>
+      )}
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {},
+    image: {
+      borderRadius: 8,
+    },
+    textWrapper: {
+      gap: 4,
+      padding: 8,
+    },
+    title: {
+      fontSize: tokens.fontSizeSm,
+      fontWeight: tokens.fontWeightMedium,
+      color: colors.textColorDefaultPrimary,
+    },
+    description: {
+      fontSize: tokens.fontSizeXs,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}

package/src/components/conversation/attachments/generic_file_attachment.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
+import { Icon } from '../../display'
+import { DownloadAttachmentButton } from './download_attachment_button'
+import { useTheme } from '../../../hooks'
+
+export function GenericFileAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const styles = useStyles()
+  const { url, filename, contentType } = attachment.attributes
+  const iconName = getAttachmentIconName(contentType)
+  const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'
+
+  return (
+    <Pressable>
+      <AttachmentCard>
+        <View style={styles.container}>
+          <View style={styles.stack}>
+            <Icon name={iconName} />
+            <AttachmentCardTitle>{filename}</AttachmentCardTitle>
+          </View>
+          <DownloadAttachmentButton
+            to={url}
+            filename={filename}
+            title={`Download ${fileTypeLabel}`}
+          />
+        </View>
+      </AttachmentCard>
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      padding: 8,
+      gap: 4,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 48,
+    },
+    stack: {
+      gap: 4,
+      flexDirection: 'row',
+      alignItems: 'center',
+      maxWidth: '70%',
+    },
+    icon: {
+      color: colors.textColorDefaultPrimary,
+      width: 24,
+      height: 24,
+    },
+  })
+}
+
+export function getAttachmentIconName(type: string) {
+  const isImage = type.startsWith('image/')
+  const isVideo = type.startsWith('video/')
+  const isAudio = type.startsWith('audio/')
+  const isPdf = type === 'application/pdf'
+
+  if (isImage) return 'general.outlinedImageFile'
+  if (isVideo) return 'general.outlinedVideoFile'
+  if (isAudio) return 'general.outlinedMusicFile'
+  if (isPdf) return 'general.outlinedPdfFile'
+  return 'general.outlinedGenericFile'
+}