114 lines
3.2 KiB
JavaScript
114 lines
3.2 KiB
JavaScript
"use strict";
|
|
|
|
import {Fieldset, Section, Form, Div} from "../Utils/HTMLDSL.ecma.js";
|
|
import {Common} from "../Utils/Common.ecma.js";
|
|
|
|
/**
|
|
* @typedef {import("../Application/AnP.ecma.js").AnP} AnP
|
|
*/
|
|
|
|
/**
|
|
* @class AIChatComponent
|
|
* @constructor
|
|
* @param {!AnP} anp
|
|
* @returns {void}
|
|
* @access private
|
|
* @static
|
|
*/
|
|
export const AIChatComponent = (function(){
|
|
|
|
/**
|
|
* @constructs AIChatComponent
|
|
* @param {!AnP} anp
|
|
* @returns {void}
|
|
* @access private
|
|
* @static
|
|
*/
|
|
const AIChatComponent = function(anp){
|
|
|
|
/** @type {AIChatComponent} */
|
|
const self = this;
|
|
/** @type {string|null} */
|
|
let web_socket_id = null;
|
|
|
|
/**
|
|
* @returns {void}
|
|
* @access private
|
|
*/
|
|
const constructor = () => {};
|
|
|
|
this.build = (inputs = null) => {
|
|
|
|
const name = Common.get_value("name", inputs, "aichat");
|
|
|
|
web_socket_id = anp.web_sockets_clients.add("AAA", "https://localhost:18000/");
|
|
|
|
return Fieldset({class : "aichat"}, [
|
|
anp.components.i18n(name, "legend"),
|
|
Section({class : "messages"}),
|
|
Form({
|
|
method : "post",
|
|
action : "#",
|
|
on_submit : send,
|
|
on_key_down : check_keys
|
|
}, [
|
|
anp.components.text("message", {
|
|
multiline : true
|
|
}),
|
|
anp.components.button("send", "submit")
|
|
])
|
|
]);
|
|
};
|
|
|
|
const send = (item, event) => {
|
|
|
|
const text_box = item.querySelector("[name=message]"),
|
|
text = text_box.value.trim();
|
|
|
|
event.preventDefault();
|
|
|
|
if(text){
|
|
Common.HTML(".aichat .messages", Fieldset({
|
|
class : "message",
|
|
data_type : "user",
|
|
data_id : anp.unique_keys.create()
|
|
}, [
|
|
anp.components.i18n("user", "legend"),
|
|
Div({class : "content"}, text)
|
|
]));
|
|
text_box.value = "";
|
|
};
|
|
|
|
return false;
|
|
};
|
|
|
|
const check_keys = (item, event) => {
|
|
event.key == "Enter" && !event.shiftKey && send(item, event);
|
|
};
|
|
|
|
this.write_response = (id, fragment) => {
|
|
|
|
let box = document.querySelector(".aichat .messages>[data-type=bot][data-id='" + id + "']");
|
|
|
|
if(!box){
|
|
if(!document.querySelector(".aichat .messages>[data-type=user][data-id='" + id + "']"))
|
|
return;
|
|
box = Common.HTML(".aichat .messages", Fieldset({
|
|
class : "message",
|
|
data_type : "box",
|
|
data_id : id
|
|
}, [
|
|
anp.components.i18n("assistant", "legend"),
|
|
Div({class : "content"}, "")
|
|
]), true)[0];
|
|
};
|
|
|
|
box.querySelector(".content").innerHTML += fragment;
|
|
|
|
};
|
|
|
|
constructor();
|
|
};
|
|
|
|
return AIChatComponent;
|
|
})(); |