Update app.py

app.py

@@ -1,8 +1,14 @@
-import logging
+import openai
+import streamlit as st
+import streamlit.components.v1 as components
+import smtplib
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
 import os
+
+import logging
 import requests
 from dotenv import load_dotenv
-import gradio as gr
 import openai
 from langchain_openai import ChatOpenAI
 from langchain_community.vectorstores import FAISS
@@ -18,6 +24,8 @@ from langchain_community.document_loaders import TextLoader
 from langchain_text_splitters import CharacterTextSplitter
 import serpapi
 
+
+
 # Initialize logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -43,8 +51,82 @@ except Exception as e:
     logger.error(f"Error initializing OpenAI client: {e}")
     raise e
 
+EMAIL_ADDRESS = os.getenv("EMAIL_ADDRESS")
+EMAIL_PASSWORD = os.getenv("EMAIL_PASSWORD")
+SMTP_SERVER = "mail.privateemail.com"
+SMTP_PORT = 587 
+st.markdown("""
+    <style>
+    .custom-image img {
+        width: 100px;  /* Set the width to make the image smaller */
+        height: auto;  /* Keep the aspect ratio */
+    }
+    </style>
+    """, unsafe_allow_html=True)
+def copy_to_clipboard(text):
+    """Creates a button to copy text to clipboard."""
+    escaped_text = text.replace('\n', '\\n').replace('"', '\\"')
+    copy_icon_html = f"""
+    <style>
+    .copy-container {{
+        position: relative;
+        margin-top: 10px;
+        padding-bottom: 30px; /* Space for the button */
+        font-size: 0; /* Hide extra space */
+    }}
+    .copy-button {{
+        background: none;
+        border: none;
+        color: #808080; /* Grey color */
+        cursor: pointer;
+        font-size: 18px; /* Adjust icon size */
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }}
+    .copy-button:hover {{
+        color: #606060; /* Darker grey on hover */
+    }}
+    .copy-message {{
+        font-size: 12px;
+        color: #4CAF50;
+        margin-left: 10px;
+        display: none;
+    }}
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <div class="copy-container">
+        <button class="copy-button" onclick="copyToClipboard()">
+            <i class="fas fa-copy"></i>
+        </button>
+        <span class="copy-message" id="copy_message">Copied!</span>
+    </div>
+    
+    <script>
+    function copyToClipboard() {{
+        var textArea = document.createElement("textarea");
+        textArea.value = "{escaped_text}";
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+        
+        var copyMessage = document.getElementById("copy_message");
+        copyMessage.style.display = "inline";
+        setTimeout(function() {{
+            copyMessage.style.display = "none";
+        }}, 2000);
+    }}
+    </script>
+    """
+    components.html(copy_icon_html, height=60)
+
+
+
+
+
+
 
-# Load knowledge base
 def load_knowledge_base():
     try:
         loader = TextLoader("./data_source/time_to_rethink_trust_book.md")
@@ -59,6 +141,8 @@ def load_knowledge_base():
 
 knowledge_base = load_knowledge_base()
 
+
+
 # Initialize embeddings and FAISS index
 try:
     embeddings = OpenAIEmbeddings()
@@ -67,8 +151,7 @@ except Exception as e:
     logger.error(f"Error initializing FAISS index: {e}")
     raise e
 
-
-# Define search function for knowledge base
+#Define search function for knowledge base
 def search_knowledge_base(query):
     try:
         output = db.similarity_search(query)
@@ -79,6 +162,8 @@ def search_knowledge_base(query):
 
 
 # SERPER API Google Search function
+
+
 def google_search(query):
     try:
         search_client = serpapi.Client(api_key=serper_api_key)
@@ -99,6 +184,8 @@ def google_search(query):
 
 
 # RAG response function
+
+
 def rag_response(query):
     try:
         retrieved_docs = search_knowledge_base(query)
@@ -124,7 +211,6 @@ def knowledge_base_tool(query: str):
     """
     return rag_response(query)
 
-
 @tool
 def google_search_tool(query: str):
     """
@@ -149,6 +235,7 @@ Engage in a friendly and informative conversation based on the knowledge base.
 Only proceed to create sales materials when the user explicitly requests it.
 Work together with the user to update the outcome of the sales material.
 """
+
 prompt_template = ChatPromptTemplate.from_messages(
     [
         ("system", prompt_message),
@@ -165,7 +252,9 @@ try:
 except Exception as e:
     logger.error(f"Error creating Langchain Agent: {e}")
 
+
 # Define the agent pipeline to handle the conversation flow
+
 try:
     agent = (
         {
@@ -187,12 +276,13 @@ except Exception as e:
 
 # Initialize chat history
 chat_history = []
-
+if "messages" not in st.session_state:
+    st.session_state.messages = []
 
 def chatbot_response(message, history):
     try:
         # Generate response using the agent executor
-        output = agent_executor.invoke({"input": message, "chat_history": chat_history})
+        output = agent_executor.invoke({"input": message, "chat_history": st.session_state.messages})
 
         # Save the interaction context
         chat_history.extend(
@@ -202,44 +292,270 @@ def chatbot_response(message, history):
             ]
         )
 
-        return output["output"]
+        # Generate follow-up suggestions
+        suggestions = get_suggestions(output["output"])
+
+        return {
+            "response": output["output"],
+            "suggestions": suggestions
+        }
     except Exception as e:
         logger.error(f"Error generating chatbot response: {e}")
-        return "Error occurred during response generation"
+        return {
+            "response": "Error occurred during response generation",
+            "suggestions": "Error occurred while generating suggestions"
+        }
 
 
-# # Define CSS for Gradio interface
-# CSS = """
-# .contain { display: flex; flex-direction: column; height: 100vh; }
-# #component-0 { height: 90%; }
-# """
 
