feat: enhance chat console and input functionality

- Refactored conversation management by replacing selectedConversationId with currentConversationId for consistency in ChatConsole
- Implemented debouncing for loadConversationMessages and loadCurrentConversation methods to optimize performance
- Added a new button in ChatInput for adding models when no providers are available, enhancing user experience
- Updated internationalization files to include new labels and tooltips for the add model feature
- Improved error handling in loadCurrentConversation to manage 404 responses effectively

Author: Marvin Zhang

src/components/ui/chat/ChatConsole.vue

@@ -6,10 +6,13 @@ import useRequest from '@/services/request';
 import { getRequestBaseUrl } from '@/utils';
 import { debounce } from 'lodash';
 import { ElMessage } from 'element-plus';
-
+import { AxiosError } from 'axios';
+import { useRouter } from 'vue-router';
 const { t } = useI18n();
 const { get } = useRequest();
 
+const router = useRouter();
+
 // Add current conversation ref
 const currentConversation = ref<ChatConversation | null>(null);
 
@@ -43,7 +46,6 @@ const streamError = ref('');
 
 // Add conversation management
 const conversations = ref<ChatConversation[]>([]);
-const selectedConversationId = ref<string>('');
 const currentConversationId = ref<string>('');
 const isLoadingConversations = ref(false);
 const isLoadingMessages = ref(false);
@@ -74,7 +76,7 @@ const loadConversations = async () => {
 };
 
 // Load messages for a conversation
