3babb2cd42
- Added TrajectoryCell, TrajectoryGroupHeader, and TrajectoryTurn components for rendering trajectory steps and groups. - Introduced bilingual support with English and Chinese translations for trajectory notes. - Updated conversation session models to include timestamps for various message types. - Enhanced layout logic to handle expanded assistant blocks and tool results with duration metrics. - Added CSS styles for new components to ensure proper display and alignment.
31 lines
868 B
TypeScript
31 lines
868 B
TypeScript
// TrajectoryTurnHeader: sticky per-turn bar with Input/Output/Think/Time labels.
|
|
|
|
import css from './TrajectoryTurnHeader.module.css'
|
|
|
|
const COLUMN_LABELS = ['Input', 'Output', 'Think', 'Time'] as const
|
|
|
|
export interface TrajectoryTurnHeaderProps {
|
|
/** 1-based turn index shown as `Turn N`. */
|
|
turn: number
|
|
}
|
|
|
|
/**
|
|
* Render the sticky turn header row.
|
|
* @param props.turn - turn index.
|
|
* @returns the sticky header element.
|
|
*/
|
|
export function TrajectoryTurnHeader({ turn }: TrajectoryTurnHeaderProps) {
|
|
return (
|
|
<div className={css.root}>
|
|
<div className={css.inner}>
|
|
<span className={css.title}>Turn {turn}</span>
|
|
<div className={css.columns} aria-hidden="true">
|
|
{COLUMN_LABELS.map((label) => (
|
|
<span key={label} className={css.column}>{label}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|