Update app.py

app.py

@@ -79,13 +79,33 @@ def chat(message: str, conversation_history: ConversationHistory) -> Generator[T
   # Yield formatted history and updated conversation history
   yield conversation_history.get_formatted_history(), conversation_history
 
+# Create a custom Gradio component to display the conversation history
+class ConversationHistoryComponent(gr.Component):
+  def __init__(self, **kwargs):
+    super().__init__(**kwargs)
+    self.history = []
+
+  def build(self):
+    return gr.HTML(value="<div id='conversation-history'></div>")
+
+  def update(self, history: List[Tuple[str, str]]):
+    history_html = "<ul>"
+    for user_message, assistant_message in history:
+      history_html += f"<li><strong>User:</strong> {user_message}</li>"
+      if assistant_message is not None:
+          history_html += f"<li><strong>Assistant:</strong> {assistant_message}</li>"
+    history_html += "</ul>"
+    self.history = history
+    return gr.HTML(value=history_html)
+
 chatbot = gr.Chatbot(label="Chat")
 conversation_history = ConversationHistory()  # Initialize conversation history
 
 iface = gr.Interface(
-    fn=chat,
-    inputs=[gr.Textbox(placeholder="Hello! How are you?", label="Message")],
-    outputs=[chatbot, conversation_history],
-    allow_flagging="never",
+  fn=chat,
+  inputs=[gr.Textbox(placeholder="Hello! How are you?", label="Message")],
+  outputs=[chatbot, ConversationHistoryComponent(label="Conversation History")],
+  allow_flagging="never",
 )
+
 iface.queue().launch()