@aslaluroba/help-center-react 3.0.13 → 3.0.14

package/dist/ui/floating-message.d.ts

@@ -2,5 +2,5 @@ interface FloatingMessageProps {
     message: string;
     onClose: () => void;
 }
-export declare function FloatingMessage({ message, onClose }: FloatingMessageProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const FloatingMessage: ({ message, onClose }: FloatingMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default FloatingMessage;

package/dist/ui/help-button.d.ts

@@ -1,5 +1,5 @@
 interface HelpButtonProps {
     onClick: () => void;
 }
-export declare function HelpButton({ onClick }: HelpButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const HelpButton: ({ onClick }: HelpButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default HelpButton;

package/dist/ui/help-center.d.ts

@@ -15,5 +15,5 @@ interface HelpCenterProps {
     secondaryColor?: string;
     logoUrl?: string;
 }
-export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, primaryColor, secondaryColor, logoUrl, }: HelpCenterProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const HelpCenter: ({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, primaryColor, secondaryColor, logoUrl, }: HelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+export default HelpCenter;

package/dist/ui/help-popup.d.ts

@@ -20,5 +20,5 @@ type HelpPopupProps = {
     showHelpScreen: boolean;
     logoUrl?: string;
 };
-export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, logoUrl, }: HelpPopupProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const HelpPopup: ({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, logoUrl, }: HelpPopupProps) => import("react/jsx-runtime").JSX.Element;
+export default HelpPopup;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -12,6 +12,11 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./services": {
+      "import": "./dist/services.esm.js",
+      "require": "./dist/services.js",
+      "types": "./dist/services.d.ts"
+    },
     "./style.css": {
       "default": "./dist/index.css"
     }

package/src/components/ui/header.tsx

@@ -6,15 +6,17 @@ interface HeaderProps {
   logoUrl?: string
 }
 
-export function Header({ onClose, logoUrl }: HeaderProps) {
+const Header = ({ onClose, logoUrl }: HeaderProps) => {
   return (
     <header className="babylai-flex babylai-w-full babylai-justify-between babylai-items-center">
       {logoUrl ? (
         <img src={logoUrl} alt="BabylAI Logo" className="babylai-w-10 babylai-h-10" />
       ) : (
-        <Logo className="babylai-w-10 babylai-h-10" />
+        <Logo className="babylai-w-10 babylai-h-10 babylai-text-primary-500" />
       )}
       <CloseCircle className="babylai-w-10 babylai-h-10 babylai-cursor-pointer babylai-text-white" onClick={onClose} />
     </header>
   )
 }
+
+export default Header;

package/src/index.ts

@@ -1,23 +1,19 @@
 import { configService } from './lib/config';
 import { TokenResponse } from './lib/types';
 
+// Main component export
+export { default as HelpCenter } from './ui/help-center';
+
+// Essential types and functions for HMR compatibility
 export type HelpCenterConfig = {
   baseUrl?: string;
   getToken?: () => Promise<TokenResponse>;
 };
 
+// Initialize function - defined here to avoid HMR issues with re-exports
 export function initializeHelpCenter(config: HelpCenterConfig) {
   configService.initialize(config);
 }
 
-// Main component export
-export { HelpCenter } from './ui/help-center';
-
-// Types
-export * from './lib/types';
-
-// API functions
-export { initializeAPI, getValidToken, apiRequest } from './core/api';
-
-// Re-export services for backward compatibility
-export * from './services';
+// Note: Additional services and utilities are available from './services'
+// For services, import them directly: import { ApiService } from 'babylai-fe-react-sdk/services'

package/src/services.ts

@@ -1,4 +1,14 @@
-// Services export file to avoid Fast Refresh conflicts
+// Services export file - separate from main component exports
+// This prevents Fast Refresh issues with non-React components
+
+// Re-export services for backward compatibility
 export { ApiService } from './core/ApiService';
 export { ClientAblyService as AblyService } from './core/AblyService';
 export { TokenService } from './core/token-service';
+
+// Re-export API functions
+export { initializeAPI, getValidToken, apiRequest } from './core/api';
+
+// Re-export types that might be needed with services
+export type { TokenResponse } from './lib/types';
+export * from './lib/types';

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

@@ -1,4 +1,4 @@
-import { Header } from '@/components/ui/header'
+import Header from '@/components/ui/header'
 
 interface ChatBotErrorScreenProps {
   onClose: () => void
@@ -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">
+      <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">
         <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

@@ -12,8 +12,8 @@ const Card: React.FC<CardProps> = (props) => {
   const isRTL = String(dir) === "rtl";
 
   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">
-      <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800">
+    <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">
         {props.text}
       </p>
       <Button

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

@@ -10,14 +10,14 @@ const ChatNowCard: React.FC<ChatNowCardProps> = (props) => {
     const { t } = useLocalTranslation();
 
     return (
-        <div className="babylai-flex babylai-flex-col babylai-gap-7 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-8">
+        <div className="babylai-flex babylai-flex-col babylai-gap-7 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-8 dark:babylai-bg-storm-dust-900">
             <div className="babylai-flex babylai-gap-3 babylai-items-center babylai-justify-start">
                 <div className="babylai-p-4 babylai-rounded-full babylai-bg-primary-500 babylai-shrink-0">
                     <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">BabylAI</p>
-                    <p className="babylai-font-semibold babylai-text-black-white-800">
+                    <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">
                         {t('homeSdk.welcomeMessage')}
                     </p>
                 </div>

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

@@ -1,4 +1,4 @@
-import { Header } from '@/components/ui/header'
+import Header from '@/components/ui/header'
 import Card from '@/ui/chatbot-popup/home-screen/card'
 import ChatNowCard from '@/ui/chatbot-popup/home-screen/chat-now-card'
 import { useLocalTranslation } from '../../../useLocalTranslation'

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

@@ -1,4 +1,4 @@
-import { Header } from '@/components/ui/header'
+import Header from '@/components/ui/header'
 import { cn } from '@/lib'
 import animatedLogo from '../../../assets/animatedLogo.gif'
 
@@ -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': !props.isShowList,
+            '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-black-white-100 dark:babylai-bg-storm-dust-950': props.isShowList
           }
         )}

package/src/ui/floating-message.tsx

@@ -1,9 +1,10 @@
-import CloseIcon from '../assets/icons/close.svg'
+import CloseIcon from '@/assets/icons/close.svg'
 interface FloatingMessageProps {
   message: string
   onClose: () => void
 }
-export function FloatingMessage({ message, onClose }: FloatingMessageProps) {
+
+const FloatingMessage = ({ message, onClose }: FloatingMessageProps) => {
   return (
     <div
       className=" 
@@ -22,3 +23,5 @@ export function FloatingMessage({ message, onClose }: FloatingMessageProps) {
     </div>
   )
 }
+
+export default FloatingMessage;

package/src/ui/help-button.tsx

@@ -1,10 +1,10 @@
-import Logo from '../assets/logo.svg'
+import Logo from '@/assets/logo.svg'
 
 interface HelpButtonProps {
   onClick: () => void
 }
 
-export function HelpButton({ onClick }: HelpButtonProps) {
+const HelpButton = ({ onClick }: HelpButtonProps) => {
 
   return (
     <button
@@ -20,3 +20,5 @@ export function HelpButton({ onClick }: HelpButtonProps) {
     </button>
   )
 }
+
+export default HelpButton;

package/src/ui/help-center.tsx

@@ -4,10 +4,10 @@ import { apiRequest } from '../core/api';
 import { ClientAblyService } from '../core/AblyService';
 import { useLocalTranslation } from '../useLocalTranslation';
 import '../globals.css';
-import { HelpScreenData, Message, Option, ReviewProps } from '../lib/types';
-import { FloatingMessage } from './floating-message';
-import { HelpButton } from './help-button';
-import { HelpPopup } from './help-popup';
+import { HelpScreenData, Message, Option, ReviewProps } from '@/lib/types';
+import FloatingMessage from './floating-message';
+import HelpButton from './help-button';
+import HelpPopup from './help-popup';
 import { defaultLanguage } from '@/i18n';
 import { LanguageProvider } from '@/lib/LanguageContext';
 import { getThemeStyles } from '@/lib/theme-utils';
@@ -29,7 +29,7 @@ interface HelpCenterProps {
   logoUrl?: string;
 }
 
-function HelpCenterContent({
+const HelpCenterContent = ({
   helpScreenId,
   user,
   showArrow = true,
@@ -38,7 +38,7 @@ function HelpCenterContent({
   primaryColor,
   secondaryColor,
   logoUrl,
-}: Omit<HelpCenterProps, 'language'>) {
+}: Omit<HelpCenterProps, 'language'>) => {
   const { t } = useLocalTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow);
@@ -321,7 +321,7 @@ function HelpCenterContent({
 }
 
 // Main HelpCenter component that provides the language context
-export function HelpCenter({
+const HelpCenter = ({
   helpScreenId,
   user,
   showArrow = true,
@@ -331,7 +331,7 @@ export function HelpCenter({
   primaryColor,
   secondaryColor,
   logoUrl,
-}: HelpCenterProps) {
+}: HelpCenterProps) => {
   return (
     <LanguageProvider language={language}>
       <HelpCenterContent
@@ -347,3 +347,5 @@ export function HelpCenter({
     </LanguageProvider>
   );
 }
+
+export default HelpCenter;

package/src/ui/help-popup.tsx

@@ -35,7 +35,7 @@ type HelpPopupProps = {
   logoUrl?: string;
 };
 
-export function HelpPopup({
+const HelpPopup = ({
   onClose,
   helpScreen,
   status,
@@ -52,7 +52,7 @@ export function HelpPopup({
   showHelpScreen,
   isAblyConnected,
   logoUrl,
-}: HelpPopupProps) {
+}: HelpPopupProps) => {
   // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
   const [showChat, setShowChat] = useState(false);
   const [isShowList, setIsShowList] = useState<boolean>(!showHelpScreen || false);
@@ -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': !isShowList,
+            '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-black-white-100 dark:babylai-bg-storm-dust-950': isShowList,
           }
         )}
@@ -312,3 +312,5 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
     </div>
   );
 }
+
+export default HelpPopup;

package/src/ui/powered-by.tsx

@@ -4,7 +4,7 @@ const PoweredBy: React.FC = () => {
   const { t } = useLocalTranslation();
 
   return (
-    <section className="babylai-text-primary-500 babylai-font-bold babylai-text-center babylai-px-8 babylai-py-2 babylai-w-full">
+    <section className="babylai-text-primary-500 dark:babylai-text-white babylai-font-bold babylai-text-center babylai-px-8 babylai-py-2 babylai-w-full">
       <a
         href="https://www.babylai.net/"
         target="_blank"