@aslaluroba/help-center
Version:
A powerful and customizable help center widget for Angular applications with real-time chat functionality, AI assistance, multi-language support, and user feedback collection.
4,148 lines • 436 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, signal, input, output, ChangeDetectionStrategy, Component, Pipe, computed, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, Input, effect, SecurityContext, ViewChild, ViewEncapsulation, InjectionToken, DestroyRef } from '@angular/core';
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BehaviorSubject, from, throwError, Observable, forkJoin, catchError as catchError$1, of, firstValueFrom } from 'rxjs';
import * as Ably from 'ably';
import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http';
import { switchMap, map, catchError, filter } from 'rxjs/operators';
import 'iconify-icon';
import { DomSanitizer } from '@angular/platform-browser';
import { marked } from 'marked';
/**
* Service for managing AI response action handlers in an extensible way.
*
* This service provides a registry pattern for handling different action types
* from realtime AI responses, making it easy to add new actions without
* modifying existing code.
*
* @publicApi
*/
class ActionHandlerService {
actionHandlers = new Map();
defaultHandler;
constructor() {
// Register default handler for unknown actions
this.setDefaultHandler((messageData) => {
const actionType = messageData?.actionType || '';
if (actionType && actionType !== '') {
console.warn(`[ActionHandlerService] Unknown action type received: "${actionType}". ` +
`Message data:`, messageData);
}
});
}
/**
* Registers a handler for a specific action type
*
* @param actionType The action type string (e.g., 'needs_agent', 'end_session')
* @param handler The handler function to execute when this action is received
*/
registerHandler(actionType, handler) {
if (this.actionHandlers.has(actionType)) {
console.warn(`[ActionHandlerService] Handler for action type "${actionType}" already exists. ` +
`Overwriting with new handler.`);
}
this.actionHandlers.set(actionType, handler);
}
/**
* Unregisters a handler for a specific action type
*
* @param actionType The action type to unregister
*/
unregisterHandler(actionType) {
this.actionHandlers.delete(actionType);
}
/**
* Sets the default handler for unknown action types
*
* @param handler The default handler function
*/
setDefaultHandler(handler) {
this.defaultHandler = handler;
}
/**
* Handles an action type by executing the registered handler or default handler
*
* @param actionType The action type to handle
* @param messageData The message data containing the action
* @returns Promise that resolves when handling is complete
*/
async handleAction(actionType, messageData) {
// Handle empty string or null/undefined - do nothing as per requirements
if (!actionType || actionType === '') {
return;
}
const handler = this.actionHandlers.get(actionType);
if (handler) {
try {
await handler(messageData);
}
catch (error) {
console.error(`[ActionHandlerService] Error executing handler for action type "${actionType}":`, error);
}
}
else if (this.defaultHandler) {
// Use default handler for unknown actions
try {
await this.defaultHandler(messageData);
}
catch (error) {
console.error(`[ActionHandlerService] Error executing default handler for action type "${actionType}":`, error);
}
}
}
/**
* Gets all registered action types
*
* @returns Array of registered action type strings
*/
getRegisteredActions() {
return Array.from(this.actionHandlers.keys());
}
/**
* Clears all registered handlers (useful for testing or cleanup)
*/
clearHandlers() {
this.actionHandlers.clear();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionHandlerService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionHandlerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [] });
/**
* Service for handling API requests with automatic authentication token management.
*
* Features:
* - Automatic token refresh on expiry
* - Token validation and format checking
* - Secure token storage using sessionStorage
* - Endpoint validation to prevent SSRF attacks
*
* @publicApi
*/
class ApiService {
getTokenFunction = null;
baseUrl = 'https://babylai.net/api';
/**
* Initialize the API service with authentication configuration.
*
* This must be called before making any API requests. The service will use
* the provided token function to fetch and refresh tokens automatically.
*
* @param config Configuration object containing token function and optional base URL
* @throws Error if getToken function is not provided
*
* @example
* ```typescript
* apiService.initialize({
* getToken: async () => {
* const response = await fetch('/auth/token');
* const data = await response.json();
* return data.token;
* },
* baseUrl: 'https://api.example.com'
* });
* ```
*/
initialize(config) {
if (!config.getToken) {
throw new Error('getToken function is required for API initialization');
}
this.getTokenFunction = config.getToken;
if (config.baseUrl) {
// Enforce HTTPS for API calls when app is served over HTTPS
// Allow localhost for development
if (typeof window !== 'undefined' &&
window.location.protocol === 'https:') {
const baseUrl = config.baseUrl.toLowerCase();
const isLocalhost = baseUrl.includes('localhost') || baseUrl.includes('127.0.0.1');
// If the app is running on HTTPS, enforce HTTPS for API calls (except localhost)
if (!config.baseUrl.startsWith('https://') && !isLocalhost) {
throw new Error('Security violation: API base URL must use HTTPS when app is served over HTTPS. ' +
'Non-HTTPS URLs are only allowed for localhost in development.');
}
}
this.baseUrl = config.baseUrl;
}
}
/**
* Validate token format
* JWT tokens must have exactly 3 parts separated by dots (header.payload.signature)
*/
validateToken(token) {
if (!token || typeof token !== 'string') {
return false;
}
// Basic validation - ensure token is not empty
const trimmedToken = token.trim();
if (trimmedToken.length === 0) {
return false;
}
// JWT tokens must have exactly 3 parts separated by dots (header.payload.signature)
const parts = trimmedToken.split('.');
if (parts.length !== 3) {
return false;
}
// Each part should be non-empty
if (parts[0].length === 0 ||
parts[1].length === 0 ||
parts[2].length === 0) {
return false;
}
// Basic length check - JWT tokens are typically much longer than 10 characters
// Header and payload are base64url encoded, signature is typically longer
if (trimmedToken.length < 20) {
return false;
}
return true;
}
/**
* Retrieves a valid authentication token, fetching a new one if expired.
*
* Tokens are cached for 15 minutes. The service provides backward compatibility:
* - Checks localStorage first for existing tokens (backward compatibility)
* - Falls back to sessionStorage if no token found in localStorage
* - New tokens are stored in sessionStorage (preferred) or localStorage (fallback)
* - Automatically migrates tokens from localStorage to sessionStorage when found
*
* After expiry, a new token is automatically fetched using the configured getToken function.
*
* @param forceRefresh If true, forces a new token fetch even if current token is valid
* @returns Promise resolving to a valid authentication token
* @throws Error if API service is not initialized or token format is invalid
*/
async getValidToken(forceRefresh = false) {
if (!this.getTokenFunction) {
throw new Error('API service not initialized. Call initialize({ getToken }) first.');
}
// Determine storage mechanism - prefer sessionStorage for new tokens (more secure)
// but check localStorage first for backward compatibility
const sessionStorageAvailable = typeof window !== 'undefined' &&
typeof window.sessionStorage !== 'undefined';
const localStorageAvailable = typeof window !== 'undefined' &&
typeof window.localStorage !== 'undefined';
const sessionStore = sessionStorageAvailable
? window.sessionStorage
: localStorageAvailable
? window.localStorage
: null;
const localStore = localStorageAvailable
? window.localStorage
: null;
const currentTime = Math.floor(Date.now() / 1000);
let storedToken = null;
let storedExpiry = null;
// Backward compatibility: Check localStorage first for existing tokens
if (localStore) {
const localToken = localStore.getItem('chatbot-token');
const localExpiry = localStore.getItem('chatbot-token-expiry');
if (localToken && localExpiry && currentTime < Number(localExpiry)) {
// Validate stored token format
if (this.validateToken(localToken)) {
storedToken = localToken;
storedExpiry = localExpiry;
// Migrate to sessionStorage for future use (if available)
if (sessionStore && !forceRefresh) {
sessionStore.setItem('chatbot-token', localToken);
sessionStore.setItem('chatbot-token-expiry', localExpiry);
}
}
else {
// Invalid token in localStorage, clear it
localStore.removeItem('chatbot-token');
localStore.removeItem('chatbot-token-expiry');
}
}
}
// If no valid token found in localStorage, check sessionStorage
if (!storedToken && sessionStore) {
const sessionToken = sessionStore.getItem('chatbot-token');
const sessionExpiry = sessionStore.getItem('chatbot-token-expiry');
if (sessionToken &&
sessionExpiry &&
currentTime < Number(sessionExpiry)) {
// Validate stored token format
if (this.validateToken(sessionToken)) {
storedToken = sessionToken;
storedExpiry = sessionExpiry;
}
else {
// Invalid token in sessionStorage, clear it
sessionStore.removeItem('chatbot-token');
sessionStore.removeItem('chatbot-token-expiry');
}
}
}
// Fetch new token if needed
if (!storedToken ||
!storedExpiry ||
currentTime >= Number(storedExpiry) ||
forceRefresh) {
const tokenResponse = await this.getTokenFunction();
if (!tokenResponse) {
throw new Error('Invalid token response from getToken function');
}
// Validate token format before storing
if (!this.validateToken(tokenResponse)) {
throw new Error('Invalid token format received from getToken function');
}
storedToken = tokenResponse;
storedExpiry = String(currentTime + 900); // 15 minutes expiry
// Store new tokens in sessionStorage (preferred) or localStorage (fallback)
const targetStorage = sessionStore || localStore;
if (targetStorage) {
targetStorage.setItem('chatbot-token', storedToken);
targetStorage.setItem('chatbot-token-expiry', storedExpiry);
// Clean up old localStorage token if it exists (migration)
if (localStore && targetStorage === sessionStore) {
localStore.removeItem('chatbot-token');
localStore.removeItem('chatbot-token-expiry');
}
}
}
return storedToken;
}
async fetchWithAuth(url, options, retry = true) {
if (!options.headers) {
options.headers = {};
}
const headers = options.headers;
headers['Authorization'] = `Bearer ${await this.getValidToken()}`;
let response = await fetch(url, options);
if ((response.status === 401 || response.status === 403) && retry) {
console.warn('Token expired. Fetching new token...');
const newToken = await this.getValidToken(true);
headers['Authorization'] = `Bearer ${newToken}`;
response = await fetch(url, options);
}
return response;
}
/**
* Validate endpoint to prevent SSRF vulnerabilities
*
* Protects against:
* - Absolute URLs with any protocol (case-insensitive)
* - Protocol-relative URLs
* - Dangerous protocols (ftp, file, data, javascript, etc.)
* - URL-encoded path traversal
* - Double-encoded attacks
*/
validateEndpoint(endpoint) {
// Ensure endpoint is not empty
if (!endpoint || endpoint.trim().length === 0) {
throw new Error('Invalid endpoint: endpoint cannot be empty');
}
// Normalize endpoint for case-insensitive checks
const normalized = endpoint.trim();
const lowercased = normalized.toLowerCase();
// Prevent protocol-relative URLs (//example.com)
if (normalized.startsWith('//')) {
throw new Error('Invalid endpoint: protocol-relative URLs not allowed');
}
// Check for dangerous protocols (case-insensitive)
// List of dangerous protocols that could be used for SSRF
const dangerousProtocols = [
'http://',
'https://',
'ftp://',
'file://',
'data:',
'javascript:',
'mailto:',
'tel:',
'ws://',
'wss://',
'gopher://',
'ldap://',
'ldaps://',
];
for (const protocol of dangerousProtocols) {
if (lowercased.startsWith(protocol)) {
throw new Error(`Invalid endpoint: absolute URLs with protocol '${protocol}' not allowed`);
}
}
// Decode URL-encoded strings to catch encoded attacks
let decodedEndpoint;
try {
// Decode once to catch single-encoded attacks
decodedEndpoint = decodeURIComponent(normalized);
// Decode twice to catch double-encoded attacks
decodedEndpoint = decodeURIComponent(decodedEndpoint);
}
catch {
// If decoding fails, it might be malicious - reject it
throw new Error('Invalid endpoint: malformed URL encoding detected');
}
// Check decoded endpoint for path traversal patterns
const decodedLowercased = decodedEndpoint.toLowerCase();
// Check for path traversal in various forms
const pathTraversalPatterns = [
'..',
'%2e%2e',
'%2e%2e/',
'../',
'..\\',
'%2f',
'%5c',
];
for (const pattern of pathTraversalPatterns) {
if (decodedLowercased.includes(pattern) ||
normalized.toLowerCase().includes(pattern)) {
throw new Error('Invalid endpoint: path traversal detected');
}
}
// Check for dangerous protocols in decoded string
for (const protocol of dangerousProtocols) {
if (decodedLowercased.startsWith(protocol)) {
throw new Error(`Invalid endpoint: dangerous protocol detected in URL-encoded string`);
}
}
// Prevent control characters and other dangerous characters
// Check for control characters (0x00-0x1F) and DEL (0x7F) using character codes
for (let i = 0; i < normalized.length; i++) {
const charCode = normalized.charCodeAt(i);
if ((charCode >= 0x00 && charCode <= 0x1f) || charCode === 0x7f) {
throw new Error('Invalid endpoint: control characters not allowed');
}
}
}
/**
* Makes an authenticated API request with automatic token management.
*
* This method automatically:
* - Validates the endpoint to prevent SSRF attacks
* - Adds authentication headers with a valid token
* - Retries with a fresh token if authentication fails
* - Handles errors and returns appropriate error messages
*
* @param endpoint API endpoint path (relative to baseUrl)
* @param method HTTP method (default: 'GET')
* @param body Request body object (will be JSON stringified)
* @param customHeaders Additional headers to include in the request
* @returns Promise resolving to the Response object
* @throws Error if endpoint validation fails, request fails, or authentication fails
*
* @example
* ```typescript
* // GET request
* const response = await apiService.apiRequest('client/help-screens/123');
* const data = await response.json();
*
* // POST request
* const response = await apiService.apiRequest(
* 'client/chat-sessions',
* 'POST',
* { helpScreenId: '123' }
* );
* ```
*/
async apiRequest(endpoint, method = 'GET', body = null, customHeaders = {}) {
// Validate endpoint before making request
this.validateEndpoint(endpoint);
const url = `${this.baseUrl}/${endpoint}`;
const options = {
method,
headers: {
'Content-Type': 'application/json',
...customHeaders,
},
body: body ? JSON.stringify(body) : null,
};
const response = await this.fetchWithAuth(url, options);
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'API request failed');
}
return response;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ApiService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ApiService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
// Note: Using namespace import for tree-shaking support
// Modern bundlers (webpack, esbuild) should tree-shake unused exports
// Only Realtime class and related types are used, so tree-shaking should work
class ClientAblyService {
static client = null;
static channel = null;
static isConnected = false;
static sessionId = null;
static messageUnsubscribe = null;
static connectionTimeout;
/**
* Normalize backend attachments to string[] of image sources (URLs or file IDs).
* Handles: array of strings/objects (downloadUrl, url, id), JSON strings, or empty strings.
* URLs are used directly; IDs are presigned by ImageAttachmentComponent.
*/
static normalizeAttachmentIds(raw) {
if (raw == null)
return [];
// Handle empty strings (backend sends "" when no attachments)
if (typeof raw === 'string') {
if (raw === '')
return [];
// Try parsing as JSON in case backend sends JSON string
try {
const parsed = JSON.parse(raw);
return this.normalizeAttachmentIds(parsed);
}
catch {
// Not valid JSON; treat as single source (URL or ID)
return [raw];
}
}
if (Array.isArray(raw)) {
if (raw.length === 0)
return [];
const sources = [];
for (const attachment of raw) {
if (typeof attachment === 'string') {
sources.push(attachment);
}
else if (attachment && typeof attachment === 'object') {
const o = attachment;
if (o.downloadUrl && typeof o.downloadUrl === 'string') {
sources.push(o.downloadUrl);
}
else if (o.url && typeof o.url === 'string') {
sources.push(o.url);
}
else if (o.id && typeof o.id === 'string') {
sources.push(o.id);
}
}
}
return sources;
}
if (typeof raw === 'object' && raw !== null) {
const o = raw;
const arr = (o['ids'] ?? o['fileIds'] ?? o['attachmentIds']);
return this.normalizeAttachmentIds(arr);
}
return [];
}
static async startConnection(sessionId, ablyToken, onMessageReceived, tenantId, getAblyToken, onActionReceived) {
// Prevent multiple connections
if (this.isConnected && this.sessionId === sessionId) {
return;
}
// Close existing connection if connecting to a different session
if (this.isConnected && this.sessionId !== sessionId) {
await this.stopConnection();
}
try {
// Initialize Ably client with token refresh support
const clientOptions = {
autoConnect: true,
token: ablyToken, // Use initial token for immediate connection
};
if (getAblyToken) {
// Use authCallback for token renewal when callback is provided
// When both token and authCallback are provided, token is used for initial connection
// and authCallback is used for token refresh
clientOptions.authCallback = getAblyToken;
}
this.client = new Ably.Realtime(clientOptions);
// Wait for connection to be established
await new Promise((resolve, reject) => {
if (!this.client) {
reject(new Error('Failed to initialize Ably client'));
return;
}
this.client.connection.once('connected', () => {
// Clear connection timeout if connection succeeds
if (this.connectionTimeout) {
clearTimeout(this.connectionTimeout);
this.connectionTimeout = undefined;
}
this.isConnected = true;
this.sessionId = sessionId;
resolve();
});
this.client.connection.once('failed', (stateChange) => {
// Clear connection timeout on failure
if (this.connectionTimeout) {
clearTimeout(this.connectionTimeout);
this.connectionTimeout = undefined;
}
console.error('Ably connection failed:', stateChange);
reject(new Error(`Ably connection failed: ${stateChange.reason?.message || 'Unknown error'}`));
});
this.client.connection.once('disconnected', (stateChange) => {
// Clear connection timeout on disconnect
if (this.connectionTimeout) {
clearTimeout(this.connectionTimeout);
this.connectionTimeout = undefined;
}
console.error('Ably connection disconnected:', stateChange);
reject(new Error(`Ably connection disconnected: ${stateChange.reason?.message || 'Unknown error'}`));
});
// Set a timeout for connection
this.connectionTimeout = setTimeout(() => {
if (!this.isConnected) {
// Clean up resources on timeout
const clientToCleanup = this.client;
this.connectionTimeout = undefined;
// Close and clear the client connection
if (clientToCleanup) {
try {
clientToCleanup.close();
}
catch (cleanupError) {
console.error('Error closing client on timeout:', cleanupError);
}
this.client = null;
}
// Reset connection state
this.isConnected = false;
this.sessionId = null;
this.channel = null;
this.messageUnsubscribe = null;
reject(new Error('Ably connection timeout'));
}
}, 10000);
});
// Subscribe to the session room
await this.joinChannel(sessionId, onMessageReceived, tenantId, onActionReceived);
}
catch (error) {
console.error('Error during Ably connection setup:', error);
// Clean up resources on error (including timeout)
if (this.client) {
try {
this.client.close();
}
catch (cleanupError) {
console.error('Error closing client on error:', cleanupError);
}
this.client = null;
}
// Clear connection timeout if still pending
if (this.connectionTimeout) {
clearTimeout(this.connectionTimeout);
this.connectionTimeout = undefined;
}
// Reset all connection state
this.isConnected = false;
this.sessionId = null;
this.channel = null;
this.messageUnsubscribe = null;
throw error;
}
}
static async joinChannel(sessionId, onMessageReceived, tenantId, onActionReceived) {
if (!this.client) {
throw new Error('Chat client not initialized');
}
const roomName = `session:${tenantId}:${sessionId}`;
// Set up raw channel subscription for server messages
if (this.client) {
this.channel = this.client.channels.get(roomName);
// Subscribe to assistant/system responses
this.channel.subscribe('ReceiveMessage', (message) => {
try {
const messageData = typeof message.data === 'string'
? { content: message.data }
: message.data || {};
const messageContent = typeof messageData === 'string'
? messageData
: messageData?.content || messageData?.message || '';
const senderType = messageData?.senderType || 3; // Assistant
// Extract attachments from backend (can be array of strings/objects or empty string)
// Backend sends attachments as array when present, empty string when none
const attachmentsRaw = messageData?.attachments;
const attachmentIdsRaw = messageData?.attachmentIds;
// Prioritize attachments array if it exists and has items, otherwise check attachmentIds field
// If attachments is an array with items, use it; else if attachmentIds is an array, use it; else use attachmentsRaw (might be empty string)
const rawAttachments = Array.isArray(attachmentsRaw) && attachmentsRaw.length > 0
? attachmentsRaw
: Array.isArray(attachmentIdsRaw) && attachmentIdsRaw.length > 0
? attachmentIdsRaw
: (attachmentsRaw ?? attachmentIdsRaw);
const attachmentIds = this.normalizeAttachmentIds(rawAttachments);
const actionType = messageData?.actionType;
// Handle action type using extensible action handler
// This supports all action types (known and unknown) in a safe, extensible way
if (onActionReceived &&
actionType !== undefined &&
actionType !== null) {
// Execute action handler (may be async, but we don't await to avoid blocking message processing)
Promise.resolve(onActionReceived(actionType, messageData)).catch((error) => {
console.error('Error handling action type:', actionType, error);
});
}
// Extract needsAgent flag (for backward compatibility)
// This is separate from action handling to maintain existing behavior
const needsAgent = messageData?.needsAgent ||
messageData?.actionType == 'needs_agent' ||
false;
// Pass message as object if it has attachments, otherwise as string for backward compatibility
const messageToPass = attachmentIds.length > 0
? { content: messageContent, attachments: attachmentIds }
: messageContent;
onMessageReceived(messageToPass, senderType, needsAgent);
}
catch (error) {
console.error('Error processing ReceiveMessage:', error);
}
});
await this.channel.attach();
}
}
static async stopConnection() {
try {
// Clear connection timeout if still pending
if (this.connectionTimeout) {
clearTimeout(this.connectionTimeout);
this.connectionTimeout = undefined;
}
// Unsubscribe from room messages
if (this.messageUnsubscribe) {
this.messageUnsubscribe();
this.messageUnsubscribe = null;
}
// Unsubscribe and detach from raw channel
if (this.channel) {
this.channel.unsubscribe();
await this.channel.detach();
this.channel = null;
}
// Close Ably connection
if (this.client) {
this.client.close();
this.client = null;
}
this.isConnected = false;
this.sessionId = null;
}
catch (error) {
console.error('Error stopping Ably connection:', error);
// Reset state even if there's an error
this.isConnected = false;
this.sessionId = null;
this.client = null;
this.channel = null;
this.messageUnsubscribe = null;
this.connectionTimeout = undefined;
}
}
static isConnectionActive() {
return this.isConnected && this.client?.connection.state === 'connected';
}
static getConnectionState() {
return this.client?.connection.state || 'disconnected';
}
// Method to manually send a message (if needed for debugging or direct messaging)
static async sendMessage(messageContent, senderType = 1) {
if (!this.channel || !this.isConnected) {
throw new Error('Connection not active');
}
try {
const messageData = {
text: messageContent,
metadata: {
senderType,
sentAt: new Date().toISOString(),
},
};
await this.channel.publish('message', messageData);
}
catch (error) {
console.error('Error sending message:', error);
throw error;
}
}
}
/**
* Service for managing chat session lifecycle and operations.
*
* Handles:
* - Chat session creation and management
* - Ably connection management
* - Message sending operations
*
* @publicApi
*/
class ChatSessionService {
apiService = inject(ApiService);
actionHandlerService = inject(ActionHandlerService);
/**
* Creates a new chat session with the specified option.
*
* @param option The help screen option to create a chat session for
* @param helpScreenId The help screen ID
* @param currentLang Current language code for API headers
* @returns Promise resolving to session data including sessionId and ablyToken
* @throws Error if session creation fails
*/
async createSession(option, helpScreenId, currentLang) {
const chatSessionCreateDto = {
optionId: option.id,
helpScreenId: helpScreenId,
};
const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto, {
'Accept-Language': currentLang,
});
return await response.json();
}
/**
* Establishes Ably real-time connection for a chat session.
*
* @param sessionId The chat session ID
* @param ablyToken The Ably authentication token
* @param onMessageReceived Callback function for received messages
* @param tenantId The tenant ID for the connection
* @param option Optional option for token refresh (needed for token renewal)
* @param helpScreenId Optional help screen ID for token refresh
* @param currentLang Optional current language for token refresh
* @param onActionReceived Optional callback function for handling action types
*/
async establishAblyConnection(sessionId, ablyToken, onMessageReceived, tenantId, option, helpScreenId, currentLang, onActionReceived) {
// Create token refresh callback if context is provided
let getAblyToken;
if (option && helpScreenId && currentLang) {
getAblyToken = async () => {
try {
// This callback is only called when the token needs to be refreshed
// The initial token is provided via the 'token' option in Ably client options
// Create a new session to get a fresh token
// Note: This will create a new session, but we keep using the original sessionId
// In the future, if there's a dedicated refresh endpoint, use that instead
const sessionData = await this.createSession(option, helpScreenId, currentLang);
return sessionData.ablyToken;
}
catch (error) {
console.error('Error refreshing Ably token:', error);
throw error;
}
};
}
// Create action handler callback that uses the ActionHandlerService
const actionHandler = onActionReceived ||
((actionType, messageData) => {
this.actionHandlerService.handleAction(actionType, messageData);
});
await ClientAblyService.startConnection(sessionId, ablyToken, onMessageReceived, tenantId, getAblyToken, actionHandler);
}
/**
* Sends a message in an active chat session.
*
* @param sessionId The chat session ID
* @param messageContent The message content to send
* @param currentLang Current language code for API headers
* @throws Error if message sending fails
*/
async sendMessage(sessionId, messageContent, currentLang, attachmentIds) {
const messageDto = {
messageContent,
};
if (attachmentIds && attachmentIds.length > 0) {
messageDto.attachmentIds = attachmentIds;
}
await this.apiService.apiRequest(`Client/ClientChatSession/${sessionId}/send-message`, 'POST', messageDto, {
'Accept-Language': currentLang,
});
}
/**
* Closes a chat session.
*
* @param sessionId The chat session ID to close
* @param currentLang Current language code for API headers
* @returns Promise resolving to the close response
* @throws Error if session closing fails
*/
async closeSession(sessionId, currentLang) {
const response = await this.apiService.apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST', null, {
'Accept-Language': currentLang,
});
return await response.json();
}
/**
* Submits a review for a chat session.
*
* @param sessionId The chat session ID
* @param rating Rating value (1-5)
* @param comment Review comment (10-500 characters)
* @param currentLang Current language code for API headers
* @throws Error if review submission fails
*/
async submitReview(sessionId, rating, comment, currentLang) {
const reviewPayload = {
rating,
comment,
};
await this.apiService.apiRequest(`Client/ClientChatSession/${sessionId}/review`, 'POST', reviewPayload, {
'Accept-Language': currentLang,
});
}
/**
* Stops the Ably connection.
*/
async stopConnection() {
await ClientAblyService.stopConnection();
}
/**
* Checks if Ably connection is active.
*
* @returns True if connection is active, false otherwise
*/
isConnectionActive() {
return ClientAblyService.isConnectionActive();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatSessionService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatSessionService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
// src/app/services/translation.service.ts
/**
* Service for managing translations and language switching.
*
* Supports multiple languages (currently English and Arabic) with RTL support.
* Provides reactive language changes through Observable pattern.
*
* @publicApi
*/
class TranslationService {
translations = {
en: {
ChatIntroMessage: 'Chat with BabylAI 🚀',
BabylaiTitle: 'BabylAI',
BabylaiDescription: "Hey there! 👋 I'm BabylAI, here to assist you.",
ChatNow: 'Chat Now',
TryBableAI: 'Try BabylAI for Free 🎉',
ContactUs: "Contact us, Let's Talk! 💬",
HelpCenter: 'Help Center',
BabylAI: 'BabylAI',
ChatPlaceholder: 'Type your message...',
PoweredByBabylAI: 'Powered by',
EndChat: 'End Chat',
LeavingDialogTitle: 'Leaving so soon? 👋',
LeavingDialogBody: "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
StartNewChatDialogTitle: 'End and Start New Chat',
StartNewChatDialogBody: 'Are you sure you want to end the current conversation and start a new one?',
ReviewDialogTitle: "We'd Love Your Feedback!",
ReviewDialogDescription: 'Your opinion helps us improve and deliver better support. Please rate your experience with our service and let us know how we did.',
ReviewDialogRatingLabel: 'Rating:',
ReviewDialogCommentLabel: 'Awesome! We’re glad you enjoyed chatting with us. Could you rate your overall experience to help us keep it that way?',
ReviewDialogCommentPlaceholder: 'Write your comment here...',
ReviewDialogSubmitButton: 'Submit Review',
ReviewDialogSkipButton: 'Skip',
Confirm: 'Confirm',
Cancel: 'Cancel',
Close: 'Close',
Back: 'Back',
title: 'Help Center',
ErrorFetchingHelpScreen: 'Failed to load help screen. Please try again.',
ErrorSendingMessage: 'Failed to send the message. Please try again.',
ErrorStartingChat: 'Failed to start chat. Please try again.',
ErrorEndingChat: 'Failed to end chat. Please try again.',
ErrorSubmittingReview: 'Failed to submit review. Please try again.',
ErrorClosingChat: 'Failed to close chat session.',
ErrorCreatingSession: 'Failed to create chat session. Please try again.',
ErrorNetworkFailure: 'Network error. Please check your connection and try again.',
ErrorUnknown: 'An unexpected error occurred. Please try again.',
ErrorMessageTooLong: 'Message is too long. Maximum 5000 characters allowed.',
ErrorMessageEmpty: 'Message cannot be empty.',
CloseChat: 'Close Chat',
Continue: 'Continue',
},
ar: {
ChatIntroMessage: 'دردش مع BabylAI 🚀',
BabylaiTitle: 'BabylAI',
BabylaiDescription: 'مرحبا! 👋 أنا BabylAI، هنا لتساعدك.',
ChatNow: 'دعنا نتحدث',
TryBableAI: 'جرب BabylAI مجانا 🎉',
ContactUs: 'تواصل معنا, دعنا نتحدث! 💬',
HelpCenter: 'مركز المساعدة',
BabylAI: 'BabylAI',
ChatPlaceholder: 'اكتب رسالتك...',
PoweredByBabylAI: 'مدعوم من',
EndChat: 'إنهاء الدردشة',
LeavingDialogTitle: 'هل تغادر بالفعل؟ 👋',
LeavingDialogBody: 'لا تقلق، يمكنك العودة في أي وقت. نحن دائماً هنا إذا كنت بحاجة إلى مساعدة أو لديك أسئلة.',
StartNewChatDialogTitle: 'إنهاء وبدء دردشة جديدة',
StartNewChatDialogBody: 'هل أنت متأكد من أنك تريد إنهاء المحادثة الحالية وبدء محادثة جديدة؟',
ReviewDialogTitle: 'كيف كانت تجربتك معنا؟',
ReviewDialogDescription: 'نقدر ملاحظاتك! يرجى قضاء لحظة لتقييم تجربتك ومشاركة أفكارك في قسم التعليقات أدناه. تقييمك يساعدنا في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مدروسة. شكراً لك!',
ReviewDialogRatingLabel: 'التقييم:',
ReviewDialogCommentLabel: 'شكراً لك! يرجى قضاء لحظة لتقييم تجربتك ومشاركة أفكارك في قسم التعليقات أدناه. تقييمك يساعدنا في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مدروسة.',
ReviewDialogCommentPlaceholder: 'اكتب تعليقك هنا...',
ReviewDialogSubmitButton: 'إرسال التقييم',
ReviewDialogSkipButton: 'تخطي',
Confirm: 'تأكيد',
Cancel: 'إلغاء',
Close: 'إغلاق',
Back: 'رجوع',
title: 'مركز المساعدة',
ErrorFetchingHelpScreen: 'فشل في تحميل شاشة المساعدة. يرجى المحاولة مرة أخرى.',
ErrorSendingMessage: 'لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
ErrorStartingChat: 'فشل في بدء المحادثة. يرجى المحاولة مرة أخرى.',
ErrorEndingChat: 'فشل في إنهاء المحادثة. يرجى المحاولة مرة أخرى.',
ErrorSubmittingReview: 'فشل في إرسال التقييم. يرجى المحاولة مرة أخرى.',
ErrorClosingChat: 'فشل في إغلاق جلسة الدردشة.',
ErrorCreatingSession: 'فشل في إنشاء جلسة الدردشة. يرجى المحاولة مرة أخرى.',
ErrorNetworkFailure: 'خطأ في الشبكة. يرجى التحقق من الاتصال والمحاولة مرة أخرى.',
ErrorUnknown: 'حدث خطأ غير متوقع. يرجى المحاولة مرة أخرى.',
ErrorMessageTooLong: 'الرسالة طويلة جداً. الحد الأقصى 5000 حرف.',
ErrorMessageEmpty: 'لا يمكن أن تكون الرسالة فارغة.',
CloseChat: 'إغلاق الدردشة',
Continue: 'متابعة',
},
};
_currentLang = new BehaviorSubject('en');
currentLang = this._currentLang.asObservable();
/**
* Translates a translation key to the current language.
*
* @param key Translation key to look up
* @returns Translated string in the current language, or the key itself if translation not found
*
* @example
* ```typescript
* const message = translationService.translate('ChatNow');
* // Returns 'Let\'s Chat' in English or 'دعنا نتحدث' in Arabic
* ```
*/
translate(key) {
const lang = this._currentLang.value;
return this.translations[lang][key] || key;
}
/**
* Sets the current language for translations.
*
* @param lang Language code ('en' or 'ar')
*
* @example
* ```typescript
* translationService.setLanguage('ar'); // Switch to Arabic
* ```
*/
setLanguage(lang) {
this._currentLang.next(lang);
}
/**
* Gets the current language code.
*
* @returns Current language code ('en' or 'ar')
*/
getCurrentLang() {
return this._currentLang.value;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TranslationService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TranslationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
// src/app/language.service.ts
/**
* Service for managing language switching.
*
* Provides a simplified interface for switching between supported languages.
* This service wraps TranslationService for easier language management.
*
* @publicApi
*/
class LanguageService {
translationService = inject(TranslationService);
/**
* Switches the application language.
*
* @param language Language code to switch to ('en' or 'ar')
*
* @example
* ```typescript
* languageService.switchLanguage('ar'); // Switch to Arabic
* ```
*/
switchLanguage(language) {
this.translationService.setLanguage(language);
}
/**
* Gets the current application language.
*
* @returns Current language code ('en' or 'ar')
*/
getCurrentLang() {
return this.translationService.getCurrentLang();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LanguageService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LanguageService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class FileUploadService {
http = inject(HttpClient);
apiService = inject(ApiService);
languageService = inject(LanguageService);
/**
* Get presigned upload URL from the API
*/
presignUpload(chatSessionId, file) {
const request = {
name: file.name,
contentType: file.type,
sizeBytes: file.size,
pathData: {
type: 1,
chatSessionId,
},
};
return from(this.apiService.apiRequest('NewFile/presign-upload', 'POST', request, {
'Accept-Language': this.languageService.getCurrentLang(),
})).pipe(switchMap(async (response) => await response.json()), map((data) => data), catchError((error) => {
console.error('Error getting presigned upload URL:', error);
return throwError(() => error);
}));
}
/**
* Upload file to S3 using presigned URL
* Returns Observable with progress events
*/
uploadToS3(uploadUrl, file) {
const headers = new HttpHeaders({
'Content-Type': file.type,
});
return this.http
.put(uploadUrl, file, {
headers,
reportProgress: true,
observe: 'events',
})
.pipe(catchError((error) => {
if (error.status === 0) {
console.error('CORS error - S3 bucket needs CORS configuration', error);
}
return throwError(() => error);
}));
}
/**
* Get presigned download URL for a file
*/
presignDownload(fileId) {
return from(this.apiService.apiRequest(`NewFile/${fileId}/presign-download`, 'GET', null, {
'Accept-Language': this.languageService.getCurrentLang(),
})).pipe(switchMap(async (response) => await response.json()), map((data) => data), catchError((error) => {
console.error(`Failed to get download URL for ${fileId}`, error);
return throwError(() => error);
}));
}
/**
* Upload multiple files in parallel
* Returns array of upload results
*/
uploadFiles(chatSessionId, files) {
if (files.length === 0) {
return new Observable((observer) => {
observer.next([]);
observer.complete();
});
}
// Upload files in parallel
const uploadObservables = files.map((file) => this.uploadSingleFile(chatSessionId, file));
// Use forkJoin to wait for all uploads to complete
return forkJoin(uploadObservables);
}
/**
* Upload a single file
*/
uploadSingleFile(chatSessionId, file) {
return this.presignUpload(chatSessionId, file).pipe(switchMap((presignResponse) => this.uploadToS3(presignResponse.uploadUrl, file).pipe(
// Filter to get only the final response event
filter((event) => event.type === HttpEventType.Response), map((event) => {
if (event.status === 200 || event.status === 204) {
return {
fileId: presignResponse.id,
success: true,
};
}
return {
fileId: presignResponse.id,
success: false,
error: `Upload failed with status ${event.status}`,
};
}), catchError((error) => {
return new Observable((observer) => {
observer.next({
fileId: presignResponse.id,
success: false,
error: error.message || 'Upload failed',
});
observer.complete();
});
}))), catchError((error) => {
return new Observable((observer) => {
observer.next({
fileId: '',
success: false,
error: error.message || 'Failed to get presigned URL',
});
observer.complete();
});
}));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class ThemeService {
primaryColor = '#ad49e1';
logoUrl = '';
isDarkMode = signal(false, ...(ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []));
mediaQuery;
mediaQueryListener;
constructor() {
this.initializeDarkModeDetection();
}
/**
* Initialize dark mode detection based on browser preferences
*/
initializeDarkModeDetection() {
// Check initial preference
this.updateDarkModeState();
// Listen for changes in color scheme preference
if (typeof window !== 'undefined' && window.matchMedia) {
this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
// Store listener reference for cleanup
this.mediaQueryListener = () => {
this.updateDarkModeState();
};
// Add listener for changes
this.mediaQuery.addEventListener('change', this.mediaQueryListener);
}
}
/**
* Cleanup method to remove event listeners
* Should be called when service is no longer needed (e.g., in tests or if service scope changes)
*/
cleanup() {
if (this.mediaQuery && this.mediaQueryListener) {
this.mediaQuery.removeEventListener('change', this.mediaQueryListener);
this.mediaQuery = undefined;
this.mediaQueryListener = undefined;
}
}
/**
* Update dark mode state based on current browser preference
*/
updateDarkModeState() {
if (typeof window !== 'undefined' && window.matchMedia) {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
this.isDarkMode.set(isDark);
}
}
/**
* Get current dark mode state
*/
getDarkModeState() {
return this.isDarkMode.asReadonly();
}
/**
* Check if dark mode is currently active
*/
isDarkModeActive() {
return this.isDarkMode();
}
setPrimaryColor(color) {
this.primaryColor = color;
this.updateCSSVariables();
}
setLogoUrl(url) {
this.logoUrl = url;
}
getPrimaryColor() {
return this.primaryColor;
}
getLogoUrl() {
return this.logoUrl;
}
updateCSSVariables() {
const root = document.documentElement;
// Generate color variations based on the primary color
const colorVariations = this.generateColorVariations(this.primaryColor);
// Set CSS custom properties
root.style.setProperty('--babylai-primary-color', this.primaryColor);
root.style.setProperty('--babylai-primary-color-100', colorVariations[100]);
root.style.setProperty('--babylai-primary-color-200', colorVariations[200]);
root.style.setProperty('--babylai-primary-color-300', colorVariations[300]);
root.style.setProperty('--babylai-primary-color-400', colorVariations[400]);
root.style.setProperty('--babylai-primary-color-500', colorVariations[500]);
root.style.setProperty('--babylai-primary-color-600', colorVariations[600]);
root.style.setProperty('--babylai-primary-color-700', colorVariations[700]);
root.style.setProperty('--babylai-primary-color-800', colorVariations[800]);
root.style.setProperty('--babylai-primary-color-900', colorVariations[900]);
root.style.setProperty('--babylai-primary-color-950', colorVariations[950]);
}
generateColorVariations(baseColor) {
// Generate variations by adjusting lightness
const variations = {};
variations[100] = this.lightenColor(baseColor, 0.85);
variations[200] = this.lightenColor(baseColor, 0.65);
variations[300] = this.lightenColor(baseColor, 0.45);
variations[400] = this.lightenColor(baseColor, 0.25);
variations[500] = baseColor; // Base color
variations[600] = this.darkenColor(baseColor, 0.35);
variations[700] = this.darkenColor(baseColor, 0.55);
variations[800] = this.darkenColor(baseColor, 0.75);
variations[900] = this.darkenColor(baseColor, 0.85);
variations[950] = this.darkenColor(baseColor, 0.92);
return variations;
}
/**
* Lighten a color by a percentage
*/
lightenColor(color, amount) {
const hex = color.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// Use HSL-like approach for more natural lightening
const newR = Math.round(r + (255 - r) * amount);
const newG = Math.round(g + (255 - g) * amount);
const newB = Math.round(b + (255 - b) * amount);
return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
}
/**
* Darken a color by a percentage
*/
darkenColor(color, amount) {
const hex = color.replace('#', '');
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// Use HSL-like approach for more natural darkening
const newR = Math.round(r * (1 - amount));
const newG = Math.round(g * (1 - amount));
const newB = Math.round(b * (1 - amount));
return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
}
initializeTheme(primaryColor, logoUrl) {
this.setPrimaryColor(primaryColor);
this.setLogoUrl(logoUrl);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [] });
class ArrowAnimationComponent {
showArrowAnimation = input(false, ...(ngDevMode ? [{ debugName: "showArrowAnimation" }] : /* istanbul ignore next */ []));
isPopupOpen = input(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
messageLabel = input(null, ...(ngDevMode ? [{ debugName: "messageLabel" }] : /* istanbul ignore next */ []));
closeArrowAnimation = output();
handleCloseArrowAnimation() {
this.closeArrowAnimation.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ArrowAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ArrowAnimationComponent, isStandalone: true, selector: "app-arrow-animation", inputs: { showArrowAnimation: { classPropertyName: "showArrowAnimation", publicName: "showArrowAnimation", isSignal: true, isRequired: false, transformFunction: null }, isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null }, messageLabel: { classPropertyName: "messageLabel", publicName: "messageLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeArrowAnimation: "closeArrowAnimation" }, ngImport: i0, template: "@if (showArrowAnimation() && !isPopupOpen()) {\n<div class=\"babylai:fixed babylai:bottom-20 babylai:right-6 babylai:z-9997 animate-float\">\n <div class=\"babylai:relative babylai:bg-primary babylai:rounded-full babylai:mb-4 babylai:shadow-lg babylai:px-4 babylai:py-3 babylai:max-w-xs\">\n <p class=\"babylai:text-xs babylai:mb-0 babylai:text-white babylai:max-w-40\">\n {{ messageLabel() || \"Need assistance Or You want to try the Product? Click here\" }}\n </p>\n <button \n class=\"babylai:absolute babylai:-top-2 babylai:right-0 babylai:w-5 babylai:h-5 babylai:cursor-pointer babylai:p-1.5 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:hover:bg-secondary babylai:text-card-foreground babylai:transition-colors babylai:bg-card babylai:shadow-lg babylai:border babylai:border-black-white-200\" \n (click)=\"handleCloseArrowAnimation()\"\n type=\"button\"\n [attr.aria-label]=\"'Close'\"\n >\n <svg class=\"babylai:w-3 babylai:h-3\" viewBox=\"0 0 12 12\">\n <path\n d=\"M1 1L11 11M1 11L11 1\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </svg>\n </button>\n <div class=\"babylai:absolute babylai:bottom-[-8px] babylai:right-6 babylai:w-0 babylai:h-0 babylai:border-l-8 babylai:border-r-8 babylai:border-t-8 babylai:border-l-transparent babylai:border-r-transparent babylai:border-t-primary\"></div>\n </div>\n</div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ArrowAnimationComponent, decorators: [{
type: Component,
args: [{ selector: 'app-arrow-animation', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showArrowAnimation() && !isPopupOpen()) {\n<div class=\"babylai:fixed babylai:bottom-20 babylai:right-6 babylai:z-9997 animate-float\">\n <div class=\"babylai:relative babylai:bg-primary babylai:rounded-full babylai:mb-4 babylai:shadow-lg babylai:px-4 babylai:py-3 babylai:max-w-xs\">\n <p class=\"babylai:text-xs babylai:mb-0 babylai:text-white babylai:max-w-40\">\n {{ messageLabel() || \"Need assistance Or You want to try the Product? Click here\" }}\n </p>\n <button \n class=\"babylai:absolute babylai:-top-2 babylai:right-0 babylai:w-5 babylai:h-5 babylai:cursor-pointer babylai:p-1.5 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:hover:bg-secondary babylai:text-card-foreground babylai:transition-colors babylai:bg-card babylai:shadow-lg babylai:border babylai:border-black-white-200\" \n (click)=\"handleCloseArrowAnimation()\"\n type=\"button\"\n [attr.aria-label]=\"'Close'\"\n >\n <svg class=\"babylai:w-3 babylai:h-3\" viewBox=\"0 0 12 12\">\n <path\n d=\"M1 1L11 11M1 11L11 1\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </svg>\n </button>\n <div class=\"babylai:absolute babylai:bottom-[-8px] babylai:right-6 babylai:w-0 babylai:h-0 babylai:border-l-8 babylai:border-r-8 babylai:border-t-8 babylai:border-l-transparent babylai:border-r-transparent babylai:border-t-primary\"></div>\n </div>\n</div>\n}\n" }]
}], propDecorators: { showArrowAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrowAnimation", required: false }] }], isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], messageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageLabel", required: false }] }], closeArrowAnimation: [{ type: i0.Output, args: ["closeArrowAnimation"] }] } });
// src/app/pipes/translate.pipe.ts
/**
* Angular pipe for translating keys in templates.
*
* Usage in templates:
* ```html
* {{ 'ChatNow' | translate }}
* ```
*
* @publicApi
*/
class TranslatePipe {
translationService = inject(TranslationService);
/**
* Transforms a translation key into the translated string for the current language.
*
* @param key Translation key to look up
* @returns Translated string in the current language
*/
transform(key) {
return this.translationService.translate(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TranslatePipe, decorators: [{
type: Pipe,
args: [{
name: 'translate',
standalone: true,
}]
}] });
class ButtonComponent {
variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
onClick = output();
getButtonClasses = computed(() => {
const classes = [
'babylai:border babylai:disabled:bg-black-white-300 babylai:cursor-pointer babylai:text-xl! babylai:transition-all babylai:w-full babylai:disabled:border-black-white-300 babylai:disabled:cursor-not-allowed babylai:disabled:text-white babylai:duration-200 babylai:ease-out babylai:flex babylai:gap-1 babylai:items-center babylai:justify-center babylai:p-3 babylai:relative babylai:rounded-2xl',
];
// Add variant-specific classes
if (this.variant() === 'default') {
classes.push('babylai:bg-primary babylai:border-primary babylai:text-white babylai:hover:bg-primary-600 babylai:hover:border-primary-600');
}
else if (this.variant() === 'outline') {
classes.push('babylai:bg-transparent babylai:border-primary babylai:text-primary babylai:hover:bg-primary-100 babylai:hover:border-primary-200');
}
else if (this.variant() === 'icon-bg') {
if (this.className().includes('babylai:white-bg')) {
classes.push('babylai:bg-white');
}
else if (this.className().includes('babylai:light-bg')) {
// Will be handled by CSS variables
}
if (this.size() === 'small') {
classes.push('babylai:p-2', 'babylai:w-7', 'babylai:h-7');
}
else {
classes.push('babylai:p-3');
}
}
else if (this.variant() === 'icon-only') {
classes.push('babylai:bg-transparent', 'babylai:border-none', 'babylai:p-1', 'babylai:flex', 'babylai:items-center', 'babylai:justify-center');
}
// Add full width class if needed
if (this.fullWidth()) {
classes.push('babylai:w-full', 'babylai:flex');
}
// Add custom classes
if (this.className()) {
classes.push(this.className());
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "getButtonClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [class]=\"getButtonClasses()\"\n (click)=\"onClick.emit($event)\"\n dir=\"auto\"\n>\n <ng-content></ng-content>\n</button>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n [class]=\"getButtonClasses()\"\n (click)=\"onClick.emit($event)\"\n dir=\"auto\"\n>\n <ng-content></ng-content>\n</button>\n\n" }]
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
class IconComponent {
// Icon name from Solar icon set (e.g., 'solar:home-bold', 'solar:chat-round-bold')
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
// Size of the icon (can be a number or string like '24px', '1em', etc.)
size = input('1.2em', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
// Color of the icon (CSS color value)
color = input('currentColor', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
// Additional CSS classes
className = input('babylai:flex', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
// Whether the icon should be inline
inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
// Flip the icon horizontally
flip = input(undefined, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
// Rotate the icon (degrees or '90deg', '180deg', etc.)
rotate = input(undefined, ...(ngDevMode ? [{ debugName: "rotate" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<iconify-icon\n [icon]=\"name()\"\n [style.width]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n [style.height]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n [style.font-size]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n [style.color]=\"color()\"\n [class]=\"className()\"\n [attr.inline]=\"inline() ? '' : null\"\n [attr.flip]=\"flip() || null\"\n [attr.rotate]=\"rotate() ? (typeof rotate() === 'number' ? rotate() + 'deg' : rotate()) : null\"\n></iconify-icon>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'app-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<iconify-icon\n [icon]=\"name()\"\n [style.width]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n [style.height]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n [style.font-size]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n [style.color]=\"color()\"\n [class]=\"className()\"\n [attr.inline]=\"inline() ? '' : null\"\n [attr.flip]=\"flip() || null\"\n [attr.rotate]=\"rotate() ? (typeof rotate() === 'number' ? rotate() + 'deg' : rotate()) : null\"\n></iconify-icon>\n" }]
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }] } });
class ChatActionButtonsComponent {
selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
closeChat = output();
continueChat = output();
handleCloseChat() {
const option = this.selectedOption();
if (option) {
this.closeChat.emit(option);
}
}
handleContinueChat() {
this.continueChat.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatActionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ChatActionButtonsComponent, isStandalone: true, selector: "app-chat-action-buttons", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeChat: "closeChat", continueChat: "continueChat" }, ngImport: i0, template: "<section class=\"babylai:flex babylai:justify-between babylai:gap-3 babylai:px-4 babylai:py-6 babylai:absolute babylai:left-0 babylai:right-0 babylai:bottom-11 babylai:z-20 babylai:bg-linear-to-t babylai:from-card babylai:to-transparent babylai:from-[28.32%] babylai:to-[112.59%]\">\n <app-button\n variant=\"outline\"\n [fullWidth]=\"true\"\n (onClick)=\"handleCloseChat()\"\n class=\"babylai:w-full\"\n >\n {{ \"CloseChat\" | translate }}\n </app-button>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n (onClick)=\"handleContinueChat()\"\n class=\"babylai:w-full\"\n >\n {{ \"Continue\" | translate }}\n <app-icon name=\"solar:plain-2-bold-duotone\" class=\"babylai:flex\" size=\"24px\" />\n </app-button>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatActionButtonsComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-action-buttons', standalone: true, imports: [CommonModule, TranslatePipe, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"babylai:flex babylai:justify-between babylai:gap-3 babylai:px-4 babylai:py-6 babylai:absolute babylai:left-0 babylai:right-0 babylai:bottom-11 babylai:z-20 babylai:bg-linear-to-t babylai:from-card babylai:to-transparent babylai:from-[28.32%] babylai:to-[112.59%]\">\n <app-button\n variant=\"outline\"\n [fullWidth]=\"true\"\n (onClick)=\"handleCloseChat()\"\n class=\"babylai:w-full\"\n >\n {{ \"CloseChat\" | translate }}\n </app-button>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n (onClick)=\"handleContinueChat()\"\n class=\"babylai:w-full\"\n >\n {{ \"Continue\" | translate }}\n <app-icon name=\"solar:plain-2-bold-duotone\" class=\"babylai:flex\" size=\"24px\" />\n </app-button>\n</section>\n" }]
}], propDecorators: { selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], closeChat: [{ type: i0.Output, args: ["closeChat"] }], continueChat: [{ type: i0.Output, args: ["continueChat"] }] } });
class ChatAvatarComponent {
senderType = input(1, ...(ngDevMode ? [{ debugName: "senderType" }] : /* istanbul ignore next */ []));
needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : /* istanbul ignore next */ []));
isHidden = input(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChatAvatarComponent, isStandalone: true, selector: "app-chat-avatar", inputs: { senderType: { classPropertyName: "senderType", publicName: "senderType", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class.babylai:invisible]=\"isHidden()\"\n role=\"img\"\n [attr.aria-label]=\"\n senderType() === 3\n ? 'Assistant avatar'\n : needsAgent() || senderType() === 2\n ? 'Agent avatar'\n : 'User avatar'\n \"\n>\n @if (senderType() === 3) {\n <span\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:w-8 babylai:h-8 babylai:rounded-full babylai:p-2 babylai:bg-primary babylai:text-primary\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"13\"\n height=\"13\"\n viewBox=\"0 0 13 13\"\n fill=\"currentColor\"\n >\n <path\n d=\"M0 3.32671C0 1.48942 1.48942 0 3.32672 0H8.87124C10.7085 0 12.198 1.48942 12.198 3.32672V8.87124C12.198 10.7085 10.7085 12.198 8.87124 12.198H0V3.32671Z\"\n fill=\"white\"\n />\n <path\n d=\"M3.84993 4.07931C3.85024 4.07821 3.85039 4.07767 3.85047 4.07741C3.89874 3.90812 4.13867 3.90812 4.18695 4.07741C4.18702 4.07767 4.18718 4.07821 4.18749 4.07931C4.1883 4.0822 4.18871 4.08365 4.1891 4.085C4.41343 4.87717 5.03256 5.49631 5.82473 5.72064C5.82608 5.72102 5.82753 5.72143 5.83042 5.72224C5.83152 5.72255 5.83207 5.72271 5.83232 5.72278C6.00162 5.77106 6.00162 6.01099 5.83232 6.05927C5.83207 6.05934 5.83152 6.05949 5.83042 6.0598C5.82753 6.06062 5.82608 6.06103 5.82473 6.06141C5.03256 6.28574 4.41343 6.90488 4.1891 7.69704C4.18871 7.6984 4.1883 7.69984 4.18749 7.70273C4.18718 7.70383 4.18702 7.70438 4.18695 7.70463C4.13867 7.87393 3.89874 7.87393 3.85047 7.70463C3.85039 7.70438 3.85024 7.70383 3.84993 7.70273C3.84911 7.69984 3.84871 7.6984 3.84832 7.69704C3.62399 6.90488 3.00486 6.28574 2.21269 6.06141C2.21133 6.06103 2.20989 6.06062 2.207 6.0598C2.2059 6.05949 2.20535 6.05934 2.2051 6.05927C2.0358 6.01099 2.0358 5.77106 2.2051 5.72278C2.20535 5.72271 2.2059 5.72255 2.207 5.72224C2.20989 5.72143 2.21133 5.72102 2.21269 5.72064C3.00486 5.49631 3.62399 4.87717 3.84832 4.085C3.84871 4.08365 3.84911 4.0822 3.84993 4.07931Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.84056 5.85655C9.84056 6.6795 9.18894 7.34664 8.38513 7.34664C7.58131 7.34664 6.92969 6.6795 6.92969 5.85655C6.92969 5.03359 7.58131 4.36646 8.38513 4.36646C9.18894 4.36646 9.84056 5.03359 9.84056 5.85655Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n } @else if (needsAgent() || senderType() === 2) {\n <span\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:w-8 babylai:h-8 babylai:rounded-full babylai:p-2 babylai:bg-black-white-50 babylai:text-primary\"\n >\n <app-icon name=\"solar:user-bold\" class=\"babylai:flex\" />\n </span>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatAvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-avatar', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.babylai:invisible]=\"isHidden()\"\n role=\"img\"\n [attr.aria-label]=\"\n senderType() === 3\n ? 'Assistant avatar'\n : needsAgent() || senderType() === 2\n ? 'Agent avatar'\n : 'User avatar'\n \"\n>\n @if (senderType() === 3) {\n <span\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:w-8 babylai:h-8 babylai:rounded-full babylai:p-2 babylai:bg-primary babylai:text-primary\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"13\"\n height=\"13\"\n viewBox=\"0 0 13 13\"\n fill=\"currentColor\"\n >\n <path\n d=\"M0 3.32671C0 1.48942 1.48942 0 3.32672 0H8.87124C10.7085 0 12.198 1.48942 12.198 3.32672V8.87124C12.198 10.7085 10.7085 12.198 8.87124 12.198H0V3.32671Z\"\n fill=\"white\"\n />\n <path\n d=\"M3.84993 4.07931C3.85024 4.07821 3.85039 4.07767 3.85047 4.07741C3.89874 3.90812 4.13867 3.90812 4.18695 4.07741C4.18702 4.07767 4.18718 4.07821 4.18749 4.07931C4.1883 4.0822 4.18871 4.08365 4.1891 4.085C4.41343 4.87717 5.03256 5.49631 5.82473 5.72064C5.82608 5.72102 5.82753 5.72143 5.83042 5.72224C5.83152 5.72255 5.83207 5.72271 5.83232 5.72278C6.00162 5.77106 6.00162 6.01099 5.83232 6.05927C5.83207 6.05934 5.83152 6.05949 5.83042 6.0598C5.82753 6.06062 5.82608 6.06103 5.82473 6.06141C5.03256 6.28574 4.41343 6.90488 4.1891 7.69704C4.18871 7.6984 4.1883 7.69984 4.18749 7.70273C4.18718 7.70383 4.18702 7.70438 4.18695 7.70463C4.13867 7.87393 3.89874 7.87393 3.85047 7.70463C3.85039 7.70438 3.85024 7.70383 3.84993 7.70273C3.84911 7.69984 3.84871 7.6984 3.84832 7.69704C3.62399 6.90488 3.00486 6.28574 2.21269 6.06141C2.21133 6.06103 2.20989 6.06062 2.207 6.0598C2.2059 6.05949 2.20535 6.05934 2.2051 6.05927C2.0358 6.01099 2.0358 5.77106 2.2051 5.72278C2.20535 5.72271 2.2059 5.72255 2.207 5.72224C2.20989 5.72143 2.21133 5.72102 2.21269 5.72064C3.00486 5.49631 3.62399 4.87717 3.84832 4.085C3.84871 4.08365 3.84911 4.0822 3.84993 4.07931Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M9.84056 5.85655C9.84056 6.6795 9.18894 7.34664 8.38513 7.34664C7.58131 7.34664 6.92969 6.6795 6.92969 5.85655C6.92969 5.03359 7.58131 4.36646 8.38513 4.36646C9.18894 4.36646 9.84056 5.03359 9.84056 5.85655Z\"\n fill=\"currentColor\"\n />\n </svg>\n </span>\n } @else if (needsAgent() || senderType() === 2) {\n <span\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:w-8 babylai:h-8 babylai:rounded-full babylai:p-2 babylai:bg-black-white-50 babylai:text-primary\"\n >\n <app-icon name=\"solar:user-bold\" class=\"babylai:flex\" />\n </span>\n }\n</div>\n" }]
}], propDecorators: { senderType: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderType", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }] } });
class ImageAttachmentComponent {
fileId = '';
enablePreview = true;
className = '';
imageClick = new EventEmitter();
fileUploadService = inject(FileUploadService);
imageUrl = signal(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
ngOnInit() {
if (this.fileId) {
const isDirectUrl = this.fileId.startsWith('http://') || this.fileId.startsWith('https://');
if (isDirectUrl) {
this.imageUrl.set(this.fileId);
this.isLoading.set(false);
}
else {
this.loadImage();
}
}
}
ngOnDestroy() {
// Clean up object URL if created
const url = this.imageUrl();
if (url && url.startsWith('blob:')) {
URL.revokeObjectURL(url);
}
}
loadImage() {
this.isLoading.set(true);
this.hasError.set(false);
this.fileUploadService
.presignDownload(this.fileId)
.pipe(catchError$1((error) => {
console.error('Error loading image:', error);
this.hasError.set(true);
this.isLoading.set(false);
return of(null);
}))
.subscribe((response) => {
if (response?.downloadUrl) {
this.imageUrl.set(response.downloadUrl);
this.isLoading.set(false);
}
else {
this.hasError.set(true);
this.isLoading.set(false);
}
});
}
handleClick() {
if (this.enablePreview && this.imageUrl()) {
this.imageClick.emit();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImageAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ImageAttachmentComponent, isStandalone: true, selector: "app-image-attachment", inputs: { fileId: "fileId", enablePreview: "enablePreview", className: "className" }, outputs: { imageClick: "imageClick" }, ngImport: i0, template: "<div\n class=\"babylai:inline-flex babylai:items-center babylai:justify-center babylai:w-[50px] babylai:h-[50px] babylai:rounded-md babylai:overflow-hidden babylai:shrink-0\"\n [style.background-color]=\"'var(--muted)'\"\n [class]=\"className\"\n (click)=\"handleClick()\"\n [class.babylai:cursor-pointer]=\"enablePreview && imageUrl()\"\n [class.babylai:transition-opacity]=\"enablePreview && imageUrl()\"\n [class.babylai:duration-200]=\"enablePreview && imageUrl()\"\n>\n @if (isLoading()) {\n <div class=\"babylai:text-sm\" [style.color]=\"'var(--muted-foreground)'\">...</div>\n } @else if (hasError()) {\n <div class=\"babylai:text-sm babylai:font-semibold\" [style.color]=\"'var(--destructive)'\">!</div>\n } @else if (imageUrl()) {\n <img\n [src]=\"imageUrl()!\"\n [alt]=\"'Image attachment'\"\n class=\"babylai:w-full babylai:h-full babylai:object-cover babylai:block\"\n [class.babylai:opacity-80]=\"enablePreview\"\n loading=\"lazy\"\n />\n }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImageAttachmentComponent, decorators: [{
type: Component,
args: [{ selector: 'app-image-attachment', standalone: true, imports: [CommonModule], template: "<div\n class=\"babylai:inline-flex babylai:items-center babylai:justify-center babylai:w-[50px] babylai:h-[50px] babylai:rounded-md babylai:overflow-hidden babylai:shrink-0\"\n [style.background-color]=\"'var(--muted)'\"\n [class]=\"className\"\n (click)=\"handleClick()\"\n [class.babylai:cursor-pointer]=\"enablePreview && imageUrl()\"\n [class.babylai:transition-opacity]=\"enablePreview && imageUrl()\"\n [class.babylai:duration-200]=\"enablePreview && imageUrl()\"\n>\n @if (isLoading()) {\n <div class=\"babylai:text-sm\" [style.color]=\"'var(--muted-foreground)'\">...</div>\n } @else if (hasError()) {\n <div class=\"babylai:text-sm babylai:font-semibold\" [style.color]=\"'var(--destructive)'\">!</div>\n } @else if (imageUrl()) {\n <img\n [src]=\"imageUrl()!\"\n [alt]=\"'Image attachment'\"\n class=\"babylai:w-full babylai:h-full babylai:object-cover babylai:block\"\n [class.babylai:opacity-80]=\"enablePreview\"\n loading=\"lazy\"\n />\n }\n</div>\n\n" }]
}], propDecorators: { fileId: [{
type: Input
}], enablePreview: [{
type: Input
}], className: [{
type: Input
}], imageClick: [{
type: Output
}] } });
class ImagePreviewDialogComponent {
imageUrls = input([], ...(ngDevMode ? [{ debugName: "imageUrls" }] : /* istanbul ignore next */ []));
initialIndex = input(0, ...(ngDevMode ? [{ debugName: "initialIndex" }] : /* istanbul ignore next */ []));
isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
close = output();
currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
currentImageUrl = computed(() => {
const index = this.currentIndex();
return this.imageUrls()[index] || null;
}, ...(ngDevMode ? [{ debugName: "currentImageUrl" }] : /* istanbul ignore next */ []));
imageCounter = computed(() => {
return `${this.currentIndex() + 1} / ${this.imageUrls().length}`;
}, ...(ngDevMode ? [{ debugName: "imageCounter" }] : /* istanbul ignore next */ []));
hasMultipleImages = computed(() => this.imageUrls().length > 1, ...(ngDevMode ? [{ debugName: "hasMultipleImages" }] : /* istanbul ignore next */ []));
canGoPrevious = computed(() => this.currentIndex() > 0, ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : /* istanbul ignore next */ []));
canGoNext = computed(() => this.currentIndex() < this.imageUrls().length - 1, ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
ngOnInit() {
this.currentIndex.set(this.initialIndex());
}
ngOnChanges(changes) {
if (changes['initialIndex'] && this.isOpen()) {
this.currentIndex.set(this.initialIndex());
}
if (changes['isOpen'] && this.isOpen()) {
this.currentIndex.set(this.initialIndex());
}
}
handleKeydown(event) {
if (!this.isOpen())
return;
switch (event.key) {
case 'Escape':
this.handleClose();
break;
case 'ArrowLeft':
event.preventDefault();
this.handlePrevious();
break;
case 'ArrowRight':
event.preventDefault();
this.handleNext();
break;
}
}
handleClose() {
this.close.emit();
}
handleBackdropClick(event) {
// Close if clicking on the backdrop (not the image)
if (event.target.classList.contains('image-preview-dialog__backdrop')) {
this.handleClose();
}
}
handlePrevious() {
if (this.canGoPrevious()) {
this.currentIndex.update((index) => index - 1);
}
}
handleNext() {
if (this.canGoNext()) {
this.currentIndex.update((index) => index + 1);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImagePreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ImagePreviewDialogComponent, isStandalone: true, selector: "app-image-preview-dialog", inputs: { imageUrls: { classPropertyName: "imageUrls", publicName: "imageUrls", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"image-preview-dialog__backdrop babylai:fixed babylai:inset-0 babylai:bg-black/90 babylai:flex babylai:items-center babylai:justify-center babylai:z-9999 babylai:p-4\"\n (click)=\"handleBackdropClick($event)\"\n >\n <div class=\"image-preview-dialog__container babylai:relative babylai:w-full babylai:h-full babylai:flex babylai:items-center babylai:justify-center babylai:max-w-[90vw] babylai:max-h-[90vh] babylai:z-1\">\n <button\n class=\"image-preview-dialog__close babylai:absolute babylai:top-4 babylai:right-4 babylai:z-10001 babylai:w-10 babylai:h-10 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:bg-white/10 babylai:border babylai:border-white/20 babylai:text-white babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:pointer-events-auto babylai:hover:bg-white/20 babylai:hover:scale-110\"\n (click)=\"handleClose()\"\n type=\"button\"\n aria-label=\"Close preview\"\n >\n <svg\n class=\"babylai:w-6 babylai:h-6 babylai:pointer-events-none\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18 6L6 18M6 6L18 18\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n @if (hasMultipleImages()) {\n <button\n class=\"babylai:absolute babylai:top-1/2 babylai:-translate-y-1/2 babylai:z-10001 babylai:w-12 babylai:h-12 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:bg-white/10 babylai:border babylai:border-white/20 babylai:text-white babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:pointer-events-auto babylai:left-4\"\n [class.babylai:opacity-30]=\"!canGoPrevious()\"\n [class.babylai:cursor-not-allowed]=\"!canGoPrevious()\"\n (click)=\"handlePrevious()\"\n type=\"button\"\n aria-label=\"Previous image\"\n [disabled]=\"!canGoPrevious()\"\n >\n <svg\n class=\"babylai:w-6 babylai:h-6 babylai:pointer-events-none\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <button\n class=\"babylai:absolute babylai:top-1/2 babylai:-translate-y-1/2 babylai:z-10001 babylai:w-12 babylai:h-12 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:bg-white/10 babylai:border babylai:border-white/20 babylai:text-white babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:pointer-events-auto babylai:right-4\"\n [class.babylai:opacity-30]=\"!canGoNext()\"\n [class.babylai:cursor-not-allowed]=\"!canGoNext()\"\n (click)=\"handleNext()\"\n type=\"button\"\n aria-label=\"Next image\"\n [disabled]=\"!canGoNext()\"\n >\n <svg\n class=\"babylai:w-6 babylai:h-6 babylai:pointer-events-none\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n\n <div class=\"babylai:relative babylai:w-full babylai:h-full babylai:flex babylai:items-center babylai:justify-center babylai:overflow-hidden babylai:z-1\">\n @if (currentImageUrl()) {\n <img\n [src]=\"currentImageUrl()!\"\n [alt]=\"'Image preview'\"\n class=\"babylai:max-w-full babylai:max-h-full babylai:object-contain babylai:rounded-md babylai:pointer-events-none\"\n />\n }\n </div>\n\n @if (hasMultipleImages()) {\n <div class=\"babylai:absolute babylai:bottom-4 babylai:left-1/2 babylai:-translate-x-1/2 babylai:py-2 babylai:px-4 babylai:bg-black/60 babylai:text-white babylai:rounded-full babylai:text-sm babylai:font-medium babylai:z-10001 babylai:pointer-events-none\">\n {{ imageCounter() }}\n </div>\n }\n </div>\n </div>\n}\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'app-image-preview-dialog', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'(document:keydown)': 'handleKeydown($event)',
}, template: "@if (isOpen()) {\n <div\n class=\"image-preview-dialog__backdrop babylai:fixed babylai:inset-0 babylai:bg-black/90 babylai:flex babylai:items-center babylai:justify-center babylai:z-9999 babylai:p-4\"\n (click)=\"handleBackdropClick($event)\"\n >\n <div class=\"image-preview-dialog__container babylai:relative babylai:w-full babylai:h-full babylai:flex babylai:items-center babylai:justify-center babylai:max-w-[90vw] babylai:max-h-[90vh] babylai:z-1\">\n <button\n class=\"image-preview-dialog__close babylai:absolute babylai:top-4 babylai:right-4 babylai:z-10001 babylai:w-10 babylai:h-10 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:bg-white/10 babylai:border babylai:border-white/20 babylai:text-white babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:pointer-events-auto babylai:hover:bg-white/20 babylai:hover:scale-110\"\n (click)=\"handleClose()\"\n type=\"button\"\n aria-label=\"Close preview\"\n >\n <svg\n class=\"babylai:w-6 babylai:h-6 babylai:pointer-events-none\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18 6L6 18M6 6L18 18\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n @if (hasMultipleImages()) {\n <button\n class=\"babylai:absolute babylai:top-1/2 babylai:-translate-y-1/2 babylai:z-10001 babylai:w-12 babylai:h-12 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:bg-white/10 babylai:border babylai:border-white/20 babylai:text-white babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:pointer-events-auto babylai:left-4\"\n [class.babylai:opacity-30]=\"!canGoPrevious()\"\n [class.babylai:cursor-not-allowed]=\"!canGoPrevious()\"\n (click)=\"handlePrevious()\"\n type=\"button\"\n aria-label=\"Previous image\"\n [disabled]=\"!canGoPrevious()\"\n >\n <svg\n class=\"babylai:w-6 babylai:h-6 babylai:pointer-events-none\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15 18L9 12L15 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <button\n class=\"babylai:absolute babylai:top-1/2 babylai:-translate-y-1/2 babylai:z-10001 babylai:w-12 babylai:h-12 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full babylai:bg-white/10 babylai:border babylai:border-white/20 babylai:text-white babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:pointer-events-auto babylai:right-4\"\n [class.babylai:opacity-30]=\"!canGoNext()\"\n [class.babylai:cursor-not-allowed]=\"!canGoNext()\"\n (click)=\"handleNext()\"\n type=\"button\"\n aria-label=\"Next image\"\n [disabled]=\"!canGoNext()\"\n >\n <svg\n class=\"babylai:w-6 babylai:h-6 babylai:pointer-events-none\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9 18L15 12L9 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n\n <div class=\"babylai:relative babylai:w-full babylai:h-full babylai:flex babylai:items-center babylai:justify-center babylai:overflow-hidden babylai:z-1\">\n @if (currentImageUrl()) {\n <img\n [src]=\"currentImageUrl()!\"\n [alt]=\"'Image preview'\"\n class=\"babylai:max-w-full babylai:max-h-full babylai:object-contain babylai:rounded-md babylai:pointer-events-none\"\n />\n }\n </div>\n\n @if (hasMultipleImages()) {\n <div class=\"babylai:absolute babylai:bottom-4 babylai:left-1/2 babylai:-translate-x-1/2 babylai:py-2 babylai:px-4 babylai:bg-black/60 babylai:text-white babylai:rounded-full babylai:text-sm babylai:font-medium babylai:z-10001 babylai:pointer-events-none\">\n {{ imageCounter() }}\n </div>\n }\n </div>\n </div>\n}\n\n" }]
}], propDecorators: { imageUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrls", required: false }] }], initialIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIndex", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
// Configure marked with safe options
marked.setOptions({
breaks: true,
gfm: true,
silent: false, // Log warnings for debugging
// Note: We don't use marked's sanitize option as we handle sanitization with Angular's DomSanitizer
});
class MarkdownRendererComponent {
content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
cssClass = input('babylai:m-0 babylai:leading-snug babylai:text-sm babylai:font-sans babylai:wrap-break-word babylai:text-start', ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
markdownContainer;
sanitizer = inject(DomSanitizer);
sanitizedContent = signal('', ...(ngDevMode ? [{ debugName: "sanitizedContent" }] : /* istanbul ignore next */ []));
contentEffectRef;
constructor() {
// Effect to re-render content when input changes
this.contentEffectRef = effect(() => {
const contentValue = this.content();
// Track inline() to re-render when it changes
void this.inline();
if (contentValue) {
this.renderContent();
}
else {
this.sanitizedContent.set('');
}
}, ...(ngDevMode ? [{ debugName: "contentEffectRef" }] : /* istanbul ignore next */ []));
}
ngOnInit() {
this.renderContent();
}
ngAfterViewInit() {
this.highlightCode();
// Lazy load Prism.js if code blocks are detected
this.loadPrismIfNeeded();
}
/**
* Lazy loads Prism.js syntax highlighter only if code blocks are detected
*/
async loadPrismIfNeeded() {
// Check if Prism is already loaded
if (typeof window !== 'undefined' && window.Prism) {
return;
}
// Check if content contains code blocks (```)
const contentValue = this.content();
if (!contentValue || !contentValue.includes('```')) {
return;
}
try {
// Dynamically import Prism.js and its commonly used components
await Promise.all([import('prismjs')]);
// Re-highlight after loading
this.highlightCode();
}
catch (error) {
console.warn('Failed to load Prism.js:', error);
}
}
renderContent() {
const contentValue = this.content();
if (!contentValue) {
this.sanitizedContent.set('');
return;
}
try {
// Parse markdown to HTML
// Use parseInline() for inline content (titles, labels, etc.) and parse() for block-level content
const html = this.inline()
? marked.parseInline(contentValue)
: marked.parse(contentValue);
// Additional validation: ensure we have a string
if (typeof html !== 'string') {
console.warn('Marked parsing returned non-string value');
this.sanitizedContent.set('');
return;
}
// Sanitize the HTML content to prevent XSS attacks
// Angular's DomSanitizer removes dangerous HTML/JavaScript while preserving safe formatting
const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);
if (!sanitized) {
// If sanitization removed everything (likely due to dangerous content), return empty
this.sanitizedContent.set('');
return;
}
// Use bypassSecurityTrustHtml only for the sanitized content
// This is safe because we've already sanitized it with Angular's DomSanitizer
this.sanitizedContent.set(this.sanitizer.bypassSecurityTrustHtml(sanitized));
}
catch (error) {
console.warn('Error parsing markdown:', error);
// On error, sanitize the raw content as fallback
const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, contentValue);
this.sanitizedContent.set(sanitized ? this.sanitizer.bypassSecurityTrustHtml(sanitized) : '');
}
}
highlightCode() {
if (typeof window !== 'undefined' && window.Prism) {
if (this.markdownContainer?.nativeElement) {
window.Prism.highlightAllUnder(this.markdownContainer.nativeElement);
}
}
}
ngOnDestroy() {
// Clean up effect
if (this.contentEffectRef) {
this.contentEffectRef.destroy();
this.contentEffectRef = undefined;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: MarkdownRendererComponent, isStandalone: true, selector: "app-markdown-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true }], ngImport: i0, template: "<div \n #markdownContainer\n [class]=\"cssClass()\"\n [dir]=\"dir()\"\n [innerHTML]=\"sanitizedContent()\"\n></div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MarkdownRendererComponent, decorators: [{
type: Component,
args: [{ selector: 'app-markdown-renderer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n #markdownContainer\n [class]=\"cssClass()\"\n [dir]=\"dir()\"\n [innerHTML]=\"sanitizedContent()\"\n></div>\n\n" }]
}], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], markdownContainer: [{
type: ViewChild,
args: ['markdownContainer']
}] } });
class ChatMessageComponent {
message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
isHidden = input(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
fileUploadService = inject(FileUploadService);
previewImageUrls = signal([], ...(ngDevMode ? [{ debugName: "previewImageUrls" }] : /* istanbul ignore next */ []));
previewImageIndex = signal(-1, ...(ngDevMode ? [{ debugName: "previewImageIndex" }] : /* istanbul ignore next */ []));
isPreviewOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPreviewOpen" }] : /* istanbul ignore next */ []));
hasAttachments = computed(() => {
const currentMessage = this.message();
return !!currentMessage.attachmentIds?.length;
}, ...(ngDevMode ? [{ debugName: "hasAttachments" }] : /* istanbul ignore next */ []));
cleanMessageContent(content) {
return content.replace(/```/g, '\\`\\`\\`');
}
handleImageClick(clickedIndex) {
const currentMessage = this.message();
if (!currentMessage.attachmentIds ||
currentMessage.attachmentIds.length === 0) {
return;
}
// Each item can be a direct URL or a file ID (needs presign)
const downloadObservables = currentMessage.attachmentIds.map((idOrUrl) => {
const isUrl = idOrUrl.startsWith('http://') || idOrUrl.startsWith('https://');
if (isUrl) {
return of({ downloadUrl: idOrUrl });
}
return this.fileUploadService.presignDownload(idOrUrl).pipe(catchError$1((error) => {
console.error(`Error loading image ${idOrUrl}:`, error);
return of(null);
}));
});
forkJoin(downloadObservables).subscribe((responses) => {
const urls = responses
.filter((r) => r !== null)
.map((r) => r.downloadUrl);
this.previewImageUrls.set(urls);
this.previewImageIndex.set(clickedIndex);
this.isPreviewOpen.set(true);
});
}
closePreview() {
this.isPreviewOpen.set(false);
this.previewImageUrls.set([]);
this.previewImageIndex.set(-1);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChatMessageComponent, isStandalone: true, selector: "app-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"babylai:flex babylai:items-start babylai:gap-3\"\n [class.babylai:flex-row-reverse]=\"message().senderType === 1\"\n>\n @if (message().senderType !== 1) {\n <app-chat-avatar\n [senderType]=\"message().senderType\"\n [needsAgent]=\"needsAgent()\"\n [isHidden]=\"isHidden()\"\n />\n }\n\n <div\n class=\"babylai:rounded-2xl babylai:p-4 babylai:flex babylai:flex-col babylai:gap-2\"\n [dir]=\"\n (currentLang() === 'ar') !== (message().senderType === 1) ? 'rtl' : 'ltr'\n \"\n [class]=\"\n message().senderType === 1\n ? 'babylai:bg-primary-500 babylai:text-black-white-50 babylai:max-w-[220px]'\n : 'babylai:bg-card'\n \"\n >\n @if (hasAttachments()) {\n <div class=\"babylai:flex babylai:flex-wrap babylai:gap-2\">\n @for (\n fileId of message().attachmentIds!;\n track fileId;\n let i = $index\n ) {\n <app-image-attachment\n [fileId]=\"fileId\"\n [enablePreview]=\"true\"\n (imageClick)=\"handleImageClick(i)\"\n class=\"babylai:flex babylai:flex-col\"\n />\n }\n </div>\n }\n <app-markdown-renderer\n [content]=\"cleanMessageContent(message().messageContent)\"\n [inline]=\"false\"\n [dir]=\"'auto'\"\n >\n </app-markdown-renderer>\n </div>\n</div>\n\n<app-image-preview-dialog\n [imageUrls]=\"previewImageUrls()\"\n [initialIndex]=\"previewImageIndex()\"\n [isOpen]=\"isPreviewOpen()\"\n (close)=\"closePreview()\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MarkdownRendererComponent, selector: "app-markdown-renderer", inputs: ["content", "inline", "cssClass", "dir"] }, { kind: "component", type: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }, { kind: "component", type: ImageAttachmentComponent, selector: "app-image-attachment", inputs: ["fileId", "enablePreview", "className"], outputs: ["imageClick"] }, { kind: "component", type: ImagePreviewDialogComponent, selector: "app-image-preview-dialog", inputs: ["imageUrls", "initialIndex", "isOpen"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-message', standalone: true, imports: [
CommonModule,
MarkdownRendererComponent,
ChatAvatarComponent,
ImageAttachmentComponent,
ImagePreviewDialogComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"babylai:flex babylai:items-start babylai:gap-3\"\n [class.babylai:flex-row-reverse]=\"message().senderType === 1\"\n>\n @if (message().senderType !== 1) {\n <app-chat-avatar\n [senderType]=\"message().senderType\"\n [needsAgent]=\"needsAgent()\"\n [isHidden]=\"isHidden()\"\n />\n }\n\n <div\n class=\"babylai:rounded-2xl babylai:p-4 babylai:flex babylai:flex-col babylai:gap-2\"\n [dir]=\"\n (currentLang() === 'ar') !== (message().senderType === 1) ? 'rtl' : 'ltr'\n \"\n [class]=\"\n message().senderType === 1\n ? 'babylai:bg-primary-500 babylai:text-black-white-50 babylai:max-w-[220px]'\n : 'babylai:bg-card'\n \"\n >\n @if (hasAttachments()) {\n <div class=\"babylai:flex babylai:flex-wrap babylai:gap-2\">\n @for (\n fileId of message().attachmentIds!;\n track fileId;\n let i = $index\n ) {\n <app-image-attachment\n [fileId]=\"fileId\"\n [enablePreview]=\"true\"\n (imageClick)=\"handleImageClick(i)\"\n class=\"babylai:flex babylai:flex-col\"\n />\n }\n </div>\n }\n <app-markdown-renderer\n [content]=\"cleanMessageContent(message().messageContent)\"\n [inline]=\"false\"\n [dir]=\"'auto'\"\n >\n </app-markdown-renderer>\n </div>\n</div>\n\n<app-image-preview-dialog\n [imageUrls]=\"previewImageUrls()\"\n [initialIndex]=\"previewImageIndex()\"\n [isOpen]=\"isPreviewOpen()\"\n (close)=\"closePreview()\"\n/>\n" }]
}], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }] } });
class ChatSeparatorComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ChatSeparatorComponent, isStandalone: true, selector: "app-chat-separator", ngImport: i0, template: "<div class=\"chat__separator babylai:w-full babylai:text-black-white-300\">\n <svg\n class=\"babylai:w-full\"\n height=\"14\"\n viewBox=\"0 0 327 14\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"currentColor\" />\n <path\n d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n fill=\"currentColor\"\n />\n <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"currentColor\" />\n </svg>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatSeparatorComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-separator', standalone: true, imports: [CommonModule], template: "<div class=\"chat__separator babylai:w-full babylai:text-black-white-300\">\n <svg\n class=\"babylai:w-full\"\n height=\"14\"\n viewBox=\"0 0 327 14\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"currentColor\" />\n <path\n d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n fill=\"currentColor\"\n />\n <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"currentColor\" />\n </svg>\n</div>\n" }]
}] });
class ChatTypingIndicatorComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatTypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ChatTypingIndicatorComponent, isStandalone: true, selector: "app-chat-typing-indicator", ngImport: i0, template: "<div class=\"babylai:mb-4 babylai:flex\">\n <div class=\"babylai:shrink-0 babylai:me-3\">\n <div\n class=\"babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary\"\n >\n <app-chat-avatar\n [senderType]=\"3\"\n [needsAgent]=\"false\"\n [isHidden]=\"false\"\n />\n </div>\n </div>\n <div\n class=\"babylai:max-w-[80%] babylai:rounded-2xl babylai:p-4 babylai:bg-card\"\n >\n <p\n class=\"babylai:text-sm babylai:text-muted-foreground babylai:m-0 babylai:flex babylai:gap-0.5 babylai:items-center\"\n aria-hidden=\"true\"\n >\n <span\n class=\"babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current\"\n >\n </span>\n <span\n class=\"babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current\"\n >\n </span>\n <span\n class=\"babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current\"\n >\n </span>\n </p>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatTypingIndicatorComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-typing-indicator', standalone: true, imports: [CommonModule, ChatAvatarComponent], template: "<div class=\"babylai:mb-4 babylai:flex\">\n <div class=\"babylai:shrink-0 babylai:me-3\">\n <div\n class=\"babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary\"\n >\n <app-chat-avatar\n [senderType]=\"3\"\n [needsAgent]=\"false\"\n [isHidden]=\"false\"\n />\n </div>\n </div>\n <div\n class=\"babylai:max-w-[80%] babylai:rounded-2xl babylai:p-4 babylai:bg-card\"\n >\n <p\n class=\"babylai:text-sm babylai:text-muted-foreground babylai:m-0 babylai:flex babylai:gap-0.5 babylai:items-center\"\n aria-hidden=\"true\"\n >\n <span\n class=\"babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current\"\n >\n </span>\n <span\n class=\"babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current\"\n >\n </span>\n <span\n class=\"babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current\"\n >\n </span>\n </p>\n </div>\n</div>\n" }]
}] });
class ReviewMessageComponent {
isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
rating = signal(0, ...(ngDevMode ? [{ debugName: "rating" }] : /* istanbul ignore next */ []));
comment = signal('', ...(ngDevMode ? [{ debugName: "comment" }] : /* istanbul ignore next */ []));
// Validation errors
ratingError = signal('', ...(ngDevMode ? [{ debugName: "ratingError" }] : /* istanbul ignore next */ []));
commentError = signal('', ...(ngDevMode ? [{ debugName: "commentError" }] : /* istanbul ignore next */ []));
ratingChange = output();
commentChange = output();
submitReview = output();
skip = output();
onRatingClick(starIndex) {
this.rating.set(starIndex + 1);
this.clearRatingError();
this.ratingChange.emit(this.rating());
}
onCommentChange() {
this.clearCommentError();
this.commentChange.emit(this.comment());
}
onSubmitReview() {
if (this.validateForm() && !this.isSubmitting()) {
this.submitReview.emit({
rating: this.rating(),
comment: this.comment().trim(),
});
}
}
onSkip() {
if (!this.isSubmitting()) {
this.skip.emit();
this.resetForm();
}
}
validateForm() {
let isValid = true;
// Validate rating
if (this.rating() < 1 || this.rating() > 5) {
this.ratingError.set('Rating must be between 1 and 5.');
isValid = false;
}
// Validate comment (optional - only check max length if provided)
const trimmedComment = this.comment().trim();
if (trimmedComment.length > 0 && trimmedComment.length > 500) {
this.commentError.set('Comment must not exceed 500 characters.');
isValid = false;
}
else {
// Clear any existing error if comment is valid or empty
this.commentError.set('');
}
return isValid;
}
clearRatingError() {
this.ratingError.set('');
}
clearCommentError() {
this.commentError.set('');
}
resetForm() {
this.rating.set(0);
this.comment.set('');
this.ratingError.set('');
this.commentError.set('');
}
getStarsArray() {
return Array(5)
.fill(0)
.map((_, index) => index);
}
isStarFilled(starIndex) {
return starIndex < this.rating();
}
getCommentLength() {
return this.comment().trim().length;
}
getCommentMaxLength() {
return 500;
}
getCommentMinLength() {
return 10;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ReviewMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ReviewMessageComponent, isStandalone: true, selector: "app-review-message", inputs: { isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratingChange: "ratingChange", commentChange: "commentChange", submitReview: "submitReview", skip: "skip" }, ngImport: i0, template: "<div class=\"babylai:flex babylai:flex-col babylai:gap-2.5\">\n <h2 class=\"babylai:font-normal babylai:text-card-foreground\">\n {{ \"ReviewDialogTitle\" | translate }}\n </h2>\n <p class=\"babylai:text-sm babylai:text-muted-foreground\">\n {{ \"ReviewDialogDescription\" | translate }}\n </p>\n\n <div class=\"\">\n <label class=\"babylai:sr-only\" aria-label=\"review message stars label\">\n {{ \"ReviewDialogRatingLabel\" | translate }}\n </label>\n <div\n class=\"babylai:inline-flex babylai:bg-muted babylai:rounded-3xl babylai:p-3 babylai:gap-2\"\n aria-labelledby=\"review message stars\"\n >\n @for (star of getStarsArray(); track star) {\n <button\n class=\"babylai:hover:text-[#F49E00] babylai:border-0 babylai:bg-transparent babylai:p-0\"\n [class.babylai:text-black-white-200]=\"!isStarFilled(star)\"\n [class.babylai:dark:text-muted-foreground]=\"!isStarFilled(star)\"\n [class.babylai:text-[#F49E00]]=\"isStarFilled(star)\"\n [disabled]=\"isSubmitting()\"\n (click)=\"onRatingClick(star)\"\n [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n [attr.aria-pressed]=\"isStarFilled(star)\"\n role=\"button\"\n type=\"button\"\n (keydown.enter)=\"onRatingClick(star)\"\n (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n >\n <app-icon name=\"solar:star-bold\" class=\"babylai:flex\" size=\"28px\" />\n </button>\n }\n </div>\n @if (ratingError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ ratingError() }}\n </div>\n }\n </div>\n\n @if (rating() > 0) {\n <div class=\"babylai:flex babylai:flex-col babylai:gap-2.5\">\n <label class=\"babylai:text-card-foreground\">\n {{ \"ReviewDialogCommentLabel\" | translate }}\n </label>\n <textarea\n class=\"babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary babylai:border-black-white-200\"\n [class.babylai:border-destructive]=\"commentError()\"\n [ngModel]=\"comment()\"\n (ngModelChange)=\"comment.set($event); onCommentChange()\"\n [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n [maxlength]=\"getCommentMaxLength()\"\n [disabled]=\"isSubmitting()\"\n rows=\"4\"\n ></textarea>\n <div class=\"babylai:flex babylai:flex-col\">\n <div\n class=\"babylai:text-card-foreground babylai:text-sm babylai:whitespace-nowrap babylai:opacity-70\"\n >\n {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n </div>\n @if (commentError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ commentError() }}\n </div>\n }\n </div>\n </div>\n\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting()\"\n (onClick)=\"onSubmitReview()\"\n >\n @if (isSubmitting()) {\n Submitting...\n } @else {\n {{ \"ReviewDialogSubmitButton\" | translate }}\n }\n </app-button>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ReviewMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'app-review-message', standalone: true, imports: [
CommonModule,
FormsModule,
ButtonComponent,
TranslatePipe,
IconComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"babylai:flex babylai:flex-col babylai:gap-2.5\">\n <h2 class=\"babylai:font-normal babylai:text-card-foreground\">\n {{ \"ReviewDialogTitle\" | translate }}\n </h2>\n <p class=\"babylai:text-sm babylai:text-muted-foreground\">\n {{ \"ReviewDialogDescription\" | translate }}\n </p>\n\n <div class=\"\">\n <label class=\"babylai:sr-only\" aria-label=\"review message stars label\">\n {{ \"ReviewDialogRatingLabel\" | translate }}\n </label>\n <div\n class=\"babylai:inline-flex babylai:bg-muted babylai:rounded-3xl babylai:p-3 babylai:gap-2\"\n aria-labelledby=\"review message stars\"\n >\n @for (star of getStarsArray(); track star) {\n <button\n class=\"babylai:hover:text-[#F49E00] babylai:border-0 babylai:bg-transparent babylai:p-0\"\n [class.babylai:text-black-white-200]=\"!isStarFilled(star)\"\n [class.babylai:dark:text-muted-foreground]=\"!isStarFilled(star)\"\n [class.babylai:text-[#F49E00]]=\"isStarFilled(star)\"\n [disabled]=\"isSubmitting()\"\n (click)=\"onRatingClick(star)\"\n [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n [attr.aria-pressed]=\"isStarFilled(star)\"\n role=\"button\"\n type=\"button\"\n (keydown.enter)=\"onRatingClick(star)\"\n (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n >\n <app-icon name=\"solar:star-bold\" class=\"babylai:flex\" size=\"28px\" />\n </button>\n }\n </div>\n @if (ratingError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ ratingError() }}\n </div>\n }\n </div>\n\n @if (rating() > 0) {\n <div class=\"babylai:flex babylai:flex-col babylai:gap-2.5\">\n <label class=\"babylai:text-card-foreground\">\n {{ \"ReviewDialogCommentLabel\" | translate }}\n </label>\n <textarea\n class=\"babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary babylai:border-black-white-200\"\n [class.babylai:border-destructive]=\"commentError()\"\n [ngModel]=\"comment()\"\n (ngModelChange)=\"comment.set($event); onCommentChange()\"\n [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n [maxlength]=\"getCommentMaxLength()\"\n [disabled]=\"isSubmitting()\"\n rows=\"4\"\n ></textarea>\n <div class=\"babylai:flex babylai:flex-col\">\n <div\n class=\"babylai:text-card-foreground babylai:text-sm babylai:whitespace-nowrap babylai:opacity-70\"\n >\n {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n </div>\n @if (commentError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ commentError() }}\n </div>\n }\n </div>\n </div>\n\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting()\"\n (onClick)=\"onSubmitReview()\"\n >\n @if (isSubmitting()) {\n Submitting...\n } @else {\n {{ \"ReviewDialogSubmitButton\" | translate }}\n }\n </app-button>\n }\n</div>\n" }]
}], propDecorators: { isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], ratingChange: [{ type: i0.Output, args: ["ratingChange"] }], commentChange: [{ type: i0.Output, args: ["commentChange"] }], submitReview: [{ type: i0.Output, args: ["submitReview"] }], skip: [{ type: i0.Output, args: ["skip"] }] } });
class ChatComponent {
// Using input() signals - automatically trigger change detection on updates
messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : /* istanbul ignore next */ []));
assistantStatus = input('', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : /* istanbul ignore next */ []));
chatMessagesContainer;
reviewSubmit = output();
reviewSkip = output();
// Computed signal for first agent message index
firstAgentMessageIndex = computed(() => {
return this.messages().findIndex((message) => message.senderType === 2);
}, ...(ngDevMode ? [{ debugName: "firstAgentMessageIndex" }] : /* istanbul ignore next */ []));
previousMessagesLength = 0;
scrollTimeouts = [];
messagesEffectRef;
constructor() {
// Effect to handle scrolling when messages change
this.messagesEffectRef = effect(() => {
const messages = this.messages();
const currentLength = messages.length;
// Only scroll if messages array length changed (new message added)
if (currentLength !== this.previousMessagesLength) {
this.previousMessagesLength = currentLength;
// Use setTimeout to ensure DOM is updated
const timeoutId = setTimeout(() => this.scrollToBottom(), 0);
this.scrollTimeouts.push(timeoutId);
}
}, ...(ngDevMode ? [{ debugName: "messagesEffectRef" }] : /* istanbul ignore next */ []));
}
ngOnInit() {
this.previousMessagesLength = this.messages().length;
}
ngAfterViewInit() {
// Initial scroll to bottom after view init
const timeoutId = setTimeout(() => this.scrollToBottom(), 0);
this.scrollTimeouts.push(timeoutId);
}
ngOnDestroy() {
// Clean up effect
if (this.messagesEffectRef) {
this.messagesEffectRef.destroy();
this.messagesEffectRef = undefined;
}
// Clear all pending scroll timeouts
this.scrollTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
this.scrollTimeouts = [];
}
scrollToBottom() {
try {
this.chatMessagesContainer.nativeElement.scrollTop =
this.chatMessagesContainer.nativeElement.scrollHeight;
}
catch (err) {
console.error('Error scrolling to bottom:', err);
}
}
handleReviewSubmit(reviewData) {
this.reviewSubmit.emit(reviewData);
}
handleReviewSkip() {
this.reviewSkip.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"babylai:flex-1 babylai:flex babylai:flex-col babylai:gap-4\"\n #chatMessagesContainer\n>\n @for (message of messages(); track message.id; let i = $index) {\n <div class=\"babylai:flex babylai:flex-col babylai:gap-2\">\n @if (i === firstAgentMessageIndex() && message.senderType === 2 && !message.isReviewMessage) {\n <app-chat-separator class=\"babylai:py-4\" />\n }\n @if (message.isReviewMessage) {\n <app-chat-separator class=\"babylai:py-4\" />\n <div class=\"babylai:flex babylai:items-start babylai:gap-3\">\n <app-chat-avatar\n [senderType]=\"message.senderType\"\n [needsAgent]=\"needsAgent()\"\n [isHidden]=\"false\"\n />\n <div\n class=\"babylai:relative babylai:rounded-2xl babylai:p-5! babylai:text-sm babylai:bg-card babylai:max-w-[80%]\"\n >\n <app-review-message\n [isSubmitting]=\"isSubmittingReview()\"\n [currentLang]=\"currentLang()\"\n (submitReview)=\"handleReviewSubmit($event)\"\n (skip)=\"handleReviewSkip()\"\n />\n </div>\n </div>\n } @else {\n <app-chat-message\n [message]=\"message\"\n [needsAgent]=\"needsAgent()\"\n [currentLang]=\"currentLang()\"\n [isHidden]=\"\n i > 0 && messages()[i - 1].senderType === message.senderType\n \"\n />\n }\n </div>\n }\n @if (assistantStatus() === \"typing\" && firstAgentMessageIndex() === -1) {\n <app-chat-typing-indicator />\n }\n @if (loading()) {\n <div\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:h-full\"\n >\n loading status here\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatMessageComponent, selector: "app-chat-message", inputs: ["message", "needsAgent", "currentLang", "isHidden"] }, { kind: "component", type: ChatSeparatorComponent, selector: "app-chat-separator" }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "app-chat-typing-indicator" }, { kind: "component", type: ReviewMessageComponent, selector: "app-review-message", inputs: ["isSubmitting", "currentLang"], outputs: ["ratingChange", "commentChange", "submitReview", "skip"] }, { kind: "component", type: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat', standalone: true, imports: [
CommonModule,
ChatMessageComponent,
ChatSeparatorComponent,
ChatTypingIndicatorComponent,
ReviewMessageComponent,
ChatAvatarComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"babylai:flex-1 babylai:flex babylai:flex-col babylai:gap-4\"\n #chatMessagesContainer\n>\n @for (message of messages(); track message.id; let i = $index) {\n <div class=\"babylai:flex babylai:flex-col babylai:gap-2\">\n @if (i === firstAgentMessageIndex() && message.senderType === 2 && !message.isReviewMessage) {\n <app-chat-separator class=\"babylai:py-4\" />\n }\n @if (message.isReviewMessage) {\n <app-chat-separator class=\"babylai:py-4\" />\n <div class=\"babylai:flex babylai:items-start babylai:gap-3\">\n <app-chat-avatar\n [senderType]=\"message.senderType\"\n [needsAgent]=\"needsAgent()\"\n [isHidden]=\"false\"\n />\n <div\n class=\"babylai:relative babylai:rounded-2xl babylai:p-5! babylai:text-sm babylai:bg-card babylai:max-w-[80%]\"\n >\n <app-review-message\n [isSubmitting]=\"isSubmittingReview()\"\n [currentLang]=\"currentLang()\"\n (submitReview)=\"handleReviewSubmit($event)\"\n (skip)=\"handleReviewSkip()\"\n />\n </div>\n </div>\n } @else {\n <app-chat-message\n [message]=\"message\"\n [needsAgent]=\"needsAgent()\"\n [currentLang]=\"currentLang()\"\n [isHidden]=\"\n i > 0 && messages()[i - 1].senderType === message.senderType\n \"\n />\n }\n </div>\n }\n @if (assistantStatus() === \"typing\" && firstAgentMessageIndex() === -1) {\n <app-chat-typing-indicator />\n }\n @if (loading()) {\n <div\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:h-full\"\n >\n loading status here\n </div>\n }\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], chatMessagesContainer: [{
type: ViewChild,
args: ['chatMessagesContainer']
}], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }] } });
class BackButtonComponent {
onBack = output();
translationService = inject(TranslationService);
currentLang = toSignal(this.translationService.currentLang, {
initialValue: 'en',
});
isArabic = computed(() => this.currentLang() === 'ar', ...(ngDevMode ? [{ debugName: "isArabic" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: BackButtonComponent, isStandalone: true, selector: "app-back-button", outputs: { onBack: "onBack" }, ngImport: i0, template: "<button\n class=\"babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:cursor-pointer babylai:border-0\"\n (click)=\"onBack.emit()\"\n [attr.aria-label]=\"'Back' | translate\"\n type=\"button\"\n>\n <app-icon\n name=\"solar:alt-arrow-left-linear\"\n class=\"babylai:flex\"\n [style.transform]=\"isArabic() ? 'rotate(180deg)' : 'none'\"\n />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BackButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'app-back-button', standalone: true, imports: [CommonModule, TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:cursor-pointer babylai:border-0\"\n (click)=\"onBack.emit()\"\n [attr.aria-label]=\"'Back' | translate\"\n type=\"button\"\n>\n <app-icon\n name=\"solar:alt-arrow-left-linear\"\n class=\"babylai:flex\"\n [style.transform]=\"isArabic() ? 'rotate(180deg)' : 'none'\"\n />\n</button>\n" }]
}], propDecorators: { onBack: [{ type: i0.Output, args: ["onBack"] }] } });
class CloseButtonComponent {
onClose = output();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", outputs: { onClose: "onClose" }, ngImport: i0, template: "<button\n (click)=\"onClose.emit()\"\n class=\"babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:cursor-pointer babylai:border-0\"\n [attr.aria-label]=\"'Close'\"\n type=\"button\"\n>\n <app-icon name=\"material-symbols:close-small-outline-rounded\" class=\"babylai:flex\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CloseButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'app-close-button', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"onClose.emit()\"\n class=\"babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:cursor-pointer babylai:border-0\"\n [attr.aria-label]=\"'Close'\"\n type=\"button\"\n>\n <app-icon name=\"material-symbols:close-small-outline-rounded\" class=\"babylai:flex\" />\n</button>\n" }]
}], propDecorators: { onClose: [{ type: i0.Output, args: ["onClose"] }] } });
class MinimizeButtonComponent {
onMinimize = output();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MinimizeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: MinimizeButtonComponent, isStandalone: true, selector: "app-minimize-button", outputs: { onMinimize: "onMinimize" }, ngImport: i0, template: "<button\n (click)=\"onMinimize.emit()\"\n class=\"babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:cursor-pointer babylai:border-0\"\n [attr.aria-label]=\"'Minimize'\"\n type=\"button\"\n>\n <app-icon name=\"fa7-solid:subtract\" class=\"babylai:flex\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MinimizeButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'app-minimize-button', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"onMinimize.emit()\"\n class=\"babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:cursor-pointer babylai:border-0\"\n [attr.aria-label]=\"'Minimize'\"\n type=\"button\"\n>\n <app-icon name=\"fa7-solid:subtract\" class=\"babylai:flex\" />\n</button>\n" }]
}], propDecorators: { onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
class ChatHeaderComponent {
showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : /* istanbul ignore next */ []));
language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
selectedOptionTitle = input(null, ...(ngDevMode ? [{ debugName: "selectedOptionTitle" }] : /* istanbul ignore next */ []));
onBack = output();
onClose = output();
onMinimize = output();
isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ChatHeaderComponent, isStandalone: true, selector: "app-chat-header", inputs: { showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTitle: { classPropertyName: "selectedOptionTitle", publicName: "selectedOptionTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBack: "onBack", onClose: "onClose", onMinimize: "onMinimize" }, ngImport: i0, template: "<header\n class=\"bg-header babylai:flex babylai:items-center babylai:justify-between babylai:p-6 babylai:gap-4 babylai:border-b babylai:border-black-white-200\">\n <div class=\"babylai:flex babylai:items-center babylai:gap-2\">\n <app-back-button (onBack)=\"onBack.emit()\" />\n\n <app-close-button (onClose)=\"onClose.emit()\" />\n </div>\n\n <h1 class=\"babylai:text-lg! babylai:font-semibold! babylai:text-card-foreground\">\n {{ selectedOptionTitle() }}\n </h1>\n\n <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</header>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BackButtonComponent, selector: "app-back-button", outputs: ["onBack"] }, { kind: "component", type: CloseButtonComponent, selector: "app-close-button", outputs: ["onClose"] }, { kind: "component", type: MinimizeButtonComponent, selector: "app-minimize-button", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-header', standalone: true, imports: [
CommonModule,
BackButtonComponent,
CloseButtonComponent,
MinimizeButtonComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"bg-header babylai:flex babylai:items-center babylai:justify-between babylai:p-6 babylai:gap-4 babylai:border-b babylai:border-black-white-200\">\n <div class=\"babylai:flex babylai:items-center babylai:gap-2\">\n <app-back-button (onBack)=\"onBack.emit()\" />\n\n <app-close-button (onClose)=\"onClose.emit()\" />\n </div>\n\n <h1 class=\"babylai:text-lg! babylai:font-semibold! babylai:text-card-foreground\">\n {{ selectedOptionTitle() }}\n </h1>\n\n <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</header>" }]
}], propDecorators: { showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], selectedOptionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptionTitle", required: false }] }], onBack: [{ type: i0.Output, args: ["onBack"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
class HeaderComponent {
onMinimize = output();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: HeaderComponent, isStandalone: true, selector: "app-header", outputs: { onMinimize: "onMinimize" }, ngImport: i0, template: "<div class=\"bg-header babylai:flex babylai:items-center babylai:justify-end babylai:p-6 babylai:border-b babylai:border-black-white-200\">\n <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MinimizeButtonComponent, selector: "app-minimize-button", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'app-header', standalone: true, imports: [CommonModule, MinimizeButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-header babylai:flex babylai:items-center babylai:justify-end babylai:p-6 babylai:border-b babylai:border-black-white-200\">\n <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</div>\n" }]
}], propDecorators: { onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
class CardComponent {
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
hostClasses = computed(() => {
const classes = ['babylai:z-1', 'babylai:w-full', 'babylai:box-border'];
// Add variant-specific classes
if (this.variant() === 'default') {
classes.push('babylai:rounded-lg', 'babylai:border', 'babylai:block', 'babylai:border-black-white-200', 'babylai:bg-card', 'babylai:text-card-foreground');
}
else if (this.variant() === 'rounded') {
classes.push('babylai:rounded-3xl', 'babylai:p-1', 'babylai:px-2', 'babylai:block', 'babylai:bg-card');
}
const classValue = this.class();
if (classValue) {
classes.push(classValue);
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'app-card', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': 'hostClasses()',
}, template: "<ng-content></ng-content>\n\n" }]
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
class CardHeaderComponent {
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
hostClasses = computed(() => {
const classes = [
'babylai:flex',
'babylai:flex-col',
'babylai:gap-1.5',
'babylai:p-6',
'babylai:w-full',
'babylai:text-card-foreground',
];
const classValue = this.class();
if (classValue) {
classes.push(classValue);
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardHeaderComponent, isStandalone: true, selector: "app-card-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'app-card-header', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': 'hostClasses()',
}, template: "<ng-content></ng-content>\n\n" }]
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
class CardTitleComponent {
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
hostClasses = computed(() => {
const classes = [
'babylai:font-semibold',
'babylai:leading-none',
'babylai:tracking-tight',
'babylai:w-full',
'babylai:text-card-foreground',
];
const classValue = this.class();
if (classValue) {
classes.push(classValue);
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardTitleComponent, isStandalone: true, selector: "app-card-title", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardTitleComponent, decorators: [{
type: Component,
args: [{ selector: 'app-card-title', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': 'hostClasses()',
}, template: "<ng-content></ng-content>\n\n" }]
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
class CardDescriptionComponent {
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
hostClasses = computed(() => {
const classes = [
'babylai:text-sm',
'babylai:w-full',
'babylai:text-muted-foreground',
];
const classValue = this.class();
if (classValue) {
classes.push(classValue);
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardDescriptionComponent, isStandalone: true, selector: "app-card-description", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardDescriptionComponent, decorators: [{
type: Component,
args: [{ selector: 'app-card-description', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': 'hostClasses()',
}, template: "<ng-content></ng-content>\n\n" }]
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
class CardContentComponent {
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
hostClasses = computed(() => {
const classes = [
'babylai:p-0',
'babylai:pt-0',
'babylai:w-full',
'babylai:box-border',
'babylai:text-start',
];
const classValue = this.class();
if (classValue) {
classes.push(classValue);
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardContentComponent, isStandalone: true, selector: "app-card-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardContentComponent, decorators: [{
type: Component,
args: [{ selector: 'app-card-content', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': 'hostClasses()',
}, template: "<ng-content></ng-content>\n\n" }]
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
class CardFooterComponent {
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
hostClasses = computed(() => {
const classes = [
'babylai:flex',
'babylai:items-center',
'babylai:p-6',
'babylai:pt-0',
'babylai:w-full',
'babylai:text-card-foreground',
];
const classValue = this.class();
if (classValue) {
classes.push(classValue);
}
return classes.join(' ');
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardFooterComponent, isStandalone: true, selector: "app-card-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardFooterComponent, decorators: [{
type: Component,
args: [{ selector: 'app-card-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class]': 'hostClasses()',
}, template: "<ng-content></ng-content>\n\n" }]
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
class FooterComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"babylai:flex babylai:items-center babylai:justify-center babylai:p-3 babylai:border-t babylai:border-border\">\n <a\n href=\"https://babylai.net\"\n target=\"_blank\"\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:gap-2 babylai:text-sm babylai:text-card-foreground babylai:no-underline babylai:transition-opacity babylai:duration-200 babylai:hover:opacity-80\"\n >\n <span>\n {{ \"PoweredByBabylAI\" | translate }}\n </span>\n <span>|</span>\n <svg viewBox=\"0 0 54 19\" fill=\"none\" class=\"babylai:w-15\">\n <path\n d=\"M0 4.97873C0 2.22905 2.22908 0 4.97879 0H13.2768C16.0265 0 18.2556 2.22905 18.2556 4.97873V13.2766C18.2556 16.0263 16.0265 18.2554 13.2768 18.2554H0V4.97873Z\"\n fill=\"#606060\"\n />\n <path\n d=\"M5.76107 6.10571C5.76153 6.10407 5.76177 6.10325 5.76187 6.10287C5.83413 5.8495 6.19321 5.8495 6.26546 6.10287C6.26557 6.10325 6.2658 6.10407 6.26627 6.10571C6.26749 6.11004 6.26809 6.1122 6.26867 6.11423C6.60441 7.29978 7.53101 8.22637 8.71657 8.5621C8.7186 8.56268 8.72076 8.56329 8.72509 8.56451C8.72673 8.56497 8.72755 8.5652 8.72793 8.56531C8.98131 8.63756 8.98131 8.99664 8.72793 9.06889C8.72755 9.069 8.72673 9.06923 8.72509 9.0697C8.72076 9.07092 8.7186 9.07153 8.71657 9.0721C7.53101 9.40783 6.60441 10.3344 6.26867 11.52C6.26809 11.522 6.26749 11.5242 6.26627 11.5285C6.2658 11.5301 6.26557 11.531 6.26546 11.5313C6.19321 11.7847 5.83413 11.7847 5.76187 11.5313C5.76177 11.531 5.76153 11.5301 5.76107 11.5285C5.75985 11.5242 5.75924 11.522 5.75867 11.52C5.42293 10.3344 4.49633 9.40783 3.31077 9.0721C3.30874 9.07153 3.30657 9.07092 3.30225 9.0697C3.3006 9.06923 3.29978 9.069 3.2994 9.06889C3.04603 8.99664 3.04603 8.63756 3.2994 8.56531C3.29978 8.5652 3.3006 8.56497 3.30225 8.56451C3.30657 8.56329 3.30874 8.56268 3.31077 8.5621C4.49633 8.22637 5.42293 7.29978 5.75867 6.11423C5.75924 6.1122 5.75985 6.11004 5.76107 6.10571Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.7275 8.76473C14.7275 9.99635 13.7523 10.9948 12.5493 10.9948C11.3463 10.9948 10.3711 9.99635 10.3711 8.76473C10.3711 7.5331 11.3463 6.53467 12.5493 6.53467C13.7523 6.53467 14.7275 7.5331 14.7275 8.76473Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.6133 13.0924V5.27515H53.1931V13.0924H51.6133Z\"\n fill=\"#606060\"\n />\n <path\n d=\"M44.5938 13.0924L46.5857 5.27515H49.3446L51.325 13.0924H49.7452L49.3102 11.513H46.5742L46.1621 13.0924H44.5938ZM46.8261 10.2425H49.0813L48.1998 6.55705H47.719L46.8261 10.2425Z\"\n fill=\"#606060\"\n />\n <path d=\"M42.5703 13.092V5H44.0929V13.092H42.5703Z\" fill=\"#919191\" />\n <path\n d=\"M38.6905 15.5069L39.4231 13.0919H38.1982L36.8359 7.34619H38.4272L39.446 11.7985H39.7437L40.7625 7.34619H42.2965L40.3161 15.5069H38.6905Z\"\n fill=\"#919191\"\n />\n <path\n d=\"M34.008 13.2179C33.8172 13.2179 33.5845 13.2103 33.3097 13.195C33.035 13.1797 32.7526 13.1569 32.4626 13.1263C32.1802 13.0958 31.9284 13.0691 31.707 13.0462V5H33.241V7.52946C33.3555 7.48368 33.4967 7.4379 33.6646 7.39212C33.8325 7.34633 34.008 7.30818 34.1912 7.27766C34.382 7.23951 34.5575 7.22043 34.7178 7.22043C35.252 7.22043 35.6756 7.33107 35.9885 7.55235C36.309 7.766 36.538 8.08648 36.6754 8.51378C36.8127 8.94108 36.8814 9.47902 36.8814 10.1276C36.8814 10.8906 36.7937 11.5011 36.6181 11.9589C36.4502 12.4091 36.1564 12.7334 35.7366 12.9318C35.3169 13.1225 34.7407 13.2179 34.008 13.2179ZM34.0195 11.936C34.3934 11.936 34.672 11.8711 34.8552 11.7414C35.0383 11.6041 35.1604 11.4019 35.2215 11.1348C35.2902 10.8677 35.3245 10.5396 35.3245 10.1505C35.3245 9.75371 35.294 9.43705 35.2329 9.20051C35.1719 8.95634 35.0689 8.78084 34.9238 8.67402C34.7865 8.55956 34.5919 8.50233 34.34 8.50233C34.2179 8.50233 34.0882 8.51759 33.9508 8.54812C33.8134 8.57101 33.6799 8.60153 33.5501 8.63968C33.428 8.6702 33.325 8.70072 33.241 8.73124V11.8902C33.3555 11.8978 33.4891 11.9093 33.6417 11.9245C33.7943 11.9322 33.9203 11.936 34.0195 11.936Z\"\n fill=\"#919191\"\n />\n <path\n d=\"M27.8012 13.2177C27.2059 13.2177 26.7556 13.0689 26.4504 12.7713C26.1527 12.4661 26.0039 12.0083 26.0039 11.3978C26.0039 10.9705 26.0802 10.6386 26.2329 10.4021C26.3855 10.1579 26.6106 9.9824 26.9083 9.87558C27.2136 9.76112 27.5837 9.69245 28.0187 9.66956L29.4153 9.54366V9.20029C29.4153 8.9256 29.3467 8.73484 29.2093 8.62802C29.0719 8.51356 28.8697 8.45633 28.6025 8.45633C28.3889 8.45633 28.1408 8.46396 27.8584 8.47922C27.5837 8.49448 27.309 8.51356 27.0342 8.53645C26.7671 8.55934 26.5343 8.58223 26.3359 8.60512L26.2901 7.52924C26.4885 7.48346 26.7251 7.43768 26.9999 7.3919C27.2822 7.33849 27.5761 7.29652 27.8813 7.266C28.1866 7.23548 28.469 7.22021 28.7285 7.22021C29.2169 7.22021 29.6252 7.28126 29.9534 7.40334C30.2816 7.52543 30.5296 7.72763 30.6975 8.00996C30.8654 8.28465 30.9493 8.65854 30.9493 9.13162V11.7526C30.9646 11.8595 31.0218 11.9434 31.1211 12.0044C31.2203 12.0579 31.3347 12.096 31.4645 12.1189L31.4301 13.1719C31.308 13.1719 31.1859 13.1719 31.0638 13.1719C30.9493 13.1795 30.8387 13.1795 30.7318 13.1719C30.625 13.1719 30.5296 13.1643 30.4456 13.149C30.2701 13.1261 30.1175 13.0803 29.9877 13.0117C29.8656 12.943 29.7664 12.8705 29.6901 12.7942C29.568 12.8476 29.4039 12.9086 29.1978 12.9773C28.9918 13.046 28.7666 13.1032 28.5224 13.149C28.2858 13.1948 28.0454 13.2177 27.8012 13.2177ZM28.1675 12.0846C28.3125 12.0846 28.4652 12.0693 28.6254 12.0388C28.7857 12.0083 28.9345 11.9739 29.0719 11.9358C29.2169 11.89 29.3314 11.848 29.4153 11.8099V10.4936L28.2477 10.5966C27.9958 10.6195 27.8127 10.6958 27.6982 10.8256C27.5913 10.9476 27.5379 11.1231 27.5379 11.3521C27.5379 11.581 27.5875 11.7603 27.6867 11.89C27.7936 12.0197 27.9538 12.0846 28.1675 12.0846Z\"\n fill=\"#919191\"\n />\n <path\n d=\"M19.9531 13.0924V5.27515H23.0669C23.5859 5.27515 24.0323 5.34 24.4063 5.46972C24.7803 5.59944 25.0703 5.80927 25.2763 6.09923C25.49 6.38155 25.5969 6.76307 25.5969 7.24378C25.5969 7.57188 25.5625 7.85039 25.4938 8.0793C25.4328 8.30058 25.3336 8.49134 25.1962 8.65158C25.0665 8.80419 24.8947 8.94535 24.681 9.07506C24.91 9.159 25.1084 9.27345 25.2763 9.41843C25.4519 9.55578 25.5854 9.74272 25.677 9.97926C25.7686 10.2082 25.8144 10.5134 25.8144 10.8949C25.8144 11.3146 25.7495 11.6656 25.6198 11.9479C25.49 12.2302 25.303 12.4553 25.0588 12.6232C24.8222 12.791 24.5437 12.9131 24.2231 12.9894C23.9026 13.0581 23.5515 13.0924 23.1699 13.0924H19.9531ZM21.5329 11.925H23.0555C23.3226 11.925 23.5439 11.8945 23.7194 11.8334C23.9026 11.7648 24.04 11.6465 24.1316 11.4786C24.2308 11.3108 24.2804 11.078 24.2804 10.7804C24.2804 10.5515 24.2422 10.3646 24.1659 10.2196C24.0896 10.0746 23.9904 9.96782 23.8683 9.89914C23.7461 9.82284 23.6088 9.76943 23.4561 9.7389C23.3111 9.70838 23.1661 9.69312 23.0211 9.69312H21.5329V11.925ZM21.5329 8.57146H23.0097C23.2692 8.57146 23.479 8.53331 23.6393 8.457C23.7996 8.37307 23.9179 8.25099 23.9942 8.09075C24.0705 7.92288 24.1087 7.71304 24.1087 7.46124C24.1087 7.10262 24.0133 6.84318 23.8225 6.68295C23.6393 6.52271 23.3493 6.44259 22.9524 6.44259H21.5329V8.57146Z\"\n fill=\"#919191\"\n />\n </svg>\n </a>\n</footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FooterComponent, decorators: [{
type: Component,
args: [{ selector: 'app-footer', standalone: true, imports: [CommonModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"babylai:flex babylai:items-center babylai:justify-center babylai:p-3 babylai:border-t babylai:border-border\">\n <a\n href=\"https://babylai.net\"\n target=\"_blank\"\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:gap-2 babylai:text-sm babylai:text-card-foreground babylai:no-underline babylai:transition-opacity babylai:duration-200 babylai:hover:opacity-80\"\n >\n <span>\n {{ \"PoweredByBabylAI\" | translate }}\n </span>\n <span>|</span>\n <svg viewBox=\"0 0 54 19\" fill=\"none\" class=\"babylai:w-15\">\n <path\n d=\"M0 4.97873C0 2.22905 2.22908 0 4.97879 0H13.2768C16.0265 0 18.2556 2.22905 18.2556 4.97873V13.2766C18.2556 16.0263 16.0265 18.2554 13.2768 18.2554H0V4.97873Z\"\n fill=\"#606060\"\n />\n <path\n d=\"M5.76107 6.10571C5.76153 6.10407 5.76177 6.10325 5.76187 6.10287C5.83413 5.8495 6.19321 5.8495 6.26546 6.10287C6.26557 6.10325 6.2658 6.10407 6.26627 6.10571C6.26749 6.11004 6.26809 6.1122 6.26867 6.11423C6.60441 7.29978 7.53101 8.22637 8.71657 8.5621C8.7186 8.56268 8.72076 8.56329 8.72509 8.56451C8.72673 8.56497 8.72755 8.5652 8.72793 8.56531C8.98131 8.63756 8.98131 8.99664 8.72793 9.06889C8.72755 9.069 8.72673 9.06923 8.72509 9.0697C8.72076 9.07092 8.7186 9.07153 8.71657 9.0721C7.53101 9.40783 6.60441 10.3344 6.26867 11.52C6.26809 11.522 6.26749 11.5242 6.26627 11.5285C6.2658 11.5301 6.26557 11.531 6.26546 11.5313C6.19321 11.7847 5.83413 11.7847 5.76187 11.5313C5.76177 11.531 5.76153 11.5301 5.76107 11.5285C5.75985 11.5242 5.75924 11.522 5.75867 11.52C5.42293 10.3344 4.49633 9.40783 3.31077 9.0721C3.30874 9.07153 3.30657 9.07092 3.30225 9.0697C3.3006 9.06923 3.29978 9.069 3.2994 9.06889C3.04603 8.99664 3.04603 8.63756 3.2994 8.56531C3.29978 8.5652 3.3006 8.56497 3.30225 8.56451C3.30657 8.56329 3.30874 8.56268 3.31077 8.5621C4.49633 8.22637 5.42293 7.29978 5.75867 6.11423C5.75924 6.1122 5.75985 6.11004 5.76107 6.10571Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.7275 8.76473C14.7275 9.99635 13.7523 10.9948 12.5493 10.9948C11.3463 10.9948 10.3711 9.99635 10.3711 8.76473C10.3711 7.5331 11.3463 6.53467 12.5493 6.53467C13.7523 6.53467 14.7275 7.5331 14.7275 8.76473Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.6133 13.0924V5.27515H53.1931V13.0924H51.6133Z\"\n fill=\"#606060\"\n />\n <path\n d=\"M44.5938 13.0924L46.5857 5.27515H49.3446L51.325 13.0924H49.7452L49.3102 11.513H46.5742L46.1621 13.0924H44.5938ZM46.8261 10.2425H49.0813L48.1998 6.55705H47.719L46.8261 10.2425Z\"\n fill=\"#606060\"\n />\n <path d=\"M42.5703 13.092V5H44.0929V13.092H42.5703Z\" fill=\"#919191\" />\n <path\n d=\"M38.6905 15.5069L39.4231 13.0919H38.1982L36.8359 7.34619H38.4272L39.446 11.7985H39.7437L40.7625 7.34619H42.2965L40.3161 15.5069H38.6905Z\"\n fill=\"#919191\"\n />\n <path\n d=\"M34.008 13.2179C33.8172 13.2179 33.5845 13.2103 33.3097 13.195C33.035 13.1797 32.7526 13.1569 32.4626 13.1263C32.1802 13.0958 31.9284 13.0691 31.707 13.0462V5H33.241V7.52946C33.3555 7.48368 33.4967 7.4379 33.6646 7.39212C33.8325 7.34633 34.008 7.30818 34.1912 7.27766C34.382 7.23951 34.5575 7.22043 34.7178 7.22043C35.252 7.22043 35.6756 7.33107 35.9885 7.55235C36.309 7.766 36.538 8.08648 36.6754 8.51378C36.8127 8.94108 36.8814 9.47902 36.8814 10.1276C36.8814 10.8906 36.7937 11.5011 36.6181 11.9589C36.4502 12.4091 36.1564 12.7334 35.7366 12.9318C35.3169 13.1225 34.7407 13.2179 34.008 13.2179ZM34.0195 11.936C34.3934 11.936 34.672 11.8711 34.8552 11.7414C35.0383 11.6041 35.1604 11.4019 35.2215 11.1348C35.2902 10.8677 35.3245 10.5396 35.3245 10.1505C35.3245 9.75371 35.294 9.43705 35.2329 9.20051C35.1719 8.95634 35.0689 8.78084 34.9238 8.67402C34.7865 8.55956 34.5919 8.50233 34.34 8.50233C34.2179 8.50233 34.0882 8.51759 33.9508 8.54812C33.8134 8.57101 33.6799 8.60153 33.5501 8.63968C33.428 8.6702 33.325 8.70072 33.241 8.73124V11.8902C33.3555 11.8978 33.4891 11.9093 33.6417 11.9245C33.7943 11.9322 33.9203 11.936 34.0195 11.936Z\"\n fill=\"#919191\"\n />\n <path\n d=\"M27.8012 13.2177C27.2059 13.2177 26.7556 13.0689 26.4504 12.7713C26.1527 12.4661 26.0039 12.0083 26.0039 11.3978C26.0039 10.9705 26.0802 10.6386 26.2329 10.4021C26.3855 10.1579 26.6106 9.9824 26.9083 9.87558C27.2136 9.76112 27.5837 9.69245 28.0187 9.66956L29.4153 9.54366V9.20029C29.4153 8.9256 29.3467 8.73484 29.2093 8.62802C29.0719 8.51356 28.8697 8.45633 28.6025 8.45633C28.3889 8.45633 28.1408 8.46396 27.8584 8.47922C27.5837 8.49448 27.309 8.51356 27.0342 8.53645C26.7671 8.55934 26.5343 8.58223 26.3359 8.60512L26.2901 7.52924C26.4885 7.48346 26.7251 7.43768 26.9999 7.3919C27.2822 7.33849 27.5761 7.29652 27.8813 7.266C28.1866 7.23548 28.469 7.22021 28.7285 7.22021C29.2169 7.22021 29.6252 7.28126 29.9534 7.40334C30.2816 7.52543 30.5296 7.72763 30.6975 8.00996C30.8654 8.28465 30.9493 8.65854 30.9493 9.13162V11.7526C30.9646 11.8595 31.0218 11.9434 31.1211 12.0044C31.2203 12.0579 31.3347 12.096 31.4645 12.1189L31.4301 13.1719C31.308 13.1719 31.1859 13.1719 31.0638 13.1719C30.9493 13.1795 30.8387 13.1795 30.7318 13.1719C30.625 13.1719 30.5296 13.1643 30.4456 13.149C30.2701 13.1261 30.1175 13.0803 29.9877 13.0117C29.8656 12.943 29.7664 12.8705 29.6901 12.7942C29.568 12.8476 29.4039 12.9086 29.1978 12.9773C28.9918 13.046 28.7666 13.1032 28.5224 13.149C28.2858 13.1948 28.0454 13.2177 27.8012 13.2177ZM28.1675 12.0846C28.3125 12.0846 28.4652 12.0693 28.6254 12.0388C28.7857 12.0083 28.9345 11.9739 29.0719 11.9358C29.2169 11.89 29.3314 11.848 29.4153 11.8099V10.4936L28.2477 10.5966C27.9958 10.6195 27.8127 10.6958 27.6982 10.8256C27.5913 10.9476 27.5379 11.1231 27.5379 11.3521C27.5379 11.581 27.5875 11.7603 27.6867 11.89C27.7936 12.0197 27.9538 12.0846 28.1675 12.0846Z\"\n fill=\"#919191\"\n />\n <path\n d=\"M19.9531 13.0924V5.27515H23.0669C23.5859 5.27515 24.0323 5.34 24.4063 5.46972C24.7803 5.59944 25.0703 5.80927 25.2763 6.09923C25.49 6.38155 25.5969 6.76307 25.5969 7.24378C25.5969 7.57188 25.5625 7.85039 25.4938 8.0793C25.4328 8.30058 25.3336 8.49134 25.1962 8.65158C25.0665 8.80419 24.8947 8.94535 24.681 9.07506C24.91 9.159 25.1084 9.27345 25.2763 9.41843C25.4519 9.55578 25.5854 9.74272 25.677 9.97926C25.7686 10.2082 25.8144 10.5134 25.8144 10.8949C25.8144 11.3146 25.7495 11.6656 25.6198 11.9479C25.49 12.2302 25.303 12.4553 25.0588 12.6232C24.8222 12.791 24.5437 12.9131 24.2231 12.9894C23.9026 13.0581 23.5515 13.0924 23.1699 13.0924H19.9531ZM21.5329 11.925H23.0555C23.3226 11.925 23.5439 11.8945 23.7194 11.8334C23.9026 11.7648 24.04 11.6465 24.1316 11.4786C24.2308 11.3108 24.2804 11.078 24.2804 10.7804C24.2804 10.5515 24.2422 10.3646 24.1659 10.2196C24.0896 10.0746 23.9904 9.96782 23.8683 9.89914C23.7461 9.82284 23.6088 9.76943 23.4561 9.7389C23.3111 9.70838 23.1661 9.69312 23.0211 9.69312H21.5329V11.925ZM21.5329 8.57146H23.0097C23.2692 8.57146 23.479 8.53331 23.6393 8.457C23.7996 8.37307 23.9179 8.25099 23.9942 8.09075C24.0705 7.92288 24.1087 7.71304 24.1087 7.46124C24.1087 7.10262 24.0133 6.84318 23.8225 6.68295C23.6393 6.52271 23.3493 6.44259 22.9524 6.44259H21.5329V8.57146Z\"\n fill=\"#919191\"\n />\n </svg>\n </a>\n</footer>\n" }]
}] });
/**
* URL for the loading screen animated logo (e.g. animatedLogo.gif).
* When using the library as an npm package, copy the library's assets to your app
* (see README "Assets setup") or provide your own URL here.
*/
const HELP_CENTER_LOADING_LOGO_URL = new InjectionToken('HELP_CENTER_LOADING_LOGO_URL', {
providedIn: 'root',
factory: () => '/assets/animatedLogo.gif',
});
class LoadingComponent {
loadingLogoUrlToken = inject(HELP_CENTER_LOADING_LOGO_URL);
loadingLogoUrl = () => this.loadingLogoUrlToken;
onMinimize = output();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: LoadingComponent, isStandalone: true, selector: "app-loading", outputs: { onMinimize: "onMinimize" }, ngImport: i0, template: "<div\n class=\"babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:flex babylai:flex-col\">\n <div class=\"babylai:rounded-3xl babylai:h-full babylai:flex babylai:flex-col babylai:gap-4\">\n <app-header (onMinimize)=\"onMinimize.emit()\" />\n <div\n class=\"babylai:flex babylai:flex-col babylai:items-center babylai:justify-center babylai:w-full babylai:h-full babylai:py-28\">\n <img [src]=\"loadingLogoUrl()\" alt=\"Animated Logo\" class=\"babylai:w-20 babylai:h-20\" />\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: HeaderComponent, selector: "app-header", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoadingComponent, decorators: [{
type: Component,
args: [{ selector: 'app-loading', standalone: true, imports: [CommonModule, HeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:flex babylai:flex-col\">\n <div class=\"babylai:rounded-3xl babylai:h-full babylai:flex babylai:flex-col babylai:gap-4\">\n <app-header (onMinimize)=\"onMinimize.emit()\" />\n <div\n class=\"babylai:flex babylai:flex-col babylai:items-center babylai:justify-center babylai:w-full babylai:h-full babylai:py-28\">\n <img [src]=\"loadingLogoUrl()\" alt=\"Animated Logo\" class=\"babylai:w-20 babylai:h-20\" />\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
class BaseDialogComponent {
isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
closeOnOverlayClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOverlayClick" }] : /* istanbul ignore next */ []));
ariaLabel = input('Dialog', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
close = output();
dialogContainer;
previousActiveElement = null;
tabKeyListener;
escapeKeyListener;
focusTimeouts = [];
focusEffectRef;
constructor() {
// Effect to handle focus trapping when dialog opens/closes
this.focusEffectRef = effect(() => {
if (this.isOpen()) {
// Use setTimeout to ensure DOM is fully rendered
const timeoutId = setTimeout(() => {
if (this.dialogContainer?.nativeElement) {
this.trapFocus();
}
}, 0);
this.focusTimeouts.push(timeoutId);
}
else {
this.releaseFocus();
}
}, ...(ngDevMode ? [{ debugName: "focusEffectRef" }] : /* istanbul ignore next */ []));
}
ngOnInit() {
// Set up Escape key listener for closing dialog
this.escapeKeyListener = (event) => {
if (event.key === 'Escape' &&
this.isOpen() &&
this.closeOnEscape() &&
!this.isLoading()) {
this.handleClose();
}
};
document.addEventListener('keydown', this.escapeKeyListener);
}
ngAfterViewInit() {
if (this.isOpen()) {
const timeoutId = setTimeout(() => {
if (this.dialogContainer?.nativeElement) {
this.trapFocus();
}
}, 0);
this.focusTimeouts.push(timeoutId);
}
}
ngOnDestroy() {
// Clean up effect
if (this.focusEffectRef) {
this.focusEffectRef.destroy();
this.focusEffectRef = undefined;
}
this.releaseFocus();
// Remove Escape key listener
if (this.escapeKeyListener) {
document.removeEventListener('keydown', this.escapeKeyListener);
this.escapeKeyListener = undefined;
}
// Clear all pending focus timeouts
this.focusTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
this.focusTimeouts = [];
}
onOverlayClick() {
if (this.closeOnOverlayClick() && !this.isLoading()) {
this.handleClose();
}
}
onDialogClick(event) {
// Prevent overlay click when clicking inside dialog
event.stopPropagation();
}
handleClose() {
if (!this.isLoading()) {
this.close.emit();
}
}
trapFocus() {
// Store the previously focused element
this.previousActiveElement = document.activeElement;
// Set up Tab key listener for focus trapping
this.tabKeyListener = (event) => {
if (event.key !== 'Tab' || !this.isOpen())
return;
const focusableElements = this.getFocusableElements();
if (focusableElements.length === 0) {
event.preventDefault();
return;
}
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
if (event.shiftKey) {
// Shift + Tab
if (document.activeElement === firstElement) {
event.preventDefault();
lastElement.focus();
}
}
else {
// Tab
if (document.activeElement === lastElement) {
event.preventDefault();
firstElement.focus();
}
}
};
document.addEventListener('keydown', this.tabKeyListener);
// Focus the first focusable element after a short delay to ensure DOM is ready
// If no focusable elements exist, focus the container itself
const timeoutId = setTimeout(() => {
const focusableElements = this.getFocusableElements();
if (focusableElements.length > 0) {
focusableElements[0].focus();
}
else if (this.dialogContainer?.nativeElement) {
// Fallback: focus the container itself if no focusable elements
this.dialogContainer.nativeElement.focus();
}
}, 0);
this.focusTimeouts.push(timeoutId);
}
releaseFocus() {
// Remove Tab key listener
if (this.tabKeyListener) {
document.removeEventListener('keydown', this.tabKeyListener);
this.tabKeyListener = undefined;
}
// Return focus to the previously active element
if (this.previousActiveElement &&
typeof this.previousActiveElement.focus === 'function') {
this.previousActiveElement.focus();
this.previousActiveElement = null;
}
}
getFocusableElements() {
if (!this.dialogContainer?.nativeElement)
return [];
const container = this.dialogContainer.nativeElement;
const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
return Array.from(container.querySelectorAll(selector)).filter((el) => !el.hasAttribute('disabled') && !el.hasAttribute('aria-hidden'));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BaseDialogComponent, isStandalone: true, selector: "app-base-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlayClick: { classPropertyName: "closeOnOverlayClick", publicName: "closeOnOverlayClick", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true }], ngImport: i0, template: "@if (isOpen()) {\n<div \n class=\"babylai:absolute babylai:inset-0 babylai:flex babylai:items-end babylai:justify-center babylai:border-radius-2xl babylai:z-50 babylai:bg-card-foreground/50\" \n (click)=\"onOverlayClick()\" \n role=\"dialog\" \n aria-modal=\"true\" \n [attr.aria-label]=\"ariaLabel()\"\n>\n <div class=\"babylai:bg-card babylai:rounded-t-2xl babylai:w-full\" #dialogContainer tabindex=\"-1\" (click)=\"onDialogClick($event)\">\n <ng-content></ng-content>\n @if (isLoading()) {\n <div class=\"babylai:bg-black/30 babylai:flex babylai:items-center babylai:justify-center babylai:absolute babylai:inset-0\">\n <app-loading variant=\"primary\"></app-loading>\n </div>\n }\n </div>\n</div>\n}\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingComponent, selector: "app-loading", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'app-base-dialog', standalone: true, imports: [CommonModule, LoadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n<div \n class=\"babylai:absolute babylai:inset-0 babylai:flex babylai:items-end babylai:justify-center babylai:border-radius-2xl babylai:z-50 babylai:bg-card-foreground/50\" \n (click)=\"onOverlayClick()\" \n role=\"dialog\" \n aria-modal=\"true\" \n [attr.aria-label]=\"ariaLabel()\"\n>\n <div class=\"babylai:bg-card babylai:rounded-t-2xl babylai:w-full\" #dialogContainer tabindex=\"-1\" (click)=\"onDialogClick($event)\">\n <ng-content></ng-content>\n @if (isLoading()) {\n <div class=\"babylai:bg-black/30 babylai:flex babylai:items-center babylai:justify-center babylai:absolute babylai:inset-0\">\n <app-loading variant=\"primary\"></app-loading>\n </div>\n }\n </div>\n</div>\n}\n\n" }]
}], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOverlayClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlayClick", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], dialogContainer: [{
type: ViewChild,
args: ['dialogContainer']
}] } });
class ConfirmationDialogComponent {
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
body = input('', ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
confirmText = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
cancelText = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
onConfirm = output();
onCancel = output();
onClose = output();
disableActions = computed(() => this.isLoading(), ...(ngDevMode ? [{ debugName: "disableActions" }] : /* istanbul ignore next */ []));
onCloseClick() {
this.onClose.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onConfirm: "onConfirm", onCancel: "onCancel", onClose: "onClose" }, ngImport: i0, template: "<app-base-dialog\n [isOpen]=\"true\"\n [isLoading]=\"isLoading()\"\n [ariaLabel]=\"title()\"\n (close)=\"onCloseClick()\"\n>\n <div\n class=\"babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full\"\n >\n <button\n class=\"babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground\"\n (click)=\"onCloseClick()\"\n >\n <app-icon\n name=\"solar:close-circle-line-duotone\"\n class=\"babylai:flex\"\n size=\"28px\"\n />\n </button>\n <section\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6\"\n >\n <div\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:w-20 babylai:h-20 babylai:rounded-full babylai:p-3 babylai:bg-primary/15 babylai:text-primary\"\n >\n <app-icon\n name=\"solar:chat-round-unread-bold-duotone\"\n class=\"babylai:flex\"\n size=\"56px\"\n />\n </div>\n </section>\n <h3\n class=\"babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground\"\n >\n {{ title() }}\n </h3>\n <p\n class=\"babylai:text-sm babylai:text-center babylai:text-muted-foreground\"\n >\n {{ body() }}\n </p>\n </div>\n <div\n class=\"babylai:flex babylai:justify-between babylai:gap-3 babylai:mb-5 babylai:px-6\"\n >\n <app-button\n variant=\"outline\"\n [fullWidth]=\"true\"\n [disabled]=\"disableActions()\"\n (onClick)=\"onCancel.emit()\"\n class=\"babylai:w-full\"\n >\n {{ cancelText() }}\n <app-icon name=\"solar:plain-2-bold-duotone\" class=\"babylai:flex\" />\n </app-button>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"disableActions()\"\n (onClick)=\"onConfirm.emit()\"\n class=\"babylai:w-full\"\n >\n {{ confirmText() }}\n </app-button>\n </div>\n <app-footer />\n</app-base-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: BaseDialogComponent, selector: "app-base-dialog", inputs: ["isOpen", "isLoading", "closeOnEscape", "closeOnOverlayClick", "ariaLabel"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'app-confirmation-dialog', standalone: true, imports: [
CommonModule,
ButtonComponent,
BaseDialogComponent,
IconComponent,
FooterComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-base-dialog\n [isOpen]=\"true\"\n [isLoading]=\"isLoading()\"\n [ariaLabel]=\"title()\"\n (close)=\"onCloseClick()\"\n>\n <div\n class=\"babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full\"\n >\n <button\n class=\"babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground\"\n (click)=\"onCloseClick()\"\n >\n <app-icon\n name=\"solar:close-circle-line-duotone\"\n class=\"babylai:flex\"\n size=\"28px\"\n />\n </button>\n <section\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6\"\n >\n <div\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:w-20 babylai:h-20 babylai:rounded-full babylai:p-3 babylai:bg-primary/15 babylai:text-primary\"\n >\n <app-icon\n name=\"solar:chat-round-unread-bold-duotone\"\n class=\"babylai:flex\"\n size=\"56px\"\n />\n </div>\n </section>\n <h3\n class=\"babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground\"\n >\n {{ title() }}\n </h3>\n <p\n class=\"babylai:text-sm babylai:text-center babylai:text-muted-foreground\"\n >\n {{ body() }}\n </p>\n </div>\n <div\n class=\"babylai:flex babylai:justify-between babylai:gap-3 babylai:mb-5 babylai:px-6\"\n >\n <app-button\n variant=\"outline\"\n [fullWidth]=\"true\"\n [disabled]=\"disableActions()\"\n (onClick)=\"onCancel.emit()\"\n class=\"babylai:w-full\"\n >\n {{ cancelText() }}\n <app-icon name=\"solar:plain-2-bold-duotone\" class=\"babylai:flex\" />\n </app-button>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"disableActions()\"\n (onClick)=\"onConfirm.emit()\"\n class=\"babylai:w-full\"\n >\n {{ confirmText() }}\n </app-button>\n </div>\n <app-footer />\n</app-base-dialog>\n" }]
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], body: [{ type: i0.Input, args: [{ isSignal: true, alias: "body", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], onConfirm: [{ type: i0.Output, args: ["onConfirm"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
class ReviewDialogComponent {
isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
showCommentField = input(true, ...(ngDevMode ? [{ debugName: "showCommentField" }] : /* istanbul ignore next */ []));
close = output();
submitReview = output();
skip = output();
rating = signal(0, ...(ngDevMode ? [{ debugName: "rating" }] : /* istanbul ignore next */ []));
comment = signal('', ...(ngDevMode ? [{ debugName: "comment" }] : /* istanbul ignore next */ []));
// Validation errors
ratingError = signal('', ...(ngDevMode ? [{ debugName: "ratingError" }] : /* istanbul ignore next */ []));
commentError = signal('', ...(ngDevMode ? [{ debugName: "commentError" }] : /* istanbul ignore next */ []));
onRatingClick(starIndex) {
this.rating.set(starIndex + 1);
this.clearRatingError();
}
onCommentChange() {
this.clearCommentError();
}
onClose() {
if (!this.isSubmitting()) {
this.close.emit();
}
}
onDialogClose() {
this.onClose();
}
onSubmitReview() {
if (this.validateForm() && !this.isSubmitting()) {
this.submitReview.emit({
rating: this.rating(),
comment: this.comment().trim(),
});
}
}
onSkip() {
if (!this.isSubmitting()) {
this.skip.emit();
this.resetForm();
}
}
validateForm() {
let isValid = true;
// Validate rating
if (this.rating() < 1 || this.rating() > 5) {
this.ratingError.set('Rating must be between 1 and 5.');
isValid = false;
}
// Validate comment only if comment field is shown
if (this.showCommentField()) {
const trimmedComment = this.comment().trim();
if (trimmedComment.length < 10) {
this.commentError.set('Comment must be at least 10 characters long.');
isValid = false;
}
else if (trimmedComment.length > 500) {
this.commentError.set('Comment must not exceed 500 characters.');
isValid = false;
}
}
return isValid;
}
clearRatingError() {
this.ratingError.set('');
}
clearCommentError() {
this.commentError.set('');
}
resetForm() {
this.rating.set(0);
this.comment.set('');
this.ratingError.set('');
this.commentError.set('');
}
getStarsArray() {
return Array(5)
.fill(0)
.map((_, index) => index);
}
isStarFilled(starIndex) {
return starIndex < this.rating();
}
getCommentLength() {
return this.comment().trim().length;
}
getCommentMaxLength() {
return 500;
}
getCommentMinLength() {
return 10;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ReviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ReviewDialogComponent, isStandalone: true, selector: "app-review-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, showCommentField: { classPropertyName: "showCommentField", publicName: "showCommentField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", submitReview: "submitReview", skip: "skip" }, ngImport: i0, template: "<app-base-dialog\n [isOpen]=\"isOpen()\"\n [ariaLabel]=\"'ReviewDialogTitle' | translate\"\n (close)=\"onDialogClose()\"\n>\n <div\n class=\"babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full\"\n >\n <button\n class=\"babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground\"\n (click)=\"onClose()\"\n >\n <app-icon\n name=\"solar:close-circle-line-duotone\"\n class=\"babylai:flex\"\n size=\"28px\"\n />\n </button>\n <section\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6\"\n >\n <!-- Rating Section -->\n <div>\n <label class=\"babylai:sr-only\">\n {{ \"ReviewDialogRatingLabel\" | translate }}\n </label>\n <div class=\"babylai:inline-flex babylai:gap-2\">\n @for (star of getStarsArray(); track star) {\n <button\n class=\"babylai:hover:text-[#F49E00] babylai:border-0 babylai:bg-transparent babylai:p-0\"\n [class.babylai:text-black-white-200]=\"!isStarFilled(star)\"\n [class.babylai:dark:text-muted-foreground]=\"!isStarFilled(star)\"\n [class.babylai:text-[#F49E00]]=\"isStarFilled(star)\"\n [disabled]=\"isSubmitting()\"\n (click)=\"onRatingClick(star)\"\n [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n [attr.aria-pressed]=\"isStarFilled(star)\"\n role=\"button\"\n type=\"button\"\n (keydown.enter)=\"onRatingClick(star)\"\n (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n >\n <app-icon\n name=\"solar:star-bold\"\n class=\"babylai:flex\"\n size=\"53px\"\n />\n </button>\n }\n </div>\n @if (ratingError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ ratingError() }}\n </div>\n }\n </div>\n </section>\n <h3\n class=\"babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground\"\n >\n {{ \"ReviewDialogTitle\" | translate }}\n </h3>\n <p\n class=\"babylai:text-xs babylai:text-center babylai:text-muted-foreground babylai:mb-4 babylai:leading-snug\"\n >\n {{ \"ReviewDialogDescription\" | translate }}\n </p>\n\n @if (rating() > 0) {\n <div class=\"babylai:flex babylai:flex-col babylai:gap-6 babylai:mt-6\">\n <p\n class=\"babylai:text-sm babylai:text-card-foreground babylai:leading-snug\"\n >\n {{ \"ReviewDialogCommentLabel\" | translate }}\n </p>\n <div class=\"babylai:flex babylai:flex-col babylai:gap-2\">\n <textarea\n class=\"babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary babylai:border-black-white-200\"\n [class.babylai:border-destructive]=\"commentError()\"\n [ngModel]=\"comment()\"\n (ngModelChange)=\"comment.set($event); onCommentChange()\"\n [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n [maxlength]=\"getCommentMaxLength()\"\n [disabled]=\"isSubmitting()\"\n rows=\"4\"\n ></textarea>\n <div class=\"babylai:flex babylai:flex-col\">\n <div\n class=\"babylai:text-card-foreground babylai:text-sm babylai:whitespace-nowrap babylai:opacity-70\"\n >\n {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n </div>\n @if (commentError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ commentError() }}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Actions -->\n <div\n class=\"babylai:flex babylai:justify-between babylai:gap-3 babylai:mb-5 babylai:px-6\"\n >\n <app-button\n variant=\"outline\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting()\"\n (onClick)=\"onSkip()\"\n class=\"babylai:w-full\"\n >\n {{ \"ReviewDialogSkipButton\" | translate }}\n </app-button>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting()\"\n (onClick)=\"onSubmitReview()\"\n class=\"babylai:w-full babylai:inline-flex babylai:items-center babylai:justify-center babylai:gap-2\"\n >\n @if (isSubmitting()) {\n <app-icon\n name=\"line-md:loading-twotone-loop\"\n class=\"babylai:flex babylai:shrink-0\"\n size=\"20px\"\n />\n Submitting...\n } @else {\n {{ \"ReviewDialogSubmitButton\" | translate }}\n }\n </app-button>\n </div>\n <app-footer />\n</app-base-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: BaseDialogComponent, selector: "app-base-dialog", inputs: ["isOpen", "isLoading", "closeOnEscape", "closeOnOverlayClick", "ariaLabel"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ReviewDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'app-review-dialog', standalone: true, imports: [
CommonModule,
FormsModule,
ButtonComponent,
BaseDialogComponent,
TranslatePipe,
IconComponent,
FooterComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-base-dialog\n [isOpen]=\"isOpen()\"\n [ariaLabel]=\"'ReviewDialogTitle' | translate\"\n (close)=\"onDialogClose()\"\n>\n <div\n class=\"babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full\"\n >\n <button\n class=\"babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground\"\n (click)=\"onClose()\"\n >\n <app-icon\n name=\"solar:close-circle-line-duotone\"\n class=\"babylai:flex\"\n size=\"28px\"\n />\n </button>\n <section\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6\"\n >\n <!-- Rating Section -->\n <div>\n <label class=\"babylai:sr-only\">\n {{ \"ReviewDialogRatingLabel\" | translate }}\n </label>\n <div class=\"babylai:inline-flex babylai:gap-2\">\n @for (star of getStarsArray(); track star) {\n <button\n class=\"babylai:hover:text-[#F49E00] babylai:border-0 babylai:bg-transparent babylai:p-0\"\n [class.babylai:text-black-white-200]=\"!isStarFilled(star)\"\n [class.babylai:dark:text-muted-foreground]=\"!isStarFilled(star)\"\n [class.babylai:text-[#F49E00]]=\"isStarFilled(star)\"\n [disabled]=\"isSubmitting()\"\n (click)=\"onRatingClick(star)\"\n [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n [attr.aria-pressed]=\"isStarFilled(star)\"\n role=\"button\"\n type=\"button\"\n (keydown.enter)=\"onRatingClick(star)\"\n (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n >\n <app-icon\n name=\"solar:star-bold\"\n class=\"babylai:flex\"\n size=\"53px\"\n />\n </button>\n }\n </div>\n @if (ratingError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ ratingError() }}\n </div>\n }\n </div>\n </section>\n <h3\n class=\"babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground\"\n >\n {{ \"ReviewDialogTitle\" | translate }}\n </h3>\n <p\n class=\"babylai:text-xs babylai:text-center babylai:text-muted-foreground babylai:mb-4 babylai:leading-snug\"\n >\n {{ \"ReviewDialogDescription\" | translate }}\n </p>\n\n @if (rating() > 0) {\n <div class=\"babylai:flex babylai:flex-col babylai:gap-6 babylai:mt-6\">\n <p\n class=\"babylai:text-sm babylai:text-card-foreground babylai:leading-snug\"\n >\n {{ \"ReviewDialogCommentLabel\" | translate }}\n </p>\n <div class=\"babylai:flex babylai:flex-col babylai:gap-2\">\n <textarea\n class=\"babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary babylai:border-black-white-200\"\n [class.babylai:border-destructive]=\"commentError()\"\n [ngModel]=\"comment()\"\n (ngModelChange)=\"comment.set($event); onCommentChange()\"\n [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n [maxlength]=\"getCommentMaxLength()\"\n [disabled]=\"isSubmitting()\"\n rows=\"4\"\n ></textarea>\n <div class=\"babylai:flex babylai:flex-col\">\n <div\n class=\"babylai:text-card-foreground babylai:text-sm babylai:whitespace-nowrap babylai:opacity-70\"\n >\n {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n </div>\n @if (commentError()) {\n <div\n class=\"babylai:text-destructive babylai:text-sm babylai:mt-1 babylai:flex babylai:items-center babylai:gap-1\"\n >\n {{ commentError() }}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Actions -->\n <div\n class=\"babylai:flex babylai:justify-between babylai:gap-3 babylai:mb-5 babylai:px-6\"\n >\n <app-button\n variant=\"outline\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting()\"\n (onClick)=\"onSkip()\"\n class=\"babylai:w-full\"\n >\n {{ \"ReviewDialogSkipButton\" | translate }}\n </app-button>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting()\"\n (onClick)=\"onSubmitReview()\"\n class=\"babylai:w-full babylai:inline-flex babylai:items-center babylai:justify-center babylai:gap-2\"\n >\n @if (isSubmitting()) {\n <app-icon\n name=\"line-md:loading-twotone-loop\"\n class=\"babylai:flex babylai:shrink-0\"\n size=\"20px\"\n />\n Submitting...\n } @else {\n {{ \"ReviewDialogSubmitButton\" | translate }}\n }\n </app-button>\n </div>\n <app-footer />\n</app-base-dialog>\n" }]
}], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], showCommentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCommentField", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], submitReview: [{ type: i0.Output, args: ["submitReview"] }], skip: [{ type: i0.Output, args: ["skip"] }] } });
// Main header components
class ChatInputComponent {
// Using input() signals - automatically trigger change detection on updates
isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : /* istanbul ignore next */ []));
assistantStatus = input('', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
set sessionId(value) {
this._sessionId = value;
// When sessionId becomes available, upload any pending files
if (value) {
// Use setTimeout to ensure the component has updated
setTimeout(() => this.uploadPendingFiles(), 0);
}
}
get sessionId() {
return this._sessionId;
}
_sessionId = null;
sendMessage = new EventEmitter();
/** Emitted when user adds attachments but there is no session yet (so parent can create one and start upload) */
requestSessionForAttachments = new EventEmitter();
messageInput;
fileInput;
fileUploadService = inject(FileUploadService);
// Local state as signal
messageContent = signal('', ...(ngDevMode ? [{ debugName: "messageContent" }] : /* istanbul ignore next */ []));
selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
previewImageUrl = signal(null, ...(ngDevMode ? [{ debugName: "previewImageUrl" }] : /* istanbul ignore next */ []));
previewImageIndex = signal(-1, ...(ngDevMode ? [{ debugName: "previewImageIndex" }] : /* istanbul ignore next */ []));
isUploading = computed(() => this.selectedFiles().some((f) => f.uploading), ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
hasUploadErrors = computed(() => {
const files = this.selectedFiles();
// Only return true if there are files AND all of them have errors
// If no files are selected, there are no errors
return (files.length > 0 &&
files.every((f) => f.error !== null && f.uploadedId === null));
}, ...(ngDevMode ? [{ debugName: "hasUploadErrors" }] : /* istanbul ignore next */ []));
/** True when any file is still uploading or pending (no uploadedId yet) */
hasPendingOrUploadingFiles = computed(() => this.selectedFiles().some((f) => f.uploading || (!f.uploadedId && !f.error)), ...(ngDevMode ? [{ debugName: "hasPendingOrUploadingFiles" }] : /* istanbul ignore next */ []));
canSend = computed(() => {
const hasText = this.messageContent().trim().length > 0;
const hasUploadedFiles = this.selectedFiles().some((f) => !!f.uploadedId);
const notTyping = this.assistantStatus() !== 'typing';
const notClosed = !this.isChatClosed();
// Allow sending only when (text or uploaded files) and no files still uploading/pending
return ((hasText || hasUploadedFiles) &&
!this.hasPendingOrUploadingFiles() &&
notTyping &&
notClosed);
}, ...(ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []));
ngOnInit() {
// Component initialization
}
ngOnDestroy() {
// Clean up blob URLs
this.selectedFiles().forEach((file) => {
if (file.previewUrl.startsWith('blob:')) {
URL.revokeObjectURL(file.previewUrl);
}
});
if (this.previewImageUrl()?.startsWith('blob:')) {
URL.revokeObjectURL(this.previewImageUrl());
}
}
handleFileSelect(event) {
const input = event.target;
const files = input.files;
if (!files || files.length === 0)
return;
const imageFiles = Array.from(files).filter((file) => file.type.startsWith('image/'));
if (imageFiles.length === 0) {
window.alert('Please select image files only');
return;
}
// Create preview URLs and add to selected files
const newFiles = imageFiles.map((file) => ({
file,
previewUrl: URL.createObjectURL(file),
uploading: false,
uploadedId: null,
error: null,
}));
this.selectedFiles.update((current) => [...current, ...newFiles]);
// Start uploading if session exists; otherwise ask parent to create session so we can upload
if (this.sessionId) {
this.uploadFiles(imageFiles);
}
else {
this.requestSessionForAttachments.emit();
}
// Reset file input
if (input) {
input.value = '';
}
}
handleAttachClick() {
this.fileInput?.nativeElement?.click();
}
removeFile(index) {
const file = this.selectedFiles()[index];
if (file.previewUrl.startsWith('blob:')) {
URL.revokeObjectURL(file.previewUrl);
}
this.selectedFiles.update((current) => current.filter((_, i) => i !== index));
}
/**
* Upload pending files that don't have an uploadedId yet
*/
uploadPendingFiles() {
if (!this.sessionId)
return;
const pendingFiles = this.selectedFiles().filter((f) => !f.uploadedId && !f.uploading && !f.error);
if (pendingFiles.length > 0) {
const filesToUpload = pendingFiles.map((f) => f.file);
this.uploadFiles(filesToUpload);
}
}
uploadFiles(files) {
if (!this.sessionId || files.length === 0) {
// If no sessionId, files will be uploaded later when session is created
// Don't mark them as error - just wait
return;
}
// Create a map of file names to track which file corresponds to which result
const fileMap = new Map();
files.forEach((file, index) => {
fileMap.set(file, index);
});
// Mark files as uploading
this.selectedFiles.update((current) => current.map((f) => {
if (files.includes(f.file)) {
return { ...f, uploading: true, error: null };
}
return f;
}));
// Upload files
this.fileUploadService
.uploadFiles(this.sessionId, files)
.pipe(catchError$1((error) => {
console.error('Error uploading files:', error);
// Mark all uploading files as failed
this.selectedFiles.update((current) => current.map((f) => {
if (files.includes(f.file)) {
return {
...f,
uploading: false,
error: 'Upload failed',
};
}
return f;
}));
return of([]);
}))
.subscribe((results) => {
// Update selected files with upload results
// Match results to files by index
this.selectedFiles.update((current) => {
return current.map((f) => {
const fileIndex = fileMap.get(f.file);
if (fileIndex !== undefined && results[fileIndex]) {
const result = results[fileIndex];
return {
...f,
uploading: false,
uploadedId: result.success ? result.fileId : null,
error: result.success ? null : result.error || 'Upload failed',
};
}
return f;
});
});
});
}
handleSendMessage() {
if (!this.canSend())
return;
// Send is only enabled when all files are uploaded, so we only emit uploaded IDs
const uploadedIds = this.selectedFiles()
.map((f) => f.uploadedId)
.filter((id) => id !== null);
this.sendMessage.emit({
text: this.messageContent(),
attachmentIds: uploadedIds,
});
// Clear message and files
this.messageContent.set('');
this.selectedFiles().forEach((f) => {
if (f.previewUrl.startsWith('blob:')) {
URL.revokeObjectURL(f.previewUrl);
}
});
this.selectedFiles.set([]);
this.adjustTextareaHeight();
}
handlePreviewImage(index) {
const file = this.selectedFiles()[index];
if (file) {
this.previewImageUrl.set(file.previewUrl);
this.previewImageIndex.set(index);
}
}
closePreview() {
this.previewImageUrl.set(null);
this.previewImageIndex.set(-1);
}
adjustTextareaHeight() {
const textarea = this.messageInput?.nativeElement;
if (textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ChatInputComponent, isStandalone: true, selector: "app-chat-input", inputs: { isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage", requestSessionForAttachments: "requestSessionForAttachments" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"babylai:relative babylai:w-full\">\n @if (selectedFiles().length > 0) {\n <div\n class=\"babylai:scrollbar-thin babylai:flex babylai:gap-2 babylai:mb-2 babylai:overflow-x-auto babylai:bg-card babylai:rounded-2xl babylai:p-3\"\n style=\"scrollbar-width: thin\"\n >\n @for (file of selectedFiles(); track $index) {\n <div\n class=\"babylai:relative babylai:w-[50px] babylai:h-[50px] babylai:rounded-md babylai:shrink-0 babylai:border babylai:border-black-white-200\"\n [style.background-color]=\"'var(--muted)'\"\n >\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.file.name\"\n class=\"babylai:w-full babylai:h-full babylai:object-cover babylai:transition-opacity babylai:duration-200\"\n [class.babylai:opacity-50]=\"file.uploading\"\n [class.babylai:opacity-100]=\"!file.uploading\"\n [class.babylai:hover:opacity-80]=\"!file.uploading\"\n [class.babylai:cursor-pointer]=\"!file.uploading\"\n [class.babylai:pointer-events-none]=\"file.uploading\"\n (click)=\"handlePreviewImage($index)\"\n />\n @if (file.uploading) {\n <div\n class=\"babylai:absolute babylai:inset-0 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-md babylai:bg-black/50\"\n aria-hidden=\"true\"\n >\n <app-icon\n name=\"line-md:loading-twotone-loop\"\n class=\"babylai:flex babylai:text-white babylai:text-2xl\"\n />\n </div>\n }\n @if (file.error) {\n <div\n class=\"babylai:absolute babylai:top-0.5 babylai:right-0.5 babylai:w-4 babylai:h-4 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full text-white babylai:text-xs babylai:font-semibold\"\n [style.background-color]=\"'var(--destructive)'\"\n [title]=\"file.error\"\n >\n !\n </div>\n }\n <button\n type=\"button\"\n class=\"babylai:border-0 babylai:p-0 babylai:absolute babylai:-top-2 babylai:-right-2 babylai:bg-destructive babylai:text-white babylai:rounded-full babylai:w-5 babylai:h-5 babylai:flex babylai:items-center babylai:justify-center babylai:cursor-pointer\"\n (click)=\"removeFile($index)\"\n aria-label=\"Remove image\"\n >\n <app-icon\n name=\"solar:close-circle-line-duotone\"\n class=\"babylai:flex\"\n />\n </button>\n </div>\n }\n </div>\n }\n\n <form\n (ngSubmit)=\"handleSendMessage()\"\n class=\"babylai:relative babylai:w-full\"\n >\n <div\n class=\"babylai:flex babylai:items-center babylai:gap-2 babylai:relative babylai:rounded-full babylai:bg-card babylai:py-3 babylai:px-4\"\n >\n <input\n type=\"file\"\n #fileInput\n accept=\"image/*\"\n multiple\n (change)=\"handleFileSelect($event)\"\n class=\"babylai:hidden\"\n [disabled]=\"isChatClosed()\"\n />\n\n <div class=\"babylai:border-e babylai:border-border babylai:pe-2\">\n <button\n type=\"button\"\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:border-0 babylai:rounded-full babylai:w-8 babylai:h-8 babylai:cursor-pointer babylai:bg-secondary babylai:text-muted-foreground babylai:hover:text-primary-500 babylai:transition-colors babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed\"\n (click)=\"handleAttachClick()\"\n [disabled]=\"isChatClosed()\"\n aria-label=\"Attach image\"\n >\n <app-icon name=\"solar:paperclip-bold-duotone\" class=\"babylai:flex\" />\n </button>\n </div>\n\n <input\n type=\"text\"\n [ngModel]=\"messageContent()\"\n (ngModelChange)=\"messageContent.set($event)\"\n name=\"messageContent\"\n [placeholder]=\"'ChatPlaceholder' | translate\"\n [disabled]=\"isChatClosed()\"\n [attr.aria-label]=\"'Chat input field'\"\n [attr.aria-disabled]=\"isChatClosed()\"\n role=\"textbox\"\n class=\"babylai:flex-1 babylai:py-2 babylai:px-2 babylai:bg-transparent babylai:outline-none babylai:text-sm babylai:border-none babylai:text-card-foreground babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed\"\n dir=\"auto\"\n #messageInput\n (keydown.enter)=\"handleSendMessage()\"\n (keydown.escape)=\"messageContent.set('')\"\n />\n\n <button\n type=\"submit\"\n [disabled]=\"!canSend()\"\n [attr.aria-label]=\"'Send message'\"\n class=\"babylai:border-0 babylai:rounded-full babylai:bg-primary-500 babylai:hover:bg-primary-600 babylai:w-8 babylai:h-8 babylai:p-0 babylai:flex babylai:items-center babylai:justify-center babylai:disabled:opacity-50 babylai:text-white babylai:cursor-pointer babylai:disabled:cursor-not-allowed\"\n >\n <app-icon name=\"solar:plain-2-bold-duotone\" class=\"babylai:flex\" />\n </button>\n </div>\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatInputComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-input', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"babylai:relative babylai:w-full\">\n @if (selectedFiles().length > 0) {\n <div\n class=\"babylai:scrollbar-thin babylai:flex babylai:gap-2 babylai:mb-2 babylai:overflow-x-auto babylai:bg-card babylai:rounded-2xl babylai:p-3\"\n style=\"scrollbar-width: thin\"\n >\n @for (file of selectedFiles(); track $index) {\n <div\n class=\"babylai:relative babylai:w-[50px] babylai:h-[50px] babylai:rounded-md babylai:shrink-0 babylai:border babylai:border-black-white-200\"\n [style.background-color]=\"'var(--muted)'\"\n >\n <img\n [src]=\"file.previewUrl\"\n [alt]=\"file.file.name\"\n class=\"babylai:w-full babylai:h-full babylai:object-cover babylai:transition-opacity babylai:duration-200\"\n [class.babylai:opacity-50]=\"file.uploading\"\n [class.babylai:opacity-100]=\"!file.uploading\"\n [class.babylai:hover:opacity-80]=\"!file.uploading\"\n [class.babylai:cursor-pointer]=\"!file.uploading\"\n [class.babylai:pointer-events-none]=\"file.uploading\"\n (click)=\"handlePreviewImage($index)\"\n />\n @if (file.uploading) {\n <div\n class=\"babylai:absolute babylai:inset-0 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-md babylai:bg-black/50\"\n aria-hidden=\"true\"\n >\n <app-icon\n name=\"line-md:loading-twotone-loop\"\n class=\"babylai:flex babylai:text-white babylai:text-2xl\"\n />\n </div>\n }\n @if (file.error) {\n <div\n class=\"babylai:absolute babylai:top-0.5 babylai:right-0.5 babylai:w-4 babylai:h-4 babylai:flex babylai:items-center babylai:justify-center babylai:rounded-full text-white babylai:text-xs babylai:font-semibold\"\n [style.background-color]=\"'var(--destructive)'\"\n [title]=\"file.error\"\n >\n !\n </div>\n }\n <button\n type=\"button\"\n class=\"babylai:border-0 babylai:p-0 babylai:absolute babylai:-top-2 babylai:-right-2 babylai:bg-destructive babylai:text-white babylai:rounded-full babylai:w-5 babylai:h-5 babylai:flex babylai:items-center babylai:justify-center babylai:cursor-pointer\"\n (click)=\"removeFile($index)\"\n aria-label=\"Remove image\"\n >\n <app-icon\n name=\"solar:close-circle-line-duotone\"\n class=\"babylai:flex\"\n />\n </button>\n </div>\n }\n </div>\n }\n\n <form\n (ngSubmit)=\"handleSendMessage()\"\n class=\"babylai:relative babylai:w-full\"\n >\n <div\n class=\"babylai:flex babylai:items-center babylai:gap-2 babylai:relative babylai:rounded-full babylai:bg-card babylai:py-3 babylai:px-4\"\n >\n <input\n type=\"file\"\n #fileInput\n accept=\"image/*\"\n multiple\n (change)=\"handleFileSelect($event)\"\n class=\"babylai:hidden\"\n [disabled]=\"isChatClosed()\"\n />\n\n <div class=\"babylai:border-e babylai:border-border babylai:pe-2\">\n <button\n type=\"button\"\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:border-0 babylai:rounded-full babylai:w-8 babylai:h-8 babylai:cursor-pointer babylai:bg-secondary babylai:text-muted-foreground babylai:hover:text-primary-500 babylai:transition-colors babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed\"\n (click)=\"handleAttachClick()\"\n [disabled]=\"isChatClosed()\"\n aria-label=\"Attach image\"\n >\n <app-icon name=\"solar:paperclip-bold-duotone\" class=\"babylai:flex\" />\n </button>\n </div>\n\n <input\n type=\"text\"\n [ngModel]=\"messageContent()\"\n (ngModelChange)=\"messageContent.set($event)\"\n name=\"messageContent\"\n [placeholder]=\"'ChatPlaceholder' | translate\"\n [disabled]=\"isChatClosed()\"\n [attr.aria-label]=\"'Chat input field'\"\n [attr.aria-disabled]=\"isChatClosed()\"\n role=\"textbox\"\n class=\"babylai:flex-1 babylai:py-2 babylai:px-2 babylai:bg-transparent babylai:outline-none babylai:text-sm babylai:border-none babylai:text-card-foreground babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed\"\n dir=\"auto\"\n #messageInput\n (keydown.enter)=\"handleSendMessage()\"\n (keydown.escape)=\"messageContent.set('')\"\n />\n\n <button\n type=\"submit\"\n [disabled]=\"!canSend()\"\n [attr.aria-label]=\"'Send message'\"\n class=\"babylai:border-0 babylai:rounded-full babylai:bg-primary-500 babylai:hover:bg-primary-600 babylai:w-8 babylai:h-8 babylai:p-0 babylai:flex babylai:items-center babylai:justify-center babylai:disabled:opacity-50 babylai:text-white babylai:cursor-pointer babylai:disabled:cursor-not-allowed\"\n >\n <app-icon name=\"solar:plain-2-bold-duotone\" class=\"babylai:flex\" />\n </button>\n </div>\n </form>\n</div>\n" }]
}], propDecorators: { isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], sessionId: [{
type: Input
}], sendMessage: [{
type: Output
}], requestSessionForAttachments: [{
type: Output
}], messageInput: [{
type: ViewChild,
args: ['messageInput']
}], fileInput: [{
type: ViewChild,
args: ['fileInput']
}] } });
class ChatScreenComponent {
showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : /* istanbul ignore next */ []));
messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : /* istanbul ignore next */ []));
assistantStatus = input('idle', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : /* istanbul ignore next */ []));
isAblyConnected = input(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : /* istanbul ignore next */ []));
isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
chatIsLoading = input(false, ...(ngDevMode ? [{ debugName: "chatIsLoading" }] : /* istanbul ignore next */ []));
sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : /* istanbul ignore next */ []));
selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
selectedNestedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedNestedOption" }] : /* istanbul ignore next */ []));
isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : /* istanbul ignore next */ []));
endChat = output();
back = output();
onMinimize = output();
sendMessage = output();
requestSessionForAttachments = output();
reviewSubmit = output();
reviewSkip = output();
handleEndChat() {
this.endChat.emit();
}
handleBack() {
this.back.emit();
}
handleMinimize() {
this.onMinimize.emit();
}
handleSendMessage(event) {
this.sendMessage.emit(event);
}
handleReviewSubmit(reviewData) {
this.reviewSubmit.emit(reviewData);
}
handleReviewSkip() {
this.reviewSkip.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ChatScreenComponent, isStandalone: true, selector: "app-chat-screen", inputs: { showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, isAblyConnected: { classPropertyName: "isAblyConnected", publicName: "isAblyConnected", isSignal: true, isRequired: false, transformFunction: null }, isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, chatIsLoading: { classPropertyName: "chatIsLoading", publicName: "chatIsLoading", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, selectedNestedOption: { classPropertyName: "selectedNestedOption", publicName: "selectedNestedOption", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endChat: "endChat", back: "back", onMinimize: "onMinimize", sendMessage: "sendMessage", requestSessionForAttachments: "requestSessionForAttachments", reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip" }, ngImport: i0, template: "<app-chat-header\n [showBackButton]=\"showChat()\"\n [selectedOptionTitle]=\"\n selectedNestedOption()?.title || selectedOption()?.title || null\n \"\n (onClose)=\"handleEndChat()\"\n (onBack)=\"handleBack()\"\n (onMinimize)=\"handleMinimize()\"\n [language]=\"currentLang()\"\n></app-chat-header>\n\n<app-chat\n class=\"babylai:flex babylai:flex-col babylai:flex-1 babylai:overflow-y-auto babylai:p-4\"\n [messages]=\"messages()\"\n [needsAgent]=\"needsAgent()\"\n [assistantStatus]=\"assistantStatus()\"\n [currentLang]=\"currentLang()\"\n [loading]=\"chatIsLoading()\"\n [isSubmittingReview]=\"isSubmittingReview()\"\n (reviewSubmit)=\"handleReviewSubmit($event)\"\n (reviewSkip)=\"handleReviewSkip()\"\n></app-chat>\n\n<app-chat-input\n [isChatClosed]=\"isChatClosed()\"\n [assistantStatus]=\"assistantStatus()\"\n [currentLang]=\"currentLang()\"\n [sessionId]=\"sessionId()\"\n (sendMessage)=\"handleSendMessage($event)\"\n (requestSessionForAttachments)=\"requestSessionForAttachments.emit()\"\n class=\"babylai:px-4 babylai:mb-2\"\n/>\n\n<app-footer />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "language", "selectedOptionTitle"], outputs: ["onBack", "onClose", "onMinimize"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "currentLang", "loading", "isSubmittingReview"], outputs: ["reviewSubmit", "reviewSkip"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "component", type: ChatInputComponent, selector: "app-chat-input", inputs: ["isChatClosed", "assistantStatus", "currentLang", "sessionId"], outputs: ["sendMessage", "requestSessionForAttachments"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ChatScreenComponent, decorators: [{
type: Component,
args: [{ selector: 'app-chat-screen', standalone: true, imports: [
CommonModule,
ChatHeaderComponent,
ChatComponent,
FooterComponent,
ChatInputComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-chat-header\n [showBackButton]=\"showChat()\"\n [selectedOptionTitle]=\"\n selectedNestedOption()?.title || selectedOption()?.title || null\n \"\n (onClose)=\"handleEndChat()\"\n (onBack)=\"handleBack()\"\n (onMinimize)=\"handleMinimize()\"\n [language]=\"currentLang()\"\n></app-chat-header>\n\n<app-chat\n class=\"babylai:flex babylai:flex-col babylai:flex-1 babylai:overflow-y-auto babylai:p-4\"\n [messages]=\"messages()\"\n [needsAgent]=\"needsAgent()\"\n [assistantStatus]=\"assistantStatus()\"\n [currentLang]=\"currentLang()\"\n [loading]=\"chatIsLoading()\"\n [isSubmittingReview]=\"isSubmittingReview()\"\n (reviewSubmit)=\"handleReviewSubmit($event)\"\n (reviewSkip)=\"handleReviewSkip()\"\n></app-chat>\n\n<app-chat-input\n [isChatClosed]=\"isChatClosed()\"\n [assistantStatus]=\"assistantStatus()\"\n [currentLang]=\"currentLang()\"\n [sessionId]=\"sessionId()\"\n (sendMessage)=\"handleSendMessage($event)\"\n (requestSessionForAttachments)=\"requestSessionForAttachments.emit()\"\n class=\"babylai:px-4 babylai:mb-2\"\n/>\n\n<app-footer />\n" }]
}], propDecorators: { showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], isAblyConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAblyConnected", required: false }] }], isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], chatIsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatIsLoading", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], selectedNestedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNestedOption", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], endChat: [{ type: i0.Output, args: ["endChat"] }], back: [{ type: i0.Output, args: ["back"] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }], sendMessage: [{ type: i0.Output, args: ["sendMessage"] }], requestSessionForAttachments: [{ type: i0.Output, args: ["requestSessionForAttachments"] }], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }] } });
class CompanyCardComponent {
title = input('BabylAI', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
description = input('Smart solutions for customer service', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
iconUrl = input('', ...(ngDevMode ? [{ debugName: "iconUrl" }] : /* istanbul ignore next */ []));
hasIconUrl = computed(() => {
const url = this.iconUrl();
return !!url && url.trim().length > 0;
}, ...(ngDevMode ? [{ debugName: "hasIconUrl" }] : /* istanbul ignore next */ []));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CompanyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CompanyCardComponent, isStandalone: true, selector: "app-company-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, iconUrl: { classPropertyName: "iconUrl", publicName: "iconUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"babylai:border-b babylai:border-black-white-200\">\n <div\n class=\"babylai:flex babylai:items-center babylai:gap-3 babylai:p-6 babylai:mb-6 babylai:rounded-3xl babylai:border babylai:border-black-white-200 babylai:bg-card\"\n >\n <!-- Left Icon -->\n @if (hasIconUrl()) {\n <div\n class=\"babylai:shrink-0 babylai:w-12 babylai:h-12 babylai:rounded-md babylai:overflow-hidden\"\n >\n <img\n [src]=\"iconUrl()!\"\n [alt]=\"title() + ' logo'\"\n class=\"babylai:w-full babylai:h-full babylai:object-contain\"\n />\n </div>\n }\n\n <!-- Center Content -->\n <div class=\"babylai:flex-1 babylai:min-w-0 babylai:text-start\">\n <h3\n class=\"babylai:text-lg babylai:font-semibold babylai:mb-1 babylai:text-card-foreground\"\n dir=\"auto\"\n >\n {{ title() }}\n </h3>\n <p class=\"babylai:text-sm babylai:text-muted-foreground\" dir=\"auto\">\n {{ description() }}\n </p>\n </div>\n </div>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CompanyCardComponent, decorators: [{
type: Component,
args: [{ selector: 'app-company-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"babylai:border-b babylai:border-black-white-200\">\n <div\n class=\"babylai:flex babylai:items-center babylai:gap-3 babylai:p-6 babylai:mb-6 babylai:rounded-3xl babylai:border babylai:border-black-white-200 babylai:bg-card\"\n >\n <!-- Left Icon -->\n @if (hasIconUrl()) {\n <div\n class=\"babylai:shrink-0 babylai:w-12 babylai:h-12 babylai:rounded-md babylai:overflow-hidden\"\n >\n <img\n [src]=\"iconUrl()!\"\n [alt]=\"title() + ' logo'\"\n class=\"babylai:w-full babylai:h-full babylai:object-contain\"\n />\n </div>\n }\n\n <!-- Center Content -->\n <div class=\"babylai:flex-1 babylai:min-w-0 babylai:text-start\">\n <h3\n class=\"babylai:text-lg babylai:font-semibold babylai:mb-1 babylai:text-card-foreground\"\n dir=\"auto\"\n >\n {{ title() }}\n </h3>\n <p class=\"babylai:text-sm babylai:text-muted-foreground\" dir=\"auto\">\n {{ description() }}\n </p>\n </div>\n </div>\n</section>\n" }]
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], iconUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconUrl", required: false }] }] } });
class HelpButtonComponent {
isPopupOpen = input(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
togglePopup = output();
handleTogglePopup() {
this.togglePopup.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: HelpButtonComponent, isStandalone: true, selector: "app-help-button", inputs: { isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { togglePopup: "togglePopup" }, ngImport: i0, template: "<button\n class=\"babylai:fixed babylai:z-50 babylai:bottom-4 babylai:right-4 babylai:p-4 babylai:rounded-full babylai:bg-primary-500 babylai:flex babylai:items-center babylai:justify-center babylai:border-[0.5px] babylai:border-black-white-50\"\n (click)=\"handleTogglePopup()\"\n type=\"button\"\n [attr.aria-label]=\"'Toggle help center'\"\n [attr.aria-expanded]=\"isPopupOpen()\"\n [attr.aria-haspopup]=\"true\"\n (keydown.enter)=\"handleTogglePopup()\"\n (keydown.space)=\"$event.preventDefault(); handleTogglePopup()\"\n>\n <svg\n class=\"babylai:w-8 babylai:h-8 babylai:text-primary-500\"\n viewBox=\"0 0 55 53\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"currentColor\"\n />\n </svg>\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'app-help-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"babylai:fixed babylai:z-50 babylai:bottom-4 babylai:right-4 babylai:p-4 babylai:rounded-full babylai:bg-primary-500 babylai:flex babylai:items-center babylai:justify-center babylai:border-[0.5px] babylai:border-black-white-50\"\n (click)=\"handleTogglePopup()\"\n type=\"button\"\n [attr.aria-label]=\"'Toggle help center'\"\n [attr.aria-expanded]=\"isPopupOpen()\"\n [attr.aria-haspopup]=\"true\"\n (keydown.enter)=\"handleTogglePopup()\"\n (keydown.space)=\"$event.preventDefault(); handleTogglePopup()\"\n>\n <svg\n class=\"babylai:w-8 babylai:h-8 babylai:text-primary-500\"\n viewBox=\"0 0 55 53\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"currentColor\"\n />\n </svg>\n</button>\n" }]
}], propDecorators: { isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], togglePopup: [{ type: i0.Output, args: ["togglePopup"] }] } });
class ErrorStateComponent {
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
onMinimize = output();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ErrorStateComponent, isStandalone: true, selector: "app-error-state", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMinimize: "onMinimize" }, ngImport: i0, template: "<div\n class=\"babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:flex babylai:flex-col\">\n <div class=\"babylai:rounded-3xl babylai:h-full babylai:flex babylai:flex-col babylai:gap-4\">\n <app-header (onMinimize)=\"onMinimize.emit()\" />\n <div\n class=\"babylai:flex babylai:flex-col babylai:items-center babylai:justify-center babylai:w-full babylai:h-full babylai:py-28 babylai:p-4\">\n <span class=\"babylai:text-secondary-foreground babylai:text-lg\">Error: {{ error() }}</span>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorStateComponent, decorators: [{
type: Component,
args: [{ selector: 'app-error-state', imports: [HeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:flex babylai:flex-col\">\n <div class=\"babylai:rounded-3xl babylai:h-full babylai:flex babylai:flex-col babylai:gap-4\">\n <app-header (onMinimize)=\"onMinimize.emit()\" />\n <div\n class=\"babylai:flex babylai:flex-col babylai:items-center babylai:justify-center babylai:w-full babylai:h-full babylai:py-28 babylai:p-4\">\n <span class=\"babylai:text-secondary-foreground babylai:text-lg\">Error: {{ error() }}</span>\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
class HelpscreenOptionComponent {
option = input.required(...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
optionSelected = output();
select() {
this.optionSelected.emit(this.option().id);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpscreenOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HelpscreenOptionComponent, isStandalone: true, selector: "app-helpscreen-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, ngImport: i0, template: "<div\n [id]=\"option().id\"\n class=\"babylai:flex babylai:flex-col babylai:gap-2 babylai:p-6 babylai:rounded-3xl babylai:text-start babylai:border babylai:border-black-white-200 babylai:bg-card babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:ease-out babylai:active:scale-[0.98] babylai:active:opacity-95\"\n [class.babylai:ring]=\"isSelected()\"\n [class.babylai:ring-primary-500]=\"isSelected()\"\n [class.babylai:shadow-md]=\"isSelected()\"\n (click)=\"select()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"option().title + (isSelected() ? ' (selected)' : '')\"\n [attr.aria-pressed]=\"isSelected()\"\n (keydown.enter)=\"select()\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <h4\n class=\"babylai:text-base! babylai:font-semibold! babylai:text-card-foreground\"\n dir=\"auto\"\n >\n {{ option().title }}\n </h4>\n @if (option().paragraphs && option().paragraphs.length > 0) {\n <p\n class=\"babylai:text-sm babylai:text-muted-foreground babylai:leading-snug\"\n dir=\"auto\"\n >\n {{ option().paragraphs[0] }}\n </p>\n }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpscreenOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'app-helpscreen-option', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"option().id\"\n class=\"babylai:flex babylai:flex-col babylai:gap-2 babylai:p-6 babylai:rounded-3xl babylai:text-start babylai:border babylai:border-black-white-200 babylai:bg-card babylai:cursor-pointer babylai:transition-all babylai:duration-200 babylai:ease-out babylai:active:scale-[0.98] babylai:active:opacity-95\"\n [class.babylai:ring]=\"isSelected()\"\n [class.babylai:ring-primary-500]=\"isSelected()\"\n [class.babylai:shadow-md]=\"isSelected()\"\n (click)=\"select()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"option().title + (isSelected() ? ' (selected)' : '')\"\n [attr.aria-pressed]=\"isSelected()\"\n (keydown.enter)=\"select()\"\n (keydown.space)=\"$event.preventDefault(); select()\"\n>\n <h4\n class=\"babylai:text-base! babylai:font-semibold! babylai:text-card-foreground\"\n dir=\"auto\"\n >\n {{ option().title }}\n </h4>\n @if (option().paragraphs && option().paragraphs.length > 0) {\n <p\n class=\"babylai:text-sm babylai:text-muted-foreground babylai:leading-snug\"\n dir=\"auto\"\n >\n {{ option().paragraphs[0] }}\n </p>\n }\n</div>\n" }]
}], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
class HelpscreenListComponent {
helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : /* istanbul ignore next */ []));
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
hasOngoingSession = input(false, ...(ngDevMode ? [{ debugName: "hasOngoingSession" }] : /* istanbul ignore next */ []));
handleStartNewChat = output();
selectedItemId = signal(null, ...(ngDevMode ? [{ debugName: "selectedItemId" }] : /* istanbul ignore next */ []));
selectedOption = computed(() => {
const data = this.helpScreenData();
const selectedId = this.selectedItemId();
if (!data?.options || !selectedId)
return null;
return (data.options.find((option) => option.id === selectedId) || null);
}, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
canStartChat = computed(() => {
const selected = this.selectedOption();
return selected?.chatWithUs ?? false;
}, ...(ngDevMode ? [{ debugName: "canStartChat" }] : /* istanbul ignore next */ []));
ngOnInit() { }
selectItem(itemId) {
if (this.selectedItemId() === itemId) {
// Deselect if clicking the same item
this.selectedItemId.set(null);
}
else {
this.selectedItemId.set(itemId);
}
}
ngOnDestroy() { }
handleStartChat() {
const selected = this.selectedOption();
if (selected) {
this.handleStartNewChat.emit(selected);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpscreenListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HelpscreenListComponent, isStandalone: true, selector: "app-helpscreen-list", inputs: { helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hasOngoingSession: { classPropertyName: "hasOngoingSession", publicName: "hasOngoingSession", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleStartNewChat: "handleStartNewChat" }, ngImport: i0, template: "<div class=\"babylai:flex babylai:flex-col babylai:flex-1 babylai:gap-4\">\n <div class=\"babylai:grid babylai:grid-cols-1 babylai:gap-4\">\n @for (item of helpScreenData()?.options; track item.id) {\n <app-helpscreen-option\n [option]=\"item\"\n [isSelected]=\"selectedItemId() === item.id\"\n (optionSelected)=\"selectItem($event)\"\n />\n }\n </div>\n\n @if (!hasOngoingSession()) {\n <!-- Fixed call to action button -->\n <div class=\"babylai:sticky babylai:bottom-0 babylai:z-10\">\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"!canStartChat()\"\n (onClick)=\"handleStartChat()\"\n [attr.aria-label]=\"'Start chat'\"\n >\n <span>\n {{ \"ChatNow\" | translate }}\n </span>\n <app-icon\n name=\"solar:plain-2-bold-duotone\"\n class=\"babylai:flex\"\n size=\"24px\"\n />\n </app-button>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "component", type: HelpscreenOptionComponent, selector: "app-helpscreen-option", inputs: ["option", "isSelected"], outputs: ["optionSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpscreenListComponent, decorators: [{
type: Component,
args: [{ selector: 'app-helpscreen-list', standalone: true, imports: [
CommonModule,
ButtonComponent,
TranslatePipe,
IconComponent,
HelpscreenOptionComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"babylai:flex babylai:flex-col babylai:flex-1 babylai:gap-4\">\n <div class=\"babylai:grid babylai:grid-cols-1 babylai:gap-4\">\n @for (item of helpScreenData()?.options; track item.id) {\n <app-helpscreen-option\n [option]=\"item\"\n [isSelected]=\"selectedItemId() === item.id\"\n (optionSelected)=\"selectItem($event)\"\n />\n }\n </div>\n\n @if (!hasOngoingSession()) {\n <!-- Fixed call to action button -->\n <div class=\"babylai:sticky babylai:bottom-0 babylai:z-10\">\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n [disabled]=\"!canStartChat()\"\n (onClick)=\"handleStartChat()\"\n [attr.aria-label]=\"'Start chat'\"\n >\n <span>\n {{ \"ChatNow\" | translate }}\n </span>\n <app-icon\n name=\"solar:plain-2-bold-duotone\"\n class=\"babylai:flex\"\n size=\"24px\"\n />\n </app-button>\n </div>\n }\n</div>\n" }]
}], propDecorators: { helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hasOngoingSession: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasOngoingSession", required: false }] }], handleStartNewChat: [{ type: i0.Output, args: ["handleStartNewChat"] }] } });
class HomeScreenComponent {
helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : /* istanbul ignore next */ []));
showHelpScreenData = input(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : /* istanbul ignore next */ []));
sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : /* istanbul ignore next */ []));
startNewChat = output();
onClose = output();
onMinimize = output();
handleStartNewChat(option) {
this.startNewChat.emit(option);
}
handleClosePopup() {
this.onClose.emit();
}
handleMinimizePopup() {
this.onMinimize.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HomeScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HomeScreenComponent, isStandalone: true, selector: "app-home-screen", inputs: { helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, showHelpScreenData: { classPropertyName: "showHelpScreenData", publicName: "showHelpScreenData", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startNewChat: "startNewChat", onClose: "onClose", onMinimize: "onMinimize" }, ngImport: i0, template: "<app-header (onMinimize)=\"handleMinimizePopup()\" />\n<div\n class=\"babylai:flex babylai:flex-col babylai:flex-1 babylai:overflow-y-auto babylai:px-6 babylai:pt-6 babylai:pb-4 babylai:gap-6\"\n>\n <header\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:gap-3 babylai:pb-5 babylai:border-b babylai:border-black-white-200\"\n >\n <svg\n class=\"babylai:w-8 babylai:h-8\"\n [style.color]=\"'var(--babylai-primary-color)'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 34 34\"\n fill=\"currentColor\"\n >\n <path\n d=\"M18.4785 1.12896C18.4758 1.11935 18.4745 1.11454 18.4739 1.11232C18.0509 -0.370772 15.9491 -0.370772 15.5261 1.11232C15.5255 1.11454 15.5242 1.11935 15.5215 1.12896C15.5143 1.15428 15.5107 1.16694 15.5074 1.17883C13.5422 8.11839 8.11839 13.5422 1.17883 15.5074C1.16694 15.5107 1.15428 15.5143 1.12895 15.5215C1.11934 15.5242 1.11454 15.5255 1.11232 15.5261C-0.370773 15.9491 -0.370773 18.0509 1.11232 18.4739C1.11454 18.4745 1.11934 18.4758 1.12896 18.4785C1.15428 18.4857 1.16694 18.4893 1.17883 18.4926C8.11839 20.4578 13.5422 25.8816 15.5074 32.8212C15.5107 32.8331 15.5143 32.8457 15.5215 32.871C15.5242 32.8807 15.5255 32.8855 15.5261 32.8877C15.9491 34.3708 18.0509 34.3708 18.4739 32.8877C18.4745 32.8855 18.4758 32.8807 18.4785 32.871C18.4857 32.8457 18.4893 32.8331 18.4926 32.8212C20.4578 25.8816 25.8816 20.4578 32.8212 18.4926C32.8331 18.4893 32.8457 18.4857 32.871 18.4785C32.8807 18.4758 32.8855 18.4745 32.8877 18.4739C34.3708 18.0509 34.3708 15.9491 32.8877 15.5261C32.8855 15.5255 32.8807 15.5242 32.871 15.5215C32.8457 15.5143 32.8331 15.5107 32.8212 15.5074C25.8816 13.5422 20.4578 8.11839 18.4926 1.17883C18.4893 1.16694 18.4857 1.15428 18.4785 1.12896Z\"\n fill=\"currentColor\"\n />\n </svg>\n <h1\n class=\"babylai:text-2xl! babylai:font-semibold! babylai:text-card-foreground\"\n >\n {{ \"HelpCenter\" | translate }}\n </h1>\n </header>\n <app-company-card\n [title]=\"helpScreenData()?.tenant?.name\"\n [description]=\"\n helpScreenData()?.tenant?.settings?.description ||\n helpScreenData()?.description\n \"\n [iconUrl]=\"helpScreenData()?.tenant?.logoUrl\"\n />\n @if (showHelpScreenData()) {\n <app-helpscreen-list\n [helpScreenData]=\"helpScreenData()\"\n [hasOngoingSession]=\"!!sessionId()\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"\n ></app-helpscreen-list>\n }\n</div>\n<app-footer />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CompanyCardComponent, selector: "app-company-card", inputs: ["title", "description", "iconUrl"] }, { kind: "component", type: HelpscreenListComponent, selector: "app-helpscreen-list", inputs: ["helpScreenData", "title", "hasOngoingSession"], outputs: ["handleStartNewChat"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "component", type: HeaderComponent, selector: "app-header", outputs: ["onMinimize"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HomeScreenComponent, decorators: [{
type: Component,
args: [{ selector: 'app-home-screen', standalone: true, imports: [
CommonModule,
TranslatePipe,
CompanyCardComponent,
HelpscreenListComponent,
FooterComponent,
HeaderComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-header (onMinimize)=\"handleMinimizePopup()\" />\n<div\n class=\"babylai:flex babylai:flex-col babylai:flex-1 babylai:overflow-y-auto babylai:px-6 babylai:pt-6 babylai:pb-4 babylai:gap-6\"\n>\n <header\n class=\"babylai:flex babylai:items-center babylai:justify-center babylai:gap-3 babylai:pb-5 babylai:border-b babylai:border-black-white-200\"\n >\n <svg\n class=\"babylai:w-8 babylai:h-8\"\n [style.color]=\"'var(--babylai-primary-color)'\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 34 34\"\n fill=\"currentColor\"\n >\n <path\n d=\"M18.4785 1.12896C18.4758 1.11935 18.4745 1.11454 18.4739 1.11232C18.0509 -0.370772 15.9491 -0.370772 15.5261 1.11232C15.5255 1.11454 15.5242 1.11935 15.5215 1.12896C15.5143 1.15428 15.5107 1.16694 15.5074 1.17883C13.5422 8.11839 8.11839 13.5422 1.17883 15.5074C1.16694 15.5107 1.15428 15.5143 1.12895 15.5215C1.11934 15.5242 1.11454 15.5255 1.11232 15.5261C-0.370773 15.9491 -0.370773 18.0509 1.11232 18.4739C1.11454 18.4745 1.11934 18.4758 1.12896 18.4785C1.15428 18.4857 1.16694 18.4893 1.17883 18.4926C8.11839 20.4578 13.5422 25.8816 15.5074 32.8212C15.5107 32.8331 15.5143 32.8457 15.5215 32.871C15.5242 32.8807 15.5255 32.8855 15.5261 32.8877C15.9491 34.3708 18.0509 34.3708 18.4739 32.8877C18.4745 32.8855 18.4758 32.8807 18.4785 32.871C18.4857 32.8457 18.4893 32.8331 18.4926 32.8212C20.4578 25.8816 25.8816 20.4578 32.8212 18.4926C32.8331 18.4893 32.8457 18.4857 32.871 18.4785C32.8807 18.4758 32.8855 18.4745 32.8877 18.4739C34.3708 18.0509 34.3708 15.9491 32.8877 15.5261C32.8855 15.5255 32.8807 15.5242 32.871 15.5215C32.8457 15.5143 32.8331 15.5107 32.8212 15.5074C25.8816 13.5422 20.4578 8.11839 18.4926 1.17883C18.4893 1.16694 18.4857 1.15428 18.4785 1.12896Z\"\n fill=\"currentColor\"\n />\n </svg>\n <h1\n class=\"babylai:text-2xl! babylai:font-semibold! babylai:text-card-foreground\"\n >\n {{ \"HelpCenter\" | translate }}\n </h1>\n </header>\n <app-company-card\n [title]=\"helpScreenData()?.tenant?.name\"\n [description]=\"\n helpScreenData()?.tenant?.settings?.description ||\n helpScreenData()?.description\n \"\n [iconUrl]=\"helpScreenData()?.tenant?.logoUrl\"\n />\n @if (showHelpScreenData()) {\n <app-helpscreen-list\n [helpScreenData]=\"helpScreenData()\"\n [hasOngoingSession]=\"!!sessionId()\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"\n ></app-helpscreen-list>\n }\n</div>\n<app-footer />\n" }]
}], propDecorators: { helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], showHelpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpScreenData", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], startNewChat: [{ type: i0.Output, args: ["startNewChat"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
class HelpPopupComponent {
static POPUP_ANIMATION_DURATION_MS = 250;
isPopupOpen = input(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
isEntering = signal(true, ...(ngDevMode ? [{ debugName: "isEntering" }] : /* istanbul ignore next */ []));
isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : /* istanbul ignore next */ []));
previousPopupOpen = false;
closeTimeoutId = null;
closingAction = null;
constructor() {
effect(() => {
const open = this.isPopupOpen();
if (open && !this.previousPopupOpen) {
this.previousPopupOpen = true;
this.isEntering.set(true);
const id = window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => this.isEntering.set(false));
});
return () => window.cancelAnimationFrame(id);
}
if (!open) {
this.previousPopupOpen = false;
}
return undefined;
});
}
ngOnDestroy() {
if (this.closeTimeoutId !== null) {
clearTimeout(this.closeTimeoutId);
}
}
showHelpScreenData = input(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : /* istanbul ignore next */ []));
showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : /* istanbul ignore next */ []));
status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : /* istanbul ignore next */ []));
messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : /* istanbul ignore next */ []));
assistantStatus = input('idle', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : /* istanbul ignore next */ []));
isAblyConnected = input(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : /* istanbul ignore next */ []));
isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
chatIsLoading = input(false, ...(ngDevMode ? [{ debugName: "chatIsLoading" }] : /* istanbul ignore next */ []));
sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : /* istanbul ignore next */ []));
selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
selectedNestedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedNestedOption" }] : /* istanbul ignore next */ []));
showEndChatConfirmation = input(false, ...(ngDevMode ? [{ debugName: "showEndChatConfirmation" }] : /* istanbul ignore next */ []));
showStartNewChatConfirmation = input(false, ...(ngDevMode ? [{ debugName: "showStartNewChatConfirmation" }] : /* istanbul ignore next */ []));
showReviewDialog = input(false, ...(ngDevMode ? [{ debugName: "showReviewDialog" }] : /* istanbul ignore next */ []));
isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : /* istanbul ignore next */ []));
isStartingNewChat = input(false, ...(ngDevMode ? [{ debugName: "isStartingNewChat" }] : /* istanbul ignore next */ []));
closePopup = output();
minimizePopup = output();
back = output();
showChatEvent = output();
endChat = output();
confirmEndChat = output();
cancelEndChat = output();
closeEndChat = output();
confirmStartNewChat = output();
cancelStartNewChat = output();
closeStartNewChat = output();
reviewSubmit = output();
reviewSkip = output();
reviewClose = output();
reviewSubmitFromChat = output();
reviewSkipFromChat = output();
startNewChat = output();
navigateToUrl = output();
sendMessageEvent = output();
requestSessionForAttachments = output();
handleClosePopup() {
if (this.isClosing())
return;
this.isClosing.set(true);
this.closingAction = 'close';
this.scheduleCloseEmit();
}
handleMinimizePopup() {
if (this.isClosing())
return;
this.isClosing.set(true);
this.closingAction = 'minimize';
this.scheduleCloseEmit();
}
scheduleCloseEmit() {
this.closeTimeoutId = setTimeout(() => {
if (this.closingAction === 'close') {
this.closePopup.emit();
}
else if (this.closingAction === 'minimize') {
this.minimizePopup.emit();
}
this.isClosing.set(false);
this.closingAction = null;
this.closeTimeoutId = null;
}, HelpPopupComponent.POPUP_ANIMATION_DURATION_MS);
}
handleBack() {
this.back.emit();
}
handleShowChat() {
this.showChatEvent.emit();
}
handleEndChat() {
this.endChat.emit();
}
handleConfirmEndChat() {
this.confirmEndChat.emit();
}
handleCancelEndChat() {
this.cancelEndChat.emit();
}
handleCloseEndChat() {
this.closeEndChat.emit();
}
handleConfirmStartNewChat() {
this.confirmStartNewChat.emit();
}
handleCancelStartNewChat() {
this.cancelStartNewChat.emit();
}
handleCloseStartNewChat() {
this.closeStartNewChat.emit();
}
handleReviewSubmit(reviewData) {
this.reviewSubmit.emit(reviewData);
}
handleReviewSkip() {
this.reviewSkip.emit();
}
handleReviewClose() {
this.reviewClose.emit();
}
handleSendMessage(event) {
this.sendMessageEvent.emit(event);
}
handleRequestSessionForAttachments() {
this.requestSessionForAttachments.emit();
}
handleStartNewChat(option) {
this.startNewChat.emit(option);
}
handleNavigateToUrl(url) {
this.navigateToUrl.emit(url);
}
handleReviewSubmitFromChat(reviewData) {
this.reviewSubmitFromChat.emit(reviewData);
}
handleReviewSkipFromChat() {
this.reviewSkipFromChat.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: HelpPopupComponent, isStandalone: true, selector: "app-help-popup", inputs: { isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null }, showHelpScreenData: { classPropertyName: "showHelpScreenData", publicName: "showHelpScreenData", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, isAblyConnected: { classPropertyName: "isAblyConnected", publicName: "isAblyConnected", isSignal: true, isRequired: false, transformFunction: null }, isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, chatIsLoading: { classPropertyName: "chatIsLoading", publicName: "chatIsLoading", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, selectedNestedOption: { classPropertyName: "selectedNestedOption", publicName: "selectedNestedOption", isSignal: true, isRequired: false, transformFunction: null }, showEndChatConfirmation: { classPropertyName: "showEndChatConfirmation", publicName: "showEndChatConfirmation", isSignal: true, isRequired: false, transformFunction: null }, showStartNewChatConfirmation: { classPropertyName: "showStartNewChatConfirmation", publicName: "showStartNewChatConfirmation", isSignal: true, isRequired: false, transformFunction: null }, showReviewDialog: { classPropertyName: "showReviewDialog", publicName: "showReviewDialog", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null }, isStartingNewChat: { classPropertyName: "isStartingNewChat", publicName: "isStartingNewChat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopup: "closePopup", minimizePopup: "minimizePopup", back: "back", showChatEvent: "showChatEvent", endChat: "endChat", confirmEndChat: "confirmEndChat", cancelEndChat: "cancelEndChat", closeEndChat: "closeEndChat", confirmStartNewChat: "confirmStartNewChat", cancelStartNewChat: "cancelStartNewChat", closeStartNewChat: "closeStartNewChat", reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip", reviewClose: "reviewClose", reviewSubmitFromChat: "reviewSubmitFromChat", reviewSkipFromChat: "reviewSkipFromChat", startNewChat: "startNewChat", navigateToUrl: "navigateToUrl", sendMessageEvent: "sendMessageEvent", requestSessionForAttachments: "requestSessionForAttachments" }, ngImport: i0, template: "@if (isPopupOpen()) {\n <div\n class=\"babylai:h-[calc(100vh-12rem)] babylai:bg-secondary babylai:rounded-3xl babylai:overflow-hidden babylai:max-h-[800px] babylai:shadow-md babylai:flex babylai:flex-col babylai:fixed babylai:bottom-24 babylai:right-5 babylai:z-1000 babylai:transition-all babylai:duration-250 babylai:ease-out\"\n [class.babylai:w-96]=\"isPopupOpen()\"\n [class.babylai:w-15]=\"!isPopupOpen()\"\n [class.babylai:bg-linear-to-b]=\"\n isPopupOpen() && !showHelpScreenData() && !showChat()\n \"\n [class.babylai:opacity-0]=\"isEntering() || isClosing()\"\n [class.babylai:scale-[0.96]]=\"isEntering() || isClosing()\"\n [class.babylai:translate-y-2]=\"isEntering() || isClosing()\"\n [class.babylai:opacity-100]=\"!isEntering() && !isClosing()\"\n [class.babylai:scale-100]=\"!isEntering() && !isClosing()\"\n [class.babylai:translate-y-0]=\"!isEntering() && !isClosing()\"\n >\n @if (showEndChatConfirmation()) {\n <app-confirmation-dialog\n [title]=\"'LeavingDialogTitle' | translate\"\n [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'CloseChat' | translate\"\n [cancelText]=\"'Continue' | translate\"\n (onConfirm)=\"handleConfirmEndChat()\"\n (onCancel)=\"handleCancelEndChat()\"\n (onClose)=\"handleCloseEndChat()\"\n ></app-confirmation-dialog>\n }\n @if (showStartNewChatConfirmation()) {\n <app-confirmation-dialog\n [title]=\"'StartNewChatDialogTitle' | translate\"\n [body]=\"'StartNewChatDialogBody' | translate\"\n [confirmText]=\"'CloseChat' | translate\"\n [cancelText]=\"'Continue' | translate\"\n [isLoading]=\"isStartingNewChat()\"\n (onConfirm)=\"handleConfirmStartNewChat()\"\n (onCancel)=\"handleCancelStartNewChat()\"\n (onClose)=\"handleCloseStartNewChat()\"\n ></app-confirmation-dialog>\n }\n\n <!-- Loading State -->\n @if (status() === \"loading\") {\n <app-loading\n (onMinimize)=\"handleMinimizePopup()\"\n class=\"babylai:h-full\"\n ></app-loading>\n }\n\n <!-- Error State -->\n @if (status() === \"failed\") {\n <app-error-state\n [error]=\"error()\"\n (onMinimize)=\"handleMinimizePopup()\"\n class=\"babylai:h-full\"\n ></app-error-state>\n }\n\n @if (status() === \"succeeded\") {\n @if (!showChat()) {\n @if (sessionId()) {\n <app-chat-action-buttons\n [selectedOption]=\"selectedOption()\"\n (closeChat)=\"handleEndChat()\"\n (continueChat)=\"handleShowChat()\"\n ></app-chat-action-buttons>\n }\n }\n\n <!-- Chat Screen -->\n @if (showChat()) {\n <app-chat-screen\n [showChat]=\"showChat()\"\n [messages]=\"messages()\"\n [needsAgent]=\"needsAgent()\"\n [assistantStatus]=\"assistantStatus()\"\n [isAblyConnected]=\"isAblyConnected()\"\n [isChatClosed]=\"isChatClosed()\"\n [currentLang]=\"currentLang()\"\n [chatIsLoading]=\"chatIsLoading()\"\n [sessionId]=\"sessionId()\"\n [selectedOption]=\"selectedOption()\"\n [selectedNestedOption]=\"selectedNestedOption()\"\n [isSubmittingReview]=\"isSubmittingReview()\"\n (endChat)=\"handleEndChat()\"\n (back)=\"handleBack()\"\n (onMinimize)=\"handleMinimizePopup()\"\n (sendMessage)=\"handleSendMessage($event)\"\n (requestSessionForAttachments)=\"handleRequestSessionForAttachments()\"\n (reviewSubmit)=\"handleReviewSubmitFromChat($event)\"\n (reviewSkip)=\"handleReviewSkipFromChat()\"\n class=\"babylai:flex babylai:flex-col babylai:h-full\"\n ></app-chat-screen>\n }\n\n <!-- Home Screen -->\n @if (!showChat()) {\n <app-home-screen\n [helpScreenData]=\"helpScreenData()\"\n [showHelpScreenData]=\"showHelpScreenData()\"\n [sessionId]=\"sessionId()\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (onClose)=\"handleClosePopup()\"\n (onMinimize)=\"handleMinimizePopup()\"\n class=\"babylai:flex babylai:flex-col babylai:max-h-full\"\n ></app-home-screen>\n }\n\n <!-- Review Dialog (shown when closing from home screen - stars only) -->\n <app-review-dialog\n [isOpen]=\"showReviewDialog()\"\n [isSubmitting]=\"isSubmittingReview()\"\n [showCommentField]=\"false\"\n (close)=\"handleReviewClose()\"\n (submitReview)=\"handleReviewSubmit($event)\"\n (skip)=\"handleReviewSkip()\"\n ></app-review-dialog>\n }\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingComponent, selector: "app-loading", outputs: ["onMinimize"] }, { kind: "component", type: ErrorStateComponent, selector: "app-error-state", inputs: ["error"], outputs: ["onMinimize"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText", "isLoading"], outputs: ["onConfirm", "onCancel", "onClose"] }, { kind: "component", type: ReviewDialogComponent, selector: "app-review-dialog", inputs: ["isOpen", "isSubmitting", "showCommentField"], outputs: ["close", "submitReview", "skip"] }, { kind: "component", type: HomeScreenComponent, selector: "app-home-screen", inputs: ["helpScreenData", "showHelpScreenData", "sessionId"], outputs: ["startNewChat", "onClose", "onMinimize"] }, { kind: "component", type: ChatScreenComponent, selector: "app-chat-screen", inputs: ["showChat", "messages", "needsAgent", "assistantStatus", "isAblyConnected", "isChatClosed", "currentLang", "chatIsLoading", "sessionId", "selectedOption", "selectedNestedOption", "isSubmittingReview"], outputs: ["endChat", "back", "onMinimize", "sendMessage", "requestSessionForAttachments", "reviewSubmit", "reviewSkip"] }, { kind: "component", type: ChatActionButtonsComponent, selector: "app-chat-action-buttons", inputs: ["selectedOption"], outputs: ["closeChat", "continueChat"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpPopupComponent, decorators: [{
type: Component,
args: [{ selector: 'app-help-popup', standalone: true, imports: [
CommonModule,
TranslatePipe,
LoadingComponent,
ErrorStateComponent,
ConfirmationDialogComponent,
ReviewDialogComponent,
HomeScreenComponent,
ChatScreenComponent,
ChatActionButtonsComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPopupOpen()) {\n <div\n class=\"babylai:h-[calc(100vh-12rem)] babylai:bg-secondary babylai:rounded-3xl babylai:overflow-hidden babylai:max-h-[800px] babylai:shadow-md babylai:flex babylai:flex-col babylai:fixed babylai:bottom-24 babylai:right-5 babylai:z-1000 babylai:transition-all babylai:duration-250 babylai:ease-out\"\n [class.babylai:w-96]=\"isPopupOpen()\"\n [class.babylai:w-15]=\"!isPopupOpen()\"\n [class.babylai:bg-linear-to-b]=\"\n isPopupOpen() && !showHelpScreenData() && !showChat()\n \"\n [class.babylai:opacity-0]=\"isEntering() || isClosing()\"\n [class.babylai:scale-[0.96]]=\"isEntering() || isClosing()\"\n [class.babylai:translate-y-2]=\"isEntering() || isClosing()\"\n [class.babylai:opacity-100]=\"!isEntering() && !isClosing()\"\n [class.babylai:scale-100]=\"!isEntering() && !isClosing()\"\n [class.babylai:translate-y-0]=\"!isEntering() && !isClosing()\"\n >\n @if (showEndChatConfirmation()) {\n <app-confirmation-dialog\n [title]=\"'LeavingDialogTitle' | translate\"\n [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'CloseChat' | translate\"\n [cancelText]=\"'Continue' | translate\"\n (onConfirm)=\"handleConfirmEndChat()\"\n (onCancel)=\"handleCancelEndChat()\"\n (onClose)=\"handleCloseEndChat()\"\n ></app-confirmation-dialog>\n }\n @if (showStartNewChatConfirmation()) {\n <app-confirmation-dialog\n [title]=\"'StartNewChatDialogTitle' | translate\"\n [body]=\"'StartNewChatDialogBody' | translate\"\n [confirmText]=\"'CloseChat' | translate\"\n [cancelText]=\"'Continue' | translate\"\n [isLoading]=\"isStartingNewChat()\"\n (onConfirm)=\"handleConfirmStartNewChat()\"\n (onCancel)=\"handleCancelStartNewChat()\"\n (onClose)=\"handleCloseStartNewChat()\"\n ></app-confirmation-dialog>\n }\n\n <!-- Loading State -->\n @if (status() === \"loading\") {\n <app-loading\n (onMinimize)=\"handleMinimizePopup()\"\n class=\"babylai:h-full\"\n ></app-loading>\n }\n\n <!-- Error State -->\n @if (status() === \"failed\") {\n <app-error-state\n [error]=\"error()\"\n (onMinimize)=\"handleMinimizePopup()\"\n class=\"babylai:h-full\"\n ></app-error-state>\n }\n\n @if (status() === \"succeeded\") {\n @if (!showChat()) {\n @if (sessionId()) {\n <app-chat-action-buttons\n [selectedOption]=\"selectedOption()\"\n (closeChat)=\"handleEndChat()\"\n (continueChat)=\"handleShowChat()\"\n ></app-chat-action-buttons>\n }\n }\n\n <!-- Chat Screen -->\n @if (showChat()) {\n <app-chat-screen\n [showChat]=\"showChat()\"\n [messages]=\"messages()\"\n [needsAgent]=\"needsAgent()\"\n [assistantStatus]=\"assistantStatus()\"\n [isAblyConnected]=\"isAblyConnected()\"\n [isChatClosed]=\"isChatClosed()\"\n [currentLang]=\"currentLang()\"\n [chatIsLoading]=\"chatIsLoading()\"\n [sessionId]=\"sessionId()\"\n [selectedOption]=\"selectedOption()\"\n [selectedNestedOption]=\"selectedNestedOption()\"\n [isSubmittingReview]=\"isSubmittingReview()\"\n (endChat)=\"handleEndChat()\"\n (back)=\"handleBack()\"\n (onMinimize)=\"handleMinimizePopup()\"\n (sendMessage)=\"handleSendMessage($event)\"\n (requestSessionForAttachments)=\"handleRequestSessionForAttachments()\"\n (reviewSubmit)=\"handleReviewSubmitFromChat($event)\"\n (reviewSkip)=\"handleReviewSkipFromChat()\"\n class=\"babylai:flex babylai:flex-col babylai:h-full\"\n ></app-chat-screen>\n }\n\n <!-- Home Screen -->\n @if (!showChat()) {\n <app-home-screen\n [helpScreenData]=\"helpScreenData()\"\n [showHelpScreenData]=\"showHelpScreenData()\"\n [sessionId]=\"sessionId()\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (onClose)=\"handleClosePopup()\"\n (onMinimize)=\"handleMinimizePopup()\"\n class=\"babylai:flex babylai:flex-col babylai:max-h-full\"\n ></app-home-screen>\n }\n\n <!-- Review Dialog (shown when closing from home screen - stars only) -->\n <app-review-dialog\n [isOpen]=\"showReviewDialog()\"\n [isSubmitting]=\"isSubmittingReview()\"\n [showCommentField]=\"false\"\n (close)=\"handleReviewClose()\"\n (submitReview)=\"handleReviewSubmit($event)\"\n (skip)=\"handleReviewSkip()\"\n ></app-review-dialog>\n }\n </div>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], showHelpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpScreenData", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], isAblyConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAblyConnected", required: false }] }], isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], chatIsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatIsLoading", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], selectedNestedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNestedOption", required: false }] }], showEndChatConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndChatConfirmation", required: false }] }], showStartNewChatConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStartNewChatConfirmation", required: false }] }], showReviewDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReviewDialog", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], isStartingNewChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStartingNewChat", required: false }] }], closePopup: [{ type: i0.Output, args: ["closePopup"] }], minimizePopup: [{ type: i0.Output, args: ["minimizePopup"] }], back: [{ type: i0.Output, args: ["back"] }], showChatEvent: [{ type: i0.Output, args: ["showChatEvent"] }], endChat: [{ type: i0.Output, args: ["endChat"] }], confirmEndChat: [{ type: i0.Output, args: ["confirmEndChat"] }], cancelEndChat: [{ type: i0.Output, args: ["cancelEndChat"] }], closeEndChat: [{ type: i0.Output, args: ["closeEndChat"] }], confirmStartNewChat: [{ type: i0.Output, args: ["confirmStartNewChat"] }], cancelStartNewChat: [{ type: i0.Output, args: ["cancelStartNewChat"] }], closeStartNewChat: [{ type: i0.Output, args: ["closeStartNewChat"] }], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }], reviewClose: [{ type: i0.Output, args: ["reviewClose"] }], reviewSubmitFromChat: [{ type: i0.Output, args: ["reviewSubmitFromChat"] }], reviewSkipFromChat: [{ type: i0.Output, args: ["reviewSkipFromChat"] }], startNewChat: [{ type: i0.Output, args: ["startNewChat"] }], navigateToUrl: [{ type: i0.Output, args: ["navigateToUrl"] }], sendMessageEvent: [{ type: i0.Output, args: ["sendMessageEvent"] }], requestSessionForAttachments: [{ type: i0.Output, args: ["requestSessionForAttachments"] }] } });
class HelpCenterWidgetComponent {
getToken = input.required(...(ngDevMode ? [{ debugName: "getToken" }] : /* istanbul ignore next */ []));
helpScreenId = input.required(...(ngDevMode ? [{ debugName: "helpScreenId" }] : /* istanbul ignore next */ []));
showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []));
messageLabel = input(null, ...(ngDevMode ? [{ debugName: "messageLabel" }] : /* istanbul ignore next */ []));
currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : /* istanbul ignore next */ []));
primaryColor = input('#ad49e1', ...(ngDevMode ? [{ debugName: "primaryColor" }] : /* istanbul ignore next */ []));
logoUrl = input('', ...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
chatMessagesContainer;
isRTL = computed(() => this.currentLang() === 'ar', ...(ngDevMode ? [{ debugName: "isRTL" }] : /* istanbul ignore next */ []));
// State variables - using signals for automatic change detection
isPopupOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
helpScreenData = signal(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : /* istanbul ignore next */ []));
status = signal('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
showArrowAnimation = signal(false, ...(ngDevMode ? [{ debugName: "showArrowAnimation" }] : /* istanbul ignore next */ []));
showTooltip = signal(false, ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
sessionId = signal(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : /* istanbul ignore next */ []));
isAblyConnected = signal(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : /* istanbul ignore next */ []));
isChatClosed = signal(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : /* istanbul ignore next */ []));
showChat = signal(false, ...(ngDevMode ? [{ debugName: "showChat" }] : /* istanbul ignore next */ []));
messageText = signal('', ...(ngDevMode ? [{ debugName: "messageText" }] : /* istanbul ignore next */ []));
isTyping = signal(false, ...(ngDevMode ? [{ debugName: "isTyping" }] : /* istanbul ignore next */ []));
messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
showHelpScreenData = signal(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : /* istanbul ignore next */ []));
chatIsLoading = signal(false, ...(ngDevMode ? [{ debugName: "chatIsLoading" }] : /* istanbul ignore next */ []));
ablyToken = signal(null, ...(ngDevMode ? [{ debugName: "ablyToken" }] : /* istanbul ignore next */ []));
needsAgent = signal(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : /* istanbul ignore next */ []));
assistantStatus = signal('idle', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : /* istanbul ignore next */ []));
selectedOption = signal(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
selectedNestedOption = signal(null, ...(ngDevMode ? [{ debugName: "selectedNestedOption" }] : /* istanbul ignore next */ []));
showEndChatConfirmation = signal(false, ...(ngDevMode ? [{ debugName: "showEndChatConfirmation" }] : /* istanbul ignore next */ []));
showStartNewChatConfirmation = signal(false, ...(ngDevMode ? [{ debugName: "showStartNewChatConfirmation" }] : /* istanbul ignore next */ []));
showReviewDialog = signal(false, ...(ngDevMode ? [{ debugName: "showReviewDialog" }] : /* istanbul ignore next */ []));
isSubmittingReview = signal(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : /* istanbul ignore next */ []));
isStartingNewChat = signal(false, ...(ngDevMode ? [{ debugName: "isStartingNewChat" }] : /* istanbul ignore next */ []));
pendingNewChatOption = signal(null, ...(ngDevMode ? [{ debugName: "pendingNewChatOption" }] : /* istanbul ignore next */ []));
hasUserSentMessages = signal(false, ...(ngDevMode ? [{ debugName: "hasUserSentMessages" }] : /* istanbul ignore next */ []));
closedSessionIdForReview = signal(null, ...(ngDevMode ? [{ debugName: "closedSessionIdForReview" }] : /* istanbul ignore next */ []));
waitingForSessionEndConfirmation = signal(false, ...(ngDevMode ? [{ debugName: "waitingForSessionEndConfirmation" }] : /* istanbul ignore next */ []));
isClosingChatSession = false;
apiService = inject(ApiService);
translationService = inject(TranslationService);
themeService = inject(ThemeService);
chatSessionService = inject(ChatSessionService);
actionHandlerService = inject(ActionHandlerService);
fileUploadService = inject(FileUploadService);
destroyRef = inject(DestroyRef);
themeEffectRef;
languageEffectRef;
constructor() {
// Combined effect to initialize and update theme when primaryColor or logoUrl change
// This is more efficient than having separate effects
this.themeEffectRef = effect(() => {
const primaryColor = this.primaryColor();
const logoUrl = this.logoUrl();
// Initialize theme when either primaryColor or logoUrl changes
if (primaryColor || logoUrl) {
this.themeService.initializeTheme(primaryColor, logoUrl);
}
}, ...(ngDevMode ? [{ debugName: "themeEffectRef" }] : /* istanbul ignore next */ []));
// Effect to sync translation service language with input
this.languageEffectRef = effect(() => {
const lang = this.currentLang();
if (lang) {
this.translationService.setLanguage(lang);
}
}, ...(ngDevMode ? [{ debugName: "languageEffectRef" }] : /* istanbul ignore next */ []));
// Subscribe to language changes from translation service
this.translationService.currentLang
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((lang) => {
// Update if translation service language differs from input
if (lang !== this.currentLang()) {
// The translation service will update, but we don't need to update the input
// as it's controlled by the parent component
}
});
// Register action handlers for extensible action handling
this.registerActionHandlers();
}
/**
* Registers action handlers for AI response actions.
* This uses the ActionHandlerService for extensible, maintainable action handling.
*/
registerActionHandlers() {
// Register handler for 'needs_agent' action
this.actionHandlerService.registerHandler('needs_agent', () => {
// Trigger "handoff / needs agent" UI flow
this.needsAgent.set(true);
});
// Register handler for 'end_session' action
this.actionHandlerService.registerHandler('end_session', () => {
// Trigger end session flow
this.handleEndSessionReceived();
});
}
ngOnInit() {
this.showArrowAnimation.set(this.showArrow());
}
ngOnDestroy() {
// Clean up effects
if (this.themeEffectRef) {
this.themeEffectRef.destroy();
this.themeEffectRef = undefined;
}
if (this.languageEffectRef) {
this.languageEffectRef.destroy();
this.languageEffectRef = undefined;
}
// Cleanup handled by takeUntilDestroyed
// Clean up Ably connection
this.chatSessionService.stopConnection();
// Clear any pending timeouts
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
this.scrollTimeout = undefined;
}
}
async handleTogglePopup() {
this.isPopupOpen.update((isOpen) => !isOpen);
this.showArrowAnimation.set(this.isPopupOpen());
if (this.isPopupOpen()) {
// Reset the state when opening the popup
await this.fetchHelpScreenData();
}
}
async fetchHelpScreenData() {
this.status.set('loading');
this.error.set(null);
try {
const response = await this.apiService.apiRequest(`client/clientHelpScreen/${this.helpScreenId()}`, 'GET', null, {
'Accept-Language': this.currentLang(),
});
this.helpScreenData.set(await response.json());
this.status.set('succeeded');
// Automatically show the option screen when data is loaded (since intro section is removed)
this.showHelpScreenData.set(true);
}
catch (error) {
console.error('Error fetching help screen data:', error);
this.error.set(this.translationService.translate('ErrorFetchingHelpScreen'));
this.status.set('failed');
}
}
async createChatSession(option) {
try {
const selectedOpt = option || this.selectedOption();
if (!selectedOpt) {
throw new Error('No option selected for chat session');
}
// Create session using service
const data = await this.chatSessionService.createSession(selectedOpt, this.helpScreenId(), this.currentLang());
const { chatSession, ablyToken } = data;
this.sessionId.set(chatSession?.id ?? null);
this.ablyToken.set(ablyToken);
// Establish Ably connection after creating session
if (this.sessionId() && selectedOpt && !this.isAblyConnected()) {
// Use the ablyToken from response or fallback to getValidToken
const tokenToUse = this.ablyToken() || (await this.apiService.getValidToken());
// Get tenantId from the selected option's assistant
const tenantId = selectedOpt.assistant?.tenantId ||
selectedOpt.assistant?.tenant?.id ||
'';
// Read sessionId fresh after async operation to ensure we have the current value
const currentSessionId = this.sessionId();
if (currentSessionId) {
// Use action handler service for extensible action handling
const actionHandler = async (actionType, messageData) => {
await this.actionHandlerService.handleAction(actionType, messageData);
};
await this.chatSessionService.establishAblyConnection(currentSessionId, tokenToUse, this.handleReceiveMessage.bind(this), tenantId, selectedOpt, this.helpScreenId(), this.currentLang(), actionHandler);
this.isAblyConnected.set(true);
}
}
return data;
}
catch (error) {
console.error('Error creating chat session:', error);
throw error;
}
}
async sendMessage(event) {
let textToSend = '';
let attachmentIds = [];
let pendingFiles = [];
if (typeof event === 'string') {
textToSend = event || this.messageText();
}
else if (event) {
textToSend = event.text || this.messageText();
attachmentIds = event.attachmentIds || [];
pendingFiles = event.pendingFiles || [];
}
else {
textToSend = this.messageText();
}
const hasContent = !!textToSend && textToSend.trim().length > 0;
const hasAttachments = attachmentIds.length > 0 || pendingFiles.length > 0;
if (!hasContent && !hasAttachments) {
this.error.set(this.translationService.translate('ErrorMessageEmpty'));
return;
}
if (textToSend.length > 5000) {
this.error.set(this.translationService.translate('ErrorMessageTooLong'));
return;
}
if (this.isChatClosed())
return;
try {
// Add user message first so it appears in UI immediately
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'user',
senderType: 1,
messageContent: hasContent ? textToSend : '',
sentAt: new Date(),
isSeen: false,
...(attachmentIds.length > 0 ? { attachmentIds } : {}),
},
]);
// Track that user has sent a message
this.hasUserSentMessages.set(true);
this.assistantStatus.set('typing');
// Create session only when user sends first message (if not already exists)
if (!this.sessionId()) {
const selectedOption = this.selectedOption();
if (!selectedOption) {
this.error.set(this.translationService.translate('ErrorCreatingSession'));
this.assistantStatus.set('idle');
this.chatIsLoading.set(false);
// Remove the message that was just added
this.messages.update((msgs) => msgs.slice(0, -1));
return;
}
await this.createChatSession(selectedOption);
}
// If there are pending files (e.g. from another code path), upload them now that we have a session
const currentSessionId = this.sessionId();
if (pendingFiles.length > 0 && currentSessionId) {
try {
const uploadResults = await firstValueFrom(this.fileUploadService.uploadFiles(currentSessionId, pendingFiles));
const newAttachmentIds = uploadResults
.filter((result) => result.success)
.map((result) => result.fileId);
attachmentIds = [...attachmentIds, ...newAttachmentIds];
}
catch (uploadError) {
console.error('Error uploading pending files:', uploadError);
}
}
// Send message via API
const freshSessionId = this.sessionId();
if (freshSessionId) {
const contentToSend = hasContent ? textToSend : ' ';
await this.chatSessionService.sendMessage(freshSessionId, contentToSend, this.currentLang(), attachmentIds);
}
this.messageText.set('');
// Update message as seen
this.messages.update((msgs) => msgs.map((msg) => msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
}
catch (error) {
console.error('Error sending message:', error);
this.assistantStatus.set('idle');
this.chatIsLoading.set(false);
const errorMessage = this.translationService.translate('ErrorSendingMessage');
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'assistant',
senderType: 3,
messageContent: errorMessage,
sentAt: new Date(),
isSeen: true,
},
]);
}
}
/**
* Called when user attaches files but there is no session yet.
* Creates a session so that chat-input can upload the files; send stays disabled until upload completes.
*/
async handleRequestSessionForAttachments() {
if (this.sessionId())
return;
const selectedOption = this.selectedOption();
if (!selectedOption)
return;
try {
await this.createChatSession(selectedOption);
}
catch (error) {
console.error('Error creating session for attachments:', error);
}
}
handleReceiveMessage(message, senderType, needsAgent) {
if (needsAgent) {
this.needsAgent.set(true);
}
const sender = this.getSenderType(senderType);
const messageContent = typeof message === 'string' ? message : message.content || '';
const attachmentIds = typeof message === 'string' ? undefined : message.attachments;
// If we're waiting for session end confirmation, this message is the closing one.
// Add it first, then add the review message so order is: closing → separator → review.
const wasWaitingForConfirmation = this.waitingForSessionEndConfirmation();
if (wasWaitingForConfirmation) {
this.waitingForSessionEndConfirmation.set(false);
}
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: sender,
senderType: senderType,
messageContent,
sentAt: new Date(),
isSeen: true,
...(attachmentIds && attachmentIds.length > 0 ? { attachmentIds } : {}),
},
]);
if (wasWaitingForConfirmation) {
this.handleEndSessionConfirmed();
}
this.assistantStatus.set('idle');
this.chatIsLoading.set(false);
this.scrollToBottom();
}
getSenderType(senderType) {
switch (senderType) {
case 1:
return 'user';
case 2:
return 'agent';
default:
return 'assistant';
}
}
hasActiveChatSession() {
// Check if there are any user messages or agent/assistant responses (not just welcome messages)
return this.messages().some((message) => message.senderType === 1 || // User message
((message.senderType === 2 || message.senderType === 3) &&
!this.isWelcomeMessage(message.messageContent)));
}
isWelcomeMessage(content) {
const welcomeMessages = [
'Hello! How can I assist you today?',
'مرحباً! كيف يمكنني مساعدتك اليوم؟',
];
// Check if it's a standard welcome message or if it contains common greeting patterns
return (welcomeMessages.some((welcome) => content.includes(welcome)) ||
content.includes('Hello!') ||
content.includes('مرحباً!') ||
content.includes('How can I assist') ||
content.includes('كيف يمكنني مساعدتك'));
}
async handleStartNewChat(option) {
// Check if there's already an active chat session (has sessionId and meaningful messages)
if (this.sessionId() && this.hasActiveChatSession()) {
this.pendingNewChatOption.set(option);
this.showStartNewChatConfirmation.set(true);
return;
}
// If there's a sessionId but only welcome messages, clear the session and start fresh
if (this.sessionId() && !this.hasActiveChatSession()) {
await this.clearCurrentChat();
}
// If there are only welcome messages but no session, clear them and start fresh
if (this.messages().length > 0 && !this.sessionId()) {
this.messages.set([]);
this.hasUserSentMessages.set(false);
}
this.selectedOption.set(option);
try {
// Update UI state - session will be created when the user sends the first message
this.showChat.set(true);
this.isChatClosed.set(false);
this.showHelpScreenData.set(false);
// Add greeting message
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'assistant',
senderType: 3,
messageContent: option.assistant?.greeting ||
(this.currentLang() === 'en'
? 'Hello! How can I assist you today?'
: 'مرحباً! كيف يمكنني مساعدتك اليوم؟'),
sentAt: new Date(),
isSeen: true,
},
]);
}
catch (error) {
console.error('Error starting chat:', error);
const errorMessage = this.translationService.translate('ErrorStartingChat');
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'assistant',
senderType: 3,
messageContent: errorMessage,
sentAt: new Date(),
isSeen: true,
},
]);
}
}
async startNewChatSession(option) {
try {
this.status.set('loading');
this.error.set('');
this.messages.set([]);
// Use the centralized createChatSession method
await this.createChatSession(option);
// Update UI state only after successful session creation
this.isChatClosed.set(false);
this.status.set('succeeded');
}
catch (error) {
console.error('Chat start error:', error);
this.error.set(this.translationService.translate('ErrorCreatingSession'));
this.status.set('failed');
}
}
async handleStartChat(option) {
await this.startNewChatSession(option);
// Update UI state only after successful session creation
if (this.status() === 'succeeded') {
this.showChat.set(true);
}
}
async handleEndChat() {
// If called from home screen and user has sent messages, close session and show review dialog
if (!this.showChat() && this.sessionId() && this.hasUserSentMessages()) {
// Store session ID before closing
const currentSessionId = this.sessionId();
// Close the chat session first
await this.endChatSession();
// Store the closed session ID for review submission
this.closedSessionIdForReview.set(currentSessionId);
// Show review dialog
this.showReviewDialog.set(true);
return;
}
// Otherwise, show confirmation dialog (when called from chat screen)
this.showEndChatConfirmation.set(true);
}
async confirmEndChat() {
if (this.isClosingChatSession) {
return;
}
this.isClosingChatSession = true;
this.showEndChatConfirmation.set(false);
try {
// Only show review if user has sent messages
if (this.hasUserSentMessages()) {
// Store session ID before closing (closeSessionOnly clears it immediately)
const currentSessionId = this.sessionId();
// Close the chat session on backend only (don't change UI state)
await this.closeSessionOnly();
// Store the closed session ID for review submission
this.closedSessionIdForReview.set(currentSessionId);
// Add review message to chat
this.addReviewMessageToChat();
}
else {
// No messages sent, just end the chat directly
await this.endChatSession();
}
}
finally {
this.isClosingChatSession = false;
}
}
async handleReviewSubmit(reviewData) {
try {
this.isSubmittingReview.set(true);
// Use the stored closed session ID for review submission
const sessionIdForReview = this.closedSessionIdForReview();
// Submit review to API endpoint using the closed session ID
if (sessionIdForReview) {
await this.chatSessionService.submitReview(sessionIdForReview, reviewData.rating, reviewData.comment || '', this.currentLang());
}
// Close review dialog
this.showReviewDialog.set(false);
this.isSubmittingReview.set(false);
// Clear the stored session ID
this.closedSessionIdForReview.set(null);
// Don't close popup after review submission - keep it open showing help screen
this.hasUserSentMessages.set(false);
}
catch (error) {
console.error('Error submitting review:', error);
this.isSubmittingReview.set(false);
// Still close the dialog even if review submission fails
this.showReviewDialog.set(false);
// Clear the stored session ID even on error
this.closedSessionIdForReview.set(null);
this.hasUserSentMessages.set(false);
}
}
handleReviewClose() {
// Only close the review dialog without triggering any actions
this.showReviewDialog.set(false);
// Clear the stored session ID
this.closedSessionIdForReview.set(null);
}
async handleReviewSkip() {
// Close review dialog
this.showReviewDialog.set(false);
// Clear the stored session ID without submitting review
this.closedSessionIdForReview.set(null);
// Don't close popup after skipping review - keep it open showing help screen
this.hasUserSentMessages.set(false);
}
async endChatSession() {
// Reset waiting flag if connection closes before confirmation
this.waitingForSessionEndConfirmation.set(false);
// Capture and clear sessionId immediately so a second concurrent call won't call the close API again
const currentSessionId = this.sessionId();
if (!currentSessionId) {
await this.chatSessionService.stopConnection();
this.isAblyConnected.set(false);
this.showChat.set(false);
this.showHelpScreenData.set(true);
this.messages.set([]);
this.needsAgent.set(false);
this.assistantStatus.set('idle');
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
this.hasUserSentMessages.set(false);
return;
}
this.sessionId.set(null);
await this.chatSessionService.closeSession(currentSessionId, this.currentLang());
// Stop Ably connection
await this.chatSessionService.stopConnection();
this.isAblyConnected.set(false);
this.showChat.set(false);
this.showHelpScreenData.set(true);
this.messages.set([]);
this.needsAgent.set(false);
this.assistantStatus.set('idle');
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
this.hasUserSentMessages.set(false);
}
async closeSessionOnly() {
// Reset waiting flag when closing session
this.waitingForSessionEndConfirmation.set(false);
// Capture and clear sessionId immediately so a second concurrent call (e.g. double-click) won't call the close API again
const currentSessionId = this.sessionId();
if (!currentSessionId) {
return;
}
this.sessionId.set(null);
await this.chatSessionService.closeSession(currentSessionId, this.currentLang());
// Stop Ably connection
await this.chatSessionService.stopConnection();
this.isAblyConnected.set(false);
}
cancelEndChat() {
this.showEndChatConfirmation.set(false);
}
closeEndChat() {
// Only close the dialog without triggering any actions
this.showEndChatConfirmation.set(false);
}
async confirmStartNewChat() {
const pendingOption = this.pendingNewChatOption();
if (!pendingOption) {
return;
}
this.isStartingNewChat.set(true);
try {
// Clear current chat session
await this.clearCurrentChat();
// Start new chat with the pending option
await this.startNewChatWithOption(pendingOption);
this.pendingNewChatOption.set(null);
// Only close dialog after successful completion
this.showStartNewChatConfirmation.set(false);
}
catch (error) {
console.error('Error starting new chat:', error);
// On error, keep dialog open and show error message
// The error will be handled by the startNewChatWithOption method
}
finally {
this.isStartingNewChat.set(false);
}
}
cancelStartNewChat() {
// Don't allow cancellation while loading
if (this.isStartingNewChat()) {
return;
}
this.showStartNewChatConfirmation.set(false);
this.pendingNewChatOption.set(null);
// Show the already opened chat
this.showChat.set(true);
this.showHelpScreenData.set(false);
}
closeStartNewChat() {
// Only close the dialog without triggering any actions
// Don't allow closing while loading
if (this.isStartingNewChat()) {
return;
}
this.showStartNewChatConfirmation.set(false);
this.pendingNewChatOption.set(null);
}
async clearCurrentChat() {
// Reset waiting flag when clearing chat
this.waitingForSessionEndConfirmation.set(false);
// Read sessionId fresh to ensure we have the current value before async operations
const currentSessionId = this.sessionId();
if (currentSessionId) {
await this.chatSessionService.closeSession(currentSessionId, this.currentLang());
// Read again after async operation to ensure we're clearing the correct session
if (this.sessionId() === currentSessionId) {
this.sessionId.set(null);
}
}
// Stop Ably connection
await this.chatSessionService.stopConnection();
this.isAblyConnected.set(false);
// Clear messages and reset state
this.messages.set([]);
this.needsAgent.set(false);
this.assistantStatus.set('idle');
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
this.hasUserSentMessages.set(false);
}
async startNewChatWithOption(option) {
this.selectedOption.set(option);
this.hasUserSentMessages.set(false);
try {
// Create chat session (includes Ably connection setup)
await this.createChatSession(option);
// Update UI state only after successful session creation
// This ensures UI consistency - chat interface only shows when session is functional
this.showChat.set(true);
this.isChatClosed.set(false);
this.showHelpScreenData.set(false);
// Add greeting message
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'assistant',
senderType: 3,
messageContent: option.assistant?.greeting ||
(this.currentLang() === 'en'
? 'Hello! How can I assist you today?'
: 'مرحباً! كيف يمكنني مساعدتك اليوم؟'),
sentAt: new Date(),
isSeen: true,
},
]);
}
catch (error) {
console.error('Error starting new chat:', error);
// Show error message to user
const errorMessage = this.translationService.translate('ErrorStartingChat');
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'assistant',
senderType: 3,
messageContent: errorMessage,
sentAt: new Date(),
isSeen: true,
},
]);
}
}
async handleClosePopup() {
// If there's an active session with messages, show stars-only review dialog
if (this.sessionId() && this.hasUserSentMessages()) {
this.showReviewDialog.set(true);
// Don't close yet - wait for review submission/skip
return;
}
// No messages or no session, close normally
this.showHelpScreenData.set(false);
this.showChat.set(false);
this.isPopupOpen.set(false);
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
// Clear messages when closing popup to ensure fresh start next time
this.messages.set([]);
this.hasUserSentMessages.set(false);
}
handleMinimizePopup() {
// Only close the popup, preserve all state (messages, sessionId, selectedOption, etc.)
this.isPopupOpen.set(false);
}
handleCloseArrowAnimation() {
this.showArrowAnimation.set(false);
}
handleBack() {
if (this.showChat()) {
this.showChat.set(false);
this.showHelpScreenData.set(true);
// Don't clear sessionId or messages when going back - user might want to return to chat
}
else if (this.selectedNestedOption()) {
this.selectedNestedOption.set(null);
}
else if (this.selectedOption()) {
this.selectedOption.set(null);
}
else if (this.showHelpScreenData()) {
this.showHelpScreenData.set(false);
}
}
handleShowChat() {
this.showChat.set(true);
this.showHelpScreenData.set(false);
}
selectOption(option) {
this.selectedOption.set(option);
this.selectedNestedOption.set(null);
}
selectNestedOption(nestedOption) {
this.selectedNestedOption.set(nestedOption);
}
handleShowHelpScreenData() {
this.showHelpScreenData.set(true);
}
scrollTimeout;
scrollToBottom() {
// Clear any existing timeout
if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout);
}
this.scrollTimeout = setTimeout(() => {
if (this.chatMessagesContainer) {
const element = this.chatMessagesContainer.nativeElement;
element.scrollTop = element.scrollHeight;
}
this.scrollTimeout = undefined;
}, 0);
}
getDirection() {
return this.currentLang() === 'ar' ? 'rtl' : 'ltr';
}
get helpScreenDataList() {
const helpData = this.helpScreenData();
if (!helpData?.options)
return [];
// Transform options to the format expected by HelpscreenListComponent
return helpData.options.map((option) => ({
icon: option.icon || '/icons/default.svg',
title: option.title,
description: option.paragraphs?.[0] || '',
actionLabel: option.chatWithUs ? 'Chat Now' : '',
action: option.chatWithUs ? () => this.handleStartChat(option) : null,
}));
}
navigateToUrl(url) {
window.open(url, '_blank');
}
addReviewMessageToChat() {
// Avoid adding review twice (e.g. from both confirmEndChat and handleEndSessionConfirmed)
if (this.messages().some((m) => m.isReviewMessage)) {
return;
}
this.messages.update((msgs) => [
...msgs,
{
id: Date.now(),
sender: 'agent',
senderType: 2,
messageContent: '',
sentAt: new Date(),
isSeen: true,
isReviewMessage: true,
},
]);
}
handleEndSessionReceived() {
// Set flag to wait for confirmation message
// The next message received will be treated as confirmation
this.waitingForSessionEndConfirmation.set(true);
}
async handleEndSessionConfirmed() {
// Only proceed if user has sent messages (to show review)
if (!this.hasUserSentMessages()) {
// No messages sent, just end the chat directly
await this.endChatSession();
return;
}
// Store session ID before closing
const currentSessionId = this.sessionId();
// Close the chat session on backend only (don't change UI state)
await this.closeSessionOnly();
// Store the closed session ID for review submission
this.closedSessionIdForReview.set(currentSessionId);
// Add review message to chat
this.addReviewMessageToChat();
}
async handleReviewSubmitFromChat(reviewData) {
try {
this.isSubmittingReview.set(true);
// Use the stored closed session ID for review submission
const sessionIdForReview = this.closedSessionIdForReview();
// Submit review to API endpoint using the closed session ID
if (sessionIdForReview) {
await this.chatSessionService.submitReview(sessionIdForReview, reviewData.rating, reviewData.comment || '', this.currentLang());
}
// Clear the stored session ID
this.closedSessionIdForReview.set(null);
this.isSubmittingReview.set(false);
// Clean up UI state after review submission
this.showChat.set(false);
this.showHelpScreenData.set(true);
this.messages.set([]);
this.needsAgent.set(false);
this.assistantStatus.set('idle');
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
this.hasUserSentMessages.set(false);
}
catch (error) {
console.error('Error submitting review:', error);
this.isSubmittingReview.set(false);
// Clear the stored session ID even on error
this.closedSessionIdForReview.set(null);
// Clean up UI state even on error
this.showChat.set(false);
this.showHelpScreenData.set(true);
this.messages.set([]);
this.needsAgent.set(false);
this.assistantStatus.set('idle');
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
this.hasUserSentMessages.set(false);
}
}
async handleReviewSkipFromChat() {
// Clear the stored session ID and clean up UI state
this.closedSessionIdForReview.set(null);
// Clean up UI state when skipping review
this.showChat.set(false);
this.showHelpScreenData.set(true);
this.messages.set([]);
this.needsAgent.set(false);
this.assistantStatus.set('idle');
this.selectedOption.set(null);
this.selectedNestedOption.set(null);
this.hasUserSentMessages.set(false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpCenterWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: { classPropertyName: "getToken", publicName: "getToken", isSignal: true, isRequired: true, transformFunction: null }, helpScreenId: { classPropertyName: "helpScreenId", publicName: "helpScreenId", isSignal: true, isRequired: true, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, messageLabel: { classPropertyName: "messageLabel", publicName: "messageLabel", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"babylai-theme-root babylai:flex babylai:flex-col babylai:items-end babylai:h-auto babylai:w-auto babylai:fixed babylai:bottom-6 babylai:right-6 babylai:z-9998\"\n [dir]=\"getDirection()\"\n>\n <!-- TEST: Version mismatch fixed - Arrow Animation - SUCCESS! -->\n <app-arrow-animation\n [showArrowAnimation]=\"showArrowAnimation()\"\n [isPopupOpen]=\"isPopupOpen()\"\n [messageLabel]=\"messageLabel()\"\n (closeArrowAnimation)=\"handleCloseArrowAnimation()\"\n ></app-arrow-animation>\n\n <!-- Help Button -->\n <app-help-button\n [isPopupOpen]=\"isPopupOpen()\"\n (togglePopup)=\"handleTogglePopup()\"\n ></app-help-button>\n\n <!-- Help Popup -->\n <app-help-popup\n [isPopupOpen]=\"isPopupOpen()\"\n [showHelpScreenData]=\"showHelpScreenData()\"\n [showChat]=\"showChat()\"\n [status]=\"status()\"\n [error]=\"error()\"\n [helpScreenData]=\"helpScreenData()\"\n [messages]=\"messages()\"\n [needsAgent]=\"needsAgent()\"\n [assistantStatus]=\"assistantStatus()\"\n [isAblyConnected]=\"isAblyConnected()\"\n [isChatClosed]=\"isChatClosed()\"\n [currentLang]=\"currentLang()\"\n [chatIsLoading]=\"chatIsLoading()\"\n [sessionId]=\"sessionId()\"\n [selectedOption]=\"selectedOption()\"\n [selectedNestedOption]=\"selectedNestedOption()\"\n [showEndChatConfirmation]=\"showEndChatConfirmation()\"\n [showStartNewChatConfirmation]=\"showStartNewChatConfirmation()\"\n [showReviewDialog]=\"showReviewDialog()\"\n [isSubmittingReview]=\"isSubmittingReview()\"\n [isStartingNewChat]=\"isStartingNewChat()\"\n (closePopup)=\"handleClosePopup()\"\n (minimizePopup)=\"handleMinimizePopup()\"\n (back)=\"handleBack()\"\n (showChatEvent)=\"handleShowChat()\"\n (endChat)=\"handleEndChat()\"\n (confirmEndChat)=\"confirmEndChat()\"\n (cancelEndChat)=\"cancelEndChat()\"\n (closeEndChat)=\"closeEndChat()\"\n (confirmStartNewChat)=\"confirmStartNewChat()\"\n (cancelStartNewChat)=\"cancelStartNewChat()\"\n (closeStartNewChat)=\"closeStartNewChat()\"\n (reviewSubmit)=\"handleReviewSubmit($event)\"\n (reviewSkip)=\"handleReviewSkip()\"\n (reviewClose)=\"handleReviewClose()\"\n (reviewSubmitFromChat)=\"handleReviewSubmitFromChat($event)\"\n (reviewSkipFromChat)=\"handleReviewSkipFromChat()\"\n (sendMessageEvent)=\"sendMessage($event)\"\n (requestSessionForAttachments)=\"handleRequestSessionForAttachments()\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n (navigateToUrl)=\"navigateToUrl($event)\"\n />\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--babylai-font-sans: \"Cairo\", sans-serif;--babylai-color-black: #000;--babylai-color-white: #fff;--babylai-spacing: .25rem;--babylai-container-xs: 20rem;--babylai-text-xs: .75rem;--babylai-text-xs--line-height: calc(1 / .75);--babylai-text-sm: .875rem;--babylai-text-sm--line-height: calc(1.25 / .875);--babylai-text-base: 1rem;--babylai-text-base--line-height: 1.5 ;--babylai-text-lg: 1.125rem;--babylai-text-lg--line-height: calc(1.75 / 1.125);--babylai-text-xl: 1.25rem;--babylai-text-xl--line-height: calc(1.75 / 1.25);--babylai-text-2xl: 1.5rem;--babylai-text-2xl--line-height: calc(2 / 1.5);--babylai-font-weight-normal: 400;--babylai-font-weight-medium: 500;--babylai-font-weight-semibold: 600;--babylai-font-weight-bold: 700;--babylai-tracking-tight: -.025em;--babylai-leading-snug: 1.375;--babylai-radius-md: .375rem;--babylai-radius-lg: .5rem;--babylai-radius-xl: .75rem;--babylai-radius-2xl: 1rem;--babylai-radius-3xl: 1.5rem;--babylai-ease-out: cubic-bezier(0, 0, .2, 1);--babylai-default-transition-duration: .15s;--babylai-default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--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-500: var(--babylai-primary-color-500);--babylai-color-primary-600: var(--babylai-primary-color-600);--babylai-color-card: var(--babylai-card);--babylai-color-card-foreground: var(--babylai-card-foreground);--babylai-color-secondary: var(--babylai-secondary);--babylai-color-secondary-foreground: var(--babylai-secondary-foreground);--babylai-color-muted: var(--babylai-muted);--babylai-color-muted-foreground: var(--babylai-muted-foreground);--babylai-color-destructive: var(--babylai-destructive);--babylai-color-border: var(--babylai-border);--babylai-color-black-white-50: var(--babylai-black-white-50);--babylai-color-black-white-200: var(--babylai-black-white-200);--babylai-color-black-white-300: var(--babylai-black-white-300)}}@layer utilities{.babylai\\:pointer-events-auto{pointer-events:auto}.babylai\\:pointer-events-none{pointer-events:none}.babylai\\:invisible{visibility:hidden}.babylai\\:sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.babylai\\:absolute{position:absolute}.babylai\\:fixed{position:fixed}.babylai\\:relative{position:relative}.babylai\\:sticky{position:sticky}.babylai\\:inset-0{inset:calc(var(--babylai-spacing) * 0)}.babylai\\:-top-2{top:calc(var(--babylai-spacing) * -2)}.babylai\\:top-0\\.5{top:calc(var(--babylai-spacing) * .5)}.babylai\\:top-1\\/2{top:50%}.babylai\\:top-4{top:calc(var(--babylai-spacing) * 4)}.babylai\\:-right-2{right:calc(var(--babylai-spacing) * -2)}.babylai\\:right-0{right:calc(var(--babylai-spacing) * 0)}.babylai\\:right-0\\.5{right:calc(var(--babylai-spacing) * .5)}.babylai\\:right-4{right:calc(var(--babylai-spacing) * 4)}.babylai\\:right-5{right:calc(var(--babylai-spacing) * 5)}.babylai\\:right-6{right:calc(var(--babylai-spacing) * 6)}.babylai\\:bottom-0{bottom:calc(var(--babylai-spacing) * 0)}.babylai\\:bottom-4{bottom:calc(var(--babylai-spacing) * 4)}.babylai\\:bottom-6{bottom:calc(var(--babylai-spacing) * 6)}.babylai\\:bottom-11{bottom:calc(var(--babylai-spacing) * 11)}.babylai\\:bottom-20{bottom:calc(var(--babylai-spacing) * 20)}.babylai\\:bottom-24{bottom:calc(var(--babylai-spacing) * 24)}.babylai\\:bottom-\\[-8px\\]{bottom:-8px}.babylai\\:left-0{left:calc(var(--babylai-spacing) * 0)}.babylai\\:left-1\\/2{left:50%}.babylai\\:left-4{left:calc(var(--babylai-spacing) * 4)}.babylai\\:z-1{z-index:1}.babylai\\:z-10{z-index:10}.babylai\\:z-20{z-index:20}.babylai\\:z-50{z-index:50}.babylai\\:z-1000{z-index:1000}.babylai\\:z-9997{z-index:9997}.babylai\\:z-9998{z-index:9998}.babylai\\:z-9999{z-index:9999}.babylai\\:z-10001{z-index:10001}.babylai\\:m-0{margin:calc(var(--babylai-spacing) * 0)}.babylai\\:ms-auto{margin-inline-start:auto}.babylai\\:me-3{margin-inline-end:calc(var(--babylai-spacing) * 3)}.babylai\\:mt-1{margin-top:calc(var(--babylai-spacing) * 1)}.babylai\\:mt-6{margin-top:calc(var(--babylai-spacing) * 6)}.babylai\\:mb-0{margin-bottom:calc(var(--babylai-spacing) * 0)}.babylai\\:mb-1{margin-bottom:calc(var(--babylai-spacing) * 1)}.babylai\\:mb-2{margin-bottom:calc(var(--babylai-spacing) * 2)}.babylai\\:mb-2\\!{margin-bottom:calc(var(--babylai-spacing) * 2)!important}.babylai\\:mb-4{margin-bottom:calc(var(--babylai-spacing) * 4)}.babylai\\:mb-5{margin-bottom:calc(var(--babylai-spacing) * 5)}.babylai\\:mb-6{margin-bottom:calc(var(--babylai-spacing) * 6)}.babylai\\:ml-auto{margin-left:auto}.babylai\\:box-border{box-sizing:border-box}.babylai\\:block{display:block}.babylai\\:flex{display:flex}.babylai\\:grid{display:grid}.babylai\\:hidden{display:none}.babylai\\:inline-block{display:inline-block}.babylai\\:inline-flex{display:inline-flex}.babylai\\:h-0{height:calc(var(--babylai-spacing) * 0)}.babylai\\:h-1\\.5{height:calc(var(--babylai-spacing) * 1.5)}.babylai\\:h-3{height:calc(var(--babylai-spacing) * 3)}.babylai\\:h-4{height:calc(var(--babylai-spacing) * 4)}.babylai\\:h-5{height:calc(var(--babylai-spacing) * 5)}.babylai\\:h-6{height:calc(var(--babylai-spacing) * 6)}.babylai\\:h-7{height:calc(var(--babylai-spacing) * 7)}.babylai\\:h-8{height:calc(var(--babylai-spacing) * 8)}.babylai\\:h-10{height:calc(var(--babylai-spacing) * 10)}.babylai\\:h-12{height:calc(var(--babylai-spacing) * 12)}.babylai\\:h-20{height:calc(var(--babylai-spacing) * 20)}.babylai\\:h-\\[50px\\]{height:50px}.babylai\\:h-\\[600px\\]{height:600px}.babylai\\:h-\\[calc\\(100vh-12rem\\)\\]{height:calc(100vh - 12rem)}.babylai\\:h-auto{height:auto}.babylai\\:h-full{height:100%}.babylai\\:h-screen{height:100vh}.babylai\\:max-h-\\[90vh\\]{max-height:90vh}.babylai\\:max-h-\\[800px\\]{max-height:800px}.babylai\\:max-h-full{max-height:100%}.babylai\\:min-h-20{min-height:calc(var(--babylai-spacing) * 20)}.babylai\\:w-0{width:calc(var(--babylai-spacing) * 0)}.babylai\\:w-1\\.5{width:calc(var(--babylai-spacing) * 1.5)}.babylai\\:w-3{width:calc(var(--babylai-spacing) * 3)}.babylai\\:w-4{width:calc(var(--babylai-spacing) * 4)}.babylai\\:w-5{width:calc(var(--babylai-spacing) * 5)}.babylai\\:w-6{width:calc(var(--babylai-spacing) * 6)}.babylai\\:w-7{width:calc(var(--babylai-spacing) * 7)}.babylai\\:w-8{width:calc(var(--babylai-spacing) * 8)}.babylai\\:w-10{width:calc(var(--babylai-spacing) * 10)}.babylai\\:w-12{width:calc(var(--babylai-spacing) * 12)}.babylai\\:w-15{width:calc(var(--babylai-spacing) * 15)}.babylai\\:w-20{width:calc(var(--babylai-spacing) * 20)}.babylai\\:w-96{width:calc(var(--babylai-spacing) * 96)}.babylai\\:w-\\[50px\\]{width:50px}.babylai\\:w-auto{width:auto}.babylai\\:w-full{width:100%}.babylai\\:max-w-40{max-width:calc(var(--babylai-spacing) * 40)}.babylai\\:max-w-\\[80\\%\\]{max-width:80%}.babylai\\:max-w-\\[90vw\\]{max-width:90vw}.babylai\\:max-w-\\[220px\\]{max-width:220px}.babylai\\:max-w-\\[800px\\]{max-width:800px}.babylai\\:max-w-full{max-width:100%}.babylai\\:max-w-xs{max-width:var(--babylai-container-xs)}.babylai\\:min-w-0{min-width:calc(var(--babylai-spacing) * 0)}.babylai\\:flex-1{flex:1}.babylai\\:shrink-0{flex-shrink:0}.babylai\\:-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:translate-y-0{--tw-translate-y: calc(var(--babylai-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:translate-y-2{--tw-translate-y: calc(var(--babylai-spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:scale-100{--tw-scale-x: 100%;--tw-scale-y: 100%;--tw-scale-z: 100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.babylai\\:scale-\\[0\\.96\\]{scale:.96}.babylai\\:cursor-not-allowed{cursor:not-allowed}.babylai\\:cursor-pointer{cursor:pointer}.babylai\\:resize-none{resize:none}.babylai\\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.babylai\\:flex-col{flex-direction:column}.babylai\\:flex-row-reverse{flex-direction:row-reverse}.babylai\\:flex-wrap{flex-wrap:wrap}.babylai\\:items-center{align-items:center}.babylai\\:items-end{align-items:flex-end}.babylai\\:items-start{align-items:flex-start}.babylai\\:justify-between{justify-content:space-between}.babylai\\:justify-center{justify-content:center}.babylai\\:justify-end{justify-content:flex-end}.babylai\\:gap-0\\.5{gap:calc(var(--babylai-spacing) * .5)}.babylai\\:gap-1{gap:calc(var(--babylai-spacing) * 1)}.babylai\\:gap-1\\.5{gap:calc(var(--babylai-spacing) * 1.5)}.babylai\\:gap-2{gap:calc(var(--babylai-spacing) * 2)}.babylai\\:gap-2\\.5{gap:calc(var(--babylai-spacing) * 2.5)}.babylai\\:gap-3{gap:calc(var(--babylai-spacing) * 3)}.babylai\\:gap-4{gap:calc(var(--babylai-spacing) * 4)}.babylai\\:gap-6{gap:calc(var(--babylai-spacing) * 6)}.babylai\\:overflow-hidden{overflow:hidden}.babylai\\:overflow-x-auto{overflow-x:auto}.babylai\\:overflow-y-auto{overflow-y:auto}.babylai\\:rounded-2xl{border-radius:var(--babylai-radius-2xl)}.babylai\\:rounded-3xl{border-radius:var(--babylai-radius-3xl)}.babylai\\:rounded-full{border-radius:calc(infinity * 1px)}.babylai\\:rounded-lg{border-radius:var(--babylai-radius-lg)}.babylai\\:rounded-md{border-radius:var(--babylai-radius-md)}.babylai\\:rounded-xl{border-radius:var(--babylai-radius-xl)}.babylai\\:rounded-t-2xl{border-top-left-radius:var(--babylai-radius-2xl);border-top-right-radius:var(--babylai-radius-2xl)}.babylai\\:border{border-style:var(--tw-border-style);border-width:1px}.babylai\\:border-0{border-style:var(--tw-border-style);border-width:0px}.babylai\\:border-2{border-style:var(--tw-border-style);border-width:2px}.babylai\\:border-\\[0\\.5px\\]{border-style:var(--tw-border-style);border-width:.5px}.babylai\\:border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.babylai\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.babylai\\:border-t-8{border-top-style:var(--tw-border-style);border-top-width:8px}.babylai\\:border-r-8{border-right-style:var(--tw-border-style);border-right-width:8px}.babylai\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.babylai\\:border-l-8{border-left-style:var(--tw-border-style);border-left-width:8px}.babylai\\:border-none{--tw-border-style: none;border-style:none}.babylai\\:border-black-white-50{border-color:var(--babylai-color-black-white-50)}.babylai\\:border-black-white-200{border-color:var(--babylai-color-black-white-200)}.babylai\\:border-border{border-color:var(--babylai-color-border)}.babylai\\:border-destructive{border-color:var(--babylai-color-destructive)}.babylai\\:border-primary{border-color:var(--babylai-color-primary)}.babylai\\:border-white\\/20{border-color:var(--babylai-color-white)}@supports (color: color-mix(in lab,red,red)){.babylai\\:border-white\\/20{border-color:color-mix(in oklab,var(--babylai-color-white) 20%,transparent)}}.babylai\\:border-t-primary{border-top-color:var(--babylai-color-primary)}.babylai\\:border-r-transparent{border-right-color:transparent}.babylai\\:border-l-transparent{border-left-color:transparent}.babylai\\:bg-black-white-50{background-color:var(--babylai-color-black-white-50)}.babylai\\:bg-black\\/30{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/30{background-color:color-mix(in oklab,var(--babylai-color-black) 30%,transparent)}}.babylai\\:bg-black\\/50{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/50{background-color:color-mix(in oklab,var(--babylai-color-black) 50%,transparent)}}.babylai\\:bg-black\\/60{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/60{background-color:color-mix(in oklab,var(--babylai-color-black) 60%,transparent)}}.babylai\\:bg-black\\/90{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/90{background-color:color-mix(in oklab,var(--babylai-color-black) 90%,transparent)}}.babylai\\:bg-card{background-color:var(--babylai-color-card)}.babylai\\:bg-card-foreground\\/50{background-color:var(--babylai-color-card-foreground)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-card-foreground\\/50{background-color:color-mix(in oklab,var(--babylai-color-card-foreground) 50%,transparent)}}.babylai\\:bg-current{background-color:currentcolor}.babylai\\:bg-destructive{background-color:var(--babylai-color-destructive)}.babylai\\:bg-muted{background-color:var(--babylai-color-muted)}.babylai\\:bg-primary{background-color:var(--babylai-color-primary)}.babylai\\:bg-primary-500{background-color:var(--babylai-color-primary-500)}.babylai\\:bg-primary\\/15{background-color:var(--babylai-color-primary)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-primary\\/15{background-color:color-mix(in oklab,var(--babylai-color-primary) 15%,transparent)}}.babylai\\:bg-secondary{background-color:var(--babylai-color-secondary)}.babylai\\:bg-transparent{background-color:transparent}.babylai\\:bg-white,.babylai\\:bg-white\\/10{background-color:var(--babylai-color-white)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-white\\/10{background-color:color-mix(in oklab,var(--babylai-color-white) 10%,transparent)}}.babylai\\:bg-linear-to-b{--tw-gradient-position: to bottom}@supports (background-image: linear-gradient(in lab,red,red)){.babylai\\:bg-linear-to-b{--tw-gradient-position: to bottom in oklab}}.babylai\\:bg-linear-to-b{background-image:linear-gradient(var(--tw-gradient-stops))}.babylai\\:bg-linear-to-t{--tw-gradient-position: to top}@supports (background-image: linear-gradient(in lab,red,red)){.babylai\\:bg-linear-to-t{--tw-gradient-position: to top in oklab}}.babylai\\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.babylai\\:from-card{--tw-gradient-from: var(--babylai-color-card);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.babylai\\:from-\\[28\\.32\\%\\]{--tw-gradient-from-position: 28.32%}.babylai\\:to-transparent{--tw-gradient-to: transparent;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.babylai\\:to-\\[112\\.59\\%\\]{--tw-gradient-to-position: 112.59%}.babylai\\:object-contain{object-fit:contain}.babylai\\:object-cover{object-fit:cover}.babylai\\:p-0{padding:calc(var(--babylai-spacing) * 0)}.babylai\\:p-1{padding:calc(var(--babylai-spacing) * 1)}.babylai\\:p-1\\.5{padding:calc(var(--babylai-spacing) * 1.5)}.babylai\\:p-2{padding:calc(var(--babylai-spacing) * 2)}.babylai\\:p-3{padding:calc(var(--babylai-spacing) * 3)}.babylai\\:p-4{padding:calc(var(--babylai-spacing) * 4)}.babylai\\:p-5{padding:calc(var(--babylai-spacing) * 5)}.babylai\\:p-5\\!{padding:calc(var(--babylai-spacing) * 5)!important}.babylai\\:p-6{padding:calc(var(--babylai-spacing) * 6)}.babylai\\:px-2{padding-inline:calc(var(--babylai-spacing) * 2)}.babylai\\:px-4{padding-inline:calc(var(--babylai-spacing) * 4)}.babylai\\:px-6{padding-inline:calc(var(--babylai-spacing) * 6)}.babylai\\:py-2{padding-block:calc(var(--babylai-spacing) * 2)}.babylai\\:py-3{padding-block:calc(var(--babylai-spacing) * 3)}.babylai\\:py-4{padding-block:calc(var(--babylai-spacing) * 4)}.babylai\\:py-6{padding-block:calc(var(--babylai-spacing) * 6)}.babylai\\:py-28{padding-block:calc(var(--babylai-spacing) * 28)}.babylai\\:pe-2{padding-inline-end:calc(var(--babylai-spacing) * 2)}.babylai\\:pt-0{padding-top:calc(var(--babylai-spacing) * 0)}.babylai\\:pt-6{padding-top:calc(var(--babylai-spacing) * 6)}.babylai\\:pb-4{padding-bottom:calc(var(--babylai-spacing) * 4)}.babylai\\:pb-5{padding-bottom:calc(var(--babylai-spacing) * 5)}.babylai\\:pb-6{padding-bottom:calc(var(--babylai-spacing) * 6)}.babylai\\:text-center{text-align:center}.babylai\\:text-start{text-align:start}.babylai\\:font-sans{font-family:var(--babylai-font-sans)}.babylai\\:text-2xl{font-size:var(--babylai-text-2xl);line-height:var(--tw-leading, var(--babylai-text-2xl--line-height))}.babylai\\:text-2xl\\!{font-size:var(--babylai-text-2xl)!important;line-height:var(--tw-leading, var(--babylai-text-2xl--line-height))!important}.babylai\\:text-base{font-size:var(--babylai-text-base);line-height:var(--tw-leading, var(--babylai-text-base--line-height))}.babylai\\:text-base\\!{font-size:var(--babylai-text-base)!important;line-height:var(--tw-leading, var(--babylai-text-base--line-height))!important}.babylai\\:text-lg{font-size:var(--babylai-text-lg);line-height:var(--tw-leading, var(--babylai-text-lg--line-height))}.babylai\\:text-lg\\!{font-size:var(--babylai-text-lg)!important;line-height:var(--tw-leading, var(--babylai-text-lg--line-height))!important}.babylai\\:text-sm{font-size:var(--babylai-text-sm);line-height:var(--tw-leading, var(--babylai-text-sm--line-height))}.babylai\\:text-xl\\!{font-size:var(--babylai-text-xl)!important;line-height:var(--tw-leading, var(--babylai-text-xl--line-height))!important}.babylai\\:text-xs{font-size:var(--babylai-text-xs);line-height:var(--tw-leading, var(--babylai-text-xs--line-height))}.babylai\\:leading-none{--tw-leading: 1;line-height:1}.babylai\\:leading-snug{--tw-leading: var(--babylai-leading-snug);line-height:var(--babylai-leading-snug)}.babylai\\:font-bold{--tw-font-weight: var(--babylai-font-weight-bold);font-weight:var(--babylai-font-weight-bold)}.babylai\\:font-bold\\!{--tw-font-weight: var(--babylai-font-weight-bold) !important;font-weight:var(--babylai-font-weight-bold)!important}.babylai\\:font-medium{--tw-font-weight: var(--babylai-font-weight-medium);font-weight:var(--babylai-font-weight-medium)}.babylai\\:font-normal{--tw-font-weight: var(--babylai-font-weight-normal);font-weight:var(--babylai-font-weight-normal)}.babylai\\:font-semibold{--tw-font-weight: var(--babylai-font-weight-semibold);font-weight:var(--babylai-font-weight-semibold)}.babylai\\:font-semibold\\!{--tw-font-weight: var(--babylai-font-weight-semibold) !important;font-weight:var(--babylai-font-weight-semibold)!important}.babylai\\:tracking-tight{--tw-tracking: var(--babylai-tracking-tight);letter-spacing:var(--babylai-tracking-tight)}.babylai\\:wrap-break-word{overflow-wrap:break-word}.babylai\\:whitespace-nowrap{white-space:nowrap}.babylai\\:text-\\[\\#F49E00\\]{color:#f49e00}.babylai\\:text-black-white-50{color:var(--babylai-color-black-white-50)}.babylai\\:text-black-white-200{color:var(--babylai-color-black-white-200)}.babylai\\:text-black-white-300{color:var(--babylai-color-black-white-300)}.babylai\\:text-card-foreground{color:var(--babylai-color-card-foreground)}.babylai\\:text-destructive{color:var(--babylai-color-destructive)}.babylai\\:text-muted-foreground{color:var(--babylai-color-muted-foreground)}.babylai\\:text-primary{color:var(--babylai-color-primary)}.babylai\\:text-primary-500{color:var(--babylai-color-primary-500)}.babylai\\:text-secondary-foreground{color:var(--babylai-color-secondary-foreground)}.babylai\\:text-white{color:var(--babylai-color-white)}.babylai\\:no-underline{text-decoration-line:none}.babylai\\:opacity-0{opacity:0%}.babylai\\:opacity-30{opacity:30%}.babylai\\:opacity-50{opacity:50%}.babylai\\:opacity-70{opacity:70%}.babylai\\:opacity-80{opacity:80%}.babylai\\:opacity-100{opacity:100%}.babylai\\:shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.babylai\\:shadow-md{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.babylai\\:ring{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.babylai\\:ring-primary-500{--tw-ring-color: var(--babylai-color-primary-500)}.babylai\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--babylai-default-transition-timing-function));transition-duration:var(--tw-duration, var(--babylai-default-transition-duration))}.babylai\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--babylai-default-transition-timing-function));transition-duration:var(--tw-duration, var(--babylai-default-transition-duration))}.babylai\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--babylai-default-transition-timing-function));transition-duration:var(--tw-duration, var(--babylai-default-transition-duration))}.babylai\\:duration-200{--tw-duration: .2s;transition-duration:.2s}.babylai\\:duration-250{--tw-duration: .25s;transition-duration:.25s}.babylai\\:ease-out{--tw-ease: var(--babylai-ease-out);transition-timing-function:var(--babylai-ease-out)}.babylai\\:outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.babylai\\:hover\\:scale-110:hover{--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@media(hover:hover){.babylai\\:hover\\:border-primary-200:hover{border-color:var(--babylai-color-primary-200)}}@media(hover:hover){.babylai\\:hover\\:border-primary-600:hover{border-color:var(--babylai-color-primary-600)}}@media(hover:hover){.babylai\\:hover\\:bg-primary-100:hover{background-color:var(--babylai-color-primary-100)}}@media(hover:hover){.babylai\\:hover\\:bg-primary-600:hover{background-color:var(--babylai-color-primary-600)}}@media(hover:hover){.babylai\\:hover\\:bg-secondary:hover{background-color:var(--babylai-color-secondary)}}@media(hover:hover){.babylai\\:hover\\:bg-white\\/20:hover{background-color:var(--babylai-color-white)}@supports (color: color-mix(in lab,red,red)){.babylai\\:hover\\:bg-white\\/20:hover{background-color:color-mix(in oklab,var(--babylai-color-white) 20%,transparent)}}}@media(hover:hover){.babylai\\:hover\\:text-\\[\\#F49E00\\]:hover{color:#f49e00}}@media(hover:hover){.babylai\\:hover\\:text-primary-500:hover{color:var(--babylai-color-primary-500)}}@media(hover:hover){.babylai\\:hover\\:opacity-80:hover{opacity:80%}}.babylai\\:active\\:scale-\\[0\\.98\\]:active{scale:.98}.babylai\\:active\\:opacity-95:active{opacity:95%}.babylai\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.babylai\\:disabled\\:border-black-white-300:disabled{border-color:var(--babylai-color-black-white-300)}.babylai\\:disabled\\:bg-black-white-300:disabled{background-color:var(--babylai-color-black-white-300)}.babylai\\:disabled\\:bg-secondary:disabled{background-color:var(--babylai-color-secondary)}.babylai\\:disabled\\:text-white:disabled{color:var(--babylai-color-white)}.babylai\\:disabled\\:opacity-50:disabled{opacity:50%}@media(prefers-color-scheme:dark){.babylai\\:dark\\:text-muted-foreground{color:var(--babylai-color-muted-foreground)}}}:root{--babylai-font-sans: \"Cairo\", sans-serif;--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;--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: .5rem}.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:.2s}.babylai-typing-dot:nth-child(3){animation-delay:.4s}.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)}.babylai-theme-root *{box-sizing:border-box}.babylai-theme-root button{font:inherit}.babylai-theme-root input,.babylai-theme-root textarea{font-family:inherit}.babylai-theme-root h1,.babylai-theme-root h2,.babylai-theme-root h3,.babylai-theme-root h4,.babylai-theme-root h5,.babylai-theme-root h6{font-size:inherit;font-weight:inherit}.babylai-theme-root h1,.babylai-theme-root h2,.babylai-theme-root h3,.babylai-theme-root h4,.babylai-theme-root h5,.babylai-theme-root h6,.babylai-theme-root p{margin:0}.babylai-theme-root ul,.babylai-theme-root ol{list-style:auto;padding-inline-start:40px;margin-block-start:1rem;margin-block-end:1rem}.bg-header{background:linear-gradient(171deg,var(--babylai-primary-color) -131.06%,var(--babylai-black-white-50) 89.82%)}@supports (color: color-mix(in lab,red,red)){.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%)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: \"*\"; inherits: false;}@property --tw-gradient-from{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-via-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-from-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@keyframes typing-dot{0%,60%,to{opacity:.35;transform:scale(.85)}30%{opacity:1;transform:scale(1)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ArrowAnimationComponent, selector: "app-arrow-animation", inputs: ["showArrowAnimation", "isPopupOpen", "messageLabel"], outputs: ["closeArrowAnimation"] }, { kind: "component", type: HelpButtonComponent, selector: "app-help-button", inputs: ["isPopupOpen"], outputs: ["togglePopup"] }, { kind: "component", type: HelpPopupComponent, selector: "app-help-popup", inputs: ["isPopupOpen", "showHelpScreenData", "showChat", "status", "error", "helpScreenData", "messages", "needsAgent", "assistantStatus", "isAblyConnected", "isChatClosed", "currentLang", "chatIsLoading", "sessionId", "selectedOption", "selectedNestedOption", "showEndChatConfirmation", "showStartNewChatConfirmation", "showReviewDialog", "isSubmittingReview", "isStartingNewChat"], outputs: ["closePopup", "minimizePopup", "back", "showChatEvent", "endChat", "confirmEndChat", "cancelEndChat", "closeEndChat", "confirmStartNewChat", "cancelStartNewChat", "closeStartNewChat", "reviewSubmit", "reviewSkip", "reviewClose", "reviewSubmitFromChat", "reviewSkipFromChat", "startNewChat", "navigateToUrl", "sendMessageEvent", "requestSessionForAttachments"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
type: Component,
args: [{ selector: 'app-help-center-widget', standalone: true, imports: [
CommonModule,
FormsModule,
ArrowAnimationComponent,
HelpButtonComponent,
HelpPopupComponent,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"babylai-theme-root babylai:flex babylai:flex-col babylai:items-end babylai:h-auto babylai:w-auto babylai:fixed babylai:bottom-6 babylai:right-6 babylai:z-9998\"\n [dir]=\"getDirection()\"\n>\n <!-- TEST: Version mismatch fixed - Arrow Animation - SUCCESS! -->\n <app-arrow-animation\n [showArrowAnimation]=\"showArrowAnimation()\"\n [isPopupOpen]=\"isPopupOpen()\"\n [messageLabel]=\"messageLabel()\"\n (closeArrowAnimation)=\"handleCloseArrowAnimation()\"\n ></app-arrow-animation>\n\n <!-- Help Button -->\n <app-help-button\n [isPopupOpen]=\"isPopupOpen()\"\n (togglePopup)=\"handleTogglePopup()\"\n ></app-help-button>\n\n <!-- Help Popup -->\n <app-help-popup\n [isPopupOpen]=\"isPopupOpen()\"\n [showHelpScreenData]=\"showHelpScreenData()\"\n [showChat]=\"showChat()\"\n [status]=\"status()\"\n [error]=\"error()\"\n [helpScreenData]=\"helpScreenData()\"\n [messages]=\"messages()\"\n [needsAgent]=\"needsAgent()\"\n [assistantStatus]=\"assistantStatus()\"\n [isAblyConnected]=\"isAblyConnected()\"\n [isChatClosed]=\"isChatClosed()\"\n [currentLang]=\"currentLang()\"\n [chatIsLoading]=\"chatIsLoading()\"\n [sessionId]=\"sessionId()\"\n [selectedOption]=\"selectedOption()\"\n [selectedNestedOption]=\"selectedNestedOption()\"\n [showEndChatConfirmation]=\"showEndChatConfirmation()\"\n [showStartNewChatConfirmation]=\"showStartNewChatConfirmation()\"\n [showReviewDialog]=\"showReviewDialog()\"\n [isSubmittingReview]=\"isSubmittingReview()\"\n [isStartingNewChat]=\"isStartingNewChat()\"\n (closePopup)=\"handleClosePopup()\"\n (minimizePopup)=\"handleMinimizePopup()\"\n (back)=\"handleBack()\"\n (showChatEvent)=\"handleShowChat()\"\n (endChat)=\"handleEndChat()\"\n (confirmEndChat)=\"confirmEndChat()\"\n (cancelEndChat)=\"cancelEndChat()\"\n (closeEndChat)=\"closeEndChat()\"\n (confirmStartNewChat)=\"confirmStartNewChat()\"\n (cancelStartNewChat)=\"cancelStartNewChat()\"\n (closeStartNewChat)=\"closeStartNewChat()\"\n (reviewSubmit)=\"handleReviewSubmit($event)\"\n (reviewSkip)=\"handleReviewSkip()\"\n (reviewClose)=\"handleReviewClose()\"\n (reviewSubmitFromChat)=\"handleReviewSubmitFromChat($event)\"\n (reviewSkipFromChat)=\"handleReviewSkipFromChat()\"\n (sendMessageEvent)=\"sendMessage($event)\"\n (requestSessionForAttachments)=\"handleRequestSessionForAttachments()\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n (navigateToUrl)=\"navigateToUrl($event)\"\n />\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--babylai-font-sans: \"Cairo\", sans-serif;--babylai-color-black: #000;--babylai-color-white: #fff;--babylai-spacing: .25rem;--babylai-container-xs: 20rem;--babylai-text-xs: .75rem;--babylai-text-xs--line-height: calc(1 / .75);--babylai-text-sm: .875rem;--babylai-text-sm--line-height: calc(1.25 / .875);--babylai-text-base: 1rem;--babylai-text-base--line-height: 1.5 ;--babylai-text-lg: 1.125rem;--babylai-text-lg--line-height: calc(1.75 / 1.125);--babylai-text-xl: 1.25rem;--babylai-text-xl--line-height: calc(1.75 / 1.25);--babylai-text-2xl: 1.5rem;--babylai-text-2xl--line-height: calc(2 / 1.5);--babylai-font-weight-normal: 400;--babylai-font-weight-medium: 500;--babylai-font-weight-semibold: 600;--babylai-font-weight-bold: 700;--babylai-tracking-tight: -.025em;--babylai-leading-snug: 1.375;--babylai-radius-md: .375rem;--babylai-radius-lg: .5rem;--babylai-radius-xl: .75rem;--babylai-radius-2xl: 1rem;--babylai-radius-3xl: 1.5rem;--babylai-ease-out: cubic-bezier(0, 0, .2, 1);--babylai-default-transition-duration: .15s;--babylai-default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--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-500: var(--babylai-primary-color-500);--babylai-color-primary-600: var(--babylai-primary-color-600);--babylai-color-card: var(--babylai-card);--babylai-color-card-foreground: var(--babylai-card-foreground);--babylai-color-secondary: var(--babylai-secondary);--babylai-color-secondary-foreground: var(--babylai-secondary-foreground);--babylai-color-muted: var(--babylai-muted);--babylai-color-muted-foreground: var(--babylai-muted-foreground);--babylai-color-destructive: var(--babylai-destructive);--babylai-color-border: var(--babylai-border);--babylai-color-black-white-50: var(--babylai-black-white-50);--babylai-color-black-white-200: var(--babylai-black-white-200);--babylai-color-black-white-300: var(--babylai-black-white-300)}}@layer utilities{.babylai\\:pointer-events-auto{pointer-events:auto}.babylai\\:pointer-events-none{pointer-events:none}.babylai\\:invisible{visibility:hidden}.babylai\\:sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.babylai\\:absolute{position:absolute}.babylai\\:fixed{position:fixed}.babylai\\:relative{position:relative}.babylai\\:sticky{position:sticky}.babylai\\:inset-0{inset:calc(var(--babylai-spacing) * 0)}.babylai\\:-top-2{top:calc(var(--babylai-spacing) * -2)}.babylai\\:top-0\\.5{top:calc(var(--babylai-spacing) * .5)}.babylai\\:top-1\\/2{top:50%}.babylai\\:top-4{top:calc(var(--babylai-spacing) * 4)}.babylai\\:-right-2{right:calc(var(--babylai-spacing) * -2)}.babylai\\:right-0{right:calc(var(--babylai-spacing) * 0)}.babylai\\:right-0\\.5{right:calc(var(--babylai-spacing) * .5)}.babylai\\:right-4{right:calc(var(--babylai-spacing) * 4)}.babylai\\:right-5{right:calc(var(--babylai-spacing) * 5)}.babylai\\:right-6{right:calc(var(--babylai-spacing) * 6)}.babylai\\:bottom-0{bottom:calc(var(--babylai-spacing) * 0)}.babylai\\:bottom-4{bottom:calc(var(--babylai-spacing) * 4)}.babylai\\:bottom-6{bottom:calc(var(--babylai-spacing) * 6)}.babylai\\:bottom-11{bottom:calc(var(--babylai-spacing) * 11)}.babylai\\:bottom-20{bottom:calc(var(--babylai-spacing) * 20)}.babylai\\:bottom-24{bottom:calc(var(--babylai-spacing) * 24)}.babylai\\:bottom-\\[-8px\\]{bottom:-8px}.babylai\\:left-0{left:calc(var(--babylai-spacing) * 0)}.babylai\\:left-1\\/2{left:50%}.babylai\\:left-4{left:calc(var(--babylai-spacing) * 4)}.babylai\\:z-1{z-index:1}.babylai\\:z-10{z-index:10}.babylai\\:z-20{z-index:20}.babylai\\:z-50{z-index:50}.babylai\\:z-1000{z-index:1000}.babylai\\:z-9997{z-index:9997}.babylai\\:z-9998{z-index:9998}.babylai\\:z-9999{z-index:9999}.babylai\\:z-10001{z-index:10001}.babylai\\:m-0{margin:calc(var(--babylai-spacing) * 0)}.babylai\\:ms-auto{margin-inline-start:auto}.babylai\\:me-3{margin-inline-end:calc(var(--babylai-spacing) * 3)}.babylai\\:mt-1{margin-top:calc(var(--babylai-spacing) * 1)}.babylai\\:mt-6{margin-top:calc(var(--babylai-spacing) * 6)}.babylai\\:mb-0{margin-bottom:calc(var(--babylai-spacing) * 0)}.babylai\\:mb-1{margin-bottom:calc(var(--babylai-spacing) * 1)}.babylai\\:mb-2{margin-bottom:calc(var(--babylai-spacing) * 2)}.babylai\\:mb-2\\!{margin-bottom:calc(var(--babylai-spacing) * 2)!important}.babylai\\:mb-4{margin-bottom:calc(var(--babylai-spacing) * 4)}.babylai\\:mb-5{margin-bottom:calc(var(--babylai-spacing) * 5)}.babylai\\:mb-6{margin-bottom:calc(var(--babylai-spacing) * 6)}.babylai\\:ml-auto{margin-left:auto}.babylai\\:box-border{box-sizing:border-box}.babylai\\:block{display:block}.babylai\\:flex{display:flex}.babylai\\:grid{display:grid}.babylai\\:hidden{display:none}.babylai\\:inline-block{display:inline-block}.babylai\\:inline-flex{display:inline-flex}.babylai\\:h-0{height:calc(var(--babylai-spacing) * 0)}.babylai\\:h-1\\.5{height:calc(var(--babylai-spacing) * 1.5)}.babylai\\:h-3{height:calc(var(--babylai-spacing) * 3)}.babylai\\:h-4{height:calc(var(--babylai-spacing) * 4)}.babylai\\:h-5{height:calc(var(--babylai-spacing) * 5)}.babylai\\:h-6{height:calc(var(--babylai-spacing) * 6)}.babylai\\:h-7{height:calc(var(--babylai-spacing) * 7)}.babylai\\:h-8{height:calc(var(--babylai-spacing) * 8)}.babylai\\:h-10{height:calc(var(--babylai-spacing) * 10)}.babylai\\:h-12{height:calc(var(--babylai-spacing) * 12)}.babylai\\:h-20{height:calc(var(--babylai-spacing) * 20)}.babylai\\:h-\\[50px\\]{height:50px}.babylai\\:h-\\[600px\\]{height:600px}.babylai\\:h-\\[calc\\(100vh-12rem\\)\\]{height:calc(100vh - 12rem)}.babylai\\:h-auto{height:auto}.babylai\\:h-full{height:100%}.babylai\\:h-screen{height:100vh}.babylai\\:max-h-\\[90vh\\]{max-height:90vh}.babylai\\:max-h-\\[800px\\]{max-height:800px}.babylai\\:max-h-full{max-height:100%}.babylai\\:min-h-20{min-height:calc(var(--babylai-spacing) * 20)}.babylai\\:w-0{width:calc(var(--babylai-spacing) * 0)}.babylai\\:w-1\\.5{width:calc(var(--babylai-spacing) * 1.5)}.babylai\\:w-3{width:calc(var(--babylai-spacing) * 3)}.babylai\\:w-4{width:calc(var(--babylai-spacing) * 4)}.babylai\\:w-5{width:calc(var(--babylai-spacing) * 5)}.babylai\\:w-6{width:calc(var(--babylai-spacing) * 6)}.babylai\\:w-7{width:calc(var(--babylai-spacing) * 7)}.babylai\\:w-8{width:calc(var(--babylai-spacing) * 8)}.babylai\\:w-10{width:calc(var(--babylai-spacing) * 10)}.babylai\\:w-12{width:calc(var(--babylai-spacing) * 12)}.babylai\\:w-15{width:calc(var(--babylai-spacing) * 15)}.babylai\\:w-20{width:calc(var(--babylai-spacing) * 20)}.babylai\\:w-96{width:calc(var(--babylai-spacing) * 96)}.babylai\\:w-\\[50px\\]{width:50px}.babylai\\:w-auto{width:auto}.babylai\\:w-full{width:100%}.babylai\\:max-w-40{max-width:calc(var(--babylai-spacing) * 40)}.babylai\\:max-w-\\[80\\%\\]{max-width:80%}.babylai\\:max-w-\\[90vw\\]{max-width:90vw}.babylai\\:max-w-\\[220px\\]{max-width:220px}.babylai\\:max-w-\\[800px\\]{max-width:800px}.babylai\\:max-w-full{max-width:100%}.babylai\\:max-w-xs{max-width:var(--babylai-container-xs)}.babylai\\:min-w-0{min-width:calc(var(--babylai-spacing) * 0)}.babylai\\:flex-1{flex:1}.babylai\\:shrink-0{flex-shrink:0}.babylai\\:-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:translate-y-0{--tw-translate-y: calc(var(--babylai-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:translate-y-2{--tw-translate-y: calc(var(--babylai-spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.babylai\\:scale-100{--tw-scale-x: 100%;--tw-scale-y: 100%;--tw-scale-z: 100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.babylai\\:scale-\\[0\\.96\\]{scale:.96}.babylai\\:cursor-not-allowed{cursor:not-allowed}.babylai\\:cursor-pointer{cursor:pointer}.babylai\\:resize-none{resize:none}.babylai\\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.babylai\\:flex-col{flex-direction:column}.babylai\\:flex-row-reverse{flex-direction:row-reverse}.babylai\\:flex-wrap{flex-wrap:wrap}.babylai\\:items-center{align-items:center}.babylai\\:items-end{align-items:flex-end}.babylai\\:items-start{align-items:flex-start}.babylai\\:justify-between{justify-content:space-between}.babylai\\:justify-center{justify-content:center}.babylai\\:justify-end{justify-content:flex-end}.babylai\\:gap-0\\.5{gap:calc(var(--babylai-spacing) * .5)}.babylai\\:gap-1{gap:calc(var(--babylai-spacing) * 1)}.babylai\\:gap-1\\.5{gap:calc(var(--babylai-spacing) * 1.5)}.babylai\\:gap-2{gap:calc(var(--babylai-spacing) * 2)}.babylai\\:gap-2\\.5{gap:calc(var(--babylai-spacing) * 2.5)}.babylai\\:gap-3{gap:calc(var(--babylai-spacing) * 3)}.babylai\\:gap-4{gap:calc(var(--babylai-spacing) * 4)}.babylai\\:gap-6{gap:calc(var(--babylai-spacing) * 6)}.babylai\\:overflow-hidden{overflow:hidden}.babylai\\:overflow-x-auto{overflow-x:auto}.babylai\\:overflow-y-auto{overflow-y:auto}.babylai\\:rounded-2xl{border-radius:var(--babylai-radius-2xl)}.babylai\\:rounded-3xl{border-radius:var(--babylai-radius-3xl)}.babylai\\:rounded-full{border-radius:calc(infinity * 1px)}.babylai\\:rounded-lg{border-radius:var(--babylai-radius-lg)}.babylai\\:rounded-md{border-radius:var(--babylai-radius-md)}.babylai\\:rounded-xl{border-radius:var(--babylai-radius-xl)}.babylai\\:rounded-t-2xl{border-top-left-radius:var(--babylai-radius-2xl);border-top-right-radius:var(--babylai-radius-2xl)}.babylai\\:border{border-style:var(--tw-border-style);border-width:1px}.babylai\\:border-0{border-style:var(--tw-border-style);border-width:0px}.babylai\\:border-2{border-style:var(--tw-border-style);border-width:2px}.babylai\\:border-\\[0\\.5px\\]{border-style:var(--tw-border-style);border-width:.5px}.babylai\\:border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.babylai\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.babylai\\:border-t-8{border-top-style:var(--tw-border-style);border-top-width:8px}.babylai\\:border-r-8{border-right-style:var(--tw-border-style);border-right-width:8px}.babylai\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.babylai\\:border-l-8{border-left-style:var(--tw-border-style);border-left-width:8px}.babylai\\:border-none{--tw-border-style: none;border-style:none}.babylai\\:border-black-white-50{border-color:var(--babylai-color-black-white-50)}.babylai\\:border-black-white-200{border-color:var(--babylai-color-black-white-200)}.babylai\\:border-border{border-color:var(--babylai-color-border)}.babylai\\:border-destructive{border-color:var(--babylai-color-destructive)}.babylai\\:border-primary{border-color:var(--babylai-color-primary)}.babylai\\:border-white\\/20{border-color:var(--babylai-color-white)}@supports (color: color-mix(in lab,red,red)){.babylai\\:border-white\\/20{border-color:color-mix(in oklab,var(--babylai-color-white) 20%,transparent)}}.babylai\\:border-t-primary{border-top-color:var(--babylai-color-primary)}.babylai\\:border-r-transparent{border-right-color:transparent}.babylai\\:border-l-transparent{border-left-color:transparent}.babylai\\:bg-black-white-50{background-color:var(--babylai-color-black-white-50)}.babylai\\:bg-black\\/30{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/30{background-color:color-mix(in oklab,var(--babylai-color-black) 30%,transparent)}}.babylai\\:bg-black\\/50{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/50{background-color:color-mix(in oklab,var(--babylai-color-black) 50%,transparent)}}.babylai\\:bg-black\\/60{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/60{background-color:color-mix(in oklab,var(--babylai-color-black) 60%,transparent)}}.babylai\\:bg-black\\/90{background-color:var(--babylai-color-black)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-black\\/90{background-color:color-mix(in oklab,var(--babylai-color-black) 90%,transparent)}}.babylai\\:bg-card{background-color:var(--babylai-color-card)}.babylai\\:bg-card-foreground\\/50{background-color:var(--babylai-color-card-foreground)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-card-foreground\\/50{background-color:color-mix(in oklab,var(--babylai-color-card-foreground) 50%,transparent)}}.babylai\\:bg-current{background-color:currentcolor}.babylai\\:bg-destructive{background-color:var(--babylai-color-destructive)}.babylai\\:bg-muted{background-color:var(--babylai-color-muted)}.babylai\\:bg-primary{background-color:var(--babylai-color-primary)}.babylai\\:bg-primary-500{background-color:var(--babylai-color-primary-500)}.babylai\\:bg-primary\\/15{background-color:var(--babylai-color-primary)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-primary\\/15{background-color:color-mix(in oklab,var(--babylai-color-primary) 15%,transparent)}}.babylai\\:bg-secondary{background-color:var(--babylai-color-secondary)}.babylai\\:bg-transparent{background-color:transparent}.babylai\\:bg-white,.babylai\\:bg-white\\/10{background-color:var(--babylai-color-white)}@supports (color: color-mix(in lab,red,red)){.babylai\\:bg-white\\/10{background-color:color-mix(in oklab,var(--babylai-color-white) 10%,transparent)}}.babylai\\:bg-linear-to-b{--tw-gradient-position: to bottom}@supports (background-image: linear-gradient(in lab,red,red)){.babylai\\:bg-linear-to-b{--tw-gradient-position: to bottom in oklab}}.babylai\\:bg-linear-to-b{background-image:linear-gradient(var(--tw-gradient-stops))}.babylai\\:bg-linear-to-t{--tw-gradient-position: to top}@supports (background-image: linear-gradient(in lab,red,red)){.babylai\\:bg-linear-to-t{--tw-gradient-position: to top in oklab}}.babylai\\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.babylai\\:from-card{--tw-gradient-from: var(--babylai-color-card);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.babylai\\:from-\\[28\\.32\\%\\]{--tw-gradient-from-position: 28.32%}.babylai\\:to-transparent{--tw-gradient-to: transparent;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.babylai\\:to-\\[112\\.59\\%\\]{--tw-gradient-to-position: 112.59%}.babylai\\:object-contain{object-fit:contain}.babylai\\:object-cover{object-fit:cover}.babylai\\:p-0{padding:calc(var(--babylai-spacing) * 0)}.babylai\\:p-1{padding:calc(var(--babylai-spacing) * 1)}.babylai\\:p-1\\.5{padding:calc(var(--babylai-spacing) * 1.5)}.babylai\\:p-2{padding:calc(var(--babylai-spacing) * 2)}.babylai\\:p-3{padding:calc(var(--babylai-spacing) * 3)}.babylai\\:p-4{padding:calc(var(--babylai-spacing) * 4)}.babylai\\:p-5{padding:calc(var(--babylai-spacing) * 5)}.babylai\\:p-5\\!{padding:calc(var(--babylai-spacing) * 5)!important}.babylai\\:p-6{padding:calc(var(--babylai-spacing) * 6)}.babylai\\:px-2{padding-inline:calc(var(--babylai-spacing) * 2)}.babylai\\:px-4{padding-inline:calc(var(--babylai-spacing) * 4)}.babylai\\:px-6{padding-inline:calc(var(--babylai-spacing) * 6)}.babylai\\:py-2{padding-block:calc(var(--babylai-spacing) * 2)}.babylai\\:py-3{padding-block:calc(var(--babylai-spacing) * 3)}.babylai\\:py-4{padding-block:calc(var(--babylai-spacing) * 4)}.babylai\\:py-6{padding-block:calc(var(--babylai-spacing) * 6)}.babylai\\:py-28{padding-block:calc(var(--babylai-spacing) * 28)}.babylai\\:pe-2{padding-inline-end:calc(var(--babylai-spacing) * 2)}.babylai\\:pt-0{padding-top:calc(var(--babylai-spacing) * 0)}.babylai\\:pt-6{padding-top:calc(var(--babylai-spacing) * 6)}.babylai\\:pb-4{padding-bottom:calc(var(--babylai-spacing) * 4)}.babylai\\:pb-5{padding-bottom:calc(var(--babylai-spacing) * 5)}.babylai\\:pb-6{padding-bottom:calc(var(--babylai-spacing) * 6)}.babylai\\:text-center{text-align:center}.babylai\\:text-start{text-align:start}.babylai\\:font-sans{font-family:var(--babylai-font-sans)}.babylai\\:text-2xl{font-size:var(--babylai-text-2xl);line-height:var(--tw-leading, var(--babylai-text-2xl--line-height))}.babylai\\:text-2xl\\!{font-size:var(--babylai-text-2xl)!important;line-height:var(--tw-leading, var(--babylai-text-2xl--line-height))!important}.babylai\\:text-base{font-size:var(--babylai-text-base);line-height:var(--tw-leading, var(--babylai-text-base--line-height))}.babylai\\:text-base\\!{font-size:var(--babylai-text-base)!important;line-height:var(--tw-leading, var(--babylai-text-base--line-height))!important}.babylai\\:text-lg{font-size:var(--babylai-text-lg);line-height:var(--tw-leading, var(--babylai-text-lg--line-height))}.babylai\\:text-lg\\!{font-size:var(--babylai-text-lg)!important;line-height:var(--tw-leading, var(--babylai-text-lg--line-height))!important}.babylai\\:text-sm{font-size:var(--babylai-text-sm);line-height:var(--tw-leading, var(--babylai-text-sm--line-height))}.babylai\\:text-xl\\!{font-size:var(--babylai-text-xl)!important;line-height:var(--tw-leading, var(--babylai-text-xl--line-height))!important}.babylai\\:text-xs{font-size:var(--babylai-text-xs);line-height:var(--tw-leading, var(--babylai-text-xs--line-height))}.babylai\\:leading-none{--tw-leading: 1;line-height:1}.babylai\\:leading-snug{--tw-leading: var(--babylai-leading-snug);line-height:var(--babylai-leading-snug)}.babylai\\:font-bold{--tw-font-weight: var(--babylai-font-weight-bold);font-weight:var(--babylai-font-weight-bold)}.babylai\\:font-bold\\!{--tw-font-weight: var(--babylai-font-weight-bold) !important;font-weight:var(--babylai-font-weight-bold)!important}.babylai\\:font-medium{--tw-font-weight: var(--babylai-font-weight-medium);font-weight:var(--babylai-font-weight-medium)}.babylai\\:font-normal{--tw-font-weight: var(--babylai-font-weight-normal);font-weight:var(--babylai-font-weight-normal)}.babylai\\:font-semibold{--tw-font-weight: var(--babylai-font-weight-semibold);font-weight:var(--babylai-font-weight-semibold)}.babylai\\:font-semibold\\!{--tw-font-weight: var(--babylai-font-weight-semibold) !important;font-weight:var(--babylai-font-weight-semibold)!important}.babylai\\:tracking-tight{--tw-tracking: var(--babylai-tracking-tight);letter-spacing:var(--babylai-tracking-tight)}.babylai\\:wrap-break-word{overflow-wrap:break-word}.babylai\\:whitespace-nowrap{white-space:nowrap}.babylai\\:text-\\[\\#F49E00\\]{color:#f49e00}.babylai\\:text-black-white-50{color:var(--babylai-color-black-white-50)}.babylai\\:text-black-white-200{color:var(--babylai-color-black-white-200)}.babylai\\:text-black-white-300{color:var(--babylai-color-black-white-300)}.babylai\\:text-card-foreground{color:var(--babylai-color-card-foreground)}.babylai\\:text-destructive{color:var(--babylai-color-destructive)}.babylai\\:text-muted-foreground{color:var(--babylai-color-muted-foreground)}.babylai\\:text-primary{color:var(--babylai-color-primary)}.babylai\\:text-primary-500{color:var(--babylai-color-primary-500)}.babylai\\:text-secondary-foreground{color:var(--babylai-color-secondary-foreground)}.babylai\\:text-white{color:var(--babylai-color-white)}.babylai\\:no-underline{text-decoration-line:none}.babylai\\:opacity-0{opacity:0%}.babylai\\:opacity-30{opacity:30%}.babylai\\:opacity-50{opacity:50%}.babylai\\:opacity-70{opacity:70%}.babylai\\:opacity-80{opacity:80%}.babylai\\:opacity-100{opacity:100%}.babylai\\:shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.babylai\\:shadow-md{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.babylai\\:ring{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.babylai\\:ring-primary-500{--tw-ring-color: var(--babylai-color-primary-500)}.babylai\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--babylai-default-transition-timing-function));transition-duration:var(--tw-duration, var(--babylai-default-transition-duration))}.babylai\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--babylai-default-transition-timing-function));transition-duration:var(--tw-duration, var(--babylai-default-transition-duration))}.babylai\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--babylai-default-transition-timing-function));transition-duration:var(--tw-duration, var(--babylai-default-transition-duration))}.babylai\\:duration-200{--tw-duration: .2s;transition-duration:.2s}.babylai\\:duration-250{--tw-duration: .25s;transition-duration:.25s}.babylai\\:ease-out{--tw-ease: var(--babylai-ease-out);transition-timing-function:var(--babylai-ease-out)}.babylai\\:outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.babylai\\:hover\\:scale-110:hover{--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@media(hover:hover){.babylai\\:hover\\:border-primary-200:hover{border-color:var(--babylai-color-primary-200)}}@media(hover:hover){.babylai\\:hover\\:border-primary-600:hover{border-color:var(--babylai-color-primary-600)}}@media(hover:hover){.babylai\\:hover\\:bg-primary-100:hover{background-color:var(--babylai-color-primary-100)}}@media(hover:hover){.babylai\\:hover\\:bg-primary-600:hover{background-color:var(--babylai-color-primary-600)}}@media(hover:hover){.babylai\\:hover\\:bg-secondary:hover{background-color:var(--babylai-color-secondary)}}@media(hover:hover){.babylai\\:hover\\:bg-white\\/20:hover{background-color:var(--babylai-color-white)}@supports (color: color-mix(in lab,red,red)){.babylai\\:hover\\:bg-white\\/20:hover{background-color:color-mix(in oklab,var(--babylai-color-white) 20%,transparent)}}}@media(hover:hover){.babylai\\:hover\\:text-\\[\\#F49E00\\]:hover{color:#f49e00}}@media(hover:hover){.babylai\\:hover\\:text-primary-500:hover{color:var(--babylai-color-primary-500)}}@media(hover:hover){.babylai\\:hover\\:opacity-80:hover{opacity:80%}}.babylai\\:active\\:scale-\\[0\\.98\\]:active{scale:.98}.babylai\\:active\\:opacity-95:active{opacity:95%}.babylai\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.babylai\\:disabled\\:border-black-white-300:disabled{border-color:var(--babylai-color-black-white-300)}.babylai\\:disabled\\:bg-black-white-300:disabled{background-color:var(--babylai-color-black-white-300)}.babylai\\:disabled\\:bg-secondary:disabled{background-color:var(--babylai-color-secondary)}.babylai\\:disabled\\:text-white:disabled{color:var(--babylai-color-white)}.babylai\\:disabled\\:opacity-50:disabled{opacity:50%}@media(prefers-color-scheme:dark){.babylai\\:dark\\:text-muted-foreground{color:var(--babylai-color-muted-foreground)}}}:root{--babylai-font-sans: \"Cairo\", sans-serif;--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;--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: .5rem}.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:.2s}.babylai-typing-dot:nth-child(3){animation-delay:.4s}.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)}.babylai-theme-root *{box-sizing:border-box}.babylai-theme-root button{font:inherit}.babylai-theme-root input,.babylai-theme-root textarea{font-family:inherit}.babylai-theme-root h1,.babylai-theme-root h2,.babylai-theme-root h3,.babylai-theme-root h4,.babylai-theme-root h5,.babylai-theme-root h6{font-size:inherit;font-weight:inherit}.babylai-theme-root h1,.babylai-theme-root h2,.babylai-theme-root h3,.babylai-theme-root h4,.babylai-theme-root h5,.babylai-theme-root h6,.babylai-theme-root p{margin:0}.babylai-theme-root ul,.babylai-theme-root ol{list-style:auto;padding-inline-start:40px;margin-block-start:1rem;margin-block-end:1rem}.bg-header{background:linear-gradient(171deg,var(--babylai-primary-color) -131.06%,var(--babylai-black-white-50) 89.82%)}@supports (color: color-mix(in lab,red,red)){.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%)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: \"*\"; inherits: false;}@property --tw-gradient-from{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-via-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-from-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@keyframes typing-dot{0%,60%,to{opacity:.35;transform:scale(.85)}30%{opacity:1;transform:scale(1)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
}], ctorParameters: () => [], propDecorators: { getToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "getToken", required: true }] }], helpScreenId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenId", required: true }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], messageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageLabel", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], chatMessagesContainer: [{
type: ViewChild,
args: ['chatMessagesContainer']
}] } });
/**
* Service for managing help center configuration.
*
* Stores configuration such as API base URL and token retrieval function.
* This service is used internally by other services to access configuration.
*
* @publicApi
*/
class HelpCenterConfigService {
_apiBaseUrl = 'https://babylai.net/api';
_getTokenFn;
setApiBaseUrl(url) {
this._apiBaseUrl = url;
}
getApiBaseUrl() {
return this._apiBaseUrl;
}
setGetTokenFn(fn) {
this._getTokenFn = fn;
}
getTokenFn() {
return this._getTokenFn;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpCenterConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpCenterConfigService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HelpCenterConfigService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Service for retrieving authentication tokens from the configured token function.
*
* This service acts as a wrapper around the configured token retrieval function,
* providing a consistent interface for token management.
*
* @publicApi
*/
class TokenService {
config = inject(HelpCenterConfigService);
/**
* Retrieves an authentication token using the configured token function.
*
* @returns Promise resolving to a TokenResponse containing the token and expiry time
* @throws Error if no token function is configured
*/
async getToken() {
// If a custom token function is provided, use it
const customGetToken = this.config.getTokenFn();
if (customGetToken) {
const token = await customGetToken();
return {
token,
expiresIn: 3600, // Default to 1 hour
};
}
// Otherwise, return error that getTokenFn is not provided
throw new Error('getTokenFn is not provided');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TokenService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TokenService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
// Types
/**
* Generated bundle index. Do not edit.
*/
export { ApiService, ChatSessionService, HELP_CENTER_LOADING_LOGO_URL, HelpCenterConfigService, HelpCenterWidgetComponent, LanguageService, TokenService, TranslatePipe, TranslationService };
//# sourceMappingURL=aslaluroba-help-center.mjs.map