@sendbird/uikit-react-native-foundation 3.0.4 → 3.1.0

package/lib/module/ui/OpenChannelMessage/Message.user.og.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","_extends","body3","enabled","textMsg","patterns","regex","replacer","_ref2","match","parentProps","keyPrefix","index","key","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","grouped","styles","ogContainer","_props$message$ogMeta","url","_ref3","padding","borderRadius","backgroundColor","bubbleBackground","numberOfLines","caption2","onBackground02","ogUrl","body2","ogTitle","title","description","onBackground01","defaultImage","ogImage","source","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Text body3 color={color.enabled.textMsg}>\n              <RegexText\n                body3\n                color={color.enabled.textMsg}\n                patterns={[\n                  {\n                    regex: urlRegexRough,\n                    replacer({ match, parentProps, keyPrefix, index }) {\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => onPressURL?.(match)}\n                          onLongPress={onLongPress}\n                          color={colors.primary}\n                          style={parentProps?.style}\n                        >\n                          {match}\n                        </Text>\n                      );\n                    },\n                  },\n                ]}\n              >\n                {props.message.message}\n              </RegexText>\n              {Boolean(props.message.updatedAt) && (\n                <Text body3 color={color.enabled.textMsgPostfix}>\n                  {props.strings?.edited ?? ' (edited)'}\n                </Text>\n              )}\n            </Text>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox\n            style={styles.ogContainer}\n            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}\n            onLongPress={onLongPress}\n          >\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {Boolean(props.message.ogMetaData.defaultImage) && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","_extends","body3","enabled","textMsg","patterns","regex","replacer","_ref2","match","parentProps","keyPrefix","index","key","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","grouped","styles","ogContainer","_props$message$ogMeta","url","_ref3","padding","borderRadius","backgroundColor","bubbleBackground","numberOfLines","caption2","onBackground02","ogUrl","body2","ogTitle","title","description","onBackground01","defaultImage","ogImage","source","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Text body3 color={color.enabled.textMsg}>\n              <RegexText\n                body3\n                color={color.enabled.textMsg}\n                patterns={[\n                  {\n                    regex: urlRegexRough,\n                    replacer({ match, parentProps, keyPrefix, index }) {\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => onPressURL?.(match)}\n                          onLongPress={onLongPress}\n                          color={colors.primary}\n                          style={parentProps?.style}\n                        >\n                          {match}\n                        </Text>\n                      );\n                    },\n                  },\n                ]}\n              >\n                {props.message.message}\n              </RegexText>\n              {Boolean(props.message.updatedAt) && (\n                <Text body3 color={color.enabled.textMsgPostfix}>\n                  {props.strings?.edited ?? ' (edited)'}\n                </Text>\n              )}\n            </Text>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox\n            style={styles.ogContainer}\n            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}\n            onLongPress={onLongPress}\n          >\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {!!props.message.ogMetaData.defaultImage && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}

package/lib/typescript/src/components/Icon/index.d.ts

@@ -1,4 +1,5 @@
 import { ImageStyle, StyleProp, ViewStyle } from 'react-native';
+import { FileType } from '@sendbird/uikit-utils';
 import IconAssets from '../../assets/icon';
 type IconNames = keyof typeof IconAssets;
 type Props = {
@@ -10,5 +11,9 @@ type Props = {
 };
 declare const Icon: ((props: Props) => JSX.Element) & {
     Assets: typeof IconAssets;
+    File: typeof FileIcon;
 };
+declare const FileIcon: ({ fileType, ...props }: Omit<Props, "icon"> & {
+    fileType: FileType;
+}) => JSX.Element;
 export default Icon;

package/lib/typescript/src/components/VideoThumbnail/index.d.ts

@@ -0,0 +1,11 @@
+import { StyleProp, ViewStyle } from 'react-native';
+type Props = {
+    videoSource: string;
+    fetchThumbnailFromVideoSource: (uri: string) => Promise<{
+        path: string;
+    } | null>;
+    style?: StyleProp<ViewStyle>;
+    iconSize?: number;
+};
+export declare const VideoThumbnail: ({ fetchThumbnailFromVideoSource, style, videoSource, iconSize }: Props) => JSX.Element;
+export {};

package/lib/typescript/src/index.d.ts

@@ -13,6 +13,7 @@ export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
+export { VideoThumbnail } from './components/VideoThumbnail';
 /** UI **/
 export { default as ActionMenu } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';

package/lib/typescript/src/types.d.ts

@@ -72,7 +72,7 @@ export type ComponentColorTree = GetColorTree<{
     ColorPart: {
         Header: 'background' | 'borderBottom';
         Button: 'background' | 'content';
-        Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
+        Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive' | 'blurred';
         Input: 'text' | 'placeholder' | 'background' | 'highlight';
         Badge: 'text' | 'background';
         Placeholder: 'content' | 'highlight';

package/lib/typescript/src/ui/BottomSheet/index.d.ts

@@ -8,6 +8,7 @@ export type BottomSheetItem = {
         iconColor?: string;
         title: string;
         titleColor?: string;
+        disabled?: boolean;
         onPress: () => void;
     }[];
     HeaderComponent?: (props: HeaderProps) => JSX.Element;

package/lib/typescript/src/ui/Dialog/DialogSheet.d.ts

@@ -12,6 +12,7 @@ export type SheetItemProps = {
     iconColor?: string;
     title: string;
     titleColor?: string;
+    disabled?: boolean;
 };
-declare const SheetItem: ({ icon, title, iconColor, titleColor }: SheetItemProps) => JSX.Element;
+declare const SheetItem: ({ icon, title, iconColor, titleColor, disabled }: SheetItemProps) => JSX.Element;
 export default DialogSheet;

package/lib/typescript/src/ui/GroupChannelMessage/MessageContainer.d.ts

@@ -3,7 +3,7 @@ import type { GroupChannelMessageProps } from './index';
 type Props = GroupChannelMessageProps<SendbirdMessage>;
 declare const MessageContainer: {
     (props: Props): JSX.Element;
-    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, }: Props): JSX.Element;
-    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, }: Props): JSX.Element;
+    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): JSX.Element;
+    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): JSX.Element;
 };
 export default MessageContainer;

