1c09ccde22
- ThemeSwitcher: aria-expanded, aria-haspopup, aria-pressed on theme/accent buttons, Escape to close, dialog role - ThinkingBlock: aria-expanded on toggle, region role on content - ThinkingIndicator: role=status, aria-label, decorative icon aria-hidden - ErrorBoundary: role=alert on error state - SessionIcon: aria-hidden on decorative SVG brand icons
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Brain } from 'lucide-react';
|
|
import { useT } from '../hooks/useLocale';
|
|
|
|
/**
|
|
* Animated reasoning/thinking indicator shown during streaming
|
|
* when no text content has appeared yet (thinking=low mode).
|
|
* Displays elapsed time and a pulsing animation.
|
|
*/
|
|
export function ThinkingIndicator() {
|
|
const t = useT();
|
|
const [elapsed, setElapsed] = useState(0);
|
|
const [start] = useState(() => Date.now());
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setElapsed(Math.floor((Date.now() - start) / 1000));
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [start]);
|
|
|
|
const formatElapsed = (s: number) => {
|
|
if (s < 60) return `${s}s`;
|
|
const m = Math.floor(s / 60);
|
|
const rem = s % 60;
|
|
return `${m}m ${rem.toString().padStart(2, '0')}s`;
|
|
};
|
|
|
|
return (
|
|
<div role="status" aria-label={t('thinking.reasoning')} className="flex items-center gap-2 mt-2 animate-fade-in">
|
|
<div className="inline-flex items-center gap-2 rounded-2xl border border-violet-500/15 bg-violet-500/5 px-3 py-1.5">
|
|
<Brain size={14} className="text-violet-300 animate-pulse" aria-hidden="true" />
|
|
<span className="text-xs font-medium text-violet-300">
|
|
{t('thinking.reasoning')}
|
|
</span>
|
|
<span className="text-xs tabular-nums text-violet-300/50" aria-live="off">
|
|
{formatElapsed(elapsed)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|