import streamlit as st
import anthropic
import os
from streamlit.components.v1 import html

# Set up the Anthropic client
client = anthropic.Anthropic(api_key=os.environ.get("ANTHROPIC_API_KEY"))

# Streamlit app
def main():
    st.title("Claude 3.5 Sonnet API Demo")

    # User input
    user_input = st.text_area("Enter your message:", height=100)

    if st.button("Send"):
        if user_input:
            # Call Claude API
            response = client.messages.create(
                model="claude-3-sonnet-20240229",
                max_tokens=1000,
                messages=[
                    {"role": "user", "content": user_input}
                ]
            )
            
            # Display Claude's response
            st.write("Claude's response:")
            st.write(response.content[0].text)

            # Example of using a custom HTML/JS component
            custom_html = """
            <div id="custom-component">
                <h3>Custom Component</h3>
                <p>This is a custom HTML component.</p>
                <button onclick="alert('Button clicked!')">Click me</button>
            </div>
            <script>
                // You can add custom JavaScript here
                console.log("Custom component loaded");
            </script>
            """
            html(custom_html, height=200)

if __name__ == "__main__":
    main()