refactor tool rendering

Author: kujtimiihoxha

internal/tui/components/anim/anim.go

@@ -0,0 +1,254 @@
+package anim
+
+import (
+	"image/color"
+	"math/rand"
+	"strings"
+	"time"
+
+	"github.com/charmbracelet/bubbles/v2/spinner"
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/lucasb-eyer/go-colorful"
+	"github.com/opencode-ai/opencode/internal/tui/styles"
+	"github.com/opencode-ai/opencode/internal/tui/theme"
+	"github.com/opencode-ai/opencode/internal/tui/util"
+)
+
+const (
+	charCyclingFPS  = time.Second / 22
+	colorCycleFPS   = time.Second / 5
+	maxCyclingChars = 120
+)
+
+var charRunes = []rune("0123456789abcdefABCDEF~!@#$£€%^&*()+=_")
+
+type charState int
+
+const (
+	charInitialState charState = iota
+	charCyclingState
+	charEndOfLifeState
+)
+
+// cyclingChar is a single animated character.
+type cyclingChar struct {
+	finalValue   rune // if < 0 cycle forever
+	currentValue rune
+	initialDelay time.Duration
+	lifetime     time.Duration
+}
+
+func (c cyclingChar) randomRune() rune {
+	return (charRunes)[rand.Intn(len(charRunes))] //nolint:gosec
+}
+
+func (c cyclingChar) state(start time.Time) charState {
+	now := time.Now()
+	if now.Before(start.Add(c.initialDelay)) {
+		return charInitialState
+	}
+	if c.finalValue > 0 && now.After(start.Add(c.initialDelay)) {
+		return charEndOfLifeState
+	}
+	return charCyclingState
+}
+
+type StepCharsMsg struct{}
+
+func stepChars() tea.Cmd {
+	return tea.Tick(charCyclingFPS, func(time.Time) tea.Msg {
+		return StepCharsMsg{}
+	})
+}
+
+type ColorCycleMsg struct{}
+
+func cycleColors() tea.Cmd {
+	return tea.Tick(colorCycleFPS, func(time.Time) tea.Msg {
+		return ColorCycleMsg{}
+	})
+}
+
+// anim is the model that manages the animation that displays while the
+// output is being generated.
+type anim struct {
+	start           time.Time
+	cyclingChars    []cyclingChar
+	labelChars      []cyclingChar
+	ramp            []lipgloss.Style
+	label           []rune
+	ellipsis        spinner.Model
+	ellipsisStarted bool
+}
+
+func New(cyclingCharsSize uint, label string) util.Model {
+	// #nosec G115
+	n := min(int(cyclingCharsSize), maxCyclingChars)
+
+	gap := " "
+	if n == 0 {
+		gap = ""
+	}
+
+	c := anim{
+		start:    time.Now(),
+		label:    []rune(gap + label),
+		ellipsis: spinner.New(spinner.WithSpinner(spinner.Ellipsis)),
+	}
+
+	// If we're in truecolor mode (and there are enough cycling characters)
+	// color the cycling characters with a gradient ramp.
+	const minRampSize = 3
+	if n >= minRampSize {
+		// Note: double capacity for color cycling as we'll need to reverse and
+		// append the ramp for seamless transitions.
+		c.ramp = make([]lipgloss.Style, n, n*2) //nolint:mnd
+		ramp := makeGradientRamp(n)
+		for i, color := range ramp {
+			c.ramp[i] = lipgloss.NewStyle().Foreground(color)
+		}
+		c.ramp = append(c.ramp, reverse(c.ramp)...) // reverse and append for color cycling
+	}
+
+	makeDelay := func(a int32, b time.Duration) time.Duration {
+		return time.Duration(rand.Int31n(a)) * (time.Millisecond * b) //nolint:gosec
+	}
+
+	makeInitialDelay := func() time.Duration {
+		return makeDelay(8, 60) //nolint:mnd
+	}
+
+	// Initial characters that cycle forever.
+	c.cyclingChars = make([]cyclingChar, n)
+
+	for i := range n {
+		c.cyclingChars[i] = cyclingChar{
+			finalValue:   -1, // cycle forever
+			initialDelay: makeInitialDelay(),
+		}
+	}
+
+	// Label text that only cycles for a little while.
+	c.labelChars = make([]cyclingChar, len(c.label))
+
+	for i, r := range c.label {
+		c.labelChars[i] = cyclingChar{
+			finalValue:   r,
+			initialDelay: makeInitialDelay(),
+			lifetime:     makeDelay(5, 180), //nolint:mnd
+		}
+	}
+
+	return c
+}
+
+// Init initializes the animation.
+func (anim) Init() tea.Cmd {
+	return tea.Batch(stepChars(), cycleColors())
+}
+
+// Update handles messages.
+func (a anim) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmd tea.Cmd
+	switch msg.(type) {
+	case StepCharsMsg:
+		a.updateChars(&a.cyclingChars)
+		a.updateChars(&a.labelChars)
+
+		if !a.ellipsisStarted {
+			var eol int
+			for _, c := range a.labelChars {
+				if c.state(a.start) == charEndOfLifeState {
+					eol++
+				}
+			}
+			if eol == len(a.label) {
+				// If our entire label has reached end of life, start the
+				// ellipsis "spinner" after a short pause.
+				a.ellipsisStarted = true
+				cmd = tea.Tick(time.Millisecond*220, func(time.Time) tea.Msg { //nolint:mnd
+					return a.ellipsis.Tick()
+				})
+			}
+		}
+
+		return a, tea.Batch(stepChars(), cmd)
+	case ColorCycleMsg:
+		const minColorCycleSize = 2
+		if len(a.ramp) < minColorCycleSize {
+			return a, nil
+		}
+		a.ramp = append(a.ramp[1:], a.ramp[0])
+		return a, cycleColors()
+	case spinner.TickMsg:
+		var cmd tea.Cmd
+		a.ellipsis, cmd = a.ellipsis.Update(msg)
+		return a, cmd
+	default:
+		return a, nil
+	}
+}
+
+func (a *anim) updateChars(chars *[]cyclingChar) {
+	for i, c := range *chars {
+		switch c.state(a.start) {
+		case charInitialState:
+			(*chars)[i].currentValue = '.'
+		case charCyclingState:
+			(*chars)[i].currentValue = c.randomRune()
+		case charEndOfLifeState:
+			(*chars)[i].currentValue = c.finalValue
+		}
+	}
+}
+
+// View renders the animation.
+func (a anim) View() string {
+	t := theme.CurrentTheme()
+	var b strings.Builder
+
+	for i, c := range a.cyclingChars {
+		if len(a.ramp) > i {
+			b.WriteString(a.ramp[i].Render(string(c.currentValue)))
+			continue
+		}
+		b.WriteRune(c.currentValue)
+	}
+
+	textStyle := styles.BaseStyle().
+		Foreground(t.Text())
+
+	for _, c := range a.labelChars {
+		b.WriteString(
+			textStyle.Render(string(c.currentValue)),
+		)
+	}
+
+	return b.String() + textStyle.Render(a.ellipsis.View())
+}
+
+func makeGradientRamp(length int) []color.Color {
+	t := theme.CurrentTheme()
+	startColor := theme.GetColor(t.Primary())
+	endColor := theme.GetColor(t.Secondary())
+	var (
+		c        = make([]color.Color, length)
+		start, _ = colorful.Hex(startColor)
+		end, _   = colorful.Hex(endColor)
+	)
+	for i := range length {
+		step := start.BlendLuv(end, float64(i)/float64(length))
+		c[i] = lipgloss.Color(step.Hex())
+	}
+	return c
+}
+
+func reverse[T any](in []T) []T {
+	out := make([]T, len(in))
+	copy(out, in[:])
+	for i, j := 0, len(out)-1; i < j; i, j = i+1, j-1 {
+		out[i], out[j] = out[j], out[i]
+	}
+	return out
+}

