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
83
84
<div class="w-96 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__icon-container"> <div class="lui-ai-prompt__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"> <g clip-path="url(#paint0_angular_3875_4242_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.0150864 -0.0150864 0 15.9974 16.9131)"><foreignObject x="-1187.4" y="-1187.4" width="2374.8" height="2374.8"> <div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(0, 197, 255, 1) 0deg,rgba(0, 216, 181, 1) 43.4361deg,rgba(255, 203, 51, 1) 107.75deg,rgba(242, 115, 53, 1) 179.299deg,rgba(228, 45, 39, 1) 229.644deg,rgba(128, 68, 255, 1) 283.066deg,rgba(0, 114, 255, 1) 333.657deg,rgba(0, 197, 255, 1) 360deg);height:100%;width:100%;opacity:1"></div> </foreignObject></g></g><path d="M23.9974 15.9995C19.5774 15.9995 15.9974 12.4195 15.9974 7.99951C15.9974 3.57951 19.5774 -0.000488281 23.9974 -0.000488281H31.9974V7.99951C31.9974 12.4195 28.4174 15.9995 23.9974 15.9995Z" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.8475537702652371e-15,"m01":-30.172840118408203,"m02":31.083795547485352,"m10":30.172840118408203,"m11":1.8475537702652371e-15,"m12":1.8266723155975342},"opacity":1.0,"blendMode":"NORMAL","visible":true}"/> <g clip-path="url(#paint1_angular_3875_4242_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.0150864 -0.0150864 0 15.9974 16.9131)"><foreignObject x="-1187.4" y="-1187.4" width="2374.8" height="2374.8"> <div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(0, 197, 255, 1) 0deg,rgba(0, 216, 181, 1) 43.4361deg,rgba(255, 203, 51, 1) 107.75deg,rgba(242, 115, 53, 1) 179.299deg,rgba(228, 45, 39, 1) 229.644deg,rgba(128, 68, 255, 1) 283.066deg,rgba(0, 114, 255, 1) 333.657deg,rgba(0, 197, 255, 1) 360deg);height:100%;width:100%;opacity:1"></div> </foreignObject></g></g><path d="M15.9974 7.99951C15.9974 12.4195 12.4174 15.9995 7.99738 15.9995C3.57738 15.9995 -0.00262451 12.4195 -0.00262451 7.99951V-0.000488281H7.99738C12.4174 -0.000488281 15.9974 3.57951 15.9974 7.99951Z" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.8475537702652371e-15,"m01":-30.172840118408203,"m02":31.083795547485352,"m10":30.172840118408203,"m11":1.8475537702652371e-15,"m12":1.8266723155975342},"opacity":1.0,"blendMode":"NORMAL","visible":true}"/> <g clip-path="url(#paint2_angular_3875_4242_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.0150864 -0.0150864 0 15.9974 16.9131)"><foreignObject x="-1187.4" y="-1187.4" width="2374.8" height="2374.8"> <div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(0, 197, 255, 1) 0deg,rgba(0, 216, 181, 1) 43.4361deg,rgba(255, 203, 51, 1) 107.75deg,rgba(242, 115, 53, 1) 179.299deg,rgba(228, 45, 39, 1) 229.644deg,rgba(128, 68, 255, 1) 283.066deg,rgba(0, 114, 255, 1) 333.657deg,rgba(0, 197, 255, 1) 360deg);height:100%;width:100%;opacity:1"></div> </foreignObject></g></g><path d="M7.99738 15.9995C12.4174 15.9995 15.9974 19.5795 15.9974 23.9995C15.9974 28.4195 12.4174 31.9995 7.99738 31.9995H-0.00262451V23.9995C-0.00262451 19.5795 3.57738 15.9995 7.99738 15.9995Z" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.8475537702652371e-15,"m01":-30.172840118408203,"m02":31.083795547485352,"m10":30.172840118408203,"m11":1.8475537702652371e-15,"m12":1.8266723155975342},"opacity":1.0,"blendMode":"NORMAL","visible":true}"/> <g clip-path="url(#paint3_angular_3875_4242_clip_path)" data-figma-skip-parse="true"><g transform="matrix(0 0.0150864 -0.0150864 0 15.9974 16.9131)"><foreignObject x="-1187.4" y="-1187.4" width="2374.8" height="2374.8"> <div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(0, 197, 255, 1) 0deg,rgba(0, 216, 181, 1) 43.4361deg,rgba(255, 203, 51, 1) 107.75deg,rgba(242, 115, 53, 1) 179.299deg,rgba(228, 45, 39, 1) 229.644deg,rgba(128, 68, 255, 1) 283.066deg,rgba(0, 114, 255, 1) 333.657deg,rgba(0, 197, 255, 1) 360deg);height:100%;width:100%;opacity:1"></div> </foreignObject></g></g><path d="M15.9974 23.9995C15.9974 19.5795 19.5774 15.9995 23.9974 15.9995C28.4174 15.9995 31.9974 19.5795 31.9974 23.9995V31.9995H23.9974C19.5774 31.9995 15.9974 28.4195 15.9974 23.9995Z" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"stopsVar":[{"color":{"r":0.0,"g":0.84705883264541626,"b":0.70980393886566162,"a":1.0},"position":0.12065579742193222},{"color":{"r":1.0,"g":0.79607844352722168,"b":0.20000000298023224,"a":1.0},"position":0.29930534958839417},{"color":{"r":0.94901961088180542,"g":0.45098039507865906,"b":0.20784313976764679,"a":1.0},"position":0.49805253744125366},{"color":{"r":0.89411765336990356,"g":0.17647059261798859,"b":0.15294118225574493,"a":1.0},"position":0.63789874315261841},{"color":{"r":0.50196081399917603,"g":0.26666668057441711,"b":1.0,"a":1.0},"position":0.78629583120346069},{"color":{"r":0.0,"g":0.44705882668495178,"b":1.0,"a":1.0},"position":0.92682510614395142},{"color":{"r":0.0,"g":0.77254903316497803,"b":1.0,"a":1.0},"position":1.0}],"transform":{"m00":1.8475537702652371e-15,"m01":-30.172840118408203,"m02":31.083795547485352,"m10":30.172840118408203,"m11":1.8475537702652371e-15,"m12":1.8266723155975342},"opacity":1.0,"blendMode":"NORMAL","visible":true}"/> <defs><clipPath id="paint0_angular_3875_4242_clip_path"><path d="M23.9974 15.9995C19.5774 15.9995 15.9974 12.4195 15.9974 7.99951C15.9974 3.57951 19.5774 -0.000488281 23.9974 -0.000488281H31.9974V7.99951C31.9974 12.4195 28.4174 15.9995 23.9974 15.9995Z"/></clipPath><clipPath id="paint1_angular_3875_4242_clip_path"><path d="M15.9974 7.99951C15.9974 12.4195 12.4174 15.9995 7.99738 15.9995C3.57738 15.9995 -0.00262451 12.4195 -0.00262451 7.99951V-0.000488281H7.99738C12.4174 -0.000488281 15.9974 3.57951 15.9974 7.99951Z"/></clipPath><clipPath id="paint2_angular_3875_4242_clip_path"><path d="M7.99738 15.9995C12.4174 15.9995 15.9974 19.5795 15.9974 23.9995C15.9974 28.4195 12.4174 31.9995 7.99738 31.9995H-0.00262451V23.9995C-0.00262451 19.5795 3.57738 15.9995 7.99738 15.9995Z"/></clipPath><clipPath id="paint3_angular_3875_4242_clip_path"><path d="M15.9974 23.9995C15.9974 19.5795 19.5774 15.9995 23.9974 15.9995C28.4174 15.9995 31.9974 19.5795 31.9974 23.9995V31.9995H23.9974C19.5774 31.9995 15.9974 28.4195 15.9974 23.9995Z"/></clipPath></defs> </svg> </div> </div> <div class="lui-ai-prompt__title-desc"> <div class="lui-ai-prompt__title-row"> <p class="lui-ai-prompt__title"> LoopOS AI </p> <div class="lui-ai-prompt__state-label"> <span class="lui-label" style="color: #212529; background-color: #ECEFF2;"> <span class="lui-label__text">Beta</span> </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="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"> <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> </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
34
35
36
37
<%params[:title] ||= "LoopOS AI"params[:description] ||= "Start the prompt with an action. Give all the needed details."params[:placeholder] ||= "Type your prompt..."params[:spinner] ||= trueparams[:max_rows] ||= 7%><div class="w-96 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] ) %> </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 |
|
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 |
"Start the prompt with an action. Give all the needed details." |
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. |
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) %>⚠️ Important
This component uses Inputs::Ai internally for the input field. Submission logic and result handling must be implemented by the developer.