package/lib/typescript/src/ui/GroupChannelMessage/MessageOpenGraph.d.ts

@@ -1,6 +1,6 @@
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 declare const MessageOpenGraph: ({ onPressURL, onLongPress, ogMetaData, variant, }: {
-    ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];
+    ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;
     variant: 'outgoing' | 'incoming';
     onPressURL?: ((url: string) => void) | undefined;
     onLongPress?: (() => void) | undefined;

package/lib/typescript/src/ui/GroupChannelMessage/index.d.ts

@@ -14,6 +14,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
     };
     children?: React.ReactNode;
     sendingStatus?: React.ReactNode;
+    parentMessage?: React.ReactNode;
     groupedWithPrev: boolean;
     groupedWithNext: boolean;
     onPress?: () => void;
@@ -37,6 +38,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -62,6 +64,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -87,6 +90,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -109,6 +113,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -131,6 +136,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -157,6 +163,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -179,6 +186,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -47,7 +47,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.0.4"
+    "@sendbird/uikit-utils": "3.1.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -89,5 +89,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "bf8ff3723f82f75ccf994938d6e5468e6fb669be"
+  "gitHead": "1ff295c9b8df84b188fbc1f477d3e59708b8fb80"
 }

package/src/components/Icon/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { FileType, convertFileTypeToMessageType, getFileIconFromMessageType } from '@sendbird/uikit-utils';
+
 import IconAssets from '../../assets/icon';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
