DOCSEARCHbyAlgolia
Submit Docs

Chat UI Kit React

repository·master·Indexed 23 days ago

https://github.com/chatscope/chat-ui-kit-react

An open-source React component library for building web-based chat interfaces. It provides a comprehensive toolkit to handle complex UI challenges such as sticky scrollbars, responsiveness, and contenteditable. The library includes specialized components like MainContainer, ChatContainer, MessageList, ConversationList, and a variety of chat-specific buttons, with TypeScript typings supported since version 1.9.3.

Tokens
5.4K
Snippets
2
Records
47
Agent score
83%

What's inside @chatscope/chat-ui-kit-react

  2. Install @chatscope/chat-ui-kit-react and styles

    master

    To use the Chat UI Kit, you must install both the component library and the associated styles. You can use either npm or yarn.

    # Install the component library
npm install @chatscope/chat-ui-kit-react
# or
yarn add @chatscope/chat-ui-kit-react

# Install the styles
npm install @chatscope/chat-ui-kit-styles
# or
yarn add @chatscope/chat-ui-kit-styles

  3. Customize Conversation with sub-components

    master

    The Conversation component uses a composition pattern. You can customize its internal structure by passing specific sub-components as children. The allowed children are:

    • Avatar or AvatarGroup: To display the contact's profile picture.
    • Conversation.Content: To explicitly define the text area (name, last sender, info).
    • Conversation.Operations: To provide action buttons (like menu or settings) for the conversation.

    Note: If you provide name, lastSenderName, or info as props, the component automatically renders a Conversation.Content internally.

  4. Quickstart: Build a basic chat interface

    master

    You can build a functional chat GUI by importing components from @chatscope/chat-ui-kit-react and the default CSS from @chatscope/chat-ui-kit-styles.

    Note: The container must have a defined height (e.g., via height: 500px) for the chat components to render correctly.

    import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;

  5. Use the ConversationList component

    master

    The ConversationList component is used to display a list of conversations. It manages scrolling behavior and provides hooks for infinite scrolling.

    Key Props:

    • children: An array of components. Only <Conversation /> components are allowed as children.
    • scrollable: A boolean to enable or disable the custom scrollbar. If false or if loading is true, it renders a standard div instead of a PerfectScrollbar.
    • loading: A boolean indicating if the list is currently loading. When true, an Overlay with a Loader is displayed.
    • loadingMore: A boolean indicating if more items are being loaded (e.g., during infinite scroll). When true, a Loader is displayed at the bottom of the list.
    • onYReachEnd: A callback function triggered when the vertical scroll reaches the bottom. This is the primary mechanism for implementing infinite scrolling.
    • className: A string for applying additional CSS classes.

  9. Use the ExpansionPanel component

    master

    The ExpansionPanel component is used to create collapsible content sections. It supports both uncontrolled and controlled modes for managing its open/closed state.

    Uncontrolled Mode

    In uncontrolled mode, the component manages its own state. You can set the initial state using the open prop.

    Controlled Mode

    In controlled mode, you manage the state externally by passing the isOpened prop and handling state changes via the onChange callback. When isOpened is provided as a boolean, the component will rely on this prop for its visual state.

    Props

    PropTypeDefaultDescription
    childrennodeundefinedThe primary content displayed inside the panel when it is open.
    titlestring""The text displayed in the panel header.
    openbooleanfalseThe initial open state (used in uncontrolled mode).
    isOpenedbooleanundefinedThe current open state (used in controlled mode).
    onChangefuncundefinedCallback triggered when the panel is toggled. In uncontrolled mode, it receives (isOpen, event). In controlled mode, it receives (event).
    classNamestringundefinedAdditional CSS classes for the panel container.

  10. Use the Status component

    master

    The Status component is used to display a user's presence or availability indicator (a status bullet) alongside an optional name or content. It supports different sizes and status types via enums.

    Props

    PropTypeDefaultDescription
    statusStatusEnumRequiredThe status type (e.g., online, offline, etc.).
    sizeSizeEnum'md'The visual size of the status indicator.
    nameReactNodeA specific name to display next to the bullet.
    childrenReactNodePrimary content to display if name is not provided.
    selectedbooleanIf true, applies a selected state to the component.
    classNamestringAdditional CSS classes for custom styling.
    ...restanyAny other standard HTML attributes.

  11. Use the ConversationContent component

    master

    The ConversationContent component is used to display details about a conversation, such as the contact name, the last sender's name, and informational text (like the last message snippet).

    It has two modes of operation:

    1. Custom Content Mode: If you provide children, the component renders those children directly, ignoring the name, lastSenderName, and info props.
    2. Default Mode: If no children are provided, it renders a structured header containing the name, lastSenderName, and info content.

    Props

    • name (node): The primary name to display (e.g., the contact's name).
    • lastSenderName (node): The name of the person who last sent a message. If passed as a string, it is automatically followed by a colon (:).
    • info (node): Additional informational text, typically used for the last message snippet.
    • children (node): Custom content to render inside the conversation container. If present, the default header is not rendered.
    • className (string): Additional CSS classes to apply to the component container.