only render code block after streaming is complete. Also handle inline code blocks

habdelra · habdelra · commit 7de389c43c7a · 2025-02-20T11:04:49.000-05:00
diff --git a/packages/host/app/components/ai-assistant/formatted-message.gts b/packages/host/app/components/ai-assistant/formatted-message.gts
@@ -0,0 +1,124 @@
+import type { SafeString } from '@ember/template';
+import Component from '@glimmer/component';
+
+import CodeBlock from '@cardstack/host/modifiers/code-block';
+import { MonacoEditorOptions } from '@cardstack/host/modifiers/monaco';
+
+import { type MonacoSDK } from '@cardstack/host/services/monaco-service';
+
+interface FormattedMessageSignature {
+  sanitizedHtml: SafeString;
+  monacoSDK: MonacoSDK;
+  renderCodeBlocks: boolean;
+}
+
+export default class FormattedMessage extends Component<FormattedMessageSignature> {
+  <template>
+    {{#if @renderCodeBlocks}}
+      <div
+        class='message'
+        {{CodeBlock
+          codeBlockSelector='pre[data-codeblock]'
+          languageAttr='data-codeblock'
+          monacoSDK=@monacoSDK
+          editorDisplayOptions=this.editorDisplayOptions
+        }}
+      >
+        {{@sanitizedHtml}}
+      </div>
+    {{else}}
+      <div class='message'>
+        {{@sanitizedHtml}}
+      </div>
+    {{/if}}
+
+    <style scoped>
+      .message {
+        padding: var(--ai-assistant-message-padding, var(--boxel-sp));
+      }
+
+      /* code blocks can be rendered inline and as blocks, 
+         this is the styling for when it is rendered as a block */
+      .message > :deep(.preview-code.code-block) {
+        width: calc(100% + 2 * var(--boxel-sp));
+      }
+
+      :deep(.preview-code) {
+        --spacing: var(--boxel-sp-sm);
+        --fill-container-spacing: calc(
+          -1 * var(--ai-assistant-message-padding)
+        );
+        margin: var(--boxel-sp) var(--fill-container-spacing) 0
+          var(--fill-container-spacing);
+        padding: var(--spacing) 0;
+        background-color: var(--boxel-dark);
+      }
+
+      :deep(.preview-code.code-block) {
+        display: inline-block; /* sometimes the ai bot may place the codeblock within an <li> */
+        width: 100%;
+        position: relative;
+        padding-top: var(--boxel-sp-xxxl);
+      }
+
+      :deep(.monaco-container) {
+        height: var(--monaco-container-height);
+        min-height: 7rem;
+        max-height: 30vh;
+      }
+
+      /*
+        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);
+      }
+
+      /* we are cribbing the boxel-ui style here as we have a rather 
+      awkward way that we insert the copy button */
+      :deep(.code-copy-button) {
+        --spacing: calc(1rem / 1.333);
+
+        position: absolute;
+        top: var(--boxel-sp);
+        left: var(--boxel-sp-lg);
+        color: var(--boxel-highlight);
+        background: none;
+        border: none;
+        font: 600 var(--boxel-font-xs);
+        padding: 0;
+        margin-bottom: var(--spacing);
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: var(--spacing);
+        letter-spacing: var(--boxel-lsp-xs);
+        justify-content: center;
+        height: min-content;
+        align-items: center;
+        white-space: nowrap;
+        min-height: var(--boxel-button-min-height);
+        min-width: var(--boxel-button-min-width, 5rem);
+      }
+      :deep(.code-copy-button .copy-text) {
+        color: transparent;
+      }
+      :deep(.code-copy-button .copy-text:hover) {
+        color: var(--boxel-highlight);
+      }
+    </style>
+  </template>
+
+  private editorDisplayOptions: MonacoEditorOptions = {
+    wordWrap: 'on',
+    wrappingIndent: 'indent',
+    fontWeight: 'bold',
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+    },
+  };
+}
diff --git a/packages/host/app/components/ai-assistant/message/index.gts b/packages/host/app/components/ai-assistant/message/index.gts
@@ -18,15 +18,15 @@ import { isCardInstance } from '@cardstack/runtime-common';
 
 import CardPill from '@cardstack/host/components/card-pill';
 import FilePill from '@cardstack/host/components/file-pill';
-import CodeBlock from '@cardstack/host/modifiers/code-block';
-import { MonacoEditorOptions } from '@cardstack/host/modifiers/monaco';
 
 import type CardService from '@cardstack/host/services/card-service';
 import { type MonacoSDK } from '@cardstack/host/services/monaco-service';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 import { type FileDef } from 'https://cardstack.com/base/file-api';
 
+import FormattedMessage from '../formatted-message';
+
 import type { ComponentLike } from '@glint/template';
 
 function findLastTextNodeWithContent(parentNode: Node): Text | null {
@@ -191,13 +191,6 @@ export default class AiAssistantMessage extends Component<Signature> {
         is-error=@errorMessage
       }}
       {{MessageScroller index=@index registerScroller=@registerScroller}}
-      {{CodeBlock
-        codeBlockSelector='pre[data-codeblock]'
-        languageAttr='data-codeblock'
-        monacoSDK=@monacoSDK
-        editorDisplayOptions=this.editorDisplayOptions
-        index=@index
-      }}
       data-test-ai-assistant-message
       ...attributes
     >
@@ -237,11 +230,21 @@ export default class AiAssistantMessage extends Component<Signature> {
         {{/if}}
 
         <div class='content' data-test-ai-message-content>
-          {{if
-            (and @isFromAssistant @isStreaming)
-            (wrapLastTextNodeInStreamingTextSpan @formattedMessage)
-            @formattedMessage
-          }}
+          {{#if (and @isFromAssistant @isStreaming)}}
+            <FormattedMessage
+              @renderCodeBlocks={{false}}
+              @monacoSDK={{@monacoSDK}}
+              @sanitizedHtml={{wrapLastTextNodeInStreamingTextSpan
+                @formattedMessage
+              }}
+            />
+          {{else}}
+            <FormattedMessage
+              @renderCodeBlocks={{true}}
+              @monacoSDK={{@monacoSDK}}
+              @sanitizedHtml={{@formattedMessage}}
+            />
+          {{/if}}
 
           {{yield}}
 
@@ -344,7 +347,17 @@ export default class AiAssistantMessage extends Component<Signature> {
         letter-spacing: var(--boxel-lsp-xs);
         padding: var(--ai-assistant-message-padding, var(--boxel-sp));
       }
+
+      .content :deep(.message) {
+        padding: 0;
+      }
+
+      .is-from-assistant .content :deep(.message) {
+        padding: var(--ai-assistant-message-padding, var(--boxel-sp));
+      }
+
       .is-from-assistant .content {
+        padding: 0;
         background-color: var(--ai-bot-message-background-color);
         color: var(--boxel-light);
         /* the below font-smoothing options are only recommended for light-colored
@@ -437,84 +450,9 @@ export default class AiAssistantMessage extends Component<Signature> {
         flex-wrap: wrap;
         gap: var(--boxel-sp-xxs);
       }
-
-      :deep(.preview-code) {
-        --spacing: var(--boxel-sp-sm);
-        --fill-container-spacing: calc(
-          -1 * var(--ai-assistant-message-padding)
-        );
-        margin: var(--boxel-sp) var(--fill-container-spacing) 0
-          var(--fill-container-spacing);
-        padding: var(--spacing) 0;
-        background-color: var(--boxel-dark);
-      }
-
-      :deep(.preview-code.code-block) {
-        position: relative;
-        padding-top: var(--boxel-sp-xxxl);
-      }
-
-      :deep(.monaco-container) {
-        height: var(--monaco-container-height);
-        min-height: 7rem;
-        max-height: 30vh;
-      }
-
-      /*
-        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);
-      }
-
-      /* we are cribbing the boxel-ui style here as we have a rather 
-      awkward way that we insert the copy button */
-      :deep(.code-copy-button) {
-        --spacing: calc(1rem / 1.333);
-
-        position: absolute;
-        top: var(--boxel-sp);
-        left: var(--boxel-sp-lg);
-        color: var(--boxel-highlight);
-        background: none;
-        border: none;
-        font: 600 var(--boxel-font-xs);
-        padding: 0;
-        margin-bottom: var(--spacing);
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: var(--spacing);
-        letter-spacing: var(--boxel-lsp-xs);
-        justify-content: center;
-        height: min-content;
-        align-items: center;
-        white-space: nowrap;
-        min-height: var(--boxel-button-min-height);
-        min-width: var(--boxel-button-min-width, 5rem);
-      }
-      :deep(.code-copy-button .copy-text) {
-        color: transparent;
-      }
-      :deep(.code-copy-button .copy-text:hover) {
-        color: var(--boxel-highlight);
-      }
     </style>
   </template>
 
-  editorDisplayOptions: MonacoEditorOptions = {
-    wordWrap: 'on',
-    wrappingIndent: 'indent',
-    fontWeight: 'bold',
-    scrollbar: {
-      alwaysConsumeMouseWheel: false,
-    },
-  };
-
   private get isAvatarAnimated() {
     return this.args.isStreaming && !this.args.errorMessage;
   }
diff --git a/packages/host/app/modifiers/code-block.ts b/packages/host/app/modifiers/code-block.ts
@@ -17,7 +17,6 @@ interface Signature {
       languageAttr: string;
       monacoSDK: typeof MonacoSDK;
       editorDisplayOptions?: MonacoEditorOptions;
-      index: number;
     };
   };
 }
diff --git a/packages/host/app/services/monaco-service.ts b/packages/host/app/services/monaco-service.ts
@@ -46,6 +46,13 @@ export default class MonacoService extends Service {
       this.extendMonacoLanguage(lang, monaco),
     );
     monaco.editor.onDidCreateEditor((editor: _MonacoSDK.editor.ICodeEditor) => {
+      let cssClass = ((editor as any)._domElement as HTMLElement).getAttribute(
+        'class',
+      );
+      // we only care about the code mode monaco editor here
+      if (cssClass?.includes('code-block')) {
+        return;
+      }
       this.editor = editor;
       this.editor.onDidFocusEditorText(() => {
         this.hasFocus = true;

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,6 @@ interface Signature {`
`17`	`17`	`languageAttr: string;`
`18`	`18`	`monacoSDK: typeof MonacoSDK;`
`19`	`19`	`editorDisplayOptions?: MonacoEditorOptions;`
`20`		`- index: number;`
`21`	`20`	`};`
`22`	`21`	`};`
`23`	`22`	`}`