app.py

import streamlit as st
import requests

# Set up Streamlit page configuration
st.set_page_config(page_title="DeepSeek Chatbot", page_icon="🤖", layout="wide")

# API setup
API_KEY = st.secrets["API_KEY"]
url = "https://api.hyperbolic.xyz/v1/chat/completions"
headers = {
    "Content-Type": "application/json",
    "Authorization": f"Bearer {API_KEY}"
}

# Chat history container
if 'messages' not in st.session_state:
    st.session_state.messages = []

# Function to send message and get response
def get_response(user_input):
    data = {
        "messages": [{"role": "user", "content": user_input}],
        "model": "deepseek-ai/DeepSeek-V3",
        "max_tokens": 512,
        "temperature": 0.1,
        "top_p": 0.9
    }

    try:
        response = requests.post(url, headers=headers, json=data)
        # Check if the response status code is OK
        if response.status_code == 200:
            return response.json()  # Only parse JSON if status is OK
        else:
            # Log the error if the status code is not 200
            st.error(f"Error: {response.status_code} - {response.text}")
            return {}
    except requests.exceptions.RequestException as e:
        st.error(f"Request failed: {e}")
        return {}

# Streamlit chat UI
st.title("Contoh ChatBot Kursus AI : silahkan ketik pertanyaan, harap bersabar jika jawaban agak lambat sebab hanya pakai CPU. WA Hertog 085601906959")

# Display the chat history
for message in st.session_state.messages:
    if message["role"] == "user":
        st.chat_message("user").markdown(message["content"])
    else:
        st.chat_message("assistant").markdown(message["content"])

# Sticky input box at the bottom with Send button
st.markdown("""
    <style>
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 80vh;
        justify-content: flex-end;
    }
    .input-container {
        display: flex;
        justify-content: space-between;
        position: sticky;
        bottom: 0;
        background-color: white;
        padding: 10px;
        border-top: 1px solid #ccc;
        box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1);
    }
    .send-button {
        margin-left: 10px;
    }
    </style>
""", unsafe_allow_html=True)

# Input container with a text area and button
with st.container():
    input_container = st.empty()
    user_input = input_container.text_area("You:", "", height=68, key="input_text")  # Updated height to 68
    send_button = st.button("Send", key="send_button", help="Click to send the message")

# Handle user input and update the chat
if send_button and user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})
    response = get_response(user_input)
    
    if response:
        # Assuming the response is in the 'choices' field of the API response
        bot_response = response.get('choices', [{}])[0].get('message', {}).get('content', 'Sorry, I did not understand that.')
        st.session_state.messages.append({"role": "assistant", "content": bot_response})

    st.rerun()  # Rerun the app to update the chat history