@cardstack/boxel-cli 0.2.0 → 0.3.0-unstable.58

package/bundled-types/host-app/components/ai-assistant/attachment-picker/attach-button.gts

@@ -0,0 +1,176 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import CaptionsIcon from '@cardstack/boxel-icons/captions';
+import FileCode from '@cardstack/boxel-icons/file-code';
+import PlusIcon from '@cardstack/boxel-icons/plus';
+import { restartableTask } from 'ember-concurrency';
+
+import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+import { chooseCard, baseCardRef, chooseFile } from '@cardstack/runtime-common';
+
+import type { FileDef } from 'https://cardstack.com/base/file-api';
+
+interface AttachButtonTriggerSignature {
+  Element: HTMLButtonElement;
+  Args: {};
+}
+
+const AttachButtonTrigger: TemplateOnlyComponent<AttachButtonTriggerSignature> =
+  <template>
+    <PlusIcon
+      class='attach-button__trigger-icon'
+      width='22px'
+      height='22px'
+      data-test-attach-button
+    />
+  </template>;
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    chooseCard: (cardId: string) => void;
+    chooseFile: (file: FileDef) => void | Promise<void>;
+    chooseLocalFile: () => void | Promise<void>;
+  };
+}
+
+export default class AttachButton extends Component<Signature> {
+  <template>
+    <BoxelSelect
+      @options={{this.menuOptions}}
+      @selected={{undefined}}
+      @onChange={{this.handleSelection}}
+      @verticalPosition='above'
+      @renderInPlace={{true}}
+      @placeholder=''
+      @searchEnabled={{false}}
+      @matchTriggerWidth={{false}}
+      @dropdownClass='attach-button__dropdown'
+      @triggerComponent={{component AttachButtonTrigger}}
+      class='attach-button'
+      as |option|
+    >
+      {{#if (eq option 'Attach a Card')}}
+        <div class='menu-option' data-test-attach-card-btn>
+          <CaptionsIcon width='16px' height='16px' />
+          <span>{{option}}</span>
+        </div>
+      {{else if (eq option 'Attach a File (Workspace)')}}
+        <div
+          class='menu-option'
+          data-test-attach-workspace-file-btn
+          data-test-attach-file-btn
+        >
+          <FileCode width='16px' height='16px' />
+          <span>{{option}}</span>
+        </div>
+      {{else if (eq option 'Attach a File (Your Computer)')}}
+        <div class='menu-option' data-test-attach-local-file-btn>
+          <FileCode width='16px' height='16px' />
+          <span>{{option}}</span>
+        </div>
+      {{else}}
+        <span>{{option}}</span>
+      {{/if}}
+    </BoxelSelect>
+    <style scoped>
+      .attach-button {
+        border: none;
+        margin-top: var(--boxel-sp-4xs);
+      }
+      .attach-button:not(:disabled):hover,
+      .attach-button:not(:disabled):focus:not(:focus-visible) {
+        color: #e0e0e0;
+      }
+      .attach-button
+        + :deep(
+          .ember-basic-dropdown-content-wormhole-origin .attach-button__dropdown
+        ) {
+        border-radius: 10px;
+        width: 256px;
+        padding: 0;
+        position: absolute;
+        z-index: var(--boxel-layer-modal-urgent);
+        min-width: 140px;
+        box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
+        border: 1px solid rgba(0, 0, 0, 0.25);
+      }
+      .attach-button
+        + :deep(
+          .ember-basic-dropdown-content-wormhole-origin
+            .attach-button__dropdown
+            .ember-power-select-option
+        ) {
+        padding: 7.5px 5.5px;
+        border-radius: 6px;
+      }
+      .menu-option {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-wrap: nowrap;
+        font: 500 var(--boxel-font-sm);
+        letter-spacing: 0.2px;
+      }
+    </style>
+  </template>
+
+  get menuOptions(): string[] {
+    return [
+      'Attach a Card',
+      'Attach a File (Workspace)',
+      'Attach a File (Your Computer)',
+    ];
+  }
+
+  @action
+  handleSelection(option: string) {
+    if (option === 'Attach a Card') {
+      this.onAttachCard();
+    } else if (option === 'Attach a File (Workspace)') {
+      this.onChooseFile();
+    } else if (option === 'Attach a File (Your Computer)') {
+      this.onChooseLocalFile();
+    }
+  }
+
+  @action
+  onAttachCard() {
+    this.chooseCardTask.perform();
+  }
+
+  @action
+  onChooseFile() {
+    this.doChooseFile.perform();
+  }
+
+  @action
+  onChooseLocalFile() {
+    this.doChooseLocalFile.perform();
+  }
+
+  private chooseCardTask = restartableTask(async () => {
+    let cardId = await chooseCard({
+      filter: { type: baseCardRef },
+    });
+    if (cardId) {
+      this.args.chooseCard(cardId);
+    }
+  });
+
+  private doChooseFile = restartableTask(async () => {
+    let chosenFile: FileDef | undefined = await chooseFile();
+    if (chosenFile) {
+      await this.args.chooseFile(chosenFile);
+    }
+    return chosenFile;
+  });
+
+  private doChooseLocalFile = restartableTask(async () => {
+    await this.args.chooseLocalFile();
+  });
+}

package/bundled-types/host-app/components/ai-assistant/attachment-picker/attached-items.gts

@@ -0,0 +1,271 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { Tooltip, Pill } from '@cardstack/boxel-ui/components';
+import { and, gt, not } from '@cardstack/boxel-ui/helpers';
+
+import type { CardErrorJSONAPI } from '@cardstack/runtime-common';
+import {
+  localId,
+  isCardInstance,
+  isCardErrorJSONAPI,
+} from '@cardstack/runtime-common';
+
+import {
+  requiredModality,
+  modalityLabel,
+  isTextBasedContentType,
+} from '@cardstack/runtime-common/ai/modality';
+
+import CardPill from '@cardstack/host/components/card-pill';
+import FilePill from '@cardstack/host/components/file-pill';
+import type {
+  FileUploadState,
+  FileUploadStatus,
+} from '@cardstack/host/lib/file-upload-state';
+import { urlForRealmLookup } from '@cardstack/host/lib/utils';
+
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
+import type { FileDef } from 'https://cardstack.com/base/file-api';
+
+import type { TrackedSet } from 'tracked-built-ins';
+
+const MAX_ITEMS_TO_DISPLAY = 4;
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    items: (CardDef | FileDef | CardErrorJSONAPI)[];
+    autoAttachedCardIds?: TrackedSet<string>;
+    autoAttachedFiles?: FileDef[];
+    removeCard: (cardId: string) => void;
+    removeFile: (file: FileDef) => void;
+    chooseCard?: (cardId: string) => void;
+    chooseFile?: (file: FileDef) => void;
+    isLoaded: boolean;
+    autoAttachedCardTooltipMessage?: string;
+    fileUploadStates?: ReadonlyMap<string, FileUploadState>;
+    retryFileUpload?: (file: FileDef) => void;
+    inputModalities?: string[];
+  };
+}
+
+export default class AttachedItems extends Component<Signature> {
+  @tracked areAllItemsDisplayed = false;
+
+  @service declare private operatorModeStateService: OperatorModeStateService;
+
+  get itemsToDisplay() {
+    return this.areAllItemsDisplayed
+      ? this.args.items
+      : this.args.items.slice(0, MAX_ITEMS_TO_DISPLAY);
+  }
+
+  private isCard = (item: CardDef | FileDef): item is CardDef => {
+    return isCardInstance(item);
+  };
+
+  private isAutoAttachedCard = (cardId: string): boolean => {
+    return this.args.autoAttachedCardIds?.has(cardId) ?? false;
+  };
+
+  private isAutoAttachedFile = (file: FileDef): boolean => {
+    return (
+      this.args.autoAttachedFiles?.some(
+        (autoFile) => autoFile.sourceUrl === file.sourceUrl,
+      ) ?? false
+    );
+  };
+
+  @action
+  private toggleViewAllAttachedCards() {
+    this.areAllItemsDisplayed = !this.areAllItemsDisplayed;
+  }
+
+  private getCardErrorRealm(cardError: CardErrorJSONAPI) {
+    return cardError.realm ?? this.operatorModeStateService.realmURL;
+  }
+
+  @action
+  private handleRemoveCard(cardId: string) {
+    this.args.removeCard(cardId);
+  }
+
+  @action
+  private handleChooseCard(cardId: string) {
+    if (this.args.chooseCard) {
+      this.args.chooseCard(cardId);
+    }
+  }
+
+  @action
+  private handleChooseFile(file: FileDef) {
+    if (this.args.chooseFile) {
+      this.args.chooseFile(file);
+    }
+  }
+
+  @action
+  private handleRemoveFile(file: FileDef) {
+    this.args.removeFile(file);
+  }
+
+  private getUploadStatus = (file: FileDef): FileUploadStatus | undefined => {
+    let sourceUrl = file.sourceUrl;
+    if (!sourceUrl) {
+      return undefined;
+    }
+    return this.args.fileUploadStates?.get(sourceUrl)?.status;
+  };
+
+  private getModalityWarning = (file: FileDef): string | undefined => {
+    let modality = requiredModality(file.contentType);
+    if (modality) {
+      // Multimodal type — warn only if model doesn't support it
+      let modalities = this.args.inputModalities;
+      if (modalities && !modalities.includes(modality)) {
+        return `Model does not support ${modalityLabel(modality)}. Only metadata will be sent.`;
+      }
+      return undefined;
+    }
+    // Non-multimodal, non-text files only get metadata sent
+    if (!isTextBasedContentType(file.contentType)) {
+      return 'File type not supported. Will send file metadata only.';
+    }
+    return undefined;
+  };
+
+  <template>
+    <div class='attached-items' ...attributes>
+      {{#if @isLoaded}}
+        {{#each this.itemsToDisplay as |item|}}
+          {{#if (isCardErrorJSONAPI item)}}
+            {{#if item.id}}
+              {{#if (this.isAutoAttachedCard item.id)}}
+                <Tooltip @placement='top'>
+                  <:trigger>
+                    <CardPill
+                      @cardId={{item.id}}
+                      @borderType='dashed'
+                      @onClick={{fn this.handleChooseCard item.id}}
+                      @onRemove={{fn this.handleRemoveCard item.id}}
+                      @urlForRealmLookup={{this.getCardErrorRealm item}}
+                      data-test-autoattached-card={{item.id}}
+                    />
+                  </:trigger>
+
+                  <:content>
+                    {{#if @autoAttachedCardTooltipMessage}}
+                      {{@autoAttachedCardTooltipMessage}}
+                    {{else if (this.isAutoAttachedCard item.id)}}
+                      Topmost card is shared automatically
+                    {{/if}}
+                  </:content>
+                </Tooltip>
+              {{else}}
+                <CardPill
+                  @cardId={{item.id}}
+                  @borderType='solid'
+                  @onRemove={{fn this.handleRemoveCard item.id}}
+                  @urlForRealmLookup={{this.getCardErrorRealm item}}
+                />
+              {{/if}}
+            {{/if}}
+          {{else if (this.isCard item)}}
+            {{#if (this.isAutoAttachedCard item.id)}}
+              <Tooltip @placement='top'>
+                <:trigger>
+                  <CardPill
+                    @cardId={{idFor item}}
+                    @borderType='dashed'
+                    @onClick={{fn this.handleChooseCard (idFor item)}}
+                    @onRemove={{fn this.handleRemoveCard (idFor item)}}
+                    @urlForRealmLookup={{urlForRealmLookup item}}
+                    data-test-autoattached-card={{idFor item}}
+                  />
+                </:trigger>
+
+                <:content>
+                  {{#if @autoAttachedCardTooltipMessage}}
+                    {{@autoAttachedCardTooltipMessage}}
+                  {{else if (this.isAutoAttachedCard item.id)}}
+                    Topmost card is shared automatically
+                  {{/if}}
+                </:content>
+              </Tooltip>
+            {{else}}
+              <CardPill
+                @cardId={{idFor item}}
+                @borderType='solid'
+                @onRemove={{fn this.handleRemoveCard (idFor item)}}
+                @urlForRealmLookup={{urlForRealmLookup item}}
+              />
+            {{/if}}
+          {{else}}
+            {{#if (this.isAutoAttachedFile item)}}
+              <Tooltip @placement='top'>
+                <:trigger>
+                  <FilePill
+                    @file={{item}}
+                    @borderType='dashed'
+                    @onClick={{fn this.handleChooseFile item}}
+                    @onRemove={{fn this.handleRemoveFile item}}
+                    @uploadStatus={{this.getUploadStatus item}}
+                    @onRetry={{if @retryFileUpload (fn @retryFileUpload item)}}
+                    @warningMessage={{this.getModalityWarning item}}
+                    data-test-autoattached-file={{item.sourceUrl}}
+                  />
+                </:trigger>
+                <:content>
+                  Currently opened file is shared automatically
+                </:content>
+              </Tooltip>
+            {{else}}
+              <FilePill
+                @file={{item}}
+                @borderType='solid'
+                @onRemove={{fn this.handleRemoveFile item}}
+                @uploadStatus={{this.getUploadStatus item}}
+                @onRetry={{if @retryFileUpload (fn @retryFileUpload item)}}
+                @warningMessage={{this.getModalityWarning item}}
+              />
+            {{/if}}
+          {{/if}}
+        {{/each}}
+        {{#if
+          (and
+            (gt @items.length MAX_ITEMS_TO_DISPLAY)
+            (not this.areAllItemsDisplayed)
+          )
+        }}
+          <Pill
+            @kind='button'
+            {{on 'click' this.toggleViewAllAttachedCards}}
+            data-test-view-all
+          >
+            View All ({{@items.length}})
+          </Pill>
+        {{/if}}
+      {{/if}}
+    </div>
+    <style scoped>
+      .attached-items {
+        background-color: var(--boxel-light);
+        color: var(--boxel-dark);
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxxs);
+      }
+    </style>
+  </template>
+}
+
+function idFor(instance: CardDef) {
+  return instance.id ?? instance[localId];
+}

package/bundled-types/host-app/components/ai-assistant/attachment-picker/index.gts

@@ -0,0 +1,144 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+
+import { consume } from 'ember-provide-consume-context';
+
+import {
+  GetCardCollectionContextName,
+  type getCardCollection,
+} from '@cardstack/runtime-common';
+
+import type { FileUploadState } from '@cardstack/host/lib/file-upload-state';
+
+import type { FileDef } from 'https://cardstack.com/base/file-api';
+
+import AttachButton from './attach-button';
+import AttachedItems from './attached-items';
+
+import type { WithBoundArgs } from '@glint/template';
+import type { TrackedSet } from 'tracked-built-ins';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    autoAttachedCardIds?: TrackedSet<string>;
+    cardIdsToAttach: string[] | undefined;
+    autoAttachedFiles?: FileDef[];
+    filesToAttach: FileDef[] | undefined;
+    chooseCard: (cardId: string) => void;
+    removeCard: (cardId: string) => void;
+    chooseFile: (file: FileDef) => void;
+    chooseLocalFile: () => void | Promise<void>;
+    removeFile: (file: FileDef) => void;
+    autoAttachedCardTooltipMessage?: string;
+    fileUploadStates?: ReadonlyMap<string, FileUploadState>;
+    retryFileUpload?: (file: FileDef) => void;
+    inputModalities?: string[];
+  };
+  Blocks: {
+    default: [
+      WithBoundArgs<
+        typeof AttachedItems,
+        | 'items'
+        | 'autoAttachedCardIds'
+        | 'autoAttachedFiles'
+        | 'removeCard'
+        | 'removeFile'
+        | 'chooseCard'
+        | 'chooseFile'
+        | 'autoAttachedCardTooltipMessage'
+        | 'isLoaded'
+        | 'fileUploadStates'
+        | 'retryFileUpload'
+        | 'inputModalities'
+      >,
+      WithBoundArgs<
+        typeof AttachButton,
+        'chooseCard' | 'chooseFile' | 'chooseLocalFile'
+      >,
+    ];
+  };
+}
+
+export default class AiAssistantAttachmentPicker extends Component<Signature> {
+  <template>
+    {{yield
+      (component
+        AttachedItems
+        isLoaded=this.isLoaded
+        items=this.items
+        autoAttachedCardIds=@autoAttachedCardIds
+        autoAttachedFiles=@autoAttachedFiles
+        removeCard=@removeCard
+        removeFile=@removeFile
+        chooseCard=@chooseCard
+        chooseFile=@chooseFile
+        autoAttachedCardTooltipMessage=@autoAttachedCardTooltipMessage
+        fileUploadStates=@fileUploadStates
+        retryFileUpload=@retryFileUpload
+        inputModalities=@inputModalities
+      )
+      (component
+        AttachButton
+        chooseCard=@chooseCard
+        chooseFile=@chooseFile
+        chooseLocalFile=@chooseLocalFile
+      )
+    }}
+  </template>
+
+  @consume(GetCardCollectionContextName)
+  declare private getCardCollection: getCardCollection;
+
+  @cached
+  private get cardCollection(): ReturnType<getCardCollection> {
+    return this.getCardCollection(this, () => this.cardIds);
+  }
+
+  private get items() {
+    return [...this.cards, ...this.cardErrors, ...this.files];
+  }
+
+  private get isLoaded() {
+    return this.cardCollection?.isLoaded;
+  }
+
+  private get cards() {
+    return this.cardCollection?.cards ?? [];
+  }
+
+  private get cardErrors() {
+    return this.cardCollection?.cardErrors ?? [];
+  }
+
+  private get cardIds() {
+    let cardIds = this.args.cardIdsToAttach ?? [];
+
+    if (this.args.autoAttachedCardIds) {
+      cardIds = [...new Set([...this.args.autoAttachedCardIds, ...cardIds])];
+    }
+
+    cardIds = cardIds.filter(Boolean); // Dont show new unsaved cards
+    return cardIds;
+  }
+
+  private get files() {
+    let files = this.args.filesToAttach ?? [];
+
+    let autoAttachedFiles = this.args.autoAttachedFiles ?? [];
+
+    if (autoAttachedFiles.length === 0) {
+      return files;
+    }
+
+    let autoFilesToPrepend = autoAttachedFiles.filter(
+      (file) => !files.some((item) => item.sourceUrl === file.sourceUrl),
+    );
+
+    if (autoFilesToPrepend.length === 0) {
+      return files;
+    }
+
+    return [...autoFilesToPrepend, ...files];
+  }
+}