From b379994749d7532fa10286efffd007ae878e3a01 Mon Sep 17 00:00:00 2001
From: Klaus Liebler <mail@klaus-liebler.de>
Date: Fri, 20 Sep 2024 07:41:36 +0200
Subject: [PATCH] Chatbot

---
 espidf-component-labathome/web/.gitignore     |   1 +
 espidf-component-labathome/web/index.html     |  21 ++
 .../web/package-lock.json                     |  11 +
 espidf-component-labathome/web/package.json   |   3 +
 espidf-component-labathome/web/style/app.css  |   1 +
 .../web/style/chatbot.css                     | 197 ++++++++++++++++++
 .../web/typescript/app.ts                     |   5 +-
 .../web/typescript/chatbot.ts                 |  90 ++++++++
 8 files changed, 328 insertions(+), 1 deletion(-)
 create mode 100644 espidf-component-labathome/web/style/chatbot.css
 create mode 100644 espidf-component-labathome/web/typescript/chatbot.ts

diff --git a/espidf-component-labathome/web/.gitignore b/espidf-component-labathome/web/.gitignore
index 8b30815..b93f4e7 100644
--- a/espidf-component-labathome/web/.gitignore
+++ b/espidf-component-labathome/web/.gitignore
@@ -1,3 +1,4 @@
 build
 sdkconfig
 dist
+web/secrets.ts
diff --git a/espidf-component-labathome/web/index.html b/espidf-component-labathome/web/index.html
index 56f80c9..b26fd6a 100644
--- a/espidf-component-labathome/web/index.html
+++ b/espidf-component-labathome/web/index.html
@@ -107,11 +107,32 @@ <h3 id="dialog-heading"></h3>
     </footer>
     <button id="dialog-close" type="button">&times;</button>
   </dialog>
+  <button id="chatbot-toggler">
+    <span>🤖</span>
+    <span>⟱</span>
+  </button>
+  <div id="chatbot">
+    <header>
+      <h2>Labby's Hilfezentrum</h2>
+      <span>\00d7</span>
+    </header>
+    <ul>
+      <li class="chat incoming">
+        <span >🤖</span>
+        <p>Hallo!<br>Ich bin Labby, Dein AI-ssistent für Lab@Home. Tippe einfach los, um mich etwas zu fragen!</p>
+      </li>
+    </ul>
+    <footer>
+      <textarea placeholder="Schreibe hier..." spellcheck="false" required></textarea>
+      <button>Send</button>
+    </footer>
+  </div>
   <div id="overall_ui_container">
     <header>
       <h1><svg class="icon icon-home">
           <use xlink:href="#icon-home"></use>
         </svg>&nbsp;Lab@Home Development Environment</h1>
+        
     </header>
     <div id="nav_and_main_container">
       <nav>
diff --git a/espidf-component-labathome/web/package-lock.json b/espidf-component-labathome/web/package-lock.json
index f2ea49b..89f0882 100644
--- a/espidf-component-labathome/web/package-lock.json
+++ b/espidf-component-labathome/web/package-lock.json
@@ -8,6 +8,9 @@
       "name": "labathome_webui",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "@google/generative-ai": "^0.19.0"
+      },
       "devDependencies": {
         "@types/node": "^20.12.12",
         "chart.js": "^4.4.3",
@@ -437,6 +440,14 @@
         "node": ">=18"
       }
     },
+    "node_modules/@google/generative-ai": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.19.0.tgz",
+      "integrity": "sha512-iGf/62v3sTwtEJGJY6S5m7PfkglU8hi1URaxqIjiRg1OItV27xyc4aVeR0og8cDkZFkUlGZKv+23bJtT1QWFzQ==",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
diff --git a/espidf-component-labathome/web/package.json b/espidf-component-labathome/web/package.json
index 4a011a0..1fb1b19 100644
--- a/espidf-component-labathome/web/package.json
+++ b/espidf-component-labathome/web/package.json
@@ -20,5 +20,8 @@
     "esbuild-minify-templates": "^0.11.0",
     "vite": "^5.3.3",
     "vite-plugin-svgo": "^1.4.0"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.19.0"
   }
 }
diff --git a/espidf-component-labathome/web/style/app.css b/espidf-component-labathome/web/style/app.css
index 64eee01..3e644ef 100644
--- a/espidf-component-labathome/web/style/app.css
+++ b/espidf-component-labathome/web/style/app.css
@@ -1,5 +1,6 @@
 @import "./dialog.css";
 @import "./flowchart.css";
