### Quick Start - Mono Encoding

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

A basic example demonstrating how to encode a mono MP3 audio stream using LameJS in a browser.

```APIDOC
## Quick Start - Mono Encoding

```javascript
<script src='lame.all.js'></script>
<script>
var mp3Data = [];

var mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128); //mono 44.1khz encode to 128kbps
var samples = new Int16Array(44100); //one second of silence replace that with your own samples
var mp3Tmp = mp3encoder.encodeBuffer(samples); //encode mp3

//Push encode buffer to mp3Data variable
mp3Data.push(mp3Tmp);

// Get end part of mp3
mp3Tmp = mp3encoder.flush();

// Write last data to the output data, too
// mp3Data contains now the complete mp3Data
mp3Data.push(mp3Tmp);

console.debug(mp3Data);
</script>
```
```

--------------------------------

### Initialize and Run Sendbird UIKit React Project

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/samples/router/README.md

Commands to install dependencies and start the development server for the Sendbird UIKit React project. Requires Node.js version 18 or higher.

```bash
npm install
npm run dev
```

--------------------------------

### Installation

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

Instructions on how to install LameJS using Bower or npm.

```APIDOC
## Installation

To install via Bower or npm, simply do the following:

### Bower
```bash
$ bower install lamejs --save
```

### npm
```bash
$ npm install lamejs
```
```

--------------------------------

### Install @sendbird/uikit-react

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/README.md

Instructions for installing the Sendbird UIKit React library using either yarn or npm package managers. Ensure you have Node.js and npm/yarn installed.

```shell
yarn add @sendbird/uikit-react
```

```shell
npm i @sendbird/uikit-react
```

--------------------------------

### Migration Example: sendUserMessage

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_COLLECTION.md

This example demonstrates how to migrate from the old `sendMessage` function to the new `sendUserMessage` function, including handling Promises.

```APIDOC
## Migration Example: sendUserMessage

### Description
This example demonstrates how to migrate from the old `sendMessage` function to the new `sendUserMessage` function, including handling Promises.

### Before Migration

```tsx
const { sendMessage } = useChannelContext();
sendMessage({
  message: message,
  quoteMessage: parentMessage,
  mentionedUsers: mentionedUsers,
  mentionTemplate: mentionTemplate,
});
```

### After Migration

```tsx
const { sendUserMessage } = useGroupChannelContext();
sendUserMessage({
  message: message,
  parentMessageId: parentMessage.messageId,
  mentionedUsers: mentionedUsers,
  mentionedMessageTemplate: mentionTemplate,
})
  .then((message) => {
    // handle sending success
  })
  .catch((err) => {
    // handle sending failure
  });
```
```

--------------------------------

### Development Setup and Commands

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/README.md

Commands for setting up the development environment, running the Vite development server, and building the project using Rollup. Requires Node.js and yarn.

```shell
yarn install
yarn dev
```

```shell
yarn build
```

```shell
yarn test
```

```shell
yarn lint
```

--------------------------------

### Real Example - Browser Encoding

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

A more comprehensive example of encoding a WAV file to MP3 in the browser, handling sample blocks.

```APIDOC
## Real Example - Browser Encoding

```javascript
<script src='lame.all.js'></script>
<script>
channels = 1; //1 for mono or 2 for stereo
sampleRate = 44100; //44.1khz (normal mp3 samplerate)
kbps = 128; //encode 128kbps mp3
mp3encoder = new lamejs.Mp3Encoder(channels, sampleRate, kbps);
var mp3Data = [];

samples = new Int16Array(44100); //one second of silence (get your data from the source you have)
sampleBlockSize = 1152; //can be anything but make it a multiple of 576 to make encoders life easier

var mp3Data = [];
for (var i = 0; i < samples.length; i += sampleBlockSize) {
  sampleChunk = samples.subarray(i, i + sampleBlockSize);
  var mp3buf = mp3encoder.encodeBuffer(sampleChunk);
  if (mp3buf.length > 0) {
      mp3Data.push(mp3buf);
  }
}
var mp3buf = mp3encoder.flush();   //finish writing mp3

if (mp3buf.length > 0) {
    mp3Data.push(new Int8Array(mp3buf));
}

var blob = new Blob(mp3Data, {type: 'audio/mp3'});
var url = window.URL.createObjectURL(blob);
console.log('MP3 URl: ', url);
</script>
```
```

--------------------------------

### Node.js Usage

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

How to install and use LameJS in a Node.js environment.

```APIDOC
## Node.js Usage

To use lamejs in Node.js build, you can install it from `npm`:

```bash
npm install lamejs
```

Then use it:

```javascript
var lamejs = require("lamejs");
```
```

--------------------------------

### Install lamejs via Package Managers

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

Commands to install the lamejs library using common JavaScript package managers.

```bash
bower install lamejs --save
```

```bash
npm install lamejs
```

--------------------------------

### Render Custom Channel Profile with useChannelSettingsContext

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Provides an example of rendering a custom channel profile component within `ChannelSettings` using the `useChannelSettingsContext`. This involves using the `renderChannelProfile` prop.

```javascript
<ChannelSettings
  renderChannelProfile={MyChannelProfile}
/>
const MyChannelProfile = () => {
  const { channel } = useChannelSettingsContext();
  return (...);
}
```

--------------------------------

