docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shreeyajoshi-cometchat wants to merge 1 commit into
base:main
Choose a base branch
from
Open

docs(ui-kit/ios): document per-entity link, phone and email colors #484

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 103 additions & 1 deletion ui-kit/ios/message-bubble-styling.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning on line 40 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40 

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning on line 41 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41 

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning on line 42 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42 

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning on line 43 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43 

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning on line 44 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44 

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
<img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning on line 154 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154 

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning on line 160 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160 

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning on line 276 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276 

Did you really mean 'fullscreen'?

<Frame>
<img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning on line 318 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318 

Did you really mean 'seekable'?

<Frame>
<img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning on line 321 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321 

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
<img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning on line 461 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461 

Did you really mean 'bubbleStyle'?

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

Check warning on line 467 in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation

Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467 

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
docs(ui-kit/ios): document per-entity link, phone and email colors#484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

shreeyajoshi-cometchat
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


docs(ui-kit/ios): document per-entity link, phone and email colors
#484
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


104 changes: 103 additions & 1 deletion
ui-kit/ios/message-bubble-styling.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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."
---

<Accordion title="AI Integration Quick Reference">
Expand All@@ -14,6 +14,7 @@
| 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` |

</Accordion>

Expand All@@ -36,11 +37,11 @@

| Property | Description |
|----------|-------------|
| **backgroundColor** | The background color for message bubbles |

Check warning
on line 40
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L40

Did you really mean 'backgroundColor'?
| **backgroundDrawable** | A background image for message bubbles |

Check warning
on line 41
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L41

Did you really mean 'backgroundDrawable'?
| **borderWidth** | The width of the border for message bubbles |

Check warning
on line 42
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L42

Did you really mean 'borderWidth'?
| **borderColor** | The color of the border for message bubbles |

Check warning
on line 43
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L43

Did you really mean 'borderColor'?
| **cornerRadius** | The corner radius for message bubbles |

Check warning
on line 44
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L44

Did you really mean 'cornerRadius'?

### Specific Message Type Styles

Expand DownExpand Up@@ -119,6 +120,54 @@
 <img src="/images/926a9be6-cG7iUgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDAtLNXwtikmSnAAAAAElFTkSuQmCC.png" />
</Frame>

### 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.

<Tabs>
<Tab title="Swift">
```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")
```
</Tab>
</Tabs>

To scope the colors to a single screen instead, assign a style to the component:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 154
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L154

Did you really mean 'bubbleStyle'?

bubbleStyle.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
bubbleStyle.incoming.textBubbleStyle.textPhoneNumberColor = UIColor(hex: "#0B7B69")
bubbleStyle.incoming.textBubbleStyle.textEmailColor = UIColor(hex: "#7A5AF8")

messageList.messageBubbleStyle = bubbleStyle

Check warning
on line 160
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L160

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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).

</Note>

---

## Image Bubble
Expand DownExpand Up@@ -224,7 +273,7 @@

## Media Grid Bubble

Media grid bubbles render messages that carry **multiple image or video attachments** as a count-based grid (1, 2, 3, 4, or 5+ tiles). When there are more items than visible tiles, the last tile shows a "+N" overflow badge; video tiles carry a play badge and duration pill. Tapping any tile opens the fullscreen media viewer with swipe navigation, pinch-to-zoom, inline video playback, per-photo download, and share.

Check warning
on line 276
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L276

Did you really mean 'fullscreen'?

<Frame>
 <img src="/images/ios_imagesbubble.png" alt="Media grid bubbles rendering multiple image attachments as a 2x2 grid with a +4 overflow badge on the last tile, shown for both incoming and outgoing messages" />
Expand DownExpand Up@@ -266,10 +315,10 @@

## Audio Files Bubble

Audio files bubbles render messages carrying **audio file attachments** — one playback row per file, with a play/pause button, a seekable progress slider, the duration, the file name, and a download control. Only one row plays at a time.

Check warning
on line 318
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L318

Did you really mean 'seekable'?

<Frame>
 <img src="/images/ios_audiobubble.png" alt="Audio files bubble stacking multiple audio playback rows, each with a play button, seekable progress slider, duration and file name, plus a Show 2 more toggle, shown for both incoming and outgoing messages" />

Check warning
on line 321
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L321

Did you really mean 'seekable'?
</Frame>

<Note>
Expand DownExpand Up@@ -389,6 +438,59 @@
 <img src="/images/ec04184e-link_bubble_style-3a858825ea1ff5ccfb52e17d9b92d676.png" />
</Frame>

### 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:

<Tabs>
<Tab title="Swift">
```swift lines
// Applies to text bubbles AND to messages that render a link preview
CometChatMessageBubble.style.incoming.textBubbleStyle.textLinkColor = UIColor(hex: "#F76808")
```
</Tab>
</Tabs>

A color set explicitly on `linkPreviewBubbleStyle` always wins over the inherited value, which lets preview messages differ:

<Tabs>
<Tab title="Swift">
```swift lines
var bubbleStyle = CometChatMessageBubble.style

Check warning
on line 461
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L461

Did you really mean 'bubbleStyle'?

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

Check warning
on line 467
in ui-kit/ios/message-bubble-styling.mdx

View check run for this annotation
Mintlify/ Mintlify Validation (cometchat-22654f5b) - vale-spellcheck

ui-kit/ios/message-bubble-styling.mdx#L467

Did you really mean 'bubbleStyle'?
```
</Tab>
</Tabs>

<Note>

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.

</Note>

#### 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` |

<Note>

`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.

</Note>

---

## Action Bubble
Expand Down