@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIChatView<M>

    A chat / messaging view composing UIAvatar, UIRichTextEditor, and a scrollable message list with a composer bar.

    Messages are supplied via the messages input. The component groups them by date and renders each with sender avatar, bubble, and timestamp. The current user's messages are right-aligned.

    The composer bar supports both plain-text (textarea) and rich-text (UIRichTextEditor) modes via the composerMode input.

    Custom message templates can be projected using a #messageTemplate content child.

    <ui-chat-view
      [messages]="messages"
      [currentUser]="me"
      (messageSend)="onSend($event)"
    />

    Rich-text composer

    <ui-chat-view
      [messages]="messages"
      [currentUser]="me"
      composerMode="rich-text"
      (messageSend)="onSend($event)"
    />

    Type Parameters

    • M = unknown

    Implements

    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    ariaLabel composerMode currentUser messages messageSend messageTemplate placeholder

    Methods

    ngAfterViewInit scrollToBottom

    Constructors

    • Type Parameters

      • M = unknown

      Returns UIChatView<M>

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the chat view.

    composerMode: InputSignal<ChatComposerMode> = ...

    Composer input mode.

    currentUser: InputSignal<ChatParticipant> = ...

    The current user (their messages are right-aligned).

    messages: InputSignal<readonly ChatMessage<M>[]> = ...

    The list of messages to display.

    messageSend: OutputEmitterRef<MessageSendEvent> = ...

    Emitted when the user sends a message.

    messageTemplate: Signal<TemplateRef<MessageTemplateContext<M>> | undefined> = ...

    Optional custom template for rendering individual messages. Receives a MessageTemplateContext.

    placeholder: InputSignal<string> = ...

    Placeholder text for the composer.

    Methods

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    • Scroll the message list to the bottom.

      Returns void

    Settings

    Member Visibility

    On This Page

    Basic usageRich-text composer
    Constructors
    Properties
    Methods