ui: use viewport instead of list model for messages model

internal/ui/components/chat.go

@@ -0,0 +1,171 @@
+package components
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/aavshr/panda/internal/ui/styles"
+	"github.com/charmbracelet/bubbles/viewport"
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+type Message struct {
+	Content   string
+	CreatedAt string
+	IsUser    bool
+}
+
+type ChatModel struct {
+	viewport       viewport.Model
+	messages       []Message
+	width          int
+	height         int
+	userStyle      lipgloss.Style
+	assistantStyle lipgloss.Style
+	timestampStyle lipgloss.Style
+}
+
+func NewChatModel(width, height int) ChatModel {
+	vp := viewport.New(width, height)
+	vp.KeyMap.PageDown.SetEnabled(true)
+	vp.KeyMap.PageUp.SetEnabled(true)
+
+	userStyle := styles.UserMessageStyle()
+	assistantStyle := styles.AIMessageStyle()
+	timestampStyle := styles.MetadataStyle()
+
+	return ChatModel{
+		viewport:       vp,
+		messages:       []Message{},
+		width:          width,
+		height:         height,
+		userStyle:      userStyle,
+		assistantStyle: assistantStyle,
+		timestampStyle: timestampStyle,
+	}
+}
+
+func (m *ChatModel) SetMessage(index int, msg Message) {
+	m.messages[index] = msg
+	m.updateViewportContent()
+}
+
+func (m *ChatModel) AddMessage(msg Message) {
+	m.messages = append(m.messages, msg)
+	m.updateViewportContent()
+	m.ScrollToBottom()
+}
+
+func (m *ChatModel) ResetMessages() {
+	m.messages = []Message{}
+	m.updateViewportContent()
+}
+
+func (m *ChatModel) SetSize(width, height int) {
+	m.width = width
+	m.height = height
+	m.viewport.Width = width
+	m.viewport.Height = height
+	m.updateViewportContent()
+}
+
+func (m *ChatModel) ScrollToBottom() {
+	m.viewport.GotoBottom()
+}
+
+func (m *ChatModel) formatMessage(msg Message) string {
+	if msg.Content == "" {
+		return ""
+	}
+	var style lipgloss.Style
+	var sender = "You"
+	if msg.IsUser {
+		style = m.userStyle
+	} else {
+		style = m.assistantStyle
+		sender = "AI"
+	}
+
+	header := style.Render(sender) + m.timestampStyle.Render(msg.CreatedAt)
+	contentWidth := m.width - 4
+	wrappedContent := wrapText(msg.Content, contentWidth)
+	indentedContent := strings.ReplaceAll(wrappedContent, "\n", "\n  ")
+	return fmt.Sprintf("%s\n  %s\n", header, indentedContent)
+}
+
+// updateViewportContent updates the content in the viewport
+func (m *ChatModel) updateViewportContent() {
+	var sb strings.Builder
+
+	for _, msg := range m.messages {
+		sb.WriteString(m.formatMessage(msg))
+		sb.WriteString("\n")
+	}
+
+	m.viewport.SetContent(sb.String())
+	m.ScrollToBottom()
+}
+
+func wrapText(text string, width int) string {
+	var result strings.Builder
+	lines := strings.Split(text, "\n")
+
+	for i, line := range lines {
+		if i > 0 {
+			result.WriteString("\n")
+		}
+
+		if len(line) <= width {
+			result.WriteString(line)
+			continue
+		}
+
+		words := strings.Fields(line)
+		lineLength := 0
+
+		for j, word := range words {
+			if j > 0 {
+				if lineLength+len(word)+1 > width {
+					result.WriteString("\n")
+					lineLength = 0
+				} else {
+					result.WriteString(" ")
+					lineLength++
+				}
+			}
+
+			result.WriteString(word)
+			lineLength += len(word)
+		}
+	}
+
+	return result.String()
+}
+
+func (m *ChatModel) View() string {
+	return m.viewport.View()
+}
+
+func (m *ChatModel) Update(msg tea.Msg) (ChatModel, tea.Cmd) {
+	var (
+		cmd  tea.Cmd
+		cmds []tea.Cmd
+	)
+
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch msg.Type {
+		case tea.KeyEscape:
+			return *m, EscapeCmd
+		}
+
+	case tea.WindowSizeMsg:
+		m.SetSize(msg.Width, msg.Height)
+	}
+
+	m.viewport, cmd = m.viewport.Update(msg)
+	cmds = append(cmds, cmd)
+
+	return *m, tea.Batch(cmds...)
+}

