Update app.py

app.py

@@ -229,11 +229,93 @@ def respond(message, history):
 # Create the Gradio interface
 demo = gr.ChatInterface(
     fn=respond,
-    chatbot=gr.Chatbot(show_copy_button=True, likeable=True, layout="panel"),
+    chatbot=gr.Chatbot(
+        show_copy_button=True,
+        likeable=True,
+        layout="custom",
+        chatbot_class="custom-chatbot",
+    ),
     description="# OpenGPT 4o \n ### chat, generate images, perform web searches, and Q&A with images.",
     textbox=gr.MultimodalTextbox(),
     multimodal=True,
     concurrency_limit=200,
     cache_examples=False,
 )
-demo.launch()
+
+canvas = gr.HTML(
+    """
+    <style>
+       .custom-chatbot {
+            width: 100%;
+            height: 80vh;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            padding: 20px;
+            background-color: #f7f7f7;
+        }
+       .chatbot-header {
+            font-size: 20px;
+            font-weight: bold;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            border-bottom: 1px solid #ccc;
+        }
+       .chatbot-header.title {
+            font-size: 18px;
+        }
+       .chatbot-header.logout {
+            font-size: 14px;
+            cursor: pointer;
+            margin-left: 10px;
+        }
+       .chatbot-header.logout:hover {
+            text-decoration: underline;
+        }
+       .chat-message {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 10px;
+        }
+       .chat-message.text {
+            background-color: #fff;
+            padding: 10px;
+            border-radius: 10px;
+        }
+       .chat-message.text.self {
+            background-color: #dafff7;
+        }
+       .chat-message.text.date {
+            font-size: 12px;
+            color: #666;
+            margin-top: 5px;
+        }
+       .chat-message.input {
+            flex-grow: 1;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            font-size: 16px;
+        }
+    </style>
+    <div class="custom-chatbot">
+        <header class="chatbot-header">
+            <div class="title">OpenGPT Chatbot</div>
+            <div class="logout" onclick="logout()">Logout</div>
+        </header>
+        <div class="chat-messages">
+            <div class="chat-message" id="messages-container">
+                <!-- messages will be rendered here -->
+            </div>
+            <div class="chat-input">
+                <input type="text" id="chat-input" />
+                <button id="send-btn">Send</button>
+            </div>
+        </div>
+    </div>
+"""
+)
+
+demo.launch(canvas=canvas)