### Badge Component Usage Examples (TypeScript)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/Badge.mdx

Demonstrates various ways to use the Sendbird UIKit React Badge component. Includes default usage, usage with string counts (e.g., '99+'), and usage with a maximum level to indicate overflow.

```typescript
// Default usage example (assuming Badge component is imported)
// <Badge count={5} />

// Usage with string count
// <Badge count="99+" />

// Usage with maxLevel prop
// <Badge count={105} maxLevel={99} />
```

--------------------------------

### Customize Channel Creation with onBeforeCreateChannel

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/samples/README.md

The onBeforeCreateChannel prop for the ChannelList component allows intercepting channel creation to modify parameters. This example shows how to define custom channel properties like name, invited users, and custom types before a channel is created.

```javascript
<GroupChannelList
  onBeforeCreateChannel={handleOnBeforeCreateChannel}
>
```

```javascript
const handleOnBeforeCreateChannel = (selectedUsers) => {
  const channelParams: GroupChannelCreateParams = {
    name: 'Hello Sendbird!',
    invitedUserIds: selectedUsers,
    coverUrl: null,
    customType: HIGHLIGHT,
    isDistinct: true,
  };

  return channelParams;
};
```

--------------------------------

### Configure Environment Variables for Development

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/README.md

Steps to configure environment variables for development, specifically setting the Sendbird App ID. This involves copying an example .env file and updating it.

```shell
Make a copy of `apps/testing/.env.example` and save it as `apps/testing/.env`
Set your appId to `VITE_APP_ID`
```

--------------------------------

### Stereo Encoding

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

Example demonstrating how to encode stereo MP3 audio using LameJS, providing separate sample buffers for left and right channels.

```APIDOC
## Stereo Encoding

If you want to encode stereo mp3 use separate sample buffers for left and right channel

```javascript
<script src='lame.all.js'></script>
<script>
mp3encoder = new lamejs.Mp3Encoder(2, 44100, 128);
var mp3Data = [];

left = new Int16Array(44100); //one second of silence (get your data from the source you have)
right = new Int16Array(44100); //one second of silence (get your data from the source you have)
sampleBlockSize = 1152; //can be anything but make it a multiple of 576 to make encoders life easier

for (var i = 0; i < samples.length; i += sampleBlockSize) {
  leftChunk = left.subarray(i, i + sampleBlockSize);
  rightChunk = right.subarray(i, i + sampleBlockSize);
  var mp3buf = mp3encoder.encodeBuffer(leftChunk, rightChunk);
  if (mp3buf.length > 0) {
    mp3Data.push(mp3buf);
  }
}
var mp3buf = mp3encoder.flush();   //finish writing mp3

if (mp3buf.length > 0) {
    mp3Data.push(mp3buf);
}

console.log(mp3Data);
</script>
```
```

--------------------------------

### Filter Channels with channelListQueryParams

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/samples/README.md

The channelListQueryParams prop for the <GroupChannelList /> component allows filtering and ordering of channels. This example shows how to set options like includeEmpty, limit, and order to customize the channel list query.

```javascript
// Pass arguments in JSON data input format to the query instance.
  const queryParams = useMemo(() => ({
    // Should be an instance of GroupChannelListQueryParams
    // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html
    includeEmpty: true,
    limit: 50,
    order: 'chronological',
  }));

<GroupChannelList
  channelListQueryParams={queryParams}>

```

--------------------------------

### Import OpenChannelSettings Module

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows the migration path for importing the OpenChannelSettings module from v2 to v3.

```javascript
// From v2
import { OpenChannelSettings } from "sendbird-uikit";

// To v3
import OpenChannelSettings from "@sendbird/uikit-react/OpenChannelSettings";
// Or
import { OpenChannelSettings } from "@sendbird/uikit-react";
```

--------------------------------

### Enter Open Channel (JavaScript)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows how to enter an existing open channel using the `getEnterOpenChannel` method. It returns a Promise that resolves when the user successfully enters the channel. The method name and store parameter differ between v2 and v3.

```javascript
const enterChannel = sendBirdSelectors.getEnterChannel(store);
enterChannel('channel-url')
	.then((channel) => {}) // Handle successful entry
	.catch((error) => {}) // Handle errors during entry
```

```javascript
const enterOpenChannel = sendbirdSelectors.getEnterOpenChannel(globalStore);
enterOpenChannel('channel-url')
	.then((channel) => {}) // Handle successful entry
	.catch((error) => {}) // Handle errors during entry
```

--------------------------------

### OpenChannel Component Implementation

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

This documentation covers the configuration and usage of the OpenChannel component, including message handling, query parameters, and custom rendering props.

```APIDOC
## OpenChannel Component

### Description
The OpenChannel component provides a public channel view that supports large numbers of participants without membership requirements.

### Method
React Component Props

### Parameters
#### Props
- **channelUrl** (string) - Required - The unique URL of the open channel.
- **isMessageGroupingEnabled** (boolean) - Optional - Whether to group consecutive messages from the same user.
- **messageLimit** (number) - Optional - The maximum number of messages to fetch.
- **onBeforeSendUserMessage** (function) - Optional - Callback to modify user message parameters before sending.
- **onBeforeSendFileMessage** (function) - Optional - Callback to modify file message parameters before sending.
- **queries** (object) - Optional - Configuration for message list queries, including `prevResultSize` and `includeReactions`.

### Request Example
<OpenChannel channelUrl="channel_url_123" isMessageGroupingEnabled={true} messageLimit={100} />

### Response
#### Success Response (Rendered UI)
- **renderHeader** (function) - Custom header component.
- **renderMessageInput** (function) - Custom input component.
- **renderPlaceHolderEmptyList** (function) - Custom empty state component.
```