-# # Gradio interface
-# with gr.Blocks(css=CSS) as demo:
 
-submit_button = gr.Button("Submit")
+def get_suggestions(response_text):
+    """Generates follow-up questions or suggestions based on the response text."""
+    prompt = f"{response_text}\n\nWhat follow-up questions  would you give related to this topic?"
+    llm = ChatOpenAI(model="gpt-4o", temperature=0.5, api_key=openai_api_key)
+    response = llm.invoke(prompt)
+    return response.content
 
-bot = gr.Chatbot()
 
-with gr.Blocks() as demo:
-    gr.Markdown(
-        "<span style='font-size:20px; font-weight:bold;'>Instant Insight-2-Action</span>",
-        visible=True,
-    )
+def start_chat():
+    st.session_state.chat_started = True
 
-    chatbot = gr.ChatInterface(
-        fn=chatbot_response,
-        stop_btn=None,
-        retry_btn=None,
-        undo_btn=None,
-        clear_btn=None,
-        submit_btn=submit_button,
-        chatbot=bot,
-    )
 
-# Launch the Gradio app
-try:
-    demo.launch(server_name="0.0.0.0")
-except Exception as e:
-    logger.error(f"Error launching Gradio app: {e}")
-    raise e
+
+
+def feedback_email(name, email, feedback):
+    """Sends feedback via email."""
+    recipient_email = "wajahat698@gmail.com"
+    msg = MIMEMultipart()
+    msg['From'] = EMAIL_ADDRESS
+    msg['To'] = recipient_email
+    msg['Subject'] = "Feedback"
+    msg.attach(MIMEText(feedback, 'plain'))
+    
+    try:
+        with smtplib.SMTP(SMTP_SERVER, SMTP_PORT) as server:
+            server.starttls()
+            server.login(EMAIL_ADDRESS, EMAIL_PASSWORD)
+            server.sendmail(EMAIL_ADDRESS, recipient_email, msg.as_string())
+    except Exception as e:
+        st.error(f"Error sending email: {e}")
+
+
+def create_section(title, content, example=None, dark_mode=False):
+    text_color = "#afafaf" if dark_mode else "#333333"
+    border_color = "#afafaf" if dark_mode else "#afafaf"
+   
+    example_html = f"""<p style="color: {text_color}; font-size: 12px; margin: 5px 0;">{example}</p>""" if example else ''
+    
+    section_html = f"""
+    <div style="
+        flex: 1; 
+        min-width: 180px; 
+        max-width: 220px; 
+        min-height: 150px; 
+        border: 1px solid {border_color}; 
+        border-radius: 10px; 
+        padding: 10px; 
+        background-color: transparent; 
+        margin: 5px; 
+        text-align: center; 
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+        box-sizing: border-box;
+        font-size: 12px;
+    ">
+        <h2 style="
+            color: {text_color}; 
+            font-size: 14px; 
+            margin-bottom: 8px; 
+            border-bottom: 1px solid {border_color}; 
+            padding-bottom: 4px;
+        ">{title}</h2>
+        <p style="
+            color: {text_color}; 
+            font-size: 11px; 
+            margin: 5px 0; 
+            line-height: 1.4;
+        ">{content}</p>
+        {example_html}
+    </div>
+    """
+
+    return section_html
+
+
+# Sidebar for feedback form
+with st.sidebar.form(key='feedback_form'):
+
+    st.image( "Trust Logic_Wheel_RGB_Standard.png")
+    st.header("Let's create something great.")
+    st.markdown("Our minds assess trust through Six Buckets of Trust® and determine their importance and order in a given situation. We then evaluate why we can or can’t trust someone in these Buckets. TrustAI®, trained on 20 years of TrustLogic® application, helps you identify reasons why your audience can trust you in each Bucket and create trust-optimised solutions. It’s copy AI with substance.")
+    st.markdown("""
+                <style>
+                    .stability { color: rgb(7, 55, 99); font-size: 24px; font-weight: bold; }
+                    .development { color: rgb(241, 194, 50); font-size: 24px; font-weight: bold; }
+                    .relationship { color: rgb(204, 0, 0); font-size: 24px; font-weight: bold; }
+                    .benefit { color: rgb(56, 118, 29); font-size: 24px; font-weight: bold; }
+                    .vision { color: rgb(255, 153, 0); font-size: 24px; font-weight: bold; }
+                    .competence { color: rgb(111, 168, 220); font-size: 24px; font-weight: bold; }
+                </style>
+
+                <h3 class="stability">Stability Trust:</h3>
+                <p>Why can I trust you to have built a strong and stable foundation?</p>
+
+                <h3 class="development">Development Trust:</h3>
+                <p>Why can I trust you to develop well in the future?</p>
+
+                <h3 class="relationship">Relationship Trust:</h3>
+                <p>What appealing relationship qualities can I trust you for?</p>
+
+                <h3 class="benefit">Benefit Trust:</h3>
+                <p>What benefits can I trust you for?</p>
+
+                <h3 class="vision">Vision Trust:</h3>
+                <p>What Vision and Values can I trust you for?</p>
+
+                <h3 class="competence">Competence Trust:</h3>
+                <p>What competencies can I trust you for?</p>
+                """, unsafe_allow_html=True)
+    st.markdown("For detailed descriptions, visit [Academy](https://www.trustlogic.info/academy)")
+
+    
+
+
+
+    feedback_name = st.text_input("Name")
+    feedback_email_input = st.text_input("Email")
+    feedback_text = st.text_area("Feedback")
+
+    # Submit button within the form
+    submit_button = st.form_submit_button("Submit Feedback")
+    if submit_button:
+        if feedback_name and feedback_email_input and feedback_text:
+            feedback_email(feedback_name, feedback_email_input, feedback_text)
+            st.success("Thank you for your feedback!")
+        else:
+            st.error("Please fill in all fields.")
+
+
+
+if "chat_started" not in st.session_state:
+        st.session_state.chat_started = False
+
+
+
+
+
+# Show the  message and carousel only if the chat hasn't started
+if not st.session_state.chat_started:
+    st.markdown("""
+    <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+        const svgs = document.querySelectorAll('svg');
+        svgs.forEach(svg => {
+            if (svg.getAttribute('xmlns') === 'http://www.w3.org/2000/svg' && svg.getAttribute('width') === '18' && svg.getAttribute('height') === '18') {
+                svg.style.display = 'none';
+            }
+        });
+    });
+    </script>
+
+    <style>
+    /* Hide all <a> elements inside elements with block-container and st-emotion-cache-1eo1tir ea3mdgi5 classes */
+    .block-container.st-emotion-cache-1eo1tir.ea3mdgi5 a {
+        display: none !important;
+    }
+
+    /* Ensure links in the sidebar are visible and underlined */
+    .stSidebar a {
+        display: inline !important;
+        text-decoration: underline !important;
+        color: inherit !important;
+    }
+
+    /* Additional styles */
+    .section-container {
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+    
+    .section {
+        flex: 1;
+        min-width: 150px;
+        max-width: 90px;
+        min-height: 150px;
+        border: 1px solid #afafaf;
+        border-radius: 10px;
+        padding: 5px;
+        background-color: transparent;
+        margin: 3px;
+        text-align: center;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+        font-size: 12px;
+        transition: background-color 0.3s ease;
+    }
+
+    .section h2 {
+        color: #afafaf;
+        font-size: 14px;
+        margin-bottom: 8px;
+        border-bottom: 1px solid #afafaf;
+        padding-bottom: 4px;
+    }
+
+    .section p {
+        color: #afafaf;
+        font-size: 11px;
+        margin: 5px 0;
+        line-height: 1.4;
+    }
+
+    @media (max-width: 100px) {
+        .section {
+            min-width: 90%;
+            max-width: 90%;
+        }
+    }
+    </style>
+    
+    <h1 style='text-align: center; color: #b4b4b4;'>How can I help you today?</h1>
+
+    <div class="section-container">
+        <div class="section">
+            <h2>Find</h2>
+            <p>Discover all your great TrustBuilders®. <br> Example: Find Development Trust Builders® for World Vision 
+        </div>
+        <div class="section">
+            <h2>Create</h2>
+            <p>Generate trust-optimised solutions: <br>Example: Find World Vision development TrustBuilders®. Then use them to write a 200-word annual report article. Enthusiastic tone.</p>
+        </div>
+        <div class="section">
+            <h2>Trust-optimise</h2>
+            <p>Paste your LinkedIn profile, EDM or blog and ask TrustAI® to improve it using specific Trust Buckets® and add your specific TrustBuilders® as examples.</p>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+# Input field for user messages
+if prompt := st.chat_input("Type your prompt here"):
+        start_chat()
+
+        if prompt := st.chat_input("Type your prompt here"):
+            st.session_state.chat_started = True  # Mark that chat has started
+            st.session_state.messages.append({"role": "user", "content": prompt})
+            
+            # Generate response and suggestions using GPT
+            response = chatbot_response(prompt, st.session_state.messages)
+            
+            st.session_state.messages.append({"role": "assistant", "content": response["response"]})
+            st.session_state.messages.append({"role": "assistant", "content": f"**Suggestions:**\n{response['suggestions']}"})
+            
+if st.session_state.chat_started:
+    for msg in st.session_state.messages:
+        st.chat_message(msg["role"]).write(msg["content"])
+        if msg["role"] == "assistant":
+            copy_to_clipboard(msg["content"])
+