@aslaluroba/help-center-react 3.2.4 → 3.2.6

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

@@ -1,12 +1,11 @@
 import React, { useRef, useState, useCallback } from 'react';
 import axios from 'axios';
-import { Button } from '@/components';
 import { ImagePreviewDialog } from '@/components/ui';
-import EnvelopeIcon from './../../../assets/icons/envelope.svg';
-import PaperclipIcon from './../../../assets/icons/paperclip.svg';
-import XIcon from './../../../assets/icons/x.svg';
+import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
 import { useLocalTranslation } from '../../../useLocalTranslation';
 import { presignUpload } from '@/core/api';
+import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'
+import SolarPaperclipBoldDuotone from '~icons/solar/paperclip-bold-duotone'
 
 interface SelectedFileDto {
   file: File;
@@ -21,12 +20,13 @@ interface ChatWindowFooterProps {
   setInputMessage: (e: string) => void;
   handleSendMessage: (attachmentIds: string[]) => void;
   isLoading: boolean;
+  isChatClosed?: boolean;
   onEnsureSession: () => Promise<string>;
   sessionId?: string | null; // Pass existing sessionId to avoid creating new sessions
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
-  const { t, dir, i18n } = useLocalTranslation();
+  const { t, i18n } = useLocalTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [selectedFiles, setSelectedFiles] = useState<SelectedFileDto[]>([]);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
@@ -74,8 +74,8 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
   }, []);
 
   const handleSendMessageWithAttachments = useCallback(async () => {
-    // Prevent sending if already loading
-    if (props.isLoading || isSending) {
+    // Prevent sending if already loading or chat was closed from chat screen
+    if (props.isLoading || props.isChatClosed || isSending) {
       return;
     }
 
@@ -127,7 +127,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
             );
 
             // Get presigned URL
-            const presignResponse = await presignUpload(sessionId, fileDto.file, i18n.language);
+            const presignResponse = await presignUpload(sessionId, fileDto.file, i18n.language as 'ar' | 'en');
 
             // Upload file to presigned URL using axios
             const uploadResponse = await axios.put(presignResponse.uploadUrl, fileDto.file, {
@@ -190,7 +190,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
       console.error('[ChatWindowFooter] Error sending message:', error);
       setIsSending(false);
     }
-  }, [selectedFiles, props, i18n.language, isSending]);
+  }, [selectedFiles, props, i18n.language as 'ar' | 'en', isSending]);
 
   // Check if any files are currently uploading
   const hasUploadingFiles = selectedFiles.some((f) => f.uploading);
@@ -200,7 +200,8 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
 
   // Allow sending if there's text OR files selected (files will be uploaded on send)
   const hasContentToSend = props.inputMessage.trim() !== '' || selectedFiles.length > 0;
