more ai-related docs

Author: LineIndent

assets/ai_builder/features/diff_dark.png

@@ -20,7 +20,6 @@ platform, the IDE empowers users to stay focused and productive without ever lea
 
 ## IDE Features
 
-
 ### Real-Time Editing
 
 Changes you make in the editor are immediately reflected across your project—no manual saves or rebuilds required. Stay in flow and iterate faster.

assets/ai_builder/features/diff_light.png

@@ -0,0 +1,92 @@
+# Editor Modes
+
+The AI Builder includes a powerful dual-mode editor that lets you view and edit your application code while tracking changes made by the AI. You can seamlessly switch between **Editor Mode** for manual code editing and **Diff Mode** for reviewing AI-generated changes.
+
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+def render_image():
+    return rx.el.div(
+        image_zoom(
+            rx.image(
+                src=rx.color_mode_cond(
+                    "/ai_builder/features/diff_light.png",
+                    "/ai_builder/features/diff_dark.png",
+                ),
+                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",
+    )
+```
+
+```python eval
+
+rx.el.div(render_image())
+
+```
+## Modes: Editor vs Diff
+
+### Editor Mode
+The standard code editor where you can:
+- **Write and modify code** directly in the interface
+- **Navigate through files** using the file tree
+- **Make manual changes** to your application
+- **Save your modifications** which persist across sessions
+
+### Diff Mode
+A specialized view that highlights changes from the last AI prompt:
+- **Green highlights** show code additions made by the AI
+- **Red highlights** show code deletions made by the AI
+- **Side-by-side comparison** of what changed
+- **Line-by-line tracking** of modifications
+
+## Switching Between Modes
+
+### Toggle Controls
+Located in the editor toolbar, you'll find:
+- **Editor** button - Switch to normal editing mode
+- **Diff** button - Switch to change tracking mode
+
+### When to Use Each Mode
+- **Use Editor Mode when:**
+  - Making manual code changes
+  - Writing new functionality
+  - Debugging or fixing issues
+  - General code development
+
+- **Use Diff Mode when:**
+  - Reviewing what the AI changed after a prompt
+  - Understanding modifications before accepting them
+  - Tracking the impact of AI suggestions
+  - Learning from AI-generated code patterns
+
+## Understanding Diff Visualizations
+
+### Code Highlighting
+**Additions (Green):**
+- New code lines added by the AI
+- New functions, components, or logic
+- Enhanced features and improvements
+
+**Deletions (Red):**
+- Code removed by the AI
+- Replaced or refactored sections
+- Deprecated functionality
+
+### File Tree Indicators
+The file tree shows change statistics for each modified file:
+
+**Change Indicators:**
+- **`+5`** - 5 lines added to this file
+- **`-3`** - 3 lines removed from this file
+- **`+12 -8`** - 12 lines added, 8 lines removed
+- **No indicator** - File unchanged
+
+**Visual Cues:**
+- **Green `+` symbol** indicates files with additions
+- **Red `-` symbol** indicates files with deletions

assets/ai_builder/integrations/database_dark.png

@@ -1,121 +1,100 @@
-# Connecting to a Database
+# Database Integration
+
+The Database Integration allows you to connect your AI-generated applications to real databases, automatically generating schemas and enabling data-driven functionality.
 
 ```python exec
 import reflex as rx
-```
-
-Connecting to a database is critical to give your app access to real data. This section will cover how to connect to a database using the AI Builder. 
-
-To connect to a database you will need a `DB_URI`. Reflex.build currently supports `postgresql` and `mysql` databases.
-
-This is what it looks like for a Postgres database:
-
-```bash
-postgresql://username:password@hostname:port/database_name
-```
-
-```bash
-postgresql://admin:secret123@db.mycompany.com:5432/mydatabase
-```
-
-```python eval
-rx.box(height="1rem")
+from reflex_image_zoom import image_zoom
 ```
 
 ```python eval
-rx.accordion.root(
-    rx.accordion.item(
-        header="DB URI (More Details)",
-        content=rx.table.root(
-            rx.table.header(
-                rx.table.row(
-                    rx.table.column_header_cell("Component"),
-                    rx.table.column_header_cell("Example"),
-                    rx.table.column_header_cell("Description"),
-                ),
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src=rx.color_mode_cond(
+                "/ai_builder/integrations/database_light.png",
+                "/ai_builder/integrations/database_dark.png",
             ),
-            rx.table.body(
-                rx.table.row(
-                    rx.table.row_header_cell(rx.code("postgresql://")),
-                    rx.table.cell(rx.code("postgresql://")),
-                    rx.table.cell("The database ", rx.el.span("dialect", font_weight="bold"), " or driver (can also be ", 
-                                rx.code("mysql://"), ", ", rx.code("sqlite:///"), ", etc.)"),
-                ),
-                rx.table.row(
-                    rx.table.row_header_cell(rx.code("username")),
-                    rx.table.cell(rx.code("admin")),
-                    rx.table.cell("The ", rx.el.span("username", font_weight="bold"), " used to authenticate with the database"),
-                ),
-                rx.table.row(
-                    rx.table.row_header_cell(rx.code("password")),
-                    rx.table.cell(rx.code("secret123")),
-                    rx.table.cell("The ", rx.el.span("password", font_weight="bold"), " for the database user (insecure to expose this in plain text)"),
-                ),
-                rx.table.row(
-                    rx.table.row_header_cell(rx.code("hostname")),
-                    rx.table.cell(rx.code("db.mycompany.com")),
-                    rx.table.cell("The ", rx.el.span("host", font_weight="bold"), " where the database server is running"),
-                ),
-                rx.table.row(
-                    rx.table.row_header_cell(rx.code("port")),
-                    rx.table.cell(rx.code("5432")),
-                    rx.table.cell("The ", rx.el.span("port", font_weight="bold"), " the database server is listening on (default for PostgreSQL)"),
-                ),
-                rx.table.row(
-                    rx.table.row_header_cell(rx.code("database_name")),
-                    rx.table.cell(rx.code("mydatabase")),
-                    rx.table.cell("The ", rx.el.span("name", font_weight="bold"), " of the database to connect to"),
-                ),
-            ),
-            width="100%",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
         ),
+        class_name="rounded-md overflow-hidden",
     ),
-    variant="surface",
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
 )
 ```
 
-```python eval
-rx.box(height="1rem")
-```
+## Supported Databases
 
-You can also use a MySQL database. The connection string looks like this:
+- **PostgreSQL** - Recommended for production applications
+- **MySQL** - Popular open-source database
+- **SQLite** - Lightweight database, perfect for development and small applications
 
-```bash
-mysql://username:password@hostname:port/database_name
-```
+## Getting Started
 
+### Opening the Database Integration
 
+1. Navigate to your app in the AI Builder
+2. Open the **Settings drawer** (gear icon)
+3. Click on the **Integrations** tab
+4. Find and enable the **Database** integration
 
-## Connecting your Database before the app is generated
+### Connection Methods
 
-You can add your `Database URI` at the start of your generation as shown below. 
+The Database Integration offers two convenient ways to connect:
 
-```python eval
-rx.image(
-    src="/ai_builder/add_db_before_app.gif",
-    height="auto",
-    padding_bottom="2rem",
-)
-```
+#### 1. Connection Details (Recommended)
 
-Here if you wanted to build a dashboard for example we recommend a prompt as follows: 
+This user-friendly form breaks down your database connection into individual fields:
 
-`Build a dashboard around my database data`
+**For PostgreSQL and MySQL:**
+- **Database Type**: Select from dropdown (PostgreSQL/MySQL)
+- **Hostname**: Your database server address (e.g., `localhost`, `db.company.com`)
+- **Port**: Automatically filled (PostgreSQL: 5432, MySQL: 3306) or specify custom port
+- **Username**: Your database username
+- **Password**: Your database password (securely handled)
+- **Database Name**: The specific database to connect to
 
+**For SQLite:**
+- **Database Type**: Select "SQLite" from dropdown
+- **SQLite Download URL**: Either a local file path or HTTP URL to download the database file
 
+#### 2. Database URI
 
-## Connecting your Database after the app is generated
+For advanced users who prefer the traditional connection string format:
 
-You can add your `Database URI` after you've already generated an app or directly from a template that you have forked as shown below.
+**PostgreSQL:**
+```
+postgresql://username:password@hostname:port/database_name
+```
 
-```python eval
-rx.image(
-    src="/ai_builder/add_db_in_app.gif",
-    height="auto",
-    padding_bottom="2rem",
-)
+**MySQL:**
+```
+mysql://username:password@hostname:port/database_name
 ```
 
-Here if you wanted to hook up your data correctly we recommend a prompt as follows: 
+**SQLite:**
+```
+sqlite:///path/to/database.sqlite
+sqlite+https://example.com/database.sqlite
+```
 
-`Use the database I added to rewrite the dashboard to display my expense reporting data, keep the existing layout charts and structure the same`
+## Database URI Components
+
+Protocol (postgresql://) - Database type identifier
+Username (admin) - Database user credentials
+Password (secret123) - User password (kept secure)
+Hostname (db.company.com) - Server address
+Port (5432) - Connection port
+Database (mydatabase) - Target database name
+
+## Connection Process
+
+1. **Choose your method**: Use either Connection Details form or Database URI
+2. **Fill in credentials**: Provide your database connection information
+3. **Click Connect**: The system will validate and test your connection
+4. **Schema Generation**: Upon successful connection, the system automatically:
+   - Connects to your database
+   - Analyzes the database structure
+   - Generates SQLAlchemy models
+   - Makes schema available to the AI for queries

assets/ai_builder/integrations/database_light.png

@@ -20,6 +20,7 @@ def get_sidebar_items_ai_builder_overview():
                 ai_builder.features.image_as_prompt,
                 ai_builder.features.interaction_modes,
                 ai_builder.features.code_editor,
+                ai_builder.features.editor_modes,
                 ai_builder.features.installing_external_packages,
                 ai_builder.features.knowledge,
                 ai_builder.features.secrets,