Reactive session (#728)

* Improve rate limiting to match multiple chat endpoints

- Use string suffix matching for chat endpoints instead of exact path matching
- Add support for /chatbot endpoint in rate limiting
- Reorganize imports for better readability

* Fix session handling and add session change detection

- Convert sessionUuid to ref and add watcher for session changes
- Stop active streams when switching sessions
- Add session validation in composables to prevent errors with empty sessions
- Improve error handling for session synchronization

* Add auth initialization wait with timeout in axios interceptor

- Implement `waitForInitialization` method in auth store using Vue watcher
- Replace busy-wait loop with promise-based approach in axios interceptor
- Add timeout handling (default 10s) to prevent hanging requests
- Maintain existing auth state management while improving performance

Author: swuecho

web/src/store/modules/auth/index.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { watch } from 'vue'
 import { getExpiresIn, getToken, removeExpiresIn, removeToken, setExpiresIn, setToken } from './helper'
 
 let activeRefreshPromise: Promise<string | void> | null = null
@@ -125,5 +126,30 @@ export const useAuthStore = defineStore('auth-store', {
       this.expiresIn = null
       removeExpiresIn()
     },
+    async waitForInitialization(timeoutMs = 10000) {
+      if (!this.isInitializing) {
+        return
+      }
+
+      await new Promise<void>((resolve) => {
+        let stopWatcher: (() => void) | null = null
+        const timeoutId = setTimeout(() => {
+          if (stopWatcher) stopWatcher()
+          resolve()
+        }, timeoutMs)
+
+        stopWatcher = watch(
+          () => this.isInitializing,
+          (isInit) => {
+            if (!isInit) {
+              clearTimeout(timeoutId)
+              if (stopWatcher) stopWatcher()
+              resolve()
+            }
+          },
+          { immediate: false }
+        )
+      })
+    },
   },
 })

web/src/utils/request/axios.ts

@@ -20,11 +20,13 @@ service.interceptors.request.use(
     // Wait for auth initialization to complete before making API calls
     if (authStore.isInitializing) {
       logger.debug('Waiting for auth initialization to complete', 'Axios', { url: config.url })
-      // Wait for initialization to complete
-      while (authStore.isInitializing) {
-        await new Promise(resolve => setTimeout(resolve, 50))
+      await authStore.waitForInitialization()
+
+      if (authStore.isInitializing) {
+        logger.warn('Auth initialization still in progress after timeout', 'Axios', { url: config.url })
+      } else {
+        logger.debug('Auth initialization completed', 'Axios', { url: config.url })
       }
-      logger.debug('Auth initialization completed', 'Axios', { url: config.url })
     }
 
     // Check if token is expired before making request

web/src/views/chat/components/Conversation.vue

@@ -1,5 +1,5 @@
 <script lang='ts' setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRef, watch } from 'vue'
 import { NAutoComplete, NButton, NInput, NModal, NSpin } from 'naive-ui'
 import  { v7 as uuidv7 } from 'uuid'
 import { useScroll } from '@/views/chat/hooks/useScroll'
@@ -36,13 +36,15 @@ const messageStore = useMessageStore()
 const sessionStore = useSessionStore()
 const promptStore = usePromptStore()
 
-const { sessionUuid } = defineProps({
+const props = defineProps({
   sessionUuid: {
     type: String,
     required: false,
     default: ''
   },
-});
+})
+
+const sessionUuid = toRef(props, 'sessionUuid')
 
 const { isMobile } = useBasicLayout()
 const { scrollRef, scrollToBottom, smoothScrollToBottomIfAtBottom } = useScroll()
@@ -53,13 +55,25 @@ const regenerate = useRegenerate(sessionUuid)
 const searchAndPrompts = useSearchAndPrompts()
 const chatActions = useChatActions(sessionUuid)
 
-// Sync chat messages only if we have a valid sessionUuid
-if (sessionUuid) {
-  messageStore.syncChatMessages(sessionUuid)
-}
+watch(sessionUuid, async (newSession, oldSession) => {
+  if (!newSession) {
+    return
+  }
+
+  if (oldSession && oldSession !== newSession) {
+    conversationFlow.stopStream()
+    regenerate.stopRegenerate()
+  }
+
+  try {
+    await messageStore.syncChatMessages(newSession)
+  } catch (error) {
+    console.error('Failed to sync messages for session change:', error)
+  }
+}, { immediate: true })
 
-const dataSources = computed(() => messageStore.getChatSessionDataByUuid(sessionUuid))
-const chatSession = computed(() => sessionStore.getChatSessionByUuid(sessionUuid))
+const dataSources = computed(() => messageStore.getChatSessionDataByUuid(sessionUuid.value))
+const chatSession = computed(() => sessionStore.getChatSessionByUuid(sessionUuid.value))
 
 // Destructure from composables
 const { prompt, searchOptions, renderOption, handleSelectAutoComplete, handleUsePrompt } = searchAndPrompts
@@ -353,4 +367,4 @@ function handleUseQuestion(question: string) {
     width: 4px;
   }
 }
