feat: support custom widget button rendering

src/App.tsx

@@ -6,6 +6,11 @@ interface Props extends Partial<Constant> {
   botId?: string;
   hashedKey?: string;
   autoOpen?: boolean;
+  renderWidgetToggleButton?: (props: {
+    onClick: () => void;
+    accentColor: string;
+    isOpen: boolean;
+  }) => React.ReactElement;
 }
 
 const App = (props: Props) => {
@@ -33,6 +38,7 @@ const App = (props: Props) => {
       enableMention={props.enableMention}
       customUserAgentParam={props.customUserAgentParam}
       autoOpen={props.autoOpen}
+      renderWidgetToggleButton={props.renderWidgetToggleButton}
     />
   );
 };

src/components/ChatAiWidget.tsx

@@ -1,5 +1,4 @@
 import '@sendbird/uikit-react/dist/index.css';
-import '../css/index.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -101,22 +100,17 @@ const StyledArrowIcon = styled.span<{ isOpen: boolean }>`
         `;
   }}
 `;
-export interface Props extends Partial<Constant> {
-  applicationId: string;
-  botId: string;
-  hashedKey?: string;
-  autoOpen?: boolean;
-}
 
+interface ToggleButtonProps {
+  onClick: () => void;
+  accentColor: string;
+  isOpen: boolean;
+}
 const WidgetToggleButton = ({
   onClick,
   accentColor,
   isOpen,
-}: {
-  onClick: () => void;
-  accentColor: string;
-  isOpen: boolean;
-}) => {
+}: ToggleButtonProps) => {
   return (
     <StyledWidgetButtonWrapper
       id="aichatbot-widget-button"
@@ -133,6 +127,14 @@ const WidgetToggleButton = ({
   );
 };
 
+export interface Props extends Partial<Constant> {
+  applicationId: string;
+  botId: string;
+  hashedKey?: string;
+  autoOpen?: boolean;
+  renderWidgetToggleButton?: (props: ToggleButtonProps) => React.ReactElement;
+}
+
 const Component = (props: Props) => {
   const { isFetching, ...channelStyle } = useChannelStyle({
     appId: props.applicationId,
@@ -164,20 +166,20 @@ const Component = (props: Props) => {
     }
   }, [channelStyle.autoOpen, props.autoOpen]);
 
+  const toggleButtonProps = {
+    onClick: buttonClickHandler,
+    accentColor: channelStyle.accentColor,
+    isOpen,
+  };
   return isMobile && isOpen ? (
     <MobileContainer width={mobileContainerWidth}>
       <Chat {...props} isOpen={isOpen} setIsOpen={setIsOpen} />
     </MobileContainer>
   ) : (
     <>
       <WidgetWindow isOpen={isOpen} setIsOpen={setIsOpen} {...props} />
-      {!isFetching && (
-        <WidgetToggleButton
-          onClick={buttonClickHandler}
-          accentColor={channelStyle.accentColor}
-          isOpen={isOpen}
-        />
-      )}
+      {props.renderWidgetToggleButton?.(toggleButtonProps) ||
+        (!isFetching && <WidgetToggleButton {...toggleButtonProps} />)}
     </>
   );
 };