Chatbot

espidf-component-labathome/web/.gitignore

@@ -1,3 +1,4 @@
 build
 sdkconfig
 dist
+web/secrets.ts

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>

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"
   }
 }

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;

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;
+  }
+}

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")));