feat: add enableWidgetExpandButton option (#334)

## Changes
- Add `enableWidgetExpandButton` option

README.md

@@ -126,6 +126,7 @@ export default App;
 | `messageInputControls.blockWhileBotResponding` | `boolean \| number` | No | N/A | Allows to control enabled/disabled state of the message input for waiting for the bot's reply mesage. If number value is given, a timer will be set to force unblock the message input. |
 | `dateLocale` | `Locale` | No | `enUS` | Locale value to be applied to string values of message timestamp and date separator. Locale values must be imported from `date-fns`.                                                    |
 | `enableHideWidgetForDeactivatedUser` | `boolean`  | No       | `false`       | Determines whether the chatbot widget is hidden when the user is deactivated.                                                                                                           |
+| `enableWidgetExpandButton` | `boolean` | No | `false` | Determines whether the expand button is displayed in the chatbot widget. |
 
 ## For internal contributors
 - [Release guide](./release-guide.md)

src/components/CustomChannelHeader.tsx

@@ -68,7 +68,8 @@ interface Props {
   channelName?: string;
 }
 export default function CustomChannelHeader({ botProfileUrl, botNickname, channelName, onRenewButtonClick }: Props) {
-  const { betaMark, customBetaMarkText, customRefreshComponent, isMobileView, callbacks } = useConstantState();
+  const { betaMark, customBetaMarkText, customRefreshComponent, isMobileView, enableWidgetExpandButton } =
+    useConstantState();
   const { setIsOpen } = useWidgetState();
 
   async function handleRenewButtonClick() {
@@ -110,7 +111,7 @@ export default function CustomChannelHeader({ botProfileUrl, botNickname, channe
                     right: isMobileView
                       ? 0
                       : // to make the refresh icon appear next to the close icon in the widget window
-                        callbacks?.onWidgetExpandStateChange
+                        enableWidgetExpandButton
                         ? RIGHT_WITH_EXPAND_BUTTON
                         : RIGHT_WITHOUT_EXPAND_BUTTON,
                   }

src/components/widget/WidgetWindow.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { WIDGET_WINDOW_Z_INDEX, elementIds } from '../../const';
+import { elementIds, WIDGET_WINDOW_Z_INDEX } from '../../const';
 import { useConstantState } from '../../context/ConstantContext';
 import { useWidgetState } from '../../context/WidgetStateContext';
 import CloseIcon from '../../icons/ic-widget-close.svg';
@@ -105,7 +105,7 @@ const StyledCloseButton = styled.button`
 const WidgetWindow = ({ children }: { children: React.ReactNode }) => {
   const { isVisible, isOpen, setIsOpen } = useWidgetState();
   const [isExpanded, setIsExpanded] = useState(false);
-  const { callbacks } = useConstantState();
+  const { callbacks, enableWidgetExpandButton } = useConstantState();
 
   const onExpandButtonToggle = () => {
     setIsExpanded((prev) => {
@@ -117,7 +117,7 @@ const WidgetWindow = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <StyledWidgetWindowWrapper isOpen={isOpen && isVisible} isExpanded={isExpanded} id={elementIds.widgetWindow}>
-      {callbacks?.onWidgetExpandStateChange && (
+      {enableWidgetExpandButton && (
         <StyledExpandButton onClick={onExpandButtonToggle}>
           {isExpanded ? <CollapseIcon id={elementIds.collapseIcon} /> : <ExpandIcon id={elementIds.expandIcon} />}
         </StyledExpandButton>

src/const.ts

@@ -66,6 +66,7 @@ export const DEFAULT_CONSTANT = {
   enableEmojiFeedback: true,
   enableMention: true,
   enableResetHistoryOnConnect: false,
+  enableWidgetExpandButton: false,
   dateLocale: enUS,
   enableHideWidgetForDeactivatedUser: false,
   messageInputControls: {
@@ -303,6 +304,11 @@ interface ConstantFeatureFlags {
    * @description Hide widget for deactivated user.
    * */
   enableHideWidgetForDeactivatedUser: boolean;
+  /**
+   * @public
+   * @description Enable widget expand button.
+   * */
+  enableWidgetExpandButton: boolean;
 }
 
 export interface SuggestedReply {

src/context/ConstantContext.tsx

@@ -89,6 +89,7 @@ export const ConstantStateProvider = (props: PropsWithChildren<ConstantContextPr
         enableResetHistoryOnConnect: props.enableResetHistoryOnConnect ?? initialState.enableResetHistoryOnConnect,
         enableHideWidgetForDeactivatedUser:
           props.enableHideWidgetForDeactivatedUser ?? initialState.enableHideWidgetForDeactivatedUser,
+        enableWidgetExpandButton: props.enableWidgetExpandButton ?? initialState.enableWidgetExpandButton,
         // ----- Legacy props ----- //
         betaMark: props.betaMark ?? initialState.betaMark,
         customBetaMarkText: props.customBetaMarkText ?? initialState.customBetaMarkText,