Display AI panel in code mode

packages/host/app/components/matrix/room-message-command.gts

@@ -211,7 +211,6 @@ export default class RoomMessageCommand extends Component<Signature> {
               monacoSDK=@monacoSDK
               language='json'
               readOnly=true
-              darkTheme=true
               editorDisplayOptions=this.editorDisplayOptions
             }}
             data-test-editor
@@ -241,6 +240,9 @@ export default class RoomMessageCommand extends Component<Signature> {
         </CardContainer>
       {{/if}}
     </div>
+
+    {{! template-lint-disable no-whitespace-for-layout  }}
+    {{! ignore the above error because ember-template-lint complains about the whitespace in the multi-line comment below }}
     <style scoped>
       .is-pending .view-code-button,
       .is-error .view-code-button {
@@ -319,6 +321,17 @@ export default class RoomMessageCommand extends Component<Signature> {
       .options-menu :deep(.check-icon) {
         display: none;
       }
+      /*
+        This filter is a best-effort approximation of a good looking dark theme that is a function of the white theme that
+        we use for code previews in the AI panel. While Monaco editor does support multiple themes, it does not support
+        monaco instances with different themes *on the same page*.  This is why we are using a filter to approximate the
+        dark theme. More details here: https://github.com/Microsoft/monaco-editor/issues/338 (monaco uses global style tags
+        with hardcoded colors; any instance will override the global style tag, making all code editors look the same,
+        effectively disabling multiple themes to be used on the same page)
+      */
+      :global(.preview-code .monaco-editor) {
+        filter: invert(1) hue-rotate(151deg) brightness(0.8) grayscale(0.1);
+      }
     </style>
   </template>
 }

packages/host/app/components/matrix/room.gts

@@ -1,3 +1,4 @@
+import { isDestroyed } from '@ember/destroyable';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
@@ -250,6 +251,9 @@ export default class Room extends Component<Signature> {
         messageElemements: new WeakMap(),
         messageScrollers: new Map(),
         messageVisibilityObserver: new IntersectionObserver((entries) => {
+          if (isDestroyed(this)) {
+            return;
+          }
           entries.forEach((entry) => {
             let index = this.messageElements.get(entry.target as HTMLElement);
             if (index != null) {

packages/host/app/components/operator-mode/code-editor.gts

@@ -324,7 +324,15 @@ export default class CodeEditor extends Component<Signature> {
         padding: var(--boxel-sp) 0;
       }
 
-      .monaco-container.readonly {
+      :global(.monaco-container.readonly) {
+        background-color: #ebeaed;
+      }
+
+      :global(.monaco-container.readonly .margin) {
+        background-color: #ebeaed;
+      }
+
+      :global(.monaco-container.readonly .monaco-editor-background) {
         background-color: #ebeaed;
       }
 

packages/host/app/components/operator-mode/code-submode.gts

@@ -772,7 +772,6 @@ export default class CodeSubmode extends Component<Signature> {
     {{/let}}
     <SubmodeLayout
       @onCardSelectFromSearch={{this.openSearchResultInEditor}}
-      @hideAiAssistant={{true}}
       as |search|
     >
       <div

packages/host/app/components/operator-mode/submode-layout.gts

@@ -17,7 +17,7 @@ import { TrackedObject } from 'tracked-built-ins';
 
 import { ResizablePanelGroup } from '@cardstack/boxel-ui/components';
 import { Avatar, IconButton } from '@cardstack/boxel-ui/components';
-import { and, cn, not } from '@cardstack/boxel-ui/helpers';
+import { cn, not } from '@cardstack/boxel-ui/helpers';
 
 import { BoxelIcon } from '@cardstack/boxel-ui/icons';
 
@@ -47,7 +47,6 @@ import type OperatorModeStateService from '../../services/operator-mode-state-se
 interface Signature {
   Element: HTMLDivElement;
   Args: {
-    hideAiAssistant?: boolean;
     onSearchSheetOpened?: () => void;
     onSearchSheetClosed?: () => void;
     onCardSelectFromSearch: (cardId: string) => void;
@@ -309,23 +308,17 @@ export default class SubmodeLayout extends Component<Signature> {
             @onCardSelect={{this.handleCardSelectFromSearch}}
             @onInputInsertion={{this.storeSearchElement}}
           />
-          {{#if (not @hideAiAssistant)}}
-            <AiAssistantToast
-              @hide={{this.operatorModeStateService.aiAssistantOpen}}
-              @onViewInChatClick={{this.operatorModeStateService.toggleAiAssistant}}
-            />
-            <AiAssistantButton
-              class='chat-btn'
-              @isActive={{this.operatorModeStateService.aiAssistantOpen}}
-              {{on 'click' this.operatorModeStateService.toggleAiAssistant}}
-            />
-          {{/if}}
+          <AiAssistantToast
+            @hide={{this.operatorModeStateService.aiAssistantOpen}}
+            @onViewInChatClick={{this.operatorModeStateService.toggleAiAssistant}}
+          />
+          <AiAssistantButton
+            class='chat-btn'
+            @isActive={{this.operatorModeStateService.aiAssistantOpen}}
+            {{on 'click' this.operatorModeStateService.toggleAiAssistant}}
+          />
         </ResizablePanel>
-        {{#if
-          (and
-            (not @hideAiAssistant) this.operatorModeStateService.aiAssistantOpen
-          )
-        }}
+        {{#if this.operatorModeStateService.aiAssistantOpen}}
           <ResizablePanel
             class='ai-assistant-resizable-panel'
             @defaultSize={{this.aiPanelWidths.defaultWidth}}

packages/host/app/modifiers/monaco.ts

@@ -22,7 +22,6 @@ interface Signature {
       language?: string;
       readOnly?: boolean;
       monacoSDK: typeof MonacoSDK;
-      darkTheme?: boolean;
       editorDisplayOptions?: MonacoEditorOptions;
     };
   };
@@ -54,7 +53,6 @@ export default class Monaco extends Modifier<Signature> {
       onSetup,
       readOnly,
       monacoSDK,
-      darkTheme,
       editorDisplayOptions,
     }: Signature['Args']['Named'],
   ) {
@@ -73,21 +71,17 @@ export default class Monaco extends Modifier<Signature> {
         this.model.setValue(content);
       }
     } else {
-      monacoSDK.editor.defineTheme('boxel-theme', {
+      // The light theme editor is used for the main editor in code mode,
+      // but we also have a dark themed editor for the preview editor in AI panel.
+      // The latter is themed using a CSS filter as opposed to defining a new monaco theme
+      // because monaco does not support multiple themes on the same page (check the comment in
+      // room-message-command.gts for more details)
+      monacoSDK.editor.defineTheme('boxel-monaco-light-theme', {
         base: 'vs',
         inherit: true,
         rules: [],
         colors: {
-          'editor.background': readOnly ? '#EBEAED' : '#FFFFFF',
-        },
-      });
-
-      monacoSDK.editor.defineTheme('boxel-dark-theme', {
-        base: 'vs-dark',
-        inherit: true,
-        rules: [],
-        colors: {
-          'editor.background': '#000000',
+          'editor.background': '#FFFFFF',
         },
       });
 
@@ -100,7 +94,7 @@ export default class Monaco extends Modifier<Signature> {
         minimap: {
           enabled: false,
         },
-        theme: darkTheme ? 'boxel-dark-theme' : 'boxel-theme',
+        theme: 'boxel-monaco-light-theme',
         ...editorDisplayOptions,
       };
 

packages/host/tests/acceptance/code-submode/editor-test.ts

@@ -822,7 +822,7 @@ module('Acceptance | code submode | editor tests', function (hooks) {
       assert.dom('[data-test-realm-indicator-not-writable]').exists();
       assert.strictEqual(
         window
-          .getComputedStyle(find('.monaco-editor')!)
+          .getComputedStyle(find('.monaco-editor-background')!)
           .getPropertyValue('background-color')!,
         'rgb(235, 234, 237)', // equivalent to #ebeaed
         'monaco editor is greyed out when read-only',

packages/host/tests/acceptance/operator-mode-acceptance-test.gts

@@ -1186,5 +1186,26 @@ module('Acceptance | operator mode tests', function (hooks) {
         .hasNoClass('out-of-credit');
       assert.dom('[data-test-buy-more-credits]').hasNoClass('out-of-credit');
     });
+
+    test(`ai panel continues being open when switching to code submode`, async function (assert) {
+      await visitOperatorMode({
+        stacks: [
+          [
+            {
+              id: `${testRealmURL}Person/fadhlan`,
+              format: 'isolated',
+            },
+          ],
+        ],
+      });
+
+      await click('[data-test-open-ai-assistant]');
+      assert.dom('[data-test-ai-assistant-panel]').exists();
+      await click('[data-test-submode-switcher] button');
+      await click('[data-test-boxel-menu-item-text="Code"]');
+      assert.dom('[data-test-ai-assistant-panel]').exists();
+      await click('[data-test-open-ai-assistant]');
+      assert.dom('[data-test-ai-assistant-panel]').doesNotExist();
+    });
   });
 });