Release v3.3.0 (#368)

[v3.3.0] (Nov 23 2022)
Features:
* Provide new module `Thread`. See the specific informations of this module on the [Docs page](https://sendbird.com/docs/uikit)
  * You can use a combined component `Thread`. Import it with
    ```typescript
    import Thread from "@sendbird/uikit-react/Thread"
    ```
  * Also you can use `ThreadProvider` and `useThreadContext` for customization. Import it with
    ```typescript
    import { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
    ```
  * And the other UI components are provided under the Thread. `ThreadUI`, `ThreadHeader`, `ParentMessageInfo`, `ParentMessageInfoItem`, `ThreadList`, `ThreadListItem`, and `ThreadMessageInput` are it
* Add channel props
  * `threadReplySelectType`: Type of the value should be
    ```typescript
    enum ThreadReplySelectType { PARENT, THREAD }
    ```
    You can see how to use it below
    ```typescript
    import { ThreadReplySelectType } from "@sendbird/uikit-react/Channel/context";

    <Channel
      ...
      threadReplySelectType={ThreadReplySelectType.PARENT}
    />
    ```
  * `animatedMessage`: Type of the value should be number(messageId)
  * `onReplyInThread`: This function is called when user click the button "Reply in thread" on the message context menu
    ```typescript
    type onReplyInThread = ({ message: UserMessage | FileMessage }) => void
    ```
  * `onQuoteMessageClick`: This function is called when user click the quote message on the message of Channel
    ```typescript
    type onQuoteMessageClick = ({ message: UserMessage | FileMessage }) => {}
    ```
  * `onMessageAnimated`: This function is called after that message item is animated
    ```typescript
    type onMessageAnimated = () => void
    ```
  * `onMessageHighlighted`: This function is called after that message item is highlighted
    ```typescript
    type onMessageHighlighted = () => void
    ```
* Add `ui/ThreadReplies` component
  ```typescript
  interface ThreadRepliesProps {
    className?: string;
    threadInfo: ThreadInfo;
    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
  }
  ```

Fixes:
* Do not allow operator to unregister itself on the OperatorList of GroupChannel
* Create new group channel when user open 1:1 channel on the UserProfile
* Register the channel creator as an operator in 1:1 channel

CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog - v3
 
+## [v3.3.0] (Nov 23 2022)
+Features:
+* Provide new module `Thread`. See the specific informations of this module on the [Docs page](https://sendbird.com/docs/uikit)
+  * You can use a combined component `Thread`. Import it with
+    ```typescript
+    import Thread from "@sendbird/uikit-react/Thread"
+    ```
+  * Also you can use `ThreadProvider` and `useThreadContext` for customization. Import it with
+    ```typescript
+    import { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
+    ```
+  * And the other UI components are provided under the Thread. `ThreadUI`, `ThreadHeader`, `ParentMessageInfo`, `ParentMessageInfoItem`, `ThreadList`, `ThreadListItem`, and `ThreadMessageInput` are it
+* Add channel props
+  * `threadReplySelectType`: Type of the value should be
+    ```typescript
+    enum ThreadReplySelectType { PARENT, THREAD }
+    ```
+    You can see how to use it below
+    ```typescript
+    import { ThreadReplySelectType } from "@sendbird/uikit-react/Channel/context";
+
+    <Channel
+      ...
+      threadReplySelectType={ThreadReplySelectType.PARENT}
+    />
+    ```
+  * `animatedMessage`: Type of the value should be number(messageId)
+  * `onReplyInThread`: This function is called when user click the button "Reply in thread" on the message context menu
+    ```typescript
+    type onReplyInThread = ({ message: UserMessage | FileMessage }) => void
+    ```
+  * `onQuoteMessageClick`: This function is called when user click the quote message on the message of Channel
+    ```typescript
+    type onQuoteMessageClick = ({ message: UserMessage | FileMessage }) => {}
+    ```
+  * `onMessageAnimated`: This function is called after that message item is animated
+    ```typescript
+    type onMessageAnimated = () => void
+    ```
+  * `onMessageHighlighted`: This function is called after that message item is highlighted
+    ```typescript
+    type onMessageHighlighted = () => void
+    ```
+* Add `ui/ThreadReplies` component
+  ```typescript
+  interface ThreadRepliesProps {
+    className?: string;
+    threadInfo: ThreadInfo;
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+  }
+  ```
+
+Fixes:
+* Do not allow operator to unregister itself on the OperatorList of GroupChannel
+* Create new group channel when user open 1:1 channel on the UserProfile
+* Register the channel creator as an operator in 1:1 channel
+
 ## [v3.2.6] (Nov 14 2022)
 Fix:
 * Use ref instead of querySelector for DOM manipulation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "React based UI kit for sendbird",
   "main": "dist/index.js",
   "style": "dist/index.css",

scripts/index_d_ts

@@ -469,6 +469,7 @@ declare module "SendbirdUIKitGlobal" {
     isReactionEnabled?: boolean;
     isMessageGroupingEnabled?: boolean;
     showSearchIcon?: boolean;
+    animatedMessage?: number;
     highlightedMessage?: number;
     startingPoint?: number;
     onBeforeSendUserMessage?(text: string, quotedMessage?: UserMessage | FileMessage): UserMessageCreateParams;
@@ -480,9 +481,13 @@ declare module "SendbirdUIKitGlobal" {
     replyType?: ReplyType;
     threadReplySelectType?: ThreadReplySelectType;
     queries?: ChannelQueries;
-    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
+    renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
     disableUserProfile?: boolean;
     disableMarkAsRead?: boolean;
+    onReplyInThread?: (props: { message: UserMessage | FileMessage }) => void;
+    onQuoteMessageClick?: (props: { message: UserMessage | FileMessage }) => void;
+    onMessageAnimated?: () => void;
+    onMessageHighlighted?: () => void;
   };
 
   export interface ChannelUIProps {
@@ -1258,7 +1263,7 @@ declare module '@sendbird/uikit-react/Channel/context' {
   import SendbirdUIKitGlobal from 'SendbirdUIKitGlobal';
   export const ChannelProvider: React.FunctionComponent<SendbirdUIKitGlobal.ChannelContextProps>;
   export function useChannelContext(): SendbirdUIKitGlobal.ChannelProviderInterface;
-  export const ThreadReplySelectType: SendbirdUIKitGlobal.ThreadReplySelectType;
+  export enum ThreadReplySelectType { PARENT, THREAD }
 }
 
 declare module '@sendbird/uikit-react/Channel/components/ChannelHeader' {

src/smart-components/Channel/context/ChannelProvider.tsx

@@ -42,7 +42,6 @@ import useMemoizedEmojiListItems from './hooks/useMemoizedEmojiListItems';
 import useToggleReactionCallback from './hooks/useToggleReactionCallback';
 import useScrollToMessage from './hooks/useScrollToMessage';
 import { CustomUseReducerDispatcher } from '../../../lib/SendbirdState';
-import { ThreadReplySelectType as _ThreadReplySelectType } from './const';
 
 export type MessageListParams = {
   // https://sendbird.github.io/core-sdk-javascript/module-model_params_messageListParams-MessageListParams.html
@@ -66,7 +65,10 @@ export type ChannelQueries = {
   messageListParams?: MessageListParams;
 };
 
-export const ThreadReplySelectType = _ThreadReplySelectType;
+export enum ThreadReplySelectType {
+  PARENT = 'PARENT',
+  THREAD = 'THREAD',
+}
 
 export type ChannelContextProps = {
   children?: React.ReactElement;