Merge branch 'main' into ahmad/blog-post

Author: LineIndent

README.md

@@ -6,7 +6,7 @@
 
 ### **✨ The open-source framework to build and deploy web apps - no Javascript required. ✨**
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
-![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
+[![tests](https://github.com/reflex-dev/reflex-web/actions/workflows/integration_tests.yml/badge.svg)](https://github.com/reflex-dev/reflex-web/actions/workflows/integration_tests.yml)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction/)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)

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**

docs/wrapping-react/props.md

@@ -154,4 +154,49 @@ class EventHandlerComponent(MyBaseComponent):
 
 ```md alert info
 # Custom event specs have a few use case where they are particularly useful. If the event returns non-serializable data, you can filter them out so the event can be sent to the backend. You can also use them to transform the data before sending it to the backend.
+```
+
+### Emulating Event Handler Behavior Outside a Component
+
+In some instances, you may need to replicate the special behavior applied to
+event handlers from outside of a component context. For example if the component
+to be wrapped requires event callbacks passed in a dictionary, this can be
+achieved by directly instantiating an `EventChain`.
+
+A real-world example of this is the `onEvents` prop of
+[`echarts-for-react`](https://www.npmjs.com/package/echarts-for-react) library,
+which, unlike a normal event handler, expects a mapping of event handlers like:
+
+```javascript
+<ReactECharts
+  option={this.getOption()}
+  style={{ height: '300px', width: '100%' }}
+  onEvents={{
+    'click': this.onChartClick,
+    'legendselectchanged': this.onChartLegendselectchanged
+  }}
+/>
+```
+
+To achieve this in Reflex, you can create an explicit `EventChain` for each
+event handler:
+
+```python
+@classmethod
+def create(cls, *children, **props):
+    on_events = props.pop("on_events", {})
+
+    event_chains = {}
+    for event_name, handler in on_events.items():
+        # Convert the EventHandler/EventSpec/lambda to an EventChain
+        event_chains[event_name] = rx.EventChain.create(
+            handler,
+            args_spec=rx.event.no_args_event_spec,
+            key=event_name,
+        )
+    if on_events:
+        props["on_events"] = event_chains
+
+    # Create the component instance
+    return super().create(*children, **props)
 ```

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:

pcweb/pages/docs/apiref.py

@@ -9,7 +9,7 @@
     rx.Base,
     rx.Component,
     rx.ComponentState,
-    rx.Config,
+    (rx.Config, rx.config.BaseConfig),
     rx.event.Event,
     rx.event.EventHandler,
     rx.event.EventSpec,
@@ -26,9 +26,17 @@
 
 pages = []
 for module in modules:
+    if isinstance(module, tuple):
+        module, *extra_modules = module
+        extra_fields = []
+        for extra_module in extra_modules:
+            s_extra = Source(module=extra_module)
+            extra_fields.extend(s_extra.get_fields())
+    else:
+        extra_fields = None
     s = Source(module=module)
     name = module.__name__.lower()
-    docs = generate_docs(name, s)
+    docs = generate_docs(name, s, extra_fields=extra_fields)
     title = name.replace("_", " ").title()
     page_data = docpage(f"/docs/api-reference/{name}/", title)(docs)
     page_data.title = page_data.title.split("·")[0].strip()