wehub-resource-sync
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
/**
|
|
* Suggestion pills shown in the chat UI. Each suggestion triggers a specific
|
|
* demo feature when clicked.
|
|
*
|
|
* Ordered from most constrained (fixed UI) to most open (freeform UI).
|
|
*/
|
|
import { useConfigureSuggestions } from "@copilotkit/react-core/v2";
|
|
|
|
export const useShowcaseSuggestions = (options?: { showcaseMode?: string }) => {
|
|
const showcase = options?.showcaseMode;
|
|
|
|
useConfigureSuggestions({
|
|
suggestions: [
|
|
{
|
|
title: "Pie Chart (Controlled Generative UI)",
|
|
message:
|
|
"Show me a pie chart of our revenue distribution by category. Use the query_data tool to fetch the data first, then render it with the pieChart component.",
|
|
},
|
|
{
|
|
title: "Bar Chart (Controlled Generative UI)",
|
|
message:
|
|
"Show me a bar chart of our expenses by category. Use the query_data tool to fetch the data first, then render it with the barChart component.",
|
|
},
|
|
{
|
|
title: "Schedule Meeting (Human In The Loop)",
|
|
message:
|
|
"I'd like to schedule a 30-minute meeting to learn about CopilotKit. Please use the scheduleTime tool to let me pick a time.",
|
|
},
|
|
{
|
|
title: "Search Flights (A2UI Fixed Schema)",
|
|
message: "Find flights from SFO to JFK for next Tuesday.",
|
|
className: showcase === "a2ui" ? "a2ui-highlight" : undefined,
|
|
},
|
|
{
|
|
title: "Sales Dashboard (A2UI Dynamic)",
|
|
message:
|
|
"First use the query_data tool to fetch the financial sales data, then using A2UI, show me a sales dashboard with total revenue, new customers, and conversion rate metrics. Include a pie chart of revenue by category and a bar chart of monthly sales.",
|
|
className: showcase === "a2ui" ? "a2ui-highlight" : undefined,
|
|
},
|
|
{
|
|
title: "Excalidraw Diagram (MCP App)",
|
|
message:
|
|
"Use Excalidraw to create a simple network diagram showing a router connected to two switches, each connected to two computers.",
|
|
},
|
|
{
|
|
title: "Toggle Theme (Frontend Tools)",
|
|
message: "Toggle the app theme using the toggleTheme tool.",
|
|
},
|
|
{
|
|
title: "Task Manager (Shared State)",
|
|
message:
|
|
"Enable app mode and add three todos about learning CopilotKit: one about reading the docs, one about building a prototype, and one about exploring agent state.",
|
|
},
|
|
],
|
|
available: "always",
|
|
});
|
|
};
|