@aslaluroba/help-center-react 2.0.4 → 2.0.6

package/src/globals.css

@@ -10,15 +10,6 @@
 }
 
 
-  @media (min-width: 1820px) {
-
-.babylai-help-center-container {
-  bottom: 2%;
-}
-
-}
-
-
 
 
 /* Help-popup styles */

package/src/index.ts

@@ -1,9 +1,11 @@
 import { configService } from './lib/config'
 import { HelpCenter } from './ui/help-center'
+import { TokenResponse } from './lib/types'
 
 export type HelpCenterConfig = {
-  baseUrl: string
+  baseUrl?: string
   hubUrl?: string
+  getToken?: () => Promise<TokenResponse>
 }
 
 export function initializeHelpCenter(config: HelpCenterConfig) {
@@ -18,4 +20,3 @@ export * from './core/SignalRService'
 // export * from './globals.css'
 
 export { TokenService } from './core/token-service'
-export { initializeAPI } from './core/api'

package/src/lib/config.ts

@@ -1,59 +1,59 @@
-import { ClientSignalRService } from '../core/SignalRService'
-import { initializeAPI, getValidToken } from '../core/api'
-import { TokenResponse } from './types'
+import { ClientSignalRService } from '../core/SignalRService';
+import { initializeAPI, getValidToken } from '../core/api';
+import { TokenResponse } from './types';
 
 type Config = {
-  baseUrl: string
-  hubUrl?: string
-  tenantId?: string
-  apiKey?: string
-  getToken?: () => Promise<TokenResponse>
-}
+  baseUrl?: string;
+  hubUrl?: string;
+  tenantId?: string;
+  apiKey?: string;
+  getToken?: () => Promise<TokenResponse>;
+};
 
 class ConfigService {
-  private static instance: ConfigService
-  private config: Config | null = null
+  private static instance: ConfigService;
+  private config: Config | null = null;
 
   private constructor() {}
 
   static getInstance(): ConfigService {
     if (!ConfigService.instance) {
-      ConfigService.instance = new ConfigService()
+      ConfigService.instance = new ConfigService();
     }
-    return ConfigService.instance
+    return ConfigService.instance;
   }
 
   initialize(config: Config) {
     this.config = {
-      baseUrl: config.baseUrl,
-      hubUrl: config.hubUrl || config.baseUrl,
+      baseUrl: config.baseUrl || 'https://babylai.net/api',
+      hubUrl: config.hubUrl || config.baseUrl || 'https://babylai.net/api',
       tenantId: config.tenantId,
       apiKey: config.apiKey,
-      getToken: config.getToken
-    }
+      getToken: config.getToken,
+    };
 
     // Initialize API with the getToken function directly
     if (!this.config.getToken) {
-      throw new Error('getToken function is required in configuration')
+      throw new Error('getToken function is required in configuration');
     }
 
-    initializeAPI(this.config.baseUrl, this.config.getToken)
+    initializeAPI(this.config.baseUrl || 'https://babylai.net/api', this.config.getToken);
 
     // Initialize SignalR
-    ClientSignalRService.initialize(this.config.hubUrl || this.config.baseUrl)
+    const hubUrl = this.config.hubUrl || this.config.baseUrl || 'https://babylai.net/api';
+    ClientSignalRService.initialize(hubUrl);
   }
 
   getConfig(): Config {
     if (!this.config) {
-      throw new Error('Help Center not initialized. Call initialize() first with configuration.')
+      throw new Error('Help Center not initialized. Call initialize() first with configuration.');
     }
-    console.log('🚀 ~ ConfigService ~ getConfig ~ config:', this.config)
-    return this.config
+    return this.config;
   }
 
   async getToken(): Promise<string> {
-    return await getValidToken()
+    return await getValidToken();
   }
 }
 
-export const configService = ConfigService.getInstance()
+export const configService = ConfigService.getInstance();

package/src/lib/types.ts

@@ -118,3 +118,8 @@ export interface Option {
   hasNestedOptions: boolean
   order: number
 }
+
+export interface ReviewProps {
+  comment: string
+  rating: number
+}

package/src/locales/ar.json

