Skip to content

Commit

Permalink
topics
Browse files Browse the repository at this point in the history
  • Loading branch information
@gneb
gneb committed Mar 26, 2023
1 parent 26958c1 commit 441c702
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 12 deletions.
91 changes: 80 additions & 11 deletions src/scrpt.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ const xPositions = ['left', 'right'];
const yPositions = ['top', 'bottom'];
const nm = 'scrpt';
const chatWidth = '400px';
const domain = 'http://164.90.239.9:8000';
const domain = 'http://161.35.71.150';
class Scrpt {
loadInterval;
constructor({ position = 'bottom-right', appName = '' } = {}) {
this.position = this.getPosition(position);
this.open = false;
this.inputText = '';
this.topics = [];
this.appName = appName;

if (!position.includes('-')) {
Expand Down Expand Up @@ -97,7 +98,9 @@ class Scrpt {
const styleTag = this.dce('style');
document.head.appendChild(styleTag);
styleTag.innerHTML = `
.${nm}-clearfix::after {content: "";clear: both;display: table;}.${nm}-icon {cursor: pointer;width: 65%;position: absolute;top: 11px;left: 13px;transition: transform .3s ease;filter: invert(1);}.${nm}-hidden {transform: scale(0);}.${nm}-button-container {background: linear-gradient(to bottom right, #4294e3, #8f12fd);width: 70px;height: 70px;border-radius: 50%;}.${nm}-chat-container {box-shadow: 0 0 18px 8px rgba(0,0,0, 0.1);right: -25px;bottom: 75px;position: absolute;transition: max-height .2s ease;background-color: white;border-radius: 10px;}.${nm}-chat-container.hidden {max-height: 0px;}.${nm}-scrpt-header {display: inline-block;width: 100%;margin: 0;padding: 10px;color: white;background: linear-gradient(to bottom right, #4294e3, #8f12fd);border-top-left-radius: 10px;border-top-right-radius: 10px;}.${nm}-chat-container form input {padding: 20px;display: inline-block;width: calc(100% - 50px);border: 0px;background-color: #f7f7f7;}.${nm}-chat-container form input:focus {outline: none;}.${nm}-chat-send {cursor: pointer;display: inline-block;padding: 20px 14px;background-color: #f7f7f7;}.${nm}-scrpt-chat-bottom-menu {padding-top: 20px;list-style-type: none;text-align: center;padding-left: 0px;margin-left: 0px;}.${nm}-scrpt-chat-bottom-menu li {display: inline-block;padding-left: 30px;padding-right: 30px;cursor: pointer;}.${nm}-bottom-menu-icon {padding-bottom: 8px;display: inline-block; width: 20px;}.${nm}-chat-content {display: block;width: 100%;padding: 10px;overflow-y: scroll;position: relative;box-shadow: 0 4px 2px -2px rgba(0,0,0, 0.1);}.${nm}-close-button, .${nm}-fullscreen-button {border: 0px;background-color: white;border-radius: 100%;padding-bottom: 3px;float: right;margin-left: 4px;}.${nm}-msg-box {display: inline-block;width:80%;}.${nm}-msg-box p {padding: 7px;}.${nm}-income {float: left;}.${nm}-outcome {float: right;}.${nm}-bubble-outcome {background-color: gray;color: white;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}.${nm}-bubble-income {background-color: #f7f7f7;color: #424242;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.${nm}-clearfix::after {content: "";clear: both;display: table;}.${nm}-topics{position:absolute; right:0;bottom:0; padding:0 13px 10px 0; margin-bottom:150px; z-index:11} .${nm}-topics-tags{height:0px;padding-left: 5px;
list-style-type: none;display: block;overflow-y: scroll;position: absolute;bottom: 0; transition:transform .3s ease;margin-bottom: 180px; z-index:10}.${nm}-topics-tags li{ display:inline-block; float:left; margin-left: 5px;padding: 2px; background: linear-gradient(to bottom right, #4294e3, #8f12fd);
color: white;border-radius: 7px;font-size: 14px;margin-bottom: 3px;} .${nm}-icon {cursor: pointer;width: 65%;position: absolute;top: 11px;left: 13px;transition: transform .3s ease;filter: invert(1);}.${nm}-hidden {transform: scale(0);}.${nm}-button-container {background: linear-gradient(to bottom right, #4294e3, #8f12fd);width: 70px;height: 70px;border-radius: 50%;}.${nm}-chat-container {box-shadow: 0 0 18px 8px rgba(0,0,0, 0.1);right: -25px;bottom: 75px;position: absolute;transition: max-height .2s ease;background-color: white;border-radius: 10px;}.${nm}-chat-container.hidden {max-height: 0px;}.${nm}-scrpt-header {display: inline-block;width: 100%;margin: 0;padding: 10px;color: white;background: linear-gradient(to bottom right, #4294e3, #8f12fd);border-top-left-radius: 10px;border-top-right-radius: 10px;}.${nm}-chat-container form input {padding: 20px;display: inline-block;width: calc(100% - 50px);border: 0px;background-color: #f7f7f7;}.${nm}-chat-container form input:focus {outline: none;}.${nm}-chat-send {cursor: pointer;display: inline-block;padding: 20px 14px;background-color: #f7f7f7;}.${nm}-scrpt-chat-bottom-menu {padding-top: 20px;list-style-type: none;text-align: center;padding-left: 0px;margin-left: 0px;}.${nm}-scrpt-chat-bottom-menu li {display: inline-block;padding-left: 30px;padding-right: 30px;cursor: pointer;}.${nm}-bottom-menu-icon {padding-bottom: 8px;display: inline-block; width: 20px;}.${nm}-chat-content {display: block;width: 100%;padding: 10px;overflow-y: scroll;position: relative;box-shadow: 0 4px 2px -2px rgba(0,0,0, 0.1);}.${nm}-close-button, .${nm}-fullscreen-button {border: 0px;background-color: white;border-radius: 100%;padding-bottom: 3px;float: right;margin-left: 4px;}.${nm}-msg-box {display: inline-block;width:80%;}.${nm}-msg-box p {padding: 7px;}.${nm}-income {float: left;}.${nm}-outcome {float: right;}.${nm}-bubble-outcome { background: linear-gradient(to bottom right, #4294e3, #8f12fd);color: white;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}.${nm}-bubble-income {background-color: #f7f7f7;color: #424242;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
`;
}

Expand Down Expand Up @@ -136,6 +139,10 @@ class Scrpt {
text.type = "text";
text.placeholder = this.inputText;

this.topicsTags = this.dce('ul');
this.topicsTags.setAttribute('id', `${nm}-topics-tags`);
this.topicsTags.classList.add(`${nm}-topics-tags`);

let btnDiv = this.dce('div');
this.btn = this.dce('img');
this.btn.src = `https://icons.getbootstrap.com/assets/icons/send.svg`;
Expand All @@ -145,13 +152,22 @@ class Scrpt {

this.chatContent = this.dce('div');
this.chatContent.classList.add(`${nm}-chat-content`);

this.topicBtn = this.dce('img');
this.topicBtn.classList.add(`${nm}-topics`);
this.topicBtn.setAttribute('role', 'button');
this.topicBtn.setAttribute('id', `${nm}-topics-img`);
this.topicBtn.src = 'https://icons.getbootstrap.com/assets/icons/book.svg';
this.chatContainer.appendChild(this.topicBtn);
this.chatContainer.appendChild(this.topicsTags);
form.appendChild(this.chatContent);
form.appendChild(clrfx);

this.listTopics();
form.appendChild(text);
form.appendChild(btnDiv);
form.addEventListener('submit', this.submit.bind(this));

document.body.addEventListener('click', (event) => this.handleTopics(this, event));

const bottomMenuContainer = this.dce('ul');
bottomMenuContainer.classList.add(`${nm}-scrpt-chat-bottom-menu`);
Expand All @@ -161,21 +177,28 @@ class Scrpt {
icon: `https://icons.getbootstrap.com/assets/icons/house.svg`,
text: 'Home',
click: function () {
alert(this.text);
// alert(this.text);
}
},
// {
// icon: `https://icons.getbootstrap.com/assets/icons/book.svg`,
// text: 'Topics',
// click: function () {
// alert(1);
// }
// },
{
icon: this.chatIcon.src,
text: 'Chat',
click: function () {
alert(this.text);
// alert(this.text);
}
},
{
icon: `https://icons.getbootstrap.com/assets/icons/question-circle.svg`,
text: 'Help',
click: function () {
alert(this.text);
// alert(this.text);
}
},
];
Expand All @@ -185,6 +208,7 @@ class Scrpt {
let span = this.dce('img');
span.classList.add(`${nm}-bottom-menu-icon`);
span.src = item.icon;
span.onclick = item.click;
li.appendChild(span);
let br = this.dce('br');
li.appendChild(br);
Expand All @@ -202,26 +226,31 @@ class Scrpt {

async submit(e) {
e.preventDefault();
let id = this.generateUniqueId();
let inpt = document.getElementById(`${nm}-text`);
let q = inpt.value;
if (q.trim() === '') {
return;
}
this.chatContent.innerHTML += this.chatStripe(false, q, '');
inpt.disabled = true;
inpt.value = '';

await this.sendQuestion(q);

}

async sendQuestion(q) {
let id = this.generateUniqueId();
this.chatContent.innerHTML += this.chatStripe(false, q, '');
this.btn.disabled = true;
this.blurAll();
let result = await this.makeRequest("POST", `${domain}/api/answer/${this.appName}`, {
let result = await this.makeRequest("POST", `${domain}/api/projects/${this.appName}/answer`, {
question: q
});
result = JSON.parse(result);
this.chatContent.innerHTML += this.chatStripe(true, ' ', id);
const messageDiv = document.getElementById(id);

this.typeText(messageDiv, result.answer);

}

toggleOpen() {
Expand All @@ -231,6 +260,45 @@ class Scrpt {
} else {
this.closeChat();
}

}

listTopics() {
this.topicsTags.innerHTML = '';
this.topics.map((item) => {
const singleTopic = this.dce('li');
singleTopic.setAttribute('role', 'button');
singleTopic.innerText = item.title;
singleTopic.onclick = async (e) => {
if (this.topics.length > 0) {
let idx = this.topics.findIndex(item => { return item.title === e.target.innerText });
this.topics.splice(idx, 1);
this.listTopics();
this.toggleTopics();
await this.sendQuestion(`Tell me more about ${item.title}`);

}

};
this.topicsTags.appendChild(singleTopic);
});
}

handleTopics(obj, e) {
if (e.target.id == `${nm}-topics-img`) {
this.toggleTopics();
};
}

toggleTopics() {
let tagsElement = document.getElementById(`${nm}-topics-tags`);
if (tagsElement.clientHeight === 0) {
tagsElement.style.height = '84px';
this.topicBtn.src = `https://icons.getbootstrap.com/assets/icons/x.svg`;
} else {
tagsElement.style.height = '0px';
this.topicBtn.src = `https://icons.getbootstrap.com/assets/icons/book.svg`;
}
}

fullscreenchat() {
Expand Down Expand Up @@ -293,10 +361,11 @@ class Scrpt {


async getChatInitialData(appName) {
let result = await this.makeRequest("GET", `${domain}/api/project/${appName}/init`);
let result = await this.makeRequest("GET", `${domain}/api/projects/${appName}/init`);
let data = JSON.parse(result);
this.welcomeMessage = data.data.welcome_message;
this.inputText = data.data.input_text;
this.topics = data.topics;
}

dce(el) {
Expand Down
Loading

0 comments on commit 441c702

Please sign in to comment.