on main help sign in
Merge pull request #2204 from charmbracelet/charm-1151-toggling-open-a-block-while-streaming-causes-jitter

fix(ui): chat: use follow indicator to determine auto-scrolling behavior

commitd34c56b019110ed23d886555b0209dd70cc2c34f authorAyman Bagabas <ayman.bagabas@gmail.com> dateFri 13 Feb 2026, 14:20 (8 months ago) parent1f9f190
3 files changed+71−26
internal/ui/list/list.go+2−4 internal/ui/model/chat.go+58−13 internal/ui/model/ui.go+11−9
internal/ui/list/list.go+2−4
@@ -77,9 +77,7 @@ func (l *List) Gap() int {
7777
7878// AtBottom returns whether the list is showing the last item at the bottom.
7979func (l *List) AtBottom() bool {
80− const margin = 2
81−
82− if len(l.items) == 0 || l.offsetIdx >= len(l.items)-1 {
80+ if len(l.items) == 0 {
8381 return true
8482 }
8583
@@ -94,7 +92,7 @@ func (l *List) AtBottom() bool {
9492 totalHeight += itemHeight
9593 }
9694
97− return totalHeight-l.offsetLine-margin <= l.height
95+ return totalHeight-l.offsetLine <= l.height
9896}
9997
10098// SetReverse shows the list in reverse order.
internal/ui/model/chat.go+58−13
@@ -59,6 +59,10 @@ type Chat struct {
5959
6060 // Pending single click action (delayed to detect double-click)
6161 pendingClickID int // Incremented on each click to invalidate old pending clicks
62+
63+ // follow is a flag to indicate whether the view should auto-scroll to
64+ // bottom on new messages.
65+ follow bool
6266}
6367
6468// NewChat creates a new instance of [Chat] that handles chat interactions and
@@ -93,8 +97,8 @@ func (m *Chat) Draw(scr uv.Screen, area uv.Rectangle) {
9397func (m *Chat) SetSize(width, height int) {
9498 m.list.SetSize(width, height)
9599 // Anchor to bottom if we were at the bottom.
96− if m.list.AtBottom() {
97− m.list.ScrollToBottom()
100+ if m.AtBottom() {
101+ m.ScrollToBottom()
98102 }
99103}
100104
@@ -120,7 +124,7 @@ func (m *Chat) SetMessages(msgs ...chat.MessageItem) {
120124 items[i] = msg
121125 }
122126 m.list.SetItems(items...)
123− m.list.ScrollToBottom()
127+ m.ScrollToBottom()
124128}
125129
126130// AppendMessages appends a new message item to the chat list.
@@ -239,31 +243,72 @@ func (m *Chat) Blur() {
239243 m.list.Blur()
240244}
241245
246+// AtBottom returns whether the chat list is currently scrolled to the bottom.
247+func (m *Chat) AtBottom() bool {
248+ return m.list.AtBottom()
249+}
250+
251+// Follow returns whether the chat view is in follow mode (auto-scroll to
252+// bottom on new messages).
253+func (m *Chat) Follow() bool {
254+ return m.follow
255+}
256+
257+// ScrollToBottom scrolls the chat view to the bottom.
258+func (m *Chat) ScrollToBottom() {
259+ m.list.ScrollToBottom()
260+ m.follow = true // Enable follow mode when user scrolls to bottom
261+}
262+
263+// ScrollToTop scrolls the chat view to the top.
264+func (m *Chat) ScrollToTop() {
265+ m.list.ScrollToTop()
266+ m.follow = false // Disable follow mode when user scrolls up
267+}
268+
269+// ScrollBy scrolls the chat view by the given number of line deltas.
270+func (m *Chat) ScrollBy(lines int) {
271+ m.list.ScrollBy(lines)
272+ m.follow = lines > 0 && m.AtBottom() // Disable follow mode if user scrolls up
273+}
274+
275+// ScrollToSelected scrolls the chat view to the selected item.
276+func (m *Chat) ScrollToSelected() {
277+ m.list.ScrollToSelected()
278+ m.follow = m.AtBottom() // Disable follow mode if user scrolls up
279+}
280+
281+// ScrollToIndex scrolls the chat view to the item at the given index.
282+func (m *Chat) ScrollToIndex(index int) {
283+ m.list.ScrollToIndex(index)
284+ m.follow = m.AtBottom() // Disable follow mode if user scrolls up
285+}
286+
242287// ScrollToTopAndAnimate scrolls the chat view to the top and returns a command to restart
243288// any paused animations that are now visible.
244289func (m *Chat) ScrollToTopAndAnimate() tea.Cmd {
245− m.list.ScrollToTop()
290+ m.ScrollToTop()
246291 return m.RestartPausedVisibleAnimations()
247292}
248293
249294// ScrollToBottomAndAnimate scrolls the chat view to the bottom and returns a command to
250295// restart any paused animations that are now visible.
251296func (m *Chat) ScrollToBottomAndAnimate() tea.Cmd {
252− m.list.ScrollToBottom()
297+ m.ScrollToBottom()
253298 return m.RestartPausedVisibleAnimations()
254299}
255300
256301// ScrollByAndAnimate scrolls the chat view by the given number of line deltas and returns
257302// a command to restart any paused animations that are now visible.
258303func (m *Chat) ScrollByAndAnimate(lines int) tea.Cmd {
259− m.list.ScrollBy(lines)
304+ m.ScrollBy(lines)
260305 return m.RestartPausedVisibleAnimations()
261306}
262307
263308// ScrollToSelectedAndAnimate scrolls the chat view to the selected item and returns a
264309// command to restart any paused animations that are now visible.
265310func (m *Chat) ScrollToSelectedAndAnimate() tea.Cmd {
266− m.list.ScrollToSelected()
311+ m.ScrollToSelected()
267312 return m.RestartPausedVisibleAnimations()
268313}
269314
@@ -438,10 +483,10 @@ func (m *Chat) MessageItem(id string) chat.MessageItem {
438483func (m *Chat) ToggleExpandedSelectedItem() {
439484 if expandable, ok := m.list.SelectedItem().(chat.Expandable); ok {
440485 if !expandable.ToggleExpanded() {
441− m.list.ScrollToIndex(m.list.Selected())
486+ m.ScrollToIndex(m.list.Selected())
442487 }
443− if m.list.AtBottom() {
444− m.list.ScrollToBottom()
488+ if m.AtBottom() {
489+ m.ScrollToBottom()
445490 }
446491 }
447492}
@@ -549,11 +594,11 @@ func (m *Chat) HandleDelayedClick(msg DelayedClickMsg) bool {
549594 // Toggle expansion if applicable.
550595 if expandable, ok := selectedItem.(chat.Expandable); ok {
551596 if !expandable.ToggleExpanded() {
552− m.list.ScrollToIndex(m.list.Selected())
597+ m.ScrollToIndex(m.list.Selected())
553598 }
554599 }
555− if m.list.AtBottom() {
556− m.list.ScrollToBottom()
600+ if m.AtBottom() {
601+ m.ScrollToBottom()
557602 }
558603 return handled
559604 }
internal/ui/model/ui.go+11−9
@@ -53,6 +53,10 @@ import (
5353 "github.com/charmbracelet/x/editor"
5454)
5555
56+// MouseScrollThreshold defines how many lines to scroll the chat when a mouse
57+// wheel event occurs.
58+const MouseScrollThreshold = 5
59+
5660// Compact mode breakpoints.
5761const (
5862 compactModeWidthBreakpoint = 120
@@ -661,7 +665,7 @@ func (m *UI) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
661665 case uiChat:
662666 switch msg.Button {
663667 case tea.MouseWheelUp:
664− if cmd := m.chat.ScrollByAndAnimate(-5); cmd != nil {
668+ if cmd := m.chat.ScrollByAndAnimate(-MouseScrollThreshold); cmd != nil {
665669 cmds = append(cmds, cmd)
666670 }
667671 if !m.chat.SelectedItemInView() {
@@ -671,7 +675,7 @@ func (m *UI) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
671675 }
672676 }
673677 case tea.MouseWheelDown:
674− if cmd := m.chat.ScrollByAndAnimate(5); cmd != nil {
678+ if cmd := m.chat.ScrollByAndAnimate(MouseScrollThreshold); cmd != nil {
675679 cmds = append(cmds, cmd)
676680 }
677681 if !m.chat.SelectedItemInView() {
@@ -882,7 +886,6 @@ func (m *UI) loadNestedToolCalls(items []chat.MessageItem) {
882886// if the message is a tool result it will update the corresponding tool call message
883887func (m *UI) appendSessionMessage(msg message.Message) tea.Cmd {
884888 var cmds []tea.Cmd
885− atBottom := m.chat.list.AtBottom()
886889
887890 existing := m.chat.MessageItem(msg.ID)
888891 if existing != nil {
@@ -915,7 +918,7 @@ func (m *UI) appendSessionMessage(msg message.Message) tea.Cmd {
915918 }
916919 }
917920 m.chat.AppendMessages(items...)
918− if atBottom {
921+ if m.chat.Follow() {
919922 if cmd := m.chat.ScrollToBottomAndAnimate(); cmd != nil {
920923 cmds = append(cmds, cmd)
921924 }
@@ -923,7 +926,7 @@ func (m *UI) appendSessionMessage(msg message.Message) tea.Cmd {
923926 if msg.FinishPart() != nil && msg.FinishPart().Reason == message.FinishReasonEndTurn {
924927 infoItem := chat.NewAssistantInfoItem(m.com.Styles, &msg, m.com.Config(), time.Unix(m.lastUserMessageTime, 0))
925928 m.chat.AppendMessages(infoItem)
926− if atBottom {
929+ if m.chat.Follow() {
927930 if cmd := m.chat.ScrollToBottomAndAnimate(); cmd != nil {
928931 cmds = append(cmds, cmd)
929932 }
@@ -938,7 +941,7 @@ func (m *UI) appendSessionMessage(msg message.Message) tea.Cmd {
938941 }
939942 if toolMsgItem, ok := toolItem.(chat.ToolMessageItem); ok {
940943 toolMsgItem.SetResult(&tr)
941− if atBottom {
944+ if m.chat.Follow() {
942945 if cmd := m.chat.ScrollToBottomAndAnimate(); cmd != nil {
943946 cmds = append(cmds, cmd)
944947 }
@@ -973,7 +976,6 @@ func (m *UI) handleClickFocus(msg tea.MouseClickMsg) (cmd tea.Cmd) {
973976func (m *UI) updateSessionMessage(msg message.Message) tea.Cmd {
974977 var cmds []tea.Cmd
975978 existingItem := m.chat.MessageItem(msg.ID)
976− atBottom := m.chat.list.AtBottom()
977979
978980 if existingItem != nil {
979981 if assistantItem, ok := existingItem.(*chat.AssistantMessageItem); ok {
@@ -1022,7 +1024,7 @@ func (m *UI) updateSessionMessage(msg message.Message) tea.Cmd {
10221024 }
10231025
10241026 m.chat.AppendMessages(items...)
1025− if atBottom {
1027+ if m.chat.Follow() {
10261028 if cmd := m.chat.ScrollToBottomAndAnimate(); cmd != nil {
10271029 cmds = append(cmds, cmd)
10281030 }
@@ -1035,7 +1037,7 @@ func (m *UI) updateSessionMessage(msg message.Message) tea.Cmd {
10351037func (m *UI) handleChildSessionMessage(event pubsub.Event[message.Message]) tea.Cmd {
10361038 var cmds []tea.Cmd
10371039
1038− atBottom := m.chat.list.AtBottom()
1040+ atBottom := m.chat.AtBottom()
10391041 // Only process messages with tool calls or results.
10401042 if len(event.Payload.ToolCalls()) == 0 && len(event.Payload.ToolResults()) == 0 {
10411043 return nil