internal/tui/components/chat/editor.go

@@ -242,7 +242,6 @@ func (m *editorCmp) SetSize(width, height int) tea.Cmd {
 	m.height = height
 	m.textarea.SetWidth(width - 3) // account for the prompt and padding right
 	m.textarea.SetHeight(height)
-	m.textarea.SetWidth(width)
 	return nil
 }
 

internal/tui/components/chat/list_v2.go

@@ -5,9 +5,11 @@ import (
 	"time"
 
 	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/opencode-ai/opencode/internal/app"
 	"github.com/opencode-ai/opencode/internal/message"
 	"github.com/opencode-ai/opencode/internal/session"
+	"github.com/opencode-ai/opencode/internal/tui/components/chat/messages"
 	"github.com/opencode-ai/opencode/internal/tui/components/core/list"
 	"github.com/opencode-ai/opencode/internal/tui/components/dialog"
 	"github.com/opencode-ai/opencode/internal/tui/layout"
@@ -52,12 +54,17 @@ func (m *messageListCmp) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			return m, cmd
 		}
 		return m, nil
+	default:
+		var cmds []tea.Cmd
+		u, cmd := m.listCmp.Update(msg)
+		m.listCmp = u.(list.ListModel)
+		cmds = append(cmds, cmd)
+		return m, tea.Batch(cmds...)
 	}
