Viewport component fails to scroll after HTTP request
sharpvik opened this issue · 1 comments
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 git@github.com: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.
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.