enhanced

web/src/components/PersonalitiesCommands.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="menu relative">
+      <div class="commands-menu-items-wrapper">
+        <button id="commands-menu" @click.prevent="toggleMenu" class="menu-button bg-blue-500 text-white dark:bg-blue-200 dark:text-gray-800 rounded-full flex items-center justify-center w-12 h-12 border-none cursor-pointer hover:bg-blue-400">
+          <i data-feather="command" class="w-6 h-6"></i>
+        </button>
+        <div v-if="showMenu" id="commands-menu-items" class="absolute mt-4 bg-white border border-gray-300 z-10">
+          <button v-for="command in commands" :key="command.value" @click.prevent="execute_cmd(command.value)" class="menu-button py-2 px-4 cursor-pointer bg-blue-500 text-white dark:bg-blue-200 dark:text-gray-800 hover:bg-blue-400" :class="{ 'bg-blue-400 text-white': hoveredCommand === command.value }" :title="command.help" @mouseover="hoveredCommand = command.value" @mouseout="hoveredCommand = null" @click="executeCommand(command.value)">
+            {{ command.name }}
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.commands-menu-items-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.commands-menu-items-wrapper > #commands-menu-items {
+    top: calc(-100% - 2rem);
+}
+</style>
+
+<script>
+import feather from 'feather-icons'
+export default {
+props: {
+    commandsList: {
+    type: Array,
+    required: true,
+    },
+},
+data() {
+    return {
+    showMenu: false,
+    showHelpText: false,
+    helpText: '',
+    commands: [],
+    };
+},
+methods: {
+    toggleMenu() {
+    this.showMenu = !this.showMenu;
+    },
+    execute_cmd(cmd) {
+    this.showMenu = !this.showMenu;
+    },
+    showHelp(command) {
+    this.showHelpText = true;
+    this.helpText = command.help;
+    },
+    sendCommand(value) {
+    // Implement your send_command function here
+    console.log('Sending command:', value);
+    },
+    executeCommand(value) {
+    this.sendCommand(value);
+    this.$emit('command-executed', value);
+    },
+    handleClickOutside(event) {
+    const menuElement = this.$el.querySelector('.commands-menu-items-wrapper');
+    if (menuElement && !menuElement.contains(event.target)) {
+        this.showMenu = false;
+    }
+    },
+},
+mounted() {
+    // Example commands data
+    this.commands = this.commandsList;
+
+    document.addEventListener('click', this.handleClickOutside);
+},
+beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+},
+};
+</script>
+