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

package/bundled-types/host-app/components/ai-assistant/llm-mode-toggle.gts

@@ -0,0 +1,113 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import { Tooltip } from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+import type { LLMMode } from '@cardstack/runtime-common/matrix-constants';
+
+interface Signature {
+  Args: {
+    selected: LLMMode;
+    onChange: (mode: LLMMode) => void;
+    disabled?: boolean;
+    onExpand?: () => void;
+    onCollapse?: () => void;
+  };
+  Element: HTMLElement;
+}
+
+export default class LLMModeToggle extends Component<Signature> {
+  private get selected(): LLMMode {
+    return this.args.selected === 'act' ? 'act' : 'ask';
+  }
+
+  <template>
+    <div class='llm-mode-toggle' ...attributes>
+      <Tooltip @placement='top'>
+        <:trigger>
+          <button
+            type='button'
+            class='llm-mode-option {{if (eq this.selected "ask") "selected"}}'
+            data-test-llm-mode-option='ask'
+            disabled={{@disabled}}
+            {{on 'click' (fn this.handleOptionClick 'ask')}}
+          >
+            Ask
+          </button>
+        </:trigger>
+        <:content>
+          <div class='llm-mode-option-tooltip'>
+            Ask mode: Get answers and explanations without making changes
+          </div>
+        </:content>
+      </Tooltip>
+
+      <Tooltip @placement='top'>
+        <:trigger>
+          <button
+            type='button'
+            class='llm-mode-option {{if (eq this.selected "act") "selected"}}'
+            data-test-llm-mode-option='act'
+            disabled={{@disabled}}
+            {{on 'click' (fn this.handleOptionClick 'act')}}
+          >
+            Act
+          </button>
+        </:trigger>
+        <:content>
+          <div class='llm-mode-option-tooltip'>
+            Act mode: Automatically apply code changes and execute commands
+          </div>
+        </:content>
+      </Tooltip>
+    </div>
+    <style scoped>
+      .llm-mode-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--boxel-650);
+        border-radius: var(--boxel-pill-radius, 999px);
+        overflow: hidden;
+        border-width: 0;
+        box-shadow: none;
+        padding: 1.5px 2px 2px 2px;
+      }
+      .llm-mode-option {
+        flex: 1 1 0;
+        background: none;
+        border: none;
+        border-radius: var(--boxel-border-radius);
+        padding-block: 2px;
+        color: var(--boxel-light);
+        font: 700 var(--boxel-font-xs);
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          color 0.15s;
+      }
+      .llm-mode-option.selected {
+        background: var(--boxel-teal);
+        color: var(--boxel-dark);
+        height: 100%;
+      }
+      .llm-mode-option:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .llm-mode-option-tooltip {
+        max-width: 160px;
+      }
+    </style>
+  </template>
+
+  @action
+  private handleOptionClick(mode: LLMMode) {
+    if (mode !== this.selected) {
+      this.args.onChange(mode);
+    }
+  }
+}

package/bundled-types/host-app/components/ai-assistant/llm-select.gts

