@aslaluroba/help-center-react 2.0.2 → 2.0.5

package/dist/lib/config.d.ts

@@ -1,6 +1,6 @@
 import { TokenResponse } from './types';
 type Config = {
-    baseUrl: string;
+    baseUrl?: string;
     hubUrl?: string;
     tenantId?: string;
     apiKey?: string;

package/dist/lib/types.d.ts

@@ -109,3 +109,7 @@ export interface Option {
     hasNestedOptions: boolean;
     order: number;
 }
+export interface ReviewProps {
+    comment: string;
+    rating: number;
+}

package/dist/ui/chatbot-popup/chat-window-screen/footer.d.ts

@@ -4,6 +4,7 @@ interface ChatWindowFooterProps {
     setInputMessage: (e: string) => void;
     handleKeyDown: (e: React.KeyboardEvent) => void;
     handleSendMessage: () => void;
+    isLoading: boolean;
 }
 declare const ChatWindowFooter: React.FC<ChatWindowFooterProps>;
 export default ChatWindowFooter;

package/dist/ui/chatbot-popup/chat-window-screen/index.d.ts

@@ -6,5 +6,5 @@ interface ChatWindowProps {
     assistantStatus: string;
     needsAgent: boolean;
 }
-export declare function ChatWindow({ onSendMessage, messages, assistantStatus }: ChatWindowProps): React.JSX.Element;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus }: ChatWindowProps) => React.JSX.Element>;
 export {};

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

@@ -13,5 +13,5 @@ interface HelpCenterProps {
     messageLabel?: string | null;
     showHelpScreen?: boolean;
 }
-export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen }: HelpCenterProps): React.JSX.Element;
+export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, }: HelpCenterProps): React.JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HelpScreenData, Message, Option } from '../lib/types';
+import { HelpScreenData, Message, Option } from '@/lib/types';
 type HelpPopupProps = {
     isOpen: boolean;
     onClose: () => void;
@@ -9,7 +9,7 @@ type HelpPopupProps = {
     user: any;
     onStartChat: (option: Option) => void;
     onSendMessage: (message: string) => void;
-    onEndChat: () => void;
+    onEndChat: (option?: Option) => void;
     messages: Message[];
     needsAgent: boolean;
     assistantStatus: string;
@@ -20,5 +20,11 @@ type HelpPopupProps = {
     setSelectedOption: (option: Option | null) => void;
     showHelpScreen: boolean;
 };
-export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, isChatClosed, isSignalRConnected, selectedOption, setSelectedOption, showHelpScreen }: HelpPopupProps): React.JSX.Element;
+export declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: {
+    title: string;
+    message: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+}) => React.JSX.Element;
+export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, }: HelpPopupProps): React.JSX.Element;
 export {};

package/dist/ui/review-dialog/index.d.ts

@@ -0,0 +1,8 @@
+import { ReviewProps } from '@/lib/types';
+import React from 'react';
+interface ReviewDialogProps {
+    handleSubmit: ({ comment, rating }: ReviewProps) => void;
+    onClose: () => void;
+}
+declare const ReviewDialog: React.FC<ReviewDialogProps>;
+export default ReviewDialog;

