diff --git a/README.md b/README.md index 162f4152a..1ae25f1fd 100644 --- a/README.md +++ b/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} diff --git a/packages/url-webdemo/src/App.tsx b/packages/url-webdemo/src/App.tsx index 5df7487ff..50eaf6020 100644 --- a/packages/url-webdemo/src/App.tsx +++ b/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" diff --git a/packages/url-webdemo/src/const.ts b/packages/url-webdemo/src/const.ts index 76d0cf0df..c15b324d8 100644 --- a/packages/url-webdemo/src/const.ts +++ b/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; @@ -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; -} diff --git a/packages/url-webdemo/src/icons/starting-page-background-small.png b/packages/url-webdemo/src/icons/starting-page-background-small.png deleted file mode 100644 index 5186d1c77..000000000 Binary files a/packages/url-webdemo/src/icons/starting-page-background-small.png and /dev/null differ diff --git a/packages/url-webdemo/src/icons/starting-page-background.png b/packages/url-webdemo/src/icons/starting-page-background.png deleted file mode 100644 index c4b1f2714..000000000 Binary files a/packages/url-webdemo/src/icons/starting-page-background.png and /dev/null differ diff --git a/packages/url-webdemo/src/icons/starting-page-background.svg b/packages/url-webdemo/src/icons/starting-page-background.svg deleted file mode 100644 index 7284a1154..000000000 --- a/packages/url-webdemo/src/icons/starting-page-background.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/url-webdemo/src/icons/starting-page-bg-image-svg.svg b/packages/url-webdemo/src/icons/starting-page-bg-image-svg.svg deleted file mode 100644 index 41dc4c9fe..000000000 --- a/packages/url-webdemo/src/icons/starting-page-bg-image-svg.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/url-webdemo/src/icons/starting-page-bg-image.png b/packages/url-webdemo/src/icons/starting-page-bg-image.png deleted file mode 100644 index 6da55398a..000000000 Binary files a/packages/url-webdemo/src/icons/starting-page-bg-image.png and /dev/null differ diff --git a/packages/url-webdemo/src/icons/starting-page-bg-image.webp b/packages/url-webdemo/src/icons/starting-page-bg-image.webp deleted file mode 100644 index 13a146190..000000000 Binary files a/packages/url-webdemo/src/icons/starting-page-bg-image.webp and /dev/null differ diff --git a/src/App.tsx b/src/App.tsx index d7ad89243..f13ea4750 100644 --- a/src/App.tsx +++ b/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} diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index 2f3d77323..031b47838 100644 --- a/src/components/Chat.tsx +++ b/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} > - - {isOpen && } - + {isOpen && } diff --git a/src/components/CustomChannel.tsx b/src/components/CustomChannel.tsx index 81edbd630..3e40db8e8 100644 --- a/src/components/CustomChannel.tsx +++ b/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 ; - } - - return ; -} - export default function CustomChannel() { const { botId, instantConnect } = useConstantState(); const store = useSendbirdStateContext(); @@ -59,7 +33,10 @@ export default function CustomChannel() { scrollBehavior="smooth" reconnectOnIdle={false} > - + ); } diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index e23d95294..08b43ba64 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -29,7 +29,6 @@ import { } from '../utils/messages'; interface RootStyleProps { - hidePlaceholder: boolean; height: string; isInputActive: boolean; } @@ -40,7 +39,7 @@ const Root = styled.div` border: none; .sendbird-place-holder__body { - display: ${({ hidePlaceholder }) => (hidePlaceholder ? 'none' : 'block')}; + display: block; } .sendbird-message-input-wrapper { @@ -108,10 +107,6 @@ const Root = styled.div` } `; -export interface StartingPageAnimatorProps { - isStartingPage: boolean; -} - type CustomChannelComponentProps = { botUser: User; createGroupChannel?: () => void; @@ -136,9 +131,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { (lastMessage as ClientUserMessage)?.sender?.userId === botUser.userId; const [activeSpinnerId, setActiveSpinnerId] = useState(-1); - - const startingPagePlaceHolder = - allMessages.length === 1 && lastMessage.messageType === 'admin'; + const messageCount = allMessages?.length ?? 0; const lastMessageMeta = useMemo(() => { let messageMeta: MessageMeta | null; @@ -159,7 +152,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { const isStaticReplyVisible = allMessages && - allMessages.length > 1 && + messageCount > 1 && !(lastMessage?.messageType === 'admin') && lastMessage.sender?.userId === botUser.userId && // in streaming @@ -201,14 +194,14 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { const grouppedMessages = useMemo( () => groupMessagesByShortSpanTime(allMessages), - [allMessages.length] + [messageCount] ); const botWelcomeMessages = useMemo(() => { return getBotWelcomeMessages(allMessages, botUser.userId); - }, [allMessages.length]); + }, [messageCount]); return ( - + { return channel && createGroupChannel && botUser ? ( @@ -239,6 +232,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) { chainTop={grouppedMessage?.chaintop} chainBottom={grouppedMessage?.chainBottom} isBotWelcomeMessage={isBotWelcomeMessage} + messageCount={messageCount} /> {message.messageId === lastMessage.messageId && dynamicReplyOptions.length > 0 && ( diff --git a/src/components/CustomChannelHeader.tsx b/src/components/CustomChannelHeader.tsx index f0261f427..6a739d3bc 100644 --- a/src/components/CustomChannelHeader.tsx +++ b/src/components/CustomChannelHeader.tsx @@ -10,7 +10,6 @@ import styled from 'styled-components'; import BetaLogo from './BetaLogo'; import BotProfileImage from './BotProfileImage'; import { useConstantState } from '../context/ConstantContext'; -import { useSbConnectionState } from '../context/SBConnectionContext'; import { ReactComponent as CloseButton } from '../icons/ic-widget-close.svg'; import { isMobile } from '../utils'; @@ -71,11 +70,9 @@ export default function CustomChannelHeader(props: Props) { const { channel, createGroupChannel, botUser } = props; const { betaMark, customBetaMarkText, customRefreshComponent } = useConstantState(); - const { setFirstMessage } = useSbConnectionState(); const { setIsOpen } = useConstantState(); function onClickRenewButton() { - setFirstMessage(null); createGroupChannel(); customRefreshComponent?.onClick?.(); // window.location.reload(); diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx index 8f3d51b21..e7ac42c40 100644 --- a/src/components/CustomMessage.tsx +++ b/src/components/CustomMessage.tsx @@ -1,6 +1,5 @@ import { User } from '@sendbird/chat'; import { UserMessage } from '@sendbird/chat/message'; -import { useChannelContext } from '@sendbird/uikit-react/Channel/context'; // eslint-disable-next-line import/no-unresolved import { EveryMessage } from 'SendbirdUIKitGlobal'; @@ -29,9 +28,10 @@ type Props = { activeSpinnerId: number; botUser: User; lastMessageRef: React.RefObject; + isBotWelcomeMessage: boolean; + messageCount: number; chainTop?: boolean; chainBottom?: boolean; - isBotWelcomeMessage: boolean; }; export default function CustomMessage(props: Props) { @@ -43,11 +43,10 @@ export default function CustomMessage(props: Props) { chainTop, chainBottom, isBotWelcomeMessage, + messageCount, } = props; const { replacementTextList, userId } = useConstantState(); - const { allMessages } = useChannelContext(); - // admin message if (message.messageType === 'admin') { return
{}
; @@ -60,7 +59,7 @@ export default function CustomMessage(props: Props) { botUser={botUser} message={message} bodyComponent={} - messageCount={allMessages.length} + messageCount={messageCount} chainTop={chainTop} chainBottom={chainBottom} isBotWelcomeMessage={isBotWelcomeMessage} @@ -111,7 +110,7 @@ export default function CustomMessage(props: Props) { bodyComponent={ } - messageCount={allMessages.length} + messageCount={messageCount} chainTop={chainTop} chainBottom={chainBottom} isBotWelcomeMessage={isBotWelcomeMessage} @@ -137,7 +136,7 @@ export default function CustomMessage(props: Props) { ` - width: ${(props: InputProps) => - props.isActive ? 'calc(100% - 66px)' : '100%'}; - transition: ${(props: InputProps) => - props.isActive ? 'none' : 'width 0.5s'}; - transition-timing-function: ease; - padding: 8px 16px; - resize: none; - border: none; - outline: none; - max-height: 116px; - background: #eeeeee; - border-radius: 20px; - height: auto; - ::placeholder { - color: var(--sendbird-dark-onlight-03); - } -`; - -const InputContainer = styled.div` - width: 100%; -`; - -const InnerContainer = styled.div` - padding: 12px 16px; - display: flex; - justify-content: space-between; - align-items: center; -`; - -const Button = styled.div` - padding: 4px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - svg { - path { - fill: ${({ theme }) => theme.accentColor}; - } - } -`; - -export function MessageInput({ - onSendMessage, -}: { - onSendMessage: (message: string) => void; -}) { - const inputRef = useRef(null); - const [showSendButton, setShowSendButton] = useState(false); - const [message, setMessage] = useState(''); - - useEffect(() => { - if (!message) { - setShowSendButton(false); - if (inputRef.current) { - inputRef.current.style.height = 'auto'; - } - } - }, [message]); - - const throttledIncrement = useThrottle((e?) => { - if (inputRef.current) { - inputRef.current.style.height = 'auto'; - inputRef.current.style.height = `${e.target.scrollHeight - 16}px`; - } - }, 10); - - function handleMessageChange(event: React.ChangeEvent) { - const value = event.target.value; - setMessage(value); - setShowSendButton(value.length > 0); - } - - function onPressEnter(event: React.KeyboardEvent) { - if (!event.shiftKey && event.charCode === 13) { - event.preventDefault(); - onSendMessage(message); - setMessage(''); - } - } - - return ( - - - - {showSendButton && ( - - )} - - - ); -} -export default function CustomMessageInput() { - const store = useSendbirdStateContext(); - const sendUserMessage = sendbirdSelectors.getSendUserMessage(store); - const { currentGroupChannel } = useChannelContext(); - - function sendInputAsUserMessage(message: string) { - if (message.length > 0 && currentGroupChannel) { - const params: UserMessageCreateParams = { - message, - }; - sendUserMessage(currentGroupChannel, params) - .onPending(() => { - // console.log('## onPending', message); - }) - .onSucceeded(() => { - // console.log('## onSucceeded', message); - }) - .onFailed(() => { - // console.log('## onFailed', error); - }); - } - } - return ( - { - sendInputAsUserMessage(message); - }} - /> - ); -} diff --git a/src/components/StartingPage.tsx b/src/components/StartingPage.tsx deleted file mode 100644 index e6e89fc85..000000000 --- a/src/components/StartingPage.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import styled from 'styled-components'; - -import BetaLogo from './BetaLogo'; -import ChatBottom from './ChatBottom'; -import { StartingPageAnimatorProps } from './CustomChannelComponent'; -import { MessageInput } from './CustomMessageInput'; -import PendingMessage from './PendingMessage'; -import { useConstantState } from '../context/ConstantContext'; -import { useSbConnectionState } from '../context/SBConnectionContext'; -import botMessageImage from '../icons/bot-message-image.png'; - -const BackgroundContainer = styled.div` - position: absolute; - max-width: 400px; -`; - -const TitleContainer = styled.div` - width: calc(100% - 64px); - position: absolute; - padding: 32px; -`; - -const Root = styled.div` - position: relative; - top: ${(props: StartingPageAnimatorProps) => - props.isStartingPage ? '0' : '-300px'}; - opacity: ${(props: StartingPageAnimatorProps) => - props.isStartingPage ? '1' : '0'}; - z-index: 20; - width: 100%; - transition: ${(props: StartingPageAnimatorProps) => - props.isStartingPage ? 'none' : 'all 0.5s ease'}; - text-align: start; -`; - -const HeaderOne = styled.div` - color: #ffffff; - opacity: 0.8; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 28px; - font-family: 'Gellix', sans-serif; -`; - -const HeaderTwo = styled.div` - font-weight: 700; - //font-size: 27px; - margin-top: 2px; - font-family: 'Gellix', sans-serif; - color: #ffffff; - //margin-top: 8px; - font-size: 32px; - line-height: 40px; -`; - -export const HeaderOneContainer = styled.div` - display: flex; - align-items: center; - gap: 8px; - margin: 14px 0 0; -`; - -interface StartMessageBodyProps { - outgoing?: boolean; -} -const StartMessageContainer = styled.div` - display: flex; - align-items: flex-end; - box-sizing: border-box; - justify-content: ${({ outgoing }) => (outgoing ? 'flex-end' : 'flex-start')}; - padding-right: 12px; - margin-bottom: 6px; - flex-wrap: wrap; - gap: 8px; - position: relative; - width: calc(100%); -`; - -const StartMessageBodyContainer = styled.div` - font-size: 14px; - color: ${({ outgoing }) => - outgoing ? '#ffffff' : 'var(--sendbird-dark-onlight-01)'}; - max-width: 225px; - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.43; - letter-spacing: normal; - - @media (max-width: 350px) { - max-width: 200px; - } -`; - -const StartMessageHeader = styled.div` - font-style: normal; - font-weight: 700; - font-size: 12px; - line-height: 12px; - color: var(--sendbird-dark-onlight-02); - transition: color 0.5s ease 0s; - margin: 0px 0px 4px 12px; -`; - -const StartMessageBody = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 8px 12px; - gap: 8px; - border-radius: 16px; - background-color: ${({ outgoing }) => - outgoing ? '#742ddd' : 'rgb(238, 238, 238)'}; -`; - -const StartMessageBodyContent = styled.div` - width: 100%; - text-align: left; - white-space: pre-line; - word-break: break-word; - line-height: 1.43; -`; - -const MessageInputContainer = styled.div` - position: fixed; - bottom: 0; - width: 100%; -`; - -interface Props { - isStartingPage: boolean; -} - -export function StartingPage(props: Props) { - const { isStartingPage } = props; - // console.log('## isWebDemo: ', isWebDemo); - const { startingPageContent, betaMark, customBetaMarkText, botNickName } = - useConstantState(); - const { - sbConnectionStatus, - setSbConnectionStatus, - firstMessage, - setFirstMessage, - } = useSbConnectionState(); - - return ( - - - - -
- botProfileImage -
- - - {startingPageContent.messageContent.header === '' - ? botNickName - : startingPageContent.messageContent.header} - - - - {startingPageContent.messageContent.body === '' - ? `Hi~ I'm ${botNickName}. Ask me anything!` - : startingPageContent.messageContent.body} - - - - - {firstMessage !== '' && firstMessage != null && ( - - - - - {firstMessage} - - - - - )} - {sbConnectionStatus !== 'INIT' && ( - - -
- -
- - - )} - - { - setFirstMessage(message); - setSbConnectionStatus('CONNECTING'); - }} - /> - - - - - - - - {startingPageContent.headerContent.headerOne === '' - ? `I'm ${botNickName}` - : startingPageContent.headerContent.headerOne} - - {betaMark ? ( - - {customBetaMarkText} - - ) : null} - - {startingPageContent.headerContent.headerTwo} - - - ); -} diff --git a/src/const.ts b/src/const.ts index bc26b8f9c..bb5518603 100644 --- a/src/const.ts +++ b/src/const.ts @@ -3,9 +3,7 @@ import { type SendbirdGroupChat } from '@sendbird/chat/groupChannel'; import { type SendbirdOpenChat } from '@sendbird/chat/openChannel'; import React from 'react'; -import { ReactComponent as StartingPageLogo } from './icons/icon-widget-chatbot.svg'; import { ReactComponent as RefreshIcon } from './icons/refresh-icon.svg'; -import { ReactComponent as StartingPageBackground } from './icons/starting-page-bg-image-svg.svg'; import { noop, uuid } from './utils'; const USER_ID = uuid(); @@ -66,24 +64,6 @@ export const DEFAULT_CONSTANT: Constant = { '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: '', - headerTwo: 'Ask me anything!', - }, - messageContent: { - header: 'AI ChatBot', - body: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!", - }, - logoContent: { - Component: StartingPageLogo, - width: '30px', - }, - backGroundContent: { - Component: StartingPageBackground, - height: '240px', - }, - }, chatBottomContent: { text: '', }, @@ -131,7 +111,6 @@ export interface Constant { customBetaMarkText: string; suggestedMessageContent: SuggestedMessageContent; createGroupChannelParams: CreateGroupChannelParams; - startingPageContent: StartingPageContent; chatBottomContent: ChatBottomContent; messageBottomContent: MessageBottomContent; replacementTextList: string[][]; @@ -168,13 +147,6 @@ export const LOCAL_MESSAGE_CUSTOM_TYPE = { confirmation: 'confirmation', }; -export interface StartingPageContent { - headerContent: StartingPageHeaderContent; - messageContent: StartingMessageContent; - logoContent: StringPageLogoContent; - backGroundContent: BackGroundContent; -} - export interface BackGroundContent { Component: React.FC; height: string; @@ -185,21 +157,10 @@ export interface StringPageLogoContent { width: string; } -export interface StartingPageHeaderContent { - headerOne: string; - headerTwo: string; -} - export interface ChatBottomContent { text: string; backgroundColor?: string; } - -export interface StartingMessageContent { - header: string; - body: string; -} - export interface MessageBottomContent { text: string; infoIconText: string; diff --git a/src/context/ConstantContext.tsx b/src/context/ConstantContext.tsx index 661beb377..e777cf047 100644 --- a/src/context/ConstantContext.tsx +++ b/src/context/ConstantContext.tsx @@ -34,8 +34,6 @@ export const ConstantStateProvider = (props: ProviderProps) => { firstMessageData: props.firstMessageData ?? [], createGroupChannelParams: props.createGroupChannelParams ?? initialState.createGroupChannelParams, - startingPageContent: - props.startingPageContent ?? initialState.startingPageContent, chatBottomContent: props.chatBottomContent ?? initialState.chatBottomContent, messageBottomContent: diff --git a/src/context/SBConnectionContext.tsx b/src/context/SBConnectionContext.tsx deleted file mode 100644 index f7449103a..000000000 --- a/src/context/SBConnectionContext.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { createContext, useState, useContext } from 'react'; - -import { useConstantState } from './ConstantContext'; -import { noop } from '../utils'; - -type ConnectionStatus = 'INIT' | 'CONNECTING' | 'CONNECTED'; - -interface ConstantContextProps { - sbConnectionStatus: ConnectionStatus; - setSbConnectionStatus: (status: ConnectionStatus) => void; - firstMessage: string | null; - setFirstMessage: (message: string | null) => void; -} -export const SBConnectionStateContext = createContext({ - sbConnectionStatus: 'INIT', - setSbConnectionStatus: noop, - firstMessage: null, - setFirstMessage: noop, -}); - -type ProviderProps = React.PropsWithChildren; - -const SBConnectionStateProvider = (props: ProviderProps) => { - const { instantConnect } = useConstantState(); - const [sbConnectionStatus, setSbConnectionStatus] = - // Don't need to use this state if instantConnect is true - useState(instantConnect ? 'CONNECTED' : 'INIT'); - const [firstMessage, setFirstMessage] = useState(null); - - return ( - - {props.children} - - ); -}; - -export const useSbConnectionState = () => useContext(SBConnectionStateContext); - -export default SBConnectionStateProvider; diff --git a/src/hooks/useChannelStyle.ts b/src/hooks/useChannelStyle.ts index e141f41b1..4d6942e4e 100644 --- a/src/hooks/useChannelStyle.ts +++ b/src/hooks/useChannelStyle.ts @@ -27,6 +27,7 @@ export const useChannelStyle = ({ const { data, isFetching } = useQuery({ enabled: !!appId && !!botId, queryKey: ['getChannelStyle', appId, botId], + retry: 0, queryFn: async () => { try { const response = await fetch( @@ -37,7 +38,9 @@ export const useChannelStyle = ({ return DEFAULT_CHANNEL_STYLE; } if (!response.ok) { - throw new Error((await response.json()).message || 'Something went wrong'); + throw new Error( + (await response.json()).message || 'Something went wrong' + ); } const data = await (response.json() as unknown as BotStyleResponse); const { bot_style } = data; diff --git a/src/hooks/useCreateGroupChannel.ts b/src/hooks/useCreateGroupChannel.ts index 80cb85741..4b31547bf 100644 --- a/src/hooks/useCreateGroupChannel.ts +++ b/src/hooks/useCreateGroupChannel.ts @@ -4,12 +4,10 @@ import { type SendbirdGroupChat, type GroupChannelCreateParams, } from '@sendbird/chat/groupChannel'; -import * as sendbirdSelectors from '@sendbird/uikit-react/sendbirdSelectors'; import { default as useSendbirdStateContext } from '@sendbird/uikit-react/useSendbirdStateContext'; import { useCallback, useEffect, useState } from 'react'; import { useConstantState } from '../context/ConstantContext'; -import { useSbConnectionState } from '../context/SBConnectionContext'; export function useCreateGroupChannel( currentUser: User | null, @@ -19,10 +17,8 @@ export function useCreateGroupChannel( const [creating, setCreating] = useState(false); const store = useSendbirdStateContext(); const sb: SendbirdGroupChat = store.stores.sdkStore.sdk as SendbirdGroupChat; - const sendUserMessage = sendbirdSelectors.getSendUserMessage(store); const { createGroupChannelParams, instantConnect, firstMessageData } = useConstantState(); - const { setSbConnectionStatus, firstMessage } = useSbConnectionState(); const createAndSetNewChannel = useCallback(async () => { if (!currentUser || !botUser) { @@ -43,28 +39,20 @@ export function useCreateGroupChannel( coverUrl: createGroupChannelParams?.coverUrl, data: paramData, }; - const groupChannel = await sb.groupChannel + await sb.groupChannel .createChannel(params) .then((channel: GroupChannel) => { setChannel(channel); return channel; }); - // We also send the first message to the newly created channel - // if it has a valid string - if (firstMessage !== '' && firstMessage != null) { - await sendUserMessage(groupChannel, { - message: firstMessage, - }); - } } catch (error) { console.error(error); } finally { setCreating(false); - setSbConnectionStatus('CONNECTED'); } // we dont want to watchout for change of whole objects // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentUser?.userId, botUser?.userId, firstMessage]); + }, [currentUser?.userId, botUser?.userId]); useEffect(() => { // console.log('## useCreateGroupChannel: ', currentUser, botUser, sb); @@ -75,7 +63,7 @@ export function useCreateGroupChannel( createAndSetNewChannel(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentUser?.userId, botUser?.userId, firstMessage]); + }, [currentUser?.userId, botUser?.userId]); return [channel, createAndSetNewChannel, creating]; } diff --git a/src/hooks/useSendLocalMessage.ts b/src/hooks/useSendLocalMessage.ts deleted file mode 100644 index 6a248d169..000000000 --- a/src/hooks/useSendLocalMessage.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { GroupChannel } from '@sendbird/chat/groupChannel'; -import { UserMessage } from '@sendbird/chat/message'; -import { useChannelContext } from '@sendbird/uikit-react/Channel/context'; -import { useCallback } from 'react'; - -import { scrollUtil } from '../utils'; - -type OnMessageRecivedPayload = { - channel: GroupChannel; - message: UserMessage; -}; - -type OnMessageRecivedDispatcher = ({ - type, - payload, -}: { - type: 'ON_MESSAGE_RECEIVED'; - payload: OnMessageRecivedPayload; -}) => void; - -export function useSendLocalMessage() { - const channelStore = useChannelContext(); - const currentGroupChannel = channelStore.currentGroupChannel; - // this is the magic function that adds the message to channelStore - const messagesDispatcher = - channelStore.messagesDispatcher as OnMessageRecivedDispatcher; - const useSendLocalMessage = useCallback( - (message: UserMessage) => { - if (currentGroupChannel) { - // https://github.com/sendbird/sendbird-uikit-react/blob/main/src/modules/Channel/context/dux/actionTypes.js - // dispatcher({ - // type: channelActions.ON_MESSAGE_DELETED, - // payload: messageId, - // }); // For deleting local message - messagesDispatcher({ - type: 'ON_MESSAGE_RECEIVED', - payload: { - channel: currentGroupChannel, - message, - }, - }); - scrollUtil(); - } - }, - [currentGroupChannel, messagesDispatcher] - ); - return useSendLocalMessage; -} diff --git a/src/icons/starting-page-background-small.png b/src/icons/starting-page-background-small.png deleted file mode 100644 index 5186d1c77..000000000 Binary files a/src/icons/starting-page-background-small.png and /dev/null differ diff --git a/src/icons/starting-page-background.png b/src/icons/starting-page-background.png deleted file mode 100644 index c4b1f2714..000000000 Binary files a/src/icons/starting-page-background.png and /dev/null differ diff --git a/src/icons/starting-page-background.svg b/src/icons/starting-page-background.svg deleted file mode 100644 index 7284a1154..000000000 --- a/src/icons/starting-page-background.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/icons/starting-page-bg-image-svg.svg b/src/icons/starting-page-bg-image-svg.svg deleted file mode 100644 index 41dc4c9fe..000000000 --- a/src/icons/starting-page-bg-image-svg.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/icons/starting-page-bg-image.png b/src/icons/starting-page-bg-image.png deleted file mode 100644 index 6da55398a..000000000 Binary files a/src/icons/starting-page-bg-image.png and /dev/null differ diff --git a/src/icons/starting-page-bg-image.webp b/src/icons/starting-page-bg-image.webp deleted file mode 100644 index 13a146190..000000000 Binary files a/src/icons/starting-page-bg-image.webp and /dev/null differ