1 files changed, 37 insertions, 25 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ab58023e3..f79eadde8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -723,31 +723,43 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
         const noBackground = this.Document.isGroup && !this._componentView?.isUnstyledView?.() && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
         return (
-            <div
-                className="documentView-contentsView"
-                style={{
-                    pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'),
-                    width: this._showAIEditor ? this.rpw() : undefined,
-                    height: this._showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
-                    justifySelf: 'center',
-                }}>
-                <DocumentContentsView
-                    {...this._props}
-                    layoutFieldKey={StrCast(this.Document.layout_fieldKey, 'layout')}
-                    pointerEvents={this.contentPointerEvents}
-                    setContentViewBox={this.setContentView}
-                    childFilters={this.childFilters}
-                    PanelHeight={this._showAIEditor ? this.rpw : this.panelHeight}
-                    PanelWidth={this._showAIEditor ? this.rph : this._props.PanelWidth}
-                    setHeight={this.setHeight}
-                    isContentActive={this.isContentActive}
-                    ScreenToLocalTransform={this.screenToLocalContent}
-                    rootSelected={this.rootSelected}
-                    onClickScript={this.onClickFunc}
-                    setTitleFocus={this.setTitleFocus}
-                    hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)}
-                />
-                {this._showAIEditor && (this._componentView?.componentAIView?.(this.rph()) ?? null)}
+            <div>
+                <div
+                    className="documentView-contentsView"
+                    style={{
+                        pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'),
+                        width: this._showAIEditor ? this.rpw() : undefined,
+                        height: this._showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
+                        justifySelf: this._showAIEditor ? 'center' : undefined,
+                    }}>
+                    <DocumentContentsView
+                        {...this._props}
+                        layoutFieldKey={StrCast(this.Document.layout_fieldKey, 'layout')}
+                        pointerEvents={this.contentPointerEvents}
+                        setContentViewBox={this.setContentView}
+                        childFilters={this.childFilters}
+                        PanelHeight={this._showAIEditor ? this.rpw : this.panelHeight}
+                        PanelWidth={this._showAIEditor ? this.rph : this._props.PanelWidth}
+                        setHeight={this.setHeight}
+                        isContentActive={this.isContentActive}
+                        ScreenToLocalTransform={this.screenToLocalContent}
+                        rootSelected={this.rootSelected}
+                        onClickScript={this.onClickFunc}
+                        setTitleFocus={this.setTitleFocus}
+                        hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)}
+                    />
+                </div>
+                {this._showAIEditor && (
+                    <div className="documentView-editorView-history" style={{ height: this.rph(), width: this.rpw() / 2 }}>
+                        {this._componentView?.componentAIViewHistory?.() ?? null}
+                    </div>
+                )}
+                {this._showAIEditor && (
+                    <div className="documentView-editorView" style={{ height: this.panelHeight() - this.rph() }}>
+                        <div className="documentView-editorView-resizer" />
+                        {this._componentView?.componentAIView?.() ?? null}
+                    </div>
+                )}
             </div>
         );
     }