From 8613128c4f8ab581c1207d306554eba7fa04e2cd Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 14 Aug 2025 09:23:11 +0000
Subject: [PATCH] fix(aichat): better placeholders based on mode (#6378)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(aichat): add mode-specific placeholders for better user guidance

- Replace generic "Ask anything" placeholder with mode-specific suggestions
- Script mode: "Modify this script, fix errors, or generate new code..."
- Flow mode: "Edit this flow, add steps, or modify workflow logic..."
- Navigator mode: "Help me navigate Windmill or find features..."
- API mode: "Make API calls to fetch data or manage resources..."
- Ask mode: "Ask questions about Windmill features and documentation..."
- Maintains backward compatibility for custom placeholders
- Uses Svelte 5 reactive $derived.by for dynamic updates

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>

* feat(aichat): make placeholder prop optional and simplify logic

- Make placeholder prop optional instead of defaulting to 'Ask anything'
- Remove !== 'ask anything' logic check, now simply checks if placeholder is provided
- When placeholder is provided, use it directly; otherwise fall back to mode-specific placeholders
- Maintains backward compatibility while simplifying the conditional logic

Co-authored-by: centdix <centdix@users.noreply.github.com>

* feat(aichat): use AIMode enum instead of hardcoded strings

- Import AIMode enum in AIChatInput.svelte
- Replace hardcoded mode strings with enum values in switch statement
- Update focusInput function and template condition to use enum
- Maintains consistency with type-safe enum usage throughout codebase

Co-authored-by: centdix <centdix@users.noreply.github.com>

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: windmill-internal-app[bot] <windmill-internal-app[bot]@users.noreply.github.com>
Co-authored-by: centdix <centdix@users.noreply.github.com>
---
 .../copilot/chat/AIChatInput.svelte           | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index 415f21a0a8..fe9262fa1b 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -5,7 +5,7 @@
 	import ContextTextarea from './ContextTextarea.svelte'
 	import autosize from '$lib/autosize'
 	import type { ContextElement } from './context'
-	import { aiChatManager } from './AIChatManager.svelte'
+	import { aiChatManager, AIMode } from './AIChatManager.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { Snippet } from 'svelte'
 
@@ -31,7 +31,7 @@
 		selectedContext = $bindable([]),
 		disabled = false,
 		isFirstMessage = false,
-		placeholder = 'Ask anything',
+		placeholder,
 		initialInstructions = '',
 		editingMessageIndex = null,
 		onEditEnd = () => {},
@@ -43,12 +43,36 @@
 		onKeyDown = undefined
 	}: Props = $props()
 
+	// Generate mode-specific placeholder
+	const modePlaceholder = $derived.by(() => {
+		if (placeholder) {
+			// If a custom placeholder is provided, use it
+			return placeholder
+		}
+		
+		// Generate placeholder based on current AI mode
+		switch (aiChatManager.mode) {
+			case AIMode.SCRIPT:
+				return 'Modify this script, fix errors, or generate new code...'
+			case AIMode.FLOW:
+				return 'Edit this flow, add steps, or modify workflow logic...'
+			case AIMode.NAVIGATOR:
+				return 'Help me navigate Windmill or find features...'
+			case AIMode.API:
+				return 'Make API calls to fetch data or manage resources...'
+			case AIMode.ASK:
+				return 'Ask questions about Windmill features and documentation...'
+			default:
+				return 'Ask anything'
+		}
+	})
+
 	let contextTextareaComponent: ContextTextarea | undefined = $state()
 	let instructionsTextareaComponent: HTMLTextAreaElement | undefined = $state()
 	let instructions = $state(initialInstructions)
 
 	export function focusInput() {
-		if (aiChatManager.mode === 'script') {
+		if (aiChatManager.mode === AIMode.SCRIPT) {
 			contextTextareaComponent?.focus()
 		} else {
 			instructionsTextareaComponent?.focus()
@@ -106,7 +130,7 @@
 </script>
 
 <div use:clickOutside class="relative">
-	{#if aiChatManager.mode === 'script'}
+	{#if aiChatManager.mode === AIMode.SCRIPT}
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
@@ -146,7 +170,7 @@
 			{availableContext}
 			{selectedContext}
 			{isFirstMessage}
-			{placeholder}
+			placeholder={modePlaceholder}
 			onAddContext={(contextElement) => addContextToSelection(contextElement)}
 			onSendRequest={() => {
 				if (disabled) {
@@ -173,7 +197,7 @@
 					}
 				}}
 				rows={3}
-				{placeholder}
+				placeholder={modePlaceholder}
 				class="resize-none"
 				{disabled}
 			></textarea>