@aslaluroba/help-center-react 2.0.2 → 2.0.5

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

@@ -1,103 +1,193 @@
-import AgentResponse from '@/components/ui/agent-response/agent-response'
-import { Message } from '@/lib/types'
-import ChatWindowFooter from '@/ui/chatbot-popup/chat-window-screen/footer'
-import React, { useEffect, useRef, useState } from 'react'
-import LoadingGif from './../../../assets/animatedLogo.gif'
-import Seperator from './../../../assets/icons/seperator.svg'
-import LogoIcon from './../../../assets/logo.svg'
+import AgentResponse from '@/components/ui/agent-response/agent-response';
+import { Message } from '@/lib/types';
+import ChatWindowFooter from '@/ui/chatbot-popup/chat-window-screen/footer';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import LoadingGif from './../../../assets/animatedLogo.gif';
+import Seperator from './../../../assets/icons/seperator.svg';
+import LogoIcon from './../../../assets/logo.svg';
 
 interface ChatWindowProps {
-    onSendMessage: (message: string) => void
-    messages: Message[]
-    assistantStatus: string
-    needsAgent: boolean
+  onSendMessage: (message: string) => void;
+  messages: Message[];
+  assistantStatus: string;
+  needsAgent: boolean;
 }
 
-export function ChatWindow({ onSendMessage, messages, assistantStatus = 'loading' }: ChatWindowProps) {
-    const [inputMessage, setInputMessage] = useState('')
-    const messagesEndRef = useRef<HTMLDivElement>(null)
+// Memoize individual message component to prevent unnecessary re-renders
+const MessageComponent = React.memo(
+  ({
+    message,
+    index,
+    messages,
+    firstHumanAgentIndex,
+    onType,
+  }: {
+    message: Message;
+    index: number;
+    messages: Message[];
+    firstHumanAgentIndex: number;
+    onType: () => void;
+  }) => {
+    const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
+    const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
+    const textDirection = message.senderType === 1 ? 'justify-end' : 'justify-start';
 
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    return (
+      <div key={message.id}>
+        {isFirstHumanAgentMessage && (
+          <div className='babylai-flex babylai-justify-center babylai-items-center babylai-my-4'>
+            <Seperator className='babylai-w-full babylai-text-purple-500' />
+          </div>
+        )}
+        <div className={`babylai-mb-4 babylai-flex ${textDirection}`}>
+          {isFirstInSequence && message.senderType === 3 && (
+            <div className='babylai-flex-shrink-0 babylai-mr-3'>
+              <div className='babylai-w-8 babylai-h-8 babylai-rounded-full babylai-bg-purple-500 babylai-flex babylai-items-center babylai-justify-center'>
+                <LogoIcon className='babylai-w-4 babylai-h-4 babylai-text-white' />
+              </div>
+            </div>
+          )}
+          {!isFirstInSequence && <div className='babylai-flex-shrink-0 babylai-mr-3 babylai-w-8'></div>}
+
+          <AgentResponse
+            messageContent={message.messageContent}
+            senderType={message.senderType}
+            messageId={message.id}
+            onType={onType}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+MessageComponent.displayName = 'MessageComponent';
+
+// Memoize typing indicator component
+const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentIndex: number }) => {
+  if (firstHumanAgentIndex !== -1) return null;
+
+  return (
+    <div className='babylai-mb-4 babylai-flex'>
+      <div className='babylai-flex-shrink-0 babylai-mr-3'>
+        <div className='babylai-w-8 babylai-h-8 babylai-rounded-full babylai-flex babylai-items-center babylai-justify-center'>
+          <img src={LoadingGif} alt='Loading' className='babylai-w-8 babylai-h-8' />
+        </div>
+      </div>
+      <div className='babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-bg-white'>
+        <p className='babylai-text-sm babylai-opacity-70'>...</p>
+      </div>
+    </div>
+  );
+});
+
+TypingIndicator.displayName = 'TypingIndicator';
+
+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);
     }
 
-    useEffect(() => {
-        scrollToBottom()
-    }, [messages, assistantStatus])
+    scrollTimeoutRef.current = setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
+    }, 100);
+  }, []);
 
-    const handleSendMessage = () => {
-        if (inputMessage.trim()) {
-            onSendMessage(inputMessage)
-            setInputMessage('')
-        }
+  // 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]);
 
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault()
-            onSendMessage(inputMessage)
-            setInputMessage('')
-        }
+  // 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('');
+        }
+      }
+    },
+    [inputMessage, onSendMessage, assistantStatus]
+  );
 