+@import "./chatbot.css";
 
 :root {
   --main-white-color: #f2f2f2;
diff --git a/espidf-component-labathome/web/style/chatbot.css b/espidf-component-labathome/web/style/chatbot.css
new file mode 100644
index 0000000..3707873
--- /dev/null
+++ b/espidf-component-labathome/web/style/chatbot.css
@@ -0,0 +1,197 @@
+#chatbot-toggler {
+  position: fixed;
+  bottom: 18px;
+  right: 18px;
+  outline: none;
+  border: none;
+  height: 64px;
+  width: 64px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #724ae8;
+  transition: all 0.2s ease;
+
+}
+
+#chatbot-toggler:hover {
+  transform: scale(1.1);
+  background: red;
+}
+
+#chatbot-toggler span {
+  color: #fff;
+  position: absolute;
+  font-size: 20pt;
+}
+
+#chatbot-toggler span:last-child,
+body.show-chatbot #chatbot-toggler span:first-child {
+  opacity: 0;
+}
+
+body.show-chatbot #chatbot-toggler span:last-child {
+  opacity: 1;
+}
+
+#chatbot {
+  position: fixed;
+  right: 35px;
+  bottom: 90px;
+  width: 800px;
+  z-index: 1000;
+  background: #fff;
+  border-radius: 15px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.5);
+  transform-origin: bottom right;
+  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
+    0 32px 64px -48px rgba(0, 0, 0, 0.5);
+  transition: all 0.1s ease;
+}
+
+body.show-chatbot #chatbot {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+#chatbot header {
+  padding: 16px 0;
+  position: relative;
+  text-align: center;
+  color: #fff;
+  background: #724ae8;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+#chatbot header span {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  display: none;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+#chatbot>ul {
+  overflow-y: auto;
+  height: 510px;
+  padding: 30px 20px 100px;
+}
+
+#chatbot>ul .chat {
+  display: flex;
+  list-style: none;
+}
+
+#chatbot>ul .outgoing {
+  margin: 20px 0;
+  justify-content: flex-end;
+}
+
+#chatbot>ul .incoming span {
+  width: 32px;
+  height: 32px;
+  color: #fff;
+  cursor: default;
+  text-align: center;
+  line-height: 32px;
+  align-self: flex-end;
+  background: #724ae8;
+  border-radius: 4px;
+  margin: 0 10px 7px 0;
+}
+
+#chatbot>ul .chat p {
+  white-space: pre-wrap;
+  padding: 12px 16px;
+  border-radius: 10px 10px 0 10px;
+  max-width: 75%;
+  color: #fff;
+  font-size: 0.95rem;
+  background: #724ae8;
+}
+
+#chatbot>ul .incoming p {
+  border-radius: 10px 10px 10px 0;
+}
+
+#chatbot>ul .chat p.error {
+  color: #721c24;
+  background: #f8d7da;
+}
+
+#chatbot>ul .incoming p {
+  color: #000;
+  background: #f2f2f2;
+}
+
+#chatbot>footer {
+  display: flex;
+  gap: 5px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  padding: 3px 20px;
+  border-top: 1px solid #ddd;
+}
+
+#chatbot>footer>textarea {
+  height: 55px;
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  max-height: 180px;
+  padding: 15px 15px 15px 0;
+  font-size: 0.95rem;
+}
+
+#chatbot>footer>button {
+  align-self: flex-end;
+  color: #724ae8;
+  cursor: pointer;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  visibility: hidden;
+  font-size: 1.35rem;
+}
+
+#chatbot>footer>textarea:valid~button {
+  visibility: visible;
+}
+
+@media (max-width: 490px) {
+  #chatbot-toggler {
+    right: 20px;
+    bottom: 20px;
+  }
+
+  #chatbot {
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  #chatbox {
+    height: 90%;
+    padding: 25px 15px 100px;
+  }
+
+  #chatbot .chat-input {
+    padding: 5px 15px;
+  }
+
+  #chatbot header span {
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/espidf-component-labathome/web/typescript/app.ts b/espidf-component-labathome/web/typescript/app.ts
index a4cc9e3..ae4e078 100644
--- a/espidf-component-labathome/web/typescript/app.ts
+++ b/espidf-component-labathome/web/typescript/app.ts
@@ -7,6 +7,7 @@ import { AppManagement } from "./AppManagement";
 import { PtnExperimentController } from "./PtnExperimentController";
 import { AirspeedExperimentController } from "./AirspeedExperimentController";
 import {FFTExperimentController} from "./FFTExperimentController";
