diff --git a/docs.json b/docs.json index 495399d6..e5fed13a 100644 --- a/docs.json +++ b/docs.json @@ -883,7 +883,8 @@ "ui-kit/react-native/outgoing-call", "ui-kit/react-native/call-buttons", "ui-kit/react-native/call-logs", - "ui-kit/react-native/ai-assistant-chat-history" + "ui-kit/react-native/ai-assistant-chat-history", + "ui-kit/react-native/search" ] }, { diff --git a/ui-kit/react-native/component-styling.mdx b/ui-kit/react-native/component-styling.mdx index 63ad991d..71ad0133 100644 --- a/ui-kit/react-native/component-styling.mdx +++ b/ui-kit/react-native/component-styling.mdx @@ -1000,6 +1000,79 @@ return ( To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts). +### Search + +The `CometChatSearch` component allows users to search through conversations and messages. It provides a user-friendly interface for finding specific content quickly, with customizable styles for various elements such as background colors, text appearances, and section headers. + + + + + +```javascript +import { + CometChatSearch, + CometChatThemeProvider, +} from "@cometchat/chat-uikit-react-native"; +//code +return ( + + + {loggedIn && } + + +); +``` + +To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts). + ## Base Component diff --git a/ui-kit/react-native/conversations.mdx b/ui-kit/react-native/conversations.mdx index 8e3f5f79..363c4522 100644 --- a/ui-kit/react-native/conversations.mdx +++ b/ui-kit/react-native/conversations.mdx @@ -207,6 +207,50 @@ return ; *** +##### onSearchBarClicked + +The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet. + + + +```tsx +import { CometChatConversations } from "@cometchat/chat-uikit-react-native"; + +const onSearchBarClickedHandler = () => { + console.log("Search bar clicked"); +}; + +return ; +``` + + + + + +*** + +##### onSearchTextChanged + +This callback is triggered when the search text changes in the search bar, allowing you to handle search functionality. + + + +```tsx +import { CometChatConversations } from "@cometchat/chat-uikit-react-native"; + +const onSearchTextChangedHandler = (searchText: string) => { + console.log("Search text:", searchText); +}; + +return ; +``` + + + + + +*** + ### Filters You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/react-native/retrieve-conversations). @@ -353,6 +397,9 @@ Below is a list of customizations along with corresponding code snippets | **usersStatusVisibility** | Prop used to toggle user status visibilty. | `usersStatusVisibility={false}` | | **groupTypeVisibility** | Prop used to toggle group type visibilty. | `groupTypeVisibility={false}` | | **deleteConversationOptionVisibility** | Prop used to toggle delete conversation option visibilty. | `deleteConversationOptionVisibility={false}` | +| **showSearchBar** | Prop used to toggle the visibility of the search bar in the conversations header. | `showSearchBar={true}` | +| **searchText** | Current search text value in the search input. | `searchText="search term"` | +| **SearchView** | A custom search view component to display in the conversations header, replacing the default search bar. | `SearchView={customSearchView}` | ### Advanced @@ -479,6 +526,36 @@ return ( *** +#### SearchView + +Allows you to set a custom search view component that replaces the default search bar in the conversations header. This provides complete control over the search interface design and functionality. + +Use cases: + +* Implementing a custom search bar with advanced filters +* Adding voice search or barcode scanning capabilities +* Creating a branded search interface that matches your app's design + + + +```tsx +import { CometChatConversations } from "@cometchat/chat-uikit-react-native"; +//code +const getSearchView = (): JSX.Element => { + //your custom Search View + //return jsx; +}; +return ( + +); +``` + + + + + +*** + #### ErrorView Defines a custom error state view that appears when an issue occurs while loading conversations or messages. This enhances the user experience by displaying friendly error messages instead of generic system errors. diff --git a/ui-kit/react-native/core-features.mdx b/ui-kit/react-native/core-features.mdx index 8a31d20c..0859f203 100644 --- a/ui-kit/react-native/core-features.mdx +++ b/ui-kit/react-native/core-features.mdx @@ -104,6 +104,34 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi | [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) component allows users to compose and send various types of messages, including support for the Mentions feature to directly address participants within the conversation. | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component displays a list of sent and received messages. It also supports rendering Mentions, enhancing the clarity and interactivity of conversations by highlighting direct references to users. | +## Quoted Reply + +Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu or using swipe gestures. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats. + + + + + +| Components | Functionality | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) supports replying to messages via the "Reply" option and swipe gestures. Users can swipe on a message or select "Reply" to open the composer with the quoted reply pre-filled, maintaining context. | +| [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. | + +## Conversation and Advanced Search + +Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. + + + + + +| Components | Functionality | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Search](/ui-kit/react-native/search) | [Search](/ui-kit/react-native/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [MessageHeader](/ui-kit/react-native/message-header) | [MessageHeader](/ui-kit/react-native/message-header) shows the search button in the chat header, allowing users to search within a conversation. | +| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) shows the selected message when clicked from search results and highlights it in the message list. | +| [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) displays the search input and search functionality for finding specific conversations. | + ## Threaded Conversations The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats. diff --git a/ui-kit/react-native/message-bubble-styling.mdx b/ui-kit/react-native/message-bubble-styling.mdx index 30ff8e37..4a38ac9a 100644 --- a/ui-kit/react-native/message-bubble-styling.mdx +++ b/ui-kit/react-native/message-bubble-styling.mdx @@ -1029,3 +1029,97 @@ return ( To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts). +### Quoted Reply + +Quoted Reply bubbles display messages that are replies to other messages, showing the original message context within the reply bubble. + +**Default** + + + + + +**Customization** + +**Customizing Incoming and Outgoing Bubble** + +```tsx +import { + CometChatThemeProvider, +} from "@cometchat/chat-uikit-react-native"; +//other code +return ( + + {/*your component*/} + +); +``` + +To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts). + diff --git a/ui-kit/react-native/message-header.mdx b/ui-kit/react-native/message-header.mdx index ad911688..21eccd53 100644 --- a/ui-kit/react-native/message-header.mdx +++ b/ui-kit/react-native/message-header.mdx @@ -440,3 +440,80 @@ return ( + +*** + +#### Options + +A function that returns custom menu items to **replace** the default menu items entirely. This allows you to define your own set of options for the header menu. + +Use Cases: + +* Create a custom options menu with specific actions for your use case. +* Add info and search options with custom navigation. +* Show different menu options based on user type or permissions. +* Hide menu options for specific user types (like agentic users). + + + +```tsx +import { CometChatMessageHeader } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { useMemo } from "react"; +//code +const options = useMemo(() => { + return ({ user, group }: { user?: CometChat.User; group?: CometChat.Group }) => { + // For agentic users, don't show any options menu + if (agentic) { + return []; + } + + const menuOptions = []; + + // Add info option first + if (group && loggedInUser) { + menuOptions.push({ + text: 'Group Info', + onPress: () => { + navigation.navigate('GroupInfo', { group }); + }, + icon: , + }); + } else if (user && !user.getBlockedByMe()) { + menuOptions.push({ + text: 'User Info', + onPress: () => { + navigation.navigate('UserInfo', { user }); + }, + icon: , + }); + } + + // Then add search option + menuOptions.push({ + text: 'Search', + onPress: () => { + if (group) { + navigation.navigate('SearchMessages', { group }); + } else if (user) { + navigation.navigate('SearchMessages', { user }); + } + }, + icon: , + }); + + return menuOptions; + }; +}, [navigation, group, user, theme, agentic, loggedInUser]); + +return ( + +); +``` + + + + diff --git a/ui-kit/react-native/message-list.mdx b/ui-kit/react-native/message-list.mdx index ca3e76ed..7b6ddbd1 100644 --- a/ui-kit/react-native/message-list.mdx +++ b/ui-kit/react-native/message-list.mdx @@ -409,8 +409,11 @@ Below is a list of customizations along with corresponding code snippets | **hideMessagePrivatelyOption** | used to toggle visibility of hide message privately option in MessageList | `hideMessagePrivatelyOption={true}` | | **hideCopyMessageOption** | used to toggle visibility of hide copy message option in MessageList | `hideCopyMessageOption={true}` | | **hideMessageInfoOption** | used to toggle visibility of hide message info option in MessageList | `hideMessageInfoOption={true}` | +| **hideReplyOption** | used to toggle visibility of reply option for a message in MessageList | `hideReplyOption={true}` | | **hideGroupActionMessages** | used to toggle visibility of hide group action info option in MessageList | `hideGroupActionMessages={true}` | | **hideTimestamp** | used to toggle visibility of hide timestamp in MessageList | `hideTimestamp={true}` | +| **goToMessageId** | Message ID to navigate to and highlight in the message list. When provided, the message list will fetch messages around this ID and scroll to it | `goToMessageId="12345"` | +| **searchKeyword** | Search keyword to highlight in message text. When provided, matching text in messages will be highlighted | `searchKeyword="hello"` | *** diff --git a/ui-kit/react-native/search.mdx b/ui-kit/react-native/search.mdx new file mode 100644 index 00000000..4c5ccbff --- /dev/null +++ b/ui-kit/react-native/search.mdx @@ -0,0 +1,937 @@ +--- +title: "Search" +--- + +## Overview + +The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options. `CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a full-screen search experience. + + + + + +*** + +## Usage + +### Integration + + + +```tsx +import React from "react"; +import { View } from "react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +function SearchDemo() { + return ( + + + + ); +} + +export default SearchDemo; +``` + + + + +```tsx +import React from "react"; +import { View } from "react-native"; +import { SearchDemo } from "./SearchDemo"; + +export default function App() { + return ( + + + + ); +} +``` + + + + + +*** + +### Actions + +[Actions](/ui-kit/react-native/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. + +#### 1. onConversationClicked + +`onConversationClicked` is triggered when you click on a Conversation from the search result. The `onConversationClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet. + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const openConversation = (conversation: CometChat.Conversation) => { + console.log("Conversation Selected:", conversation); +}; + +; +``` + + + + + +*** + +#### 2. onMessageClicked + +`onMessageClicked` is triggered when you click on a Message from the search result. The `onMessageClicked` action doesn't have a predefined behavior. You can override this action using the following code snippet. + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const goToMessage = (message: CometChat.BaseMessage) => { + console.log("Message Selected:", message); +}; + +; +``` + + + + + +*** + +#### 3. OnBack + +`OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet. + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const onBack = () => { + console.log("Back button pressed"); +}; + +; +``` + + + + + +*** + +#### 4. onError + +This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +const handleOnError = (error: CometChat.CometChatException) => { + // Your exception handling code +}; + +; +``` + + + + + +*** + +### Filters + +#### 1. ConversationsRequestBuilder + +You can set the `ConversationsRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/react-native/retrieve-conversations). + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +; +``` + + + + + +*** + +#### 2. MessagesRequestBuilder + +You can set the `MessagesRequestBuilder` in the Search Component to filter the search result. You can modify the builder as per your specific requirements with multiple options available to know more refer to [MessagesRequestBuilder](/sdk/react-native/additional-message-filtering). + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; + +; +``` + + + + + +*** + +### Events + +[Events](/ui-kit/react-native/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. + +The `CometChatSearch` component does not produce any events. + +*** + +## Customization + +To fit your app's design requirements, you can customize the appearance of the `CometChatSearch` component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. + +### Style + +To customize the appearance, you can pass a custom `style` prop to `CometChatSearch`. The style prop accepts a `DeepPartial` object that allows you to override various style properties. + +**Example** + + + + + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; +import { SearchStyle } from "@cometchat/chat-uikit-react-native"; + +const customSearchStyle: Partial = { + containerStyle: { + backgroundColor: "#E8EAF6", + }, + headerStyle: { + backgroundColor: "#5F35AE", + paddingVertical: 16, + }, + backButtonIconStyle: { + tintColor: "#FFFFFF", + }, + searchInputContainerStyle: { + backgroundColor: "#FFFFFF", + borderRadius: 8, + }, + searchInputStyle: { + color: "#000000", + fontSize: 16, + }, + filterButtonStyle: { + backgroundColor: "#FFFFFF", + borderRadius: 20, + paddingHorizontal: 16, + paddingVertical: 8, + }, + filterButtonActiveStyle: { + backgroundColor: "#5F35AE", + }, + filterButtonTextStyle: { + color: "#5F35AE", + fontSize: 14, + }, + filterButtonTextActiveStyle: { + color: "#FFFFFF", + }, + sectionTitleStyle: { + color: "#000000", + fontSize: 18, + fontWeight: "700", + }, + conversationItemStyle: { + containerStyle: { + backgroundColor: "#E8EAF6", + paddingVertical: 12, + }, + titleStyle: { + color: "#000000", + fontSize: 16, + fontWeight: "600", + }, + subtitleStyle: { + color: "#666666", + fontSize: 14, + }, + }, + messageItemStyle: { + containerStyle: { + backgroundColor: "#FFFFFF", + paddingVertical: 12, + }, + titleStyle: { + color: "#000000", + fontSize: 16, + fontWeight: "600", + }, + subtitleStyle: { + color: "#666666", + fontSize: 14, + }, + }, +}; + +; +``` + + + + + +### Functionality + +These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. + +Here is a code snippet demonstrating how you can customize the functionality of the Search component. + + + +```tsx +import React from "react"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +; +``` + + + + + +Following is a list of customizations along with their corresponding code snippets: + +| Property | Description | Code | +| ------------------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| **uid** | A string representing the user ID in whose conversation the search will be performed. | `uid="user123"` | +| **guid** | A string representing the group ID in whose conversation the search will be performed. | `guid="group456"` | +| **Hide Back Button** | Hides the back button in the Search component. | `hideBackButton={true}` | +| **Search Filters** | List of filters to be rendered in the Search component. | `searchFilters={[CometChatSearchFilter.Messages, CometChatSearchFilter.Photos, CometChatSearchFilter.Audio, CometChatSearchFilter.Documents]}` | +| **Initial Search Filter** | The filter which will be active by default on load. | `initialSearchFilter={CometChatSearchFilter.Messages}` | +| **Search In** | List of entities in which the search should be performed. | `searchIn={[CometChatSearchScope.Conversations]}` | +| **Search Placeholder** | Custom placeholder text for the search input. | `searchPlaceholder="Search messages..."` | +| **Loading View** | A custom component to display during the loading state. | `loadingView={() => }` | +| **Empty View** | A custom component to display when there are no results available. | `emptyView={() => }` | +| **Error View** | A custom component to display when an error occurs. | `errorView={() => }` | + +### Advanced + +For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component. + +*** + +#### ConversationItemView + +With this function, you can assign a custom list item view to a conversation in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getConversationItemView = ( + conversation: CometChat.Conversation, + searchKeyword?: string +) => { + const conversationWith = conversation.getConversationWith(); + const lastMessage = conversation.getLastMessage() as CometChat.TextMessage; + + return ( + + + + {conversationWith.getName()} + + + {lastMessage?.getText?.() || "No messages yet"} + + + + + {conversation.getUnreadMessageCount() > 0 + ? conversation.getUnreadMessageCount() + : ""} + + + + ); +}; + +; +``` + + + + + +*** + +#### TextMessageItemView + +With this function, you can assign a custom view for text messages in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getTextMessageItemView = ( + message: CometChat.BaseMessage, + searchKeyword?: string +) => { + const textMessage = message as CometChat.TextMessage; + + return ( + + + {message.getSender().getName()}: + + + {textMessage.getText()} + + + ); +}; + +; +``` + + + + + +It should look like this in the app: + + + + + +*** + +#### ImageMessageItemView + +With this function, you can assign a custom view for image messages in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text, Image } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getImageMessageItemView = ( + message: CometChat.BaseMessage, + searchKeyword?: string +) => { + const imageMessage = message as CometChat.MediaMessage; + const attachment = imageMessage.getAttachment(); + const imageUrl = attachment?.url; + + return ( + + + + {message.getSender().getName()} + + + 📷 Photo + + + {imageUrl && ( + + )} + + ); +}; + +; +``` + + + + + +*** + +#### VideoMessageItemView + +With this function, you can assign a custom view for video messages in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text, Image } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getVideoMessageItemView = ( + message: CometChat.BaseMessage, + searchKeyword?: string +) => { + const videoMessage = message as CometChat.MediaMessage; + const attachment = videoMessage.getAttachment(); + const thumbnailUrl = attachment?.thumbnail || attachment?.url; + + return ( + + + + {message.getSender().getName()} + + + 🎥 Video + + + {thumbnailUrl && ( + + + + + ▶ + + + + )} + + ); +}; + +; +``` + + + + + +*** + +#### AudioMessageItemView + +With this function, you can assign a custom view for audio messages in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getAudioMessageItemView = ( + message: CometChat.BaseMessage, + searchKeyword?: string +) => { + const audioMessage = message as CometChat.MediaMessage; + const attachment = audioMessage.getAttachment(); + const fileName = attachment?.name || "Audio Message"; + + return ( + + + + 🎵 + + + + + {message.getSender().getName()} + + + {fileName} + + + + ); +}; + +; +``` + + + + + +*** + +#### DocumentMessageItemView + +With this function, you can assign a custom view for document/file messages in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getDocumentMessageItemView = ( + message: CometChat.BaseMessage, + searchKeyword?: string +) => { + const fileMessage = message as CometChat.MediaMessage; + const attachment = fileMessage.getAttachment(); + const fileName = attachment?.name || "Document"; + const fileExtension = fileName.split('.').pop()?.toUpperCase() || "FILE"; + + return ( + + + + {fileExtension} + + + + + {message.getSender().getName()} + + + {fileName} + + + + ); +}; + +; +``` + + + + + +*** + +#### LinkMessageItemView + +With this function, you can assign a custom view for link messages (text messages with link previews) in the search result. + +**Example** + + + +```tsx +import React from "react"; +import { View, Text, Image } from "react-native"; +import { CometChat } from "@cometchat/chat-sdk-react-native"; +import { CometChatSearch } from "@cometchat/chat-uikit-react-native"; + +const getLinkMessageItemView = ( + message: CometChat.BaseMessage, + searchKeyword?: string +) => { + const textMessage = message as CometChat.TextMessage; + const metadata = textMessage.getMetadata(); + const linkPreview = metadata?.['@injected']?.extensions?.['link-preview']; + const firstLink = linkPreview?.links?.[0]; + const thumbnailUrl = firstLink?.image || firstLink?.favicon; + + return ( + + {thumbnailUrl && ( + + )} + + + {message.getSender().getName()} + + + {textMessage.getText()} + + {firstLink?.title && ( + + 🔗 {firstLink.title} + + )} + + + ); +}; + +; +``` + + + + + +*** + +Below is a summary table of all message item view customization functions: + +| Function | Message Type | Description | +| ---------------------------- | ----------------------------- | -------------------------------------------------------------- | +| **textMessageItemView** | Text Message | Custom view for text messages | +| **imageMessageItemView** | Image Message | Custom view for image messages | +| **videoMessageItemView** | Video Message | Custom view for video messages | +| **audioMessageItemView** | Audio Message | Custom view for audio messages | +| **documentMessageItemView** | Document/File Message | Custom view for document and file messages | +| **linkMessageItemView** | Link Message | Custom view for text messages with link previews | + + + +*** + +Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source.