Viewport + Textarea Chat Layout

go.mod

module example

go 1.19

require (
	github.com/charmbracelet/bubbles v0.13.1-0.20220830040516-d44e242f37ed
	github.com/charmbracelet/bubbletea v0.22.1
	github.com/charmbracelet/lipgloss v0.5.0
)

require (
	github.com/atotto/clipboard v0.1.4 // indirect
	github.com/containerd/console v1.0.3 // indirect
	github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
	github.com/mattn/go-isatty v0.0.16 // indirect
	github.com/mattn/go-localereader v0.0.1 // indirect
	github.com/mattn/go-runewidth v0.0.13 // indirect
	github.com/muesli/ansi v0.0.0-20211018074035-2e021307bc4b // indirect
	github.com/muesli/cancelreader v0.2.2 // indirect
	github.com/muesli/reflow v0.3.0 // indirect
	github.com/muesli/termenv v0.11.1-0.20220212125758-44cd13922739 // indirect
	github.com/rivo/uniseg v0.2.0 // indirect
	golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab // indirect
	golang.org/x/term v0.0.0-20210927222741-03fcf44c2211 // indirect
	golang.org/x/text v0.3.7 // indirect
)

main.go

package main

import (
	"fmt"
	"os"

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

const inputHeight = 4

type model struct {
	viewport viewport.Model
	input    textarea.Model
}

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

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var (
		cmds []tea.Cmd
		cmd  tea.Cmd
	)

	switch msg := msg.(type) {
	case tea.KeyMsg:
		switch msg.String() {
		case "ctrl+c", "esc":
			return m, tea.Quit
		}
	case tea.WindowSizeMsg:
		m.viewport.Width = msg.Width
		const correction = 2 // TODO: Why is this needed? Possible bug in Bubbles?
		m.viewport.Height = msg.Height - inputHeight - correction
		m.input.SetWidth(msg.Width)
	}

	m.input, cmd = m.input.Update(msg)
	cmds = append(cmds, cmd)

	return m, tea.Batch(cmds...)
}

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

func main() {
	m := model{
		viewport: viewport.New(0, 0),
		input:    textarea.New(),
	}
	m.viewport.Style = lipgloss.NewStyle().BorderStyle(lipgloss.RoundedBorder())
	m.viewport.SetContent("Hello!")
	m.input.Focus()
	m.input.Placeholder = "Say something"

	if err := tea.NewProgram(m, tea.WithAltScreen()).Start(); err != nil {
		fmt.Println("Oh no:", err)
		os.Exit(1)
	}
}