[feat] Add tabs to the UI, change descripiton to title only in ImageOutput

src/reagentai/constants.py

@@ -6,7 +6,7 @@
     "gemini-2.5-flash-preview-04-17",
 ]
 AIZYNTHFINDER_CONFIG_PATH: str = "data/config.yml"
-EXAMPLE_PROMPTS = [
+EXAMPLE_PROMPTS: list[str] = [
     "Can u tell me the SMILES of Caffeine? And generate an image of the compound.",
     "How to synthesize Aspirin? Can u tell me the best steps to achieve this?",
     "Suggest a retrosynthesis for Ibuprofen. Show all molecule images from the best route.",
@@ -15,6 +15,7 @@
     "Convert this SMILES to a chemical name: CC(=O)OC1=CC=CC=C1C(=O)O",
     "Tell me the detailed properties of Gabapentin.",
 ]
+EXAMPLES_PER_PAGE: int = 4
 
 DEFAULT_LOG_LEVEL: int = INFO
 LOG_DIR: Path = Path("logs")

src/reagentai/models/output.py

@@ -7,8 +7,8 @@ class ImageOutput(BaseModel):
 
     Attributes:
         file_path (str): The file path to the image output.
-        description (str): A description or title for the image output.
+        title (str): A title for the image output.
     """
 
     file_path: str
-    description: str
+    title: str

src/reagentai/tools/image.py

@@ -12,19 +12,17 @@
 logger = logging.getLogger(__name__)
 
 
-def smiles_to_image(
-    smiles: str, image_description: str, size: tuple[int, int] = (600, 300)
-) -> ImageOutput:
+def smiles_to_image(smiles: str, title: str, size: tuple[int, int] = (600, 300)) -> ImageOutput:
     """
     Generate an image from a SMILES string.
 
     Args:
         smiles (str): The SMILES string to convert to an image.
-        image_description (str): A description or title for the generated image.
+        title (str): A title for the generated image.
         size (tuple[int, int]): The size of the image in pixels. Default is (600, 300).
 
     Returns:
-        ImageOutput: An object containing the file path to the generated image and its description.
+        ImageOutput: An object containing the file path and title of the generated image.
     Raises:
         ValueError: If the provided SMILES string is invalid.
     """
@@ -41,19 +39,19 @@ def smiles_to_image(
         temp_file_path = tmp_file.name
 
     logger.info(f"Generated image for SMILES: {smiles}, saved to {temp_file_path}")
-    return ImageOutput(file_path=temp_file_path, description=image_description)
+    return ImageOutput(file_path=temp_file_path, title=title)
 
 
-def route_to_image(route: Route, image_description: str) -> ImageOutput:
+def route_to_image(route: Route, title: str) -> ImageOutput:
     """
     Generate an image from a retrosynthesis route.
 
     Args:
         route (Route): The retrosynthesis route to convert to an image.
-        image_description (str): A description or title for the generated image.
+        title (str): A title for the generated image.
 
     Returns:
-        ImageOutput: An object containing the file path to the generated image and its description.
+        ImageOutput: An object containing the file path and title of the generated image.
     """
     image = RouteImageFactory(route).image
 
@@ -64,4 +62,4 @@ def route_to_image(route: Route, image_description: str) -> ImageOutput:
         temp_file_path = tmp_file.name
 
     logger.info(f"Generated image for route, saved to {temp_file_path}")
-    return ImageOutput(file_path=temp_file_path, description=image_description)
+    return ImageOutput(file_path=temp_file_path, title=title)

src/reagentai/ui/app.py

@@ -6,7 +6,12 @@
 
 from src.reagentai.agents.main.main_agent import MainAgent
 from src.reagentai.common.typing import ChatHistory
-from src.reagentai.constants import APP_CSS, AVAILABLE_LLM_MODELS, EXAMPLE_PROMPTS
+from src.reagentai.constants import (
+    APP_CSS,
+    AVAILABLE_LLM_MODELS,
+    EXAMPLE_PROMPTS,
+    EXAMPLES_PER_PAGE,
+)
 from src.reagentai.models.output import ImageOutput
 
 
@@ -23,33 +28,35 @@ def create_settings_panel(
         tuple: A tuple containing the model dropdown, usage counter, and tool display components.
     """
     with gr.Column(scale=2, elem_id="col"):
-        gr.Markdown("### Model Settings")
-        model_dropdown = gr.Dropdown(
-            label="Select LLM Model",
-            choices=AVAILABLE_LLM_MODELS,
-            value=AVAILABLE_LLM_MODELS[0],
-        )
-        usage_counter = gr.Number(
-            label="Total Token Usage",
-            value=0,
-            precision=0,
-            interactive=False,
-            visible=True,
-        )
-
-        gr.Examples(
-            examples=EXAMPLE_PROMPTS,
-            inputs=chat_input_component,
-            label="Example Prompts",
-        )
-
-        gr.Markdown("### Tool Usage History")
-        tool_display = gr.Chatbot(
-            type="messages",
-            label="Tool Usage",
-            layout="panel",
-            elem_id="tool_display",
-        )
+        with gr.Tab("Settings"):
+            gr.Markdown("### Model Settings")
+            model_dropdown = gr.Dropdown(
+                label="Select LLM Model",
+                choices=AVAILABLE_LLM_MODELS,
+                value=AVAILABLE_LLM_MODELS[0],
+            )
+            usage_counter = gr.Number(
+                label="Total Token Usage",
+                value=0,
+                precision=0,
+                interactive=False,
+                visible=True,
+            )
+
+            gr.Examples(
+                examples=EXAMPLE_PROMPTS,
+                inputs=chat_input_component,
+                label="Example Prompts",
+                examples_per_page=EXAMPLES_PER_PAGE,
+            )
+        with gr.Tab("Tool Usage"):
+            gr.Markdown("### Tool Usage History")
+            tool_display = gr.Chatbot(
+                type="messages",
+                label="Tool Usage",
+                layout="panel",
+                elem_id="tool_display",
+            )
 
     return model_dropdown, usage_counter, tool_display
 
@@ -180,7 +187,7 @@ def run_agent(
                     if call.tool_name in ["smiles_to_image", "route_to_image"]:
                         output: ImageOutput = call.content
                         metadata = {
-                            "title": output.description,
+                            "title": output.title,
                             "status": "done",
                         }
                         gr_message = {