src/streamlit_app.py

import streamlit as st
from huggingface_hub import InferenceClient
import os

# Set up the page config
st.set_page_config(
    page_title="Next.js Q/A Chatbot",
    page_icon="⚛️",
    layout="centered",
    initial_sidebar_state="expanded"
)

# Initialize the Hugging Face Inference Client
@st.cache_resource
def get_inference_client():
    # Using deepseek-ai/DeepSeek-V3 as the model
    return InferenceClient(model="deepseek-ai/DeepSeek-V3")

client = get_inference_client()

# App title and description
st.title("⚛️ Next.js Q/A Chatbot")
st.markdown(
    """
    Welcome to the **Next.js Q/A Chatbot**! Ask me anything about learning Next.js,
    from basic concepts to advanced topics. I'm powered by **Deepseek V3** to provide
    you with helpful, accurate answers about Next.js development.
    """
)

# Sidebar with information
with st.sidebar:
    st.header("About This Chatbot")
    st.info(
        """
        This chatbot specializes in answering questions about **Next.js**,
        the React framework for production applications.
        
        **Topics I can help with:**
        - Getting started with Next.js
        - Pages and routing
        - API routes
        - Static generation & server-side rendering
        - Styling and CSS
        - Deployment
        - Performance optimization
        - And much more!
        """
    )
    
    st.header("Example Questions")
    example_questions = [
        "How do I create a new Next.js project?",
        "What's the difference between SSG and SSR?",
        "How do I add CSS to my Next.js app?",
        "How do I create API routes in Next.js?",
        "How do I deploy my Next.js app?"
    ]
    
    for question in example_questions:
        if st.button(question, key=question):
            st.session_state.user_input = question

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = [
        {
            "role": "assistant",
            "content": "Hi! I'm your Next.js Q/A assistant. I'm here to help you learn Next.js! What would you like to know?"
        }
    ]

# Display chat messages
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

# Get user input
if prompt := st.chat_input("Ask me anything about Next.js..."):
    # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": prompt})
    
    # Display user message
    with st.chat_message("user"):
        st.markdown(prompt)
    
    # Generate assistant response
    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        
        # Create a context-aware prompt for Next.js questions
        system_prompt = """
You are a helpful Next.js expert assistant. You specialize in helping developers learn and use Next.js effectively.
Provide accurate, helpful, and practical answers about Next.js development.
When possible, include code examples and best practices.
Focus specifically on Next.js topics including:
- Project setup and configuration
- Pages, routing, and navigation
- API routes and server-side functionality
- Static Site Generation (SSG) and Server-Side Rendering (SSR)
- Styling (CSS Modules, Tailwind CSS, etc.)
- Performance optimization
- Deployment strategies
- Integration with other tools and libraries

Keep your answers clear, concise, and beginner-friendly while being technically accurate.
"""
        
        full_prompt = f"{system_prompt}\n\nUser question: {prompt}\n\nAssistant:"
        
        try:
            # Generate response using Hugging Face Inference API
            response = client.text_generation(
                full_prompt,
                max_new_tokens=500,
                temperature=0.7,
                do_sample=True,
                stop_sequences=["\n\nUser:", "User question:"]
            )
            
            assistant_response = response.strip()
            message_placeholder.markdown(assistant_response)
            
            # Add assistant response to chat history
            st.session_state.messages.append({"role": "assistant", "content": assistant_response})
            
        except Exception as e:
            error_message = f"Sorry, I encountered an error: {str(e)}. Please try again!"
            message_placeholder.markdown(error_message)
            st.session_state.messages.append({"role": "assistant", "content": error_message})

# Handle example questions from sidebar
if "user_input" in st.session_state:
    user_question = st.session_state.user_input
    del st.session_state.user_input
    
    # Add user message to chat history
    st.session_state.messages.append({"role": "user", "content": user_question})
    
    # Rerun to process the question
    st.rerun()

# Clear chat button
if st.button("🗑️ Clear Chat History"):
    st.session_state.messages = [
        {
            "role": "assistant",
            "content": "Hi! I'm your Next.js Q/A assistant. I'm here to help you learn Next.js! What would you like to know?"
        }
    ]
    st.rerun()

# Footer
st.markdown(
    """
    ---
    
    **Note:** This chatbot uses Deepseek V3 via Hugging Face Inference API to provide Next.js assistance.
    For the most up-to-date information, always refer to the [official Next.js documentation](https://nextjs.org/docs).
    """
)