Skip to content

Various improvements to chat interface #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ScriptSmith merged 23 commits into from
Mar 22, 2026
Merged

Various improvements to chat interface #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
592df5e
Fix overwriting final round text
ScriptSmith Mar 21, 2026
a54706b
Separate reasoning blocks
ScriptSmith Mar 21, 2026
9436b8f
Fix double spacing
ScriptSmith Mar 21, 2026
97ab202
Separate ContentRound component
ScriptSmith Mar 21, 2026
112fe82
Vertical border per-round
ScriptSmith Mar 21, 2026
79f1399
Display artifacts within rounds
ScriptSmith Mar 21, 2026
9dbc160
Don't jump to bottom at end
ScriptSmith Mar 21, 2026
de05d7f
Fix virtualizer pushing scroll down
ScriptSmith Mar 21, 2026
408d3d3
Remove tool call indicator
ScriptSmith Mar 21, 2026
3bf7049
Add compact mode
ScriptSmith Mar 21, 2026
25bcb21
Show rounds on hover
ScriptSmith Mar 22, 2026
793e574
Review fixes
ScriptSmith Mar 22, 2026
87e5e03
Storybook fixes
ScriptSmith Mar 22, 2026
3b41e25
Better constructs for rounds
ScriptSmith Mar 22, 2026
923967a
Show thinking / processing interstitials between rounds
ScriptSmith Mar 22, 2026
fd98901
Higher-level management of streaming status indications
ScriptSmith Mar 22, 2026
49db7ab
Chat UI details as two buttons
ScriptSmith Mar 22, 2026
1a43f95
Make thinking indicator nicer
ScriptSmith Mar 22, 2026
1e9762f
Fix missing reasoning indicator
ScriptSmith Mar 22, 2026
a5450a9
Update compact UI
ScriptSmith Mar 22, 2026
99ddb1f
Fix storybook
ScriptSmith Mar 22, 2026
4cdd07c
Review fixes
ScriptSmith Mar 22, 2026
0e54c67
Add ContentRound story
ScriptSmith Mar 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 81 additions & 93 deletions ui/src/components/ChatMessageList/ChatMessageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,11 @@ export function ChatMessageList({
enabled: messageGroups.length > 0,
});

// Don't adjust scroll position when the actively-streaming item grows —
// the default correction pushes the user further down on every token.
virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) =>
!(item.index === instance.options.count - 1 && hasStreamingResponses);

// Track message count to detect new user messages
const prevMessagesLengthRef = useRef(messages.length);

