Polish AI assistant footer menu

packages/boxel-ui/src/components/button/index.gts

@@ -59,6 +59,7 @@ interface Signature {
     kind?: BoxelButtonKind;
     loading?: boolean;
     models?: any;
+    pill?: boolean;
     query?: any;
     rectangular?: boolean;
     route?: any;
@@ -78,6 +79,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       (concat 'kind-' (if @kind @kind 'default'))
       loading=@loading
       rectangular=@rectangular
+      pill=@pill
     )
     as |classes|
   }}
@@ -179,6 +181,12 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       .boxel-button:not(.rectangular) {
         border-radius: var(--boxel-button-border-radius, 100px);
       }
+      .boxel-button:is(.pill) {
+        border-radius: var(
+          --boxel-button-border-radius,
+          var(--boxel-border-radius-pill)
+        );
+      }
       .boxel-button:not(:disabled):hover {
         background-color: color-mix(
           in oklab,
@@ -219,7 +227,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
           --boxel-button-disabled-foreground,
           var(--boxel-button-text-color)
         );
-        opacity: var(--button-button-disabled-opacity, 0.5);
+        opacity: var(--boxel-button-disabled-opacity, 0.5);
         cursor: default;
       }
 

packages/boxel-ui/src/components/button/usage.gts

@@ -25,6 +25,7 @@ export default class ButtonUsage extends Component {
   @tracked disabled?: boolean;
   @tracked loading?: boolean;
   @tracked rectangular?: boolean;
+  @tracked pill?: boolean;
 
   // for @as === 'anchor'
   @tracked href = '#';
@@ -63,6 +64,7 @@ export default class ButtonUsage extends Component {
             @href={{this.href}}
             @route={{this.route}}
             @rectangular={{this.rectangular}}
+            @pill={{this.pill}}
             {{on 'click' this.alert}}
           >
             Sample CTA
@@ -129,6 +131,14 @@ export default class ButtonUsage extends Component {
           @value={{this.rectangular}}
           @defaultValue={{false}}
         />
+        <Args.Bool
+          @name='pill'
+          @optional={{true}}
+          @description='Uses the pill border-radius (--boxel-border-radius-pill)'
+          @onInput={{fn (mut this.pill)}}
+          @value={{this.pill}}
+          @defaultValue={{false}}
+        />
         <Args.Bool
           @name='disabled'
           @optional={{true}}
@@ -252,6 +262,26 @@ export default class ButtonUsage extends Component {
         <Css.Basic @name='--boxel-button-min-width' @type='min-width' />
         <Css.Basic @name='--boxel-button-padding' @type='padding' />
         <Css.Basic @name='--boxel-button-box-shadow' @type='box-shadow' />
+        <Css.Basic
+          @name='--boxel-button-disabled-background'
+          @type='background-color'
+          @description='disabled state'
+        />
+        <Css.Basic
+          @name='--boxel-button-disabled-border'
+          @type='border'
+          @description='disabled state (css shorthand property)'
+        />
+        <Css.Basic
+          @name='--boxel-button-disabled-foreground'
+          @type='color'
+          @description='disabled state'
+        />
+        <Css.Basic
+          @name='--boxel-button-disabled-opacity'
+          @type='opacity'
+          @description='disabled state'
+        />
         <Css.Basic
           @name='--boxel-button-loading-icon-size'
           @type='width, height'

packages/boxel-ui/src/styles/theme.css

@@ -129,7 +129,7 @@
   --boxel-button-secondary-active-border: var(--foreground);
   --boxel-button-destructive-active-background: var(--boxel-danger-hover);
   --boxel-button-link-primary-foreground: var(--boxel-highlight-hover);
-  --button-button-disabled-opacity: 1;
+  --boxel-button-disabled-opacity: 1;
   --boxel-button-disabled-background: var(--boxel-border-color);
   --boxel-button-disabled-border: 1px solid var(--boxel-border-color);
   --boxel-button-disabled-foreground: var(--boxel-450);
@@ -177,7 +177,7 @@
   --boxel-button-secondary-active-border: initial;
   --boxel-button-link-primary-foreground: initial;
   --boxel-button-destructive-active-background: initial;
-  --button-button-disabled-opacity: initial;
+  --boxel-button-disabled-opacity: initial;
   --boxel-button-disabled-background: initial;
   --boxel-button-disabled-border: initial;
   --boxel-button-disabled-foreground: initial;
@@ -234,7 +234,7 @@
   --boxel-button-secondary-border: var(--border);
   --boxel-button-secondary-active-border: var(--foreground);
   --boxel-button-destructive-active-background: var(--boxel-danger-hover);
-  --button-button-disabled-opacity: 1;
+  --boxel-button-disabled-opacity: 1;
   --boxel-button-disabled-background: #444051;
   --boxel-button-disabled-foreground: #817c93;
   --boxel-button-disabled-border: 1px solid#444051;

packages/boxel-ui/src/styles/variables.css

@@ -115,6 +115,8 @@
   --boxel-border-radius-xl: calc(var(--boxel-border-radius) * 1.5); /* 15px */
   --boxel-border-radius-2xl: calc(var(--boxel-border-radius) * 2); /* 20px */
 
+  --boxel-border-radius-pill: 9999px; /* pill shape */
+
   /* animations */
   --boxel-infinite-spin-animation: boxel-spin 6000ms linear infinite;
 

packages/host/app/components/ai-assistant/llm-mode-toggle.gts

@@ -31,9 +31,9 @@ export default class LLMModeToggle extends Component<Signature> {
           <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')}}
+            data-test-llm-mode-option='ask'
           >
             Ask
           </button>
@@ -50,9 +50,9 @@ export default class LLMModeToggle extends Component<Signature> {
           <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')}}
+            data-test-llm-mode-option='act'
           >
             Act
           </button>
@@ -66,40 +66,49 @@ export default class LLMModeToggle extends Component<Signature> {
     </div>
     <style scoped>
       .llm-mode-toggle {
+        --llm-mode-toggle-height: 1.875rem;
+        --llm-mode-toggle-inset: 0.125rem;
+        --llm-mode-option-width: 2.5rem;
+        --llm-mode-option-height: calc(
+          var(--llm-mode-toggle-height) - (2 * var(--llm-mode-toggle-inset))
+        );
+
         display: flex;
         align-items: center;
-        justify-content: center;
+        width: fit-content;
+        height: var(--llm-mode-toggle-height);
+        padding: var(--llm-mode-toggle-inset);
         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;
+        border-radius: calc(var(--llm-mode-toggle-height) / 2);
       }
       .llm-mode-option {
-        flex: 1 1 0;
+        width: var(--llm-mode-option-width);
+        height: var(--llm-mode-option-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
         background: none;
         border: none;
-        border-radius: var(--boxel-border-radius);
-        padding-block: 2px;
+        border-radius: calc(var(--llm-mode-option-height) / 2);
         color: var(--boxel-light);
-        font: 700 var(--boxel-font-xs);
+        font-weight: 600;
+        font-size: var(--boxel-font-size-xs);
+        letter-spacing: var(--boxel-lsp-sm);
         cursor: pointer;
         transition:
-          background 0.15s,
-          color 0.15s;
+          background-color var(--boxel-transition),
+          color var(--boxel-transition);
       }
       .llm-mode-option.selected {
-        background: var(--boxel-teal);
+        background: var(--boxel-highlight);
         color: var(--boxel-dark);
-        height: 100%;
       }
       .llm-mode-option:disabled {
         opacity: 0.5;
-        cursor: not-allowed;
       }
       .llm-mode-option-tooltip {
-        max-width: 160px;
+        max-width: 10rem;
       }
     </style>
   </template>

packages/host/app/components/ai-assistant/llm-select.gts

@@ -28,7 +28,7 @@ interface Signature {
     onCollapse?: () => void;
   };
   Blocks: {
-    footer: [];
+    menuActions: [];
   };
   Element: HTMLElement;
 }
@@ -93,9 +93,11 @@ export default class LLMSelect extends Component<Signature> {
               </button>
             </li>
           {{/each}}
-          {{yield to='footer'}}
         </ul>
       </:content>
+      <:contentActions>
+        {{yield to='menuActions'}}
+      </:contentActions>
     </PillMenu>
     <style scoped>
       .llm-select {
@@ -134,15 +136,11 @@ export default class LLMSelect extends Component<Signature> {
         padding: 0;
         margin: 0;
         display: grid;
-        gap: var(--boxel-sp-xxxs);
-        max-height: 300px;
-        overflow-y: auto;
-
-        scroll-timeline: --pill-menu-content-scroll-timeline;
+        gap: var(--boxel-sp-3xs);
       }
 
       .llm-option {
-        background: var(--boxel-light);
+        background-color: var(--boxel-light);
         border-radius: var(--boxel-border-radius);
         border: 1px solid var(--boxel-400);
       }
@@ -152,7 +150,7 @@ export default class LLMSelect extends Component<Signature> {
       }
 
       .llm-option.selected {
-        background-color: var(--boxel-teal);
+        background-color: var(--boxel-highlight);
       }
 
       .selected-icon {

packages/host/app/components/ai-assistant/skill-menu/index.gts

@@ -70,11 +70,12 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
           {{/each}}
         </ul>
       </:content>
-      <:footer>
+      <:contentActions>
         <Button
           class='attach-button'
-          @kind='primary'
+          @kind='secondary'
           @size='extra-small'
+          @pill={{true}}
           {{on 'click' this.attachSkillCard}}
           @disabled={{this.doAttachSkillCard.isRunning}}
           @loading={{this.isAttachingSkill}}
@@ -83,13 +84,14 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
           {{#if this.isAttachingSkill}}
             Adding Skill
           {{else}}
-            Choose a Skill to add
+            Choose a Skill to Add
           {{/if}}
         </Button>
         <Button
           class='attach-button'
-          @kind='primary'
+          @kind='secondary'
           @size='extra-small'
+          @pill={{true}}
           {{on 'click' this.attachSkillMarkdown}}
           @disabled={{this.doAttachSkillMarkdown.isRunning}}
           @loading={{this.isAttachingSkillMarkdown}}
@@ -98,10 +100,10 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
           {{#if this.isAttachingSkillMarkdown}}
             Adding Skill
           {{else}}
-            Choose a skill file to add
+            Choose a Skill File to Add
           {{/if}}
         </Button>
-      </:footer>
+      </:contentActions>
     </PillMenu>
     <style scoped>
       .skill-menu {
@@ -110,14 +112,10 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
       }
       .skill-list {
         display: grid;
-        gap: var(--boxel-sp-xxxs);
+        gap: var(--boxel-sp-3xs);
         list-style-type: none;
         padding: 0;
         margin: 0;
-        overflow-y: auto;
-        max-height: 300px;
-
-        scroll-timeline: --pill-menu-content-scroll-timeline;
       }
 
       .skill-list :deep(.card-content) {
@@ -126,24 +124,12 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
       }
       .attach-button {
         --boxel-button-font: 600 var(--boxel-font-xs);
-        --boxel-button-border: 1px solid var(--boxel-400);
-        --boxel-button-color: var(--boxel-dark);
         --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
-        --boxel-button-min-height: unset;
+        --boxel-button-disabled-background: none;
+        --boxel-button-disabled-opacity: 1;
 
-        gap: var(--boxel-sp-xs);
-        background: none;
-      }
-      .attach-button:hover:not(:disabled),
-      .attach-button:focus:not(:disabled) {
-        --icon-color: var(--boxel-600);
-        color: var(--boxel-600);
-        background: none;
-        box-shadow: none;
-      }
-      .attach-button:disabled {
-        --boxel-button-text-color: var(--boxel-300);
-        --boxel-button-border: 1px solid var(--boxel-300);
+        justify-content: flex-start;
+        text-wrap: balance;
       }
       .attach-button > :deep(svg > path) {
         stroke: none;