{ 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 {
            // Convert conversation history to Gradio ChatInterface format
            const gradioHistory = currentConversation.slice(0, -1).map(msg => [
                msg.role === 'user' ? msg.content : '',
                msg.role === 'assistant' ? msg.content : ''
            ]).filter(pair => pair[0] || pair[1]);
            
            // Call Gradio ChatInterface API
            const response = await fetch(`${process.env.NEXT_PUBLIC_HF_API_URL}/call/predict`, {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    data: [query, gradioHistory]
                }),
            });

if (!response.ok) {
                const errorText = await response.text().catch(() => 'Network error occurred');
                throw new Error(`API Error: ${response.status} - ${errorText}`);
            }

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