@aslaluroba/help-center-react 3.2.16 → 3.2.18

package/src/globals.css

@@ -1,268 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
-
-/* Tailwind v4: theme + utilities only (base/preflight disabled) */
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme) prefix(babylai);
-@import "tailwindcss/utilities.css" layer(utilities) prefix(babylai);
-
-/* CSS Custom Properties - Light Theme (Default) */
-:root {
-  --babylai-font-sans: "Cairo", sans-serif;
-  /* Light theme colors */
-  --babylai-black-white-50: #ffffff;
-  --babylai-black-white-100: #f3f3f3;
-  --babylai-black-white-200: #e2e2e2;
-  --babylai-black-white-300: #919191;
-  --babylai-black-white-400: #606060;
-  --babylai-black-white-500: #333333;
-  --babylai-black-white-600: #1f1f1f;
-  --babylai-black-white-700: #171717;
-  --babylai-black-white-800: #0a0a0a;
-  --babylai-black-white-900: #050505;
-  --babylai-black-white-950: #000000;
-  --babylai-black-white-default: #333333;
-  --babylai-primary-color: #ad49e1;
-  --babylai-primary-color-100: #f6ecfc;
-  --babylai-primary-color-200: #deb6f3;
-  --babylai-primary-color-300: #d49cee;
-  --babylai-primary-color-400: #c57fea;
-  --babylai-primary-color-500: #ad49e1;
-  --babylai-primary-color-600: #672b87;
-  --babylai-primary-color-700: #451d5a;
-  --babylai-primary-color-800: #220e2d;
-  --babylai-primary-color-900: #110716;
-  --babylai-primary-color-950: #0a0310;
-
-  /* Theme-aware colors - Light mode defaults */
-  --babylai-background: var(--babylai-black-white-50);
-  --babylai-card: var(--babylai-black-white-50);
-  --babylai-card-foreground: var(--babylai-black-white-500);
-  --babylai-secondary: var(--babylai-black-white-100);
-  --babylai-secondary-foreground: var(--babylai-black-white-500);
-  --babylai-muted: var(--babylai-black-white-100);
-  --babylai-muted-foreground: var(--babylai-black-white-400);
-  --babylai-destructive: #ef4444;
-  --babylai-destructive-foreground: var(--babylai-black-white-50);
-  --babylai-border: var(--babylai-black-white-200);
-  --babylai-ring: var(--babylai-primary-color);
-  --babylai-radius: 0.5rem;
-}
-
-/* Tailwind v4 Theme Configuration - must come after @import */
-/* Using actual color values for build-time, CSS variables will override at runtime */
-/* postcss-disable-next-line */
-@theme {
-  /* Font Family - override Tailwind's default sans font */
-  --font-sans: "Cairo", sans-serif;
-
-  /* Primary Colors - default light theme values */
-  --color-primary: var(--babylai-primary-color);
-  --color-primary-100: var(--babylai-primary-color-100);
-  --color-primary-200: var(--babylai-primary-color-200);
-  --color-primary-300: var(--babylai-primary-color-300);
-  --color-primary-400: var(--babylai-primary-color-400);
-  --color-primary-500: var(--babylai-primary-color-500);
-  --color-primary-600: var(--babylai-primary-color-600);
-  --color-primary-700: var(--babylai-primary-color-700);
-  --color-primary-800: var(--babylai-primary-color-800);
-  --color-primary-900: var(--babylai-primary-color-900);
-  --color-primary-950: var(--babylai-primary-color-950);
-
-  /* Theme Colors - default light theme values */
-  --color-background: var(--babylai-background);
-  --color-card: var(--babylai-card);
-  --color-card-foreground: var(--babylai-card-foreground);
-  --color-secondary: var(--babylai-secondary);
-  --color-secondary-foreground: var(--babylai-secondary-foreground);
-  --color-muted: var(--babylai-muted);
-  --color-muted-foreground: var(--babylai-muted-foreground);
-  --color-destructive: var(--babylai-destructive);
-  --color-destructive-foreground: var(--babylai-destructive-foreground);
-  --color-border: var(--babylai-border);
-  --color-ring: var(--babylai-ring);
-
-  /* Black-White Scale */
-  --color-black-white-50: var(--babylai-black-white-50);
-  --color-black-white-100: var(--babylai-black-white-100);
-  --color-black-white-200: var(--babylai-black-white-200);
-  --color-black-white-300: var(--babylai-black-white-300);
-  --color-black-white-400: var(--babylai-black-white-400);
-  --color-black-white-500: var(--babylai-black-white-500);
-  --color-black-white-600: var(--babylai-black-white-600);
-  --color-black-white-700: var(--babylai-black-white-700);
-  --color-black-white-800: var(--babylai-black-white-800);
-  --color-black-white-900: var(--babylai-black-white-900);
-  --color-black-white-950: var(--babylai-black-white-950);
-
-  --animate-wave: wave 1.3s ease-in-out infinite;
-  --animate-circular-progress: circular-progress 2s ease-in-out infinite;
-  --animate-float: float 3s infinite ease-in-out;
-
-  @keyframes wave {
-
-    0%,
-    60%,
-    100% {
-      transform: initial;
-    }
-
-    30% {
-      transform: translateY(-10px);
-    }
-  }
-
-  @keyframes circular-progress {
-    0% {
-      stroke-dashoffset: 100.48;
-    }
-
-    50% {
-      stroke-dashoffset: 25.12;
-    }
-
-    100% {
-      stroke-dashoffset: 100.48;
-    }
-  }
-
-  @keyframes float {
-
-    0%,
-    100% {
-      transform: translateY(0);
-    }
-
-    50% {
-      transform: translateY(-10px);
-    }
-  }
-
-  @keyframes typing-dot {
-
-    0%,
-    60%,
-    100% {
-      opacity: 0.35;
-      transform: scale(0.85);
-    }
-
-    30% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-/* Typing indicator dots - staggered pulse animation */
-.babylai-typing-dot {
-  animation: typing-dot 1.4s ease-in-out infinite;
-}
-
-.babylai-typing-dot:nth-child(1) {
-  animation-delay: 0ms;
-}
-
-.babylai-typing-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.babylai-typing-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-/* Re-scope primary theme vars on widget root so primaryColor prop (inline style) wins over :root.
-   Tailwind v4 with prefix(babylai) emits --babylai-color-primary-* in utilities, so we set
-  prefixed names here so they resolve from this element. */
-.babylai-theme-root {
-  --babylai-color-primary: var(--babylai-primary-color);
-  --babylai-color-primary-100: var(--babylai-primary-color-100);
-  --babylai-color-primary-200: var(--babylai-primary-color-200);
-  --babylai-color-primary-300: var(--babylai-primary-color-300);
-  --babylai-color-primary-400: var(--babylai-primary-color-400);
-  --babylai-color-primary-500: var(--babylai-primary-color-500);
-  --babylai-color-primary-600: var(--babylai-primary-color-600);
-  --babylai-color-primary-700: var(--babylai-primary-color-700);
-  --babylai-color-primary-800: var(--babylai-primary-color-800);
-  --babylai-color-primary-900: var(--babylai-primary-color-900);
-  --babylai-color-primary-950: var(--babylai-primary-color-950);
-  --ring: var(--babylai-primary-color);
-  --color-ring: var(--babylai-primary-color);
-  font-family: var(--babylai-font-sans);
-
-  * {
-    box-sizing: border-box;
-  }
-
-  button {
-    font: inherit;
-  }
-
-  input,
-  textarea {
-    font-family: inherit;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin: 0;
-  }
-
-  ul,
-  ol {
-    list-style: auto;
-    padding-inline-start: 40px;
-    margin-block-start: 1rem;
-    margin-block-end: 1rem;
-  }
-}
-
-/* Dark theme colors */
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --babylai-black-white-50: #000000;
-    --babylai-black-white-100: #050505;
-    --babylai-black-white-200: #0a0a0a;
-    --babylai-black-white-300: #171717;
-    --babylai-black-white-400: #1f1f1f;
-    --babylai-black-white-500: #333333;
-    --babylai-black-white-600: #606060;
-    --babylai-black-white-700: #919191;
-    --babylai-black-white-800: #e2e2e2;
-    --babylai-black-white-900: #f3f3f3;
-    --babylai-black-white-950: #ffffff;
-    --babylai-black-white-default: #e2e2e2;
-
-    --babylai-background: #121212;
-    --babylai-card: #262626;
-    --babylai-card-foreground: var(--babylai-black-white-950);
-    --babylai-secondary: #3d3d3d;
-    --babylai-secondary-foreground: var(--babylai-black-white-950);
-    --babylai-muted: #2a2a2a;
-    --babylai-muted-foreground: #b3b3b3;
-    --babylai-destructive: #ff6b6b;
-    --babylai-destructive-foreground: var(--babylai-black-white-950);
-    --babylai-border: var(--babylai-black-white-200);
-    --babylai-ring: var(--babylai-primary-color);
-  }
-} */
-
-.bg-header {
-  background: linear-gradient(171deg,
-      color-mix(in srgb, var(--babylai-primary-color) 25%, transparent) -131.06%,
-      color-mix(in srgb, var(--babylai-black-white-50) 25%, transparent) 89.82%);
-}

