Add a notification component

Shows a message in the bottom right corner, lasts for 3 seconds

Signed-off-by: Djordje Lukic <djordje.lukic@docker.com>

Author: rumpl

pkg/tui/components/notification/notification.go

@@ -0,0 +1,112 @@
+package notification
+
+import (
+	"time"
+
+	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+
+	"github.com/docker/cagent/pkg/tui/styles"
+)
+
+const (
+	defaultDuration     = 3 * time.Second
+	notificationPadding = 2
+	maxWidth            = 50
+)
+
+type ShowMsg struct {
+	Text string
+}
+
+type HideMsg struct{}
+
+type State int
+
+const (
+	StateHidden State = iota
+	StateVisible
+)
+
+// Notification represents a notification component that displays
+// a message in the bottom right corner of the screen
+type Notification struct {
+	width, height int
+	text          string
+	state         State
+}
+
+func New() Notification {
+	return Notification{
+		state: StateHidden,
+	}
+}
+
+func (n *Notification) SetSize(width, height int) {
+	n.width = width
+	n.height = height
+}
+
+func (n *Notification) Update(msg tea.Msg) (Notification, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		n.width = msg.Width
+		n.height = msg.Height
+		return *n, nil
+
+	case ShowMsg:
+		n.text = msg.Text
+		n.state = StateVisible
+		return *n, tea.Tick(defaultDuration, func(t time.Time) tea.Msg {
+			return HideMsg{}
+		})
+
+	case HideMsg:
+		n.state = StateHidden
+		n.text = ""
+		return *n, nil
+	}
+
+	return *n, nil
+}
+
+func (n *Notification) View() string {
+	if n.state == StateHidden || n.text == "" {
+		return ""
+	}
+
+	notificationStyle := styles.BaseStyle.
+		Border(lipgloss.RoundedBorder()).
+		BorderForeground(styles.SuccessStyle.GetForeground()).
+		Padding(0, 1).
+		MaxWidth(maxWidth)
+
+	return notificationStyle.Render(n.text)
+}
+
+func (n *Notification) GetLayer() *lipgloss.Layer {
+	if n.state == StateHidden || n.text == "" {
+		return nil
+	}
+
+	view := n.View()
+	row, col := n.position()
+
+	return lipgloss.NewLayer(view).X(col).Y(row)
+}
+
+func (n *Notification) position() (row, col int) {
+	notificationView := n.View()
+	viewHeight := lipgloss.Height(notificationView)
+	viewWidth := lipgloss.Width(notificationView)
+
+	// Position in bottom right corner with padding
+	row = max(0, n.height-viewHeight-notificationPadding)
+	col = max(0, n.width-viewWidth-notificationPadding)
+
+	return row, col
+}
+
+func (n *Notification) IsVisible() bool {
+	return n.state != StateHidden
+}

pkg/tui/components/notification/notification_test.go

@@ -0,0 +1,57 @@
+package notification
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+)
+
+func TestNotification_InitialState(t *testing.T) {
+	n := New()
+
+	require.Equal(t, StateHidden, n.state)
+	require.Empty(t, n.text)
+	require.False(t, n.IsVisible())
+}
+
+func TestNotification_Show(t *testing.T) {
+	n := New()
+
+	updated, _ := n.Update(ShowMsg{Text: "Test notification"})
+
+	require.Equal(t, StateVisible, updated.state)
+	require.Equal(t, "Test notification", updated.text)
+	require.True(t, updated.IsVisible())
+	require.NotEmpty(t, updated.View())
+}
+
+func TestNotification_Hide(t *testing.T) {
+	n := New()
+
+	updated, _ := n.Update(ShowMsg{Text: "Test"})
+	updated, _ = updated.Update(HideMsg{})
+
+	require.Equal(t, StateHidden, updated.state)
+	require.Empty(t, updated.text)
+	require.False(t, updated.IsVisible())
+	require.Empty(t, updated.View())
+}
+
+func TestNotification_Position(t *testing.T) {
+	n := New()
+	n.SetSize(100, 50)
+	updated, _ := n.Update(ShowMsg{Text: "Test"})
+	row, col := updated.position()
+
+	require.Equal(t, 45, row)
+	require.Equal(t, 90, col)
+}
+
+func TestNotification_GetLayer(t *testing.T) {
+	n := New()
+
+	require.Nil(t, n.GetLayer())
+
+	updated, _ := n.Update(ShowMsg{Text: "Test"})
+	require.NotNil(t, updated.GetLayer())
+}