--------------------------------

### Importing the Button Component

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/Button.mdx

This snippet demonstrates how to import the Button component from the Sendbird UIKit React library into your project. It assumes the package is installed as a dependency.

```tsx
import Button from '@sendbird/uikit-react/ui/Button';
```

--------------------------------

### Enter Open Channel

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Illustrates how to enter an existing open channel using the `getEnterOpenChannel` method. This function returns a Promise to join the channel.

```APIDOC
## POST /api/channels/open/{channel_url}/enter

### Description
Enters an existing open channel.

### Method
POST

### Endpoint
/api/channels/open/{channel_url}/enter

### Parameters
#### Path Parameters
- **channel_url** (string) - Required - The URL of the channel to enter.

### Request Example
```json
{
  "example": "enterOpenChannel('channel-url')"
}
```

### Response
#### Success Response (200)
- **channel** (OpenChannel) - The entered open channel object.

#### Response Example
```json
{
  "example": "channel => { console.log(channel); }"
}
```
```

--------------------------------

### Create Open Channel (JavaScript)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Demonstrates how to create a new open channel using the `getCreateOpenChannel` method. It returns a Promise that resolves with the created channel object. This method's signature changed from v2 to v3.

```javascript
const createOpenChannel = sendBirdSelectors.getCreateOpenChannel(store);
const params = new sdk.OpenChannelParams();
createOpenChannel(params)
	.then((channel) => {}) // Handle successful channel creation
	.catch((error) => {}) // Handle errors during channel creation
```

```javascript
const createOpenChannel = sendbirdSelectors.getCreateOpenChannel(globalStore);
createOpenChannel({} as OpenChannelCreateParams)
	.then((channel) => {}) // Handle successful channel creation
	.catch((error) => {}) // Handle errors during channel creation
```

--------------------------------

### Initialize lamejs in Node.js

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

How to import and use the lamejs library within a Node.js environment.

```javascript
var lamejs = require("lamejs");
```

--------------------------------

### Encode Mono MP3 in Browser

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/_externals/lamejs/README.md

Demonstrates how to initialize the Mp3Encoder, process raw Int16Array audio samples, and flush the encoder to generate an MP3 blob.

```javascript
var mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128);
var samples = new Int16Array(44100);
var mp3Data = [];
mp3Data.push(mp3encoder.encodeBuffer(samples));
mp3Data.push(mp3encoder.flush());
```

--------------------------------

### Customize Channel Preview Item in GroupChannelList

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/samples/README.md

The renderChannelPreview prop in the <GroupChannelList /> component enables customization of how each channel is displayed in the list. It receives channel and onLeaveChannel arguments. The example demonstrates using a custom component for channel previews.

```javascript
<GroupChannelList
  renderChannelPreview={({ channel, onLeaveChannel }) => (
    <CustomizedChannelPreviewItem />
  )}
>
```

--------------------------------

### Customize Message Input in GroupChannel

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/samples/README.md

The renderMessageInput prop in the <GroupChannel /> component allows customization of the message input area. It provides channel, user, and disabled states as arguments. This example shows how to replace the default input with a custom component.

```javascript
<GroupChannel
  renderMessageInput={() => (
    <CustomizedMessageInput />
  )}
>
```

--------------------------------

### Create Custom Thread UI with ThreadProvider

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

Shows how to build a fully custom threaded UI by wrapping components in ThreadProvider and consuming data via the useThreadContext hook.

```tsx
import { ThreadProvider, useThreadContext } from '@sendbird/uikit-react/Thread/context';

function CustomThreadUI({ channelUrl, parentMessage }) {
  return (
    <ThreadProvider channelUrl={channelUrl} message={parentMessage}>
      <CustomThreadContent />
    </ThreadProvider>
  );
}

function CustomThreadContent() {
  const { parentMessage, allThreadMessages } = useThreadContext();
  return (
    <div className="custom-thread">
      <h4>Thread: {parentMessage?.message}</h4>
      {allThreadMessages.map((msg) => (
        <div key={msg.messageId}>{msg.sender?.nickname}: {msg.message}</div>
      ))}
    </div>
  );
}
```

--------------------------------

### OpenChannelSettings Module

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Updated import paths and new rendering props for the OpenChannelSettings module in v3.

```APIDOC
## OpenChannelSettings Module

### Description
Provides settings management for Open Channels. Replaces v2 renderChannelProfile with specific operator and participant UI props.

### Import
```javascript
import OpenChannelSettings from "@sendbird/uikit-react/OpenChannelSettings";
```

### Parameters
#### Props
- **renderOperatorUI** (React.ReactElement) - Optional - Custom view for channel operators.
- **renderParticipantList** (React.ReactElement) - Optional - Custom view for non-operator members.
```

--------------------------------

### Label Component Usage

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/Label.mdx

Demonstrates how to import and use the Label component with different typography and color options.

