windmill-components 1.558.4 → 1.596.0

package/package/components/flows/conversations/FlowChatManager.svelte.js

@@ -1,8 +1,20 @@
-import { FlowConversationService } from '../../../gen';
+import { FlowConversationService, JobService } from '../../../gen';
 import { sendUserToast } from '../../../toast';
 import { waitJob } from '../../waitJob';
 import { tick } from 'svelte';
-class FlowChatManager {
+import InfiniteList from '../../InfiniteList.svelte';
+import { workspaceStore, userStore } from '../../../stores';
+import { get } from 'svelte/store';
+import { parseStreamDeltas } from '../../chat/utils';
+export function randomUUID() {
+    // Pure JS (RFC4122 v4) UUID implementation (no external dependencies)
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+export class FlowChatManager {
     // State
     messages = $state([]);
     inputMessage = $state('');
@@ -16,29 +28,27 @@ class FlowChatManager {
     loadingMoreMessages = $state(false);
     currentEventSource = $state(undefined);
     pollingInterval = $state(undefined);
+    currentJobId = $state(undefined);
+    conversations = $state([]);
+    deletingConversationId = $state(undefined);
+    isSidebarExpanded = $state(false);
+    selectedConversationId = $state(undefined);
+    conversationListComponent = $state(undefined);
     // Private state
     #conversationsCache = $state({});
     #scrollTimeout = undefined;
     #perPage = 50;
-    #workspace = $state(undefined);
     // Options
     #onRunFlow;
-    #createConversation;
-    #refreshConversations;
-    #conversationId = $state(undefined);
     #useStreaming = $state(false);
     #path = $state(undefined);
-    initialize(options, workspace) {
-        this.#onRunFlow = options.onRunFlow;
-        this.#createConversation = options.createConversation;
-        this.#refreshConversations = options.refreshConversations;
-        this.#conversationId = options.conversationId;
-        this.#useStreaming = options.useStreaming ?? false;
-        this.#path = options.path;
-        this.#workspace = workspace;
+    initialize(onRunFlow, path, useStreaming = false) {
+        this.#onRunFlow = onRunFlow;
+        this.#path = path;
+        this.#useStreaming = useStreaming;
     }
     updateConversationId(conversationId) {
-        this.#conversationId = conversationId;
+        this.selectedConversationId = conversationId;
     }
     cleanup() {
         if (this.currentEventSource) {
@@ -48,12 +58,14 @@ class FlowChatManager {
         this.stopPolling();
         this.isLoading = false;
         this.isWaitingForResponse = false;
+        this.currentJobId = undefined;
     }
     // Public methods for component to call
     fillInputMessage(message) {
         this.inputMessage = message;
     }
     focusInput() {
+        console.log('focusInput', this.inputElement);
         this.inputElement?.focus();
     }
     clearMessages() {
@@ -61,14 +73,128 @@ class FlowChatManager {
         this.inputMessage = '';
         this.page = 1;
     }
+    async createConversation({ clearMessages = true }) {
+        // Check if there's already a draft conversation
+        const existingDraft = this.conversations.find((c) => c.isDraft);
+        if (existingDraft) {
+            // Select the existing draft instead of creating a new one
+            this.selectedConversationId = existingDraft.id;
+            this.clearMessages();
+            return existingDraft.id;
+        }
+        const newConversationId = randomUUID();
+        this.selectedConversationId = newConversationId;
+        // Create a new conversation object and add it to the top of the list
+        const newConversation = {
+            id: newConversationId,
+            workspace_id: get(workspaceStore),
+            flow_path: this.#path,
+            title: 'New chat',
+            created_at: new Date().toISOString(),
+            updated_at: new Date().toISOString(),
+            created_by: get(userStore).username,
+            isDraft: true
+        };
+        // Prepend to conversations list
+        this.conversations = [newConversation, ...this.conversations];
+        // Clear messages in the chat interface
+        if (clearMessages) {
+            this.clearMessages();
+        }
+        this.focusInput();
+        return newConversationId;
+    }
+    setupInfiniteList() {
+        this.conversationListComponent?.setLoader((page, perPage) => this.loadConversations(page, perPage));
+        this.conversationListComponent?.setDeleteItemFn((id) => this.deleteConversation(id));
+    }
+    async selectConversation(conversationId, isDraft) {
+        this.selectedConversationId = conversationId;
+        // Load conversation messages into chat interface
+        if (isDraft) {
+            // For draft conversations, just clear messages (don't try to load from backend)
+            this.clearMessages();
+        }
+        else {
+            // For persisted conversations, load messages from backend
+            await this.loadConversationMessages(conversationId);
+        }
+    }
+    async refreshConversations() {
+        await this.conversationListComponent?.loadData('forceRefresh');
+    }
+    // Only used by InfiniteList
+    async deleteConversation(conversationId) {
+        try {
+            this.deletingConversationId = conversationId;
+            await FlowConversationService.deleteFlowConversation({
+                workspace: get(workspaceStore),
+                conversationId
+            });
+            if (this.selectedConversationId === conversationId) {
+                this.selectedConversationId = undefined;
+                this.clearMessages();
+            }
+            sendUserToast('Conversation deleted successfully');
+        }
+        catch (error) {
+            console.error('Failed to delete conversation:', error);
+            sendUserToast('Failed to delete conversation', true);
+            throw error;
+        }
+        finally {
+            this.deletingConversationId = undefined;
+        }
+    }
+    async cancelCurrentJob() {
+        if (!get(workspaceStore)) {
+            return;
+        }
+        try {
+            if (this.currentJobId) {
+                await JobService.cancelQueuedJob({
+                    workspace: get(workspaceStore),
+                    id: this.currentJobId,
+                    requestBody: {}
+                });
+                sendUserToast(`Job ${this.currentJobId} cancelled`);
+            }
+        }
+        catch (error) {
+            console.error('Error cancelling job:', error);
+            sendUserToast('Could not cancel job', true);
+        }
+        finally {
+            this.cleanup();
+        }
+    }
     async loadConversationMessages(conversationId) {
         this.page = 1;
         await this.loadMessages(true, conversationId);
     }
+    // Only used by InfiniteList
+    async loadConversations(page, perPage) {
+        if (!get(workspaceStore) || !this.#path)
+            return [];
+        try {
+            const response = await FlowConversationService.listFlowConversations({
+                workspace: get(workspaceStore),
+                flowPath: this.#path,
+                page: page,
+                perPage: perPage
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Failed to load conversations:', error);
+            sendUserToast('Failed to load conversations', true);
+            return [];
+        }
+    }
     // Message loading
     async loadMessages(reset, conversationId) {
-        let conversationIdToUse = conversationId ?? this.#conversationId;
-        if (!this.#workspace || !conversationIdToUse)
+        let conversationIdToUse = conversationId ?? this.selectedConversationId;
+        if (!get(workspaceStore) || !conversationIdToUse)
             return;
         if (reset) {
             if (this.#conversationsCache[conversationIdToUse]) {
@@ -84,7 +210,7 @@ class FlowChatManager {
         try {
             const previousScrollHeight = this.messagesContainer?.scrollHeight || 0;
             const response = await FlowConversationService.listConversationMessages({
-                workspace: this.#workspace,
+                workspace: get(workspaceStore),
                 conversationId: conversationIdToUse,
                 page: pageToFetch,
                 perPage: this.#perPage
@@ -152,55 +278,28 @@ class FlowChatManager {
         finally {
             // Do a final poll to get all messages from database
             try {
-                if (this.#conversationId) {
-                    await this.pollConversationMessages(this.#conversationId);
+                if (this.selectedConversationId) {
+                    await this.pollConversationMessages(this.selectedConversationId);
                 }
             }
             catch { }
             this.cleanup();
         }
     }
-    parseStreamDeltas(streamData) {
-        let type = 'message';
-        const lines = streamData.trim().split('\n');
-        let content = '';
-        let success = true;
-        for (const line of lines) {
-            if (!line.trim())
-                continue;
-            try {
-                const parsed = JSON.parse(line);
-                if (parsed.type === 'tool_result') {
-                    type = 'tool_result';
-                    const toolName = parsed.function_name;
-                    success = parsed.success;
-                    content = success ? `Used ${toolName} tool` : `Failed to use ${toolName} tool`;
-                }
-                if (parsed.type === 'token_delta' && parsed.content) {
-                    type = 'message';
-                    content += parsed.content;
-                }
-            }
-            catch (e) {
-                console.error('Failed to parse stream line:', line, e);
-            }
-        }
-        return { type, content, success };
-    }
     async pollConversationMessages(conversationId, isNewConversation) {
-        if (!this.#workspace)
+        if (!get(workspaceStore))
             return;
         try {
             const lastId = this.messages[this.messages.length - 1].id;
             const response = await FlowConversationService.listConversationMessages({
-                workspace: this.#workspace,
+                workspace: get(workspaceStore),
                 conversationId: conversationId,
                 page: 1,
                 perPage: 50,
                 afterId: lastId
             });
             if (isNewConversation) {
-                await this.#refreshConversations?.();
+                await this.refreshConversations();
             }
             const filteredResponse = response.filter((msg) => msg.message_type !== 'user');
             // Add any new intermediate messages not already present
@@ -240,9 +339,9 @@ class FlowChatManager {
         // Reset state for new message
         this.stopPolling();
         // Generate a new conversation ID if we don't have one
-        let currentConversationId = this.#conversationId;
-        if (!this.#conversationId && this.#createConversation) {
-            const newConversationId = await this.#createConversation({ clearMessages: false });
+        let currentConversationId = this.selectedConversationId;
+        if (!this.selectedConversationId) {
+            const newConversationId = await this.createConversation({ clearMessages: false });
             currentConversationId = newConversationId;
         }
         if (!currentConversationId) {
@@ -252,7 +351,7 @@ class FlowChatManager {
         // Invalidate the conversation cache
         delete this.#conversationsCache[currentConversationId];
         const userMessage = {
-            id: crypto.randomUUID(),
+            id: randomUUID(),
             content: this.inputMessage.trim(),
             created_at: new Date().toISOString(),
             message_type: 'user',
@@ -295,15 +394,17 @@ class FlowChatManager {
         let assistantMessageId = '';
         let isCompleted = false;
         try {
-            // Encode the payload as base64
-            const payload = { user_message: messageContent };
-            const payloadBase64 = btoa(JSON.stringify(payload));
+            const jobId = await this.#onRunFlow?.(messageContent, currentConversationId);
+            if (!jobId) {
+                console.error('No jobId returned from onRunFlow');
+                return;
+            }
             // Build the EventSource URL
-            const streamUrl = `/api/w/${this.#workspace}/jobs/run_and_stream/f/${this.#path}`;
+            const streamUrl = `/api/w/${get(workspaceStore)}/jobs_u/getupdate_sse/${jobId}`;
             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');
+            url.searchParams.set('fast', 'true');
+            url.searchParams.set('only_result', 'true');
             // Create EventSource connection
             const eventSource = new EventSource(url.toString());
             this.currentEventSource = eventSource;
@@ -313,15 +414,15 @@ class FlowChatManager {
                 try {
                     const data = JSON.parse(event.data);
                     if (data.type === 'update') {
+                        if (data.flow_stream_job_id) {
+                            this.currentJobId = data.flow_stream_job_id;
+                        }
                         // Process new stream content
                         if (data.new_result_stream) {
                             // Stop polling since we are receiving last step streaming
                             this.stopPolling();
-                            const { type, content: newContent, success } = this.parseStreamDeltas(data.new_result_stream);
+                            const { type, content: newContent, success } = parseStreamDeltas(data.new_result_stream);
                             accumulatedContent += newContent;
-                            if (accumulatedContent.length > 0 || type === 'tool_result') {
-                                this.isWaitingForResponse = false;
-                            }
                             // Create tool message if type is tool_result
                             if (type === 'tool_result') {
                                 // set last message streaming to false
@@ -331,7 +432,7 @@ class FlowChatManager {
                                 this.messages = [
                                     ...this.messages,
                                     {
-                                        id: 'temp-' + crypto.randomUUID(),
+                                        id: 'temp-' + randomUUID(),
                                         content: newContent,
                                         created_at: new Date().toISOString(),
                                         message_type: 'tool',
@@ -350,7 +451,7 @@ class FlowChatManager {
                             else if (type === 'message' &&
                                 assistantMessageId.length === 0 &&
                                 accumulatedContent.length > 0) {
-                                assistantMessageId = 'temp-' + crypto.randomUUID();
+                                assistantMessageId = 'temp-' + randomUUID();
                                 this.messages = [
                                     ...this.messages,
                                     {
@@ -374,8 +475,8 @@ class FlowChatManager {
                         if (data.completed) {
                             isCompleted = true;
                             // Do a final poll to get all messages from database
-                            if (this.#conversationId) {
-                                await this.pollConversationMessages(this.#conversationId);
+                            if (this.selectedConversationId) {
+                                await this.pollConversationMessages(this.selectedConversationId);
                             }
                             this.cleanup();
                         }
@@ -405,8 +506,10 @@ class FlowChatManager {
             console.error('No jobId returned from onRunFlow');
             return;
         }
+        // Store the current job ID so it can be cancelled
+        this.currentJobId = jobId;
         if (isNewConversation) {
-            await this.#refreshConversations?.();
+            await this.refreshConversations();
         }
         // Start polling for intermediate messages in non-streaming mode too
         this.startPolling(currentConversationId);

package/package/components/flows/conversations/FlowConversationsSidebar.svelte

@@ -1,98 +1,18 @@
 <script lang="ts">import { Button } from '../../common';
 import { MessageCircle, Plus, Trash2, PanelLeftClose, PanelLeftOpen, Loader2 } from 'lucide-svelte';
-import { workspaceStore } from '../../../stores';
-import { FlowConversationService } from '../../../gen';
-import { sendUserToast } from '../../../toast';
+import {} from '../../../gen';
 import CountBadge from '../../common/badge/CountBadge.svelte';
 import InfiniteList from '../../InfiniteList.svelte';
-import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { flowPath, selectedConversationId, onNewConversation, onSelectConversation, onDeleteConversation } = $props();
-let isExpanded = $state(false);
-let infiniteList = $state();
-let conversations = $state([]);
-let deletingConversationId = $state(undefined);
-export async function refreshConversations() {
-    return await infiniteList?.loadData('forceRefresh');
-}
-export async function addNewConversation(conversationId, username) {
-    // Check if there's already a draft conversation
-    const existingDraft = conversations.find((c) => c.isDraft);
-    if (existingDraft) {
-        // Select the existing draft instead of creating a new one
-        onSelectConversation(existingDraft.id, true);
-        return existingDraft.id;
-    }
-    // Create a new conversation object and add it to the top of the list
-    const newConversation = {
-        id: conversationId,
-        workspace_id: $workspaceStore,
-        flow_path: flowPath,
-        title: 'New chat',
-        created_at: new Date().toISOString(),
-        updated_at: new Date().toISOString(),
-        created_by: username,
-        isDraft: true
-    };
-    // Prepend to conversations list
-    conversations = [newConversation, ...conversations];
-    return conversationId;
-}
-async function loadConversations(page, perPage) {
-    if (!$workspaceStore || !flowPath)
-        return [];
-    try {
-        const response = await FlowConversationService.listFlowConversations({
-            workspace: $workspaceStore,
-            flowPath: flowPath,
-            page: page,
-            perPage: perPage
-        });
-        return response;
-    }
-    catch (error) {
-        console.error('Failed to load conversations:', error);
-        sendUserToast('Failed to load conversations', true);
-        return [];
-    }
-}
-async function deleteConversation(conversationId) {
-    try {
-        deletingConversationId = conversationId;
-        await FlowConversationService.deleteFlowConversation({
-            workspace: $workspaceStore,
-            conversationId
-        });
-        onDeleteConversation(conversationId);
-        sendUserToast('Conversation deleted successfully');
-    }
-    catch (error) {
-        console.error('Failed to delete conversation:', error);
-        sendUserToast('Failed to delete conversation', true);
-        throw error;
-    }
-    finally {
-        deletingConversationId = undefined;
-    }
-}
+import { FlowChatManager } from './FlowChatManager.svelte';
+let { manager } = $props();
 function getConversationTitle(conversation) {
     return conversation.title || `Conversation ${conversation.created_at.slice(0, 10)}`;
 }
-// Initialize InfiniteList when component mounts or flowPath changes
-$effect(() => {
-    if ($workspaceStore && flowPath) {
-        if (infiniteList) {
-            untrack(() => {
-                infiniteList?.setLoader(loadConversations);
-                infiniteList?.setDeleteItemFn(deleteConversation);
-            });
-        }
-    }
-});
 </script>
 
 <div
-	class="flex flex-col h-full bg-surface border-r border-gray-200 dark:border-gray-700 transition-all duration-300 {isExpanded
+	class="flex flex-col h-full bg-surface border-r border-gray-200 dark:border-gray-700 transition-all duration-300 {manager.isSidebarExpanded
 		? 'w-60'
 		: 'w-16'}"
 >
@@ -102,10 +22,10 @@ $effect(() => {
 			<Button
 				size="sm"
 				color="light"
-				startIcon={{ icon: isExpanded ? PanelLeftClose : PanelLeftOpen }}
-				onclick={() => (isExpanded = !isExpanded)}
-				iconOnly={!isExpanded}
-				btnClasses="!justify-start"
+				startIcon={{ icon: manager.isSidebarExpanded ? PanelLeftClose : PanelLeftOpen }}
+				onclick={() => (manager.isSidebarExpanded = !manager.isSidebarExpanded)}
+				iconOnly={!manager.isSidebarExpanded}
+				btnClasses={manager.isSidebarExpanded ? '!justify-start' : ''}
 				label="Conversations"
 			>
 				Conversations
@@ -114,10 +34,10 @@ $effect(() => {
 				size="sm"
 				color="light"
 				startIcon={{ icon: Plus }}
-				onclick={() => onNewConversation({ clearMessages: true })}
+				onclick={() => manager.createConversation({ clearMessages: true })}
 				title="Start new conversation"
-				iconOnly={!isExpanded}
-				btnClasses="!justify-start"
+				iconOnly={!manager.isSidebarExpanded}
+				btnClasses={manager.isSidebarExpanded ? '!justify-start' : ''}
 				label="New chat"
 			>
 				New chat
@@ -126,26 +46,28 @@ $effect(() => {
 	</div>
 
 	<!-- Conversations List -->
-	{#if !isExpanded}
+	{#if !manager.isSidebarExpanded}
 		<!-- Collapsed state - show single chat icon with badge -->
 		<div class="p-2 flex flex-col items-center mt-2">
 			<button
 				class="relative w-[23px] h-[23px] rounded-md center-center hover:bg-surface-hover transition-all duration-100 text-secondary hover:text-primary group"
-				onclick={() => (isExpanded = true)}
-				title="{conversations.length} conversation{conversations.length !== 1 ? 's' : ''}"
+				onclick={() => (manager.isSidebarExpanded = true)}
+				title="{manager.conversations.length} conversation{manager.conversations.length !== 1
+					? 's'
+					: ''}"
 			>
 				<MessageCircle size={16} />
-				<CountBadge count={conversations.length} small={true} alwaysVisible={true} />
+				<CountBadge count={manager.conversations.length} small={true} alwaysVisible={true} />
 			</button>
 		</div>
 	{/if}
 
 	<!-- Always mount InfiniteList, but hide it when collapsed -->
-	<div class="flex-1 overflow-hidden" class:hidden={!isExpanded}>
+	<div class="flex-1 overflow-hidden" class:hidden={!manager.isSidebarExpanded}>
 		<InfiniteList
-			bind:this={infiniteList}
-			bind:items={conversations}
-			selectedItemId={selectedConversationId}
+			bind:this={manager.conversationListComponent}
+			bind:items={manager.conversations}
+			selectedItemId={manager.selectedConversationId}
 			noBorder={true}
 			rounded={false}
 		>
@@ -153,7 +75,7 @@ $effect(() => {
 				<div
 					class={twMerge(
 						'w-full p-1',
-						selectedConversationId === conversation.id
+						manager.selectedConversationId === conversation.id
 							? 'bg-blue-200/30 text-blue-500 dark:bg-blue-600/30 text-blue-400'
 							: ''
 					)}
@@ -161,30 +83,29 @@ $effect(() => {
 					<Button
 						color="transparent"
 						size="xs"
-						onclick={() => onSelectConversation(conversation.id, conversation.isDraft)}
+						onclick={() => manager.selectConversation(conversation.id, conversation.isDraft)}
 					>
 						<span class="flex-1 text-left text-sm font-medium text-primary truncate">
 							{getConversationTitle(conversation)}
 						</span>
 						<button
 							class="ml-2 p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-500 transition-all {hover ||
-							deletingConversationId === conversation.id
+							manager.deletingConversationId === conversation.id
 								? 'opacity-100'
 								: 'opacity-0'}"
-							disabled={deletingConversationId === conversation.id}
+							disabled={manager.deletingConversationId === conversation.id}
 							onclick={(e) => {
 								e.stopPropagation()
 								if (conversation.isDraft) {
 									// just remove first conversation as it is the draft
-									conversations = [...conversations.slice(1)]
-									onDeleteConversation(conversation.id)
+									manager.conversations = [...manager.conversations.slice(1)]
 								} else {
-									infiniteList?.deleteItem(conversation.id)
+									manager.conversationListComponent?.deleteItem(conversation.id)
 								}
 							}}
 							title="Delete conversation"
 						>
-							{#if deletingConversationId === conversation.id}
+							{#if manager.deletingConversationId === conversation.id}
 								<Loader2 size={14} class="animate-spin" />
 							{:else}
 								<Trash2 size={14} />
@@ -202,11 +123,11 @@ $effect(() => {
 		</InfiniteList>
 	</div>
 
-	{#if isExpanded}
+	{#if manager.isSidebarExpanded}
 		<!-- Footer -->
 		<div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
-			<p class="text-xs text-tertiary">
-				{conversations.length} conversation{conversations.length !== 1 ? 's' : ''}
+			<p class="text-xs text-primary">
+				{manager.conversations.length} conversation{manager.conversations.length !== 1 ? 's' : ''}
 			</p>
 		</div>
 	{/if}

package/package/components/flows/conversations/FlowConversationsSidebar.svelte.d.ts

@@ -1,15 +1,7 @@
+import { FlowChatManager } from './FlowChatManager.svelte';
 interface Props {
-    flowPath: string;
-    selectedConversationId?: string;
-    onNewConversation: (options: {
-        clearMessages?: boolean;
-    }) => void;
-    onSelectConversation: (conversationId: string, isDraft?: boolean) => void;
-    onDeleteConversation: (conversationId: string) => void;
+    manager: FlowChatManager;
 }
-declare const FlowConversationsSidebar: import("svelte").Component<Props, {
-    refreshConversations: () => Promise<void | undefined>;
-    addNewConversation: (conversationId: string, username: string) => Promise<string>;
-}, "">;
+declare const FlowConversationsSidebar: import("svelte").Component<Props, {}, "">;
 type FlowConversationsSidebar = ReturnType<typeof FlowConversationsSidebar>;
 export default FlowConversationsSidebar;