@aslaluroba/help-center-react 3.0.15 → 3.0.17

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.15",
+  "version": "3.0.17",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {

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

@@ -6,17 +6,17 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'babylai-bg-primary-500 babylai-p-2 babylai-text-white babylai-text-xs babylai-font-semibold hover:babylai-bg-primary-600',
+        default: 'babylai-bg-primary-500 babylai-p-2 babylai-text-white babylai-text-xs babylai-font-semibold hover:babylai-bg-primary-600 babylai-border-none',
         destructive:
           'babylai-bg-destructive babylai-p-2 babylai-text-destructive-foreground babylai-shadow-sm hover:babylai-bg-destructive/90',
         outline:
-          'babylai-border babylai-border-primary-500 babylai-bg-background-transparent hover:babylai-border-primary-600 hover:babylai-text-primary-600 babylai-text-primary-500 babylai-font-bold',
+          'babylai-bg-transparent babylai-border babylai-border-primary-500 babylai-bg-background-transparent hover:babylai-border-primary-600 hover:babylai-text-primary-600 babylai-text-primary-500 babylai-font-bold',
         secondary:
           'babylai-bg-secondary babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm babylai-hover:babylai-bg-secondary/80',
         ghost:
           'babylai-bg-transparent babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm hover:babylai-bg-secondary/80',
-        link: 'babylai-text-primary babylai-underline-offset-4 hover:babylai-underline',
-        'rounded-icon': '!babylai-p-2'
+        link: 'babylai-bg-transparent babylai-text-primary babylai-underline-offset-4 hover:babylai-underline babylai-border-none',
+        'rounded-icon': '!babylai-p-2 babylai-border-none babylai-bg-transparent'
       },
       size: {
         default: 'babylai-h-9 babylai-px-4 babylai-py-2',

package/src/globals.css

@@ -6,6 +6,8 @@
 :host {
   --babylai-primary-color: #AD49E1;
   --babylai-secondary-color: #F6ECFC;
+  --babylai-storm-dust: #3d3d3d;
+  --babylai-storm-dust-950: #262626;
 }
 
 *,
@@ -22,9 +24,6 @@
   --tw-gradient-via-position: ;
   --tw-gradient-to-position: ;
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 0 solid;
 }
 
 a {
@@ -44,10 +43,6 @@ img {
   height: auto;
 }
 
-button {
-  background-color: transparent;
-}
-
 /* Floating-message styles */
 @keyframes float {
 
@@ -59,4 +54,23 @@ button {
   50% {
     transform: translateY(-10px);
   }
+}
+
+.babylai-bg-linear-to-b {
+  background: var(--babylai-primary-color);
+  background: linear-gradient(180deg, var(--babylai-primary-color) 0%, color-mix(in srgb, var(--babylai-primary-color) 0%, transparent) 100%);
+}
+
+/* Dark mode via Tailwind .dark class */
+.dark .babylai-bg-linear-to-b {
+  background: var(--babylai-storm-dust-950);
+  background: linear-gradient(180deg, var(--babylai-storm-dust-950) 0%, color-mix(in srgb, var(--babylai-storm-dust-950) 60%, transparent) 100%);
+}
+
+/* Dark mode via browser preference */
+@media (prefers-color-scheme: dark) {
+  .babylai-bg-linear-to-b {
+    background: var(--babylai-storm-dust-950);
+    background: linear-gradient(180deg, var(--babylai-storm-dust-950) 0%, color-mix(in srgb, var(--babylai-storm-dust-950) 60%, transparent) 100%);
+  }
 }

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

@@ -21,7 +21,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
         onChange={(e) => props.setInputMessage(e.target.value)}
         onKeyDown={props.handleKeyDown}
         placeholder={t('homeSdk.placeholder')}
-        className='babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white'
+        className='babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white babylai-border-none'
       />
       <Button
         variant='default'

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

@@ -26,7 +26,7 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
         <Button
           variant="rounded-icon"
           size="icon"
-          className="babylai-bg-primary-100 dark:babylai-bg-storm-dust-950"
+          className="!babylai-bg-primary-100 dark:!babylai-bg-storm-dust-950"
           onClick={props.handleBack}
         >
           <ArrowRight
@@ -37,7 +37,7 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
           <Button
             variant="rounded-icon"
             size="icon"
-            className="babylai-bg-primary-100 dark:babylai-bg-storm-dust-950"
+            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" />

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

@@ -85,7 +85,7 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
         </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'>...</p>
+        <p className='babylai-text-sm babylai-opacity-70 dark:babylai-text-white babylai-m-0'>...</p>
       </div>
     </div>
   );

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

@@ -9,7 +9,7 @@ interface ChatBotErrorScreenProps {
 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-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60 babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8 dark:babylai-from-storm-dust-950 dark:babylai-to-storm-dust-950/60">
+      <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>

package/src/ui/chatbot-popup/home-screen/card.tsx

@@ -13,13 +13,13 @@ const Card: React.FC<CardProps> = (props) => {
 
   return (
     <div className="babylai-flex babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6 dark:babylai-bg-storm-dust-900">
-      <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">
+      <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white babylai-m-0">
         {props.text}
       </p>
       <Button
         variant="rounded-icon"
         size="icon"
-        className="babylai-bg-primary-500 babylai-text-black-white-50 hover:babylai-bg-primary-600 md:!babylai-w-10 md:!babylai-h-10"
+        className="!babylai-bg-primary-500 babylai-text-black-white-50 hover:!babylai-bg-primary-600 md:!babylai-w-10 md:!babylai-h-10"
         onClick={() => props.handleClick()}
       >
         <ArrowRight

package/src/ui/chatbot-popup/home-screen/chat-now-card.tsx

@@ -16,8 +16,8 @@ const ChatNowCard: React.FC<ChatNowCardProps> = (props) => {
                     <Logo className="babylai-w-12 babylai-h-12 babylai-text-primary-500" />
                 </div>
                 <div className="babylai-flex babylai-flex-col babylai-gap-0 babylai-text-base">
-                    <p className="babylai-font-semibold  babylai-text-black-white-500 dark:babylai-text-white">BabylAI</p>
-                    <p className="babylai-font-semibold babylai-text-black-white-800 dark:babylai-text-white">
+                    <p className="babylai-font-semibold  babylai-text-black-white-500 dark:babylai-text-white babylai-m-0">BabylAI</p>
+                    <p className="babylai-font-semibold babylai-text-black-white-800 dark:babylai-text-white babylai-m-0">
                         {t('homeSdk.welcomeMessage')}
                     </p>
                 </div>

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

@@ -24,7 +24,7 @@ const HomeScreen: React.FC<HomeScreenProps> = (props) => {
     <div className="babylai-h-full babylai-flex babylai-flex-col babylai-overflow-y-auto babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8">
       <Header onClose={props.onClose} logoUrl={props.logoUrl} />
 
-      <h1 className="babylai-text-2xl md:babylai-text-4xl babylai-font-bold babylai-text-white">
+      <h1 className="babylai-text-2xl md:babylai-text-4xl babylai-font-bold babylai-text-white babylai-m-0">
         {t('homeSdk.chatTitle')}
         <br />
         BabylAI 🚀

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

@@ -15,7 +15,7 @@ const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps> = (props) => {
         className={cn(
           'babylai-rounded-3xl babylai-h-full babylai-flex babylai-flex-col babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8',
           {
-            'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60 dark:babylai-from-storm-dust-950 dark:babylai-to-storm-dust-950/60': !props.isShowList,
+            'babylai-bg-linear-to-b': !props.isShowList,
             'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': props.isShowList
           }
         )}

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

@@ -14,7 +14,7 @@ const ExpandedOption: React.FC<ExpandedOptionProps> = ({ option, handleStartChat
     <>
       <CardContent className="babylai-transition-all babylai-duration-300 babylai-ease-in-out babylai-flex babylai-flex-col babylai-gap-1">
         {option.paragraphs.map((paragraph, index) => (
-          <p key={index} className="babylai-font-semibold babylai-text-base babylai-text-black-white-800 dark:babylai-text-white">
+          <p key={index} className="babylai-font-semibold babylai-text-base babylai-text-black-white-800 dark:babylai-text-white babylai-m-0">
             {paragraph}
           </p>
         ))}

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

@@ -24,7 +24,7 @@ const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
       <Button
         variant="rounded-icon"
         size="icon"
-        className="!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 dark:babylai-bg-storm-dust-900 babylai-relative babylai-z-10"
+        className="!babylai-w-12 !babylai-h-12 !babylai-bg-black-white-50 dark:!babylai-bg-storm-dust-900 babylai-relative babylai-z-10"
         onClick={handleBack}
       >
         {showHelpScreen ? (

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

@@ -33,7 +33,7 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
     <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-mb-4 babylai-text-black-white-800 dark:babylai-text-white'>
+      <h1 className='babylai-text-4xl babylai-font-bold babylai-mb-4 babylai-text-black-white-800 dark:babylai-text-white babylai-mt-0'>
         {helpScreen?.title}
       </h1>
 

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

@@ -12,13 +12,13 @@ const OptionCard: React.FC<OptionCardProps> = (props) => {
 
   return (
     <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 dark:babylai-text-white">
+      <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white babylai-m-0">
         {props.title}
       </p>
       <Button
         variant="rounded-icon"
         size="icon"
-        className="babylai-text-primary-500 hover:babylai-bg-primary-100"
+        className="babylai-text-primary-500 hover:!babylai-bg-primary-100"
       >
         <ArrowRight
           className={`babylai-w-3 babylai-h-3 ${!isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}

package/src/ui/confirmation-modal/index.tsx

@@ -15,8 +15,8 @@ const ConfirmationModal = ({ title, message, onCancel, onConfirm }: Confirmation
         <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 dark:babylai-bg-storm-dust-900 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 dark:babylai-text-white'>{title}</h3>
-                <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4 dark:babylai-text-white'>{message}</p>
+                <h3 className='babylai-text-black-white-900 babylai-font-bold babylai-text-sm babylai-mb-2 babylai-text-center babylai-mt-0 dark:babylai-text-white'>{title}</h3>
+                <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4 dark:babylai-text-white babylai-mt-0'>{message}</p>
                 <div className='babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full'>
                     <Button
                         variant='default'

package/src/ui/help-popup.tsx

@@ -234,7 +234,7 @@ const HelpPopup = ({
       <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'
+        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' />
@@ -286,7 +286,7 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
         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 dark:babylai-from-storm-dust-950 dark:babylai-to-storm-dust-950/60': !isShowList,
+            'babylai-bg-linear-to-b': !isShowList,
             'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': isShowList,
           }
         )}

package/src/ui/powered-by.tsx

@@ -9,7 +9,7 @@ const PoweredBy: React.FC = () => {
         href="https://www.babylai.net/"
         target="_blank"
         rel="noopener noreferrer"
-        className="babylai-text-xs babylai-opacity-60 hover:babylai-opacity-100">
+        className="babylai-text-xs babylai-opacity-60 hover:babylai-opacity-100 babylai-transition-all">
         {t('homeSdk.poweredBy')} BabylAI © 2025
       </a>
     </section>

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

@@ -53,21 +53,23 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
 
     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 dark:babylai-bg-storm-dust-950 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='babylai-border-b babylai-pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4'>
-                <h2 className="babylai-text-lg babylai-font-semibold dark:babylai-text-white">{t('homeSdk.ReviewDialog.title')}</h2>
+            <header className='babylai-border-t-0 babylai-border-x-0 babylai-border-b babylai-border-solid babylai-border-gray-400 babylai-pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4'>
+                <h2 className="babylai-text-lg babylai-font-semibold dark:babylai-text-white babylai-m-0">{t('homeSdk.ReviewDialog.title')}</h2>
                 <CloseCircle
                     className="babylai-w-6 babylai-h-6 babylai-cursor-pointer babylai-text-primary-500 dark:babylai-text-white"
                     onClick={props.onClose}
                 />
             </header>
             <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                <p className="babylai-text-sm babylai-text-gray-600 babylai-mb-3 dark:babylai-text-white">
+                <p className="babylai-text-sm babylai-mb-3 babylai-mt-0 babylai-text-gray-600 dark:babylai-text-white">
                     {t('homeSdk.ReviewDialog.description')}
                 </p>
 
-                <div className="babylai-flex babylai-items-center babylai-gap-2">
-                    <span className="babylai-text-base babylai-font-medium dark:babylai-text-white">{t('homeSdk.ReviewDialog.rating_label')}</span>
-                    <Rating value={rating} onChange={handleRatingChange} />
+                <div className="babylai-flex babylai-flex-col babylai-gap-2">
+                    <div className="babylai-flex babylai-items-center babylai-gap-2">
+                        <span className="babylai-text-base babylai-font-medium dark:babylai-text-white">{t('homeSdk.ReviewDialog.rating_label')}</span>
+                        <Rating value={rating} onChange={handleRatingChange} />
+                    </div>
                     <span className={`babylai-text-sm babylai-text-red-500 babylai-transition-opacity babylai-duration-300 ${error.rating ? 'babylai-opacity-100' : 'babylai-opacity-0'}`}>
                         {error.rating}
                     </span>
@@ -77,7 +79,7 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
                     <label htmlFor='comment' className="babylai-text-base babylai-font-medium dark:babylai-text-white">{t('homeSdk.ReviewDialog.comment_label')}</label>
                     <textarea
                         id='comment'
-                        className="babylai-bg-black-white-100 babylai-p-6 babylai-rounded-xl babylai-resize-none dark:babylai-bg-storm-dust-900 dark:babylai-text-white"
+                        className="babylai-bg-black-white-100 babylai-p-6 babylai-rounded-xl babylai-resize-none babylai-border-none dark:babylai-bg-storm-dust-900 dark:babylai-text-white"
                         rows={4}
                         placeholder={t('homeSdk.ReviewDialog.comment_placeholder')}
                         value={comment}