diff --git a/ui-kit/ios/ai-features.mdx b/ui-kit/ios/ai-features.mdx index 90f86183..3832161c 100644 --- a/ui-kit/ios/ai-features.mdx +++ b/ui-kit/ios/ai-features.mdx @@ -14,7 +14,8 @@ CometChat's AI capabilities greatly enhance user interaction and engagement in y When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters. -For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). +For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). + Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/ios/message-list) Component of UI Kits. @@ -26,7 +27,8 @@ Once you have successfully activated the [Conversation Starter](/fundamentals/ai Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices. -For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). + +For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/ios/message-composer) Component of UI Kits. @@ -38,7 +40,9 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation. -For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). + +For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). + Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/ios/message-composer) Component of UI Kits. diff --git a/ui-kit/ios/call-features.mdx b/ui-kit/ios/call-features.mdx index 7506c32f..d4aff37d 100644 --- a/ui-kit/ios/call-features.mdx +++ b/ui-kit/ios/call-features.mdx @@ -7,15 +7,10 @@ title: "Call" CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the iOS UI Kit. ## Integration +First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/ios/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your iOS project. -First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/ios/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your iOS project. Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it: - -**1. CocoaPods** - -We recommend using CocoaPods, as they are the most advanced way of managing iOS project dependencies. Open a terminal window, move to your project directory, and then create a Podfile by running the following command. - 1. You can install CometChatCallsSDK for iOS through Swift Package Manager or Cocoapods @@ -26,6 +21,10 @@ We recommend using CocoaPods, as they are the most advanced way of managing iOS + + + We recommend using CocoaPods, as they are the most advanced way of managing iOS project dependencies. Open a terminal window, move to your project directory, and then create a Podfile by running the following command. + ```ruby Swift $ pod init ``` @@ -65,12 +64,9 @@ $ pod update CometChatCallsSDK Always ensure to open the XCFramework file after adding the dependencies. - -*** - -**2. Swift Package Manager.** - -Add the Call SDK dependency : + + + Add the Call SDK dependency : You can install **Calling SDK for iOS** through **Swift Package Manager.** @@ -89,6 +85,8 @@ https://github.com/cometchat/calls-sdk-ios.git Before Adding the Call SDK dependency to your project's dependencies please make sure that you have completed the Chat UI Kit Integration. + + After adding this dependency, the iOS UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/ios/call-buttons) component rendered in [MessageHeader](/ui-kit/ios/message-header) Component. diff --git a/ui-kit/ios/color-resources.mdx b/ui-kit/ios/color-resources.mdx index 097b7039..c5853a49 100644 --- a/ui-kit/ios/color-resources.mdx +++ b/ui-kit/ios/color-resources.mdx @@ -9,13 +9,14 @@ Color resources in CometChatTheme for iOS enable you to maintain a consistent vi CometChatTheme adapts seamlessly to **Light mode** and **Dark mode**, ensuring an optimal user experience across different system appearances. The color resources are divided into the following categories: - -* **Primary Colors**: Define the main theme of the application. -* **Neutral Colors**: Used for backgrounds, strokes, and secondary UI elements. -* **Alert Colors**: Highlight states like success, warning, error, or information. -* **Text Colors**: Used for typography. -* **Icon Colors**: Define icon appearances. -* **Button Colors**: Customize button backgrounds, icons, and text. +| Property | Description | +| --------------- | -------------------------------------------------------------- | +| **Primary Colors** | Define the main theme of the application. | +| **Neutral Colors** | Used for backgrounds, strokes, and secondary UI elements. | +| **Alert Colors** | Highlight states like success, warning, error, or information. | +| **Text Colors** | Used for typography. | +| **Icon Colors** | Define icon appearances. | +| **Button Colors** | Customize button backgrounds, icons, and text. | CometChatTheme provides separate color definitions for light and dark modes, allowing seamless adaptation to the system's theme. @@ -25,36 +26,30 @@ Default Colors CometChatTheme includes predefined color sets for Light and Dark You can access and use these default colors directly through the CometChatTheme class. -Example: Light Mode Color Usage - -```swift + + ```swift CometChatTheme.primaryColor // Example: UIColor(hex: "#6852D6") CometChatTheme.backgroundColor01 // Light: UIColor(hex: "#FFFFFF") ``` - - - -Example: Dark Mode Color Usage - - - -```swift + + + ```swift CometChatTheme.primaryColor // Example: UIColor(hex: "#6852D6") CometChatTheme.backgroundColor01 // Light: UIColor(hex: "#141414") ``` - - + + diff --git a/ui-kit/ios/component-styling.mdx b/ui-kit/ios/component-styling.mdx index 6afbcd36..b6628044 100644 --- a/ui-kit/ios/component-styling.mdx +++ b/ui-kit/ios/component-styling.mdx @@ -14,11 +14,7 @@ Below is a detailed guide for styling individual components within the UIKit. The `CometChatConversations` component provides a list of recent chats, displaying participants, message previews, and timestamps. It supports default themes while offering extensive customization for text appearance, icons, and layout. This component allows you to create an intuitive and visually appealing chat list that matches your app's branding. -You can check out the list of styling properties offered by [CometChatConversations](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Conversations/ConversationsStyle.swift) - - - -```swift +```swift lines Example let customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") customAvatarStyle.cornerRadius = 8 @@ -35,23 +31,18 @@ customConversation.receiptStyle = customReceiptStyle customConversation.badgeStyle = customBadgeStyle ``` - - - - +You can check out the list of styling properties offered by [CometChatConversations](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Conversations/ConversationsStyle.swift) + ### Users The CometChatUsers component displays a scrollable list of users, ideal for showcasing available contacts for messaging, calls, or group creation. Customization includes user avatars, status indicators, and list backgrounds, enabling alignment with your app's design system. -You can check out the list of styling properties offered by [CometChatUsers](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift) - - -```swift +```swift lines Example let customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") customAvatarStyle.cornerRadius = 8 @@ -69,23 +60,17 @@ CometChatUsers.receiptStyle = customReceiptStyle CometChatUsers.badgeStyle = customBadgeStyle ``` - - - - +You can check out the list of styling properties offered by [CometChatUsers](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift) + ### Groups The CometChatGroups component enables displaying and interacting with chat groups. Each group item highlights key details like group name, participant count, and last active time. Developers can customize avatar styles, fonts, borders, and background colors. -You can check out the list of styling properties offered by [CometChatGroups](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift) - - - -```swift +```swift lines Example let customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") customAvatarStyle.cornerRadius = 8 @@ -103,23 +88,18 @@ CometChatGroups.receiptStyle = customReceiptStyle CometChatGroups.badgeStyle = customBadgeStyle ``` - - - - +You can check out the list of styling properties offered by [CometChatGroups](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift) + ### Message Header The CometChatMessageHeader component displays essential information about the active chat, such as the recipient's name, avatar, and status (online/offline). It also includes navigation, search, or menu buttons. Customization options include header background, text appearance, and icon styles. -You can check out the list of styling properties offered by [CometChatMessageHeader](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift) - - -```swift +```swift lines Example let customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") @@ -128,44 +108,34 @@ CometChatMessageHeader.style.titleTextFont = UIFont(name: "Times-New-Roman", siz CometChatMessageHeader.style.avatarStyle = customAvatarStyle ``` - - - - +You can check out the list of styling properties offered by [CometChatMessageHeader](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift) + ### Message List The CometChatMessageList component displays a conversation's sequence of messages, supporting text, media, reactions, and more. Developers can customize bubble colors, text appearance, timestamps, and alignment to enhance the chat experience. -You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift) - - -```swift +```swift lines Example CometChatMessageList.style.backgroundColor = UIColor(hexString: "#FBAA75") CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hexString: "#F76808") ``` - - - +You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift) + ### Message Composer The CometChatMessageComposer component provides users with an interface to compose and send messages, including text, attachments, and stickers. Developers can style input boxes, buttons, and icons to match their app’s design. -You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/MessageComposerStyle.swift) - - - -```swift +```swift lines Example CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = UIColor(hexString: "#F76808") CometChatMessageComposer.style.attachmentImageTint = UIColor(hexString: "#F76808") CometChatMessageComposer.style.voiceRecordingImageTint = UIColor(hexString: "#F76808") @@ -173,23 +143,18 @@ CometChatMessageComposer.style.stickerTint = UIColor(hexString: "#F76808") CometChatMessageComposer.style.aiImageTint = UIColor(hexString: "#F76808") ``` - - - - +You can check out the list of styling properties offered by [CometChatMessageComposer](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/MessageComposerStyle.swift) + ### Call Logs The CometChatCallLogs Component provides a comprehensive list of recent voice and video calls. Each call log displays details such as the caller’s name, avatar, call type (audio/video), call status (missed, incoming, outgoing), and timestamps. This component ensures smooth integration and allows developers to customize styles, icons, and colors to align with the app’s branding. -You can check out the list of styling properties offered by [CometChatCallLogs](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Calls/Call%20Log/Call%20Logs/CallLogStyle.swift) - - -```swift +```swift lines Example let customAvatarStyle = AvatarStyle() customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75") customAvatarStyle.cornerRadius = 8 @@ -199,108 +164,122 @@ CometChatCallLogs.style.titleFont = UIFont(name: "Roboto", size: 24) CometChatCallLogs.avatarStyle = customAvatarStyle ``` - - - - +You can check out the list of styling properties offered by [CometChatCallLogs](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Calls/Call%20Log/Call%20Logs/CallLogStyle.swift) + ## Base Component ### Avatar The `CometChatAvatar` Component is used across the UIKit to represent users, groups, or placeholders visually. This highly reusable component supports various shapes (circle or square), sizes, borders, and fallback icons, allowing complete design consistency for profile or group images. -You can check out the list of styling properties offered by [CometChatAvatar](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Avatar/AvatarStyle.swift) +You can check out the list of styling properties offered by [CometChatAvatar](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Avatar/AvatarStyle.swift) + ### Status indicator The `CometChatStatusIndicator` visually represents user presence (online, offline, or custom states). It can be styled for different shapes, sizes, and colors to reflect your app’s visual preferences while maintaining clarity in conveying status information. -You can check out the list of styling properties offered by [CometChatStatusIndicator](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Status%20Indicator/StatusIndicatorStyle.swift) +You can check out the list of styling properties offered by [CometChatStatusIndicator](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Status%20Indicator/StatusIndicatorStyle.swift) + ### Badge The `CometChatBadge` Component displays notifications or counts, such as unread messages. It can be styled for background colors, border radius, text size, and colors, allowing you to create visually distinct indicators for different notifications. -You can check out the list of styling properties offered by [CometChatBadge](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Badge/BadgeCountStyle.swift) +You can check out the list of styling properties offered by [CometChatBadge](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Badge/BadgeCountStyle.swift) + ### Date The `CometChatDate` Component formats and displays timestamps in conversation lists and message threads. It ensures time-related information is clear and consistent. Developers can customize its text appearance, alignment, and colors to fit various contexts. -You can check out the list of styling properties offered by [CometChatDate](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Date/DateStyle.swift) +You can check out the list of styling properties offered by [CometChatDate](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Date/DateStyle.swift) + ### Receipts The `CometChatReceipts` Component indicates message delivery and read statuses using intuitive icons. These can be styled for icon size, tint, and alignment, ensuring they remain clear and consistent with your app’s UI. -You can check out the list of styling properties offered by [CometChatReceipts](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Receipt/ReceiptStyle.swift) +You can check out the list of styling properties offered by [CometChatReceipts](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Receipt/ReceiptStyle.swift) + ### Media Recorder The `CometChatMediaRecorder` Component facilitates the recording of audio and video messages. It supports full customization of its recording controls, including button sizes, shapes, and colors, making it an integral part of your media-rich chat experience. -You can check out the list of styling properties offered by [CometChatMediaRecorder](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/MediaRecorder/MediaRecorderStyle.swift) +You can check out the list of styling properties offered by [CometChatMediaRecorder](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/MediaRecorder/MediaRecorderStyle.swift) + ### Sticker Keyboard The `CometChatStickerKeyboard` simplifies the integration of sticker-based messaging. Customize the background, grid layout, and sticker display styles to align with your chat experience. This component provides a visually rich and interactive way to enhance conversations. -You can check out the list of styling properties offered by [CometChatStickerKeyboard](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Extensions/Sticker/StickerKeyboardStyle.swift) +You can check out the list of styling properties offered by [CometChatStickerKeyboard](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Extensions/Sticker/StickerKeyboardStyle.swift) + ### Reaction list The `CometChatReactionList` Component provides a visual representation of emoji reactions on messages. It supports customization for reaction sizes, spacing, and colors, enabling you to build an engaging and personalized messaging environment. -You can check out the list of styling properties offered by [CometChatReactionList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/ReactionsHelper/ReactionList/ReactionListStyle.swift) +You can check out the list of styling properties offered by [CometChatReactionList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/ReactionsHelper/ReactionList/ReactionListStyle.swift) + ### Conversation Starter The `CometChatConversationStarter` Component offers AI-based suggestions or reply options to initiate a chat. Developers can customize the background, text styles, and button appearances to ensure seamless integration with the app’s visual language. -You can check out the list of styling properties offered by [CometChatConversationStarter](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Conversation%20Starter/AIConversationStarterStyle.swift) +You can check out the list of styling properties offered by [CometChatConversationStarter](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Conversation%20Starter/AIConversationStarterStyle.swift) + ### Conversation Summary The `CometChatConversationSummary` Component highlights the essence of a conversation, including participant details, last message, and timestamp. Customize text sizes, colors, and spacing to create visually distinct summaries that improve readability and engagement. -You can check out the list of styling properties offered by [CometChatConversationSummary](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Summarizer/AIConversationSummaryStyle.swift) +You can check out the list of styling properties offered by [CometChatConversationSummary](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Summarizer/AIConversationSummaryStyle.swift) + ### Smart Replies The `CometChatSmartReplies` Component provides AI-driven suggestions for quick message replies. Fully customizable for button styles, padding, and colors, this component enables a streamlined and modern chat experience for users. -You can check out the list of styling properties offered by [CometChatSmartReplies](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Smart%20Replies/AISmartRepliesStyle.swift) +You can check out the list of styling properties offered by [CometChatSmartReplies](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Smart%20Replies/AISmartRepliesStyle.swift) + ### Message Information The `CometChatMessageInformation` Component displays metadata for messages, such as delivery timestamps, sender details, and read receipts. Customization options include text styles, colors, and alignment, making it adaptable to various app layouts. -You can check out the list of styling properties offered by [CometChatMessageInformation](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Information/MessageInformationStyle.swift) +You can check out the list of styling properties offered by [CometChatMessageInformation](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Information/MessageInformationStyle.swift) + ### Message option sheet The `CometChatMessageOptionSheet` Component is a context menu for performing actions on messages, such as replying, forwarding, or deleting. Developers can style its background, icons, and text to match the app’s menu system. -You can check out the list of styling properties offered by [CometChatMessageOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Models/CometChatMessageOption.swift) +You can check out the list of styling properties offered by [CometChatMessageOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Models/CometChatMessageOption.swift) + ### Attachment option sheet The `CometChatAttachmentOptionSheet` Component provides a sleek interface for users to attach media, documents, or other files. It supports icon and text customizations to create a cohesive attachment experience. -You can check out the list of styling properties offered by [CometChatAttachmentOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Message%20Action%20Sheet/ActionSheetStyle.swift) +You can check out the list of styling properties offered by [CometChatAttachmentOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Message%20Action%20Sheet/ActionSheetStyle.swift) + ### AIOption Sheet The `CometChatAIOptionSheet` Component offers AI-powered action options, like generating replies or initiating voice-to-text commands. It allows developers to style icons, colors, and interaction elements for a polished and user-friendly interface. -You can check out the list of styling properties offered by [CometChatAIOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Shared%20Views/AIOptionsStyle.swift) +You can check out the list of styling properties offered by [CometChatAIOptionSheet](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/AI/AI%20Shared%20Views/AIOptionsStyle.swift) + ### Mentions The `CometChatMentions` Component highlights referenced users or groups within messages. With customizable styles for text color and background, you can ensure mentions stand out clearly in chats while maintaining a cohesive visual theme. -You can check out the list of styling properties offered by [CometChatMentions](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/TextFormatter/MentionTextStyle.swift) +You can check out the list of styling properties offered by [CometChatMentions](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/TextFormatter/MentionTextStyle.swift) + diff --git a/ui-kit/ios/components-overview.mdx b/ui-kit/ios/components-overview.mdx index 3888e4b0..3c6c4718 100644 --- a/ui-kit/ios/components-overview.mdx +++ b/ui-kit/ios/components-overview.mdx @@ -6,42 +6,95 @@ CometChat's **UI Kit** is a set of pre-built UI components that allows you to ea ## Type of Components -UI components based on the behaviour and functionality can be categorized into three types: Base Components, Components, and Composite Components. +UI components in CometChat are categorized into three types based on their **behavior** and **functionality**. + + + These are the **building blocks** of your UI. They **render visual elements** based on data but contain **no business logic**. + -### Base Components + + Built on top of base components, these manage **business logic**, **data handling**, and **event responses** to create **interactive UIs**. + -Base Components form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These components provide the foundational appearance and behavior for your UI. - -### Components - -Components build upon Base Components by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Components essential for creating dynamic and interactive UIs. - -### Composite Components - -Composite Components are advanced UI elements that combine multiple Components or other Composite Components to achieve complex functionality. By layering components together, Composite Components offer a sophisticated and flexible approach to designing UIs. They enable diverse functionalities and interactions, making them versatile tools for creating rich user experiences. + + These combine multiple components to provide **advanced, multi-functional UI features** for **richer chat experiences**. + + ## Actions -Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions. +Actions define **how a component behaves** when a user interacts with it. +They are categorized into **two types**: -### Predefined Actions + + + These actions are **built into the component by default** and execute **automatically** in response to user interactions. +