@@ -15,13 +17,10 @@ type Props = {
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Icon: ((props: Props) => JSX.Element) & { Assets: typeof IconAssets } = ({
-  icon,
-  color,
-  size = 24,
-  containerStyle,
-  style,
-}) => {
+const Icon: ((props: Props) => JSX.Element) & {
+  Assets: typeof IconAssets;
+  File: typeof FileIcon;
+} = ({ icon, color, size = 24, containerStyle, style }) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
   return (
@@ -35,6 +34,10 @@ const Icon: ((props: Props) => JSX.Element) & { Assets: typeof IconAssets } = ({
   );
 };
 
+const FileIcon = ({ fileType, ...props }: Omit<Props, 'icon'> & { fileType: FileType }) => {
+  return <Icon icon={getFileIconFromMessageType(convertFileTypeToMessageType(fileType))} {...props} />;
+};
+
 const containerStyles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -66,4 +69,5 @@ const sizeStyles = createStyleSheet({
 });
 
 Icon.Assets = IconAssets;
+Icon.File = FileIcon;
 export default Icon;

package/src/components/VideoThumbnail/index.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Box from '../Box';
+import Icon from '../Icon';
+import ImageWithPlaceholder from '../ImageWithPlaceholder';
+
+type Props = {
+  videoSource: string;
+  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
+
+  style?: StyleProp<ViewStyle>;
+  iconSize?: number;
+};
+
+export const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, videoSource, iconSize = 28 }: Props) => {
+  const { palette, select } = useUIKitTheme();
+  const { thumbnail, loading } = useRetry(() => fetchThumbnailFromVideoSource(videoSource));
+
+  return (
+    <Box style={style}>
+      {loading ? (
+        <Box
+          style={StyleSheet.absoluteFill}
+          backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+        />
+      ) : (
+        <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />
+      )}
+
+      {(loading || thumbnail !== null) && iconSize > 0 && (
+        <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>
+          <Icon
+            icon={'play'}
+            size={iconSize}
+            color={palette.onBackgroundLight02}
+            containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const fetchThumbnail = useRef(fetch);
+  fetchThumbnail.current = fetch;
+
+  useEffect(() => {
+    let _timeout: NodeJS.Timeout;
+    let _cancelled = false;
+
+    if (!state.thumbnail) {
+      const tryFetchThumbnail = (timeout: number) => {
+        const retry = () => {
+          retryCountRef.current++;
+          tryFetchThumbnail(timeout + 5000);
+        };
+
+        const finish = (path: string | null) => {
+          if (!_cancelled) setState({ loading: false, thumbnail: path });
+        };
+
+        if (retryCountRef.current < retryCount) {
+          _timeout = setTimeout(() => {
+            fetchThumbnail
+              .current()
+              .then((result) => {
+                if (result === null) retry();
+                else finish(result.path);
+              })
+              .catch(() => retry());
+          }, timeout);
+        } else {
+          finish(null);
+        }
+      };
+
+      tryFetchThumbnail(0);
+    }
+
+    return () => {
+      _cancelled = true;
+      clearTimeout(_timeout);
+    };
+  }, [state.thumbnail]);
+
+  return state;
+};
+
+const styles = createStyleSheet({
+  playIcon: {
+    padding: 10,
+    borderRadius: 50,
+  },
+});

package/src/index.ts

@@ -14,6 +14,7 @@ export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
+export { VideoThumbnail } from './components/VideoThumbnail';
 
 /** UI **/
 export { default as ActionMenu } from './ui/ActionMenu';

package/src/theme/DarkUIKitTheme.ts

@@ -99,6 +99,7 @@ const DarkUIKitTheme = createTheme({
               message: palette.onBackgroundDark02,
               highlight: palette.primary200,
               destructive: palette.error300,
+              blurred: palette.onBackgroundDark04,
             },
           },
         },

package/src/theme/LightUIKitTheme.ts

@@ -99,6 +99,7 @@ const LightUIKitTheme = createTheme({
               message: palette.onBackgroundLight02,
               highlight: palette.primary300,
               destructive: palette.error300,
+              blurred: palette.onBackgroundLight04,
             },
           },
         },

package/src/types.ts

@@ -93,7 +93,7 @@ export type ComponentColorTree = GetColorTree<{
   ColorPart: {
     Header: 'background' | 'borderBottom';
     Button: 'background' | 'content';
-    Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
+    Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive' | 'blurred';
     Input: 'text' | 'placeholder' | 'background' | 'highlight';
     Badge: 'text' | 'background';
     Placeholder: 'content' | 'highlight';

package/src/ui/BottomSheet/index.tsx

@@ -14,6 +14,7 @@ export type BottomSheetItem = {
     iconColor?: string;
     title: string;
     titleColor?: string;
+    disabled?: boolean;
     onPress: () => void;
   }[];
   HeaderComponent?: (props: HeaderProps) => JSX.Element;
@@ -44,6 +45,7 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }
             activeOpacity={0.75}
             key={props.title + idx}
             style={{ paddingLeft: left, paddingRight: right }}
+            disabled={props.disabled}
             onPress={async () => {
               await onHide();
               try {

package/src/ui/Dialog/DialogSheet.tsx

@@ -23,22 +23,25 @@ export type SheetItemProps = {
   iconColor?: string;
   title: string;
   titleColor?: string;
+  disabled?: boolean;
 };
-const SheetItem = ({ icon, title, iconColor, titleColor }: SheetItemProps) => {
+const SheetItem = ({ icon, title, iconColor, titleColor, disabled = false }: SheetItemProps) => {
   const { colors } = useUIKitTheme();
   return (
     <View style={[styles.sheetItemContainer, { backgroundColor: colors.ui.dialog.default.none.background }]}>
       {icon && (
         <Icon
           icon={icon}
-          color={iconColor ?? colors.ui.dialog.default.none.highlight}
+          color={
+            iconColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.highlight)
+          }
           containerStyle={styles.sheetItemIcon}
         />
       )}
       <Text
         subtitle1
         numberOfLines={1}
-        color={titleColor ?? colors.ui.dialog.default.none.text}
+        color={titleColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.text)}
         style={styles.sheetItemText}
       >
         {title}

package/src/ui/GroupChannelMessage/Message.file.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import { SendbirdFileMessage, getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import Icon from '../../components/Icon';
@@ -11,8 +11,6 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
 import type { GroupChannelMessageProps } from './index';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
-
 type Props = GroupChannelMessageProps<SendbirdFileMessage>;
 
 const FileMessage = (props: Props) => {
@@ -28,8 +26,8 @@ const FileMessage = (props: Props) => {
         {({ pressed }) => (
           <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>
             <Box style={styles.bubble}>
-              <Icon
-                icon={iconMapper[fileType]}
+              <Icon.File
+                fileType={fileType}
                 size={24}
                 containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
               />
@@ -40,7 +38,7 @@ const FileMessage = (props: Props) => {
                 color={pressed ? color.pressed.textMsg : color.enabled.textMsg}
                 style={styles.name}
               >
-                {props.strings?.fileName || props.message.name}
+                {truncate(props.strings?.fileName || props.message.name, { mode: 'mid', maxLen: 20 })}
               </Text>
             </Box>
             {props.children}

package/src/ui/GroupChannelMessage/Message.file.video.tsx

@@ -1,13 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
-import Icon from '../../components/Icon';
-import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
 import PressBox from '../../components/PressBox';
+import { VideoThumbnail } from '../../components/VideoThumbnail';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
@@ -15,41 +13,24 @@ import type { GroupChannelMessageProps } from './index';
 
 type Props = GroupChannelMessageProps<
   SendbirdFileMessage,
-  {
-    fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
-  }
+  { fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null> }
 >;
 
 const VideoFileMessage = (props: Props) => {
   const { onPress, onLongPress, variant = 'incoming' } = props;
 
-  const { colors, palette, select } = useUIKitTheme();
+  const { colors } = useUIKitTheme();
   const uri = getAvailableUriFromFileMessage(props.message);
-  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
 
   return (
     <MessageContainer {...props}>
       <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
-        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress} style={styles.image}>
-          {loading ? (
-            <Box
-              style={StyleSheet.absoluteFill}
-              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
-            />
-          ) : (
-            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />
-          )}
-
-          {(loading || thumbnail !== null) && (
-            <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>
-              <Icon
-                icon={'play'}
-                size={28}
-                color={palette.onBackgroundLight02}
-                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
-              />
-            </Box>
-          )}
+        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
+          <VideoThumbnail
+            style={styles.image}
+            videoSource={uri}
+            fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
+          />
         </PressBox>
         {props.children}
       </Box>
@@ -57,35 +38,6 @@ const VideoFileMessage = (props: Props) => {
   );
 };
 
-const useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {
-  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
-  const retryCountRef = useRef(0);
-  const retryTimeoutRef = useRef<NodeJS.Timeout>();
-  const fetchThumbnail = useRef(fetch);
-  fetchThumbnail.current = fetch;
-
-  useEffect(() => {
-    if (!state.thumbnail) {
-      const reloadReservation = () => {
-        if (retryCountRef.current < retryCount) {
-          retryTimeoutRef.current = setTimeout(() => {
-            retryCountRef.current++;
-            reloadReservation();
-            fetchThumbnail.current().then((result) => {
-              setState({ loading: false, thumbnail: result?.path ?? null });
-            });
-          }, retryCountRef.current * 5000);
-        }
-      };
-
-      return reloadReservation();
-    } else {
-      return clearTimeout(retryTimeoutRef.current);
-    }
-  }, [state.thumbnail]);
-
-  return state;
-};
 const styles = createStyleSheet({
   container: {
     borderRadius: 16,

package/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -28,6 +28,7 @@ MessageContainer.Incoming = function MessageContainerIncoming({
   message,
   onPressAvatar,
   strings,
+  parentMessage,
 }: Props) {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelMessage.incoming;
@@ -42,7 +43,8 @@ MessageContainer.Incoming = function MessageContainerIncoming({
         )}
       </Box>
       <Box flexShrink={1}>
-        {!groupedWithPrev && (
+        {parentMessage}
+        {!groupedWithPrev && !message.parentMessage && (
           <Box marginLeft={12} marginBottom={4}>
             {(message.isFileMessage() || message.isUserMessage()) && (
               <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
@@ -73,24 +75,27 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
   groupedWithNext,
   strings,
   sendingStatus,
+  parentMessage,
 }: Props) {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelMessage.outgoing;
 
   return (
-    <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>
-      <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>
-        {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}
-
-        {!groupedWithNext && (
-          <Box marginRight={4}>
-            <Text caption4 color={color.enabled.textTime}>
-              {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
-            </Text>
-          </Box>
-        )}
+    <Box>
+      {parentMessage}
+      <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>
+        <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>
+          {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}
+          {!groupedWithNext && (
+            <Box marginRight={4}>
+              <Text caption4 color={color.enabled.textTime}>
+                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+              </Text>
+            </Box>
+          )}
+        </Box>
+        <Box style={styles.bubble}>{children}</Box>
       </Box>
-      <Box style={styles.bubble}>{children}</Box>
     </Box>
   );
 };