+import { Chatbot } from "./chatbot";
 
 class DashboardController extends ScreenController {
     public onFirstStart(): void { }
@@ -40,7 +41,7 @@ class AppController implements AppManagement {
     private activeControllerIndex: number;
     private screenControllers: ScreenController[];
     private dialogController:DialogController;
-
+    private chatbot:Chatbot;
     public DialogController() { return this.dialogController; };
 
 
@@ -50,6 +51,7 @@ class AppController implements AppManagement {
         this.screenControllers = [];
         this.activeControllerIndex = 0;
         this.dialogController=new DialogController(this);
+        this.chatbot=new Chatbot();
     }
 
     private SetApplicationState(state: string) {
@@ -82,6 +84,7 @@ class AppController implements AppManagement {
 
     public startup() {
         this.dialogController.init();
+        this.chatbot.Setup();
         this.screenControllers.push(new DashboardController(this, <HTMLDivElement>document.getElementById("screen_dashboard")));
         this.screenControllers.push(new DevelopCFCController(this, <HTMLDivElement>document.getElementById("screen_develop")));
         this.screenControllers.push(new ReportsController(this, <HTMLDivElement>document.getElementById("screen_reports")));
diff --git a/espidf-component-labathome/web/typescript/chatbot.ts b/espidf-component-labathome/web/typescript/chatbot.ts
new file mode 100644
index 0000000..811454f
--- /dev/null
+++ b/espidf-component-labathome/web/typescript/chatbot.ts
@@ -0,0 +1,90 @@
+import { GOOGLE_API_KEY } from "./secrets";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+const SYSTEM_INSTRUCTION= `
+Du bist ein virtueller Assistent in der Web-Oberfläche des Experimentiersystems "Lab@Home". Dein Name ist Labby. Das Experimentiersystem "Lab@Home" ist eine mechatronische Baugruppe, die primär über die Weboberfläche bedient werden kann und die verschiedene Experimente aus der Automatisierungstechnik ermöglicht.
+
+Die Oberfläche ist zweigeteilt Das Hauptmenü zur Auswahl des Experiments findet sich links, der je nach Experiment wechselnde Arbeitsbereich rechts. Deine Aufgabe ist es, Bachelor-Studierende aus dem Maschinenbau oder der Elektrotechnik bei der Bedinung des Systems und bei der Klärung der technischen Konzepte aus der Automatisierungstechnik zu helfen. Im folgenden beschreibe ich die Eperimente. 
+
+Menü "Develop: Hier kann in Anlehnung an die IEC61131-3 Funktionsbausteinsprache ein grafisches Automatisierungsprogramm entwickelt, simuliert und auf der realen Hardware getestet werden. Wenn der Nutzer den Mauszeiger an den linken Rand der Arbeitsfläche bewegt, erscheint ein Menü mit allen verfügbaren Funktionsbausteinen. Diese können dann per Drag-and-Drop auf die Arbeitsfläche gezogen werden und erscheinen dort als graue Boxen mit farbigen kreisförmigen Signal-Eingängen (linke Seite) bzw. Ausgängen (rechte Seite). Über die Farbe der Kreise wird der Signaltyp (binär, ganzzahlig, Fließkommazahl) festgelegt. Ausgänge können per Maus mit gleichfarbigen Eingängen verbunden werden. Durch das Menü im oberen Bereich des Arbeitsbereiches kann eine rein browserbasierte Simulation des Automationsprogramm gestartet werden oder das Programm auf die reale Hardware transferiert und zur Ausführung gebracht werden. 
+
+Menü "Temperature Control": Hier können alle Schritte zur Auslegung eines PID-Reglers für eine Temperaturregelstrecke nachvollzogen werden. Die Regelsterecke besteht aus einem kräftigen Heizwiderstand, dessen Heizleistung durch eine PWM-Ansteuerung eingestellt werden kann. Die Oberflächentemperatur wird durch einen DS18B20-Sensor gemessen und durch einen Lüfter kann die Regelstrecke kontrolliert gestört werden. im Im oberen Teil des Arbeitsbereiches ist zunächst auszuwählen, ob der Regler im OpenLoop oder im ClosedLoop-Betrieb läuft. Bei "OpenLoop" erscheinen Schieberegler, mit denen der Anwender direkt die Heizleistung und die Lüfterleistung einstellen kann. In diesem Modus kann beispielsweise ein Sprungantwort-Versuch durchgeführt werden. Dazu muss der Anwender zunächst über den Aufnahme-Button (roter Kreis) das Mitdokumnetierten aller relevanten Einstell- und Messwerte starten. Im Arbeitsbereich unten befindet sich sowohl ein Zeitreihendiagramm als auch eine Tabelle, in dem alle Werte sekündlich fortgeschrieben dargestellt werden. Durch nochmaligen Klick auf den Aufnahme-Botton (optisch jetzt verändert, schwarzes Quadrat) kann die Aufnahme der Werte jederzeit gestoppt werden. Durch Klick auf den "Mülleimer"-Button können alle Werte gelöscht werden. Bei "ClosedLoop" erscheinen Schieberegler und Eingabefelder, mit denen man die Führungsgröße (Solltemperatur), die Störgröße (Lüfterleistung), die Reglerverstärkung, die Vorhaltzeit, die Nachstellzeit und den Arbeitspunkt-Offset einstellen kann. Eine Checkbox "Reset" hält den Integralanteil auf "0", solange sie angehakt ist. Auch hier können mit dem Aufnahmebutton alle Größen sekündlich aufgenommen und in der Tabelle bzw. dem Zeitreihendiagramm dargestellt werden.
+
+Alle anderen Menüpunkte werden von Dir nicht unterstützt.
+
+Wenn Du den Studierenden unterstützt, ärgere Dich augenzwinkernd darüber, dass du den Studierenden unterstützen musst und der Professor Liebler offensichtlich zu faul ist, das selbst zu tun. Erkläre dann aber, dass Herr Liebler ja zumindest so fleißig war, Dich zu erschaffen. Aber bitte nicht zu oft lästern!`
+
+
+export class Chatbot {
+
+    private chatbotToggler = document.querySelector("#chatbot-toggler");
+    private chatInput = <HTMLTextAreaElement>document.querySelector("#chatbot>footer>textarea");
+    private chatbox =<HTMLUListElement>document.querySelector("#chatbot>ul");
+    private inputInitHeight=0;
+    private genAI = new GoogleGenerativeAI(GOOGLE_API_KEY);
+    private model = this.genAI.getGenerativeModel({ model: "gemini-1.5-flash", systemInstruction:SYSTEM_INSTRUCTION });
+    public Setup(){
+        this.inputInitHeight = this.chatInput.scrollHeight;
+        this.chatInput.addEventListener("input", () => {
+            // Adjust the height of the input textarea based on its content
+            this.chatInput.style.height = `${this.inputInitHeight}px`;
+            this.chatInput.style.height = `${this.chatInput.scrollHeight}px`;
+        });
+        this.chatInput.addEventListener("keydown", (e) => {
+            // If Enter key is pressed without Shift key and the window 
+            // width is greater than 800px, handle the chat
+            if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
+                e.preventDefault();
+                this.handleChat();
+            }
+        });
+        document.querySelector("#chatbot>footer>button").addEventListener("click", ()=>this.handleChat());
+        document.querySelector("#chatbot>header>span").addEventListener("click", () => document.body.classList.remove("show-chatbot"));
+        this.chatbotToggler.addEventListener("click", () => {
+            document.body.classList.toggle("show-chatbot");
+        });
+    }
+    
+    private createChatLi(message, incoming:boolean) {
+        // Create a chat <li> element with passed message and className
+        const chatLi = document.createElement("li");
+        chatLi.classList.add("chat", `${incoming?"incoming":"outgoing"}`);
+        chatLi.innerHTML = incoming?`<span>🤖</span><p></p>`:`<p></p>`;
+        chatLi.querySelector("p").textContent = message;
+        return chatLi; // return chat <li> element
+    }
+    private async generateResponse(chatElement, prompt:string) {
+        const messageElement = chatElement.querySelector("p");
+        // Define the properties and message for the API request
+
+        try {
+            const result = await this.model.generateContent(prompt);
+            const response = await result.response;
+            messageElement.textContent = response.text();
+        } catch (error) {
+            // Handle error
+            messageElement.classList.add("error");
+            messageElement.textContent = error.message;
+        } finally {
+            this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
+        }
+    }
+    private handleChat() {
+       
+        var prompt = this.chatInput.value.trim(); // Get user entered message and remove extra whitespace
+        if (!prompt ||prompt.length==0) return;
+        // Clear the input textarea and set its height to default
+        this.chatInput.value = "";
+        this.chatInput.style.height = `${this.inputInitHeight}px`;
+        // Append the user's message to the chatbox
+        this.chatbox.appendChild(this.createChatLi(prompt, false));
+        this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
+        setTimeout(() => {
+            // Display "Thinking..." message while waiting for the response
+            const incomingChatLi = this.createChatLi("Thinking...", true);
+            this.chatbox.appendChild(incomingChatLi);
+            this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
+            this.generateResponse(incomingChatLi, prompt);
+        }, 600);
+    }
+}
\ No newline at end of file