From 334723ba07fb59960f26695f0e47323269cd9e0f Mon Sep 17 00:00:00 2001 From: ekko <152005280+EKKOLearnAI@users.noreply.github.com> Date: Tue, 5 May 2026 14:03:31 +0800 Subject: [PATCH] fix: remove streaming indicator from history message list (#456) Remove streaming-indicator and tool calls panel from HistoryMessageList component. History sessions should not show "typing" indicators as they are read-only, completed sessions. Changes: - Remove streaming-indicator video animation from history - Remove tool calls panel from history - Clean up unused imports and functions - Remove unnecessary watchers - Clean up related styles (~200 lines removed) - Update version to 0.5.11 in package.json - Update changelog version to 0.5.11 This fixes the issue where history sessions incorrectly showed streaming indicators when there was an active run in another session. Co-authored-by: Claude Sonnet 4.6 --- package.json | 2 +- .../hermes/chat/HistoryMessageList.vue | 313 ------------------ packages/client/src/data/changelog.ts | 2 +- 3 files changed, 2 insertions(+), 315 deletions(-) diff --git a/package.json b/package.json index 23897f6..eb1c750 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hermes-web-ui", - "version": "0.5.10", + "version": "0.5.11", "description": "Self-hosted AI chat dashboard for Hermes Agent — multi-model (Claude, GPT, Gemini, DeepSeek) web UI with Telegram, Discord, Slack, WhatsApp integration", "repository": { "type": "git", diff --git a/packages/client/src/components/hermes/chat/HistoryMessageList.vue b/packages/client/src/components/hermes/chat/HistoryMessageList.vue index 034ac97..ee2c8ec 100644 --- a/packages/client/src/components/hermes/chat/HistoryMessageList.vue +++ b/packages/client/src/components/hermes/chat/HistoryMessageList.vue @@ -4,9 +4,6 @@ import { useI18n } from "vue-i18n"; import MessageItem from "./MessageItem.vue"; import { useChatStore } from "@/stores/hermes/chat"; import type { Session } from "@/stores/hermes/chat"; -import thinkingVideoLight from "@/assets/thinking-light.mp4"; -import thinkingVideoDark from "@/assets/thinking-dark.mp4"; -import { useTheme } from "@/composables/useTheme"; const props = defineProps<{ session?: Session | null; // Optional: use this session instead of chatStore.activeSession @@ -14,26 +11,11 @@ const props = defineProps<{ const chatStore = useChatStore(); const { t } = useI18n(); -const { isDark } = useTheme(); const listRef = ref(); // Use provided session or fall back to chatStore's active session const activeSession = computed(() => props.session || chatStore.activeSession); -function formatTokens(n: number): string { - if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M' - if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K' - return String(n) -} - -function formatToolDuration(seconds: number): string { - if (seconds < 1) return `${Math.round(seconds * 1000)}ms` - if (seconds < 60) return `${Math.round(seconds * 10) / 10}s` - const mins = Math.floor(seconds / 60) - const secs = Math.round(seconds % 60) - return `${mins}m ${secs}s` -} - const displayMessages = computed(() => (activeSession.value?.messages || []).filter((m) => { // Filter out tool messages without name (internal use only) @@ -44,21 +26,6 @@ const displayMessages = computed(() => }), ); -const currentToolCalls = computed(() => { - const msgs = activeSession.value?.messages || []; - // Find the last user message index - let lastUserIdx = -1; - for (let i = msgs.length - 1; i >= 0; i--) { - if (msgs[i].role === "user") { - lastUserIdx = i; - break; - } - } - // Only tool calls after the last user message, newest on top - const tools = msgs.filter((m, i) => m.role === "tool" && i > lastUserIdx); - return [...tools].reverse(); -}); - function isNearBottom(threshold = 200): boolean { const el = listRef.value; if (!el) return true; @@ -104,14 +71,6 @@ watch( }, ); -// When a run starts (user just sent a message), always scroll to bottom once -watch( - () => chatStore.isRunActive, - (v) => { - if (v) scrollToBottom(); - }, -); - // During streaming, only auto-scroll if the user is already near the bottom watch( () => (activeSession.value?.messages || [])[((activeSession.value?.messages || []).length - 1)]?.content, @@ -144,170 +103,6 @@ watch( :message="msg" :highlight="chatStore.focusMessageId === msg.id" /> - -
-
- @@ -356,112 +151,4 @@ watch( .fade-leave-to { opacity: 0; } - -.streaming-indicator { - display: flex; - align-items: flex-start; - gap: 12px; - padding: 4px; - .thinking-video { - width: 120px; - height: 213px; - border-radius: $radius-md; - object-fit: contain; - flex-shrink: 0; - } -} - -.tool-calls-panel { - display: flex; - flex-direction: column; - gap: 4px; - max-height: 213px; - overflow-y: auto; - padding-top: 4px; - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } -} - -.tool-call-item { - display: flex; - align-items: center; - gap: 6px; - font-size: 11px; - color: $text-secondary; - padding: 3px 8px; - background: rgba(0, 0, 0, 0.03); - border-radius: $radius-sm; - - .dark & { - background: rgba(255, 255, 255, 0.06); - } - - &.compression-item { - color: $text-muted; - font-size: 10px; - } - - .tool-call-icon { - flex-shrink: 0; - color: $text-muted; - } - - .tool-call-name { - font-family: $font-code; - flex-shrink: 0; - } - - .tool-call-preview { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 300px; - color: $text-muted; - } -} - -.tool-call-spinner { - width: 10px; - height: 10px; - border: 1.5px solid $text-muted; - border-top-color: transparent; - border-radius: 50%; - animation: spin 0.6s linear infinite; - flex-shrink: 0; -} - -.tool-call-error-icon { - color: #ff4d4f; - flex-shrink: 0; - margin-left: 6px; - display: flex; - align-items: center; - justify-content: center; -} - -.tool-call-duration { - font-size: 10px; - color: $text-muted; - font-family: $font-code; - margin-left: 4px; - flex-shrink: 0; -} - -.tool-call-success-icon { - color: #52c41a; - flex-shrink: 0; - margin-left: 6px; - display: flex; - align-items: center; - justify-content: center; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} diff --git a/packages/client/src/data/changelog.ts b/packages/client/src/data/changelog.ts index b571143..224c711 100644 --- a/packages/client/src/data/changelog.ts +++ b/packages/client/src/data/changelog.ts @@ -6,7 +6,7 @@ export interface ChangelogEntry { export const changelog: ChangelogEntry[] = [ { - version: '0.5.10', + version: '0.5.11', date: '2026-05-05', changes: [ 'changelog.new_0_5_10_1',