Attach files to the input section

Author: FadhlanR

.github/workflows/pr-boxel-host.yml

@@ -65,6 +65,7 @@ jobs:
           AWS_REGION: us-east-1
           AWS_CLOUDFRONT_DISTRIBUTION: EU4RGLH4EOCHJ
           ENABLE_PLAYGROUND: true
+          ENABLE_ATTACHING_FILES: true
         with:
           package: boxel-host
           environment: staging
@@ -96,6 +97,7 @@ jobs:
           AWS_REGION: us-east-1
           AWS_CLOUDFRONT_DISTRIBUTION: E2PZR9CIAW093B
           ENABLE_PLAYGROUND: true
+          ENABLE_ATTACHING_FILES: true
         with:
           package: boxel-host
           environment: production

packages/boxel-ui/addon/raw-icons/code-file.svg

@@ -11,6 +11,7 @@ import Card from './icons/card.gts';
 import CardbotLg from './icons/cardbot-lg.gts';
 import CaretDown from './icons/caret-down.gts';
 import CheckMark from './icons/check-mark.gts';
+import CodeFile from './icons/code-file.gts';
 import Copy from './icons/copy.gts';
 import DiagonalArrowLeftUp from './icons/diagonal-arrow-left-up.gts';
 import Download from './icons/download.gts';
