Merge pull request #92 from sendbird/feat/remove-starting-page

feat: remove startingPage related logic

README.md

@@ -127,10 +127,6 @@ You can customize the UI of the ChatBot by using the `ChatAiWidget` component. T
 import { ChatAiWidget } from "@sendbird/chat-ai-widget";
 import '@sendbird/chat-ai-widget/dist/style.css';
 
-import { ReactComponent as StartingPageLogo } from './icons/sendbird-logo-starting-page.svg';
-import { ReactComponent as StartingPageBackground } from './icons/starting-page-bg-image-svg.svg';
-
-
 const customConstants = {
   applicationId: 'AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67', // Your Sendbird application ID
   botId: 'khan-academy-bot', // Your Sendbird bot ID
@@ -188,24 +184,6 @@ const customConstants = {
       'https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?ix' +
       'lib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
   },
-  startingPageContent: {
-    headerContent: {
-      headerOne: "I'm Khan Academy Support Bot",
-      headerTwo: 'Ask me anything!',
-    },
-    messageContent: {
-      header: 'AI ChatBot',
-      body: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!",
-    },
-    logoContent: {
-      Component: StartingPageLogo,
-      width: '100px',
-    },
-    backGroundContent: {
-      Component: StartingPageBackground,
-      height: '240px',
-    },
-  },
   chatBottomContent: {
     text: 'Sendbird AI ChatBot',
     backgroundColor:
@@ -237,7 +215,6 @@ const App = () => {
       suggestedMessageContent={customConstants.suggestedMessageContent}
       firstMessageData={customConstants.firstMessageData}
       createGroupChannelParams={customConstants.createGroupChannelParams}
-      startingPageContent={customConstants.startingPageContent}
       chatBottomContent={customConstants.chatBottomContent}
       messageBottomContent={customConstants.messageBottomContent}
       replacementTextList={customConstants.replacementTextList}

packages/url-webdemo/src/App.tsx

@@ -23,7 +23,6 @@ function App() {
         botNickName={initialState.botNickName}
         suggestedMessageContent={initialState.suggestedMessageContent}
         createGroupChannelParams={initialState.createGroupChannelParams}
-        startingPageContent={initialState.startingPageContent}
         replacementTextList={initialState.replacementTextList}
         messageBottomContent={initialState.messageBottomContent}
         customBetaMarkText="DEMO"

packages/url-webdemo/src/const.ts

@@ -1,5 +1,3 @@
-import { ReactComponent as SendbirdLogo } from './icons/sendbird-logo-starting-page.svg';
-import { ReactComponent as StartingPageBackground } from './icons/starting-page-bg-image-svg.svg';
 import { uuid } from './utils';
 
 export const USER_ID = uuid();
@@ -43,7 +41,6 @@ export interface DemoConstant {
   wsHost: string;
   suggestedMessageContent: SuggestedMessageContent;
   createGroupChannelParams: CreateGroupChannelParams;
-  startingPageContent: StartingPageContent;
   botNickName: string;
   replacementTextList: string[][];
   customRefreshComponent?: Partial<CustomRefreshComponent>;
@@ -111,20 +108,6 @@ export const DEMO_CONSTANTS = {
         'https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?ix' +
         'lib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
     },
-    startingPageContent: {
-      headerContent: {
-        headerOne: 'SmartAssistant',
-        headerTwo: 'AI-powered knowledge chatbot',
-      },
-      logoContent: {
-        Component: SendbirdLogo,
-        width: '100px',
-      },
-      backGroundContent: {
-        Component: StartingPageBackground,
-        height: '240px',
-      },
-    },
     replacementTextList: [['Clark', 'SmartAssistant']],
     customRefreshComponent: {
       style: {
@@ -146,20 +129,6 @@ export const DEMO_CONSTANTS = {
         'https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?ix' +
         'lib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
     },
-    startingPageContent: {
-      headerContent: {
-        headerOne: "I'm Docs AI Assistant",
-        headerTwo: 'Ask us anything about Sendbird Docs!',
-      },
-      logoContent: {
-        Component: SendbirdLogo,
-        width: '100px',
-      },
-      backGroundContent: {
-        Component: StartingPageBackground,
-        height: '240px',
-      },
-    },
     replacementTextList: [['the Text extracts', 'Sendbird documentation']],
     ...commonConstants,
   },
@@ -169,30 +138,3 @@ export interface CreateGroupChannelParams {
   name: string;
   coverUrl: string;
 }
-
-interface StartingPageContent {
-  headerContent: StartingPageHeaderContent;
-  messageContent: StartingMessageContent;
-  logoContent: StringPageLogoContent;
-  backGroundContent: BackGroundContent;
-}
-
-interface BackGroundContent {
-  Component: React.FC;
-  height: string;
-}
-
-interface StringPageLogoContent {
-  Component: React.FC;
-  width: string;
-}
-
-interface StartingPageHeaderContent {
-  headerOne: string;
-  headerTwo: string;
-}
-
-interface StartingMessageContent {
-  header: string;
-  body: string;
-}

src/App.tsx

@@ -21,7 +21,6 @@ const App = (props: Props) => {
       suggestedMessageContent={props.suggestedMessageContent}
       firstMessageData={props.firstMessageData}
       createGroupChannelParams={props.createGroupChannelParams}
-      startingPageContent={props.startingPageContent}
       chatBottomContent={props.chatBottomContent}
       messageBottomContent={props.messageBottomContent}
       replacementTextList={props.replacementTextList}

src/components/Chat.tsx

@@ -14,7 +14,6 @@ import {
   ConstantStateProvider,
 } from '../context/ConstantContext';
 import { HashedKeyProvider } from '../context/HashedKeyContext';
-import SBConnectionStateProvider from '../context/SBConnectionContext';
 import { useChannelStyle } from '../hooks/useChannelStyle';
 import { getTheme } from '../theme';
 import { assert, isMobile } from '../utils';
@@ -26,7 +25,6 @@ const SBComponent = () => {
     userId,
     userNickName,
     configureSession,
-    enableEmojiFeedback,
     enableMention,
     customUserAgentParam,
   } = useConstantState();
@@ -77,7 +75,6 @@ const SBComponent = () => {
       configureSession={configureSession}
       customExtensionParams={userAgentCustomParams.current}
       breakPoint={isMobile}
-      isReactionEnabled={enableEmojiFeedback}
       isMentionEnabled={enableMention}
       theme={theme}
       colorSet={customColorSet}
@@ -144,9 +141,7 @@ export const Chat = ({
         {...constantProps}
       >
         <HashedKeyProvider hashedKey={hashedKey ?? null}>
-          <SBConnectionStateProvider>
-            {isOpen && <SBComponent />}
-          </SBConnectionStateProvider>
+          {isOpen && <SBComponent />}
         </HashedKeyProvider>
       </ConstantStateProvider>
     </ThemeProvider>

src/components/CustomChannel.tsx

@@ -1,41 +1,15 @@
 import { User } from '@sendbird/chat';
 import { type SendbirdGroupChat } from '@sendbird/chat/groupChannel';
-import {
-  ChannelProvider,
-  useChannelContext,
-} from '@sendbird/uikit-react/Channel/context';
+import { ChannelProvider } from '@sendbird/uikit-react/Channel/context';
 import { default as useSendbirdStateContext } from '@sendbird/uikit-react/useSendbirdStateContext';
-import { useEffect, useState } from 'react';
 
 import { CustomChannelComponent } from './CustomChannelComponent';
 import LoadingScreen from './LoadingScreen';
 import { useConstantState } from '../context/ConstantContext';
-import { useSbConnectionState } from '../context/SBConnectionContext';
 import { useCreateGroupChannel } from '../hooks/useCreateGroupChannel';
 import { useGetBotUser } from '../hooks/useGetBotUser';
 import { assert } from '../utils';
 
-function Channel(props: { createGroupChannel: () => void; botUser: User }) {
-  const { sbConnectionStatus } = useSbConnectionState();
-  const { setInitialTimeStamp } = useChannelContext();
-  const [channelReady, setChannelReady] = useState(false);
-
-  useEffect(() => {
-    if (sbConnectionStatus === 'CONNECTED') {
-      setChannelReady(true);
-      // Initialize the timestamp to be sure the first message is successfully sent,
-      // and then render the channel UI after 1 second.
-      setInitialTimeStamp(null);
-    }
-  }, [sbConnectionStatus]);
-
-  if (channelReady) {
-    return <CustomChannelComponent {...props} />;
-  }
-
-  return <LoadingScreen />;
-}
-
 export default function CustomChannel() {
   const { botId, instantConnect } = useConstantState();
   const store = useSendbirdStateContext();
@@ -59,7 +33,10 @@ export default function CustomChannel() {
       scrollBehavior="smooth"
       reconnectOnIdle={false}
     >
-      <Channel createGroupChannel={createGroupChannel} botUser={botUser} />
+      <CustomChannelComponent
+        createGroupChannel={createGroupChannel}
+        botUser={botUser}
+      />
     </ChannelProvider>
   );
 }