> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Chat

> Real-time chat interface designed for live streaming and events with reactions, mentions, and interactive messaging

<Info>
  **Key Benefit**: Enhance live streaming experiences with real-time chat functionality including messaging, reactions, mentions, and user interactions designed specifically for high-volume live events.
</Info>

## Feature Overview

This powerful UIKit is designed to seamlessly integrate live chat functionalities into your in-app livestreams, enhancing viewer engagement and interaction. Whether you're hosting gaming streams, sports events, or live Q\&A sessions, our UIKit equips you with everything you need to create an immersive chat experience.

<CardGroup cols={2}>
  <Card title="Live Messaging" icon="comments">
    **Real-Time Communication**

    * Send and receive text messages instantly
    * Edit or delete own messages
    * Flag inappropriate content for moderation
    * High-volume message handling
  </Card>

  <Card title="Interactive Features" icon="heart">
    **Enhanced Engagement**

    * Message reactions with customizable emojis
    * User mentions (@username or @all)
    * User profiles and role badges
    * Moderator identification
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Customizable Interface" icon="palette">
    **Brand-Aligned Design**

    * Customizable messaging components
    * Theme configuration options
    * Configurable message limits
    * Custom placeholder text
  </Card>

  <Card title="Live Event Optimization" icon="broadcast-tower">
    **Stream-Ready Features**

    * Channel information display
    * Member count tracking
    * Real-time message flow
    * Performance optimized for live events
  </Card>
</CardGroup>

## Implementation Guide