package/src/i18n.ts

@@ -1,21 +0,0 @@
-import i18next, { i18n as I18nType } from "i18next";
-import en from "./locales/en.json";
-import ar from "./locales/ar.json";
-
-export const defaultLanguage = "ar";
-
-export const createHelpCenterI18n = (
-  lng: string = defaultLanguage
-): I18nType => {
-  const instance = i18next.createInstance();
-  instance.init({
-    resources: {
-      en: { translation: en },
-      ar: { translation: ar },
-    },
-    lng,
-    fallbackLng: defaultLanguage,
-    interpolation: { escapeValue: false },
-  });
-  return instance;
-};

package/src/index.ts

@@ -1,19 +0,0 @@
-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);
-}
-
-// Note: Additional services and utilities are available from './services'
-// For services, import them directly: import { ApiService } from 'babylai-fe-react-sdk/services'

package/src/lib/LanguageContext.tsx

@@ -1,28 +0,0 @@
-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/config.ts

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

package/src/lib/custom-hooks/useActionHandler.ts

@@ -1,102 +0,0 @@
-import { useCallback, useRef } from 'react';
-
-export type ActionHandler = (messageData: unknown) => void | Promise<void>;
-
-export interface ActionHandlerService {
-  registerHandler(actionType: string, handler: ActionHandler): void;
-  unregisterHandler(actionType: string): void;
-  handleAction(actionType: string | undefined | null, messageData: unknown): Promise<void>;
-  getRegisteredActions(): string[];
-}
-
-export const useActionHandler = (): ActionHandlerService => {
-  const handlersRef = useRef<Map<string, ActionHandler>>(new Map());
-
-  const defaultHandlerRef = useRef<ActionHandler>((messageData) => {
-    const message = (messageData as { actionType?: string } | undefined) ?? {};
-    const actionType = message.actionType || '';
-
-    if (actionType) {
-      // Log unknown actions for debugging but do not crash
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[ActionHandler] Unknown action type received: "${actionType}". Message data:`,
-        messageData
-      );
-    }
-  });
-
-  const registerHandler = useCallback((actionType: string, handler: ActionHandler) => {
-    if (!actionType) {
-      // eslint-disable-next-line no-console
-      console.warn('[ActionHandler] Attempted to register handler with empty action type. Ignored.');
-      return;
-    }
-
-    if (handlersRef.current.has(actionType)) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[ActionHandler] Handler for action type "${actionType}" already exists. Overwriting with new handler.`
-      );
-    }
-
-    handlersRef.current.set(actionType, handler);
-  }, []);
-
-  const unregisterHandler = useCallback((actionType: string) => {
-    if (!actionType) {
-      return;
-    }
-    handlersRef.current.delete(actionType);
-  }, []);
-
-  const handleAction = useCallback(
-    async (actionType: string | undefined | null, messageData: unknown) => {
-      // Ignore empty, null, or undefined action types (no-op)
-      if (!actionType || actionType === '') {
-        return;
-      }
-
-      const handler = handlersRef.current.get(actionType);
-
-      if (handler) {
-        try {
-          await handler(messageData);
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error(
-            `[ActionHandler] Error executing handler for action type "${actionType}":`,
-            error
-          );
-        }
-        return;
-      }
-
-      const defaultHandler = defaultHandlerRef.current;
-      if (defaultHandler) {
-        try {
-          await Promise.resolve(defaultHandler(messageData));
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error(
-            `[ActionHandler] Error executing default handler for unknown action type "${actionType}":`,
-            error
-          );
-        }
-      }
-    },
-    []
-  );
-
-  const getRegisteredActions = useCallback(() => {
-    return Array.from(handlersRef.current.keys());
-  }, []);
-
-  return {
-    registerHandler,
-    unregisterHandler,
-    handleAction,
-    getRegisteredActions,
-  };
-};
-

