Update app.py

app.py

@@ -9,46 +9,44 @@ os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "./firm-catalyst-437006-s4-407500
 # Replace 'your-model-name' with the actual model you intend to use
 llm = ChatGoogleGenerativeAI(model='gemini-1.5-pro')  
 
-# Chat function
-def chat_with_gemini(user_input, chat_history):
-    try:
-        # Append the user input to the chat history
-        chat_history.append(("User", user_input))
-        
-        # Get response from the model
-        response = llm.predict(user_input)
-        
-        # Append the bot's response to the chat history
-        chat_history.append(("Bot", response))
-
-        # Return the updated chat history
-        return chat_history
-    except Exception as e:
-        # In case of an error, return the error message in the chat
-        chat_history.append(("Bot", f"Error: {str(e)}"))
-        return chat_history
+def chat_with_gemini(message, chat_history):
+    # Placeholder function to simulate bot response
+    bot_response = "You said: " + message
+    chat_history.append((message, bot_response))
+    return chat_history, chat_history
 
 # Create a Gradio interface
 with gr.Blocks() as iface:
     gr.Markdown("# Ken Chatbot")
     gr.Markdown("Ask me anything!")
 
-    chatbot = gr.Chatbot()  # Initialize the chatbot
+    chatbot = gr.Chatbot(elem_id="chatbot")  # Initialize the chatbot with an element ID for styling
+    msg = gr.Textbox(label="Type your message here...", placeholder="Enter your message and press enter to send your message...")
     state = gr.State([])  # Store chat history
 
-    # Set up the layout with user input on the right
-    with gr.Row():
-        with gr.Column(scale=3):
-            gr.Markdown("### Bot")
-            bot_display = gr.Chatbot()  # Bot's chat on the left side
-
-        with gr.Column(scale=1):
-            gr.Markdown("### User")
-            msg = gr.Textbox(label="Type your message here...", placeholder="Enter your message and press enter to send your message...")  # User input on the right
-
     # Set up the interaction for when the user submits a message
-    msg.submit(chat_with_gemini, [msg, state], [chatbot])  # Update chatbot with new messages
+    msg.submit(chat_with_gemini, [msg, state], [chatbot, state])  # Update chatbot and state with new messages
     msg.submit(lambda: "", None, msg)  # Clear the input box after submission
 
+    # CSS for styling the chatbot messages
+    iface.css("""
+    #chatbot .message.user {
+        background-color: #DCF8C6;
+        border-radius: 15px;
+        padding: 8px 12px;
+        margin: 5px 50px 5px auto;
+        max-width: 70%;
+        text-align: right;
+    }
+    #chatbot .message.bot {
+        background-color: #E1E1E1;
+        border-radius: 15px;
+        padding: 8px 12px;
+        margin: 5px auto 5px 50px;
+        max-width: 70%;
+        text-align: left;
+    }
+    """)
+
 # Launch the interface with debugging enabled
 iface.launch(debug=True)