diff --git a/frontend/src/components/chat/TaskInputPanel.tsx b/frontend/src/components/chat/TaskInputPanel.tsx index 2cad26b..de0460a 100644 --- a/frontend/src/components/chat/TaskInputPanel.tsx +++ b/frontend/src/components/chat/TaskInputPanel.tsx @@ -5,7 +5,7 @@ import { useApiConfigStore } from '@/stores/apiConfigStore'; import { useChatStore } from '@/stores/chatStore'; import { AnimatePresence, motion } from 'framer-motion'; import { Paperclip, PauseCircle, Send, X, Upload } from 'lucide-react'; -import React, { useRef, useState, useCallback } from 'react'; +import React, { useRef, useState, useCallback, useEffect } from 'react'; export const TaskInputPanel: React.FC = () => { const [message, setMessage] = useState(''); @@ -14,15 +14,28 @@ export const TaskInputPanel: React.FC = () => { const [isDragging, setIsDragging] = useState(false); const fileInputRef = useRef(null); const dropZoneRef = useRef(null); + const inputRef = useRef(null); const { sendMessage, stopChat, isLoading, isStreaming } = useChat(); const { geminiApiKey, backendHasApiKey } = useApiConfigStore(); const wasStopped = useChatStore((state) => state.wasStopped); + const draftMessage = useChatStore((state) => state.draftMessage); + const setDraftMessage = useChatStore((state) => state.setDraftMessage); const isProcessing = (isStreaming || isLoading) && !wasStopped; const hasContent = message.trim() || images.length > 0; const canSend = hasContent && !isProcessing; + // Sync draft message from store to local state + useEffect(() => { + if (draftMessage) { + setMessage(draftMessage); + setDraftMessage(''); // Clear the draft in the store + // Focus the input + inputRef.current?.focus(); + } + }, [draftMessage, setDraftMessage]); + // Process files (from input or drag & drop) const processFiles = useCallback((files: FileList | File[]) => { Array.from(files).forEach(file => { @@ -251,6 +264,7 @@ export const TaskInputPanel: React.FC = () => { )} > setMessage(e.target.value)} diff --git a/frontend/src/components/conversation/ConversationPanel.tsx b/frontend/src/components/conversation/ConversationPanel.tsx index ff9492a..f95a7b6 100644 --- a/frontend/src/components/conversation/ConversationPanel.tsx +++ b/frontend/src/components/conversation/ConversationPanel.tsx @@ -57,6 +57,8 @@ export const ConversationPanel: React.FC = () => { }; const EmptyState: React.FC = () => { + const setDraftMessage = useChatStore((s) => s.setDraftMessage); + const suggestions = [ { icon: Stethoscope, text: 'Analyze medical imaging' }, { icon: FileSearch, text: 'Search clinical literature' }, @@ -64,6 +66,10 @@ const EmptyState: React.FC = () => { { icon: Globe, text: 'Find treatment guidelines' }, ]; + const handleSuggestionClick = (text: string) => { + setDraftMessage(text); + }; + return (
{/* Logo */} @@ -92,12 +98,13 @@ const EmptyState: React.FC = () => { {suggestions.map((suggestion) => (