<Tabs>
  <Tab title="Complete Live Chat Page">
    **Full-featured live chat interface**

    The AmityLiveChatPage provides a complete live chat experience by integrating header, message list, and compose bar components.

    ### Required Parameters

    | Parameter   | Type   | Description                                 |
    | ----------- | ------ | ------------------------------------------- |
    | `channelId` | String | Unique identifier for the live chat channel |

    ### Features

    | Feature                   | Description                                  |
    | ------------------------- | -------------------------------------------- |
    | Live Chat Functionalities | A complete page with full live chat features |
    | Real-Time Updates         | Instant message delivery and display         |
    | Integrated Components     | Header, message list, and compose bar        |

    ### Customization Options

    | Config ID       | Config Key | Type | Description          |
    | --------------- | ---------- | ---- | -------------------- |
    | `live_chat/*/*` | `theme`    | Page | Customize page theme |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let page = AmityLiveChatPage(channelId: "live-channel-id")

      // To use this page from UIKit framework, you can also wrap it in AmitySwiftUIHostingController.
      let viewController = AmitySwiftUIHostingController(rootView: page)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeLiveChatPage(
          channelId: String
      ) {
          AmityLiveChatPage(
              channelId = channelId
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityLiveChatPage } from '@amityco/ui-kit';

      interface SampleLiveChatPageProps {
        channelId: Amity.Channel['channelId']
      }

      const SampleLiveChatPage = ({ channelId }: SampleLiveChatPageProps) => {
        // Passing channelId to the component
        return <AmityLiveChatPage channelId={channelId} />
      }

      export default SampleLiveChatPage;
      ```
    </CodeGroup>

    <Note>
      **Complete Integration**: The live chat page automatically handles real-time messaging, user interactions, and component coordination through the underlying SDK.
    </Note>
  </Tab>

  <Tab title="Header Component">
    **Channel information display**

    The AmityLiveChatHeader component provides a visual representation of channel profile information.

    ### Features

    | Feature              | Description                                              |
    | -------------------- | -------------------------------------------------------- |
    | Display Channel Info | Display channel's display name, avatar, and member count |
    | Live Updates         | Real-time member count and channel status updates        |

    ### Customization Options

    | Config ID                 | Config Key | Type      | Description               |
    | ------------------------- | ---------- | --------- | ------------------------- |
    | `live_chat/chat_header/*` | `theme`    | Component | Customize component theme |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let viewModel = AmityLiveChatPageViewModel(channelId: "live-channel-id")
      let header = AmityLiveChatHeader(viewModel: viewModel)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeLiveChatHeader(
          viewModel: AmityLiveChatPageViewModel
      ) {
          AmityLiveChatHeader(
              viewModel = viewModel
          )
      }
      ```

      ```typescript React theme={null}
      import React from 'react';
      import { AmityLiveChatHeader } from '@amityco/ui-kit';

      interface SampleLiveChatHeaderProps {
        channel: Amity.Channel
      }

      const SampleLiveChatHeader = ({ channel }: SampleLiveChatHeaderProps) => {
        // Passing channel model
        return <AmityLiveChatHeader channel={channel} />
      }

      export default SampleLiveChatHeader;
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Message List & Reactions">
    **Message display and interaction**

    Components for viewing messages and handling reactions in real-time.

    ### Message List Component

    The AmityLiveChatMessageList enables users to view and interact with messages in real-time.

    ### Message List Features

    | Feature                | Description                                                              |
    | ---------------------- | ------------------------------------------------------------------------ |
    | View Messages          | View past and real-time messages in the channel                          |
    | Interact with Messages | Trigger possible actions on each message such as copy, reply, and delete |
    | Real-Time Updates      | Instant message appearance and status updates                            |

    ### Message List Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let viewModel = AmityLiveChatPageViewModel(channelId: "live-channel-id")
      let messageList = AmityLiveChatMessageList(viewModel: viewModel)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeLiveChatMessageList(
          viewModel: AmityLiveChatPageViewModel
      ) {
          AmityLiveChatMessageList(
              viewModel = viewModel
          )
      }
      ```

      ```typescript React theme={null}
      import React, { useState } from 'react';
      import { AmityLiveChatMessageList } from '@amityco/ui-kit';

      interface SampleLiveChatMessageListProps {
        channel: Amity.Channel
      }

      const SampleLiveChatMessageList = ({ channel }: SampleLiveChatMessageListProps) => {
        // Passing channel model
        const [replyMessage, setReplyMessage] = useState<Amity.Message | undefined>(undefined);
        return (
          <AmityLiveChatMessageList
            channel={channel}                 // channel model
            replyMessage={setReplyMessage}    // function to set reply message
          />
        );
      }

      export default SampleLiveChatMessageList;
      ```
    </CodeGroup>

    ### Reaction List Component

    The AmityReactionList allows users to view and manage reactions on messages.

    ### Reaction List Features

    | Feature              | Description                                                 |
    | -------------------- | ----------------------------------------------------------- |
    | Reaction List        | Users can view the list of users who reacted on the message |
    | Add/Remove Reactions | Interactive reaction management                             |
    | User Profiles        | Display user information for each reaction                  |

    ### Reaction List Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      // Create reaction list component
      let reactionListView = AmityReactionList(referenceId: "message-id", referenceType: .message)
      let viewController = AmitySwiftUIHostingController(rootView: reactionListView)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun ReactionListSample(
          referenceType: AmityReactionReferenceType,
          referenceId: String
      ) {
          AmityReactionList(
              referenceType = referenceType,
              referenceId = referenceId
          )
      }
      ```

      ```typescript React theme={null}
      import { AmityReactionList } from '@amityco/ui-kit';
      import React from 'react';

      interface SampleAmityReactionListProps {
        referenceId: string;
        referenceType: Amity.ReactableType;
      }

      const SampleAmityReactionList = ({ referenceId, referenceType }: SampleAmityReactionListProps) => {
        return <AmityReactionList referenceId={referenceId} referenceType={referenceType} />;
      };

      export default SampleAmityReactionList;
      ```
    </CodeGroup>

    ### Customization Options

    | Config ID                  | Config Key | Type      | Description               |
    | -------------------------- | ---------- | --------- | ------------------------- |
    | `live_chat/message_list/*` | `theme`    | Component | Customize component theme |
  </Tab>

  <Tab title="Message Compose Bar">
    **Message creation and interaction**

    The AmityLiveChatMessageComposeBar provides full message creation functionality with mentions and reply capabilities.

    ### Features

    | Feature               | Description                                                 |
    | --------------------- | ----------------------------------------------------------- |
    | Create Message        | Enable message creation with text input                     |
    | Mention Other Members | Enable '@' character to trigger user selection for mentions |
    | Reply Functionality   | Reply to specific messages in the conversation              |
    | Character Limits      | Configurable message length restrictions                    |

    ### Customization Options

    | Config ID                         | Config Key         | Type      | Description                                |
    | --------------------------------- | ------------------ | --------- | ------------------------------------------ |
    | `live_chat/message_compose_bar/*` | `theme`            | Component | Customize component theme                  |
    | `live_chat/message_compose_bar/*` | `message_limit`    | Component | Define maximum character count             |
    | `live_chat/message_compose_bar/*` | `placeholder_text` | Component | Define placeholder text on the compose bar |

    ### Code Examples

    <CodeGroup>
      ```swift iOS theme={null}
      let viewModel = AmityLiveChatPageViewModel(channelId: "live-channel-id")
      let messageComposeBar = AmityLiveChatMessageComposeBar(viewModel: viewModel)
      ```

      ```kotlin Android theme={null}
      @Composable
      fun composeLiveChatMessageComposeBar(
          viewModel: AmityLiveChatPageViewModel
      ) {
          AmityLiveChatMessageComposeBar(
              viewModel = viewModel
          )
      }
      ```

      ```typescript React theme={null}
      import React, { useRef, useState } from 'react';
      import { AmityLiveChatMessageComposeBar } from '@amityco/ui-kit';

      interface SampleLiveChatMessageComposeBarProps {
        channel: Amity.Channel,
      }

      const SampleLiveChatPage = ({ channel }: SampleLiveChatMessageComposeBarProps) => {
        const mentionSuggestionRef = useRef<HTMLDivElement>(null);
        const [replyMessage, setReplyMessage] = useState<Amity.Message | undefined>();
        const [mentionMessage, setMentionMessage] = useState<Amity.Message | undefined>();

        return (
          <>
            <div ref={mentionSuggestionRef}>
              {/* User suggestion panel will render here */}
            </div>

            <AmityLiveChatMessageComposeBar
              channel={channel}
              suggestionRef={mentionSuggestionRef}
              composeAction={{
                replyMessage,
                mentionMessage,
                clearReplyMessage: () => setReplyMessage(undefined),
                clearMention: () => setMentionMessage(undefined),
              }}
            />
          </>
        )
      }

      export default SampleLiveChatPage;
      ```
    </CodeGroup>

    <Note>
      **Advanced Features**: The compose bar includes built-in user mention suggestions, reply management, and configurable message limits for optimal live chat performance.
    </Note>
  </Tab>
</Tabs>

## Component Management Strategies

<AccordionGroup>
  <Accordion title="Live Event Optimization" icon="broadcast-tower">
    **Optimizing for high-volume live streams**

    Plan your live chat implementation to handle high message volumes during popular streams. Consider message rate limiting, user role management, and moderation workflows to maintain a positive chat environment.
  </Accordion>

  <Accordion title="User Engagement Design" icon="users">
    **Maximizing viewer interaction**

    Design clear visual hierarchies for user roles, implement intuitive reaction systems, and provide easy access to mentions and replies to encourage active participation in live events.
  </Accordion>

  <Accordion title="Moderation Workflow Integration" icon="shield">
    **Maintaining safe live environments**

    Implement effective moderation tools, user reporting systems, and automated content filtering to ensure live chat remains engaging and appropriate for your audience.
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Performance Optimization" icon="gauge">
    **Ensuring smooth live chat experience**

    Configure appropriate message limits, implement efficient scrolling behaviors, and optimize component rendering for smooth performance during high-activity live events.
  </Accordion>

  <Accordion title="User Experience Design" icon="user-check">
    **Creating engaging live interactions**

    Design clear visual indicators for user roles, provide intuitive interaction patterns for reactions and mentions, and ensure the chat interface doesn't interfere with the main live content.
  </Accordion>

  <Accordion title="Customization Strategy" icon="palette">
    **Aligning with your brand and content**

    Customize themes, message limits, and placeholder text to match your streaming platform's design and tone. Consider your audience and content type when configuring interaction features.
  </Accordion>
</AccordionGroup>

## Related Features

<CardGroup cols={3}>
  <Card title="Group Chat" href="/uikit/components/chat/group-chat" icon="users">
    **Multi-User Conversations**
    Advanced group messaging features
  </Card>

  <Card title="Conversation Chat" href="/uikit/components/chat/conversation-chat" icon="comments">
    **Standard Messaging**
    Regular chat conversation components
  </Card>

  <Card title="Moderation Tools" href="/uikit/components/social/moderation" icon="shield">
    **Content Safety**
    Content moderation and user management
  </Card>
</CardGroup>

<Tip>
  **Implementation Strategy**: Start with AmityLiveChatPage for a complete live chat experience, then customize individual components (header, message list, compose bar) as needed to match your streaming platform's specific requirements and branding.
</Tip>