agentgui 1.0.43 → 1.0.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/system-prompt.js +130 -0
package/package.json
CHANGED
package/system-prompt.js
CHANGED
|
@@ -164,6 +164,136 @@ To ensure compatibility and prevent clashing:
|
|
|
164
164
|
</table>
|
|
165
165
|
\`\`\`
|
|
166
166
|
|
|
167
|
+
## Advanced RippleUI Components (Use These!)
|
|
168
|
+
|
|
169
|
+
Use RippleUI's rich component library to create interesting, visually effective displays:
|
|
170
|
+
|
|
171
|
+
### Progress Indicator
|
|
172
|
+
\`\`\`html
|
|
173
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
174
|
+
<div class="space-y-2">
|
|
175
|
+
<div class="flex justify-between items-center mb-2">
|
|
176
|
+
<span class="text-sm font-semibold">Progress</span>
|
|
177
|
+
<span class="text-sm text-gray-500">75%</span>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
180
|
+
<div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
\`\`\`
|
|
185
|
+
|
|
186
|
+
### Grid Layout with Cards
|
|
187
|
+
\`\`\`html
|
|
188
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
189
|
+
<div class="grid grid-cols-2 gap-4">
|
|
190
|
+
<div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
|
|
191
|
+
<h4 class="font-bold text-blue-900">Metric 1</h4>
|
|
192
|
+
<p class="text-2xl font-bold text-blue-600">1,234</p>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="bg-green-50 p-4 rounded-lg border border-green-200">
|
|
195
|
+
<h4 class="font-bold text-green-900">Metric 2</h4>
|
|
196
|
+
<p class="text-2xl font-bold text-green-600">567</p>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
\`\`\`
|
|
201
|
+
|
|
202
|
+
### Collapsible Section
|
|
203
|
+
\`\`\`html
|
|
204
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
205
|
+
<details class="group">
|
|
206
|
+
<summary class="cursor-pointer font-bold text-gray-900 flex items-center">
|
|
207
|
+
<span class="group-open:rotate-90 inline-block transition-transform">▶</span>
|
|
208
|
+
Click to expand
|
|
209
|
+
</summary>
|
|
210
|
+
<div class="mt-4 pl-4 text-gray-700">
|
|
211
|
+
Hidden content here
|
|
212
|
+
</div>
|
|
213
|
+
</details>
|
|
214
|
+
</div>
|
|
215
|
+
\`\`\`
|
|
216
|
+
|
|
217
|
+
### Sidebar/Two-Column
|
|
218
|
+
\`\`\`html
|
|
219
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
220
|
+
<div class="flex gap-4">
|
|
221
|
+
<div class="w-1/3 bg-gray-50 p-4 rounded-lg">
|
|
222
|
+
<h4 class="font-bold mb-2">Sidebar</h4>
|
|
223
|
+
<p class="text-sm text-gray-700">Navigation or info</p>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="w-2/3 bg-white p-4 rounded-lg border">
|
|
226
|
+
<h4 class="font-bold mb-2">Main Content</h4>
|
|
227
|
+
<p class="text-gray-700">Primary content here</p>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
\`\`\`
|
|
232
|
+
|
|
233
|
+
### Badge/Pill Labels
|
|
234
|
+
\`\`\`html
|
|
235
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
236
|
+
<div class="flex gap-2 flex-wrap">
|
|
237
|
+
<span class="inline-block bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Active</span>
|
|
238
|
+
<span class="inline-block bg-yellow-500 text-white px-3 py-1 rounded-full text-sm">Pending</span>
|
|
239
|
+
<span class="inline-block bg-green-500 text-white px-3 py-1 rounded-full text-sm">Completed</span>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
\`\`\`
|
|
243
|
+
|
|
244
|
+
### Timeline
|
|
245
|
+
\`\`\`html
|
|
246
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
247
|
+
<div class="space-y-4">
|
|
248
|
+
<div class="flex gap-4">
|
|
249
|
+
<div class="w-3 h-3 rounded-full bg-blue-600 mt-1.5"></div>
|
|
250
|
+
<div>
|
|
251
|
+
<h4 class="font-bold">Step 1</h4>
|
|
252
|
+
<p class="text-gray-700 text-sm">Description of first step</p>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="flex gap-4">
|
|
256
|
+
<div class="w-3 h-3 rounded-full bg-green-600 mt-1.5"></div>
|
|
257
|
+
<div>
|
|
258
|
+
<h4 class="font-bold">Step 2</h4>
|
|
259
|
+
<p class="text-gray-700 text-sm">Description of second step</p>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
\`\`\`
|
|
265
|
+
|
|
266
|
+
### Icon + Text Combination
|
|
267
|
+
\`\`\`html
|
|
268
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
269
|
+
<div class="flex items-start gap-3">
|
|
270
|
+
<span class="text-2xl">⚡</span>
|
|
271
|
+
<div>
|
|
272
|
+
<h4 class="font-bold">Performance</h4>
|
|
273
|
+
<p class="text-gray-700">High-speed data processing</p>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="flex items-start gap-3">
|
|
277
|
+
<span class="text-2xl">🔒</span>
|
|
278
|
+
<div>
|
|
279
|
+
<h4 class="font-bold">Security</h4>
|
|
280
|
+
<p class="text-gray-700">Enterprise-grade protection</p>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
\`\`\`
|
|
285
|
+
|
|
286
|
+
### Data Visualization (ASCII-style)
|
|
287
|
+
\`\`\`html
|
|
288
|
+
<div class="space-y-4 p-6 max-w-4xl">
|
|
289
|
+
<div class="bg-gray-50 p-4 rounded-lg font-mono text-sm">
|
|
290
|
+
<div>█████████░░░░░░░░░░ 50%</div>
|
|
291
|
+
<div>████████████████░░░░ 80%</div>
|
|
292
|
+
<div>██████████░░░░░░░░░░ 50%</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
\`\`\`
|
|
296
|
+
|
|
167
297
|
## Structure Template
|
|
168
298
|
|
|
169
299
|
ALWAYS use this structure:
|