@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/components/nodes/ToolNode.stories.svelte

@@ -0,0 +1,71 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+	import { createSampleNodeData } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Nodes/ToolNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={createSampleNodeData({
+		label: "AI Content Analyzer",
+		metadata: {
+			id: "ai_content_analyzer",
+			name: "AI Content Analyzer",
+			description: "AI-powered content analysis for smart text processing and context understanding",
+			category: "ai",
+			version: "1.0.0",
+			type: "tool",
+			supportedTypes: ["tool", "default"],
+			icon: "mdi:brain",
+			color: "#9C27B0",
+			inputs: [
+				{ id: "content", name: "Content to Analyze", type: "input", dataType: "mixed", required: false, description: "Text content or array of content items for AI analysis" },
+				{ id: "tool", name: "Tool", type: "input", dataType: "tool", required: false, description: "Available Tools" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "" },
+			],
+			outputs: [
+				{ id: "tool", name: "Tool", type: "output", dataType: "tool", required: false, description: "Available tools" },
+				{ id: "analyzed_content", name: "analyzed_content", type: "output", dataType: "array", required: false, description: "Content items with AI analysis results" },
+				{ id: "total_analyzed", name: "total_analyzed", type: "output", dataType: "number", required: false, description: "Total number of items analyzed" },
+				{ id: "analysis_mode", name: "analysis_mode", type: "output", dataType: "string", required: false, description: "The analysis mode used" },
+			],
+		},
+	})} />
+</Story>
+
+<Story name="Multiple Parameters">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Content Classifier",
+		metadata: {
+			id: "content_classifier",
+			name: "Content Classifier",
+			description: "Classify content into categories (support, features, sales) for proper triage",
+			category: "ai",
+			version: "1.0.0",
+			type: "tool",
+			supportedTypes: ["tool", "default"],
+			icon: "mdi:tag-multiple",
+			color: "#9C27B0",
+			inputs: [
+				{ id: "tool", name: "Tool", type: "input", dataType: "tool", required: false, description: "Available Tools" },
+				{ id: "structured_data", name: "Structured Data", type: "input", dataType: "json", required: false, description: "Processed form data for classification" },
+				{ id: "raw_data", name: "Raw Data", type: "input", dataType: "json", required: false, description: "Original form data" },
+				{ id: "submission_id", name: "Submission ID", type: "input", dataType: "string", required: false, description: "Unique submission identifier" },
+				{ id: "trigger", name: "Trigger", type: "input", dataType: "trigger", required: false, description: "" },
+			],
+			outputs: [
+				{ id: "tool", name: "Tool", type: "output", dataType: "tool", required: false, description: "Available tools" },
+				{ id: "primary_category", name: "primary_category", type: "output", dataType: "string", required: false, description: "Primary classification category" },
+				{ id: "confidence", name: "confidence", type: "output", dataType: "number", required: false, description: "Classification confidence score (0-1)" },
+				{ id: "priority_level", name: "priority_level", type: "output", dataType: "string", required: false, description: "Priority level (normal, medium, high)" },
+			],
+		},
+	})} />
+</Story>

package/dist/components/nodes/ToolNode.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ToolNode;
+type ToolNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ToolNode: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/nodes/ToolNode.svelte