```APIDOC
## Importing Label

To use the `Label` component in your project, add the following import statement:

```tsx
import Label, { LabelTypography, LabelColors } from '@sendbird/uikit-react/ui/Label';
```

## Example Usage

The following examples demonstrate the `Label` component's versatility in displaying text with different typography and colors.

### Default Label

Renders text with default typography and color.

```tsx
<Label>Default Label Text</Label>
```

### Custom Typography and Color Label

Shows how to use the `Label` component with custom typography and color.

```tsx
<Label type={LabelTypography.SUBTITLE_2} color={LabelColors.ONισε_BACKGROUND}>
  Custom Styled Label
</Label>
```
```

--------------------------------

### Exit Open Channel (JavaScript)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Illustrates how to exit an open channel using the `getExitOpenChannel` method. This method returns a Promise that resolves upon successful exit. Note the change in method name and store parameter from v2 to v3.

```javascript
const exitChannel = sendBirdSelectors.getExitChannel(store);
exitChannel('channel-url')
	.then((channel) => {}) // Handle successful exit
	.catch((error) => {}) // Handle errors during exit
```

```javascript
const exitOpenChannel = sendbirdSelectors.getExitOpenChannel(globalStore);
exitOpenChannel('channel-url')
	.then((channel) => {}) // Handle successful exit
	.catch((error) => {}) // Handle errors during exit
```

--------------------------------

### Implement ChannelSettings Component

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

Demonstrates how to use the ChannelSettings component to manage channel properties, moderation, and custom UI overrides. It also shows how to use the ChannelSettingsProvider to access channel data via context.

```tsx
import ChannelSettings from '@sendbird/uikit-react/ChannelSettings';
import { ChannelSettingsProvider, useChannelSettingsContext } from '@sendbird/uikit-react/ChannelSettings/context';

function ChannelSettingsView({ channelUrl, onClose }) {
  return (
    <ChannelSettings
      channelUrl={channelUrl}
      onCloseClick={onClose}
      onLeaveChannel={() => {
        console.log('Left channel');
        onClose();
      }}
      onChannelModified={(channel) => {
        console.log('Channel modified:', channel.name);
      }}
      onBeforeUpdateChannel={(params) => ({
        ...params,
        name: params.name?.trim(),
        customType: 'modified',
      })}
      overrideInviteUser={({ users, onClose, channel }) => {
        console.log('Custom invite:', users);
        channel.inviteWithUserIds(users).then(() => onClose());
      }}
      queries={{
        applicationUserListQuery: {
          limit: 20,
          userIdsFilter: [],
        },
      }}
      renderHeader={() => (
        <div className="settings-header">
          <h3>Channel Settings</h3>
          <button onClick={onClose}>Close</button>
        </div>
      )}
      renderChannelProfile={() => (
        <div className="channel-profile">Custom Profile Section</div>
      )}
      renderModerationPanel={() => (
        <div className="moderation">Custom Moderation Panel</div>
      )}
      renderLeaveChannel={() => (
        <button className="leave-btn">Leave Channel</button>
      )}
    />
  );
}

function CustomSettingsUI({ channelUrl }) {
  return (
    <ChannelSettingsProvider channelUrl={channelUrl}>
      <CustomSettingsContent />
    </ChannelSettingsProvider>
  );
}

function CustomSettingsContent() {
  const { channel, loading, invalidChannel } = useChannelSettingsContext();
  if (loading) return <div>Loading...</div>;
  if (invalidChannel) return <div>Invalid channel</div>;
  return (
    <div>
      <h3>{channel?.name}</h3>
      <p>Members: {channel?.memberCount}</p>
      <p>Created: {new Date(channel?.createdAt).toLocaleDateString()}</p>
    </div>
  );
}
```

--------------------------------

### Create Open Channel

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Demonstrates how to create a new open channel using the `getCreateOpenChannel` method. It shows the evolution from v2 to v3 of the Sendbird SDK.

```APIDOC
## POST /api/channels/open

### Description
Creates a new open channel.

### Method
POST

### Endpoint
/api/channels/open

### Parameters
#### Request Body
- **params** (OpenChannelParams) - Required - Parameters for creating the open channel.

### Request Example
```json
{
  "example": "const params = new sdk.OpenChannelParams();\ncreateOpenChannel(params)"
}
```

### Response
#### Success Response (200)
- **channel** (OpenChannel) - The newly created open channel object.

#### Response Example
```json
{
  "example": "channel => { console.log(channel); }"
}
```
```

--------------------------------

### ContextMenu Component Usage

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/ContextMenu.mdx

Documentation on how to import and utilize the ContextMenu component within a React application.

```APIDOC
## ContextMenu Component

### Description
The `ContextMenu` component is a UI utility that allows for the creation of dynamic, floating menus triggered by user interactions. It is designed to be highly customizable with nested `MenuItems` and `MenuItem` components.

### Importing
To use the component in your project, import it from the Sendbird UIKit library:

```tsx
import ContextMenu, { MenuItems, MenuItem } from '@sendbird/uikit-react/ui/ContextMenu';
```

### Usage Example
```tsx
<ContextMenu
  menuItems={(close) => (
    <MenuItems>
      <MenuItem onClick={() => { console.log('Action'); close(); }}>
        Action Item
      </MenuItem>
    </MenuItems>
  )}
