ENG-8769: Update AI Builder Docs

docs/ai_builder/app_lifecycle/copy_app.md

@@ -12,10 +12,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/app_lifecycle/copy_light.webp",
-                    "/ai_builder/app_lifecycle/copy_dark.webp",
-                ),
+                src="/ai_builder/app_lifecycle/copy_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
@@ -33,7 +30,7 @@ rx.el.div(render_image())
 
 ## How to Copy an App
 
-1. In the Reflex Build workspace, click the **Copy** button (bottom-right corner).
+1. In the Reflex Build workspace, click on the arrow down icon next to the deploy button and click on the **Copy** button. You can also do this in the Settings tab.
 2. Reflex Build will create a new app in your workspace with the same:
    - Code files and components
    - State and configuration

docs/ai_builder/app_lifecycle/deploy_app.md

@@ -6,7 +6,7 @@ import reflex as rx
 
 It is easy to deploy your app into production from Reflex Build to Reflex Cloud.
 
-Simply click the `Deploy` button in the bottom right corner of Reflex Build, as shown below:
+Simply click the `Deploy` button in the top right corner of Reflex Build, as shown below:
 
 
 
@@ -18,10 +18,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/app_lifecycle/deploy_light.webp",
-                    "/ai_builder/app_lifecycle/deploy_dark.webp",
-                ),
+                src="/ai_builder/app_lifecycle/deploy_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),

docs/ai_builder/app_lifecycle/download_app.md

@@ -13,10 +13,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/app_lifecycle/download_light.webp",
-                    "/ai_builder/app_lifecycle/download_dark.webp",
-                ),
+                src="/ai_builder/app_lifecycle/download_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
@@ -34,9 +31,8 @@ rx.el.div(render_image())
 
 ## How to Download
 
-1. In the AI Builder workspace, go to the **bottom-right corner**.
-2. Click the **Download** button.
-3. A `.zip` file will be generated containing your entire Reflex app, including:
+1. In the AI Builder workspace, click on the arrow down icon next to the deploy button and click on the **Download** button. You can also do this in the Settings tab.
+2. A `.zip` file will be generated containing your entire Reflex app, including:
    - Source code (`.py` files, components, state, etc.)
    - `requirements.txt` with dependencies
    - Config files (`rxconfig.py`, `.env`, etc.)

docs/ai_builder/app_lifecycle/fork_app.md

@@ -11,10 +11,7 @@ from reflex_image_zoom import image_zoom
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/overview/fork_template_light.webp",
-                "/ai_builder/overview/fork_template_dark.webp",
-            ),
+            src="/ai_builder/overview/fork_template_light.avif",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -28,7 +25,7 @@ rx.el.div(
 ## How to Fork an App
 
 1. Browse or open an app you’d like to use as a starting point.
-2. Click the **Fork** button in the app’s bottom right corner.
+2. Click the **Fork** button in the app’s top right corner.
 3. The AI Builder will create a **copy of the app** in your workspace.
 4. You can now **edit, customize, and expand** your forked app independently of the original.
 

docs/ai_builder/app_lifecycle/general.md

@@ -11,10 +11,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/app_lifecycle/general_light.webp",
-                    "/ai_builder/app_lifecycle/general_dark.webp",
-                ),
+                src="/ai_builder/app_lifecycle/general_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
@@ -33,16 +30,25 @@ rx.el.div(render_image())
 
 ## How to Access Settings
 
-1. In the AI Builder workspace, click the **Settings** icon located at the bottom-left of the screen, inside the chat box area.
-2. This will open the **General** tab to see your app’s main settings.
+1. In the AI Builder workspace, on the top bar click the more 3 dots icon and then click the **Settings** tab.
+2. This will open the **Settings** tab to see your app’s main settings.
 
 ## What You Can Do
 
 - **Change App Name**
   Update the name of your app to reflect its purpose or version.
 
+- **Change App Visibility**
+  Update the visibility of your app to public or private.
+
 - **View App ID**
   Find the unique identifier for your app, which can be used for integrations or support.
 
+- **Fork App**
+  Fork your app to create a copy of it.
+
+-- **Download App**
+  Download your app to your local machine.
+
 - **Delete App**
   Permanently remove an app you no longer need. **Warning:** This action cannot be undone.

docs/ai_builder/app_lifecycle/share_app.md

@@ -11,10 +11,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/app_lifecycle/share_light.webp",
-                    "/ai_builder/app_lifecycle/share_dark.webp",
-                ),
+                src="/ai_builder/app_lifecycle/share_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
@@ -32,7 +29,7 @@ rx.el.div(render_image())
 
 ## How to Share
 
-1. In the AI Builder workspace, click the **Share** button (bottom-right corner).
+1. In the AI Builder workspace, click on the arrow down icon next to the deploy button and click on the **Share** button.
 2. A popup will appear with a **shareable link**.
 3. Copy the link and send it to teammates, collaborators, or stakeholders.
 

docs/ai_builder/features/connect_to_github.md

@@ -14,10 +14,14 @@ The Github integration is important to make sure that you don't lose your progre
 
 
 ```python eval
-rx.image(
-    src="/ai_builder/connecting_to_github.gif",
-    height="auto",
-    padding_bottom="2rem",
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/connecting_to_github.avif",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+    ),
 )
 ```
 
@@ -32,5 +36,14 @@ The GitHub integration allows you to:
 The commit history is a great way to see the changes that you have made to your app. You can also revert to previous versions of your app from here.
 
 ```python eval
-image_zoom(rx.image(src="/ai_builder/github_commit_history.png"))
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/github_commit_history.avif",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+    ),
+)
 ```
+