package/src/lib/custom-hooks/useTypewriter.ts

@@ -1,26 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export function useTypewriter(text: string, speed: number = 20, onType?: () => void) {
-  const [displayedText, setDisplayedText] = useState('')
-
-  useEffect(() => {
-    // Ensure text is always a string to prevent errors
-    const safeText = text ?? ''
-    let index = 0
-    setDisplayedText('')
-
-    const interval = setInterval(() => {
-      setDisplayedText(() => {
-        const next = safeText.slice(0, index + 1)
-        index++
-        if (onType) onType()
-        if (index >= safeText.length) clearInterval(interval)
-        return next
-      })
-    }, speed)
-
-    return () => clearInterval(interval)
-  }, [text, onType])
-
-  return displayedText
-}

package/src/lib/index.ts

@@ -1,4 +0,0 @@
-export * from "./LanguageContext";
-export * from "./utils";
-export * from "./theme-utils";
-export * from "./custom-hooks/useActionHandler";

package/src/lib/theme-utils.ts

@@ -1,56 +0,0 @@
-/**
- * Utility functions for dynamic theming
- */
-
-export interface ThemeColors {
-  primaryColor?: string;
-}
-
-/**
- * Generate dynamic styles for primary color
- */
-export const getPrimaryColorStyles = (primaryColor?: string) => {
-  if (!primaryColor) return {};
-
-  return {
-    '--babylai-primary-color': primaryColor,
-    '--babylai-primary-color-100': lightenColor(primaryColor, 0.9),
-    '--babylai-primary-color-200': lightenColor(primaryColor, 0.8),
-    '--babylai-primary-color-300': lightenColor(primaryColor, 0.7),
-    '--babylai-primary-color-400': lightenColor(primaryColor, 0.6),
-    '--babylai-primary-color-500': primaryColor,
-    '--babylai-primary-color-600': darkenColor(primaryColor, 0.1),
-    '--babylai-primary-color-700': darkenColor(primaryColor, 0.2),
-    '--babylai-primary-color-800': darkenColor(primaryColor, 0.3),
-    '--babylai-primary-color-900': darkenColor(primaryColor, 0.4),
-    '--babylai-primary-color-950': darkenColor(primaryColor, 0.5),
-  } as React.CSSProperties;
-};
-
-/**
- * Lighten a color by a percentage
- */
-function lightenColor(color: string, amount: number): string {
-  const num = parseInt(color.replace('#', ''), 16);
-  const amt = Math.round(2.55 * amount * 100);
-  const R = (num >> 16) + amt;
-  const G = (num >> 8 & 0x00FF) + amt;
-  const B = (num & 0x0000FF) + amt;
-  return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-    (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-    (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
-}
-
-/**
- * Darken a color by a percentage
- */
-function darkenColor(color: string, amount: number): string {
-  const num = parseInt(color.replace('#', ''), 16);
-  const amt = Math.round(2.55 * amount * 100);
-  const R = (num >> 16) - amt;
-  const G = (num >> 8 & 0x00FF) - amt;
-  const B = (num & 0x0000FF) - amt;
-  return '#' + (0x1000000 + (R > 255 ? 255 : R < 0 ? 0 : R) * 0x10000 +
-    (G > 255 ? 255 : G < 0 ? 0 : G) * 0x100 +
-    (B > 255 ? 255 : B < 0 ? 0 : B)).toString(16).slice(1);
-}