Merge branch 'cs-7853-add-ability-to-attach-code-you-are-looking-at-into-the-ai-assistant' into cs-7948-file-picker

Author: FadhlanR

Diff for: packages/boxel-icons/src/icons/file-code.gts

@@ -8,7 +8,7 @@ const IconComponent: TemplateOnlyComponent<Signature> = <template>
     xmlns='http://www.w3.org/2000/svg'
     width='24'
     height='24'
-    fill='none'
+    fill='var(--icon-color, #000)'
     stroke='currentColor'
     stroke-linecap='round'
     stroke-linejoin='round'

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

@@ -21,8 +21,8 @@ import {
   chooseFile,
 } from '@cardstack/runtime-common';
 
-import Pill from '@cardstack/host/components/pill';
-
+import CardPill from '@cardstack/host/components/card-pill';
+import FilePill from '@cardstack/host/components/file-pill';
 import ENV from '@cardstack/host/config/environment';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
@@ -34,8 +34,8 @@ interface Signature {
   Element: HTMLDivElement;
   Args: {
     autoAttachedCards?: TrackedSet<CardDef>;
-    autoAttachedFiles?: FileDef[];
     cardsToAttach: CardDef[] | undefined;
+    autoAttachedFile?: FileDef;
     filesToAttach: FileDef[] | undefined;
     chooseCard: (card: CardDef) => void;
     removeCard: (card: CardDef) => void;
@@ -53,30 +53,51 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
   <template>
     <div class='item-picker'>
       {{#each this.itemsToDisplay as |item|}}
-        {{#if (this.isAutoAttached item)}}
-          <Tooltip @placement='top'>
-            <:trigger>
-              <Pill
-                @item={{item}}
-                @isAutoAttached={{true}}
-                @remove={{this.removeItem}}
-              />
-            </:trigger>
+        {{#if (this.isCard item)}}
+          {{#if (this.isAutoAttachedCard item)}}
+            <Tooltip @placement='top'>
+              <:trigger>
+                <CardPill
+                  @card={{item}}
+                  @isAutoAttachedCard={{true}}
+                  @removeCard={{@removeCard}}
+                />
+              </:trigger>
 
-            <:content>
-              {{#if (this.isAutoAttached item)}}
-                Topmost
-                {{if (this.isCard item) 'card' 'file'}}
-                is shared automatically
-              {{/if}}
-            </:content>
-          </Tooltip>
+              <:content>
+                {{#if (this.isAutoAttachedCard item)}}
+                  Topmost card is shared automatically
+                {{/if}}
+              </:content>
+            </Tooltip>
+          {{else}}
+            <CardPill
+              @card={{item}}
+              @isAutoAttachedCard={{false}}
+              @removeCard={{@removeCard}}
+            />
+          {{/if}}
         {{else}}
-          <Pill
-            @item={{item}}
-            @isAutoAttached={{false}}
-            @remove={{this.removeItem}}
-          />
+          {{#if (this.isAutoAttachedFile item)}}
+            <Tooltip @placement='top'>
+              <:trigger>
+                <FilePill
+                  @file={{item}}
+                  @isAutoAttachedFile={{true}}
+                  @removeFile={{@removeFile}}
+                />
+              </:trigger>
+              <:content>
+                Currently opened file is shared automatically
+              </:content>
+            </Tooltip>
+          {{else}}
+            <FilePill
+              @file={{item}}
+              @isAutoAttachedFile={{false}}
+              @removeFile={{@removeFile}}
+            />
+          {{/if}}
         {{/if}}
       {{/each}}
       {{#if
@@ -170,37 +191,29 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
   };
 
   private isAutoAttachedCard = (card: CardDef) => {
-    if (this.args.autoAttachedCards === undefined) {
-      return false;
-    }
-    return this.args.autoAttachedCards.has(card);
+    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);
+    return this.args.autoAttachedFile?.sourceUrl === file.sourceUrl;
   };
 
   private get items() {
     let cards = this.args.cardsToAttach ?? [];
-    let files = this.args.filesToAttach ?? [];
+
     if (this.args.autoAttachedCards) {
       cards = [...new Set([...this.args.autoAttachedCards, ...cards])];
     }
 
     cards = cards.filter((card) => card.id); // Dont show new unsaved cards
-
-    if (this.args.autoAttachedFiles) {
-      files = [...new Set([...this.args.autoAttachedFiles, ...files])];
+    let files: FileDef[] = [];
+    if (this.args.autoAttachedFile) {
+      files = [...new Set([this.args.autoAttachedFile])];
     }
+    if (this.args.filesToAttach) {
+      files = [...files, ...this.args.filesToAttach];
+    }
+
     return [...cards, ...files];
   }
 
@@ -244,13 +257,4 @@ export default class AiAssistantAttachmentPicker extends Component<Signature> {
     let chosenFile: FileDef | undefined = await chooseFile();
     return chosenFile;
   });
-
-  @action
-  private removeItem(item: CardDef | FileDef) {
-    if (isCardInstance(item)) {
-      this.args.removeCard(item);
-    } else {
-      this.args.removeFile(item);
-    }
-  }
 }

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

@@ -20,7 +20,7 @@ export default class AiAssistantCardPickerUsage extends Component {
   cards: TrackedArray<CardDef> = new TrackedArray([]);
   @tracked maxNumberOfCards: number | undefined = undefined;
   @tracked autoAttachedCards?: TrackedSet<CardDef> = new TrackedSet();
-  @tracked autoAttachedFiles: TrackedArray<FileDef> = new TrackedArray([]);
+  @tracked autoAttachedFile?: FileDef | undefined;
   @tracked filesToAttach: TrackedArray<FileDef> = new TrackedArray([]);
 
   @action chooseCard(card: CardDef) {
@@ -62,10 +62,10 @@ export default class AiAssistantCardPickerUsage extends Component {
           @removeCard={{this.removeCard}}
           @chooseFile={{this.chooseFile}}
           @removeFile={{this.removeFile}}
-          @submode={{'interact'}}
           @maxNumberOfItemsToAttach={{this.maxNumberOfCards}}
-          @autoAttachedFiles={{this.autoAttachedFiles}}
+          @autoAttachedFile={{this.autoAttachedFile}}
           @filesToAttach={{this.filesToAttach}}
+          @submode={{'interact'}}
         />
         <CardCatalogModal />
       </:example>
@@ -81,9 +81,9 @@ export default class AiAssistantCardPickerUsage extends Component {
           @value={{this.autoAttachedCards}}
         />
         <Args.Object
-          @name='autoAttachedFiles'
-          @description='An array of files automatically attached to the message.'
-          @value={{this.autoAttachedFiles}}
+          @name='autoAttachedFile'
+          @description='A file automatically attached to the message.'
+          @value={{this.autoAttachedFile}}
         />
         <Args.Object
           @name='filesToAttach'
@@ -100,6 +100,11 @@ export default class AiAssistantCardPickerUsage extends Component {
           @description='Action to be taken when a card is removed'
           @value={{this.removeCard}}
         />
+        <Args.Action
+          @name='removeFile'
+          @description='Action to be taken when a file is removed'
+          @value={{this.removeFile}}
+        />
         <Args.Number
           @name='maxNumberOfCards'
           @description='Maximum number of cards that can be added. If a value is not provided, there is no limit.'

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

@@ -14,7 +14,7 @@ import { Button } from '@cardstack/boxel-ui/components';
 import { and, cn } from '@cardstack/boxel-ui/helpers';
 import { FailureBordered } from '@cardstack/boxel-ui/icons';
 
-import Pill from '@cardstack/host/components/pill';
+import CardPill from '@cardstack/host/components/card-pill';
 
 import type CardService from '@cardstack/host/services/card-service';
 
@@ -210,7 +210,7 @@ export default class AiAssistantMessage extends Component<Signature> {
           {{#if @resources.cards.length}}
             <div class='cards' data-test-message-cards>
               {{#each @resources.cards as |card|}}
-                <Pill @item={{card}} />
+                <CardPill @card={{card}} />
               {{/each}}
             </div>
           {{/if}}