chat 1.0.8 → 3.0.0

package/src/components/Chat-Old/types.ts

@@ -1,752 +0,0 @@
-import {
-	TextInputProps,
-	TextStyle,
-	StyleProp,
-	ViewStyle,
-	Animated,
-	Image,
-	ListRenderItemInfo,
-	FlatListProps,
-	FlatList,
-	View,
-	ScrollViewProps,
-	TextInput
-} from 'react-native'
-import { ComponentType, ReactNode, ReactElement, MutableRefObject } from 'react'
-import { NewMessageModel, MessageMedia } from '../../classes/Message/types'
-import { AvatarProps, InitialsProps } from '../Inbox/types'
-
-/**
- * Component that provides a full-on chat screen. Inspired by GiftedChat and works directly with the Juice backend.
-/**
- * Chat props
- * @template MessageModel 
- */
-export interface ChatProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	id: string
-	/**
-	 * **Required:** Array of messages to be rendered.
-	 *
-	 * The default schema looks like this:
-	 * ```ts
-	 * interface NewMessageModel {
-	 * 	text: string
-	 * 	createdAt: Date
-	 * 	user: {
-	 * 		id: string
-	 * 		name: string
-	 * 		avatar: string
-	 * 	}
-	 * 	system?: boolean
-	 * 	media?: MessageMedia
-	 * 	// Any additional custom parameters are passed through
-	 * }
-	 * ```
-	 *
-	 * If you want to customize the schema using typescript, you can import and extend the `NewMessageModel` from Juice.
-	 */
-	messages: MessageModel[]
-	// TODO make multiple prop type options so they fail if they aren't together
-	/**
-	 * Text input state value.
-	 * If you use this prop, you must also use the onInputTextChanged prop with it to handle the text state on your own.
-	 */
-	text?: ComposerProps['text']
-	/**
-	 * Function called whenever the composer text changes (when a message is sent or someone types).
-	 * **IMPORTANT**
-	 * If you use this prop, you must also use the `text` prop with it.
-	 */
-	onInputTextChanged?: ComposerProps['onInputTextChanged']
-	/**
-	 * Callback function called whenever a message is sent.
-	 * @param messages - An array of messages. The reason this is an array is because you might have an image and text, and you might want to send them as separate messages.
-	 */
-	onSend: (messages: (MessageModel | NewMessageModel)[]) => void
-	/**
-	 * Props passed to the TextInput component. See [react-native's docs](https://facebook.github.io/react-native/docs/textinput.html)
-	 */
-	textInputProps?: InputProps['inputProps']
-	/**
-	 * Optional styles for the view that wraps the entire component.
-	 * Default: { flex: 1 }
-	 *
-	 * If you're new to react native, see the docs for styles [here](https://facebook.github.io/react-native/docs/style)
-	 */
-	containerStyle?: ViewStyle
-	/**
-	 * Optional styles for FlatList's contentContainerStyle. [See React Native Docs](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)
-	 */
-	contentContainerStyle?: ViewStyle
-	/**
-	 * Custom React component that wraps the entire Chat component. By default, it is an Animated.View from react-native-reanimated, nested inside
-	 */
-	ContainerComponent?: ComponentType
-	/**
-	 * Disable reanimated's transition API when new messages send, someone starts/stops typing, etc.
-	 *
-	 * _Shout-out to Krzysztof Magiera for the awesome react-native-reanimated lib._
-	 */
-	disableTransitions?: boolean
-	/**
-	 * Optional custom transition for the reanimated transitions API. [See docs for transitions](https://github.com/kmagiera/react-native-reanimated#transitions-) (you'll see more in their examples/).
-	 * Will fire this transition whenever a new message is sent/received, or when someone else starts/stops typing (unless typing indicators are disabled.)
-	 *
-	 * **Default:**
-	 * ```javascript
-	 * const transitionConfig = (
-	 *	<Transition.Sequence>
-	 *		<Transition.Together>
-	 *			<Transition.Out type="fade" />
-	 *			<Transition.Change interpolation="easeOut" />
-	 *		</Transition.Together>
-	 *		<Transition.In type="fade" />
-	 *	</Transition.Sequence>
-	 * )
-	 * ```
-	 *
-	 *
-	 */
-	transitionConfig?: ReactNode
-	/**
-	 * Default false.
-	 * If true, disables the reanimated Transition on the initial mount / load of messages
-	 */
-	disableTransitionOnMount?: boolean
-	/**
-	 * Style prop for the bubble text, based on whether or not the user sent it (`me`) or someone else did (`others`)
-	 *
-	 * @example
-	 * ``` javascript
-	 * return <Juice. bubbleTextStyle={{ me: { color: 'white' }, others: { color: 'green'} }} />
-	 * ```
-	 */
-	bubbleTextStyle?: PartialUserOptions<MessageProps['bubbleTextStyle']>
-	/**
-	 * Style prop for the bubble view, based on whether or not the user sent it (`me`) or someone else did (`others`):
-	 *
-	 * @example
-	 * ``` javascript
-	 * return <Juice. bubbleStyle={{ me: { backgroundColor: 'white' }, others: { backgroundColor: 'green'} }} />
-	 * ```
-	 */
-	bubbleStyle?: PartialUserOptions<MessageProps['bubbleStyle']>
-	/**
-	 * Style prop for the bubble's container view, based on whether or not the user sent it (`me`) or someone else did (`others`).
-	 *
-	 * **Note:** The container is not the bubble itself, rather the view that holds the bubble, responsible for choosing which side of the screen it goes on, etc.
-	 * If you want to edit the bubble directly, see bubbleStyle or bubbleTextStyle props.
-	 *
-	 * @example
-	 * ``` javascript
-	 * return <Juice. messageContainerStyle={{ me: { justifyContent: 'flex-end' }, others: { justifyContent: 'flex-start' } }} />
-	 * ```
-	 */
-	messageContainerStyle?: PartialUserOptions<
-		MessageProps['messageContainerStyle']
-	>
-	/**
-	 * Style prop for the bubble's wrapper view, based on whether or not the user sent it (`me`) or someone else did (`others`).
-	 *
-	 * This view is _inside_ of the bubble's container view. It wraps the bubble *and* the avatar. You might use this if you want to switch which side the avatar is on.
-	 *
-	 * @remarks
-	 * - To change which side of the screen a message bubble actually shows up on, see `messageContainerStyle` prop.
-	 * - To change the background color and other styles of a bubble, see `bubbleStyle` prop.
-	 * - To update bubble text, see `bubbleTextStyle` prop.
-	 *
-	 * @example
-	 * ``` javascript
-	 * // switch "my" avatar to show up on the left instead of the right.
-	 * return <Juice.Chat messageWrapperStyle={{ me: { flex-direction: 'row-reverse' } }} />
-	 * ```
-	 */
-	messageWrapperStyle?: PartialUserOptions<MessageProps['messageWrapperStyle']>
-	/**
-	 * Boolean that disables the swipe-from-side actions on specific messages. Overrides the `swipeActions` prop.
-	 */
-	disableSwipeActions?: boolean
-	/**
-	 * A dictionary { left, right }, each value of which is an array of pre-made actions that let you swipe on a message and do something with it (for instance, reply or react to one).
-	 * Default: { right: ['reply'] }
-	 *
-	 * Options: ['reply', 'react', 'edit', 'delete']
-	 *
-	 * if `disableSwipeActions` prop is true, then this prop is ignored.
-	 */
-	swipeActions?: SwipeableProps['swipeActions']
-	/**
-	 * Which side the actions swipe from. Defaults to right.
-	 *
-	 * For example, the swipe to reply to message will swipe from right if this is right.
-	 *
-	 * If you're using react navigation's stack navigator, I'd suggesting leaving this as the default.
-	 * That said, you could customize react-navigation's gesture distance (see:
-	 * [react-navigation's docs](https://reactnavigation.org/docs/en/stack-navigator.html#gestureresponsedistance)
-	 * )
-	 */
-	// swipeActionsFrom?: 'right' | 'left'
-	/**
-	 * React node that replaces the default actions when swiping a message.
-	 *
-	 * @param props - { action: string, drag: Animated.Value, progress: Animated.AnimatedInterpolation }
-	 *
-	 * Perhaps you only want to use a custom icon when replying, for example.
-	 * @example
-	 * ```js
-	 * return (
-	 *  <Juice.Chat
-	 *   renderSwipeAction={props => (
-	 *     props.action === 'reply ? <YourCustomAction {} /> : <Juice.SwipeAction {...props} />
-	 *   )}
-	 *  />
-	 * )
-	 *
-	 * ```
-	 *
-	 * See related props: `swipeActions`, `disableSwipeActions`, `swipeActionWidth`
-	 */
-	renderSwipeAction?: SwipeableProps['renderSwipeAction']
-	/**
-	 * How wide the swipe actions are. Default: 80
-	 *
-	 * See related props: `swipeActions`, `disableSwipeActions`, `renderSwipeAction`
-	 */
-	swipeActionWidth?: SwipeableProps['actionWidth']
-	/**
-	 * Custom function to render the media that's in a message. It could be a image or video.
-	 */
-	renderMessageMedia?: MessageProps['renderMedia']
-	messageVerticalMargin?: number
-	/**
-	 * Function that generates a random ID for messages that are sent. By default, it uses uuid.v4()
-	 */
-	messageIdGenerator?: () => string
-	/**
-	 * _Deprecated_ use the `namesOfUsersTyping` prop instead.
-	 *
-	 * Boolean to indicate if users are typing. Can be used with the `useMessages` hook.
-	 * @example
-	 * ```
-	 * const [{data}, {usersAreTyping}] = useMessages({ id: 'someRoomId' })
-	 *
-	 * return <Chat messages={data} usersAreTyping={usersAreTyping} />
-	 * ```
-	 */
-	usersAreTyping?: boolean
-	/**
-	 * List of the names of people typing. This can be useful if you want to show text like:
-	 * "Michael, Jim & Jan are typing..."
-	 *
-	 * Can be used with the `useMessages` hook.
-	 * @example
-	 * ```
-	 * // namesOfUsersTyping will not include you if you are typing.
-	 * const [{data}, {namesOfUsersTyping}] = useMessages({ id: 'someRoomId' })
-	 *
-	 * return <Chat messages={data} namesOfUsersTyping={namesOfUsersTyping} />
-	 * ```
-	 */
-	namesOfUsersTyping?: string[]
-	/**
-	 * Function to replace the normal <TypingIndicator /> component.
-	 *
-	 * **Note:** This is not a necessary prop to customize the typing indicator. There are many props to customize the typing indicator without rendering a fully new one.
-	 */
-	renderTypingIndicator?: (props: {
-		usersAreTyping: boolean
-		namesOfUsersTyping: string[]
-	}) => ReactNode
-	extraData?: boolean
-	MessageComponent?: ComponentType
-	user: NewMessageModel['user']
-	hideMyAvatar?: boolean
-	showAvatarForEveryMessage?: boolean
-	renderAvatar?: ((props: AvatarProps) => ReactNode) | null
-	renderMessageFooter?: MessageProps['renderFooter']
-	/**
-	 * (Optional) Use this to render a custom message component.
-	 * @param props Receives MessageProps
-	 *
-	 * If you're looking to entirely override the message render function in the FlatList component, use the renderItem prop.
-	 */
-	renderMessage?: null | ((props: MessageProps) => ReactElement)
-	/**
-	 * (Optional) Use this to render a custom bubble component. This will render inside of the messageWrapper. Not the same as renderMessage, which renders the top-level message component.
-	 * @param props - receives BubbleProps
-	 */
-	renderBubble?: null | ((props: BubbleProps) => ReactNode)
-	/**
-	 * If you're thinking of using this, there's a good change you're looking for the renderMessage prop.
-	 * (Advanced) You probably shouldn't use this prop unless you want a high level of customization.
-	 * This overrides the default renderItem function for the FlatList.
-	 * See React Native's FlatList renderItem docs.
-	 */
-	renderItem?: (props: ListRenderItemInfo<MessageModel>) => ReactElement
-	/**
-	 * (Optional) override default FlatList keyExtractor: `(item) => item.id`
-	 */
-	keyExtractor?: FlatListProps<MessageModel>['keyExtractor']
-	/**
-	 * Render component under the TextInput, similar to the way iMessage does.
-	 * @param props: Same props passed to the Composer
-	 */
-	renderComposerFooter?: (props: ComposerFooterProps) => ReactNode
-	/**
-	 * Extend the props for the ListView that renders the messages.
-	 */
-	flatListProps?: FlatListProps<MessageModel>
-	/**
-	 * Renders at the end of the messages list. Different from renderFooter, which is fixed at the bottom, this moves with the scroll.
-	 */
-	ListFooterComponent?: FlatListProps<MessageModel>['ListFooterComponent']
-	/**
-	 * Render React component above the messages.
-	 * For instance, maybe you want to render an absolute-positioned "New messages ^" to indicate someone should scroll up
-	 */
-	renderHeader?: () => ReactNode
-	/**
-	 * Render React component fixed at the bottom below the messages list. Different from ListFooterComponent prop, which scrolls with messages.
-	 */
-	renderFooter?: () => ReactNode
-	/**
-	 * Custom composer component. The "Composer" encapsulates the entire creation bar at the bottom.
-	 */
-	renderComposer?: (props: ComposerProps) => ReactNode
-	/**
-	 * Custom TextInput component inside the composer. Different from the renderComposer prop, which renders the entire composer component.
-	 */
-	renderTextInput?: ComposerProps['renderTextInput']
-	/**
-	 * Custom send button component. The "Composer" encapsulates the entire creation bar at the bottom.
-	 */
-	renderSendButton?: ComposerProps['renderSendButton']
-	/**
-	 * Function called when message is pressed. Works with the `messagePressType` prop.
-	 */
-	onPressMessage?: MessageProps['onPress']
-	/**
-	 * Function called when message is long pressed.
-	 */
-	onLongPressMessage?: MessageProps['onLongPress']
-	/**
-	 * How long the interval should be to detect a long press.
-	 *
-	 * *Default: 400ms
-	 */
-	messageLongPressDelay?: MessageProps['longPressDelay']
-	/**
-	 * What kind of "press" method should work for clicking a message.
-	 * Can be "single" or "double".
-	 *
-	 * Related: messageDoubleTapDelay prop
-	 */
-	messagePressType?: MessageProps['pressType']
-	/**
-	 * How long the interval should be between taps to detect a double tap.
-	 * **Important** The `messagePressType` prop must be set to "double" for this to apply.
-	 *
-	 * *Default: 200ms*
-	 */
-	messageDoubleTapDelay?: MessageProps['doubleTapDelay']
-	/**
-	 * See [react-native docs](https://www.google.com/search?q=image+props+react+native&oq=image+props+react+native&aqs=chrome.0.0l5j69i64.1740j0j7&sourceid=chrome&ie=UTF-8) for image props.
-	 */
-	imageProps?: MessageProps['imageProps']
-	initialText?: string
-	/**
-	 * Text that sits in TextInput when it's empty. Defaults to "Type a message..."
-	 */
-	placeholderText?: InputProps['placeholderText']
-	/**
-	 * Color for text that sits in TextInput when it's empty.
-	 */
-	placeholderColor?: InputProps['placeholderColor']
-	/**
-	 * Boolean to set whether or not the Chat component container should be wrapped with a SafeAreaView.
-	 * Default: `false`
-	 */
-	safeArea?: boolean
-	/**
-	 * Override the composer's local media state.
-	 * This can be useful if you're using redux or another similar state manager.
-	 *
-	 * **Note:** must be used with the `onMediaChanged` prop.
-	 */
-	media?: Omit<MessageMedia, 'url'>[]
-	/**
-	 * Handle the composer's media selection on your own.
-	 * This can be useful if you're using redux or another similar state manager.
-	 *
-	 * **Note:** must be used with the `media` prop.
-	 */
-	onChangeMedia?: (media: NewMessageModel[]) => void
-	/**
-	 * funtion that returns a custom component to render composer media
-	 * @params props - ({ media }) => ReactNode
-	 * where media is an array of media items
-	 *
-	 * @example
-	 * ```javascript
-	 * return (<Chat renderComposerMedia={({ media }) => <>{media.map(item => item.contentType === 'image' ? <Image uri={{ uri: item.uri }} />)}</>}/>)
-	 * ```
-	 */
-	renderComposerMedia?: (props: {
-		media: Omit<MessageMedia, 'url'>
-	}) => ReactNode
-	/**
-	 * Dictionary to customize the send button mode based on the input text length. Mode be one of these strings: 'icon', 'text', 'hidden'.
-	 *
-	 * **Default:**
-
-	 * ```javascript
-	 * const sendButtonMode = {
-	 * 	withText: 'icon',
-	 * 	empty: 'hidden'
-	 * }
-	 * ```
-	 */
-	sendButtonMode?: PartialInputOptions<SendButtonMode>
-	/**
-	 * Default: `false`
-	 * Set `true` if you don't want the messages to scroll to the end when you send a new message.
-	 */
-	disableScrollToBottomOnSend?: boolean
-	/**
-	 * Optional react-native animated value that tracks the position of the scroll.
-	 *
-	 */
-	animatedScrollNode?: Animated.Value
-	/**
-	 * If true, messages will scroll to bottom every time a new message comes in, regardless of who sends it.
-	 * Default: `false`.
-	 * If true, this prop overrides `disableScrollToBottomOnSend`.
-	 */
-	scrollToBottomOnAllNewMessages?: boolean
-	/**
-	 * Callback function for when messages are viewed
-	 * @param viewInfo - Dictionary with details about the messages being viewed
-	 * @param viewInfo.visibleMessages - Array of current messages that are visible
-	 * @param viewInfo.latestMessageId - If the most recent message in this chat room is visible, then this will return its ID. Otherwise, this will be null.
-	 *
-	 * Juice uses the logic from latestMessageId to clear unread counts. This is helpful if you want to avoid uploading to your backend every single time a message is viewed, and instead only when you view the most recent one (since you can clear out the previous.)
-	 * @example
-	 * ```javascript
-	 * export default ({ id }) => {
-	 * 	const [{ data }, { send }] = useMessages({ id })
-	 * 	const onViewMessages = useViewMessages({ roomId: id })
-	 *
-	 * 	return <Chat messages={data} onSend={send} onViewMessages={onViewMessages} />
-	 * }
-	 * ```
-	 */
-	onViewMessages?: (viewInfo: {
-		visibleMessages: MessageModel[]
-		latestMessageId: string | null
-	}) => void
-	/**
-	 * **🚨** If you're using this prop to track viewed messages, see the `onViewMessages` prop instead.
-	 *
-	 * Optional FlatList prop. [See react native docs](https://facebook.github.io/react-native/docs/0.18/flatlist#onviewableitemschanged).
-	 */
-	onViewableItemsChanged?: FlatList<
-		MessageModel
-	>['props']['onViewableItemsChanged']
-	/**
-	 * General tint color for the chat, used for the buttons, text, etc.
-	 */
-	tintColor?: string
-	/**
-	 * If `true`, component will implement its own KeyboardAvoidingView component for ios and android.
-	 *
-	 * **Note:** If you're using react-navigation's stack navigator, this can have bugs. For some reason, the react-navigation's Header component pushes down the view. One solution is to set the stack to `headerTransparent`: `true`. The downside of this is you'll have to set the FlatList's contentContainerStyle to have a top padding to offset the header height. If you're using a bottom tab navigator too, just disable the hiding on keyboard show prop for that navigator.
-	 */
-	avoidKeyboard?: boolean
-	/**
-	 * Style the outer container of the composer (not to be confused with the `inputContainerStyle` prop, which styles the actual TextInput.)
-	 */
-	composerContainerStyle?: StyleProp<ViewStyle>
-	/**
-	 * Style the container immediately wrapping the TextInput (not to be confused with `composerContainerStyle`)
-	 */
-	inputContainerStyle?: StyleProp<ViewStyle>
-	/**
-	 * Directly style the TextInput component.
-	 */
-	inputStyle?: TextInputProps['style']
-	// TODO
-	/**
-	 * **Note:** For basic system message customizations, see these props instead: `systemMessageTextStyle`, `systemMessageContainerStyle`, `systemMessageDateStyle`, `systemMessageDateToStringFunc`.
-	 *
-	 * This prop is a function that returns a custom system message component. You can also extend Juice's <Juice.SystemMessage /> component if you'd like.
-	 *
-	 * @example
-	 * ```javascript
-	 * return <Juice.Chat renderSystemMessage={props => (
-	 * 	<Juice.SystemMessage
-	 *    {...props}
-	 *    // your custom props here
-	 *  />
-	 * )} />
-	 * ```
-	 */
-	renderSystemMessage?: null | ((props: SystemMessageProps) => ReactElement)
-	/**
-	 * Style the text for a system message. 
-	 * 
-	 * System messages show when someone enters/leaves a room, when time has passed between messages, etc. They have the `system: true` flag on a message document.
-	 */
-	systemMessageTextStyle?: StyleProp<TextStyle>
-	/**
-	 * Style the view that wraps a system message and its date.
-	 */
-	systemMessageContainerStyle?: StyleProp<ViewStyle>
-	/**
-	 * Style the text for a system message's date.
-	 */
-	systemMessageDateStyle?: StyleProp<TextStyle>
-	/**
-	 * Optional function that receives a date and returns a custom string to be rendered as the date for system messages.
-	 *
-	 * By default, this function uses moment.js:
-	 * ```es6
-	 * import moment from 'moment'
-	 *
-	 * // this is the default
-	 * const systemMessageDateToStringFunc: date => moment(date).calendar(undefined, {
-	 *  	lastDay: '[Yesterday]',
-	 *  	sameDay: 'LT',
-	 *  	nextDay: '[Tomorrow at] LT',
-	 *  	lastWeek: 'dddd',
-	 *  	nextWeek: '[Next] dddd',
-	 *  	sameElse: 'L'
-	 * })
-	 * ```
-	 */
-	systemMessageDateToStringFunc?: SystemMessageProps['dateToStringFunc']
-	/**
-	 * Custom function to render a date in between messages. Dates are rendered in between messages when messages are sent on a new day.
-	 * 
-	 * Can also be set to `null` to hide the date altogether.
-	 */
-	renderDate?: null | ((date: Date) => ReactNode)
-	/**
-	 * See React Native's ScrollView docs. This prop manages whether or not the chat scrollview should persist through taps when keyboard is open.
-	 */
-	keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps']
-	/**
-	 * See React Native's ScrollView docs. This prop manages the way the keyboard is closed when someone scrolls
-	 */
-	keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
-	/**
-	 * Ref that gets forwarded to Juice's Chat component. Exposes the following methods:
-	 *
-	 * - `focusInput` (for input)
-	 * - `blurInput` (for input)
-	 * - `scrollToEnd` Remember that this FlatList is inverted so you should think of 0 as the bottom of the screen. (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend))
-	 * - `scrollToIndex` (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex))
-	 * - `scrollToItem` (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltoitem))
-	 * - `scrollToOffset` Remember that this FlatList is inverted so you should think of 0 as the bottom of the screen. (see: [FlatList docs](https://facebook.github.io/react-native/docs/flatlist.html#scrolltooffset))
-	 * 
-	 * ### Example usage
-	 * ```es6
-	 *   export default () => {
-	 *     const ref = useRef()
-	 *     
-	 *     const onClickSomeButton = () => {
-	 *       if (ref.current) {
-	 *        ref.current.focusInput()
-	 *        ref.current.scrollToEnd()
-	 *       }
-	 *     }
-	 *     return (
-	 *      <Chat 
-	 *        ref={ref}
-	 *      />
-	 *     )
-	 *   }
-	 * ```
-	 */
-	ref?: MutableRefObject<ChatRef<MessageModel>>
-	/**
-	 * size for the avatar/initials component that renders next to messages
-	 * default: `40`
-	 */
-	avatarSize?: number
-	/**
-	 * React Native Image props passed to the avatar. For max customization, see `renderAvatar` prop.
-	 */
-	avatarImageProps?: AvatarProps['imageProps']
-	/**
-	 * Background color for the initials component that will show in the absense of an avatar.
-	 */
-	initialsBackgroundColor?: string
-	/**
-	 * Text color for the initials component that will show in the absense of an avatar.
-	 */
-	initialsTextColor?: string
-	/**
-	 * Custom component to render the Initials component when there isn't an avatar present.
-	 * Takes one argument (InitialsProps).
-	 *
-	 * @example
-	 * ```javascript
-	 * return <Juice.Chat renderInitials={props => <Juice.Initials {...props} />} />
-	 * ```
-	 */
-	renderInitials?: (props: InitialsProps) => ReactNode
-}
-
-export interface MessageProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	id: string
-	isMe: boolean
-	text: MessageModel['text']
-	system: MessageModel['system']
-	bubbleTextStyle?: StyleProp<TextStyle>
-	bubbleStyle?: StyleProp<ViewStyle>
-	messageContainerStyle?: StyleProp<ViewStyle>
-	messageWrapperStyle?: StyleProp<ViewStyle>
-	name: MessageModel['user']['name']
-	delivered?: boolean
-	read?: boolean
-	renderFooter?: (props: { id: string }) => ReactNode
-	media?: MessageMedia
-	renderMedia?: (props: { media: MessageMedia }) => ReactNode
-	onPress?: (message: MessageModel) => void
-	onLongPress?: (message: MessageModel) => void
-	doubleTapDelay?: number
-	longPressDelay?: number
-	imageProps?: Image['props']
-	pressType: 'single' | 'double'
-	disableSwipeActions?: SwipeableProps['disableSwipeActions']
-	swipeActions?: SwipeableProps['swipeActions']
-	renderSwipeAction?: SwipeableProps['renderSwipeAction']
-	swipeActionWidth?: SwipeableProps['actionWidth']
-	showName?: boolean
-	avatar?: string
-	avatarImageProps?: ChatProps['avatarImageProps']
-	avatarSize?: ChatProps['avatarSize']
-	renderAvatar?: ChatProps['renderAvatar']
-	showAvatar?: boolean
-	initialsBackgroundColor?: ChatProps['initialsBackgroundColor']
-	initialsTextColor?: ChatProps['initialsTextColor']
-	renderInitials?: ChatProps['renderInitials']
-	tintColor?: string
-}
-
-export interface ChatRef<
-	MessageModel extends NewMessageModel = NewMessageModel
-> extends Partial<FlatList<MessageModel>> {
-	focusInput: () => void
-	blurInput: () => void
-}
-
-export interface BubbleProps {
-	style?: StyleProp<ViewStyle>
-	textStyle?: StyleProp<ViewStyle>
-	isMe?: boolean
-	text?: string
-	bubbleRef?: MutableRefObject<View>
-}
-
-export interface SystemMessageProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	textStyle?: StyleProp<TextStyle>
-	dateStyle?: StyleProp<TextStyle>
-	containerStyle?: StyleProp<ViewStyle>
-	text: MessageModel['text']
-	createdAt: MessageModel['createdAt']
-	dateToStringFunc?: (date: Date) => string
-}
-
-export interface ComposerProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	renderTextInput?: (props: InputProps) => ReactNode
-	renderSendButton?: (props: SendButtonProps) => ReactNode
-	textInputProps?: InputProps<MessageModel>['inputProps']
-	text?: InputProps<MessageModel>['text']
-	onInputTextChanged?: (text: string) => void
-	placeholderText?: InputProps<MessageModel>['placeholderText']
-	placeholderColor?: InputProps<MessageModel>['placeholderColor']
-	initialText?: string
-	media?: Omit<MessageMedia, 'url'>[]
-	user: ChatProps<MessageModel>['user']
-	onChangeMedia?: ChatProps<MessageModel>['onChangeMedia']
-	onSend: ChatProps<MessageModel>['onSend']
-	sendButtonMode?: ChatProps['sendButtonMode']
-	tintColor?: string
-	containerStyle?: ChatProps['composerContainerStyle']
-	inputContainerStyle?: ChatProps['inputContainerStyle']
-	inputStyle?: ChatProps['inputStyle']
-	inputRef?: MutableRefObject<TextInput>
-}
-
-export interface InputProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	text: string
-	onChangeText: ChatProps<MessageModel>['onInputTextChanged']
-	inputProps?: TextInputProps
-	placeholderText?: string
-	placeholderColor?: string
-	tintColor?: string
-	containerStyle?: ChatProps['inputContainerStyle']
-	style?: ChatProps['inputStyle']
-	inputRef?: MutableRefObject<TextInput>
-}
-
-export interface ComposerFooterProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	text: ComposerProps<MessageModel>['text']
-}
-
-export interface SendButtonProps<
-	MessageModel extends NewMessageModel = NewMessageModel
-> {
-	text?: string
-	onSend: () => void
-	media?: MessageModel['media'][]
-	user?: MessageModel['user']
-	mode: SendButtonMode
-
-	tintColor?: string
-}
-
-export type SwipeAction = 'reply' | 'edit' | 'delete' | 'react'
-export type SendButtonMode = 'icon' | 'text' | 'hidden'
-
-// TODO add a function validator that confirms that there's a keyof one of these values
-export interface UserOptions<OptionType> {
-	me: OptionType
-	others: OptionType
-}
-
-export interface InputOptions<Option, EmtpyOption = null> {
-	withText: EmtpyOption | Option
-	empty: Option
-}
-
-export type PartialInputOptions<Option> = Partial<InputOptions<Option>>
-
-export type PartialUserOptions<OptionType> = Partial<UserOptions<OptionType>>
-
-export interface SwipeableProps {
-	disableSwipeActions?: boolean
-	swipeActions?: { right?: SwipeAction[]; left?: SwipeAction[] }
-	renderSwipeAction?: (action: SwipeActionProps) => ReactNode
-	actionWidth?: SwipeActionProps['width']
-}
-
-export interface SwipeActionProps {
-	progress?: Animated.Value | Animated.AnimatedInterpolation
-	drag?: Animated.AnimatedInterpolation
-	action: SwipeAction
-	width?: number
-}