@aslaluroba/help-center-react 3.0.6 → 3.0.7

package/dist/lib/LanguageContext.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+interface LanguageContextType {
+    language: string;
+}
+interface LanguageProviderProps {
+    children: ReactNode;
+    language: string;
+}
+export declare const LanguageProvider: React.FC<LanguageProviderProps>;
+export declare const useLanguage: () => LanguageContextType | null;
+export {};

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
-export * from './utils';
+export * from "./LanguageContext";
+export * from "./utils";

package/dist/ui/confirmation-modal/index.d.ts

@@ -4,5 +4,5 @@ interface ConfirmationModalProps {
     onCancel: () => void;
     onConfirm: () => void;
 }
-declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConfirmationModal: ({ title, message, onCancel, onConfirm }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmationModal;

package/dist/useLocalTranslation.d.ts

@@ -1,4 +1,4 @@
-export declare const useLocalTranslation: (languageFromProps?: string) => {
+export declare const useLocalTranslation: () => {
     t: (key: string) => string;
     dir: "ltr" | "rtl";
     i18n: import("i18next").i18n;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -59,7 +59,6 @@
   },
   "dependencies": {
     "@ably/chat": "^0.8.0",
-    "@microsoft/signalr": "^7.0.14",
     "@tabler/icons-react": "^3.34.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",

package/src/index.ts

@@ -3,7 +3,6 @@ import { TokenResponse } from './lib/types';
 
 export type HelpCenterConfig = {
   baseUrl?: string;
-  hubUrl?: string;
   getToken?: () => Promise<TokenResponse>;
 };
 

package/src/lib/LanguageContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, ReactNode, useContext } from "react";
+
+interface LanguageContextType {
+  language: string;
+}
+
+const LanguageContext = createContext<LanguageContextType | null>(null);
+
+interface LanguageProviderProps {
+  children: ReactNode;
+  language: string;
+}
+
+export const LanguageProvider: React.FC<LanguageProviderProps> = ({
+  children,
+  language,
+}) => {
+  return (
+    <LanguageContext.Provider value={{ language }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  return context;
+};

package/src/lib/index.ts

@@ -1 +1,2 @@
-export * from './utils'
+export * from "./LanguageContext";
+export * from "./utils";

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

@@ -43,7 +43,7 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
           </Button>
 
           {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 babylai-ring-opacity-5 babylai-z-10">
+            <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"

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

@@ -8,7 +8,7 @@ interface ConfirmationModalProps {
     onConfirm: () => void;
 }
 
-const ConfirmationModal = ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => {
+const ConfirmationModal = ({ title, message, onCancel, onConfirm }: ConfirmationModalProps) => {
     const { t } = useLocalTranslation();
 
     return (

package/src/ui/floating-message.tsx

@@ -13,7 +13,7 @@ export function FloatingMessage({ message, onClose }: FloatingMessageProps) {
       <div className="babylai-bg-primary-500 babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative after:babylai-content-[''] after:babylai-absolute after:babylai--bottom-[10px] after:babylai-right-5 after:babylai-w-0 after:babylai-h-0 after:babylai-border-l-[10px] after:babylai-border-r-[10px] after:babylai-border-t-[10px] after:babylai-border-l-transparent after:babylai-border-r-transparent after:babylai-border-t-primary-500">
         <p className="babylai-text-xs babylai-font-bold babylai-m-0">{message}</p>
         <button
-          className="babylai-absolute babylai--top-2 babylai--right-2 babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] babylai-hover:bg-primary-400 babylai-hover:text-white shadow-md"
+          className="babylai-absolute babylai--top-2 babylai--right-2 babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black-white-700 babylai-p-[3px] babylai-hover:bg-primary-400 babylai-hover:text-white shadow-md"
           onClick={onClose}
         >
           <CloseIcon className="babylai-w-8 babylai-h-8" />

package/src/ui/help-center.tsx

@@ -9,6 +9,7 @@ import { FloatingMessage } from './floating-message';
 import { HelpButton } from './help-button';
 import { HelpPopup } from './help-popup';
 import { defaultLanguage } from '@/i18n';
+import { LanguageProvider } from '@/lib/LanguageContext';
 
 interface HelpCenterProps {
   helpScreenId: string;
@@ -24,15 +25,14 @@ interface HelpCenterProps {
   showHelpScreen?: boolean;
 }
 
-export function HelpCenter({
+function HelpCenterContent({
   helpScreenId,
   user,
   showArrow = true,
-  language = defaultLanguage,
   messageLabel = null,
   showHelpScreen = false,
-}: HelpCenterProps) {
-  const { t } = useLocalTranslation(language);
+}: Omit<HelpCenterProps, 'language'>) {
+  const { t } = useLocalTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow);
   const [helpScreenData, setHelpScreenData] = useState<HelpScreenData | null>(null);
@@ -309,3 +309,25 @@ export function HelpCenter({
     </div>
   );
 }
+
+// Main HelpCenter component that provides the language context
+export function HelpCenter({
+  helpScreenId,
+  user,
+  showArrow = true,
+  language = defaultLanguage,
+  messageLabel = null,
+  showHelpScreen = false,
+}: HelpCenterProps) {
+  return (
+    <LanguageProvider language={language}>
+      <HelpCenterContent
+        helpScreenId={helpScreenId}
+        user={user}
+        showArrow={showArrow}
+        messageLabel={messageLabel}
+        showHelpScreen={showHelpScreen}
+      />
+    </LanguageProvider>
+  );
+}

package/src/useLocalTranslation.ts

@@ -1,12 +1,13 @@
 import { useMemo } from "react";
-import { createHelpCenterI18n, defaultLanguage } from "./i18n";
+import { createHelpCenterI18n, defaultLanguage } from "@/i18n";
+import { useLanguage } from "@/lib/LanguageContext";
 
-export const useLocalTranslation = (languageFromProps?: string) => {
-  const language =
-    languageFromProps || localStorage.getItem("app-language") || defaultLanguage;
+export const useLocalTranslation = () => {
+  // Get language from context, fallback to default if not available
+  const context = useLanguage();
+  const language = context?.language || defaultLanguage;
 
   const i18n = useMemo(() => createHelpCenterI18n(language), [language]);
-
   const t = (key: string) => i18n.t(key);
   const dir = i18n.dir();
 

package/dist/core/SignalRService.d.ts

@@ -1,11 +0,0 @@
-export declare class ClientSignalRService {
-    private static connection;
-    private static isConnected;
-    private static hubUrl;
-    static initialize(hubUrl: string): void;
-    static startConnection(sessionId: string, apiKey: string, onMessageReceived: Function): Promise<void>;
-    static joinGroup(sessionId: string): Promise<void>;
-    static leaveGroup(sessionId: string): Promise<void>;
-    static stopConnection(): Promise<void>;
-    static isConnectionActive(): boolean;
-}

package/src/core/SignalRService.ts

@@ -1,83 +0,0 @@
-import * as signalR from '@microsoft/signalr';
-
-export class ClientSignalRService {
-  private static connection: signalR.HubConnection | null = null;
-  private static isConnected: boolean = false;
-  private static hubUrl: string = '';
-
-  static initialize(hubUrl: string) {
-    this.hubUrl = hubUrl;
-  }
-
-  static async startConnection(sessionId: string, apiKey: string, onMessageReceived: Function) {
-    // Prevent multiple connections
-    if (this.isConnected) return;
-
-    // Build the SignalR connection
-    this.connection = new signalR.HubConnectionBuilder()
-      .withUrl(`${this.hubUrl}/clientHub?access_token=${encodeURIComponent(apiKey)}`, {
-        withCredentials: true, // Ensure credentials are passed with the WebSocket request
-        transport: signalR.HttpTransportType.WebSockets | signalR.HttpTransportType.LongPolling,
-        headers: {
-          Authorization: `Bearer ${apiKey}`,
-        },
-      })
-      .configureLogging(signalR.LogLevel.Information)
-      .build();
-
-    // Define callback function for receiving messages
-    this.connection.on('ReceiveMessage', (message: any, senderType: number, needsAgent: boolean) => {
-      onMessageReceived(message, senderType, needsAgent);
-    });
-
-    try {
-      // Start the connection
-      await this.connection.start();
-
-      // Set the isConnected flag after the connection is fully established
-      this.isConnected = true;
-
-      // Join the session group after connection is fully established
-      await this.joinGroup(sessionId);
-    } catch (error) {
-      this.isConnected = false; // Ensure isConnected is false if connection fails
-      throw error;
-    }
-  }
-
-  static async joinGroup(sessionId: string) {
-    if (this.connection) {
-      try {
-        await this.connection.invoke('JoinGroup', sessionId);
-      } catch (error) {
-        throw error;
-      }
-    }
-  }
-
-  static async leaveGroup(sessionId: string) {
-    if (this.connection && this.isConnected) {
-      try {
-        await this.connection.invoke('LeaveGroup', sessionId);
-      } catch (error) {
-        throw error;
-      }
-    }
-  }
-
-  static async stopConnection() {
-    if (this.connection && this.isConnected) {
-      try {
-        await this.connection.stop();
-        this.isConnected = false;
-        this.connection = null;
-      } catch (error) {
-        throw error;
-      }
-    }
-  }
-
-  static isConnectionActive(): boolean {
-    return this.isConnected;
-  }
-}