pkg/tui/tui.go

@@ -12,6 +12,7 @@ import (
 	"github.com/docker/cagent/pkg/evaluation"
 	"github.com/docker/cagent/pkg/runtime"
 	"github.com/docker/cagent/pkg/tui/components/messages"
+	"github.com/docker/cagent/pkg/tui/components/notification"
 	"github.com/docker/cagent/pkg/tui/components/statusbar"
 	"github.com/docker/cagent/pkg/tui/core"
 	"github.com/docker/cagent/pkg/tui/dialog"
@@ -41,8 +42,9 @@ type appModel struct {
 	width, height   int
 	keyMap          KeyMap
 
-	chatPage  chatpage.Page
-	statusBar statusbar.StatusBar
+	chatPage     chatpage.Page
+	statusBar    statusbar.StatusBar
+	notification notification.Notification
 
 	// Dialog system
 	dialog dialog.Manager
@@ -75,10 +77,11 @@ func DefaultKeyMap() KeyMap {
 // New creates and initializes a new TUI application model
 func New(a *app.App) tea.Model {
 	t := &appModel{
-		chatPage:    chatpage.New(a),
-		keyMap:      DefaultKeyMap(),
-		dialog:      dialog.New(),
-		application: a,
+		chatPage:     chatpage.New(a),
+		keyMap:       DefaultKeyMap(),
+		dialog:       dialog.New(),
+		notification: notification.New(),
+		application:  a,
 	}
 
 	t.statusBar = statusbar.New(t)
@@ -120,6 +123,11 @@ func (a *appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		cmd := a.handleWindowResize(msg.Width, msg.Height)
 		return a, cmd
 
+	case notification.ShowMsg, notification.HideMsg:
+		updated, cmd := a.notification.Update(msg)
+		a.notification = updated
+		return a, cmd
+
 	case tea.KeyPressMsg:
 		cmd := a.handleKeyPressMsg(msg)
 		return a, cmd
@@ -197,6 +205,9 @@ func (a *appModel) handleWindowResize(width, height int) tea.Cmd {
 	// Update status bar width
 	a.statusBar.SetWidth(a.width)
 
+	// Update notification size
+	a.notification.SetSize(a.width, a.height)
+
 	return tea.Batch(cmds...)
 }
 
@@ -271,12 +282,27 @@ func (a *appModel) View() tea.View {
 
 	baseView := lipgloss.JoinVertical(lipgloss.Top, components...)
 
-	if a.dialog.HasDialog() {
+	// Check if we need to render any overlays (dialogs or notifications)
+	hasOverlays := a.dialog.HasDialog() || a.notification.IsVisible()
+
+	if hasOverlays {
 		baseLayer := lipgloss.NewLayer(baseView)
-		dialogLayers := a.dialog.GetLayers()
+		var allLayers []*lipgloss.Layer
+		allLayers = append(allLayers, baseLayer)
 
-		allLayers := []*lipgloss.Layer{baseLayer}
-		allLayers = append(allLayers, dialogLayers...)
+		// Add dialog layers
+		if a.dialog.HasDialog() {
+			dialogLayers := a.dialog.GetLayers()
+			allLayers = append(allLayers, dialogLayers...)
+		}
+
+		// Add notification layer (should be on top)
+		if a.notification.IsVisible() {
+			notificationLayer := a.notification.GetLayer()
+			if notificationLayer != nil {
+				allLayers = append(allLayers, notificationLayer)
+			}
+		}
 
 		canvas := lipgloss.NewCanvas(allLayers...)
 		return toFullscreenView(canvas.Render())