@aslaluroba/help-center-react 3.2.5 → 3.2.7

package/src/lib/theme-utils.ts

@@ -4,7 +4,6 @@
 
 export interface ThemeColors {
   primaryColor?: string;
-  secondaryColor?: string;
 }
 
 /**
@@ -12,7 +11,7 @@ export interface ThemeColors {
  */
 export const getPrimaryColorStyles = (primaryColor?: string) => {
   if (!primaryColor) return {};
-  
+
   return {
     '--babylai-primary-color': primaryColor,
     '--babylai-primary-color-100': lightenColor(primaryColor, 0.9),
@@ -28,37 +27,6 @@ export const getPrimaryColorStyles = (primaryColor?: string) => {
   } as React.CSSProperties;
 };
 
-/**
- * Generate dynamic styles for secondary color
- */
-export const getSecondaryColorStyles = (secondaryColor?: string) => {
-  if (!secondaryColor) return {};
-  
-  return {
-    '--babylai-secondary-color': secondaryColor,
-    '--babylai-secondary-color-100': lightenColor(secondaryColor, 0.9),
-    '--babylai-secondary-color-200': lightenColor(secondaryColor, 0.8),
-    '--babylai-secondary-color-300': lightenColor(secondaryColor, 0.7),
-    '--babylai-secondary-color-400': lightenColor(secondaryColor, 0.6),
-    '--babylai-secondary-color-500': secondaryColor,
-    '--babylai-secondary-color-600': darkenColor(secondaryColor, 0.1),
-    '--babylai-secondary-color-700': darkenColor(secondaryColor, 0.2),
-    '--babylai-secondary-color-800': darkenColor(secondaryColor, 0.3),
-    '--babylai-secondary-color-900': darkenColor(secondaryColor, 0.4),
-    '--babylai-secondary-color-950': darkenColor(secondaryColor, 0.5),
-  } as React.CSSProperties;
-};
-
-/**
- * Get combined theme styles
- */
-export const getThemeStyles = (colors: ThemeColors): React.CSSProperties => {
-  return {
-    ...getPrimaryColorStyles(colors.primaryColor),
-    ...getSecondaryColorStyles(colors.secondaryColor),
-  };
-};
-
 /**
  * Lighten a color by a percentage
  */

package/src/lib/types.ts

@@ -1,8 +1,7 @@
 export interface HelpCenterProps extends React.HTMLAttributes<HTMLDivElement> {
   helpScreenId: string;
   primaryColor?: string;
-  secondaryColor?: string;
-  logoUrl?: string;
+  language?: 'ar' | 'en';
 }
 
 export interface Theme {
@@ -88,7 +87,11 @@ export interface HelpScreenData {
   tenant: {
     id: string;
     name: string;
-    key: string;
+    key: string;  
+    logoUrl: string;
+    settings: {
+      description: string;
+    };
   };
   title: string;
   description: string;
@@ -125,7 +128,7 @@ export interface Option {
 }
 
 export interface ReviewProps {
-  comment: string;
+  comment?: string;
   rating: number;
 }
 

package/src/locales/ar.json

@@ -13,21 +13,31 @@
     "poweredBy": "مدعوم بواسطة",
     
     "ReviewDialog": {
-      "title": "أضف تقييمك",
-      "description": "نحن نقدر ملاحظاتك! يُرجى تخصيص لحظة لتقييم تجربتك ومشاركة آرائك في قسم التعليقات أدناه. يساعدنا تقييمك في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مستنيرة. شكرًا لك!",
+      "title": "نحن نقدر ملاحظاتك!",
+      "simple_title": "نود معرفة رأيك!",
+      "simple_description": "رأيك يساعدنا على التحسين وتقديم دعم أفضل. يُرجى تقييم تجربتك مع خدمتنا وإخبارنا كيف كان أداؤنا.",
+      "description": "رأيك يساعدنا على التحسين وتقديم دعم أفضل. يُرجى تقييم تجربتك مع خدمتنا وإخبارنا كيف كان أداؤنا.",
       "rating_label": "التقييم:",
       "comment_label": "التعليق:",
       "comment_placeholder": "اكتب تعليقك هنا...",
       "submit_button": "إرسال التقييم",
+      "rate_button": "تقييم",
       "comment_error": "يجب أن يكون التعليق بين 10 و500 حرف.",
       "rating_error": "يجب أن يكون التقييم بين 1 و5.",
       "skip_button": "تخطي"
     },
+    "InChatReview": {
+      "title": "كيف كانت محادثتك معنا اليوم؟",
+      "description": "نحب أن نعرف كيف كان أداؤنا - ملاحظاتك تساعدنا على جعل كل محادثة أفضل.",
+      "follow_up": "رائع! نحن سعداء أنك استمتعت بالدردشة معنا. هل يمكنك تقييم تجربتك الإجمالية لمساعدتنا على الحفاظ على ذلك؟",
+      "note_placeholder": "اكتب ملاحظتك",
+      "submit_button": "تقديم"
+    },
     "ConfirmationModal": {
-      "title": "تأكيد",
-      "message": "هل أنت متأكد أنك تريد إنهاء المحادثة؟",
-      "confirmation_button": "إنهاء",
-      "cancel_button": "إلغاء",
+      "title": "تريد المغادرة؟ 👋",
+      "message": "لا تقلق، يمكنك العودة في أي وقت. نحن دائما هنا إذا كنت تحتاج مساعدة أو لديك أسئلة.",
+      "confirmation_button": "إغلاق المحادثة",
+      "cancel_button": "استمرار",
       "endAndStartNewChatTitle": "إنهاء وبدء محادثة جديدة",
       "endAndStartNewChatMessage": "هل أنت متأكد أنك تريد إنهاء هذه المحادثة وبدء محادثة جديدة؟"
     }

package/src/locales/en.json

@@ -13,21 +13,31 @@
     "poweredBy": "Powered by",
 
     "ReviewDialog": {
-      "title": "Add your Review",
-      "description": "We appreciate your feedback! Please take a moment to rate your experience and share your thoughts in the comment section below. Your review helps us improve our services and assists other users in making informed decisions. Thank you!",
+      "title": "We’d Love Your Feedback!",
+      "simple_title": "We'd Love Your Feedback!",
+      "simple_description": "Your opinion helps us improve and deliver better support. Please rate your experience with our service and let us know how we did.",
+      "description": "Your opinion helps us improve and deliver better support. Please rate your experience with our service and let us know how we did.",
       "rating_label": "Rating:",
       "comment_label": "Comment:",
       "comment_placeholder": "Write your comment here...",
       "submit_button": "Submit Review",
+      "rate_button": "Rate",
       "comment_error": "Comment must be between 10 and 500 characters.",
       "rating_error": "Rating must be between 1 and 5.",
       "skip_button": "Skip"
     },
+    "InChatReview": {
+      "title": "How was your conversation with us today?",
+      "description": "We'd love to know how we did - your feedback helps us make every chat even better.",
+      "follow_up": "Awesome! We're glad you enjoyed chatting with us. Could you rate your overall experience to help us keep it that way?",
+      "note_placeholder": "Write Your Note",
+      "submit_button": "Submit Review"
+    },
     "ConfirmationModal": {
-      "title": "Confirmation",
-      "message": "Are you sure you want to end the conversation?",
-      "confirmation_button": "Confirm",
-      "cancel_button": "Cancel",
+      "title": "Leaving so soon? 👋",
+      "message": "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
+      "confirmation_button": "Close Chat",
+      "cancel_button": "Continue",
       "endAndStartNewChatTitle": "End and Start New Chat",
       "endAndStartNewChatMessage": "Are you sure you want to end the current conversation and start a new one?"
     }

package/src/types/icons.d.ts

@@ -0,0 +1,6 @@
+declare module "~icons/*" {
+  import type { FC, SVGProps } from "react";
+  const Icon: FC<SVGProps<SVGSVGElement> & { title?: string }>;
+  export default Icon;
+}
+

package/src/ui/chatbot-popup/active-chat-actions.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/components';
+import { useLocalTranslation } from '@/useLocalTranslation';
+import React from 'react';
+import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone';
+
+interface ActiveChatActionsProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ActiveChatActions: React.FC<ActiveChatActionsProps> = ({
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useLocalTranslation();
+
+  return (
+    <section className="babylai:flex babylai:justify-between babylai:gap-3 babylai:px-4 babylai:py-6 babylai:absolute babylai:left-0 babylai:right-0 babylai:bottom-11 babylai:z-20 babylai:bg-linear-to-t babylai:from-card babylai:to-transparent babylai:from-[28.32%] babylai:to-[112.59%]">
+      <Button
+        onClick={onConfirm}
+        variant='secondary'
+      >
+        {t('homeSdk.ConfirmationModal.confirmation_button')}
+
+      </Button>
+      <Button
+        onClick={onCancel}
+        variant='default'
+      >
+        {t('homeSdk.ConfirmationModal.cancel_button')}
+        <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
+      </Button>
+    </section>
+  );
+};
+
+ActiveChatActions.displayName = 'ActiveChatActions';
+
+export default ActiveChatActions;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ActionButtonProps {
+  onClick: () => void;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  ariaLabel?: string;
+  className?: string;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  onClick,
+  icon,
+  children,
+  ariaLabel,
+  className,
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:ml-auto babylai:cursor-pointer',
+        className
+      )}
+      aria-label={ariaLabel}
+      type="button"
+    >
+      {icon}
+      {children}
+    </button>
+  );
+};
+
+ActionButton.displayName = 'ActionButton';
+
+export default ActionButton;

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: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-3 babylai: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';