From 9c40a9995eb40cef674d4ef51319c03528a3806d Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 23:36:57 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 js/ui/botui/src/botui.html | 82 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 js/ui/botui/src/botui.html

diff --git a/js/ui/botui/src/botui.html b/js/ui/botui/src/botui.html
new file mode 100644
index 0000000..1c57e67
--- /dev/null
+++ b/js/ui/botui/src/botui.html
@@ -0,0 +1,82 @@
+<div class="botui botui-container" v-botui-container>
+  <div class="botui-messages-container">
+    <div v-for="msg in messages" class="botui-message" :class="msg.cssClass" v-botui-scroll>
+      <transition name="slide-fade">
+        <div v-if="msg.visible" :class="[{human: msg.human, 'botui-message-content': true}, msg.type]">
+          <span v-if="msg.type == 'text'" v-text="msg.content" v-botui-markdown></span>
+          <iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe>
+        </div>
+      </transition>
+      <div v-if="msg.loading" class="botui-message-content loading">
+        <i class="dot"></i>
+        <i class="dot"></i>
+        <i class="dot"></i>
+      </div>
+    </div>
+  </div>
+  <div class="botui-actions-container">
+    <transition name="slide-fade">
+      <div v-if="action.show" v-botui-scroll>
+        <form v-if="action.type == 'text'" class="botui-actions-text"
+          @submit.prevent="handle_action_text()" :class="action.cssClass">
+          <i v-if="action.text.icon" class="botui-icon botui-action-text-icon fa" :class="'fa-' + action.text.icon"></i>
+          <input type="text" ref="input" :type="action.text.sub_type" v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder" :size="action.text.size" :value=" action.text.value" :class="action.text.cssClass" required v-focus/>
+          <button type="submit"
+            :class="{'botui-actions-buttons-button': !!action.text.button, 'botui-actions-text-submit': !action.text.button}">
+            <i v-if="action.text.button && action.text.button.icon" class="botui-icon botui-action-button-icon fa"
+            :class="'fa-' + action.text.button.icon"></i>
+            <span>{{(action.text.button && action.text.button.label) || 'Go'}}</span>
+          </button>
+        </form>
+        <form v-if="action.type == 'select'" class="botui-actions-select" @submit.prevent="handle_action_select()" :class="action.cssClass">
+          <i v-if="action.select.icon" class="botui-icon botui-action-select-icon fa" :class="'fa-' + action.select.icon">
+          </i>
+          <v-select v-if="action.select.searchselect && !action.select.multipleselect"  v-model="action.select.value" :value="action.select.value" :placeholder="action.select.placeholder" class="botui-actions-text-searchselect" :label="action.select.label" :options="action.select.options"></v-select>
+          <v-select v-else-if="action.select.searchselect && action.select.multipleselect" multiple  v-model="action.select.value" :value="action.select.value" :placeholder="action.select.placeholder" class="botui-actions-text-searchselect" :label="action.select.label" :options="action.select.options"></v-select>
+          <select v-else v-model="action.select.value" class="botui-actions-text-select" :placeholder="action.select.placeholder" :size="action.select.size" :class="action.select.cssClass" required v-focus>
+            <option v-for="option in action.select.options" :class="action.select.optionClass" v-bind:value="option.value" :disabled="(option.value == '')?true:false" :selected="(action.select.value == option.value)?'selected':''">
+              {{ option.text }}
+            </option>
+          </select>
+          <button type="submit" :class="{'botui-actions-buttons-button': !!action.select.button, 'botui-actions-select-submit': !action.select.button}">
+            <i v-if="action.select.button && action.select.button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + action.select.button.icon"></i>
+            <span>{{(action.select.button && action.select.button.label) || 'Ok'}}</span>
+          </button>
+        </form>
+        <div v-if="action.type == 'button'" class="botui-actions-buttons" :class="action.cssClass">
+          <button type="button" :class="button.cssClass"
+            class="botui-actions-buttons-button" v-for="button in action.button.buttons"
+            @click="handle_action_button(button)"
+            autofocus>
+            <i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i>
+             {{button.text}}
+          </button>
+        </div>
+        <form v-if="action.type == 'buttontext'" class="botui-actions-text" 
+          @submit.prevent="handle_action_text()" :class="action.cssClass">
+          <i v-if="action.text.icon" 
+          class="botui-icon botui-action-text-icon fa" 
+          :class="'fa-' + action.text.icon"></i>
+          <input type="text" ref="input" :type="action.text.sub_type" 
+          v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder"
+          :size="action.text.size" :value="action.text.value" :class="action.text.cssClass" required v-focus />
+          <button type="submit" 
+            :class="{'botui-actions-buttons-button': !!action.text.button, 'botui-actions-text-submit': !action.text.button}">
+            <i v-if="action.text.button && action.text.button.icon" class="botui-icon botui-action-button-icon fa"
+            :class="'fa-' + action.text.button.icon"></i>
+            <span>{{(action.text.button && action.text.button.label) || 'Go'}}</span>
+          </button>
+          <div class="botui-actions-buttons" :class="action.cssClass">
+            <button type="button" :class="button.cssClass" 
+              class="botui-actions-buttons-button" v-for="button in action.button.buttons" 
+              @click="handle_action_button(button)" 
+              autofocus>
+              <i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i>
+               {{button.text}}
+            </button>
+          </div>            
+        </form>          
+      </div>
+    </transition>
+  </div>
+</div>