@@ -8,6 +8,23 @@
     "pickTopic": "اختر موضوعًا",
     "endChat": "إنهاء المحادثة",
     "needAssistance": "هل تحتاج مساعدة؟ لاتردد في اخباري اضغط هنا",
-    "placeholder": "اكتب سؤالك هنا"
+    "placeholder": "اكتب سؤالك هنا",
+    "ReviewDialog": {
+      "title": "أضف تقييمك",
+      "description": "نحن نقدر ملاحظاتك! يُرجى تخصيص لحظة لتقييم تجربتك ومشاركة آرائك في قسم التعليقات أدناه. يساعدنا تقييمك في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مستنيرة. شكرًا لك!",
+      "rating_label": "التقييم:",
+      "comment_label": "التعليق:",
+      "submit_button": "إرسال التقييم",
+      "comment_error": "يجب أن يكون التعليق بين 10 و500 حرف.",
+      "rating_error": "يجب أن يكون التقييم بين 1 و5.",
+      "skip_button": "تخطي"
+    },
+    "ConfirmationModal": {
+      "title" : "تأكيد",
+      "message" : "هل أنت متأكد أنك تريد إنهاء المحادثة؟",
+      "confirmation_button": "إنهاء",
+      "cancel_button": "إلغاء"
+    }
+
   }
 }

package/src/locales/en.json

@@ -1,15 +1,33 @@
-{  
+{
   "homeSdk": {
     "chatTitle": "Chat with",
     "tryBabylAi": "Try Babyl AI for Free 🎉",
     "contactSdk": "Contact us, Let's Talk!",
     "welcomeMessage": "Hey there! 👋 I'm Babyl AI, here to assist you.",
-  "chatNow": "Chat Now",
-  "getstarted":"Get Started",
-  "pickTopic": "Pick a Topic to",
-  "endChat": "End Chat",
-  "needAssistance": "Need assistance Or You want to try the Product? Click here",
-  "placeholder":"write your message here..."
+    "chatNow": "Chat Now",
+    "getstarted": "Get Started",
+    "pickTopic": "Pick a Topic to",
+    "endChat": "End Chat",
+    "needAssistance": "Need assistance Or You want to try the Product? Click here",
+    "placeholder": "write your message here...",
 
+    "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!",
+      "rating_label": "Rating:",
+      "comment_label": "Comment:",
+      "submit_button": "Submit Review",
+      "comment_error": "Comment must be between 10 and 500 characters.",
+      "rating_error": "Rating must be between 1 and 5.",
+      "skip_button": "Skip"
+    },
+    "ConfirmationModal": {
+      "title": "Confirmation",
+      "message": "Are you sure you want to end the conversation?",
+      "confirmation_button": "Confirm",
+      "cancel_button": "Cancel",
+      "endAndStartNewChatTitle": "End and Start New Chat",
+      "endAndStartNewChatMessage": "Are you sure you want to end the current conversation and start a new one?"
+    }
   }
-}
+}

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

@@ -1,42 +1,40 @@
 import { Button } from '@/components';
 import React from 'react';
 import EnvelopeIcon from './../../../assets/icons/envelope.svg';
-import { useLocalTranslation  } from '../../../useLocalTranslation'
+import { useLocalTranslation } from '../../../useLocalTranslation';
 
 interface ChatWindowFooterProps {
-    inputMessage: string;
-    setInputMessage: (e: string) => void;
-    handleKeyDown: (e: React.KeyboardEvent) => void;
-    handleSendMessage: () => void;
+  inputMessage: string;
+  setInputMessage: (e: string) => void;
+  handleKeyDown: (e: React.KeyboardEvent) => void;
+  handleSendMessage: () => void;
+  isLoading: boolean;
+  isSignalRConnected: boolean;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
-const { t , i18n} = useLocalTranslation();
-const isRTL = i18n.dir() === 'rtl';
-    return (
-        <footer className="babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4">
-            <input
-                type="text"
-                value={props.inputMessage}
-                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"
-            />
-            <Button
-                variant="default"
-                size="icon"
-                onClick={props.handleSendMessage}
-                className="babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8"
-            >
-                <EnvelopeIcon
-  className={`babylai-w-4 babylai-h-4 ${
-    isRTL ? 'babylai-rotate-270' : ''
-  }`}
-/>
-            </Button>
-        </footer>
-    )
-}
+  const { t, dir } = useLocalTranslation();
+  return (
+    <footer className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4'>
+      <input
+        type='text'
+        value={props.inputMessage}
+        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'
+      />
+      <Button
+        variant='default'
+        size='icon'
+        onClick={props.handleSendMessage}
+        disabled={props?.isLoading || !props.isSignalRConnected}
+        className='babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 babylai-disabled:babylai-opacity-50'
+      >
+        <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
+      </Button>
+    </footer>
+  );
+};
 
