app.py

import gradio as gr
import os

def greet(name):
    return "Hello " + name + "!! How can Honest Heating and Cooling help you today?"

# Get Tawk.to credentials from environment variables
tawk_property_id = os.getenv('TAWK_PROPERTY_ID', 'default_property_id')
tawk_widget_id = os.getenv('TAWK_WIDGET_ID', 'default_widget_id')

# Custom HTML with Tawk.to widget integration
custom_html = f"""
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/68c6e868a30a7b1922d4a883/1j54fnlsv';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

#<script type="text/javascript">
#var Tawk_API=Tawk_API||{{}}, Tawk_LoadStart=new Date();
#(function(){{
#var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
#s1.async=true;
#s1.src='https://embed.tawk.to/{tawk_property_id}/{tawk_widget_id}';
#s1.charset='UTF-8';
#s1.setAttribute('crossorigin','*');
#s0.parentNode.insertBefore(s1,s0);
#}})();
#</script>

<style>
    .gradio-container {{
        max-width: 1200px !important;
        margin: auto;
    }}

    .main-header {{
        text-align: center;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        margin-bottom: 20px;
        border-radius: 10px;
    }}

    .company-info {{
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin: 10px 0;
        border-left: 4px solid #667eea;
    }}
</style>

<div class="main-header">
    <h1>🦀 Honest Heating & Cooling</h1>
    <p>Your trusted HVAC service provider</p>
</div>

<div class="company-info">
    <h3>How can we help you?</h3>
    <p>Ask about our heating and cooling services, or use the chat widget in the bottom right corner for immediate assistance!</p>
</div>
"""

# Create Gradio interface with custom HTML
with gr.Blocks(css=".gradio-container {max-width: 1200px !important}", title="Honest Heating & Cooling") as demo:
    gr.HTML(custom_html)

    with gr.Row():
        with gr.Column():
            name_input = gr.Textbox(
                label="Ask us anything about heating and cooling",
                placeholder="Type your question here...",
                lines=2
            )
            submit_btn = gr.Button("Submit", variant="primary")

        with gr.Column():
            output = gr.Textbox(
                label="Our Response",
                lines=3,
                interactive=False
            )

    submit_btn.click(fn=greet, inputs=name_input, outputs=output)
    name_input.submit(fn=greet, inputs=name_input, outputs=output)

if __name__ == "__main__":
    demo.launch(share=False)