diff --git a/ui-kit/ios/message-bubble-styling.mdx b/ui-kit/ios/message-bubble-styling.mdx index c161ccdf7..5ecb97061 100644 --- a/ui-kit/ios/message-bubble-styling.mdx +++ b/ui-kit/ios/message-bubble-styling.mdx @@ -1,7 +1,7 @@ --- title: "Message Bubble Styling" sidebarTitle: "Message Bubble Styling" -description: "Customize CometChat iOS UI Kit message bubbles with incoming and outgoing styles, borders, corner radius, and per-message-type styling." +description: "Customize CometChat iOS UI Kit message bubbles with incoming and outgoing styles, borders, corner radius, per-message-type styling, and link, phone number and email colors." --- @@ -14,6 +14,7 @@ description: "Customize CometChat iOS UI Kit message bubbles with incoming and o | Global Properties | `backgroundColor`, `borderWidth`, `borderColor`, `cornerRadius` | | Bubble Types | `textBubbleStyle`, `imageBubbleStyle`, `videoBubbleStyle`, `audioBubbleStyle`, `fileBubbleStyle`, `pollBubbleStyle`, `linkPreviewBubbleStyle`, `deleteBubbleStyle`, `aiAssistantBubbleStyle` | | Action Bubble | `CometChatMessageBubble.actionBubbleStyle` | +| Link Colors | `textLinkColor`, `textPhoneNumberColor`, `textEmailColor` on `textBubbleStyle` and `linkPreviewBubbleStyle` | @@ -119,6 +120,54 @@ CometChatMessageBubble.style.outgoing.textBubbleStyle.backgroundColor = UIColor( +### Link, Phone Number and Email Colors + +Text bubbles automatically detect URLs, phone numbers and email addresses and render them as tappable links. Each entity type has its own color property, so links can be styled independently of phone numbers and emails. + +| Property | Type | Applies to | +| --- | --- | --- | +| `textLinkColor` | `UIColor?` | Detected URLs and markdown links | +| `textPhoneNumberColor` | `UIColor?` | Detected phone numbers | +| `textEmailColor` | `UIColor?` | Detected email addresses | +| `textHighlightColor` | `UIColor` | Fallback for all three when they are left unset | + +All three properties are optional. When one is `nil`, that entity falls back to `textHighlightColor`, which resolves to the theme's info color for incoming bubbles and white for outgoing bubbles — the default appearance. Underlines follow the resolved text color automatically. + + + +```swift lines +// Global — set before any message list is created +CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808") +CometChatMessageBubble.style.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69") +CometChatMessageBubble.style.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8") + +CometChatMessageBubble.style.outgoing.textBubbleStyle.textLinkColor = UIColor(hex: "#FFF9F5") +``` + + + +To scope the colors to a single screen instead, assign a style to the component: + + + +```swift lines +var bubbleStyle = CometChatMessageBubble.style + +bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808") +bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69") +bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8") + +messageList.messageBubbleStyle = bubbleStyle +``` + + + + + +Messages that render a [Link Preview Bubble](#link-preview-bubble) inherit these three colors from `textBubbleStyle`, so setting them once covers both plain text messages and messages with a preview card. Set them on `linkPreviewBubbleStyle` only when preview messages need different colors — see [Link Colors in the Preview Bubble](#link-colors-in-the-preview-bubble). + + + --- ## Image Bubble @@ -389,6 +438,59 @@ CometChatMessageBubble.style.outgoing.linkPreviewBubbleStyle.backgroundColor = U +### Link Colors in the Preview Bubble + +`LinkPreviewBubbleStyle` exposes the same three entity color properties as [Text Bubble](#link-phone-number-and-email-colors), so the message text inside a preview bubble can be colored the same way. + +These colors are inherited from `textBubbleStyle` automatically. Assigning them on the text bubble style applies them to preview bubbles too, so plain text messages and preview messages match without configuring both: + + + +```swift lines +// Applies to text bubbles AND to messages that render a link preview +CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808") +``` + + + +A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ: + + + +```swift lines +var bubbleStyle = CometChatMessageBubble.style + +bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808") +// Preview messages use teal instead of the inherited orange +bubbleStyle.incoming.linkPreviewBubbleStyle.textLinkColor = UIColor(hex: "#0B7B69") + +messageList.messageBubbleStyle = bubbleStyle +``` + + + + + +Inheritance runs each time `textBubbleStyle` is written and only fills colors still unset on `linkPreviewBubbleStyle`. Once a preview color is set explicitly it is never overwritten, so later changes to the text bubble's link colors will not reach it. + + + +#### Preview card labels + +The properties above color the tappable link inside the message text. The preview card's own labels are separate and unaffected: + +| Property | Type | Applies to | Android equivalent | +| --- | --- | --- | --- | +| `titleTextColor` | `UIColor` | Card title | `cometchatTextBubbleLinkPreviewTitleColor` | +| `subtitleTextColor` | `UIColor` | Card description | `cometchatTextBubbleLinkPreviewDescriptionColor` | +| `linkTextColor` | `UIColor` | URL caption beneath the card — not the tappable link | `cometchatTextBubbleLinkPreviewLinkColor` | + + + +`linkTextColor` and `textLinkColor` are easy to confuse. `linkTextColor` styles the static URL caption printed under the preview card; `textLinkColor` styles the tappable link in the message text. + + + --- ## Action Bubble