From 587f49286fb5619a58fb05819f0ee5aa8868bd79 Mon Sep 17 00:00:00 2001
From: feng <1304903146@qq.com>
Date: Mon, 1 Dec 2025 19:03:54 +0800
Subject: [PATCH] perf: To kael

---
 package.json                                  |   2 +
 .../ChatAi/components/ChitChat/ChatInput.vue  |  48 +-
 .../components/ChitChat/ChatMessage.vue       |  34 +-
 .../Apps/ChatAi/components/ChitChat/index.vue | 928 ++++++++++++++++--
 src/components/Apps/ChatAi/index.vue          |  21 +-
 src/components/Apps/ChatAi/models/ChatGPT.vue |  31 +
 src/components/Apps/ChatAi/models/Claude.vue  |  41 +
 .../Apps/ChatAi/models/DeepSeek.vue           |  33 +
 src/components/Apps/ChatAi/models/Gemini.vue  |  31 +
 src/components/Apps/ChatAi/models/Grok.vue    |  31 +
 .../Apps/ChatAi/models/ModelIcon.vue          |  49 +
 .../Feature/components/ChatProvidersField.vue |  37 +-
 yarn.lock                                     |  66 +-
 13 files changed, 1223 insertions(+), 129 deletions(-)
 create mode 100644 src/components/Apps/ChatAi/models/ChatGPT.vue
 create mode 100644 src/components/Apps/ChatAi/models/Claude.vue
 create mode 100644 src/components/Apps/ChatAi/models/DeepSeek.vue
 create mode 100644 src/components/Apps/ChatAi/models/Gemini.vue
 create mode 100644 src/components/Apps/ChatAi/models/Grok.vue
 create mode 100644 src/components/Apps/ChatAi/models/ModelIcon.vue

diff --git a/package.json b/package.json
index 07192b2d9..cf5ee031a 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,9 @@
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "3.3.0",
+    "socket.io-client": "^4.8.1",
     "sortablejs": "^1.15.6",
+    "uuid": "8.3.2",
     "v-sanitize": "^0.0.13",
     "vue": "2.7.16",
     "vue-codemirror": "4.0.6",
diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
index 990539e5b..99b416653 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container">
-    <div v-if="hasPrompt" class="chat-action">
+    <div class="chat-action">
       <Select2
         v-model="select.value"
-        :disabled="isLoading || isSelectDisabled"
+        :disabled="isLoading || isSelectDisabled || loading || !options.length"
         v-bind="select"
         @change="onSelectChange"
       />
@@ -37,9 +37,17 @@ export default {
       type: Boolean,
       default: false
     },
-    hasPrompt: {
+    modelOptions: {
+      type: Array,
+      default: () => []
+    },
+    selectedModel: {
+      type: String,
+      default: ''
+    },
+    loading: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
   data() {
@@ -47,15 +55,10 @@ export default {
       isIM: false,
       inputValue: '',
       select: {
-        url: '/api/v1/settings/chatai-prompts/',
         value: '',
         multiple: false,
-        placeholder: this.$t('Role'),
-        ajax: {
-          transformOption: (item) => {
-            return { label: item.name, value: item.content }
-          }
-        }
+        placeholder: this.$t('Model'),
+        options: []
       }
     }
   },
@@ -64,7 +67,26 @@ export default {
       isLoading: state => state.chat.loading
     }),
     isSelectDisabled() {
-      return !!this.select.value
+      return false
+    },
+    options() {
+      return (this.modelOptions || []).map(item => {
+        return { label: item.name || item.id, value: item.id }
+      })
+    }
+  },
+  watch: {
+    modelOptions: {
+      immediate: true,
+      handler(val) {
+        this.select.options = (val || []).map(item => ({ label: item.name || item.id, value: item.id }))
+      }
+    },
+    selectedModel: {
+      immediate: true,
+      handler(val) {
+        this.select.value = val || ''
+      }
     }
   },
   methods: {
@@ -84,7 +106,7 @@ export default {
       this.inputValue = ''
     },
     onSelectChange(value) {
-      this.$emit('select-prompt', value)
+      this.$emit('select-model', value)
     }
   }
 }
diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
index 67c129846..b9c1d3a8a 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -3,9 +3,18 @@
     <div class="chart-item-container">
       <div class="avatar">
         <el-avatar
-          :src="isUserRole ? userUrl : chatUrl"
+          v-if="isUserRole"
+          :src="userUrl"
           class="header-avatar"
         />
+        <el-avatar
+          v-else-if="!hasModelIcon"
+          :src="chatUrl"
+          class="header-avatar"
+        />
+        <el-avatar v-else class="header-avatar">
+          <ModelIcon :name="modelIconName" class-name="model-icon" />
+        </el-avatar>
       </div>
       <div class="content">
         <div class="operational">
@@ -76,6 +85,7 @@
 
 <script>
 import MessageText from './MessageText.vue'
+import ModelIcon from '../../models/ModelIcon.vue'
 import { mapGetters, mapState } from 'vuex'
 import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
