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: FormEvent | 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 {
            const history = currentConversation.slice(0, -1).map(({ role, content }) => ({ role, content }));
               
          let backendUrl = "http://localhost:8000/query"; // default for local dev
            if (typeof window !== "undefined" && window.location.hostname.endsWith(".hf.space")) {
           backendUrl = "https://healthifylk-vedamd--8000.hf.space/query"; // production
          }

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