docs/ai_builder/features/editor_modes.md

@@ -11,10 +11,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/features/diff_light.webp",
-                    "/ai_builder/features/diff_dark.webp",
-                ),
+                src="/ai_builder/features/diff_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),

docs/ai_builder/features/image_as_prompt.md

@@ -2,20 +2,27 @@
 
 ```python exec
 import reflex as rx
+from reflex_image_zoom import image_zoom
 ```
 
 Uploading an image (screenshot) of a website (web) app of what you are looking to build gives the AI really good context. 
 
 *This is the recommended way to start an app generation.*
 
 
-Below is a GIF showing how to upload an image to the AI Builder:
+Below is an image showing how to upload an image to the AI Builder, you can click on the "Attach" button to upload an image, drag and drop an image, or paste an image from the clipboard:
 
 ```python eval
-rx.image(
-    src="/ai_builder/image_upload.gif",
-    height="auto",
-    padding_bottom="2rem",
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/image_upload.avif",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
 )
 ```
 

docs/ai_builder/features/installing_external_packages.md

@@ -2,6 +2,7 @@
 
 ```python exec
 import reflex as rx
+from reflex_image_zoom import image_zoom
 ```
 
 Reflex Build allows you to install external python packages to use in your app. This is useful if you want to use a package that is not included in the default Reflex Build environment. Examples might include `openai`, `langsmith`, `requests`, etc.
@@ -15,23 +16,35 @@ There are two ways to install external packages:
 
 Enter the name of the package you want to install in the chat interface. The AI will then install the package for you.
 
+
 ```python eval
-rx.image(
-    src="/ai_builder/external_packages_input.gif",
-    height="auto",
-    padding_bottom="2rem",
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/external_packages_input.avif",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
 )
 ```
 
-
 ## Installing through the requirements.txt file
 
 Add the package to the `requirements.txt` file and then save the app. This will install the package in your app's environment and recompile your app.
 
 ```python eval
-rx.image(
-    src="/ai_builder/external_packages_requirements.gif",
-    height="auto",
-    padding_bottom="2rem",
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/external_packages_requirements.avif",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
 )
 ```

docs/ai_builder/features/knowledge.md

@@ -10,10 +10,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/features/knowledge_light.webp",
-                    "/ai_builder/features/knowledge_dark.webp",
-                ),
+                src="/ai_builder/features/knowledge_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
@@ -31,7 +28,7 @@ rx.el.div(render_image())
 
 ## How to Add Knowledge
 
-1. In the AI Builder workspace, go to the **Knowledge** section by clicking the **`Context`** button in the bottom bar, and then on the top bar click the **`Knowledge`** tab.
+1. In the AI Builder top bar, click the more 3 dots icon and then click the **`Knowledge`** tab.
 2. Enter your rule, guideline, or context description.
 3. Save the entry. The AI Builder will automatically use it when generating apps.
 

docs/ai_builder/features/restore_checkpoint.md

@@ -11,10 +11,7 @@ from reflex_image_zoom import image_zoom
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/features/restore_light.webp",
-                "/ai_builder/features/restore_dark.webp",
-            ),
+            src="/ai_builder/features/restore_light.avif",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/features/secrets.md

@@ -11,10 +11,7 @@ def render_image():
     return rx.el.div(
         image_zoom(
             rx.image(
-                src=rx.color_mode_cond(
-                    "/ai_builder/features/secrets_light.webp",
-                    "/ai_builder/features/secrets_dark.webp",
-                ),
+                src="/ai_builder/features/secrets_light.avif",
                 class_name="p-2 rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
@@ -58,10 +55,7 @@ from reflex_image_zoom import image_zoom
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/features/secret_bulk_light.webp",
-                "/ai_builder/features/secret_bulk_dark.webp",
-            ),
+            src="/ai_builder/features/secret_bulk_light.avif",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/files.md

@@ -1,8 +1,11 @@
+```python exec
+from pcweb.pages.docs import ai_builder
+```
 # Files
 
 To upload a file to the AI Builder click the `📎 Attach` button and select the file you want to upload from your computer. You can also drag and drop files directly into the chat window.
 
-This section does not cover uploading images. Check out ..... to learn more about uploading images.
+This section does not cover uploading images. Check out [Images]({ai_builder.images.path}) to learn more about uploading images.
 
 ```md alert
 ## Supported File Types

docs/ai_builder/images.md

@@ -22,7 +22,7 @@ The AI Builder currently supports the following image types for upload and proce
 
 ## Upload an image to be used within the app
 
-If you want to upload an image to be used within the app, such as a company logo, then you can manually upload it to the `assets/` folder within the `code` tab, as shown below.
+If you want to upload an image to be used within the app, such as a company logo, then you can manually upload it to the `assets/` folder within the `code` tab. Drag and drop the image into the `assets/` folder.
 
 ```python exec
 import reflex as rx
@@ -33,7 +33,7 @@ from reflex_image_zoom import image_zoom
 rx.el.div(
     image_zoom(
         rx.image(
-            src="/ai_builder/add_images_to_assets.webp",
+            src="/ai_builder/add_images_to_assets.avif",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/overview/templates.md

@@ -11,10 +11,7 @@ from reflex_image_zoom import image_zoom
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/overview/templates_light.webp",
-                "/ai_builder/overview/templates_dark.webp",
-            ),
+            src="/ai_builder/overview/templates_light.avif",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -32,10 +29,7 @@ To use a template, simply click the template and then in the bottom right corner
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/overview/fork_template_light.webp",
-                "/ai_builder/overview/fork_template_dark.webp",
-            ),
+            src="/ai_builder/overview/fork_template_light.avif",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),