From 62d0b9f7f26d37e99b999edc6d8da6da93c22030 Mon Sep 17 00:00:00 2001 From: Haileyesus Date: Wed, 4 Mar 2026 12:49:30 +0300 Subject: [PATCH] style: improve UI for processing banner --- .../chat/view/subcomponents/ClaudeStatus.tsx | 178 ++++++++++++------ src/i18n/locales/en/chat.json | 29 ++- src/i18n/locales/ja/chat.json | 27 +++ src/i18n/locales/ko/chat.json | 29 ++- src/i18n/locales/zh-CN/chat.json | 29 ++- 5 files changed, 236 insertions(+), 56 deletions(-) diff --git a/src/components/chat/view/subcomponents/ClaudeStatus.tsx b/src/components/chat/view/subcomponents/ClaudeStatus.tsx index c5e41cd6..9e297e6a 100644 --- a/src/components/chat/view/subcomponents/ClaudeStatus.tsx +++ b/src/components/chat/view/subcomponents/ClaudeStatus.tsx @@ -1,5 +1,7 @@ import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { cn } from '../../../../lib/utils'; +import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo'; type ClaudeStatusProps = { status: { @@ -12,33 +14,60 @@ type ClaudeStatusProps = { provider?: string; }; -const ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning']; -const SPINNER_CHARS = ['*', '+', 'x', '.']; +const ACTION_KEYS = [ + 'claudeStatus.actions.thinking', + 'claudeStatus.actions.processing', + 'claudeStatus.actions.analyzing', + 'claudeStatus.actions.working', + 'claudeStatus.actions.computing', + 'claudeStatus.actions.reasoning', +]; +const DEFAULT_ACTION_WORDS = ['Thinking', 'Processing', 'Analyzing', 'Working', 'Computing', 'Reasoning']; +const ANIMATION_STEPS = 40; + +const PROVIDER_LABEL_KEYS: Record = { + claude: 'messageTypes.claude', + codex: 'messageTypes.codex', + cursor: 'messageTypes.cursor', + gemini: 'messageTypes.gemini', +}; + +function formatElapsedTime(totalSeconds: number, t: (key: string, options?: Record) => string) { + const minutes = Math.floor(totalSeconds / 60); + const seconds = totalSeconds % 60; + + if (minutes < 1) { + return t('claudeStatus.elapsed.seconds', { count: seconds, defaultValue: '{{count}}s' }); + } + + return t('claudeStatus.elapsed.minutesSeconds', { + minutes, + seconds, + defaultValue: '{{minutes}}m {{seconds}}s', + }); +} export default function ClaudeStatus({ status, onAbort, isLoading, - provider: _provider = 'claude', + provider = 'claude', }: ClaudeStatusProps) { + const { t } = useTranslation('chat'); const [elapsedTime, setElapsedTime] = useState(0); const [animationPhase, setAnimationPhase] = useState(0); - const [fakeTokens, setFakeTokens] = useState(0); useEffect(() => { if (!isLoading) { setElapsedTime(0); - setFakeTokens(0); return; } const startTime = Date.now(); - const tokenRate = 30 + Math.random() * 20; const timer = window.setInterval(() => { const elapsed = Math.floor((Date.now() - startTime) / 1000); setElapsedTime(elapsed); - setFakeTokens(Math.floor(elapsed * tokenRate)); }, 1000); return () => window.clearInterval(timer); @@ -50,68 +79,111 @@ export default function ClaudeStatus({ } const timer = window.setInterval(() => { - setAnimationPhase((previous) => (previous + 1) % SPINNER_CHARS.length); + setAnimationPhase((previous) => (previous + 1) % ANIMATION_STEPS); }, 500); return () => window.clearInterval(timer); }, [isLoading]); - if (!isLoading) { + // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator + if (!isLoading && !status) { return null; } - // Note: showThinking only controls the reasoning accordion in messages, not this processing indicator - const actionIndex = Math.floor(elapsedTime / 3) % ACTION_WORDS.length; - const statusText = status?.text || ACTION_WORDS[actionIndex]; - const tokens = status?.tokens || fakeTokens; - const canInterrupt = status?.can_interrupt !== false; - const currentSpinner = SPINNER_CHARS[animationPhase]; + const actionWords = ACTION_KEYS.map((key, index) => t(key, { defaultValue: DEFAULT_ACTION_WORDS[index] })); + const actionIndex = Math.floor(elapsedTime / 3) % actionWords.length; + const statusText = status?.text || actionWords[actionIndex]; + const cleanStatusText = statusText.replace(/[.]+$/, ''); + const canInterrupt = isLoading && status?.can_interrupt !== false; + const providerLabelKey = PROVIDER_LABEL_KEYS[provider]; + const providerLabel = providerLabelKey + ? t(providerLabelKey) + : t('claudeStatus.providers.assistant', { defaultValue: 'Assistant' }); + const animatedDots = '.'.repeat((animationPhase % 3) + 1); + const elapsedLabel = + elapsedTime > 0 + ? t('claudeStatus.elapsed.label', { + time: formatElapsedTime(elapsedTime, t), + defaultValue: '{{time}} elapsed', + }) + : t('claudeStatus.elapsed.startingNow', { defaultValue: 'Starting now' }); return (
-
-
-
- - {currentSpinner} - +
+
-
-
- {statusText}... - ({elapsedTime}s) - {tokens > 0 && ( - <> - | - - tokens {tokens.toLocaleString()} - - - )} - | - esc to stop +
+
+
+
+ + + {isLoading && ( + + )} + + +
+ +
+
+ {providerLabel} + + {isLoading + ? t('claudeStatus.state.live', { defaultValue: 'Live' }) + : t('claudeStatus.state.paused', { defaultValue: 'Paused' })} + +
+ +

+ {cleanStatusText} + {isLoading && {animatedDots}} +

+ +
+ + {elapsedLabel} + +
+ + {canInterrupt && onAbort && ( +
+ + +

+ {t('claudeStatus.controls.pressEscToStop', { defaultValue: 'Press Esc anytime to stop' })} +

+
+ )}
- - {canInterrupt && onAbort && ( - - )}
); diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json index dc2b3109..ac56dace 100644 --- a/src/i18n/locales/en/chat.json +++ b/src/i18n/locales/en/chat.json @@ -233,10 +233,37 @@ "startCli": "Starting Claude CLI in {{projectName}}", "defaultCommand": "command" }, + "claudeStatus": { + "actions": { + "thinking": "Thinking", + "processing": "Processing", + "analyzing": "Analyzing", + "working": "Working", + "computing": "Computing", + "reasoning": "Reasoning" + }, + "state": { + "live": "Live", + "paused": "Paused" + }, + "elapsed": { + "seconds": "{{count}}s", + "minutesSeconds": "{{minutes}}m {{seconds}}s", + "label": "{{time}} elapsed", + "startingNow": "Starting now" + }, + "controls": { + "stopGeneration": "Stop Generation", + "pressEscToStop": "Press Esc anytime to stop" + }, + "providers": { + "assistant": "Assistant" + } + }, "projectSelection": { "startChatWithProvider": "Select a project to start chatting with {{provider}}" }, "tasks": { "nextTaskPrompt": "Start the next task" } -} \ No newline at end of file +} diff --git a/src/i18n/locales/ja/chat.json b/src/i18n/locales/ja/chat.json index 2c3dda4d..515aa5dd 100644 --- a/src/i18n/locales/ja/chat.json +++ b/src/i18n/locales/ja/chat.json @@ -205,5 +205,32 @@ "runCommand": "{{projectName}}で{{command}}を実行", "startCli": "{{projectName}}でClaude CLIを起動しています", "defaultCommand": "コマンド" + }, + "claudeStatus": { + "actions": { + "thinking": "Thinking", + "processing": "Processing", + "analyzing": "Analyzing", + "working": "Working", + "computing": "Computing", + "reasoning": "Reasoning" + }, + "state": { + "live": "Live", + "paused": "Paused" + }, + "elapsed": { + "seconds": "{{count}}s", + "minutesSeconds": "{{minutes}}m {{seconds}}s", + "label": "{{time}} elapsed", + "startingNow": "Starting now" + }, + "controls": { + "stopGeneration": "Stop Generation", + "pressEscToStop": "Press Esc anytime to stop" + }, + "providers": { + "assistant": "Assistant" + } } } diff --git a/src/i18n/locales/ko/chat.json b/src/i18n/locales/ko/chat.json index ca66e3a9..1b533a08 100644 --- a/src/i18n/locales/ko/chat.json +++ b/src/i18n/locales/ko/chat.json @@ -215,10 +215,37 @@ "startCli": "{{projectName}}에서 Claude CLI 시작", "defaultCommand": "명령어" }, + "claudeStatus": { + "actions": { + "thinking": "Thinking", + "processing": "Processing", + "analyzing": "Analyzing", + "working": "Working", + "computing": "Computing", + "reasoning": "Reasoning" + }, + "state": { + "live": "Live", + "paused": "Paused" + }, + "elapsed": { + "seconds": "{{count}}s", + "minutesSeconds": "{{minutes}}m {{seconds}}s", + "label": "{{time}} elapsed", + "startingNow": "Starting now" + }, + "controls": { + "stopGeneration": "Stop Generation", + "pressEscToStop": "Press Esc anytime to stop" + }, + "providers": { + "assistant": "Assistant" + } + }, "projectSelection": { "startChatWithProvider": "{{provider}}와 채팅을 시작하려면 프로젝트를 선택하세요" }, "tasks": { "nextTaskPrompt": "다음 작업 시작" } -} \ No newline at end of file +} diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json index 1fdbc462..269e9f92 100644 --- a/src/i18n/locales/zh-CN/chat.json +++ b/src/i18n/locales/zh-CN/chat.json @@ -215,10 +215,37 @@ "startCli": "在 {{projectName}} 中启动 Claude CLI", "defaultCommand": "命令" }, + "claudeStatus": { + "actions": { + "thinking": "Thinking", + "processing": "Processing", + "analyzing": "Analyzing", + "working": "Working", + "computing": "Computing", + "reasoning": "Reasoning" + }, + "state": { + "live": "Live", + "paused": "Paused" + }, + "elapsed": { + "seconds": "{{count}}s", + "minutesSeconds": "{{minutes}}m {{seconds}}s", + "label": "{{time}} elapsed", + "startingNow": "Starting now" + }, + "controls": { + "stopGeneration": "Stop Generation", + "pressEscToStop": "Press Esc anytime to stop" + }, + "providers": { + "assistant": "Assistant" + } + }, "projectSelection": { "startChatWithProvider": "选择一个项目以开始与 {{provider}} 聊天" }, "tasks": { "nextTaskPrompt": "开始下一个任务" } -} \ No newline at end of file +}