ENG-7585: docs patch (+ ENG-7581) (#1611)

* refine ai docs

* Reflex Build IDE vid

* refine interaction mode docs

* patches to navbar, sidebar, and others

* add link with url

* make set sidebar index event temporal

---------

Co-authored-by: carlosabadia <cutillascarlos@gmail.com>

Author: LineIndent

docs/ai_builder/app_lifecycle/general.md

@@ -46,14 +46,3 @@ rx.el.div(render_image())
 
 - **Delete App**
   Permanently remove an app you no longer need. **Warning:** This action cannot be undone.
-
-## Common Use Cases
-
-- **Keep Apps Organized**
-  Rename apps to make them easier to find in your workspace.
-
-- **Integration Reference**
-  Use the App ID when connecting your app to other tools or APIs.
-
-- **Clean Up Workspace**
-  Delete outdated or test apps to keep your workspace tidy.

docs/ai_builder/features/ide.md

@@ -6,7 +6,7 @@ Reflex Build includes a **powerful, in-browser IDE** built on **Monaco Editor**,
   <iframe
     width="100%"
     height="400"
-    src="https://www.youtube.com/embed/aW0ZefEC3SU"
+    src="https://www.youtube.com/embed/UAj9vUweQ5g"
     title="Reflex Build - IDE"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

docs/ai_builder/features/interaction_modes.md

@@ -55,7 +55,7 @@ Use Chat mode when you want to **ask questions** or get **advice without alterin
 ## When to Use Each
 
 - **Build a new feature or component** → Use **Agent**
-- **Set up integrations (DB, API, etc.)** → Use **Agent**
+- **Set up integrations (DB, etc.)** → Use **Agent**
 - **Understand Reflex concepts** → Use **Chat**
 - **Debug an error in your code** → Start with **Chat**, then switch to **Agent**
 - **Explore ideas or best practices** → Use **Chat**

pcweb/components/docpage/navbar/navbar.py

@@ -106,6 +106,7 @@ def link_item(name: str, url: str, active_str: str = ""):
             }
         },
         class_name=common_cn + rx.cond(active, active_cn, unactive_cn),
+        on_click=SidebarState.set_sidebar_index(0)
     )
 
 
@@ -455,7 +456,7 @@ def new_component_section() -> rx.Component:
                     nav_menu.item(
                         link_item(
                             "AI Builder",
-                            ai_builder_pages.overview.what_is_reflex_build.path,
+                            ai_builder_pages.overview.best_practices.path,
                             "builder",
                         ),
                     ),

pcweb/components/docpage/sidebar/sidebar.py

@@ -286,7 +286,7 @@ def filter_out_non_sidebar_items(items: list[SideBarBase]) -> list[SideBarItem]:
 
 def sidebar_category(name: str, url: str, icon: str, index: int):
     return rx.el.li(
-        rx.link(
+        rx.el.div(
             rx.box(
                 rx.box(
                     rx.box(
@@ -314,17 +314,20 @@ def sidebar_category(name: str, url: str, icon: str, index: int):
                         SidebarState.sidebar_index == index, " visible", " hidden"
                     ),
                 ),
-                class_name="flex flex-row justify-between items-center hover:bg-slate-3 p-[0.5rem_1rem_0.5rem_0.5rem] rounded-2xl w-full transition-bg self-stretch"
+                class_name="cursor-pointer flex flex-row justify-between items-center hover:bg-slate-3 p-[0.5rem_1rem_0.5rem_0.5rem] rounded-2xl w-full transition-bg self-stretch"
                 + rx.cond(
                     SidebarState.sidebar_index == index,
                     " bg-slate-3",
                     " bg-transparent",
                 ),
             ),
-            on_click=SidebarState.set_sidebar_index(index),
-            class_name="w-full text-slate-9 hover:!text-slate-9",
-            underline="none",
-            href=url,
+            rx.el.a(
+                to=url,
+                on_click=rx.prevent_default,
+                class_name="inset-0 absolute z-[-1]",
+            ),
+            class_name="w-full text-slate-9 hover:!text-slate-9 relative",
+            on_click=[SidebarState.set_sidebar_index(index), rx.redirect(url)],
         ),
         class_name="w-full",
     )
@@ -417,13 +420,13 @@ def sidebar_comp(
                 rx.el.ul(
                     sidebar_category(
                         "Learn",
-                        "/docs/ai-builder/overview/best-practices",
+                        ai_builder_pages.overview.best_practices.path,
                         "bot",
                         0,
                     ),
                     sidebar_category(
                         "MCP",
-                        "/docs/ai-builder/integrations/mcp-overview",
+                        ai_builder_pages.integrations.mcp_overview.path,
                         "plug",
                         1,
                     ),

pcweb/components/docpage/sidebar/sidebar_items/item.py

@@ -17,6 +17,8 @@ def create_item(route: Route, children=None):
             .replace("Cli", "CLI")
             .replace("Ai", "AI")
             .replace("Ide", "IDE")
+            .replace("Mcp", "MCP")
+
         )
         return SideBarItem(
             names=name, alt_name_for_next_prev=alt_name_for_next_prev, link=url

pcweb/components/docpage/sidebar/state.py

@@ -39,10 +39,11 @@ class SideBarSection(SideBarBase):
 class SidebarState(rx.State):
     _sidebar_index: int = -1
 
+    @rx.event(temporal=True)
     def set_sidebar_index(self, num) -> int:
         self._sidebar_index = num
 
-    @rx.var(cache=True, initial_value=-1)
+    @rx.var(initial_value=-1)
     def sidebar_index(self) -> int:
         route = self.router.page.path
         if self._sidebar_index < 0: