@aslaluroba/help-center-react 2.0.4 → 2.0.6

package/src/ui/help-popup.tsx

@@ -1,71 +1,79 @@
-import { cn } from '@/lib'
-import { ChatWindow } from '@/ui/chatbot-popup/chat-window-screen'
-import ChatWindowHeader from '@/ui/chatbot-popup/chat-window-screen/header'
-import ChatBotErrorScreen from '@/ui/chatbot-popup/error-screen'
-import HomeScreen from '@/ui/chatbot-popup/home-screen'
-import ChatBotLoadingScreen from '@/ui/chatbot-popup/loading-screen'
-import OptionsListScreen from '@/ui/chatbot-popup/options-list-screen'
-import React, { useEffect, useRef, useState } from 'react'
-import ChatIcon from '../assets/icons/chat.svg'
-import { Button } from '../components'
-import { HelpScreenData, Message, Option } from '../lib/types'
+import { cn } from '@/lib';
+import { ChatWindow } from '@/ui/chatbot-popup/chat-window-screen';
+import ChatWindowHeader from '@/ui/chatbot-popup/chat-window-screen/header';
+import ChatBotErrorScreen from '@/ui/chatbot-popup/error-screen';
+import HomeScreen from '@/ui/chatbot-popup/home-screen';
+import ChatBotLoadingScreen from '@/ui/chatbot-popup/loading-screen';
+import OptionsListScreen from '@/ui/chatbot-popup/options-list-screen';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import ChatIcon from '../assets/icons/chat.svg';
+import { Button } from '@/components';
+import { HelpScreenData, Message, Option } from '@/lib/types';
+import { useLocalTranslation } from '../useLocalTranslation';
 
 type HelpPopupProps = {
-  isOpen: boolean
-  onClose: () => void
-  helpScreen: HelpScreenData | null
-  status: string
-  error: string | null
-  user: any
-  onStartChat: (option: Option) => void
-  onSendMessage: (message: string) => void
-  onEndChat: () => void
-  messages: Message[]
-  needsAgent: boolean
-  assistantStatus: string
-  sessionId: string | null
-  isChatClosed: boolean
-  isSignalRConnected: boolean
-  selectedOption: Option | null
-  setSelectedOption: (option: Option | null) => void
-  showHelpScreen: boolean
-}
+  isOpen: boolean;
+  onClose: () => void;
+  helpScreen: HelpScreenData | null;
+  status: string;
+  error: string | null;
+  user: any;
+  onStartChat: (option: Option) => void;
+  onSendMessage: (message: string) => void;
+  onEndChat: (option?: Option) => void;
+  messages: Message[];
+  needsAgent: boolean;
+  assistantStatus: string;
+  sessionId: string | null;
+  isChatClosed: boolean;
+  isSignalRConnected: boolean;
+  selectedOption: Option | null;
+  setSelectedOption: (option: Option | null) => void;
+  showHelpScreen: boolean;
+};
 
 // Confirmation Modal Component
