+
+`;
+
+const getBackgroundImageURLForSide = (side, knowledgeBase) => {
+ if (side == "user") {
+ return "/dashboard/static/images/chatbot_user.webp";
+ } else {
+ if (knowledgeBase == 0) {
+ return "/dashboard/static/images/owl_gradient.svg";
+ } else if (knowledgeBase == 1) {
+ return "/dashboard/static/images/logos/pytorch.svg";
+ } else if (knowledgeBase == 2) {
+ return "/dashboard/static/images/logos/rust.svg";
+ } else if (knowledgeBase == 3) {
+ return "/dashboard/static/images/logos/postgresql.svg";
+ }
+ }
+};
+
+const createHistoryMessage = (side, question, id, knowledgeBase) => {
+ id = id || "";
+ return `
+
+ `;
+};
+
+const knowledgeBaseIdToName = (knowledgeBase) => {
+ if (knowledgeBase == 0) {
+ return "PostgresML";
+ } else if (knowledgeBase == 1) {
+ return "PyTorch";
+ } else if (knowledgeBase == 2) {
+ return "Rust";
+ } else if (knowledgeBase == 3) {
+ return "PostgreSQL";
+ }
+};
+
+const createKnowledgeBaseNotice = (knowledgeBase) => {
+ return `
+ Loading
+
+
Chatting with Knowledge Base ${knowledgeBaseIdToName(
+ knowledgeBase,
+ )}
+ `;
+};
+
+const getAnswer = async (question, model, knowledgeBase) => {
+ const response = await fetch("/chatbot/get-answer", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ question, model, knowledgeBase }),
+ });
+ return response.json();
+};
+
+export default class extends Controller {
+ initialize() {
+ this.alertCount = 0;
+ this.gettingAnswer = false;
+ this.expanded = false;
+ this.chatbot = document.getElementById("chatbot");
+ this.expandContractImage = document.getElementById(
+ "chatbot-expand-contract-image",
+ );
+ this.alertsWrapper = document.getElementById("chatbot-alerts-wrapper");
+ this.questionInput = document.getElementById("chatbot-question-input");
+ this.brainToContentMap = {};
+ this.knowledgeBaseToContentMap = {};
+ autosize(this.questionInput);
+ this.chatHistory = document.getElementById("chatbot-history");
+ this.exampleQuestions = document.getElementsByClassName(
+ "chatbot-example-questions",
+ );
+ this.handleBrainChange(); // This will set our initial brain
+ this.handleKnowledgeBaseChange(); // This will set our initial knowledge base
+ this.handleResize();
+ }
+
+ newUserQuestion(question) {
+ this.chatHistory.insertAdjacentHTML(
+ "beforeend",
+ createHistoryMessage("user", question),
+ );
+ this.chatHistory.insertAdjacentHTML(
+ "beforeend",
+ createHistoryMessage(
+ "bot",
+ LOADING_MESSAGE,
+ "chatbot-loading-message",
+ this.knowledgeBase,
+ ),
+ );
+ this.hideExampleQuestions();
+ this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+
+ this.gettingAnswer = true;
+ getAnswer(question, this.brain, this.knowledgeBase)
+ .then((answer) => {
+ if (answer.answer) {
+ this.chatHistory.insertAdjacentHTML(
+ "beforeend",
+ createHistoryMessage(
+ "bot",
+ DOMPurify.sanitize(marked.parse(answer.answer)),
+ "",
+ this.knowledgeBase,
+ ),
+ );
+ } else {
+ this.showChatbotAlert("Error", answer.error);
+ console.log(answer.error);
+ }
+ })
+ .catch((error) => {
+ this.showChatbotAlert("Error", "Error getting chatbot answer");
+ console.log(error);
+ })
+ .finally(() => {
+ document.getElementById("chatbot-loading-message").remove();
+ this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+ this.gettingAnswer = false;
+ });
+ }
+
+ handleResize() {
+ if (this.expanded && window.innerWidth >= 1000) {
+ this.chatbot.classList.add("chatbot-full");
+ } else {
+ this.chatbot.classList.remove("chatbot-full");
+ }
+
+ let html = this.chatHistory.innerHTML;
+ this.chatHistory.innerHTML = "";
+ let height = this.chatHistory.offsetHeight;
+ this.chatHistory.style.height = height + "px";
+ this.chatHistory.innerHTML = html;
+ this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+ }
+
+ handleEnter(e) {
+ // This prevents adding a return
+ e.preventDefault();
+
+ const question = this.questionInput.value.trim();
+ if (question.length == 0) {
+ return;
+ }
+
+ // Handle resetting the input
+ // There is probably a better way to do this, but this was the best/easiest I found
+ this.questionInput.value = "";
+ autosize.destroy(this.questionInput);
+ autosize(this.questionInput);
+
+ this.newUserQuestion(question);
+ }
+
+ handleBrainChange() {
+ // Comment this out when we go back to using brains
+ this.brain = 0;
+ this.questionInput.focus();
+
+ // Uncomment this out when we go back to using brains
+ // We could just disable the input, but we would then need to listen for click events so this seems easier
+ // if (this.gettingAnswer) {
+ // document.querySelector(
+ // `input[name="chatbot-brain-options"][value="${this.brain}"]`,
+ // ).checked = true;
+ // this.showChatbotAlert(
+ // "Error",
+ // "Cannot change brain while chatbot is loading answer",
+ // );
+ // return;
+ // }
+ // let selected = parseInt(
+ // document.querySelector('input[name="chatbot-brain-options"]:checked')
+ // .value,
+ // );
+ // if (selected == this.brain) {
+ // return;
+ // }
+ // brainToContentMap[this.brain] = this.chatHistory.innerHTML;
+ // this.chatHistory.innerHTML = brainToContentMap[selected] || "";
+ // if (this.chatHistory.innerHTML) {
+ // this.exampleQuestions.style.setProperty("display", "none", "important");
+ // } else {
+ // this.exampleQuestions.style.setProperty("display", "flex", "important");
+ // }
+ // this.brain = selected;
+ // this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+ // this.questionInput.focus();
+ }
+
+ handleKnowledgeBaseChange() {
+ // Uncomment this when we go back to using brains
+ // let selected = parseInt(
+ // document.querySelector('input[name="chatbot-knowledge-base-options"]:checked')
+ // .value,
+ // );
+ // this.knowledgeBase = selected;
+
+ // Comment this out when we go back to using brains
+ // We could just disable the input, but we would then need to listen for click events so this seems easier
+ if (this.gettingAnswer) {
+ document.querySelector(
+ `input[name="chatbot-knowledge-base-options"][value="${this.knowledgeBase}"]`,
+ ).checked = true;
+ this.showChatbotAlert(
+ "Error",
+ "Cannot change knowledge base while chatbot is loading answer",
+ );
+ return;
+ }
+ let selected = parseInt(
+ document.querySelector(
+ 'input[name="chatbot-knowledge-base-options"]:checked',
+ ).value,
+ );
+ if (selected == this.knowledgeBase) {
+ return;
+ }
+
+ // document.getElementById
+ this.knowledgeBaseToContentMap[this.knowledgeBase] =
+ this.chatHistory.innerHTML;
+ this.chatHistory.innerHTML = this.knowledgeBaseToContentMap[selected] || "";
+ this.knowledgeBase = selected;
+
+ // This should be extended to insert the new knowledge base notice in the correct place
+ if (this.chatHistory.childElementCount == 0) {
+ this.chatHistory.insertAdjacentHTML(
+ "beforeend",
+ createKnowledgeBaseNotice(this.knowledgeBase),
+ );
+ this.hideExampleQuestions();
+ document
+ .getElementById(
+ `chatbot-example-questions-${knowledgeBaseIdToName(
+ this.knowledgeBase,
+ )}`,
+ )
+ .style.setProperty("display", "flex", "important");
+ } else if (this.chatHistory.childElementCount == 1) {
+ this.hideExampleQuestions();
+ document
+ .getElementById(
+ `chatbot-example-questions-${knowledgeBaseIdToName(
+ this.knowledgeBase,
+ )}`,
+ )
+ .style.setProperty("display", "flex", "important");
+ } else {
+ this.hideExampleQuestions();
+ }
+
+ this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+ this.questionInput.focus();
+ }
+
+ handleExampleQuestionClick(e) {
+ const question = e.currentTarget.getAttribute("data-value");
+ this.newUserQuestion(question);
+ }
+
+ handleExpandClick() {
+ this.expanded = !this.expanded;
+ this.chatbot.classList.toggle("chatbot-expanded");
+ if (this.expanded) {
+ this.expandContractImage.src =
+ "/dashboard/static/images/icons/arrow_compressed.svg";
+ } else {
+ this.expandContractImage.src =
+ "/dashboard/static/images/icons/arrow_expanded.svg";
+ }
+ this.handleResize();
+ this.questionInput.focus();
+ }
+
+ showChatbotAlert(level, message) {
+ const toastElement = createToast(message, level);
+ showToast(toastElement, {
+ autohide: true,
+ delay: 7000
+ });
+ }
+
+ hideExampleQuestions() {
+ for (let i = 0; i < this.exampleQuestions.length; i++) {
+ this.exampleQuestions
+ .item(i)
+ .style.setProperty("display", "none", "important");
+ }
+ }
+}
diff --git a/pgml-dashboard/src/components/chatbot/mod.rs b/pgml-dashboard/src/components/chatbot/mod.rs
new file mode 100644
index 000000000..9e7ea0b73
--- /dev/null
+++ b/pgml-dashboard/src/components/chatbot/mod.rs
@@ -0,0 +1,135 @@
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+// const EXAMPLE_QUESTIONS: [(&'static str, &'static str); 4] = [
+// ("Here is a Sample Question", "sample question continued"),
+// ("Here is a Sample Question", "sample question continued"),
+// ("Here is a Sample Question", "sample question continued"),
+// ("Here is a Sample Question", "sample question continued"),
+// ];
+
+type ExampleQuestions = [(&'static str, [(&'static str, &'static str); 4]); 4];
+const EXAMPLE_QUESTIONS: ExampleQuestions = [
+ ("PostgresML", [
+ ("PostgresML", "sample question continued"),
+ ("PostgresML", "sample question continued"),
+ ("PostgresML", "sample question continued"),
+ ("PostgresML", "sample question continued"),
+ ]),
+ ("PyTorch", [
+ ("PyTorch", "sample question continued"),
+ ("PyTorch", "sample question continued"),
+ ("PyTorch", "sample question continued"),
+ ("PyTorch", "sample question continued"),
+ ]),
+ ("Rust", [
+ ("Rust", "sample question continued"),
+ ("Rust", "sample question continued"),
+ ("Rust", "sample question continued"),
+ ("Rust", "sample question continued"),
+ ]),
+ ("PostgreSQL", [
+ ("PostgreSQL", "sample question continued"),
+ ("PostgreSQL", "sample question continued"),
+ ("PostgreSQL", "sample question continued"),
+ ("PostgreSQL", "sample question continued"),
+ ]),
+];
+
+const KNOWLEDGE_BASES: [&'static str; 0] = [
+ // "Knowledge Base 1",
+ // "Knowledge Base 2",
+ // "Knowledge Base 3",
+ // "Knowledge Base 4",
+];
+
+const KNOWLEDGE_BASES_WITH_LOGO: [KnowledgeBaseWithLogo; 4] = [
+ KnowledgeBaseWithLogo::new(
+ "PostgresML",
+ "/dashboard/static/images/owl_gradient.svg",
+ ),
+ KnowledgeBaseWithLogo::new(
+ "PyTorch",
+ "/dashboard/static/images/logos/pytorch.svg",
+ ),
+ KnowledgeBaseWithLogo::new(
+ "Rust",
+ "/dashboard/static/images/logos/rust.svg",
+ ),
+ KnowledgeBaseWithLogo::new(
+ "PostgreSQL",
+ "/dashboard/static/images/logos/postgresql.svg",
+ ),
+];
+
+struct KnowledgeBaseWithLogo {
+ name: &'static str,
+ logo: &'static str,
+}
+
+impl KnowledgeBaseWithLogo {
+ const fn new(name: &'static str, logo: &'static str) -> Self {
+ Self { name, logo }
+ }
+}
+
+const CHATBOT_BRAINS: [ChatbotBrain; 0] = [
+ // ChatbotBrain::new(
+ // "PostgresML",
+ // "Falcon 180b",
+ // "/dashboard/static/images/owl_gradient.svg",
+ // ),
+ // ChatbotBrain::new(
+ // "OpenAI",
+ // "ChatGPT",
+ // "/dashboard/static/images/logos/openai.webp",
+ // ),
+ // ChatbotBrain::new(
+ // "Anthropic",
+ // "Claude",
+ // "/dashboard/static/images/logos/anthropic.webp",
+ // ),
+ // ChatbotBrain::new(
+ // "Meta",
+ // "Llama2 70b",
+ // "/dashboard/static/images/logos/meta.webp",
+ // ),
+];
+
+struct ChatbotBrain {
+ provider: &'static str,
+ model: &'static str,
+ logo: &'static str,
+}
+
+// impl ChatbotBrain {
+// const fn new(provider: &'static str, model: &'static str, logo: &'static str) -> Self {
+// Self {
+// provider,
+// model,
+// logo,
+// }
+// }
+// }
+
+#[derive(TemplateOnce)]
+#[template(path = "chatbot/template.html")]
+pub struct Chatbot {
+ brains: &'static [ChatbotBrain; 0],
+ example_questions: &'static ExampleQuestions,
+ knowledge_bases: &'static [&'static str; 0],
+ knowledge_bases_with_logo: &'static [KnowledgeBaseWithLogo; 4],
+}
+
+impl Chatbot {
+ pub fn new() -> Chatbot {
+ Chatbot {
+ brains: &CHATBOT_BRAINS,
+ example_questions: &EXAMPLE_QUESTIONS,
+ knowledge_bases: &KNOWLEDGE_BASES,
+ knowledge_bases_with_logo: &KNOWLEDGE_BASES_WITH_LOGO,
+ }
+ }
+}
+
+component!(Chatbot);
diff --git a/pgml-dashboard/src/components/chatbot/template.html b/pgml-dashboard/src/components/chatbot/template.html
new file mode 100644
index 000000000..48d44c163
--- /dev/null
+++ b/pgml-dashboard/src/components/chatbot/template.html
@@ -0,0 +1,138 @@
+
+
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
index e3ca9bd6f..aa8429737 100644
--- a/pgml-dashboard/src/components/mod.rs
+++ b/pgml-dashboard/src/components/mod.rs
@@ -5,6 +5,10 @@
pub mod breadcrumbs;
pub use breadcrumbs::Breadcrumbs;
+// src/components/chatbot
+pub mod chatbot;
+pub use chatbot::Chatbot;
+
// src/components/confirm_modal
pub mod confirm_modal;
pub use confirm_modal::ConfirmModal;
@@ -59,6 +63,10 @@ pub use postgres_logo::PostgresLogo;
pub mod profile_icon;
pub use profile_icon::ProfileIcon;
+// src/components/star
+pub mod star;
+pub use star::Star;
+
// src/components/static_nav
pub mod static_nav;
pub use static_nav::StaticNav;
diff --git a/pgml-dashboard/src/components/star/mod.rs b/pgml-dashboard/src/components/star/mod.rs
new file mode 100644
index 000000000..63a5f99bc
--- /dev/null
+++ b/pgml-dashboard/src/components/star/mod.rs
@@ -0,0 +1,38 @@
+use std::collections::HashMap;
+
+use pgml_components::component;
+use once_cell::sync::Lazy;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "star/template.html")]
+pub struct Star {
+ content: String,
+ id: Option
+
+
+
+
+
+
+
+ Knowledge Base:
+ + + <% for (index, knowledge_base) in knowledge_bases_with_logo.iter().enumerate() { %> +
+
+ checked
+ <% } %>
+ />
+
+
+ <% } %>
+
+
+
+
+
+
+
+
+
+
+
+ Chatbot
+
+ 
+
+
+
+
+
+
+
+
+ <% for (knowledge_base, questions) in example_questions.iter() { %>
+
+
+ <% for (q_top, q_bottom) in questions.iter() { %>
+
+ <% } %>
+
+
+
+ <% } %>
+ <%= q_top %>
+ <%= q_bottom %>
+
+
+
+
+
+
+
diff --git a/pgml-dashboard/src/forms.rs b/pgml-dashboard/src/forms.rs
index 4a1bd3f2d..22f94f264 100644
--- a/pgml-dashboard/src/forms.rs
+++ b/pgml-dashboard/src/forms.rs
@@ -22,3 +22,11 @@ pub struct Upload<'a> {
pub struct Reorder {
pub cells: Vec
+ <%- svg %>
+
+<%- content %>
+ pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!
--- a PPN by Garber Painting Akron. With Image Size Reduction included!
Fetched URL: http://github.com/postgresml/postgresml/pull/1054.diff
Alternative Proxies: