From 696e7670b30b5192f80e261b4e6a2bbdcdad1e57 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Thu, 9 Jul 2026 13:21:55 +0200
Subject: [PATCH] Home AI Chat

---
 .../src/lib/components/home/HomeAIChat.svelte | 77 +++++++++++++++++++
 .../src/routes/(root)/(logged)/+page.svelte   |  5 ++
 2 files changed, 82 insertions(+)
 create mode 100644 frontend/src/lib/components/home/HomeAIChat.svelte

diff --git a/frontend/src/lib/components/home/HomeAIChat.svelte b/frontend/src/lib/components/home/HomeAIChat.svelte
new file mode 100644
index 0000000000..f227949692
--- /dev/null
+++ b/frontend/src/lib/components/home/HomeAIChat.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
+	import { ArrowRight, PlusIcon, Sparkles } from 'lucide-svelte'
+	import Button from '../common/button/Button.svelte'
+	import ProviderModelSelector from '../copilot/chat/ProviderModelSelector.svelte'
+
+	// UI only for now — no submit wiring yet.
+	let value = $state('')
+	let placeholder = $state('')
+
+	const prompts = [
+		'Sync new Salesforce leads into a postgres table every hour',
+		'Build a workflow that triggers on a Discord message, checks for offensive language using an LLM, and possibly block them'
+	]
+
+	const TYPE_MS = 45
+	const DELETE_MS = 25
+	const HOLD_MS = 1800
+	const PAUSE_MS = 400
+
+	// Typewriter effect: type a prompt out, hold, delete, then advance to the next.
+	$effect(() => {
+		let promptIndex = 0
+		let charIndex = 0
+		let deleting = false
+		let timer: ReturnType<typeof setTimeout>
+
+		function tick() {
+			const current = prompts[promptIndex]
+			if (!deleting) {
+				charIndex++
+				placeholder = current.slice(0, charIndex)
+				if (charIndex >= current.length) {
+					deleting = true
+					timer = setTimeout(tick, HOLD_MS)
+					return
+				}
+				timer = setTimeout(tick, TYPE_MS)
+			} else {
+				charIndex--
+				placeholder = current.slice(0, charIndex)
+				if (charIndex <= 0) {
+					deleting = false
+					promptIndex = (promptIndex + 1) % prompts.length
+					timer = setTimeout(tick, PAUSE_MS)
+					return
+				}
+				timer = setTimeout(tick, DELETE_MS)
+			}
+		}
+
+		timer = setTimeout(tick, TYPE_MS)
+		return () => clearTimeout(timer)
+	})
+</script>
+
+<div class="w-full flex justify-center">
+	<div class="max-w-[40rem] grow relative">
+		<TextInput
+			bind:value
+			class="resize-none px-4 py-3 pb-9 shadow-lg"
+			underlyingInputEl="textarea"
+			inputProps={{ rows: 4, placeholder }}
+		/>
+		<Button
+			endIcon={{ icon: ArrowRight }}
+			wrapperClasses="absolute right-2 bottom-3.5"
+			variant="default"
+			iconOnly
+		></Button>
+		<div
+			class="absolute left-3 bottom-4 flex items-center border rounded-md bg-surface-tertiary px-1"
+		>
+			<ProviderModelSelector />
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index c27d3680d7..c6adacbb67 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -42,6 +42,7 @@
 	import NoDirectDeployAlert from '$lib/components/NoDirectDeployAlert.svelte'
 	import { useSearchParams } from '$lib/svelte5UtilsKit.svelte'
 	import { z } from 'zod'
+	import HomeAIChat from '$lib/components/home/HomeAIChat.svelte'
 
 	type Tab = 'hub' | 'workspace'
 
@@ -308,6 +309,10 @@
 			</div>
 		</div>
 
+		<div class="w-full mb-10 mt-6">
+			<HomeAIChat />
+		</div>
+
 		{#if $workspaceStore == 'admins'}
 			<Alert title="Admins workspace">
 				The Admins workspace is for admins only and contains scripts whose purpose is to manage your