Update app.py

app.py

@@ -57,14 +57,15 @@ PROMPTS = {
     )
 }
 
-def respond(message, history, character):
+def stream_response(message, history, character):
+    """
+    Calls the API and yields partial responses for streaming.
+    """
     system_message = PROMPTS.get(character, "")
+    # Build messages using a list of dictionaries.
     messages = [{"role": "system", "content": system_message}]
-    for user_msg, bot_msg in history:
-        if user_msg:
-            messages.append({"role": "user", "content": user_msg})
-        if bot_msg:
-            messages.append({"role": "assistant", "content": bot_msg})
+    for msg in history:
+        messages.append(msg)
     messages.append({"role": "user", "content": message})
     
     payload = {
@@ -81,22 +82,55 @@ def respond(message, history, character):
         content = response.json()["choices"][0]["message"]["content"]
         
         stream_response = ""
+        # Simulate streaming by yielding token-by-token.
         for token in content.split():
             stream_response += token + " "
             time.sleep(0.02)
-            # Yield each update as a message dictionary.
-            yield {"role": "assistant", "content": stream_response.strip()}
+            yield stream_response.strip()
     except Exception as e:
-        yield {"role": "assistant", "content": f"Error: {str(e)}"}
+        yield f"Error: {str(e)}"
+
+def chat(user_message, history, character):
+    """
+    Appends the user message to the conversation history, then streams the assistant's reply.
+    The conversation history is a list of dictionaries with keys "role" and "content".
+    """
+    # Ensure history is a list.
+    history = history or []
+    history = history.copy()
+    # Append user message.
+    history.append({"role": "user", "content": user_message})
+    
+    # Create a generator for the streaming response.
+    full_response = ""
+    for partial in stream_response(user_message, history, character):
+        full_response = partial
+        # Yield the conversation updated with the current assistant response.
+        yield history + [{"role": "assistant", "content": full_response}]
+    # Once done, append the final assistant message.
+    history.append({"role": "assistant", "content": full_response})
+    return history
+
+def clean_choice(choice):
+    """
+    Extract the key for PROMPTS from the dropdown choice.
+    """
+    if "Elon" in choice:
+        return "Elon Ma (Official)"
+    if "Cole" in choice:
+        return "Cole (Community)"
+    if "Shortreed" in choice:
+        return "Mr. Shortreed (Official)"
+    return "Elon Ma (Official)"
 
 with gr.Blocks(css=css) as demo:
     # Header with QClone Public label.
     gr.HTML("<h1>QClone <span style='background-color:#3b82f6;color:white;font-size:0.75em;padding:2px 6px;border-radius:5px;margin-left:8px;'>Public</span></h1>")
     
     with gr.Row():
-        with gr.Column():
-            # Native dropdown with emojis and descriptions.
-            character = gr.Dropdown(
+        with gr.Column(scale=1):
+            # Dropdown for model selection (smaller width).
+            model_dropdown = gr.Dropdown(
                 choices=[
                     "Elon Ma (Official) 🟡 - Broken English salesman",
                     "Cole (Community) 🔵 - Gen Z slang troll",
@@ -105,22 +139,19 @@ with gr.Blocks(css=css) as demo:
                 value="Elon Ma (Official) 🟡 - Broken English salesman",
                 label="Model"
             )
+        with gr.Column(scale=3):
+            # Chatbot component to display conversation.
+            chatbot = gr.Chatbot(label="QClone Chat")
     
-    # Helper to clean up the selected choice.
-    def clean_choice(choice):
-        if "Elon" in choice:
-            return "Elon Ma (Official)"
-        if "Cole" in choice:
-            return "Cole (Community)"
-        if "Shortreed" in choice:
-            return "Mr. Shortreed (Official)"
-        return "Elon Ma (Official)"
-    
-    # ChatInterface using OpenAI-style messages.
-    chatbot = gr.ChatInterface(
-        lambda msg, hist, char: respond(msg, hist, clean_choice(char)),
-        additional_inputs=[character],
-        type="messages"
-    )
+    # Textbox for user input.
+    msg = gr.Textbox(label="Your Message", placeholder="Type your message here...")
+    # State to hold conversation history.
+    state = gr.State([])
+
+    # When user submits text (via button or Enter), update chat.
+    msg.submit(fn=lambda user_message, history, choice: chat(user_message, history, clean_choice(choice)),
+               inputs=[msg, state, model_dropdown],
+               outputs=[chatbot, state],
+               show_progress=True)
     
     demo.launch(share=True)