@aslaluroba/help-center-react 1.0.1

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

@@ -0,0 +1,47 @@
+import { useTypewriter } from '@/lib/custom-hooks/useTypewriter';
+import React from 'react';
+import Markdown from 'react-markdown';
+
+interface AgentResponseProps {
+    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;
+
+    // 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>
+    )
+}
+
+export default AgentResponse

package/src/components/ui/agent-response/doc.md

@@ -0,0 +1,88 @@
+# AgentResponse Component
+
+## Overview
+
+The `AgentResponse` component renders a chat message in a conversational interface, supporting user and agent messages with optional typewriter animation for agent responses. It uses `react-markdown` to render the message content, allowing Markdown formatting, and applies conditional styling based on the sender type.
+
+## Props
+
+| Prop Name        | Type   | Required | Description                                                                 |
+|------------------|--------|----------|-----------------------------------------------------------------------------|
+| `messageContent` | string | Yes      | The content of the message to display, supports Markdown formatting.         |
+| `senderType`     | number | Yes      | The type of sender: `1` for user, `2` or `3` for agents (triggers animation). |
+| `messageId`      | number | Yes      | A unique identifier for the message, used to track seen messages.            |
+| `onType`         | () => void | No      | A Callback function, used to trigger scroll on typing.            |
+
+## Features
+
+- **Conditional Styling**:
+  - User messages (`senderType === 1`): Rendered with a primary background (`babylai-bg-primary-500`), white text (`!babylai-text-black-white-50`), and aligned to the right (`babylai-self-end`).
+  - Agent messages (`senderType === 2` or `3`): Rendered with a neutral background (`babylai-bg-black-white-50`).
+- **Typewriter Animation**:
+  - Applied to agent messages (`senderType === 2` or `3`) on first render (when `messageId` is not in `seenMessagesRef`).
+  - Uses the `useTypewriter` hook with a 20ms delay per character.
+  - Animation is skipped for subsequent renders of the same `messageId`.
+- **Markdown Support**:
+  - Renders `messageContent` using `react-markdown`.
+  - Customizes `<p>` tags with classes for consistent styling (`babylai-m-0`, `babylai-leading-6`, `babylai-text-sm`, `babylai-text-right`, `babylai-font-sans`).
+- **Seen Message Tracking**:
+  - Maintains a global `seenMessagesRef` Set to track which `messageId`s have been fully animated.
+  - Adds `messageId` to `seenMessagesRef` when animation completes (`animatedText === messageContent`).
+
+## Usage
+
+### Example
+
+```tsx
+import { AgentResponse } from './agent-response';
+
+function Chat() {
+    return (
+        <div>
+            {/* User message */}
+            <AgentResponse
+                senderType={1}
+                messageContent="Hello, how can I help?"
+                messageId={1}
+            />
+            {/* Agent message with animation */}
+            <AgentResponse
+                senderType={2}
+                messageContent="Hi! I'm here to assist."
+                messageId={2}
+            />
+        </div>
+    );
+}
+```
+
+### Styling
+
+The component uses the following Tailwind/custom classes:
+- Container: `babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-text-right`
+- User-specific: `babylai-bg-primary-500 !babylai-text-black-white-50 babylai-self-end`
+- Agent-specific: `babylai-bg-black-white-50`
+- Paragraph: `babylai-m-0 babylai-leading-6 babylai-text-sm babylai-text-right babylai-font-sans`
+
+Ensure these classes are defined in your CSS (e.g., Tailwind configuration).
+
+## Notes
+
+- **Animation**: The typewriter effect is only applied to agent messages (`senderType` 2 or 3) on their first render. Once the animation completes, the `messageId` is marked as seen, and subsequent renders use the full message.
+- **Markdown**: Supports basic Markdown (e.g., bold, italic). Complex Markdown features depend on `react-markdown` capabilities.
+- **Performance**: The `seenMessagesRef` is a global `Set`, so ensure `messageId`s are unique to avoid conflicts across instances.
+
+## Dependencies
+
+- `react-markdown`: For rendering Markdown content.
+- `@/lib/custom-hooks/useTypewriter`: Custom hook for typewriter animation.
+
+## Testing
+
+The component is tested with Jest and React Testing Library, covering:
+- Rendering and styling for user (`senderType=1`) and agent (`senderType=2/3`) messages.
+- Animation behavior for unseen and seen messages.
+- `seenMessagesRef` updates when animation completes.
+- Markdown rendering with custom paragraph styling.
+
+See `agent-response.test.tsx` for the full test suite.

package/src/components/ui/header.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import CloseCircle from '../../assets/icons/closeCircle.svg'
+import Logo from '../../assets/logo.svg'
+
+interface HeaderProps {
+  onClose: () => void
+}
+
+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} />
+    </header>
+  )
+}

package/src/core/ApiService.ts

