feat(core): auto expand workbench sidebar when opening ai preview panel (#13058)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added the ability to programmatically open and close the AI chat
preview panel, with improved control over its visibility and content.
* Introduced event notifications for preview panel open/close actions,
enabling responsive UI updates.

* **Enhancements**
* Automatically adjusts the sidebar width to a minimum value when the
preview panel is opened for optimal viewing.
* Improved synchronization between sidebar width and external changes,
ensuring a consistent user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/components/ai-chat-content/ai-chat-content.ts

@@ -174,10 +174,10 @@ export class AIChatContent extends SignalWatcher(
   accessor isHistoryLoading = false;
 
   @state()
-  accessor showPreviewPanel = false;
+  private accessor showPreviewPanel = false;
 
   @state()
-  accessor previewPanelContent: TemplateResult<1> | null = null;
+  private accessor previewPanelContent: TemplateResult<1> | null = null;
 
   private readonly chatMessagesRef: Ref<AIChatMessages> =
     createRef<AIChatMessages>();
@@ -338,8 +338,23 @@ export class AIChatContent extends SignalWatcher(
 
   public reset() {
     this.updateContext(DEFAULT_CHAT_CONTEXT_VALUE);
+    this.closePreviewPanel(true);
+  }
+
+  public openPreviewPanel(content?: TemplateResult<1>) {
+    this.showPreviewPanel = true;
+    if (content) this.previewPanelContent = content;
+    AIProvider.slots.previewPanelOpenChange.next(true);
+  }
+
+  public closePreviewPanel(destroyContent: boolean = false) {
     this.showPreviewPanel = false;
-    this.previewPanelContent = null;
+    if (destroyContent) this.previewPanelContent = null;
+    AIProvider.slots.previewPanelOpenChange.next(false);
+  }
+
+  public get isPreviewPanelOpen() {
+    return this.showPreviewPanel;
   }
 
   override connectedCallback() {

packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts

@@ -13,7 +13,7 @@ function getChatPanel(target: HTMLElement) {
 
 export const isPreviewPanelOpen = (target: HTMLElement) => {
   const chatPanel = getChatPanel(target);
-  return chatPanel?.showPreviewPanel ?? false;
+  return chatPanel?.isPreviewPanelOpen ?? false;
 };
 
 export const renderPreviewPanel = (
@@ -28,13 +28,11 @@ export const renderPreviewPanel = (
     return;
   }
 
-  chatPanel.showPreviewPanel = true;
-
   const preview = html`<artifact-preview-panel
     .content=${content}
     .controls=${controls ?? nothing}
   ></artifact-preview-panel>`;
-  chatPanel.previewPanelContent = preview;
+  chatPanel.openPreviewPanel(preview);
 };
 
 export const closePreviewPanel = (target: HTMLElement) => {
@@ -45,7 +43,7 @@ export const closePreviewPanel = (target: HTMLElement) => {
     return;
   }
 
-  chatPanel.showPreviewPanel = false;
+  chatPanel.closePreviewPanel();
 };
 
 export class ArtifactPreviewPanel extends WithDisposable(ShadowlessElement) {

packages/frontend/core/src/blocksuite/ai/provider/ai-provider.ts

@@ -149,6 +149,7 @@ export class AIProvider {
     }>(),
     // downstream can emit this slot to notify ai presets that user info has been updated
     userInfo: new Subject<AIUserInfo | null>(),
+    previewPanelOpenChange: new Subject<boolean>(),
     /* eslint-enable rxjs/finnish */
   };