> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble Config Service

> API reference for the centralized message bubble view configuration service in CometChat Angular UIKit

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Purpose | App-wide message-bubble configuration with per-component overrides; priority logic decides which wins. |
  | Class | `MessageBubbleConfigService` |
  | Package | `@cometchat/chat-uikit-angular` v5.x |
  | Import | `import { MessageBubbleConfigService } from "@cometchat/chat-uikit-angular";` |
  | Injected with | `private svc = inject(MessageBubbleConfigService);` — `providedIn: 'root'`, no module wiring |
  | Key methods | `setBubbleView` · `setGlobalView` · `setGlobalViews` · `getView` · `setMessageTemplates` · `clearAll` … +2 |
  | Reactive state (signals) | `configVersion` — use directly in templates, no subscription |
  | Full API | See [Methods](#methods) |
  | Usage | See [Usage Examples](#usage-examples) |
  | Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
</Accordion>

`MessageBubbleConfigService` is the centralized Angular service for configuring how message bubbles are rendered across the CometChat Angular UIKit. It lets you customize individual sections of any message bubble — globally or per message type — without touching component templates.

The service is `providedIn: 'root'` (singleton by default). All `cometchat-message-list` instances share the same configuration unless you [scope the service](#scoping-for-multiple-instances).

## Import

```typescript theme={null}
import { MessageBubbleConfigService, BubblePart, BubblePartMap, MessageTypeKey } from '@cometchat/chat-uikit-angular';
```

## Priority Logic

When the message bubble resolves a view for a given message type and part, it follows this order:

1. Component `@Input` template (passed directly to `cometchat-message-bubble`)
2. Type-specific service view (`setBubbleView()`)
3. Global service view (`setGlobalView()` / `setGlobalViews()`)
4. Default rendering

## Types

### BubblePart

The sections of a message bubble that can be customized:

| Value | Description |
| - | - |
| `bubbleView` | The entire bubble wrapper |
| `contentView` | Main message content area |
| `bottomView` | Area below content (e.g., reactions) |
| `footerView` | Footer area of the bubble |
| `leadingView` | Leading area (e.g., avatar for incoming messages) |
| `headerView` | Header area (e.g., sender name) |
| `statusInfoView` | Status info area (e.g., timestamp, receipts) |
| `replyView` | Reply preview area for quoted messages |
| `threadView` | Thread indicator area for messages with replies |

### MessageTypeKey

A string in the format `{type}_{category}`. Standard keys:

| Key | Description |
| - | - |
| `text_message` | Text messages |
| `image_message` | Image messages |
| `video_message` | Video messages |
| `audio_message` | Audio messages |
| `file_message` | File messages |
| `delete_action` | Deleted messages |
| `groupMember_action` | Group member action messages |
| `audio_call` | Audio call messages |
| `video_call` | Video call messages |
| `extension_poll_custom` | Poll messages |
| `extension_sticker_custom` | Sticker messages |
| `extension_document_custom` | Document messages |
| `extension_whiteboard_custom` | Whiteboard messages |
| `meeting_custom` | Meeting messages |

For custom message types, use `{yourType}_custom` (e.g., `location_custom`).

### BubblePartMap

```typescript expandable theme={null}
interface BubblePartMap {
  bubbleView?: TemplateRef<any> | null;
  contentView?: TemplateRef<any> | null;
  bottomView?: TemplateRef<any> | null;
  footerView?: TemplateRef<any> | null;
  leadingView?: TemplateRef<any> | null;
  headerView?: TemplateRef<any> | null;
  statusInfoView?: TemplateRef<any> | null;
  replyView?: TemplateRef<any> | null;
  threadView?: TemplateRef<any> | null;
}
```

## Methods

### setBubbleView

Sets a custom view for one or more bubble parts for a specific message type. Merges with any existing configuration for that type.

```typescript theme={null}
setBubbleView(messageType: MessageTypeKey, partMap: BubblePartMap): void
```

```typescript theme={null}
this.bubbleConfig.setBubbleView('text_message', {
  contentView: this.customTextContent,
  footerView: this.customFooter,
});
```

### setGlobalView

Sets a single global view that applies to all message types as a fallback.

```typescript theme={null}
setGlobalView(part: BubblePart, view: TemplateRef<any> | null): void
```

```typescript theme={null}
// Apply a custom status info view to every message type
this.bubbleConfig.setGlobalView('statusInfoView', this.customStatusInfo);

// Clear a global view
this.bubbleConfig.setGlobalView('footerView', null);
```

### setGlobalViews

Sets multiple global views at once. Merges with existing global configuration.

```typescript theme={null}
setGlobalViews(partMap: BubblePartMap): void
```

```typescript theme={null}
this.bubbleConfig.setGlobalViews({
  footerView: this.customFooter,
  statusInfoView: this.customStatusInfo,
  leadingView: this.customAvatar,
});
```

### setMessageTemplates

Batch-configures multiple message types in a single call.

```typescript theme={null}
setMessageTemplates(templates: Record<MessageTypeKey, BubblePartMap>): void
```

```typescript theme={null}
this.bubbleConfig.setMessageTemplates({
  text_message: { contentView: this.textContent },
  image_message: { contentView: this.imageContent, headerView: this.imageHeader },
  video_message: { contentView: this.videoContent },
});
```

### getView

Retrieves the resolved view for a message type and bubble part, applying the priority chain.

```typescript theme={null}
getView(messageType: MessageTypeKey, part: BubblePart): TemplateRef<any> | null
```

Returns `null` if no view is configured (component uses default rendering).

### clearAll

Clears all type-specific and global configurations, resetting to default rendering.

```typescript theme={null}
clearAll(): void
```

### clearType

Clears configuration for a specific message type. Global views and other types are unaffected.

```typescript theme={null}
clearType(messageType: MessageTypeKey): void
```

### clearGlobalViews

Clears all global views. Type-specific configurations are unaffected.

```typescript theme={null}
clearGlobalViews(): void
```

## Reactive Properties

| Property | Type | Description |
| - | - | - |
| `configVersion` | `Signal<number>` | Increments on every configuration change. Read in templates to trigger re-renders. |
| `configChanged$` | `Subject<void>` | Emits on every configuration change. Subscribe in `OnPush` components to call `markForCheck()`. |

## Usage Examples

### Customize a Specific Message Type

```typescript expandable theme={null}
import { Component, ViewChild, TemplateRef, AfterViewInit, inject } from '@angular/core';
import { MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';

@Component({
  standalone: true,
  template: `
    <ng-template #customTextContent let-context>
      <div class="my-text-bubble">{{ context.message.getText() }}</div>
    </ng-template>

    <cometchat-message-list [user]="user"></cometchat-message-list>
  `
})
export class ChatComponent implements AfterViewInit {
  @ViewChild('customTextContent') customTextContent!: TemplateRef<any>;
  private bubbleConfig = inject(MessageBubbleConfigService);

  ngAfterViewInit(): void {
    this.bubbleConfig.setBubbleView('text_message', {
      contentView: this.customTextContent,
    });
  }
}
```

### Apply a Global View to All Message Types

```typescript expandable theme={null}
@Component({
  standalone: true,
  template: `
    <ng-template #customStatus let-context>
      <span class="my-status">{{ context.message.getSentAt() | date:'shortTime' }}</span>
    </ng-template>

    <cometchat-message-list [user]="user"></cometchat-message-list>
  `
})
export class ChatComponent implements AfterViewInit {
  @ViewChild('customStatus') customStatus!: TemplateRef<any>;
  private bubbleConfig = inject(MessageBubbleConfigService);

  ngAfterViewInit(): void {
    // Applies to every message type
    this.bubbleConfig.setGlobalView('statusInfoView', this.customStatus);
  }
}
```

### Batch Configure Multiple Types

```typescript theme={null}
ngAfterViewInit(): void {
  this.bubbleConfig.setMessageTemplates({
    text_message: { contentView: this.textContent },
    image_message: { contentView: this.imageContent },
    audio_message: { contentView: this.audioContent },
  });
}
```

### React to Configuration Changes (OnPush)

```typescript expandable theme={null}
import { ChangeDetectorRef, inject } from '@angular/core';
import { MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';

export class MyOnPushComponent {
  private bubbleConfig = inject(MessageBubbleConfigService);
  private cdr = inject(ChangeDetectorRef);

  ngOnInit(): void {
    this.bubbleConfig.configChanged$.subscribe(() => {
      this.cdr.markForCheck();
    });
  }
}
```

## Scoping for Multiple Instances

By default, `MessageBubbleConfigService` is a root-level singleton — all message lists share the same configuration. To give a specific component subtree its own independent configuration (e.g., a thread panel with different bubble styles), provide the service at the wrapper component level:

```typescript expandable theme={null}
import { Component, inject } from '@angular/core';
import { CometChatMessageListComponent, MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-thread-panel',
  standalone: true,
  imports: [CometChatMessageListComponent],
  providers: [MessageBubbleConfigService], // Creates a new instance for this subtree
  template: `<cometchat-message-list [user]="user" [parentMessageId]="parentMessageId"></cometchat-message-list>`
})
export class ThreadPanelComponent {
  // Injects the LOCAL instance, not the root singleton
  private bubbleConfig = inject(MessageBubbleConfigService);

  ngAfterViewInit(): void {
    this.bubbleConfig.setBubbleView('text_message', {
      contentView: this.threadTextTemplate,
    });
  }
}
```

The main chat panel continues to use the root singleton, unaffected by the thread panel's configuration.

<Note>
  Each `cometchat-message-list` provides its own `MessageListService` internally. The scoping technique above applies only to customization services like `MessageBubbleConfigService` and `FormatterConfigService`.
</Note>

## See Also

* [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) — The primary consumer of this service
* [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) — Individual bubble component
* [Custom Message Types](/ui-kit/angular/components/cometchat-message-bubble) — Register templates for custom message types
* [State Management Guide — Scoping](/ui-kit/angular/guides/state-management#scoping-customization-services-for-multiple-instances) — DI scoping patterns
* [API Reference Introduction](/ui-kit/angular/api-reference/introduction) — Overview of all services


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.