Expand Down Expand Up @@ -347,15 +352,32 @@ export function ChatMessageList({
<div
className="relative"
style={{
// Use max of virtualizer size and estimated size to prevent layout jumps
height:
Math.max(virtualizer.getTotalSize(), messageGroups.length * 200) +
(hasStreamingResponses ? 200 : 0),
height: Math.max(virtualizer.getTotalSize(), messageGroups.length * 200),
}}
>
{/* Virtualized message groups */}
{virtualizer.getVirtualItems().map((virtualItem) => {
const group = messageGroups[virtualItem.index];
const isLastGroup = virtualItem.index === messageGroups.length - 1;
const activeStreamingIds =
isLastGroup && hasStreamingResponses
? new Set(filteredModelResponses.map((r) => r.instanceId ?? r.model))
: null;
const committedInstanceIds = new Set(
group.assistantResponses
.filter((r) => !activeStreamingIds?.has(r.instanceId ?? r.model ?? ""))
.map((r) => r.instanceId ?? r.model ?? "")
);
const showStreaming =
isLastGroup &&
hasStreamingResponses &&
filteredModelResponses.some(
(r) => !committedInstanceIds.has(r.instanceId ?? r.model)
);
const committedResponses = activeStreamingIds
? group.assistantResponses.filter(
(r) => !activeStreamingIds.has(r.instanceId ?? r.model ?? "")
)
: group.assistantResponses;
return (
<div
key={group.id}
Expand All @@ -370,7 +392,58 @@ export function ChatMessageList({
onSaveEdit={onEditAndRerun}
onRegenerate={onRegenerateAll}
/>
{group.assistantResponses.length > 0 && (
{showStreaming && (
<>
<RoutingDecision />
<ChainProgress
models={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<SynthesisProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<RefinementProgress />
<CritiqueProgress />
<ElectedProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<TournamentProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<ConsensusProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<DebateProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<CouncilProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<HierarchicalProgress />
<ScattershotProgress />
<ExplainerProgress />
<ConfidenceProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
<div
key={streamingSessionIdRef.current}
className="animate-slide-up-bounce"
>
<MultiModelResponse
responses={filteredModelResponses.map((r) => {
const instanceId = r.instanceId ?? r.model;
return {
...r,
instanceId,
label: instanceLabels.get(instanceId),
};
})}
timestamp={streamingTimestampRef.current}
actionConfig={actionConfig}
/>
</div>
</>
)}
{committedResponses.length > 0 && (
<>
{/* Show persisted mode indicators for chained/routed messages */}
{group.assistantResponses[0].modeMetadata?.mode === "routed" && (
Expand Down Expand Up @@ -543,7 +616,7 @@ export function ChatMessageList({
</div>
)}
<MultiModelResponse
responses={group.assistantResponses.map((m) => {
responses={committedResponses.map((m) => {
// Use instanceId if set, otherwise fall back to model for backwards compat
const instanceId = m.instanceId ?? m.model ?? "unknown";
return {
Expand All @@ -560,6 +633,7 @@ export function ChatMessageList({
citations: m.citations,
artifacts: m.artifacts,
toolExecutionRounds: m.toolExecutionRounds,
completedRounds: m.completedRounds,
debugMessageId: m.debugMessageId,
};
})}
Expand Down Expand Up @@ -587,92 +661,6 @@ export function ChatMessageList({
</div>
);
})}

{/*
STREAMING SECTION - Outside Virtualization

Active streaming responses render here, positioned absolutely at the bottom.
This is intentionally outside the virtualized list because:
1. Streaming content height changes constantly (every token)
2. Virtualization re-measures heights, which would cause jank
3. The streaming section should always be visible (no virtualization cutoff)

The key={streamingSessionIdRef.current} ensures animation only plays once
per streaming session, not on every content update.
*/}
{/* Show streaming section when we have streaming responses */}
{hasStreamingResponses && (
<div
className="absolute left-0 right-0"
style={{
// Use virtualizer total size, with fallback to estimated size for unmeasured groups
transform: `translateY(${Math.max(virtualizer.getTotalSize(), messageGroups.length * 200)}px)`,
}}
>
{/* Routing decision indicator for routed mode */}
<RoutingDecision />
{/* Chain progress indicator for chained mode */}
<ChainProgress
models={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Synthesis progress indicator for synthesized mode */}
<SynthesisProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Refinement progress indicator for refined mode */}
<RefinementProgress />
{/* Critique progress indicator for critiqued mode */}
<CritiqueProgress />
{/* Election progress indicator for elected mode */}
<ElectedProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Tournament progress indicator for tournament mode */}
<TournamentProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Consensus progress indicator for consensus mode */}
<ConsensusProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Debate progress indicator for debated mode */}
<DebateProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Council progress indicator for council mode */}
<CouncilProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Hierarchical progress indicator for hierarchical mode */}
<HierarchicalProgress />
{/* Scattershot progress indicator for scattershot mode */}
<ScattershotProgress />
{/* Explainer progress indicator for explainer mode */}
<ExplainerProgress />
{/* Confidence-weighted progress indicator for confidence-weighted mode */}
<ConfidenceProgress
allModels={selectedModels.filter((m) => !disabledModels.includes(m))}
/>
{/* Key ensures animation only plays once per streaming session */}
{hasStreamingResponses && (
<div key={streamingSessionIdRef.current} className="animate-slide-up-bounce">
<MultiModelResponse
responses={filteredModelResponses.map((r) => {
// Use instanceId if set, otherwise fall back to model
const instanceId = r.instanceId ?? r.model;
return {
...r,
instanceId,
label: instanceLabels.get(instanceId),
};
})}
timestamp={streamingTimestampRef.current}
actionConfig={actionConfig}
/>
</div>
)}
</div>
)}
</div>
)}
</div>
Expand Down
38 changes: 21 additions & 17 deletions ui/src/components/ChatView/ChatView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,23 +100,27 @@ const meta: Meta<typeof ChatView> = {
},
},
decorators: [
(Story) => (
<QueryClientProvider client={queryClient}>
<ConfigProvider>
<AuthProvider>
<PreferencesProvider>
<ToastProvider>
<TooltipProvider>
<div className="h-screen">
<Story />
</div>
</TooltipProvider>
</ToastProvider>
</PreferencesProvider>
</AuthProvider>
</ConfigProvider>
</QueryClientProvider>
),
(Story) => {
// Show reasoning & tools in tests
useChatUIStore.setState({ compactMode: false });
return (
<QueryClientProvider client={queryClient}>
<ConfigProvider>
<AuthProvider>
<PreferencesProvider>
<ToastProvider>
<TooltipProvider>
<div className="h-screen">
<Story />
</div>
</TooltipProvider>
</ToastProvider>
</PreferencesProvider>
</AuthProvider>
</ConfigProvider>
</QueryClientProvider>
);
},
],
};

Expand Down
Loading
Loading