feat(DATAGO-104907): Suggest potential things I can do when launching a new chat

client/webui/frontend/src/lib/api/starterSuggestions/hooks.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { starterSuggestionsKeys } from "./keys";
+import * as starterSuggestionsService from "./service";
+
+/**
+ * Hook to fetch LLM-generated starter card suggestions.
+ * Uses a long staleTime (5 min) since suggestions don't change frequently.
+ */
+export function useStarterSuggestions() {
+    return useQuery({
+        queryKey: starterSuggestionsKeys.suggestions(),
+        queryFn: starterSuggestionsService.fetchStarterSuggestions,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+        gcTime: 10 * 60 * 1000, // 10 minutes garbage collection
+        retry: 1, // Only retry once on failure
+        refetchOnWindowFocus: false,
+    });
+}

client/webui/frontend/src/lib/api/starterSuggestions/index.ts

@@ -0,0 +1,3 @@
+export * from "./hooks";
+export * from "./keys";
+export * from "./service";

client/webui/frontend/src/lib/api/starterSuggestions/keys.ts

@@ -0,0 +1,8 @@
+/**
+ * Query keys for React Query caching and invalidation
+ * Following the pattern: ['entity', ...filters/ids]
+ */
+export const starterSuggestionsKeys = {
+    all: ["starter-suggestions"] as const,
+    suggestions: () => [...starterSuggestionsKeys.all, "list"] as const,
+};

client/webui/frontend/src/lib/api/starterSuggestions/service.ts

@@ -0,0 +1,25 @@
+/**
+ * API service functions for starter card suggestions
+ */
+
+import { api } from "../client";
+
+export interface StarterSuggestionOption {
+    label: string;
+    prompt: string;
+}
+
+export interface StarterSuggestionCategory {
+    icon: string;
+    label: string;
+    description: string;
+    options: StarterSuggestionOption[];
+}
+
+export interface StarterSuggestionsResponse {
+    categories: StarterSuggestionCategory[];
+}
+
+export async function fetchStarterSuggestions(): Promise<StarterSuggestionsResponse> {
+    return api.webui.get("/api/v1/starter-suggestions");
+}

client/webui/frontend/src/lib/components/chat/ChatInputArea.tsx

@@ -200,6 +200,30 @@ export const ChatInputArea: React.FC<{ agents: AgentCardInfo[]; scrollToBottom?:
         };
     }, []);
 
+    // Handle starter card option click - auto-submit the prompt directly
+    useEffect(() => {
+        const handleStarterCardSubmit = async (event: Event) => {
+            const customEvent = event as CustomEvent<{ prompt: string }>;
+            const { prompt } = customEvent.detail;
+            if (isResponding) return;
+
+            // Set the input value briefly (for visual feedback) then submit
+            setInputValue(prompt);
+            // Small delay to ensure state is updated, then auto-submit
+            setTimeout(async () => {
+                const fakeEvent = new Event("submit") as unknown as FormEvent;
+                await handleSubmit(fakeEvent, [], prompt);
+                setInputValue("");
+                scrollToBottom?.();
+            }, 50);
+        };
+
+        window.addEventListener("starter-card-submit", handleStarterCardSubmit);
+        return () => {
+            window.removeEventListener("starter-card-submit", handleStarterCardSubmit);
+        };
+    }, [isResponding, handleSubmit, scrollToBottom]);
+
     // Handle follow-up question from text selection
     useEffect(() => {
         const handleFollowUp = async (event: Event) => {

client/webui/frontend/src/lib/components/chat/ChatStarterCards.tsx

@@ -0,0 +1,217 @@
+import React, { useMemo, useState, useRef, useEffect } from "react";
+
+import { BarChart3, Users, ShieldCheck, TrendingUp, FileSearch, Lightbulb, Search, FileText, Database, Globe, Bot, ChevronRight, Briefcase, Code, Mail, Calendar, Settings, Zap, Target, PieChart, LineChart, type LucideIcon } from "lucide-react";
+
+import { useStarterSuggestions } from "@/lib/api/starterSuggestions";
+import type { StarterSuggestionCategory } from "@/lib/api/starterSuggestions";
+
+export interface StarterCardOption {
+    label: string;
+    prompt: string;
+}
+
+export interface StarterCard {
+    icon: React.ReactNode;
+    label: string;
+    description: string;
+    options: StarterCardOption[];
+}
+
+/** Map of icon name strings to Lucide React icon components */
+const ICON_MAP: Record<string, LucideIcon> = {
+    BarChart3,
+    Users,
+    ShieldCheck,
+    TrendingUp,
+    FileSearch,
+    Lightbulb,
+    Search,
+    FileText,
+    Database,
+    Globe,
+    Bot,
+    Briefcase,
+    Code,
+    Mail,
+    Calendar,
+    Settings,
+    Zap,
+    Target,
+    PieChart,
+    LineChart,
+};
+
+/** Resolve an icon name string to a React element, with fallback */
+function resolveIcon(iconName: string): React.ReactNode {
+    const IconComponent = ICON_MAP[iconName] || Lightbulb;
+    return <IconComponent className="h-4 w-4" />;
+}
+
+/** Convert backend suggestion categories to StarterCard format */
+function categoriesToCards(categories: StarterSuggestionCategory[]): StarterCard[] {
+    return categories.map(cat => ({
+        icon: resolveIcon(cat.icon),
+        label: cat.label,
+        description: cat.description,
+        options: cat.options.map(opt => ({
+            label: opt.label,
+            prompt: opt.prompt,
+        })),
+    }));
+}
+
+/** Default starter cards shown when LLM suggestions are unavailable */
+const DEFAULT_STARTER_CARDS: StarterCard[] = [
+    {
+        icon: <BarChart3 className="h-4 w-4" />,
+        label: "Research & Analysis",
+        description: "Investigate topics and analyze data",
+        options: [
+            { label: "Help me research a topic", prompt: "Help me research a topic in depth. Ask me what I'd like to investigate and I'll provide the details." },
+            { label: "Analyze data for insights", prompt: "Help me analyze some data to find patterns and insights. Ask me about the data I'm working with so we can get started." },
+            { label: "Compare options or alternatives", prompt: "Help me compare different options or alternatives to make a decision. Ask me what I'm evaluating." },
+        ],
+    },
+    {
+        icon: <FileText className="h-4 w-4" />,
+        label: "Writing & Editing",
+        description: "Draft, rewrite, and improve content",
+        options: [
+            { label: "Make my message more persuasive", prompt: "Rewrite my message so it feels more persuasive for its audience and goal. If needed, ask me to share the message and what I want it to achieve." },
+            { label: "Draft a professional email", prompt: "Help me draft a professional email. Ask me about the recipient, purpose, and key points I want to cover." },
+            { label: "Summarize a long document", prompt: "Help me create a concise summary of a document. Ask me to share the content or tell you what it's about." },
+        ],
+    },
+    {
+        icon: <Lightbulb className="h-4 w-4" />,
+        label: "Planning & Strategy",
+        description: "Organize ideas and plan next steps",
+        options: [
+            { label: "Help me plan a project", prompt: "Help me create a project plan with milestones and tasks. Ask me about the project scope and timeline so we can get started." },
+            { label: "Brainstorm solutions", prompt: "Help me brainstorm solutions to a challenge I'm facing. Ask me to describe the problem and any constraints." },
+            { label: "Prepare for a meeting", prompt: "Help me prepare for an upcoming meeting. Ask me about the meeting topic, attendees, and what I want to accomplish." },
+        ],
+    },
+    {
+        icon: <TrendingUp className="h-4 w-4" />,
+        label: "Problem Solving",
+        description: "Work through complex challenges",
+        options: [
+            { label: "Break down a complex problem", prompt: "Help me break down a complex problem into manageable parts. Ask me to describe what I'm dealing with." },
+            { label: "Evaluate a decision", prompt: "Help me think through a decision by weighing pros and cons. Ask me about the options I'm considering." },
+            { label: "Troubleshoot an issue", prompt: "Help me troubleshoot an issue I'm experiencing. Ask me to describe the problem and what I've already tried." },
+        ],
+    },
+];
+
+const MAX_VISIBLE_CARDS = 4;
+
+/** Loading skeleton for starter cards */
+function StarterCardsSkeleton() {
+    return (
+        <div className="w-full">
+            <div className="flex flex-wrap justify-center gap-2 px-4">
+                {Array.from({ length: MAX_VISIBLE_CARDS }).map((_, i) => (
+                    <div key={i} className="flex items-center gap-2 rounded-full border border-(--secondary-w20) bg-(--background-w10) px-4 py-2.5">
+                        <div className="h-4 w-4 animate-pulse rounded bg-(--secondary-w20)" />
+                        <div className="h-4 w-20 animate-pulse rounded bg-(--secondary-w20)" />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+interface ChatStarterCardsProps {
+    onOptionClick: (prompt: string) => void;
+}
+
+export const ChatStarterCards: React.FC<ChatStarterCardsProps> = ({ onOptionClick }) => {
+    const [expandedCard, setExpandedCard] = useState<string | null>(null);
+    const expandedRef = useRef<HTMLDivElement>(null);
+
+    // Fetch LLM-generated suggestions
+    const { data: suggestionsData, isLoading } = useStarterSuggestions();
+
+    // Close expanded card when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (expandedRef.current && !expandedRef.current.contains(event.target as Node)) {
+                setExpandedCard(null);
+            }
+        };
+
+        if (expandedCard) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
+        }
+    }, [expandedCard]);
+
+    const visibleCards = useMemo(() => {
+        // Use LLM-generated suggestions if available, otherwise fall back to defaults
+        if (suggestionsData?.categories && suggestionsData.categories.length > 0) {
+            const llmCards = categoriesToCards(suggestionsData.categories);
+            return llmCards.slice(0, MAX_VISIBLE_CARDS);
+        }
+
+        return DEFAULT_STARTER_CARDS.slice(0, MAX_VISIBLE_CARDS);
+    }, [suggestionsData]);
+
+    const expandedCardData = useMemo(() => {
+        if (!expandedCard) return null;
+        return visibleCards.find(card => card.label === expandedCard) ?? null;
+    }, [expandedCard, visibleCards]);
+
+    const handleCardClick = (cardLabel: string) => {
+        setExpandedCard(prev => (prev === cardLabel ? null : cardLabel));
+    };
+
+    const handleOptionClick = (prompt: string) => {
+        setExpandedCard(null);
+        onOptionClick(prompt);
+    };
+
+    if (isLoading) {
+        return <StarterCardsSkeleton />;
+    }
+
+    return (
+        <div className="w-full" ref={expandedRef}>
+            {/* Show pills when no card is expanded */}
+            {!expandedCardData && (
+                <div className="flex flex-wrap justify-center gap-2 px-4">
+                    {visibleCards.map(card => (
+                        <button
+                            key={card.label}
+                            onClick={() => handleCardClick(card.label)}
+                            className="group flex items-center gap-2 rounded-full border border-(--secondary-w20) bg-(--background-w10) px-4 py-2.5 text-sm transition-all duration-200 hover:border-(--secondary-w40) hover:bg-(--background-w20) hover:shadow-sm active:scale-[0.98]"
+                            title={card.description}
+                        >
+                            <span className="text-(--secondary-text-wMain) transition-colors group-hover:text-(--primary-wMain)">{card.icon}</span>
+                            <span className="font-medium text-(--foreground)">{card.label}</span>
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {/* Show expanded options (replacing pills) when a card is expanded */}
+            {expandedCardData && (
+                <div className="animate-in fade-in slide-in-from-top-2 w-full duration-200">
+                    <div className="flex flex-col">
+                        {expandedCardData.options.map((option, index) => (
+                            <button
+                                key={option.label}
+                                onClick={() => handleOptionClick(option.prompt)}
+                                className={`group flex w-full items-center gap-3 px-6 py-3.5 text-left text-sm transition-colors hover:bg-(--background-w20) ${index < expandedCardData.options.length - 1 ? "border-b border-(--secondary-w20)" : ""}`}
+                            >
+                                <span className="text-(--secondary-text-wMain) transition-colors group-hover:text-(--primary-wMain)">{expandedCardData.icon}</span>
+                                <span className="flex-1 text-(--primary-text-wMain)">{option.label}</span>
+                                <ChevronRight className="h-4 w-4 text-(--secondary-text-wMain) opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100" />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

client/webui/frontend/src/lib/components/chat/index.ts

@@ -1,6 +1,7 @@
 export { AudioRecorder } from "./AudioRecorder";
 export { ChatInputArea } from "./ChatInputArea";
 export { ChatMessage } from "./ChatMessage";
+export { ChatStarterCards } from "./ChatStarterCards";
 export { ChatSessionDeleteDialog } from "./ChatSessionDeleteDialog";
 export { ChatSessionDialog } from "./ChatSessionDialog";
 export { ChatSessions } from "./ChatSessions";