new appearance

src/routes/canvas/chat-node.svelte

@@ -12,6 +12,9 @@
 	import IconX from "~icons/lucide/x";
 	import IconStop from "~icons/lucide/square";
 	import IconCopy from "~icons/lucide/copy";
+	import IconAttachment from "~icons/lucide/paperclip";
+	import IconCode from "~icons/lucide/code";
+	import IconSend from "~icons/lucide/send";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 	import ModelPicker from "./model-picker.svelte";
 	import ProviderPicker from "./provider-picker.svelte";
@@ -141,6 +144,8 @@
 		return marked(data.response);
 	});
 
+	const characterCount = $derived(data.query?.length || 0);
+
 	// Helper function to get actual node dimensions from DOM, converted to flow coordinates
 	function getNodeDimensions(nodeId: string) {
 		const nodeElement = document.querySelector(`[data-id="${nodeId}"]`);
@@ -247,53 +252,91 @@
 </script>
 
 <div
-	class="chat-node group relative flex h-full min-h-[200px] w-full max-w-[800px]
-	min-w-[500px] flex-col items-stretch rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"
+	class="chat-node group relative flex h-full min-h-[200px] w-full max-w-[1000px]
+	min-w-[700px] flex-col items-stretch rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"
 	bind:this={node}
 >
 	<!-- Model and Provider selectors -->
-	<div class="mb-4 space-y-3">
-		<ModelPicker modelId={data.modelId} onModelSelect={modelId => updateNodeData(id, { modelId })} />
-		<ProviderPicker
-			provider={data.provider}
-			modelId={data.modelId}
-			onProviderSelect={provider => updateNodeData(id, { provider })}
-		/>
+	<div class="mb-4 flex gap-3">
+		<div class="flex-[3]">
+			<ModelPicker modelId={data.modelId} onModelSelect={modelId => updateNodeData(id, { modelId })} />
+		</div>
+		<div class="flex-[2]">
+			<ProviderPicker
+				provider={data.provider}
+				modelId={data.modelId}
+				onProviderSelect={provider => updateNodeData(id, { provider })}
+			/>
+		</div>
 	</div>
 
-	<form class="flex flex-col gap-4" onsubmit={handleSubmit}>
+	<form class="flex flex-col" onsubmit={handleSubmit}>
 		<div class="relative">
 			<label for={`message-${id}`} class="mb-1.5 block text-xs font-medium text-gray-600">Message</label>
-			<textarea
-				id={`message-${id}`}
-				class="nodrag min-h-[80px] w-full resize-none rounded-lg border border-gray-200 bg-gray-50 px-4
-				py-3 text-sm text-gray-900 placeholder-gray-500 transition-colors
-				focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 focus:outline-none"
-				placeholder="Type your message here..."
-				value={data.query}
-				oninput={evt => {
-					updateNodeData(id, { query: evt.currentTarget.value });
-				}}
-				{@attach autosized.attachment}
-			></textarea>
+
+			<!-- Message container with top bar, textarea, and bottom bar -->
+			<div
+				class="rounded-lg border border-gray-200 bg-gray-50 focus-within:border-gray-900 focus-within:ring-2 focus-within:ring-gray-900/10"
+			>
+				<!-- Top bar with buttons and character count -->
+				<div class="flex items-center justify-between border-b border-gray-200 px-4 py-2">
+					<div class="flex items-center gap-2">
+						<button
+							type="button"
+							class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900"
+							title="Attach file"
+						>
+							<IconAttachment class="h-4 w-4" />
+						</button>
+						<button
+							type="button"
+							class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900"
+							title="Code snippet"
+						>
+							<IconCode class="h-4 w-4" />
+						</button>
+					</div>
+					<div class="text-xs text-gray-500">
+						{characterCount}
+					</div>
+				</div>
+
+				<!-- Textarea -->
+				<textarea
+					id={`message-${id}`}
+					class="nodrag min-h-[80px] w-full resize-none border-0 bg-transparent px-4
+					py-3 text-sm text-gray-900 placeholder-gray-500 focus:ring-0 focus:outline-none"
+					placeholder="Type your message..."
+					value={data.query}
+					oninput={evt => {
+						updateNodeData(id, { query: evt.currentTarget.value });
+					}}
+					{@attach autosized.attachment}
+				></textarea>
+			</div>
 		</div>
 
-		<button
-			type={isLoading ? "button" : "submit"}
-			onclick={isLoading ? stopGeneration : undefined}
-			class="flex items-center justify-center gap-2 self-center rounded-xl
-			bg-black px-6 py-2.5 text-sm font-medium
-			text-white transition-all hover:scale-[1.02] hover:bg-gray-900
-			focus:ring-2 focus:ring-gray-900/20 focus:outline-none
-			active:scale-[0.98]"
-		>
-			{#if isLoading}
-				<IconStop class="h-4 w-4" />
-				Stop Generation
-			{:else}
-				Send Message
-			{/if}
-		</button>
+		<!-- Bottom bar with hint and send button (outside textarea) -->
+		<div class="mt-2 flex items-center justify-between">
+			<div class="text-xs text-gray-500">Shift + Enter for newline</div>
+			<button
+				type={isLoading ? "button" : "submit"}
+				onclick={isLoading ? stopGeneration : undefined}
+				class="flex items-center gap-2 rounded-xl
+				bg-black px-4 py-2 text-sm font-medium
+				text-white transition-all hover:scale-[1.02] hover:bg-gray-900
+				focus:ring-2 focus:ring-gray-900/20 focus:outline-none
+				active:scale-[0.98]"
+			>
+				{#if isLoading}
+					<IconStop class="h-4 w-4" />
+					Stop
+				{:else}
+					<IconSend class="h-4 w-4" />
+					Send
+				{/if}
+			</button>
+		</div>
 	</form>
 
 	{#if data.response || isLoading}