jqwidgets-ng
Version:
[](https://jqwidgets.com/license/)
659 lines (658 loc) • 23.4 kB
JavaScript
/// <reference path="../../jqwidgets.d.ts" />
/// <reference path="../../jqwidgets.d.ts" />
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
export class jqxChatComponent {
constructor(containerElement) {
this.autoCreate = true;
this.properties = ['accentColor', 'apiKey', 'botAvatar', 'botName', 'colorScheme', 'disabled', 'enableClear', 'enableCopyCode', 'enableStop', 'headers', 'height', 'launcherIcon', 'launcherPosition', 'maxTokens', 'messages', 'mode', 'model', 'open', 'placeHolder', 'provider', 'proxyUrl', 'rtl', 'sendButtonIcon', 'sendButtonLabel', 'sendRequest', 'showAvatars', 'showHeader', 'showHeaderAvatar', 'showTimestamps', 'starterPrompts', 'statusText', 'stream', 'subtitle', 'system', 'theme', 'title', 'typingIndicator', 'userAvatar', 'userName', 'welcomeMessage', 'width'];
// jqxChatComponent events
this.onMessageSent = new EventEmitter();
this.onResponseStart = new EventEmitter();
this.onResponseDelta = new EventEmitter();
this.onMessageReceived = new EventEmitter();
this.onResponseEnd = new EventEmitter();
this.onError = new EventEmitter();
this.onOpen = new EventEmitter();
this.onClose = new EventEmitter();
this.onStop = new EventEmitter();
this.onCreate = new EventEmitter();
this.elementRef = containerElement;
}
ngOnInit() {
if (this.autoCreate) {
this.createComponent();
}
}
;
ngOnChanges(changes) {
if (this.host) {
for (let i = 0; i < this.properties.length; i++) {
let attrName = 'attr' + this.properties[i].substring(0, 1).toUpperCase() + this.properties[i].substring(1);
let areEqual = false;
if (this[attrName] !== undefined) {
if (typeof this[attrName] === 'object') {
if (this[attrName] instanceof Array) {
areEqual = this.arraysEqual(this[attrName], this.host.jqxChat(this.properties[i]));
}
if (areEqual) {
return false;
}
this.host.jqxChat(this.properties[i], this[attrName]);
continue;
}
if (this[attrName] !== this.host.jqxChat(this.properties[i])) {
this.host.jqxChat(this.properties[i], this[attrName]);
}
}
}
}
}
arraysEqual(attrValue, hostValue) {
if ((attrValue && !hostValue) || (!attrValue && hostValue)) {
return false;
}
if (attrValue.length != hostValue.length) {
return false;
}
for (let i = 0; i < attrValue.length; i++) {
if (attrValue[i] !== hostValue[i]) {
return false;
}
}
return true;
}
manageAttributes() {
let options = {};
for (let i = 0; i < this.properties.length; i++) {
let attrName = 'attr' + this.properties[i].substring(0, 1).toUpperCase() + this.properties[i].substring(1);
if (this[attrName] !== undefined) {
options[this.properties[i]] = this[attrName];
}
}
return options;
}
moveClasses(parentEl, childEl) {
let classes = parentEl.classList;
if (classes.length > 0) {
childEl.classList.add(...classes);
}
parentEl.className = '';
}
moveStyles(parentEl, childEl) {
let style = parentEl.style.cssText;
childEl.style.cssText = style;
parentEl.style.cssText = '';
}
createComponent(options) {
if (this.host) {
return;
}
if (options) {
JQXLite.extend(options, this.manageAttributes());
}
else {
options = this.manageAttributes();
}
this.host = JQXLite(this.elementRef.nativeElement.firstChild);
this.moveClasses(this.elementRef.nativeElement, this.host[0]);
this.moveStyles(this.elementRef.nativeElement, this.host[0]);
this.__wireEvents__();
this.widgetObject = jqwidgets.createInstance(this.host, 'jqxChat', options);
}
createWidget(options) {
this.createComponent(options);
}
__updateRect__() {
if (this.host)
this.host.css({ width: this.attrWidth, height: this.attrHeight });
}
setOptions(options) {
this.host.jqxChat('setOptions', options);
}
// jqxChatComponent properties
accentColor(arg) {
if (arg !== undefined) {
this.host.jqxChat('accentColor', arg);
}
else {
return this.host.jqxChat('accentColor');
}
}
apiKey(arg) {
if (arg !== undefined) {
this.host.jqxChat('apiKey', arg);
}
else {
return this.host.jqxChat('apiKey');
}
}
botAvatar(arg) {
if (arg !== undefined) {
this.host.jqxChat('botAvatar', arg);
}
else {
return this.host.jqxChat('botAvatar');
}
}
botName(arg) {
if (arg !== undefined) {
this.host.jqxChat('botName', arg);
}
else {
return this.host.jqxChat('botName');
}
}
colorScheme(arg) {
if (arg !== undefined) {
this.host.jqxChat('colorScheme', arg);
}
else {
return this.host.jqxChat('colorScheme');
}
}
disabled(arg) {
if (arg !== undefined) {
this.host.jqxChat('disabled', arg);
}
else {
return this.host.jqxChat('disabled');
}
}
enableClear(arg) {
if (arg !== undefined) {
this.host.jqxChat('enableClear', arg);
}
else {
return this.host.jqxChat('enableClear');
}
}
enableCopyCode(arg) {
if (arg !== undefined) {
this.host.jqxChat('enableCopyCode', arg);
}
else {
return this.host.jqxChat('enableCopyCode');
}
}
enableStop(arg) {
if (arg !== undefined) {
this.host.jqxChat('enableStop', arg);
}
else {
return this.host.jqxChat('enableStop');
}
}
headers(arg) {
if (arg !== undefined) {
this.host.jqxChat('headers', arg);
}
else {
return this.host.jqxChat('headers');
}
}
height(arg) {
if (arg !== undefined) {
this.host.jqxChat('height', arg);
}
else {
return this.host.jqxChat('height');
}
}
launcherIcon(arg) {
if (arg !== undefined) {
this.host.jqxChat('launcherIcon', arg);
}
else {
return this.host.jqxChat('launcherIcon');
}
}
launcherPosition(arg) {
if (arg !== undefined) {
this.host.jqxChat('launcherPosition', arg);
}
else {
return this.host.jqxChat('launcherPosition');
}
}
maxTokens(arg) {
if (arg !== undefined) {
this.host.jqxChat('maxTokens', arg);
}
else {
return this.host.jqxChat('maxTokens');
}
}
messages(arg) {
if (arg !== undefined) {
this.host.jqxChat('messages', arg);
}
else {
return this.host.jqxChat('messages');
}
}
mode(arg) {
if (arg !== undefined) {
this.host.jqxChat('mode', arg);
}
else {
return this.host.jqxChat('mode');
}
}
model(arg) {
if (arg !== undefined) {
this.host.jqxChat('model', arg);
}
else {
return this.host.jqxChat('model');
}
}
open(arg) {
if (arg !== undefined) {
this.host.jqxChat('open', arg);
}
else {
return this.host.jqxChat('open');
}
}
placeHolder(arg) {
if (arg !== undefined) {
this.host.jqxChat('placeHolder', arg);
}
else {
return this.host.jqxChat('placeHolder');
}
}
provider(arg) {
if (arg !== undefined) {
this.host.jqxChat('provider', arg);
}
else {
return this.host.jqxChat('provider');
}
}
proxyUrl(arg) {
if (arg !== undefined) {
this.host.jqxChat('proxyUrl', arg);
}
else {
return this.host.jqxChat('proxyUrl');
}
}
rtl(arg) {
if (arg !== undefined) {
this.host.jqxChat('rtl', arg);
}
else {
return this.host.jqxChat('rtl');
}
}
sendButtonIcon(arg) {
if (arg !== undefined) {
this.host.jqxChat('sendButtonIcon', arg);
}
else {
return this.host.jqxChat('sendButtonIcon');
}
}
sendButtonLabel(arg) {
if (arg !== undefined) {
this.host.jqxChat('sendButtonLabel', arg);
}
else {
return this.host.jqxChat('sendButtonLabel');
}
}
sendRequest(arg) {
if (arg !== undefined) {
this.host.jqxChat('sendRequest', arg);
}
else {
return this.host.jqxChat('sendRequest');
}
}
showAvatars(arg) {
if (arg !== undefined) {
this.host.jqxChat('showAvatars', arg);
}
else {
return this.host.jqxChat('showAvatars');
}
}
showHeader(arg) {
if (arg !== undefined) {
this.host.jqxChat('showHeader', arg);
}
else {
return this.host.jqxChat('showHeader');
}
}
showHeaderAvatar(arg) {
if (arg !== undefined) {
this.host.jqxChat('showHeaderAvatar', arg);
}
else {
return this.host.jqxChat('showHeaderAvatar');
}
}
showTimestamps(arg) {
if (arg !== undefined) {
this.host.jqxChat('showTimestamps', arg);
}
else {
return this.host.jqxChat('showTimestamps');
}
}
starterPrompts(arg) {
if (arg !== undefined) {
this.host.jqxChat('starterPrompts', arg);
}
else {
return this.host.jqxChat('starterPrompts');
}
}
statusText(arg) {
if (arg !== undefined) {
this.host.jqxChat('statusText', arg);
}
else {
return this.host.jqxChat('statusText');
}
}
stream(arg) {
if (arg !== undefined) {
this.host.jqxChat('stream', arg);
}
else {
return this.host.jqxChat('stream');
}
}
subtitle(arg) {
if (arg !== undefined) {
this.host.jqxChat('subtitle', arg);
}
else {
return this.host.jqxChat('subtitle');
}
}
system(arg) {
if (arg !== undefined) {
this.host.jqxChat('system', arg);
}
else {
return this.host.jqxChat('system');
}
}
theme(arg) {
if (arg !== undefined) {
this.host.jqxChat('theme', arg);
}
else {
return this.host.jqxChat('theme');
}
}
title(arg) {
if (arg !== undefined) {
this.host.jqxChat('title', arg);
}
else {
return this.host.jqxChat('title');
}
}
typingIndicator(arg) {
if (arg !== undefined) {
this.host.jqxChat('typingIndicator', arg);
}
else {
return this.host.jqxChat('typingIndicator');
}
}
userAvatar(arg) {
if (arg !== undefined) {
this.host.jqxChat('userAvatar', arg);
}
else {
return this.host.jqxChat('userAvatar');
}
}
userName(arg) {
if (arg !== undefined) {
this.host.jqxChat('userName', arg);
}
else {
return this.host.jqxChat('userName');
}
}
welcomeMessage(arg) {
if (arg !== undefined) {
this.host.jqxChat('welcomeMessage', arg);
}
else {
return this.host.jqxChat('welcomeMessage');
}
}
width(arg) {
if (arg !== undefined) {
this.host.jqxChat('width', arg);
}
else {
return this.host.jqxChat('width');
}
}
// jqxChatComponent functions
sendMessage(text) {
this.host.jqxChat('sendMessage', text);
}
stop() {
this.host.jqxChat('stop');
}
addMessage(role, content) {
this.host.jqxChat('addMessage', role, content);
}
appendDelta(delta) {
this.host.jqxChat('appendDelta', delta);
}
getMessages() {
return this.host.jqxChat('getMessages');
}
clearConversation() {
this.host.jqxChat('clearConversation');
}
focus() {
this.host.jqxChat('focus');
}
openPopup() {
this.host.jqxChat('openPopup');
}
closePopup() {
this.host.jqxChat('closePopup');
}
toggle() {
this.host.jqxChat('toggle');
}
val(value) {
if (value !== undefined) {
return this.host.jqxChat('val', value);
}
else {
return this.host.jqxChat('val');
}
}
;
render() {
this.host.jqxChat('render');
}
refresh() {
this.host.jqxChat('refresh');
}
destroy() {
this.host.jqxChat('destroy');
}
__wireEvents__() {
this.host.on('messageSent', (eventData) => { this.onMessageSent.emit(eventData); });
this.host.on('responseStart', (eventData) => { this.onResponseStart.emit(eventData); });
this.host.on('responseDelta', (eventData) => { this.onResponseDelta.emit(eventData); });
this.host.on('messageReceived', (eventData) => { this.onMessageReceived.emit(eventData); });
this.host.on('responseEnd', (eventData) => { this.onResponseEnd.emit(eventData); });
this.host.on('error', (eventData) => { this.onError.emit(eventData); });
this.host.on('open', (eventData) => { this.onOpen.emit(eventData); });
this.host.on('close', (eventData) => { this.onClose.emit(eventData); });
this.host.on('stop', (eventData) => { this.onStop.emit(eventData); });
this.host.on('create', (eventData) => { this.onCreate.emit(eventData); });
}
} //jqxChatComponent
jqxChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: jqxChatComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
jqxChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: jqxChatComponent, selector: "jqxChat", inputs: { attrAccentColor: ["accentColor", "attrAccentColor"], attrApiKey: ["apiKey", "attrApiKey"], attrBotAvatar: ["botAvatar", "attrBotAvatar"], attrBotName: ["botName", "attrBotName"], attrColorScheme: ["colorScheme", "attrColorScheme"], attrDisabled: ["disabled", "attrDisabled"], attrEnableClear: ["enableClear", "attrEnableClear"], attrEnableCopyCode: ["enableCopyCode", "attrEnableCopyCode"], attrEnableStop: ["enableStop", "attrEnableStop"], attrHeaders: ["headers", "attrHeaders"], attrLauncherIcon: ["launcherIcon", "attrLauncherIcon"], attrLauncherPosition: ["launcherPosition", "attrLauncherPosition"], attrMaxTokens: ["maxTokens", "attrMaxTokens"], attrMessages: ["messages", "attrMessages"], attrMode: ["mode", "attrMode"], attrModel: ["model", "attrModel"], attrOpen: ["open", "attrOpen"], attrPlaceHolder: ["placeHolder", "attrPlaceHolder"], attrProvider: ["provider", "attrProvider"], attrProxyUrl: ["proxyUrl", "attrProxyUrl"], attrRtl: ["rtl", "attrRtl"], attrSendButtonIcon: ["sendButtonIcon", "attrSendButtonIcon"], attrSendButtonLabel: ["sendButtonLabel", "attrSendButtonLabel"], attrSendRequest: ["sendRequest", "attrSendRequest"], attrShowAvatars: ["showAvatars", "attrShowAvatars"], attrShowHeader: ["showHeader", "attrShowHeader"], attrShowHeaderAvatar: ["showHeaderAvatar", "attrShowHeaderAvatar"], attrShowTimestamps: ["showTimestamps", "attrShowTimestamps"], attrStarterPrompts: ["starterPrompts", "attrStarterPrompts"], attrStatusText: ["statusText", "attrStatusText"], attrStream: ["stream", "attrStream"], attrSubtitle: ["subtitle", "attrSubtitle"], attrSystem: ["system", "attrSystem"], attrTheme: ["theme", "attrTheme"], attrTitle: ["title", "attrTitle"], attrTypingIndicator: ["typingIndicator", "attrTypingIndicator"], attrUserAvatar: ["userAvatar", "attrUserAvatar"], attrUserName: ["userName", "attrUserName"], attrWelcomeMessage: ["welcomeMessage", "attrWelcomeMessage"], attrWidth: ["width", "attrWidth"], attrHeight: ["height", "attrHeight"], autoCreate: ["auto-create", "autoCreate"] }, outputs: { onMessageSent: "onMessageSent", onResponseStart: "onResponseStart", onResponseDelta: "onResponseDelta", onMessageReceived: "onMessageReceived", onResponseEnd: "onResponseEnd", onError: "onError", onOpen: "onOpen", onClose: "onClose", onStop: "onStop", onCreate: "onCreate" }, usesOnChanges: true, ngImport: i0, template: '<div><ng-content></ng-content></div>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: jqxChatComponent, decorators: [{
type: Component,
args: [{
selector: 'jqxChat',
template: '<div><ng-content></ng-content></div>'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { attrAccentColor: [{
type: Input,
args: ['accentColor']
}], attrApiKey: [{
type: Input,
args: ['apiKey']
}], attrBotAvatar: [{
type: Input,
args: ['botAvatar']
}], attrBotName: [{
type: Input,
args: ['botName']
}], attrColorScheme: [{
type: Input,
args: ['colorScheme']
}], attrDisabled: [{
type: Input,
args: ['disabled']
}], attrEnableClear: [{
type: Input,
args: ['enableClear']
}], attrEnableCopyCode: [{
type: Input,
args: ['enableCopyCode']
}], attrEnableStop: [{
type: Input,
args: ['enableStop']
}], attrHeaders: [{
type: Input,
args: ['headers']
}], attrLauncherIcon: [{
type: Input,
args: ['launcherIcon']
}], attrLauncherPosition: [{
type: Input,
args: ['launcherPosition']
}], attrMaxTokens: [{
type: Input,
args: ['maxTokens']
}], attrMessages: [{
type: Input,
args: ['messages']
}], attrMode: [{
type: Input,
args: ['mode']
}], attrModel: [{
type: Input,
args: ['model']
}], attrOpen: [{
type: Input,
args: ['open']
}], attrPlaceHolder: [{
type: Input,
args: ['placeHolder']
}], attrProvider: [{
type: Input,
args: ['provider']
}], attrProxyUrl: [{
type: Input,
args: ['proxyUrl']
}], attrRtl: [{
type: Input,
args: ['rtl']
}], attrSendButtonIcon: [{
type: Input,
args: ['sendButtonIcon']
}], attrSendButtonLabel: [{
type: Input,
args: ['sendButtonLabel']
}], attrSendRequest: [{
type: Input,
args: ['sendRequest']
}], attrShowAvatars: [{
type: Input,
args: ['showAvatars']
}], attrShowHeader: [{
type: Input,
args: ['showHeader']
}], attrShowHeaderAvatar: [{
type: Input,
args: ['showHeaderAvatar']
}], attrShowTimestamps: [{
type: Input,
args: ['showTimestamps']
}], attrStarterPrompts: [{
type: Input,
args: ['starterPrompts']
}], attrStatusText: [{
type: Input,
args: ['statusText']
}], attrStream: [{
type: Input,
args: ['stream']
}], attrSubtitle: [{
type: Input,
args: ['subtitle']
}], attrSystem: [{
type: Input,
args: ['system']
}], attrTheme: [{
type: Input,
args: ['theme']
}], attrTitle: [{
type: Input,
args: ['title']
}], attrTypingIndicator: [{
type: Input,
args: ['typingIndicator']
}], attrUserAvatar: [{
type: Input,
args: ['userAvatar']
}], attrUserName: [{
type: Input,
args: ['userName']
}], attrWelcomeMessage: [{
type: Input,
args: ['welcomeMessage']
}], attrWidth: [{
type: Input,
args: ['width']
}], attrHeight: [{
type: Input,
args: ['height']
}], autoCreate: [{
type: Input,
args: ['auto-create']
}], onMessageSent: [{
type: Output
}], onResponseStart: [{
type: Output
}], onResponseDelta: [{
type: Output
}], onMessageReceived: [{
type: Output
}], onResponseEnd: [{
type: Output
}], onError: [{
type: Output
}], onOpen: [{
type: Output
}], onClose: [{
type: Output
}], onStop: [{
type: Output
}], onCreate: [{
type: Output
}] } });