internal/ui/components/list.go

@@ -107,7 +107,6 @@ func (m *ListModel) Update(msg tea.Msg) (ListModel, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch msg.Type {
-		// TODO: handle enter key
 		case tea.KeyEscape:
 			return *m, EscapeCmd
 		case tea.KeyEnter:

internal/ui/handlers.go

@@ -8,10 +8,10 @@
 	"slices"
 	"time"
 
 	"github.com/aavshr/panda/internal/config"
 	"github.com/aavshr/panda/internal/db"
 	"github.com/aavshr/panda/internal/ui/components"
 	"github.com/aavshr/panda/internal/ui/styles"
 	"github.com/aavshr/panda/internal/utils"
 	tea "github.com/charmbracelet/bubbletea"
 	"golang.design/x/clipboard"
@@ -70,8 +70,10 @@
 		switch com {
 		case components.ComponentChatInput:
 			m.chatInputModel.Focus()
-		case components.ComponentMessages:
-			m.messagesModel.Focus()
+		/*
+			case components.ComponentMessages:
+				m.messagesModel.Focus()
+		*/
 		case components.ComponentHistory:
 			m.historyModel.Focus()
 			// TODO: check why we need to reslect the activethreadindex
@@ -145,7 +147,7 @@
 		return m.cmdError(fmt.Errorf("store.CreateMessage: %w", err))
 	}
 	m.setMessages(append(m.messages, userMessage))
-	// TODO: history?
+	// TODO: history
 	reader, err := m.llm.CreateChatCompletionStream(context.Background(),
 		m.userConfig.LLMModel, msg.Value)
 	if err != nil {
@@ -159,6 +161,7 @@
 		Role:     roleAssistant,
 		ThreadID: activeThread.ID,
 	}))
+	m.messagesModel.ScrollToBottom()
 	return m.cmdForwardChatCompletionStream
 }
 
@@ -167,8 +170,10 @@
 	switch m.focusedComponent {
 	case components.ComponentChatInput:
 		m.chatInputModel.Blur()
-	case components.ComponentMessages:
-		m.messagesModel.Blur()
+	/*
+		case components.ComponentMessages:
+			m.messagesModel.Blur()
+	*/
 	case components.ComponentHistory:
 		m.historyModel.Blur()
 	}
@@ -234,7 +239,7 @@
 	createdAt := m.messages[llmMessageIndex].CreatedAt
 
 	// TODO: what buffer size makes it look smooth?
-	buffer := make([]byte, 16)
+	buffer := make([]byte, 64)
 
 	streamDone := false
 	n, err := m.activeLLMStream.Read(buffer)
@@ -245,14 +250,8 @@
 		streamDone = true
 		m.activeLLMStream.Close()
 	}
-	/*
-		if n == 0 && !streamDone {
-			return m.cmdError(fmt.Errorf("activeLLMStream.Read: no bytes read"))
-		}
-	*/
 	if n > 0 {
 		content = fmt.Sprintf("%s%s", content, string(buffer[:n]))
-		// upate created at as soon as first bytes are read
 		if createdAt == "" {
 			createdAt = time.Now().Format(timeFormat)
 		}
@@ -264,15 +263,16 @@
 		ThreadID:  activeThreadId,
 	}
 	m.messages[llmMessageIndex] = updatedLLMMessage
-	setItemCmd := m.messagesModel.SetItem(
-		llmMessageIndex,
-		components.NewMessageListItem(updatedLLMMessage),
-	)
+	m.messagesModel.SetMessage(llmMessageIndex, components.Message{
+		Content:   updatedLLMMessage.Content,
+		CreatedAt: updatedLLMMessage.CreatedAt,
+		IsUser:    false,
+	})
 	if streamDone {
 		if err := m.store.CreateMessage(updatedLLMMessage); err != nil {
 			return m.cmdError(fmt.Errorf("store.CreateMessage: %w", err))
 		}
-		return setItemCmd
+		return nil
 	}
-	return tea.Batch(setItemCmd, m.cmdForwardChatCompletionStream)
+	return m.cmdForwardChatCompletionStream
 }