wip: refactoring tui

internal/tui/components/chat/message.go

@@ -2,6 +2,7 @@ package chat
 
 import (
 	"fmt"
+	"path/filepath"
 	"strings"
 	"time"
 
@@ -160,7 +161,8 @@ func renderAssistantMessage(
 					title,
 					" In progress...",
 				))
-				messages = append(messages, content)
+				message := styles.ForceReplaceBackgroundWithLipgloss(content, t.Background())
+				messages = append(messages, message)
 
 			case client.MessageToolInvocationToolResult:
 				toolInvocationResult := toolInvocation.(client.MessageToolInvocationToolResult)
@@ -172,26 +174,48 @@ func renderAssistantMessage(
 				}
 				params := renderParams(width-lipgloss.Width(toolName)-1, toolArgs...)
 				title := styles.Padded().Render(fmt.Sprintf("%s: %s", toolName, params))
+				metadata := msg.Metadata.Tool[toolInvocationResult.ToolCallId].(map[string]any)
 
-				var trimmedDiff string
+				var markdown string
 				if toolInvocationResult.ToolName == "edit" {
 					filename := toolMap["filePath"].(string)
+					title = styles.Padded().Render(fmt.Sprintf("%s: %s", toolName, filename))
 					oldString := toolMap["oldString"].(string)
 					newString := toolMap["newString"].(string)
 					patch, _, _ := diff.GenerateDiff(oldString, newString, filename)
 					formattedDiff, _ := diff.FormatDiff(patch, diff.WithTotalWidth(width))
-					trimmedDiff = strings.TrimSpace(formattedDiff)
+					markdown = strings.TrimSpace(formattedDiff)
 					message := toolStyle.Render(lipgloss.JoinVertical(lipgloss.Left,
-						toolName,
-						trimmedDiff,
+						title,
+						markdown,
 					))
 					messages = append(messages, message)
+				} else if toolInvocationResult.ToolName == "view" {
+					result := toolInvocationResult.Result
+					if metadata["preview"] != nil {
+						result = metadata["preview"].(string)
+					}
+					filename := toolMap["filePath"].(string)
+					ext := filepath.Ext(filename)
+					if ext == "" {
+						ext = ""
+					} else {
+						ext = strings.ToLower(ext[1:])
+					}
+					result = fmt.Sprintf("```%s\n%s\n```", ext, truncateHeight(result, 10))
+					markdown = toMarkdown(result, width)
+					content := toolStyle.Render(lipgloss.JoinVertical(lipgloss.Left,
+						title,
+						markdown,
+					))
+					message := styles.ForceReplaceBackgroundWithLipgloss(content, t.Background())
+					messages = append(messages, message)
 				} else {
 					result := truncateHeight(strings.TrimSpace(toolInvocationResult.Result), 10)
-					trimmedDiff = toMarkdown(result, width)
+					markdown = toMarkdown(result, width)
 					content := toolStyle.Render(lipgloss.JoinVertical(lipgloss.Left,
 						title,
-						trimmedDiff,
+						markdown,
 					))
 					message := styles.ForceReplaceBackgroundWithLipgloss(content, t.Background())
 					messages = append(messages, message)

internal/tui/styles/markdown.go

@@ -163,7 +163,6 @@ func generateMarkdownStyleConfig() ansi.StyleConfig {
 					Prefix: " ",
 					Color:  stringPtr(adaptiveColorToString(t.MarkdownCodeBlock())),
 				},
-				Margin: uintPtr(defaultMargin),
 			},
 			Chroma: &ansi.Chroma{
 				Text: ansi.StylePrimitive{

js/src/tool/view.ts

@@ -97,13 +97,15 @@ export const view = Tool.define({
         `This is an image file of type: ${isImage}\nUse a different tool to process images`,
       );
     const lines = await file.text().then((text) => text.split("\n"));
-    const content = lines.slice(offset, offset + limit).map((line, index) => {
-      line =
-        line.length > MAX_LINE_LENGTH
-          ? line.substring(0, MAX_LINE_LENGTH) + "..."
-          : line;
+    const raw = lines.slice(offset, offset + limit).map((line) => {
+      return line.length > MAX_LINE_LENGTH
+        ? line.substring(0, MAX_LINE_LENGTH) + "..."
+        : line;
+    });
+    const content = raw.map((line, index) => {
       return `${(index + offset + 1).toString().padStart(5, "0")}| ${line}`;
     });
+    const preview = raw.slice(0, 20).join("\n");
 
     let output = "<file>\n";
     output += content.join("\n");
@@ -121,6 +123,9 @@ export const view = Tool.define({
 
     return {
       output,
+      metadata: {
+        preview,
+      },
     };
   },
 });