refactor(ai)!: replace boolean loading states with RequestStatus type

packages/x-components/src/x-modules/ai/components/__tests__/ai-overview.spec.ts

@@ -48,7 +48,7 @@ const useStateStub = {
   ),
   queries: ref(['suggestion 1', 'suggestion 2', 'suggestion 3'].map(query => ({ query }))),
   params: ref({ param1: 'value1', param2: 'value2' }),
-  suggestionsLoading: ref(false),
+  suggestionsStatus: ref('success'),
   tagging: ref<AiSuggestionTagging>({
     toolingDisplayClick: {
       url: 'toolingDisplayClick',
@@ -307,7 +307,7 @@ describe('ai-overview component', () => {
   it('should render with loading state correctly', () => {
     vi.mocked(useState).mockImplementation(() => ({
       ...useStateStub,
-      suggestionsLoading: ref(true),
+      suggestionsStatus: ref('loading'),
     }))
 
     const sut = render()
@@ -504,10 +504,10 @@ describe('ai-overview component', () => {
   })
 
   it('auto-expands when autoExpandInSearchNoResults is true and suggestions finish loading with no results', async () => {
-    const suggestionsLoadingRef = ref(true)
+    const suggestionsStatusRef = ref('loading')
     vi.mocked(useState).mockImplementation(() => ({
       ...useStateStub,
-      suggestionsLoading: suggestionsLoadingRef,
+      suggestionsStatus: suggestionsStatusRef,
     }))
 
     const sut = render()
@@ -519,7 +519,7 @@ describe('ai-overview component', () => {
 
     // Set global noResults and finish loading to trigger the watch
     xInstance.noResults = true
-    suggestionsLoadingRef.value = false
+    suggestionsStatusRef.value = 'success'
     await nextTick()
 
     // Should be expanded automatically
@@ -536,17 +536,17 @@ describe('ai-overview component', () => {
   })
 
   it('does not auto-expand when autoExpandInSearchNoResults is false even with no results', async () => {
-    const suggestionsLoadingRef = ref(true)
+    const suggestionsStatusRef = ref('loading')
     vi.mocked(useState).mockImplementation(() => ({
       ...useStateStub,
-      suggestionsLoading: suggestionsLoadingRef,
+      suggestionsStatus: suggestionsStatusRef,
     }))
 
     const sut = render({ props: { ...propsStub, autoExpandInSearchNoResults: false } })
 
     // Make conditions true except the prop
     xInstance.noResults = true
-    suggestionsLoadingRef.value = false
+    suggestionsStatusRef.value = 'success'
     await nextTick()
 
     // Should remain collapsed

packages/x-components/src/x-modules/ai/components/ai-overview.vue

@@ -269,7 +269,7 @@ export default defineComponent({
       suggestionText,
       responseText,
       suggestionsSearch,
-      suggestionsLoading,
+      suggestionsStatus,
       tagging,
       isNoResults,
       queries,
@@ -282,6 +282,10 @@ export default defineComponent({
     const shouldAnimateSuggestion = ref(true)
     const parsedResponseText = computed(() => marked.parse(responseText.value))
 
+    const suggestionsLoading = computed(
+      () => suggestionsStatus.value !== 'success' && suggestionsStatus.value !== 'error',
+    )
+
     const buttonText = computed(() => (expanded.value ? props.collapseText : props.expandText))
 
     function emitAndSetExpand(isExpanded: boolean) {
@@ -299,7 +303,7 @@ export default defineComponent({
 
     /* Expand AIOverview programmatically when the `autoExpandInSearchNoResults` prop is active,
     the request for suggestions has ended; there are queries in AI and no-results in search. */
-    watch([suggestionsLoading, () => $x.noResults], () => {
+    watch([suggestionsStatus, () => $x.noResults], () => {
       if (
         props.autoExpandInSearchNoResults &&
         !suggestionsLoading.value &&

packages/x-components/src/x-modules/ai/store/actions/fetch-and-save-ai-suggestions-search.action.ts

@@ -15,7 +15,7 @@ export const fetchAndSaveAiSuggestionsSearch: AiXStoreModule['actions']['fetchAn
     if (!request) {
       return
     }
-    commit('setSuggestionsSearchLoading', true)
+    commit('setSuggestionsSearchStatus', 'loading')
 
     return XPlugin.adapter
       .aiSuggestionsSearch(request)
@@ -28,6 +28,6 @@ export const fetchAndSaveAiSuggestionsSearch: AiXStoreModule['actions']['fetchAn
         console.error(error)
       })
       .finally(() => {
-        commit('setSuggestionsSearchLoading', false)
+        commit('setSuggestionsSearchStatus', 'success')
       })
   }

packages/x-components/src/x-modules/ai/store/actions/fetch-and-save-ai-suggestions.action.ts

@@ -38,7 +38,7 @@ export const fetchAndSaveAiSuggestions: AiXStoreModule['actions']['fetchAndSaveA
     if (!request) {
       return
     }
-    commit('setSuggestionsLoading', true)
+    commit('setSuggestionsStatus', 'loading')
 
     return XPlugin.adapter.aiSuggestions(request).then(({ body, status }) => {
       if (status !== 200) {
@@ -81,7 +81,7 @@ function readAnswer(
     .read()
     .then(({ value, done }) => {
       if (done) {
-        commit('setSuggestionsLoading', false)
+        commit('setSuggestionsStatus', 'success')
         return
       }
 
@@ -116,7 +116,7 @@ function readAnswer(
       readAnswer(reader, commit)
     })
     .catch((error: { code: number }) => {
-      commit('setSuggestionsLoading', false)
+      commit('setSuggestionsStatus', 'error')
       // AbortError code === 20
       if (error.code !== 20) {
         console.error(error)

packages/x-components/src/x-modules/ai/store/module.ts

@@ -1,5 +1,6 @@
 import type { AiSuggestionQuery, AiSuggestionSearch } from '@empathyco/x-types'
-import type { AiXStoreModule } from './types'
+import type { RequestStatus } from '../../../store/utils/status-store.utils'
+import type { AiState, AiXStoreModule } from './types'
 import { isFacetFilter } from '@empathyco/x-types'
 import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'
 import { setQuery } from '../../../store/utils/query.utils'
@@ -56,11 +57,11 @@ export const aiXStoreModule: AiXStoreModule = {
     setSuggestionsSearch: (state, suggestionsSearch: AiSuggestionSearch[]) => {
       state.suggestionsSearch = suggestionsSearch
     },
-    setSuggestionsLoading: (state, value) => {
-      state.suggestionsLoading = value
+    setSuggestionsStatus: (state, status: RequestStatus) => {
+      state.suggestionsStatus = status
     },
-    setSuggestionsSearchLoading: (state, value) => {
-      state.suggestionsSearchLoading = value
+    setSuggestionsSearchStatus: (state, status: RequestStatus) => {
+      state.suggestionsSearchStatus = status
     },
     setQuery,
     setParams(state, params) {
@@ -112,8 +113,8 @@ function resettableAiState() {
     queries: [],
     tagging: undefined,
     suggestionsSearch: [],
-    suggestionsLoading: false,
-    suggestionsSearchLoading: false,
+    suggestionsStatus: 'initial' as RequestStatus,
+    suggestionsSearchStatus: 'initial' as RequestStatus,
     isNoResults: true,
   }
 }

packages/x-components/src/x-modules/ai/store/types.ts

@@ -15,6 +15,7 @@ import type {
   XActionContext,
   XStoreModule,
 } from '../../../store'
+import type { RequestStatus } from '../../../store/utils/status-store.utils'
 import type { QueryOrigin, QueryOriginInit, UrlParams } from '../../../types'
 import type { AiConfig } from '../config.types'
 
@@ -29,10 +30,10 @@ export interface AiState extends QueryState {
   suggestionText: string
   queries: AiSuggestionQuery[]
   tagging: AiSuggestionTagging | undefined
-  /** Loading state for the suggestions response */
-  suggestionsLoading: boolean
-  /** Loading state for the suggestions search response */
-  suggestionsSearchLoading: boolean
+  /** Status for the suggestions response */
+  suggestionsStatus: RequestStatus
+  /** Status for the suggestions search response */
+  suggestionsSearchStatus: RequestStatus
   /** The results per query retrieved by the suggestion search endpoint */
   suggestionsSearch: AiSuggestionSearch[]
   /* The config of the `AI` module. */
@@ -110,18 +111,18 @@ export interface AiMutations extends ConfigMutations<AiState>, QueryMutations {
   setTagging: (tagging: AiSuggestionTagging) => void
 
   /**
-   * Sets the loading for the suggestions response.
+   * Sets the status for the suggestions response.
    *
-   * @param tagging - The new tagging.
+   * @param status - The new status.
    */
-  setSuggestionsLoading: (value: boolean) => void
+  setSuggestionsStatus: (status: RequestStatus) => void
 
   /**
-   * Sets the loading fot the suggestions search response.
+   * Sets the status for the suggestions search response.
    *
-   * @param tagging - The new tagging.
+   * @param status - The new status.
    */
-  setSuggestionsSearchLoading: (value: boolean) => void
+  setSuggestionsSearchStatus: (status: RequestStatus) => void
 
   /**
    * Sets the suggestions search from the suggestions search response.