scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-06 02:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add icons to Ask Fabro preset prompts

Browse source 
Gives each of the four empty-state suggestions a Heroicon to aid
scannability: warning triangle for "Surface errors", bolt for
"Analyze performance", map for "Review key decisions", and lightbulb
for "Suggest improvements".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-05-24 17:30:14 -04:00
parent f5e5f9c75c
commit 7efa38c384
No known key found for this signature in database
1 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/fabro-web/app/components/chats/sidebar-welcome.tsx
View file

@ -1,4 +1,10 @@
import { ThreadPrimitive } from "@assistant-ui/react";
import {
BoltIcon,
ExclamationTriangleIcon,
LightBulbIcon,
MapIcon,
} from "@heroicons/react/16/solid";
/**
* Example prompts shown on the empty Ask-Fabro thread. Each `prompt` is sent
@ -6,24 +12,28 @@ import { ThreadPrimitive } from "@assistant-ui/react";
*/
const EXAMPLE_PROMPTS = [
{
Icon: ExclamationTriangleIcon,
heading: "Surface errors",
description: "Find errors, warnings, and failed steps in this run.",
prompt:
"Analyze this workflow run for any errors, exceptions, failed operations, or unexpected behavior. Include details about what went wrong, when it occurred, and potential causes or fixes.",
},
{
Icon: BoltIcon,
heading: "Analyze performance",
description: "Spot the slowest stages and where time was spent.",
prompt:
"Analyze the performance of this workflow run, including tool execution times, API call latencies, timeouts, and any bottlenecks. Compare timing across similar operations and identify optimization opportunities.",
},
{
Icon: MapIcon,
heading: "Review key decisions",
description: "Recap the important choices the agent made.",
prompt:
"Trace the workflow run flow, including key decision points, branching logic, tool selection reasoning, and how the assistant responded to different inputs or contexts.",
},
{
Icon: LightBulbIcon,
heading: "Suggest improvements",
description: "Ideas to make this workflow faster and more reliable.",
prompt:
@ -47,12 +57,18 @@ export default function SidebarWelcome() {
<ThreadPrimitive.Suggestion asChild prompt={example.prompt} send>
<button
type="button"
className="flex w-full flex-col gap-1 rounded-xl bg-panel-alt/60 px-4 py-3.5 text-left ring-1 ring-line transition-colors hover:bg-panel-alt hover:ring-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
className="flex w-full items-start gap-3 rounded-xl bg-panel-alt/60 px-4 py-3.5 text-left ring-1 ring-line transition-colors hover:bg-panel-alt hover:ring-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
>
<p className="text-sm font-medium text-fg">
{example.heading}
</p>
<p className="text-xs text-fg-3">{example.description}</p>
<example.Icon
aria-hidden="true"
className="size-4 h-lh shrink-0 fill-fg-3"
/>
<div className="flex flex-col gap-1">
<p className="text-sm font-medium text-fg">
{example.heading}
</p>
<p className="text-xs text-fg-3">{example.description}</p>
</div>
</button>
</ThreadPrimitive.Suggestion>
</li>