@@ -0,0 +1,118 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { HelpCenterConfig } from '../lib/types';
+
+export class ApiService {
+  private axiosInstance: AxiosInstance;
+  private config: HelpCenterConfig;
+  private tokenExpiryTime: number = 0;
+  private currentToken: string | null = null;
+
+  constructor(config: HelpCenterConfig) {
+    this.config = config;
+    this.axiosInstance = axios.create({
+      baseURL: config.baseUrl,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    this.setupInterceptors();
+  }
+
+  private setupInterceptors() {
+    this.axiosInstance.interceptors.request.use(
+      async (config) => {
+        const token = await this.getValidToken();
+        if (token && config.headers) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      async (error) => {
+        if (error.response?.status === 401) {
+          // Token might be expired, try to refresh
+          const token = await this.getValidToken(true);
+          if (token && error.config) {
+            error.config.headers.Authorization = `Bearer ${token}`;
+            return this.axiosInstance.request(error.config);
+          }
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  private async getValidToken(forceRefresh = false): Promise<string> {
+    const currentTime = Math.floor(Date.now() / 1000);
+
+    if (forceRefresh || !this.currentToken || currentTime >= this.tokenExpiryTime) {
+      try {
+        const response = await this.config.getToken();
+        if (!response || !response.token || !response.expiresIn) {
+          throw new Error('Invalid token response');
+        }
+
+        this.currentToken = response.token;
+        this.tokenExpiryTime = currentTime + response.expiresIn;
+        return this.currentToken;
+      } catch (error) {
+        console.error('Error getting token:', error);
+        throw error;
+      }
+    }
+
+    return this.currentToken;
+  }
+
+  async get<T>(endpoint: string, config?: AxiosRequestConfig): Promise<T> {
+    try {
+      const response = await this.axiosInstance.get<T>(endpoint, config);
+      return response.data;
+    } catch (error) {
+      this.handleError(error);
+      throw error;
+    }
+  }
+
+  async post<T>(endpoint: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    try {
+      const response = await this.axiosInstance.post<T>(endpoint, data, config);
+      return response.data;
+    } catch (error) {
+      this.handleError(error);
+      throw error;
+    }
+  }
+
+  async put<T>(endpoint: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    try {
+      const response = await this.axiosInstance.put<T>(endpoint, data, config);
+      return response.data;
+    } catch (error) {
+      this.handleError(error);
+      throw error;
+    }
+  }
+
+  async delete<T>(endpoint: string, config?: AxiosRequestConfig): Promise<T> {
+    try {
+      const response = await this.axiosInstance.delete<T>(endpoint, config);
+      return response.data;
+    } catch (error) {
+      this.handleError(error);
+      throw error;
+    }
+  }
+
+  private handleError(error: unknown) {
+    if (this.config.onError) {
+      this.config.onError(error instanceof Error ? error : new Error('Unknown error occurred'));
+    }
+    console.error('API Error:', error);
+  }
+}

package/src/core/SignalRService.ts

@@ -0,0 +1,83 @@
+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
+  }
+}

package/src/core/api.ts

@@ -0,0 +1,71 @@
+import { TokenResponse } from '../lib/types'
+
+let getTokenFunction: (() => Promise<TokenResponse>) | undefined = undefined
+
+console.log('🚀 ~ getTokenFunction:', getTokenFunction)
+let baseUrl: string | null = null
+
+export function initializeAPI(url: string, getToken: () => Promise<TokenResponse>) {
+  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.')
+  }
+
+  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)
+  }
+
+  return storedToken
+}
+
+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
+
+  let response = await fetch(url, options)
+
+  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)
+  }
+
+  return response
+}
+
+export async function apiRequest(endpoint: string, method = 'GET', body: any = null) {
+  if (!baseUrl) throw new Error('API not initialized')
+
+  const url = `${baseUrl}/${endpoint}`
+  const options: RequestInit = {
+    method,
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: body ? JSON.stringify(body) : null
+  }
+
+  const response = await fetchWithAuth(url, options)
+
+  if (!response.ok) {
+    const errorData = await response.json()
+    throw new Error(errorData.message || 'API request failed')
+  }
+
+  return response
+}

package/src/core/token-service.ts

@@ -0,0 +1,35 @@
+type TokenResponse = {
+  token: string
+  expiresIn: number
+}
+
+export class TokenService {
+  private baseUrl: string
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl
+  }
+
+  async getToken(): Promise<TokenResponse> {
+    try {
+      const response = await fetch(`${this.baseUrl}/Auth/client/get-babylai-token`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch token')
+      }
+
+      const data = await response.json()
+      return {
+        token: data.token,
+        expiresIn: data.expiresIn || 3600 // Default to 1 hour if not provided
+      }
+    } catch (error) {
+      throw new Error('Failed to get authentication token')
+    }
+  }
+}