-  const isSendDisabled = props.isLoading || isSending || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  const isSendDisabled =
+    props.isLoading || props.isChatClosed || isSending || !hasContentToSend || hasUploadingFiles || hasFileErrors;
   const showLoading = props.isLoading || isSending || hasUploadingFiles;
 
   const handleKeyDown = useCallback(
@@ -216,85 +217,83 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
   );
 
   return (
-    <footer className='babylai-flex babylai-flex-col babylai-gap-2 babylai-mx-4 md:babylai-mx-6'>
+    <footer className='babylai:flex babylai:flex-col babylai:gap-2 babylai:mx-4 babylai:md:mx-4 babylai:mb-2'>
       {selectedFiles.length > 0 && (
-        <div className='babylai-flex babylai-gap-2 babylai-flex-wrap babylai-p-2 babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-rounded-lg'>
+        <div className='babylai:flex babylai:gap-2 babylai:flex-wrap babylai:p-2 babylai:bg-card babylai:rounded-lg'>
           {selectedFiles.map((file) => (
-            <div key={file.previewUrl} className='babylai-relative babylai-group'>
+            <div key={file.previewUrl} className='babylai:relative babylai:group'>
               <img
                 src={file.previewUrl}
                 alt='Preview'
-                className='babylai-w-16 babylai-h-16 babylai-object-cover babylai-rounded-lg babylai-border babylai-border-black-white-200 babylai-cursor-pointer hover:babylai-opacity-80 babylai-transition-opacity'
+                className='babylai:w-16 babylai:h-16 babylai:object-cover babylai:rounded-lg babylai:border babylai:border-black-white-200 babylai:cursor-pointer babylai:hover:opacity-80 babylai:transition-opacity'
                 onClick={() => setPreviewImage(file.previewUrl)}
                 role='button'
                 aria-label='Click to preview image'
               />
               {file.uploading && (
-                <div className='babylai-absolute babylai-inset-0 babylai-flex babylai-items-center babylai-justify-center babylai-bg-black babylai-bg-opacity-50 babylai-rounded-lg'>
-                  <div className='babylai-animate-spin babylai-rounded-full babylai-h-6 babylai-w-6 babylai-border-2 babylai-border-white babylai-border-t-transparent'></div>
+                <div className='babylai:absolute babylai:inset-0 babylai:flex babylai:items-center babylai:justify-center babylai:bg-black babylai:bg-opacity-50 babylai:rounded-lg'>
+                  <div className='babylai:animate-spin babylai:rounded-full babylai:h-6 babylai:w-6 babylai:border-2 babylai:border-white babylai:border-t-transparent'></div>
                 </div>
               )}
               {file.error && (
-                <div className='babylai-absolute babylai-inset-0 babylai-flex babylai-items-center babylai-justify-center babylai-bg-red-500 babylai-bg-opacity-70 babylai-rounded-lg'>
-                  <span className='babylai-text-white babylai-text-xs'>Error</span>
+                <div className='babylai:absolute babylai:inset-0 babylai:flex babylai:items-center babylai:justify-center babylai:bg-red-500 babylai:bg-opacity-70 babylai:rounded-lg'>
+                  <span className='babylai:text-white babylai:text-xs'>Error</span>
                 </div>
               )}
               <button
                 onClick={() => handleRemoveFile(file.previewUrl)}
-                className='babylai-absolute -babylai-top-2 -babylai-right-2 babylai-bg-red-500 babylai-text-white babylai-rounded-full babylai-w-5 babylai-h-5 babylai-flex babylai-items-center babylai-justify-center babylai-opacity-0 group-hover:babylai-opacity-100 babylai-transition-opacity'
+                className='babylai:absolute babylai:-top-2 babylai:-right-2 babylai:bg-destructive babylai:text-white babylai:rounded-full babylai:w-5 babylai:h-5 babylai:flex babylai:items-center babylai:justify-center babylai:cursor-pointer'
                 type='button'
                 aria-label='Remove image'
               >
-                <XIcon className='babylai-w-3 babylai-h-3' />
+                <MaterialSymbolsCloseSmallOutlineRounded className='babylai:w-3 babylai:h-3' />
               </button>
             </div>
           ))}
         </div>
       )}
 
-      <div className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-py-1 babylai-px-2 md:babylai-py-3 md:babylai-px-4'>
+      <div className='babylai:flex babylai:items-center babylai:gap-2 babylai:relative babylai:rounded-full babylai:bg-card babylai:py-1 babylai:px-2 babylai:md:py-3 babylai:md:px-4'>
         <input
           type='file'
           ref={fileInputRef}
           onChange={handleFileSelect}
           accept='image/*'
           multiple
-          className='babylai-hidden'
+          className='babylai:hidden'
         />
-        <Button
-          variant='ghost'
-          size='icon'
-          onClick={handleAttachClick}
-          disabled={props.isLoading}
-          className='babylai-rounded-full babylai-w-8 babylai-h-8 babylai-text-black-white-500 hover:babylai-text-primary-500 hover:babylai-bg-transparent'
-          type='button'
-        >
-          <PaperclipIcon className='babylai-w-4 babylai-h-4' />
-        </Button>
+        <div className='babylai:border-e babylai:border-border babylai:pe-2'>
+          <button
+            onClick={handleAttachClick}
+            disabled={props.isLoading || props.isChatClosed}
+            className='babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:w-8 babylai:h-8 babylai:cursor-pointer babylai:bg-secondary babylai:text-muted-foreground babylai:hover:text-primary-500 babylai:transition-colors babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed'
+            type='button'
+            aria-label='Attach image'
+          >
+            <SolarPaperclipBoldDuotone className='babylai:w-4 babylai:h-4' />
+          </button>
+        </div>
         <input
           type='text'
           value={props.inputMessage}
           onChange={(e) => props.setInputMessage(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder={t('homeSdk.placeholder')}
-          className='babylai-flex-1 babylai-py-2 babylai-px-2 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white babylai-border-none'
+          disabled={props.isChatClosed}
+          className='babylai:flex-1 babylai:py-2 babylai:px-2 babylai:bg-transparent babylai:outline-none babylai:text-sm babylai:border-none babylai:text-card-foreground babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed'
         />
-        <Button
-          variant='default'
-          size='icon'
+        <button
           onClick={handleSendMessageWithAttachments}
-          disabled={isSendDisabled}
-          className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 !babylai-p-0 babylai-flex babylai-items-center babylai-justify-center disabled:babylai-opacity-50'
+          disabled={isSendDisabled || props.isChatClosed}
+          className='babylai:rounded-full babylai:bg-primary-500 babylai:hover:bg-primary-600 babylai:w-8 babylai:h-8 babylai:p-0 babylai:flex babylai:items-center babylai:justify-center babylai:disabled:opacity-50 babylai:text-white babylai:cursor-pointer babylai:disabled:cursor-not-allowed'
           type='button'
         >
           {showLoading ? (
-            <div className='babylai-inline-block babylai-animate-spin babylai-rounded-full babylai-h-4 babylai-w-4 babylai-aspect-square babylai-border-2 babylai-border-white babylai-border-t-transparent babylai-box-border'></div>
+            <div className='babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:aspect-square babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border'></div>
           ) : (
-            <EnvelopeIcon
-              className={`babylai-w-4 babylai-h-4 babylai-flex-shrink-0 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`}
-            />
+            <SolarPlain2BoldDuotone className="babylai:w-4 babylai:h-4" />
           )}
-        </Button>
+        </button>
       </div>
 
       {/* Image Preview Dialog */}

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

@@ -1,81 +1,48 @@
-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 React from "react";
+import ActionButton from "./action-button";
+import SolarAltArrowLeftLinear from '~icons/solar/alt-arrow-left-linear'
+import IcRoundMinus from '~icons/ic/round-minus'
+import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
 
 interface ChatWindowHeaderProps {
-  isShowList: boolean;
-  setIsShowList?: (isShowList: boolean) => void;
-  showChat: boolean;
-  onClose: () => void;
   handleBack: () => void;
   handleEndChat: () => void;
-  logoUrl?: string;
+  handleMinimize: () => void;
+  optionTitle: string;
 }
 
-const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
-  const [showMenu, setShowMenu] = useState(false);
-  const { t, dir } = useLocalTranslation();
-  const isRTL = String(dir) === "rtl";
+const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = ({
+  handleBack,
+  handleEndChat,
+  handleMinimize,
+  optionTitle,
+}) => {
 
   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-100 dark:!babylai-bg-storm-dust-950"
-          onClick={props.handleBack}
-        >
-          <ArrowRight
-            className={`babylai-w-3 babylai-h-3 ${isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}
-          />
-        </Button>
-        <div className="babylai-relative">
-          <Button
-            variant="rounded-icon"
-            size="icon"
-            className="!babylai-bg-primary-100 dark:!babylai-bg-storm-dust-950"
-            onClick={() => setShowMenu(!showMenu)}
-          >
-            <ThreeDots className="babylai-w-3.5 babylai-h-1 babylai-text-primary-500 dark:babylai-text-white" />
-          </Button>
+    <header className="bg-header babylai:flex babylai:items-center babylai:justify-between babylai:p-6 babylai:border-b babylai:border-black-white-200">
+      <div className="babylai:flex babylai:items-center babylai:gap-2">
+        <ActionButton
+          onClick={handleBack}
+          icon={<SolarAltArrowLeftLinear />}
+          ariaLabel="Back"
+        />
 
-          {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-white-700 babylai-ring-opacity-5 babylai-z-10">
-              <div
-                className="babylai-py-1"
-                role="menu"
-                aria-orientation="vertical"
-              >
-                <Button
-                  role="menuitem"
-                  variant="link"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    props.handleEndChat();
-                    setShowMenu(false);
-                  }}
-                >
-                  {t("homeSdk.endChat")}
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
+        <ActionButton
+          onClick={handleEndChat}
+          icon={<MaterialSymbolsCloseSmallOutlineRounded />}
+          ariaLabel="End Chat"
+        />
       </div>
 
-      {props.logoUrl ? (
-        <img
-          src={props.logoUrl}
-          alt="BabylAI Logo"
-          className="babylai-max-h-10 babylai-object-contain"
-        />
-      ) : (
-        <Logo className="babylai-w-32 babylai-h-auto dark:babylai-text-white" />
-      )}
+      <h2 className="babylai:text-lg babylai:font-semibold babylai:ml-auto babylai:text-card-foreground">
+        {optionTitle}
+      </h2>
+
+      <ActionButton
+        onClick={handleMinimize}
+        icon={<IcRoundMinus />}
+        ariaLabel="Minimize"
+      />
     </header>
   );
 };

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

@@ -0,0 +1,83 @@
+import React, { useState, useCallback } from 'react';
+import { ReviewProps } from '@/lib/types';
+import { Rating } from '@/ui/review-dialog/rating';
+import { useLocalTranslation } from '@/useLocalTranslation';
+import LogoIcon from '@/assets/logo.svg';
+
+interface InChatReviewProps {
+  onSubmit: (payload: ReviewProps) => void | Promise<void>;
+  onDone?: () => void;
+  isSubmitting?: boolean;
+}
+
+export const InChatReview: React.FC<InChatReviewProps> = ({ onSubmit, isSubmitting = false }) => {
+  const { t } = useLocalTranslation();
+  const [rating, setRating] = useState<number>(0);
+  const [comment, setComment] = useState<string>('');
+
+  const hasRating = rating >= 1 && rating <= 5;
+
+  const handleRatingChange = useCallback((val: number) => {
+    setRating(val);
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    void onSubmit({ rating, comment: comment.trim() });
+  }, [rating, comment, onSubmit]);
+
+  return (
+    <section className="babylai:mb-4 babylai:flex babylai:justify-start">
+      <div className="babylai:shrink-0 babylai:me-3 babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary">
+        <LogoIcon className="babylai:w-4 babylai:h-4 babylai:text-primary" />
+      </div>
+
+      <div className="babylai:bg-card babylai:max-w-[80%] babylai:p-5 babylai:rounded-3xl babylai:text-sm babylai:flex babylai:flex-col babylai:gap-2.5 babylai:text-start">
+        <h2 className='babylai:text-card-foreground'>
+          {t('homeSdk.InChatReview.title')}
+        </h2>
+        <p className="babylai:font-normal babylai:text-muted-foreground">
+          {t('homeSdk.InChatReview.description')}
+        </p>
+
+        <section className='babylai:bg-muted babylai:rounded-3xl babylai:p-3'>
+          <Rating value={rating} onChange={handleRatingChange} size="md" />
+        </section>
+
+        {hasRating && (
+          <>
+            <p className="babylai:text-card-foreground">{t('homeSdk.InChatReview.follow_up')}</p>
+
+            <textarea
+              className="babylai:w-full babylai:bg-secondary babylai:border babylai:border-black-white-200 babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary"
+              rows={4}
+              placeholder={t('homeSdk.InChatReview.note_placeholder')}
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              aria-label={t('homeSdk.InChatReview.note_placeholder')}
+            />
+
+            <button
+              onClick={handleSubmit}
+              disabled={isSubmitting}
+              className="babylai:bg-primary babylai:border babylai:border-primary babylai:cursor-pointer babylai:disabled:bg-black-white-300 babylai:disabled:border-black-white-300 babylai:disabled:cursor-not-allowed babylai:disabled:text-white babylai:duration-200 babylai:ease-out babylai:flex babylai:gap-1 babylai:items-center babylai:justify-center babylai:p-3 babylai:relative babylai:rounded-2xl babylai:text-white babylai:text-xl babylai:transition-all babylai:w-full"
+            >
+              {isSubmitting ? (
+                <>
+                  <span
+                    className="babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border"
+                    aria-hidden
+                  />
+                  {t('homeSdk.InChatReview.submit_button')}
+                </>
+              ) : (
+                t('homeSdk.InChatReview.submit_button')
+              )}
+            </button>
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
+InChatReview.displayName = 'InChatReview';

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

@@ -1,14 +1,16 @@
 import AgentResponse from '@/components/ui/agent-response/agent-response';
 import { ImageAttachment, ImagePreviewDialog } from '@/components/ui';
-import { Message } from '@/lib/types';
+import { Message, ReviewProps } 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 Seperator from './../../../assets/seperator.svg';
 import LogoIcon from './../../../assets/logo.svg';
-import HumanIcon from './../../../assets/icons/user.svg';
 import { presignDownload } from '@/core/api';
 import { useLocalTranslation } from '../../../useLocalTranslation';
+import PoweredBy from '@/ui/powered-by';
+import { TypingIndicator } from './typing-indicator';
+import { InChatReview } from './in-chat-review';
+import SolarUserBold from '~icons/solar/user-bold'
 
 interface ChatWindowProps {
   onSendMessage: (message: string, attachmentIds: string[]) => void;
@@ -16,8 +18,12 @@ interface ChatWindowProps {
   messages: Message[];
   assistantStatus: string;
   needsAgent: boolean;
-  isAblyConnected: boolean;
   sessionId?: string | null;
+  isChatClosed?: boolean;
+  inChatReviewSessionId?: string | null;
+  isSubmittingReview?: boolean;
+  onInChatReviewSubmit?: (payload: ReviewProps) => void | Promise<void>;
+  onInChatReviewDone?: () => void;
 }
 
 // Memoize individual message component to prevent unnecessary re-renders
@@ -39,12 +45,13 @@ const MessageComponent = React.memo(
   }) => {
     const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
     const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
-    const textDirection = message.senderType === 1 ? 'babylai-justify-end' : 'babylai-justify-start';
+    const textDirection = message.senderType === 1 ? 'babylai:justify-end' : 'babylai:justify-start';
 
     const handleImageClick = useCallback(
       (clickedIndex: number) => {
         // Use attachmentUrls if available (from Ably), otherwise use attachmentIds (user-sent)
-        const attachments = message.attachmentUrls || [];
+        const attachments =
+          message.attachmentUrls?.length ? message.attachmentUrls : (message.attachmentIds || []);
         if (attachments.length > 0) {
           onImageClick(attachments, clickedIndex);
         }
@@ -55,32 +62,31 @@ const MessageComponent = React.memo(
     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-primary-500' />
+          <div className='babylai:flex babylai:justify-center babylai:items-center babylai:my-4'>
+            <Seperator className='babylai:w-full babylai:text-primary-500' />
           </div>
         )}
-        <div className={`babylai-mb-4 babylai-flex ${textDirection}`}>
+        <div className={`babylai:mb-4 babylai:flex ${textDirection}`}>
           {isFirstInSequence && (message.senderType === 3 || message.senderType === 2) && (
-            <div className='babylai-flex-shrink-0 babylai-me-3'>
+            <div className='babylai:shrink-0 babylai:me-3'>
               <div
-                className={`babylai-w-8 babylai-h-8 babylai-rounded-full babylai-flex babylai-items-center babylai-justify-center ${
-                  message?.senderType === 3 ? 'babylai-bg-primary' : 'babylai-bg-black-white-50'
-                }`}
+                className={`babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center ${message?.senderType === 3 ? 'babylai:bg-primary' : 'babylai:bg-black-white-50'
+                  }`}
               >
                 {message?.senderType === 3 ? (
-                  <LogoIcon className='babylai-w-4 babylai-h-4 babylai-text-primary' />
+                  <LogoIcon className='babylai:w-4 babylai:h-4 babylai:text-primary' />
                 ) : (
-                  <HumanIcon className='babylai-w-4 babylai-h-4 babylai-text-primary' />
+                  <SolarUserBold className='babylai:w-4 babylai:h-4 babylai:text-primary' />
                 )}
               </div>
             </div>
           )}
-          {!isFirstInSequence && <div className='babylai-flex-shrink-0 babylai-me-3 babylai-w-8'></div>}
+          {!isFirstInSequence && <div className='babylai:shrink-0 babylai:me-3 babylai:w-8'></div>}
 
-          <div className='babylai-flex babylai-flex-col babylai-gap-2'>
+          <div className='babylai:flex babylai:flex-col babylai:gap-2'>
             {/* Display attachment URLs (from Ably) */}
             {message.attachmentUrls && message.attachmentUrls.length > 0 && (
-              <div className='babylai-flex babylai-flex-row babylai-flex-wrap babylai-gap-2 babylai-max-w-full'>
+              <div className='babylai:flex babylai:flex-row babylai:flex-wrap babylai:gap-2 babylai:max-w-full'>
                 {message.attachmentUrls.map((attachmentUrl, imgIndex) => (
                   <ImageAttachment
                     key={attachmentUrl}
@@ -93,7 +99,7 @@ const MessageComponent = React.memo(
             )}
             {/* Display attachment IDs (user-sent messages) */}
             {message.attachmentIds && message.attachmentIds.length > 0 && (
-              <div className='babylai-flex babylai-flex-row babylai-flex-wrap babylai-gap-2 babylai-max-w-full'>
+              <div className='babylai:flex babylai:flex-row babylai:flex-wrap babylai:gap-2 babylai:max-w-full'>
                 {message.attachmentIds.map((attachmentId, imgIndex) => (
                   <ImageAttachment
                     key={attachmentId}
@@ -122,26 +128,6 @@ const MessageComponent = React.memo(
 
 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-me-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 dark:!babylai-bg-storm-dust-900'>
-        <p className='babylai-text-sm babylai-opacity-70 dark:babylai-text-white babylai-m-0'>...</p>
-      </div>
-    </div>
-  );
-});
-
-TypingIndicator.displayName = 'TypingIndicator';
-
 export const ChatWindow = React.memo(
   ({
     onSendMessage,
@@ -150,6 +136,11 @@ export const ChatWindow = React.memo(
     assistantStatus = 'loading',
     needsAgent,
     sessionId,
+    isChatClosed = false,
+    inChatReviewSessionId,
+    isSubmittingReview = false,
+    onInChatReviewSubmit,
+    onInChatReviewDone,
   }: ChatWindowProps) => {
     const { i18n } = useLocalTranslation();
     const [inputMessage, setInputMessage] = useState('');
@@ -249,7 +240,7 @@ export const ChatWindow = React.memo(
               return Promise.resolve(null);
             }
 
-            return presignDownload(fileId, i18n.language)
+            return presignDownload(fileId, i18n.language as 'ar' | 'en')
               .then((response) => {
                 if (!response || !response.downloadUrl) {
                   return null;
@@ -322,13 +313,26 @@ export const ChatWindow = React.memo(
       ));
     }, [messages, firstHumanAgentIndex, scrollToBottom, handleImageClick]);
 
+    const showInChatReview = !!inChatReviewSessionId && !!onInChatReviewSubmit;
+
     return (
       <>
-        <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
+        <div className='babylai:flex-1 babylai:overflow-y-auto babylai:p-4 babylai:h-full'>
           {messagesListWithGallery}
 
           {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
 
+          {showInChatReview && (
+            <>
+              <Seperator className="babylai:my-6 babylai:text-black-white-300" />
+              <InChatReview
+                onSubmit={onInChatReviewSubmit}
+                onDone={onInChatReviewDone}
+                isSubmitting={isSubmittingReview}
+              />
+            </>
+          )}
+
           <div ref={messagesEndRef} />
         </div>
 
@@ -337,10 +341,13 @@ export const ChatWindow = React.memo(
           handleSendMessage={handleSendMessage}
           setInputMessage={setInputMessage}
           isLoading={isLoading}
+          isChatClosed={isChatClosed}
           onEnsureSession={onEnsureSession}
           sessionId={sessionId}
         />
 
+        <PoweredBy />
+
         {/* Gallery Preview Dialog */}
         {galleryState.isOpen && galleryState.imageUrls.length > 0 && (
           <ImagePreviewDialog

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import LoadingGif from '../../../assets/animatedLogo.gif';
+
+interface TypingIndicatorProps {
+  firstHumanAgentIndex: number;
+}
+
+export const TypingIndicator = React.memo(({ firstHumanAgentIndex }: TypingIndicatorProps) => {
+  if (firstHumanAgentIndex !== -1) return null;
+
+  return (
+    <div className='babylai:mb-4 babylai:flex'>
+      <div className='babylai:shrink-0 babylai:me-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-card'>
+        <p className='babylai:text-sm babylai:opacity-70 babylai:text-muted-foreground babylai:m-0'>...</p>
+      </div>
+    </div>
+  );
+});
+
+TypingIndicator.displayName = 'TypingIndicator';
+
+export default TypingIndicator;

package/src/ui/chatbot-popup/error-screen/index.tsx

@@ -1,18 +1,18 @@
-import Header from '@/components/ui/header'
+
+import Header from '../options-list-screen/header'
 
 interface ChatBotErrorScreenProps {
   onClose: () => void
   error: string
-  logoUrl?: string
 }
 
 const ChatBotErrorScreen: React.FC<ChatBotErrorScreenProps> = (props) => {
   return (
-    <div className="babylai-w-full babylai-h-full babylai-bg-black-white-50 babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col">
-      <div className="babylai-h-full babylai-rounded-3xl babylai-flex babylai-flex-col babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8 babylai-bg-linear-to-b">
-        <Header onClose={props.onClose} logoUrl={props.logoUrl} />
-        <div className="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-px-6 babylai-py-16 md:babylai-py-28">
-          <div className="babylai-text-white babylai-text-lg">Error: {props.error}</div>
+    <div className="babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col">
+      <div className="babylai:h-full babylai:rounded-3xl babylai:flex babylai:flex-col babylai:gap-4 babylai:md:gap-8">
+        <Header onMinimize={props.onClose} />
+        <div className="babylai:flex babylai:flex-col babylai:items-center babylai:justify-center babylai:w-full babylai:h-full babylai:px-6 babylai:py-16 babylai:md:py-28">
+          <div className="babylai:text-secondary-foreground babylai:text-lg">Error: {props.error}</div>
         </div>
       </div>
     </div>