-export default ChatWindowFooter
+export default ChatWindowFooter;

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

@@ -1,64 +1,58 @@
 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 { 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'
 
 interface ChatWindowHeaderProps {
-    isShowList: boolean;
-    setIsShowList?: (isShowList: boolean) => void;
-    showChat: boolean;
-    onClose: () => void;
-    handleBack: () => void;
-    handleEndChat: () => void;
+  isShowList: boolean
+  setIsShowList?: (isShowList: boolean) => void
+  showChat: boolean
+  onClose: () => void
+  handleBack: () => void
+  handleEndChat: () => void
 }
 
 const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
-    const [showMenu, setShowMenu] = useState(false)
-      const { t , i18n} = useLocalTranslation();
-      const isRTL = i18n.dir() === 'rtl';
+  const [showMenu, setShowMenu] = useState(false)
+  const { t, i18n } = useLocalTranslation()
+  const isRTL = i18n.dir() === 'rtl'
 
-    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 babylai-rounded-t-3xl">
-            <div className="babylai-flex babylai-items-center babylai-gap-2">
-                <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={props.handleBack}>
-                <ArrowRight
-    className={`babylai-w-[12px] babylai-h-[12px] ${
-      isRTL ? '' : 'babylai-rotate-180'
-    } babylai-text-primary-500`}
-  />                </Button>
-                <div className="babylai-relative babylai-mr-2">
-                    <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={() => setShowMenu(!showMenu)}>
-                        <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500" />
-                    </Button>
+  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 babylai-rounded-t-3xl">
+      <div className="babylai-flex babylai-items-center babylai-gap-2">
+        <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={props.handleBack}>
+          <ArrowRight className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? '' : 'babylai-rotate-180'} babylai-text-primary-500`} />{' '}
+        </Button>
+        <div className="babylai-relative babylai-mr-2">
+          <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={() => setShowMenu(!showMenu)}>
+            <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500" />
+          </Button>
 
-                    {showMenu && (
-                        <div className="babylai-absolute babylai-top-10 babylai-left-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10">
-                            <div className="babylai-py-1" role="menu" aria-orientation="vertical">
-                                <button
-                                    className="babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left"
-                                    role="menuitem"
-                                    onClick={(e) => {
-                                        e.stopPropagation()
-                                        props.handleEndChat()
-                                        setShowMenu(false)
-                                    }}
-                                >
-                                          {t('homeSdk.endChat')}
-                                           
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                </div>
+          {showMenu && (
+            <div className="babylai-absolute babylai-top-10 babylai-left-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10">
+              <div className="babylai-py-1" role="menu" aria-orientation="vertical">
+                <button
+                  className="babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left"
+                  role="menuitem"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    props.handleEndChat()
+                    setShowMenu(false)
+                  }}
+                >
+                  {t('homeSdk.endChat')}
+                </button>
+              </div>
             </div>
-            <div className="babylai-flex babylai-items-center babylai-gap-2 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2">
-                <Logo className="babylai-w-[124px] babylai-h-auto" />
-                </div>
-
-        </header>
-    )
-
+          )}
+        </div>
+      </div>
+      <div className="babylai-flex babylai-items-center babylai-gap-2 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2">
+        <Logo className="babylai-w-[124px] babylai-h-auto" />
+      </div>
+    </header>
+  )
 }
-export default ChatWindowHeader
+export default ChatWindowHeader