Mon 21 Jul 22:43:21 CEST 2025
This commit is contained in:
parent
f4fc82d99b
commit
9c40a9995e
82
js/ui/botui/src/botui.html
Normal file
82
js/ui/botui/src/botui.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user