@aslaluroba/help-center-react 1.0.1

package/src/globals.css

@@ -0,0 +1,484 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.babylai-help-center-container {
+  position: fixed;
+  bottom: 12px;
+  right: 1%;
+  z-index: 9999;
+}
+
+
+  @media (min-width: 1820px) {
+
+.babylai-help-center-container {
+  bottom: 2%;
+}
+
+}
+
+
+
+
+/* Help-popup styles */
+.babylai-help-center-loadingContainer,
+.babylai-help-center-errorContainer {
+  position: fixed;
+  bottom: 90px;
+  right: 20px;
+  padding: 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.babylai-help-center-popup {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  width: 360px;
+  max-height: 600px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+.babylai-help-center-header {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.babylai-help-center-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.babylai-help-center-backButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: #666;
+}
+
+.babylai-help-center-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.babylai-help-center-optionsList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.babylai-help-center-optionButton {
+  padding: 12px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 14px;
+}
+
+.babylai-help-center-optionButton:hover {
+  background: #eee;
+}
+
+.babylai-help-center-detailsContent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.babylai-help-center-paragraph {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.babylai-help-center-chatButton {
+  margin-top: 16px;
+  padding: 12px 24px;
+  color: white;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+  align-self: center;
+}
+
+.babylai-help-center-chatButton:hover {
+  opacity: 0.9;
+}
+
+.babylai-help-center-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.babylai-help-center-endChatButton {
+  background-color: #ff4444;
+  color: white;
+  border: none;
+  padding: 5px 15px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.babylai-help-center-endChatButton:hover {
+  background-color: #cc0000;
+}
+
+.babylai-help-center-footerText {
+  margin: 0;
+  font-size: 12px;
+  color: #999;
+}
+
+/* Update the chat container to have a fixed height and prevent scrolling */
+.babylai-help-center-chatContainer {
+  display: flex;
+  flex-direction: column;
+  height: 400px; /* Fixed height */
+  overflow: hidden; /* Prevent container from scrolling */
+}
+
+/* Make only the messages area scrollable */
+.babylai-help-center-chatMessages {
+  flex: 1;
+  overflow-y: auto; /* Enable scrolling only for messages */
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.babylai-help-center-message {
+  max-width: 80%;
+  padding: 8px 12px;
+  border-radius: 12px;
+  position: relative;
+}
+
+.babylai-help-center-userMessage {
+  align-self: flex-start;
+  background-color: rgb(122, 140, 233);
+  color: white;
+  direction: rtl;
+}
+
+.babylai-help-center-assistantMessage {
+  align-self: flex-end;
+  background-color: #f1f1f1;
+  color: black;
+  direction: rtl;
+}
+
+.babylai-help-center-seenIndicator {
+  position: absolute;
+  bottom: -4px;
+  right: 4px;
+  font-size: 10px;
+  color: #666;
+}
+
+/* Ensure chat input stays fixed at bottom */
+.babylai-help-center-chatInput {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid #eee;
+  background: white; /* Add background to prevent messages showing through */
+  position: relative; /* Ensure it stays above scrolling content */
+}
+
+.babylai-help-center-chatInput input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  outline: none;
+}
+
+.babylai-help-center-chatInput input:focus {
+  border-color: rgb(122, 140, 233);
+}
+
+.babylai-help-center-sendButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgb(122, 140, 233);
+  border: none;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.babylai-help-center-sendButton:hover {
+  background: rgb(122, 140, 233);
+}
+
+.babylai-help-center-sendButton:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.babylai-help-center-typingIndicator {
+  display: flex;
+  gap: 4px;
+}
+
+.babylai-help-center-typingIndicator span {
+  animation: bounce 1s infinite;
+}
+
+.babylai-help-center-typingIndicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.babylai-help-center-typingIndicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.babylai-help-center-errorContainer {
+  color: #ff3b30;
+}
+
+.babylai-help-center-dialogOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1100;
+}
+
+.babylai-help-center-dialog {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.babylai-help-center-dialogHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.babylai-help-center-dialogHeader h4 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.babylai-help-center-dialogContent {
+  margin-bottom: 20px;
+}
+
+.babylai-help-center-dialogContent p {
+  margin: 0;
+  color: #666;
+}
+
+.babylai-help-center-dialogActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.babylai-help-center-cancelButton,
+.babylai-help-center-confirmButton {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.babylai-help-center-cancelButton {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.babylai-help-center-confirmButton {
+  background-color: rgb(122, 140, 233);
+  color: white;
+}
+
+.babylai-help-center-cancelButton:hover {
+  background-color: #eee;
+}
+
+.babylai-help-center-confirmButton:hover {
+  opacity: 0.9;
+}
+
+.babylai-help-center-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #d49cee;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Floating-message styles */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.babylai-help-center-messageBox {
+  background-color: rgb(122, 140, 233);
+  color: white;
+  padding: 12px 16px;
+  border-radius: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  margin-bottom: 16px;
+  max-width: 200px;
+  position: relative;
+}
+
+.babylai-help-center-messageBox::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  right: 20px;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid rgb(122, 140, 233);
+}
+
+.babylai-help-center-text {
+  font-size: 12px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.babylai-help-center-closeButton {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  padding: 3px;
+}
+
+.babylai-help-center-closeButton:hover {
+  background-color: rgb(102, 117, 195);
+  color: white;
+}
+
+.babylai-help-center-arrow {
+  height: 32px;
+  width: 32px;
+  animation: float 2s infinite ease-in-out;
+}
+
+.babylai-help-center-arrowSvg {
+  stroke: rgb(122, 140, 233);
+  fill: none;
+}
+
+/* Help-button styles */
+.babylai-help-center-helpButton {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: rgb(122, 140, 233);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition:
+    transform 0.2s,
+    background-color 0.2s;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.babylai-help-center-helpButton:hover {
+  background-color: rgb(98, 112, 186);
+  transform: scale(1.05);
+}
+
+.babylai-help-center-helpButton:active {
+  transform: scale(0.95);
+}

package/src/i18n.ts

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

package/src/index.ts

@@ -0,0 +1,21 @@
+import { configService } from './lib/config'
+import { HelpCenter } from './ui/help-center'
+
+export type HelpCenterConfig = {
+  baseUrl: string
+  hubUrl?: string
+}
+
+export function initializeHelpCenter(config: HelpCenterConfig) {
+  configService.initialize(config)
+}
+
+export { HelpCenter }
+
+export * from './lib/types'
+export * from './core/ApiService'
+export * from './core/SignalRService'
+// export * from './globals.css'
+
+export { TokenService } from './core/token-service'
+export { initializeAPI } from './core/api'

package/src/lib/config.ts

@@ -0,0 +1,59 @@
+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>
+}
+
+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,
+      hubUrl: config.hubUrl || config.baseUrl,
+      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, this.config.getToken)
+
+    // Initialize SignalR
+    ClientSignalRService.initialize(this.config.hubUrl || this.config.baseUrl)
+  }
+
+  getConfig(): Config {
+    if (!this.config) {
+      throw new Error('Help Center not initialized. Call initialize() first with configuration.')
+    }
+    console.log('🚀 ~ ConfigService ~ getConfig ~ config:', this.config)
+    return this.config
+  }
+
+  async getToken(): Promise<string> {
+    return await getValidToken()
+  }
+}
+
+export const configService = ConfigService.getInstance()

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

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

package/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './utils'

package/src/lib/types.ts

@@ -0,0 +1,120 @@
+export interface HelpCenterProps extends React.HTMLAttributes<HTMLDivElement> {
+  helpScreenId: string
+}
+
+export interface Theme {
+  primary: string
+  secondary: string
+  text: string
+  background: string
+  error: string
+  success: string
+}
+
+export interface UserData {
+  id: string
+  name: string
+  email: string
+  avatar?: string
+}
+
+export interface Message {
+  id: number
+  senderType: number // 1: Customer, 2: Agent, 3: AI
+  messageContent: string
+  sentAt: Date
+  isSeen: boolean
+}
+
+export interface ChatSession {
+  id: string
+  messages: Message[]
+  participants: UserData[]
+  status: 'active' | 'closed'
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface ChatSessionData {
+  helpScreenId: string
+  user: UserData
+  initialMessage?: string
+}
+
+export interface HelpCenterConfig {
+  baseUrl: string
+  getToken: () => Promise<{ token: string; expiresIn: number }>
+  helpScreenId: string
+  user?: UserData
+  theme?: Partial<Theme>
+  onMessageReceived?: (message: Message) => void
+  onSessionClosed?: () => void
+  onError?: (error: Error) => void
+}
+
+export interface HelpScreenOption {
+  id: string
+  title: string
+  paragraphs?: string[]
+  nestedOptions?: HelpScreenOption[]
+  chatWithUs?: boolean
+}
+
+export interface HelpScreen {
+  id: string
+  title: string
+  options: HelpScreenOption[]
+}
+
+export interface ApiResponse<T> {
+  data: T
+  success: boolean
+  error?: string
+}
+
+export interface TokenResponse {
+  token: string
+  expiresIn: number
+}
+
+export interface HelpScreenData {
+  id: string
+  tenantId: string
+  tenant: {
+    id: string
+    name: string
+    key: string
+  }
+  title: string
+  description: string
+  options: Option[]
+  chatWithUs: boolean
+}
+
+export interface Option {
+  id: string
+  helpScreenId: string
+  parentOptionId: string | null
+  parentOption: Option | null
+  files: any[]
+  nestedOptions: Option[]
+  title: string
+  paragraphs: string[]
+  chatWithUs: boolean
+  assistantId?: string
+  assistant?: {
+    id: string
+    tenantId: string
+    tenant: {
+      id: string
+      name: string
+      key: string
+    }
+    name: string
+    openAIAssistantId: string
+    greeting: string
+    closing: string
+  }
+  hasNestedOptions: boolean
+  order: number
+}