-    // Find the first human agent message
-    const firstHumanAgentIndex = messages.findIndex((message) => message.senderType === 2)
+  // 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">
-                {messages.map((message, index) => {
-                    const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType
-                    const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2
-                    const textDirection = message.senderType === 1 ? 'justify-end' : 'justify-start'
-
-                    return (
-                        <div key={message.id}>
-                            {isFirstHumanAgentMessage && (
-                                <div className="babylai-flex babylai-justify-center babylai-items-center babylai-my-4">
-                                    <Seperator className="babylai-w-full babylai-text-purple-500" />
-                                </div>
-                            )}
-                            <div className={`babylai-mb-4 babylai-flex ${textDirection}`}>
-                                {isFirstInSequence && message.senderType === 3 && (
-                                    <div className="babylai-flex-shrink-0 babylai-mr-3">
-                                        <div className="babylai-w-8 babylai-h-8 babylai-rounded-full babylai-bg-purple-500 babylai-flex babylai-items-center babylai-justify-center">
-                                            <LogoIcon className="babylai-w-4 babylai-h-4 babylai-text-white" />
-                                        </div>
-                                    </div>
-                                )}
-                                {!isFirstInSequence && <div className="babylai-flex-shrink-0 babylai-mr-3 babylai-w-8"></div>}
-
-                                <AgentResponse
-                                    messageContent={message.messageContent}
-                                    senderType={message.senderType}
-                                    messageId={message.id}
-                                    onType={scrollToBottom} />
-                            </div>
-                        </div>
-                    )
-                })}
-                {assistantStatus === 'typing' && firstHumanAgentIndex === -1 && (
-                    <div className="babylai-mb-4 babylai-flex">
-                        <div className="babylai-flex-shrink-0 babylai-mr-3">
-                            <div className="babylai-w-8 babylai-h-8 babylai-rounded-full babylai-flex babylai-items-center babylai-justify-center">
-                                <img src={LoadingGif} alt="Loading" className="babylai-w-8 babylai-h-8" />
-                            </div>
-                        </div>
-                        <div className="babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-bg-white">
-                            <p className="babylai-text-sm babylai-opacity-70">...</p>
-                        </div>
-                    </div>
-                )}
-                <div ref={messagesEndRef} />
-            </div>
+      assistantStatus === 'typing' ||
+      assistantStatus === 'loading' ||
+      assistantStatus === 'error' ||
+      inputMessage.trim() === ''
+    );
+  }, [assistantStatus, inputMessage]);
 
-            <ChatWindowFooter
-                inputMessage={inputMessage}
-                handleKeyDown={(e) => handleKeyDown(e)}
-                handleSendMessage={handleSendMessage}
-                setInputMessage={setInputMessage}
-            />
-        </>
-    )
-}
+  return (
+    <>
+      <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
+        {messagesList}
+
+        {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <ChatWindowFooter
+        inputMessage={inputMessage}
+        handleKeyDown={handleKeyDown}
+        handleSendMessage={handleSendMessage}
+        setInputMessage={setInputMessage}
+        isLoading={isLoading}
+      />
+    </>
+  );
+});
+
+ChatWindow.displayName = 'ChatWindow';

package/src/ui/chatbot-popup/options-list-screen/header.tsx

@@ -1,38 +1,42 @@
-import { Button } from '@/components'
-import React from 'react'
-import ArrowRight from './../../../assets/icons/arrowRight.svg'
-import ThinkingLogo from './../../../assets/thinking-logo.svg'
-import { useLocalTranslation } from '../../../useLocalTranslation'
-import CloseCircle from '../../../assets/icons/closeCirclePrimary.svg'
+import { Button } from '@/components';
+import React from 'react';
+import ArrowRight from './../../../assets/icons/arrowRight.svg';
+import ThinkingLogo from './../../../assets/thinking-logo.svg';
+import { useLocalTranslation } from '../../../useLocalTranslation';
+import CloseCircle from '../../../assets/icons/closeCirclePrimary.svg';
 
 interface OptionsListHeaderProps {
-  handleBack: () => void
-  showHelpScreen: boolean
+  handleBack: () => void;
+  showHelpScreen: boolean;
 }
 
 const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({ handleBack, showHelpScreen }) => {
-  const { i18n } = useLocalTranslation()
-  const isRTL = i18n.dir() === 'rtl'
+  const { i18n } = useLocalTranslation();
+  const isRTL = i18n.dir() === 'rtl';
 
   return (
     <header
       dir={i18n.dir()}
-      className={`babylai-flex babylai-w-full babylai-items-center mb-2 ${!showHelpScreen ? 'babylai-justify-end' : 'babylai-justify-between'}`}
+      className={`babylai-flex babylai-w-full babylai-items-center mb-2 ${
+        !showHelpScreen ? 'babylai-justify-end' : 'babylai-justify-between'
+      }`}
     >
       <Button
-        variant="rounded-icon"
-        size="icon"
-        className="!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 babylai-relative babylai-z-10"
+        variant='rounded-icon'
+        size='icon'
+        className='!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 babylai-relative babylai-z-10'
         onClick={handleBack}
       >
         {showHelpScreen ? (
-          <ArrowRight className={`${isRTL ? '' : 'babylai-rotate-180'}  babylai-text-primary-500`} />
+          <ArrowRight
+            className={`${isRTL ? '' : 'babylai-rotate-180'}  babylai-text-primary-500 babylai-w-full babylai-h-full`}
+          />
         ) : (
-          <CloseCircle className="!babylai-w-full !babylai-h-full babylai-cursor-pointer" />
+          <CloseCircle className='!babylai-w-full !babylai-h-full babylai-cursor-pointer' />
         )}
       </Button>
-      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden" />
+      <ThinkingLogo className='babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden' />
     </header>
-  )
-}
-export default OptionsListHeader
+  );
+};
+export default OptionsListHeader;

