Feat/cycle through commands

src/components/AChat/AChatForm.vue

@@ -81,7 +81,9 @@ export default {
   emits: ['message', 'esc', 'error'],
   data: () => ({
     message: '',
-    emojiPickerOpen: false
+    emojiPickerOpen: false,
+    botCommandIndex: null,
+    botCommandSelectionMode: false
   }),
   computed: {
     isDesktopDevice: () => !isMobile(),
@@ -154,6 +156,12 @@ export default {
     onKeyCommand: function (event) {
       if (event.ctrlKey && event.shiftKey && event.code === 'Digit1') {
         this.openElement()
+      } else if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+        this.selectCommand(event.code)
+        event.preventDefault()
+      } else if (event.key.length === 1) {
+        this.botCommandSelectionMode = false
+        this.botCommandIndex = null
       }
     },
     openElement() {
@@ -210,6 +218,12 @@ export default {
     submitMessage() {
       const error = this.validator(this.message)
       if (error === false) {
+        if (this.message.startsWith('/')) {
+          this.$store.commit('botCommands/addCommand', {
+            partnerId: this.partnerId,
+            command: this.message
+          })
+        }
         this.$emit('message', this.message)
         this.message = ''
         this.$store.commit('draftMessage/deleteMessage', {
@@ -232,6 +246,36 @@ export default {
     },
     focus() {
       this.$refs.messageTextarea.focus()
+    },
+    selectCommand(direction) {
+      if (!this.message) {
+        this.botCommandSelectionMode = true
+      }
+      if (!this.botCommandSelectionMode) {
+        return
+      }
+      const commands = this.$store.getters['botCommands/getCommandsHistory'](this.partnerId)
+      const maxIndex = commands.length > 0 ? commands.length - 1 : 0
+      if (this.botCommandIndex === null) {
+        if (direction === 'ArrowUp') {
+          this.botCommandIndex = maxIndex
+          this.message = commands[this.botCommandIndex] || ''
+        }
+        return
+      }
+
+      if (direction === 'ArrowUp') {
+        if (this.botCommandIndex > 0) {
+          this.botCommandIndex--
+          this.message = commands[this.botCommandIndex] || ''
+        }
+        return
+      }
+
+      if (this.botCommandIndex < maxIndex) {
+        this.botCommandIndex++
+        this.message = commands[this.botCommandIndex] || ''
+      }
     }
   }
 }

src/components/icons/cryptos/ManaIcon.vue

@@ -3,9 +3,7 @@
     <circle cx="256" cy="256" r="240" />
     <path d="M186,172v180h150L186,172z" />
     <path d="M36,352h150V172L36,352z" />
-    <path
-      d="M64,400c13.7,18.1,29.9,34.3,48,48h288c18.1-13.7,34.3-29.9,48-48H64z"
-    />
+    <path d="M64,400c13.7,18.1,29.9,34.3,48,48h288c18.1-13.7,34.3-29.9,48-48H64z" />
     <path d="M112,448c85.3,64,202.7,64,288,0H112z" />
     <path d="M338,268v132h110L338,268z" />
     <path d="M338,352H36c7.4,17,16.8,33.1,28,48h274.1v-48H338z" />

src/components/icons/cryptos/QntIcon.vue

@@ -3,9 +3,7 @@
     <path
       d="M134.8,44.5l121.9,142.9l81.8-48.1c0,0-98.7-132-125.1-122.7C188.8,25.9,134.8,44.5,134.8,44.5z"
     />
-    <path
-      d="M341.7,139.2c0,0,18.6-32.6,27.8-76.1c0,0,92.6,37.2,57.1,130.5L341.7,139.2z"
-    />
+    <path d="M341.7,139.2c0,0,18.6-32.6,27.8-76.1c0,0,92.6,37.2,57.1,130.5L341.7,139.2z" />
     <path
       d="M426.5,193.6l7.8,97.9l35.5-4.6c0,0,9.2-3.1,7.8-20.1c-1.6-18.7-4.6-57.5-4.6-57.5
 	s1.6-9.3-20-12.4C426.5,192,426.5,193.6,426.5,193.6z"

src/components/icons/cryptos/UniIcon.vue

@@ -38,8 +38,6 @@
 		c0-2.8,0.1-5.1,0.1-5.1c0.1,0,1.3,1,2.8,2.1c6.6,5.3,14,7.6,34.7,10.5c12.1,1.8,19,3.1,25.3,5.3c20,6.6,32.3,20.1,35.3,38.5
 		C395.3,262.7,394.8,272.8,393.5,278z"
     />
-    <path
-      d="M117.1,60c0,0,0,0.1,0.1,0.2c0,0,0,0,0.1,0C117.2,60.1,117.1,60,117.1,60z"
-    />
+    <path d="M117.1,60c0,0,0,0.1,0.1,0.2c0,0,0,0,0.1,0C117.2,60.1,117.1,60,117.1,60z" />
   </g>
 </template>

src/components/icons/cryptos/UsdpIcon.vue

@@ -1,8 +1,6 @@
 <template>
   <g>
-    <path
-      d="M211.2,176.7c-16.6,0-30,13.4-30,30s13.4,30,30,30h20.7v-60H211.2z"
-    />
+    <path d="M211.2,176.7c-16.6,0-30,13.4-30,30s13.4,30,30,30h20.7v-60H211.2z" />
     <path
       d="M256,16C123.5,16,16,123.5,16,256s107.5,240,240,240s240-107.5,240-240S388.5,16,256,16z
 	 M308.2,373.1h-29.6V431h-46.7v-57.9h-90.1v-37.5h90.1v-60.8h-30c-36.3-0.8-65.4-30-66.3-66.3c-0.8-37.4,28.8-68.4,66.3-69.3h30V81

src/store/index.js

@@ -20,6 +20,7 @@ import navigatorOnline from './plugins/navigatorOnline'
 import socketsPlugin from './plugins/socketsPlugin'
 import partnersModule from './modules/partners'
 import admModule from './modules/adm'
+import botCommandsModule from './modules/bot-commands'
 import bitcoinModule from './modules/btc'
 import dashModule from './modules/dash'
 import delegatesModule from './modules/delegates'
@@ -29,6 +30,7 @@ import nodesModule from './modules/nodes'
 import walletsModule from './modules/wallets'
 import nodesPlugin from './modules/nodes/nodes-plugin'
 import walletsPersistencePlugin from './modules/wallets/wallets-plugin'
+import botCommandsPlugin from './modules/bot-commands/bot-commands-plugin'
 import draftMessage from '@/store/modules/draft-message'
 import snackbar from './modules/snackbar'
 import language from './modules/language'
@@ -234,6 +236,7 @@ const store = {
     partners: partnersModule, // Partners: display names, crypto addresses and so on
     delegates: delegatesModule, // Voting for delegates screen
     nodes: nodesModule, // ADAMANT nodes
+    botCommands: botCommandsModule,
     snackbar,
     draftMessage,
     language,
@@ -257,6 +260,7 @@ registerVuexPlugins(storeInstance, [
   indexedDbPlugin,
   navigatorOnline,
   socketsPlugin,
+  botCommandsPlugin,
   walletsPersistencePlugin
 ])
 

src/store/modules/bot-commands/bot-commands-actions.ts

@@ -0,0 +1,9 @@
+import { ActionTree } from 'vuex'
+import { RootState } from '@/store/types'
+import { BotCommand, BotCommandsState } from '@/store/modules/bot-commands/types.ts'
+
+export const actions: ActionTree<BotCommandsState, RootState> = {
+  addBotCommand({ commit }, value: BotCommand): void {
+    commit('addCommand', value)
+  }
+}

src/store/modules/bot-commands/bot-commands-getters.ts

@@ -0,0 +1,9 @@
+import { GetterTree } from 'vuex'
+import { RootState } from '@/store/types'
+import { BotCommandsState } from '@/store/modules/bot-commands/types.ts'
+
+export const getters: GetterTree<BotCommandsState, RootState> = {
+  getCommandsHistory: (state) => (parentId: string) => {
+    return state.commands[parentId] || []
+  }
+}

src/store/modules/bot-commands/bot-commands-mutations.ts

@@ -0,0 +1,15 @@
+import { MutationTree } from 'vuex'
+import { BotCommand, BotCommandsState } from '@/store/modules/bot-commands/types.ts'
+
+export const mutations: MutationTree<BotCommandsState> = {
+  addCommand(state, botCommand: BotCommand): void {
+    const commandValue = botCommand.command.trim()
+    if (!state.commands[botCommand.partnerId]) {
+      state.commands[botCommand.partnerId] = [commandValue]
+    } else {
+      if (!state.commands[botCommand.partnerId].includes(commandValue)) {
+        state.commands[botCommand.partnerId].push(commandValue)
+      }
+    }
+  }
+}

src/store/modules/bot-commands/bot-commands-plugin.ts

@@ -0,0 +1,9 @@
+import VuexPersistence from 'vuex-persist'
+
+const vuexPersistence = new VuexPersistence({
+  key: 'botCommands',
+  storage: window.sessionStorage,
+  modules: ['botCommands']
+})
+
+export default vuexPersistence.plugin

src/store/modules/bot-commands/bot-commands-state.ts

@@ -0,0 +1,5 @@
+import { BotCommandsState } from '@/store/modules/bot-commands/types.ts'
+
+export const state: BotCommandsState = {
+  commands: {}
+}

src/store/modules/bot-commands/index.ts

@@ -0,0 +1,17 @@
+import { actions } from './bot-commands-actions.ts'
+import { mutations } from './bot-commands-mutations.ts'
+import { state } from './bot-commands-state.ts'
+import { getters } from './bot-commands-getters.ts'
+import { Module } from 'vuex'
+import { RootState } from '@/store/types'
+import { BotCommandsState } from '@/store/modules/bot-commands/types.ts'
+
+const bodCommandsModule: Module<BotCommandsState, RootState> = {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}
+
+export default bodCommandsModule

src/store/modules/bot-commands/types.ts

@@ -0,0 +1,5 @@
+export interface BotCommandsState {
+  commands: Record<string, string[]>
+}
+
+export type BotCommand = { partnerId: string; command: string }