@@ -71,6 +72,7 @@ export const ALL_ICON_COMPONENTS = [
   CardbotLg,
   CaretDown,
   CheckMark,
+  CodeFile,
   Copy,
   DiagonalArrowLeftUp,
   Download,
@@ -132,6 +134,7 @@ export {
   CardbotLg,
   CaretDown,
   CheckMark,
+  CodeFile,
   Copy,
   DiagonalArrowLeftUp,
   Download,

packages/boxel-ui/addon/src/icons.gts

@@ -0,0 +1,23 @@
+// This file is auto-generated by 'pnpm rebuild:icons'
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import type { Signature } from './types.ts';
+
+const IconComponent: TemplateOnlyComponent<Signature> = <template>
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    fill='none'
+    transform='scale(-1 1)'
+    viewBox='0 0 24 24'
+    ...attributes
+  ><path
+      fill='var(--icon-color, #000000)'
+      fill-rule='evenodd'
+      d='M9.293 1.293A1 1 0 0 1 10 1h8a3 3 0 0 1 3 3v5a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1h-7v5a1 1 0 0 1-1 1H5v11a1 1 0 0 0 1 1h3a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3V8a1 1 0 0 1 .293-.707l6-6ZM6.414 7H9V4.414L6.414 7Zm12.293 5.293 4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L20.586 17l-3.293-3.293a1 1 0 0 1 1.414-1.414Zm-4 1.414a1 1 0 0 0-1.414-1.414l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 0 0 1.414-1.414L11.414 17l3.293-3.293Z'
+      clip-rule='evenodd'
+    /></svg>
+</template>;
+
+// @ts-expect-error this is the only way to set a name on a Template Only Component currently
+IconComponent.name = 'CodeFile';
+export default IconComponent;

packages/boxel-ui/addon/src/icons/code-file.gts

@@ -23,6 +23,8 @@ import {
 
 import Pill from '@cardstack/host/components/pill';
 
+import ENV from '@cardstack/host/config/environment';
+
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 import { type FileDef } from 'https://cardstack.com/base/file-api';
 
@@ -44,36 +46,37 @@ interface Signature {
   };
 }
 
+const isAttachingFilesEnabled = ENV.featureFlags?.ENABLE_ATTACHING_FILES;
 const MAX_ITEMS_TO_DISPLAY = 4;
 
 export default class AiAssistantAttachmentPicker extends Component<Signature> {
   <template>
     <div class='item-picker'>
       {{#each this.itemsToDisplay as |item|}}
-        {{#if (this.isCard item)}}
-          {{#if (this.isAutoAttachedCard item)}}
-            <Tooltip @placement='top'>
-              <:trigger>
-                <Pill
-                  @item={{item}}
-                  @isAutoAttached={{true}}
-                  @remove={{this.removeItem}}
-                />
-              </:trigger>
-
-              <:content>
-                {{#if (this.isAutoAttachedCard item)}}
-                  Topmost card is shared automatically
-                {{/if}}
-              </:content>
-            </Tooltip>
-          {{else}}
-            <Pill
-              @item={{item}}
-              @isAutoAttached={{false}}
-              @remove={{this.removeItem}}
-            />
-          {{/if}}
+        {{#if (this.isAutoAttached item)}}
+          <Tooltip @placement='top'>
+            <:trigger>
+              <Pill
+                @item={{item}}
+                @isAutoAttached={{true}}
+                @remove={{this.removeItem}}
+              />
+            </:trigger>
+
+            <:content>
+              {{#if (this.isAutoAttached item)}}
+                Topmost
+                {{if (this.isCard item) 'Card' 'File'}}
+                is shared automatically
+              {{/if}}
+            </:content>
+          </Tooltip>
+        {{else}}
+          <Pill
+            @item={{item}}
+            @isAutoAttached={{false}}
+            @remove={{this.removeItem}}
+          />
         {{/if}}
       {{/each}}
       {{#if
@@ -91,7 +94,7 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
         </BoxelPill>
       {{/if}}
       {{#if this.canDisplayAddButton}}
-        {{#if (eq @submode 'code')}}
+        {{#if (and (eq @submode 'code') isAttachingFilesEnabled)}}
           <AddButton
             class={{cn 'attach-button' icon-only=this.itemsToDisplay.length}}
             @variant='pill'
@@ -162,17 +165,30 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
     this.areAllItemsDisplayed = !this.areAllItemsDisplayed;
   }
 
-  isCard = (item: CardDef | FileDef): item is CardDef => {
+  private isCard = (item: CardDef | FileDef): item is CardDef => {
     return isCardInstance(item);
   };
 
-  isAutoAttachedCard = (card: CardDef) => {
+  private isAutoAttachedCard = (card: CardDef) => {
     if (this.args.autoAttachedCards === undefined) {
       return false;
     }
     return this.args.autoAttachedCards.has(card);
   };
 
+  private isAutoAttachedFile = (file: FileDef) => {
+    if (this.args.autoAttachedFiles === undefined) {
+      return false;
+    }
+    return this.args.autoAttachedFiles.includes(file);
+  };
+
+  private isAutoAttached = (item: CardDef | FileDef) => {
+    return this.isCard(item)
+      ? this.isAutoAttachedCard(item)
+      : this.isAutoAttachedFile(item);
+  };
+
   private get items() {
     let cards = this.args.cardsToAttach ?? [];
     let files = this.args.filesToAttach ?? [];
@@ -231,7 +247,7 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
 
   @action
   private removeItem(item: CardDef | FileDef) {
-    if (cardApi(item)) {
+    if (isCardInstance(item)) {
       this.args.removeCard(item);
     } else {
       this.args.removeFile(item);

packages/host/app/components/ai-assistant/attachment-picker/index.gts

@@ -635,7 +635,7 @@ export default class Room extends Component<Signature> {
       // );
     } else {
       const fileIndex = this.filesToAttach?.findIndex(
-        (f) => f.sourceUrl === f.sourceUrl,
+        (f) => f.sourceUrl === file.sourceUrl,
       );
       if (fileIndex != undefined && fileIndex !== -1) {
         if (this.filesToAttach !== undefined) {

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

@@ -16,18 +16,22 @@ import {
   BoxelSelect,
 } from '@cardstack/boxel-ui/components';
 
-import { Deferred, type LocalPath } from '@cardstack/runtime-common';
+import {
+  Deferred,
+  RealmPaths,
+  type LocalPath,
+} from '@cardstack/runtime-common';
 
 import ModalContainer from '@cardstack/host/components/modal-container';
 
+import MatrixService from '@cardstack/host/services/matrix-service';
 import OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 
 import type RealmService from '@cardstack/host/services/realm';
 
 import { type FileDef } from 'https://cardstack.com/base/file-api';
 
 import FileTree from '../editor/file-tree';
-import MatrixService from '@cardstack/host/services/matrix-service';
 
 interface Signature {
   Args: {};
@@ -51,7 +55,7 @@ export default class AttachFileModal extends Component<Signature> {
   }
 
   // public API
-  async chooseFile<T>(): Promise<undefined | T> {
+  async chooseFile<T extends FileDef>(): Promise<undefined | T> {
     this.deferred = new Deferred();
     let defaultRealm = this.knownRealms.find(
       (r) =>
@@ -69,11 +73,12 @@ export default class AttachFileModal extends Component<Signature> {
 
   @action
   private pick(path: LocalPath | undefined) {
-    if (this.deferred && path) {
+    if (this.deferred && this.selectedRealm && path) {
+      let fileURL = new RealmPaths(this.selectedRealm.url).fileURL(path);
       let file = this.matrixService.fileAPI.createFileDef({
-        url: path,
-        sourceUrl: path,
-        name: path.split('/').pop()!,
+        url: fileURL.toString(),
+        sourceUrl: fileURL.toString(),
+        name: fileURL.toString().split('/').pop()!,
       });
       this.deferred.fulfill(file);
     }
@@ -200,7 +205,10 @@ export default class AttachFileModal extends Component<Signature> {
               data-test-attach-file-modal-realm-chooser
               as |item|
             >
-              <div class='realm-chooser__options'>
+              <div
+                class='realm-chooser__options'
+                data-test-attach-file-modal-realm-option={{item.info.name}}
+              >
                 <img src={{item.info.iconURL}} alt='realm icon' />
                 <span>{{item.info.name}}</span>
               </div>

packages/host/app/components/operator-mode/attach-file-modal.gts

@@ -9,8 +9,10 @@ import {
   RealmIcon,
   Switch,
 } from '@cardstack/boxel-ui/components';
-import { cn } from '@cardstack/boxel-ui/helpers';
-import { IconX } from '@cardstack/boxel-ui/icons';
+import { cn, cssVar } from '@cardstack/boxel-ui/helpers';
+import { IconX, CodeFile } from '@cardstack/boxel-ui/icons';
+
+import { isCardInstance } from '@cardstack/runtime-common';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 
@@ -41,13 +43,13 @@ export default class Pill extends Component<PillSignature> {
   }
 
   get id() {
-    return 'id' in this.args.item
+    return isCardInstance(this.args.item)
       ? this.args.item.id
       : this.args.item.sourceUrl;
   }
 
   get title() {
-    return 'title' in this.args.item
+    return isCardInstance(this.args.item)
       ? this.args.item.title
       : this.args.item.name;
   }
@@ -64,7 +66,15 @@ export default class Pill extends Component<PillSignature> {
       ...attributes
     >
       <:iconLeft>
-        <RealmIcon @realmInfo={{this.realm.info this.id}} />
+        {{#if (isCardInstance @item)}}
+          <RealmIcon @realmInfo={{this.realm.info this.id}} />
+        {{else}}
+          <CodeFile
+            width='16px'
+            height='16px'
+            style={{cssVar icon-color='#0031ff'}}
+          />
+        {{/if}}
       </:iconLeft>
       <:default>
         <div class='pill-content' title={{this.title}}>

packages/host/app/components/pill.gts

@@ -30,5 +30,6 @@ declare const config: {
   stripePaymentLink: string;
   featureFlags?: {
     ENABLE_PLAYGROUND: boolean;
+    ENABLE_ATTACHING_FILES: boolean;
   };
 };

packages/host/app/config/environment.d.ts

@@ -43,6 +43,7 @@ module.exports = function (environment) {
       process.env.RESOLVED_BASE_REALM_URL || 'http://localhost:4201/base/',
     featureFlags: {
       ENABLE_PLAYGROUND: process.env.ENABLE_PLAYGROUND || false,
+      ENABLE_ATTACHING_FILES: process.env.ENABLE_ATTACHING_FILES || false,
     },
   };
 
@@ -54,6 +55,7 @@ module.exports = function (environment) {
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
     ENV.featureFlags = {
       ENABLE_PLAYGROUND: true,
+      ENABLE_ATTACHING_FILES: true,
     };
   }
 

packages/host/config/environment.js

@@ -368,12 +368,43 @@ module('Acceptance | AI Assistant tests', function (hooks) {
       ],
     });
     await click('[data-test-open-ai-assistant]');
-    assert.dom('[data-test-choose-card-btn]').hasText('Attach File');
+    assert.dom('[data-test-choose-file-btn]').hasText('Attach File');
 
-    await click('[data-test-choose-card-btn]');
+    await click('[data-test-choose-file-btn]');
     assert.dom('[data-test-attach-file-modal]').exists();
+    assert.dom('[data-test-file="pet.gts"]').exists();
 
+    // Change realm
     await click('[data-test-attach-file-modal-realm-chooser]');
-    assert.dom(`[data-test-file="${testRealmURL}index"]`).exists();
+    await click('[data-test-attach-file-modal-realm-option="Base Workspace"]');
+    assert.dom('[data-test-file="boolean.gts"]').exists();
+
+    await click('[data-test-attach-file-modal-realm-chooser]');
+    await click(
+      '[data-test-attach-file-modal-realm-option="Test Workspace B"]',
+    );
+
+    // Add attachment item
+    await click('[data-test-file="person.gts"]');
+    await click('[data-test-attach-file-modal-add-button]');
+    assert.dom('[data-test-attached-item]').exists({ count: 1 });
+    assert.dom('[data-test-attached-item]').hasText('person.gts');
+    // Add attachment item
+    await click('[data-test-choose-file-btn]');
+    await click('[data-test-file="pet.gts"]');
+    await click('[data-test-attach-file-modal-add-button]');
+    assert.dom('[data-test-attached-item]').exists({ count: 2 });
+    assert
+      .dom(`[data-test-attached-item="${testRealmURL}person.gts"]`)
+      .hasText('person.gts');
+    assert
+      .dom(`[data-test-attached-item="${testRealmURL}pet.gts"]`)
+      .hasText('pet.gts');
+
+    // Add remove attachment item
+    await click(
+      `[data-test-attached-item="${testRealmURL}person.gts"] [data-test-remove-item-btn]`,
+    );
+    assert.dom('[data-test-attached-item]').hasText('pet.gts');
   });
 });