@cometchat/skills 4.4.1 → 5.0.0

package/skills/cometchat-flutter-v6-messages/SKILL.md

@@ -1,384 +0,0 @@
----
-name: cometchat-flutter-v6-messages
-description: >
-  Use when implementing the messages screen with CometChat Flutter UIKit v6. Covers
-  CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader, MessageListBloc,
-  MessageComposerBloc, SliverSpacing, keyboard-aware spacing, rich text toolbar,
-  CometChatTextBubble, CometChatImageBubble, CometChatVideoBubble, CometChatAudioBubble,
-  CometChatFileBubble, CometChatMessageBubble, bubble factories, message templates,
-  send message, edit message, delete message, reply, thread, reactions, receipts,
-  typing indicators, mentions, markdown formatting, text formatters, scroll to bottom,
-  unread messages, mark as read, goToMessageId, message options, swipe to reply,
-  smart replies, conversation starters, or resizeToAvoidBottomInset. Also use when
-  the user asks about building a chat screen, message input, or message display.
-license: "MIT"
-compatibility: "cometchat_chat_uikit ^6.0.1; flutter_bloc ^8.1.0"
-metadata:
-  author: "CometChat"
-  version: "3.0.0"
-  tags: "cometchat flutter messages composer header bubbles keyboard rich-text"
----
-
-> **Ground truth:** `cometchat_chat_uikit: ^6.0` — pub-cache source + `ui-kit/flutter`. **Official docs:** https://www.cometchat.com/docs/ui-kit/flutter/overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.
-
-# CometChat Flutter UIKit — Messages
-
-The messages screen is composed of three components: `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
-
-## Complete Messages Screen
-
-```dart
-final colorPalette = CometChatThemeHelper.getColorPalette(context);
-Scaffold(
-  resizeToAvoidBottomInset: true, // matches sample app; composer clamps to viewInsets (ENG-34434)
-  appBar: CometChatMessageHeader(
-    user: user,
-    group: group,
-    onBack: () => Navigator.pop(context),
-  ),
-  body: SafeArea(
-    top: false, // Header is the appBar — top inset already handled; keep bottom inset
-    child: Container(
-      color: colorPalette.background3,
-      child: Column(
-        children: [
-          Expanded(
-            child: CometChatMessageList(
-              user: user,
-              group: group,
-              textFormatters: [
-                CometChatMentionsFormatter(user: user, group: group),
-                MarkdownTextFormatter(),
-                CometChatUrlFormatter(),
-                CometChatPhoneNumberFormatter(),
-                CometChatEmailFormatter(),
-              ],
-            ),
-          ),
-          CometChatMessageComposer(
-            user: user,
-            group: group,
-            textFormatters: [
-              CometChatMentionsFormatter(user: user, group: group),
-              MarkdownTextFormatter(),
-              CometChatUrlFormatter(),
-              CometChatPhoneNumberFormatter(),
-              CometChatEmailFormatter(),
-            ],
-          ),
-        ],
-      ),
-    ),
-  ),
-)
-```
-
-## CometChatMessageList
-
-Displays messages with `SliverAnimatedList`, O(1) lookups, and keyboard-aware spacing.
-
-### Key Props
-
-| Prop | Type | Purpose |
-|------|------|---------|
-| `user` / `group` | `User?` / `Group?` | Target conversation (one required) |
-| `goToMessageId` | `int?` | Jump to specific message on load |
-| `startFromUnreadMessages` | `bool` | Start from unread position |
-| `hideDeletedMessages` | `bool` | Hide deleted message placeholders |
-| `disableReceipts` | `bool` | Hide read/delivered receipts |
-| `disableReactions` | `bool` | Hide reaction bar |
-| `enableSwipeToReply` | `bool` | Swipe gesture for reply |
-| `hideDateSeparator` | `bool` | Hide date headers |
-| `textFormatters` | `List<CometChatTextFormatter>` | Formatters for message text |
-| `onThreadRepliesClick` | `Function(BaseMessage, BuildContext, {template})` | Thread navigation callback |
-| `messagesRequestBuilder` | `MessagesRequestBuilder?` | Customize the underlying message query (see below) |
-
-### MessagesRequestBuilder — customizing the message query
-
-`CometChatMessageList` accepts a `messagesRequestBuilder` prop that lets you customize the underlying SDK request — page size, filters, search, etc. The class lives in the Chat SDK (`package:cometchat_sdk/cometchat_sdk.dart`) and exposes 30+ fluent setters. Common setters:
-
-| Setter | Purpose |
-|--------|---------|
-| `setLimit(int)` | Page size (default 30, max 100) |
-| `setTypes(List<String>)` | Restrict to message types (e.g. `['text', 'image']`) |
-| `setCategories(List<String>)` | Restrict to categories (e.g. `['message', 'custom']`) |
-| `setHideMessagesFromBlockedUsers(bool)` | Drop messages from blocked users |
-| `setSearchKeyword(String)` | Server-side keyword search |
-| `setTags(List<String>)` | Filter by message tags |
-| `setHasAttachments(bool)` | Only messages with file attachments |
-| `setHasLinks(bool)` | Only messages containing links |
-| `setHideReplies(bool)` | Exclude threaded replies from the main list |
-| `setHideDeleted(bool)` | Exclude deleted messages |
-| `setHideQuotedMessages(bool)` | Exclude quoted-reply messages |
-| `setUpdatedAfter(DateTime)` | Only messages updated after this DateTime |
-| `setUpdatesOnly(bool)` | Return only updates, not new messages |
-| `setParentMessageId(int)` | Fetch a thread's replies |
-| `setMentionedUIDs(List<String>)` | Messages mentioning specific users |
-| `setHasMentions(bool)` | Only messages with any mention |
-
-Example — limit to 30, hide messages from blocked users, restrict to text + image:
-
-```dart
-CometChatMessageList(
-  user: user,
-  messagesRequestBuilder: MessagesRequestBuilder()
-    ..setLimit(30)
-    ..setHideMessagesFromBlockedUsers(true)
-    ..setTypes(['text', 'image']),
-)
-```
-
-### MessageListBloc Events
-
-| Event | Purpose |
-|-------|---------|
-| `LoadMessages(conversationWith, conversationType)` | Initial load |
-| `LoadOlderMessages` | Scroll up pagination |
-| `LoadNewerMessages` | Scroll down pagination |
-| `MessageReceived(message)` | Real-time incoming message |
-| `MessageEdited(message)` | Real-time edit |
-| `MessageDeleted(message)` | Real-time delete |
-| `JumpToMessage(messageId)` | Scroll to specific message |
-| `MarkMessageAsRead(message)` | Mark as read |
-| `MarkMessageAsUnread(message)` | Mark as unread |
-
-### MessageListState
-
-```dart
-MessageListState(
-  status: MessageListStatus.loaded,  // initial, loading, loaded, empty, error
-  messages: [...],
-  isLoadingOlder: false,
-  isLoadingNewer: false,
-  hasMoreOlder: true,
-  hasMoreNewer: false,
-  unreadCount: 5,
-  unreadMessageAnchor: message,
-)
-```
-
-## CometChatMessageComposer
-
-Rich text input with formatting toolbar, attachments, mentions, and audio recording.
-
-### Key Props
-
-| Prop | Type | Purpose |
-|------|------|---------|
-| `user` / `group` | `User?` / `Group?` | Target conversation |
-| `disableTypingEvents` | `bool` | Stop sending typing indicators |
-| `hideVoiceRecordingButton` | `bool` | Hide audio recorder |
-| `hideSendButton` | `bool` | Hide send button |
-| `hideAttachmentButton` | `bool` | Hide attachment picker |
-| `hideStickersButton` | `bool` | Hide sticker panel |
-| `disableMentions` | `bool` | Disable @mentions |
-| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding |
-| `textFormatters` | `List<CometChatTextFormatter>` | Text formatters |
-
-### Rich Text Formatting
-
-The composer uses a WYSIWYG system (not the clean architecture module):
-- `RichTextEditingController` — span tracking, markdown rendering, format application
-- `SegmentComposerController` — multi-segment (normal text + code blocks)
-- Toolbar buttons dispatch through `cometchat_message_composer.dart`
-
-### buildWhen Optimization
-
-The composer uses `buildWhen` to prevent rebuilds during keyboard animation:
-```dart
-BlocConsumer<MessageComposerBloc, MessageComposerState>(
-  buildWhen: (previous, current) =>
-      previous.isEditMode != current.isEditMode ||
-      previous.isReplyMode != current.isReplyMode ||
-      previous.isRecordingMode != current.isRecordingMode,
-  // ...
-)
-```
-
-The actual filter in `cometchat_message_composer.dart` also covers `editMessage` / `replyMessage` target changes and panel transitions (`headerPanel`, `footerPanel`, `previewPanel`, `lockedBottomPadding`, `isActiveStreaming`). The snippet above shows the three primary mode flags for brevity — if you subclass or wrap the composer, copy the full predicate from `cometchat_message_composer.dart` so edit/reply targets and panels also trigger rebuilds.
-
-## CometChatMessageHeader
-
-Shows user/group info, typing indicators, and optional call buttons.
-
-```dart
-CometChatMessageHeader(
-  user: user,
-  group: group,
-  onBack: () => Navigator.pop(context),
-  hideVideoCallButton: false,
-  hideVoiceCallButton: false,
-  usersStatusVisibility: true,
-  trailingView: (user, group, ctx) => [
-    IconButton(icon: Icon(Icons.info_outline), onPressed: () { /* ... */ }),
-  ],
-  messageHeaderStyle: CometChatMessageHeaderStyle(
-    backgroundColor: colorPalette.background1,
-  ),
-)
-```
-
-## Keyboard-Aware Spacing
-
-The composer coordinates with the keyboard internally — it tracks the native keyboard height and **clamps it to Flutter's `viewInsets`** (kit fix ENG-34434) so it does NOT add its own inset on top of the Scaffold's. The list's spacing then reacts to the same `viewInsets`:
-- At bottom: keyboard pushes list up (normal behavior)
-- Scrolled up: list stays still, only composer moves
-- Safe area: only added when keyboard is closed
-
-Because of that clamp, **set `resizeToAvoidBottomInset: true`** (or omit it — `true` is the Scaffold default), which is exactly what the kit's official sample app does (`messages_screen.dart` omits it → defaults `true`; `thread_screen.dart` sets it `true` explicitly).
-
-> Version note: on kits **before ENG-34434 (pre-6.0.1)** the composer did NOT clamp, so `true` double-compensated and `false` was the workaround. On `^6.0.1` (what this skill targets) `true` is correct. If you ever see a double keyboard gap, you're on an older kit — upgrade, or set `false` as a stopgap.
-
-## Message Bubbles
-
-| Type | Widget | Key Features |
-|------|--------|--------------|
-| Text | `CometChatTextBubble` | Rich text, links, markdown |
-| Image | `CometChatImageBubble` | Local/network, GIF, HEIC fallback |
-| Video | `CometChatVideoBubble` | Thumbnail, play overlay |
-| Audio | `CometChatAudioBubble` | Waveform, play/pause, duration |
-| File | `CometChatFileBubble` | Type icon, download, size |
-| Deleted | `CometChatDeletedBubble` | "Message was deleted" |
-
-All bubble widgets accept optional `colorPalette`, `spacing`, `typography` params for the hybrid theme caching pattern.
-
-## Sending Messages
-
-```dart
-// Text message
-await CometChatUIKit.sendTextMessage(
-  TextMessage(
-    text: 'Hello!',
-    receiverUid: user.uid,
-    receiverType: ReceiverTypeConstants.user,
-  ),
-);
-
-// Media message
-await CometChatUIKit.sendMediaMessage(
-  MediaMessage(
-    file: '/path/to/image.jpg',
-    type: MessageTypeConstants.image,
-    receiverUid: user.uid,
-    receiverType: ReceiverTypeConstants.user,
-  ),
-);
-
-// Custom message
-await CometChatUIKit.sendCustomMessage(
-  CustomMessage(
-    type: 'location',
-    receiverUid: user.uid,
-    receiverType: ReceiverTypeConstants.user,
-    customData: {'latitude': 37.7749, 'longitude': -122.4194},
-  ),
-);
-```
-
-## Thread Replies
-
-```dart
-CometChatMessageList(
-  onThreadRepliesClick: (message, ctx, {template}) {
-    final colorPalette = CometChatThemeHelper.getColorPalette(context);
-    Navigator.push(context, MaterialPageRoute(
-      builder: (_) => Scaffold(
-        resizeToAvoidBottomInset: true,
-        body: SafeArea(
-          child: Container(
-            color: colorPalette.background3,
-            child: Column(
-              children: [
-                CometChatThreadedHeader(
-                  parentMessage: message,
-                  loggedInUser: CometChatUIKit.loggedInUser!,
-                ),
-                Expanded(child: CometChatMessageList(
-                  user: user, group: group,
-                  parentMessageId: message.id,
-                  // Scope the list to this thread only: exclude the parent and
-                  // request just the replies for message.id.
-                  withParent: false,
-                  messagesRequestBuilder: MessagesRequestBuilder()
-                    ..parentMessageId = message.id,
-                )),
-                CometChatMessageComposer(
-                  user: user, group: group,
-                  parentMessageId: message.id,
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    ));
-  },
-)
-```
-
-## Gotchas
-
-- Use `resizeToAvoidBottomInset: true` (or omit — it's the default), matching the kit sample app. On `^6.0.1` the composer clamps the keyboard height to Flutter's `viewInsets` (ENG-34434), so `true` does NOT double-compensate. Only on pre-6.0.1 kits did `true` cause a double keyboard gap (where `false` was the workaround) — if you see that gap, upgrade the kit.
-- `textFormatters` should be the same list for both `CometChatMessageList` and `CometChatMessageComposer` to ensure consistent rendering.
-- The rich text system has 3 implementations but only WYSIWYG is active at runtime. Bug fixes go in `rich_text_editing_controller.dart`, not the clean architecture module.
-- `goToMessageId` loads messages around that ID, not from the beginning. The list may not have older messages loaded.
-- Keep mutable `_user`/`_group` copies in your State class and update them from SDK listeners. Passing `widget.user`/`widget.group` directly means stale data after block/kick events.
-- The CometChat SDK has an `Action` class (a `BaseMessage` subclass used in group events like kick/ban/scope-change). It conflicts with Flutter's built-in `Action` widget. If your messages screen uses SDK listener mixins that reference `Action`, use an import alias:
-  ```dart
-  import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as cc;
-  // Then use: cc.Action instead of Action
-  ```
-  This is especially common when mixing `GroupListener` into a messages screen State class.
-
-## Anti-Patterns
-
-```dart
-// ❌ WRONG — list not wrapped in Expanded (unbounded height → won't scroll / overflow)
-Scaffold(
-  body: Column(children: [
-    CometChatMessageList(user: user),          // needs Expanded
-    CometChatMessageComposer(user: user),
-  ]),
-)
-
-// ✅ CORRECT — both messages and thread screens (matches the kit sample app)
-Scaffold(
-  resizeToAvoidBottomInset: true, // (or omit — true is the default; composer clamps to viewInsets, ENG-34434)
-  body: Column(children: [
-    Expanded(child: CometChatMessageList(user: user)),
-    CometChatMessageComposer(user: user),
-  ]),
-)
-```
-
-```dart
-// ❌ WRONG — passing immutable widget params to UIKit components
-CometChatMessageList(user: widget.user) // Stale after block/unblock
-
-// ✅ CORRECT — mutable state copy
-late User? _user = widget.user;
-// Update _user from SDK listeners
-CometChatMessageList(user: _user)
-```
-
-```dart
-// ❌ WRONG — different formatters for list and composer
-CometChatMessageList(textFormatters: [MarkdownTextFormatter()])
-CometChatMessageComposer(textFormatters: []) // Inconsistent rendering
-
-// ✅ CORRECT — same formatters
-final formatters = [CometChatMentionsFormatter(user: user), MarkdownTextFormatter()];
-CometChatMessageList(textFormatters: formatters)
-CometChatMessageComposer(textFormatters: formatters)
-```
-
-## Checklist
-
-- [ ] Scaffold has `resizeToAvoidBottomInset: true` (or omitted — default; matches the sample app)
-- [ ] Both list and composer have matching `textFormatters`
-- [ ] Mutable `_user`/`_group` state copies, not `widget.user`/`widget.group`
-- [ ] `onThreadRepliesClick` navigates to thread screen with `parentMessageId`
-- [ ] Thread screen Scaffold also uses `resizeToAvoidBottomInset: true` (same as messages screen)
-- [ ] SDK listeners update `_user`/`_group` for block/kick/scope changes
-- [ ] Colors from `CometChatThemeHelper`, cached in `didChangeDependencies()`
-- [ ] If using SDK listener mixins with `Action`, import UIKit `as cc` to avoid Flutter name conflict

package/skills/cometchat-flutter-v6-theming/SKILL.md

@@ -1,293 +0,0 @@
----
-name: cometchat-flutter-v6-theming
-description: >
-  Use when customizing the visual appearance of CometChat Flutter UIKit v6 components.
-  Triggers on mentions of CometChatThemeHelper, CometChatColorPalette, CometChatSpacing,
-  CometChatTypography, CometChatThemeMode, dark mode, light mode, theme, colors, styling,
-  custom theme, Style class, merge(), getColorPalette, getSpacing, getTypography,
-  ThemeExtension, primary color, neutral colors, background colors, text colors, icon colors,
-  button colors, border colors, or any CometChat{Component}Style class. Also use when the
-  user asks about changing colors, fonts, spacing, or appearance of chat components.
-license: "MIT"
-compatibility: "cometchat_chat_uikit ^6.0.1; flutter >=2.5.0"
-metadata:
-  author: "CometChat"
-  version: "3.0.0"
-  tags: "cometchat flutter theme colors typography spacing dark-mode styling"
----
-
-> **Ground truth:** `cometchat_chat_uikit: ^6.0` — pub-cache source + `ui-kit/flutter`. **Official docs:** https://www.cometchat.com/docs/ui-kit/flutter/overview · **Docs MCP:** `claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp` (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.
-
-# CometChat Flutter UIKit — Theming & Styling
-
-How to customize the visual appearance of all CometChat components.
-
-## Theme System Architecture
-
-Three layers, resolved via Flutter's `ThemeExtension` system:
-
-1. `CometChatColorPalette` — all colors (primary, neutral, alert, background, text, icon, button, border)
-2. `CometChatSpacing` — spacing tokens
-3. `CometChatTypography` — text styles (heading1-4, body, caption1-2, button, link, title)
-
-Access via static helpers:
-```dart
-final colors = CometChatThemeHelper.getColorPalette(context);
-final spacing = CometChatThemeHelper.getSpacing(context);
-final typography = CometChatThemeHelper.getTypography(context);
-```
-
-## Applying a Custom Theme
-
-Register `CometChatColorPalette` as a `ThemeExtension` on your `ThemeData`:
-
-```dart
-MaterialApp(
-  theme: ThemeData(
-    brightness: Brightness.light,
-    extensions: [
-      CometChatColorPalette(
-        primary: const Color(0xFF6852D6),
-        background1: Colors.white,
-        textPrimary: const Color(0xFF141414),
-        // ... override only what you need, rest falls back to defaults
-      ),
-    ],
-  ),
-  darkTheme: ThemeData(
-    brightness: Brightness.dark,
-    extensions: [
-      CometChatColorPalette(
-        primary: const Color(0xFF604CC3),
-        background1: const Color(0xFF141414),
-        textPrimary: Colors.white,
-      ),
-    ],
-  ),
-)
-```
-
-Note: `CometChatColorPalette` does NOT have a `const` constructor (it has mutable default fields for `white`, `black`, `transparent`). Don't try `const CometChatColorPalette(...)` — it won't compile.
-
-## Dark Mode
-
-`CometChatThemeMode` controls how brightness is resolved:
-
-```dart
-// Follow system setting (default)
-CometChatThemeMode.mode = ThemeMode.system;
-
-// Force light
-CometChatThemeMode.mode = ThemeMode.light;
-
-// Force dark
-CometChatThemeMode.mode = ThemeMode.dark;
-```
-
-The helper reads brightness via:
-```dart
-// ThemeMode.system → MediaQuery.of(context).platformBrightness
-// ThemeMode.light → Brightness.light
-// ThemeMode.dark → Brightness.dark
-```
-
-## Color Palette Tokens
-
-| Category | Tokens | Default Source |
-|----------|--------|---------------|
-| Primary | `primary` | `#6852D6` light / `#604CC3` dark |
-| Extended Primary | `extendedPrimary50`–`900` | Auto-generated from primary via blend |
-| Neutral | `neutral50`–`900` | 10-shade grayscale |
-| Alert | `info`, `warning`, `error`, `success`, `error100` | Semantic colors |
-| Background | `background1`–`4` | Mapped from neutral shades |
-| Text | `textPrimary`, `textSecondary`, `textTertiary`, `textDisabled`, `textWhite`, `textHighlight` | Mapped from neutral/primary |
-| Icon | `iconPrimary`, `iconSecondary`, `iconTertiary`, `iconWhite`, `iconHighlight` | Mapped from neutral/primary |
-| Button | `buttonBackground`, `secondaryButtonBackground`, `buttonText`, `buttonIconColor`, `secondaryButtonText`, `secondaryButtonIcon` | Primary + neutral |
-| Border | `borderLight`, `borderDefault`, `borderDark`, `borderHighlight` | Neutral shades + primary |
-| Special | `white`, `black`, `messageSeen` | Fixed values |
-
-## Component Style Classes
-
-Every component has a `CometChat{Component}Style` class with a `merge()` method:
-
-```dart
-CometChatConversations(
-  conversationsStyle: CometChatConversationsStyle(
-    backgroundColor: colors.background1,
-    titleTextStyle: typography.heading3?.bold,
-  ),
-)
-
-CometChatMessageList(
-  style: CometChatMessageListStyle(
-    backgroundColor: colors.background3,
-  ),
-)
-```
-
-Style classes support `merge()` for combining defaults with overrides:
-```dart
-final baseStyle = CometChatConversationsStyle(backgroundColor: Colors.white);
-final override = CometChatConversationsStyle(titleTextStyle: myTitleStyle);
-final merged = baseStyle.merge(override); // backgroundColor + titleTextStyle
-```
-
-## Theme Caching (Performance-Critical)
-
-Cache theme in `didChangeDependencies()` — never in `build()`:
-
-> **Trade-off (vs the Flutter V5 theming skill, which forbids this flag):** the
-> `_themeInitialized` guard caches the palette once and skips re-reads on every
-> `didChangeDependencies()` (e.g. keyboard animations) — but it also means a
-> runtime **system light↔dark switch won't re-resolve** the cached palette. If
-> your app supports live theme switching, either drop the flag (re-read every
-> call, as V5 recommends) or also invalidate it from `didChangePlatformBrightness`.
-> The flag is the right default for apps with a fixed theme mode.
-
-```dart
-class _MyWidgetState extends State<MyWidget> {
-  late CometChatColorPalette _colorPalette;
-  bool _themeInitialized = false;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    if (!_themeInitialized) {
-      _colorPalette = CometChatThemeHelper.getColorPalette(context);
-      _themeInitialized = true;
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(color: _colorPalette.primary); // Cached, no lookup
-  }
-}
-```
-
-For child widgets that receive theme from parent (hybrid pattern):
-```dart
-class CometChatImageBubble extends StatefulWidget {
-  final CometChatColorPalette? colorPalette; // Optional — parent can pass cached value
-  // ...
-}
-
-class _CometChatImageBubbleState extends State<CometChatImageBubble> {
-  late CometChatColorPalette colorPalette;
-  bool _themeInitialized = false;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    if (!_themeInitialized) {
-      colorPalette = widget.colorPalette ?? CometChatThemeHelper.getColorPalette(context);
-      _themeInitialized = true;
-    }
-  }
-
-  @override
-  void didUpdateWidget(CometChatImageBubble oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (widget.colorPalette != oldWidget.colorPalette && widget.colorPalette != null) {
-      colorPalette = widget.colorPalette!;
-    }
-  }
-}
-```
-
-## Localization
-
-To translate the UI, switch the active language, or override individual strings, route to the dedicated **`cometchat-i18n`** skill — the canonical cross-family localization reference. Flutter has **no `CometChatLocalize` class**: localization is wired via the kit's `Translations` localization delegate on `MaterialApp` (drive the language through the app `Locale`). `cometchat-i18n` covers bundled languages, custom translations, RTL, and date/time formatting. Docs: https://www.cometchat.com/docs/ui-kit/flutter/localize
-
-## Sound Manager — custom notification & call sounds
-
-Sounds are a **behavioral** customization — driven by `SoundManager` (note: `SoundManager`, NOT `CometChatSoundManager`, and the stop method is `stop()`, NOT `pause()`). The UI Kit plays the built-in cues automatically; use this to override a cue with a custom asset.
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-// Play a default cue — Sound: incomingMessage | outgoingMessage
-//                       | incomingMessageFromOther | incomingCall | outgoingCall
-SoundManager().play(sound: Sound.incomingMessage);
-
-// Override with a custom asset
-SoundManager().play(sound: Sound.outgoingMessage, customSound: "assets/sound/my_ping.wav");
-
-// Stop whatever is playing
-SoundManager().stop();
-```
-
-> For the common case (muting/replacing message sounds), prefer the **widget-level** props instead of the manager: in V6 `CometChatConversations` exposes `disableSoundForMessages` and `customSoundForMessages`.
-
-## Gotchas
-
-- `CometChatColorPalette` is NOT const-constructible. It has mutable default fields (`white = Colors.white`, `black = Colors.black`, `transparent = Colors.transparent`). Writing `const CometChatColorPalette(...)` or `const [CometChatColorPalette()]` won't compile.
-- `CometChatThemeHelper.getColorPalette(context)` does `Theme.of(context).extension<CometChatColorPalette>()` internally — this is an InheritedWidget lookup. In `build()` during keyboard animation, this fires every frame causing 44-95ms build times.
-- Extended primary colors are auto-generated by blending `primary` with white (light) or black (dark). Override individual shades only if the auto-blend doesn't match your brand.
-- `CometChatThemeMode.mode` is a static field — changing it doesn't trigger rebuilds. You need to also change `ThemeData` brightness or call `setState` on the `MaterialApp`.
-- Style `merge()` is null-aware: only non-null fields from the override replace the base. This means you can't explicitly set a field to `null` via merge.
-
-## Anti-Patterns
-
-```dart
-// ❌ WRONG — hardcoded colors
-Container(color: Colors.purple)
-
-// ✅ CORRECT — use theme tokens
-Container(color: colorPalette.primary)
-```
-
-```dart
-// ❌ WRONG — theme lookup in build
-@override
-Widget build(BuildContext context) {
-  final colors = CometChatThemeHelper.getColorPalette(context);
-  return Text('Hi', style: TextStyle(color: colors.textPrimary));
-}
-
-// ❌ ALSO WRONG — theme lookup in a method called from build
-Widget _buildProfileMenu() {
-  final typography = CometChatThemeHelper.getTypography(context); // Still in build tree!
-  final spacing = CometChatThemeHelper.getSpacing(context);
-  // ...
-}
-
-// ✅ CORRECT — cached in didChangeDependencies
-late CometChatColorPalette _colors;
-late CometChatTypography _typography;
-late CometChatSpacing _spacing;
-bool _init = false;
-@override
-void didChangeDependencies() {
-  super.didChangeDependencies();
-  if (!_init) {
-    _colors = CometChatThemeHelper.getColorPalette(context);
-    _typography = CometChatThemeHelper.getTypography(context);
-    _spacing = CometChatThemeHelper.getSpacing(context);
-    _init = true;
-  }
-}
-@override
-Widget build(BuildContext context) {
-  return Text('Hi', style: TextStyle(color: _colors.textPrimary));
-}
-```
-
-```dart
-// ❌ WRONG — MediaQuery.of(context).size triggers full rebuild
-final size = MediaQuery.of(context).size;
-
-// ✅ CORRECT — only subscribes to size changes
-final size = MediaQuery.sizeOf(context);
-```
-
-## Checklist
-
-- [ ] Custom colors registered as `ThemeExtension` on `ThemeData`
-- [ ] Both `theme` and `darkTheme` configured if supporting dark mode
-- [ ] Theme values cached in `didChangeDependencies()`, not `build()`
-- [ ] No `CometChatThemeHelper.get*()` calls in any method invoked during `build()` (including helper methods like `_buildProfileMenu()`)
-- [ ] `_themeInitialized` flag prevents re-init during keyboard animation
-- [ ] No hardcoded colors — all from `CometChatColorPalette`
-- [ ] `MediaQuery.sizeOf(context)` used instead of `MediaQuery.of(context).size`
-- [ ] Style overrides use component's Style class, not inline styles