@@ -0,0 +1,158 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import Check from '@cardstack/boxel-icons/check';
+
+import { eq } from '@cardstack/boxel-ui/helpers';
+
+import PillMenu from '@cardstack/host/components/pill-menu';
+import scrollIntoViewModifier from '@cardstack/host/modifiers/scroll-into-view';
+
+export interface LLMOption {
+  id: string;
+  modelId: string;
+  name: string;
+}
+
+interface Signature {
+  Args: {
+    selected: string;
+    options: LLMOption[];
+    onChange: (selectedLLM: string) => void;
+    disabled?: boolean;
+    onExpand?: () => void;
+    onCollapse?: () => void;
+  };
+  Blocks: {
+    footer: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class LLMSelect extends Component<Signature> {
+  <template>
+    <PillMenu
+      class='llm-select'
+      @onExpand={{@onExpand}}
+      @onCollapse={{@onCollapse}}
+      ...attributes
+    >
+      <:headerDetail>
+        <div class='selected-llm-wrapper'>
+          <span
+            class='selected-llm'
+            data-test-llm-select-selected={{@selected}}
+          >
+            {{this.displayName}}
+          </span>
+        </div>
+      </:headerDetail>
+      <:content>
+        <ul class='llm-list'>
+          {{#each @options key='id' as |option|}}
+            <li
+              class='llm-option {{if (eq @selected option.id) "selected"}}'
+              data-test-llm-select-item={{option.id}}
+              {{scrollIntoViewModifier
+                (eq @selected option.id)
+                container='llm-select'
+                key=option.id
+              }}
+            >
+              <button
+                type='button'
+                class='llm-button'
+                {{on 'click' (fn this.handleOptionClick option.id)}}
+              >
+                {{option.name}}
+                {{#if (eq @selected option.id)}}
+                  <Check class='selected-icon' />
+                {{/if}}
+              </button>
+            </li>
+          {{/each}}
+          {{yield to='footer'}}
+        </ul>
+      </:content>
+    </PillMenu>
+    <style scoped>
+      .llm-select {
+        background-color: transparent;
+        box-shadow: none;
+      }
+
+      .selected-llm-wrapper {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+
+      .selected-llm {
+        color: var(--boxel-dark);
+        font: 700 var(--boxel-font-xs);
+      }
+
+      .llm-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: grid;
+        gap: var(--boxel-sp-xxxs);
+        max-height: 300px;
+        overflow-y: auto;
+
+        scroll-timeline: --pill-menu-content-scroll-timeline;
+      }
+
+      .llm-option {
+        background: var(--boxel-light);
+        border-radius: var(--boxel-border-radius);
+        border: 1px solid var(--boxel-400);
+      }
+
+      .llm-option:hover {
+        border: 1px solid var(--boxel-dark);
+      }
+
+      .llm-option.selected {
+        background-color: var(--boxel-teal);
+      }
+
+      .selected-icon {
+        width: var(--boxel-font-size);
+        height: auto;
+        stroke-width: 3px;
+      }
+
+      .llm-button {
+        width: 100%;
+        padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
+        background: none;
+        border: none;
+        color: var(--boxel-dark);
+        font: 500 var(--boxel-font-xs);
+        cursor: pointer;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .llm-option.selected .llm-button {
+        font-weight: 600;
+      }
+    </style>
+  </template>
+
+  private get displayName() {
+    return this.args.options.find((o) => o.id === this.args.selected)?.name;
+  }
+
+  @action
+  private handleOptionClick(option: string) {
+    this.args.onChange(option);
+  }
+}

package/bundled-types/host-app/components/ai-assistant/message/aibot-message.gts

@@ -0,0 +1,374 @@
+import { array, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
+
+import Component from '@glimmer/component';
+import { cached, tracked } from '@glimmer/tracking';
+
+import { Alert } from '@cardstack/boxel-ui/components';
+import { and, bool, eq } from '@cardstack/boxel-ui/helpers';
+
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
+
+import CodeBlock from '@cardstack/host/components/ai-assistant/code-block';
+
+import { sanitizedHtml } from '@cardstack/host/helpers/sanitized-html';
+
+import type {
+  HtmlPreTagGroup,
+  CodeData,
+} from '@cardstack/host/lib/formatted-message/utils';
+import {
+  type HtmlTagGroup,
+  wrapLastTextNodeInStreamingTextSpan,
+} from '@cardstack/host/lib/formatted-message/utils';
+
+import type { Message as MatrixMessage } from '@cardstack/host/lib/matrix-classes/message';
+import type MessageCodePatchResult from '@cardstack/host/lib/matrix-classes/message-code-patch-result';
+
+import { parseSearchReplace } from '@cardstack/host/lib/search-replace-block-parsing';
+
+import { getCodeDiffResultResource } from '@cardstack/host/resources/code-diff';
+
+import type CommandService from '@cardstack/host/services/command-service';
+import type { MonacoSDK } from '@cardstack/host/services/monaco-service';
+
+import type { CodePatchStatus } from 'https://cardstack.com/base/matrix-event';
+
+import Message from './text-content';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    htmlParts?: HtmlTagGroup[];
+    roomId: string;
+    eventId: string;
+    monacoSDK: MonacoSDK;
+    isStreaming: boolean;
+    isLastAssistantMessage: boolean;
+    userMessageThisMessageIsRespondingTo?: MatrixMessage;
+    reasoning?: {
+      content: string | null;
+      isExpanded: boolean;
+      updateExpanded: (ev: Event) => void;
+    };
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class FormattedAiBotMessage extends Component<Signature> {
+  @service declare private commandService: CommandService;
+
+  @cached
+  private get reasoningHtml() {
+    // `markdownToHtml()` already sanitizes by default, so this only needs to
+    // mark that sanitized result as renderable HTML.
+    return htmlSafe(markdownToHtml(this.args.reasoning?.content));
+  }
+
+  private isLastHtmlGroup = (index: number) => {
+    return index === (this.args.htmlParts?.length ?? 0) - 1;
+  };
+
+  private preTagGroupIndex = (htmlPartIndex: number) => {
+    return this.args
+      .htmlParts!.slice(0, htmlPartIndex)
+      .filter(isHtmlPreTagGroup).length;
+  };
+
+  private codePatchStatus = (codeData: CodeData) => {
+    return this.commandService.getCodePatchStatus(codeData);
+  };
+
+  <template>
+    <Message class='ai-bot-message'>
+      {{#if @reasoning}}
+        <div class='reasoning-content'>
+          {{#if (eq 'Thinking...' @reasoning.content)}}
+            Thinking...
+          {{else}}
+            <details
+              open={{@reasoning.isExpanded}}
+              {{on 'click' @reasoning.updateExpanded}}
+              data-test-reasoning
+            >
+              <summary>
+                Thinking...
+              </summary>
+              {{this.reasoningHtml}}
+            </details>
+          {{/if}}
+        </div>
+      {{/if}}
+      {{! We are splitting the html into parts so that we can target the
+      code blocks (<pre> tags) and apply Monaco editor to them. Here is an
+      example of the html argument:
+
+      <p>Here is some code for you.</p>
+      <pre data-codeblock="javascript">const x = 1;</pre>
+      <p>I hope you like this code. But here is some more!</p>
+      <pre data-codeblock="javascript">const y = 2;</pre>
+      <p>Feel free to use it in your project.</p>
+
+      A drawback of this approach is that we can't render monaco editors for
+      code blocks that are nested inside other elements. We should make sure
+      our skills teach the model to respond with code blocks that are not nested
+      inside other elements.
+      }}
+      {{#each @htmlParts key='@index' as |htmlPart index|}}
+        {{#if (isHtmlPreTagGroup htmlPart)}}
+          <HtmlGroupCodeBlock
+            @codeData={{htmlPart.codeData}}
+            @codePatchResult={{this.commandService.getCodePatchResult
+              htmlPart.codeData
+            }}
+            @onPatchCode={{fn
+              this.commandService.patchCode
+              htmlPart.codeData.roomId
+              htmlPart.codeData.fileUrl
+              (array htmlPart.codeData)
+            }}
+            @monacoSDK={{@monacoSDK}}
+            @isLastAssistantMessage={{@isLastAssistantMessage}}
+            @userMessageThisMessageIsRespondingTo={{@userMessageThisMessageIsRespondingTo}}
+            @index={{this.preTagGroupIndex index}}
+            @codePatchStatus={{this.codePatchStatus htmlPart.codeData}}
+          />
+        {{else}}
+          {{#if (and @isStreaming (this.isLastHtmlGroup index))}}
+            {{wrapLastTextNodeInStreamingTextSpan
+              (sanitizedHtml htmlPart.content)
+            }}
+          {{else}}
+            {{sanitizedHtml htmlPart.content}}
+          {{/if}}
+        {{/if}}
+      {{/each}}
+    </Message>
+
+    <style scoped>
+      .ai-bot-message {
+        /* the below font-smoothing options are only recommended for light-colored
+          text on dark background (otherwise not good for accessibility) */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      .reasoning-content {
+        color: var(--boxel-300);
+        font-style: italic;
+      }
+      .reasoning-content summary {
+        cursor: pointer;
+      }
+      :deep(span.streaming-text:after) {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background: currentColor;
+        border-radius: 50%;
+        display: inline-block;
+        font-family: system-ui, sans-serif;
+        line-height: normal;
+        vertical-align: baseline;
+        margin-left: 5px;
+      }
+    </style>
+  </template>
+}
+
+function isHtmlPreTagGroup(
+  htmlPart: HtmlTagGroup,
+): htmlPart is HtmlPreTagGroup {
+  return htmlPart.type === 'pre_tag';
+}
+
+interface HtmlGroupCodeBlockSignature {
+  Element: HTMLDivElement;
+  Args: {
+    codeData: CodeData;
+    onPatchCode: (codeData: CodeData) => void;
+    monacoSDK: MonacoSDK;
+    isLastAssistantMessage: boolean;
+    userMessageThisMessageIsRespondingTo?: MatrixMessage;
+    index: number;
+    codePatchStatus: CodePatchStatus | 'applying' | 'ready';
+    codePatchResult: MessageCodePatchResult | undefined;
+    originalUploadedFileUrl?: string | null;
+  };
+}
+
+class HtmlGroupCodeBlock extends Component<HtmlGroupCodeBlockSignature> {
+  @tracked diffEditorStats: {
+    linesRemoved: number;
+    linesAdded: number;
+  } | null = null;
+
+  codeDiffResource = getCodeDiffResultResource(this, () => ({
+    fileUrl: this.args.codeData.fileUrl,
+    searchReplaceBlock: this.args.codeData.searchReplaceBlock,
+    codePatchStatus: this.args.codePatchStatus as CodePatchStatus,
+  }));
+
+  errorMessage(errorMessage: string) {
+    return 'Code could not be displayed: ' + errorMessage;
+  }
+
+  private extractReplaceCode(searchReplaceBlock: string | null | undefined) {
+    if (!searchReplaceBlock) {
+      return null;
+    }
+    return parseSearchReplace(searchReplaceBlock).replaceContent;
+  }
+
+  private get codeForEditor() {
+    if (this.isAppliedOrIgnoredCodePatch) {
+      return this.extractReplaceCode(this.args.codeData.searchReplaceBlock);
+    } else {
+      return this.args.codeData.code;
+    }
+  }
+
+  private get isAppliedOrIgnoredCodePatch() {
+    // Ignored means the user moved on to the next message
+    return (
+      this.args.codePatchStatus === 'applied' ||
+      !this.args.isLastAssistantMessage
+    );
+  }
+
+  private updateDiffEditorStats = (stats: {
+    linesAdded: number;
+    linesRemoved: number;
+  }) => {
+    this.diffEditorStats = stats;
+  };
+
+  private get codePatchfinalFileUrlAfterCodePatching() {
+    return this.args.codePatchStatus === 'applied'
+      ? this.args.codePatchResult?.finalFileUrlAfterCodePatching
+      : null;
+  }
+
+  private get codePatchErrorMessage() {
+    if (this.args.codePatchStatus === 'applied') {
+      return null;
+    } else if (this.args.codePatchStatus === 'failed') {
+      return this.args.codePatchResult?.failureReason;
+    } else if (this.codeDiffResource?.errorMessage) {
+      return this.codeDiffResource.errorMessage;
+    }
+    return null;
+  }
+
+  <template>
+    <CodeBlock
+      @monacoSDK={{@monacoSDK}}
+      @codeData={{@codeData}}
+      data-test-code-block-index={{@index}}
+      as |codeBlock|
+    >
+      {{#if (bool @codeData.searchReplaceBlock)}}
+        {{#if this.isAppliedOrIgnoredCodePatch}}
+          <div>
+            <codeBlock.diffEditorHeader
+              @codeData={{@codeData}}
+              @diffEditorStats={{null}}
+              @finalFileUrlAfterCodePatching={{this.codePatchfinalFileUrlAfterCodePatching}}
+              @originalUploadedFileUrl={{@codePatchResult.originalUploadedFileUrl}}
+              @codePatchStatus={{@codePatchStatus}}
+              @codePatchErrorMessage={{this.codePatchErrorMessage}}
+              @userMessageThisMessageIsRespondingTo={{@userMessageThisMessageIsRespondingTo}}
+            />
+
+            <codeBlock.editor @code={{this.codeForEditor}} />
+
+            <codeBlock.actions as |actions|>
+              <actions.copyCode
+                @code={{this.extractReplaceCode @codeData.searchReplaceBlock}}
+              />
+              {{! This is just to show the ✅ icon to signalize that the code patch has been applied }}
+              <actions.applyCodePatch
+                @codeData={{@codeData}}
+                @patchCodeStatus={{@codePatchStatus}}
+              />
+            </codeBlock.actions>
+
+            {{#if this.codePatchErrorMessage}}
+              <codeBlock.patchFooter>
+                <Alert @type='error' class='code-patch-error' as |Alert|>
+                  <Alert.Messages
+                    @messages={{array this.codePatchErrorMessage}}
+                  />
+                </Alert>
+              </codeBlock.patchFooter>
+            {{/if}}
+          </div>
+        {{else}}
+          {{#if this.codeDiffResource.isDataLoaded}}
+            <codeBlock.diffEditorHeader
+              @codeData={{@codeData}}
+              @diffEditorStats={{this.diffEditorStats}}
+              @originalUploadedFileUrl={{@codePatchResult.originalUploadedFileUrl}}
+              @codePatchStatus={{@codePatchStatus}}
+              @userMessageThisMessageIsRespondingTo={{@userMessageThisMessageIsRespondingTo}}
+              @codePatchErrorMessage={{this.codePatchErrorMessage}}
+            />
+
+            <codeBlock.diffEditor
+              @originalCode={{this.codeDiffResource.originalCode}}
+              @modifiedCode={{this.codeDiffResource.modifiedCode}}
+              @language={{@codeData.language}}
+              @updateDiffEditorStats={{this.updateDiffEditorStats}}
+            />
+
+            <codeBlock.actions as |actions|>
+              <actions.copyCode @code={{this.codeDiffResource.modifiedCode}} />
+
+              <actions.applyCodePatch
+                @codeData={{@codeData}}
+                @performPatch={{fn @onPatchCode @codeData}}
+                @patchCodeStatus={{if
+                  this.codePatchErrorMessage
+                  'failed'
+                  @codePatchStatus
+                }}
+                @originalCode={{this.codeDiffResource.originalCode}}
+                @modifiedCode={{this.codeDiffResource.modifiedCode}}
+              />
+            </codeBlock.actions>
+          {{/if}}
+
+          {{#if this.codePatchErrorMessage}}
+            <codeBlock.patchFooter>
+              <Alert
+                @type='error'
+                class='code-patch-error'
+                data-test-error-message={{this.codePatchErrorMessage}}
+                as |Alert|
+              >
+                <Alert.Messages
+                  @messages={{array this.codePatchErrorMessage}}
+                />
+              </Alert>
+            </codeBlock.patchFooter>
+          {{/if}}
+        {{/if}}
+      {{else}}
+        {{#if @codeData.fileUrl}}
+          <codeBlock.diffEditorHeader
+            @codeData={{@codeData}}
+            @diffEditorStats={{null}}
+            @codePatchStatus={{@codePatchStatus}}
+          />
+        {{/if}}
+        <codeBlock.editor @code={{this.codeForEditor}} />
+        <codeBlock.actions as |actions|>
+          <actions.copyCode @code={{@codeData.code}} />
+        </codeBlock.actions>
+      {{/if}}
+    </CodeBlock>
+  </template>
+}