Fix: Update chat format and UI layout

app.py

@@ -177,7 +177,7 @@ def process_text_query(query, history):
         return "", history
     
     # Add the user's query to history
-    history.append({"role": "user", "content": query})
+    history.append([query, None])
     
     start_time = time.time()
     
@@ -276,7 +276,7 @@ def process_text_query(query, history):
                 viz_html = generate_visualization(result_df, query)
                 if viz_html:
                     # Add the visualization to history
-                    history.append({"role": "assistant", "content": viz_html})
+                    history[-1][1] = viz_html
                     return viz_html, history
             
             # If no visualization or visualization failed, generate text response
@@ -288,23 +288,23 @@ def process_text_query(query, history):
             )).content
             
             # Add the response to history
-            history.append({"role": "assistant", "content": response})
+            history[-1][1] = response
             return response, history
             
         except Exception as e:
             error_msg = f"Error processing query: {str(e)}"
-            history.append({"role": "assistant", "content": error_msg})
+            history[-1][1] = error_msg
             return error_msg, history
     
     else:
         # Handle non-CSV queries (document queries)
         try:
             response = document_assistant.process_query(query)
-            history.append({"role": "assistant", "content": response})
+            history[-1][1] = response
             return response, history
         except Exception as e:
             error_msg = f"Error processing query: {str(e)}"
-            history.append({"role": "assistant", "content": error_msg})
+            history[-1][1] = error_msg
             return error_msg, history
 
 def process_file_upload(files):
@@ -418,9 +418,9 @@ def clear_context():
             "table_name": None
         }
         
-        return [{"role": "assistant", "content": "Context cleared. You can now upload new documents or CSV files."}]
+        return [["Context cleared. You can now upload new documents or CSV files.", None]]
     except Exception as e:
-        return [{"role": "assistant", "content": f"Error clearing context: {str(e)}"}]
+        return [[f"Error clearing context: {str(e)}", None]]
 
 # I am making a function for voice input but we are not using it in this version(still in development phase)
 """
@@ -790,7 +790,7 @@ with gr.Blocks(title="LLM Powered Database Chatbot") as demo:
     # Add a global variable to store the current visualization
     current_visualization = gr.State(None)
     
-    with gr.Tab("Chat"):
+    with gr.Tab("Chat & Visualizations"):
         # Use a custom CSS to ensure images are displayed properly
         gr.HTML("""
         <style>
@@ -800,62 +800,8 @@ with gr.Blocks(title="LLM Powered Database Chatbot") as demo:
             display: block;
             margin: 10px 0;
         }
-        </style>
-        """)
-        
-        chatbot = gr.Chatbot(height=500, elem_classes="chatbot-container")
-        
-        # Add information about capabilities
-        gr.Markdown("""
-        ### Capabilities:
-        - **Data Analysis**: Ask questions about your data and get detailed responses
-        - **Visualization**: Request and view graphs and charts of your data
-        - **Multiple File Types**: Upload PDFs, TXT, DOCX, CSV, and XLSX files for analysis
-        - **Natural Language Queries**: Ask questions in plain English about your documents
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=8):
-                msg = gr.Textbox(
-                    placeholder="Ask a question about your documents...",
-                    show_label=False
-                )
-            with gr.Column(scale=1):
-                pass
-        
-        with gr.Row():
-            submit_btn = gr.Button("Submit")
-            clear_btn = gr.Button("Clear")
-            clear_context_btn = gr.Button("Clear Context")
-    
-    with gr.Tab("Visualizations"):
-        gr.Markdown("## 📊 Data Visualizations")
-        
-        with gr.Row():
-            with gr.Column(scale=3):
-                visualization_output = gr.HTML(
-                    label="Current Visualization",
-                    elem_classes="visualization-container"
-                )
-            with gr.Column(scale=1):
-                with gr.Group():
-                    clear_viz_btn = gr.Button("🗑️ Clear Visualization", variant="stop")
-                    save_viz_btn = gr.Button("💾 Save Visualization")
-                    save_status = gr.Textbox(label="Save Status", visible=False)
-        
-        gr.Markdown("""
-        ### How to use:
-        1. Ask a question about your data in the Chat tab
-        2. If your question involves visualization, the plot will appear here
-        3. You can switch between Chat and Visualizations tabs to see both the conversation and the plots
-        4. Use the buttons above to clear or save the current visualization
-        """)
-        
-        # Add custom CSS for better visualization display
-        gr.HTML("""
-        <style>
         .visualization-container {
-            min-height: 600px;
+            min-height: 500px;
             max-height: 800px;
             overflow: auto;
             padding: 20px;
@@ -871,6 +817,45 @@ with gr.Blocks(title="LLM Powered Database Chatbot") as demo:
         </style>
         """)
         
+        with gr.Row():
+            with gr.Column(scale=1):
+                chatbot = gr.Chatbot(height=500, elem_classes="chatbot-container")
+                
+                with gr.Row():
+                    with gr.Column(scale=8):
+                        msg = gr.Textbox(
+                            placeholder="Ask a question about your documents...",
+                            show_label=False
+                        )
+                    with gr.Column(scale=1):
+                        pass
+                
+                with gr.Row():
+                    submit_btn = gr.Button("Submit")
+                    clear_btn = gr.Button("Clear")
+                    clear_context_btn = gr.Button("Clear Context")
+            
+            with gr.Column(scale=1):
+                visualization_output = gr.HTML(
+                    label="Visualization",
+                    elem_classes="visualization-container"
+                )
+                
+                with gr.Row():
+                    clear_viz_btn = gr.Button("🗑️ Clear Visualization")
+                    save_viz_btn = gr.Button("💾 Save Visualization")
+                
+                save_status = gr.Textbox(label="Save Status", visible=False)
+        
+        # Add information about capabilities
+        gr.Markdown("""
+        ### Capabilities:
+        - **Data Analysis**: Ask questions about your data and get detailed responses
+        - **Visualization**: Request and view graphs and charts of your data
+        - **Multiple File Types**: Upload PDFs, TXT, DOCX, CSV, and XLSX files for analysis
+        - **Natural Language Queries**: Ask questions in plain English about your documents
+        """)
+        
         def clear_visualization():
             return "", ""
         
@@ -918,19 +903,14 @@ with gr.Blocks(title="LLM Powered Database Chatbot") as demo:
             viz_html = response
             # Update the visualization state
             current_viz = viz_html
-            # Remove the visualization from the chat response
-            response = "I've created a visualization for your query. Please check the 'Visualizations' tab to see it."
         
-        return response, new_history, current_viz
+        return "", new_history, current_viz
     
     # Update the button click handlers
     submit_btn.click(
         process_text_query_with_visualization,
         inputs=[msg, chatbot, current_visualization],
         outputs=[msg, chatbot, current_visualization]
-    ).then(
-        lambda: None,  # Clear the input
-        outputs=[msg]
     ).then(
         lambda viz: viz if viz else "",  # Update visualization tab
         inputs=[current_visualization],