package/dist/ui/review-dialog/rating.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface RatingProps {
+    value: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    icon?: 'star' | 'heart' | 'thumbsUp';
+    size?: 'sm' | 'md' | 'lg';
+    readOnly?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -24,13 +24,19 @@
     "dev": "rollup -c -w",
     "test": "jest",
     "clean": "rimraf dist",
-    "publish:lib": "npm run build && npm publish --access public"
+    "version:patch": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version",
+    "version:major": "npm version major --no-git-tag-version",
+    "publish": "yarn clean && yarn build && yarn version:patch && yarn publish --access public",
+    "publish:minor": "yarn clean && yarn build && yarn version:minor && yarn publish --access public",
+    "publish:major": "yarn clean && yarn build && yarn version:major && yarn publish --access public"
   },
   "files": [
     "dist",
     "src",
     "globals.css",
     "package.json",
+    "tsconfig.json",
     "./tailwind.config.js",
     "./postcss.config.js",
     "./rollup.config.js"
@@ -45,10 +51,14 @@
   "author": "BabylAI",
   "license": "MIT",
   "peerDependencies": {
+    "@tabler/icons-react": "^3.0.0",
+    "clsx": "^2.0.0",
     "i18next": "^23.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "react-i18next": "^13.0.0"
+    "react-i18next": "^13.0.0",
+    "react-markdown": "^10.0.0",
+    "tailwind-merge": "^3.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.26.10",
@@ -61,6 +71,7 @@
     "class-variance-authority": "^0.7.1"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -68,19 +79,29 @@
     "@rollup/plugin-typescript": "^8.5.0",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
+    "@tabler/icons-react": "^3.34.0",
+    "@types/hast": "^3.0.4",
     "@types/node": "^16.18.126",
     "@types/react": "^17.0.83",
     "autoprefixer": "^10.4.14",
+    "clsx": "^2.1.1",
+    "i18next": "^25.2.1",
     "postcss": "^8.4.24",
+    "react-i18next": "^15.5.2",
+    "react-markdown": "^10.1.0",
+    "rimraf": "^6.0.1",
     "rollup": "^2.79.2",
     "rollup-plugin-postcss": "^4.0.2",
+    "tailwind-merge": "^3.3.0",
     "tailwindcss": "^3.3.2",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-rtl": "^0.9.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "webpack": "^5.99.9"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/assets/icons/arrowRight.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 16">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 16" width="100%" height="100%">
   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1.5 1 6 7L6 9.75M1.5 15l2-2.333"/>
 </svg>

package/src/assets/icons/closeCircle.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 55">
-  <path stroke="#fff" stroke-linecap="round" stroke-width="3" d="M33.857 21.146 21.148 33.854m0-12.708 12.709 12.708M14.794 5.484a25.29 25.29 0 0 1 12.709-3.4c14.037 0 25.416 11.378 25.416 25.416S41.54 52.917 27.503 52.917c-14.038 0-25.417-11.38-25.417-25.417 0-4.628 1.238-8.972 3.4-12.708"/>
+  <path stroke="currentcolor" stroke-linecap="round" stroke-width="3" d="M33.857 21.146 21.148 33.854m0-12.708 12.709 12.708M14.794 5.484a25.29 25.29 0 0 1 12.709-3.4c14.037 0 25.416 11.378 25.416 25.416S41.54 52.917 27.503 52.917c-14.038 0-25.417-11.38-25.417-25.417 0-4.628 1.238-8.972 3.4-12.708"/>
 </svg>

package/src/components/ui/agent-response/agent-response.tsx

@@ -1,47 +1,49 @@
 import { useTypewriter } from '@/lib/custom-hooks/useTypewriter';
 import React from 'react';
 import Markdown from 'react-markdown';
+import type { Element } from 'hast';
 
 interface AgentResponseProps {
-    messageContent: string;
-    senderType: number;
-    messageId: number;
-    onType?: () => void;
+  messageContent: string;
+  senderType: number;
+  messageId: number;
+  onType?: () => void;
 }
 
 const seenMessagesRef = new Set<number>();
 
 const AgentResponse = ({ senderType, messageContent, messageId, onType }: AgentResponseProps) => {
-    const shouldAnimate = (senderType === 2 || senderType === 3) && !seenMessagesRef.has(messageId);
-    const animatedText = useTypewriter(messageContent, 20, onType);
-    const finalMessage = shouldAnimate ? animatedText : messageContent;
+  const shouldAnimate = (senderType === 2 || senderType === 3) && !seenMessagesRef.has(messageId);
+  const animatedText = useTypewriter(messageContent, 20, onType);
+  const finalMessage = shouldAnimate ? animatedText : messageContent;
 
-    // Mark message as "seen" after full animation
-    if (shouldAnimate && finalMessage === messageContent) {
-        seenMessagesRef.add(messageId);
-    }
+  // Mark message as "seen" after full animation
+  if (shouldAnimate && finalMessage === messageContent) {
+    seenMessagesRef.add(messageId);
+  }
 
-    return (
-        <div
-            className={`babylai-rounded-2xl babylai-p-4  ${senderType === 1
-                ? 'babylai-bg-primary-500 !babylai-text-black-white-50 babylai-max-w-[220px]'
-                : 'babylai-bg-black-white-50'
-                }`}
-        >
-            <Markdown
-                components={{
-                    p: ({ node, ...props }) => (
-                        <p
-                            className='babylai-m-0 babylai-leading-6 babylai-text-sm babylai-font-sans babylai-break-words'
-                            {...props}
-                        />
-                    )
-                }}
-            >
-                {finalMessage}
-            </Markdown>
-        </div>
-    )
-}
+  return (
+    <div
+      className={`babylai-rounded-2xl babylai-p-4  ${
+        senderType === 1
+          ? 'babylai-bg-primary-500 !babylai-text-black-white-50 babylai-max-w-[220px]'
+          : 'babylai-bg-black-white-50'
+      }`}
+    >
+      <Markdown
+        components={{
+          p: ({ node, ...props }: { node?: Element; [key: string]: any }) => (
+            <p
+              className='babylai-m-0 babylai-leading-6 babylai-text-sm babylai-font-sans babylai-break-words'
+              {...props}
+            />
+          ),
+        }}
+      >
+        {finalMessage}
+      </Markdown>
+    </div>
+  );
+};
 
-export default AgentResponse
+export default AgentResponse;

package/src/components/ui/header.tsx

@@ -7,11 +7,10 @@ interface HeaderProps {
 }
 
 export function Header({ onClose }: HeaderProps) {
-
   return (
     <header className="babylai-flex babylai-w-full babylai-justify-between babylai-items-center">
-      <Logo className="babylai-w-12 babylai-h-12" />
-      <CloseCircle className="babylai-w-12 babylai-h-12 babylai-cursor-pointer" onClick={onClose} />
+      <Logo className="babylai-w-10 babylai-h-10" />
+      <CloseCircle className="babylai-w-10 babylai-h-10 babylai-cursor-pointer babylai-text-white" onClick={onClose} />
     </header>
   )
 }

package/src/core/SignalRService.ts

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

package/src/core/api.ts

@@ -1,70 +1,207 @@
-import { TokenResponse } from '../lib/types'
+import { TokenResponse } from '../lib/types';
 
-let getTokenFunction: (() => Promise<TokenResponse>) | undefined = undefined
+let getTokenFunction: (() => Promise<TokenResponse>) | undefined = undefined;
+let baseUrl: string | null = null;
 
-let baseUrl: string | null = null
+// Add request cache and connection optimization
+const requestCache = new Map<string, { data: any; timestamp: number; ttl: number }>();
+const CACHE_TTL = 30000; // 30 seconds cache for non-critical requests
+const pendingRequests = new Map<string, Promise<any>>();
 
 export function initializeAPI(url: string, getToken: () => Promise<TokenResponse>) {
-  getTokenFunction = getToken
-  baseUrl = url
+  getTokenFunction = getToken;
+  baseUrl = url;
 }
 
 export async function getValidToken(forceRefresh = false): Promise<string> {
   if (!getTokenFunction) {
-    throw new Error('API module not initialized. Call initializeAPI(getToken) first.')
+    throw new Error('API module not initialized. Call initializeAPI(getToken) first.');
   }
 
-  let storedToken = localStorage.getItem('chatbot-token')
-  let storedExpiry = localStorage.getItem('chatbot-token-expiry')
-  const currentTime = Math.floor(Date.now() / 1000)
-
-  if (!storedToken || !storedExpiry || currentTime >= Number(storedExpiry) || forceRefresh) {
-    const tokenResponse = await getTokenFunction()
-    storedToken = tokenResponse.token
-    storedExpiry = String(currentTime + (tokenResponse.expiresIn ?? 900))
-
-    localStorage.setItem('chatbot-token', storedToken)
-    localStorage.setItem('chatbot-token-expiry', storedExpiry)
+  let storedToken = localStorage.getItem('chatbot-token');
+  let storedExpiry = localStorage.getItem('chatbot-token-expiry');
+  const currentTime = Math.floor(Date.now() / 1000);
+
+  // Add buffer time to prevent token expiry during request
+  const bufferTime = 60; // 1 minute buffer
+  const isTokenExpiring = storedExpiry && currentTime >= Number(storedExpiry) - bufferTime;
+
+  if (!storedToken || !storedExpiry || isTokenExpiring || forceRefresh) {
+    try {
+      const tokenResponse = await getTokenFunction();
+      storedToken = tokenResponse.token;
+      storedExpiry = String(currentTime + (tokenResponse.expiresIn ?? 900));
+
+      localStorage.setItem('chatbot-token', storedToken);
+      localStorage.setItem('chatbot-token-expiry', storedExpiry);
+    } catch (error) {
+      console.error('Failed to refresh token:', error);
+      throw error;
+    }
   }
 
-  return storedToken
+  return storedToken;
 }
 
+// Optimized fetch with retry logic and connection pooling
 async function fetchWithAuth(url: string, options: RequestInit, retry = true): Promise<Response> {
-  const headers = new Headers(options.headers)
-  headers.set('Authorization', `Bearer ${await getValidToken()}`)
-  options.headers = headers
+  const headers = new Headers(options.headers);
+
+  try {
+    const token = await getValidToken();
+    headers.set('Authorization', `Bearer ${token}`);
+
+    // Add performance optimizations
+    headers.set('Accept', 'application/json');
+    headers.set('Accept-Encoding', 'gzip, deflate, br');
+    headers.set('Connection', 'keep-alive');
+
+    options.headers = headers;
+
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
+
+    try {
+      const response = await fetch(url, {
+        ...options,
+        signal: controller.signal,
+        // Add HTTP/2 optimization hints
+        cache: 'no-cache',
+        mode: 'cors',
+      });
+
+      clearTimeout(timeoutId);
+
+      // Handle 401/403 with token refresh
+      if ((response.status === 401 || response.status === 403) && retry) {
+        console.warn('Token expired, refreshing...');
+        const newToken = await getValidToken(true);
+        headers.set('Authorization', `Bearer ${newToken}`);
+        options.headers = headers;
+
+        // Retry the request with new token
+        return fetchWithAuth(url, options, false);
+      }
+
+      return response;
+    } catch (error) {
+      clearTimeout(timeoutId);
+
+      if (error instanceof Error && error.name === 'AbortError') {
+        throw new Error('Request timeout - please try again');
+      }
+      throw error;
+    }
+  } catch (error) {
+    console.error('Fetch error:', error);
+    throw error;
+  }
+}
 
-  let response = await fetch(url, options)
+// Cache management functions
+function getCachedResponse(cacheKey: string): any | null {
+  const cached = requestCache.get(cacheKey);
+  if (cached && Date.now() < cached.timestamp + cached.ttl) {
+    return cached.data;
+  }
 
-  if ((response.status === 401 || response.status === 403) && retry) {
-    const newToken = await getValidToken(true)
-    headers.set('Authorization', `Bearer ${newToken}`)
-    options.headers = headers
-    response = await fetch(url, options)
+  if (cached) {
+    requestCache.delete(cacheKey);
   }
 
-  return response
+  return null;
 }
 
-export async function apiRequest(endpoint: string, method = 'GET', body: any = null) {
-  if (!baseUrl) throw new Error('API not initialized')
+function setCachedResponse(cacheKey: string, data: any, ttl: number = CACHE_TTL): void {
+  requestCache.set(cacheKey, {
+    data,
+    timestamp: Date.now(),
+    ttl,
+  });
+}
 
-  const url = `${baseUrl}/${endpoint}`
-  const options: RequestInit = {
-    method,
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: body ? JSON.stringify(body) : null
-  }
+// Deduplicate concurrent requests
+function getDuplicateRequest(requestKey: string): Promise<any> | null {
+  return pendingRequests.get(requestKey) || null;
+}
 
-  const response = await fetchWithAuth(url, options)
+function setPendingRequest(requestKey: string, promise: Promise<any>): void {
+  pendingRequests.set(requestKey, promise);
 
-  if (!response.ok) {
-    const errorData = await response.json()
-    throw new Error(errorData.message || 'API request failed')
+  // Clean up after request completes
+  promise.finally(() => {
+    pendingRequests.delete(requestKey);
+  });
+}
+
+export async function apiRequest(
+  endpoint: string,
+  method = 'GET',
+  body: any = null,
+  options: { cache?: boolean; timeout?: number } = {}
+) {
+  if (!baseUrl) throw new Error('API not initialized');
+
+  const url = `${baseUrl}/${endpoint}`;
+  const requestKey = `${method}:${endpoint}:${JSON.stringify(body)}`;
+
+  // Check for duplicate in-flight requests
+  const duplicateRequest = getDuplicateRequest(requestKey);
+  if (duplicateRequest) {
+    return duplicateRequest;
   }
 
-  return response
+  // Check cache for GET requests (except real-time endpoints)
+  if (method === 'GET' && options.cache !== false && !endpoint.includes('/send-message')) {
+    const cached = getCachedResponse(requestKey);
+    if (cached) {
+      return Promise.resolve(cached);
+    }
+  }
+
+  const requestOptions: RequestInit = {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': method === 'GET' ? 'max-age=30' : 'no-cache',
+    },
+    body: body ? JSON.stringify(body) : null,
+  };
+
+  const requestPromise = (async () => {
+    try {
+      const response = await fetchWithAuth(url, requestOptions);
+
+      if (!response.ok) {
+        let errorMessage = 'API request failed';
+
+        try {
+          const errorData = await response.json();
+          errorMessage = errorData.message || errorMessage;
+        } catch {
+          errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+        }
+
+        throw new Error(errorMessage);
+      }
+
+      // Cache successful GET responses
+      if (method === 'GET' && options.cache !== false) {
+        const responseData = await response.clone();
+        const data = await responseData.json();
+        setCachedResponse(requestKey, { json: () => Promise.resolve(data) });
+      }
+
+      return response;
+    } catch (error) {
+      console.error(`API request failed for ${endpoint}:`, error);
+      throw error;
+    }
+  })();
+
+  // Track pending request
+  setPendingRequest(requestKey, requestPromise);
+
+  return requestPromise;
 }