From 42a5e4052a368891fc3707559218f30c9820a8c0 Mon Sep 17 00:00:00 2001
From: ekko <152005280+EKKOLearnAI@users.noreply.github.com>
Date: Wed, 22 Apr 2026 08:47:44 +0800
Subject: [PATCH] chore: bump version to 0.4.2-beta.1 and improve chat UX
 (#122)

* chore: bump version to 0.4.2-beta.1 and improve chat UX

- Bump version to 0.4.2-beta.1
- Fix live monitor session selected style to match chat session style
- Add thin scrollbar with stable gutter to live monitor sidebar
- Fix live monitor detail scroll on mobile
- Show new chat button as icon-only on mobile using JS detection

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: fix version to 0.4.2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                                  |  2 +-
 .../src/components/hermes/chat/ChatPanel.vue  |  6 ++--
 .../hermes/chat/ConversationMonitorPane.vue   | 28 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 46c858b..b35e648 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hermes-web-ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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",
diff --git a/packages/client/src/components/hermes/chat/ChatPanel.vue b/packages/client/src/components/hermes/chat/ChatPanel.vue
index 5e0a58a..3df659f 100644
--- a/packages/client/src/components/hermes/chat/ChatPanel.vue
+++ b/packages/client/src/components/hermes/chat/ChatPanel.vue
@@ -29,6 +29,7 @@ const showSessions = ref(
 )
 const lastChatSessionsVisibility = ref(showSessions.value)
 let mobileQuery: MediaQueryList | null = null
+const isMobile = ref(false)
 
 function handleSessionClick(sessionId: string) {
   chatStore.switchSession(sessionId)
@@ -47,6 +48,7 @@ function handleModeChange(mode: 'chat' | 'live') {
 }
 
 function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
+  isMobile.value = e.matches
   if (e.matches && showSessions.value) {
     showSessions.value = false
   }
@@ -432,11 +434,11 @@ async function handleRenameConfirm() {
               </template>
               {{ t('chat.copySessionId') }}
             </NTooltip>
-            <NButton size="small" @click="handleNewChat">
+            <NButton size="small" :circle="isMobile" @click="handleNewChat">
               <template #icon>
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
               </template>
-              {{ t('chat.newChat') }}
+              <template v-if="!isMobile">{{ t('chat.newChat') }}</template>
             </NButton>
           </template>
         </div>
diff --git a/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue b/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue
index 2587d29..932a7f2 100644
--- a/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue
+++ b/packages/client/src/components/hermes/chat/ConversationMonitorPane.vue
@@ -191,6 +191,20 @@ onUnmounted(() => {
   border-right: 1px solid $border-color;
   overflow-y: auto;
   flex-shrink: 0;
+  scrollbar-gutter: stable;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba($text-muted, 0.3);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba($text-muted, 0.5);
+  }
 }
 
 .conversation-monitor__session {
@@ -204,7 +218,13 @@ onUnmounted(() => {
   cursor: pointer;
 
   &.active {
-    background: rgba($accent-primary, 0.08);
+    background: rgba(var(--accent-primary-rgb), 0.12);
+    color: $text-primary;
+    font-weight: 500;
+  }
+
+  &.active .conversation-monitor__session-title {
+    color: $accent-primary;
   }
 }
 
@@ -294,6 +314,12 @@ onUnmounted(() => {
     max-height: 220px;
     border-right: 0;
     border-bottom: 1px solid $border-color;
+    flex-shrink: 0;
+  }
+
+  .conversation-monitor__detail {
+    min-height: 0;
+    overflow: hidden;
   }
 }
 </style>