Merge branch 'main' into room-resource-skills

Author: lukemelia

packages/base/code-ref.gts

@@ -1,3 +1,5 @@
+import type Owner from '@ember/owner';
+import { tracked } from '@glimmer/tracking';
 import {
   Component,
   primitive,
@@ -13,7 +15,14 @@ import {
   type SerializeOpts,
   type JSONAPISingleResourceDocument,
 } from './card-api';
-import { ResolvedCodeRef } from '@cardstack/runtime-common';
+import { restartableTask } from 'ember-concurrency';
+import { consume } from 'ember-provide-consume-context';
+import {
+  type ResolvedCodeRef,
+  CardURLContextName,
+} from '@cardstack/runtime-common';
+import { not } from '@cardstack/boxel-ui/helpers';
+import { BoxelInput } from '@cardstack/boxel-ui/components';
 import CodeIcon from '@cardstack/boxel-icons/code';
 
 function moduleIsUrlLike(module: string) {
@@ -35,6 +44,70 @@ class BaseView extends Component<typeof CodeRefField> {
   </template>
 }
 
+class EditView extends Component<typeof CodeRefField> {
+  @consume(CardURLContextName) declare cardURL: string | undefined;
+  @tracked validationState: 'initial' | 'valid' | 'invalid' = 'initial';
+  @tracked private maybeCodeRef: string | undefined = maybeSerializeCodeRef(
+    this.args.model ?? undefined,
+  );
+
+  <template>
+    <BoxelInput
+      data-test-hasValidated={{this.setIfValid.isIdle}}
+      @value={{this.maybeCodeRef}}
+      @state={{this.validationState}}
+      @onInput={{this.onInput}}
+      @disabled={{not @canEdit}}
+    />
+  </template>
+
+  constructor(owner: Owner, args: any) {
+    super(owner, args);
+    if (this.maybeCodeRef != null) {
+      this.setIfValid.perform(this.maybeCodeRef, { checkOnly: true });
+    }
+  }
+
+  private onInput = (inputVal: string) => {
+    this.maybeCodeRef = inputVal;
+    this.setIfValid.perform(this.maybeCodeRef);
+  };
+
+  private setIfValid = restartableTask(
+    async (maybeCodeRef: string, opts?: { checkOnly?: true }) => {
+      this.validationState = 'initial';
+      if (maybeCodeRef.length === 0) {
+        if (!opts?.checkOnly) {
+          this.args.set(undefined);
+        }
+        return;
+      }
+
+      let parts = maybeCodeRef.split('/');
+      if (parts.length < 2) {
+        this.validationState = 'invalid';
+        return;
+      }
+
+      let name = parts.pop()!;
+      let module = parts.join('/');
+      try {
+        let code = (await import(module))[name];
+        if (code) {
+          this.validationState = 'valid';
+          if (!opts?.checkOnly) {
+            this.args.set({ module, name });
+          }
+        } else {
+          this.validationState = 'invalid';
+        }
+      } catch (err) {
+        this.validationState = 'invalid';
+      }
+    },
+  );
+}
+
 export default class CodeRefField extends FieldDef {
   static icon = CodeIcon;
   static [primitive]: ResolvedCodeRef;
@@ -71,8 +144,8 @@ export default class CodeRefField extends FieldDef {
   }
 
   static embedded = class Embedded extends BaseView {};
-  // The edit template is meant to be read-only, this field card is not mutable
-  static edit = class Edit extends BaseView {};
+
+  static edit = EditView;
 }
 
 function maybeSerializeCodeRef(

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/app/components/preview.gts

@@ -5,6 +5,7 @@ import { provide } from 'ember-provide-consume-context';
 import {
   CardContextName,
   DefaultFormatsContextName,
+  CardURLContextName,
   ResolvedCodeRef,
 } from '@cardstack/runtime-common';
 
@@ -46,6 +47,14 @@ export default class Preview extends Component<Signature> {
     };
   }
 
+  @provide(CardURLContextName)
+  // @ts-ignore "cardURL is declared but not used"
+  private get cardURL() {
+    return 'id' in this.args.card
+      ? (this.args.card?.id as string | undefined)
+      : undefined;
+  }
+
   <template>
     <this.renderedCard @displayContainer={{@displayContainer}} ...attributes />
   </template>

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);
   });
 });