[6828] Pinia Task 11 - product-expert

frontend/src/api/client.js

@@ -1,7 +1,6 @@
 import axios from 'axios'
 
 import Alerts from '../services/alerts.js'
-import store from '../store/index.js'
 
 const client = axios.create({
     headers: {
@@ -20,6 +19,10 @@ client.interceptors.response.use(function (response) {
     }
 
     // This is an error response from our own API (or failure to reach it)
+    // Lazy require to avoid circular dependency:
+    // api/client.js → store/index.js → account/index.js → routes.js → page components → api modules → api/client.js
+    // TODO: remove once the `account` Vuex module is migrated to Pinia — replace with a direct import of the Pinia account store.
+    const store = require('../store/index.js').default
     if (error.code === 'ERR_NETWORK') {
         // Backend failed to respond
         store.dispatch('account/setOffline', true)

frontend/src/components/ExpertButton.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 
+import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -28,12 +28,9 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product/expert', ['openAssistantDrawer']),
+        ...mapActions(useProductExpertStore, ['openAssistantDrawer']),
         onClick () {
-            const openOptions = {
-                openPinned: this.rightDrawer.expertState.pinned
-            }
-            this.openAssistantDrawer(openOptions)
+            this.openAssistantDrawer({ openPinned: this.rightDrawer.expertState.pinned })
         }
     }
 }

frontend/src/components/drawers/RightDrawer.vue

@@ -43,8 +43,8 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapActions as mapVuexActions } from 'vuex'
 
+import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 const DRAWER_MIN_WIDTH = 310
@@ -204,7 +204,7 @@ export default {
         }
     },
     methods: {
-        ...mapVuexActions('product/expert', ['openAssistantDrawer']),
+        ...mapActions(useProductExpertStore, ['openAssistantDrawer']),
         ...mapActions(useUxDrawersStore, ['closeRightDrawer', 'togglePinDrawer']),
         closeDrawer () {
             if (this.rightDrawer.state && this.rightDrawer.closeOnClickOutside) {

frontend/src/components/drawers/expert/ExpertDrawer.vue

@@ -42,12 +42,12 @@
 <script>
 import { LockClosedIcon, LockOpenIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapState } from 'pinia'
-import { mapActions as mapVuexActions, mapState as mapVuexState } from 'vuex'
 
 import ToggleButtonGroup from '../../elements/ToggleButtonGroup.vue'
 
 import ExpertPanel from '../../expert/Expert.vue'
 
+import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -62,11 +62,11 @@ export default {
     inject: ['togglePinWithWidth', 'shouldAllowPinning'],
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
-        ...mapVuexState('product/expert', ['agentMode']),
+        ...mapState(useProductExpertStore, ['agentMode']),
         agentModeButtons () {
             return [
-                { title: 'Support', value: 'ff-agent' },
-                { title: 'Insights', value: 'operator-agent' }
+                { title: 'Support', value: 'support-agent' },
+                { title: 'Insights', value: 'insights-agent' }
             ]
         },
         isPinned () {
@@ -89,7 +89,7 @@ export default {
     },
     methods: {
         ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
-        ...mapVuexActions('product/expert', ['setAgentMode']),
+        ...mapActions(useProductExpertStore, ['setAgentMode']),
         closeDrawer () {
             this.closeRightDrawer()
         },

frontend/src/components/expert/Expert.vue

@@ -24,7 +24,6 @@
 
 <script>
 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'
@@ -33,6 +32,8 @@ import InfoBanner from './components/InfoBanner.vue'
 import UpdateBanner from './components/UpdateBanner.vue'
 
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
+import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
+import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -69,16 +70,11 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('product/expert', [
-            'agentMode'
-        ]),
-        ...mapGetters('product/expert', [
+        ...mapState(useProductExpertStore, [
             'abortController',
+            'agentMode',
             'messages',
-            'isSessionExpired',
-            'isFfAgent',
-            'isOperatorAgent',
-            'hasSelectedCapabilities'
+            'isInsightsAgent'
         ]),
         ...mapState(useUxDrawersStore, {
             isPinned: state => state.rightDrawer.fixed
@@ -92,7 +88,7 @@ export default {
                 return this.agentMode
             },
             set (value) {
-                this.$store.dispatch('product/expert/setAgentMode', value)
+                this.setAgentMode(value)
             }
         },
         isInstanceRunning () {
@@ -104,15 +100,11 @@ export default {
     watch: {
         agentMode: {
             immediate: true,
-            async handler (newMode) {
-                if (this.isOperatorAgent) {
-                    await this.$store.dispatch(
-                        `product/expert/${newMode}/getCapabilities`
-                    )
+            async handler () {
+                if (this.isInsightsAgent) {
+                    await this.getCapabilities()
                 }
-                await this.$store.dispatch(
-                    'product/expert/addWelcomeMessageIfNeeded'
-                )
+                this.addWelcomeMessageIfNeeded()
             }
         },
         'instance.meta.state': {
@@ -135,9 +127,7 @@ export default {
         if (this.isEditorContext) {
             // Delay to ensure drawer is open and visible before typing animation starts
             setTimeout(() => {
-                this.$store.dispatch(
-                    'product/expert/addWelcomeMessageIfNeeded'
-                )
+                this.addWelcomeMessageIfNeeded()
             }, 1000)
         }
     },
@@ -149,10 +139,13 @@ export default {
         this.resetSessionTimer()
     },
     methods: {
-        ...mapVuexActions('product/expert', [
+        ...mapActions(useProductExpertStore, [
+            'setAgentMode',
             'setAbortController',
-            'resetSessionTimer'
+            'resetSessionTimer',
+            'addWelcomeMessageIfNeeded'
         ]),
+        ...mapActions(useProductExpertInsightsAgentStore, ['getCapabilities']),
         ...mapActions(useProductAssistantStore, ['reset']),
         handleStopGeneration () {
             if (this.abortController) {

frontend/src/components/expert/components/CapabilitiesSelector.vue

@@ -58,12 +58,13 @@
 
 <script>
 import { ListboxOption } from '@headlessui/vue'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 
-import { OPERATOR_AGENT } from '../../../store/modules/product/expert/agents.js'
 import FfCheckbox from '../../../ui-components/components/form/Checkbox.vue'
 import FfListbox from '../../../ui-components/components/form/ListBox.vue'
 
+import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
+
 export default {
     name: 'CapabilitiesSelector',
     components: {
@@ -72,10 +73,10 @@ export default {
         FfListbox
     },
     computed: {
-        ...mapState(`product/expert/${OPERATOR_AGENT}`, [
-            'selectedCapabilities'
+        ...mapState(useProductExpertInsightsAgentStore, [
+            'selectedCapabilities',
+            'capabilities'
         ]),
-        ...mapGetters(`product/expert/${OPERATOR_AGENT}`, ['capabilities']),
         hasCapabilities () {
             return this.capabilities && this.capabilities.length > 0
         },
@@ -89,7 +90,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions(`product/expert/${OPERATOR_AGENT}`, [
+        ...mapActions(useProductExpertInsightsAgentStore, [
             'setSelectedCapabilities'
         ]),
         onCheckboxClick (option) {

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

@@ -16,7 +16,7 @@
                 Start over
             </button>
             <div class="right-buttons">
-                <capabilities-selector v-if="isOperatorAgent" />
+                <capabilities-selector v-if="isInsightsAgent" />
             </div>
         </div>
         <div class="input-wrapper" :class="{ 'focused': isTextareaFocused }">
@@ -34,7 +34,7 @@
 
             <div class="actions">
                 <div class="left">
-                    <context-selector v-if="isImmersive && !isOperatorAgent" />
+                    <context-selector v-if="isImmersive && !isInsightsAgent" />
                 </div>
 
                 <div class="right">
@@ -63,7 +63,6 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapGetters, mapActions as mapVuexActions } from 'vuex'
 
 import { useResizingHelper } from '../../../composables/ResizingHelper.js'
 
@@ -73,6 +72,7 @@ import CapabilitiesSelector from './CapabilitiesSelector.vue'
 import ContextSelector from './context-selection/index.vue'
 
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
+import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -116,31 +116,31 @@ export default {
             'immersiveInstance',
             'immersiveDevice'
         ]),
-        ...mapGetters('product/expert', [
+        ...mapState(useUxDrawersStore, ['rightDrawer']),
+        ...mapState(useProductExpertStore, [
             'messages',
             'isSessionExpired',
-            'isOperatorAgent',
+            'isInsightsAgent',
             'hasSelectedCapabilities',
             'hasMessages',
             'isWaitingForResponse'
         ]),
         isInputDisabled () {
             if (this.isSessionExpired) return true
             if (this.isWaitingForResponse) return true
-            return this.isOperatorAgent && !this.hasSelectedCapabilities
+            return this.isInsightsAgent && !this.hasSelectedCapabilities
         },
         isDrawerPinned () {
-            const uxDrawerStore = useUxDrawersStore()
-            return uxDrawerStore.rightDrawer.fixed
+            return this.rightDrawer.fixed
         },
         canSend () {
             return this.inputText.trim().length > 0 && !this.isInputDisabled
         },
         placeholderText () {
-            if (this.isOperatorAgent && !this.hasSelectedCapabilities) {
+            if (this.isInsightsAgent && !this.hasSelectedCapabilities) {
                 return 'Select a resource to get started'
             }
-            return this.isOperatorAgent
+            return this.isInsightsAgent
                 ? 'Tell us what you want to know about'
                 : 'Tell us what you need help with'
         },
@@ -158,7 +158,7 @@ export default {
     },
     methods: {
         ...mapActions(useProductAssistantStore, ['resetContextSelection']),
-        ...mapVuexActions('product/expert', ['startOver', 'handleQuery', 'handleMessageResponse']),
+        ...mapActions(useProductExpertStore, ['startOver', 'handleQuery', 'handleMessageResponse']),
         async handleSend () {
             if (!this.canSend) return
 
@@ -190,7 +190,7 @@ export default {
 
             this.inputText = ''
             // When in support mode, reset/restore assistant context selection (opt-out by default)
-            if (!this.isOperatorAgent) {
+            if (!this.isInsightsAgent) {
                 this.resetContextSelection()
             }
 

frontend/src/components/expert/components/ExpertLoadingIndicator.vue

@@ -12,9 +12,11 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
-import { FF_AGENT, OPERATOR_AGENT } from '../../../store/modules/product/expert/agents.js'
+import { INSIGHTS_AGENT, SUPPORT_AGENT } from '@/stores/product-expert-agents.js'
+
+import { useProductExpertStore } from '@/stores/product-expert.js'
 
 export default {
     name: 'ExpertLoadingIndicator',
@@ -23,14 +25,14 @@ export default {
             showMessage: false,
             currentMessageIndex: 0,
             messageVariants: {
-                [FF_AGENT]: [
+                [SUPPORT_AGENT]: [
                     'Ingesting the docs...',
                     'Reading the blog...',
                     'Searching through FlowFuse knowledge base',
                     'Analyzing your question...',
                     'Finding the best answer...'
                 ],
-                [OPERATOR_AGENT]: [
+                [INSIGHTS_AGENT]: [
                     'Connecting to MCP resources...',
                     'Querying your Node-RED instances...',
                     'Instructing MCP tooling...',
@@ -51,7 +53,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('product/expert', ['loadingVariant']),
+        ...mapState(useProductExpertStore, ['loadingVariant']),
         messages () {
             return this.messageVariants[this.loadingVariant]
         },

frontend/src/components/expert/components/ExpertMessages.vue

@@ -12,15 +12,18 @@
 </template>
 
 <script>
+
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
 
 import ExpertLoadingIndicator from './ExpertLoadingIndicator.vue'
 
 import AiMessage from './messages/AiMessage.vue'
 import HumanMessage from './messages/HumanMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
 
+import { useProductExpertStore } from '@/stores/product-expert.js'
+
 export default {
     name: 'ExpertMessages',
     components: { ExpertLoadingIndicator },
@@ -32,7 +35,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('product/expert', ['messages', 'isWaitingForResponse']),
+        ...mapState(useProductExpertStore, ['messages', 'isWaitingForResponse']),
         messageTypes () {
             return {
                 ai: markRaw(AiMessage),