>
  <div>Trigger Element</div>
</ContextMenu>
```
```

--------------------------------

### Implement Custom Channel Preview Item Logic

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/samples/README.md

This snippet shows the implementation of a custom channel preview item component. It demonstrates how to access the channel object and utilize the onLeaveChannel function provided by the parent component.

```javascript
const CustomizedChannelPreviewItem = (props) => {
  const { channel } = props;
  const onLeaveChannel = sendbirdSelectors.getLeaveGroupChannel(store);
  ...
  onLeaveChannel(channel);
}
```

--------------------------------

### Update ChannelSettings Import Path (v2 to v3)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Illustrates the change in how to import the `ChannelSettings` module from the `sendbird-uikit` package in v2 to the new path in v3, which is `@sendbird/uikit-react/ChannelSettings` or `@sendbird/uikit-react`.

```javascript
import { ChannelSettings } from "sendbird-uikit";
```

```javascript
import ChannelSettings from "@sendbird/uikit-react/ChannelSettings"
// Or
import { ChannelSettings } from "@sendbird/uikit-react"
```

--------------------------------

### Sendbird UIKit React App Component - Complete Chat Solution

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

Demonstrates the usage of the `App` component from Sendbird UIKit React, which offers a complete, drop-in chat solution. It handles SDK initialization, connection management, and provides a fully functional chat interface. Configuration options for features, image compression, voice recording, and event handlers are included.

```tsx
import App from '@sendbird/uikit-react/App';
import '@sendbird/uikit-react/dist/index.css';

function ChatApplication() {
  return (
    <App
      appId="YOUR_APP_ID"
      userId="user123"
      accessToken="optional_access_token"
      theme="light"
      nickname="John Doe"
      profileUrl="https://example.com/avatar.png"
      allowProfileEdit={true}
      uikitOptions={{
        groupChannel: {
          enableReactions: true,
          enableMention: true,
          enableVoiceMessage: true,
          replyType: 'QUOTE_REPLY',
          enableTypingIndicator: true,
          enableSuggestedReplies: true,
          enableFeedback: true,
        },
        groupChannelList: {
          enableTypingIndicator: true,
          enableMessageReceiptStatus: true,
        },
        groupChannelSettings: {
          enableMessageSearch: true,
        },
        common: {
          enableUsingDefaultUserProfile: true,
        },
      }}
      imageCompression={{
        compressionRate: 0.7,
        resizingWidth: 1000,
        resizingHeight: 1000,
        outputFormat: 'jpeg',
      }}
      voiceRecord={{
        maxRecordingTime: 60000,
        minRecordingTime: 1000,
      }}
      eventHandlers={{
        connection: {
          onConnected: (user) => console.log('Connected:', user.userId),
          onFailed: (error) => console.error('Connection failed:', error),
        },
        message: {
          onSendMessageFailed: (message, error) => console.error('Send failed:', error),
          onFileUploadFailed: (error) => console.error('Upload failed:', error),
        },
      }}
      onProfileEditSuccess={(user) => console.log('Profile updated:', user)}
    />
  );
}
```

--------------------------------

### Implement OpenChannel Component in React

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

This snippet demonstrates how to initialize the OpenChannel component with custom message handlers, query parameters, and UI overrides for headers and placeholders.

```tsx
import OpenChannel from '@sendbird/uikit-react/OpenChannel';
import { OpenChannelProvider, useOpenChannelContext } from '@sendbird/uikit-react/OpenChannel/context';

function OpenChannelView({ channelUrl }) {
  return (
    <OpenChannel
      channelUrl={channelUrl}
      isMessageGroupingEnabled={true}
      messageLimit={100}
      onBackClick={() => console.log('Back clicked')}
      onChatHeaderActionClick={() => console.log('Header action clicked')}
      onBeforeSendUserMessage={(params) => ({
        ...params,
        customType: 'open_channel_message',
      })}
      onBeforeSendFileMessage={(params) => ({
        ...params,
        customType: 'open_channel_file',
      })}
      queries={{
        messageListParams: {
          prevResultSize: 50,
          includeReactions: true,
        },
      }}
      renderMessage={({ message }) => null}
      renderHeader={() => (
        <div className="open-channel-header">Open Channel Header</div>
      )}
      renderMessageInput={() => null}
      renderPlaceHolderEmptyList={() => (
        <div>No messages in this open channel</div>
      )}
      renderPlaceHolderError={() => (
        <div>Failed to load channel</div>
      )}
      renderPlaceHolderLoading={() => (
        <div>Loading open channel...</div>
      )}
    />
  );
}
```

--------------------------------

### Exporting New Components

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/README.md

Guidance on how to define and export new components from the `./src` directory. This involves updating the `rollup.module-exports.js` file to make the component importable by consumers.

```javascript
'NewComponent/SubComponent': 'location/of/NewComponent/SubComponent',
```

--------------------------------

### Import Tooltip and TooltipWrapper Components (React)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/Tooltip.mdx

Demonstrates how to import the Tooltip and TooltipWrapper components from the Sendbird UIKit React library into your application. These components are essential for adding informative tooltips to your user interface.

```tsx
import Tooltip from '@sendbird/uikit-react/ui/Tooltip';
import TooltipWrapper from '@sendbird/uikit-react/ui/TooltipWrapper';
```

--------------------------------

