@d34dman/flowdrop 0.0.30 → 0.0.32

package/dist/components/playground/ChatPanel.svelte

@@ -0,0 +1,523 @@
+<!--
+  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 type { PlaygroundMessage } from '../../types/playground.js';
+	import {
+		messages,
+		chatMessages,
+		isExecuting,
+		sessionStatus,
+		currentSession
+	} from '../../stores/playgroundStore.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;
+	}
+
+	let {
+		showTimestamps = true,
+		autoScroll = true,
+		placeholder = 'Type your message...',
+		onSendMessage,
+		onStopExecution,
+		showLogsInline = false
+	}: Props = $props();
+
+	/** 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 ? $messages : $chatMessages);
+
+	/**
+	 * Check if we should show the welcome state
+	 */
+	const showWelcome = $derived(!$currentSession && displayMessages.length === 0);
+
+	/**
+	 * Check if we should show the empty chat state (session exists but no messages)
+	 */
+	const showEmptyChat = $derived($currentSession && displayMessages.length === 0);
+
+	/**
+	 * Handle sending a message
+	 */
+	function handleSend(): void {
+		const trimmedValue = inputValue.trim();
+		if (!trimmedValue || $isExecuting) {
+			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?.();
+	}
+
+	/**
+	 * Auto-scroll to bottom when messages change
+	 */
+	$effect(() => {
+		if (autoScroll && messagesContainer && displayMessages.length > 0) {
+			tick().then(() => {
+				if (messagesContainer) {
+					messagesContainer.scrollTop = messagesContainer.scrollHeight;
+				}
+			});
+		}
+	});
+
+	/**
+	 * 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>
+				<h2 class="chat-panel__welcome-title">New chat</h2>
+				<p class="chat-panel__welcome-text">Test your flow with a chat prompt</p>
+			</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>
+				<h2 class="chat-panel__welcome-title">New chat</h2>
+				<p class="chat-panel__welcome-text">Test your flow with a chat prompt</p>
+			</div>
+		{:else}
+			<!-- Messages -->
+			{#each displayMessages as message, index (message.id)}
+				<MessageBubble
+					{message}
+					showTimestamp={showTimestamps}
+					isLast={index === displayMessages.length - 1}
+				/>
+			{/each}
+
+			{#if $isExecuting}
+				<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">
+		<div class="chat-panel__input-container">
+			<div class="chat-panel__input-wrapper">
+				<textarea
+					bind:this={inputField}
+					bind:value={inputValue}
+					class="chat-panel__input"
+					{placeholder}
+					rows="1"
+					disabled={$isExecuting}
+					onkeydown={handleKeydown}
+					oninput={handleInput}
+				></textarea>
+
+				<!-- Attachment button placeholder -->
+				<button type="button" class="chat-panel__attachment-btn" title="Attach file" disabled>
+					<Icon icon="mdi:image-outline" />
+				</button>
+			</div>
+
+			{#if $sessionStatus === 'running' || $isExecuting}
+				<button
+					type="button"
+					class="chat-panel__stop-btn"
+					onclick={handleStop}
+					title="Stop execution"
+				>
+					<Icon icon="mdi:stop" />
+					Stop
+				</button>
+			{:else}
+				<button
+					type="button"
+					class="chat-panel__send-btn"
+					onclick={handleSend}
+					disabled={!inputValue.trim()}
+					title="Send message"
+				>
+					Send
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.chat-panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background-color: #ffffff;
+	}
+
+	/* Messages Container */
+	.chat-panel__messages {
+		flex: 1;
+		overflow-y: auto;
+		padding: 1.5rem;
+		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: 2rem;
+	}
+
+	.chat-panel__welcome-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 80px;
+		height: 80px;
+		margin-bottom: 1.5rem;
+		color: #1f2937;
+	}
+
+	.chat-panel__welcome-icon svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.chat-panel__welcome-title {
+		font-size: 1.5rem;
+		font-weight: 600;
+		color: #1f2937;
+		margin: 0 0 0.5rem 0;
+	}
+
+	.chat-panel__welcome-text {
+		font-size: 1rem;
+		color: #6b7280;
+		margin: 0;
+	}
+
+	/* Typing Indicator */
+	.chat-panel__typing {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		margin-top: 0.5rem;
+		background-color: #f3f4f6;
+		border-radius: 1rem;
+		width: fit-content;
+	}
+
+	.chat-panel__typing-indicator {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.chat-panel__typing-indicator span {
+		width: 0.375rem;
+		height: 0.375rem;
+		background-color: #9ca3af;
+		border-radius: 50%;
+		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: 0.8125rem;
+		color: #6b7280;
+	}
+
+	/* Input Area */
+	.chat-panel__input-area {
+		padding: 1rem 1.5rem 1.5rem;
+		background-color: #ffffff;
+	}
+
+	.chat-panel__input-container {
+		display: flex;
+		align-items: flex-end;
+		gap: 0.75rem;
+		max-width: 800px;
+		margin: 0 auto;
+	}
+
+	.chat-panel__input-wrapper {
+		flex: 1;
+		display: flex;
+		align-items: flex-end;
+		background-color: #ffffff;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.75rem;
+		padding: 0.625rem 0.75rem;
+		transition:
+			border-color 0.15s ease,
+			box-shadow 0.15s ease;
+	}
+
+	.chat-panel__input-wrapper:focus-within {
+		border-color: #6366f1;
+		box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+	}
+
+	.chat-panel__input {
+		flex: 1;
+		border: none;
+		outline: none;
+		resize: none;
+		font-family: inherit;
+		font-size: 0.9375rem;
+		line-height: 1.5;
+		max-height: 120px;
+		background: transparent;
+		color: #1f2937;
+	}
+
+	.chat-panel__input::placeholder {
+		color: #9ca3af;
+	}
+
+	.chat-panel__input:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.chat-panel__attachment-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: #9ca3af;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.chat-panel__attachment-btn:hover:not(:disabled) {
+		color: #6b7280;
+		background-color: #f3f4f6;
+	}
+
+	.chat-panel__attachment-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.chat-panel__send-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.625rem 1.25rem;
+		border: none;
+		border-radius: 0.5rem;
+		background-color: #1f2937;
+		color: #ffffff;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.chat-panel__send-btn:hover:not(:disabled) {
+		background-color: #374151;
+	}
+
+	.chat-panel__send-btn:disabled {
+		background-color: #e5e7eb;
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	.chat-panel__stop-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.625rem 1rem;
+		border: none;
+		border-radius: 0.5rem;
+		background-color: #ef4444;
+		color: #ffffff;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.chat-panel__stop-btn:hover {
+		background-color: #dc2626;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.chat-panel__messages {
+			padding: 1rem;
+		}
+
+		.chat-panel__input-area {
+			padding: 0.75rem 1rem 1rem;
+		}
+
+		.chat-panel__input-container {
+			gap: 0.5rem;
+		}
+
+		.chat-panel__send-btn,
+		.chat-panel__stop-btn {
+			padding: 0.5rem 1rem;
+		}
+	}
+</style>

package/dist/components/playground/ChatPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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;
+}
+declare const ChatPanel: import("svelte").Component<Props, {}, "">;
+type ChatPanel = ReturnType<typeof ChatPanel>;
+export default ChatPanel;