Combine aiProviderStore and chat.store

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AiProviderSelector.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { useAiProviderStore } from './aiProviderStore'
+import { useChatActions, useAiProvider, type AiProvider } from './chat.store'
 import { EuiRadioGroup } from '@elastic/eui'
 import type { EuiRadioGroupOption } from '@elastic/eui'
 import { css } from '@emotion/react'
@@ -22,16 +22,15 @@ const options: EuiRadioGroupOption[] = [
 ]
 
 export const AiProviderSelector = () => {
-    const { provider, setProvider } = useAiProviderStore()
+    const provider = useAiProvider()
+    const { setAiProvider } = useChatActions()
 
     return (
         <div css={containerStyles}>
             <EuiRadioGroup
                 options={options}
                 idSelected={provider}
-                onChange={(id) =>
-                    setProvider(id as 'AgentBuilder' | 'LlmGateway')
-                }
+                onChange={(id) => setAiProvider(id as AiProvider)}
                 name="aiProvider"
                 legend={{
                     children: 'AI Provider',

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/aiProviderResolver.ts

@@ -1,6 +1,8 @@
 import { v4 as uuidv4 } from 'uuid'
 import { create } from 'zustand/react'
 
+export type AiProvider = 'AgentBuilder' | 'LlmGateway'
+
 export interface ChatMessage {
     id: string
     type: 'user' | 'ai'
@@ -17,6 +19,7 @@ const sentAiMessageIds = new Set<string>()
 interface ChatState {
     chatMessages: ChatMessage[]
     conversationId: string | null
+    aiProvider: AiProvider
     actions: {
         submitQuestion: (question: string) => void
         updateAiMessage: (
@@ -25,6 +28,7 @@ interface ChatState {
             status: ChatMessage['status']
         ) => void
         setConversationId: (conversationId: string) => void
+        setAiProvider: (provider: AiProvider) => void
         clearChat: () => void
         hasMessageBeenSent: (id: string) => boolean
         markMessageAsSent: (id: string) => void
@@ -34,6 +38,7 @@ interface ChatState {
 export const chatStore = create<ChatState>((set) => ({
     chatMessages: [],
     conversationId: null, // Start with null - will be set by backend on first request
+    aiProvider: 'LlmGateway', // Default to LLM Gateway
     actions: {
         submitQuestion: (question: string) => {
             set((state) => {
@@ -81,6 +86,10 @@ export const chatStore = create<ChatState>((set) => ({
             set({ conversationId })
         },
 
+        setAiProvider: (provider: AiProvider) => {
+            set({ aiProvider: provider })
+        },
+
         clearChat: () => {
             sentAiMessageIds.clear()
             set({ chatMessages: [], conversationId: null })
@@ -97,4 +106,5 @@ export const chatStore = create<ChatState>((set) => ({
 export const useChatMessages = () => chatStore((state) => state.chatMessages)
 export const useConversationId = () =>
     chatStore((state) => state.conversationId)
+export const useAiProvider = () => chatStore((state) => state.aiProvider)
 export const useChatActions = () => chatStore((state) => state.actions)

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/aiProviderStore.ts

@@ -1,5 +1,5 @@
 import { AskAiEvent, AskAiEventSchema } from './AskAiEvent'
-import { useAiProvider } from './aiProviderStore'
+import { useAiProvider } from './chat.store'
 import { useFetchEventSource } from './useFetchEventSource'
 import { useMessageThrottling } from './useMessageThrottling'
 import { EventSourceMessage } from '@microsoft/fetch-event-source'