@aslaluroba/help-center-react 3.0.3 → 3.0.5

package/dist/ui/chatbot-popup/chat-window-screen/footer.d.ts

@@ -1,11 +1,9 @@
-import React from 'react';
 interface ChatWindowFooterProps {
     inputMessage: string;
     setInputMessage: (e: string) => void;
     handleKeyDown: (e: React.KeyboardEvent) => void;
     handleSendMessage: () => void;
     isLoading: boolean;
-    isAblyConnected: boolean;
 }
 declare const ChatWindowFooter: React.FC<ChatWindowFooterProps>;
 export default ChatWindowFooter;

package/dist/ui/chatbot-popup/chat-window-screen/header.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface ChatWindowHeaderProps {
     isShowList: boolean;
     setIsShowList?: (isShowList: boolean) => void;

package/dist/ui/chatbot-popup/chat-window-screen/index.d.ts

@@ -7,5 +7,5 @@ interface ChatWindowProps {
     needsAgent: boolean;
     isAblyConnected: boolean;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus, isAblyConnected }: ChatWindowProps) => React.JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/ui/chatbot-popup/error-screen/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatBotErrorScreenProps {
     onClose: () => void;
     error: string;

package/dist/ui/chatbot-popup/home-screen/card.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface CardProps {
     text: string;
     handleClick: () => void;

package/dist/ui/chatbot-popup/home-screen/chat-now-card.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatNowCardProps {
     setIsShowList: (isShowList: boolean) => void;
 }

package/dist/ui/chatbot-popup/home-screen/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface HomeScreenProps {
     setIsShowList: (isShowList: boolean) => void;
     onClose: () => void;

package/dist/ui/chatbot-popup/loading-screen/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatBotLoadingScreenProps {
     isShowList: boolean;
     onClose: () => void;

package/dist/ui/chatbot-popup/options-list-screen/expanded-option.d.ts

@@ -1,5 +1,4 @@
 import { Option } from '@/lib/types';
-import React from 'react';
 interface ExpandedOptionProps {
     option: Option;
     handleStartChat: (option: Option) => void;

package/dist/ui/chatbot-popup/options-list-screen/header.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface OptionsListHeaderProps {
     handleBack: () => void;
     showHelpScreen: boolean;

package/dist/ui/chatbot-popup/options-list-screen/index.d.ts

@@ -1,5 +1,4 @@
 import { HelpScreenData, Option } from '@/lib/types';
-import React from 'react';
 interface OptionsListScreenProps {
     helpScreen: HelpScreenData | null;
     expandedOption: Option | null;

package/dist/ui/chatbot-popup/options-list-screen/option-card.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface OptionCardProps {
     title: string;
 }

package/dist/ui/confirmation-modal/index.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 interface ConfirmationModalProps {
     title: string;
     message: string;
     onCancel: () => void;
     onConfirm: () => void;
 }
-declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => React.JSX.Element;
+declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmationModal;

package/dist/ui/floating-message.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 interface FloatingMessageProps {
     message: string;
     onClose: () => void;
 }
-export declare function FloatingMessage({ message, onClose }: FloatingMessageProps): React.JSX.Element;
+export declare function FloatingMessage({ message, onClose }: FloatingMessageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/help-button.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 interface HelpButtonProps {
     onClick: () => void;
 }
-export declare function HelpButton({ onClick }: HelpButtonProps): React.JSX.Element;
+export declare function HelpButton({ onClick }: HelpButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/help-center.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../globals.css';
 interface HelpCenterProps {
     helpScreenId: string;
@@ -13,5 +12,5 @@ interface HelpCenterProps {
     messageLabel?: string | null;
     showHelpScreen?: boolean;
 }
-export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, }: HelpCenterProps): React.JSX.Element;
+export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, }: HelpCenterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/help-popup.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HelpScreenData, Message, Option } from '@/lib/types';
 type HelpPopupProps = {
     isOpen: boolean;
@@ -20,5 +19,5 @@ type HelpPopupProps = {
     setSelectedOption: (option: Option | null) => void;
     showHelpScreen: boolean;
 };
-export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, }: HelpPopupProps): React.JSX.Element;
+export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, }: HelpPopupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/review-dialog/index.d.ts

@@ -1,5 +1,4 @@
 import { ReviewProps } from '@/lib/types';
-import React from 'react';
 interface ReviewDialogProps {
     handleSubmit: ({ comment, rating }: ReviewProps) => void;
     onClose: () => void;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -12,15 +12,12 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./react": {
-      "import": "./dist/react.esm.js",
-      "require": "./dist/react.js",
-      "types": "./dist/react.d.ts"
+    "./style.css": {
+      "default": "./dist/index.css"
     }
   },
   "scripts": {
     "build": "rollup -c",
-    "build:prod": "production rollup -c",
     "dev": "rollup --watch --config rollup.dev.config.js",
     "test": "jest",
     "clean": "rimraf dist",
@@ -51,26 +48,29 @@
   ],
   "author": "BabylAI",
   "license": "MIT",
+  "sideEffects": [
+    "dist/index.css"
+  ],
   "peerDependencies": {
-    "@tabler/icons-react": "^3.34.0",
-    "clsx": "^2.0.0",
     "i18next": "^23.0.0 || ^25.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-i18next": "^13.0.0 || ^15.0.0",
-    "react-markdown": "^10.0.0",
-    "tailwind-merge": "^3.0.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-i18next": "^13.0.0 || ^15.0.0"
   },
   "dependencies": {
     "@ably/chat": "^0.8.0",
     "@microsoft/signalr": "^7.0.14",
-    "ably": "^2.9.0",
-    "axios": "^1.10.0",
+    "@tabler/icons-react": "^3.34.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "react-markdown": "^10.1.0",
+    "ably": "^2.12.0",
+    "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -81,28 +81,28 @@
     "@rollup/plugin-typescript": "^8.5.0",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
-    "@tabler/icons-react": "^3.34.0",
+    "@tabler/icons-react": "^3.34.1",
     "@types/hast": "^3.0.4",
     "@types/node": "^16.18.126",
-    "@types/react": "^17.0.83",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "clsx": "^2.1.1",
-    "concurrently": "^9.1.2",
-    "i18next": "^25.2.1",
+    "concurrently": "^9.2.0",
+    "i18next": "^25.4.2",
     "postcss": "^8.5.6",
-    "react-i18next": "^15.5.3",
+    "react-i18next": "^15.7.2",
     "react-markdown": "^10.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^2.79.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.3.2",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-rtl": "^0.9.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "webpack": "^5.99.9"
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/shared/Button/button.tsx

@@ -1,5 +1,4 @@
 import { cn } from '../../../lib'
-import React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(

package/src/components/ui/agent-response/agent-response.tsx

@@ -1,5 +1,4 @@
 import { useTypewriter } from '@/lib/custom-hooks/useTypewriter';
-import React from 'react';
 import Markdown from 'react-markdown';
 import type { Element } from 'hast';
 

package/src/components/ui/header.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import CloseCircle from '../../assets/icons/closeCircle.svg'
 import Logo from '../../assets/logo.svg'
 

package/src/globals.css

@@ -1,4 +1,4 @@
-@tailwind base;
+/* @tailwind base; */
 @tailwind components;
 @tailwind utilities;
 

package/src/index.ts

@@ -1,5 +1,4 @@
 import { configService } from './lib/config';
-import { HelpCenter } from './ui/help-center';
 import { TokenResponse } from './lib/types';
 
 export type HelpCenterConfig = {
@@ -12,11 +11,10 @@ export function initializeHelpCenter(config: HelpCenterConfig) {
   configService.initialize(config);
 }
 
-export { HelpCenter };
+export { HelpCenter } from './ui/help-center';
 
 export * from './lib/types';
 export * from './core/ApiService';
 export * from './core/AblyService';
-// export * from './globals.css'
 
 export { TokenService } from './core/token-service';

package/src/types/svg.d.ts

@@ -1,5 +1,5 @@
-declare module '*.svg' {
-  import React from 'react'
-  const SVG: React.FC<React.SVGProps<SVGSVGElement>>
-  export default SVG
+declare module "*.svg" {
+  import type { FC, SVGProps } from "react";
+  const SVG: FC<SVGProps<SVGSVGElement> & { title?: string }>;
+  export default SVG;
 }

package/src/ui/chatbot-popup/chat-window-screen/footer.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@/components';
-import React from 'react';
 import EnvelopeIcon from './../../../assets/icons/envelope.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
 
@@ -9,7 +8,6 @@ interface ChatWindowFooterProps {
   handleKeyDown: (e: React.KeyboardEvent) => void;
   handleSendMessage: () => void;
   isLoading: boolean;
-  isAblyConnected: boolean;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
@@ -28,7 +26,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
         variant='default'
         size='icon'
         onClick={props.handleSendMessage}
-        disabled={props?.isLoading || !props.isAblyConnected}
+        disabled={props?.isLoading}
         className='babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 babylai-disabled:babylai-opacity-50'
       >
         <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />

package/src/ui/chatbot-popup/chat-window-screen/header.tsx

@@ -1,48 +1,64 @@
-import Logo from '../../../assets/logo_ai.svg'
-import { Button } from '@/components'
-import React, { useState } from 'react'
-import ArrowRight from './../../../assets/icons/arrowRight.svg'
-import ThreeDots from './../../../assets/icons/threeDots.svg'
-import { useLocalTranslation } from '../../../useLocalTranslation'
+import Logo from "../../../assets/logo_ai.svg";
+import { Button } from "@/components";
+import React, { useState } from "react";
+import ArrowRight from "./../../../assets/icons/arrowRight.svg";
+import ThreeDots from "./../../../assets/icons/threeDots.svg";
+import { useLocalTranslation } from "../../../useLocalTranslation";
 
 interface ChatWindowHeaderProps {
-  isShowList: boolean
-  setIsShowList?: (isShowList: boolean) => void
-  showChat: boolean
-  onClose: () => void
-  handleBack: () => void
-  handleEndChat: () => void
+  isShowList: boolean;
+  setIsShowList?: (isShowList: boolean) => void;
+  showChat: boolean;
+  onClose: () => void;
+  handleBack: () => void;
+  handleEndChat: () => void;
 }
 
 const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
-  const [showMenu, setShowMenu] = useState(false)
-  const { t, i18n } = useLocalTranslation()
-  const isRTL = i18n.dir() === 'rtl'
+  const [showMenu, setShowMenu] = useState(false);
+  const { t, dir } = useLocalTranslation();
+  const isRTL = dir === "rtl";
 
   return (
     <header className="babylai-flex babylai-w-full babylai-items-center babylai-py-[18px] babylai-px-[18px] babylai-justify-between babylai-relative babylai-bg-black-white-50 dark:!babylai-bg-storm-dust-900 babylai-rounded-t-3xl">
       <div className="babylai-flex babylai-items-center babylai-gap-2">
-        <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950" onClick={props.handleBack}>
-          <ArrowRight className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? '' : 'babylai-rotate-180'} babylai-text-primary-500 dark:babylai-text-white`} />{' '}
+        <Button
+          variant="rounded-icon"
+          size="icon"
+          className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950"
+          onClick={props.handleBack}
+        >
+          <ArrowRight
+            className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}
+          />{" "}
         </Button>
         <div className="babylai-relative babylai-mr-2">
-          <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950" onClick={() => setShowMenu(!showMenu)}>
+          <Button
+            variant="rounded-icon"
+            size="icon"
+            className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950"
+            onClick={() => setShowMenu(!showMenu)}
+          >
             <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500 dark:babylai-text-white" />
           </Button>
 
           {showMenu && (
             <div className="babylai-absolute babylai-top-10 babylai-start-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white dark:!babylai-bg-storm-dust-950 babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10">
-              <div className="babylai-py-1" role="menu" aria-orientation="vertical">
+              <div
+                className="babylai-py-1"
+                role="menu"
+                aria-orientation="vertical"
+              >
                 <button
                   className="babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 dark:babylai-text-white babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left"
                   role="menuitem"
                   onClick={(e) => {
-                    e.stopPropagation()
-                    props.handleEndChat()
-                    setShowMenu(false)
+                    e.stopPropagation();
+                    props.handleEndChat();
+                    setShowMenu(false);
                   }}
                 >
-                  {t('homeSdk.endChat')}
+                  {t("homeSdk.endChat")}
                 </button>
               </div>
             </div>
@@ -53,6 +69,6 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
         <Logo className="babylai-w-[124px] babylai-h-auto dark:babylai-text-white" />
       </div>
     </header>
-  )
-}
-export default ChatWindowHeader
+  );
+};
+export default ChatWindowHeader;

package/src/ui/chatbot-popup/chat-window-screen/index.tsx

@@ -93,114 +93,111 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 
 TypingIndicator.displayName = 'TypingIndicator';
 
-export const ChatWindow = React.memo(
-  ({ onSendMessage, messages, assistantStatus = 'loading', isAblyConnected }: ChatWindowProps) => {
-    const [inputMessage, setInputMessage] = useState('');
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const lastMessageCountRef = useRef(messages.length);
-
-    // Debounced scroll to bottom function
-    const scrollToBottom = useCallback(() => {
+export const ChatWindow = React.memo(({ onSendMessage, messages, assistantStatus = 'loading' }: ChatWindowProps) => {
+  const [inputMessage, setInputMessage] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastMessageCountRef = useRef(messages.length);
+
+  // Debounced scroll to bottom function
+  const scrollToBottom = useCallback(() => {
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    scrollTimeoutRef.current = setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
+    }, 100);
+  }, []);
+
+  // Only scroll when new messages are added or status changes
+  useEffect(() => {
+    if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
+      lastMessageCountRef.current = messages.length;
+      scrollToBottom();
+    }
+  }, [messages.length, assistantStatus, scrollToBottom]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
       if (scrollTimeoutRef.current) {
         clearTimeout(scrollTimeoutRef.current);
       }
-
-      scrollTimeoutRef.current = setTimeout(() => {
-        messagesEndRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
-      }, 100);
-    }, []);
-
-    // Only scroll when new messages are added or status changes
-    useEffect(() => {
-      if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
-        lastMessageCountRef.current = messages.length;
-        scrollToBottom();
-      }
-    }, [messages.length, assistantStatus, scrollToBottom]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-      return () => {
-        if (scrollTimeoutRef.current) {
-          clearTimeout(scrollTimeoutRef.current);
+    };
+  }, []);
+
+  const handleSendMessage = useCallback(() => {
+    if (inputMessage.trim()) {
+      onSendMessage(inputMessage);
+      setInputMessage('');
+    }
+  }, [inputMessage, onSendMessage]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (inputMessage.trim() && assistantStatus !== 'typing') {
+          onSendMessage(inputMessage);
+          setInputMessage('');
         }
-      };
-    }, []);
-
-    const handleSendMessage = useCallback(() => {
-      if (inputMessage.trim()) {
-        onSendMessage(inputMessage);
-        setInputMessage('');
       }
-    }, [inputMessage, onSendMessage]);
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' && !e.shiftKey && isAblyConnected) {
-          e.preventDefault();
-          if (inputMessage.trim() && assistantStatus !== 'typing') {
-            onSendMessage(inputMessage);
-            setInputMessage('');
-          }
-        }
-      },
-      [inputMessage, onSendMessage, assistantStatus, isAblyConnected]
-    );
-
-    // Memoize the first human agent index calculation
-    const firstHumanAgentIndex = useMemo(() => {
-      return messages.findIndex((message) => message.senderType === 2);
-    }, [messages]);
-
-    // Memoize the message list to prevent unnecessary re-renders
-    const messagesList = useMemo(() => {
-      return messages.map((message, index) => (
-        <MessageComponent
-          key={`${message.id}-${index}`}
-          message={message}
-          index={index}
-          messages={messages}
-          firstHumanAgentIndex={firstHumanAgentIndex}
-          onType={scrollToBottom}
-        />
-      ));
-    }, [messages, firstHumanAgentIndex, scrollToBottom]);
-
-    // Memoize loading state check
-    const isLoading = useMemo(() => {
-      return (
-        assistantStatus === 'typing' ||
-        assistantStatus === 'loading' ||
-        assistantStatus === 'error' ||
-        inputMessage.trim() === ''
-      );
-    }, [assistantStatus, inputMessage]);
+    },
+    [inputMessage, onSendMessage, assistantStatus]
+  );
 
+  // Memoize the first human agent index calculation
+  const firstHumanAgentIndex = useMemo(() => {
+    return messages.findIndex((message) => message.senderType === 2);
+  }, [messages]);
+
+  // Memoize the message list to prevent unnecessary re-renders
+  const messagesList = useMemo(() => {
+    return messages.map((message, index) => (
+      <MessageComponent
+        key={`${message.id}-${index}`}
+        message={message}
+        index={index}
+        messages={messages}
+        firstHumanAgentIndex={firstHumanAgentIndex}
+        onType={scrollToBottom}
+      />
+    ));
+  }, [messages, firstHumanAgentIndex, scrollToBottom]);
+
+  // Memoize loading state check
+  const isLoading = useMemo(() => {
     return (
-      <>
-        <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
-          {messagesList}
+      assistantStatus === 'typing' ||
+      assistantStatus === 'loading' ||
+      assistantStatus === 'error' ||
+      inputMessage.trim() === ''
+    );
+  }, [assistantStatus, inputMessage]);
 
-          {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
+  return (
+    <>
+      <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
+        {messagesList}
 
-          <div ref={messagesEndRef} />
-        </div>
+        {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
 
-        <ChatWindowFooter
-          inputMessage={inputMessage}
-          handleKeyDown={handleKeyDown}
-          handleSendMessage={handleSendMessage}
-          setInputMessage={setInputMessage}
-          isLoading={isLoading}
-          isAblyConnected={isAblyConnected}
-        />
-      </>
-    );
-  }
-);
+        <div ref={messagesEndRef} />
+      </div>
+
+      <ChatWindowFooter
+        inputMessage={inputMessage}
+        handleKeyDown={handleKeyDown}
+        handleSendMessage={handleSendMessage}
+        setInputMessage={setInputMessage}
+        isLoading={isLoading}
+      />
+    </>
+  );
+});
 
 ChatWindow.displayName = 'ChatWindow';