-
File Preview
+
{!selectedFile && (
diff --git a/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx b/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx
index 6202509..ce1eb5b 100644
--- a/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx
+++ b/src/components/Dashboard/DashboardChat/DashboardChatAreaInput.tsx
@@ -1,187 +1,243 @@
-import React, { useState, useEffect } from 'react';
-import { useWorkflowOperations } from '../../../hooks/useWorkflows';
+import React, { useState, useEffect, useRef } from 'react';
import { Prompt } from '../../../hooks/usePrompts';
import FileAttachmentPopup from './FileAttachmentPopup';
+import { WorkflowManagerState, WorkflowManagerActions } from './useWorkflowManager';
+import { useLanguage } from '../../../contexts/LanguageContext';
+
+import styles from './DashboardChatAreaStyles/DashboardChatAreaInput.module.css';
+import sharedStyles from './DashboardChatAreaStyles/DashboardChat.module.css';
interface InputAreaProps {
- selectedPrompt?: Prompt | null;
- onPromptUsed?: () => void;
- onWorkflowIdChange?: (workflowId: string | null) => void;
- onAttachedFilesChange?: (files: AttachedFile[]) => void;
- attachedFiles?: AttachedFile[];
+ selectedPrompt?: Prompt | null;
+ onPromptUsed?: () => void;
+ workflowState: WorkflowManagerState;
+ workflowActions: WorkflowManagerActions;
+ onAttachedFilesChange?: (files: AttachedFile[]) => void;
+ attachedFiles?: AttachedFile[];
}
interface AttachedFile {
- id: number;
- name: string;
- size: number;
- type: string;
- fileData?: File;
- objectUrl?: string;
+ id: number;
+ name: string;
+ size: number;
+ type: string;
+ fileData?: File;
+ objectUrl?: string;
}
const InputArea: React.FC = ({
- selectedPrompt,
- onPromptUsed,
- onWorkflowIdChange,
- onAttachedFilesChange,
- attachedFiles: externalAttachedFiles = []
+ selectedPrompt,
+ onPromptUsed,
+ workflowState,
+ workflowActions,
+ onAttachedFilesChange,
+ attachedFiles: externalAttachedFiles = []
}) => {
- const [inputValue, setInputValue] = useState('');
- const [showFilePopup, setShowFilePopup] = useState(false);
+ const { t } = useLanguage();
+ const [inputValue, setInputValue] = useState('');
+ const [showFilePopup, setShowFilePopup] = useState(false);
+ const [isSending, setIsSending] = useState(false);
+ const [sendError, setSendError] = useState(null);
+ const [isFocused, setIsFocused] = useState(false);
+ const textareaRef = useRef(null);
- // Always use external attached files from parent component
- const currentAttachedFiles = externalAttachedFiles;
- const { startWorkflow, startingWorkflow, startError } = useWorkflowOperations();
+ // Always use external attached files from parent component
+ const currentAttachedFiles = externalAttachedFiles;
- // Auto-fill input when prompt is selected
- useEffect(() => {
- if (selectedPrompt) {
- setInputValue(selectedPrompt.content);
- }
- }, [selectedPrompt]);
+ // Auto-resize textarea function
+ const adjustTextareaHeight = () => {
+ const textarea = textareaRef.current;
+ if (!textarea) return;
- const handleSend = async () => {
- if (!inputValue.trim() || startingWorkflow) return;
+ // Reset height to auto to get the actual scroll height
+ textarea.style.height = 'auto';
+
+ // Calculate the height based on content
+ const scrollHeight = textarea.scrollHeight;
+ const lineHeight = 1.5 * 14; // 1.5em * 14px font size
+ const padding = 32; // 16px top + 16px bottom padding
+ const minHeight = lineHeight * 4 + padding; // 4 rows
+ const maxHeight = lineHeight * 8 + padding; // 8 rows
+
+ // Set height within constraints
+ const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+ textarea.style.height = `${newHeight}px`;
+ };
- try {
- const result = await startWorkflow({
- prompt: inputValue,
- listFileId: currentAttachedFiles.map(f => f.id)
- });
+ // Auto-fill input when prompt is selected
+ useEffect(() => {
+ if (selectedPrompt) {
+ setInputValue(selectedPrompt.content);
+ }
+ }, [selectedPrompt]);
- if (result.success) {
- setInputValue('');
- if (onAttachedFilesChange) {
- onAttachedFilesChange([]);
- }
- if (onPromptUsed) onPromptUsed();
- if (onWorkflowIdChange && result.data?.id) {
- onWorkflowIdChange(result.data.id);
- }
- }
- } catch (error) {
- console.error('Failed to start workflow:', error);
- }
- };
+ // Adjust height when input value changes
+ useEffect(() => {
+ adjustTextareaHeight();
+ }, [inputValue]);
- const handleKeyPress = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter' && !e.shiftKey) {
- e.preventDefault();
- handleSend();
- }
- };
+ // Initial resize on mount
+ useEffect(() => {
+ adjustTextareaHeight();
+ }, []);
- const handleFilesAttached = (files: AttachedFile[]) => {
- setShowFilePopup(false);
+ const handleSend = async () => {
+ if (!inputValue.trim() || isSending) return;
+
+ setIsSending(true);
+ setSendError(null);
+
+ try {
+ const fileIds = currentAttachedFiles.map(f => f.id);
+ let success = false;
+
+ if (workflowState.currentWorkflowId) {
+ // Continue existing workflow
+ console.log(`➡️ Continuing workflow ${workflowState.currentWorkflowId}`);
+ success = await workflowActions.continueWorkflow(inputValue, fileIds);
+ } else {
+ // Start new workflow
+ console.log('🚀 Starting new workflow');
+ const newWorkflowId = await workflowActions.startNewWorkflow(inputValue, fileIds);
+ success = !!newWorkflowId;
+ }
+
+ if (success) {
+ setInputValue('');
if (onAttachedFilesChange) {
- onAttachedFilesChange(files);
+ onAttachedFilesChange([]);
}
- };
+ if (onPromptUsed) onPromptUsed();
+ } else {
+ setSendError('Failed to send message. Please try again.');
+ }
+ } catch (error: any) {
+ console.error('Failed to send message:', error);
+ setSendError(error.message || 'Failed to send message. Please try again.');
+ } finally {
+ setIsSending(false);
+ }
+ };
- const formatFileSize = (bytes: number): string => {
- if (bytes < 1024) return bytes + ' B';
- if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
- return Math.round(bytes / (1024 * 1024)) + ' MB';
- };
+ const handleKeyPress = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ };
- return (
-
-
Input
-
- {startError && (
-
- Error: {startError}
-
- )}
+ const handleFilesAttached = (files: AttachedFile[]) => {
+ setShowFilePopup(false);
+ if (onAttachedFilesChange) {
+ onAttachedFilesChange(files);
+ }
+ };
- {/* Show attached files count */}
- {currentAttachedFiles.length > 0 && (
-
- 📎 {currentAttachedFiles.length} file{currentAttachedFiles.length !== 1 ? 's' : ''} attached
-
- )}
-
-