adjust UI

app.py

@@ -517,6 +517,8 @@ def load_example_dataset(name):
             gr.update(visible=False),    # Hide titanic button
             gr.update(visible=False),    # Hide superstore button
             gr.update(visible=False),    # Hide upload button
+            gr.update(visible=False),    # Hide instruction button
+            gr.update(visible=False),    # Hide example button
             df.describe().reset_index(),
             get_info_df(df),
             df.head(),
@@ -559,6 +561,8 @@ def handle_upload(file):
         gr.update(visible=False),    # Hide titanic button
         gr.update(visible=False),    # Hide superstore button
         gr.update(visible=True),     # Hide upload button
+        gr.update(visible=False),    # Hide instruction button
+        gr.update(visible=False),    # Hide example button
         df.describe().reset_index(),
         get_info_df(df),
         df.head(),
@@ -572,6 +576,33 @@ def refresh_graph():
     global config
     config = {"configurable": {"thread_id": str(uuid.uuid4()), "session": str(uuid.uuid4())}}
 
+# --- Gradio UI ---
+def respond(message, chat_history):
+    chat_history = []
+    res = react_graph.invoke(
+        {"messages": [HumanMessage(content=message)]}
+        , config=config)
+    for msg in res["messages"]:
+        msg.pretty_print()
+        if isinstance(msg, HumanMessage):
+            chat_history.append({"role": "user", "content": msg.content})
+
+        if isinstance(msg, AIMessage):
+            ai_response = msg.content
+            chat_history.append({"role": "assistant", "content": ai_response})
+
+        if isinstance(msg, ToolMessage):
+            if msg.name == "generate_plot_code":
+                plot_result = generate_plot_from_code(msg.content)
+                chat_history.append({"role": "assistant", "content": gr.Plot(plot_result)})
+
+            if msg.name == "enhance_plot_code":
+                plot_result = generate_plot_from_code(msg.content)
+                chat_history.append({"role": "assistant", "content": gr.Plot(plot_result)})
+
+    time.sleep(1)
+    return "", chat_history
+
 # Layout
 with gr.Blocks(theme=my_theme) as demo:
     demo.load(refresh_graph, inputs=None, outputs=None)
@@ -632,20 +663,20 @@ with gr.Blocks(theme=my_theme) as demo:
     <div class="container">
         <h1>
             <span style="font-size: 30px;">🎯</span>
-            <span class="title-gradient">Terloka Data Insight Tool</span>
+            <span class="title-gradient">AI Chat to Visual</span>
         </h1>
         <p class="subtitle">Your gateway to smarter decisions through travel data.</p>
     </div>
 
     """)
 
-    gr.Markdown(
+    instruction_box = gr.Markdown(
         "> Upload a file to get started. Supported formats: `.csv`, `.xls`, `.xlsx`",
         elem_id="instruction"
     )
     warning_box = gr.Markdown("⚠️ **You can't proceed without uploading your files first**", visible=True)
     upload_btn = gr.File(file_types=[".csv", ".xls", ".xlsx"], label="📁 Upload File")
-    gr.Markdown("### Or use an example dataset:")
+    example_box = gr.Markdown("### Or use an example dataset:")
     with gr.Row():
         iris_btn = gr.Button("🌸 Load Iris")
         titanic_btn = gr.Button("🚢 Load Titanic")
@@ -658,48 +689,10 @@ with gr.Blocks(theme=my_theme) as demo:
                 "👉 Want to understand your data first? Go to the Data Exploration tab first!", 
                 elem_id="chatbot_hint"
             )
-
             chatbot = gr.Chatbot(type="messages", label="Data Chatbot", elem_id="chatbot")
+            msg = gr.Textbox(label="",elem_id="chat_input", container=False, placeholder="Ask me anything about your data...")
+            msg.submit(respond, [msg, chatbot], [msg, chatbot])
 
-            chat_input = gr.MultimodalTextbox(
-                interactive=True,
-                file_count="multiple",
-                placeholder="Ask about your data or upload files...",
-                show_label=False,
-                sources=[],
-                elem_id="chat_input"
-            )
-
-            def print_like_dislike(x: gr.LikeData):
-                print("User liked message:", x.liked, "at index:", x.index)
-
-            def add_message(history, message):
-                # Add uploaded files to history as user messages
-                for f in message.get("files", []):
-                    history.append({"role": "user", "content": {"path": f}})
-                # Add text message if any
-                if message.get("text"):
-                    history.append({"role": "user", "content": message["text"]})
-                # Clear input box after submit
-                return history, gr.MultimodalTextbox(value=None, interactive=True)
-
-            def bot(history: list):
-                last_user_msg = history[-1]["content"]
-                if isinstance(last_user_msg, dict):  # If user uploaded files, skip LLM
-                    return history
-
-                _, updated_history = respond(last_user_msg, history[:-1])
-                return updated_history
-
-
-            chat_msg = chat_input.submit(
-                add_message, inputs=[chatbot, chat_input], outputs=[chatbot, chat_input]
-            )
-            bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name="bot_response")
-            bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])
-
-            chatbot.like(print_like_dislike, None, None, like_user_message=True)
-        
         with gr.Tab("📊 Data Exploration"):
             with gr.Column():
                 with gr.Accordion("🧮 Data Description", open=True):
@@ -723,7 +716,7 @@ with gr.Blocks(theme=my_theme) as demo:
         fn=handle_upload,
         inputs=upload_btn,
         outputs=[
-            main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,
+            main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,instruction_box,example_box,
             describe_output, info_output,
             head_output, null_output,
             dup_output
@@ -732,7 +725,7 @@ with gr.Blocks(theme=my_theme) as demo:
     iris_btn.click(
     fn=lambda: load_example_dataset("iris"),
     outputs=[
-        main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,
+        main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,instruction_box,example_box,
         describe_output, info_output,
         head_output, null_output,
         dup_output
@@ -742,7 +735,7 @@ with gr.Blocks(theme=my_theme) as demo:
     titanic_btn.click(
         fn=lambda: load_example_dataset("titanic"),
         outputs=[
-            main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,
+            main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,instruction_box,example_box,
             describe_output, info_output,
             head_output, null_output,
             dup_output
@@ -752,7 +745,7 @@ with gr.Blocks(theme=my_theme) as demo:
     superstore_btn.click(
         fn=lambda: load_example_dataset("superstore"),
         outputs=[
-            main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,
+            main_tabs, warning_box, iris_btn, titanic_btn, superstore_btn,upload_btn,instruction_box,example_box,
             describe_output, info_output,
             head_output, null_output,
             dup_output