Viewport + textinput sanity check (and a question)

[sector-f]

I'm trying to wrap my head around bubbletea so that I can integrate it with an existing ssh chat program. So, two questions:

1. Am I going about this in a reasonable manner? I definitely still do not have a working mental model of how everything works--e.g. when to return a tea.Cmd from Update and when to return nil
2. Once the viewport gets to the bottom of the terminal, it ends up printing on the same line as the textinput. How can I prevent this? (subtracting 1 from the viewport's height didn't work; it just made the text input get printed one line higher)

package main

import (
	"fmt"
	"os"
	"strings"

	"github.com/charmbracelet/bubbles/textinput"
	"github.com/charmbracelet/bubbles/viewport"
	tea "github.com/charmbracelet/bubbletea"
)

func main() {
	p := tea.NewProgram(newModel(), tea.WithAltScreen())

	err := p.Start()
	if err != nil {
		fmt.Fprintln(os.Stderr, err)
		os.Exit(1)
	}
}

type model struct {
	backlog  []string
	viewport viewport.Model
	input    textinput.Model
}

type newChatMsg string

func newModel() model {
	ti := textinput.New()
	ti.Prompt = "user: "
	ti.Width = 20
	ti.Focus()

	m := model{
		backlog:  []string{},
		viewport: viewport.New(200, 200),
		input:    ti,
	}

	m.viewport.SetContent(strings.Join(m.backlog, "\n"))
	return m
}

func (m model) Init() tea.Cmd {
	return textinput.Blink
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case newChatMsg:
		m.backlog = append(m.backlog, string(msg))
		m.viewport.SetContent(strings.Join(m.backlog, "\n"))

		var cmd tea.Cmd
		m.viewport, cmd = m.viewport.Update(msg)

		return m, cmd
	case tea.KeyMsg:
		switch msg.String() {
		case "ctrl+c":
			return m, tea.Quit
		case "enter":
			value := m.input.Value()
			m.input.Reset()
			model, cmd := m.Update(newChatMsg(value))
			return model, tea.Batch(cmd)
		}
	case tea.WindowSizeMsg:
		m.viewport.Height = msg.Height
		m.viewport.Width = msg.Width
		m.viewport.Update(msg)

		m.input.Width = msg.Width
		m.input.Update(msg)

		return m, nil
	}

	var cmd tea.Cmd
	m.input, cmd = m.input.Update(msg)
	return m, cmd
}

func (m model) View() string {
	return m.viewport.View() + m.input.View()
}

[gairadzi]

Your issue is that you set the viewport to be the height of the entire screen so once the text gets there it is in the same line as the textinput (the lipgloss library helps with that).

I also don't think you need to create a custom message, you can just the run the logic once the Enter is pressed.

Below is a working example - I did the following:

• Moved the logic that updates the backlog to when the enter key message
• Updated the window size logic to account for the textinput height when setting the viewport height
• Updated the view logic to use lipgloss to join the textinput & viewport together
• Added navigation keys (up, down, page up, page down) so that you will be able to scroll the viewport

package main

import (
	"fmt"
	"os"
	"strings"

	"github.com/charmbracelet/bubbles/textinput"
	"github.com/charmbracelet/bubbles/viewport"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

func main() {
	p := tea.NewProgram(newModel(), tea.WithAltScreen())

	err := p.Start()
	if err != nil {
		fmt.Fprintln(os.Stderr, err)
		os.Exit(1)
	}
}

type model struct {
	backlog  []string
	viewport viewport.Model
	input    textinput.Model
}

func newModel() model {
	ti := textinput.New()
	ti.Prompt = "user: "
	ti.Width = 20
	ti.Focus()

	m := model{
		backlog:  []string{},
		viewport: viewport.New(200, 200),
		input:    ti,
	}

	m.viewport.SetContent(strings.Join(m.backlog, "\n"))
	return m
}

func (m model) Init() tea.Cmd {
	return textinput.Blink
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var cmd tea.Cmd
	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "up", "down", "pgup", "pgdown":
			m.viewport, cmd = m.viewport.Update(msg)
		case "ctrl+c":
			return m, tea.Quit
		case "enter":
			m.backlog = append(m.backlog, m.input.Value())
			m.input.Reset()
			m.viewport.SetContent(strings.Join(m.backlog, "\n"))
		default:
			m.input, cmd = m.input.Update(msg)
		}
	case tea.WindowSizeMsg:
		m.viewport.Height = msg.Height - lipgloss.Height(m.input.View())
		m.viewport.Width = msg.Width
		m.input.Width = msg.Width
	}
	return m, cmd
}

func (m model) View() string {
	return lipgloss.JoinVertical(
		lipgloss.Left,
		m.viewport.View(),
		m.input.View(),
	)
}

hope that helps