upgrade graph

app.py

@@ -45,7 +45,7 @@ def generate_chart(data: Union[Dict, List[Dict], pd.DataFrame],
                  x_label: str = None, 
                  y_label: str = None) -> str:
     """
-    Generate a chart from data and return it as an HTML string with embedded image.
+    Generate a chart from data and return it as a base64 encoded image.
     
     Args:
         data: The data to plot (can be a list of dicts or a pandas DataFrame)
@@ -57,7 +57,7 @@ def generate_chart(data: Union[Dict, List[Dict], pd.DataFrame],
         y_label: Label for y-axis
         
     Returns:
-        HTML string with embedded chart image
+        Markdown string with embedded image
     """
     try:
         # Convert data to DataFrame if it's a list of dicts
@@ -72,6 +72,7 @@ def generate_chart(data: Union[Dict, List[Dict], pd.DataFrame],
             return "Error: Data must be a dictionary, list of dictionaries, or pandas DataFrame"
             
         # Generate the appropriate chart type
+        fig = None
         if chart_type == 'bar':
             fig = px.bar(df, x=x, y=y, title=title)
         elif chart_type == 'line':
@@ -90,11 +91,24 @@ def generate_chart(data: Union[Dict, List[Dict], pd.DataFrame],
             xaxis_title=x_label or x,
             yaxis_title=y_label or (y if y != x else ''),
             title=title or f"{chart_type.capitalize()} Chart of {x} vs {y}" if y else f"{chart_type.capitalize()} Chart of {x}",
-            template="plotly_white"
+            template="plotly_white",
+            margin=dict(l=20, r=20, t=40, b=20),
+            height=400
         )
         
-        # Convert to HTML
-        return f"<div style='width: 100%;'>{fig.to_html(full_html=False)}</div>"
+        # Save the figure to a temporary file
+        temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.png')
+        fig.write_image(temp_file.name, format='png', engine='kaleido')
+        
+        # Read the image file and encode as base64
+        with open(temp_file.name, 'rb') as img_file:
+            img_base64 = base64.b64encode(img_file.read()).decode('utf-8')
+        
+        # Clean up the temporary file
+        os.unlink(temp_file.name)
+        
+        # Return as markdown image
+        return f'<img src="data:image/png;base64,{img_base64}" style="max-width:100%;"/>'
         
     except Exception as e:
         error_msg = f"Error generating chart: {str(e)}"
@@ -664,15 +678,22 @@ def create_ui():
         if not env_ok:
             gr.Warning("⚠️ " + env_message)
         
-        # Chatbot component
-        chatbot = gr.Chatbot(
-            label="Chat",
-            height=500,
-            show_label=True,
-            container=True,
-            type="messages",
-            elem_id="chatbot"
-        )
+        # Create the chat interface
+        with gr.Row():
+            chatbot = gr.Chatbot(
+                [],
+                elem_id="chatbot",
+                bubble_full_width=False,
+                avatar_images=(
+                    None,
+                    (os.path.join(os.path.dirname(__file__), "logo.png")),
+                ),
+                height=600,
+                render_markdown=True,  # Enable markdown rendering
+                show_label=False,
+                show_share_button=False,
+                likeable=False
+            )
         
         # Input area
         with gr.Row():