Revert ai assistant view-code container styles and add snapshot (#2199)

* revert ai assistant view-code container styles and add snapshot

* include code block snapshot

* make copy-code button styles consistent

* fix footer error container spacing

* remove unnecessary line

---------

Co-authored-by: Hassan Abdel-Rahman <hassan.abdelrahman@gmail.com>

Author: burieberry

packages/host/app/components/ai-assistant/formatted-message.gts

@@ -112,7 +112,7 @@ export default class FormattedMessage extends Component<FormattedMessageSignatur
       :deep(.code-copy-button .copy-text) {
         color: transparent;
       }
-      :deep(.code-copy-button .copy-text:hover) {
+      :deep(.code-copy-button:hover .copy-text) {
         color: var(--boxel-highlight);
       }
     </style>

packages/host/app/components/ai-assistant/message/index.gts

@@ -261,7 +261,7 @@ export default class AiAssistantMessage extends Component<Signature> {
           {{/if}}
 
           {{#if @resources.errors.length}}
-            <div class='error-container'>
+            <div class='error-container error-footer'>
               {{#each @resources.errors as |resourceError|}}
                 <FailureBordered class='error-icon' />
                 <div class='error-message' data-test-card-error>
@@ -348,12 +348,7 @@ export default class AiAssistantMessage extends Component<Signature> {
         padding: var(--ai-assistant-message-padding, var(--boxel-sp));
       }
 
-      .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
@@ -422,6 +417,13 @@ export default class AiAssistantMessage extends Component<Signature> {
         font: 600 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp);
       }
+      .error-footer {
+        --fill-container-spacing: calc(
+          -1 * var(--ai-assistant-message-padding)
+        );
+        margin-inline: var(--fill-container-spacing);
+        margin-bottom: var(--fill-container-spacing);
+      }
       .error-icon {
         --icon-background-color: var(--boxel-light);
         --icon-color: var(--boxel-danger);

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

@@ -198,7 +198,7 @@ export default class RoomMessageCommand extends Component<Signature> {
       {{#if @isDisplayingCode}}
         <div class='preview-code'>
           <Button
-            class='copy-to-clipboard-button'
+            class='code-copy-button'
             @kind='text-only'
             @size='extra-small'
             {{on 'click' this.copyToClipboard}}
@@ -210,7 +210,7 @@ export default class RoomMessageCommand extends Component<Signature> {
               role='presentation'
               aria-hidden='true'
             />
-            Copy to clipboard
+            <span class='copy-text'>Copy to clipboard</span>
           </Button>
           <div
             class='monaco-container'
@@ -279,7 +279,17 @@ export default class RoomMessageCommand extends Component<Signature> {
       .command-result-card-preview {
         margin-top: var(--boxel-sp);
       }
-      .copy-to-clipboard-button {
+      .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)
+          var(--fill-container-spacing) var(--fill-container-spacing);
+        padding: var(--spacing) 0;
+        background-color: var(--boxel-dark);
+      }
+      .code-copy-button {
         --boxel-button-font: 600 var(--boxel-font-xs);
         --boxel-button-padding: 0 var(--boxel-sp-xs);
         --icon-color: var(--boxel-highlight);
@@ -290,9 +300,16 @@ export default class RoomMessageCommand extends Component<Signature> {
         grid-template-columns: auto 1fr;
         gap: var(--spacing);
       }
-      .copy-to-clipboard-button:hover:not(:disabled) {
-        --boxel-button-text-color: var(--boxel-highlight);
-        filter: brightness(1.1);
+      .code-copy-button > .copy-text {
+        color: transparent;
+      }
+      .code-copy-button:hover:not(:disabled) > .copy-text {
+        color: var(--boxel-highlight);
+      }
+      .monaco-container {
+        height: var(--monaco-container-height);
+        min-height: 10rem;
+        max-height: 30vh;
       }
       .header {
         --boxel-label-color: var(--boxel-450);

packages/host/tests/integration/components/ai-assistant-panel-test.gts

@@ -621,6 +621,7 @@ module('Integration | ai-assistant-panel', function (hooks) {
       'it can preview code when a change is proposed',
     );
     assert.dom('[data-test-copy-code]').isEnabled('copy button is available');
+    await percySnapshot(assert);
 
     await click('[data-test-view-code-button]');
     assert.dom('[data-test-code-editor]').doesNotExist();
@@ -2816,5 +2817,7 @@ module('Integration | ai-assistant-panel', function (hooks) {
       `console.log("hello world");`,
       'monaco content is correct',
     );
+
+    await percySnapshot(assert);
   });
 });