From 306d0a7f2da409e71ecb7411a92d28002ba6f913 Mon Sep 17 00:00:00 2001
From: shahondin1624 <shahondin1624@gmail.com>
Date: Thu, 12 Mar 2026 11:27:34 +0100
Subject: [PATCH] feat: add message input with send button and keyboard
 shortcuts

- MessageInput component with textarea, send button, Enter-to-send
- Shift+Enter for newline, auto-resize textarea
- Disabled state while streaming, auto-focus after send
- Integrated into /chat page with user message handling

Closes #6

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 implementation-plans/_index.md         |  1 +
 implementation-plans/issue-006.md      | 17 +++++++
 src/lib/components/MessageInput.svelte | 63 ++++++++++++++++++++++++++
 src/routes/chat/+page.svelte           | 13 ++++++
 4 files changed, 94 insertions(+)
 create mode 100644 implementation-plans/issue-006.md
 create mode 100644 src/lib/components/MessageInput.svelte

diff --git a/implementation-plans/_index.md b/implementation-plans/_index.md
index 0e7cf00..0279062 100644
--- a/implementation-plans/_index.md
+++ b/implementation-plans/_index.md
@@ -7,3 +7,4 @@
 | #3    | Configure Caddy for gRPC-Web support                   | COMPLETED    | [issue-003.md](issue-003.md) |
 | #4    | gRPC-Web client service layer                          | COMPLETED    | [issue-004.md](issue-004.md) |
 | #5    | Chat page layout and message list component            | COMPLETED    | [issue-005.md](issue-005.md) |
+| #6    | Message input with send and keyboard shortcuts         | COMPLETED    | [issue-006.md](issue-006.md) |
diff --git a/implementation-plans/issue-006.md b/implementation-plans/issue-006.md
new file mode 100644
index 0000000..ce86bbb
--- /dev/null
+++ b/implementation-plans/issue-006.md
@@ -0,0 +1,17 @@
+---
+---
+
+# Issue #6: Message input with send and keyboard shortcuts
+
+**Status:** COMPLETED
+**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/6
+**Branch:** `feature/issue-6-message-input`
+
+## Acceptance Criteria
+
+- [x] Text input/textarea component for composing messages
+- [x] Send button triggers message submission
+- [x] Enter key sends message
+- [x] Shift+Enter inserts newline
+- [x] Input and send button disabled while a response is streaming
+- [x] Input auto-focuses on page load and after send
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
new file mode 100644
index 0000000..bfc6fcc
--- /dev/null
+++ b/src/lib/components/MessageInput.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	let {
+		onSend,
+		disabled = false
+	}: { onSend: (message: string) => void; disabled?: boolean } = $props();
+
+	let input = $state('');
+	let textarea: HTMLTextAreaElement | undefined = $state();
+
+	function handleSubmit() {
+		const trimmed = input.trim();
+		if (!trimmed || disabled) return;
+		onSend(trimmed);
+		input = '';
+		resizeTextarea();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmit();
+		}
+	}
+
+	function resizeTextarea() {
+		if (!textarea) return;
+		textarea.style.height = 'auto';
+		textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
+	}
+
+	$effect(() => {
+		if (!disabled && textarea) {
+			textarea.focus();
+		}
+	});
+</script>
+
+<div class="border-t border-gray-200 bg-white p-4">
+	<form onsubmit={handleSubmit} class="flex items-end gap-2">
+		<textarea
+			bind:this={textarea}
+			bind:value={input}
+			onkeydown={handleKeydown}
+			oninput={resizeTextarea}
+			{disabled}
+			placeholder="Type a message..."
+			rows="1"
+			class="flex-1 resize-none rounded-xl border border-gray-300 px-4 py-2.5 text-sm
+				focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none
+				disabled:bg-gray-100 disabled:text-gray-400"
+		></textarea>
+		<button
+			type="button"
+			onclick={handleSubmit}
+			disabled={disabled || !input.trim()}
+			class="rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white
+				hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none
+				disabled:bg-gray-300 disabled:cursor-not-allowed"
+		>
+			Send
+		</button>
+	</form>
+</div>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 36341d3..e5c1496 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -1,8 +1,20 @@
 <script lang="ts">
 	import type { ChatMessage } from '$lib/types';
 	import MessageList from '$lib/components/MessageList.svelte';
+	import MessageInput from '$lib/components/MessageInput.svelte';
 
 	let messages: ChatMessage[] = $state([]);
+	let isStreaming = $state(false);
+
+	function handleSend(content: string) {
+		const userMessage: ChatMessage = {
+			id: crypto.randomUUID(),
+			role: 'user',
+			content,
+			timestamp: new Date()
+		};
+		messages.push(userMessage);
+	}
 </script>
 
 <div class="flex h-screen flex-col">
@@ -11,4 +23,5 @@
 	</header>
 
 	<MessageList {messages} />
+	<MessageInput onSend={handleSend} disabled={isStreaming} />
 </div>
-- 
2.49.1