diff --git a/api/08-How-To/Panels.md b/api/08-How-To/Panels.md
index 3c0468fc..552a1cca 100644
--- a/api/08-How-To/Panels.md
+++ b/api/08-How-To/Panels.md
@@ -9,7 +9,7 @@ In Phoenix Code, Panels are of two types :- `Plugin Panel` and `Bottom Panel`.
-**Bottom Panel** appears on the bottom of the screen. For Example :- *Problems* feature uses the `Bottom Panel`.
+**Bottom Panel** appears on the bottom of the screen as a tab. Multiple bottom panels share a tabbed interface where each panel gets its own tab with an icon and title. For Example :- *Git*, *Terminal*, *Problems* panel and many more use the `Bottom Panel`.
@@ -150,7 +150,7 @@ You can control the visibility and state of your plugin panel:
## Creating a Bottom Panel
Bottom panels are created similarly to plugin panels but use different methods:
-> For `Bottom Panels` creating a toolbar icon is not required.
+> For `Bottom Panels` creating a toolbar icon is not required. Each bottom panel appears as a tab in the shared tab bar.
1. **Import required modules**
```jsx
@@ -160,11 +160,21 @@ Bottom panels are created similarly to plugin panels but use different methods:
2. **Create the bottom panel**
```jsx
const bottomPanel = WorkspaceManager.createBottomPanel(
- "myextension.panel",
- $panel,
- 200,
+ "myextension.panel", // Unique ID using package-style naming
+ $panel, // jQuery object for panel content
+ undefined, // minSize (deprecated, pass undefined)
+ "My Panel", // Title shown on the tab
+ {
+ iconSvg: "path/to/icon.svg" // SVG icon for the tab
+ }
);
```
+
+ - **`title`**: The text shown on the panel's tab. If not provided, Phoenix Code uses the text from a `.toolbar .title` element inside your panel, or derives it from the panel ID.
+ - **`iconSvg`**: Path to an SVG file used as the tab icon. The icon automatically adapts to light and dark themes. If not provided, a default icon is used.
+
+> The `minSize` parameter (third argument) is deprecated and no longer used. Pass `undefined` for this parameter.
+
> For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createBottomPanel).
Full Code Example for Bottom Panel:
@@ -189,11 +199,13 @@ Full Code Example for Bottom Panel:
.attr("id", "my-extension-panel")
.html("My Bottom Panel
Hello from the panel!
");
- // Create the plugin panel
+ // Create the bottom panel
bottomPanel = WorkspaceManager.createBottomPanel(
"myextension.panel",
$panel,
- 200,
+ undefined,
+ "My Panel",
+ { iconSvg: "styles/images/panel-icon-default.svg" }
);
bottomPanel.show();
}
@@ -246,33 +258,33 @@ Bottom panels support similar state management to plugin panels:
}
```
+4. **Update Tab Title**
+ ```jsx
+ bottomPanel.setTitle("New Title");
+ ```
+
+5. **Handle Close Confirmation**
+
+ If your panel has unsaved state or running processes, you can register a handler that runs before the panel closes. Return `false` to prevent closing.
+ ```jsx
+ bottomPanel.registerOnCloseRequestedHandler(async function () {
+ if (hasUnsavedChanges) {
+ const confirmed = await showConfirmDialog("Discard changes?");
+ return confirmed; // true to close, false to cancel
+ }
+ return true;
+ });
+ ```
+
+ To programmatically close a panel while respecting its close handler, use `requestClose()`:
+ ```jsx
+ const wasClosed = await bottomPanel.requestClose();
+ ```
+
## Best Practices
1. Always use unique, package-style IDs (e.g., "yourextension.panel-name") to avoid conflicts with other extensions.
2. Save panel state (e.g., visibility, size) in preferences if needed, to restore state when the extension is reloaded.
-Example CSS for Bottom Panel:
-
-```css
-.bottom-panel {
- background-color: #f8f9fa;
- border-top: 1px solid #ddd;
-}
-
-.bottom-panel .toolbar {
- padding: 4px 8px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: #e9ecef;
- border-bottom: 1px solid #ddd;
-}
-
-.bottom-panel .panel-content {
- padding: 8px;
- overflow-y: auto;
-}
-```
-
> For more information about the WorkSpace Manager API, refer to the [Phoenix Code API documentation](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager).
\ No newline at end of file
diff --git a/docs/07-Pro Features/01-ai-chat.md b/docs/07-Pro Features/01-ai-chat.md
new file mode 100644
index 00000000..7744a499
--- /dev/null
+++ b/docs/07-Pro Features/01-ai-chat.md
@@ -0,0 +1,93 @@
+---
+title: AI Chat
+---
+
+Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots of your Live Preview, and work alongside you as you code.
+
+> AI Chat is available only in desktop apps. Free users get a daily and monthly chat limit. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access.
+
+
+
+## Getting Started
+
+AI Chat requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform.
+
+Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically.
+
+
+
+## Opening the AI Panel
+
+Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
+
+
+
+## Sending Messages
+
+Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line.
+
+While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response.
+
+### Context
+
+Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing:
+
+- **Selection** - the file and line range you have selected in the editor
+- **Cursor** - your current line and file
+- **Live Preview** - if the Live Preview panel is open
+
+You can dismiss any of these by clicking the **x** button on the chip.
+
+## Attachments and Screenshots
+
+Click the **paperclip button** to attach files from your project. You can attach images (PNG, JPG, GIF, WebP, SVG) and other files like code or documents.
+
+Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture:
+
+- **Live Preview** - your Live Preview panel (if open)
+- **Selected Element** - the currently selected element in Live Preview
+- **Full Editor** - the entire editor window
+- **Area** - a custom region you select with a crop tool
+
+## Permission Modes
+
+The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them.
+
+- **Plan** - the AI proposes a plan first. You review it and click **Approve** to proceed or **Revise** to give feedback. Good for complex tasks where you want to stay in control.
+- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands.
+- **Full Auto** - the AI works through everything without pausing. Terminal commands still ask for confirmation.
+
+
+
+## Session History
+
+Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
+
+Sessions are saved per project, so each project has its own chat history.
+
+## Undo and Restore
+
+Before the AI makes any edits, Phoenix Code creates a **restore point**. If you don't like the changes, click **Undo** on the edit summary card to revert all the files back to how they were.
+
+If the AI made changes across multiple responses, you can click **Restore to this point** on any earlier edit summary to go back to that state.
+
+
+
+## Settings
+
+Click the **gear icon** in the chat panel to open AI settings. Here you can:
+
+- Switch between AI providers
+- Add a custom API provider with your own API key and endpoint
+- Set a custom API timeout
+
+
+
+## Keyboard Shortcuts
+
+| Action | Shortcut |
+|--------|----------|
+| Send message | `Enter` |
+| New line | `Shift + Enter` |
+| Cycle permission mode | `Shift + Tab` |
+| Cancel or clear input | `Escape` |
diff --git a/docs/07-Pro Features/01-live-preview-edit.md b/docs/07-Pro Features/02-edit-mode-live-preview.md
similarity index 99%
rename from docs/07-Pro Features/01-live-preview-edit.md
rename to docs/07-Pro Features/02-edit-mode-live-preview.md
index 75c348ed..800d96e8 100644
--- a/docs/07-Pro Features/01-live-preview-edit.md
+++ b/docs/07-Pro Features/02-edit-mode-live-preview.md
@@ -1,5 +1,5 @@
---
-title: Live Preview Edit Mode
+title: Edit Mode - Live Preview
---
import React from 'react';
@@ -70,7 +70,7 @@ The right side of the Control Box displays a set of tools you can use to modify
- **Change Image** *(image icon)*: Opens an image gallery at the bottom of the Live Preview, where you can browse and select an image. You can also choose an image from your computer. Phoenix Code automatically saves the image to your project folder and updates the `src` attribute of the element.
*This button appears only for `![]()
` elements.*
- See [Image Gallery](./02-image-gallery.md) for more details.
+ See [Image Gallery](./03-image-gallery.md) for more details.
- **Edit Text** *(pen icon)*: Opens inline text editing for the selected element. You can edit text directly in the Live Preview, and Phoenix Code automatically updates the source code.
*This button appears only for elements that can contain text (it is not available for `![]()
`, `