windmill-components 1.555.0 → 1.558.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.555.0",
+	"version": "1.558.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -77,13 +77,12 @@
 	"dependencies": {
 		"@anthropic-ai/sdk": "^0.60.0",
 		"@aws-crypto/sha256-js": "^4.0.0",
-		"@codingame/monaco-vscode-configuration-service-override": "~20.2.1",
-		"@codingame/monaco-vscode-editor-api": "~20.2.1",
-		"@codingame/monaco-vscode-standalone-css-language-features": "~20.2.1",
-		"@codingame/monaco-vscode-standalone-html-language-features": "~20.2.1",
-		"@codingame/monaco-vscode-standalone-json-language-features": "~20.2.1",
-		"@codingame/monaco-vscode-standalone-languages": "~20.2.1",
-		"@codingame/monaco-vscode-standalone-typescript-language-features": "~20.2.1",
+		"@codingame/monaco-vscode-editor-api": "~21.3.2",
+		"@codingame/monaco-vscode-standalone-css-language-features": "~21.3.2",
+		"@codingame/monaco-vscode-standalone-html-language-features": "~21.3.2",
+		"@codingame/monaco-vscode-standalone-json-language-features": "~21.3.2",
+		"@codingame/monaco-vscode-standalone-languages": "~21.3.2",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "~21.3.2",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
@@ -116,10 +115,9 @@
 		"lru-cache": "^11.1.0",
 		"lucide-svelte": "^0.540.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~20.2.1",
-		"monaco-editor-wrapper": "6.12.0",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~21.3.2",
 		"monaco-graphql": "=1.6.0",
-		"monaco-languageclient": "9.11.0",
+		"monaco-languageclient": "10.1.0",
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^5.16.0",
@@ -135,7 +133,7 @@
 		"svelte-exmarkdown": "^5.0.0",
 		"svelte-infinite-loading": "^1.4.0",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-extension-api@~20.2.1",
+		"vscode": "npm:@codingame/monaco-vscode-extension-api@~21.3.2",
 		"vscode-languageclient": "~9.0.1",
 		"vscode-uri": "~3.1.0",
 		"vscode-ws-jsonrpc": "~3.5.0",
@@ -349,8 +347,8 @@
 			"default": "./package/gen/index.js"
 		},
 		"./components/flows/flowStore": {
-			"types": "./package/components/flows/flowStore.d.ts",
-			"default": "./package/components/flows/flowStore.js"
+			"types": "./package/components/flows/flowStore.svelte.d.ts",
+			"default": "./package/components/flows/flowStore.svelte.js"
 		},
 		"./components/icons": {
 			"types": "./package/components/icons/index.d.ts",
@@ -501,7 +499,7 @@
 				"./package/gen/index.d.ts"
 			],
 			"components/flows/flowStore": [
-				"./package/components/flows/flowStore.d.ts"
+				"./package/components/flows/flowStore.svelte.d.ts"
 			],
 			"components/icons": [
 				"./package/components/icons/index.d.ts"

package/package/components/flows/FlowChatInterface.svelte

@@ -1,404 +0,0 @@
-<script lang="ts">import { Button, Alert } from '../common';
-import { MessageCircle, Loader2, ArrowUp } from 'lucide-svelte';
-import { FlowConversationService } from '../../gen';
-import { workspaceStore } from '../../stores';
-import { sendUserToast } from '../../toast';
-import autosize from '../../autosize';
-import { waitJob } from '../waitJob';
-import { tick } from 'svelte';
-import FlowChatMessage from './FlowChatMessage.svelte';
-let { onRunFlow, conversationId, refreshConversations, deploymentInProgress = false, createConversation, useStreaming = false, path } = $props();
-let messages = $state([]);
-let inputMessage = $state('');
-let isLoading = $state(false);
-let isLoadingMessages = $state(false);
-let messagesContainer = $state();
-let page = $state(1);
-let perPage = 50;
-let hasMoreMessages = $state(false);
-let loadingMoreMessages = $state(false);
-let scrollTimeout = undefined;
-let inputElement = $state();
-let currentEventSource = $state();
-const conversationsCache = $state({});
-// Auto-scroll to bottom when messages change
-$effect(() => {
-    const scroll = async () => {
-        if (messages.length > 0) {
-            await tick();
-            scrollToBottom();
-        }
-    };
-    scroll();
-});
-// Cleanup EventSource on unmount
-$effect(() => {
-    return () => {
-        if (currentEventSource) {
-            currentEventSource.close();
-        }
-    };
-});
-export function fillInputMessage(message) {
-    inputMessage = message;
-}
-export function focusInput() {
-    inputElement?.focus();
-}
-export function clearMessages() {
-    messages = [];
-    inputMessage = '';
-    page = 1;
-}
-export async function loadConversationMessages(convId) {
-    page = 1;
-    await loadMessages(true);
-}
-async function loadMessages(reset) {
-    if (!$workspaceStore || !conversationId)
-        return;
-    if (reset) {
-        if (conversationsCache[conversationId]) {
-            messages = conversationsCache[conversationId];
-            return;
-        }
-        isLoadingMessages = true;
-    }
-    else {
-        loadingMoreMessages = true;
-    }
-    const pageToFetch = reset ? 1 : page + 1;
-    try {
-        const previousScrollHeight = messagesContainer?.scrollHeight || 0;
-        const response = await FlowConversationService.listConversationMessages({
-            workspace: $workspaceStore,
-            conversationId: conversationId,
-            page: pageToFetch,
-            perPage: perPage
-        });
-        if (reset) {
-            conversationsCache[conversationId] = response;
-            messages = response;
-            isLoadingMessages = false;
-            await new Promise((resolve) => setTimeout(resolve, 100));
-            scrollToBottom();
-        }
-        else {
-            messages = [...response, ...messages];
-            page = pageToFetch;
-            // Restore scroll position
-            await new Promise((resolve) => setTimeout(resolve, 50));
-            if (messagesContainer) {
-                messagesContainer.scrollTop = messagesContainer.scrollHeight - previousScrollHeight;
-            }
-        }
-        hasMoreMessages = response.length === perPage;
-    }
-    catch (error) {
-        console.error('Failed to load messages:', error);
-        sendUserToast('Failed to load messages: ' + error);
-    }
-    finally {
-        isLoadingMessages = false;
-        loadingMoreMessages = false;
-    }
-}
-function handleScroll() {
-    if (scrollTimeout)
-        clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(() => {
-        if (!messagesContainer || !hasMoreMessages || loadingMoreMessages)
-            return;
-        if (messagesContainer.scrollTop <= 10) {
-            loadMessages(false);
-        }
-    }, 200);
-}
-function scrollToBottom() {
-    if (messagesContainer) {
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-    }
-}
-async function pollJobResult(jobId, messageId) {
-    try {
-        const result = await waitJob(jobId);
-        // Job completed successfully, update the message with the result
-        messages = messages.map((msg) => msg.id === messageId
-            ? {
-                ...msg,
-                loading: false,
-                content: formatJobResult(result)
-            }
-            : msg);
-    }
-    catch (error) {
-        console.error('Error polling job result:', error);
-        // Job failed, update the message with error
-        messages = messages.map((msg) => msg.id === messageId
-            ? {
-                ...msg,
-                loading: false,
-                content: 'Error: ' + (error?.message || String(error))
-            }
-            : msg);
-    }
-}
-function formatJobResult(result) {
-    if (result === null || result === undefined) {
-        return 'No result returned';
-    }
-    // If result is an object with an output field, use that
-    if (typeof result === 'object' && result.output !== undefined) {
-        if (typeof result.output === 'string') {
-            return result.output;
-        }
-        return JSON.stringify(result.output, null, 2);
-    }
-    if (typeof result === 'string') {
-        return result;
-    }
-    if (typeof result === 'object') {
-        return JSON.stringify(result, null, 2);
-    }
-    return String(result);
-}
-function parseStreamDeltas(streamData) {
-    const lines = streamData.trim().split('\n');
-    let content = '';
-    for (const line of lines) {
-        if (!line.trim())
-            continue;
-        try {
-            const parsed = JSON.parse(line);
-            if (parsed.type === 'token_delta' && parsed.content) {
-                content += parsed.content;
-            }
-        }
-        catch (e) {
-            console.error('Failed to parse stream line:', line, e);
-        }
-    }
-    return content;
-}
-async function sendMessage() {
-    if (!inputMessage.trim() || isLoading)
-        return;
-    const isNewConversation = messages.length === 0;
-    // Generate a new conversation ID if we don't have one
-    let currentConversationId = conversationId;
-    if (!conversationId) {
-        const newConversationId = await createConversation?.({ clearMessages: false });
-        currentConversationId = newConversationId;
-    }
-    if (!currentConversationId) {
-        console.error('No conversation ID found');
-        return;
-    }
-    // Invalidate the conversation cache
-    delete conversationsCache[currentConversationId];
-    const userMessage = {
-        id: crypto.randomUUID(),
-        content: inputMessage.trim(),
-        created_at: new Date().toISOString(),
-        message_type: 'user',
-        conversation_id: currentConversationId
-    };
-    messages = [...messages, userMessage];
-    const messageContent = inputMessage.trim();
-    inputMessage = '';
-    isLoading = true;
-    try {
-        // Add assistant message placeholder
-        const assistantMessageId = crypto.randomUUID();
-        const assistantMessage = {
-            id: assistantMessageId,
-            content: '',
-            created_at: new Date().toISOString(),
-            message_type: 'assistant',
-            conversation_id: currentConversationId,
-            job_id: '',
-            loading: true
-        };
-        messages = [...messages, assistantMessage];
-        if (useStreaming && path) {
-            // Close any existing EventSource
-            if (currentEventSource) {
-                currentEventSource.close();
-            }
-            // Track stream state for this message
-            let accumulatedContent = '';
-            try {
-                // Encode the payload as base64
-                const payload = { user_message: messageContent };
-                const payloadBase64 = btoa(JSON.stringify(payload));
-                // Build the EventSource URL
-                const streamUrl = `/api/w/${$workspaceStore}/jobs/run_and_stream/f/${path}`;
-                const url = new URL(streamUrl, window.location.origin);
-                url.searchParams.set('payload', payloadBase64);
-                url.searchParams.set('memory_id', currentConversationId);
-                url.searchParams.set('poll_delay_ms', '50');
-                // Create EventSource connection
-                const eventSource = new EventSource(url.toString());
-                currentEventSource = eventSource;
-                eventSource.onmessage = (event) => {
-                    try {
-                        const data = JSON.parse(event.data);
-                        if (data.type === 'update') {
-                            // Process new stream content
-                            if (data.new_result_stream) {
-                                const newContent = parseStreamDeltas(data.new_result_stream);
-                                accumulatedContent += newContent;
-                                // Update message content
-                                messages = messages.map((msg) => msg.id === assistantMessageId
-                                    ? {
-                                        ...msg,
-                                        content: accumulatedContent,
-                                        loading: accumulatedContent.length === 0
-                                    }
-                                    : msg);
-                            }
-                            // Handle completion
-                            if (data.completed && data.only_result) {
-                                const finalContent = data.only_result.output ||
-                                    accumulatedContent ||
-                                    JSON.stringify(data.only_result.error);
-                                messages = messages.map((msg) => msg.id === assistantMessageId
-                                    ? {
-                                        ...msg,
-                                        content: finalContent,
-                                        loading: false
-                                    }
-                                    : msg);
-                                eventSource.close();
-                                currentEventSource = undefined;
-                                isLoading = false;
-                            }
-                        }
-                    }
-                    catch (error) {
-                        console.error('Error processing stream event:', error);
-                    }
-                };
-                eventSource.onerror = (error) => {
-                    console.error('EventSource error:', error);
-                    messages = messages.map((msg) => msg.id === assistantMessageId
-                        ? {
-                            ...msg,
-                            content: accumulatedContent || 'Stream error occurred',
-                            loading: false
-                        }
-                        : msg);
-                    eventSource.close();
-                    currentEventSource = undefined;
-                    isLoading = false;
-                    sendUserToast('Stream error occurred', true);
-                };
-            }
-            catch (error) {
-                console.error('Stream connection error:', error);
-                messages = messages.map((msg) => msg.id === assistantMessageId
-                    ? {
-                        ...msg,
-                        content: 'Failed to connect to stream',
-                        loading: false
-                    }
-                    : msg);
-                isLoading = false;
-                sendUserToast('Failed to connect to stream', true);
-            }
-        }
-        else {
-            const jobId = await onRunFlow(messageContent, currentConversationId);
-            if (!jobId) {
-                console.error('No jobId returned from onRunFlow');
-                return;
-            }
-            pollJobResult(jobId, assistantMessageId);
-        }
-        scrollToBottom();
-    }
-    catch (error) {
-        console.error('Error running flow:', error);
-        sendUserToast('Failed to run flow: ' + error, true);
-    }
-    finally {
-        if (!useStreaming) {
-            isLoading = false;
-        }
-    }
-    if (isNewConversation) {
-        await refreshConversations?.();
-    }
-    await tick();
-    focusInput();
-}
-function handleKeyDown(event) {
-    if (event.key === 'Enter' && !event.shiftKey) {
-        event.preventDefault();
-        sendMessage();
-    }
-}
-</script>
-
-<div class="flex flex-col h-full w-full max-w-7xl mx-auto">
-	<div class="flex-1 flex flex-col min-h-0 w-full">
-		<!-- Messages Container -->
-		<div
-			bind:this={messagesContainer}
-			class="flex-1 overflow-y-auto p-4 space-y-4 bg-background"
-			onscroll={handleScroll}
-		>
-			{#if deploymentInProgress}
-				<Alert type="warning" title="Deployment in progress" size="xs" />
-			{/if}
-			{#if isLoadingMessages}
-				<div class="flex items-center justify-center">
-					<Loader2 size={24} class="animate-spin" />
-				</div>
-			{:else if messages.length === 0}
-				<div class="text-center text-tertiary py-8">
-					<MessageCircle size={48} class="mx-auto mb-4 opacity-50" />
-					<p class="text-lg font-medium">Start a conversation</p>
-					<p class="text-sm">Send a message to run the flow and see the results</p>
-				</div>
-			{:else}
-				{#each messages as message (message.id)}
-					<FlowChatMessage {message} />
-				{/each}
-			{/if}
-		</div>
-
-		<!-- Chat Input -->
-		<div class="p-2 bg-surface">
-			<div
-				class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-surface"
-				class:opacity-50={deploymentInProgress}
-			>
-				<textarea
-					bind:this={inputElement}
-					bind:value={inputMessage}
-					use:autosize
-					onkeydown={handleKeyDown}
-					placeholder={deploymentInProgress
-						? 'Chat is disabled during deployment...'
-						: 'Type your message here...'}
-					class="flex-1 min-h-[24px] max-h-32 resize-none !border-0 !bg-transparent text-sm placeholder-gray-400 !outline-none !ring-0 p-0 !shadow-none focus:!border-0 focus:!outline-none focus:!ring-0 focus:!shadow-none"
-					disabled={deploymentInProgress}
-					rows={3}
-				></textarea>
-				<div class="flex-shrink-0 pr-2">
-					<Button
-						color="blue"
-						size="xs2"
-						btnClasses="!rounded-full !p-1.5"
-						startIcon={{ icon: ArrowUp }}
-						disabled={!inputMessage?.trim() || isLoading || deploymentInProgress}
-						on:click={sendMessage}
-						iconOnly
-						title={deploymentInProgress ? 'Deployment in progress' : 'Send message (Enter)'}
-					/>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>

package/package/components/flows/FlowChatMessage.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">import { Markdown } from 'svelte-exmarkdown';
-import { gfmPlugin } from 'svelte-exmarkdown/gfm';
-import { Loader2 } from 'lucide-svelte';
-import CodeDisplay from '../copilot/chat/script/CodeDisplay.svelte';
-import LinkRenderer from '../copilot/chat/LinkRenderer.svelte';
-let { message } = $props();
-</script>
-
-<div class="flex {message.message_type === 'user' ? 'justify-end' : 'justify-start'}">
-	<div
-		class="max-w-[90%] min-w-0 rounded-lg p-3 {message.message_type === 'user'
-			? 'bg-surface-secondary'
-			: 'bg-surface border border-gray-200 dark:border-gray-600'}"
-	>
-		{#if message.message_type === 'user'}
-			<p class="whitespace-pre-wrap text-sm break-words">{message.content}</p>
-		{:else if message.loading}
-			<div class="flex items-center gap-2 text-tertiary">
-				<Loader2 size={16} class="animate-spin" />
-				<span>Processing...</span>
-			</div>
-		{:else if message.content}
-			<div class="prose prose-sm dark:prose-invert prose-ul:!pl-6 break-words">
-				<Markdown
-					md={message.content}
-					plugins={[
-						gfmPlugin(),
-						{
-							renderer: {
-								pre: CodeDisplay,
-								a: LinkRenderer
-							}
-						}
-					]}
-				/>
-			</div>
-		{:else}
-			<p class="text-tertiary text-sm">No result</p>
-		{/if}
-	</div>
-</div>