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

[victorcg88]

Motivation and context

This PR migrates the AI module from using boolean loading states to a more robust RequestStatus type for tracking the loading state of AI suggestions and suggestions search. This change aligns the AI module with the pattern used across other X modules and provides more granular state information.

The previous implementation used separate boolean flags (suggestionsLoading and suggestionsSearchLoading) which only indicated whether a request was in progress. The new RequestStatus type provides four distinct states:

• initial: No request has been made yet
• loading: A request is in progress
• success: The request completed successfully
• error: The request failed

This enhanced state tracking allows for better UI feedback and more precise conditional logic in components.

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that causes existing functionality to not work as expected)
• Change requires a documentation update

How has this been tested?

Tests have been updated to verify the new RequestStatus implementation:

• ✅ Unit tests updated for ai-overview component
• ✅ Tests verify all four status states (initial, loading, success, error)
• ✅ Auto-expand functionality tested with new status logic
• ✅ All existing tests pass with the new implementation

Tests performed according to testing guidelines.

Migration guide

Breaking changes

The AI module's store state and mutations have been updated to use RequestStatus instead of boolean loading states. This is a breaking change for any code that directly accesses these properties.

What changed

Old (boolean)	New (RequestStatus)
suggestionsLoading: boolean	suggestionsStatus: 'success' | 'loading' | 'error' | 'initial'
suggestionsSearchLoading: boolean	suggestionsSearchStatus: 'success' | 'loading' | 'error' | 'initial'

Migration steps

1. Store state access

Before:

import { useState } from '@empathyco/x-components'

const { suggestionsLoading } = useState('ai')

// Check if loading
if (suggestionsLoading.value) {
  // show loading
}

After:

import { useState } from '@empathyco/x-components'

const { suggestionsStatus } = useState('ai')

// Check if loading (equivalent to old suggestionsLoading === true)
const suggestionsLoading = computed(
  () => suggestionsStatus.value !== 'success' && suggestionsStatus.value !== 'error'
)

if (suggestionsStatus.value === 'loading') {
  // show loading
}

// Or use the computed property above
if (suggestionsLoading.value) {
  // show loading
}

2. Store mutations

Before:

commit('setSuggestionsLoading', true)   // for loading
commit('setSuggestionsLoading', false)  // for done
commit('setSuggestionsSearchLoading', true)
commit('setSuggestionsSearchLoading', false)

After:

commit('setSuggestionsStatus', 'loading')      // start loading
commit('setSuggestionsStatus', 'success')      // complete successfully
commit('setSuggestionsStatus', 'error')        // request failed
commit('setSuggestionsSearchStatus', 'loading')
commit('setSuggestionsSearchStatus', 'success')
commit('setSuggestionsSearchStatus', 'error')

3. Component props

If you're using the AI components directly and checking loading states:

Before:

<template>
  <div v-if="suggestionsLoading">
    Loading...
  </div>
  <div v-else>
    Content
  </div>
</template>

<script setup>
import { useState } from '@empathyco/x-components'

const { suggestionsLoading } = useState('ai')
</script>

After:

<template>
  <div v-if="suggestionsStatus === 'loading'">
    Loading...
  </div>
  <div v-else-if="suggestionsStatus === 'error'">
    Failed to load
  </div>
  <div v-else>
    Content
  </div>
</template>

<script setup>
import { useState } from '@empathyco/x-components'

const { suggestionsStatus } = useState('ai')
</script>

4. Compatibility layer (optional)

If you need to maintain backward compatibility during migration, you can add computed properties:

import { useState, computed } from '@empathyco/x-components'

const { suggestionsStatus } = useState('ai')

// Compatibility computed properties
const suggestionsLoading = computed(
  () => suggestionsStatus.value !== 'success' && suggestionsStatus.value !== 'error'
)

// Use suggestionsLoading in old code during migration

Affected components

• AiOverview: Now uses suggestionsStatus instead of suggestionsLoading
• Internal AI store actions (fetchAndSaveAiSuggestions, fetchAndSaveAiSuggestionsSearch)

Unaffected (no migration needed)

• Public API of @empathyco/x-components exports (no component props changed)
• Search API calls
• Configuration options

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review on my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.