[AC-819] feat: Use bot profileUrl & nickname in the channel header

.env

@@ -1,4 +1,4 @@
 # Vite prefix is required for Vite to load the env variables
 # Plz modify below two env variables on your needs
-VITE_CHAT_WIDGET_APP_ID=AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67
-VITE_CHAT_WIDGET_BOT_ID=khan-academy-bot
+VITE_CHAT_WIDGET_APP_ID=A3E33A85-E4A7-46A4-99B1-EF6833E7DE3A
+VITE_CHAT_WIDGET_BOT_ID=marketing_bot_2

README.md

@@ -185,6 +185,7 @@ const customConstants = {
   enableSourceMessage: false,
   enableEmojiFeedback: true,
   enableMention: true,
+  autoOpen: false,
 };
 
 const App = () => {
@@ -266,6 +267,11 @@ const memoizedConfigureSession = useCallback(
 const customConfigs = {
   // If instantConnect set to `true`, the SDK connection will be established right after mounting the Chat or ChatAiWidget component
   instantConnect: true / false,
+  // `autoOpen` determines whether the chatbot widget automatically opens
+  // when the user opens the browser window.
+  // The default behavior is to open after a certain period,
+  // but setting this option to `true` will keep it open at all times.
+  autoOpen: true / false,
   configureSession: memoizedConfigureSession,
   customRefreshComponent: {
     icon: 'Your SVG icon',
@@ -290,6 +296,7 @@ const App = () => {
       configureSession={customConfigs.configureSession}
       customRefreshComponent={customConfigs.customRefreshComponent}
       instantConnect={customConfigs.instantConnect}
+      autoOpen={customConfigs.autoOpen}
       {...customConstants}
     />
   );

src/App.tsx

@@ -5,6 +5,7 @@ interface Props extends Partial<Constant> {
   applicationId?: string;
   botId?: string;
   hashedKey?: string;
+  autoOpen?: boolean;
 }
 
 const App = (props: Props) => {
@@ -31,6 +32,7 @@ const App = (props: Props) => {
       enableSourceMessage={props.enableSourceMessage}
       enableEmojiFeedback={props.enableEmojiFeedback}
       enableMention={props.enableMention}
+      autoOpen={props.autoOpen}
     />
   );
 };

src/components/BotMessageWithBodyInput.tsx

@@ -1,5 +1,6 @@
 import { User } from '@sendbird/chat';
 import { UserMessage } from '@sendbird/chat/message';
+import Avatar from '@sendbird/uikit-react/ui/Avatar';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
@@ -93,12 +94,11 @@ export default function BotMessageWithBodyInput(props: Props) {
     <Root style={{ zIndex: messageCount === 1 && zIndex ? zIndex : 0 }}>
       {displayProfileImage ? (
         <ImageContainer>
-          <img
-            src={botMessageImage}
+          <Avatar
+            src={botUser?.profileUrl || botMessageImage}
             alt="botProfileImage"
-            style={{
-              height: '28px',
-            }}
+            height="28px"
+            width="28px"
           />
         </ImageContainer>
       ) : (

src/components/ChatAiWidget.tsx

@@ -106,10 +106,11 @@ export interface Props extends Partial<Constant> {
   applicationId?: string;
   botId?: string;
   hashedKey?: string;
+  autoOpen?: boolean;
 }
 
 const ChatAiWidget = (props: Props) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(props.autoOpen ?? false);
   const timer = useRef<NodeJS.Timeout | null>(null);
   const buttonClickHandler = () => {
     if (timer.current !== null) {

src/components/CustomChannelComponent.tsx

@@ -195,8 +195,9 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
     <Root hidePlaceholder={startingPagePlaceHolder} height={'100%'}>
       <ChannelUI
         renderChannelHeader={() => {
-          return channel && createGroupChannel ? (
+          return channel && createGroupChannel && botUser ? (
             <CustomChannelHeader
+              botUser={botUser}
               channel={channel as GroupChannel}
               createGroupChannel={createGroupChannel}
             />

src/components/CustomChannelHeader.tsx

@@ -1,4 +1,6 @@
+import { User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
+import Avatar from '@sendbird/uikit-react/ui/Avatar';
 import styled from 'styled-components';
 
 import BetaLogo from './BetaLogo';
@@ -29,6 +31,10 @@ const Title = styled.div`
   line-height: 20px;
   letter-spacing: -0.2px;
   color: rgba(0, 0, 0, 0.88);
+  max-width: 200px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 const RenewButtonForWidgetDemo = styled.div`
@@ -51,11 +57,12 @@ const RenewButtonContainer = styled.div`
 
 type Props = {
   channel: GroupChannel;
+  botUser: User;
   createGroupChannel: () => void;
 };
 
 export default function CustomChannelHeader(props: Props) {
-  const { channel, createGroupChannel } = props;
+  const { channel, createGroupChannel, botUser } = props;
   const { betaMark, customBetaMarkText, customRefreshComponent } =
     useConstantState();
   const { setFirstMessage } = useSbConnectionState();
@@ -70,14 +77,13 @@ export default function CustomChannelHeader(props: Props) {
   return (
     <Root>
       <SubContainer>
-        <img
-          src={channelHeaderImage}
+        <Avatar
+          src={botUser?.profileUrl || channelHeaderImage}
           alt="channelHeaderImage"
-          style={{
-            height: '34px',
-          }}
+          height="34px"
+          width="34px"
         />
-        <Title>{channel.name}</Title>
+        <Title>{botUser?.nickname || channel.name}</Title>
         {!isMobile && (betaMark || customBetaMarkText) && (
           <BetaLogo>{customBetaMarkText}</BetaLogo>
         )}

src/components/CustomMessage.tsx

@@ -47,8 +47,6 @@ export default function CustomMessage(props: Props) {
   const { replacementTextList, userId } = useConstantState();
 
   const { allMessages } = useChannelContext();
-  const firstMessage: UserMessage = allMessages[0] as UserMessage;
-  const firstMessageId = firstMessage?.messageId ?? -1;
 
   // admin message
   if (message.messageType === 'admin') {

src/css/index.css

@@ -54,4 +54,4 @@
 
 .sendbird-message-input .sendbird-message-input-text-field {
   overflow-y: hidden;
-}
+}