fix: background color rendering issues

Author: adamdotdevin

packages/tui/internal/components/chat/editor.go

@@ -258,8 +258,8 @@ func (m *editorComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 func (m *editorComponent) View() string {
 	t := theme.CurrentTheme()
-	base := styles.BaseStyle().Render
-	muted := styles.Muted().Render
+	base := styles.BaseStyle().Background(t.Background()).Render
+	muted := styles.Muted().Background(t.Background()).Render
 	promptStyle := lipgloss.NewStyle().
 		Padding(0, 0, 0, 1).
 		Bold(true).
@@ -281,7 +281,7 @@ func (m *editorComponent) View() string {
 		BorderBackground(t.Background()).
 		Render(textarea)
 
-	hint := base("enter") + muted(" send   ") + base("shift") + muted("+") + base("enter") + muted(" newline")
+	hint := base("enter") + muted(" send   ")
 	if m.app.IsBusy() {
 		hint = muted("working") + m.spinner.View() + muted("  ") + base("esc") + muted(" interrupt")
 	}
@@ -292,18 +292,12 @@ func (m *editorComponent) View() string {
 	}
 
 	space := m.width - 2 - lipgloss.Width(model) - lipgloss.Width(hint)
-	spacer := lipgloss.NewStyle().Width(space).Render("")
+	spacer := lipgloss.NewStyle().Background(t.Background()).Width(space).Render("")
 
-	info := lipgloss.JoinHorizontal(lipgloss.Left, hint, spacer, model)
-	info = styles.Padded().Render(info)
+	info := hint + spacer + model
+	info = styles.Padded().Background(t.Background()).Render(info)
 
-	content := lipgloss.JoinVertical(
-		lipgloss.Top,
-		// m.attachmentsContent(),
-		"",
-		textarea,
-		info,
-	)
+	content := strings.Join([]string{"", textarea, info}, "\n")
 
 	return content
 }

packages/tui/internal/components/chat/message.go

@@ -2,7 +2,6 @@ package chat
 
 import (
 	"fmt"
-	"log/slog"
 	"path/filepath"
 	"slices"
 	"strings"
@@ -131,8 +130,8 @@ func renderContentBlock(content string, options ...renderingOption) string {
 	}
 
 	style := styles.BaseStyle().
-		MarginTop(renderer.marginTop).
-		MarginBottom(renderer.marginBottom).
+		// MarginTop(renderer.marginTop).
+		// MarginBottom(renderer.marginBottom).
 		PaddingTop(renderer.paddingTop).
 		PaddingBottom(renderer.paddingBottom).
 		PaddingLeft(renderer.paddingLeft).
@@ -188,6 +187,17 @@ func renderContentBlock(content string, options ...renderingOption) string {
 		content,
 		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 	)
+	if renderer.marginTop > 0 {
+		for range renderer.marginTop {
+			content = "\n" + content
+		}
+	}
+	if renderer.marginBottom > 0 {
+		for range renderer.marginBottom {
+			content = content + "\n"
+		}
+	}
+
 	return content
 }
 
@@ -210,18 +220,11 @@ func renderText(message client.MessageInfo, text string, author string) string {
 	}
 	info := fmt.Sprintf("%s (%s)", author, timestamp)
 
-	align := lipgloss.Left
-	switch message.Role {
-	case client.User:
-		align = lipgloss.Right
-	case client.Assistant:
-		align = lipgloss.Left
-	}
-
 	textWidth := max(lipgloss.Width(text), lipgloss.Width(info))
 	markdownWidth := min(textWidth, width-padding-4) // -4 for the border and padding
 	content := toMarkdown(text, markdownWidth, t.BackgroundSubtle())
-	content = lipgloss.JoinVertical(align, content, info)
+	content = strings.Join([]string{content, info}, "\n")
+	// content = lipgloss.JoinVertical(align, content, info)
 
 	switch message.Role {
 	case client.User:
@@ -270,6 +273,7 @@ func renderToolInvocation(
 		PaddingRight(2).
 		BorderLeft(true).
 		BorderRight(true).
+		BorderBackground(t.Background()).
 		BorderForeground(t.BackgroundSubtle()).
 		BorderStyle(lipgloss.ThickBorder())
 
@@ -294,10 +298,6 @@ func renderToolInvocation(
 		}
 	}
 
-	if len(toolArgsMap) == 0 {
-		slog.Debug("no args")
-	}
-
 	body := ""
 	error := ""
 	finished := result != nil && *result != ""
@@ -358,6 +358,7 @@ func renderToolInvocation(
 				formattedDiff = strings.TrimSpace(formattedDiff)
 				formattedDiff = lipgloss.NewStyle().
 					BorderStyle(lipgloss.ThickBorder()).
+					BorderBackground(t.Background()).
 					BorderForeground(t.BackgroundSubtle()).
 					BorderLeft(true).
 					BorderRight(true).

packages/tui/internal/components/chat/messages.go

@@ -242,8 +242,8 @@ func (m *messagesComponent) header() string {
 
 	t := theme.CurrentTheme()
 	width := layout.Current.Container.Width
-	base := styles.BaseStyle().Render
-	muted := styles.Muted().Render
+	base := styles.BaseStyle().Background(t.Background()).Render
+	muted := styles.Muted().Background(t.Background()).Render
 	headerLines := []string{}
 	headerLines = append(headerLines, toMarkdown("# "+m.app.Session.Title, width-6, t.Background()))
 	if m.app.Session.Share != nil && m.app.Session.Share.Url != "" {
@@ -257,7 +257,7 @@ func (m *messagesComponent) header() string {
 		Width(width).
 		PaddingLeft(2).
 		PaddingRight(2).
-		// Background(t.BackgroundElement()).
+		Background(t.Background()).
 		BorderLeft(true).
 		BorderRight(true).
 		BorderBackground(t.Background()).
@@ -289,15 +289,11 @@ func (m *messagesComponent) View() string {
 }
 
 func (m *messagesComponent) home() string {
-	// t := theme.CurrentTheme()
-	baseStyle := styles.BaseStyle()
+	t := theme.CurrentTheme()
+	baseStyle := styles.BaseStyle().Background(t.Background())
 	base := baseStyle.Render
-	muted := styles.Muted().Render
+	muted := styles.Muted().Background(t.Background()).Render
 
-	// 	mark := `
-	// ███▀▀█
-	// ███  █
-	// ▀▀▀▀▀▀  `
 	open := `
 █▀▀█ █▀▀█ █▀▀ █▀▀▄ 
 █░░█ █░░█ █▀▀ █░░█ 
@@ -309,9 +305,8 @@ func (m *messagesComponent) home() string {
 
 	logo := lipgloss.JoinHorizontal(
 		lipgloss.Top,
-		// styles.BaseStyle().Foreground(t.Primary()).Render(mark),
-		styles.Muted().Render(open),
-		styles.BaseStyle().Render(code),
+		muted(open),
+		base(code),
 	)
 	// cwd := app.Info.Path.Cwd
 	// config := app.Info.Path.Config
@@ -327,7 +322,7 @@ func (m *messagesComponent) home() string {
 
 	commandLines := []string{}
 	for _, command := range commands {
-		commandLines = append(commandLines, (base(command[0]) + " " + muted(command[1])))
+		commandLines = append(commandLines, (base(command[0]+" ") + muted(command[1])))
 	}
 
 	logoAndVersion := lipgloss.JoinVertical(
@@ -347,22 +342,18 @@ func (m *messagesComponent) home() string {
 	lines = append(lines, commandLines...)
 	lines = append(lines, "")
 	if m.rendering {
-		lines = append(lines, styles.Muted().Render("Loading session..."))
+		lines = append(lines, base("Loading session..."))
 	} else {
 		lines = append(lines, "")
 	}
 
-	t := theme.CurrentTheme()
 	return lipgloss.Place(
 		m.width,
 		m.height,
 		lipgloss.Center,
 		lipgloss.Center,
 		baseStyle.Width(lipgloss.Width(logoAndVersion)).Render(
-			lipgloss.JoinVertical(
-				lipgloss.Top,
-				lines...,
-			),
+			strings.Join(lines, "\n"),
 		),
 		lipgloss.WithWhitespaceStyle(lipgloss.NewStyle().Background(t.Background())),
 	)

packages/tui/internal/components/core/status.go

@@ -140,14 +140,15 @@ func formatTokensAndCost(tokens float32, contextWindow float32, cost float32) st
 }
 
 func (m statusComponent) View() string {
+	t := theme.CurrentTheme()
 	if m.app.Session.Id == "" {
 		return styles.BaseStyle().
+			Background(t.Background()).
 			Width(m.width).
 			Height(2).
 			Render("")
 	}
 
-	t := theme.CurrentTheme()
 	logo := logo()
 
 	cwd := styles.Padded().

packages/tui/internal/components/dialog/complete.go

@@ -227,6 +227,7 @@ func (c *completionDialogComponent) View() string {
 		BorderBottom(false).
 		BorderRight(true).
 		BorderLeft(true).
+		BorderBackground(t.Background()).
 		BorderForeground(t.BackgroundSubtle()).
 		Width(c.width).
 		Render(c.list.View())