@@ -8,7 +8,7 @@
 	import { Position, Handle } from '@xyflow/svelte';
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor } from '../../utils/colors';
-	import type { NodeMetadata } from '../../types/index.js';
+	import type { NodeMetadata, NodePort } from '../../types/index.js';
 
 	interface ToolNodeParameter {
 		name: string;
@@ -104,18 +104,18 @@
 
 	// Check for matching interface ports in metadata
 	let hasToolInputPort = $derived(
-		props.data.metadata?.inputs?.some((port) => port.dataType === portDataType) || false
+		props.data.metadata?.inputs?.some((port: NodePort) => port.dataType === portDataType) || false
 	);
 	let hasToolOutputPort = $derived(
-		props.data.metadata?.outputs?.some((port) => port.dataType === portDataType) || false
+		props.data.metadata?.outputs?.some((port: NodePort) => port.dataType === portDataType) || false
 	);
 
 	// Get the actual matching ports for proper handle generation
 	let toolInputPort = $derived(
-		props.data.metadata?.inputs?.find((port) => port.dataType === portDataType)
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType === portDataType)
 	);
 	let toolOutputPort = $derived(
-		props.data.metadata?.outputs?.find((port) => port.dataType === portDataType)
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType === portDataType)
 	);
 
 	/**
@@ -164,7 +164,7 @@
 		type="target"
 		position={Position.Left}
 		id={`${props.data.nodeId}-input-${toolInputPort.id}`}
-		style="top: 40px; transform: translateY(-50%); margin-left: -10px; --fd-handle-fill: {getDataTypeColor(
+		style="top: 40px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: {getDataTypeColor(
 			portDataType
 		)}; --fd-handle-border-color: var(--fd-handle-border);"
 	/>
@@ -237,7 +237,7 @@
 		type="source"
 		position={Position.Right}
 		id={`${props.data.nodeId}-output-${toolOutputPort.id}`}
-		style="top: 40px; transform: translateY(-50%); margin-right: -10px; --fd-handle-fill: {getDataTypeColor(
+		style="top: 40px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: {getDataTypeColor(
 			portDataType
 		)}; --fd-handle-border-color: var(--fd-handle-border);"
 	/>
@@ -456,14 +456,6 @@
 		pointer-events: auto !important;
 	}
 
-	:global(.svelte-flow__node-tool .svelte-flow__handle-left) {
-		left: -10px !important;
-	}
-
-	:global(.svelte-flow__node-tool .svelte-flow__handle-right) {
-		right: -10px !important;
-	}
-
 	:global(.svelte-flow__node-tool .svelte-flow__handle:hover) {
 		transform: translateY(-50%) scale(1.2) !important;
 	}

package/dist/components/nodes/WorkflowNode.stories.svelte

@@ -0,0 +1,50 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NodeDecorator from "../../stories/NodeDecorator.svelte";
+	import { createSampleNodeData } from "../../stories/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Nodes/WorkflowNode",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Sub Workflow",
+		metadata: {
+			id: "sub-workflow",
+			name: "Sub Workflow",
+			description: "Execute a nested workflow",
+			category: "bundles",
+			version: "1.0.0",
+			type: "workflow",
+			icon: "mdi:sitemap",
+			inputs: [{ id: "input", name: "Input", type: "input", dataType: "any", required: false }],
+			outputs: [{ id: "output", name: "Output", type: "output", dataType: "any" }],
+		},
+	})} />
+</Story>
+
+<Story name="Selected">
+	<NodeDecorator data={createSampleNodeData({
+		label: "Data Pipeline",
+		metadata: {
+			id: "data-pipeline",
+			name: "Data Pipeline",
+			description: "Process data through a pipeline workflow",
+			category: "bundles",
+			version: "1.0.0",
+			type: "workflow",
+			icon: "mdi:pipe",
+			inputs: [
+				{ id: "data", name: "Data", type: "input", dataType: "any", required: true },
+				{ id: "config", name: "Config", type: "input", dataType: "object", required: false },
+			],
+			outputs: [{ id: "result", name: "Result", type: "output", dataType: "any" }],
+		},
+	})} selected={true} />
+</Story>

package/dist/components/nodes/WorkflowNode.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default WorkflowNode;
+type WorkflowNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const WorkflowNode: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/nodes/WorkflowNode.svelte

@@ -19,7 +19,7 @@
 		getCategoryColorToken,
 		getPortBackgroundColor
 	} from '../../utils/colors.js';
-	import { connectedHandles } from '../../stores/workflowStore.js';
+	import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
 
 	interface Props {
 		data: WorkflowNode['data'] & {
@@ -107,7 +107,7 @@
 
 		// Check if port is connected
 		const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-		return $connectedHandles.has(handleId);
+		return getConnectedHandles().has(handleId);
 	}
 
 	/**
@@ -218,7 +218,7 @@
 							position={Position.Left}
 							id={`${props.data.nodeId}-input-${port.id}`}
 							class="flowdrop-workflow-node__handle"
-							style="top: 50%; transform: translateY(-50%); left: calc(-1 * (var(--fd-handle-size) / 2)); --fd-handle-fill: {getDataTypeColorToken(
+							style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
 								port.dataType
 							)}; --fd-handle-border-color: var(--fd-handle-border);"
 							role="button"
@@ -296,7 +296,7 @@
 							position={Position.Right}
 							id={`${props.data.nodeId}-output-${port.id}`}
 							class="flowdrop-workflow-node__handle"
-							style="top: 50%; transform: translateY(-50%); right: calc(-1 * (var(--fd-handle-size) / 2)); --fd-handle-fill: {getDataTypeColorToken(
+							style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
 								port.dataType
 							)}; --fd-handle-border-color: var(--fd-handle-border);"
 							role="button"
@@ -358,7 +358,7 @@
 
 	.flowdrop-workflow-node__header {
 		box-sizing: border-box;
-		padding: var(--fd-node-header-gap) var(--fd-space-4);
+		padding: var(--fd-node-header-gap) var(--fd-space-xl);
 		border-bottom: 1px solid var(--fd-border-muted);
 		background: var(--fd-header);
 		border-top-left-radius: var(--fd-radius-xl);
@@ -375,7 +375,7 @@
 	.flowdrop-workflow-node__header-title {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 		min-height: var(--fd-node-header-title-height);
 		flex-shrink: 0;
 	}
@@ -453,16 +453,16 @@
 		align-items: center;
 		gap: 0;
 		min-height: var(--fd-node-port-row-height);
-		padding: var(--fd-space-1) 0;
+		padding: var(--fd-space-3xs) 0;
 		position: relative;
 	}
 
 	.flowdrop-workflow-node__port-content {
-		padding: 0 var(--fd-space-4);
+		padding: 0 var(--fd-space-xl);
 	}
 
 	.flowdrop-badge {
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 		border-radius: var(--fd-radius-sm);
 		font-size: 0.625rem;
 		font-weight: 500;
@@ -477,7 +477,7 @@
 
 	.flowdrop-badge--sm {
 		font-size: 0.625rem;
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 	}
 
 	/* Handle overrides: hover scale (base 20px/12px from base.css) */