### Importing GroupChannel and GroupChannelList Modules

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_COLLECTION.md

Provides the correct import paths for the new GroupChannel and GroupChannelList components, including their respective providers and sub-components.

```tsx
// GroupChannelList
import { GroupChannelList } from '@sendbird/uikit-react/GroupChannelList';
import { GroupChannelListProvider, useGroupChannelListContext } from '@sendbird/uikit-react/GroupChannelList/context';
import { AddGroupChannel } from '@sendbird/uikit-react/GroupChannelList/components/AddGroupChannel';
import { GroupChannelListUI } from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListUI';
import { GroupChannelListHeader } from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListHeader';
import { GroupChannelListItem } from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListItem';
import { GroupChannelPreviewAction } from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelPreviewAction';

// GroupChannel
import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { GroupChannelProvider, useGroupChannelContext } from '@sendbird/uikit-react/GroupChannel/context';
import { GroupChannelHeader } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelHeader';
import { GroupChannelUI } from '@sendbird/uikit-react/GroupChannel/components/GroupChannelUI';
import { FileViewer } from '@sendbird/uikit-react/GroupChannel/components/FileViewer';
import { FrozenNotification } from '@sendbird/uikit-react/GroupChannel/components/FrozenNotification';
import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';
import { MessageInputWrapper, VoiceMessageInputWrapper } from '@sendbird/uikit-react/GroupChannel/components/MessageInputWrapper';
import { MessageList } from '@sendbird/uikit-react/GroupChannel/components/MessageList';
import { RemoveMessageModal } from '@sendbird/uikit-react/GroupChannel/components/RemoveMessageModal';
import { TypingIndicator } from '@sendbird/uikit-react/GroupChannel/components/TypingIndicator';
import { UnreadCount } from '@sendbird/uikit-react/GroupChannel/components/UnreadCount';
import { SuggestedMentionList } from '@sendbird/uikit-react/GroupChannel/components/SuggestedMentionList';
```

--------------------------------

### Exit Open Channel

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows how to exit an open channel using the `getExitOpenChannel` method. This function returns a Promise to leave the channel.

