Merge branch 'main' of https://github.com/reflex-dev/reflex-web into carlos/update-blog-page

Author: carlosabadia

pcweb/components/icons/icons.py

@@ -538,6 +538,8 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.25C9.37459 8.25 6.96692 9.01746 5.19692 10.2958C3.42791 11.5734 2.25 13.4037 2.25 15.5C2.25 17.5963 3.42791 19.4266 5.19692 20.7042C6.96692 21.9825 9.37459 22.75 12 22.75C14.6254 22.75 17.0331 21.9825 18.8031 20.7042C20.5721 19.4266 21.75 17.5963 21.75 15.5C21.75 13.4037 20.5721 11.5734 18.8031 10.2958C17.0331 9.01746 14.6254 8.25 12 8.25ZM7.90846 17.289C8.16308 16.9623 8.63434 16.9038 8.96106 17.1585C9.82307 17.8302 10.8715 18.2199 12 18.2199C13.1286 18.2199 14.177 17.8302 15.039 17.1585C15.3657 16.9038 15.837 16.9623 16.0916 17.289C16.3462 17.6157 16.2878 18.087 15.9611 18.3416C14.8528 19.2053 13.4839 19.7199 12 19.7199C10.5162 19.7199 9.14724 19.2053 8.03901 18.3416C7.71229 18.087 7.65385 17.6157 7.90846 17.289ZM9 12C8.17157 12 7.5 12.6716 7.5 13.5C7.5 14.3284 8.17157 15 9 15H9.00897C9.8374 15 10.509 14.3284 10.509 13.5C10.509 12.6754 9.82084 12 9 12ZM14.991 12C14.1626 12 13.491 12.6716 13.491 13.5C13.491 14.3284 14.1626 15 14.991 15H15C15.8284 15 16.5 14.3284 16.5 13.5C16.5 12.6754 15.8119 12 14.991 12Z" fill="currentColor"></path>
 </svg>"""
 
+markdown = """<svg width="27" height="16" viewBox="0 0 27 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M24.337 0q-.027 0-.052.026H2.168q-.47 0-.875.22Q.888.469.627.832q-.444.676-.34 1.48v11.975q.027.467.288.844t.626.584q.653.365 1.437.26V16l22.012-.026a1.63 1.63 0 0 0 .849-.286q.378-.259.587-.623.366-.624.261-1.429h.026l-.026-11.922a1.6 1.6 0 0 0-.287-.818 2.2 2.2 0 0 0-.626-.61A2.6 2.6 0 0 0 24.336 0m-.105 1.247h.053q.314 0 .522.13a.6.6 0 0 1 .222.168q.065.091.065.247l.026 11.844v.078q.052.415-.13.753a.6.6 0 0 1-.17.195.42.42 0 0 1-.248.065l-21.934.026h-.079a1.14 1.14 0 0 1-.73-.13.6.6 0 0 1-.223-.168.4.4 0 0 1-.065-.247V2.312l-.026-.104a.9.9 0 0 1 .143-.65q.196-.285.483-.285h21.856zM4.048 3.767v8.493h2.506V7.377l2.507 3.116 2.507-3.116v4.883h2.507V3.766h-2.507L9.06 6.883 6.554 3.766zm14.414 0V8.13h-2.507l3.76 4.13 3.76-4.13h-2.507V3.766z" fill="currentColor"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h27v16H0z"/></clipPath></defs></svg>"""
+
 ICONS = {
     # Socials
     "github": github,
@@ -621,6 +623,7 @@
     "linkedin_blog": linkedin_blog,
     "link_blog": link_blog,
     "reddit_blog": reddit_blog,
+    "markdown": markdown,
 }
 
 

pcweb/pages/blog/page.py

@@ -180,7 +180,7 @@ def more_posts(current_post: dict) -> rx.Component:
 def page(document, route) -> rx.Component:
     """Create a page."""
     meta = document.metadata
