Ai Prompt

<sl-ai-prompt> | SlAiPrompt
Since 1.1.14 experimental

A prompt component for submitting AI queries and displaying responses.

myhub Scout Heffron 
<sl-ai-prompt class="ai-prompt">
  <sl-select slot="agent-models" value="myhub">
    <sl-option value="myhub">myhub</sl-option>
    <sl-option value="scout">Scout</sl-option>
    <sl-option value="heffron">Heffron</sl-option>
  </sl-select>
</sl-ai-prompt>

<style>
  .ai-prompt {
    --textarea-max-height: 200px;
  }

  .ai-prompt sl-select::part(combobox) {
    border-radius: var(--hds-button-border-radius);
    max-width: 100px;
  }

  .ai-prompt sl-option::part(checked-icon) {
    visibility: hidden;
  }
</style>

<script>
  const prompt = document.querySelector('.ai-prompt');
  let timeout;
  prompt.addEventListener('sl-prompt-submit', () => {
    console.log('submit');
    prompt.state = 'loading';

    timeout = setTimeout(() => {
      prompt.state = 'disabled';
      console.log('disabled')
      timeout = setTimeout(() => {
        prompt.state = 'default';
        console.log('default')
      }, 3000);
    }, 3000);
  });

  prompt.addEventListener('sl-prompt-stop', () => {
    clearTimeout(timeout);
    prompt.state = 'default';
    console.log('default')
  });
</script>

Examples

Disabled

myhub Scout Heffron 
<sl-ai-prompt class="disabled-ai-prompts" state="disabled">
  <sl-select slot="agent-models" value="myhub">
    <sl-option value="myhub">myhub</sl-option>
    <sl-option value="scout">Scout</sl-option>
    <sl-option value="heffron">Heffron</sl-option>
  </sl-select>
</sl-ai-prompt>

<style>
  .disabled-ai-prompts sl-option::part(checked-icon) {
    visibility: hidden;
  }


  .disabled-ai-prompts sl-select {
    max-width: 100px;
  }
</style>

Loading

myhub Scout Heffron 
<sl-ai-prompt state="loading" class="ai-prompt-loading">
  <sl-select slot="agent-models" value="myhub">
    <sl-option value="myhub">myhub</sl-option>
    <sl-option value="scout">Scout</sl-option>
    <sl-option value="heffron">Heffron</sl-option>
  </sl-select>
</sl-ai-prompt>

<style>
  .ai-prompt-loading sl-option::part(checked-icon) {
    visibility: hidden;
  }
  .ai-prompt-loading sl-select {
    max-width: 100px;
  }
</style>

<script>
  const prompt = document.querySelector('.ai-prompt-loading');
  prompt.addEventListener('sl-prompt-submit', () => {console.log('submit')});
  prompt.addEventListener('sl-prompt-stop', () => {console.log('stop')});
</script>

No select 

<sl-ai-prompt state="loading" class="ai-prompt-loading"></sl-ai-prompt>

[component-metadata:sl-ai-prompt]

Slots

Name Description
agent-models A slot for selecting an agent model. Should be a <sl-select> with options for different agent models.
action-button A slot for the prompt’s action button.
disclaimer A slot for AI disclaimer information about the prompt.

Learn more about using slots.

Properties

Name Description Reflects Type Default
state The current state of the prompt. - default: The default state when the textarea is empty and not focused. In this state, the action button is disabled. When the textarea receives input, the state changes to active. - active: The state when the textarea has content. In this state, the action button is enabled, allowing the user to submit the prompt. When the textarea is cleared, the state changes back to default. - loading: The state when a prompt submission is in progress. In this state, the action button shows a stop button and allows the user to stop the submission. - disabled: The state when the prompt is disabled. In this state, the action button is disabled and shows a disabled appearance. 'loading' | 'active' | 'disabled' | 'default' 'default'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-blur Emitted when the textarea control loses focus. -
sl-change Emitted when an alteration to the textarea’s value is committed by the user. -
sl-focus Emitted when the textarea gains focus. -
sl-input Emitted when the textarea receives input. -
sl-prompt-submit Emitted when the prompt is submitted. -
sl-prompt-stop Emitted when the prompt is stopped (only applicable when state="loading"). -

Learn more about events.

Custom Properties

Name Description Default
--textarea-max-height The maximum height of the textarea when resizing. By default, this is set to inherit to allow the textarea to grow with the content. Set this to a specific value (e.g., 200px) to limit how tall the textarea can grow.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
prompt-container The container that wraps the textarea and action button.
actions-container The container that wraps the action button and agent model select.
disclaimer The container that wraps the disclaimer content.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>
  • <sl-textarea>