-	return m, nil
 }
 
 func (m *messageListCmp) View() string {
-	return m.listCmp.View()
+	return lipgloss.JoinVertical(lipgloss.Left, m.listCmp.View())
 }
 
 // GetSize implements MessageListCmp.
@@ -68,50 +75,47 @@ func (m *messageListCmp) GetSize() (int, int) {
 // SetSize implements MessageListCmp.
 func (m *messageListCmp) SetSize(width int, height int) tea.Cmd {
 	m.width = width
-	m.height = height
-	return m.listCmp.SetSize(width, height)
+	m.height = height - 1
+	return m.listCmp.SetSize(width, height-1)
 }
 
 func (m *messageListCmp) SetSession(session session.Session) tea.Cmd {
 	if m.session.ID == session.ID {
 		return nil
 	}
 	m.session = session
-	messages, err := m.app.Messages.List(context.Background(), session.ID)
+	sessionMessages, err := m.app.Messages.List(context.Background(), session.ID)
 	if err != nil {
 		return util.ReportError(err)
 	}
 	m.messages = make([]util.Model, 0)
-	lastUserMessageTime := messages[0].CreatedAt
+	lastUserMessageTime := sessionMessages[0].CreatedAt
 	toolResultMap := make(map[string]message.ToolResult)
 	// first pass to get all tool results
-	for _, msg := range messages {
+	for _, msg := range sessionMessages {
 		for _, tr := range msg.ToolResults() {
 			toolResultMap[tr.ToolCallID] = tr
 		}
 	}
-	for _, msg := range messages {
-		// TODO: handle tool calls and others here
+	for _, msg := range sessionMessages {
 		switch msg.Role {
 		case message.User:
 			lastUserMessageTime = msg.CreatedAt
-			m.messages = append(m.messages, NewMessageCmp(WithMessage(msg)))
+			m.messages = append(m.messages, messages.NewMessageCmp(msg))
 		case message.Assistant:
 			// Only add assistant messages if they don't have tool calls or there is some content
 			if len(msg.ToolCalls()) == 0 || msg.Content().Text != "" || msg.IsThinking() {
-				m.messages = append(m.messages, NewMessageCmp(WithMessage(msg), WithLastUserMessageTime(time.Unix(lastUserMessageTime, 0))))
+				m.messages = append(m.messages, messages.NewMessageCmp(msg, messages.WithLastUserMessageTime(time.Unix(lastUserMessageTime, 0))))
 			}
 			for _, tc := range msg.ToolCalls() {
-				options := []MessageOption{
-					WithToolCall(tc),
-				}
+				options := []messages.ToolCallOption{}
 				if tr, ok := toolResultMap[tc.ID]; ok {
-					options = append(options, WithToolResult(tr))
+					options = append(options, messages.WithToolCallResult(tr))
 				}
 				if msg.FinishPart().Reason == message.FinishReasonCanceled {
-					options = append(options, WithCancelledToolCall(true))
+					options = append(options, messages.WithToolCallCancelled())
 				}
-				m.messages = append(m.messages, NewMessageCmp(options...))
+				m.messages = append(m.messages, messages.NewToolCallCmp(tc, options...))
 			}
 		}
 	}