Update app.py

app.py

@@ -134,7 +134,6 @@ def convert_history_to_cohere_format(history: List[List[str]]) -> List[dict]:
 def chat_response(
     message: str,
     history: List[List[str]],
-    chat_display: str,
     system_prompt: str,
     temperature: float = 0.3,
     max_new_tokens: int = 8192,
@@ -170,19 +169,21 @@ def chat_response(
                 buffer += event.text
                 formatted_buffer = format_text(buffer)
                 history[-1][1] = formatted_buffer
-                chat_display = format_chat_history(history)
-                yield history, chat_display
+                yield history, history[-1][1]
                 
     except Exception as e:
         error_message = f"Error: {str(e)}"
         history[-1][1] = error_message
-        chat_display = format_chat_history(history)
-        yield history, chat_display
+        yield history, history[-1][1]
 
 def process_example(example: str) -> tuple:
     """Process example query and return empty history and updated display"""
     return [], f"User: {example}\n\n"
 
+def clear_chat() -> tuple:
+    """Clear chat history and input"""
+    return [], ""
+
 def main():
     """Main function to set up and launch the Gradio interface"""
     with gr.Blocks(css=CSS, theme="soft") as demo:
@@ -192,121 +193,89 @@ def main():
             elem_classes="duplicate-button"
         )
         
+        chatbot = gr.Chatbot(
+            height=750,
+            show_label=False,
+            bubble_full_width=False,
+            elem_classes=["chat-area"],
+        )
+        
         with gr.Row():
-            with gr.Column():
-                chat_history = gr.State([])
-                chat_display = gr.TextArea(
-                    value="",
-                    label="Chat History",
-                    interactive=False,
-                    elem_classes=["chat-area"],
-                )
-                
-                message = gr.TextArea(
+            with gr.Column(scale=20):
+                message = gr.Textbox(
                     placeholder=PLACEHOLDER,
                     label="Your message",
-                    lines=3
+                    lines=3,
+                    show_label=False
                 )
-                
+            with gr.Column(scale=4):
                 with gr.Row():
-                    submit = gr.Button("Send")
-                    clear = gr.Button("Clear")
-                
-                with gr.Accordion("⚙️ Advanced Settings", open=False):
-                    system_prompt = gr.TextArea(
-                        value=DEFAULT_SYSTEM_PROMPT,
-                        label="System Prompt",
-                        lines=5,
-                    )
-                    temperature = gr.Slider(
-                        minimum=0,
-                        maximum=1,
-                        step=0.1,
-                        value=0.3,
-                        label="Temperature",
-                    )
-                    max_tokens = gr.Slider(
-                        minimum=128,
-                        maximum=32000,
-                        step=128,
-                        value=8192,
-                        label="Max Tokens",
-                    )
-                    top_p = gr.Slider(
-                        minimum=0.1,
-                        maximum=1.0,
-                        step=0.1,
-                        value=0.8,
-                        label="Top-p",
-                    )
-                    top_k = gr.Slider(
-                        minimum=1,
-                        maximum=100,
-                        step=1,
-                        value=40,
-                        label="Top-k",
-                    )
-                    penalty = gr.Slider(
-                        minimum=1.0,
-                        maximum=2.0,
-                        step=0.1,
-                        value=1.2,
-                        label="Repetition Penalty",
-                    )
-                
-                examples = gr.Examples(
-                    examples=create_examples(),
-                    inputs=[message],
-                    outputs=[chat_history, chat_display],
-                    fn=process_example,
-                    cache_examples=False,
-                )
+                    submit = gr.Button("Send", variant="primary", size="sm")
+                    clear = gr.Button("Clear Chat", size="sm")
         
-        # Set up event handlers
-        submit_click = submit.click(
-            chat_response,
-            inputs=[
-                message,
-                chat_history,
-                chat_display,
-                system_prompt,
-                temperature,
-                max_tokens,
-                top_p,
-                top_k,
-                penalty,
-            ],
-            outputs=[chat_history, chat_display],
-            show_progress=True,
-        )
+        with gr.Accordion("⚙️ Advanced Settings", open=False):
+            system_prompt = gr.TextArea(
+                value=DEFAULT_SYSTEM_PROMPT,
+                label="System Prompt",
+                lines=5,
+            )
+            temperature = gr.Slider(
+                minimum=0,
+                maximum=1,
+                step=0.1,
+                value=0.3,
+                label="Temperature",
+            )
+            max_tokens = gr.Slider(
+                minimum=128,
+                maximum=32000,
+                step=128,
+                value=8192,
+                label="Max Tokens",
+            )
+            top_p = gr.Slider(
+                minimum=0.1,
+                maximum=1.0,
+                step=0.1,
+                value=0.8,
+                label="Top-p",
+            )
+            top_k = gr.Slider(
+                minimum=1,
+                maximum=100,
+                step=1,
+                value=40,
+                label="Top-k",
+            )
+            penalty = gr.Slider(
+                minimum=1.0,
+                maximum=2.0,
+                step=0.1,
+                value=1.2,
+                label="Repetition Penalty",
+            )
         
-        # Bind Enter key to submit
-        message.submit(
-            chat_response,
-            inputs=[
-                message,
-                chat_history,
-                chat_display,
-                system_prompt,
-                temperature,
-                max_tokens,
-                top_p,
-                top_k,
-                penalty,
-            ],
-            outputs=[chat_history, chat_display],
-            show_progress=True,
+        examples = gr.Examples(
+            examples=create_examples(),
+            inputs=[message],
+            outputs=[chatbot],
+            fn=process_example,
+            cache_examples=False,
         )
         
+        # Handle both submit events (Enter key and Send button)
+        submit_events = [message.submit, submit.click]
+        for submit_event in submit_events:
+            submit_event(
+                chat_response,
+                inputs=[message, chatbot, system_prompt, temperature, max_tokens, top_p, top_k, penalty],
+                outputs=[chatbot, chatbot],
+            )
+        
         clear.click(
-            lambda: ([], ""),
-            outputs=[chat_history, chat_display],
-            show_progress=True,
+            clear_chat,
+            outputs=[chatbot, message]
         )
-        
-        # Clear input after submission
-        submit_click.then(lambda: "", outputs=message)
-        message.submit(lambda: "", outputs=message)
     
     return demo