Merge pull request ag2ai#337 from harishmohanraj/main

[Docs] Fix tag filtering issue in the application gallery page
AgentGenie · Jan 3, 2025 · 6453be1 · 6453be1
2 parents 461db25 + 06a7c3f
commit 6453be1
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 511 deletions.
diff --git a/.github/workflows/deploy-website-mintlify.yml b/.github/workflows/deploy-website-mintlify.yml
@@ -49,15 +49,9 @@ jobs:
       - name: Install quarto
         uses: quarto-dev/quarto-actions/setup@v2
 
-      - name: Generate API documentation
-        run: |
-          python ./process_api_reference.py
-        working-directory: website
-
-      - name: Convert Jupyter notebooks to MDX
-        run: |
-          python ./process_notebooks.py render
-        working-directory: website
+      - name: Build documentation
+        run: ./scripts/docs_build.sh
+        working-directory: .
 
       - name: Prepare website content
         run: |
@@ -95,15 +89,9 @@ jobs:
       - name: Install quarto
         uses: quarto-dev/quarto-actions/setup@v2
 
-      - name: Generate API documentation
-        run: |
-          python ./process_api_reference.py
-        working-directory: website
-
-      - name: Convert Jupyter notebooks to MDX
-        run: |
-          python ./process_notebooks.py render
-        working-directory: website
+      - name: Build documentation
+        run: ./scripts/docs_build.sh
+        working-directory: .
 
       - name: Prepare website content
         run: |

diff --git a/scripts/docs_build.sh b/scripts/docs_build.sh
@@ -3,7 +3,14 @@
 set -e
 set -x
 
-cd website &&
-    yarn install --frozen-lockfile --ignore-engines &&
-    pydoc-markdown &&
-    yarn build
+# Function to build documentation
+docs_build() {
+    cd website &&
+        python ./process_api_reference.py &&
+        python ./process_notebooks.py render
+}
+
+# Execute the function only if the script is run directly
+if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
+    docs_build
+fi
diff --git a/scripts/docs_serve.sh b/scripts/docs_serve.sh
@@ -3,7 +3,16 @@
 set -e
 set -x
 
-cd website &&
-    yarn install --frozen-lockfile --ignore-engines &&
-    pydoc-markdown &&
-    yarn start
+# Source the docs_build.sh script from the same directory
+source "$(dirname "$0")/docs_build.sh"
+
+# Run the docs_build function from docs_build.sh
+docs_build
+
+# Install npm packages
+echo "Running npm install..."
+npm install
+
+# Add the command to serve the documentation
+echo "Serving documentation..."
+npm run mintlify:dev
diff --git a/website/README.md b/website/README.md
@@ -25,11 +25,7 @@ pip install pydoc-markdown pyyaml termcolor nbclient
 3. Finally, run the following commands to build and serve the documentation:
 
 ```console
-cd website
-python ./process_api_reference.py
-python ./process_notebooks.py render
-npm install
-npm run mintlify:dev
+./scripts/docs_serve.sh
 ```
 
 The last command starts a local development server and opens up a browser window.
@@ -52,11 +48,7 @@ docker run -it -p 8081:3000 -v $(pwd):/home/autogen/ag2 ag2ai_dev_img bash
 Once at the CLI in Docker run the following commands:
 
 ```console
-cd website
-python ./process_api_reference.py
-python ./process_notebooks.py render
-npm install
-npm run mintlify:dev
+./scripts/docs_serve.sh
 ```
 
 Once done you should be able to access the documentation at `http://127.0.0.1:8081`
diff --git a/website/build_website.sh b/website/build_website.sh
diff --git a/website/mint-style.css b/website/mint-style.css
@@ -328,13 +328,18 @@ a.colab-badge > img, a.github-badge  > img {
   line-height: 1.5;
 }
 .examples-gallery-container .card {
-  padding: 1rem;
   transition: all 0.3s ease;
   border: 1px solid #e8e8e8;
   border-radius: 4px;
   cursor: pointer;
   overflow: hidden;
+  display: flex;
+}
+.examples-gallery-container .card-container {
+  padding: 1rem;
+  flex:1;
 }
