refactor: consolidate refs and enhance focus handling in AssistantConsole and useAssistantConsole

- Moved messageListRef and chatInputRef to useAssistantConsole for better state management.
- Improved focus handling for chat input on conversation selection and component mount.
- Cleaned up code formatting for better readability and consistency.
- Updated AI model options in getLLMProviderItems for expanded functionality.

Author: Marvin Zhang

src/components/core/ai/AssistantConsole.vue

@@ -19,6 +19,8 @@ const { t } = useI18n();
 const router = useRouter();
 
 const {
+  messageListRef,
+  chatInputRef,
   currentConversationId,
   conversations,
   chatHistory,
@@ -44,10 +46,6 @@ const {
   extractErrorMessage,
 } = useAssistantConsole();
 
-// Add ref for message list component
-const messageListRef = ref<{ scrollToBottom: () => Promise<void> } | null>(null);
-const chatInputRef = ref<InstanceType<typeof ClChatInput> | null>(null);
-
 // Message handling
 const sendMessage = async (message: string) => {
   if (!message.trim()) return;

src/components/core/ai/useAssistantConsole.ts

@@ -1,15 +1,22 @@
-import { computed, ref, watch, reactive } from 'vue';
+import { computed, ref, watch, reactive, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useRequest from '@/services/request';
 import { getRequestBaseUrl } from '@/utils';
 import { debounce } from 'lodash';
 import { ElMessage } from 'element-plus';
 import { AxiosError } from 'axios';
+import { ClChatInput } from '@/components';
 
 const useAssistantConsole = () => {
   const { t } = useI18n();
   const { get } = useRequest();
 
+  // Refs
+  const messageListRef = ref<{ scrollToBottom: () => Promise<void> } | null>(
+    null
+  );
+  const chatInputRef = ref<InstanceType<typeof ClChatInput> | null>(null);
+
   // State management
   const currentConversation = ref<ChatConversation | null>(null);
   const currentConversationId = ref<string>('');
@@ -27,7 +34,9 @@ const useAssistantConsole = () => {
   // Computed properties
   const currentConversationTitle = computed(() => {
     if (!currentConversationId.value) return t('components.ai.chatbot.newChat');
-    return currentConversation.value?.title || t('components.ai.chatbot.newChat');
+    return (
+      currentConversation.value?.title || t('components.ai.chatbot.newChat')
+    );
   });
 
   const chatbotConfig = ref<ChatbotConfig>({
@@ -60,7 +69,9 @@ const useAssistantConsole = () => {
 
     isLoadingMessages.value = true;
     try {
-      const res = await get(`/ai/chat/conversations/${conversationId}/messages`);
+      const res = await get(
+        `/ai/chat/conversations/${conversationId}/messages`
+      );
       const messages = (res.data || []).map((msg: any) => {
         const message: ChatMessage = {
           ...msg,
@@ -171,10 +182,13 @@ const useAssistantConsole = () => {
 
   // Message stream handling
   const createChatRequest = (message: string): ChatRequest => {
-    const { provider, model, systemPrompt, temperature, maxTokens } = chatbotConfig.value;
+    const { provider, model, systemPrompt, temperature, maxTokens } =
+      chatbotConfig.value;
 
     if (!provider || !model) {
-      throw new Error('Please select a provider and model before sending a message');
+      throw new Error(
+        'Please select a provider and model before sending a message'
+      );
     }
 
     return {
@@ -220,7 +234,9 @@ const useAssistantConsole = () => {
     }
 
     const contentKey = chunk.key || '';
-    const contentIndex = currentMessage.contents.findIndex(c => c.key === contentKey);
+    const contentIndex = currentMessage.contents.findIndex(
+      c => c.key === contentKey
+    );
 
     if (contentIndex >= 0) {
       // Update existing content
@@ -316,7 +332,7 @@ const useAssistantConsole = () => {
       const chatRequest = createChatRequest(message);
       const baseUrl = getRequestBaseUrl();
       const url = `${baseUrl}/ai/chat/stream`;
-      
+
       const response = await fetch(url, {
         method: 'POST',
         headers: getStreamHeaders(),
@@ -329,7 +345,11 @@ const useAssistantConsole = () => {
         throw new Error(extractErrorMessage(text));
       }
 
-      await processStreamData(response.body!.getReader(), responseIndex, onMessageUpdate);
+      await processStreamData(
+        response.body!.getReader(),
+        responseIndex,
+        onMessageUpdate
+      );
     } catch (error) {
       if (error instanceof Error) {
         throw error;
@@ -342,6 +362,7 @@ const useAssistantConsole = () => {
   const selectConversation = async (conversationId: string) => {
     if (currentConversationId.value === conversationId) return;
 
+    chatInputRef.value?.focus();
     currentConversationId.value = conversationId;
     streamError.value = '';
     await loadConversationMessages(conversationId);
@@ -352,6 +373,7 @@ const useAssistantConsole = () => {
     localStorage.removeItem('currentConversationId');
     streamError.value = '';
     chatHistory.splice(0, chatHistory.length);
+    chatInputRef.value?.focus();
   };
 
   // Watch conversation ID changes
@@ -370,7 +392,16 @@ const useAssistantConsole = () => {
     }
   });
 
+  onMounted(() => {
+    setTimeout(() => {
+      chatInputRef.value?.focus();
+    }, 200);
+  });
+
   return {
+    // Refs
+    messageListRef,
+    chatInputRef,
     // State
     currentConversation,
     currentConversationId,
@@ -402,4 +433,4 @@ const useAssistantConsole = () => {
   };
 };
 
-export default useAssistantConsole;
+export default useAssistantConsole;

src/utils/ai.ts

@@ -20,10 +20,11 @@ export const getLLMProviderItems = (): LLMProviderItem[] => {
       defaultModels: [
         'gpt-4o',
         'gpt-4o-mini',
-        'o1-mini',
         'o1',
+        'o1-mini',
+        'o1-pro',
         'o3-mini',
-        'o3',
+        'gpt-4.5-preview',
       ],
       defaultApiVersions: ['2025-02-01-preview'],
     },
@@ -32,36 +33,67 @@ export const getLLMProviderItems = (): LLMProviderItem[] => {
       name: 'Anthropic',
       icon: ['svg', 'anthropic'],
       defaultModels: [
-        'claude-3.7-sonnet',
-        'claude-3.7-sonnet-thinking',
-        'claude-3.5-sonnet',
+        'claude-3-7-sonnet-latest',
+        'claude-3-5-haiku-latest',
+        'claude-3-5-sonnet-latest',
+        'claude-3-opus-latest',
       ],
     },
     {
       key: 'gemini',
       name: 'Gemini',
       icon: ['svg', 'gemini'],
+      defaultModels: [
+        'gemini-2.5-pro-preview-03-25',
+        'gemini-2.0-flash',
+        'gemini-2.0-flash-lite',
+        'gemini-1.5-flash',
+        'gemini-1.5-flash-8b',
+        'gemini-1.5-pro',
+      ],
     },
     {
       key: 'grok',
       name: 'Grok',
       icon: ['svg', 'grok'],
+      defaultModels: [
+        'grok-3',
+        'grok-3-fast',
+        'grok-3-mini',
+        'grok-3-mini-fast',
+      ],
     },
     {
       key: 'qwen',
       name: 'Qwen',
       icon: ['svg', 'qwen'],
-      defaultModels: ['qwen-max', 'qwen-plus', 'qwen-turbo'],
+      defaultModels: [
+        'qwen-max',
+        'qwen-plus',
+        'qwen-turbo',
+        'qwq-plus',
+        'qwq-32b',
+        'qwen-omni-turbo',
+      ],
     },
     {
       key: 'mistral',
       name: 'Mistral',
       icon: ['svg', 'mistral'],
+      defaultModels: [
+        'codestral-latest',
+        'mistral-large-latest',
+        'pixtral-large-latest',
+        'mistral-saba-latest',
+        'ministral-3b-latest',
+        'ministral-8b-latest',
+      ],
     },
     {
       key: 'deepseek',
       name: 'DeepSeek',
       icon: ['svg', 'deepseek'],
+      defaultModels: ['deepseek-chat', 'deepseek-reasoner'],
     },
     {
       key: 'openai-compatible',

src/views/system/detail/tabs/SystemDetailTabAi.vue

@@ -336,7 +336,7 @@ defineOptions({ name: 'ClSystemDetailTabAi' });
               <el-input
                 v-model="customModelInput"
                 :placeholder="$t('views.system.ai.addCustomModel')"
-                @keyup.enter="addCustomModel"
+                @keyup.enter.prevent="addCustomModel"
               >
                 <template #append>
                   <cl-fa-icon-button
@@ -436,7 +436,6 @@ defineOptions({ name: 'ClSystemDetailTabAi' });
     }
 
     .custom-models {
-      margin-top: 12px;
 
       .add-model {
         margin-bottom: 12px;