new: message, bubble, attachment comps.

app/registry/components.py

@@ -37,6 +37,10 @@
         "files": ["components/ui/accordion.py"],
         "dependencies": ["button", "hugeicon", "base_ui"],
     },
+    "attachment": {
+        "files": ["components/ui/attachment.py"],
+        "dependencies": ["button", "twmerge"],
+    },
     "autocomplete": {
         "files": ["components/ui/autocomplete.py"],
         "dependencies": ["twmerge"],
@@ -53,6 +57,10 @@
         "files": ["components/ui/breadcrumb.py"],
         "dependencies": [],
     },
+    "bubble": {
+        "files": ["components/ui/bubble.py"],
+        "dependencies": ["twmerge"],
+    },
     "button": {
         "files": ["components/ui/button.py"],
         "dependencies": ["others_icons", "component"],
@@ -117,6 +125,10 @@
         "files": ["components/ui/metric.py"],
         "dependencies": ["twmerge", "component"],
     },
+    "message": {
+        "files": ["components/ui/message.py"],
+        "dependencies": ["twmerge"],
+    },
     "popover": {
         "files": ["components/ui/popover.py"],
         "dependencies": ["twmerge", "base_ui"],

app/templates/docsidebar.py

@@ -28,6 +28,8 @@
     }
 """
 
+NEW_COMP = ["Attachment", "Bubble", "Marker", "Message", "Shimmer", "Scroll Fade"]
+
 
 @dataclass
 class SidebarSection:
@@ -49,7 +51,7 @@ class SidebarSection:
 def create_menu_item(data: dict):
     """Create a single menu item."""
 
-    return button(
+    link = (
         rx.el.a(
             rx.el.p(data["title"], class_name="cursor-pointer"),
             to=f"/{data['url']}",
@@ -61,14 +63,45 @@ def create_menu_item(data: dict):
             href=f"/{data['url']}",
             text_decoration="none",
             reload_document=True,
+        )
+    )
+
+    return button(
+        link,
+        rx.cond(
+            data["title"] in NEW_COMP,
+            rx.el.div(class_name="size-2 rounded-full bg-blue-500"),
         ),
         variant="ghost",
         size="sm",
-        class_name="w-fit",
+        class_name="w-fit flex items-center",
         id=data["url"],
     )
 
 
+# def create_menu_item(data: dict):
+#     """Create a single menu item."""
+
+#     return button(
+#         rx.el.a(
+#             rx.el.p(data["title"], class_name="cursor-pointer"),
+#             to=f"/{data['url']}",
+#             text_decoration="none",
+#         )
+#         if data["url"] != "llms.txt"
+#         else rx.el.a(
+#             rx.el.p(data["title"], class_name="cursor-pointer"),
+#             href=f"/{data['url']}",
+#             text_decoration="none",
+#             reload_document=True,
+#         ),
+#         variant="ghost",
+#         size="sm",
+#         class_name="w-fit",
+#         id=data["url"],
+#     )
+
+
 def create_sidebar_menu_items(routes: List[dict]):
     """Create menu items from routes."""
     return rx.el.div(

app/www/anatomy.py

@@ -1,6 +1,21 @@
 # app/www/anatomy.py
 
 ANATOMY = {
+    "bubble": """bubble.root(
+    bubble.content(),
+    bubble.reactions(),
+)""",
+    "attachment": """attachment.root(
+    attachment.media(),
+    attachment.content(
+        attachment.title(),
+        attachment.description(),
+    ),
+    attachment.actions(
+        attachment.action()
+    ),
+)
+""",
     "accordion": """accordion.root(
     accordion.item(
         accordion.header(
@@ -44,6 +59,16 @@
         ),
     ),
 )""",
+    "message": """message.group(
+    message.root(
+        message.avatar(),
+        message.content(
+            message.header(),
+            message.footer(),
+        ),
+    ),
+)
+""",
     "button": """button()""",
     "card": """card.root(
     card.header(

app/www/library/examples/attachment_group.py

@@ -0,0 +1,48 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.attachment import attachment
+
+items = [
+    {"name": "briefing-notes.pdf", "meta": "PDF · 1.4 MB", "type": "file"},
+    {
+        "name": "workspace.png",
+        "meta": "PNG · 820 KB",
+        "src": "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
+        "type": "image",
+    },
+    {"name": "customers.csv", "meta": "CSV · 18 KB", "type": "file"},
+    {"name": "renderer.tsx", "meta": "TSX · 12 KB", "type": "file"},
+]
+
+
+def attachment_group_demo():
+    return rx.el.div(
+        attachment.group(
+            rx.foreach(
+                items,
+                lambda item: attachment.root(
+                    rx.cond(
+                        item["type"] == "image",
+                        attachment.media(
+                            rx.el.img(src=item["src"], alt=item["name"]),
+                            variant="image",
+                        ),
+                        attachment.media(hi("File02Icon")),
+                    ),
+                    attachment.content(
+                        attachment.title(item["name"]),
+                        attachment.description(item["meta"]),
+                    ),
+                    attachment.actions(
+                        attachment.action(
+                            hi("Cancel01Icon"), aria_label=f"Remove {item['name']}"
+                        )
+                    ),
+                    class_name="w-64",
+                ),
+            ),
+            class_name="full",
+        ),
+        class_name="mx-auto w-full max-w-sm py-12",
+    )

app/www/library/examples/attachment_with_image.py

@@ -0,0 +1,61 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.attachment import attachment
+
+images = [
+    {
+        "name": "workspace.png",
+        "meta": "PNG · 820 KB",
+        "src": "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
+        "alt": "Workspace",
+    },
+    {
+        "name": "desk-reference.jpg",
+        "meta": "JPG · 1.1 MB",
+        "src": "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80",
+        "alt": "Desk",
+    },
+    {
+        "name": "office-reference.jpg",
+        "meta": "JPG · 940 KB",
+        "src": "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80",
+        "alt": "Office",
+    },
+]
+
+
+def attachment_image_demo():
+    return rx.el.div(
+        attachment.group(
+            rx.foreach(
+                images,
+                lambda image: attachment.root(
+                    attachment.trigger(
+                        link=True,
+                        href=image["src"],
+                        target="_blank",
+                        rel="noreferrer",
+                        aria_label=f"Open {image['name']}",
+                    ),
+                    attachment.media(
+                        rx.el.img(src=image["src"], alt=image["alt"]),
+                        variant="image",
+                    ),
+                    attachment.content(
+                        attachment.title(image["name"]),
+                        attachment.description(image["meta"]),
+                    ),
+                    attachment.actions(
+                        attachment.action(
+                            hi("Cancel01Icon"),
+                            aria_label=f"Remove {image['name']}",
+                        )
+                    ),
+                    orientation="vertical",
+                ),
+            ),
+            class_name="w-full",
+        ),
+        class_name="mx-auto w-full max-w-sm py-12",
+    )

app/www/library/examples/attachment_with_sizes.py

@@ -0,0 +1,33 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.attachment import attachment
+
+
+def attachment_sizes_demo():
+    return rx.el.div(
+        attachment.root(
+            attachment.media(hi("File02Icon")),
+            attachment.content(
+                attachment.title("Default attachment"),
+                attachment.description("PDF · 2.4 MB"),
+            ),
+            size="default",
+        ),
+        attachment.root(
+            attachment.media(hi("File02Icon")),
+            attachment.content(
+                attachment.title("Small attachment"),
+                attachment.description("PDF · 2.4 MB"),
+            ),
+            size="sm",
+        ),
+        attachment.root(
+            attachment.media(hi("File02Icon")),
+            attachment.content(
+                attachment.title("Extra small attachment"),
+            ),
+            size="xs",
+        ),
+        class_name="mx-auto w-full max-w-sm py-12 flex flex-col gap-y-4",
+    )

app/www/library/examples/attachment_with_states.py

@@ -0,0 +1,78 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.attachment import attachment
+from components.ui.spinner import spinner
+
+
+def attachment_states_demo():
+    return rx.el.div(
+        attachment.root(
+            attachment.media(hi("Clock01Icon")),
+            attachment.content(
+                attachment.title("selected-file.pdf"),
+                attachment.description("Ready to upload"),
+            ),
+            attachment.actions(
+                attachment.action(
+                    hi("Cancel01Icon"), aria_label="Remove selected-file.pdf"
+                )
+            ),
+            state="idle",
+        ),
+        attachment.root(
+            attachment.media(spinner()),
+            attachment.content(
+                attachment.title(
+                    "design-system.zip",
+                    class_name="shimmer",
+                ),
+                attachment.description("Uploading · 64%"),
+            ),
+            attachment.actions(
+                attachment.action(hi("Cancel01Icon"), aria_label="Cancel upload")
+            ),
+            state="uploading",
+        ),
+        attachment.root(
+            attachment.media(hi("File02Icon")),
+            attachment.content(
+                attachment.title("market-research.pdf"),
+                attachment.description("Processing document"),
+            ),
+            attachment.actions(
+                attachment.action(
+                    hi("Cancel01Icon"), aria_label="Remove market-research.pdf"
+                )
+            ),
+            state="processing",
+        ),
+        attachment.root(
+            attachment.media(hi("FileExclamationPointIcon")),
+            attachment.content(
+                attachment.title("financial-model.xlsx"),
+                attachment.description("Upload failed. Try again."),
+            ),
+            attachment.actions(
+                attachment.action(hi("RefreshIcon"), aria_label="Retry upload"),
+                attachment.action(
+                    hi("Cancel01Icon"), aria_label="Remove financial-model.xlsx"
+                ),
+            ),
+            state="error",
+        ),
+        attachment.root(
+            attachment.media(hi("Tick02Icon")),
+            attachment.content(
+                attachment.title("uploaded-report.pdf"),
+                attachment.description("Uploaded · 1.8 MB"),
+            ),
+            attachment.actions(
+                attachment.action(
+                    hi("Cancel01Icon"), aria_label="Remove uploaded-report.pdf"
+                )
+            ),
+            state="done",
+        ),
+        class_name="w-full mx-auto max-w-sm py-12 flex flex-col gap-y-4",
+    )