diff --git a/apps/fabro-web/app/components/chats/ask-fabro-sidebar.tsx b/apps/fabro-web/app/components/chats/ask-fabro-sidebar.tsx index 60b4235bd..7fdadddc5 100644 --- a/apps/fabro-web/app/components/chats/ask-fabro-sidebar.tsx +++ b/apps/fabro-web/app/components/chats/ask-fabro-sidebar.tsx @@ -10,6 +10,7 @@ import remarkGfm from "remark-gfm"; import { createAskFabroAdapter } from "../../lib/ask-fabro-runtime"; import { useAskFabroLayout } from "../../lib/ask-fabro-layout"; import SidebarComposer from "./sidebar-composer"; +import SidebarWelcome from "./sidebar-welcome"; import ToolCallSummary from "./tool-call-summary"; // remark-gfm enables GitHub-flavored Markdown so the agent's tables, task @@ -139,7 +140,7 @@ export default function AskFabroSidebar({
null }} + components={{ Composer: SidebarComposer, ThreadWelcome: SidebarWelcome }} assistantMessage={{ components: { Text: MarkdownText, ToolFallback: ToolCallSummary }, allowCopy: false, diff --git a/apps/fabro-web/app/components/chats/sidebar-welcome.tsx b/apps/fabro-web/app/components/chats/sidebar-welcome.tsx new file mode 100644 index 000000000..1818f5340 --- /dev/null +++ b/apps/fabro-web/app/components/chats/sidebar-welcome.tsx @@ -0,0 +1,64 @@ +import { ThreadPrimitive } from "@assistant-ui/react"; + +/** + * Example prompts shown on the empty Ask-Fabro thread. Each `prompt` is sent + * verbatim as the first message; `heading`/`description` are display-only. + */ +const EXAMPLE_PROMPTS = [ + { + heading: "Surface errors", + description: "Find errors, warnings, and failed steps in this run.", + prompt: + "Walk me through any errors, warnings, or failed steps in this run and what caused them.", + }, + { + heading: "Analyze performance", + description: "Spot the slowest stages and where time was spent.", + prompt: + "Which stages were the slowest, and where did this run spend most of its time?", + }, + { + heading: "Review key decisions", + description: "Recap the important choices the agent made.", + prompt: + "What were the key decisions the agent made during this run, and why?", + }, + { + heading: "Suggest improvements", + description: "Ideas to make this workflow faster and more reliable.", + prompt: + "Suggest improvements to make this workflow faster and more reliable.", + }, +]; + +/** + * Empty-state for the Ask-Fabro sidebar. Wrapped in `ThreadPrimitive.Empty` so + * it renders only before the first message; clicking an example sends its + * prompt, which starts the session. + */ +export default function SidebarWelcome() { + return ( + +
+

How can I help?

+
    + {EXAMPLE_PROMPTS.map((example) => ( +
  • + + + +
  • + ))} +
+
+
+ ); +}