+ **Example:** Tapping a message opens its details **without additional configuration**. + -These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default, and they execute automatically in response to user interaction,without needing any additional user input. + + These are **custom actions** created by developers to **override default behaviors** or **add new functionality** based on app-specific requirements. +

+ **Example:** Adding a **long-press action** to bookmark a chat. + + -### User-Defined Actions + +**Tip:** To customize component behavior, simply **override** the default actions and define your own. + -These are actions that must be explicitly specified by the user. They are not innately part of the component like predefined actions. Instead, they must be developed based on the unique needs of the user or the application. User-defined actions provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application. +### **Where Actions Are Available** -To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions. - -Both Components and Composite Components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. On the other hand, Base Components do not expose actions to the user as they are the foundational building blocks mainly responsible for rendering the user interface and do not carry any business logic or actions. +- **Components** and **Composite Components** → ✅ Support both **predefined** and **user-defined** actions. +- **Base Components** → ❌ Do **not** expose actions since they focus only on **UI rendering** and **do not include business logic**. ## Events -Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit. - -Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application. +Events enable a **flexible, decoupled architecture** where different parts of the app can **communicate seamlessly** without directly referencing each other. +This makes it easier to build **complex, interactive experiences** and extend the **CometChat UI Kit** functionality. + + + + Events are **notifications** triggered when something **changes** or a **user interaction** occurs inside a component. + They help components **communicate** without tightly coupling their logic. +
+ **Example:** When a new message is received, an event can **notify the message list** to update automatically. + + + + Both **Components** and **Composite Components** can **emit events**. + These events are **dispatched automatically** when: +
+ - A user performs an **action** (e.g., sending a message) + - A **state change** occurs (e.g., user comes online) + - New **data** is received (e.g., chat updates) + + + + +Events allow you to **listen**, **react**, and **update** your UI dynamically, making the chat experience **more responsive** and **real-time**. + ## Configurations -Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple components, each of these components will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner. +Configurations allow you to **customize and control** the behavior and appearance of each component within a **Composite Component**. +They give you the flexibility to **fine-tune** individual components without affecting the entire structure. + + + + Every **Composite Component** consists of multiple **individual components**. + Each of these components comes with its own **configuration options**, enabling you to: + - Adjust **styling** (colors, fonts, layouts) + - Control **functional behavior** + - Enable or disable **specific features** + + + + Since each component exposes **separate configuration properties**, you get **fine-grained control** over: + - How each component **looks** + - How it **responds to user actions** + - How it **integrates with other components** + + + diff --git a/ui-kit/ios/core-features.mdx b/ui-kit/ios/core-features.mdx index eb827ad9..3a258afd 100644 --- a/ui-kit/ios/core-features.mdx +++ b/ui-kit/ios/core-features.mdx @@ -82,7 +82,7 @@ CometChat's Reactions feature adds a layer of expressiveness to your chat applic The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions. -In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList component. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message. +In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList component. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message. @@ -128,4 +128,4 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul -For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/ios/groups). +For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/ios/groups). diff --git a/ui-kit/ios/extensions.mdx b/ui-kit/ios/extensions.mdx index 62f7186c..9f5e067f 100644 --- a/ui-kit/ios/extensions.mdx +++ b/ui-kit/ios/extensions.mdx @@ -6,7 +6,8 @@ title: "Extensions" CometChat’s UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient. -Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide For detailed information on [Extensions](/fundamentals/extensions-overview) +Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide For detailed information on [Extensions](/fundamentals/extensions-overview) + Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. Please note, that the extension features will only be available if they are supported by CometChat UI Kit. @@ -20,112 +21,117 @@ Here's a guide on how you can enable and integrate these extensions: The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers). -Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. - +Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. + ### Polls The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls). -Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. - +Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. + ### Collaborative Whiteboard The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard). -Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. +Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. + ### Collaborative Document With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document). -Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. +Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits. + ### Message Reactions Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions). -Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. +Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Message Translation The Message Translation extension in CometChat is designed to translate any message into your local. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation). -Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. - +Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Link Preview The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview). -Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. - +Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Profanity Filter The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Profanity Filter Extension](/moderation/profanity-filter). -Once you have successfully activated the [Profanity Filter Extension](/moderation/profanity-filter) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. - +Once you have successfully activated the [Profanity Filter Extension](/moderation/profanity-filter) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Data Masking The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Data Masking Extension](/moderation/data-masking-filter). -Once you have successfully activated the [Data Masking Extension](/moderation/data-masking-filter) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. +Once you have successfully activated the [Data Masking Extension](/moderation/data-masking-filter) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Image Moderation The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Image Moderation Extension](/moderation/image-moderation). -Once you have successfully activated the [Data Masking Extension](/moderation/data-masking-filter) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. - +Once you have successfully activated the [Data Masking Extension](/moderation/data-masking-filter) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Thumbnail Generation The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation). -Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. +Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits. + ### Smart Replies Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies). diff --git a/ui-kit/ios/getting-started.mdx b/ui-kit/ios/getting-started.mdx index 67dea7ec..6fea949e 100644 --- a/ui-kit/ios/getting-started.mdx +++ b/ui-kit/ios/getting-started.mdx @@ -12,15 +12,37 @@ With built-in support for **one-to-one and group conversations**, developers can *** - ## **Prerequisites** - -Before installing the **CometChat UI Kit for iOS**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including: - -* **User Management** -* **Group Chat & Messaging** -* **Voice & Video Calling** -* **Real-time Notifications** + +Before installing the CometChat UI Kit for iOS, you must first create a CometChat application + + + + Sign in to the **[CometChat Dashboard](https://app.cometchat.com/)** and create a new app. + + + The dashboard provides core chat features including: + + + + Manage users, profiles, and authentication seamlessly. + + + + Enable one-on-one and group conversations in real-time. + + + + Offer high-quality voice and video calling features. + + + + Keep users informed with instant in-app alerts and updates. + + + + + @@ -35,45 +57,41 @@ Ensure you have these details ready before proceeding with the installation and *** - ## **Register & Set Up CometChat** Follow these steps to **register on CometChat** and **set up your development environment**. -### **Step 1: Register on CometChat** + + + To use **CometChat UI Kit**, first [register on the CometChat Dashboard](https://app.cometchat.com/login) by creating an account. + -To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**. -🔗 **[Click here to Sign Up](https://app.cometchat.com/login)** + + After registering, create a **new app** and retrieve your **authentication details**: -### **Step 2: Get Your Application Keys** + 1. Navigate to the **QuickStart** or **API & Auth Keys** section. + 2. Note down the following keys: + * **App ID** + * **Auth Key** + * **Region** -After registering, create a **new app** and retrieve your **authentication details**: + + Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**. + + -1. Navigate to the **QuickStart** or **API & Auth Keys section**. - -2. Note down the following keys: - - * **App ID** - * **Auth Key** - * **Region** - - + + Ensure your system meets the following **prerequisites** before proceeding with integration. -Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**. - - - -### **Step 3: Set Up Your Development Environment** - -Ensure your system meets the following **prerequisites** before proceeding with integration. - -**System Requirements:** - -* **Xcode 16 or later** installed on your machine. -* An **iOS device or simulator** with iOS version 13.0 or above. -* **Swift 5.0**. -* **macOS**. + + + + + + + + *** @@ -90,8 +108,7 @@ To get started, open Xcode and create a new project for UI Kit in the Project wi 5. Select **Swift** in the **Language** field in the **Choose options for your new project** window. *** - -### **Install Dependencies** +### Install Dependencies This developer kit is an add-on feature to CometChat iOS SDK so installing it will also install the core Chat SDK. You can install CometChat UI Kit into your iOS project using CocoaPods or Swift Package Manager (SPM). @@ -99,91 +116,86 @@ This developer kit is an add-on feature to CometChat iOS SDK so installing it wi We recommend using CocoaPods, as they are the most advanced way of managing iOS project dependencies. -1. Create pod file by running the following command in your project's base level: - -```ruby Swift -pod init -``` - -2. Add CometChat SDKs to Your Podfile: - -```ruby Swift -platform :ios, '13.0' -use_frameworks! - -target 'YourApp' do - # CometChat UI Kit for Swift - pod 'CometChatUIKitSwift', '5.0.6' - - # Optional: Include if you're using Audio/Video Calling - pod 'CometChatCallsSDK', '4.1.2' -end -``` - -3. Install the CometChat UI Kit framework through CocoaPods: - -```ruby Swift -pod install -``` - -If you're facing any issues while installing pods, use the following command: - -```ruby Swift -pod install --repo-update -``` - -To get the latest version of CometChat UI Kit, use: - -```ruby Swift -pod update CometChatUIKitSwift -pod update CometChatCallsSDK -``` + + + ```ruby Swift + pod init + ``` + + + + ```ruby Swift + platform :ios, '13.0' + use_frameworks! + + target 'YourApp' do + # CometChat UI Kit for Swift + pod 'CometChatUIKitSwift', '5.0.6' + + # Optional: Include if you're using Audio/Video Calling + pod 'CometChatCallsSDK', '4.1.2' + end + ``` + + + + ```ruby Swift + pod install + ``` + + + + ```ruby Swift + pod install --repo-update + ``` + + + + ```ruby Swift + pod update CometChatUIKitSwift + pod update CometChatCallsSDK + ``` + + - Always ensure to open the XCFramework file after adding the dependencies. - -**Swift Package Manager** (SPM) is Apple's built-in tool for managing dependencies in Swift projects. It allows developers to integrate and manage third-party libraries seamlessly. - -1. Go to **File** tab and select **Add Package Dependencies.** - -2. Enter the repository URL of the Swift package: - -``` -https://github.com/cometchat/cometchat-uikit-ios -``` - -3. To add the package, select Version Rules, enter Up to Exact Version and click Add package. - - Exact Version: - - ``` - 5.0.6 - ``` - -4. Add `CometChatSDK` repeating the above steps for following link and exact version: - - Link: - - ``` - https://github.com/cometchat/chat-sdk-ios - ``` - - Exact Version: - - ``` - 4.0.62 - ``` +Swift Package Manager (SPM) is Apple's built-in tool for managing dependencies in Swift projects. It allows developers to integrate and manage third-party libraries seamlessly. + + + + + + ``` + https://github.com/cometchat/cometchat-uikit-ios + ``` + + + + ``` + 5.0.6 + ``` + + + + Link: + ``` + https://github.com/cometchat/chat-sdk-ios + ``` + Exact Version: + ``` + 4.0.62 + ``` + + - - *** ### **Configure Privacy Permissions** @@ -218,7 +230,8 @@ https://github.com/cometchat/cometchat-uikit-ios *** -### **Step 4: Initialize & Login to CometChat UI Kit** + +### **Initialize & Login to CometChat UI Kit** To authenticate a user, you need a **`UID`**. You can either: @@ -247,7 +260,7 @@ The **Login** method returns a **User object** containing all relevant details o You can initialize CometChat and log in a user in your `SceneDelegate.swift` file: -> ⚠️ **Important:** Initialization and login are independent steps. However, the CometChat SDK **must be initialized before** you call the login method. +Initialization and login are independent steps. However, the CometChat SDK **must be initialized before** you call the login method. ```swift SceneDelegate.swift highlight={13-15} lines import UIKit @@ -331,12 +344,11 @@ After running the app, you should see the following log message: *** -### **Step 5: Choose a Chat Experience** +### **Choose a Chat Experience** Integrate a conversation view that suits your application's **UX requirements**. Below are the available options: *** - ### **1️⃣ Conversation List + Message View** **Best for:** Native iOS apps using **stack-based navigation** to switch between conversations and messages. @@ -353,11 +365,13 @@ Integrate a conversation view that suits your application's **UX requirements**. -**Use When:** +
-* You need a **native iOS chat experience** with clean transitions. -* Your app supports **private and group messaging**. -* You want **seamless sync and navigation** between list and messages. + + - You need a **native iOS chat experience** with clean transitions. + - Your app supports **private and group messaging.** + - You want **seamless sync and navigation** between list and messages. + [Integrate Conversation List + Message View](./ios-conversation) @@ -379,11 +393,13 @@ Integrate a conversation view that suits your application's **UX requirements**. -**Use When:** +
-* Your app starts directly with a **specific user or group chat**. -* You want a **clean, distraction-free** chat experience. -* Ideal for **support workflows, community replies, or invitations.** + + - Your app starts directly with a **specific user or group chat.** + - You want a **clean, distraction-free** chat experience. + - Ideal for **support workflows, community replies, or invitations.** + [Integrate One-to-One / Group Chat](./ios-one-to-one-chat) @@ -406,33 +422,54 @@ Integrate a conversation view that suits your application's **UX requirements**. -**Use When:** +
-* You need a **structured layout** for navigating chat, calls, and contacts. -* Your app supports **multiple modules** (e.g., user directory, history, chat). -* Designed for **enterprise, support, or social use cases**. + + - You need a **structured layout** for navigating chat, calls, and contacts. + - Your app supports **multiple modules** (e.g., user directory, history, chat). + - Designed for **enterprise, support, or social use cases**. + [Integrate Tab-Based Chat](./ios-tab-based-chat) *** -## **Build Your Own Chat Experience** +## Build Your Own Chat Experience + +**Best for:** +- Developers who need **complete control** over chat UI. +- Apps that require **deep customization** of components, themes, and features. +- Teams wanting to **align chat with existing design & functionality**. + + + - Apps that require a **fully customized chat experience.** + - Developers who want to **extend functionalities and modify UI components.** + - Businesses integrating chat seamlessly into **existing platforms.** + + +### Key Areas to Explore -**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app’s design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs. + + + Explore fully functional iOS sample applications to accelerate your development. + -**Recommended for:** + + Learn about messaging, real-time updates, and other essential chat capabilities. + -* Apps that require **a fully customized chat experience**. -* Developers who want to **extend functionalities and modify UI components**. -* Businesses integrating chat seamlessly into **existing platforms**. + + Use prebuilt UI elements or customize them to fit your app’s design. + -**Key Areas to Explore:** + + Adjust colors, fonts, and styles to match your branding. + -* **[iOS Sample App](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)** – Fully functional sample applications to accelerate your development. -* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities. -* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design. -* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding. -* **[Build Your Own UI](/sdk/javascript/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience. + + Prefer custom UI over UI Kits? Use our SDKs to build from scratch. + + *** diff --git a/ui-kit/ios/ios-conversation.mdx b/ui-kit/ios/ios-conversation.mdx index 6124c475..820338d0 100644 --- a/ui-kit/ios/ios-conversation.mdx +++ b/ui-kit/ios/ios-conversation.mdx @@ -14,18 +14,24 @@ The **Conversation List + Message View** layout offers a modern two-panel chat e ### **Key Components** + + + Displays user or group name, avatar, and back button. + + + Displays chat messages and real-time updates. + + + Allows sending of text, media, and reactions. + + -1. **Chat Header** – Displays user or group name, avatar, and back button. -2. **Message List** – Displays chat messages and real-time updates. -3. **Message Composer** – Allows sending of text, media, and reactions. - -*** ## **Step-by-Step Guide** ### **Step 1: Setup SceneDelegate.swift** -Ensure UIKit is initialized and the user is logged in before presenting the conversation view. +Ensure UIKit is initialized and the user is logged in before presenting the conversation view. ```swift SceneDelegate.swift highlight={15-17} lines import UIKit @@ -215,7 +221,7 @@ class MessagesVC: UIViewController { ## **Next Steps** ### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/ios/theme-introduction)** – Personalize the chat UI to align with your brand. - -*** + + Personalize the chat UI to align with your brand. + +*** \ No newline at end of file diff --git a/ui-kit/ios/ios-one-to-one-chat.mdx b/ui-kit/ios/ios-one-to-one-chat.mdx index ae1c160d..1ca6816b 100644 --- a/ui-kit/ios/ios-one-to-one-chat.mdx +++ b/ui-kit/ios/ios-one-to-one-chat.mdx @@ -14,18 +14,24 @@ The **One-to-One Chat** feature provides a streamlined **direct messaging interf ### **Key Components** - -1. **Chat Header** – Displays recipient details and optional call/video call buttons. -2. **Message View** – Shows real-time chat history. -3. **Message Input Box** – Enables users to send messages, media, and reactions. + + + Displays recipient details and optional call/video call buttons. + + + Shows real-time chat history. + + + Enables users to send messages, media, and reactions. + + *** ## **Step-by-Step Guide** ### **Step 1: Setup SceneDelegate.swift** - -Ensure UI Kit is initialized and the user is logged in before presenting the message view. +Ensure UI Kit is initialized and the user is logged in before presenting the message view. ```swift SceneDelegate.swift highlight={15-17} lines import UIKit @@ -217,7 +223,7 @@ class MessagesVC: UIViewController { ## **Next Steps** ### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/ios/theme-introduction)** – Personalize the chat UI to align with your brand. - + + Personalize the chat UI to align with your brand. + *** diff --git a/ui-kit/ios/ios-tab-based-chat.mdx b/ui-kit/ios/ios-tab-based-chat.mdx index 8c6d7b04..50fbee3d 100644 --- a/ui-kit/ios/ios-tab-based-chat.mdx +++ b/ui-kit/ios/ios-tab-based-chat.mdx @@ -14,19 +14,27 @@ This guide walks you through creating a **tab-based messaging interface** in you This layout contains: - -1. **Conversations** – Lists all recent chats. -2. **Calls** – Displays call logs. -3. **Users** – Lists available users. -4. **Groups** – Lists available groups. + + + Lists all recent chats. + + + Displays call logs. + + + Lists available users. + + + Lists available groups. + + *** ## **Step-by-Step Guide** ### **Step 1: Initialize UIKit in `SceneDelegate.swift`** - -Ensure UIKit is initialized and the user is logged in before presenting the tabbed view. +Ensure UIKit is initialized and the user is logged in before presenting the tabbed view. ```swift SceneDelegate.swift highlight={5-7} lines func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { @@ -257,6 +265,8 @@ class MessagesVC: UIViewController { ### **Enhance the User Experience** -* **[Advanced Customizations](/ui-kit/ios/theme-introduction)** – Personalize the chat UI to align with your brand. + + Personalize the chat UI to align with your brand. + *** diff --git a/ui-kit/ios/localize.mdx b/ui-kit/ios/localize.mdx index af5cc261..09f09403 100644 --- a/ui-kit/ios/localize.mdx +++ b/ui-kit/ios/localize.mdx @@ -8,7 +8,7 @@ CometChat UI Kit provides language localization to adapt to the language of a sp CometChatLocalize is a class that includes methods related to locale. Developers can use these methods to change the language of the UI Kit library. -Presently, the UI Kit supports 17 languages for localization, which are: +Presently, the UI Kit supports **17 languages** for localization, which are: - English (en, en-US) - English-UK (en-GB) @@ -37,9 +37,7 @@ Localization in the SDK is powered by: 1. The **CometChatLocalize** class — for setting and fetching the active locale. 2. A **String** extension method called `.localize` — to fetch localized text dynamically. -#### Example: - -```swift +```swift Example "CHATS".localize ``` @@ -65,18 +63,15 @@ Here are the methods included in the CometChatLocalize class: Here is how you can put these methods into use: - - -```swift +```swift Example // Set Language to French CometChatLocalize.set(locale: .french) // Get Current Language let lang = CometChatLocalize.getLocale() ``` - - + --- @@ -85,15 +80,11 @@ let lang = CometChatLocalize.getLocale() To customize any text used by the SDK, simply define the same key in your app’s Localizable.strings files. Example – Localizable.strings (en.lproj): - - -```swift +```swift Example "CHATS" = "Conversations"; "USERS" = "People"; ``` - - When your app runs, this will override the SDK’s built-in translation for "CHATS" and "USERS" wherever they are used via .localize. @@ -116,12 +107,17 @@ CometChatUIKit for iOS allows developers to customize localization values easily ### Steps to Customize Strings -1. Identify the String Key - - Check the UIKit source code for the exact key of the string you want to modify. [Localization file](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Resources/en.lproj/Localizable.strings). -2. Navigate to the app level localization file for that same langauge - - Added the same key with the changed vale you whant value. -3. Build and Run Your App - - The changes will automatically reflect wherever the key is used. + + + Check the UIKit source code for the exact key of the string you want to modify. [Localization file](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Resources/en.lproj/Localizable.strings). + + + Added the same key with the changed vale you whant value. + + + The changes will automatically reflect wherever the key is used. + + ## DateTimeFormatter This feature allows developers to customize how date and time values are displayed across the CometChat UI Kit components. It introduces the CometChatDateTimeFormatter class, enabling tailored formatting for strings such as "Today", "Yesterday", or time formats like "12:00 PM". @@ -166,10 +162,10 @@ Each closure receives a timestamp (Int, representing UNIX time) and must return The formatter can be applied at three levels: -1. **Global Level**: A global formatter is available via `CometChatUIKit.dateTimeFormatter`. Use this to apply formatting across all components in the `CometChatUIKit`. - - + + A global formatter is available via `CometChatUIKit.dateTimeFormatter`. Use this to apply formatting across all components in the `CometChatUIKit`. + ```swift CometChatUIKit.dateTimeFormatter.hour = { timestamp in return "Today" @@ -179,15 +175,11 @@ CometChatUIKit.dateTimeFormatter.time = { timestamp in return "12:00 PM" } ``` + + + Each component has a static formatter that overrides the global formatter only for that component across all instances. - - - -2. **Component Global Level**: Each component has a static formatter that overrides the global formatter only for that component across all instances. - - - ```swift CometChatMessageList.dateTimeFormatter.hour = { timestamp in return "Today" @@ -197,14 +189,11 @@ CometChatMessageList.dateTimeFormatter.time = { timestamp in return "12:00 PM" } ``` + + + Components also expose an instance-level formatter for per-instance customization. This provides the highest precedence. - - -3. **Local Component Level**: Components also expose an instance-level formatter for per-instance customization. This provides the highest precedence. - - - ```swift let messageList = CometChatMessageList() messageList.set(user: user) @@ -217,19 +206,33 @@ messageList.dateTimeFormatter.time = { timestamp in return "12:00 PM" } ``` - - + ### Component-Level Date-Time Formatting Options The following components support dateTimeFormatter: -* [CometChatConversations](/ui-kit/ios/conversations#date-time-formatter) -* [CometChatMessageList](/ui-kit/ios/message-list#date-time-formatter) -* [CometChatCallLogs](/ui-kit/ios/call-logs#date-time-formatter) -* [CometChatMessageHeader](/ui-kit/ios/message-header#date-time-formatter) + + + Manage and display conversation lists. + + + + Display real-time chat messages. + + + + Show call history with date & time formatting. + + + + Customize chat headers and metadata. + + Each of these components checks the most relevant closure in CometChatDateTimeFormatter based on the timestamp and context. + The `CometChatDateTimeFormatter` gives developers fine-grained control over how date and time appear throughout their app. Whether you’re customizing for locale, branding, or clarity, this system ensures your app’s time formatting is as user-friendly and context-aware as possible. + \ No newline at end of file diff --git a/ui-kit/ios/message-bubble-styling.mdx b/ui-kit/ios/message-bubble-styling.mdx index 0fd95c1e..2abee5f1 100644 --- a/ui-kit/ios/message-bubble-styling.mdx +++ b/ui-kit/ios/message-bubble-styling.mdx @@ -14,23 +14,24 @@ There are two primary classes for styling message bubbles: Both classes provide properties for customizing background color, border, corner radius, and specific styles for individual message types. ### Properties - **Global Styling (Static Variables)** - -* **backgroundColor:** The background color for message bubbles. -* **backgroundDrawable:** A background image for message bubbles. -* **borderWidth:** The width of the border for message bubbles. -* **borderColor:** The color of the border for message bubbles. -* **cornerRadius:** The corner radius for message bubbles. +| Property | Description | +| ------------------- | ------------------------------------------- | +| **backgroundColor** | The background color for message bubbles. | +| **backgroundDrawable** | A background image for message bubbles. | +| **borderWidth** | The width of the border for message bubbles. | +| **borderColor** | The color of the border for message bubbles. | +| **cornerRadius** | The corner radius for message bubbles. | **Specific Message Type Styles:** - -* **textBubbleStyle:** Style for text message bubbles. -* **imageBubbleStyle:** Style for image message bubbles. -* **videoBubbleStyle:** Style for video message bubbles. -* **audioBubbleStyle:** Style for audio message bubbles. -* **fileBubbleStyle:** Style for file message bubbles. -* **documentBubbleStyle:** Style for document message bubbles. +| Property | Description | +| ---------------------- | --------------------------------------- | +| **textBubbleStyle** | Style for text message bubbles. | +| **imageBubbleStyle** | Style for image message bubbles. | +| **videoBubbleStyle** | Style for video message bubbles. | +| **audioBubbleStyle** | Style for audio message bubbles. | +| **fileBubbleStyle** | Style for file message bubbles. | +| **documentBubbleStyle**| Style for document message bubbles. | ## Customization Examples @@ -38,52 +39,36 @@ Both classes provide properties for customizing background color, border, corner The following code snippet shows how customize the incoming message bubble style: - - -```swift + +```swift Example CometChatMessageBubble.style.incoming.backgroundColor = UIColor(hexString: "#F76808") CometChatMessageBubble.style.incoming.borderWidth = 2 CometChatMessageBubble.style.incoming.borderColor = UIColor.black ``` - - - - ### Customizing Outgoing Message Bubble The following code snippet shows how customize the outgoing message bubble style: - - -```swift + +```swift Example CometChatMessageBubble.style.outgoing.backgroundColor = UIColor(hexString: "#F76808") CometChatMessageBubble.style.outgoing.borderWidth = 2 CometChatMessageBubble.style.outgoing.borderColor = UIColor.black ``` - - - - ## Text Bubble Text bubbles display plain text messages, which are the most common message type. The following code snippet shows how customize the text message bubble: - - -```swift +```swift Example CometChatMessageBubble.style.incoming.textBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") CometChatMessageBubble.style.outgoing.textBubbleStyle.backgroundColor = UIColor(hexString: "#F76808") ``` - - - - **Default** @@ -102,17 +87,13 @@ Image bubbles display messages with images. The following code snippet shows how customize the Image message bubble: - - -```swift + +```swift Example CometChatMessageBubble.style.incoming.imageBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") CometChatMessageBubble.style.outgoing.imageBubbleStyle.backgroundColor = UIColor(hexString: "#F76808") ``` - - - **Default** @@ -132,9 +113,7 @@ Video bubbles display messages with video clips. The following code snippet shows how customize the Video message bubble: - - -```swift +```swift Example CometChatMessageBubble.style.incoming.videoBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") CometChatMessageBubble.style.incoming.videoBubbleStyle.playButtonTint = UIColor(hexString: "#F76808") @@ -142,10 +121,6 @@ CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColo CometChatMessageBubble.style.outgoing.videoBubbleStyle.playButtonTint = UIColor(hexString: "#F76808") ``` - - - - **Default** @@ -164,9 +139,7 @@ Audio bubbles display Audio messages. The following code snippet shows how customize the Audio message bubble: - - -```swift +```swift Example CometChatMessageBubble.style.incoming.audioBubbleStyle.audioWaveFormTintColor = UIColor(hexString: "#F76808") CometChatMessageBubble.style.incoming.audioBubbleStyle.playImageTintColor = UIColor(hexString: "#F76808") CometChatMessageBubble.style.incoming.audioBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") @@ -175,9 +148,6 @@ CometChatMessageBubble.style.outgoing.audioBubbleStyle.playImageTintColor = UICo CometChatMessageBubble.style.outgoing.audioBubbleStyle.backgroundColor = UIColor(hexString: "#F76808") ``` - - - **Default** @@ -197,9 +167,7 @@ Poll bubbles display messages with polling. The following code snippet shows how customize the Poll message bubble: - - -```swift +```swift Example CometChatMessageBubble.style.incoming.pollBubbleStyle.optionProgressTintColor = UIColor(hexString: "#F76808") CometChatMessageBubble.style.incoming.pollBubbleStyle.selectedPollImageTint = UIColor(hexString: "#F76808") CometChatMessageBubble.style.incoming.pollBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") @@ -207,10 +175,6 @@ CometChatMessageBubble.style.incoming.pollBubbleStyle.backgroundColor = UIColor( CometChatMessageBubble.style.outgoing.pollBubbleStyle.backgroundColor = UIColor(hexString: "#F76808") ``` - - - - **Default** @@ -229,18 +193,13 @@ The Link Preview Bubble is designed to display a preview of links shared in mess The following code snippet shows how customize the Link preview message bubble: - - -```swift + +```swift Example CometChatMessageBubble.style.incoming.linkPreviewBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") CometChatMessageBubble.style.outgoing.linkPreviewBubbleStyle.backgroundColor = UIColor(hexString: "#F76808") ``` - - - - **Default** @@ -259,17 +218,12 @@ Action bubbles provide a customizable interface for displaying a variety of acti The following code snippet shows how customize the action message bubble: - - -```swift +```swift Example CometChatMessageBubble.actionBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") CometChatMessageBubble.actionBubbleStyle.bubbleTextColor = UIColor(hexString: "#F76808") CometChatMessageBubble.actionBubbleStyle.borderColor = UIColor(hexString: "#F76808") ``` - - - **Default** @@ -289,18 +243,12 @@ Delete bubbles displays messages that have been deleted by the sender. These ind The following code snippet shows how customize the delete message bubble: - - -```swift +```swift Example CometChatMessageBubble.style.incoming.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#FEEDE1") CometChatMessageBubble.style.outgoing.deleteBubbleStyle.backgroundColor = UIColor(hexString: "#F76808") ``` - - - - **Default** diff --git a/ui-kit/ios/overview.mdx b/ui-kit/ios/overview.mdx index aa00a339..f3bc0066 100644 --- a/ui-kit/ios/overview.mdx +++ b/ui-kit/ios/overview.mdx @@ -7,12 +7,29 @@ The **CometChat UI Kit** for iOS provides a seamless solution to integrate chat *** -## **Why Choose CometChat UI Kit?** +## Why Choose CometChat UI Kit? + + + + + Ready-to-use SwiftUI components for rapid implementation and faster time-to-market. + + + + Easily adapt UI components to match your brand and deliver a consistent user experience. + + + + Leverages the powerful CometChat iOS SDK for robust and reliable messaging performance. + + + + Optimized for enterprise-grade applications with a focus on scalability and stability. + + + + -* **Effortless Integration** – Ready-to-use SwiftUI components for rapid implementation. -* **Highly Customizable** – Adapt UI components easily to match your brand and user experience requirements. -* **Built on Core SDK** – Leverages the powerful [CometChat iOS SDK](/sdk/ios/overview) for reliable performance. -* **Scalable & Reliable** – Optimized for enterprise-grade applications. *** @@ -23,34 +40,50 @@ The **CometChat UI Kit** for iOS provides a seamless solution to integrate chat *** +## Download the CometChat Demo App -## **Download the CometChat Demo App** +Experience the **CometChat UI Kit** instantly on your iOS device: -Get started with the **CometChat UI Kit** on your mobile device: + -**Download from the App Store** + + Tap to install the fully functional demo app.

