Proposal: Navigation mode for long conversations (auto-collapse assistant responses)

ChatGPT Use cases and examples
1

As conversations grow longer, navigation becomes inefficient due to continuously expanding assistant responses. In long sessions, user messages already function as a natural timeline, while assistant responses dominate screen space.

Problem

  • Assistant responses are often long and visually dominant.
  • Long chats require excessive scrolling.
  • Finding previous information is difficult.
  • UI does not distinguish between “navigation structure” (user prompts) and “content” (assistant responses).

Proposal: Navigation Mode (Compact Chat View)

Introduce an optional UI mode with the following behavior:

Behavior

  • User messages: always expanded
  • Assistant messages: collapsed by default after rendering
  • Only the latest assistant message remains expanded
  • Expanding a message collapses the previously opened one
  • Optional preview line for collapsed assistant messages

Suggested UI Implementation (Frontend Layer)

Data model change (UI state only, no backend change required)

type ChatUIState = {
collapsedMessages: Set; // message IDs
expandedMessageId: string | null; // currently focused assistant message
};

Rendering logic (React-like pseudocode)

function ChatMessage({ message, uiState, setUIState }) {
const isAssistant = message.role === “assistant”;

const isCollapsed =
isAssistant &&
uiState.collapsedMessages.has(message.id);

const isExpanded =
!isCollapsed || uiState.expandedMessageId === message.id;

function toggle() {
if (!isAssistant) return;

setUIState(prev => ({
  ...prev,
  expandedMessageId: message.id,
  collapsedMessages: new Set([
    ...prev.collapsedMessages,
    ...Array.from(prev.collapsedMessages).filter(
      id => id !== message.id
    )
  ])
}));

}

return (
<div className={isCollapsed ? “collapsed” : “expanded”}>
{isAssistant && isCollapsed ? (


:play_button: {message.previewText}

) : (

{message.content}

)}

);
}

Auto-collapse rule (on new message)

function onNewAssistantMessage(messageId: string) {
setUIState(prev => ({
…prev,
collapsedMessages: new Set([
…prev.collapsedMessages,
…(prev.expandedMessageId ? [prev.expandedMessageId] : )
]),
expandedMessageId: messageId
}));
}

Benefits

  • Reduces vertical scrolling in long conversations
  • Improves navigation in technical / multi-step discussions
  • Keeps user messages as the primary structural index
  • No impact on model logic — purely UI layer
  • Lightweight state management

Optional Extensions

  • “Compact Mode” toggle in settings
  • Auto-collapse threshold based on message length
  • Search-within-collapsed previews
  • Pin important assistant responses

This is a UI-only change that could significantly improve usability in long-running chats (coding, planning, debugging, research sessions).

Would be very useful to know if others experience the same navigation issue.