-const loadConversationMessages = async (conversationId: string) => {
+const loadConversationMessages = debounce(async (conversationId: string) => {
   if (!conversationId) return;
 
   isLoadingMessages.value = true;
@@ -92,34 +94,32 @@ const loadConversationMessages = async (conversationId: string) => {
       (a: ChatMessageType, b: ChatMessageType) =>
         a.timestamp.getTime() - b.timestamp.getTime()
     );
-    console.debug(messages[messages.length - 1].content);
 
     chatHistory.splice(0, chatHistory.length, ...messages);
     currentConversationId.value = conversationId;
   } catch (error) {
     console.error('Failed to load conversation messages:', error);
-    streamError.value =
+    const errorMessage =
       error instanceof Error ? error.message : 'Failed to load messages';
   } finally {
     isLoadingMessages.value = false;
     // Scroll to bottom after loading messages
     messageListRef.value?.scrollToBottom();
   }
-};
+});
 
 // Select conversation
 const selectConversation = async (conversationId: string) => {
-  if (selectedConversationId.value === conversationId) return;
+  if (currentConversationId.value === conversationId) return;
 
-  selectedConversationId.value = conversationId;
+  currentConversationId.value = conversationId;
   streamError.value = '';
   await loadConversationMessages(conversationId);
   messageListRef.value?.scrollToBottom();
 };
 
 // Create new conversation
 const createNewConversation = () => {
-  selectedConversationId.value = '';
   currentConversationId.value = '';
   localStorage.removeItem('currentConversationId');
   streamError.value = '';
@@ -128,7 +128,7 @@ const createNewConversation = () => {
 };
 
 // Load current conversation details
-const loadCurrentConversation = async (conversationId: string) => {
+const loadCurrentConversation = debounce(async (conversationId: string) => {
   if (!conversationId) {
     currentConversation.value = null;
     return;
@@ -137,10 +137,14 @@ const loadCurrentConversation = async (conversationId: string) => {
     const res = await get(`/ai/chat/conversations/${conversationId}`);
     currentConversation.value = res.data;
   } catch (error) {
+    if ((error as AxiosError)?.response?.status === 404) {
+      currentConversationId.value = '';
+      return;
+    }
     console.error('Failed to load conversation details:', error);
     currentConversation.value = null;
   }
-};
+});
 
 // Watch for conversation ID changes to load details
 watch(currentConversationId, async newId => {
@@ -154,9 +158,9 @@ watch(currentConversationId, async newId => {
   }
 
   // Update selected conversation ID if needed
-  if (newId && !selectedConversationId.value) {
+  if (newId && !currentConversationId.value) {
     await loadConversations();
-    selectedConversationId.value = newId;
+    currentConversationId.value = newId;
   }
 });
 
@@ -171,7 +175,7 @@ onBeforeMount(async () => {
   if (savedConversationId) {
     await loadConversationMessages(savedConversationId);
     await loadCurrentConversation(savedConversationId);
-    selectedConversationId.value = savedConversationId;
+    currentConversationId.value = savedConversationId;
   }
 });
 
@@ -202,6 +206,11 @@ const loadLLMProviders = debounce(async () => {
     const res = await get('/ai/llm/providers', { available: true });
     availableProviders.value = res.data || [];
 
+    if (!availableProviders.value.length) {
+      // Reset provider and model if no providers are available
+      resetChatbotConfig();
+    }
+
     if (!chatbotConfig.value.provider || !chatbotConfig.value.model) {
       if (availableProviders.value.length > 0) {
         chatbotConfig.value.provider = availableProviders.value[0].key!;
@@ -238,6 +247,12 @@ const saveChatbotConfig = (config: ChatbotConfig) => {
   ElMessage.success(t('common.message.success.save'));
 };
 
+// Reset chatbot configuration
+const resetChatbotConfig = () => {
+  chatbotConfig.value = {};
+  localStorage.removeItem('chatbotConfig');
+};
+
 // Initialize chat history
 const chatHistory = reactive<ChatMessageType[]>([]);
 
@@ -453,6 +468,10 @@ const selectProviderModel = ({
   localStorage.setItem('chatbotConfig', JSON.stringify(chatbotConfig.value));
 };
 
+const addProviderModel = () => {
+  router.push('/system/ai');
+};
+
 // Configuration dialog
 const configDialogVisible = ref(false);
 
@@ -510,7 +529,7 @@ defineOptions({ name: 'ClChatConsole' });
         </template>
         <cl-chat-history
           :conversations="conversations"
-          :selected-conversation-id="selectedConversationId"
+          :selected-conversation-id="currentConversationId"
           :is-loading="isLoadingConversations"
           @select="selectConversation"
           @close="historyDialogVisible = false"
@@ -541,6 +560,7 @@ defineOptions({ name: 'ClChatConsole' });
           @send="sendMessage"
           @cancel="cancelMessage"
           @model-change="selectProviderModel"
+          @add-model="addProviderModel"
         />
       </div>
     </div>

src/components/ui/chat/ChatInput.vue

@@ -2,6 +2,7 @@
 import { ref, nextTick, onMounted, watch, computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { getLLMProviderIcon, getLLMProviderName } from '@/utils/ai';
+import ClLabelButton from '@/components/ui/button/LabelButton.vue';
 
 // Add TypeScript interface for tree node
 interface TreeNode {
@@ -26,6 +27,7 @@ const emit = defineEmits<{
   (e: 'send', message: string): void;
   (e: 'model-change', value: { provider: string; model: string }): void;
   (e: 'cancel'): void;
+  (e: 'add-model'): void;
 }>();
 
 const selectedProviderModel = ref<string>();
@@ -143,6 +145,14 @@ const focus = () => {
   textareaRef.value?.focus();
 };
 
+const inputBoxDisabled = computed(() => {
+  return props.isLoading || props.providers?.length === 0;
+});
+
+const hasProviders = computed(() => {
+  return !!props.providers?.length;
+});
+
 // Expose focus method
 defineExpose({ focus });
 
@@ -151,22 +161,22 @@ defineOptions({ name: 'ClChatInput' });
 
 <template>
   <div class="chat-input">
-    <div class="input-container">
+    <div class="input-container" :class="{ disabled: inputBoxDisabled }">
       <textarea
         ref="textareaRef"
         v-model="userInput"
         class="message-textarea"
         :placeholder="t('components.ai.chatbot.inputPlaceholder')"
         @input="adjustTextareaHeight"
         @keydown="handleKeydown"
-        :disabled="props.isLoading"
+        :disabled="inputBoxDisabled"
         rows="1"
       />
     </div>
 
     <div class="input-footer">
       <div class="left-content">
-        <div class="model-select-wrapper">
+        <div v-if="hasProviders" class="model-select-wrapper">
           <el-popover
             placement="top"
             :width="280"
@@ -216,6 +226,16 @@ defineOptions({ name: 'ClChatInput' });
             </div>
           </el-popover>
         </div>
+        <div v-else>
+          <cl-label-button
+            :label="t('components.ai.chatbot.addModel.label')"
+            :tooltip="t('components.ai.chatbot.addModel.tooltip')"
+            :icon="['fas', 'plus']"
+            type="text"
+            size="small"
+            @click="() => emit('add-model')"
+          />
+        </div>
       </div>
       <div class="right-content">
         <!-- Cancel button when request is loading -->
@@ -260,6 +280,12 @@ defineOptions({ name: 'ClChatInput' });
     border-color 0.2s,
     box-shadow 0.2s;
   overflow: hidden;
+
+  &.disabled {
+    textarea {
+      cursor: not-allowed;
+    }
+  }
 }
 
 .message-textarea {

src/i18n/lang/en/components/ai.ts

@@ -26,6 +26,10 @@ const ai: LangAi = {
     searchHistory: 'Search history',
     noConversations: 'No chat history found',
     newChat: 'New Chat',
+    addModel: {
+      label: 'Add Model',
+      tooltip: 'You haven\'t configured any models yet. Add a model to get started.',
+    },
   },
 };
 

src/i18n/lang/zh/components/ai.ts

@@ -26,6 +26,10 @@ const ai: LangAi = {
     searchHistory: '搜索历史',
     noConversations: '没有聊天记录',
     newChat: '新聊天',
+    addModel: {
+      label: '添加模型',
+      tooltip: '您还没有配置任何模型。添加一个模型开始聊天',
+    },
   },
 };
 

src/interfaces/i18n/components/ai.d.ts

@@ -27,6 +27,10 @@ export declare global {
       searchHistory: string;
       noConversations: string;
       newChat: string;
+      addModel: {
+        label: string;
+        tooltip: string;
+      };
     };
   }
 }

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

@@ -258,7 +258,12 @@ defineOptions({ name: 'ClSystemDetailTabAi' });
       <cl-form-item :label="$t('views.system.ai.enabled')" :span="4">
         <cl-switch v-model="form.enabled" @change="saveLLMProvider" />
       </cl-form-item>
-      <cl-form-item :label="$t('views.system.ai.apiKey')" :span="4" required>
+      <cl-form-item
+        :label="$t('views.system.ai.apiKey')"
+        :span="4"
+        prop="api_key"
+        required
+      >
         <cl-edit-input
           v-model="form.api_key"
           :display-value="

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

@@ -80,7 +80,7 @@ defineOptions({ name: 'ClSystemDetailTabCustomize' });
 </script>
 
 <template>
-  <cl-form v-if="form" ref="formRef" :model="form.value" label-width="200px">
+  <cl-form v-if="form?.value" ref="formRef" :model="form.value" label-width="200px">
     <cl-form-item
       :span="4"
       :label="t('views.system.customize.showCustomTitle')"