Merge pull request #58 from EKKOLearnAI/dev

fix: provider-aware model selection (#52)

.gitignore

@@ -19,7 +19,7 @@ packages/server/data/
 packages/server/node_modules/
 .hermes-web-ui/
 hermes_data/
-
+hermes-dependencies.md
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hermes-web-ui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Web dashboard for Hermes Agent — multi-platform AI chat, session management, scheduled jobs, usage analytics & channel configuration (Telegram, Discord, Slack, WhatsApp)",
   "repository": {
     "type": "git",

packages/client/src/api/hermes/system.ts

@@ -33,6 +33,7 @@ export interface AvailableModelGroup {
 
 export interface AvailableModelsResponse {
   default: string
+  default_provider: string
   groups: AvailableModelGroup[]
 }
 

packages/client/src/components/hermes/chat/MessageList.vue

@@ -31,6 +31,12 @@ const currentToolCalls = computed(() => {
   return [...tools].reverse();
 });
 
+function isNearBottom(threshold = 200): boolean {
+  const el = listRef.value;
+  if (!el) return true;
+  return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+}
+
 function scrollToBottom() {
   nextTick(() => {
     if (listRef.value) {
@@ -39,18 +45,37 @@ function scrollToBottom() {
   });
 }
 
-watch(() => chatStore.messages.length, scrollToBottom);
+// Scroll to bottom once when messages are first loaded
 watch(
-  () => chatStore.messages[chatStore.messages.length - 1]?.content,
+  () => chatStore.activeSessionId,
-  scrollToBottom,
+  (id) => {
+    if (id) scrollToBottom();
+  },
+  { immediate: true },
 );
+
+// When a run starts (user just sent a message), always scroll to bottom once
 watch(
   () => chatStore.isRunActive,
   (v) => {
     if (v) scrollToBottom();
   },
 );
-watch(currentToolCalls, scrollToBottom);
+
+// During streaming, only auto-scroll if the user is already near the bottom
+watch(
+  () => chatStore.messages[chatStore.messages.length - 1]?.content,
+  () => {
+    if (!chatStore.isStreaming) { scrollToBottom(); return; }
+    if (!isNearBottom()) return;
+    scrollToBottom();
+  },
+);
+watch(currentToolCalls, () => {
+  if (!chatStore.isStreaming) { scrollToBottom(); return; }
+  if (!isNearBottom()) return;
+  scrollToBottom();
+});
 </script>
 
 <template>
@@ -171,7 +196,7 @@ watch(currentToolCalls, scrollToBottom);
   display: flex;
   flex-direction: column;
   gap: 4px;
-  max-height: 120px;
+  max-height: 213px;
   overflow-y: auto;
   padding-top: 4px;
   scrollbar-width: none;
@@ -191,6 +216,10 @@ watch(currentToolCalls, scrollToBottom);
   background: rgba(0, 0, 0, 0.03);
   border-radius: $radius-sm;
 
+  .dark & {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
   .tool-call-icon {
     flex-shrink: 0;
     color: $text-muted;

packages/client/src/components/layout/ModelSelector.vue

@@ -1,41 +1,105 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
-import { NSelect } from 'naive-ui'
+import { NModal, NInput } from 'naive-ui'
 import { useAppStore } from '@/stores/hermes/app'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-
 const appStore = useAppStore()
 
-const options = computed(() =>
+const showModal = ref(false)
-  appStore.modelGroups.map(g => ({
+const searchQuery = ref('')
-    label: g.label,
+const collapsedGroups = ref<Record<string, boolean>>({})
-    type: 'group' as const,
-    key: g.provider,
-    children: g.models.map(m => ({
-      label: m,
-      value: m,
-    })),
-  })),
-)
 
-function handleChange(value: string | number | Array<string | number>) {
+const filteredGroups = computed(() => {
-  if (typeof value === 'string') {
+  const q = searchQuery.value.toLowerCase().trim()
-    appStore.switchModel(value)
+  if (!q) return appStore.modelGroups
-  }
+  return appStore.modelGroups
+    .map(g => ({
+      ...g,
+      models: g.models.filter(m => m.toLowerCase().includes(q)),
+    }))
+    .filter(g => g.models.length > 0 || g.label.toLowerCase().includes(q))
+})
+
+function toggleGroup(provider: string) {
+  collapsedGroups.value[provider] = !collapsedGroups.value[provider]
+}
+
+function isGroupCollapsed(provider: string) {
+  return !!collapsedGroups.value[provider]
+}
+
+function handleSelect(model: string, provider: string) {
+  appStore.switchModel(model, provider)
+  showModal.value = false
+  searchQuery.value = ''
+}
+
+function openModal() {
+  collapsedGroups.value = {}
+  searchQuery.value = ''
+  showModal.value = true
 }
 </script>
 
 <template>
   <div class="model-selector">
     <div class="model-label">{{ t('models.title') }}</div>
-    <NSelect
+    <button class="model-trigger" @click="openModal">
-      :value="appStore.selectedModel"
+      <span class="model-name" :title="appStore.selectedModel">{{ appStore.selectedModel || '—' }}</span>
-      :options="options"
+      <svg class="model-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      size="small"
+        <polyline points="6 9 12 15 18 9" />
-      @update:value="handleChange"
+      </svg>
-    />
+    </button>
+
+    <NModal
+      v-model:show="showModal"
+      preset="card"
+      :title="t('models.title')"
+      :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+      :mask-closable="true"
+    >
+      <NInput
+        v-model:value="searchQuery"
+        :placeholder="t('models.searchPlaceholder')"
+        clearable
+        size="small"
+        class="model-search"
+      />
+      <div class="model-list">
+        <div v-for="group in filteredGroups" :key="group.provider" class="model-group">
+          <div class="model-group-header" @click="toggleGroup(group.provider)">
+            <svg
+              class="model-group-arrow"
+              :class="{ collapsed: isGroupCollapsed(group.provider) }"
+              width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <span class="model-group-label">{{ group.label }}</span>
+            <span class="model-group-count">{{ group.models.length }}</span>
+          </div>
+          <div v-show="!isGroupCollapsed(group.provider)" class="model-group-items">
+            <div
+              v-for="model in group.models"
+              :key="model"
+              class="model-item"
+              :class="{ active: model === appStore.selectedModel && group.provider === appStore.selectedProvider }"
+              @click="handleSelect(model, group.provider)"
+            >
+              <span class="model-item-name">{{ model }}</span>
+              <svg v-if="model === appStore.selectedModel && group.provider === appStore.selectedProvider" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div v-if="filteredGroups.length === 0" class="model-empty">
+          {{ searchQuery ? 'No results' : 'No models' }}
+        </div>
+      </div>
+    </NModal>
   </div>
 </template>
 
@@ -55,4 +119,134 @@ function handleChange(value: string | number | Array<string | number>) {
   letter-spacing: 0.5px;
   margin-bottom: 6px;
 }
+
+.model-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  background: $bg-input;
+  border: 1px solid $border-color;
+  border-radius: $radius-sm;
+  color: $text-primary;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: $accent-muted;
+  }
+}
+
+.model-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.model-arrow {
+  flex-shrink: 0;
+  color: $text-muted;
+}
+
+.model-search {
+  margin-bottom: 12px;
+}
+
+.model-list {
+  max-height: 50vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.model-group {
+  margin-bottom: 4px;
+}
+
+.model-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-secondary;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  user-select: none;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: $bg-secondary;
+  }
+}
+
+.model-group-arrow {
+  flex-shrink: 0;
+  transition: transform $transition-fast;
+
+  &.collapsed {
+    transform: rotate(-90deg);
+  }
+}
+
+.model-group-label {
+  flex: 1;
+}
+
+.model-group-count {
+  font-size: 11px;
+  color: $text-muted;
+  font-weight: 400;
+}
+
+.model-group-items {
+  padding-left: 8px;
+}
+
+.model-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 13px;
+  color: $text-secondary;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: rgba(var(--accent-primary-rgb), 0.06);
+    color: $text-primary;
+  }
+
+  &.active {
+    color: $accent-primary;
+    font-weight: 500;
+  }
+}
+
+.model-item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: $font-code;
+  font-size: 12px;
+}
+
+.model-check {
+  flex-shrink: 0;
+  color: $accent-primary;
+}
+
+.model-empty {
+  padding: 24px 0;
+  text-align: center;
+  font-size: 13px;
+  color: $text-muted;
+}
 </style>

packages/client/src/i18n/locales/en.ts

@@ -190,6 +190,7 @@ export default {
   // Models
   models: {
     title: 'Models',
+    searchPlaceholder: 'Search models...',
     addProvider: 'Add Provider',
     providerType: 'Provider Type',
     preset: 'Preset',

packages/client/src/i18n/locales/zh.ts

@@ -190,6 +190,7 @@ export default {
   // 模型
   models: {
     title: '模型',
+    searchPlaceholder: '搜索模型...',
     addProvider: '添加 Provider',
     providerType: 'Provider 类型',
     preset: '预设',

packages/client/src/stores/hermes/app.ts

@@ -18,6 +18,7 @@ export const useAppStore = defineStore('app', () => {
   const updating = ref(false)
   const modelGroups = ref<AvailableModelGroup[]>([])
   const selectedModel = ref('')
+  const selectedProvider = ref('')
   const healthPollTimer = ref<ReturnType<typeof setInterval>>()
 
   // Settings
@@ -56,6 +57,7 @@ export const useAppStore = defineStore('app', () => {
       const res = await fetchAvailableModels()
       modelGroups.value = res.groups
       selectedModel.value = res.default
+      selectedProvider.value = res.default_provider || ''
     } catch {
       // ignore
     }
@@ -68,6 +70,7 @@ export const useAppStore = defineStore('app', () => {
       const provider = providerOverride || group?.provider || ''
       await updateDefaultModel({ default: modelId, provider })
       selectedModel.value = modelId
+      selectedProvider.value = provider || ''
     } catch (err: any) {
       console.error('Failed to switch model:', err)
     }
@@ -117,6 +120,7 @@ export const useAppStore = defineStore('app', () => {
     doUpdate,
     modelGroups,
     selectedModel,
+    selectedProvider,
     streamEnabled,
     sessionPersistence,
     maxTokens,

packages/client/src/styles/variables.scss

@@ -75,9 +75,9 @@
   --accent-muted: #888888;
 
   // Text
-  --text-primary: #e0e0e0;
+  --text-primary: #f0f0f0;
-  --text-secondary: #a0a0a0;
+  --text-secondary: #c0c0c0;
-  --text-muted: #666666;
+  --text-muted: #888888;
 
   // Status
   --success: #66bb6a;
@@ -98,10 +98,10 @@
   --accent-info: #6ba3d6;
 
   // RGB components
-  --accent-primary-rgb: 224, 224, 224;
+  --accent-primary-rgb: 240, 240, 240;
   --accent-hover-rgb: 245, 245, 245;
-  --text-primary-rgb: 224, 224, 224;
+  --text-primary-rgb: 240, 240, 240;
-  --text-muted-rgb: 102, 102, 102;
+  --text-muted-rgb: 136, 136, 136;
   --success-rgb: 102, 187, 106;
   --error-rgb: 239, 83, 80;
   --warning-rgb: 255, 183, 77;

packages/client/src/views/hermes/GatewaysView.vue

@@ -54,8 +54,7 @@ async function handleToggle(name: string, running: boolean) {
               </NTag>
               <NButton
                 size="small"
-                :type="gw.running ? 'warning' : 'default'"
+                :type="gw.running ? 'warning' : 'primary'"
-                :color="gw.running ? undefined : '#18181b'"
                 round
                 @click="handleToggle(gw.profile, gw.running)"
               >

packages/server/src/routes/hermes/filesystem.ts

@@ -466,8 +466,10 @@ fsRoutes.get('/api/hermes/available-models', async (ctx) => {
     const config = await readConfigYaml()
     const modelSection = config.model
     let currentDefault = ''
+    let currentDefaultProvider = ''
     if (typeof modelSection === 'object' && modelSection !== null) {
       currentDefault = String(modelSection.default || '').trim()
+      currentDefaultProvider = String(modelSection.provider || '').trim()
     } else if (typeof modelSection === 'string') {
       currentDefault = modelSection.trim()
     }
@@ -592,7 +594,7 @@ fsRoutes.get('/api/hermes/available-models', async (ctx) => {
       return
     }
 
-    ctx.body = { default: currentDefault, groups: dedupedGroups }
+    ctx.body = { default: currentDefault, default_provider: currentDefaultProvider, groups: dedupedGroups }
   } catch (err: any) {
     ctx.status = 500
     ctx.body = { error: err.message }