{ e.preventDefault(); handleSubmit(e); }} className="max-w-3xl mx-auto p-4 flex gap-4">

setInput(e.target.value)}
                className="input-primary"
                onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        handleSubmit(e);
                    }
                }}
                disabled={isLoading}
                rows={1}
            />
            <button
                type="submit"
                disabled={isLoading || !input.trim()}
                className="button-primary whitespace-nowrap"
            >
                {isLoading ? (
                    <div className="size-6 border-4 border-t-transparent border-white rounded-full animate-spin" />
                ) : (
                    <ArrowRightIcon />
                )}
            </button>
        </form>
    </div>
);

const Footer: FC = () => (
    <footer className="py-6 px-4 text-center text-text-secondary text-sm">
        © 2024 VedaMD. All rights reserved.
    </footer>
);

// --- MAIN PAGE COMPONENT ---
export default function Home() {
    const [conversation, setConversation] = useState<Message[]>([]);
    const [input, setInput] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const messagesEndRef = useRef<HTMLDivElement>(null);

const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };

useEffect(() => {
        const timeoutId = setTimeout(scrollToBottom, 100);
        return () => clearTimeout(timeoutId);
    }, [conversation]);

const handleSubmit = async (e: React.SyntheticEvent | string) => {
        const query = (typeof e === 'string' ? e : input).trim();
        if (typeof e !== 'string') e.preventDefault();
        
        if (!query || isLoading) return;

setIsLoading(true);
        setError(null);
        if (typeof e !== 'string') setInput('');
        
        const userMessage: Message = { role: 'user', content: query };
        const currentConversation = [...conversation, userMessage];
        setConversation(currentConversation);

try {
            // Use the queryAPI function from lib/api.ts
            const apiResponse = await queryAPI(query, currentConversation.slice(0, -1));
            
            if (apiResponse.error) {
                throw new Error(apiResponse.error);
            }

const botMessage: Message = {
                role: 'assistant',
                content: apiResponse.answer
            };
            setConversation([...currentConversation, botMessage]);
        } catch (err: any) {
            const errorMessageText = err.message || "An unexpected error occurred.";
            setError(errorMessageText);
            const errorMessage: Message = { role: 'assistant', content: errorMessageText };
            setConversation([...currentConversation, errorMessage]);
        } finally {
            setIsLoading(false);
        }
    };

return (
        <div className="min-h-screen flex flex-col bg-slate-50">
            <Header />
            <main className="flex-1 flex flex-col">
                <div className="flex-1 overflow-y-auto">
                    {conversation.length === 0 ? (
                        <WelcomeScreen onTemplateClick={handleSubmit} />
                    ) : (
                        <div className="pb-20">
                            {conversation.map((message, index) => (
                                <ChatMessage key={index} message={message} />
                            ))}
                            <div ref={messagesEndRef} />
                        </div>
                    )}
                </div>
                <ChatForm
                    input={input}
                    setInput={setInput}
                    handleSubmit={handleSubmit}
                    isLoading={isLoading}
                />
            </main>
            <Footer />
        </div>
    );
}

VedaMD

Welcome to VedaMD