BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add optional activity header timestamps in chat settings

Browse Source 
Add a new Chat checkbox to toggle timestamps for tool, reasoning, and justification headers (default off).
Keep assistant message footer timestamps visible and switch to a more readable compact date format.
Preserve hover timestamp overlays with chat-surface background when the new setting is enabled.
This commit is contained in:
Bohdan Triapitsyn
2026-03-04 20:08:52 +02:00
parent d1a41000ca
commit 895d1ffa9a
7 changed files with 86 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/message/parts/ReasoningPart.tsx
+9 -11
View File
@@ -83,9 +83,6 @@ const LiveDuration: React.FC<{ start: number; end?: number; active: boolean }> =
return <>{formatDuration(start, end, now)}</>;
};
// TODO: Re-enable reasoning/justification header timestamps after hover UX is redesigned.
const ENABLE_REASONING_HEADER_TIMESTAMPS = false;
type ReasoningTimelineBlockProps = {
text: string;
variant: ReasoningVariant;
@@ -103,6 +100,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
}) => {
const [isExpanded, setIsExpanded] = React.useState(false);
const isMobile = useUIStore((state) => state.isMobile);
const showActivityHeaderTimestamps = useUIStore((state) => state.showActivityHeaderTimestamps);
const summary = React.useMemo(() => getReasoningSummary(text), [text]);
const { label, Icon } = variantConfig[variant];
@@ -166,21 +164,21 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
{typeof timeStart === 'number' ? (
<span className="relative flex-shrink-0 tabular-nums text-right">
<span
className={cn(
'text-muted-foreground/80 transition-opacity duration-150',
!isMobile && endedTimestampText && ENABLE_REASONING_HEADER_TIMESTAMPS && 'group-hover/tool:opacity-0'
)}
>
className={cn(
'text-muted-foreground/80 transition-opacity duration-150',
!isMobile && endedTimestampText && showActivityHeaderTimestamps && 'group-hover/tool:opacity-0'
)}
>
<LiveDuration
start={timeStart}
end={timeEnd}
active={typeof timeEnd !== 'number'}
/>
</span>
{!isMobile && endedTimestampText && ENABLE_REASONING_HEADER_TIMESTAMPS ? (
{!isMobile && endedTimestampText && showActivityHeaderTimestamps ? (
<span
className={cn(
'pointer-events-none absolute right-0 top-0 whitespace-nowrap text-muted-foreground/70 transition-opacity duration-150',
'pointer-events-none absolute right-0 top-0 z-10 whitespace-nowrap rounded-sm bg-[var(--surface-background)] px-1 text-muted-foreground/70 transition-opacity duration-150',
'opacity-0 group-hover/tool:opacity-100'
)}
>
@@ -189,7 +187,7 @@ export const ReasoningTimelineBlock: React.FC<ReasoningTimelineBlockProps> = ({
) : null}
</span>
) : null}
{typeof timeStart !== 'number' && !isMobile && endedTimestampText && ENABLE_REASONING_HEADER_TIMESTAMPS ? (
{typeof timeStart !== 'number' && !isMobile && endedTimestampText && showActivityHeaderTimestamps ? (
<span className="text-muted-foreground/70 flex-shrink-0 tabular-nums">
{endedTimestampText}
</span>