-</style>
+</style>

web/src/views/chat/composables/useChatActions.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { useDialog, useMessage } from 'naive-ui'
 import { v4 as uuidv4 } from 'uuid'
 import { createChatBot, createChatSnapshot, getChatSessionDefault } from '@/api'
@@ -9,7 +9,7 @@ import { nowISO } from '@/utils/date'
 import { extractArtifacts } from '@/utils/artifacts'
 import { t } from '@/locales'
 
-export function useChatActions(sessionUuid: string) {
+export function useChatActions(sessionUuidRef: Ref<string>) {
   const dialog = useDialog()
   const nui_msg = useMessage()
   const sessionStore = useSessionStore()
@@ -40,6 +40,12 @@ export function useChatActions(sessionUuid: string) {
   }
 
   async function handleSnapshot() {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      nui_msg.error('No active session selected.')
+      return
+    }
+
     snapshotLoading.value = true
     try {
       const snapshot = await createChatSnapshot(sessionUuid)
@@ -54,6 +60,12 @@ export function useChatActions(sessionUuid: string) {
   }
 
   async function handleCreateBot() {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      nui_msg.error('No active session selected.')
+      return
+    }
+
     botLoading.value = true
     try {
       const snapshot = await createChatBot(sessionUuid)
@@ -71,6 +83,12 @@ export function useChatActions(sessionUuid: string) {
     if (loading.value)
       return
 
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      nui_msg.error('No active session selected.')
+      return
+    }
+
     console.log('🔄 handleClear called with sessionUuid:', sessionUuid)
 
     dialog.warning({
@@ -94,6 +112,12 @@ export function useChatActions(sessionUuid: string) {
   }
 
   const handleCodeExampleAdded = async (codeInfo: any, streamResponse: any) => {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      nui_msg.error('No active session selected.')
+      return
+    }
+
     const exampleMessage = `📁 **Files uploaded successfully!**
 
 **Python example:**
@@ -144,4 +168,4 @@ Your files are now available in the Virtual File System! 🚀`
     handleVFSFileUploaded,
     handleCodeExampleAdded
   }
-}
+}

web/src/views/chat/composables/useConversationFlow.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { v7 as uuidv7 } from 'uuid'
 import { nowISO } from '@/utils/date'
 import { useChat } from '@/views/chat/hooks/useChat'
@@ -18,7 +18,7 @@ interface ChatMessage {
 }
 
 export function useConversationFlow(
-  sessionUuid: string,
+  sessionUuidRef: Ref<string>,
   scrollToBottom: () => Promise<void>,
   smoothScrollToBottomIfAtBottom: () => Promise<void>
 ) {
@@ -36,6 +36,11 @@ export function useConversationFlow(
       return false
     }
 
+    if (!sessionUuidRef.value) {
+      showErrorNotification('No active session selected')
+      return false
+    }
+
     // Validate message content
     const messageValidation = validateChatMessage(message)
     if (!messageValidation.isValid) {
@@ -47,6 +52,11 @@ export function useConversationFlow(
   }
 
   async function addUserMessage(chatUuid: string, message: string): Promise<void> {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return
+    }
+
     const chatMessage: ChatMessage = {
       uuid: chatUuid,
       dateTime: nowISO(),
@@ -60,6 +70,11 @@ export function useConversationFlow(
   }
 
   async function initializeChatResponse(dataSources: any[]): Promise<number> {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return dataSources.length - 1
+    }
+
     addChat(sessionUuid, {
       uuid: '',
       dateTime: nowISO(),
@@ -76,6 +91,11 @@ export function useConversationFlow(
     handleApiError(error, 'conversation-stream')
 
     const lastMessage = dataSources[responseIndex]
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return
+    }
+
     if (lastMessage) {
       const errorMessage: ChatMessage = {
         uuid: lastMessage.uuid || uuidv7(),
@@ -103,6 +123,13 @@ export function useConversationFlow(
     dataSources: any[],
     chatUuid: string
   ): Promise<void> {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      loading.value = false
+      abortController.value = null
+      return
+    }
+
     loading.value = true
     abortController.value = new AbortController()
     const responseIndex = await initializeChatResponse(dataSources)
@@ -148,4 +175,4 @@ export function useConversationFlow(
     startStream,
     stopStream
   }
-}
+}

web/src/views/chat/composables/useRegenerate.ts

@@ -1,11 +1,11 @@
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { deleteChatMessage } from '@/api'
 import { nowISO } from '@/utils/date'
 import { useChat } from '@/views/chat/hooks/useChat'
 import { useStreamHandling } from './useStreamHandling'
 import { t } from '@/locales'
 
-export function useRegenerate(sessionUuid: string) {
+export function useRegenerate(sessionUuidRef: Ref<string>) {
   const loading = ref<boolean>(false)
   const abortController = ref<AbortController | null>(null)
   const { addChat, updateChat, updateChatPartial } = useChat()
@@ -21,6 +21,11 @@ export function useRegenerate(sessionUuid: string) {
     chat: any,
     dataSources: any[]
   ): Promise<{ updateIndex: number; isRegenerate: boolean }> {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return { updateIndex: index, isRegenerate: true }
+    }
+
     loading.value = true
 
     let updateIndex = index
@@ -49,6 +54,11 @@ export function useRegenerate(sessionUuid: string) {
     index: number,
     dataSources: any[]
   ): Promise<{ updateIndex: number; isRegenerate: boolean }> {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return { updateIndex: index, isRegenerate: false }
+    }
+
     const chatNext = dataSources[index + 1]
     let updateIndex = index + 1
     const isRegenerate = false
@@ -80,6 +90,11 @@ export function useRegenerate(sessionUuid: string) {
   }
 
   function handleRegenerateError(error: any, chatUuid: string, index: number): void {
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return
+    }
+
     console.error('Regenerate error:', error)
 
     if (error.message === 'canceled') {
@@ -112,6 +127,11 @@ export function useRegenerate(sessionUuid: string) {
   async function onRegenerate(index: number, dataSources: any[]): Promise<void> {
     if (!validateRegenerateInput()) return
 
+    const sessionUuid = sessionUuidRef.value
+    if (!sessionUuid) {
+      return
+    }
+
     const chat = dataSources[index]
     abortController.value = new AbortController()
     const { updateIndex, isRegenerate } = await prepareRegenerateContext(index, chat, dataSources)
@@ -148,4 +168,4 @@ export function useRegenerate(sessionUuid: string) {
     onRegenerate,
     stopRegenerate
   }
-}
+}