@aslaluroba/help-center 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -188
- package/fesm2022/aslaluroba-help-center.mjs +48 -45
- package/fesm2022/aslaluroba-help-center.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +4 -0
- package/src/app/help-center-widget/help-center-widget.component.d.ts +1 -3
- package/src/app/services/api.service.d.ts +6 -1
package/README.md
CHANGED
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
# @aslaluroba/help-center
|
|
2
2
|
|
|
3
|
-
A powerful and customizable help center widget for Angular applications
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- 🎯 Easy integration with any Angular application
|
|
8
|
-
- 🌐 Built-in multi-language support (English & Arabic) with RTL
|
|
9
|
-
- 💬 Real-time chat functionality with SignalR
|
|
10
|
-
- 🤖 AI Assistant integration
|
|
11
|
-
- 📱 Responsive and modern design
|
|
12
|
-
- 🎨 Highly customizable UI
|
|
13
|
-
- 🔒 Secure token-based authentication
|
|
14
|
-
- 🔄 Real-time updates and notifications
|
|
15
|
-
- 📋 Nested options and help screens
|
|
3
|
+
A powerful and customizable help center widget for Angular applications with real-time chat functionality, AI assistance, and multi-language support.
|
|
16
4
|
|
|
17
5
|
## Installation
|
|
18
6
|
|
|
@@ -20,221 +8,126 @@ A powerful and customizable help center widget for Angular applications that pro
|
|
|
20
8
|
npm install @aslaluroba/help-center
|
|
21
9
|
```
|
|
22
10
|
|
|
23
|
-
##
|
|
11
|
+
## Setup and Configuration
|
|
24
12
|
|
|
25
|
-
1. Import
|
|
13
|
+
1. Import and configure the widget in your app.module.ts:
|
|
26
14
|
|
|
27
15
|
```typescript
|
|
28
|
-
import { HelpCenterWidgetComponent,
|
|
16
|
+
import { HelpCenterWidgetComponent, ApiService } from '@aslaluroba/help-center'
|
|
29
17
|
|
|
30
18
|
@NgModule({
|
|
31
|
-
imports: [
|
|
32
|
-
|
|
33
|
-
HelpCenterWidgetComponent
|
|
34
|
-
],
|
|
35
|
-
providers: [HelpCenterConfigService]
|
|
19
|
+
imports: [HelpCenterWidgetComponent],
|
|
20
|
+
providers: [ApiService]
|
|
36
21
|
})
|
|
37
22
|
export class AppModule {}
|
|
38
23
|
```
|
|
39
24
|
|
|
40
|
-
2.
|
|
25
|
+
2. Initialize and use the widget in your component:
|
|
41
26
|
|
|
42
27
|
```typescript
|
|
43
|
-
import { Component } from '@angular/core'
|
|
44
|
-
import {
|
|
28
|
+
import { Component, OnInit } from '@angular/core'
|
|
29
|
+
import { ApiService, ApiConfig, Language } from '@aslaluroba/help-center'
|
|
45
30
|
|
|
46
31
|
@Component({
|
|
47
32
|
selector: 'app-root',
|
|
48
33
|
template: `
|
|
49
|
-
<
|
|
50
|
-
<!-- Language Switcher (Optional) -->
|
|
51
|
-
<div class="language-switcher">
|
|
52
|
-
<button (click)="switchLanguage('en')">English</button>
|
|
53
|
-
<button (click)="switchLanguage('ar')">العربية</button>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<!-- Help Center Widget -->
|
|
57
|
-
<app-help-center-widget
|
|
58
|
-
[getToken]="getToken"
|
|
59
|
-
[helpScreenId]="helpScreenId"
|
|
60
|
-
[showArrow]="true"
|
|
61
|
-
[messageLabel]="'Need help? Click here!'"
|
|
62
|
-
[currentLang]="currentLang"
|
|
63
|
-
[isIntroScreenEnabled]="false"
|
|
64
|
-
>
|
|
65
|
-
</app-help-center-widget>
|
|
66
|
-
</div>
|
|
34
|
+
<app-help-center-widget [helpScreenId]="helpScreenId" [currentLang]="currentLang" [showArrow]="true"> </app-help-center-widget>
|
|
67
35
|
`
|
|
68
36
|
})
|
|
69
|
-
export class AppComponent {
|
|
70
|
-
helpScreenId = 'your-help-screen-id'
|
|
71
|
-
currentLang: Language = 'en'
|
|
72
|
-
|
|
73
|
-
constructor(private
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
37
|
+
export class AppComponent implements OnInit {
|
|
38
|
+
helpScreenId = 'your-help-screen-id' // Required: Your unique help screen ID
|
|
39
|
+
currentLang: Language = 'en' // Default language
|
|
40
|
+
|
|
41
|
+
constructor(private apiService: ApiService) {}
|
|
42
|
+
|
|
43
|
+
ngOnInit() {
|
|
44
|
+
// Initialize API with authentication
|
|
45
|
+
const apiConfig: ApiConfig = {
|
|
46
|
+
getToken: async () => {
|
|
47
|
+
// Implement your token retrieval logic
|
|
48
|
+
const response = await fetch('your-auth-endpoint')
|
|
49
|
+
const data = await response.json()
|
|
50
|
+
return data.token
|
|
51
|
+
}
|
|
52
|
+
// Optional: Override default API URL (default: 'https://babylai.net/api')
|
|
53
|
+
// baseUrl: 'https://your-custom-api.com'
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
this.apiService.initialize(apiConfig)
|
|
88
57
|
}
|
|
89
58
|
}
|
|
90
59
|
```
|
|
91
60
|
|
|
92
|
-
##
|
|
93
|
-
|
|
94
|
-
The library provides several services for advanced customization:
|
|
61
|
+
## Language Support
|
|
95
62
|
|
|
96
|
-
|
|
63
|
+
The widget supports multiple languages with built-in RTL support. Currently available languages:
|
|
97
64
|
|
|
98
|
-
|
|
65
|
+
- English (en) - Default
|
|
66
|
+
- Arabic (ar) - With RTL support
|
|
99
67
|
|
|
100
|
-
|
|
101
|
-
import { HelpCenterConfigService } from '@aslaluroba/help-center'
|
|
102
|
-
|
|
103
|
-
constructor(private config: HelpCenterConfigService) {
|
|
104
|
-
// Set custom API base URL (optional)
|
|
105
|
-
config.setApiBaseUrl('https://your-api.com')
|
|
106
|
-
|
|
107
|
-
// Set custom token function (optional)
|
|
108
|
-
config.setGetTokenFn(async () => {
|
|
109
|
-
return 'your-custom-token'
|
|
110
|
-
})
|
|
111
|
-
}
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### TranslationService & LanguageService
|
|
68
|
+
### Changing Languages
|
|
115
69
|
|
|
116
|
-
|
|
70
|
+
1. Simple language switch:
|
|
117
71
|
|
|
118
72
|
```typescript
|
|
119
|
-
import {
|
|
120
|
-
|
|
121
|
-
LanguageService,
|
|
122
|
-
Language
|
|
123
|
-
} from '@aslaluroba/help-center'
|
|
124
|
-
|
|
125
|
-
constructor(
|
|
126
|
-
private translation: TranslationService,
|
|
127
|
-
private language: LanguageService
|
|
128
|
-
) {
|
|
129
|
-
// Subscribe to language changes
|
|
130
|
-
translation.currentLang.subscribe((lang: Language) => {
|
|
131
|
-
console.log('Language changed to:', lang)
|
|
132
|
-
})
|
|
133
|
-
|
|
134
|
-
// Switch language
|
|
135
|
-
language.switchLanguage('ar')
|
|
136
|
-
}
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
### SignalRService
|
|
73
|
+
import { Component } from '@angular/core'
|
|
74
|
+
import { Language } from '@aslaluroba/help-center'
|
|
140
75
|
|
|
141
|
-
|
|
76
|
+
@Component({
|
|
77
|
+
selector: 'app-root',
|
|
78
|
+
template: `
|
|
79
|
+
<div>
|
|
80
|
+
<!-- Language Switcher -->
|
|
81
|
+
<div class="language-buttons">
|
|
82
|
+
<button (click)="currentLang = 'en'">English</button>
|
|
83
|
+
<button (click)="currentLang = 'ar'">العربية</button>
|
|
84
|
+
</div>
|
|
142
85
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
})
|
|
86
|
+
<!-- Widget -->
|
|
87
|
+
<app-help-center-widget [helpScreenId]="helpScreenId" [currentLang]="currentLang"> </app-help-center-widget>
|
|
88
|
+
</div>
|
|
89
|
+
`
|
|
90
|
+
})
|
|
91
|
+
export class AppComponent {
|
|
92
|
+
helpScreenId = 'your-help-screen-id'
|
|
93
|
+
currentLang: Language = 'en'
|
|
152
94
|
}
|
|
153
95
|
```
|
|
154
96
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
### Required Props
|
|
158
|
-
|
|
159
|
-
| Prop | Type | Description |
|
|
160
|
-
| ------------ | --------------------- | -------------------------------------------------------------------- |
|
|
161
|
-
| getToken | () => Promise<string> | Function that returns a promise resolving to an authentication token |
|
|
162
|
-
| helpScreenId | string | Unique identifier for the help screen |
|
|
97
|
+
2. Using Translation Service (for advanced usage):
|
|
163
98
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
| -------------------- | -------- | ------- | -------------------------------------- |
|
|
168
|
-
| showArrow | boolean | true | Show/hide the floating arrow animation |
|
|
169
|
-
| messageLabel | string | null | Custom message label for the widget |
|
|
170
|
-
| currentLang | Language | 'en' | Current language ('en' or 'ar') |
|
|
171
|
-
| isIntroScreenEnabled | boolean | false | Enable/disable intro screen |
|
|
172
|
-
|
|
173
|
-
## Styling
|
|
174
|
-
|
|
175
|
-
The widget can be customized using CSS variables:
|
|
176
|
-
|
|
177
|
-
```css
|
|
178
|
-
:root {
|
|
179
|
-
/* Primary Colors */
|
|
180
|
-
--help-center-primary-color: #ad49e1;
|
|
181
|
-
--help-center-secondary-color: #8a2be2;
|
|
182
|
-
|
|
183
|
-
/* Text Colors */
|
|
184
|
-
--help-center-text-color: #333;
|
|
185
|
-
--help-center-text-light: #fff;
|
|
186
|
-
|
|
187
|
-
/* Background Colors */
|
|
188
|
-
--help-center-background: #fff;
|
|
189
|
-
--help-center-chat-background: #f5f5f5;
|
|
190
|
-
|
|
191
|
-
/* Border Styles */
|
|
192
|
-
--help-center-border-radius: 8px;
|
|
193
|
-
--help-center-border-color: #e0e0e0;
|
|
99
|
+
```typescript
|
|
100
|
+
import { Component } from '@angular/core'
|
|
101
|
+
import { TranslationService, Language } from '@aslaluroba/help-center'
|
|
194
102
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
103
|
+
@Component({
|
|
104
|
+
selector: 'app-root'
|
|
105
|
+
})
|
|
106
|
+
export class AppComponent {
|
|
107
|
+
constructor(private translationService: TranslationService) {
|
|
108
|
+
// Subscribe to language changes
|
|
109
|
+
this.translationService.currentLang.subscribe((lang: Language) => {
|
|
110
|
+
console.log('Current language:', lang)
|
|
111
|
+
})
|
|
112
|
+
|
|
113
|
+
// Change language
|
|
114
|
+
this.translationService.setLanguage('ar')
|
|
115
|
+
}
|
|
198
116
|
}
|
|
199
117
|
```
|
|
200
118
|
|
|
201
|
-
##
|
|
202
|
-
|
|
203
|
-
The library exports several TypeScript interfaces and types:
|
|
204
|
-
|
|
205
|
-
```typescript
|
|
206
|
-
import {
|
|
207
|
-
Language, // 'en' | 'ar'
|
|
208
|
-
TokenResponse, // { token: string; expiresIn: number }
|
|
209
|
-
Option, // Help screen option interface
|
|
210
|
-
Message // Chat message interface
|
|
211
|
-
} from '@aslaluroba/help-center'
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
## Security Considerations
|
|
215
|
-
|
|
216
|
-
- All authentication is token-based
|
|
217
|
-
- Tokens are never stored in localStorage/sessionStorage
|
|
218
|
-
- All API communications use HTTPS
|
|
219
|
-
- Real-time connections are secured via SignalR
|
|
220
|
-
- API base URL can be configured for your domain
|
|
221
|
-
- Custom token retrieval logic can be implemented
|
|
222
|
-
|
|
223
|
-
## Browser Support
|
|
119
|
+
## Props
|
|
224
120
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
-
|
|
228
|
-
|
|
121
|
+
| Prop | Type | Required | Default | Description |
|
|
122
|
+
| ------------ | -------- | -------- | ------- | ----------------------------- |
|
|
123
|
+
| helpScreenId | string | Yes | - | Unique help screen identifier |
|
|
124
|
+
| currentLang | Language | No | 'en' | UI language ('en' \| 'ar') |
|
|
125
|
+
| showArrow | boolean | No | true | Show/hide floating arrow |
|
|
229
126
|
|
|
230
|
-
##
|
|
127
|
+
## Support
|
|
231
128
|
|
|
232
|
-
|
|
129
|
+
For issues and feature requests, please visit our [GitHub repository](https://github.com/aslaluroba/help-center/issues).
|
|
233
130
|
|
|
234
131
|
## License
|
|
235
132
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
## Support
|
|
239
|
-
|
|
240
|
-
For support, please [open an issue](https://github.com/aslaluroba/help-center/issues) on our GitHub repository.
|
|
133
|
+
MIT License - see the [LICENSE](LICENSE) file for details.
|
|
@@ -926,14 +926,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
926
926
|
|
|
927
927
|
class ApiService {
|
|
928
928
|
getTokenFunction = null;
|
|
929
|
-
baseUrl =
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
929
|
+
baseUrl = 'https://babylai.net/api';
|
|
930
|
+
/**
|
|
931
|
+
* Initialize the API service with optional configuration
|
|
932
|
+
* @param config Configuration object containing token function and optional base URL
|
|
933
|
+
*/
|
|
934
|
+
initialize(config) {
|
|
935
|
+
if (!config.getToken) {
|
|
936
|
+
throw new Error('getToken function is required for API initialization');
|
|
937
|
+
}
|
|
938
|
+
this.getTokenFunction = config.getToken;
|
|
939
|
+
if (config.baseUrl) {
|
|
940
|
+
this.baseUrl = config.baseUrl;
|
|
941
|
+
}
|
|
933
942
|
}
|
|
934
943
|
async getValidToken(forceRefresh = false) {
|
|
935
944
|
if (!this.getTokenFunction) {
|
|
936
|
-
throw new Error('API
|
|
945
|
+
throw new Error('API service not initialized. Call initialize({ getToken }) first.');
|
|
937
946
|
}
|
|
938
947
|
let storedToken = localStorage.getItem('chatbot-token');
|
|
939
948
|
let storedExpiry = localStorage.getItem('chatbot-token-expiry');
|
|
@@ -941,10 +950,10 @@ class ApiService {
|
|
|
941
950
|
if (!storedToken || !storedExpiry || currentTime >= Number(storedExpiry) || forceRefresh) {
|
|
942
951
|
const tokenResponse = await this.getTokenFunction();
|
|
943
952
|
if (!tokenResponse) {
|
|
944
|
-
throw new Error('Invalid token response from
|
|
953
|
+
throw new Error('Invalid token response from getToken function');
|
|
945
954
|
}
|
|
946
955
|
storedToken = tokenResponse;
|
|
947
|
-
storedExpiry = String(currentTime + 900);
|
|
956
|
+
storedExpiry = String(currentTime + 900); // 15 minutes expiry
|
|
948
957
|
localStorage.setItem('chatbot-token', storedToken);
|
|
949
958
|
localStorage.setItem('chatbot-token-expiry', storedExpiry);
|
|
950
959
|
}
|
|
@@ -966,9 +975,6 @@ class ApiService {
|
|
|
966
975
|
return response;
|
|
967
976
|
}
|
|
968
977
|
async apiRequest(endpoint, method = 'GET', body = null, customHeaders = {}) {
|
|
969
|
-
if (!this.baseUrl) {
|
|
970
|
-
throw new Error('API not initialized. Call initializeAPI first.');
|
|
971
|
-
}
|
|
972
978
|
const url = `${this.baseUrl}/${endpoint}`;
|
|
973
979
|
const options = {
|
|
974
980
|
method,
|
|
@@ -1101,38 +1107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1101
1107
|
}]
|
|
1102
1108
|
}] });
|
|
1103
1109
|
|
|
1104
|
-
class TokenService {
|
|
1105
|
-
config;
|
|
1106
|
-
constructor(config) {
|
|
1107
|
-
this.config = config;
|
|
1108
|
-
}
|
|
1109
|
-
async getToken() {
|
|
1110
|
-
// If a custom token function is provided, use it
|
|
1111
|
-
const customGetToken = this.config.getTokenFn();
|
|
1112
|
-
if (customGetToken) {
|
|
1113
|
-
const token = await customGetToken();
|
|
1114
|
-
return {
|
|
1115
|
-
token,
|
|
1116
|
-
expiresIn: 3600 // Default to 1 hour
|
|
1117
|
-
};
|
|
1118
|
-
}
|
|
1119
|
-
// Otherwise, return error that getTokenFn is not provided
|
|
1120
|
-
throw new Error('getTokenFn is not provided');
|
|
1121
|
-
}
|
|
1122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, deps: [{ token: HelpCenterConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1123
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, providedIn: 'root' });
|
|
1124
|
-
}
|
|
1125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, decorators: [{
|
|
1126
|
-
type: Injectable,
|
|
1127
|
-
args: [{
|
|
1128
|
-
providedIn: 'root'
|
|
1129
|
-
}]
|
|
1130
|
-
}], ctorParameters: () => [{ type: HelpCenterConfigService }] });
|
|
1131
|
-
|
|
1132
1110
|
class HelpCenterWidgetComponent {
|
|
1133
1111
|
apiService;
|
|
1134
1112
|
signalRService;
|
|
1135
|
-
tokenService;
|
|
1136
1113
|
translationService;
|
|
1137
1114
|
configService;
|
|
1138
1115
|
getToken;
|
|
@@ -1174,17 +1151,15 @@ class HelpCenterWidgetComponent {
|
|
|
1174
1151
|
selectedNestedOption = null;
|
|
1175
1152
|
baseUrl = 'https://babylai.net/api';
|
|
1176
1153
|
showEndChatConfirmation = false;
|
|
1177
|
-
constructor(apiService, signalRService,
|
|
1154
|
+
constructor(apiService, signalRService, translationService, configService) {
|
|
1178
1155
|
this.apiService = apiService;
|
|
1179
1156
|
this.signalRService = signalRService;
|
|
1180
|
-
this.tokenService = tokenService;
|
|
1181
1157
|
this.translationService = translationService;
|
|
1182
1158
|
this.configService = configService;
|
|
1183
1159
|
this.configService.setApiBaseUrl(this.baseUrl);
|
|
1184
1160
|
}
|
|
1185
1161
|
ngOnInit() {
|
|
1186
|
-
this.showArrowAnimation = this.
|
|
1187
|
-
this.apiService.initializeAPI(this.baseUrl, this.getToken);
|
|
1162
|
+
this.showArrowAnimation = this.showArrowAnimation;
|
|
1188
1163
|
if (!this.isIntroScreenEnabled) {
|
|
1189
1164
|
this.showHelpScreenData = true;
|
|
1190
1165
|
}
|
|
@@ -1483,7 +1458,7 @@ class HelpCenterWidgetComponent {
|
|
|
1483
1458
|
navigateToUrl(url) {
|
|
1484
1459
|
window.open(url, '_blank');
|
|
1485
1460
|
}
|
|
1486
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: SignalRService }, { token:
|
|
1461
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: SignalRService }, { token: TranslationService }, { token: HelpCenterConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1487
1462
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang", isIntroScreenEnabled: "isIntroScreenEnabled" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- Arrow Animation -->\n <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n <div class=\"message-box\">\n <p>\n {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n </p>\n <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n </button>\n <div class=\"arrow-tip\"></div>\n </div>\n </div>\n\n <!-- Help Button -->\n <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n <span class=\"help-button-content\">\n <!-- <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" /> -->\n <svg class=\"help-button-logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"#AD49E1\"\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=\"#AD49E1\"\n />\n </svg>\n </span>\n </button>\n\n <!-- Help Popup -->\n <div\n *ngIf=\"isPopupOpen\"\n class=\"help-popup\"\n [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'has-gradient': isPopupOpen && !showHelpScreenData && !showChat\n }\"\n >\n <app-confirmation-dialog\n *ngIf=\"showEndChatConfirmation\"\n [title]=\"'LeavingDialogTitle' | translate\"\n [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\"\n [cancelText]=\"'Cancel' | translate\"\n (onConfirm)=\"confirmEndChat()\"\n (onCancel)=\"cancelEndChat()\"\n ></app-confirmation-dialog>\n\n <!-- Loading State -->\n <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n <ng-container *ngIf=\"!showHelpScreenData\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <ng-container *ngIf=\"showHelpScreenData\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <app-loading [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"></app-loading>\n </div>\n\n <!-- Error State -->\n <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n\n <!-- Content -->\n <ng-container *ngIf=\"status === 'succeeded'\">\n <!-- Headers -->\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\" className=\"button--icon\">\n <svg class=\"icon-full\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n stroke=\"white\"\n stroke-width=\"2.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </app-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"showChat\">\n <app-chat-header\n [showBackButton]=\"showChat\"\n [showLogo]=\"false\"\n (onClose)=\"handleEndChat()\"\n (onBack)=\"handleBack()\"\n [language]=\"currentLang\"\n ></app-chat-header>\n\n <app-chat\n class=\"chat-container\"\n [messages]=\"messages\"\n [needsAgent]=\"needsAgent\"\n [assistantStatus]=\"assistantStatus\"\n [isSignalRConnected]=\"isSignalRConnected\"\n [isChatClosed]=\"isChatClosed\"\n (sendMessageEvent)=\"sendMessage($event)\"\n [currentLang]=\"currentLang\"\n [loading]=\"chatIsLoading\"\n ></app-chat>\n </ng-container>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"!showChat\">\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData\">\n <div class=\"intro-section\">\n <h1 class=\"intro-title\">{{ 'ChatIntroMessage' | translate }}</h1>\n </div>\n\n <div class=\"cards-section\">\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"card-content\">\n <div class=\"babylai-info\">\n <div class=\"logo-container\">\n <svg class=\"logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"#AD49E1\"\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=\"#AD49E1\"\n />\n </svg>\n </div>\n <div class=\"info-text\">\n <h4 class=\"info-title\">{{ 'BabylaiTitle' | translate }}</h4>\n <p class=\"info-description\">{{ 'BabylaiDescription' | translate }}</p>\n </div>\n </div>\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n {{ 'ChatNow' | translate }}\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"action-card\">\n <p class=\"action-text\">{{ 'TryBableAI' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"action-card\">\n <p class=\"action-text\">{{ 'ContactUs' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n </div>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData\">\n <!-- <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" /> -->\n <svg class=\"stars\" viewBox=\"0 0 244 196\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.15\">\n <path\n d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n fill=\"#AD49E1\"\n />\n </g>\n </svg>\n\n <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n </ng-container>\n </div>\n\n <!-- Footer -->\n <div class=\"footer\">\n <a href=\"https://babylai.net\" target=\"_blank\" class=\"footer-link\" [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\">\n {{ 'PoweredByBabylAI' | translate }}\n </a>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:684px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language", "showCloseButton"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isSignalRConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
|
|
1488
1463
|
}
|
|
1489
1464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
|
|
@@ -1502,7 +1477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1502
1477
|
LoadingComponent,
|
|
1503
1478
|
ConfirmationDialogComponent
|
|
1504
1479
|
], template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- Arrow Animation -->\n <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n <div class=\"message-box\">\n <p>\n {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n </p>\n <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n </button>\n <div class=\"arrow-tip\"></div>\n </div>\n </div>\n\n <!-- Help Button -->\n <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n <span class=\"help-button-content\">\n <!-- <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" /> -->\n <svg class=\"help-button-logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"#AD49E1\"\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=\"#AD49E1\"\n />\n </svg>\n </span>\n </button>\n\n <!-- Help Popup -->\n <div\n *ngIf=\"isPopupOpen\"\n class=\"help-popup\"\n [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'has-gradient': isPopupOpen && !showHelpScreenData && !showChat\n }\"\n >\n <app-confirmation-dialog\n *ngIf=\"showEndChatConfirmation\"\n [title]=\"'LeavingDialogTitle' | translate\"\n [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\"\n [cancelText]=\"'Cancel' | translate\"\n (onConfirm)=\"confirmEndChat()\"\n (onCancel)=\"cancelEndChat()\"\n ></app-confirmation-dialog>\n\n <!-- Loading State -->\n <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n <ng-container *ngIf=\"!showHelpScreenData\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <ng-container *ngIf=\"showHelpScreenData\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <app-loading [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"></app-loading>\n </div>\n\n <!-- Error State -->\n <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n\n <!-- Content -->\n <ng-container *ngIf=\"status === 'succeeded'\">\n <!-- Headers -->\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\" className=\"button--icon\">\n <svg class=\"icon-full\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n stroke=\"white\"\n stroke-width=\"2.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </app-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"showChat\">\n <app-chat-header\n [showBackButton]=\"showChat\"\n [showLogo]=\"false\"\n (onClose)=\"handleEndChat()\"\n (onBack)=\"handleBack()\"\n [language]=\"currentLang\"\n ></app-chat-header>\n\n <app-chat\n class=\"chat-container\"\n [messages]=\"messages\"\n [needsAgent]=\"needsAgent\"\n [assistantStatus]=\"assistantStatus\"\n [isSignalRConnected]=\"isSignalRConnected\"\n [isChatClosed]=\"isChatClosed\"\n (sendMessageEvent)=\"sendMessage($event)\"\n [currentLang]=\"currentLang\"\n [loading]=\"chatIsLoading\"\n ></app-chat>\n </ng-container>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"!showChat\">\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData\">\n <div class=\"intro-section\">\n <h1 class=\"intro-title\">{{ 'ChatIntroMessage' | translate }}</h1>\n </div>\n\n <div class=\"cards-section\">\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"card-content\">\n <div class=\"babylai-info\">\n <div class=\"logo-container\">\n <svg class=\"logo\" viewBox=\"0 0 55 53\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"#AD49E1\"\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=\"#AD49E1\"\n />\n </svg>\n </div>\n <div class=\"info-text\">\n <h4 class=\"info-title\">{{ 'BabylaiTitle' | translate }}</h4>\n <p class=\"info-description\">{{ 'BabylaiDescription' | translate }}</p>\n </div>\n </div>\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n {{ 'ChatNow' | translate }}\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"action-card\">\n <p class=\"action-text\">{{ 'TryBableAI' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"action-card\">\n <p class=\"action-text\">{{ 'ContactUs' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n </div>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData\">\n <!-- <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" /> -->\n <svg class=\"stars\" viewBox=\"0 0 244 196\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g opacity=\"0.15\">\n <path\n d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n fill=\"#AD49E1\"\n />\n </g>\n </svg>\n\n <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n </ng-container>\n </div>\n\n <!-- Footer -->\n <div class=\"footer\">\n <a href=\"https://babylai.net\" target=\"_blank\" class=\"footer-link\" [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\">\n {{ 'PoweredByBabylAI' | translate }}\n </a>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:684px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
|
|
1505
|
-
}], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type:
|
|
1480
|
+
}], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type: TranslationService }, { type: HelpCenterConfigService }], propDecorators: { getToken: [{
|
|
1506
1481
|
type: Input
|
|
1507
1482
|
}], helpScreenId: [{
|
|
1508
1483
|
type: Input
|
|
@@ -1519,6 +1494,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1519
1494
|
args: ['chatMessagesContainer']
|
|
1520
1495
|
}] } });
|
|
1521
1496
|
|
|
1497
|
+
class TokenService {
|
|
1498
|
+
config;
|
|
1499
|
+
constructor(config) {
|
|
1500
|
+
this.config = config;
|
|
1501
|
+
}
|
|
1502
|
+
async getToken() {
|
|
1503
|
+
// If a custom token function is provided, use it
|
|
1504
|
+
const customGetToken = this.config.getTokenFn();
|
|
1505
|
+
if (customGetToken) {
|
|
1506
|
+
const token = await customGetToken();
|
|
1507
|
+
return {
|
|
1508
|
+
token,
|
|
1509
|
+
expiresIn: 3600 // Default to 1 hour
|
|
1510
|
+
};
|
|
1511
|
+
}
|
|
1512
|
+
// Otherwise, return error that getTokenFn is not provided
|
|
1513
|
+
throw new Error('getTokenFn is not provided');
|
|
1514
|
+
}
|
|
1515
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, deps: [{ token: HelpCenterConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1516
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, providedIn: 'root' });
|
|
1517
|
+
}
|
|
1518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, decorators: [{
|
|
1519
|
+
type: Injectable,
|
|
1520
|
+
args: [{
|
|
1521
|
+
providedIn: 'root'
|
|
1522
|
+
}]
|
|
1523
|
+
}], ctorParameters: () => [{ type: HelpCenterConfigService }] });
|
|
1524
|
+
|
|
1522
1525
|
// src/app/language.service.ts
|
|
1523
1526
|
class LanguageService {
|
|
1524
1527
|
translationService;
|