npm package: @licuido-ui/ui_chat-box
Description: 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 communica
Latest version: 0.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](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

```sh
npm i  @licuido-ui/ui_chat-box
```

## Import component

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

## Usage

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

## Image

![alt text](./chatBox.png)

## Sample Code

```jsx
<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

| **Name**             | **Description**                                                                                                                                                                                                        | **Default** | **Control**                                                                                                                    |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **chatId**           | string                                                                                                                                                                                                                 | ""          | "chat_1"                                                                                                                       |
| **chatBoxRootStyle** | SxProps&lt;\{\}&gt;                                                                                                                                                                                                    | \{ \}       | chatBoxRootStyle : \{\}                                                                                                        |
| **headerData**       | Array - [{}]                                                                                                                                                                                                           | [{}]        | [{}]                                                                                                                           |
| **chatData**         | Array - [{}]                                                                                                                                                                                                           | [{}]        | [{}]                                                                                                                           |
| **editorData**       | \{ inputProps?: InputBaseProps; styles?: \{ textEditorStyle?: SxProps&lt;\{\}&gt;; iconContainerStyle?: SxProps&lt;\{\}&gt;; iconStyle?: SxProps&lt;\{\}&gt;; \}; icons?: \{ \.\.\.; \}; functions?: \{ \.\.\.; \}; \} | object      | editorData : \{inputProps : \{\.\.\.\} 1 keystyles : \{\.\.\.\} 4 keysicons : \{\.\.\.\} 4 keysfunctions : \{\.\.\.\} 4 keys\} |
| **onReactionChange** | ()=>{}                                                                                                                                                                                                                 | ()=>{}      | \-                                                                                                                             |
| **reactionEnable**   | boolean                                                                                                                                                                                                                | \-          | False                                                                                                                          |
| **className**        | string                                                                                                                                                                                                                 | \-          | Set string                                                                                                                     |
| **sx**               | SxProps&lt;Theme&gt;                                                                                                                                                                                                   | \-          | Set object                                                                                                                     |
| **emojiPickerProps** | emojiProps                                                                                                                                                                                                             | \{ \}       | Set object                                                                                                                     |
| **onEnterMessage**   | ()=>{}                                                                                                                                                                                                                 | ()=>{}      | \-                                                                                                                             |