@@ -495,7 +495,7 @@
 	}
 
 	.flowdrop-gap--2 {
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 	}
 
 	.flowdrop-items--center {
@@ -540,8 +540,8 @@
 
 	.flowdrop-workflow-node__config-btn {
 		position: absolute;
-		top: var(--fd-space-2);
-		right: var(--fd-space-2);
+		top: var(--fd-space-xs);
+		right: var(--fd-space-xs);
 		width: 1.5rem;
 		height: 1.5rem;
 		background-color: var(--fd-backdrop);

package/dist/components/playground/ChatPanel.svelte

@@ -19,17 +19,17 @@
 		metadataToInterrupt
 	} from '../../types/interrupt.js';
 	import {
-		messages,
-		chatMessages,
-		isExecuting,
-		sessionStatus,
-		currentSession
-	} from '../../stores/playgroundStore.js';
+		getMessages,
+		getChatMessages,
+		getIsExecuting,
+		getSessionStatus,
+		getCurrentSession
+	} from '../../stores/playgroundStore.svelte.js';
 	import {
-		interrupts,
+		getInterruptsMap,
 		interruptActions,
 		getInterruptByMessageId
-	} from '../../stores/interruptStore.js';
+	} from '../../stores/interruptStore.svelte.js';
 
 	/**
 	 * Component props
@@ -115,7 +115,7 @@
 	/**
 	 * Filter messages based on showLogsInline setting
 	 */