package/src/ui/chatbot-popup/options-list-screen/index.tsx

@@ -1,17 +1,17 @@
-import { Card } from '@/components'
-import { HelpScreenData, Option } from '@/lib/types'
-import ExpandedOption from '@/ui/chatbot-popup/options-list-screen/expanded-option'
-import OptionsListHeader from '@/ui/chatbot-popup/options-list-screen/header'
-import OptionCard from '@/ui/chatbot-popup/options-list-screen/option-card'
-import React from 'react'
+import { Card } from '@/components';
+import { HelpScreenData, Option } from '@/lib/types';
+import ExpandedOption from '@/ui/chatbot-popup/options-list-screen/expanded-option';
+import OptionsListHeader from '@/ui/chatbot-popup/options-list-screen/header';
+import OptionCard from '@/ui/chatbot-popup/options-list-screen/option-card';
+import React from 'react';
 
 interface OptionsListScreenProps {
-  helpScreen: HelpScreenData | null
-  expandedOption: Option | null
-  setExpandedOption: (option: Option | null) => void
-  handleStartChat: (option: Option) => void
-  handleBack: () => void
-  showHelpScreen: boolean
+  helpScreen: HelpScreenData | null;
+  expandedOption: Option | null;
+  setExpandedOption: (option: Option | null) => void;
+  handleStartChat: (option: Option) => void;
+  handleBack: () => void;
+  showHelpScreen: boolean;
 }
 
 const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
@@ -20,29 +20,29 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
   setExpandedOption,
   handleStartChat,
   handleBack,
-  showHelpScreen
+  showHelpScreen,
 }) => {
   const handleToggleExpandOption = (option: Option) => {
     if (expandedOption?.id === option.id) {
-      setExpandedOption(null)
+      setExpandedOption(null);
     } else {
-      setExpandedOption(option)
+      setExpandedOption(option);
     }
-  }
+  };
 
   return (
-    <div className="babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto  babylai-h-full">
+    <div className='babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto  babylai-h-full'>
       <OptionsListHeader handleBack={handleBack} showHelpScreen={showHelpScreen} />
 
-      <h1 className="babylai-text-4xl  babylai-font-bold babylai-text-black-white-800 mb-4">{helpScreen?.title}</h1>
+      <h1 className='babylai-text-4xl  babylai-font-bold babylai-text-black-white-800 mb-4'>{helpScreen?.title}</h1>
 
       {helpScreen && (
-        <div className="babylai-flex babylai-flex-col babylai-gap-3 babylai-mt-3 babylai-mb-3">
+        <div className='babylai-flex babylai-flex-col babylai-gap-3 babylai-mt-3 babylai-mb-3'>
           {helpScreen?.options?.map((option) => (
             <Card
               key={option.id}
-              variant="rounded"
-              className="babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1"
+              variant='rounded'
+              className='babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1'
               onClick={() => handleToggleExpandOption(option)}
             >
               <OptionCard title={option.title} />
@@ -53,7 +53,7 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default OptionsListScreen
+export default OptionsListScreen;

package/src/ui/chatbot-popup/options-list-screen/option-card.tsx

@@ -1,17 +1,22 @@
 import { Button } from '@/components';
 import React from 'react';
 import ArrowRight from '../../../assets/icons/arrowRight.svg';
+import { useTranslation  } from 'react-i18next'
 
 interface OptionCardProps {
     title: string;
 }
 
 const OptionCard: React.FC<OptionCardProps> = (props) => {
+ const { i18n} = useTranslation();
+          const isLTR = i18n.dir() === 'ltr';
     return (
-        <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-4">
-            <p className="babylai-text-base babylai-font-semibold babylai-text-black-white-800">{props.title}</p>
-            <Button variant="rounded-icon" size="icon" className="!babylai-w-12 !babylai-h-12 babylai-text-primary-500 hover:babylai-bg-primary-100">
-                <ArrowRight  className={` babylai-text-primary-500 babylai-rotate-90 `}/>
+        <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
+            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800">{props.title}</p>
+            <Button variant="rounded-icon" size="icon" className="babylai-text-primary-500 hover:babylai-bg-primary-100">
+                <ArrowRight  className={`babylai-w-[12px] babylai-h-[12px] ${
+      isLTR ? '' : 'babylai-rotate-180'
+    } babylai-text-primary-500`}/>
             </Button>
         </div>
     )