app.py

import gradio as gr
import requests
import json
import os
from datetime import datetime

# API configuration from environment variables
API_ENDPOINT = os.getenv("API_ENDPOINT", "none")
API_TOKEN = os.getenv("API_TOKEN")

def get_ai_response(message, history):
    messages = [{"role": "user", "content": "You are a helpful assistant"}]  
    for user_msg, ai_msg in history:
        messages.append({"role": "user", "content": user_msg})
        messages.append({"role": "assistant", "content": ai_msg})
    messages.append({"role": "user", "content": message})

    payload = {
        "model": "RekaAI/reka-flash-3",
        "messages": messages,
        "stream": False,
        "max_tokens": 1024,
        "temperature": 0.7
    }

    headers = {
        "Authorization": f"Bearer {API_TOKEN}",
        "Content-Type": "application/json"
    }

    try:
        response = requests.post(API_ENDPOINT, headers=headers, json=payload)
        response.raise_for_status()
        return response.json()["choices"][0]["message"]["content"]
    except Exception as e:
        return f"Error: {str(e)}"

def chat_interface(message, history, stored_history):
    if history is None:
        history = []
    
    ai_response = get_ai_response(message, history)
    history.append((message, ai_response))
    
    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    if stored_history is None:
        stored_history = []
    stored_history.insert(0, {  # Insert at beginning for reverse chronological order
        "timestamp": timestamp,
        "user": message,
        "ai": ai_response
    })
    
    return history, stored_history

# Modern black and white CSS
custom_css = """
body {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
}
#chatbot {
    height: 60vh;
    background-color: #2d2d2d;
    border: 1px solid #404040;
    border-radius: 8px;
}
#sidebar {
    background-color: #242424;
    padding: 10px;
    border-right: 1px solid #404040;
    height: 80vh;
    overflow-y: auto;
}
#history_list {
    list-style: none;
    padding: 0;
}
.history-item {
    background-color: #333333;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.history-item:hover {
    background-color: #404040;
}
input, button {
    background-color: #333333;
    color: #ffffff;
    border: 1px solid #404040;
    border-radius: 5px;
}
button:hover {
    background-color: #404040;
}
"""

with gr.Blocks(css=custom_css, title="Modern AI Chatbot") as demo:
    with gr.Row():
        # Sidebar for history
        with gr.Column(scale=1, min_width=300, elem_id="sidebar"):
            gr.Markdown("## Chat History")
            history_display = gr.HTML(label="Previous Conversations")
            clear_history_btn = gr.Button("Clear History")
        
        # Main chat area
        with gr.Column(scale=3):
            chatbot = gr.Chatbot(elem_id="chatbot")
            with gr.Row():
                message = gr.Textbox(
                    placeholder="Type your message...",
                    show_label=False,
                    container=False,
                    elem_classes="input-box"
                )
                submit_btn = gr.Button("Send", size="sm")
            clear_chat_btn = gr.Button("Clear Chat")
    
    # States
    chat_state = gr.State([])
    history_state = gr.State([])

    def update_history_display(stored_history):
        if not stored_history:
            return "<p>No history yet</p>"
        html = "<ul id='history_list'>"
        for item in stored_history[:10]:  # Limit to last 10 conversations
            html += f"""
                <li class='history-item'>
                    <small>{item['timestamp']}</small><br>
                    <strong>You:</strong> {item['user'][:50]}...<br>
                    <strong>AI:</strong> {item['ai'][:50]}...
                </li>
            """
        html += "</ul>"
        return html

    # Event handlers
    submit_btn.click(
        chat_interface,
        [message, chat_state, history_state],
        [chatbot, history_state]
    ).then(
        update_history_display,
        history_state,
        history_display
    ).then(
        lambda: "",
        None,
        message
    )

    clear_chat_btn.click(
        lambda: ([], None),
        None,
        [chatbot, chat_state]
    )

    clear_history_btn.click(
        lambda: ([], None),
        None,
        [history_state, history_display]
    )

    # Initial load
    demo.load(
        lambda: ([], []),
        None,
        [chat_state, history_state]
    ).then(
        update_history_display,
        history_state,
        history_display
    )

    # Update local storage
    demo.change(
        None,
        history_state,
        None,
        _js="""(stored_history) => {
            localStorage.setItem('chat_history', JSON.stringify(stored_history));
        }"""
    ).then(
        update_history_display,
        history_state,
        history_display
    )

    # Load from local storage
    demo.load(
        lambda: json.loads(localStorage.getItem('chat_history') or '[]'),
        None,
        history_state,
        _js="""() => {
            return localStorage.getItem('chat_history') || '[]';
        }"""
    ).then(
        update_history_display,
        history_state,
        history_display
    )

demo.launch()