-const ConfirmationModal = ({
+export const ConfirmationModal = ({
   title,
   message,
   onCancel,
-  onConfirm
+  onConfirm,
 }: {
-  title: string
-  message: string
-  onCancel: () => void
-  onConfirm: () => void
+  title: string;
+  message: string;
+  onCancel: () => void;
+  onConfirm: () => void;
 }) => {
+  const { t } = useLocalTranslation();
+
   return (
-    <div className="babylai-absolute babylai-inset-0 babylai-z-50 babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl babylai-overflow-hidden">
-      <div className="babylai-absolute babylai-inset-0 babylai-bg-black/60" onClick={onCancel}></div>
-      <div className="babylai-bg-black-white-100 babylai-rounded-3xl babylai-p-4 babylai-w-[220px] babylai-z-50 babylai-shadow-lg">
-        <h3 className="babylai-text-black-white-900 babylai-font-bold babylai-mb-2 babylai-text-center">{title}</h3>
-        <p className="babylai-text-black-white-700 babylai-text-xs babylai-mb-4">{message}</p>
-        <div className="babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full">
-          <Button variant="default" size="sm" onClick={onConfirm} className="babylai-text-sm babylai-w-full !babylai-font-bold">
-            Confirm
+    <div className='babylai-absolute babylai-inset-0 babylai-z-50 babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl babylai-overflow-hidden'>
+      <div className='babylai-absolute babylai-inset-0 babylai-bg-black/60' onClick={onCancel}></div>
+      <div className='babylai-bg-black-white-100 babylai-rounded-3xl babylai-p-4 babylai-w-[220px] babylai-z-50 babylai-shadow-lg'>
+        <h3 className='babylai-text-black-white-900 babylai-font-bold babylai-mb-2 babylai-text-center'>{title}</h3>
+        <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4'>{message}</p>
+        <div className='babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full'>
+          <Button
+            variant='default'
+            size='sm'
+            onClick={onConfirm}
+            className='babylai-text-sm babylai-w-full !babylai-font-bold'
+          >
+            {t('homeSdk.ConfirmationModal.confirmation_button')}
           </Button>
           <Button
-            variant="outline"
-            size="sm"
+            variant='outline'
+            size='sm'
             onClick={onCancel}
-            className="babylai-text-sm babylai-w-full babylai-text-primary-500 !babylai-font-bold"
+            className='babylai-text-sm babylai-w-full babylai-text-primary-500 !babylai-font-bold'
           >
-            Cancel
+            {t('homeSdk.ConfirmationModal.cancel_button')}
           </Button>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export function HelpPopup({
   onClose,
@@ -79,121 +87,110 @@ export function HelpPopup({
   assistantStatus,
   needsAgent,
   sessionId,
-  isChatClosed,
-  isSignalRConnected,
   selectedOption,
   setSelectedOption,
-  showHelpScreen
+  showHelpScreen,
+  isSignalRConnected,
 }: HelpPopupProps) {
-  const [showChat, setShowChat] = useState(false)
-  const [currentMessages, setCurrentMessages] = useState<Message[]>([])
-  const [isShowList, setIsShowList] = useState<boolean>(!showHelpScreen || false)
-  const [expandedOption, setExpandedOption] = useState<Option | null>(null)
-  const [endChatConfirmation, setEndChatConfirmation] = useState<boolean>(false)
+  // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
+  const [showChat, setShowChat] = useState(false);
+  const [isShowList, setIsShowList] = useState<boolean>(!showHelpScreen || false);
+  const [expandedOption, setExpandedOption] = useState<Option | null>(null);
+  const [endChatConfirmation, setEndChatConfirmation] = useState<boolean>(false);
+  const [startNewChatConfirmation, setStartNewChatConfirmation] = useState<boolean>(false);
+  const [tempSelectedOption, setTempSelectedOption] = useState<Option | null>(null);
 
-  const chatBoxRef = useRef<HTMLDivElement>(null)
+  const chatBoxRef = useRef<HTMLDivElement>(null);
+  const { t } = useLocalTranslation();
+  const messagesRef = useRef<Message[]>([]);
 
-  // Scroll to bottom when new messages arrive
-  useEffect(() => {
+  // Memoize the current messages to prevent unnecessary re-renders
+  const memoizedMessages = useMemo(() => {
+    return messages;
+  }, [messages]);
+
+  // Add this function to show the end chat confirmation modal
+  const showEndChatConfirmation = useCallback(() => setEndChatConfirmation(true), []);
+
+  // Optimize scroll to bottom with debouncing
+  const scrollToBottom = useCallback(() => {
     if (chatBoxRef.current) {
-      chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight
+      requestAnimationFrame(() => {
+        if (chatBoxRef.current) {
+          chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight;
+        }
+      });
     }
-    setCurrentMessages(messages)
-  }, [messages])
+  }, []);
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     if (showChat) {
-      setShowChat(false)
+      setShowChat(false);
       // onEndChat()
     } else if (selectedOption) {
-      setSelectedOption(null)
+      setSelectedOption(null);
     } else {
-      setIsShowList(false)
+      setIsShowList(false);
     }
-  }
+  }, [showChat, selectedOption, setSelectedOption]);
 
-  const handleStartChat = (option: Option) => {
-    if (option) {
-      setCurrentMessages([
-        {
-          id: 1,
-          senderType: 3,
-          messageContent: selectedOption?.assistant?.greeting || '',
-          sentAt: new Date(),
-          isSeen: true
+  const handleStartChat = useCallback(
+    (option: Option) => {
+      if (option) {
+        if (sessionId) {
+          setStartNewChatConfirmation(true);
+          setTempSelectedOption(option);
+        } else {
+          setShowChat(true);
+          onStartChat(option);
+          setSelectedOption(option);
         }
-      ])
-      setShowChat(true)
-      onStartChat(option)
-      setSelectedOption(option)
-    }
-  }
-
-  const handleSendMessage = (message: string) => {
-    if (message.trim() && isSignalRConnected && !isChatClosed) {
-      onSendMessage(message.trim())
-    }
-  }
-
-  const hideEndChatConfirmation = () => {
-    setEndChatConfirmation(false)
-  }
+      }
+    },
+    [onStartChat, setSelectedOption, sessionId, setStartNewChatConfirmation, setTempSelectedOption]
+  );
 
-  const handleEndChat = () => {
-    setEndChatConfirmation(false)
-    setCurrentMessages((prev) => [
-      ...prev,
-      {
-        id: prev.length + 1,
-        senderType: 3,
-        messageContent: selectedOption?.assistant?.closing || '',
-        sentAt: new Date(),
-        isSeen: true
+  const handleSendMessage = useCallback(
+    (message: string) => {
+      if (message.trim() && isSignalRConnected) {
+        onSendMessage(message.trim());
       }
-    ])
-    // setTimeout to close the chat after 3 seconds
-    setTimeout(() => {
-      onEndChat()
-      setShowChat(false)
-      setSelectedOption(null)
-    }, 3000)
-  }
+    },
+    [onSendMessage]
+  );
 
-  const handleShowActiveChat = () => {
-    setShowChat(true)
-  }
+  const hideEndChatConfirmation = useCallback(() => {
+    setEndChatConfirmation(false);
+  }, []);
 
-  if (status === 'loading' && !helpScreen) {
-    return (
-      <div
-        className="babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
-     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
-md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col"
-      >
-        <ChatBotLoadingScreen isShowList={isShowList} onClose={onClose} />
-      </div>
-    )
-  }
+  const handleEndAndStartNewChat = useCallback(async () => {
+    if (tempSelectedOption) {
+      setStartNewChatConfirmation(false);
+      setShowChat(true);
+      onEndChat(tempSelectedOption);
+      setTempSelectedOption(null);
+    }
+  }, [onEndChat, setTempSelectedOption, tempSelectedOption, setStartNewChatConfirmation]);
 
-  if (error) {
-    return (
-      <div
-        className="babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
-     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
-md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col"
-      >
-        <ChatBotErrorScreen onClose={onClose} error={error} />
-      </div>
-    )
-  }
+  const handleEndChat = useCallback(() => {
+    setEndChatConfirmation(false);
+    onEndChat();
+    setShowChat(false);
+    setSelectedOption(null);
+  }, [selectedOption, onEndChat, setSelectedOption]);
+
+  const handleShowActiveChat = useCallback(() => {
+    setShowChat(true);
+  }, []);
 
-  const renderContent = () => {
+  // Memoize render content function
+  const renderContent = useCallback(() => {
     if (showChat && selectedOption) {
       return (
         <>
           <ChatWindowHeader
             handleBack={handleBack}
-            handleEndChat={handleEndChat}
+            handleEndChat={showEndChatConfirmation}
             onClose={onClose}
             isShowList={isShowList}
             showChat={showChat}
@@ -201,12 +198,13 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
           />
           <ChatWindow
             onSendMessage={handleSendMessage}
-            messages={currentMessages}
+            messages={memoizedMessages}
             assistantStatus={assistantStatus}
             needsAgent={needsAgent}
+            isSignalRConnected={isSignalRConnected}
           />
         </>
-      )
+      );
     }
 
     if (isShowList) {
@@ -219,46 +217,124 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
           handleBack={showHelpScreen ? handleBack : onClose}
           showHelpScreen={showHelpScreen}
         />
-      )
+      );
+    }
+    return <HomeScreen setIsShowList={setIsShowList} onClose={onClose} />;
+  }, [
+    showChat,
+    selectedOption,
+    handleBack,
+    showEndChatConfirmation,
+    onClose,
+    isShowList,
+    setIsShowList,
+    handleSendMessage,
+    memoizedMessages,
+    assistantStatus,
+    needsAgent,
+    helpScreen,
+    expandedOption,
+    setExpandedOption,
+    handleStartChat,
+    showHelpScreen,
+  ]);
+
+  // Memoize confirmation modal
+  const confirmationModal = useMemo(() => {
+    if (!endChatConfirmation) return null;
+
+    return (
+      <ConfirmationModal
+        title={t('homeSdk.ConfirmationModal.title')}
+        message={t('homeSdk.ConfirmationModal.message')}
+        onCancel={hideEndChatConfirmation}
+        onConfirm={handleEndChat}
+      />
+    );
+  }, [endChatConfirmation, t, hideEndChatConfirmation, handleEndChat]);
+
+  // Memoize active chat button
+  const activeChatButton = useMemo(() => {
+    if (!sessionId || showChat) return null;
+
+    return (
+      <Button
+        variant='rounded-icon'
+        size='icon'
+        className='babylai-bg-primary-500 babylai-absolute babylai-bottom-4 babylai-right-3 babylai-z-20 !babylai-w-10 !babylai-h-10 babylai-p-2'
+        onClick={handleShowActiveChat}
+      >
+        <ChatIcon className='babylai-w-5 babylai-h-5 babylai-text-black-white-50' />
+      </Button>
+    );
+  }, [sessionId, showChat, handleShowActiveChat]);
+
+  // Scroll to bottom when new messages arrive - optimize with ref comparison
+  useEffect(() => {
+    if (messagesRef.current !== messages) {
+      messagesRef.current = messages;
+      scrollToBottom();
     }
-    return <HomeScreen setIsShowList={setIsShowList} onClose={onClose} />
+  }, [messages, scrollToBottom]);
+
+  // EARLY RETURNS MUST COME AFTER ALL HOOKS
+  // Early returns for performance - moved after all hooks
+  if (status === 'loading' && !helpScreen) {
+    return (
+      <div
+        className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
+md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col'
+      >
+        <ChatBotLoadingScreen isShowList={isShowList} onClose={onClose} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div
+        className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
+md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col'
+      >
+        <ChatBotErrorScreen onClose={onClose} error={error || ''} />
+      </div>
+    );
   }
 
   return (
     <div
-      className="babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+      className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
      babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
-md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col"
+md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col'
     >
       <div
-        className={cn('babylai-h-full babylai-rounded-none md:babylai-rounded-3xl babylai-flex babylai-flex-col babylai-relative', {
-          'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !isShowList,
-          'babylai-bg-black-white-100': isShowList
-        })}
-      >
-        {sessionId && !showChat && (
-          <Button
-            variant="rounded-icon"
-            size="icon"
-            className="babylai-bg-primary-500 babylai-absolute babylai-bottom-4 babylai-right-3 babylai-z-20 !babylai-w-10 !babylai-h-10 babylai-p-2"
-            onClick={handleShowActiveChat}
-          >
-            <ChatIcon className="babylai-w-5 babylai-h-5 babylai-text-black-white-50" />
-          </Button>
+        className={cn(
+          'babylai-h-full babylai-rounded-none md:babylai-rounded-3xl babylai-flex babylai-flex-col babylai-relative',
+          {
+            'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !isShowList,
+            'babylai-bg-black-white-100': isShowList,
+          }
         )}
+      >
+        {activeChatButton}
+
         {/* Content */}
         {renderContent()}
 
         {/* End Chat Confirmation Modal */}
-        {endChatConfirmation && (
+        {confirmationModal}
+
+        {startNewChatConfirmation && (
           <ConfirmationModal
-            title="Leaving so soon? 👋"
-            message="Don't worry, you can come back anytime. We're always here if you need help or have questions."
-            onCancel={hideEndChatConfirmation}
-            onConfirm={handleEndChat}
+            title={t('homeSdk.ConfirmationModal.endAndStartNewChatTitle')}
+            message={t('homeSdk.ConfirmationModal.endAndStartNewChatMessage')}
+            onCancel={() => setStartNewChatConfirmation(false)}
+            onConfirm={handleEndAndStartNewChat}
           />
         )}
       </div>
     </div>
-  )
+  );
 }

package/src/ui/review-dialog/index.tsx

@@ -0,0 +1,106 @@
+import { ReviewProps } from '@/lib/types'
+import { Rating } from '@/ui/review-dialog/rating'
+import React from 'react'
+import { useLocalTranslation } from '../../useLocalTranslation'
+import CloseCircle from '../../assets/icons/closeCircle.svg'
+
+interface ReviewDialogProps {
+    handleSubmit: ({ comment, rating }: ReviewProps) => void;
+    onClose: () => void;
+}
+
+const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
+    const { t } = useLocalTranslation()
+    const [comment, setComment] = React.useState<string>('')
+    const [rating, setRating] = React.useState<number>(0)
+    const [error, setError] = React.useState<{ comment?: string; rating?: string }>({})
+
+    const isCommentValid = comment.length >= 10 && comment.length <= 500
+    const isRatingValid = rating >= 1 && rating <= 5
+
+    const validateAndSubmit = () => {
+        const newError: typeof error = {}
+        if (!isCommentValid) {
+            newError.comment = t('homeSdk.ReviewDialog.comment_error') || 'Comment must be between 10 and 500 characters.'
+        }
+        if (!isRatingValid) {
+            newError.rating = t('homeSdk.ReviewDialog.rating_error') || 'Rating must be between 1 and 5.'
+        }
+
+        if (Object.keys(newError).length > 0) {
+            setError(newError)
+            return
+        }
+
+        setError({})
+        props.handleSubmit({ comment, rating })
+    }
+
+    const handleCommentChange = (val: string) => {
+        setComment(val)
+        if (error.comment && val.length >= 10 && val.length <= 500) {
+            setError((prev) => ({ ...prev, comment: undefined }))
+        }
+    }
+
+    const handleRatingChange = (val: number) => {
+        setRating(val)
+        if (error.rating && val >= 1 && val <= 5) {
+            setError((prev) => ({ ...prev, rating: undefined }))
+        }
+    }
+
+    return (
+        <section className="babylai-p-6 babylai-gap-6 babylai-max-w-sm babylai-max-h-[calc(100vh-90px)] babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 babylai-fixed babylai-bottom-20 babylai-right-0 md:babylai-right-4 babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col">
+            <header className='border-b pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4'>
+                <h2 className="babylai-text-lg babylai-font-semibold">{t('homeSdk.ReviewDialog.title')}</h2>
+                <CloseCircle className="babylai-w-6 babylai-h-6 babylai-cursor-pointer" onClick={props.onClose} />
+            </header>
+            <div className="babylai-flex babylai-flex-col babylai-gap-2">
+                <p className="babylai-text-sm babylai-text-gray-600 mb-3">
+                    {t('homeSdk.ReviewDialog.description')}
+                </p>
+
+                <div className="babylai-flex babylai-items-center babylai-gap-2">
+                    <span className="babylai-text-base babylai-font-medium">{t('homeSdk.ReviewDialog.rating_label')}</span>
+                    <Rating value={rating} onChange={handleRatingChange} />
+                    <span className={`babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.rating ? 'opacity-100' : 'opacity-0'}`}>
+                        {error.rating}
+                    </span>
+                </div>
+
+                <div className="babylai-flex babylai-flex-col babylai-gap-2">
+                    <label htmlFor='comment' className="babylai-text-base babylai-font-medium">{t('homeSdk.ReviewDialog.comment_label')}</label>
+                    <textarea
+                        id='comment'
+                        className="babylai-bg-black-white-100 babylai-p-6 babylai-rounded-xl babylai-resize-none"
+                        rows={4}
+                        placeholder="Write your comment here..."
+                        value={comment}
+                        onChange={(e) => handleCommentChange(e.target.value)}
+                    />
+                    <span className={`babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.comment ? 'opacity-100' : 'opacity-0'}`}>
+                        {error.comment}
+                    </span>
+                </div>
+            </div>
+
+            <footer className="babylai-flex babylai-justify-between babylai-gap-4 babylai-border-t babylai-pt-4">
+                <button
+                    className="babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-bg-gray-200 babylai-text-gray-700 hover:babylai-bg-gray-300 transition-all"
+                    onClick={props.onClose}
+                >
+                    {t('homeSdk.ReviewDialog.skip_button')}
+                </button>
+                <button
+                    className='babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-shadow transition-all babylai-bg-primary-500 babylai-text-white hover:babylai-bg-primary-600'
+                    onClick={validateAndSubmit}
+                >
+                    {t('homeSdk.ReviewDialog.submit_button')}
+                </button>
+            </footer>
+        </section>
+    )
+}
+
+export default ReviewDialog