+ + -[](https://link.cometchat.com/ios-demo-app) + + Point your iPhone camera at the QR code to install instantly. + -**Or Scan the QR Code** + - - - -**Tip:** On iOS, simply open the camera app and scan the QR code to install directly. - +**Tip:** On iOS, simply open the Camera app and scan the QR code to install directly. *** - ## **Getting Started** -Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features offered by CometChat’s platform. + +Before you begin, get familiar with the core concepts of CometChat’s iOS UI Kit and SDK to ensure a smooth integration experience. + -* Review the [Key Concepts](/fundamentals/key-concepts) to understand essential terminology and features. -* Follow the [Getting Started Guide](/ui-kit/ios/getting-started) for detailed steps on initial setup and integration. + + + Understand the building blocks of the platform via the [Key Concepts](/fundamentals/key-concepts). + + + Follow the [Getting Started Guide](/ui-kit/ios/getting-started) for a seamless integration. + + *** @@ -62,39 +95,39 @@ The CometChat UI Kit consists of modular SwiftUI components that can be integrat * **Modular Structure:** Easy to integrate and modify. * **Customization Options:** Highly configurable to fit your brand and UI requirements. -Explore more about UI customization in the [Customization Guide](/ui-kit/ios/theme-introduction). + + Learn how to customize the UI Kit to align with your app’s branding and interface requirements. + *** +## Helpful Resources -## **Helpful Resources** +Explore these essential resources to gain a deeper understanding of CometChat UI Kits and streamline your integration process. -Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. + + + Fully functional sample application to accelerate your development. + -#### 🚀 iOS Sample App - -Fully functional sample applications to accelerate your development. - -[View on GitHub](https://github.com/cometchat/cometchat-uikit-ios) - -#### 📦 UI Kit Source Code - -Access the complete UI Kit source code on GitHub. - -[View on GitHub](https://github.com/cometchat/cometchat-uikit-ios) - -#### 🎨 Figma Design File - -UI design resources for customization and prototyping. - -[View on Figma](https://www.figma.com/community/file/1444325479486807899/cometchat-ui-kit-for-ios) + + Access the complete UI Kit source code on GitHub. + + + UI design resources for customization and prototyping. + + *** -## **💡 Need Help?** - +## 💡 Need Help? If you need assistance, check out: -* 💬 [Developer Community](http://community.cometchat.com/) -* ❓ [Support Portal](https://help.cometchat.com/hc/en-us/requests/new) + + + Join discussions, ask questions, and connect with fellow developers. + -*** + + Submit support tickets and get help from the CometChat team. + + diff --git a/ui-kit/ios/sound-manager.mdx b/ui-kit/ios/sound-manager.mdx index a9fdcd3c..8370b25f 100644 --- a/ui-kit/ios/sound-manager.mdx +++ b/ui-kit/ios/sound-manager.mdx @@ -12,8 +12,6 @@ The SoundManager is a helper class responsible for managing and playing various The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface. If no custom sound file is provided, the default sound is played. -Here are the available methods for triggering sound playback: - * `play(sound: Sound, customSound: URL?)`: This method plays different types of sounds for incoming and outgoing calls and messages.Moreover, it can play a customized sound for a specific URL when triggered. ### Pause Sound @@ -38,5 +36,6 @@ if let customSoundURL = Bundle.main.url(forResource: "customSound", withExtensio // Pause Sound: CometChatSoundManager().pause() ``` - + By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions. + \ No newline at end of file diff --git a/ui-kit/ios/theme-introduction.mdx b/ui-kit/ios/theme-introduction.mdx index 7a8559d1..e13149d5 100644 --- a/ui-kit/ios/theme-introduction.mdx +++ b/ui-kit/ios/theme-introduction.mdx @@ -8,17 +8,12 @@ Theming in CometChat for iOS allows you to create visually consistent and custom With global styles and an easy-to-override architecture, you can seamlessly apply themes at both a global and component level. -## Using Theming in Your Project - -Global Theming - -Set up the global theme for your application during the app launch. This ensures all CometChat components use the specified theme. - -Example in AppDelegate.swift - +## Theming & Customization - -```swift + + Set up the global theme for your application during the app launch. This ensures all CometChat components use the specified theme. + +```swift lines AppDelegate.swift import UIKit import CometChatSDK @@ -39,32 +34,23 @@ class AppDelegate: UIResponder, UIApplicationDelegate { } ``` - - - - - -## Customization - -Customizing Colors - -Override specific color attributes globally in CometChatTheme. This is equivalent to overriding attributes in Android's themes.xml. + + + Override specific color attributes globally in CometChatTheme. This is equivalent to overriding attributes in Android's themes.xml. Example: Setting Primary Color - - + ```swift CometChatTheme.primaryColor = UIColor(hex: "#F76808") // Custom primary color ``` - - - + +