-	const displayMessages = $derived(showLogsInline ? $messages : $chatMessages);
+	const displayMessages = $derived(showLogsInline ? getMessages() : getChatMessages());
 
 	/**
 	 * Track previous message count for detecting new messages.
@@ -209,7 +209,7 @@
 	 */
 	const interruptsByMessageId = $derived(
 		new Map(
-			Array.from($interrupts.values())
+			Array.from(getInterruptsMap().values())
 				.filter((i) => i.messageId)
 				.map((i) => [i.messageId, i])
 		)
@@ -225,19 +225,19 @@
 	/**
 	 * Check if we should show the welcome state
 	 */
-	const showWelcome = $derived(!$currentSession && displayMessages.length === 0);
+	const showWelcome = $derived(!getCurrentSession() && displayMessages.length === 0);
 
 	/**
 	 * Check if we should show the empty chat state (session exists but no messages)
 	 */
-	const showEmptyChat = $derived($currentSession && displayMessages.length === 0);
+	const showEmptyChat = $derived(getCurrentSession() && displayMessages.length === 0);
 
 	/**
 	 * Handle sending a message
 	 */
 	function handleSend(): void {
 		const trimmedValue = inputValue.trim();
-		if (!trimmedValue || $isExecuting) {
+		if (!trimmedValue || getIsExecuting()) {
 			return;
 		}
 
@@ -278,7 +278,7 @@
 	 * Disables the Run button after clicking until backend re-enables it.
 	 */
 	function handleRun(): void {
-		if ($isExecuting || !runEnabled) {
+		if (getIsExecuting() || !runEnabled) {
 			return;
 		}
 		// Disable the Run button after clicking
@@ -318,7 +318,7 @@
 	 * This ensures a fresh state for each session.
 	 */
 	$effect(() => {
-		const session = $currentSession;
+		const session = getCurrentSession();
 		if (session) {
 			// Reset to enabled state for new/changed sessions
 			runEnabled = true;
@@ -388,7 +388,7 @@
 	 * Auto-focus input when execution completes or session becomes ready
 	 */
 	$effect(() => {
-		const currentlyExecuting = $isExecuting;
+		const currentlyExecuting = getIsExecuting();
 
 		// Focus input when execution completes (was executing, now not)
 		if (wasExecuting && !currentlyExecuting && inputField) {
@@ -405,8 +405,8 @@
 	 * Focus input when session status changes to idle or completed
 	 */
 	$effect(() => {
-		const status = $sessionStatus;
-		if ((status === 'idle' || status === 'completed') && inputField && !$isExecuting) {
+		const status = getSessionStatus();
+		if ((status === 'idle' || status === 'completed') && inputField && !getIsExecuting()) {
 			tick().then(() => {
 				inputField?.focus();
 			});
@@ -417,8 +417,8 @@
 	 * Focus input when a new session is created/loaded
 	 */
 	$effect(() => {
-		const session = $currentSession;
-		if (session && inputField && !$isExecuting) {
+		const session = getCurrentSession();
+		if (session && inputField && !getIsExecuting()) {
 			tick().then(() => {
 				inputField?.focus();
 			});
@@ -545,7 +545,7 @@
 				{/if}
 			{/each}
 
-			{#if $isExecuting}
+			{#if getIsExecuting()}
 				<div class="chat-panel__typing">
 					<div class="chat-panel__typing-indicator">
 						<span></span>
@@ -579,14 +579,14 @@
 							class="chat-panel__input"
 							{placeholder}
 							rows="1"
-							disabled={$isExecuting}
+							disabled={getIsExecuting()}
 							onkeydown={handleKeydown}
 							oninput={handleInput}
 						></textarea>
 					</div>
 				{/if}
 
-				{#if $sessionStatus === 'running' || $isExecuting}
+				{#if getSessionStatus() === 'running' || getIsExecuting()}
 					<button
 						type="button"
 						class="chat-panel__stop-btn"
@@ -637,7 +637,7 @@
 		flex: 1;
 		min-height: 0; /* Critical: allows overflow to work in flex container */
 		overflow-y: auto;
-		padding: var(--fd-space-6);
+		padding: var(--fd-space-3xl);
 		scroll-behavior: smooth;
 	}
 
@@ -649,7 +649,7 @@
 		justify-content: center;
 		height: 100%;
 		text-align: center;
-		padding: var(--fd-space-8);
+		padding: var(--fd-space-4xl);
 	}
 
 	.chat-panel__welcome-icon {
@@ -658,7 +658,7 @@
 		justify-content: center;
 		width: 80px;
 		height: 80px;
-		margin-bottom: var(--fd-space-6);
+		margin-bottom: var(--fd-space-3xl);
 		color: var(--fd-foreground);
 	}
 
@@ -671,7 +671,7 @@
 		font-size: var(--fd-text-2xl);
 		font-weight: 600;
 		color: var(--fd-foreground);
-		margin: 0 0 var(--fd-space-2) 0;
+		margin: 0 0 var(--fd-space-xs) 0;
 	}
 
 	.chat-panel__welcome-text {
@@ -684,9 +684,9 @@
 	.chat-panel__typing {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3) var(--fd-space-4);
-		margin-top: var(--fd-space-2);
+		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;
@@ -694,12 +694,12 @@
 
 	.chat-panel__typing-indicator {
 		display: flex;
-		gap: var(--fd-space-1);
+		gap: var(--fd-space-3xs);
 	}
 
 	.chat-panel__typing-indicator span {
-		width: 0.375rem;
-		height: 0.375rem;
+		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;
@@ -736,7 +736,7 @@
 	/* Input Area - Always stays at bottom, never shrinks */
 	.chat-panel__input-area {
 		flex-shrink: 0;
-		padding: var(--fd-space-4) var(--fd-space-6) var(--fd-space-6);
+		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);
 	}
@@ -744,7 +744,7 @@
 	.chat-panel__input-container {
 		display: flex;
 		align-items: flex-end;
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 		max-width: 800px;
 		margin: 0 auto;
 	}
@@ -756,7 +756,7 @@
 		background-color: var(--fd-background);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-xl);
-		padding: 0.625rem var(--fd-space-3);
+		padding: var(--fd-space-sm) var(--fd-space-md);
 		transition:
 			border-color var(--fd-transition-fast),
 			box-shadow var(--fd-transition-fast);
@@ -774,7 +774,7 @@
 		resize: none;
 		font-family: inherit;
 		font-size: var(--fd-text-base);
-		line-height: 1.5;
+		line-height: var(--fd-leading-normal);
 		max-height: 120px;
 		background: transparent;
 		color: var(--fd-foreground);
@@ -793,7 +793,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0.625rem var(--fd-space-5);
+		padding: var(--fd-space-sm) var(--fd-space-2xl);
 		border: none;
 		border-radius: var(--fd-radius-lg);
 		background-color: var(--fd-foreground);
@@ -818,8 +818,8 @@
 	.chat-panel__stop-btn {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-1);
-		padding: 0.625rem var(--fd-space-4);
+		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);
@@ -839,8 +839,8 @@
 	.chat-panel__run-btn {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-1);
-		padding: 0.625rem var(--fd-space-5);
+		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);
@@ -872,8 +872,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-3) var(--fd-space-4);
+		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);
@@ -885,21 +885,21 @@
 	/* Responsive */
 	@media (max-width: 640px) {
 		.chat-panel__messages {
-			padding: var(--fd-space-4);
+			padding: var(--fd-space-xl);
 		}
 
 		.chat-panel__input-area {
-			padding: var(--fd-space-3) var(--fd-space-4) var(--fd-space-4);
+			padding: var(--fd-space-md) var(--fd-space-xl) var(--fd-space-xl);
 		}
 
 		.chat-panel__input-container {
-			gap: var(--fd-space-2);
+			gap: var(--fd-space-xs);
 		}
 
 		.chat-panel__send-btn,
 		.chat-panel__stop-btn,
 		.chat-panel__run-btn {
-			padding: var(--fd-space-2) var(--fd-space-4);
+			padding: var(--fd-space-xs) var(--fd-space-xl);
 		}
 	}
 </style>