[6825] Pinia Task 8 - product-assistant

frontend/src/components/expert/Expert.vue

@@ -23,15 +23,16 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
-import { mapActions, mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapGetters, mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import ExpertChatInput from './components/ExpertChatInput.vue'
 import ExpertMessages from './components/ExpertMessages.vue'
 import ExpertModeSwitcher from './components/ExpertModeSwitcher.vue'
 import InfoBanner from './components/InfoBanner.vue'
 import UpdateBanner from './components/UpdateBanner.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -148,12 +149,11 @@ export default {
         this.resetSessionTimer()
     },
     methods: {
-        ...mapActions('product/expert', [
-            'handleQuery',
-            'handleMessageResponse',
+        ...mapVuexActions('product/expert', [
             'setAbortController',
             'resetSessionTimer'
         ]),
+        ...mapActions(useProductAssistantStore, ['reset']),
         handleStopGeneration () {
             if (this.abortController) {
                 this.abortController.abort()

frontend/src/components/expert/components/ExpertChatInput.vue

@@ -62,7 +62,8 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapGetters, mapActions as mapVuexActions } from 'vuex'
 
 import { useResizingHelper } from '../../../composables/ResizingHelper.js'
 
@@ -71,6 +72,7 @@ import ResizeBar from '../../ResizeBar.vue'
 import CapabilitiesSelector from './CapabilitiesSelector.vue'
 import ContextSelector from './context-selection/index.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -110,7 +112,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('product/assistant', [
+        ...mapState(useProductAssistantStore, [
             'immersiveInstance',
             'immersiveDevice'
         ]),
@@ -155,8 +157,8 @@ export default {
         })
     },
     methods: {
-        ...mapActions('product/assistant', ['resetContextSelection']),
-        ...mapActions('product/expert', ['startOver', 'handleQuery', 'handleMessageResponse']),
+        ...mapActions(useProductAssistantStore, ['resetContextSelection']),
+        ...mapVuexActions('product/expert', ['startOver', 'handleQuery', 'handleMessageResponse']),
         async handleSend () {
             if (!this.canSend) return
 

frontend/src/components/expert/components/UpdateBanner.vue

@@ -26,17 +26,18 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import SemVer from 'semver'
-import { mapActions, mapGetters, mapState } from 'vuex'
+
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
 
 const assistantVerWithAvailableUpdatesSupport = '0.11.0' // Minimum version of assistant package that supports update available detection
 const nrVerWithAvailableUpdatesSupport = '4.1.6' // Minimum Node-RED version that provides available updates to editorState
 
 export default {
     name: 'UpdateBanner',
     computed: {
-        ...mapState('product/assistant', ['palette', 'editorState', 'version', 'nodeRedVersion', 'supportedActions']),
-        ...mapGetters('product/assistant', ['isFeaturePaletteEnabled', 'isEditorRunning']),
+        ...mapState(useProductAssistantStore, ['palette', 'editorState', 'version', 'nodeRedVersion', 'supportedActions', 'isEditorRunning']),
         assistantLoaded () {
             // If one of version, nodeRedVersion or palette are present, we know it is loaded
             return !!(this.version || this.nodeRedVersion || this.palette)
@@ -116,7 +117,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/assistant', ['manageNodePackage', 'installNodePackage']),
+        ...mapActions(useProductAssistantStore, ['manageNodePackage', 'installNodePackage']),
         onButtonClick () {
             if (typeof this.assistantState?.buttonAction === 'function') {
                 this.assistantState.buttonAction()

frontend/src/components/expert/components/chips/ContextChip.vue

@@ -8,12 +8,14 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 
 import { pluralize } from '../../../../composables/strings/String.js'
 
 import DefaultChip from './DefaultChip.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'ContextChip',
     components: {
@@ -27,7 +29,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('product/assistant', ['getSelectedContext']),
+        ...mapState(useProductAssistantStore, ['getSelectedContext']),
         selectedContext () {
             return this.getSelectedContext
         },
@@ -39,7 +41,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/assistant', ['setSelectedContext']),
+        ...mapActions(useProductAssistantStore, ['setSelectedContext']),
         pluralize,
         toggleSelection () {
             const currentSelection = this.selectedContext.filter(c => c.name !== this.contextItem.name)

frontend/src/components/expert/components/chips/DebugChip.vue

@@ -12,12 +12,14 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 
 import { pluralize } from '../../../../composables/strings/String.js'
 
 import DefaultChip from './DefaultChip.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'DebugChip',
     components: {
@@ -32,7 +34,7 @@ export default {
     },
     emits: ['update:modelValue'],
     computed: {
-        ...mapState('product/assistant', ['debugLog']),
+        ...mapState(useProductAssistantStore, ['debugLog']),
         selectedCounter () {
             return this.debugLog.length
         },
@@ -75,7 +77,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/assistant', ['resetDebugLogContext']),
+        ...mapActions(useProductAssistantStore, ['resetDebugLogContext']),
         pluralize,
         toggleSelection () {
             this.$emit('update:modelValue', !this.modelValue)

frontend/src/components/expert/components/chips/SelectionChip.vue

@@ -12,12 +12,14 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 
 import { pluralize } from '../../../../composables/strings/String.js'
 
 import DefaultChip from './DefaultChip.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'SelectionChip',
     components: {
@@ -32,7 +34,7 @@ export default {
     },
     emits: ['update:modelValue'],
     computed: {
-        ...mapState('product/assistant', ['selectedNodes']),
+        ...mapState(useProductAssistantStore, ['selectedNodes']),
         filteredSelectedNodes () {
             return this.selectedNodes.filter(n => !['global-config'].includes(n.type))
         },
@@ -51,7 +53,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/assistant', ['setSelectedNodes']),
+        ...mapActions(useProductAssistantStore, ['setSelectedNodes']),
         pluralize,
         toggleSelection () {
             this.$emit('update:modelValue', !this.modelValue)

frontend/src/components/expert/components/context-selection/ContextSelectorButton.vue

@@ -26,12 +26,12 @@
 <script>
 
 import { CubeIcon, DocumentIcon, PaperClipIcon, ViewListIcon } from '@heroicons/vue/outline'
-import { mapActions } from 'vuex'
-
-import { mapGetters } from 'vuex/dist/vuex.cjs.js'
+import { mapActions, mapState } from 'pinia'
 
 import { pluralize } from '../../../../composables/strings/String.js'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'ContextSelectorButton',
     components: {
@@ -43,7 +43,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('product/assistant', ['availableContextOptions', 'getSelectedContext']),
+        ...mapState(useProductAssistantStore, ['availableContextOptions', 'getSelectedContext']),
         hasContextOptions () {
             return this.contextOptions?.length > 0
         },
@@ -74,10 +74,10 @@ export default {
     },
     methods: {
         pluralize,
-        ...mapActions('product/assistant', ['setSelectedContext']),
+        ...mapActions(useProductAssistantStore, ['setSelectedContext']),
         selectItem (option) {
             if (option.onSelectAction) {
-                this.$store.dispatch(`product/assistant/${option.onSelectAction}`)
+                useProductAssistantStore()[option.onSelectAction]()
             } else {
                 const cleanOption = (option) => ({
                     value: option.value,

frontend/src/components/expert/components/context-selection/index.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import ContextChip from '../chips/ContextChip.vue'
@@ -18,6 +19,8 @@ import SelectionChip from '../chips/SelectionChip.vue'
 
 import ContextSelectorButton from './ContextSelectorButton.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'ContextSelector',
     components: {
@@ -27,7 +30,7 @@ export default {
         ContextSelectorButton
     },
     computed: {
-        ...mapGetters('product/assistant', ['getSelectedContext', 'hasDebugLogsSelected', 'hasUserSelection']),
+        ...mapState(useProductAssistantStore, ['getSelectedContext', 'hasDebugLogsSelected', 'hasUserSelection']),
         ...mapGetters('product/expert', ['isOperatorAgent']),
         selectedContext () {
             // for insights mode, return empty array

frontend/src/components/expert/components/messages/components/AnswerWrapper.vue

@@ -71,7 +71,8 @@
 
 <script>
 
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import useTimerHelper from '../../../../../composables/TimerHelper.js'
 
@@ -86,6 +87,8 @@ import ResourcesList from './resources/ResourcesList.vue'
 import RichContent from './resources/RichContent.vue'
 import SuggestionsList from './resources/SuggestionsList.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'AnswerWrapper',
     components: {
@@ -122,8 +125,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('product/assistant', ['supportedActions']),
-        ...mapState('product/expert', ['agentMode']),
+        ...mapState(useProductAssistantStore, ['supportedActions']),
+        ...mapVuexState('product/expert', ['agentMode']),
         hasGuideHeader () {
             // chat answers contain generic titles, they don't need to be displayed
             return !!(this.answer.title && !this.isChatAnswer)
@@ -247,7 +250,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/expert', ['updateAnswerStreamedState', 'updateMessageStreamedState']),
+        ...mapVuexActions('product/expert', ['updateAnswerStreamedState', 'updateMessageStreamedState']),
         buildStreamingOrder () {
             // order matters
             // this is where the decision of the streaming order of components is decided
@@ -303,7 +306,7 @@ export default {
                     params[paramName] = value
                 }
             }
-            this.$store.dispatch('product/assistant/invokeAction', { action, params })
+            useProductAssistantStore().invokeAction({ action, params })
         }
     }
 }

frontend/src/components/expert/components/messages/components/resource-cards/FlowResourceCard.vue

@@ -47,12 +47,15 @@
 
 <script>
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/solid'
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions } from 'pinia'
+import { mapGetters } from 'vuex'
 
 import TextCopier from '../../../../../TextCopier.vue'
 import FlowViewer from '../../../../../flow-viewer/FlowViewer.vue'
 import StreamableContent from '../resources/StreamableContent.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'StandardResourceCard',
     components: { StreamableContent, TextCopier, FlowViewer, ChevronUpIcon, ChevronDownIcon },
@@ -93,7 +96,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/assistant', ['sendFlowsToImport']),
+        ...mapActions(useProductAssistantStore, ['sendFlowsToImport']),
         importFlows () {
             this.sendFlowsToImport(this.flowsJson)
             // TODO: hide the ff-expert panel after importing. Ideally after a "success" message is received from the assistant

frontend/src/components/expert/components/messages/components/resource-cards/PackageResourceCard.vue

@@ -41,11 +41,15 @@
 </template>
 
 <script>
+
+import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import StreamableContent from '../resources/StreamableContent.vue'
 
+import { useProductAssistantStore } from '@/stores/product-assistant.js'
+
 export default {
     name: 'PackageResourceCard',
     components: { StreamableContent },
@@ -88,6 +92,7 @@ export default {
     },
     computed: {
         ...mapGetters('product/expert', ['canManagePalette']),
+        ...mapState(useProductAssistantStore, ['palette']),
         packageFaviconUrl () {
             const url = this.nodePackage.metadata?.streamable?.source || this.nodePackage.url.streamable
             try {
@@ -105,7 +110,7 @@ export default {
         isPackageInstalled () {
             const pkg = this.nodePackage
 
-            return !!this.$store.state.product.assistant?.palette?.[pkg.id.streamable]
+            return !!this.palette?.[pkg.id.streamable]
         },
         urlWithUTMTracking () {
             const url = this.packageUrl
@@ -131,7 +136,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/assistant', ['installNodePackage', 'manageNodePackage']),
+        ...mapActions(useProductAssistantStore, ['installNodePackage', 'manageNodePackage']),
         handleImageError (event) {
             // Hide broken image icon
             event.target.style.display = 'none'