@flowdrop/flowdrop 1.0.0

package/dist/components/interrupt/InterruptBubble.svelte

@@ -0,0 +1,601 @@
+<!--
+  InterruptBubble Component
+  
+  Container component for rendering interrupt prompts inline in the chat flow.
+  Displays the appropriate prompt component based on interrupt type.
+  Handles resolve/cancel actions using state machine for safe transitions.
+  Styled with BEM syntax similar to MessageBubble.
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import ConfirmationPrompt from './ConfirmationPrompt.svelte';
+	import ChoicePrompt from './ChoicePrompt.svelte';
+	import TextInputPrompt from './TextInputPrompt.svelte';
+	import FormPrompt from './FormPrompt.svelte';
+	import ReviewPrompt from './ReviewPrompt.svelte';
+	import type {
+		Interrupt,
+		InterruptType,
+		ConfirmationConfig,
+		ChoiceConfig,
+		TextConfig,
+		FormConfig,
+		ReviewConfig,
+		ReviewResolution
+	} from '../../types/interrupt.js';
+	import {
+		isTerminalState,
+		isSubmitting as checkIsSubmitting,
+		getErrorMessage,
+		getResolvedValue
+	} from '../../types/interruptState.js';
+	import {
+		getInterruptsMap,
+		interruptActions,
+		type InterruptWithState
+	} from '../../stores/interruptStore.svelte.js';
+	import { interruptService } from '../../services/interruptService.js';
+	import { logger } from '../../utils/logger.js';
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** The interrupt to display (initial data, used for ID lookup) */
+		interrupt: Interrupt | InterruptWithState;
+		/** Whether to show the timestamp */
+		showTimestamp?: boolean;
+		/** Callback to refresh messages after interrupt resolution */
+		onResolved?: () => void;
+	}
+
+	let { interrupt: initialInterrupt, showTimestamp = true, onResolved }: Props = $props();
+
+	/**
+	 * Get the current interrupt state from the store.
+	 * This ensures we react to store updates (like status changes).
+	 */
+	const currentInterrupt = $derived(
+		getInterruptsMap().get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
+	);
+
+	/**
+	 * Helper to ensure interrupt has machine state
+	 */
+	function addMachineState(interrupt: Interrupt | InterruptWithState): InterruptWithState {
+		if ('machineState' in interrupt) {
+			return interrupt;
+		}
+		return {
+			...interrupt,
+			machineState: { status: 'idle' }
+		};
+	}
+
+	/** Whether this interrupt is in a terminal state (resolved or cancelled) */
+	const isResolved = $derived(isTerminalState(currentInterrupt.machineState));
+
+	/** Whether this interrupt is currently submitting */
+	const isSubmitting = $derived(checkIsSubmitting(currentInterrupt.machineState));
+
+	/** Error message for this interrupt */
+	const error = $derived(getErrorMessage(currentInterrupt.machineState));
+
+	/** Resolved value for display */
+	const resolvedValue = $derived(getResolvedValue(currentInterrupt.machineState));
+
+	/**
+	 * Get the icon for the interrupt type
+	 */
+	function getTypeIcon(type: InterruptType): string {
+		switch (type) {
+			case 'confirmation':
+				return 'mdi:help-circle';
+			case 'choice':
+				return 'mdi:format-list-bulleted';
+			case 'text':
+				return 'mdi:text-box';
+			case 'form':
+				return 'mdi:form-select';
+			case 'review':
+				return 'mdi:file-compare';
+			default:
+				return 'mdi:bell';
+		}
+	}
+
+	/**
+	 * Get the label for the interrupt type
+	 */
+	function getTypeLabel(type: InterruptType): string {
+		switch (type) {
+			case 'confirmation':
+				return 'Confirmation Required';
+			case 'choice':
+				return 'Selection Required';
+			case 'text':
+				return 'Input Required';
+			case 'form':
+				return 'Form Required';
+			case 'review':
+				return 'Review Required';
+			default:
+				return 'Action Required';
+		}
+	}
+
+	/** Get resolved label for the header when resolved */
+	function getResolvedLabel(type: InterruptType): string {
+		switch (type) {
+			case 'confirmation':
+				return 'Confirmation Submitted';
+			case 'choice':
+				return 'Selection Made';
+			case 'text':
+				return 'Input Submitted';
+			case 'form':
+				return 'Form Submitted';
+			case 'review':
+				return 'Review Submitted';
+			default:
+				return 'Response Submitted';
+		}
+	}
+
+	/**
+	 * Format timestamp for display
+	 */
+	function formatTimestamp(timestamp: string): string {
+		const date = new Date(timestamp);
+		return date.toLocaleTimeString('en-US', {
+			hour12: false,
+			hour: '2-digit',
+			minute: '2-digit',
+			second: '2-digit'
+		});
+	}
+
+	/**
+	 * Handle resolve action using state machine
+	 */
+	async function handleResolve(value: unknown): Promise<void> {
+		// Start the submission - state machine validates this transition
+		const startResult = interruptActions.startSubmit(currentInterrupt.id, value);
+		if (!startResult.valid) {
+			logger.warn('[InterruptBubble] Cannot submit:', startResult.error);
+			return;
+		}
+
+		try {
+			// Call API if service is configured
+			if (interruptService.isConfigured()) {
+				await interruptService.resolveInterrupt(currentInterrupt.id, value);
+			}
+
+			// Mark as successful - transitions to resolved state
+			interruptActions.submitSuccess(currentInterrupt.id);
+
+			// Notify parent to refresh messages
+			onResolved?.();
+		} catch (err) {
+			// Mark as failed - transitions to error state (can retry)
+			const errorMessage = err instanceof Error ? err.message : 'Failed to submit response';
+			interruptActions.submitFailure(currentInterrupt.id, errorMessage);
+			logger.error('[InterruptBubble] Resolve error:', err);
+		}
+	}
+
+	/**
+	 * Handle cancel action using state machine
+	 */
+	async function handleCancel(): Promise<void> {
+		// Start the cancel - state machine validates this transition
+		const startResult = interruptActions.startCancel(currentInterrupt.id);
+		if (!startResult.valid) {
+			logger.warn('[InterruptBubble] Cannot cancel:', startResult.error);
+			return;
+		}
+
+		try {
+			// Call API if service is configured
+			if (interruptService.isConfigured()) {
+				await interruptService.cancelInterrupt(currentInterrupt.id);
+			}
+
+			// Mark as successful - transitions to cancelled state
+			interruptActions.submitSuccess(currentInterrupt.id);
+
+			// Notify parent to refresh messages
+			onResolved?.();
+		} catch (err) {
+			// Mark as failed - transitions to error state (can retry)
+			const errorMessage = err instanceof Error ? err.message : 'Failed to cancel';
+			interruptActions.submitFailure(currentInterrupt.id, errorMessage);
+			logger.error('[InterruptBubble] Cancel error:', err);
+		}
+	}
+
+	/**
+	 * Handle retry after error
+	 */
+	function handleRetry(): void {
+		interruptActions.retry(currentInterrupt.id);
+	}
+
+	// Typed config getters for each prompt type
+	const confirmationConfig = $derived(currentInterrupt.config as ConfirmationConfig);
+	const choiceConfig = $derived(currentInterrupt.config as ChoiceConfig);
+	const textConfig = $derived(currentInterrupt.config as TextConfig);
+	const formConfig = $derived(currentInterrupt.config as FormConfig);
+	const reviewConfig = $derived(currentInterrupt.config as ReviewConfig);
+
+	// Determine the actual resolved value to pass to prompt components
+	const displayResolvedValue = $derived(resolvedValue ?? currentInterrupt.responseValue);
+
+	/**
+	 * Extract the username of who resolved the interrupt from metadata.
+	 * This is provided by the backend when the interrupt is resolved.
+	 */
+	const resolvedByUserName = $derived(
+		typeof currentInterrupt.metadata?.resolvedByUserName === 'string'
+			? currentInterrupt.metadata.resolvedByUserName
+			: undefined
+	);
+</script>
+
+<div
+	class="interrupt-bubble"
+	class:interrupt-bubble--completed={currentInterrupt.machineState.status === 'resolved'}
+	class:interrupt-bubble--cancelled={currentInterrupt.machineState.status === 'cancelled'}
+	class:interrupt-bubble--submitting={isSubmitting}
+	class:interrupt-bubble--error={currentInterrupt.machineState.status === 'error'}
+>
+	<!-- Header -->
+	<div class="interrupt-bubble__header">
+		<span class="interrupt-bubble__type">
+			<Icon icon={getTypeIcon(currentInterrupt.type)} />
+			{#if isResolved}
+				{currentInterrupt.machineState.status === 'cancelled'
+					? 'Cancelled'
+					: getResolvedLabel(currentInterrupt.type)}
+			{:else if currentInterrupt.machineState.status === 'error'}
+				Error - Click to Retry
+			{:else}
+				{getTypeLabel(currentInterrupt.type)}
+			{/if}
+		</span>
+		{#if showTimestamp}
+			<span class="interrupt-bubble__timestamp">
+				{formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
+			</span>
+		{/if}
+	</div>
+
+	<!-- Error message with retry button -->
+	{#if currentInterrupt.machineState.status === 'error'}
+		<div class="interrupt-bubble__error">
+			<Icon icon="mdi:alert-circle" />
+			<span>{error}</span>
+			<button type="button" class="interrupt-bubble__retry-btn" onclick={handleRetry}>
+				<Icon icon="mdi:refresh" />
+				Retry
+			</button>
+		</div>
+	{/if}
+
+	<!-- Prompt content based on type -->
+	<div class="interrupt-bubble__body">
+		{#if currentInterrupt.type === 'confirmation'}
+			<ConfirmationPrompt
+				config={confirmationConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as boolean | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onConfirm={() => handleResolve(true)}
+				onDecline={() => handleResolve(false)}
+			/>
+		{:else if currentInterrupt.type === 'choice'}
+			<ChoicePrompt
+				config={choiceConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as string | string[] | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{:else if currentInterrupt.type === 'text'}
+			<TextInputPrompt
+				config={textConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as string | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{:else if currentInterrupt.type === 'form'}
+			<FormPrompt
+				config={formConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as Record<string, unknown> | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{:else if currentInterrupt.type === 'review'}
+			<ReviewPrompt
+				config={reviewConfig}
+				{isResolved}
+				resolvedValue={displayResolvedValue as ReviewResolution | undefined}
+				{isSubmitting}
+				{error}
+				{resolvedByUserName}
+				onSubmit={(value) => handleResolve(value)}
+			/>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	{#if currentInterrupt.nodeId || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
+		<div class="interrupt-bubble__footer">
+			{#if currentInterrupt.nodeId}
+				<span class="interrupt-bubble__node" title="Node ID: {currentInterrupt.nodeId}">
+					<Icon icon="mdi:graph" />
+					<span>From workflow node</span>
+				</span>
+			{/if}
+			{#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
+				<button
+					type="button"
+					class="interrupt-bubble__cancel-btn"
+					onclick={handleCancel}
+					disabled={isSubmitting}
+				>
+					<Icon icon="mdi:close" />
+					<span>Cancel</span>
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Uses design tokens from base.css: --fd-interrupt-* */
+	.interrupt-bubble {
+		display: flex;
+		flex-direction: column;
+		margin: var(--fd-space-md) var(--fd-space-xl);
+		border-radius: var(--fd-radius-xl);
+		background-color: var(--fd-interrupt-prompt-bg);
+		border: 1px solid var(--fd-interrupt-prompt-border-pending);
+		box-shadow: 0 2px 8px var(--fd-interrupt-pending-shadow);
+		animation: interruptSlideIn 0.3s ease-out;
+		overflow: hidden;
+	}
+
+	@keyframes interruptSlideIn {
+		from {
+			opacity: 0;
+			transform: translateY(12px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* State border colors */
+	.interrupt-bubble--completed {
+		border-color: var(--fd-interrupt-prompt-border-completed);
+		box-shadow: 0 2px 8px var(--fd-interrupt-completed-shadow);
+	}
+
+	.interrupt-bubble--cancelled {
+		border-color: var(--fd-interrupt-prompt-border-cancelled);
+		box-shadow: 0 2px 8px var(--fd-interrupt-cancelled-shadow);
+	}
+
+	.interrupt-bubble--error {
+		border-color: var(--fd-interrupt-prompt-border-error);
+		box-shadow: 0 2px 8px var(--fd-interrupt-error-shadow);
+	}
+
+	.interrupt-bubble--submitting {
+		opacity: 0.9;
+	}
+
+	/* Header */
+	.interrupt-bubble__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		background: var(--fd-interrupt-pending-bg);
+		border-bottom: 1px solid var(--fd-interrupt-prompt-border-pending);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__header {
+		background: var(--fd-interrupt-completed-bg);
+		border-bottom-color: var(--fd-interrupt-prompt-border-completed);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__header {
+		background: var(--fd-interrupt-cancelled-bg);
+		border-bottom-color: var(--fd-interrupt-prompt-border-cancelled);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__header {
+		background: var(--fd-interrupt-error-bg);
+		border-bottom-color: var(--fd-interrupt-prompt-border-error);
+	}
+
+	.interrupt-bubble__type {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-2xs);
+		font-weight: 600;
+		font-size: var(--fd-text-sm);
+		color: var(--fd-interrupt-pending-text);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__type {
+		color: var(--fd-interrupt-completed-text);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__type {
+		color: var(--fd-interrupt-cancelled-text);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__type {
+		color: var(--fd-interrupt-error-text);
+	}
+
+	.interrupt-bubble__timestamp {
+		font-size: var(--fd-text-2xs);
+		color: var(--fd-interrupt-pending-text-light);
+		font-family: var(--fd-font-mono);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__timestamp {
+		color: var(--fd-interrupt-completed-text-light);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__timestamp {
+		color: var(--fd-interrupt-cancelled-text-light);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__timestamp {
+		color: var(--fd-interrupt-error-text-light);
+	}
+
+	/* Error message */
+	.interrupt-bubble__error {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-xs);
+		margin: var(--fd-space-md) var(--fd-space-xl) 0;
+		padding: var(--fd-space-xs) var(--fd-space-md);
+		background-color: var(--fd-error-muted);
+		border-radius: var(--fd-radius-md);
+		color: var(--fd-interrupt-error-text);
+		font-size: var(--fd-interrupt-font-error);
+	}
+
+	.interrupt-bubble__retry-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--fd-space-3xs);
+		margin-left: auto;
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
+		font-size: var(--fd-text-xs);
+		font-weight: 500;
+		font-family: inherit;
+		color: var(--fd-error-foreground);
+		background-color: var(--fd-interrupt-error-avatar);
+		border: none;
+		border-radius: var(--fd-radius-sm);
+		cursor: pointer;
+		transition: background-color var(--fd-transition-fast);
+	}
+
+	.interrupt-bubble__retry-btn:hover {
+		background-color: var(--fd-error-hover);
+	}
+
+	/* Body - prompt content area, full width */
+	.interrupt-bubble__body {
+		padding: var(--fd-space-xl);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__body {
+		opacity: 0.75;
+	}
+
+	/* Desaturate body content in error state to reduce visual noise from green/red colors */
+	.interrupt-bubble--error .interrupt-bubble__body {
+		filter: saturate(0.2);
+		opacity: 0.7;
+	}
+
+	/* Footer */
+	.interrupt-bubble__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		background: var(--fd-interrupt-pending-bg);
+		border-top: 1px solid var(--fd-interrupt-prompt-border-pending);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__footer {
+		background: var(--fd-interrupt-completed-bg);
+		border-top-color: var(--fd-interrupt-prompt-border-completed);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__footer {
+		background: var(--fd-interrupt-cancelled-bg);
+		border-top-color: var(--fd-interrupt-prompt-border-cancelled);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__footer {
+		background: var(--fd-interrupt-error-bg);
+		border-top-color: var(--fd-interrupt-prompt-border-error);
+	}
+
+	.interrupt-bubble__node {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-3xs);
+		font-size: var(--fd-text-2xs);
+		color: var(--fd-muted-foreground);
+	}
+
+	.interrupt-bubble__cancel-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--fd-space-2xs);
+		margin-left: auto;
+		padding: var(--fd-space-2xs) var(--fd-space-md);
+		font-size: var(--fd-text-xs);
+		font-weight: 500;
+		font-family: inherit;
+		color: var(--fd-muted-foreground);
+		background-color: transparent;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+	}
+
+	.interrupt-bubble__cancel-btn:hover:not(:disabled) {
+		color: var(--fd-error);
+		border-color: var(--fd-error);
+		background-color: var(--fd-error-muted);
+	}
+
+	.interrupt-bubble__cancel-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.interrupt-bubble {
+			margin: var(--fd-space-xs);
+		}
+
+		.interrupt-bubble__header,
+		.interrupt-bubble__body,
+		.interrupt-bubble__footer {
+			padding-left: var(--fd-space-lg);
+			padding-right: var(--fd-space-lg);
+		}
+	}
+</style>

package/dist/components/interrupt/InterruptBubble.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Interrupt } from '../../types/interrupt.js';
+import { type InterruptWithState } from '../../stores/interruptStore.svelte.js';
+/**
+ * Component props
+ */
+interface Props {
+    /** The interrupt to display (initial data, used for ID lookup) */
+    interrupt: Interrupt | InterruptWithState;
+    /** Whether to show the timestamp */
+    showTimestamp?: boolean;
+    /** Callback to refresh messages after interrupt resolution */
+    onResolved?: () => void;
+}
+declare const InterruptBubble: import("svelte").Component<Props, {}, "">;
+type InterruptBubble = ReturnType<typeof InterruptBubble>;
+export default InterruptBubble;

package/dist/components/interrupt/ReviewPrompt.stories.svelte

@@ -0,0 +1,67 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ReviewPrompt from './ReviewPrompt.svelte';
+	import { fn } from 'storybook/test';
+	import { createReviewConfig } from '../../stories/utils.js';
+
+	const { Story } = defineMeta({
+		title: 'Interrupt/ReviewPrompt',
+		component: ReviewPrompt,
+		tags: ['autodocs'],
+		args: {
+			config: createReviewConfig(),
+			isResolved: false,
+			isSubmitting: false,
+			onSubmit: fn()
+		}
+	});
+</script>
+
+<Story name="Default" />
+
+<Story
+	name="Many Changes"
+	args={{
+		config: createReviewConfig({
+			message: 'Review the content updates:',
+			changes: [
+				{
+					field: 'title',
+					label: 'Title',
+					original: 'Getting Started',
+					proposed: 'Quick Start Guide'
+				},
+				{
+					field: 'slug',
+					label: 'URL Slug',
+					original: '/getting-started',
+					proposed: '/quick-start-guide'
+				},
+				{
+					field: 'description',
+					label: 'Meta Description',
+					original: 'Learn how to get started',
+					proposed: 'A quick start guide for new users'
+				},
+				{ field: 'author', label: 'Author', original: 'admin', proposed: 'editor' },
+				{ field: 'status', label: 'Status', original: 'draft', proposed: 'published' }
+			]
+		})
+	}}
+/>
+
+<Story
+	name="Resolved"
+	args={{
+		isResolved: true,
+		resolvedValue: {
+			decisions: {
+				title: { accepted: true, value: 'New Title' },
+				description: { accepted: false, value: 'Old description text' },
+				status: { accepted: true, value: 'published' }
+			},
+			summary: { accepted: 2, rejected: 1, total: 3 }
+		},
+		resolvedByUserName: 'Diana'
+	}}
+/>

package/dist/components/interrupt/ReviewPrompt.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default ReviewPrompt;
+type ReviewPrompt = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ReviewPrompt: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ReviewPrompt from './ReviewPrompt.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}