@flowdrop/flowdrop 1.0.0

package/dist/components/playground/ChatPanel.svelte

@@ -0,0 +1,905 @@
+<!--
+  ChatPanel Component
+  
+  Clean conversational chat interface for the playground.
+  Displays messages with chat bubbles and includes a simple input area.
+  Styled with BEM syntax for a Langflow-like appearance.
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { tick } from 'svelte';
+	import MessageBubble from './MessageBubble.svelte';
+	import { InterruptBubble } from '../interrupt/index.js';
+	import type { PlaygroundMessage } from '../../types/playground.js';
+	import { hasEnableRunFlag } from '../../types/playground.js';
+	import {
+		isInterruptMetadata,
+		extractInterruptMetadata,
+		metadataToInterrupt
+	} from '../../types/interrupt.js';
+	import {
+		getMessages,
+		getChatMessages,
+		getIsExecuting,
+		getSessionStatus,
+		getCurrentSession
+	} from '../../stores/playgroundStore.svelte.js';
+	import {
+		getInterruptsMap,
+		interruptActions,
+		getInterruptByMessageId
+	} from '../../stores/interruptStore.svelte.js';
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** Whether to show timestamps on messages */
+		showTimestamps?: boolean;
+		/** Whether to auto-scroll to bottom on new messages */
+		autoScroll?: boolean;
+		/** Placeholder text for the input */
+		placeholder?: string;
+		/** Callback when user sends a message */
+		onSendMessage?: (content: string) => void;
+		/** Callback when user requests to stop execution */
+		onStopExecution?: () => void;
+		/** Whether to show log messages inline (false = hide them) */
+		showLogsInline?: boolean;
+		/** Whether to enable markdown rendering in messages */
+		enableMarkdown?: boolean;
+		/** Callback when an interrupt is resolved (to refresh messages) */
+		onInterruptResolved?: () => void;
+		/**
+		 * Whether to show the chat text input (default: true)
+		 * When false, only the "Run" button is displayed.
+		 */
+		showChatInput?: boolean;
+		/**
+		 * Whether to show the "Run" button (default: true)
+		 * When false, the Run button is hidden.
+		 */
+		showRunButton?: boolean;
+		/**
+		 * Predefined message to send when "Run" button is clicked
+		 * Used when showChatInput is false.
+		 */
+		predefinedMessage?: string;
+		/**
+		 * Whether to display system messages in compact mode.
+		 * When true, system messages appear as minimal inline text
+		 * instead of full chat bubbles to reduce visual noise.
+		 * @default true
+		 */
+		compactSystemMessages?: boolean;
+	}
+
+	let {
+		showTimestamps = true,
+		autoScroll = true,
+		placeholder = 'Type your message...',
+		onSendMessage,
+		onStopExecution,
+		showLogsInline = false,
+		enableMarkdown = true,
+		onInterruptResolved,
+		showChatInput = true,
+		showRunButton = true,
+		predefinedMessage = 'Run workflow',
+		compactSystemMessages = true
+	}: Props = $props();
+
+	/**
+	 * Tracks whether the Run button is enabled.
+	 * Starts as true, becomes false after Run is clicked,
+	 * and is re-enabled when backend sends a message with enableRun: true metadata.
+	 */
+	let runEnabled = $state(true);
+
+	/**
+	 * Computed flag: true if both chat input and run button are hidden.
+	 * In this case, we show a helpful message to the user.
+	 */
+	const noInputsAvailable = $derived(!showChatInput && !showRunButton);
+
+	/** Input field value */
+	let inputValue = $state('');
+
+	/** Reference to the messages container for scrolling */
+	let messagesContainer = $state<HTMLDivElement>();
+
+	/** Reference to the input field */
+	let inputField = $state<HTMLTextAreaElement>();
+
+	/**
+	 * Filter messages based on showLogsInline setting
+	 */
+	const displayMessages = $derived(showLogsInline ? getMessages() : getChatMessages());
+
+	/**
+	 * Track previous message count for detecting new messages.
+	 * We only want to auto-scroll when NEW messages are added,
+	 * not when existing messages are updated.
+	 */
+	let previousMessageCount = $state(0);
+
+	/**
+	 * Check if user is near the bottom of the scroll container.
+	 * Used to determine if we should auto-scroll when new messages arrive.
+	 * If user has scrolled up to read previous messages, we don't interrupt them.
+	 *
+	 * @param threshold - Pixels from bottom to consider "near bottom"
+	 * @returns True if user is within threshold of the bottom
+	 */
+	function isNearBottom(threshold: number = 100): boolean {
+		if (!messagesContainer) return true;
+		const { scrollTop, scrollHeight, clientHeight } = messagesContainer;
+		return scrollHeight - scrollTop - clientHeight <= threshold;
+	}
+
+	/**
+	 * Check if a form element inside the messages container has focus.
+	 * When user is interacting with a form (e.g., interrupt prompt),
+	 * we should not auto-scroll as it disrupts their input.
+	 */
+	function isFormFocused(): boolean {
+		if (!messagesContainer) return false;
+		const activeElement = document.activeElement;
+		if (!activeElement) return false;
+		// Check if active element is a form control inside the messages container
+		const isFormControl =
+			activeElement.tagName === 'INPUT' ||
+			activeElement.tagName === 'TEXTAREA' ||
+			activeElement.tagName === 'SELECT' ||
+			activeElement.tagName === 'BUTTON' ||
+			activeElement.getAttribute('contenteditable') === 'true';
+		return isFormControl && messagesContainer.contains(activeElement);
+	}
+
+	/**
+	 * Check if a message is an interrupt request
+	 */
+	function isInterruptMessage(message: PlaygroundMessage): boolean {
+		return isInterruptMetadata(message.metadata as Record<string, unknown> | undefined);
+	}
+
+	/**
+	 * Sync interrupt messages to the interrupt store.
+	 * This effect runs when messages change and adds any new interrupt messages
+	 * to the interrupt store. We do this in an effect rather than during render
+	 * to avoid Svelte 5's state_unsafe_mutation error.
+	 *
+	 * If a message has status 'completed', the interrupt is marked as resolved
+	 * to show the "Confirmation Submitted" header, disabled buttons, and
+	 * "Response submitted" indicator.
+	 */
+	$effect(() => {
+		// Get all messages that are interrupt requests
+		const interruptMessages = displayMessages.filter(isInterruptMessage);
+
+		for (const message of interruptMessages) {
+			// Check if we already have this interrupt in the store
+			const existing = getInterruptByMessageId(message.id);
+			if (!existing) {
+				// Extract and validate interrupt metadata
+				const metadata = extractInterruptMetadata(
+					message.metadata as Record<string, unknown> | undefined
+				);
+				if (metadata) {
+					const interrupt = metadataToInterrupt(metadata, message.id, message.content);
+					interruptActions.addInterrupt(interrupt);
+
+					// If the message status is 'completed', mark the interrupt as resolved
+					// This ensures completed interrupts show proper UI state:
+					// - "Confirmation Submitted" header
+					// - Disabled buttons
+					// - "Response submitted" indicator
+					if (message.status === 'completed') {
+						interruptActions.resolveInterrupt(interrupt.id, metadata.response_value);
+					}
+				}
+			}
+		}
+	});
+
+	/**
+	 * Reactive map of message IDs to interrupts.
+	 * This ensures the component re-renders when interrupts are added to the store.
+	 */
+	const interruptsByMessageId = $derived(
+		new Map(
+			Array.from(getInterruptsMap().values())
+				.filter((i) => i.messageId)
+				.map((i) => [i.messageId, i])
+		)
+	);
+
+	/**
+	 * Get interrupt data for a message from the reactive map
+	 */
+	function getInterruptForMessage(message: PlaygroundMessage) {
+		return interruptsByMessageId.get(message.id);
+	}
+
+	/**
+	 * Check if we should show the welcome state
+	 */
+	const showWelcome = $derived(!getCurrentSession() && displayMessages.length === 0);
+
+	/**
+	 * Check if we should show the empty chat state (session exists but no messages)
+	 */
+	const showEmptyChat = $derived(getCurrentSession() && displayMessages.length === 0);
+
+	/**
+	 * Handle sending a message
+	 */
+	function handleSend(): void {
+		const trimmedValue = inputValue.trim();
+		if (!trimmedValue || getIsExecuting()) {
+			return;
+		}
+
+		onSendMessage?.(trimmedValue);
+		inputValue = '';
+
+		// Reset textarea height
+		if (inputField) {
+			inputField.style.height = 'auto';
+		}
+
+		// Re-focus the input
+		tick().then(() => {
+			inputField?.focus();
+		});
+	}
+
+	/**
+	 * Handle keyboard events in the input
+	 */
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSend();
+		}
+	}
+
+	/**
+	 * Handle stop execution
+	 */
+	function handleStop(): void {
+		onStopExecution?.();
+	}
+
+	/**
+	 * Handle "Run" button click when chat input is hidden.
+	 * Sends the predefined message to execute the workflow.
+	 * Disables the Run button after clicking until backend re-enables it.
+	 */
+	function handleRun(): void {
+		if (getIsExecuting() || !runEnabled) {
+			return;
+		}
+		// Disable the Run button after clicking
+		runEnabled = false;
+		onSendMessage?.(predefinedMessage);
+	}
+
+	/**
+	 * Track processed message IDs for enableRun detection
+	 * to avoid re-processing the same messages.
+	 */
+	let processedEnableRunIds = $state(new Set<string>());
+
+	/**
+	 * Watch for messages with enableRun: true metadata from the backend.
+	 * When detected, re-enable the Run button.
+	 */
+	$effect(() => {
+		// Check all messages for enableRun flag
+		for (const message of displayMessages) {
+			// Skip if already processed
+			if (processedEnableRunIds.has(message.id)) {
+				continue;
+			}
+			// Check if this message has the enableRun flag
+			if (hasEnableRunFlag(message.metadata)) {
+				// Mark as processed
+				processedEnableRunIds = new Set([...processedEnableRunIds, message.id]);
+				// Re-enable the Run button
+				runEnabled = true;
+			}
+		}
+	});
+
+	/**
+	 * Reset runEnabled state when session changes.
+	 * This ensures a fresh state for each session.
+	 */
+	$effect(() => {
+		const session = getCurrentSession();
+		if (session) {
+			// Reset to enabled state for new/changed sessions
+			runEnabled = true;
+			// Clear processed IDs for the new session
+			processedEnableRunIds = new Set();
+		}
+	});
+
+	/**
+	 * Smart auto-scroll to bottom when NEW messages are added.
+	 *
+	 * Only scrolls if:
+	 * 1. autoScroll prop is enabled
+	 * 2. New messages were actually added (not just updates)
+	 * 3. User is already near the bottom (hasn't scrolled up to read)
+	 * 4. User is not interacting with a form inside the chat
+	 *
+	 * This prevents disruptive scrolling when:
+	 * - User is reading previous messages
+	 * - User is filling out an interrupt form
+	 * - Messages are being updated (e.g., status changes)
+	 */
+	$effect(() => {
+		const currentCount = displayMessages.length;
+
+		// Skip if auto-scroll is disabled or no container
+		if (!autoScroll || !messagesContainer) {
+			previousMessageCount = currentCount;
+			return;
+		}
+
+		// Check if this is a NEW message (count increased)
+		const hasNewMessage = currentCount > previousMessageCount;
+
+		// Update the tracked count
+		previousMessageCount = currentCount;
+
+		// Only scroll if there's a new message
+		if (!hasNewMessage) {
+			return;
+		}
+
+		// Don't scroll if user has scrolled up to read previous messages
+		if (!isNearBottom()) {
+			return;
+		}
+
+		// Don't scroll if user is interacting with a form
+		if (isFormFocused()) {
+			return;
+		}
+
+		// Safe to scroll to bottom
+		tick().then(() => {
+			if (messagesContainer) {
+				messagesContainer.scrollTop = messagesContainer.scrollHeight;
+			}
+		});
+	});
+
+	/**
+	 * Track previous executing state to detect when execution completes
+	 */
+	let wasExecuting = $state(false);
+
+	/**
+	 * Auto-focus input when execution completes or session becomes ready
+	 */
+	$effect(() => {
+		const currentlyExecuting = getIsExecuting();
+
+		// Focus input when execution completes (was executing, now not)
+		if (wasExecuting && !currentlyExecuting && inputField) {
+			tick().then(() => {
+				inputField?.focus();
+			});
+		}
+
+		// Update tracking state
+		wasExecuting = currentlyExecuting;
+	});
+
+	/**
+	 * Focus input when session status changes to idle or completed
+	 */
+	$effect(() => {
+		const status = getSessionStatus();
+		if ((status === 'idle' || status === 'completed') && inputField && !getIsExecuting()) {
+			tick().then(() => {
+				inputField?.focus();
+			});
+		}
+	});
+
+	/**
+	 * Focus input when a new session is created/loaded
+	 */
+	$effect(() => {
+		const session = getCurrentSession();
+		if (session && inputField && !getIsExecuting()) {
+			tick().then(() => {
+				inputField?.focus();
+			});
+		}
+	});
+
+	/**
+	 * Auto-resize textarea based on content
+	 */
+	function handleInput(): void {
+		if (inputField) {
+			inputField.style.height = 'auto';
+			inputField.style.height = `${Math.min(inputField.scrollHeight, 120)}px`;
+		}
+	}
+</script>
+
+<div class="chat-panel">
+	<!-- Messages Container -->
+	<div class="chat-panel__messages" bind:this={messagesContainer}>
+		{#if showWelcome}
+			<!-- Welcome State (no session) -->
+			<div class="chat-panel__welcome">
+				<div class="chat-panel__welcome-icon">
+					<svg
+						width="48"
+						height="48"
+						viewBox="0 0 48 48"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M8 16L24 8L40 16V32L24 40L8 32V16Z"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M8 16L24 24L40 16"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linejoin="round"
+						/>
+						<path d="M24 24V40" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+						<path d="M16 12L32 20" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+						<path d="M16 36L32 28" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+					</svg>
+				</div>
+				{#if noInputsAvailable}
+					<h2 class="chat-panel__welcome-title">View only</h2>
+					<p class="chat-panel__welcome-text">
+						This playground is in view-only mode. No inputs are available.
+					</p>
+				{:else if showChatInput}
+					<h2 class="chat-panel__welcome-title">New session</h2>
+					<p class="chat-panel__welcome-text">Test your flow with a prompt</p>
+				{:else}
+					<h2 class="chat-panel__welcome-title">Ready to run</h2>
+					<p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
+				{/if}
+			</div>
+		{:else if showEmptyChat}
+			<!-- Empty Chat State (session exists but no messages) -->
+			<div class="chat-panel__welcome">
+				<div class="chat-panel__welcome-icon">
+					<svg
+						width="48"
+						height="48"
+						viewBox="0 0 48 48"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M8 16L24 8L40 16V32L24 40L8 32V16Z"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M8 16L24 24L40 16"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linejoin="round"
+						/>
+						<path d="M24 24V40" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+						<path d="M16 12L32 20" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+						<path d="M16 36L32 28" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
+					</svg>
+				</div>
+				{#if noInputsAvailable}
+					<h2 class="chat-panel__welcome-title">View only</h2>
+					<p class="chat-panel__welcome-text">
+						This playground is in view-only mode. No inputs are available.
+					</p>
+				{:else if showChatInput}
+					<h2 class="chat-panel__welcome-title">New session</h2>
+					<p class="chat-panel__welcome-text">Test your flow with a prompt</p>
+				{:else}
+					<h2 class="chat-panel__welcome-title">Ready to run</h2>
+					<p class="chat-panel__welcome-text">Click Run to execute your workflow</p>
+				{/if}
+			</div>
+		{:else}
+			<!-- Messages -->
+			{#each displayMessages as message, index (message.id)}
+				{#if isInterruptMessage(message)}
+					<!-- Render interrupt inline -->
+					{@const interrupt = getInterruptForMessage(message)}
+					{#if interrupt}
+						<InterruptBubble
+							{interrupt}
+							showTimestamp={showTimestamps}
+							onResolved={onInterruptResolved}
+						/>
+					{/if}
+				{:else}
+					<MessageBubble
+						{message}
+						showTimestamp={showTimestamps}
+						isLast={index === displayMessages.length - 1}
+						{enableMarkdown}
+						{compactSystemMessages}
+					/>
+				{/if}
+			{/each}
+
+			{#if getIsExecuting()}
+				<div class="chat-panel__typing">
+					<div class="chat-panel__typing-indicator">
+						<span></span>
+						<span></span>
+						<span></span>
+					</div>
+					<span class="chat-panel__typing-text">Processing...</span>
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- Input Area -->
+	<div class="chat-panel__input-area">
+		{#if noInputsAvailable}
+			<!-- No inputs available - show informational message -->
+			<div class="chat-panel__no-inputs">
+				<Icon icon="mdi:information-outline" />
+				<span>View-only mode. Workflow execution is controlled externally.</span>
+			</div>
+		{:else}
+			<div
+				class="chat-panel__input-container"
+				class:chat-panel__input-container--run-only={!showChatInput}
+			>
+				{#if showChatInput}
+					<div class="chat-panel__input-wrapper">
+						<textarea
+							bind:this={inputField}
+							bind:value={inputValue}
+							class="chat-panel__input"
+							{placeholder}
+							rows="1"
+							disabled={getIsExecuting()}
+							onkeydown={handleKeydown}
+							oninput={handleInput}
+						></textarea>
+					</div>
+				{/if}
+
+				{#if getSessionStatus() === 'running' || getIsExecuting()}
+					<button
+						type="button"
+						class="chat-panel__stop-btn"
+						onclick={handleStop}
+						title="Stop execution"
+					>
+						<Icon icon="mdi:stop" />
+						Stop
+					</button>
+				{:else if showChatInput}
+					<button
+						type="button"
+						class="chat-panel__send-btn"
+						onclick={handleSend}
+						disabled={!inputValue.trim()}
+						title="Send message"
+					>
+						Send
+					</button>
+				{:else if showRunButton}
+					<button
+						type="button"
+						class="chat-panel__run-btn"
+						onclick={handleRun}
+						disabled={!runEnabled}
+						title={runEnabled ? 'Run workflow' : 'Waiting for workflow to be ready...'}
+					>
+						<Icon icon="mdi:play" />
+						Run
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.chat-panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0; /* Critical: allows flexbox to shrink properly */
+		background-color: var(--fd-background);
+	}
+
+	/* Messages Container - Scrollable area that takes remaining space */
+	.chat-panel__messages {
+		flex: 1;
+		min-height: 0; /* Critical: allows overflow to work in flex container */
+		overflow-y: auto;
+		padding: var(--fd-space-3xl);
+		scroll-behavior: smooth;
+	}
+
+	/* Welcome State */
+	.chat-panel__welcome {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		text-align: center;
+		padding: var(--fd-space-4xl);
+	}
+
+	.chat-panel__welcome-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 80px;
+		height: 80px;
+		margin-bottom: var(--fd-space-3xl);
+		color: var(--fd-foreground);
+	}
+
+	.chat-panel__welcome-icon svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.chat-panel__welcome-title {
+		font-size: var(--fd-text-2xl);
+		font-weight: 600;
+		color: var(--fd-foreground);
+		margin: 0 0 var(--fd-space-xs) 0;
+	}
+
+	.chat-panel__welcome-text {
+		font-size: var(--fd-text-base);
+		color: var(--fd-muted-foreground);
+		margin: 0;
+	}
+
+	/* Typing Indicator */
+	.chat-panel__typing {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		margin-top: var(--fd-space-xs);
+		background-color: var(--fd-muted);
+		border-radius: var(--fd-radius-2xl);
+		width: fit-content;
+	}
+
+	.chat-panel__typing-indicator {
+		display: flex;
+		gap: var(--fd-space-3xs);
+	}
+
+	.chat-panel__typing-indicator span {
+		width: var(--fd-space-2xs);
+		height: var(--fd-space-2xs);
+		background-color: var(--fd-muted-foreground);
+		border-radius: var(--fd-radius-full);
+		animation: bounce 1.4s ease-in-out infinite;
+	}
+
+	.chat-panel__typing-indicator span:nth-child(1) {
+		animation-delay: 0s;
+	}
+
+	.chat-panel__typing-indicator span:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+
+	.chat-panel__typing-indicator span:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+
+	@keyframes bounce {
+		0%,
+		60%,
+		100% {
+			transform: translateY(0);
+		}
+		30% {
+			transform: translateY(-0.25rem);
+		}
+	}
+
+	.chat-panel__typing-text {
+		font-size: var(--fd-text-sm);
+		color: var(--fd-muted-foreground);
+	}
+
+	/* Input Area - Always stays at bottom, never shrinks */
+	.chat-panel__input-area {
+		flex-shrink: 0;
+		padding: var(--fd-space-xl) var(--fd-space-3xl) var(--fd-space-3xl);
+		background-color: var(--fd-background);
+		border-top: 1px solid var(--fd-border-muted);
+	}
+
+	.chat-panel__input-container {
+		display: flex;
+		align-items: flex-end;
+		gap: var(--fd-space-md);
+		max-width: 800px;
+		margin: 0 auto;
+	}
+
+	.chat-panel__input-wrapper {
+		flex: 1;
+		display: flex;
+		align-items: flex-end;
+		background-color: var(--fd-background);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-xl);
+		padding: var(--fd-space-sm) var(--fd-space-md);
+		transition:
+			border-color var(--fd-transition-fast),
+			box-shadow var(--fd-transition-fast);
+	}
+
+	.chat-panel__input-wrapper:focus-within {
+		border-color: var(--fd-primary);
+		box-shadow: 0 0 0 3px var(--fd-primary-muted);
+	}
+
+	.chat-panel__input {
+		flex: 1;
+		border: none;
+		outline: none;
+		resize: none;
+		font-family: inherit;
+		font-size: var(--fd-text-base);
+		line-height: var(--fd-leading-normal);
+		max-height: 120px;
+		background: transparent;
+		color: var(--fd-foreground);
+	}
+
+	.chat-panel__input::placeholder {
+		color: var(--fd-muted-foreground);
+	}
+
+	.chat-panel__input:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.chat-panel__send-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--fd-space-sm) var(--fd-space-2xl);
+		border: none;
+		border-radius: var(--fd-radius-lg);
+		background-color: var(--fd-foreground);
+		color: var(--fd-background);
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+		flex-shrink: 0;
+	}
+
+	.chat-panel__send-btn:hover:not(:disabled) {
+		opacity: 0.85;
+	}
+
+	.chat-panel__send-btn:disabled {
+		background-color: var(--fd-border);
+		color: var(--fd-muted-foreground);
+		cursor: not-allowed;
+	}
+
+	.chat-panel__stop-btn {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-3xs);
+		padding: var(--fd-space-sm) var(--fd-space-xl);
+		border: none;
+		border-radius: var(--fd-radius-lg);
+		background-color: var(--fd-error);
+		color: var(--fd-error-foreground);
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color var(--fd-transition-fast);
+		flex-shrink: 0;
+	}
+
+	.chat-panel__stop-btn:hover {
+		background-color: var(--fd-error-hover);
+	}
+
+	/* Run button (when chat input is hidden) */
+	.chat-panel__run-btn {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-3xs);
+		padding: var(--fd-space-sm) var(--fd-space-2xl);
+		border: none;
+		border-radius: var(--fd-radius-lg);
+		background-color: var(--fd-success);
+		color: var(--fd-success-foreground);
+		font-size: var(--fd-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+		flex-shrink: 0;
+	}
+
+	.chat-panel__run-btn:hover:not(:disabled) {
+		background-color: var(--fd-success-hover);
+	}
+
+	.chat-panel__run-btn:disabled {
+		background-color: var(--fd-border);
+		color: var(--fd-muted-foreground);
+		cursor: not-allowed;
+	}
+
+	/* Container modifier for run-only mode (no text input) */
+	.chat-panel__input-container--run-only {
+		justify-content: flex-end;
+	}
+
+	/* No inputs available message (view-only mode) */
+	.chat-panel__no-inputs {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		background-color: var(--fd-muted);
+		border-radius: var(--fd-radius-lg);
+		color: var(--fd-muted-foreground);
+		font-size: var(--fd-text-sm);
+		max-width: 800px;
+		margin: 0 auto;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.chat-panel__messages {
+			padding: var(--fd-space-xl);
+		}
+
+		.chat-panel__input-area {
+			padding: var(--fd-space-md) var(--fd-space-xl) var(--fd-space-xl);
+		}
+
+		.chat-panel__input-container {
+			gap: var(--fd-space-xs);
+		}
+
+		.chat-panel__send-btn,
+		.chat-panel__stop-btn,
+		.chat-panel__run-btn {
+			padding: var(--fd-space-xs) var(--fd-space-xl);
+		}
+	}
+</style>