+
 .examples-gallery-container .card-description {
   color: #727272;
   display: -webkit-box;
@@ -358,6 +363,13 @@ a.colab-badge > img, a.github-badge  > img {
 }
 .examples-gallery-container .card .px-6.py-5 {
   padding: 0;
+  height: 100%;
+}
+.examples-gallery-container .card .px-6.py-5 > div,
+.examples-gallery-container .card .px-6.py-5 > div > div,
+.examples-gallery-container .card .px-6.py-5 > div > div > div.card-container
+{
+  height: 100%;
 }
 .examples-gallery-container .tag {
   display: inline-block;

diff --git a/website/mint.json b/website/mint.json
@@ -303,16 +303,13 @@
             {
               "group": "agentchat.realtime_agent",
               "pages": [
-                "docs/reference/agentchat/realtime_agent/client",
                 "docs/reference/agentchat/realtime_agent/function_observer",
                 "docs/reference/agentchat/realtime_agent/oai_realtime_client",
                 "docs/reference/agentchat/realtime_agent/realtime_agent",
                 "docs/reference/agentchat/realtime_agent/realtime_client",
                 "docs/reference/agentchat/realtime_agent/realtime_observer",
                 "docs/reference/agentchat/realtime_agent/twilio_audio_adapter",
-                "docs/reference/agentchat/realtime_agent/twilio_observer",
-                "docs/reference/agentchat/realtime_agent/websocket_audio_adapter",
-                "docs/reference/agentchat/realtime_agent/websocket_observer"
+                "docs/reference/agentchat/realtime_agent/websocket_audio_adapter"
               ]
             },
             "docs/reference/agentchat/agent",
@@ -546,13 +543,17 @@
           "pages": [
             "notebooks/Notebooks",
             "notebooks/agentchat_RetrieveChat_mongodb",
+            "notebooks/JSON_mode_example",
+            "notebooks/agentchat_MathChat",
+            "notebooks/agentchat_RetrieveChat",
             "notebooks/agentchat_RetrieveChat_pgvector",
             "notebooks/agentchat_RetrieveChat_qdrant",
             "notebooks/agentchat_agentops",
             "notebooks/agentchat_agentoptimizer",
             "notebooks/agentchat_auto_feedback_from_code_execution",
             "notebooks/agentchat_azr_ai_search",
             "notebooks/agentchat_captainagent",
+            "notebooks/agentchat_captainagent_crosstool",
             "notebooks/agentchat_cost_token_tracking",
             "notebooks/agentchat_custom_model",
             "notebooks/agentchat_dalle_and_gpt4v",
@@ -561,6 +562,8 @@
             "notebooks/agentchat_function_call_async",
             "notebooks/agentchat_function_call_code_writing",
             "notebooks/agentchat_function_call_currency_calculator",
+            "notebooks/agentchat_graph_rag_falkordb",
+            "notebooks/agentchat_graph_rag_neo4j",
             "notebooks/agentchat_group_chat_with_llamaindex_agents",
             "notebooks/agentchat_groupchat",
             "notebooks/agentchat_groupchat_RAG",
@@ -592,13 +595,16 @@
             "notebooks/agentchat_oai_code_interpreter",
             "notebooks/agentchat_openlit",
             "notebooks/agentchat_planning",
+            "notebooks/agentchat_realtime_swarm",
+            "notebooks/agentchat_realtime_websocket",
             "notebooks/agentchat_reasoning_agent",
             "notebooks/agentchat_society_of_mind",
             "notebooks/agentchat_sql_spider",
             "notebooks/agentchat_stream",
             "notebooks/agentchat_structured_outputs",
             "notebooks/agentchat_surfer",
             "notebooks/agentchat_swarm",
+            "notebooks/agentchat_swarm_enhanced",
             "notebooks/agentchat_swarm_graphrag_telemetry_trip_planner",
             "notebooks/agentchat_swarm_graphrag_trip_planner",
             "notebooks/agentchat_swarm_w_groupchat_legacy",
@@ -617,21 +623,10 @@
             "notebooks/autobuild_agent_library",
             "notebooks/autobuild_basic",
             "notebooks/autogen_uniformed_api_calling",
+            "notebooks/config_loader_utility_functions",
             "notebooks/gpt_assistant_agent_function_call",
             "notebooks/lats_search",
-            "notebooks/JSON_mode_example",
-            "notebooks/agentchat_RetrieveChat",
-            "notebooks/agentchat_graph_rag_neo4j",
-            "notebooks/agentchat_swarm_enhanced",
-            "notebooks/tools_interoperability",
-            "notebooks/agentchat_realtime_swarm",
-            "notebooks/agentchat_realtime_websocket",
-            "notebooks/agentchat_reasoning_agent",
-            "notebooks/agentchat_captainagent_crosstool",
-            "notebooks/agentchat_realtime_websocket",
-            "notebooks/agentchat_graph_rag_falkordb",
-            "notebooks/agentchat_MathChat",
-            "notebooks/config_loader_utility_functions"
+            "notebooks/tools_interoperability"
           ]
         },
         "notebooks/Gallery"

diff --git a/website/process_notebooks.py b/website/process_notebooks.py
@@ -316,6 +316,11 @@ def get_error_info(nb: NotebookNode) -> NotebookError | None:
 def add_front_matter_to_metadata_mdx(
     front_matter: dict[str, str | list[str]], website_dir: Path, rendered_mdx: Path
 ) -> None:
+
+    source = front_matter.get("source_notebook")
+    if isinstance(source, str) and source.startswith("/website/docs/"):
+        return
+
     metadata_mdx = website_dir / "snippets" / "data" / "NotebooksMetadata.mdx"
 
     metadata = []
@@ -335,7 +340,7 @@ def add_front_matter_to_metadata_mdx(
         "description": front_matter.get("description", ""),
         "image": front_matter.get("image"),
         "tags": front_matter.get("tags", []),
-        "source": front_matter.get("source_notebook"),
+        "source": source,
     }
     # Update metadata list
     existing_entry = next((item for item in metadata if item["title"] == entry["title"]), None)
@@ -473,7 +478,9 @@ def post_process_mdx(rendered_mdx: Path, source_notebooks: Path, front_matter: d
     # If there is front matter in the mdx file, we need to remove it
     if content.startswith("---"):
         front_matter_end = content.find("---", 3)
-        front_matter = yaml.safe_load(content[4:front_matter_end])
+        mdx_front_matter = yaml.safe_load(content[4:front_matter_end])
+        # Merge while preserving original values
+        front_matter = {**front_matter, **mdx_front_matter}
         content = content[front_matter_end + 3 :]
 
     # Clean heading IDs using regex - matches from # to the end of ID block

diff --git a/website/snippets/components/GalleryPage.mdx b/website/snippets/components/GalleryPage.mdx
@@ -14,6 +14,16 @@ export const GalleryPage = ({
   const defaultImageIfNoImage = allowDefaultImage ?? true;
   const allTags = [...new Set(galleryItems.flatMap((item) => item.tags))];
 
+   const handleCardClick = (e, targetLink) => {
+    if (!e.target.closest('a')) {
+      if (target === '_blank') {
+        window.open(targetLink, '_blank');
+      } else {
+        window.location.href = targetLink;
+      }
+    }
+  };
+
   const updateURL = (tags) => {
     const searchParams = new URLSearchParams(window.location.search);
     if (tags.length > 0) {
@@ -121,22 +131,35 @@ export const GalleryPage = ({
     const colab_href = `https://colab.research.google.com/github/ag2ai/ag2/blob/main/${item.source}`;
     const github_href = `https://github.com/ag2ai/ag2/blob/main/${item.source}`;
     return (<span class="badges">
-      <a style={{marginRight: '5px'}}href={colab_href} target="_parent"><img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/></a>
-      <a href={github_href} target="_parent"><img alt="Static Badge" src="https://img.shields.io/badge/Open%20on%20GitHub-grey?logo=github"/></a>
+      <a style={{marginRight: '5px'}}href={colab_href} target="_parent"><img noZoom src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/></a>
+      <a href={github_href} target="_parent"><img noZoom alt="Static Badge" src="https://img.shields.io/badge/Open%20on%20GitHub-grey?logo=github"/></a>
       </span>
     );
   }
 
   return (
     <div className="examples-gallery-container">
+      <select
+        multiple
+        className="tag-filter"
+        data-placeholder="Filter by tags"
+      >
+        {allTags.map(tag => (
+          <option key={tag} value={tag}>
+            {tag}
+          </option>
+        ))}
+      </select>
       <CardGroup cols={3}>
         {galleryItems.map((item, index) => (
-          <Card key={index} href={item.link}>
-            {imageFunc(item)}
-            <h5 className="card-title">{item.title}</h5>
-            {badges(item)}
-            <p className="card-description">{item.description || item.title}</p>
-            <TagsView tags={item.tags} />
+          <Card key={index}>
+            <div className="card-container" onClick={(e) => handleCardClick(e, item.link)}>
+              {imageFunc(item)}
+              <h5 className="card-title">{item.title}</h5>
+              {badges(item)}
+              <p className="card-description">{item.description || item.title}</p>
+              <TagsView tags={item.tags} />
+            </div>
           </Card>
         ))}
       </CardGroup>