Merge pull request #6810 from FlowFuse/expert/fix-website-context-switching-hydration-race-condition

Fix context hydration race condition when ingesting expert context from the website

Author: cstns

frontend/src/composables/TimersHelper.js

@@ -0,0 +1,44 @@
+export default function useTimerHelper () {
+    /**
+     * Asynchronously waits while a condition remains true, checking at regular intervals.
+     *
+     * @param {boolean|Function} condition - A boolean value or a function that returns a boolean.
+     *                                        The waiting continues while this evaluates to true.
+     * @param {Object} options - Configuration options for the waiting behavior.
+     * @param {number} [options.cutoffTries=Infinity] - Maximum number of attempts before throwing an error.
+     *                                                   Must be a non-negative finite number.
+     * @param {number} [options.intervalMs=1000] - Time in milliseconds to wait between condition checks.
+     *                                              Must be a non-negative finite number.
+     * @returns {Promise<void>} Resolves when the condition becomes false.
+     * @throws {Error} If intervalMs or cutoffTries are invalid (negative or non-finite).
+     * @throws {Error} If the maximum number of tries (cutoffTries) is reached before condition becomes false.
+     */
+    async function waitWhile (condition, { cutoffTries = Infinity, intervalMs = 1000 } = {}) {
+        const predicate = (typeof condition === 'function')
+            ? condition
+            : () => Boolean(condition)
+
+        const delayMs = Number(intervalMs)
+        if (!Number.isFinite(delayMs) || delayMs < 0) {
+            throw new Error(`waitWhile: intervalMs must be a non-negative number, got ${intervalMs}`)
+        }
+
+        const maxTries = Number(cutoffTries)
+        if (!Number.isFinite(maxTries) || maxTries < 0) {
+            throw new Error(`waitWhile: cutoffTries must be a non-negative number, got ${cutoffTries}`)
+        }
+
+        let tries = 0
+        while (predicate()) {
+            if (tries >= maxTries) {
+                throw new Error(`waitWhile: cutoffTries (${maxTries}) reached`)
+            }
+            tries++
+            await new Promise(resolve => setTimeout(resolve, delayMs))
+        }
+    }
+
+    return {
+        waitWhile
+    }
+}

frontend/src/store/modules/product/expert/index.js

@@ -3,6 +3,7 @@ import { markRaw } from 'vue'
 
 import expertApi from '../../../../api/expert.js'
 import ExpertDrawer from '../../../../components/drawers/expert/ExpertDrawer.vue'
+import useTimerHelper from '../../../../composables/TimersHelper.js'
 
 import { FF_AGENT, OPERATOR_AGENT } from './agents.js'
 
@@ -243,7 +244,7 @@ const actions = {
         }
     },
 
-    hydrateClient ({
+    async hydrateClient ({
         dispatch,
         state,
         rootGetters
@@ -255,10 +256,18 @@ const actions = {
             return Promise.resolve()
         }
 
+        // TODO: this need to be removed when we have https://github.com/FlowFuse/flowfuse/issues/6520 part of
+        //  https://github.com/FlowFuse/flowfuse/issues/6519 as it's a hacky workaround to the expert drawer opening up
+        //  before we have a team loaded
+        const { waitWhile } = useTimerHelper()
+        await waitWhile(() => !rootGetters['account/team'], { cutoffTries: 60 })
+
         return expertApi
             .chat({
                 history: state[state.agentMode].context,
-                context: {},
+                context: {
+                    teamId: rootGetters['account/team'].id
+                },
                 sessionId: state[state.agentMode].sessionId
             })
             .then((response) => {

frontend/src/store/modules/product/expert/operator-agent/index.js

@@ -1,4 +1,5 @@
 import expertApi from '../../../../../api/expert.js'
+import useTimerHelper from '../../../../../composables/TimersHelper.js'
 
 const initialState = () => ({
     sessionId: null,
@@ -55,11 +56,18 @@ const actions = {
         commit('SET_SELECTED_CAPABILITIES', selectedCapabilities)
     },
     async getCapabilities ({ commit, rootGetters, state }) {
+        // TODO: this need to be removed when we have https://github.com/FlowFuse/flowfuse/issues/6520 part of
+        //  https://github.com/FlowFuse/flowfuse/issues/6519 as it's a hacky workaround to the expert drawer opening up
+        //  before we have a team loaded
+        const { waitWhile } = useTimerHelper()
+        await waitWhile(() => !rootGetters['account/team'], { cutoffTries: 60 })
+
         const payload = {
             context: {
                 teamId: rootGetters['account/team'].id
             }
         }
+
         return expertApi.getCapabilities(payload)
             .then(data => {
                 commit('SET_CAPABILITIES', data.servers || [])