[UK-932]Integrate message threading

package.json

@@ -48,15 +48,15 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6 || ^17.0.0",
     "react-dom": "^16.8.6 || ^17.0.0",
-    "sendbird": "^3.0.154"
+    "sendbird": "^3.0.160"
   },
   "dependencies": {
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6 || ^17.0.0",
     "react-dom": "^16.8.6 || ^17.0.0",
-    "sendbird": "^3.0.154"
+    "sendbird": "^3.0.160"
   },
   "bugs": {
     "url": "https://community.sendbird.com"

src/index.d.ts

@@ -108,6 +108,7 @@ export type Logger = {
 };
 
 export type SendbirdError = Sendbird.SendBirdError;
+export type ReplyType = "NONE" | "QUOTE_REPLY" | "THREAD";
 
 export interface RenderOpenChannelTitleProps {
   channel: Sendbird.OpenChannel;
@@ -165,6 +166,7 @@ export interface RenderGroupChannelMessageInputProps {
   channel: Sendbird.GroupChannel;
   user: Sendbird.User;
   disabled: boolean;
+  quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage;
 }
 
 export interface ClientMessageSearchQuery extends SendBird.MessageSearchQuery {
@@ -375,8 +377,8 @@ interface ChannelProps {
   onSearchClick?(): void;
   highlightedMessage?: string | number;
   startingPoint?: number;
-  onBeforeSendUserMessage?(text: string): Sendbird.UserMessageParams;
-  onBeforeSendFileMessage?(file: File): Sendbird.FileMessageParams;
+  onBeforeSendUserMessage?(text: string, quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.UserMessageParams;
+  onBeforeSendFileMessage?(file: File, quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.FileMessageParams;
   onBeforeUpdateUserMessage?(text: string): Sendbird.UserMessageParams;
   onChatHeaderActionClick?(event: React.MouseEvent<HTMLElement>): void;
   renderCustomMessage?: RenderCustomMessage;

src/smart-components/App/index.jsx

@@ -26,6 +26,7 @@ export default function App(props) {
     profileUrl,
     config = {},
     useReaction,
+    // replyType,
     useMessageGrouping,
     colorSet,
     stringSet,
@@ -96,6 +97,7 @@ export default function App(props) {
             startingPoint={startingPoint}
             highlightedMessage={highlightedMessage}
             useReaction={useReaction}
+            // replyType={replyType}
             useMessageGrouping={useMessageGrouping}
           />
         </div>
@@ -156,6 +158,7 @@ App.propTypes = {
     ]),
   }),
   useReaction: PropTypes.bool,
+  // replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
   showSearchIcon: PropTypes.bool,
   useMessageGrouping: PropTypes.bool,
   stringSet: PropTypes.objectOf(PropTypes.string),
@@ -186,6 +189,7 @@ App.defaultProps = {
   renderUserProfile: null,
   config: {},
   useReaction: true,
+  // replyType: 'NONE',
   useMessageGrouping: true,
   stringSet: null,
   colorSet: null,

src/smart-components/App/index.scss

@@ -19,6 +19,7 @@
   .sendbird-app__conversation-wrap {
     flex: 1;
     position: relative;
+    width: calc(100% - 320px);
   }
   .sendbird-app__channellist-wrap {
     max-width: 320px;

src/smart-components/App/stories/index.stories.js

@@ -24,17 +24,17 @@ export const versionInfo = () => {
     <>
       <div>UIKit: {pkg.version}</div>
       <div>Sendbird SDK: {pkg.dependencies.sendbird.version}</div>
-      <button onClick={() => { setshowAll(!showAll)}}>Show all</button>
+      <button onClick={() => { setshowAll(!showAll) }}>Show all</button>
       {
         showAll && (
-        <div>
-          {
-            Object.keys(pkg.dependencies)
-              .map((p) => (
-                <div key={p}>{p}: {pkg.dependencies[p].version}</div>
-              ))
-          }
-        </div>
+          <div>
+            {
+              Object.keys(pkg.dependencies)
+                .map((p) => (
+                  <div key={p}>{p}: {pkg.dependencies[p].version}</div>
+                ))
+            }
+          </div>
         )
       }
     </>
@@ -47,7 +47,7 @@ export const basicSDK = () => fitPageSize(
     userId={userId}
     nickname={userId}
     showSearchIcon
-    /*config={{ logLevel: 'all' }}*/
+  /*config={{ logLevel: 'all' }}*/
   />
 );
 
@@ -68,6 +68,7 @@ export const login = () => {
   const [theme, setTheme] = useState('light');
   const [messageSearch, setMessageSearch] = useState(true);
   const [profileEdit, setProfileEdit] = useState(true);
+  const [useReply, setUseReply] = useState(true);
   return isLoginPage
     ? fitPageSize(
       <div
@@ -111,8 +112,8 @@ export const login = () => {
           type="button"
           value={
             messageSearch
-            ? 'Use MessageSearch'
-            : 'Not use MessageSearch'
+              ? 'Use MessageSearch'
+              : 'Not use MessageSearch'
           }
           onClick={() => setMessageSearch(!messageSearch)}
         />
@@ -121,11 +122,21 @@ export const login = () => {
           type="button"
           value={
             profileEdit
-            ? 'Use ProfileEdit'
-            : 'Not use ProfileEdit'
+              ? 'Use ProfileEdit'
+              : 'Not use ProfileEdit'
           }
           onClick={() => setProfileEdit(!profileEdit)}
         />
+        <input
+          className="input__toggle-use-reply"
+          type="button"
+          value={
+            useReply
+              ? 'Use Reply'
+              : 'Not use Reply'
+          }
+          onClick={() => setUseReply(!useReply)}
+        />
         <input
           className="login-submit"
           type="submit"
@@ -142,6 +153,7 @@ export const login = () => {
         theme={theme}
         showSearchIcon={messageSearch}
         allowProfileEdit={profileEdit}
+        replyType={useReply ? 'QUOTE_REPLY' : 'NONE'}
       />
     )
 };
@@ -162,7 +174,7 @@ export const updateProfile = () => {
   );
 };
 
-const age = 60;
+const age = 70;
 const array = [
   `hoon${age}1`,
   `hoon${age}2`,
@@ -196,6 +208,7 @@ export const user1 = () => fitPageSize(
     profileUrl={addProfile}
     config={{ logLevel: 'all' }}
     queries={{}}
+    replyType="QUOTE_REPLY"
   />
 );
 export const user2 = () => fitPageSize(
@@ -206,7 +219,12 @@ export const user2 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
-  // config={{ logLevel: 'all' }}
+    replyType="QUOTE_REPLY"
+    imageCompression={{
+      compressionRate: 0.5,
+      resizingWidth: 100,
+      resizingHeight: '100px',
+    }}
   />
 );
 export const user3 = () => fitPageSize(
@@ -218,11 +236,7 @@ export const user3 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
-    imageCompression={{
-      compressionRate: 0.5,
-      resizingWidth: 100,
-      resizingHeight: '100px',
-    }}
+    replyType="QUOTE_REPLY"
   />
 );
 
@@ -262,10 +276,25 @@ const CustomApp = () => {
       imageCompression={{ compressionRate: 0.5, resizingWidth: 100, resizingHeight: '100px' }}
     >
       <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'row' }}>
-          <SBChannelList setChannelUrl={setChannelUrl} />
-          <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
+        <SBChannelList setChannelUrl={setChannelUrl} />
+        <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
+          <div style={{ width: '100%' }}>
+            <Conversation
+              channelUrl={channelUrl}
+              onChatHeaderActionClick={() => {
+                setChannelSearch(false);
+                setChannelSettings(true);
+              }}
+              showSearchIcon
+              onSearchClick={() => {
+                setChannelSettings(false);
+                setChannelSearch(true);
+              }}
+            />
+          </div>
+          {channelSearch && (
             <div style={{ width: '100%' }}>
-              <Conversation
+              <MessageSearch
                 channelUrl={channelUrl}
                 onChatHeaderActionClick={() => {
                   setChannelSearch(false);
@@ -281,25 +310,17 @@ const CustomApp = () => {
                 }}
               />
             </div>
-            {channelSearch && (
-              <div style={{ width: '100%' }}>
-                <MessageSearch
-                  channelUrl={channelUrl}
-                  searchString="hello"
-                  onResultClick={() => {}}
-                />
-              </div>
-            )}
-            {channelSettings && (
-              <div style={{ display: 'inline-flex'}}>
-                <ChannelSettings
-                  channelUrl={channelUrl}
-                  onCloseClick={() => setChannelSettings(false)}
-                />
-              </div>
-            )}
-          </div>
+          )}
+          {channelSettings && (
+            <div style={{ display: 'inline-flex' }}>
+              <ChannelSettings
+                channelUrl={channelUrl}
+                onCloseClick={() => setChannelSettings(false)}
+              />
+            </div>
+          )}
         </div>
+      </div>
     </Sendbird>
   );
 };

src/smart-components/ChannelList/utils.js

@@ -248,7 +248,7 @@ export const pubSubHandler = (pubSub, channelListDispatcher) => {
   subScriber.set(topics.UPDATE_USER_MESSAGE, pubSub.subscribe(topics.UPDATE_USER_MESSAGE, (msg) => {
     const { channel, message } = msg;
     const updatedChannel = channel;
-    if (updatedChannel.lastMessage && updatedChannel.lastMessage.messageId === message.messageId) {
+    if (updatedChannel?.lastMessage?.messageId === message.messageId) {
       updatedChannel.lastMessage = message;
     }
     if (channel) {