-    toc = get_toc(document, route)
+    toc, _ = get_toc(document, route)
     page_url = f"{REFLEX_URL.strip('/')}{route}"
     return rx.el.section(
         rx.el.article(

pcweb/pages/docs_landing/views/hero.py

@@ -11,7 +11,7 @@ def hero() -> rx.Component:
         rx.el.div(
             rx.el.p(
                 "About Reflex",
-                class_name="text-sm font-[525] text-m-slate-10 dark:text-m-slate-6",
+                class_name="text-sm font-[525] text-primary-10 dark:text-m-slate-6",
             ),
             rx.el.h1(
                 "Reflex Documentation",

pcweb/templates/docpage/docpage.py

@@ -9,10 +9,11 @@
 import reflex as rx
 import reflex_ui as ui
 from reflex.components.radix.themes.base import LiteralAccentColor
+from reflex.experimental.client_state import ClientStateVar
 from reflex.utils.format import to_snake_case, to_title_case
 
-from pcweb.components.button import button
 from pcweb.components.icons.icons import get_icon
+from pcweb.components.marketing_button import button as marketing_button
 from pcweb.route import Route, get_path
 from pcweb.styles.colors import c_color
 
@@ -156,8 +157,8 @@ def footer_link_flex(heading: str, links):
 
 def thumb_card(score: int, icon: str) -> rx.Component:
     return rx.el.button(
-        rx.icon(
-            tag=icon,
+        ui.icon(
+            icon,
             color=rx.cond(
                 FeedbackState.score == score, c_color("slate", 11), c_color("slate", 9)
             ),
@@ -173,53 +174,39 @@ def thumb_card(score: int, icon: str) -> rx.Component:
 
 def thumbs_cards() -> rx.Component:
     return rx.hstack(
-        thumb_card(1, "thumbs-up"),
-        thumb_card(0, "thumbs-down"),
+        thumb_card(1, "ThumbsUpIcon"),
+        thumb_card(0, "ThumbsDownIcon"),
         gap="8px",
     )
 
 
 def feedback_content() -> rx.Component:
-    return rx.box(
-        rx.box(
-            rx.text(
-                "Send feedback",
-                class_name="font-md text-slate-11",
-            ),
+    return rx.el.div(
+        rx.el.div(
             rx.form(
-                rx.box(
-                    rx.el.textarea(
+                rx.el.div(
+                    ui.textarea(
                         name="feedback",
                         placeholder="Write a comment…",
                         type="text",
                         max_length=500,
                         enter_key_submit=True,
                         resize="vertical",
                         required=True,
-                        class_name="w-full h-full p-2 text-slate-11 font-small bg-white-1 border border-slate-4 rounded-[10px] max-h-[300px] min-h-[72px] outline-none overflow-y-auto placeholder-slate-9 focus:border-violet-9 focus:border-1",
                     ),
                     thumbs_cards(),
-                    rx.el.input(
+                    ui.input(
                         name="email",
                         type="email",
                         placeholder="Contact email (optional)",
                         max_length=100,
-                        class_name="w-full h-full p-2 text-slate-11 font-small bg-white-1 border border-slate-4 rounded-[10px] box-border outline-none placeholder-slate-9 focus:border-violet-9 focus:border-1",
                     ),
-                    rx.box(
-                        rx.popover.close(
-                            button(
-                                "Send",
-                                type="submit",
-                            )
-                        ),
-                        rx.popover.close(
-                            button(
-                                "Cancel",
-                                variant="secondary",
-                            )
-                        ),
-                        class_name="flex flex-row gap-4 justify-between items-center",
+                    ui.popover.close(
+                        ui.button(
+                            "Send feedback",
+                            type="submit",
+                            class_name="w-full",
+                        )
                     ),
                     class_name="w-full gap-4 flex flex-col",
                 ),
@@ -229,48 +216,102 @@ def feedback_content() -> rx.Component:
             ),
             class_name="flex flex-col gap-4 w-full",
         ),
-        class_name="rounded-[26px] bg-white-1 w-[341px] max-h-[564px] shadow-large h-auto p-4",
+        class_name="p-2",
     )
 
 
 def feedback_button() -> rx.Component:
     thumb_cn = " flex flex-row items-center justify-center gap-2 text-slate-9 whitespace-nowrap border border-slate-5 bg-slate-1 shadow-large cursor-pointer transition-bg hover:bg-slate-3 font-small"
-    return rx.popover.root(
-        rx.box(
-            rx.popover.trigger(
-                rx.box(
-                    rx.icon(tag="thumbs-up", size=15, class_name="!text-slate-9"),
-                    rx.text(
-                        "Yes",
+    return ui.popover.root(
+        ui.popover.trigger(
+            render_=rx.el.div(
+                rx.el.button(
+                    ui.icon("ThumbsUpIcon"),
+                    "Yes",
+                    type="button",
+                    class_name=ui.cn(
+                        "w-full gap-2 border-r-0 px-3 py-0.5 rounded-[20px_0_0_20px]",
+                        thumb_cn,
                     ),
-                    class_name="w-full gap-2 border-r-0 px-3 py-0.5 rounded-[20px_0_0_20px]"
-                    + thumb_cn,
+                    aria_label="Yes",
+                    on_click=FeedbackState.set_score(1),
                 ),
-                custom_attrs={"role": "button"},
-                aria_label="Yes",
-                on_click=FeedbackState.set_score(1),
-            ),
-            rx.popover.trigger(
-                rx.box(
-                    rx.icon(tag="thumbs-down", size=15, class_name="!text-slate-9"),
-                    rx.text(
-                        "No",
+                rx.el.button(
+                    ui.icon("ThumbsDownIcon"),
+                    "No",
+                    type="button",
+                    class_name=ui.cn(
+                        "w-full gap-2 border-r-0 px-3 py-0.5 rounded-[0_20px_20px_0]",
+                        thumb_cn,
                     ),
-                    class_name="w-full gap-2 px-3 py-0.5 rounded-[0_20px_20px_0]"
-                    + thumb_cn,
+                    aria_label="No",
+                    on_click=FeedbackState.set_score(0),
                 ),
-                custom_attrs={"role": "button"},
-                aria_label="No",
-                on_click=FeedbackState.set_score(0),
+                class_name="w-full lg:w-auto items-center flex flex-row",
             ),
-            class_name="w-full lg:w-auto items-center flex flex-row",
         ),
-        rx.popover.content(
-            feedback_content(),
-            align="start",
-            class_name="border-none left-0 lg:left-[-255px] origin-bottom lg:origin-bottom-right !p-0 overflow-visible !bg-transparent shadow-none",
-            avoid_collisions=True,
+        ui.popover.portal(
+            ui.popover.positioner(
+                ui.popover.popup(
+                    render_=feedback_content(),
+                ),
+            ),
+        ),
+    )
+
+
+def feedback_button_toc() -> rx.Component:
+    return ui.popover(
+        trigger=marketing_button(
+            ui.icon("ThumbsUpIcon"),
+            "Send feedback",
+            variant="ghost",
+            size="sm",
+            type="button",
+            on_click=FeedbackState.set_score(1),
+            class_name="justify-start text-m-slate-7 dark:text-m-slate-6",
         ),
+        content=feedback_content(),
+    )
+
+
+@rx.memo
+def copy_to_markdown(text: str) -> rx.Component:
+    copied = ClientStateVar.create("is_copied", default=False, global_ref=False)
+    return marketing_button(
+        rx.cond(
+            copied.value,
+            ui.icon(
+                "CheckmarkCircle02Icon",
+            ),
+            get_icon("markdown", class_name="[&_svg]:h-4 [&_svg]:w-auto"),
+        ),
+        "Copy to markdown",
+        type="button",
+        size="sm",
+        variant="ghost",
+        class_name="justify-start text-m-slate-7 dark:text-m-slate-6",
+        on_click=[
+            rx.call_function(copied.set_value(True)),
+            rx.set_clipboard(text),
+        ],
+        on_mouse_down=rx.call_function(copied.set_value(False)).debounce(1500),
+    )
+
+
+def ask_ai_chat() -> rx.Component:
+    from pcweb.pages.docs import ai_builder as ai_builder_pages
+
+    return rx.el.a(
+        marketing_button(
+            ui.icon("AiChat02Icon"),
+            "Ask AI about this page",
+            size="sm",
+            variant="ghost",
+            class_name="justify-start text-m-slate-7 dark:text-m-slate-6",
+            native_button=False,
+        ),
+        to=ai_builder_pages.integrations.mcp_overview.path,
     )
 
 
@@ -474,11 +515,11 @@ def get_toc(source, href, component_list=None):
     env["__xd"] = xd
 
     # Get the content of the document.
-    source = source.content
+    doc_content = source.content
 
     # Get the blocks in the source code.
     # Note: we must use reflex-web's special flexdown instance xd here - it knows about all custom block types (like DemoBlock)
-    blocks = xd.get_blocks(source, href)
+    blocks = xd.get_blocks(doc_content, href)
 
     content_pieces = []
     for block in blocks:
@@ -502,7 +543,7 @@ def get_toc(source, href, component_list=None):
         headings.append((1, "API Reference"))
     for component_tuple in component_list:
         headings.append((2, component_tuple[1]))
-    return headings
+    return headings, doc_content
 
 
 def docpage(
@@ -617,13 +658,21 @@ def wrapper(*args, **kwargs) -> rx.Component:
                 links.append(rx.fragment())
 
             toc = []
+            doc_content = None
             if not isinstance(contents, rx.Component):
                 comp = contents(*args, **kwargs)
             else:
                 comp = contents
 
-            if isinstance(comp, tuple):
-                toc, comp = comp
+            if isinstance(comp, tuple) and len(comp) == 2:
+                first, second = comp
+                # Check if first is (toc, doc_content) from get_toc
+                if isinstance(first, tuple) and len(first) == 2:
+                    toc, doc_content = first
+                    comp = second
+                else:
+                    # Legacy format: (toc, comp)
+                    toc, comp = first, second
 
             show_right_sidebar = right_sidebar and len(toc) >= 2
             return rx.box(
@@ -715,9 +764,18 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                         )
                                         for level, text in toc
                                     ],
-                                    class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:shadow-[1.5px_0_0_0_var(--m-slate-9)_inset]",
+                                    id="toc-navigation",
+                                    class_name="flex flex-col gap-y-1 list-none shadow-[1.5px_0_0_0_var(--m-slate-4)_inset] dark:shadow-[1.5px_0_0_0_var(--m-slate-9)_inset] max-h-[80vh]",
+                                ),
+                                rx.el.div(
+                                    feedback_button_toc(),
+                                    copy_to_markdown(text=doc_content)
+                                    if doc_content
+                                    else None,
+                                    ask_ai_chat(),
+                                    class_name="flex flex-col mt-1.5 justify-start",
                                 ),
-                                class_name="flex flex-col justify-start gap-y-4 max-h-[80vh] overflow-y-auto sticky top-4",
+                                class_name="flex flex-col justify-start gap-y-4 overflow-y-auto sticky top-4",
                             ),
                             class_name=(
                                 "w-full h-full"
@@ -727,7 +785,6 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                     " mt-[90px]",
                                 )
                             ),
-                            id="toc-navigation",
                         ),
                         class_name=(
                             "w-[240px] h-screen sticky top-0 shrink-0 hidden xl:block"