@licuido-ui/ui_chat-box v0.0.2

ChatBox

A chatbox is the user interface of a given chat application. A common use for chatboxes is a popup window on a business website through which the user interacts with a live agent or AI bot. Chatbox is an automated and very simple in use means of communicating with site visitors.

Author

• @author Hariharan hariharan@crayond.co

Link

Story Book Link ChatBox

PlayGround

Try it have a fun codeBox

npm i  @licuido-ui/ui_chat-box

Import component

import { ChatBox } from '@licuido-ui/ui_chat-box';

Usage

<ChatBox headerData={[]} chatData={[]} />

Image

Sample Code

<ChatBox
  chatId={'chat_1'}
  chatBoxRootStyle={{}}
  headerData={{
  chatName: 'New Group',
  profileImage: '',
  status: '2 Members',
  customComponent: null,
  functions: {
    onClickProfile: undefined,
    onClickMore: undefined,
    onClickMinimize: undefined,
    onClickClose: undefined,
  },
  styles: {
    headerRootStyle: {},
    profileIconStyle: {},
    titleStyle: {},
    subTitleStyle: {},
  },
}}
  chatData={{
  chatType: 'group',
  loginUser: 'user_1',
  participants: [
    {
      userId: 'user_1',
      username: 'Hari',
      profileImage: '',
    },
    {
      userId: 'user_2',
      username: 'Henry',
      profileImage: '',
    },
  ],
  messages: [
    {
      messageId: 'msg_1',
      senderId: 'user_1',
      content: 'Hey everyone, how is it going?',
      timestamp: '2023-06-28T10:00:00Z',
      reactions: [{ id: '+1', emoji: '👍', senderId: ['user_2'], count: 1 }],
    },
    {
      messageId: 'msg_2',
      senderId: 'user_2',
      content: 'Hi John! Things are great here. How about you?',
      timestamp: '2023-06-28T10:05:00Z',
      reactions: [{ id: '+1', emoji: '👍', senderId: ['user_1'], count: 1 }],
    },
    {
      messageId: 'msg_3',
      senderId: 'user_2',
      content: 'Hey guys! I am doing well too. Any exciting news?',
      timestamp: '2023-06-28T10:10:00Z',
      reactions: [{ id: '+1', emoji: '👍', senderId: ['user_1'], count: 1 }],
    },
    {
      messageId: 'msg_4',
      senderId: 'user_1',
      content: 'Not much, just enjoying the weekend. How about we plan a meetup?',
      timestamp: '2023-06-19T10:15:00Z',
      reactions: [{ id: '+1', emoji: '👍', senderId: ['user_2'], count: 1 }],
    },
    {
      messageId: 'msg_5',
      senderId: 'user_2',
      content: 'That s a great idea! I am available next week. What about you, Alex?',
      timestamp: '2023-06-29T12:00:00Z',
      reactions: [{ id: '+1', senderId: ['user_1'], emoji: '👍', count: 1 }],
    },
  ],
  styles: {
    chatContainerStyle: {},
    chatScrollStyle: {},
    chatListStyle: {},
    messageContainerStyle: {},
    messageProfileStyle: {},
    chatDetailsStyle: {},
    massagerNameStyle: {},
    massageTimeStyles: {},
    senderMessageStyle: {},
    receiverMessageStyle: {},
    messageTextStyle: {},
  },
  functions: {
    onClickMassagerProfile: undefined,
    onClickMassagerContent: undefined,
  },
}}
  editorData={editorData}
  // onEnterMessage={onEnterMessage}
  onReactionChange={console.log}
  reactionEnable={true}
/>

Props