@d34dman/flowdrop 0.0.37 → 0.0.39

package/dist/components/interrupt/InterruptBubble.svelte

@@ -0,0 +1,621 @@
+<!--
+  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 type {
+		Interrupt,
+		InterruptType,
+		ConfirmationConfig,
+		ChoiceConfig,
+		TextConfig,
+		FormConfig
+	} from '../../types/interrupt.js';
+	import {
+		isTerminalState,
+		isSubmitting as checkIsSubmitting,
+		getErrorMessage,
+		getResolvedValue
+	} from '../../types/interruptState.js';
+	import {
+		interrupts,
+		interruptActions,
+		type InterruptWithState
+	} from '../../stores/interruptStore.js';
+	import { interruptService } from '../../services/interruptService.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(
+		$interrupts.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';
+			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';
+			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';
+			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) {
+			console.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);
+			console.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) {
+			console.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);
+			console.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);
+
+	// Determine the actual resolved value to pass to prompt components
+	const displayResolvedValue = $derived(resolvedValue ?? currentInterrupt.responseValue);
+</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'}
+>
+	<!-- Avatar / Icon -->
+	<div class="interrupt-bubble__avatar">
+		{#if currentInterrupt.machineState.status === 'cancelled'}
+			<Icon icon="mdi:close-circle" />
+		{:else if currentInterrupt.machineState.status === 'resolved'}
+			<Icon icon="mdi:check-circle" />
+		{:else if currentInterrupt.machineState.status === 'error'}
+			<Icon icon="mdi:alert-circle" />
+		{:else}
+			<Icon icon="mdi:bell-ring" />
+		{/if}
+	</div>
+
+	<!-- Content -->
+	<div class="interrupt-bubble__content">
+		<!-- 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__prompt">
+			{#if currentInterrupt.type === 'confirmation'}
+				<ConfirmationPrompt
+					config={confirmationConfig}
+					{isResolved}
+					resolvedValue={displayResolvedValue as boolean | undefined}
+					{isSubmitting}
+					{error}
+					onConfirm={() => handleResolve(true)}
+					onDecline={() => handleResolve(false)}
+				/>
+			{:else if currentInterrupt.type === 'choice'}
+				<ChoicePrompt
+					config={choiceConfig}
+					{isResolved}
+					resolvedValue={displayResolvedValue as string | string[] | undefined}
+					{isSubmitting}
+					{error}
+					onSubmit={(value) => handleResolve(value)}
+				/>
+			{:else if currentInterrupt.type === 'text'}
+				<TextInputPrompt
+					config={textConfig}
+					{isResolved}
+					resolvedValue={displayResolvedValue as string | undefined}
+					{isSubmitting}
+					{error}
+					onSubmit={(value) => handleResolve(value)}
+				/>
+			{:else if currentInterrupt.type === 'form'}
+				<FormPrompt
+					config={formConfig}
+					{isResolved}
+					resolvedValue={displayResolvedValue as Record<string, unknown> | undefined}
+					{isSubmitting}
+					{error}
+					onSubmit={(value) => handleResolve(value)}
+				/>
+			{/if}
+		</div>
+
+		<!-- Cancel button (if allowed and not in terminal state) -->
+		{#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
+			<div class="interrupt-bubble__cancel-wrapper">
+				<button
+					type="button"
+					class="interrupt-bubble__cancel-btn"
+					onclick={handleCancel}
+					disabled={isSubmitting}
+				>
+					<Icon icon="mdi:close" />
+					<span>Cancel</span>
+				</button>
+			</div>
+		{/if}
+
+		<!-- Node info footer -->
+		{#if currentInterrupt.nodeId}
+			<div class="interrupt-bubble__footer">
+				<span class="interrupt-bubble__node" title="Node ID: {currentInterrupt.nodeId}">
+					<Icon icon="mdi:graph" />
+					<span>From workflow node</span>
+				</span>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Uses design tokens from base.css: --flowdrop-interrupt-* */
+	.interrupt-bubble {
+		display: flex;
+		gap: 0.75rem;
+		padding: 1rem 1.25rem;
+		margin: 0.75rem 1rem;
+		border-radius: 0.75rem;
+		background: var(--flowdrop-interrupt-pending-bg);
+		border: 1px solid var(--flowdrop-interrupt-pending-border);
+		box-shadow: 0 2px 8px var(--flowdrop-interrupt-pending-shadow);
+		animation: interruptSlideIn 0.3s ease-out;
+	}
+
+	@keyframes interruptSlideIn {
+		from {
+			opacity: 0;
+			transform: translateY(12px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* Completed state - neutral blue to indicate response received without implying good/bad */
+	.interrupt-bubble--completed {
+		background: var(--flowdrop-interrupt-completed-bg);
+		border-color: var(--flowdrop-interrupt-completed-border);
+		box-shadow: 0 2px 8px var(--flowdrop-interrupt-completed-shadow);
+	}
+
+	.interrupt-bubble--cancelled {
+		background: var(--flowdrop-interrupt-cancelled-bg);
+		border-color: var(--flowdrop-interrupt-cancelled-border);
+		box-shadow: 0 2px 8px var(--flowdrop-interrupt-cancelled-shadow);
+	}
+
+	.interrupt-bubble--error {
+		background: var(--flowdrop-interrupt-error-bg);
+		border-color: var(--flowdrop-interrupt-error-border);
+		box-shadow: 0 2px 8px var(--flowdrop-interrupt-error-shadow);
+	}
+
+	.interrupt-bubble--submitting {
+		opacity: 0.9;
+	}
+
+	/* Avatar */
+	.interrupt-bubble__avatar {
+		flex-shrink: 0;
+		width: 2.25rem;
+		height: 2.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background-color: var(--flowdrop-interrupt-pending-avatar);
+		color: #ffffff;
+		font-size: 1.125rem;
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__avatar {
+		background-color: var(--flowdrop-interrupt-completed-avatar);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__avatar {
+		background-color: var(--flowdrop-interrupt-cancelled-avatar);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__avatar {
+		background-color: var(--flowdrop-interrupt-error-avatar);
+	}
+
+	/* Content */
+	.interrupt-bubble__content {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	/* Header */
+	.interrupt-bubble__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.interrupt-bubble__type {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-weight: 600;
+		font-size: 0.875rem;
+		color: var(--flowdrop-interrupt-pending-text);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__type {
+		color: var(--flowdrop-interrupt-completed-text);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__type {
+		color: var(--flowdrop-interrupt-cancelled-text);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__type {
+		color: var(--flowdrop-interrupt-error-text);
+	}
+
+	.interrupt-bubble__timestamp {
+		font-size: 0.6875rem;
+		color: var(--flowdrop-interrupt-pending-text-light);
+		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__timestamp {
+		color: var(--flowdrop-interrupt-completed-text-light);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__timestamp {
+		color: var(--flowdrop-interrupt-cancelled-text-light);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__timestamp {
+		color: var(--flowdrop-interrupt-error-text-light);
+	}
+
+	/* Error message */
+	.interrupt-bubble__error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--color-ref-red-50, rgba(239, 68, 68, 0.1));
+		border-radius: 0.375rem;
+		color: var(--flowdrop-interrupt-error-text);
+		font-size: 0.8125rem;
+	}
+
+	.interrupt-bubble__retry-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		margin-left: auto;
+		padding: 0.25rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		font-family: inherit;
+		color: #ffffff;
+		background-color: var(--flowdrop-interrupt-error-avatar);
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+	}
+
+	.interrupt-bubble__retry-btn:hover {
+		background-color: var(--color-ref-red-600, #dc2626);
+	}
+
+	/* Prompt */
+	.interrupt-bubble__prompt {
+		background-color: var(--flowdrop-interrupt-prompt-bg);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		border: 1px solid var(--flowdrop-interrupt-prompt-border-pending);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__prompt {
+		border-color: var(--flowdrop-interrupt-prompt-border-completed);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__prompt {
+		border-color: var(--flowdrop-interrupt-prompt-border-cancelled);
+		opacity: 0.75;
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__prompt {
+		border-color: var(--flowdrop-interrupt-prompt-border-error);
+	}
+
+	/* Cancel button wrapper */
+	.interrupt-bubble__cancel-wrapper {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.interrupt-bubble__cancel-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		font-family: inherit;
+		color: #6b7280;
+		background-color: transparent;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.interrupt-bubble__cancel-btn:hover:not(:disabled) {
+		color: #dc2626;
+		border-color: #fca5a5;
+		background-color: #fef2f2;
+	}
+
+	.interrupt-bubble__cancel-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Footer */
+	.interrupt-bubble__footer {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding-top: 0.5rem;
+		border-top: 1px solid var(--flowdrop-interrupt-prompt-border-pending);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__footer {
+		border-color: var(--flowdrop-interrupt-prompt-border-completed);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__footer {
+		border-color: var(--flowdrop-interrupt-prompt-border-cancelled);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__footer {
+		border-color: var(--flowdrop-interrupt-prompt-border-error);
+	}
+
+	.interrupt-bubble__node {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.6875rem;
+		color: var(--flowdrop-interrupt-pending-text);
+	}
+
+	.interrupt-bubble--completed .interrupt-bubble__node {
+		color: var(--flowdrop-interrupt-completed-text);
+	}
+
+	.interrupt-bubble--cancelled .interrupt-bubble__node {
+		color: var(--flowdrop-interrupt-cancelled-text);
+	}
+
+	.interrupt-bubble--error .interrupt-bubble__node {
+		color: var(--flowdrop-interrupt-error-text);
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.interrupt-bubble {
+			margin: 0.5rem;
+			padding: 0.875rem 1rem;
+		}
+
+		.interrupt-bubble__avatar {
+			width: 2rem;
+			height: 2rem;
+			font-size: 1rem;
+		}
+	}
+</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.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;