Viewport component fails to scroll after HTTP request

[sharpvik]

Describe the bug

I'm working on this PR . The project is simple - it's a visual copy of the ChatGPT web interface - an input field and the chat above it. To display chat messages I am using the viewport component but its scrolling seems to break after an HTTP request. I have isolated the issue in two different branches as follows:

In the UI branch we can use mockAskChatGPT to emulate some HTTP request that retrieves a string of text and then we'll put it into openai.ChatCompletionResponse. I wrote this so that you won't have to specify your OpenAI API keys during testing for your own security.

type gptMsg struct {
	answer openai.ChatCompletionResponse
	err    error
}

func (m Model) mockAskChatGPT(question string) tea.Cmd {
	return func() tea.Msg {
		resp, err := http.DefaultClient.Get("https://www.google.com")
		if err != nil {
			return gptMsg{
				err: err,
			}
		}
		content, err := io.ReadAll(resp.Body)
		if err != nil {
			return gptMsg{
				err: err,
			}
		}
		return gptMsg{
			answer: openai.ChatCompletionResponse{
				Choices: []openai.ChatCompletionChoice{
					{
						Message: openai.ChatCompletionMessage{
							Content: string(content),
						},
					},
				},
			},
		}
	}
}

Once gptMsg is delivered to the Update function, viewport stops responding to keys and mouse scroll events properly.

ui.mov

However, if we replace mockAskChatGPT with a function that doesn't perform a request and instead uses a static string placeholder

func (m Model) mockAskChatGPT(question string) tea.Cmd {
	return func() tea.Msg {
		return gptMsg{
			answer: openai.ChatCompletionResponse{
				Choices: []openai.ChatCompletionChoice{
					{
						Message: openai.ChatCompletionMessage{
							Content: string(mockContent),
						},
					},
				},
			},
		}
	}
}

it all works fine again! This is the only difference between the ui and the mock branches that isolates the problem.

mock.mov

Setup

Please complete the following information along with version numbers, if applicable.

• macOS latest
• zsh latest
• native macOS terminal and Warp terminal (results are identical in both cases)

To Reproduce

The difference between the normal flow with the HTTP request and the mock flow can be seen in a branch called mock. To see the difference:

git clone [email protected]:sharpvik/gpt.git
cd gpt

git checkout ui
go build
./gpt key nonsense # this is required by the flow, otherwise API key checks will fail
./gpt repl 
# enter any message and press enter
# you should see HTML code from www.google.com displayed in viewport
# press ESC to unfocus the input
# at this point scroll should work but it won't, which is the bug

git checkout mock
go build
./gpt repl 
# enter any message and press enter
# you should see some Go code because that's what I used as a static placeholder
# press ESC to unfocus the input
# here, scrolling works just fine with the arrow keys and the mouse scroll

Expected behavior

I wanted viewport to scroll but it doesn't once any HTTP request has been performed.

[guitarkeegan]

Ok, for anyone else that has this issue the fix was here. It was basically that the width of the viewport was causing the lines of the http response string to wrap without \n. The fix is below.

charmbracelet/bubbles#56 (comment)