```APIDOC
## POST /api/channels/open/{channel_url}/exit

### Description
Exits an open channel.

### Method
POST

### Endpoint
/api/channels/open/{channel_url}/exit

### Parameters
#### Path Parameters
- **channel_url** (string) - Required - The URL of the channel to exit.

### Request Example
```json
{
  "example": "exitOpenChannel('channel-url')"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message indicating the channel was exited.

#### Response Example
```json
{
  "example": "message => { console.log(message); }"
}
```
```

--------------------------------

### Toggle Component API

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/Toggle.mdx

Documentation for the Toggle component, including import methods and available configuration props.

```APIDOC
## Toggle Component

### Description
The Toggle component provides a user interface for switching between states, such as on/off. It combines both ToggleContainer and ToggleUI functionalities to offer a complete toggle experience.

### Importing
```tsx
import { Toggle, ToggleContainer, ToggleUI, useToggleContext } from '@sendbird/uikit-react/ui/Toggle';
```

### Props
- **checked** (boolean) - Optional - Controls the toggle state.
- **defaultChecked** (boolean) - Optional - Sets the initial state.
- **disabled** (boolean) - Optional - Disables the toggle.
- **reversed** (boolean) - Optional - Reverses the toggle direction.
- **width** (string|number) - Optional - Sets the width of the toggle.
- **animationDuration** (number) - Optional - Controls the animation speed.
- **name** (string) - Optional - Name attribute for the input.
- **id** (string) - Optional - ID attribute for the input.
- **ariaLabel** (string) - Optional - Accessibility label.
- **ariaLabelledby** (string) - Optional - Accessibility reference.

### Usage Note
You can use multiple ToggleUI components within a single ToggleContainer to create interconnected toggle buttons.
```

--------------------------------

### Register and Implement New Icon

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/ui/Icon/README.md

This process involves importing the SVG file, defining a new icon type in the configuration file, and mapping the type to the component in the index file.

```javascript
import IconAdd from '../../svgs/icon-add.svg';

// In type.js
export const IconTypes = {
  ADD: 'ADD'
};

// In index.jsx
function changeTypeToIconComponent(type) {
  switch(type) {
    case IconTypes.ADD: return <IconAdd />;
  }
}
```

--------------------------------

### Channel Module Import

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows the updated import paths for the Channel module in v3.

```javascript
// v2
import { Channel } from "sendbird-uikit";

// v3
import Channel from "@sendbird/uikit-react/Channel";
// Or
import { Channel } from "@sendbird/uikit-react";
```

--------------------------------

### Customize OpenChannel Message Input

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Demonstrates how to render a custom message input component within an OpenChannel using context hooks and selectors to manage message sending.

```javascript
<OpenChannel
  renderInput={MyMessage}
/>
const MyMessageInput = () => {
  const { currentOpenChannel } = useOpenChannelContext();
  const globalStore = useSendbirdStateContext();
  const sendMessage = sendbirdSelectors.getSendUserMessage(globalStore);
  return (
    ...
  );
}
```

--------------------------------

### Import MessageSearch Module

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows the migration path for importing the MessageSearch module from v2 to v3.

```javascript
// From v2
import { MessageSearch } from "sendbird-uikit";

// To v3
import MessageSearch from "@sendbird/uikit-react/MessageSearch";
// Or
import { MessageSearch } from "@sendbird/uikit-react";
```

--------------------------------

### Scaffolding New Components with Plop.js

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/README.md

Instructions for using the `yarn run generate-component` command to scaffold new UI components or reducers within the `src/ui` directory. This leverages Plop.js for code generation.

```shell
yarn run generate-component
```

--------------------------------

### ChannelSettings Component Integration

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/modules/ChannelSettings.mdx

How to import and integrate the ChannelSettings component and its associated context providers into a React application.

```APIDOC
## ChannelSettings Component Integration

### Description
The `ChannelSettings` component provides a comprehensive interface for managing channel properties and member moderation. It is intended to be used within a Sendbird UIKit context.

### Usage
To use the component, import it from the library and wrap it within the appropriate providers.

### Import Example
```tsx
import { ChannelSettings } from '@sendbird/uikit-react/ChannelSettings';
import { ChannelSettingsProvider, useChannelSettingsContext } from '@sendbird/uikit-react/ChannelSettings/context';
```

### Features
- Update channel information
- Freeze/Unfreeze channel chat
- Mute/Ban members
- Manage operator status for members
```

--------------------------------

### Implement onChannelCreated in GroupChannelList

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_COLLECTION.md

Demonstrates how to use the new onChannelCreated prop alongside onChannelSelect to manage channel state updates effectively. This ensures that newly created channels are correctly set in the application state.

```tsx
const App = () => {
  const [currentChannel, setCurrentChannel] = useState(null);

  const handleSetCurrentChannel = (channel: GroupChannel) => {
    setCurrentChannel(channel);
  };

  return (
    <div>
      <GroupChannelList onChannelSelect={handleSetCurrentChannel} onChannelCreated={handleSetCurrentChannel} />
      <GroupChannel channelUrl={currentChannel?.url ?? ''} />
    </div>
  );
};
```

--------------------------------

### OpenChannel Component Customization

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Configuring custom UI components for the OpenChannel module using render props.

```APIDOC
## OpenChannel Component

### Description
The OpenChannel component allows for rendering customized views for messages, headers, inputs, and placeholders.

### Parameters
#### Props
- **renderMessage** (React.ReactElement) - Optional - Renders a customized message view.
- **renderHeader** (React.ReactElement) - Optional - Renders a customized channel header.
- **renderInput** (React.ReactElement) - Optional - Renders a customized message input component.
- **renderPlaceholderEmptyList** (React.ReactElement) - Optional - Renders a customized placeholder for empty channels.
- **renderPlaceHolderError** (React.ReactElement) - Optional - Renders a customized placeholder for errors.
- **renderPlaceholderLoading** (React.ReactElement) - Optional - Renders a customized placeholder for loading states.

### Usage Example
```javascript
<OpenChannel
  renderInput={MyCustomInput}
  renderHeader={MyCustomHeader}
/>
```
```

--------------------------------

### ChannelList Module Import

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows the updated import paths for the ChannelList module in v3.

```javascript
// v2
import { ChannelList } from "sendbird-uikit";

// v3
import ChannelList from "@sendbird/uikit-react/ChannelList";
// Or
import { ChannelList } from "@sendbird/uikit-react";
```

--------------------------------

### Initialize SendbirdProvider

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/architecture.md

The SendbirdProvider component acts as the root context provider for the application. It requires authentication credentials like userId, appId, and accessToken to initialize the SDK and provide state to child components.

```jsx
<SendBird userId={userId} appId={appId} accessToken={accessToken}>
  <ChannelList />
</SendBird>
```

--------------------------------

### Importing ChannelSettings Component and Context

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/modules/ChannelSettings.mdx

This snippet demonstrates how to import the ChannelSettings component and its associated context providers into a React project. These imports are necessary for rendering the settings UI and accessing channel-specific state management.

```tsx
import { ChannelSettings } from '@sendbird/uikit-react/ChannelSettings';
import { ChannelSettingsProvider, useChannelSettingsContext } from '@sendbird/uikit-react/ChannelSettings/context';
```

--------------------------------

### Usage of Icon Component

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/ui/Icon/README.md

Demonstrates how to use the registered icon within a React component by importing the Icon wrapper and specifying the type, color, and dimensions.

```javascript
import Icon, { IconTypes, IconColors } from '../../../ui/Icon';

<Icon
  type={IconTypes.ADD}
  fillColor={IconColors.PRIMARY}
  width="24px"
  height="24px"
/>
```

--------------------------------

### Importing ContextMenu Component

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/stories/ContextMenu.mdx

Demonstrates how to import the ContextMenu component and its associated sub-components from the Sendbird UIKit React library. This is the standard way to integrate the menu functionality into your React application.

```tsx
import ContextMenu, { MenuItems, MenuItem } from '@sendbird/uikit-react/ui/ContextMenu';
```

--------------------------------

### Sendbird Context Store Structure

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/architecture.md

This snippet illustrates the structure of the global store provided by the Sendbird context. It includes stores for SDK and user data, dispatchers for state updates, and configuration settings.

```javascript
const sendbirdContext = {
  stores: {
    sdkStore,
    userStore
  },
  dispatchers: {
    sdkDispatcher,
    userDispatcher
  },
  config: {
    userId,
    appId,
    accessToken,
    theme,
    config: {
      logLevel
    }
  }
};
```

--------------------------------

### Render Custom Channel Header with useChannel Context

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Shows how to render a custom channel header component using the `useChannel` context hook. This is achieved by passing a custom component to the `Channel` component's `renderChannelHeader` prop.

```javascript
<Channel
  renderMessageInput={MyChannelHEader}
/>
const MyChannelHEader = () => {
  const {
    currentGroupChannel,
  } = useChannelContext();
  const globalStore = useSendbirdStateContext();
  const user = globalStore?.stores?.userStore?.user;
  return (
    ...
  );
}
```

--------------------------------

### Send File Messages in Group and Open Channels (v3)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Consolidated method for sending file messages in both group and open channels. Similar to sending user messages, it returns a UIKitMessageHandler for managing message states. This update simplifies file message sending across different channel types.

```javascript
const sendFileMessage = sendbirdSelectors.getSendFileMessage(globalStore);
sendFileMessage(channel, {} as FileMessageCreateParams)
	.onPending((message) => {})
	.onFailed((error, message) => {})
	.onSucceeded((message) => {})
```

--------------------------------

### Send User Messages in Group and Open Channels (v3)

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/MIGRATION_v2-to-v3.md

Consolidated method for sending user messages in both group and open channels. This method returns a UIKitMessageHandler to manage message states (pending, failed, succeeded). It replaces older methods and uses a more robust event handling approach.

```javascript
const sendUserMessage = sendbirdSelectors.getSendUserMessage(globalStore);
sendUserMessage(channel, {} as UserMessageCreateParams)
	.onPending((message) => {})
	.onFailed((error, message) => {})
	.onSucceeded((message) => {})
```

--------------------------------

### App Component Integration

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

The App component serves as the primary entry point for the Sendbird UIKit, handling SDK initialization and providing a complete chat interface.

```APIDOC
## Component: <App />

### Description
The App component is a drop-in solution that combines all Sendbird UIKit modules into a single interface. It manages SDK connection, state, and UI rendering.

### Parameters
#### Props
- **appId** (string) - Required - The unique ID for your Sendbird application.
- **userId** (string) - Required - The unique ID for the current user.
- **accessToken** (string) - Optional - Authentication token for the user.
- **theme** (string) - Optional - UI theme, 'light' or 'dark'.
- **nickname** (string) - Optional - Display name for the user.
- **profileUrl** (string) - Optional - URL for the user's avatar image.
- **uikitOptions** (object) - Optional - Configuration object for specific module behaviors (groupChannel, groupChannelList, etc.).
- **eventHandlers** (object) - Optional - Callbacks for connection and message events.

### Implementation Example
```tsx
import App from '@sendbird/uikit-react/App';
import '@sendbird/uikit-react/dist/index.css';

<App
  appId="YOUR_APP_ID"
  userId="user123"
  theme="light"
  uikitOptions={{
    groupChannel: { enableReactions: true, enableMention: true }
  }}
/>
```
```

--------------------------------

### Import and Use SendbirdProvider in React

Source: https://github.com/sendbird/sendbird-uikit-react/blob/main/src/lib/Sendbird/README.md

Demonstrates how to import and utilize the SendbirdProvider and useSendbirdStateContext hooks from the '@sendbird/uikit-react' library. The SendbirdProvider sets up the necessary context for Sendbird functionalities, while useSendbirdStateContext allows access to the Sendbird state within your components.

```tsx
import { SendbirdProvider, useSendbirdStateContext } from '@sendbird/uikit-react';

const MyComponent = () => {
 const context = useSendbirdStateContext();
 // Use the context
 return (<div>{/* Fill components */}</div>);
};

const MyApp = () => {
  return (
    <SendbirdProvider>
      <MyComponent />
    </SendbirdProvider>
  );
};

```

--------------------------------

### Implement MessageSearch Component

Source: https://context7.com/sendbird/sendbird-uikit-react/llms.txt

Shows how to integrate the MessageSearch component to enable message searching within a channel. Includes configuration for search queries and custom rendering for search results and placeholders.

```tsx
import MessageSearch from '@sendbird/uikit-react/MessageSearch';

function MessageSearchPanel({ channelUrl, onClose, onResultClick }) {
  return (
    <MessageSearch
      channelUrl={channelUrl}
      onCloseClick={onClose}
      onResultClick={(message) => {
        console.log('Search result clicked:', message.messageId);
        onResultClick(message);
      }}
      messageSearchQuery={{
        limit: 20,
        exactMatch: false,
        channelUrl: channelUrl,
        order: 'ts',
      }}
      renderPlaceHolderError={() => (
        <div>Error loading search results</div>
      )}
      renderPlaceHolderLoading={() => (
        <div>Searching...</div>
      )}
      renderPlaceHolderNoString={() => (
        <div>Enter a search term</div>
      )}
      renderPlaceHolderEmptyList={() => (
        <div>No messages found</div>
      )}
      renderSearchItem={({ message, onResultClick }) => (
        <div className="search-result" onClick={() => onResultClick(message)}>
          <strong>{message.sender?.nickname}</strong>
          <p>{message.message}</p>
          <small>{new Date(message.createdAt).toLocaleString()}</small>
        </div>
      )}
    />
  );
}
```