@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/host-app/components/matrix/room-message-command.gts

@@ -0,0 +1,330 @@
+import { array, hash } from '@ember/helper';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { cached } from '@glimmer/tracking';
+
+import { modifier } from 'ember-modifier';
+
+import { resource, use } from 'ember-resources';
+
+import { TrackedObject } from 'tracked-built-ins';
+
+import {
+  Alert,
+  CardContainer,
+  CardHeader,
+} from '@cardstack/boxel-ui/components';
+
+import { bool, cn, eq, not, toMenuItems } from '@cardstack/boxel-ui/helpers';
+
+import {
+  cardTypeDisplayName,
+  cardTypeIcon,
+  getMenuItems,
+} from '@cardstack/runtime-common';
+
+import type { CommandRequest } from '@cardstack/runtime-common/commands';
+
+import type MessageCommand from '@cardstack/host/lib/matrix-classes/message-command';
+
+import type { RoomResource } from '@cardstack/host/resources/room';
+import type CommandService from '@cardstack/host/services/command-service';
+import type MatrixService from '@cardstack/host/services/matrix-service';
+
+import type { MonacoSDK } from '@cardstack/host/services/monaco-service';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+import type RealmService from '@cardstack/host/services/realm';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
+
+import CodeBlock from '../ai-assistant/code-block';
+import CardRenderer from '../card-renderer';
+
+import type { ApplyButtonState } from '../ai-assistant/apply-button';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    roomResource: RoomResource;
+    messageCommand: MessageCommand;
+    roomId: string;
+    runCommand: () => void;
+    isError?: boolean;
+    isPending?: boolean;
+    isCompact?: boolean;
+    isStreaming: boolean;
+    monacoSDK: MonacoSDK;
+  };
+}
+
+export default class RoomMessageCommand extends Component<Signature> {
+  @service declare private commandService: CommandService;
+  @service declare private matrixService: MatrixService;
+  @service declare private realm: RealmService;
+  @service declare private operatorModeStateService: OperatorModeStateService;
+
+  private get previewCommandCode() {
+    let { name, arguments: payload } = this.args.messageCommand;
+    return JSON.stringify({ name, payload }, null, 2);
+  }
+
+  @cached
+  private get applyButtonState(): ApplyButtonState {
+    if (this.failedCommandState) {
+      return 'failed';
+    }
+    if (this.didFailCorrectnessCheck) {
+      return 'applied-with-error';
+    }
+    return this.args.messageCommand?.status ?? 'ready';
+  }
+
+  @use private commandResultCard = resource(() => {
+    let initialState = { card: undefined } as { card: CardDef | undefined };
+    let state = new TrackedObject(initialState);
+    if (this.args.messageCommand.commandResultFileDef) {
+      this.args.messageCommand.getCommandResultCard().then((card) => {
+        state.card = card;
+      });
+    }
+    return state;
+  });
+
+  private get isDisplayingCode() {
+    return this.args.roomResource.isDisplayingCode(
+      this.args.messageCommand.commandRequest as CommandRequest,
+    );
+  }
+
+  private toggleViewCode = () => {
+    this.args.roomResource.toggleViewCode(
+      this.args.messageCommand.commandRequest as CommandRequest,
+    );
+  };
+
+  private scrollBottomIntoView = modifier((element: HTMLElement) => {
+    let editor = this.args.monacoSDK.editor
+      .getEditors()
+      .find((editor) => element.contains(editor.getContainerDomNode()));
+    let editorHeight = editor?.getContentHeight() ?? 0;
+    if (!editorHeight || editorHeight < 0) {
+      return;
+    }
+    let heightOfOtherChildren = [...element.children]
+      .filter((childEl) => childEl !== editor?.getContainerDomNode())
+      .reduce((acc, childEl) => acc + (childEl as HTMLElement).offsetHeight, 0);
+    element.style.height = `${editorHeight + heightOfOtherChildren}px`; // max-height is constrained by CSS
+    this.scrollIntoView(element.parentElement as HTMLElement);
+  });
+
+  private scrollIntoView(element: HTMLElement) {
+    let { top, bottom } = element.getBoundingClientRect();
+    let isVerticallyInView = top >= 0 && bottom <= window.innerHeight;
+
+    if (!isVerticallyInView) {
+      element.scrollIntoView({ block: 'end' });
+    }
+  }
+
+  private get headerTitle() {
+    if (this.commandResultCard.card) {
+      return cardTypeDisplayName(this.commandResultCard.card);
+    }
+    return '';
+  }
+
+  private get shouldDisplayResultCard() {
+    let commandName = this.args.messageCommand.name ?? '';
+    return (
+      !!this.commandResultCard.card &&
+      commandName !== 'checkCorrectness' &&
+      !commandName.startsWith('switch-submode')
+    );
+  }
+
+  private get didFailCorrectnessCheck() {
+    if (this.args.messageCommand.name !== 'checkCorrectness') {
+      return false;
+    }
+    let card = this.commandResultCard.card as
+      | { correct?: boolean; errors?: unknown[] }
+      | undefined;
+    if (!card) {
+      return false;
+    }
+    let hasErrors =
+      Array.isArray(card.errors) && card.errors.filter(Boolean).length > 0;
+    let isMarkedIncorrect = card.correct === false;
+    return hasErrors || isMarkedIncorrect;
+  }
+
+  private get moreOptionsMenuItems() {
+    let menuItems =
+      this.commandResultCard.card?.[getMenuItems]?.({
+        canEdit: false,
+        cardCrudFunctions: {},
+        menuContext: 'ai-assistant',
+        menuContextParams: {
+          activeRealmURL: this.activeRealmURL,
+          canEditActiveRealm: this.canEditActiveRealm,
+        },
+        commandContext: this.commandService.commandContext,
+      }) ?? [];
+    return toMenuItems(menuItems);
+  }
+
+  private get canEditActiveRealm() {
+    let activeRealmURL = this.activeRealmURL;
+    return activeRealmURL ? this.realm.canWrite(activeRealmURL) : false;
+  }
+
+  private get activeRealmURL() {
+    return this.operatorModeStateService.realmURL;
+  }
+
+  private get commandResultCardForRendering(): CardDef {
+    if (!this.commandResultCard.card) {
+      throw new Error('Command result card is not available');
+    }
+    return this.commandResultCard.card;
+  }
+
+  @cached
+  private get failedCommandState() {
+    let commandRequest = this.args.messageCommand
+      .commandRequest as CommandRequest;
+    if (!commandRequest.id) {
+      return undefined;
+    }
+    return this.matrixService.failedCommandState.get(commandRequest.id);
+  }
+
+  private get invalidCommandState() {
+    return (
+      this.args.messageCommand.status === 'invalid' &&
+      !!this.args.messageCommand.failureReason
+    );
+  }
+
+  private get commandDescription() {
+    return this.args.messageCommand.description ?? 'Preparing tool call...';
+  }
+
+  private get hasFailedState() {
+    return !!(this.failedCommandState || this.didFailCorrectnessCheck);
+  }
+
+  <template>
+    <div
+      class={{cn
+        'room-message-command'
+        is-pending=@isPending
+        is-error=@isError
+        is-failed=(bool this.hasFailedState)
+        compact=@isCompact
+      }}
+      data-test-command-id={{@messageCommand.commandRequest.id}}
+      ...attributes
+    >
+      {{#if @isStreaming}}
+        <CodeBlock
+          class={{cn 'command-code-block' compact=@isCompact}}
+          @monacoSDK={{@monacoSDK}}
+          @codeData={{hash code=this.previewCommandCode language='json'}}
+          data-test-command-card-idle={{not
+            (eq @messageCommand.status 'applying')
+          }}
+          as |codeBlock|
+        >
+          <codeBlock.commandHeader
+            @commandDescription={{this.commandDescription}}
+            @action={{@runCommand}}
+            @actionVerb={{@messageCommand.actionVerb}}
+            @code={{this.previewCommandCode}}
+            @isCompact={{@isCompact}}
+            @commandState='preparing'
+          />
+        </CodeBlock>
+      {{else}}
+        <CodeBlock
+          class={{cn 'command-code-block' compact=@isCompact}}
+          {{this.scrollBottomIntoView}}
+          @monacoSDK={{@monacoSDK}}
+          @codeData={{hash code=this.previewCommandCode language='json'}}
+          data-test-command-card-idle={{not
+            (eq @messageCommand.status 'applying')
+          }}
+          as |codeBlock|
+        >
+          <codeBlock.commandHeader
+            @commandDescription={{@messageCommand.description}}
+            @action={{@runCommand}}
+            @actionVerb={{@messageCommand.actionVerb}}
+            @code={{this.previewCommandCode}}
+            @commandState={{this.applyButtonState}}
+            @isCompact={{@isCompact}}
+            @isDisplayingCode={{this.isDisplayingCode}}
+            @toggleCode={{this.toggleViewCode}}
+          />
+          {{#if this.isDisplayingCode}}
+            <codeBlock.editor />
+          {{/if}}
+        </CodeBlock>
+        {{#if this.failedCommandState}}
+          <Alert @type='error' as |Alert|>
+            <Alert.Messages
+              @messages={{array this.failedCommandState.message}}
+            />
+            <Alert.Action @action={{@runCommand}} @actionName='Retry' />
+          </Alert>
+        {{else if this.invalidCommandState}}
+          <Alert @type='warning' as |Alert|>
+            <Alert.Messages @messages={{array @messageCommand.failureReason}} />
+            <Alert.Action @action={{@runCommand}} @actionName='Try Anyway' />
+          </Alert>
+        {{/if}}
+        {{#if this.shouldDisplayResultCard}}
+          <CardContainer
+            @displayBoundaries={{false}}
+            class='command-result-card-preview'
+            data-test-command-result-container
+          >
+            <CardHeader
+              @cardTypeDisplayName={{this.headerTitle}}
+              @cardTypeIcon={{cardTypeIcon this.commandResultCardForRendering}}
+              @moreOptionsMenuItems={{this.moreOptionsMenuItems}}
+              class='command-result-card-header'
+              data-test-command-result-header
+            />
+            <CardRenderer
+              @card={{this.commandResultCardForRendering}}
+              @format='embedded'
+              @displayContainer={{false}}
+              data-test-boxel-command-result
+            />
+          </CardContainer>
+        {{/if}}
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .room-message-command > * + * {
+        margin-top: var(--boxel-sp-xs);
+      }
+      .command-result-card-preview {
+        margin-top: var(--boxel-sp);
+      }
+      .command-result-card-header {
+        --boxel-label-color: var(--boxel-450);
+        --boxel-label-font-size: var(--boxel-font-size-xs);
+        --boxel-label-line-height: calc(15 / 11);
+        --boxel-header-padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxxs) 0
+          var(--left-padding);
+      }
+      .command-result-card-header :deep(.content) {
+        gap: 0;
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/matrix/room-message.gts

@@ -0,0 +1,261 @@
+import { fn } from '@ember/helper';
+import type Owner from '@ember/owner';
+import { service } from '@ember/service';
+
+import Component from '@glimmer/component';
+import { cached, tracked } from '@glimmer/tracking';
+
+import { task } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+
+import { consume } from 'ember-provide-consume-context';
+
+import { Avatar } from '@cardstack/boxel-ui/components';
+
+import { bool } from '@cardstack/boxel-ui/helpers';
+
+import {
+  type getCardCollection,
+  GetCardCollectionContextName,
+} from '@cardstack/runtime-common';
+
+import type MessageCommand from '@cardstack/host/lib/matrix-classes/message-command';
+import type { RoomResource } from '@cardstack/host/resources/room';
+import type CommandService from '@cardstack/host/services/command-service';
+import type { MonacoSDK } from '@cardstack/host/services/monaco-service';
+
+import AiAssistantMessage from '../ai-assistant/message';
+import { aiBotUserId } from '../ai-assistant/panel';
+
+import RoomMessageCommand from './room-message-command';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    roomId: string;
+    // use a RoomResource as an arg instead of message to keep this component stable
+    // when new messages are received--otherwise a RoomMessage component is created for
+    // _every_ matrix event received regardless if the event had anything to do with this
+    // message.
+    roomResource: RoomResource;
+    index: number;
+    monacoSDK: MonacoSDK;
+    isStreaming: boolean;
+    isMostRecentMessage?: boolean;
+    retryAction?: () => void;
+    isPending?: boolean;
+    registerScroller: (args: {
+      index: number;
+      element: HTMLElement;
+      scrollTo: Element['scrollIntoView'];
+    }) => void;
+    unregisterScroller?: (args: {
+      index: number;
+      element: HTMLElement;
+    }) => void;
+  };
+}
+
+const STREAMING_TIMEOUT_MS = 3 * 60 * 1000;
+export const STREAMING_TIMEOUT_MINUTES = STREAMING_TIMEOUT_MS / 60_000;
+
+export default class RoomMessage extends Component<Signature> {
+  @consume(GetCardCollectionContextName)
+  declare private getCardCollection: getCardCollection;
+  @tracked private timeoutCheckTimestamp = Date.now();
+  @tracked private waitStartTimestamp: number | undefined;
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    this.checkStreamingTimeout.perform();
+  }
+
+  private get message() {
+    return this.args.roomResource.messages[this.args.index];
+  }
+
+  @cached
+  private get attachedCardCollection(): ReturnType<getCardCollection> {
+    return this.getCardCollection(
+      this,
+      () => this.message.attachedCardIds ?? [],
+    );
+  }
+
+  private checkStreamingTimeout = task(async () => {
+    if (!this.isFromAssistant || !this.args.isStreaming) {
+      return;
+    }
+
+    if (this.message.isStreamingFinished === true) {
+      return;
+    }
+
+    this.bumpTimeoutCheckTimestamp();
+
+    // Do this check every second
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    this.checkStreamingTimeout.perform();
+  });
+
+  private waitLonger = () => {
+    this.waitStartTimestamp = Date.now();
+    this.bumpTimeoutCheckTimestamp();
+    if (!this.checkStreamingTimeout.isRunning) {
+      this.checkStreamingTimeout.perform();
+    }
+  };
+
+  private bumpTimeoutCheckTimestamp() {
+    // This is needed for the streamingTimeout getter reactivity - it will update on every tick of the checkStreamingTimeout task
+    this.timeoutCheckTimestamp = Date.now();
+  }
+
+  private get streamingTimeout() {
+    if (!this.isFromAssistant || !this.args.isStreaming) {
+      return false;
+    }
+
+    if (!this.isLastAssistantMessage) {
+      return false;
+    }
+
+    if (this.message.isStreamingFinished === true) {
+      return false;
+    }
+
+    let lastActivityTimestamp = Math.max(
+      Number(this.message.updated),
+      this.waitStartTimestamp ?? 0,
+    );
+
+    // If message is streaming and hasn't been updated in the last three minutes, show a timeout message
+    return (
+      this.timeoutCheckTimestamp - lastActivityTimestamp > STREAMING_TIMEOUT_MS
+    );
+  }
+
+  private get isFromAssistant() {
+    return this.message.author.userId === aiBotUserId;
+  }
+
+  private get isLastAssistantMessage() {
+    return (
+      this.isFromAssistant &&
+      this.args.index === this.args.roomResource.indexOfLastNonDebugMessage
+    );
+  }
+
+  private get userMessageThisMessageIsRespondingTo() {
+    if (!this.isFromAssistant) {
+      return undefined;
+    }
+
+    // Going backwards, find the first message that is not from the assistant
+    for (let i = this.args.index - 1; i >= 0; i--) {
+      let message = this.args.roomResource.messages[i];
+      if (message.author.userId !== aiBotUserId) {
+        return message;
+      }
+    }
+
+    return undefined;
+  }
+
+  private run = task(async (command: MessageCommand) => {
+    return this.commandService.run.unlinked().perform(command);
+  });
+
+  <template>
+    {{! We Intentionally wait until message resources are loaded (i.e. have a value) before rendering the message.
+      This is because if the message resources render asynchronously after the message is already rendered (e.g. card pills),
+      it is problematic to ensure the last message sticks to the bottom of the screen.
+      In AiAssistantMessage, there is a ScrollIntoView modifier that will scroll the last message into view (i.e. scroll to the bottom) when it renders.
+      If we let things in the message render asynchronously, the height of the message will change after that and the scroll position will move up a bit (i.e. not stick to the bottom).
+    }}
+    {{#if this.attachedCardCollection.isLoaded}}
+      <AiAssistantMessage
+        id='message-container-{{@index}}'
+        @messageHTML={{this.message.bodyHTML}}
+        @messageHTMLParts={{this.message.htmlParts}}
+        @reasoningContent={{this.message.reasoningContent}}
+        @monacoSDK={{@monacoSDK}}
+        @datetime={{this.message.created}}
+        @roomId={{this.message.roomId}}
+        @eventId={{this.message.eventId}}
+        @index={{@index}}
+        @isLastAssistantMessage={{this.isLastAssistantMessage}}
+        @isMostRecentMessage={{@isMostRecentMessage}}
+        @userMessageThisMessageIsRespondingTo={{this.userMessageThisMessageIsRespondingTo}}
+        @registerScroller={{@registerScroller}}
+        @unregisterScroller={{@unregisterScroller}}
+        @isFromAssistant={{this.isFromAssistant}}
+        {{! @glint-ignore }}
+        @profileAvatar={{component
+          Avatar
+          isReady=true
+          userId=this.message.author.userId
+          displayName=this.message.author.displayName
+        }}
+        @collectionResource={{this.attachedCardCollection}}
+        @files={{this.message.attachedFiles}}
+        @attachedCardsAsFiles={{this.message.attachedCardsAsFiles}}
+        @errorMessage={{this.errorMessage}}
+        @reloadBillingData={{this.message.reloadBillingData}}
+        @isDebugMessage={{this.message.isDebugMessage}}
+        @isStreaming={{@isStreaming}}
+        @retryAction={{@retryAction}}
+        @waitAction={{if this.streamingTimeout this.waitLonger}}
+        @isPending={{@isPending}}
+        @hideMeta={{this.message.isCodePatchCorrectness}}
+        @isCodePatchCorrectness={{this.message.isCodePatchCorrectness}}
+        @commands={{this.message.commands}}
+        data-test-boxel-message-from={{this.message.author.name}}
+        data-test-boxel-message-instance-id={{this.message.instanceId}}
+        ...attributes
+      >
+        {{#each this.message.commands as |command|}}
+          <RoomMessageCommand
+            @messageCommand={{command}}
+            @roomResource={{@roomResource}}
+            @runCommand={{fn (perform this.run) command}}
+            @roomId={{@roomId}}
+            @isPending={{@isPending}}
+            @isCompact={{this.message.isCodePatchCorrectness}}
+            @monacoSDK={{@monacoSDK}}
+            @isError={{bool this.errorMessage}}
+            @isStreaming={{@isStreaming}}
+          />
+        {{/each}}
+      </AiAssistantMessage>
+    {{/if}}
+  </template>
+
+  @service declare commandService: CommandService;
+
+  knownErrorMessagePrefixes: { [errorMessagePrefix: string]: string }[] = [
+    {
+      'MatrixError: [413] event too large':
+        'Response from the AI assistant was too large to process',
+    },
+  ];
+
+  @cached
+  private get errorMessage() {
+    if (this.message.errorMessage) {
+      let humanFriendlyErrorMessage = null;
+      for (let errorMessagePrefix of this.knownErrorMessagePrefixes) {
+        let key = Object.keys(errorMessagePrefix)[0];
+        if (this.message.errorMessage.startsWith(key)) {
+          humanFriendlyErrorMessage = errorMessagePrefix[key];
+        }
+      }
+      return humanFriendlyErrorMessage || this.message.errorMessage;
+    }
+    if (this.streamingTimeout) {
+      return `This message has been processing for a long time (more than ${STREAMING_TIMEOUT_MINUTES} minutes), possibly due to a delay in response time, or due to a system error.`; // Will show a "Wait longer" and "Retry" button
+    }
+    return undefined;
+  }
+}