LoopOS UI v1.1.54.3

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div class="w-3/4 flex flex-col items-stretch gap-10">
  <div class="w-full items-center">
    <div class="lui-ai-prompt">
      <div class="lui-ai-prompt__header">
        <div class="lui-ai-prompt__title-desc">
          <div class="lui-ai-prompt__title-row">
            <div class="lui-ai-prompt__icon-title-container">
              <div class="lui-ai-prompt__icon">
                <img alt="LoopOS AI" class="w-full h-full object-contain" src="/assets/app_logos/LoopOS_AI-Symbol-56bc60d9.png" />
              </div>
              <p class="lui-ai-prompt__title">
                LoopOS AI
              </p>
            </div>
            <div class="lui-ai-prompt__state-label">
              <span id="lui-token_5793709857" class="lui-token   lui-entity-token lui-entity-token-general" style="color: #212529;">
                <span class="lui-token__text">BETA</span>
                <div class="lui-token__actions">
                </div>
              </span>
            </div>
          </div>
          <p class="lui-ai-prompt__description">
            Start the prompt with an action. Give all the needed details.
          </p>
        </div>
      </div>
      <div class="lui-ai-prompt__input-row">
        <div class="w-full ">
          <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="Type your prompt..."
      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">
                <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                  <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-solid fa-paper-plane-top" data-lui--button-target="leadingIcon"></i></div>
                </div>
            
                <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                  <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
                    progress_activity
                  </i>
                </div>
              </button>
              <i
          data-input-ai-target="spinner"
          class="fa-solid fa-spinner fa-spin lui-ai-input__spinner"
        ></i>
            </div>
          </div>
        </div>
      </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.

Create a markdown file in /project/test/components/loopos_ui/usage_documentation/form_entry_ai.md.

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
<%
params[:title] ||= "LoopOS AI"
params[:description] = "Start the prompt with an action. Give all the needed details." unless params.key?(:description)
params[:placeholder] = "Type your prompt..." unless params.key?(:placeholder)
params[:spinner] = true unless params.key?(:spinner)
params[:max_rows] = 7 unless params.key?(:max_rows)
params[:disabled] = false unless params.key?(:disabled)
%>
<div class="w-3/4 flex flex-col items-stretch gap-10">
  <div class="w-full items-center">
    <%= render LooposUi::FormEntryAi.new(
      title: params[:title],
      description: params[:description],
      placeholder: params[:placeholder],
      spinner: params[:spinner],
      max_rows: params[:max_rows],
      disabled: params[:disabled],
      tooltip: params[:tooltip]
    ) %>
  </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

Prompt title

Prompt description

Input placeholder

Show loading spinner

Maximum number of rows

Disable input and submit action

Tooltip shown when disabled or when enabled

FormEntryAi

Description

FormEntryAi is a prompt component that combines a title, description, and the Inputs::Ai input field in a styled layout.

Arguments

Property Default Description
title "LoopOS AI" Title displayed at the top of the prompt.
description nil Description below the title.
placeholder nil Placeholder for the input field.
spinner nil Shows a loading spinner in the input.
max_rows nil Maximum number of rows for the input.
disabled false Disables AI input interactions and submit action.
tooltip nil Tooltip text forwarded to Inputs::Ai. If disabled, tooltip is shown on the whole input area; if enabled, it is shown on the submit button only.

Usage

<%= render LooposUi::FormEntryAi.new(
  title: "Generate Summary",
  description: "Ask the AI to summarize a text or generate ideas.",
  placeholder: "Type your prompt...",
  spinner: true,
  max_rows: 4,
  disabled: false,
  tooltip: "Submit prompt"
) %>

⚠️ Important

This component uses Inputs::Ai internally for the input field. Submission logic and result handling must be implemented by the developer.