LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="w-96 flex flex-col items-stretch gap-10">
  <div class="w-full items-center">
    <div
  class="lui-ai-input__wrapper lui-ai-animated-border"
  data-controller="input-ai"
  data-input-ai-spinner-value="true"
  data-input-ai-max-rows-value="8"
>
      <textarea
    data-input-ai-target="input"
    rows="1"
    placeholder="Generate with LoopOS AI"
    class="lui-ai-input__input lui-ai-input__textarea"
    style="--lui-ai-max-rows: 8;"
  ></textarea>
      <div data-input-ai-target="buttonWrapper" class="lui-ai-input__button-wrapper lui-ai-input__button-wrapper--center">
        <button class="lui-ai-input__button" data-controller="lui--button" data-input-ai-target="button" data-action="click->input-ai#handleButtonClick" type="button">
          <i class="lui-button__icon lui-button__icon--default fa-solid fa-paper-plane-top" data-lui--button-target="leadingIcon"></i>
        </button>
        <i
        data-input-ai-target="spinner"
        class="fa-solid fa-spinner fa-spin lui-ai-input__spinner"
      ></i>
      </div>
    </div>
  </div>
  <div id="ai-preview-output" class="bg-gray-100 rounded p-3 min-h-10 text-secondary-xxs-regular text-gray-800 break-words">
    <span class="italic text-gray-500">This area is for testing purposes only.</span>
  </div>
</div>
<script>
  (function() {
    var output = document.getElementById("ai-preview-output");
    document.addEventListener("ai-input:submit", function(event) {
      output.innerHTML = "<em>Thinking...</em>";
      var prompt = event.detail.value;
      var target = event.target;
      setTimeout(function() {
        target.dispatchEvent(new CustomEvent("ai-input:reset", { bubbles: true }));
        output.innerHTML = "<strong>Prompt submitted:</strong><br>" + prompt;
      }, 5000);
    });
  })();
</script>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%
params[:placeholder] ||=  "Generate with LoopOS AI"
params[:spinner] ||= true
params[:max_rows] ||= 7
%>
<div class="w-96 flex flex-col items-stretch gap-10">
  <div class="w-full items-center">
    <%= render LooposUi::Inputs::Ai.new(
      placeholder: params[:placeholder],
      spinner: params[:spinner],
      max_rows: params[:max_rows]
    ) %>
  </div>
  <div id="ai-preview-output" class="bg-gray-100 rounded p-3 min-h-10 text-secondary-xxs-regular text-gray-800 break-words">
    <span class="italic text-gray-500">This area is for testing purposes only.</span>
  </div>
</div>
<script>
  (function() {
    var output = document.getElementById("ai-preview-output");
    document.addEventListener("ai-input:submit", function(event) {
      output.innerHTML = "<em>Thinking...</em>";
      var prompt = event.detail.value;
      var target = event.target;
      setTimeout(function() {
        target.dispatchEvent(new CustomEvent("ai-input:reset", { bubbles: true }));
        output.innerHTML = "<strong>Prompt submitted:</strong><br>" + prompt;
      }, 5000);
    });
  })();
</script>

No notes provided.

Param Description Input

Input placeholder

Show loading spinner

Maximum number of rows

Inputs::Ai

Description

Inputs::Ai is a text input component optimized for AI prompts, featuring an animated border and an integrated send button.

Arguments

Property Default Description
placeholder "Generate with LoopOS AI" Placeholder for the input field.
spinner false Shows a loading spinner when submitting the prompt. This is useful if your page already has other types of loading indicators, helping to avoid redundant or overlapping loading designs.
max_rows 7 Maximum number of visible rows in the textarea.

Usage

<%= render LooposUi::Inputs::Ai.new(
  placeholder: "Describe your task...",
  spinner: true,
  max_rows: 5
) %>

⚠️ Important

This component only provides the input field. Submission logic and result handling must be implemented by the developer.

When the user submits a prompt (by pressing Enter or clicking the button), the component dispatches a ai-input:submit event with the prompt value in event.detail.value. You can listen for this event in your own Stimulus controller to handle the request, show loading states, and process the response.

You can also dispatch the following events to control the input state:

  • ai-input:stop-loading — stops the loading state and re-enables the input/button.
  • ai-input:clear — clears the input field.
  • ai-input:reset — stops loading and clears the input.

See the component's JavaScript for more details on available events and behaviors.