@@ -85,7 +95,8 @@ const { setLoading, removeLoadingMessageInChat } = useChat()
 
 export default {
   components: {
-    MessageText
+    MessageText,
+    ModelIcon
   },
   props: {
     item: {
@@ -93,6 +104,10 @@ export default {
       default: () => {
       }
     },
+    selectedModel: {
+      type: String,
+      default: ''
+    },
     isTerminal: {
       type: Boolean,
       default: false
@@ -129,6 +144,15 @@ export default {
         ? this.$i18n.t('ServerBusyRetry')
         : ''
     },
+    modelIconName() {
+      return (this.item?.message?.model || this.selectedModel || this.publicSettings.CHAT_AI_TYPE || '').toString()
+    },
+    hasModelIcon() {
+      const name = this.modelIconName.toLowerCase()
+      console.log('-------------- modelIconName --------------', name)
+      if (!name) return false
+      return ['gpt', 'deep-seek', 'grok', 'claude', 'gemini'].some(key => name.includes(key))
+    },
     chatUrl() {
       return this.publicSettings.CHAT_AI_TYPE === 'gpt'
         ? require('@/assets/img/chat.png')
@@ -176,6 +200,12 @@ export default {
           background-color: #fff;
         }
       }
+
+      .model-icon {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
 
     .content {
diff --git a/src/components/Apps/ChatAi/components/ChitChat/index.vue b/src/components/Apps/ChatAi/components/ChitChat/index.vue
index 350db8efc..fb64c6e3d 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@@ -17,18 +17,34 @@
           </div>
         </div>
       </div>
-      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" :is-terminal="isTerminal" @insert-code="insertCode" />
+      <ChatMessage
+        v-for="(item, index) in activeChat.chats"
+        :key="index"
+        :item="item"
+        :is-terminal="isTerminal"
+        :selected-model="selectedModel"
+        @insert-code="insertCode"
+      />
     </div>
     <div class="input-box">
       <el-button
-        v-if="isLoading && socket && socket.readyState === 1"
+        v-if="isLoading && controller"
         class="stop"
         icon="fa fa-stop-circle-o"
         round
         size="small"
         @click="onStopHandle"
-      >{{ $tc('Stop') }}</el-button>
-      <ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      >{{ $tc('Stop') }}
+      </el-button>
+      <ChatInput
+        ref="chatInput"
+        :expanded="expanded"
+        :model-options="models"
+        :selected-model="selectedModel"
+        :loading="modelsLoading"
+        @send="onSendHandle"
+        @select-model="onSelectModel"
+      />
     </div>
   </div>
 </template>
@@ -36,19 +52,17 @@
 <script>
 import ChatInput from './ChatInput.vue'
 import ChatMessage from './ChatMessage.vue'
-import { mapState } from 'vuex'
-import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/request'
+import { mapGetters, mapState } from 'vuex'
 import { getInputFocus, useChat } from '../../useChat.js'
+import io from 'socket.io-client'
+import { v4 as uuidv4 } from 'uuid'
 
 const {
   setLoading,
   clearChats,
   addChatMessageById,
-  addMessageToActiveChat,
   newChatAndAddMessageById,
-  removeLoadingMessageInChat,
-  updateChaMessageContentById,
-  addTemporaryLoadingToChat
+  removeLoadingMessageInChat
 } = useChat()
 
 export default {
@@ -64,45 +78,74 @@ export default {
   },
   data() {
     return {
-      socket: {},
+      controller: null,
       prompt: '',
-      conversationId: '',
+      chatId: '',
       showIntroduction: false,
       introduction: [],
       terminalContext: null,
       isTerminal: false,
-      sessionChat: {}
+      sessionChat: {},
+      modelsLoaded: false,
+      modelsLoading: false,
+      modelsInitialized: false,
+      models: [],
+      selectedModel: '',
+      sessionId: '',
+      socket: null
     }
   },
   computed: {
     ...mapState({
       isLoading: state => state.chat.loading,
       activeChat: state => state.chat.activeChat
-    })
-  },
-  destroyed() {
-    closeWebSocket()
+    }),
+    ...mapGetters([
+      'publicSettings'
+    ])
   },
   methods: {
     init() {
-      this.initWebSocket()
-      this.initChatMessage()
+      // 防止重复初始化时重复插入欢迎消息
+      if (!this.activeChat?.chats || this.activeChat.chats.length === 0) {
+        this.initChatMessage()
+      }
+      this.initSocket()
+      if (!this.modelsInitialized) {
+        this.modelsInitialized = true
+        this.ensureModels()
+      }
     },
-    initWebSocket() {
-      const { NODE_ENV, VUE_APP_KOKO_HOST } = process.env || {}
-      const api = '/koko/ws/chat/system/'
-      const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
-      const path = `${protocol}://${window.location.host}${api}`
-      const index = VUE_APP_KOKO_HOST?.indexOf('://')
-      const localPath = protocol + VUE_APP_KOKO_HOST?.substring(index, VUE_APP_KOKO_HOST?.length) + api
-      const url = NODE_ENV === 'development' ? localPath : path
-      createWebSocket(url, this.onWebSocketMessage)
+    initSocket() {
+      if (this.socket) return
+      try {
+        const wsBase = this.getSocketBase()
+        this.socket = io(wsBase, {
+          path: '/kael/ws/socket.io',
+          transports: ['websocket', 'polling'],
+          withCredentials: true
+        })
+        this.socket.on('connect', () => {
+          this.sessionId = this.socket.id
+        })
+        this.socket.on('events', this.handleSocketEvent)
+        this.socket.on('disconnect', () => {
+          this.socket = null
+        })
+      } catch (err) {
+        console.warn('socket init error', err)
+      }
+    },
+    genId() {
+      return uuidv4()
     },
     initChatMessage() {
       this.prompt = ''
       this.showIntroduction = true
-      this.conversationId = ''
-      this.$refs.chatInput.select.value = ''
+      this.chatId = ''
+      if (this.$refs.chatInput?.select) {
+        this.$refs.chatInput.select.value = ''
+      }
       if (this.terminalContext) {
         this.prompt = this.terminalContext.content || ''
       }
@@ -116,49 +159,764 @@ export default {
       newChatAndAddMessageById(chat)
       setLoading(false)
     },
-    onWebSocketMessage(data) {
-      if (data.type === 'message') {
-        this.onChatMessage(data)
-      }
-      if (data.type === 'error') {
-        this.onSystemMessage(data)
+    getActiveProvider() {
+      const config = this.publicSettings?.CHAT_AI_PROVIDERS || {}
+      const providers = Array.isArray(config)
+        ? config
+        : (Array.isArray(config.providers) ? config.providers : [])
+      const defaultName = config.defaultProvider
+
+      const picked = (
+        providers.find(item => item.name && item.name === defaultName) ||
+        providers.find(item => item.is_assistant || item.IsAssistant) ||
+        providers[0]
+      )
+
+      return picked || {
+        base_url: process.env.VUE_APP_KAEL_HOST || '/kael',
+        api_key: '',
+        model: 'gpt-4o-mini'
       }
     },
-    onChatMessage(data) {
-      if (data.id) {
-        setLoading(true)
-        removeLoadingMessageInChat()
-        this.conversationId = data.id
+    getApiBase(provider) {
+      const envBase = process.env.VUE_APP_KAEL_HOST || ''
+      let base = provider?.base_url || envBase || ''
 
-        const newFragment = {
-          message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
-          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
-          result: { content: data.message.is_reasoning ? '' : data.message.content },
-          role: data.message.role,
-          type: data.message.type,
-          create_time: data.message.create_time
+      if (!base) {
+        base = '/kael/api'
+      }
+
+      if (!base.includes('/kael')) {
+        base = `${base.replace(/\/$/, '')}/kael`
+      }
+      if (!base.includes('/kael/api')) {
+        base = `${base.replace(/\/$/, '')}/api`
+      }
+
+      return base.replace(/\/$/, '')
+    },
+    getSocketBase() {
+      let base = process.env.VUE_APP_KAEL_HOST || ''
+      if (!base) {
+        return window.location.origin
+      }
+      // 如果包含 /api，去掉 /api 以便 ws 连接
+      base = base.replace(/\/api\/?$/, '')
+      return base
+    },
+    getApiBaseV1(provider) {
+      const base = this.getApiBase(provider)
+      return `${base}/v1`
+    },
+    buildMessages(userInput, userMessageId) {
+      const messages = []
+      const history = this.activeChat?.chats || []
+
+      // 只带用户消息，跳过欢迎语和助手历史，保持与 Kael 一致
+      history.forEach(chat => {
+        const role = chat?.message?.role
+        if (role !== 'user') return
+        const content = chat?.message?.content || ''
+        if (!content) return
+        messages.push({
+          role: 'user',
+          content,
+          ...(chat?.message?.id ? { id: chat.message.id } : {})
+        })
+      })
+
+      // 当前输入追加一次，避免重复
+      const lastUser = messages[messages.length - 1]
+      if (!lastUser || lastUser.content !== userInput) {
+        messages.push({
+          role: 'user',
+          content: userInput,
+          ...(userMessageId ? { id: userMessageId } : {})
+        })
+      } else if (userMessageId && !lastUser.id) {
+        lastUser.id = userMessageId
+      }
+
+      return messages
+    },
+    findMessageById(id) {
+      if (!id) return null
+      return (this.activeChat?.chats || []).find(item => item?.message?.id === id)
+    },
+    removeMessageById(id) {
+      if (!id) return
+      const chats = this.activeChat?.chats || []
+      const index = chats.findIndex(item => item?.message?.id === id)
+      if (index !== -1) {
+        chats.splice(index, 1)
+      }
+    },
+    buildVariables() {
+      const now = new Date()
+      const pad = (n) => n.toString().padStart(2, '0')
+      const dateStr = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
+      const timeStr = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
+      const datetimeStr = `${dateStr} ${timeStr}`
+      const weekday = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][now.getDay()]
+      const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''
+      const lang = this.$i18n?.locale || 'en'
+
+      return {
+        '{{USER_NAME}}': this.$store?.getters?.user?.name || 'admin',
+        '{{USER_LOCATION}}': 'Unknown',
+        '{{CURRENT_DATETIME}}': datetimeStr,
+        '{{CURRENT_DATE}}': dateStr,
+        '{{CURRENT_TIME}}': timeStr,
+        '{{CURRENT_WEEKDAY}}': weekday,
+        '{{CURRENT_TIMEZONE}}': tz,
+        '{{USER_LANGUAGE}}': lang
+      }
+    },
+    buildEndpoint(provider) {
+      const baseUrl = this.getApiBase(provider)
+      return `${baseUrl}/chat/completions`
+    },
+    buildAssistantChat(data) {
+      const choice = data?.choices?.[0] || {}
+      const message = choice?.message || {}
+      const content = message?.content || ''
+      const reasoning = message?.reasoning_content || ''
+
+      const chat = {
+        message: {
+          id: message?.id || data?.id || new Date().getTime(),
+          content: content || reasoning || '',
+          role: message?.role || 'assistant',
+          model: message?.model,
+          create_time: new Date(),
+          is_reasoning: Boolean(reasoning)
+        },
+        result: {
+          content: content
+        }
+      }
+
+      if (reasoning) {
+        chat.reasoning = { content: reasoning }
+      }
+
+      const hasContent = (chat?.result?.content || '').trim() !== '' || (chat?.reasoning?.content || '').trim() !== ''
+      return hasContent ? chat : null
+    },
+    linkAssistantToLastUser(assistantChat) {
+      if (!assistantChat?.message) return assistantChat
+      const chats = this.activeChat?.chats || []
+      const lastUser = [...chats].reverse().find(item => item?.message?.role === 'user')
+      if (lastUser?.message) {
+        const userId = lastUser.message.id || this.genId()
+        if (!lastUser.message.id) {
+          lastUser.message.id = userId
+        }
+        if (!Array.isArray(lastUser.message.childrenIds)) {
+          lastUser.message.childrenIds = []
+        }
+        if (!lastUser.message.childrenIds.includes(assistantChat.message.id)) {
+          lastUser.message.childrenIds.push(assistantChat.message.id)
+        }
+        assistantChat.message.parentId = userId
+      }
+      if (!Array.isArray(assistantChat.message.childrenIds)) {
+        assistantChat.message.childrenIds = []
+      }
+      return assistantChat
+    },
+    buildCompletedMessages(targetMessageId, modelId, assistantChat) {
+      const messageMap = Object.create(null)
+      const messages = []
+      const chats = this.activeChat?.chats || []
+      const now = Date.now()
+      const startIndex = chats.findIndex(chat => chat?.message?.role === 'user')
+      if (startIndex === -1) return []
+
+      console.log('---------------- buildCompletedMessages ----------------', chats)
+
+      let parentId = null
+      for (let i = startIndex; i < chats.length; i += 1) {
+        const chat = chats[i] || {}
+        const message = chat.message || {}
+        const role = message.role || ''
+        if (!role) continue
+
+        const content = role === 'assistant'
+          ? (chat?.result?.content || message.content || '')
+          : (message.content || '')
+        const ts = message.create_time
+          ? new Date(message.create_time).getTime()
+          : now
+        const id = message.id || `${role}-${i}-${ts}`
+        if (!message.id) {
+          message.id = id
+        }
+        if (message.parentId === undefined || message.parentId === null) {
+          message.parentId = parentId
+        }
+        if (!Array.isArray(message.childrenIds)) {
+          message.childrenIds = []
         }
 
-        updateChaMessageContentById(data.message.id, newFragment)
+        const item = {
+          id,
+          role,
+          content,
+          parentId,
+          timestamp: ts,
+          childrenIds: [],
+          ...(chat?.usage ? { usage: chat.usage } : {}),
+          ...(chat?.sources ? { sources: chat.sources } : {})
+        }
+
+        const effectiveModel = message?.model || modelId || this.selectedModel || ''
+        if (role === 'assistant') {
+          item.done = true
+          item.role = 'assistant'
+          if (effectiveModel) {
+            item.model = effectiveModel
+            item.modelName = effectiveModel
+          }
+        } else if (effectiveModel) {
+          item.models = [effectiveModel]
+          item.role = 'user'
+        }
+
+        messageMap[id] = item
+        messages.push(item)
+        parentId = id
+
+        if (targetMessageId && id === targetMessageId) {
+          break
+        }
       }
-      if (data.message?.type === 'finish') {
+
+      // 确保助手节点存在，即使未写入 activeChat 也补充进去
+      if (assistantChat?.message) {
+        const msg = assistantChat.message
+        const id = msg.id || this.genId()
+        const parentId = msg.parentId || (messages.length ? messages[messages.length - 1].id : null)
+        const assistantItem = {
+          id,
+          role: 'assistant',
+          content: msg.content || assistantChat?.result?.content || '',
+          parentId,
+          timestamp: msg.create_time ? new Date(msg.create_time).getTime() : now,
+          childrenIds: [],
+          ...(msg.model ? { model: msg.model, modelName: msg.model } : (modelId ? { model: modelId, modelName: modelId } : {})),
+          done: true
+        }
+        messageMap[id] = assistantItem
+        messages.push(assistantItem)
+      }
+
+      Object.values(messageMap).forEach(msg => {
+        if (msg.parentId && messageMap[msg.parentId]) {
+          messageMap[msg.parentId].childrenIds.push(msg.id)
+          const parentChat = chats.find(c => c?.message?.id === msg.parentId)
+          if (parentChat) {
+            parentChat.message.childrenIds = parentChat.message.childrenIds || []
+            if (!parentChat.message.childrenIds.includes(msg.id)) {
+              parentChat.message.childrenIds.push(msg.id)
+            }
+          }
+        }
+      })
+
+      // 如果有目标消息，按 parentId 链回溯，保持与 Kael 相同的顺序
+      if (targetMessageId && messageMap[targetMessageId]) {
+        const chain = []
+        let cursor = messageMap[targetMessageId]
+        while (cursor) {
+          chain.push({ ...cursor, childrenIds: messageMap[cursor.id]?.childrenIds || [] })
+          cursor = cursor.parentId ? messageMap[cursor.parentId] : null
+        }
+        return chain.reverse()
+      }
+
+      // 按时间和插入顺序排序，保证 messages 顺序稳定
+      const ordered = Object.values(messageMap).sort((a, b) => a.timestamp - b.timestamp)
+      // 强制最近一对问答建立 parent/children 关系
+      if (ordered.length >= 2) {
+        const last = ordered[ordered.length - 1]
+        const prev = ordered[ordered.length - 2]
+        if (last.role === 'assistant' && prev.role === 'user') {
+          last.parentId = prev.id
+          prev.childrenIds = prev.childrenIds || []
+          if (!prev.childrenIds.includes(last.id)) {
+            prev.childrenIds.push(last.id)
+          }
+        }
+      }
+
+      return ordered.map(msg => ({
+        ...msg,
+        childrenIds: messageMap[msg.id].childrenIds || msg.childrenIds || []
+      }))
+    },
+    async sendToKael(value, userMessageId) {
+      const userId = userMessageId || this.genId()
+      const responseId = this.genId()
+      const provider = this.getActiveProvider()
+      const modelId = this.selectedModel || provider.model || 'gpt-4o-mini'
+      if (!provider) {
+        const chat = {
+          message: {
+            content: 'Chat provider not configured',
+            role: 'assistant',
+            create_time: new Date()
+          },
+          type: 'error'
+        }
+        addChatMessageById(chat)
+        return
+      }
+
+      const endpoint = this.buildEndpoint(provider)
+
+      const headers = {
+        'Content-Type': 'application/json'
+      }
+
+      if (provider.api_key) {
+        headers.Authorization = `Bearer ${provider.api_key}`
+      }
+      if (this.$i18n?.locale) {
+        headers['Accept-Language'] = this.$i18n.locale
+      }
+
+      if (!this.modelsLoaded) {
+        await this.fetchModels(provider, headers)
+      }
+
+      if (!this.chatId) {
+        await this.createChat(provider, userId, value, headers)
+      }
+
+      const payloadVariables = this.buildVariables()
+      const payloadFeatures = {
+        image_generation: false,
+        code_interpreter: false,
+        web_search: false
+      }
+      const payloadModelItem = {
+        id: modelId,
+        name: modelId
+      }
+
+      const payload = {
+        stream: true,
+        model: modelId,
+        messages: this.buildMessages(value, userId),
+        chat_id: this.chatId || undefined,
+        session_id: this.sessionId,
+        params: {},
+        tool_servers: [],
+        features: payloadFeatures,
+        variables: payloadVariables,
+        model_item: payloadModelItem,
+        id: responseId,
+        background_tasks: {
+          title_generation: true,
+          tags_generation: true,
+          follow_up_generation: true
+        }
+      }
+
+      this.controller = new AbortController()
+      setLoading(true)
+
+      try {
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers,
+          body: JSON.stringify(payload),
+          credentials: 'include',
+          signal: this.controller.signal
+        })
+
+        if (!response.ok) {
+          const msg = await response.text()
+          throw new Error(msg || 'Request failed')
+        }
+
+        const contentType = response.headers.get('content-type') || ''
+        console.log('chat contentType:', contentType)
+        if (contentType.includes('text/event-stream')) {
+          await this.handleStreamResponse(response, payload, provider, headers, responseId)
+        } else {
+          const data = await response.json()
+
+          removeLoadingMessageInChat()
+          const assistantChat = this.buildAssistantChat(data)
+          if (assistantChat) {
+            if (!assistantChat.message.id) {
+              assistantChat.message.id = responseId
+            }
+            assistantChat.message.model = payload.model
+            this.linkAssistantToLastUser(assistantChat)
+            addChatMessageById(assistantChat)
+            await this.notifyChatCompleted(provider, headers, assistantChat)
+          }
+          setLoading(false)
+          getInputFocus()
+        }
+      } catch (error) {
+        console.error(error)
+        if (error?.name === 'AbortError') {
+          removeLoadingMessageInChat()
+          setLoading(false)
+          return
+        }
+        removeLoadingMessageInChat()
         setLoading(false)
-        getInputFocus()
+        const chat = {
+          message: {
+            content: error?.message || this.$t('ServerBusyRetry'),
+            role: 'assistant',
+            create_time: new Date()
+          },
+          type: 'error'
+        }
+        addChatMessageById(chat)
+      } finally {
+        this.controller = null
       }
     },
-    onSystemMessage(data) {
-      data.message = {
-        content: data.data,
-        role: 'assistant',
-        create_time: new Date()
+    async handleStreamResponse(response, payload, provider, headers, fallbackMessageId) {
+      const decoder = new TextDecoder('utf-8')
+      const reader = response.body.getReader()
+      let buffer = ''
+      console.log('handleStreamResponse: start')
+
+      const assistantChat = {
+        message: {
+          id: payload.id || fallbackMessageId || this.genId(),
+          content: '',
+          role: 'assistant',
+          create_time: new Date(),
+          model: payload.model || ''
+        },
+        result: {
+          content: ''
+        }
       }
+      let assistantAdded = false
+      let hasContent = false
+
+      const processLine = (line) => {
+        if (!line.startsWith('data:')) return
+        const jsonStr = line.replace(/^data:\s*/, '')
+        if (jsonStr === '[DONE]') {
+          return 'done'
+        }
+        try {
+          const data = JSON.parse(jsonStr)
+          const delta = data?.choices?.[0]?.delta?.content || data?.content || ''
+          if (delta) {
+            if (!assistantAdded) {
+              addChatMessageById(assistantChat)
+              assistantAdded = true
+            }
+            assistantChat.message.content += delta
+            assistantChat.result.content += delta
+            hasContent = true
+          }
+          if (data?.id && !assistantChat.message.id) {
+            assistantChat.message.id = data.id
+          }
+        } catch (e) {
+          console.warn('parse stream chunk error', e)
+        }
+        return null
+      }
+
+      let done = false
+      while (!done) {
+        const { value, done: readerDone } = await reader.read()
+        console.log('handleStreamResponse: read chunk', { readerDone, length: value?.length || 0 })
+        if (readerDone) break
+        buffer += decoder.decode(value, { stream: true })
+        const parts = buffer.split('\n')
+        buffer = parts.pop() || ''
+        for (const part of parts) {
+          const status = processLine(part.trim())
+          if (status === 'done') {
+            done = true
+            break
+          }
+        }
+      }
+
       removeLoadingMessageInChat()
-      addMessageToActiveChat(data)
-      setLoading(true)
+      if (hasContent && assistantAdded) {
+        this.linkAssistantToLastUser(assistantChat)
+        await this.notifyChatCompleted(provider, headers, assistantChat)
+      } else if (!hasContent) {
+        this.removeMessageById(assistantChat?.message?.id)
+      }
+      setLoading(false)
+      getInputFocus()
+    },
+    async handleSocketEvent(event) {
+      const { chat_id, message_id, data } = event || {}
+      if (chat_id && this.chatId && chat_id !== this.chatId) {
+        return
+      }
+      const type = data?.type || null
+      const payload = data?.data || data || {}
+      let target = this.findMessageById(message_id)
+
+      const ensureTarget = () => {
+        if (target) return target
+        const chat = this.buildAssistantChat({}) || {
+          message: {
+            id: message_id || this.genId(),
+            content: '',
+            role: 'assistant',
+            create_time: new Date(),
+            model: payload?.model || ''
+          },
+          result: {
+            content: ''
+          }
+        }
+        chat.message.id = chat.message.id || message_id || this.genId()
+        chat.message.model = chat.message.model || payload?.model || ''
+        addChatMessageById(chat)
+        target = chat
+        return target
+      }
+
+      const appendContent = (delta) => {
+        const msg = ensureTarget()
+        msg.message.content = (msg.message.content || '') + (delta || '')
+        msg.result.content = (msg.result.content || '') + (delta || '')
+      }
+
+      if ((type === 'chat:message:delta' || type === 'message') && payload?.content) {
+        appendContent(payload?.content || '')
+      } else if ((type === 'chat:message' || type === 'replace') && payload?.content) {
+        const msg = ensureTarget()
+        msg.message.content = payload?.content || ''
+        msg.result.content = payload?.content || ''
+      } else if (type === 'chat:completion') {
+        if (payload?.choices?.[0]?.delta?.content) {
+          appendContent(payload.choices[0].delta.content)
+        }
+        if (payload?.content) {
+          const msg = ensureTarget()
+          msg.message.content = payload.content
+          msg.result.content = payload.content
+        }
+
+        if (payload?.done === true) {
+          removeLoadingMessageInChat()
+          setLoading(false)
+          getInputFocus()
+          const provider = this.getActiveProvider()
+          if (provider && this.chatId) {
+            const headers = {}
+            if (provider.api_key) {
+              headers.Authorization = `Bearer ${provider.api_key}`
+            }
+            if (this.$i18n?.locale) {
+              headers['Accept-Language'] = this.$i18n.locale
+            }
+            const assistantChat = this.linkAssistantToLastUser(ensureTarget())
+            try {
+              await this.notifyChatCompleted(provider, headers, assistantChat)
+            } catch (err) {
+              console.warn('socket chat completed notify error', err)
+            }
+          }
+        }
+      } else if (type === 'chat:message:error') {
+        const msg = ensureTarget()
+        msg.message.content = payload?.error?.content || ''
+      }
+    },
+    async fetchModels(provider, headers = {}) {
+      try {
+        this.modelsLoading = true
+        const baseUrl = this.getApiBase(provider)
+        const res = await fetch(`${baseUrl}/models`, {
+          method: 'GET',
+          headers,
+          credentials: 'include'
+        })
+        if (!res.ok) {
+          // 不阻塞后续请求，但记录错误
+          console.warn('fetch models failed', res.status)
+        } else {
+          const data = await res.json()
+          this.models = data?.data || []
+          if (!this.selectedModel) {
+            const fromProvider = provider?.model
+            this.selectedModel = fromProvider || this.models[0]?.id || ''
+          }
+          this.modelsLoaded = true
+        }
+      } catch (err) {
+        console.warn('fetch models error', err)
+      } finally {
+        this.modelsLoading = false
+      }
+    },
+    async ensureModels() {
+      const provider = this.getActiveProvider()
+      if (!provider) return
+      const headers = {}
+      if (provider.api_key) {
+        headers.Authorization = `Bearer ${provider.api_key}`
+      }
+      await this.fetchModels(provider, headers)
+    },
+    async createChat(provider, messageId, content, headers = {}) {
+      try {
+        const models = [provider.model || 'gpt-4o-mini']
+        const newMessage = {
+          childrenIds: [],
+          content: content,
+          id: messageId,
+          models: models,
+          parentId: null,
+          role: 'user',
+          timestamp: Date.now()
+        }
+        const history = {
+          messages: {
+            [messageId]: newMessage
+          },
+          currentId: messageId
+        }
+        const baseUrlV1 = this.getApiBaseV1(provider)
+        const res = await fetch(`${baseUrlV1}/chats/new`, {
+          method: 'POST',
+          headers: {
+            ...headers,
+            sid: this.sessionId
+          },
+          credentials: 'include',
+          body: JSON.stringify({
+            chat: {
+              id: '',
+              title: this.$t('NewChat'),
+              models: models,
+              params: {},
+              history,
+              messages: [newMessage],
+              tags: [],
+              timestamp: Date.now()
+            },
+            folder_id: null
+          })
+        })
+        if (res.ok) {
+          const data = await res.json()
+          if (data?.id) {
+            this.chatId = data.id
+          }
+        } else {
+          console.warn('create chat failed', res.status)
+        }
+      } catch (err) {
+        console.warn('create chat error', err)
+      }
+    },
+    async notifyChatCompleted(provider, headers = {}, assistantChat) {
+      try {
+        if (!this.chatId) return
+        const baseUrl = this.getApiBase(provider)
+        const reqHeaders = {
+          'Content-Type': 'application/json',
+          ...headers
+        }
+        const modelId = assistantChat?.message?.model || provider.model || 'gpt-4o-mini'
+        const modelItem = this.models.find(m => m.id === modelId) || { id: modelId }
+        const messages = this.buildCompletedMessages(assistantChat?.message?.id, modelId, assistantChat)
+        // 确保至少包含一问一答
+        if (!messages.find(m => m.role === 'assistant') && assistantChat?.message) {
+          const assistId = assistantChat.message.id || this.genId()
+          const parentUser = messages.findLast ? messages.findLast(m => m.role === 'user') : [...messages].reverse().find(m => m.role === 'user')
+          const parentId = parentUser?.id || null
+          messages.push({
+            id: assistId,
+            role: 'assistant',
+            parentId,
+            childrenIds: [],
+            content: assistantChat.message.content || assistantChat?.result?.content || '',
+            timestamp: assistantChat.message.create_time ? new Date(assistantChat.message.create_time).getTime() : Date.now(),
+            done: true,
+            model: modelId,
+            modelName: modelId
+          })
+          if (parentId) {
+            parentUser.childrenIds = parentUser.childrenIds || []
+            if (!parentUser.childrenIds.includes(assistId)) {
+              parentUser.childrenIds.push(assistId)
+            }
+          }
+        }
+        const body = {
+          model: modelId,
+          messages,
+          model_item: modelItem,
+          chat_id: this.chatId,
+          session_id: this.sessionId,
+          id: assistantChat?.message?.id || ''
+        }
+
+        await fetch(`${baseUrl}/chat/completed`, {
+          method: 'POST',
+          headers: reqHeaders,
+          credentials: 'include',
+          body: JSON.stringify(body)
+        })
+        await this.saveChatSnapshot(provider, reqHeaders, messages, modelId)
+      } catch (err) {
+        console.warn('chat completed notify error', err)
+      }
+    },
+    async saveChatSnapshot(provider, headers, messages, modelId) {
+      try {
+        if (!this.chatId) return
+        const baseUrlV1 = this.getApiBaseV1(provider)
+        const historyMessages = {}
+        messages.forEach(msg => {
+          historyMessages[msg.id] = { ...msg }
+        })
+        const currentId = messages[messages.length - 1]?.id || null
+        const body = {
+          chat: {
+            models: [modelId],
+            messages,
+            history: {
+              messages: historyMessages,
+              currentId
+            },
+            params: {},
+            files: []
+          }
+        }
+        await fetch(`${baseUrlV1}/chats/${this.chatId}`, {
+          method: 'POST',
+          headers,
+          credentials: 'include',
+          body: JSON.stringify(body)
+        })
+      } catch (err) {
+        console.warn('save chat snapshot error', err)
+      }
     },
     onTerminalContext(terminalContext) {
       const originSessionId = this.terminalContext?.sessionId
       const newSessionId = terminalContext.sessionId || ''
+      if (newSessionId) {
+        this.sessionId = newSessionId
+        this.chatId = newSessionId
+      }
       if (originSessionId) {
         this.saveSessionChat(originSessionId)
       }
@@ -181,42 +939,31 @@ export default {
         this.sessionChat[sessionId] = JSON.parse(JSON.stringify(this.activeChat.chats))
       }
     },
-
     onSendHandle(value) {
       this.showIntroduction = false
-      this.socket = ws || {}
-      if (ws?.readyState === 1) {
-        const chat = {
-          message: {
-            content: value,
-            role: 'user',
-            create_time: new Date()
-          }
+      const userMessageId = this.genId()
+      this.addUserMessage(value, userMessageId)
+      this.sendToKael(value, userMessageId)
+    },
+    addUserMessage(value, id) {
+      const model = this.selectedModel || this.getActiveProvider()?.model || ''
+      const chat = {
+        message: {
+          id: id || this.genId(),
+          content: value,
+          role: 'user',
+          create_time: new Date(),
+          ...(model ? { models: [model] } : {})
         }
-        const message = {
-          data: value,
-          prompt: this.prompt,
-          id: this.conversationId || ''
-        }
-        addChatMessageById(chat)
-        onSend(message)
-        addTemporaryLoadingToChat()
-      } else {
-        const chat = {
-          message: {
-            content: this.$t('ConnectionDropped'),
-            role: 'assistant',
-            create_time: new Date()
-          },
-          type: 'error'
-        }
-        addChatMessageById(chat)
-        setLoading(true)
       }
+      addChatMessageById(chat)
+    },
+    onSelectModel(val) {
+      this.selectedModel = val || this.selectedModel
     },
     onSelectPromptHandle(value) {
       this.prompt = value
-      this.conversationId = ''
+      this.chatId = ''
       this.showIntroduction = false
       this.onSendHandle(value)
     },
@@ -225,11 +972,10 @@ export default {
       this.initChatMessage()
     },
     onStopHandle() {
-      const message = {
-        id: this.conversationId || '',
-        interrupt: true
+      if (this.controller) {
+        this.controller.abort()
+        this.controller = null
       }
-      onSend(message)
       removeLoadingMessageInChat()
       setLoading(false)
     },
diff --git a/src/components/Apps/ChatAi/index.vue b/src/components/Apps/ChatAi/index.vue
index d6161bf09..1166c9f22 100644
--- a/src/components/Apps/ChatAi/index.vue
+++ b/src/components/Apps/ChatAi/index.vue
@@ -46,7 +46,6 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
-import { ws } from '@/utils/request'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
 import { ObjectLocalStorage } from '@/utils/common'
 import { mapGetters } from 'vuex'
@@ -82,7 +81,8 @@ export default {
       height: '400px',
       expanded: false,
       clientOffset: {},
-      currentTerminalContent: {}
+      currentTerminalContent: {},
+      initialized: false
     }
   },
   computed: {
@@ -123,11 +123,18 @@ export default {
         document.body.appendChild(script)
       }
     },
+    initAssistant() {
+      if (this.initialized) return
+      this.initialized = true
+      this.$nextTick(() => {
+        this.$refs.component?.init()
+      })
+    },
     handlePostMessage() {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {
           this.$refs.drawer.show = true
-          this.initWebSocket()
+          this.initAssistant()
           return
         }
         const msg = event.data
@@ -152,11 +159,6 @@ export default {
       }
       this.$refs.drawer.handleHeaderMoveUp(event)
     },
-    initWebSocket() {
-      if (!ws) {
-        this.$refs.component?.init()
-      }
-    },
     onClose() {
       this.$refs.drawer.show = false
     },
@@ -170,7 +172,6 @@ export default {
     },
     save_pannel_settings() {
       aiPannelLocalStorage.set('expanded', this.expanded)
-      console.log('AI panel settings saved:', this.expanded)
     },
     updateExpandedState(expanded) {
       this.expanded = expanded
@@ -184,8 +185,8 @@ export default {
       })
     },
     onToggle(status) {
-      this.initWebSocket()
       if (status) {
+        this.initAssistant()
         getInputFocus()
       }
     }
diff --git a/src/components/Apps/ChatAi/models/ChatGPT.vue b/src/components/Apps/ChatAi/models/ChatGPT.vue
new file mode 100644
index 000000000..2584e32af
--- /dev/null
+++ b/src/components/Apps/ChatAi/models/ChatGPT.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    :stroke-width="strokeWidth"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="className"
+  >
+    <path
+      d="M11.2475 18.25C10.6975 18.25 10.175 18.1455 9.67999 17.9365C9.18499 17.7275 8.74499 17.436 8.35999 17.062C7.94199 17.205 7.50749 17.2765 7.05649 17.2765C6.31949 17.2765 5.63749 17.095 5.01049 16.732C4.38349 16.369 3.87749 15.874 3.49249 15.247C3.11849 14.62 2.93149 13.9215 2.93149 13.1515C2.93149 12.8325 2.97549 12.486 3.06349 12.112C2.62349 11.705 2.28249 11.2375 2.04049 10.7095C1.79849 10.1705 1.67749 9.6095 1.67749 9.0265C1.67749 8.4325 1.80399 7.8605 2.05699 7.3105C2.30999 6.7605 2.66199 6.2875 3.11299 5.8915C3.57499 5.4845 4.10849 5.204 4.71349 5.05C4.83449 4.423 5.08749 3.862 5.47249 3.367C5.86849 2.861 6.35249 2.465 6.92449 2.179C7.49649 1.893 8.10699 1.75 8.75599 1.75C9.30599 1.75 9.82849 1.8545 10.3235 2.0635C10.8185 2.2725 11.2585 2.564 11.6435 2.938C12.0615 2.795 12.496 2.7235 12.947 2.7235C13.684 2.7235 14.366 2.905 14.993 3.268C15.62 3.631 16.1205 4.126 16.4945 4.753C16.8795 5.38 17.072 6.0785 17.072 6.8485C17.072 7.1675 17.028 7.514 16.94 7.888C17.38 8.295 17.721 8.768 17.963 9.307C18.205 9.835 18.326 10.3905 18.326 10.9735C18.326 11.5675 18.1995 12.1395 17.9465 12.6895C17.6935 13.2395 17.336 13.718 16.874 14.125C16.423 14.521 15.895 14.796 15.29 14.95C15.169 15.577 14.9105 16.138 14.5145 16.633C14.1295 17.139 13.651 17.535 13.079 17.821C12.507 18.107 11.8965 18.25 11.2475 18.25ZM7.17199 16.1875C7.72199 16.1875 8.20049 16.072 8.60749 15.841L11.7095 14.059C11.8195 13.982 11.8745 13.8775 11.8745 13.7455V12.3265L7.88149 14.62C7.63949 14.763 7.39749 14.763 7.15549 14.62L4.03699 12.8215C4.03699 12.8545 4.03149 12.893 4.02049 12.937C4.02049 12.981 4.02049 13.047 4.02049 13.135C4.02049 13.696 4.15249 14.213 4.41649 14.686C4.69149 15.148 5.07099 15.511 5.55499 15.775C6.03899 16.05 6.57799 16.1875 7.17199 16.1875ZM7.33699 13.498C7.40299 13.531 7.46349 13.5475 7.51849 13.5475C7.57349 13.5475 7.62849 13.531 7.68349 13.498L8.92099 12.7885L4.94449 10.4785C4.70249 10.3355 4.58149 10.121 4.58149 9.835V6.2545C4.03149 6.4965 3.59149 6.8705 3.26149 7.3765C2.93149 7.8715 2.76649 8.4215 2.76649 9.0265C2.76649 9.5655 2.90399 10.0825 3.17899 10.5775C3.45399 11.0725 3.81149 11.4465 4.25149 11.6995L7.33699 13.498ZM11.2475 17.161C11.8305 17.161 12.3585 17.029 12.8315 16.765C13.3045 16.501 13.6785 16.138 13.9535 15.676C14.2285 15.214 14.366 14.697 14.366 14.125V10.561C14.366 10.429 14.311 10.33 14.201 10.264L12.947 9.538V14.1415C12.947 14.4275 12.826 14.642 12.584 14.785L9.46549 16.5835C10.0045 16.9685 10.5985 17.161 11.2475 17.161ZM11.8745 11.122V8.878L10.01 7.822L8.12899 8.878V11.122L10.01 12.178L11.8745 11.122ZM7.05649 5.8585C7.05649 5.5725 7.17749 5.358 7.41949 5.215L10.538 3.4165C9.99899 3.0315 9.40499 2.839 8.75599 2.839C8.17299 2.839 7.64499 2.971 7.17199 3.235C6.69899 3.499 6.32499 3.862 6.04999 4.324C5.78599 4.786 5.65399 5.303 5.65399 5.875V9.4225C5.65399 9.5545 5.70899 9.659 5.81899 9.736L7.05649 10.462V5.8585ZM15.4385 13.7455C15.9885 13.5035 16.423 13.1295 16.742 12.6235C17.072 12.1175 17.237 11.5675 17.237 10.9735C17.237 10.4345 17.0995 9.9175 16.8245 9.4225C16.5495 8.9275 16.192 8.5535 15.752 8.3005L12.6665 6.5185C12.6005 6.4745 12.54 6.458 12.485 6.469C12.43 6.469 12.375 6.4855 12.32 6.5185L11.0825 7.2115L15.0755 9.538C15.1965 9.604 15.2845 9.692 15.3395 9.802C15.4055 9.901 15.4385 10.022 15.4385 10.165V13.7455ZM12.122 5.3635C12.364 5.2095 12.606 5.2095 12.848 5.3635L15.983 7.195C15.983 7.118 15.983 7.019 15.983 6.898C15.983 6.37 15.851 5.8695 15.587 5.3965C15.334 4.9125 14.9655 4.5275 14.4815 4.2415C14.0085 3.9555 13.4585 3.8125 12.8315 3.8125C12.2815 3.8125 11.803 3.928 11.396 4.159L8.29399 5.941C8.18399 6.018 8.12899 6.1225 8.12899 6.2545V7.6735L12.122 5.3635Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChatGPTIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-8'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>
diff --git a/src/components/Apps/ChatAi/models/Claude.vue b/src/components/Apps/ChatAi/models/Claude.vue
new file mode 100644
index 000000000..05c4ba146
--- /dev/null
+++ b/src/components/Apps/ChatAi/models/Claude.vue
@@ -0,0 +1,41 @@
+<template>
+  <svg
+    :stroke-width="strokeWidth"
+    viewBox="0 0 24 16"
+    overflow="visible"
+    width="20"
+    height="20"
+    :class="className"
+  >
+    <g style="transform: translateX(13px) rotateZ(0deg); transform-origin: 4.775px 7.73501px;">
+      <path
+        shape-rendering="geometricPrecision"
+        fill-opacity="1"
+        d=" M0,0 C0,0 6.1677093505859375,15.470022201538086 6.1677093505859375,15.470022201538086 C6.1677093505859375,15.470022201538086 9.550004005432129,15.470022201538086 9.550004005432129,15.470022201538086 C9.550004005432129,15.470022201538086 3.382294178009033,0 3.382294178009033,0 C3.382294178009033,0 0,0 0,0 C0,0 0,0 0,0z"
+      />
+    </g>
+    <g opacity="1" style="transform: none; transform-origin: 7.935px 7.73501px;">
+      <path
+        shape-rendering="geometricPrecision"
+        fill-opacity="1"
+        d=" M5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 7.93500280380249,3.911694288253784 7.93500280380249,3.911694288253784 C7.93500280380249,3.911694288253784 10.045400619506836,9.348296165466309 10.045400619506836,9.348296165466309 C10.045400619506836,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309z M6.166755199432373,0 C6.166755199432373,0 0,15.470022201538086 0,15.470022201538086 C0,15.470022201538086 3.4480772018432617,15.470022201538086 3.4480772018432617,15.470022201538086 C3.4480772018432617,15.470022201538086 4.709278583526611,12.22130012512207 4.709278583526611,12.22130012512207 C4.709278583526611,12.22130012512207 11.16093635559082,12.22130012512207 11.16093635559082,12.22130012512207 C11.16093635559082,12.22130012512207 12.421928405761719,15.470022201538086 12.421928405761719,15.470022201538086 C12.421928405761719,15.470022201538086 15.87000560760498,15.470022201538086 15.87000560760498,15.470022201538086 C15.87000560760498,15.470022201538086 9.703250885009766,0 9.703250885009766,0 C9.703250885009766,0 6.166755199432373,0 6.166755199432373,0 C6.166755199432373,0 6.166755199432373,0 6.166755199432373,0z"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ClaudeIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>
diff --git a/src/components/Apps/ChatAi/models/DeepSeek.vue b/src/components/Apps/ChatAi/models/DeepSeek.vue
new file mode 100644
index 000000000..feaf0271b
--- /dev/null
+++ b/src/components/Apps/ChatAi/models/DeepSeek.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg
+    id="图层_1"
+    xmlns="http://www.w3.org/2000/svg"
+    data-name="图层 1"
+    viewBox="0 0 71.69 52.76"
+    :class="className"
+    :stroke-width="strokeWidth"
+  >
+    <path
+      id="path"
+      fill="#4d6bfe"
+      d="M523.77,276.34c-.76-.38-1.08.33-1.53.69a4,4,0,0,0-.41.41,5.07,5.07,0,0,1-4.1,1.87,8,8,0,0,0-6.46,2.53,5.82,5.82,0,0,0-3.72-4.62,6.39,6.39,0,0,1-2.85-1.94,7.76,7.76,0,0,1-.92-2.31c-.16-.48-.32-1-.87-1.05s-.83.41-1.07.82a11,11,0,0,0-1.26,5.5,11.9,11.9,0,0,0,5.49,10.14.75.75,0,0,1,.39,1c-.25.84-.54,1.65-.79,2.49-.17.53-.41.65-1,.42a16.63,16.63,0,0,1-5.18-3.52c-2.56-2.48-4.88-5.21-7.76-7.35-.68-.5-1.36-1-2.06-1.41-2.94-2.86.39-5.2,1.16-5.48s.28-1.29-2.33-1.28-5,.88-8,2a8.23,8.23,0,0,1-1.39.41,28.67,28.67,0,0,0-8.61-.3,18.57,18.57,0,0,0-13.44,7.83c-4,5.47-4.91,11.67-3.76,18.15a27.68,27.68,0,0,0,10,16.88,26.8,26.8,0,0,0,19.23,6.39c4.43-.25,9.36-.84,14.92-5.55a13.84,13.84,0,0,0,5.32,1.18,17.24,17.24,0,0,0,5.09-.38c2.2-.46,2.05-2.5,1.25-2.87-6.43-3-5-1.78-6.3-2.77,3.27-3.87,8.2-7.89,10.13-20.92a12.44,12.44,0,0,0,0-2.52c0-.51.1-.71.68-.76a12.55,12.55,0,0,0,4.62-1.42c4.17-2.28,5.85-6,6.25-10.51A1.57,1.57,0,0,0,523.77,276.34Zm-36.34,40.37c-6.24-4.9-9.27-6.52-10.52-6.45s-1,1.41-.7,2.28a8.49,8.49,0,0,0,1.11,2.21,1.14,1.14,0,0,1-.34,1.8c-2,1.24-5.5-.42-5.66-.5a26.08,26.08,0,0,1-9.87-9.88,30.15,30.15,0,0,1-3.87-13.39c-.06-1.15.28-1.56,1.42-1.77a14.31,14.31,0,0,1,4.57-.11,28.56,28.56,0,0,1,16.33,8.29,54.06,54.06,0,0,1,6.58,8.63,41.46,41.46,0,0,0,7.41,8.71,24.36,24.36,0,0,0,2.66,2C494.16,318.82,490.16,318.87,487.43,316.71Zm3-19.23a.92.92,0,0,1,.92-.92.83.83,0,0,1,.32.06.8.8,0,0,1,.34.22.9.9,0,0,1,.25.64.92.92,0,0,1-1.83,0Zm9.29,4.76a5.27,5.27,0,0,1-1.77.48,3.75,3.75,0,0,1-2.38-.76,3.57,3.57,0,0,1-1.65-2.26,5.16,5.16,0,0,1,0-1.76,2,2,0,0,0-.71-2.17,3.1,3.1,0,0,0-2.06-.59,1.63,1.63,0,0,1-.76-.24.75.75,0,0,1-.34-1.07,3.47,3.47,0,0,1,.57-.62,3.9,3.9,0,0,1,3.43,0,10,10,0,0,1,3,2.34,18.62,18.62,0,0,1,2,2.73,10.9,10.9,0,0,1,1.33,2.53C500.65,301.47,500.4,302,499.71,302.24Z"
+      transform="translate(-452.83 -271.91)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DeepSeekIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>
diff --git a/src/components/Apps/ChatAi/models/Gemini.vue b/src/components/Apps/ChatAi/models/Gemini.vue
new file mode 100644
index 000000000..15ad4da5a
--- /dev/null
+++ b/src/components/Apps/ChatAi/models/Gemini.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    width="800px"
+    height="800px"
+    viewBox="0 0 512 512"
+    :class="className"
+    :stroke-width="strokeWidth"
+  >
+    <path
+      d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GeminiIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>
diff --git a/src/components/Apps/ChatAi/models/Grok.vue b/src/components/Apps/ChatAi/models/Grok.vue
new file mode 100644
index 000000000..380a63a92
--- /dev/null
+++ b/src/components/Apps/ChatAi/models/Grok.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    :class="className"
+    :stroke-width="strokeWidth"
+  >
+    <path
+      d="m3.005 8.858 8.783 12.544h3.904L6.908 8.858zM6.905 15.825 3 21.402h3.907l1.951-2.788zM16.585 2l-6.75 9.64 1.953 2.79L20.492 2zM17.292 7.965v13.437h3.2V3.395z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GrokIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>
diff --git a/src/components/Apps/ChatAi/models/ModelIcon.vue b/src/components/Apps/ChatAi/models/ModelIcon.vue
new file mode 100644
index 000000000..77f8e85ca
--- /dev/null
+++ b/src/components/Apps/ChatAi/models/ModelIcon.vue
@@ -0,0 +1,49 @@
+<template>
+  <component
+    :is="resolvedIcon"
+    v-if="resolvedIcon"
+    :class-name="className"
+    :stroke-width="strokeWidth"
+  />
+</template>
+
+<script>
+import ChatGPTIcon from './ChatGPT.vue'
+import DeepSeekIcon from './DeepSeek.vue'
+import GrokIcon from './Grok.vue'
+import ClaudeIcon from './Claude.vue'
+import GeminiIcon from './Gemini.vue'
+
+export default {
+  name: 'ModelIcon',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: 'size-5'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  },
+  computed: {
+    normalizedName() {
+      return (this.name || '').toLowerCase()
+    },
+    resolvedIcon() {
+      const name = this.normalizedName
+      if (!name) return null
+      if (name.includes('gpt')) return ChatGPTIcon
+      if (name.includes('deep-seek')) return DeepSeekIcon
+      if (name.includes('grok')) return GrokIcon
+      if (name.includes('claude')) return ClaudeIcon
+      if (name.includes('gemini')) return GeminiIcon
+      return null
+    }
+  }
+}
+</script>
diff --git a/src/views/settings/Feature/components/ChatProvidersField.vue b/src/views/settings/Feature/components/ChatProvidersField.vue
index f96e4dc1e..9150b41c5 100644
--- a/src/views/settings/Feature/components/ChatProvidersField.vue
+++ b/src/views/settings/Feature/components/ChatProvidersField.vue
@@ -23,7 +23,7 @@
           <el-input
             v-model="row.base_url"
             size="mini"
-            placeholder="https://api.example.com/v1"
+            :placeholder="defaultKaelBase"
             @input="emitChange"
           />
         </template>
@@ -49,6 +49,16 @@
           />
         </template>
       </el-table-column>
+      <el-table-column :label="$t('Model')" min-width="140">
+        <template #default="{ row }">
+          <el-input
+            v-model="row.model"
+            size="mini"
+            placeholder="gpt-4o-mini"
+            @input="emitChange"
+          />
+        </template>
+      </el-table-column>
       <el-table-column :label="$t('Assistant')" min-width="160">
         <template #default="{ row }">
           <el-switch
@@ -76,6 +86,14 @@
 <script>
 import cloneDeep from 'lodash/cloneDeep'
 
+const rawKaelBase = process.env.VUE_APP_KAEL_HOST || '/kael/api'
+let defaultKaelBase = rawKaelBase
+if (!defaultKaelBase.includes('/kael')) {
+  defaultKaelBase = `${defaultKaelBase.replace(/\/$/, '')}/kael/api`
+} else if (!defaultKaelBase.includes('/kael/api')) {
+  defaultKaelBase = `${defaultKaelBase.replace(/\/$/, '')}/api`
+}
+
 export default {
   name: 'ChatProvidersField',
   props: {
@@ -87,7 +105,8 @@ export default {
       type: Array,
       default: () => ([
         { label: 'Ollama', value: 'ollama' },
-        { label: 'OpenAI', value: 'openai' }
+        { label: 'OpenAI', value: 'openai' },
+        { label: 'Kael', value: 'kael' }
       ])
     }
   },
@@ -95,7 +114,8 @@ export default {
     const { providers, defaultProvider } = this.normalizeValue(this.value)
     return {
       localProviders: providers,
-      defaultProvider: this.pickDefault(defaultProvider, providers)
+      defaultProvider: this.pickDefault(defaultProvider, providers),
+      defaultKaelBase
     }
   },
   watch: {
@@ -111,9 +131,10 @@ export default {
   methods: {
     emptyProvider() {
       return {
-        type: 'openai',
-        base_url: 'https://api.openai.com/v1',
-        api_key: 'sk-JumpserveraAndWebOpenUI',
+        type: 'kael',
+        base_url: defaultKaelBase,
+        api_key: '',
+        model: 'gpt-4o-mini',
         proxy: '',
         is_assistant: false
       }
@@ -144,9 +165,9 @@ export default {
       this.$emit('change', { providers, defaultProvider })
     },
     handleAssistantChange(current) {
-      if (current.IsAssistant) {
+      if (current.is_assistant) {
         this.localProviders.forEach(item => {
-          if (item !== current) item.IsAssistant = false
+          if (item !== current) item.is_assistant = false
         })
       }
       this.emitChange()
diff --git a/yarn.lock b/yarn.lock
index 97fe06133..73e12f37f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1069,6 +1069,11 @@
   resolved "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
+  integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.8.1"
   resolved "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz#4d4fbb1108993aaa362116247c3d18188a2c6c85"
@@ -4767,6 +4772,13 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@~4.3.1, debug@~4.3.2:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -5301,6 +5313,22 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~6.6.1:
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.6.3.tgz#815393fa24f30b8e6afa8f77ccca2f28146be6de"
+  integrity sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.17.1"
+    xmlhttprequest-ssl "~2.1.1"
+
+engine.io-parser@~5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
+  integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
+
 enhanced-resolve@^4.1.0, enhanced-resolve@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
@@ -12884,6 +12912,24 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+socket.io-client@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.1.tgz#1941eca135a5490b94281d0323fe2a35f6f291cb"
+  integrity sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.6.1"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 sockjs-client@^1.5.0:
   version "1.6.1"
   resolved "https://registry.npmmirror.com/sockjs-client/-/sockjs-client-1.6.1.tgz#350b8eda42d6d52ddc030c39943364c11dcad806"
@@ -14208,16 +14254,16 @@ utils-merge@1.0.1:
   resolved "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@8.3.2, uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
 v-sanitize@^0.0.13:
   version "0.0.13"
   resolved "https://registry.npmmirror.com/v-sanitize/-/v-sanitize-0.0.13.tgz#d98e3eee3277a2b3a632bc2ba119c088967da0c4"
@@ -14940,11 +14986,21 @@ ws@^6.0.0, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
+ws@~8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
+xmlhttprequest-ssl@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz#e9e8023b3f29ef34b97a859f584c5e6c61418e23"
+  integrity sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==
+
 xss@^1.0.14, xss@^1.0.9:
   version "1.0.15"
   resolved "https://registry.npmmirror.com/xss/-/xss-1.0.15.tgz#96a0e13886f0661063028b410ed1b18670f4e59a"