From 2ec8a272225904fb0a02ddcbf26377cf7332bfd8 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Mon, 11 Aug 2025 01:36:18 +0200
Subject: [PATCH] feat(tui): Add instructional header and welcome message to
 chat demo

- Add header with slash command and file autocomplete instructions
- Add initial welcome message with detailed feature descriptions
- Import TextComponent for the header
- Make it clearer how to use all the demo features
---
 packages/tui/test/chat-app.ts | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/tui/test/chat-app.ts b/packages/tui/test/chat-app.ts
index 62c7a447..ac2e677e 100644
--- a/packages/tui/test/chat-app.ts
+++ b/packages/tui/test/chat-app.ts
@@ -1,5 +1,5 @@
 #!/usr/bin/env npx tsx
-import { TUI, Container, TextEditor, MarkdownComponent, CombinedAutocompleteProvider } from "../src/index.js";
+import { TUI, Container, TextEditor, TextComponent, MarkdownComponent, CombinedAutocompleteProvider } from "../src/index.js";
 
 /**
  * Chat Application with Autocomplete
@@ -12,6 +12,13 @@ import { TUI, Container, TextEditor, MarkdownComponent, CombinedAutocompleteProv
  */
 
 const ui = new TUI();
+
+// Add header with instructions
+const header = new TextComponent(
+	"💬 Chat Demo | Type '/' for commands | Start typing a filename + Tab to autocomplete | Ctrl+C to exit",
+	{ bottom: 1 }
+);
+
 const chatHistory = new Container();
 const editor = new TextEditor();
 
@@ -74,6 +81,24 @@ ui.onGlobalKeyPress = (data: string) => {
 	return true;
 };
 
+// Add initial welcome message to chat history
+chatHistory.addChild(new MarkdownComponent(`
+## Welcome to the Chat Demo!
+
+**Available slash commands:**
+- \`/clear\` - Clear the chat history
+- \`/help\` - Show help information  
+- \`/attach <file>\` - Attach a file (with autocomplete)
+
+**File autocomplete:**
+- Start typing any filename or directory name and press **Tab**
+- Works with relative paths (\`./\`, \`../\`)
+- Works with home directory (\`~/\`)
+
+Try it out! Type a message or command below.
+`));
+
+ui.addChild(header);
 ui.addChild(chatHistory);
 ui.addChild(editor);
 ui.setFocus(editor);