app.py

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

# Debugging Headers and Cookies
st.write("Headers:", st.context.headers)
st.write("Cookies:", st.context.cookies)

# Define JavaScript code
javascript_code = """
<script>
    // Function to return a string
    function myJavaScriptFunction() {
        return "Hello from JavaScript!";
    }

    // Function to call and send data back to Python
    function callAndCapture() {
        const result = myJavaScriptFunction();
        // Send the result back to Streamlit
        window.parent.postMessage({ isStreamlitMessage: true, type: 'streamlit:js_return', data: result }, '*');
    }

    // Add an event listener to listen for messages from Streamlit
    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'streamlit:buttonClick') {
            callAndCapture();
        }
    });
</script>
<button onclick="callAndCapture()">Run JavaScript Function</button>
"""

# Embed JavaScript into Streamlit app
html(javascript_code, height=300)

# Placeholder to display results
result_placeholder = st.empty()

# Add Streamlit button to trigger JavaScript function
if st.button("Call JavaScript Function"):
    st.write("Waiting for JavaScript response...")
    trigger_js = """
    <script>
    // Trigger the JavaScript function via a postMessage event
    window.parent.postMessage({ type: 'streamlit:buttonClick' }, '*');
    </script>
    """
    html(trigger_js, height=0)

# Add a listener for JavaScript responses
st.markdown(
    """
    <script>
    // Listen for messages from JavaScript
    window.addEventListener('message', (event) => {
        if (event.data && event.data.type === 'streamlit:js_return') {
            // Pass the data back to Streamlit as a new message
            const result = event.data.data;
            document.dispatchEvent(new CustomEvent('StreamlitResult', { detail: result }));
        }
    });

    // Dispatch data from CustomEvent to Streamlit
    document.addEventListener('StreamlitResult', (e) => {
        const data = e.detail;
        window.parent.postMessage({ type: 'streamlit:result', data: data }, '*');
    });
    </script>
    """,
    unsafe_allow_html=True,
)

# Use an iframe for communication
if "js_result" not in st.session_state:
    st.session_state["js_result"] = ""

try:
    # Listen for result data from JavaScript
    received_result = html(
        """
        <script>
        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'streamlit:result') {
                const data = event.data.data;
                // Send the result back to Streamlit
                document.dispatchEvent(new CustomEvent('PythonReceivedResult', { detail: data }));
            }
        });

        document.addEventListener('PythonReceivedResult', (e) => {
            const received = e.detail;
            document.getElementById('result-placeholder').innerText = received;
        });
        </script>
        <div id="result-placeholder"></div>
        """,
        height=0,
    )

    # If there's a new result, update it in session state
    if received_result and received_result != st.session_state["js_result"]:
        st.session_state["js_result"] = received_result
        result_placeholder.write(f"Result from JavaScript: {received_result}")

except Exception as e:
    st.error(f"An error occurred: {e}")