windmill-components 1.542.5 → 1.555.0

package/package/components/flows/FlowChatInterface.svelte

@@ -0,0 +1,404 @@
+<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/FlowChatInterface.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    onRunFlow: (userMessage: string, conversationId: string) => Promise<string | undefined>;
+    useStreaming?: boolean;
+    refreshConversations?: () => Promise<void>;
+    conversationId?: string;
+    deploymentInProgress?: boolean;
+    createConversation: (options: {
+        clearMessages?: boolean;
+    }) => Promise<string>;
+    path?: string;
+}
+declare const FlowChatInterface: import("svelte").Component<Props, {
+    fillInputMessage: (message: string) => void;
+    focusInput: () => void;
+    clearMessages: () => void;
+    loadConversationMessages: (convId: string) => Promise<void>;
+}, "">;
+type FlowChatInterface = ReturnType<typeof FlowChatInterface>;
+export default FlowChatInterface;

package/package/components/flows/FlowChatMessage.svelte

@@ -0,0 +1,41 @@
+<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>

package/package/components/flows/FlowChatMessage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { FlowConversationMessage } from '../../gen';
+interface Props {
+    message: FlowConversationMessage & {
+        loading?: boolean;
+    };
+}
+declare const FlowChatMessage: import("svelte").Component<Props, {}, "">;
+type FlowChatMessage = ReturnType<typeof FlowChatMessage>;
+export default FlowChatMessage;

package/package/components/flows/FlowConversationsSidebar.svelte

@@ -0,0 +1,213 @@
+<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 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;
+    }
+}
+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
+		? 'w-60'
+		: 'w-16'}"
+>
+	<!-- Header -->
+	<div class="flex-shrink-0 p-2 border-b border-gray-200 dark:border-gray-700">
+		<div class="flex flex-col gap-2">
+			<Button
+				size="sm"
+				color="light"
+				startIcon={{ icon: isExpanded ? PanelLeftClose : PanelLeftOpen }}
+				onclick={() => (isExpanded = !isExpanded)}
+				iconOnly={!isExpanded}
+				btnClasses="!justify-start"
+				label="Conversations"
+			>
+				Conversations
+			</Button>
+			<Button
+				size="sm"
+				color="light"
+				startIcon={{ icon: Plus }}
+				onclick={() => onNewConversation({ clearMessages: true })}
+				title="Start new conversation"
+				iconOnly={!isExpanded}
+				btnClasses="!justify-start"
+				label="New chat"
+			>
+				New chat
+			</Button>
+		</div>
+	</div>
+
+	<!-- Conversations List -->
+	{#if !isExpanded}
+		<!-- 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' : ''}"
+			>
+				<MessageCircle size={16} />
+				<CountBadge count={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}>
+		<InfiniteList
+			bind:this={infiniteList}
+			bind:items={conversations}
+			selectedItemId={selectedConversationId}
+			noBorder={true}
+			rounded={false}
+		>
+			{#snippet children({ item: conversation, hover })}
+				<div
+					class={twMerge(
+						'w-full p-1',
+						selectedConversationId === conversation.id
+							? 'bg-blue-200/30 text-blue-500 dark:bg-blue-600/30 text-blue-400'
+							: ''
+					)}
+				>
+					<Button
+						color="transparent"
+						size="xs"
+						onclick={() => onSelectConversation(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
+								? 'opacity-100'
+								: 'opacity-0'}"
+							disabled={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)
+								} else {
+									infiniteList?.deleteItem(conversation.id)
+								}
+							}}
+							title="Delete conversation"
+						>
+							{#if deletingConversationId === conversation.id}
+								<Loader2 size={14} class="animate-spin" />
+							{:else}
+								<Trash2 size={14} />
+							{/if}
+						</button>
+					</Button>
+				</div>
+			{/snippet}
+
+			{#snippet empty()}
+				<div class="p-4 text-center">
+					<p class="text-sm text-secondary mb-2">No conversations yet</p>
+				</div>
+			{/snippet}
+		</InfiniteList>
+	</div>
+
+	{#if isExpanded}
+		<!-- 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>
+		</div>
+	{/if}
+</div>