windmill-components 1.558.3 → 1.596.0

package/package/components/apps/components/display/AppChat.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">import { getContext } from 'svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { twMerge } from 'tailwind-merge';
+import { Loader2 } from 'lucide-svelte';
+import { initCss } from '../../utils';
+import ChatMessage from '../../../chat/ChatMessage.svelte';
+import ChatInput from '../../../chat/ChatInput.svelte';
+import { parseStreamDeltas } from '../../../chat/utils';
+import { randomUUID } from '../../../flows/conversations/FlowChatManager.svelte';
+let { id, componentInput, configuration, customCss = undefined, recomputeIds = undefined, render, errorHandledByComponent = $bindable(false) } = $props();
+const { worldStore, app, componentControl } = getContext('AppViewerContext');
+// Initialize outputs
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    jobId: undefined,
+    messages: [],
+    userMessage: '' // Output for evalv2 field
+});
+// Resolve configuration
+let resolvedConfig = $state(initConfig(components['chatcomponent'].initialData.configuration, configuration));
+// Initialize CSS
+let css = $state(initCss($app.css?.chatcomponent, customCss));
+// State
+let runnableComponent = $state();
+let runnableWrapper = $state();
+let loading = $state(false);
+let result = $state(undefined);
+let messages = $state([]);
+let inputValue = $state('');
+let messagesContainer = $state();
+// Streaming state management
+let currentStreamingMessageIndex = $state(undefined);
+let accumulatedContent = $state('');
+// Generate stable memory_id for chat session (for agent memory persistence)
+let chatMemoryId = $state(randomUUID());
+// Register component control for programmatic access
+$componentControl[id] = {
+    sendMessage: (message) => {
+        if (message && !loading) {
+            inputValue = message;
+            handleSend();
+        }
+    }
+};
+// Auto-scroll to bottom when messages change
+$effect(() => {
+    if (messages.length > 0 && messagesContainer) {
+        setTimeout(() => {
+            messagesContainer?.scrollTo({
+                top: messagesContainer.scrollHeight,
+                behavior: 'smooth'
+            });
+        }, 50);
+    }
+});
+// Handle streaming updates
+function handleStreamUpdate(e) {
+    const streamContent = e.detail.result_stream;
+    const parsed = parseStreamDeltas(streamContent);
+    if (parsed.content) {
+        accumulatedContent = parsed.content;
+    }
+    else {
+        accumulatedContent = streamContent;
+    }
+    // Update or create streaming message
+    if (currentStreamingMessageIndex !== undefined) {
+        messages = messages.map((msg, idx) => idx === currentStreamingMessageIndex ? { ...msg, content: accumulatedContent } : msg);
+    }
+    else {
+        const assistantMessage = {
+            id: randomUUID(),
+            role: 'assistant',
+            content: accumulatedContent
+        };
+        messages = [...messages, assistantMessage];
+        currentStreamingMessageIndex = messages.length - 1;
+    }
+}
+// Handle job completion
+function handleJobComplete(e) {
+    const finalResult = e.detail.result;
+    // Extract final content
+    let finalContent = '';
+    if (typeof finalResult === 'string') {
+        finalContent = finalResult;
+    }
+    else if (finalResult && typeof finalResult === 'object' && 'output' in finalResult) {
+        finalContent =
+            typeof finalResult.output === 'string'
+                ? finalResult.output
+                : JSON.stringify(finalResult.output, null, 2);
+    }
+    else {
+        finalContent = JSON.stringify(finalResult, null, 2);
+    }
+    // If we were streaming, update the message with final result to ensure completeness
+    if (currentStreamingMessageIndex !== undefined && finalContent) {
+        messages = messages.map((msg, idx) => idx === currentStreamingMessageIndex ? { ...msg, content: finalContent } : msg);
+    }
+    // If not streaming, create new message
+    else if (finalContent.length > 0) {
+        messages = [
+            ...messages,
+            {
+                id: randomUUID(),
+                role: 'assistant',
+                content: finalContent
+            }
+        ];
+    }
+    // Finalize streaming
+    currentStreamingMessageIndex = undefined;
+    accumulatedContent = '';
+}
+// Handle job error
+function handleJobError(e) {
+    const error = e.detail.error;
+    // Add error message
+    messages = [
+        ...messages,
+        {
+            id: randomUUID(),
+            role: 'assistant',
+            content: `Error: ${error.message || JSON.stringify(error)}`
+        }
+    ];
+    // Reset streaming state
+    currentStreamingMessageIndex = undefined;
+    accumulatedContent = '';
+}
+// Handle send message
+async function handleSend() {
+    if (!inputValue.trim() || loading)
+        return;
+    const userMessage = inputValue.trim();
+    inputValue = '';
+    // Add user message to chat
+    const newUserMessage = {
+        id: randomUUID(),
+        role: 'user',
+        content: userMessage
+    };
+    messages = [...messages, newUserMessage];
+    // Reset streaming state for new message
+    currentStreamingMessageIndex = undefined;
+    accumulatedContent = '';
+    // Update output so evalv2 field can reference it
+    outputs.userMessage.set(userMessage);
+    // Trigger the runnable
+    if (!runnableComponent) {
+        runnableWrapper?.handleSideEffect(true);
+    }
+    else {
+        await runnableComponent?.runComponent();
+    }
+}
+// Handle enter key
+function handleKeydown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+    }
+}
+$effect(() => {
+    errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay';
+});
+</script>
+
+<InitializeComponent {id} />
+
+{#each Object.keys(components['chatcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.chatcomponent}
+	/>
+{/each}
+
+<RunnableWrapper
+	bind:this={runnableWrapper}
+	bind:runnableComponent
+	bind:loading
+	bind:result
+	{componentInput}
+	{id}
+	{recomputeIds}
+	{outputs}
+	doOnSuccess={resolvedConfig.onSuccess}
+	doOnError={resolvedConfig.onError}
+	on:streamupdate={handleStreamUpdate}
+	on:done={handleJobComplete}
+	on:doneError={handleJobError}
+	{errorHandledByComponent}
+	autoRefresh={false}
+	{render}
+	extraQueryParams={{ memory_id: chatMemoryId }}
+>
+	{#if render}
+		<div
+			class={twMerge(
+				'flex flex-col h-full border rounded-lg bg-surface',
+				css?.container?.class,
+				'wm-chat-container'
+			)}
+			style={css?.container?.style}
+		>
+			<!-- Messages Container -->
+			<div
+				bind:this={messagesContainer}
+				class={twMerge(
+					'flex-1 overflow-y-auto p-4 bg-background',
+					css?.messagesContainer?.class,
+					'wm-chat-messages'
+				)}
+				style={css?.messagesContainer?.style}
+			>
+				{#if messages.length === 0}
+					<div class="flex items-center justify-center h-full text-tertiary text-sm">
+						No messages yet. Start a conversation!
+					</div>
+				{:else}
+					<div class="w-full space-y-4 xl:max-w-7xl mx-auto">
+						{#each messages as message (message.id)}
+							<ChatMessage
+								role={message.role}
+								content={message.content}
+								enableMarkdown={true}
+								enableS3Display={true}
+								customCss={{
+									userMessage: css?.userMessage,
+									assistantMessage: css?.assistantMessage
+								}}
+							/>
+						{/each}
+						{#if loading}
+							<div class="flex items-center gap-2 text-tertiary">
+								<Loader2 size={16} class="animate-spin" />
+								<span class="text-sm">Processing...</span>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Input Container -->
+			<div
+				class={twMerge('border-t p-3', css?.inputContainer?.class, 'wm-chat-input')}
+				style={css?.inputContainer?.style}
+			>
+				<ChatInput
+					bind:value={inputValue}
+					placeholder={resolvedConfig.placeholder}
+					disabled={loading}
+					onSend={handleSend}
+					onKeydown={handleKeydown}
+					customCss={{
+						input: css?.input,
+						button: css?.button
+					}}
+				/>
+			</div>
+		</div>
+	{/if}
+</RunnableWrapper>

package/package/components/apps/components/display/AppChat.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+interface Props {
+    id: string;
+    componentInput: AppInput | undefined;
+    configuration: RichConfigurations;
+    customCss?: ComponentCustomCSS<'chatcomponent'> | undefined;
+    recomputeIds?: string[] | undefined;
+    render: boolean;
+    errorHandledByComponent?: boolean;
+}
+declare const AppChat: import("svelte").Component<Props, {}, "errorHandledByComponent">;
+type AppChat = ReturnType<typeof AppChat>;
+export default AppChat;

package/package/components/apps/components/display/AppDownload.svelte

@@ -10,13 +10,17 @@ import { loadIcon } from '../icon';
 import ComponentErrorHandler from '../helpers/ComponentErrorHandler.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import { userStore } from '../../../../stores';
+import { isPartialS3Object, getS3File } from '../../editor/appUtilsS3';
 let { id, configuration, customCss = undefined, render, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false } = $props();
 const resolvedConfig = $state(initConfig(components['downloadcomponent'].initialData.configuration, configuration));
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, appPath, workspace, isEditor } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
 initOutput($worldStore, id, {});
 let beforeIconComponent = $state();
 let afterIconComponent = $state();
+let downloadUrl = $state(undefined);
+let token = getContext('AuthToken');
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
         beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
@@ -27,6 +31,38 @@ async function handleAfterIcon() {
         afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
     }
 }
+async function loadSource() {
+    if (isPartialS3Object(resolvedConfig.source)) {
+        downloadUrl = await getS3File({
+            source: resolvedConfig.source.s3,
+            storage: resolvedConfig.source.storage,
+            presigned: resolvedConfig.source.presigned,
+            appPath: $appPath,
+            username: $userStore?.username,
+            workspace,
+            token: token?.token,
+            isEditor,
+            configuration
+        });
+    }
+    else if (resolvedConfig.source && typeof resolvedConfig.source !== 'string') {
+        throw new Error('Invalid source object' + typeof resolvedConfig.source);
+    }
+    else if (resolvedConfig.source?.startsWith('s3://')) {
+        downloadUrl = await getS3File({
+            source: resolvedConfig.source?.replace('s3://', ''),
+            appPath: $appPath,
+            username: $userStore?.username,
+            workspace,
+            token: token?.token,
+            isEditor,
+            configuration
+        });
+    }
+    else {
+        downloadUrl = transformBareBase64IfNecessary(resolvedConfig.source);
+    }
+}
 let css = $state(initCss($app.css?.downloadcomponent, customCss));
 $effect(() => {
     resolvedConfig.beforeIcon && beforeIconComponent && untrack(() => handleBeforeIcon());
@@ -34,6 +70,9 @@ $effect(() => {
 $effect(() => {
     resolvedConfig.afterIcon && afterIconComponent && untrack(() => handleAfterIcon());
 });
+$effect(() => {
+    resolvedConfig && loadSource();
+});
 </script>
 
 <InitializeComponent {id} />
@@ -60,7 +99,9 @@ $effect(() => {
 {#if render}
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		<ComponentErrorHandler
-			hasError={resolvedConfig?.source != undefined && typeof resolvedConfig.source !== 'string'}
+			hasError={resolvedConfig?.source != undefined &&
+				typeof resolvedConfig.source !== 'string' &&
+				!isPartialS3Object(resolvedConfig.source)}
 		>
 			<Button
 				on:pointerdown={(e) => e.stopPropagation()}
@@ -77,13 +118,14 @@ $effect(() => {
 				)}
 				style={css?.button?.style}
 				disabled={resolvedConfig.source == undefined}
-				size={resolvedConfig.size}
+				extendedSize={resolvedConfig.size}
 				color={resolvedConfig.color}
 				download={resolvedConfig.filename}
-				href={transformBareBase64IfNecessary(resolvedConfig.source)}
+				href={downloadUrl}
 				target="_blank"
 				ref="external"
 				nonCaptureEvent
+				variant="contained"
 			>
 				<span class="truncate inline-flex gap-2 items-center">
 					{#if resolvedConfig.beforeIcon}

package/package/components/apps/components/display/AppImage.svelte

@@ -9,17 +9,9 @@ import Loader from '../helpers/Loader.svelte';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-import { defaultIfEmptyString } from '../../../../utils';
 import { userStore } from '../../../../stores';
-import { computeS3ImageViewerPolicy, isPartialS3Object } from '../../editor/appUtilsS3';
+import { isPartialS3Object, getS3File } from '../../editor/appUtilsS3';
 let { id, configuration, customCss = undefined, render } = $props();
-function computeForceViewerPolicies() {
-    if (!isEditor) {
-        return undefined;
-    }
-    const policy = computeS3ImageViewerPolicy(configuration);
-    return policy;
-}
 const resolvedConfig = $state(initConfig(components['imagecomponent'].initialData.configuration, configuration));
 const { app, appPath, worldStore, workspace, isEditor } = getContext('AppViewerContext');
 const fit = {
@@ -31,31 +23,35 @@ const fit = {
 initOutput($worldStore, id, {});
 let css = $state(initCss($app.css?.imagecomponent, customCss));
 let imageUrl = $state(undefined);
-async function getS3Image(source, storage, presigned) {
-    if (!source)
-        return '';
-    const appPathOrUser = defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`);
-    const params = new URLSearchParams();
-    params.append('s3', source);
-    if (storage) {
-        params.append('storage', storage);
-    }
-    const forceViewerPolicies = computeForceViewerPolicies();
-    if (forceViewerPolicies) {
-        params.append('force_viewer_allowed_s3_keys', JSON.stringify([forceViewerPolicies]));
-    }
-    return `/api/w/${workspace}/apps_u/download_s3_file/${appPathOrUser}?${params.toString()}${presigned ? `&${presigned}` : ''}`;
-}
+let token = getContext('AuthToken');
 async function loadImage() {
     if (isPartialS3Object(resolvedConfig.source)) {
-        imageUrl = await getS3Image(resolvedConfig.source.s3, resolvedConfig.source.storage, resolvedConfig.source.presigned);
+        imageUrl = await getS3File({
+            source: resolvedConfig.source.s3,
+            storage: resolvedConfig.source.storage,
+            presigned: resolvedConfig.source.presigned,
+            appPath: $appPath,
+            username: $userStore?.username,
+            workspace,
+            token: token?.token,
+            isEditor,
+            configuration
+        });
     }
     else if (resolvedConfig.source && typeof resolvedConfig.source !== 'string') {
         throw new Error('Invalid image object' + typeof resolvedConfig.source);
     }
     else if (resolvedConfig.sourceKind === 's3 (workspace storage)' ||
         resolvedConfig.source?.startsWith('s3://')) {
-        imageUrl = await getS3Image(resolvedConfig.source?.replace('s3://', ''));
+        imageUrl = await getS3File({
+            source: resolvedConfig.source?.replace('s3://', ''),
+            appPath: $appPath,
+            username: $userStore?.username,
+            workspace,
+            token: token?.token,
+            isEditor,
+            configuration
+        });
     }
     else if (resolvedConfig.sourceKind === 'png encoded as base64') {
         imageUrl = 'data:image/png;base64,' + resolvedConfig.source;

package/package/components/apps/components/display/AppJobProgressBar.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">import { getContext, untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import JobLoader from '../../../JobLoader.svelte';
+import JobProgressBar from '../../../jobs/JobProgressBar.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import FlowProgressBar from '../../../flows/FlowProgressBar.svelte';
+let { id, initializing = $bindable(undefined), customCss = undefined, configuration, render } = $props();
+$effect.pre(() => {
+    if (initializing) {
+        initializing = false;
+    }
+});
+const { app, worldStore, workspace } = getContext('AppViewerContext');
+let resolvedConfig = $state(initConfig(components['jobprogressbarcomponent'].initialData.configuration, configuration));
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    jobId: undefined
+});
+initializing = false;
+let css = $state(initCss($app.css?.jobprogressbarcomponent, customCss));
+let jobLoader = $state(undefined);
+let testIsLoading = $state(false);
+let testJob = $state(undefined);
+let scriptProgress = $state(undefined);
+$effect(() => {
+    if (resolvedConfig.jobId) {
+        untrack(() => {
+            outputs.loading.set(true);
+            const jobId = resolvedConfig?.['jobId'];
+            if (jobId) {
+                let callbacks = {
+                    done(x) {
+                        outputs.loading.set(false);
+                        outputs.jobId.set(x.id);
+                        outputs.result.set(x.result);
+                    }
+                };
+                jobLoader?.watchJob(jobId, callbacks);
+            }
+        });
+    }
+});
+</script>
+
+{#each Object.keys(components['jobprogressbarcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.jobprogressbarcomponent}
+	/>
+{/each}
+
+<JobLoader
+	noCode={true}
+	workspaceOverride={workspace}
+	bind:this={jobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	bind:scriptProgress
+/>
+
+<InitializeComponent {id} />
+
+{#if render}
+	<div class="flex flex-col w-full h-full component-wrapper">
+		<div
+			style={css?.container?.style}
+			class={twMerge('p-2 grow overflow-auto', css?.container?.class)}
+		>
+			{#if testJob}
+				{#if testJob.job_kind == 'flow' || testJob.job_kind == 'flowpreview'}
+					<FlowProgressBar
+						job={testJob}
+						bind:currentSubJobProgress={scriptProgress}
+						class="py-4 max-w-7xl mx-auto px-4"
+					/>
+				{:else}
+					<JobProgressBar hideStepTitle job={testJob} {scriptProgress} />
+				{/if}
+			{:else}
+				<span class="text-secondary text-xs">No job</span>
+			{/if}
+		</div>
+	</div>
+{/if}

package/package/components/apps/components/display/AppJobProgressBar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+interface Props {
+    id: string;
+    initializing?: boolean | undefined;
+    customCss?: ComponentCustomCSS<'jobprogressbarcomponent'> | undefined;
+    configuration: RichConfigurations;
+    render: boolean;
+}
+declare const AppJobProgressBar: import("svelte").Component<Props, {}, "initializing">;
+type AppJobProgressBar = ReturnType<typeof AppJobProgressBar>;
+export default AppJobProgressBar;

package/package/components/apps/components/display/AppMap.svelte

@@ -3,17 +3,18 @@ import { getContext } from 'svelte';
 import { initCss } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 import { Map, View, Feature } from 'ol';
-import { useGeographic } from 'ol/proj';
-import { OSM, Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
-import { Point } from 'ol/geom';
-import { defaults as defaultControls } from 'ol/control';
-import { findGridItem, initConfig, initOutput } from '../../editor/appUtils';
+import { useGeographic } from 'ol/proj.js';
+import { OSM, Vector as VectorSource } from 'ol/source.js';
+import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer.js';
+import { Point } from 'ol/geom.js';
+import { defaults as defaultControls } from 'ol/control.js';
+import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import { Style, Circle, Fill, Stroke, Text } from 'ol/style';
+import { Style, Circle, Fill, Stroke, Text } from 'ol/style.js';
+import { findGridItem } from '../../editor/appUtilsCore';
 const LAYER_NAME = {
     MARKER: 'Marker'
 };

package/package/components/apps/components/display/AppMenu.svelte

@@ -91,9 +91,11 @@ let menu = $state();
 									resolvedConfig.fillContainer ? 'w-full h-full' : ''
 								)}
 								style={css?.button?.style}
-								size={resolvedConfig.size}
+								extendedSize={resolvedConfig.size}
 								color={resolvedConfig.color}
 								nonCaptureEvent
+								variant="contained"
+								unifiedSize="sm"
 							>
 								<span class="truncate inline-flex gap-2 items-center">
 									{#if resolvedConfig.beforeIcon}

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -134,6 +134,7 @@ let buttonProps = $derived(getButtonProps(resolvedPath));
 			size="xs"
 			disabled={resolvedDisabled}
 			btnClasses={orientation === 'vertical' ? '!justify-start !whitespace-normal !text-left' : ''}
+			variant="contained"
 		>
 			{#if navbarItem.icon}
 				{#key navbarItem.icon}