AnP/Public/ecma/Components/AIChatComponent.ecma.js

88 lines
2.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;
/**
* @returns {void}
* @access private
*/
const constructor = () => {};
this.build = (inputs = null) => {
const name = Common.get_value("name", inputs, "aichat");
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"
}, [
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);
};
constructor();
};
return AIChatComponent;
})();