windmill-components 1.493.9 → 1.501.4

package/package/components/copilot/chat/ChatMode.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">import { ChevronDown } from 'lucide-svelte';
+import Popover from '../../meltComponents/Popover.svelte';
+import { twMerge } from 'tailwind-merge';
+import { aiChatManager, AIMode } from './AIChatManager.svelte';
+</script>
+
+<div class="min-w-0">
+	<Popover
+		disablePopup={Object.keys(aiChatManager.allowedModes).filter(
+			(k) => aiChatManager.allowedModes[k]
+		).length < 2}
+		class="max-w-full"
+	>
+		<svelte:fragment slot="trigger">
+			<div
+				class="text-tertiary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+			>
+				<span class={`truncate`}>
+					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
+				</span>
+				{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
+					<div class="shrink-0">
+						<ChevronDown size={16} />
+					</div>
+				{/if}
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="content" let:close>
+			<div class="flex flex-col gap-1 p-1 min-w-24">
+				{#each Object.values(AIMode) as possibleMode}
+					{#if aiChatManager.allowedModes[possibleMode]}
+						<button
+							class={twMerge(
+								'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+								aiChatManager.mode === possibleMode && 'bg-surface-hover'
+							)}
+							onclick={() => {
+								aiChatManager.changeMode(possibleMode)
+								close()
+							}}
+						>
+							{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
+						</button>
+					{/if}
+				{/each}
+			</div>
+		</svelte:fragment>
+	</Popover>
+</div>

package/package/components/{flows/map/FlowConstantsItem.svelte.d.ts → copilot/chat/ChatMode.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowConstantsItem: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ChatMode: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type FlowConstantsItem = InstanceType<typeof FlowConstantsItem>;
-export default FlowConstantsItem;
+type ChatMode = InstanceType<typeof ChatMode>;
+export default ChatMode;

package/package/components/copilot/chat/ChatQuickActions.svelte

@@ -1,12 +1,10 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
-import { SparklesIcon, LightbulbIcon, DiffIcon } from 'lucide-svelte';
+<script lang="ts">import { SparklesIcon, LightbulbIcon, DiffIcon } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
-export let diffMode = false;
 let iconClasses = '!w-3 !h-3 !px-0 !m-0';
-const dispatch = createEventDispatcher();
-$: btnClasses = `!px-1 !py-0.5 !gap-1 ${diffMode
+let { diffMode, askAi } = $props();
+let btnClasses = $derived(`!px-1 !py-0.5 !gap-1 ${diffMode
     ? '!bg-surface dark:!bg-surface border-frost-500 dark:border-frost-500'
-    : '!font-normal'}`;
+    : '!font-normal'}`);
 </script>
 
 <div class="flex flex-row items-center gap-2 px-2 py-1">
@@ -14,7 +12,10 @@ $: btnClasses = `!px-1 !py-0.5 !gap-1 ${diffMode
 		{#if diffMode}
 			<Button
 				on:click={() => {
-					dispatch('analyzeChanges')
+					askAi(
+						'Based on the changes I made to the code, look for potential issues and recommend better solutions',
+						{ withDiff: true }
+					)
 				}}
 				title="Analyze changes"
 				size="xs"
@@ -29,7 +30,10 @@ $: btnClasses = `!px-1 !py-0.5 !gap-1 ${diffMode
 		{:else}
 			<Button
 				on:click={() => {
-					dispatch('explainChanges')
+					askAi('Explain the changes I made to the code from the last diff', {
+						withCode: false,
+						withDiff: true
+					})
 				}}
 				title="Explain changes"
 				size="xs3"
@@ -43,7 +47,7 @@ $: btnClasses = `!px-1 !py-0.5 !gap-1 ${diffMode
 			</Button>
 			<Button
 				on:click={() => {
-					dispatch('suggestImprovements')
+					askAi('Look for potential issues and recommend better solutions in the actual code')
 				}}
 				title="Suggest improvements"
 				size="xs"

package/package/components/copilot/chat/ChatQuickActions.svelte.d.ts

@@ -1,24 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ChatQuickActions: $$__sveltets_2_IsomorphicComponent<{
-    diffMode?: boolean;
-}, {
-    analyzeChanges: CustomEvent<null>;
-    explainChanges: CustomEvent<null>;
-    suggestImprovements: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ChatQuickActions = InstanceType<typeof ChatQuickActions>;
+type $$ComponentProps = {
+    diffMode: boolean;
+    askAi: (instructions: string, options?: {
+        withCode?: boolean;
+        withDiff?: boolean;
+    }) => void;
+};
+declare const ChatQuickActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatQuickActions = ReturnType<typeof ChatQuickActions>;
 export default ChatQuickActions;

package/package/components/copilot/chat/ContextElementBadge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Popover } from '../../meltComponents';
 import { Loader2, X } from 'lucide-svelte';
-import { ContextIconMap } from './core';
+import { ContextIconMap } from './context';
 import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
 import { twMerge } from 'tailwind-merge';
@@ -19,7 +19,7 @@ const dispatch = createEventDispatcher();
 	<svelte:fragment slot="trigger">
 		<div
 			class={twMerge(
-				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer'
+				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48'
 			)}
 			on:mouseenter={() => (showDelete = true)}
 			on:mouseleave={() => (showDelete = false)}
@@ -34,7 +34,11 @@ const dispatch = createEventDispatcher();
 					<svelte:component this={icon} size={16} />
 				{/if}
 			</button>
-			{contextElement.title}
+			<span class="truncate">
+				{contextElement.type === 'diff'
+					? contextElement.title.replace(/_/g, ' ')
+					: contextElement.title}
+			</span>
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="content">

package/package/components/copilot/chat/ContextElementBadge.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ContextElement } from './core';
+import { type ContextElement } from './context';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/package/components/copilot/chat/ContextManager.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type ScriptLang } from '../../../gen';
+import { type DBSchemas } from '../../../stores';
+import type { ContextElement } from './context';
+import type { DisplayMessage } from './shared';
+export interface ScriptOptions {
+    lang: ScriptLang | 'bunnative';
+    code: string;
+    error: string | undefined;
+    args: Record<string, any>;
+    path: string | undefined;
+    lastSavedCode?: string;
+    lastDeployedCode?: string;
+    diffMode: boolean;
+}
+export default class ContextManager {
+    private selectedContext;
+    private availableContext;
+    private workspace;
+    private dbResources;
+    private scriptOptions;
+    private refreshDbResources;
+    private getSelectedDBSchema;
+    private getContextCodePath;
+    updateAvailableContext(scriptOptions: ScriptOptions, dbSchemas: DBSchemas, workspace: string, toolSupport: boolean, currentlySelectedContext: ContextElement[]): Promise<void>;
+    getSelectedContext(): ContextElement[];
+    setSelectedContext(newSelectedContext: ContextElement[]): void;
+    getAvailableContext(): ContextElement[];
+    addSelectedLinesToContext(lines: string, startLine: number, endLine: number): void;
+    setFixContext(): void;
+    setAskAiContext(options: {
+        withCode?: boolean;
+        withDiff?: boolean;
+    }): void;
+    updateContextOnRequest(options: {
+        removeDiff?: boolean;
+        addBackCode?: boolean;
+    }): void;
+    static updateDisplayMessages(displayMessages: DisplayMessage[], dbSchemas: DBSchemas): DisplayMessage[];
+}

package/package/components/copilot/chat/ContextManager.svelte.js

@@ -0,0 +1,220 @@
+import { ResourceService } from '../../../gen';
+import { scriptLangToEditorLang } from '../../../scripts';
+import { SQLSchemaLanguages } from '../../../stores';
+import { diffLines } from 'diff';
+import { langToExt } from '../../../editorLangUtils';
+export default class ContextManager {
+    selectedContext = $state([]);
+    availableContext = $state([]);
+    workspace = undefined;
+    dbResources = [];
+    scriptOptions = undefined;
+    async refreshDbResources(workspace) {
+        this.dbResources = await ResourceService.listResource({
+            workspace: workspace,
+            resourceType: SQLSchemaLanguages.join(',')
+        });
+    }
+    getSelectedDBSchema(scriptOptions, dbSchemas) {
+        const schemaRes = scriptOptions.lang === 'graphql' ? scriptOptions.args.api : scriptOptions.args.database;
+        if (typeof schemaRes === 'string') {
+            const schemaPath = schemaRes.replace('$res:', '');
+            const schema = dbSchemas[schemaPath];
+            if (schema && schema.lang === scriptOptions.lang) {
+                return { schema, resource: schemaPath };
+            }
+            else {
+                return { schema: undefined, resource: schemaPath };
+            }
+        }
+    }
+    getContextCodePath(scriptOptions) {
+        return ((scriptOptions.path?.split('/').pop() ?? 'script') +
+            '.' +
+            langToExt(scriptLangToEditorLang(scriptOptions.lang)));
+    }
+    async updateAvailableContext(scriptOptions, dbSchemas, workspace, toolSupport, currentlySelectedContext) {
+        try {
+            let firstTime = !this.workspace;
+            if (this.workspace !== workspace) {
+                await this.refreshDbResources(workspace);
+                this.workspace = workspace;
+            }
+            this.scriptOptions = scriptOptions;
+            let newAvailableContext = [
+                {
+                    type: 'code',
+                    title: this.getContextCodePath(scriptOptions) ?? '',
+                    content: scriptOptions.code,
+                    lang: scriptOptions.lang
+                }
+            ];
+            if (toolSupport) {
+                for (const d of this.dbResources) {
+                    const loadedSchema = dbSchemas[d.path];
+                    newAvailableContext.push({
+                        type: 'db',
+                        title: d.path,
+                        // If the db is already fetched, add the schema to the context
+                        ...(loadedSchema ? { schema: loadedSchema } : {})
+                    });
+                }
+            }
+            if (scriptOptions.lastSavedCode && scriptOptions.lastSavedCode !== scriptOptions.code) {
+                newAvailableContext.push({
+                    type: 'diff',
+                    title: 'diff_with_last_saved_draft', // can't use spaces in the title, because it will break the word match in the context text area hightlighting logic
+                    content: scriptOptions.lastSavedCode ?? '',
+                    diff: diffLines(scriptOptions.lastSavedCode ?? '', scriptOptions.code),
+                    lang: scriptOptions.lang
+                });
+            }
+            if (scriptOptions.lastDeployedCode && scriptOptions.lastDeployedCode !== scriptOptions.code) {
+                newAvailableContext.push({
+                    type: 'diff',
+                    title: 'diff_with_last_deployed_version',
+                    content: scriptOptions.lastDeployedCode ?? '',
+                    diff: diffLines(scriptOptions.lastDeployedCode ?? '', scriptOptions.code),
+                    lang: scriptOptions.lang
+                });
+            }
+            if (scriptOptions.error) {
+                newAvailableContext = [
+                    ...newAvailableContext,
+                    {
+                        type: 'error',
+                        title: 'error',
+                        content: scriptOptions.error
+                    }
+                ];
+            }
+            let newSelectedContext = [...currentlySelectedContext];
+            if (firstTime) {
+                newSelectedContext = [
+                    {
+                        type: 'code',
+                        title: this.getContextCodePath(scriptOptions) ?? '',
+                        content: scriptOptions.code,
+                        lang: scriptOptions.lang
+                    }
+                ];
+            }
+            const db = this.getSelectedDBSchema(scriptOptions, dbSchemas);
+            if (db &&
+                !newSelectedContext.find((c) => c.type === 'db' && db && c.title === db.resource) &&
+                toolSupport) {
+                newSelectedContext = [
+                    ...newSelectedContext,
+                    {
+                        type: 'db',
+                        title: db.resource,
+                        schema: db.schema
+                    }
+                ];
+            }
+            newSelectedContext = newSelectedContext
+                .filter((c) => (c.type === 'code_piece' && scriptOptions.code.includes(c.content)) ||
+                c.type === 'code' ||
+                newAvailableContext.some((ac) => ac.type === c.type && ac.title === c.title))
+                .map((c) => c.type === 'code'
+                ? {
+                    ...c,
+                    content: scriptOptions.code,
+                    title: this.getContextCodePath(scriptOptions)
+                }
+                : c.type === 'db' && dbSchemas[c.title]
+                    ? {
+                        ...c,
+                        schema: dbSchemas[c.title]
+                    }
+                    : c);
+            this.availableContext = newAvailableContext;
+            this.selectedContext = newSelectedContext;
+        }
+        catch (err) {
+            console.error('Could not update available context', err);
+        }
+    }
+    getSelectedContext() {
+        return this.selectedContext;
+    }
+    setSelectedContext(newSelectedContext) {
+        this.selectedContext = newSelectedContext;
+    }
+    getAvailableContext() {
+        return this.availableContext;
+    }
+    addSelectedLinesToContext(lines, startLine, endLine) {
+        if (!this.scriptOptions ||
+            this.selectedContext.find((c) => c.type === 'code_piece' && c.title === `L${startLine}-L${endLine}`)) {
+            return;
+        }
+        this.selectedContext = [
+            ...this.selectedContext,
+            {
+                type: 'code_piece',
+                title: `L${startLine}-L${endLine}`,
+                startLine,
+                endLine,
+                content: lines,
+                lang: this.scriptOptions.lang
+            }
+        ];
+    }
+    setFixContext() {
+        const codeContext = this.availableContext.find((c) => c.type === 'code');
+        const errorContext = this.availableContext.find((c) => c.type === 'error');
+        if (codeContext && errorContext) {
+            this.selectedContext = [codeContext, errorContext];
+        }
+    }
+    setAskAiContext(options) {
+        if (!this.scriptOptions) {
+            return;
+        }
+        const codeContext = this.availableContext.find((c) => c.type === 'code');
+        if (!codeContext) {
+            return;
+        }
+        this.selectedContext = [
+            ...(options.withCode === false ? [] : [codeContext]),
+            ...(options.withDiff
+                ? [
+                    {
+                        type: 'diff',
+                        title: 'diff_with_last_deployed_version',
+                        content: this.scriptOptions.lastDeployedCode ?? '',
+                        diff: diffLines(this.scriptOptions.lastDeployedCode ?? '', this.scriptOptions.code),
+                        lang: this.scriptOptions.lang
+                    }
+                ]
+                : [])
+        ];
+    }
+    updateContextOnRequest(options) {
+        this.selectedContext = this.selectedContext.filter((c) => c.type !== 'code_piece');
+        if (options.removeDiff) {
+            this.selectedContext = this.selectedContext.filter((c) => c.type !== 'diff');
+        }
+        if (options.addBackCode) {
+            const codeContext = this.availableContext.find((c) => c.type === 'code');
+            if (codeContext) {
+                this.selectedContext = [...this.selectedContext, codeContext];
+            }
+        }
+    }
+    static updateDisplayMessages(displayMessages, dbSchemas) {
+        return displayMessages.map((m) => ({
+            ...m,
+            contextElements: m.role !== 'tool' && m.contextElements
+                ? m.contextElements.map((c) => c.type === 'db'
+                    ? {
+                        type: 'db',
+                        title: c.title,
+                        schema: dbSchemas[c.title]
+                    }
+                    : c)
+                : undefined
+        }));
+    }
+}

package/package/components/copilot/chat/ContextTextarea.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">import autosize from '../../../autosize';
-import { createEventDispatcher } from 'svelte';
+import { tick } from 'svelte';
 import AvailableContextList from './AvailableContextList.svelte';
-export let instructions;
-export let availableContext;
-export let selectedContext;
-export let isFirstMessage;
-const dispatch = createEventDispatcher();
-let showContextTooltip = false;
-let contextTooltipWord = '';
-let tooltipPosition = { x: 0, y: 0 };
-let textarea;
-let selectedSuggestionIndex = 0;
+import { aiChatManager } from './AIChatManager.svelte';
+const { availableContext, selectedContext, isFirstMessage, disabled, onUpdateInstructions, onSendRequest, onAddContext } = $props();
+let showContextTooltip = $state(false);
+let contextTooltipWord = $state('');
+let tooltipPosition = $state({ x: 0, y: 0 });
+let textarea = $state(undefined);
+let tooltipElement = $state(undefined);
+let selectedSuggestionIndex = $state(0);
 // Properties to copy for caret position calculation
 const properties = [
     'direction',
@@ -128,13 +126,13 @@ function getHighlightedText(text) {
     });
 }
 function addContextToSelection(contextElement) {
-    dispatch('addContext', { contextElement });
+    onAddContext(contextElement);
 }
 function updateInstructionsWithContext(contextElement) {
-    const index = instructions.lastIndexOf('@');
+    const index = aiChatManager.instructions.lastIndexOf('@');
     if (index !== -1) {
-        const newInstructions = instructions.substring(0, index) + `@${contextElement.title}`;
-        dispatch('updateInstructions', { value: newInstructions });
+        const newInstructions = aiChatManager.instructions.substring(0, index) + `@${contextElement.title}`;
+        onUpdateInstructions(newInstructions);
     }
 }
 function handleContextSelection(contextElement) {
@@ -142,7 +140,7 @@ function handleContextSelection(contextElement) {
     updateInstructionsWithContext(contextElement);
     showContextTooltip = false;
 }
-function updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord) {
+async function updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord) {
     if (!textarea || !showContextTooltip)
         return;
     try {
@@ -159,6 +157,8 @@ function updateTooltipPosition(availableContext, showContextTooltip, contextTool
         uncappedHeight = Math.max(uncappedHeight, containerPadding);
         const estimatedTooltipHeight = Math.min(uncappedHeight, maxHeight);
         const margin = 6; // Small margin between caret and tooltip
+        // Initial position calculation
+        let finalX = rect.left + coords.left - 70;
         let finalY;
         if (isFirstMessage) {
             // Position below the caret line
@@ -168,10 +168,27 @@ function updateTooltipPosition(availableContext, showContextTooltip, contextTool
             // Position above the caret line
             finalY = rect.top + coords.top - estimatedTooltipHeight - margin;
         }
+        // Set initial position
         tooltipPosition = {
-            x: rect.left + coords.left - 70,
+            x: finalX,
             y: finalY
         };
+        // Wait for tooltip to render with initial position
+        await tick();
+        // Get actual tooltip width if tooltip is rendered
+        if (tooltipElement) {
+            const tooltipRect = tooltipElement.getBoundingClientRect();
+            const tooltipWidth = tooltipRect.width;
+            // Adjust position if tooltip would overflow right edge
+            if (finalX + tooltipWidth > window.innerWidth) {
+                finalX = Math.max(10, window.innerWidth - tooltipWidth - 10);
+                // Update position after measuring actual width
+                tooltipPosition = {
+                    x: finalX,
+                    y: finalY
+                };
+            }
+        }
     }
     catch (error) {
         // Hide tooltip on any error related to position calculation
@@ -181,7 +198,7 @@ function updateTooltipPosition(availableContext, showContextTooltip, contextTool
 }
 function handleInput(e) {
     textarea = e.target;
-    const words = instructions.split(/\s+/);
+    const words = aiChatManager.instructions.split(/\s+/);
     const lastWord = words[words.length - 1];
     if (lastWord.startsWith('@') &&
         (!availableContext.find((c) => c.title === lastWord.slice(1)) ||
@@ -194,7 +211,7 @@ function handleInput(e) {
         contextTooltipWord = '';
         selectedSuggestionIndex = 0;
     }
-    dispatch('updateInstructions', { value: instructions });
+    onUpdateInstructions(aiChatManager.instructions);
 }
 function handleKeyPress(e) {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -205,8 +222,9 @@ function handleKeyPress(e) {
             if (contextElement) {
                 const isInSelectedContext = selectedContext.find((c) => c.title === contextElement.title && c.type === contextElement.type);
                 // If the context element is already in the selected context and the last word in the instructions is the same as the context element title, send request
-                if (isInSelectedContext && instructions.split(' ').pop() === '@' + contextElement.title) {
-                    dispatch('sendRequest');
+                if (isInSelectedContext &&
+                    aiChatManager.instructions.split(' ').pop() === '@' + contextElement.title) {
+                    onSendRequest();
                     return;
                 }
                 handleContextSelection(contextElement);
@@ -216,7 +234,7 @@ function handleKeyPress(e) {
             }
         }
         else {
-            dispatch('sendRequest');
+            onSendRequest();
         }
     }
 }
@@ -241,44 +259,45 @@ function handleKeyDown(e) {
             (selectedSuggestionIndex - 1 + filteredContext.length) % filteredContext.length;
     }
 }
-$: updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord);
+$effect(() => {
+    updateTooltipPosition(availableContext, showContextTooltip, contextTooltipWord);
+});
 export function focus() {
     textarea?.focus();
 }
 </script>
 
 <div class="relative w-full px-2 scroll-pb-2">
-	<div
-		class="absolute top-0 left-0 w-full h-full min-h-12 px-4 text-sm pt-1 pointer-events-none"
-		style="line-height: 1.72"
-	>
-		<span class="break-words" style="white-space: pre-wrap;">
-			{@html getHighlightedText(instructions)}
+	<div class="textarea-input absolute top-0 left-0 pointer-events-none">
+		<span class="break-words">
+			{@html getHighlightedText(aiChatManager.instructions)}
 		</span>
 	</div>
 	<textarea
 		bind:this={textarea}
-		on:keypress={handleKeyPress}
-		on:keydown={handleKeyDown}
-		bind:value={instructions}
+		onkeypress={handleKeyPress}
+		onkeydown={handleKeyDown}
+		bind:value={aiChatManager.instructions}
 		use:autosize
 		rows={3}
-		on:input={handleInput}
-		on:blur={() => {
+		oninput={handleInput}
+		onblur={() => {
 			setTimeout(() => {
 				showContextTooltip = false
-			}, 100)
+			}, 200)
 		}}
 		placeholder={isFirstMessage ? 'Ask anything' : 'Ask followup'}
-		class="resize-none bg-transparent caret-black dark:caret-white"
-		style={instructions.length > 0
+		class="textarea-input resize-none bg-transparent caret-black dark:caret-white"
+		style={aiChatManager.instructions.length > 0
 			? 'color: transparent; -webkit-text-fill-color: transparent;'
 			: ''}
+		{disabled}
 	></textarea>
 </div>
 
 {#if showContextTooltip}
 	<div
+		bind:this={tooltipElement}
 		class="absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-50"
 		style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
 	>
@@ -294,3 +313,16 @@ export function focus() {
 		/>
 	</div>
 {/if}
+
+<style>
+	.textarea-input {
+		padding: 0.25rem 1rem;
+		border: 1px solid transparent;
+		font-family: inherit;
+		font-size: 0.875rem;
+		line-height: 1.72;
+		white-space: pre-wrap;
+		word-break: break-words;
+		width: 100%;
+		min-height: 3rem;
+	}</style>