@design.estate/dees-catalog 6.8.2 → 6.9.0

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts

@@ -14,6 +14,7 @@ import type {
   IHarnessAccountChangeDetail,
   IHarnessAttachment,
   IHarnessComposerOption,
+  IHarnessComposerSuggestion,
   IHarnessMessage,
   IHarnessPermissionRequest,
   IHarnessQuestionRequest,
@@ -154,6 +155,9 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property({ attribute: false })
+  accessor suggestions: IHarnessComposerSuggestion[] = [];
+
   @property({ type: Number })
   accessor maxAttachmentCount: number = Number.POSITIVE_INFINITY;
 
@@ -659,6 +663,7 @@ export class DeesHarnessChat extends DeesElement {
           docked
           .value=${this.composerValue}
           .attachments=${this.attachments}
+          .suggestions=${this.suggestions}
           .maxAttachmentCount=${this.maxAttachmentCount}
           .maxAttachmentBytes=${this.maxAttachmentBytes}
           .maxTotalAttachmentBytes=${this.maxTotalAttachmentBytes}

package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.ts

@@ -6,6 +6,7 @@ import {
   customElement,
   type TemplateResult,
   property,
+  state,
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -13,6 +14,7 @@ import type {
   IHarnessAttachment,
   IHarnessComposerOption,
   IHarnessComposerSendDetail,
+  IHarnessComposerSuggestion,
 } from '../interfaces.js';
 import {
   harnessFileToBase64,
@@ -40,6 +42,8 @@ const toDropdownOptions = (values: string[]): TDropdownOption[] =>
 const toLabeledDropdownOptions = (values: IHarnessComposerOption[]): TDropdownOption[] =>
   values.map((value) => ({ option: value.label, key: value.value }));
 
+let nextSuggestionListId = 0;
+
 /**
  * Prompt composer: autogrow textarea, attachments (picker / paste /
  * drag-drop with per-file and total size limits), optional account, model,
@@ -47,7 +51,7 @@ const toLabeledDropdownOptions = (values: IHarnessComposerOption[]): TDropdownOp
  * additional button and Send stays available for queueing; an empty prompt
  * with queued messages offers "Steer now".
  *
- * Controlled component: `value` and `attachments` are owned by the host;
+ * Controlled component: `value`, `attachments`, and `suggestions` are owned by the host;
  * the composer emits `harness-input`, `harness-attachments-change`,
  * `harness-attachment-error`, `harness-account-change`, `harness-model-change`, `harness-send`,
  * `harness-steer`, and `harness-abort` (all bubbling + composed).
@@ -91,6 +95,21 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property({ attribute: false })
+  accessor suggestions: IHarnessComposerSuggestion[] = [];
+
+  @state()
+  private accessor activeSuggestionIndex: number = -1;
+
+  @state()
+  private accessor suggestionsDismissed: boolean = false;
+
+  @state()
+  private accessor promptFocused: boolean = false;
+
+  private composing: boolean = false;
+  private readonly suggestionListId = `dees-harness-composer-suggestions-${++nextSuggestionListId}`;
+
   @property({ type: Number })
   accessor maxAttachmentBytes: number = harnessMaxAttachmentBytes;
 
@@ -141,6 +160,69 @@ export class DeesHarnessComposer extends DeesElement {
         container-type: inline-size;
       }
 
+      .composerShell {
+        position: relative;
+        min-width: 0;
+      }
+
+      .suggestionList {
+        position: absolute;
+        z-index: 2;
+        inset-inline: 0;
+        bottom: calc(100% + var(--dees-spacing-xs));
+        box-sizing: border-box;
+        max-height: min(240px, 35dvh);
+        margin: 0;
+        padding: var(--dees-spacing-xs);
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        list-style: none;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-xl);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-primary);
+        box-shadow: var(--dees-shadow-up-sm);
+      }
+
+      .suggestionOption {
+        display: grid;
+        align-content: center;
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: 44px;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+        touch-action: manipulation;
+      }
+
+      .suggestionOption:hover,
+      .suggestionOption.active {
+        background: var(--dees-color-fill-secondary);
+      }
+
+      .suggestionLabel {
+        min-width: 0;
+        overflow: hidden;
+        font-size: var(--dees-font-control-size, 13px);
+        font-weight: 600;
+        line-height: 1.35;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .suggestionDescription {
+        min-width: 0;
+        margin-top: 2px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        line-height: 1.35;
+        overflow-wrap: anywhere;
+      }
+
       .composer {
         display: grid;
         gap: var(--dees-spacing-sm);
@@ -365,18 +447,31 @@ export class DeesHarnessComposer extends DeesElement {
 
   public clear(): void {
     this.value = '';
+    this.resetSuggestionInteraction();
     this.emitInput('');
     this.autogrow();
   }
 
+  public willUpdate(changedProperties: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has('suggestions')) this.resetSuggestionInteraction();
+  }
+
+  public updated(changedProperties: Map<PropertyKey, unknown>): void {
+    super.updated(changedProperties);
+    this.syncTextareaSuggestionAria();
+  }
+
   public render(): TemplateResult {
     return html`
-      <div
-        class="composer"
-        @dragover=${this.handleDragOver}
-        @dragleave=${this.handleDragLeave}
-        @drop=${this.handleDrop}
-      >
+      <div class="composerShell">
+        ${this.suggestionsVisible ? this.renderSuggestions() : ''}
+        <div
+          class="composer"
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
         <input
           class="fileInput"
           type="file"
@@ -392,11 +487,16 @@ export class DeesHarnessComposer extends DeesElement {
           : ''}
         <textarea
           .value=${this.value}
+          aria-label="Message"
           placeholder=${this.placeholder}
           ?disabled=${this.disabled}
           rows="1"
           @input=${this.handleTextInput}
           @keydown=${this.handleKeydown}
+          @focus=${this.handlePromptFocus}
+          @blur=${this.handlePromptBlur}
+          @compositionstart=${this.handleCompositionStart}
+          @compositionend=${this.handleCompositionEnd}
           @paste=${this.handlePaste}
         ></textarea>
         <div class="controlsRow">
@@ -507,11 +607,42 @@ export class DeesHarnessComposer extends DeesElement {
                   Send
                 </dees-button>
               `}
+          </div>
         </div>
       </div>
     `;
   }
 
+  private renderSuggestions(): TemplateResult {
+    return html`
+      <ul
+        id=${this.suggestionListId}
+        class="suggestionList"
+        role="listbox"
+        aria-label="Suggestions"
+        @pointerdown=${this.handleSuggestionPointerDown}
+      >
+        ${this.suggestions.map((suggestion, index) => html`
+          <li
+            id=${this.suggestionOptionId(index)}
+            class=${`suggestionOption ${index === this.activeSuggestionIndex ? 'active' : ''}`}
+            role="option"
+            aria-selected=${String(index === this.activeSuggestionIndex)}
+            @pointerenter=${() => {
+              this.activeSuggestionIndex = index;
+            }}
+            @click=${() => void this.selectSuggestion(index)}
+          >
+            <span class="suggestionLabel">${suggestion.label}</span>
+            ${suggestion.description
+              ? html`<span class="suggestionDescription">${suggestion.description}</span>`
+              : ''}
+          </li>
+        `)}
+      </ul>
+    `;
+  }
+
   private renderChip(attachment: IHarnessAttachment): TemplateResult {
     const imageUrl = attachment.kind === 'image' && attachment.dataBase64
       ? `data:${attachment.mediaType};base64,${attachment.dataBase64}`
@@ -541,16 +672,42 @@ export class DeesHarnessComposer extends DeesElement {
 
   private handleTextInput = (event: Event): void => {
     this.value = (event.currentTarget as HTMLTextAreaElement).value;
+    this.resetSuggestionInteraction();
     this.emitInput(this.value);
     this.autogrow();
   };
 
   private handleKeydown = (event: KeyboardEvent): void => {
+    if (event.isComposing || this.composing) return;
     if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       this.send();
       return;
     }
+    if (this.suggestionsVisible) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        this.suggestionsDismissed = true;
+        return;
+      }
+      if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          this.moveActiveSuggestion(1);
+          return;
+        }
+        if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          this.moveActiveSuggestion(-1);
+          return;
+        }
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          void this.selectSuggestion(this.activeSuggestionIndex);
+          return;
+        }
+      }
+    }
     // Shift+Tab cycles the agent mode without leaving the prompt
     if (event.key === 'Tab' && event.shiftKey && this.modeOptions.length) {
       event.preventDefault();
@@ -561,6 +718,111 @@ export class DeesHarnessComposer extends DeesElement {
     }
   };
 
+  private handleCompositionStart = (): void => {
+    this.composing = true;
+  };
+
+  private handleCompositionEnd = (): void => {
+    this.composing = false;
+  };
+
+  private handlePromptFocus = (): void => {
+    this.promptFocused = true;
+  };
+
+  private handlePromptBlur = (): void => {
+    this.promptFocused = false;
+  };
+
+  private handleSuggestionPointerDown = (event: PointerEvent): void => {
+    event.preventDefault();
+  };
+
+  private resetSuggestionInteraction(): void {
+    this.activeSuggestionIndex = this.suggestions.length ? 0 : -1;
+    this.suggestionsDismissed = false;
+  }
+
+  private get suggestionsVisible(): boolean {
+    return this.promptFocused
+      && !this.disabled
+      && !this.suggestionsDismissed
+      && this.suggestions.length > 0;
+  }
+
+  private suggestionOptionId(indexArg: number): string {
+    return `${this.suggestionListId}-option-${indexArg}`;
+  }
+
+  private syncTextareaSuggestionAria(): void {
+    const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
+    if (!textarea) return;
+    const suggestionsAvailable = !this.disabled && this.suggestions.length > 0;
+    if (suggestionsAvailable) {
+      textarea.setAttribute('aria-autocomplete', 'list');
+      textarea.setAttribute('aria-haspopup', 'listbox');
+    } else {
+      textarea.removeAttribute('aria-autocomplete');
+      textarea.removeAttribute('aria-haspopup');
+    }
+    if (this.suggestionsVisible) {
+      textarea.setAttribute('aria-controls', this.suggestionListId);
+    } else {
+      textarea.removeAttribute('aria-controls');
+    }
+    if (
+      this.suggestionsVisible
+      && this.activeSuggestionIndex >= 0
+      && this.activeSuggestionIndex < this.suggestions.length
+    ) {
+      textarea.setAttribute(
+        'aria-activedescendant',
+        this.suggestionOptionId(this.activeSuggestionIndex),
+      );
+    } else {
+      textarea.removeAttribute('aria-activedescendant');
+    }
+  }
+
+  private moveActiveSuggestion(offsetArg: -1 | 1): void {
+    if (!this.suggestions.length) return;
+    this.activeSuggestionIndex = this.activeSuggestionIndex < 0
+      ? (offsetArg === 1 ? 0 : this.suggestions.length - 1)
+      : (this.activeSuggestionIndex + offsetArg + this.suggestions.length) % this.suggestions.length;
+    void this.scrollActiveSuggestionIntoView();
+  }
+
+  private async scrollActiveSuggestionIntoView(): Promise<void> {
+    await this.updateComplete;
+    const list = this.shadowRoot?.getElementById(this.suggestionListId);
+    const option = this.shadowRoot?.getElementById(
+      this.suggestionOptionId(this.activeSuggestionIndex),
+    );
+    if (!list || !option) return;
+    const optionTop = option.offsetTop;
+    const optionBottom = optionTop + option.offsetHeight;
+    if (optionTop < list.scrollTop) {
+      list.scrollTop = optionTop;
+    } else if (optionBottom > list.scrollTop + list.clientHeight) {
+      list.scrollTop = optionBottom - list.clientHeight;
+    }
+  }
+
+  private async selectSuggestion(indexArg: number): Promise<void> {
+    if (this.disabled) return;
+    const suggestion = this.suggestions[indexArg];
+    if (!suggestion) return;
+    this.value = suggestion.value;
+    this.suggestionsDismissed = true;
+    this.emitInput(this.value);
+    await this.updateComplete;
+    const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
+    if (!textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(this.value.length, this.value.length);
+    this.autogrow();
+  }
+
   private autogrow(): void {
     const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
     if (!textarea) return;

package/ts_web/elements/00group-harness/interfaces.ts

@@ -464,6 +464,12 @@ export interface IHarnessComposerOption {
   value: string;
 }
 
+export interface IHarnessComposerSuggestion {
+  label: string;
+  value: string;
+  description?: string;
+}
+
 export interface IHarnessAccountChangeDetail {
   account: string;
 }