Separate the shorthand of each suggestion card from the prefilled text

src/interface/web/app/components/suggestions/suggestionCard.tsx

@@ -20,7 +20,7 @@ interface StepTwoSuggestionCardProps {
 }
 
 export function StepOneSuggestionCard(data: StepOneSuggestionCardProps) {
-    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2`;
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2 animate-fade-in-up`;
     const descriptionClassName = `${styles.text} dark:text-white`;
 
     const cardContent = (
@@ -48,7 +48,10 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
         <Card className={cardClassName}>
             <div className="flex w-full items-center">
                 <CardContent className="m-0 p-2 w-full flex flex-row items-center">
-                    <ArrowRight className="w-6 h-6 text-muted-foreground inline-flex mr-1" />
+                    <ArrowRight
+                        weight="thin"
+                        className="w-6 h-6 text-muted-foreground inline-flex mr-1 text-opacity-40"
+                    />
                     <CardDescription
                         className={`sm:line-clamp-2 md:line-clamp-4 break-words whitespace-pre-wrap max-w-full text-sm text-wrap text-black dark:text-white`}
                     >
@@ -61,14 +64,14 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
 }
 
 export function StepOneSuggestionRevertCard(data: StepOneSuggestionRevertCardProps) {
-    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer m-2 md:p-2 animate-fade-in-up`;
+    const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer m-2 md:p-2 animate-fade-in-up border-none`;
     const descriptionClassName = `${styles.text} dark:text-white`;
 
     return (
         <Card className={cardClassName} onClick={data.onClick}>
             <div className="flex w-full">
                 <CardContent className="m-0 p-2 w-full flex flex-row">
-                    <ArrowLeft className="w-4 h-4 text-muted-foreground inline-flex mr-1" />
+                    <ArrowLeft className="w-6 h-6 text-muted-foreground inline-flex mr-1" />
                     {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
                     <CardDescription
                         className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full`}

src/interface/web/app/components/suggestions/suggestionsData.ts

@@ -24,6 +24,7 @@ export interface StepOneSuggestion {
     color: string;
     actionTagline: string;
     focus: ChatInputFocus;
+    intent: string;
 }
 
 export interface StepTwoSuggestion {
@@ -84,90 +85,105 @@ export const stepOneSuggestions: StepOneSuggestion[] = [
         actionTagline: "Summarize text",
         color: suggestionToColorMap[SuggestionType.Document] || DEFAULT_COLOR,
         focus: ChatInputFocus.FILE,
+        intent: "Summarize this document",
     },
     {
         type: SuggestionType.Code,
         actionTagline: "Write code",
         color: suggestionToColorMap[SuggestionType.Code] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Write a program that",
     },
     {
         type: SuggestionType.Learning,
         actionTagline: "Explain concept",
         color: suggestionToColorMap[SuggestionType.Learning] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "I want to understand a concept",
     },
     {
         type: SuggestionType.Paint,
         actionTagline: "Create image",
         color: suggestionToColorMap[SuggestionType.Paint] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Paint a picture of",
     },
     {
         type: SuggestionType.Travel,
         actionTagline: "Find a place",
         color: suggestionToColorMap[SuggestionType.Travel] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Find a place that is",
     },
     {
         type: SuggestionType.Language,
         actionTagline: "Translate text",
         color: suggestionToColorMap[SuggestionType.Language] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Translate this text",
     },
     {
         type: SuggestionType.PopCulture,
-        actionTagline: "Find a movie",
+        actionTagline: "Explain a trend",
         color: suggestionToColorMap[SuggestionType.PopCulture] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Tell me more about this phenomenon",
     },
     {
         type: SuggestionType.Food,
         actionTagline: "Find a recipe",
         color: suggestionToColorMap[SuggestionType.Food] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Find a recipe for",
     },
     {
         type: SuggestionType.Interviewing,
         actionTagline: "Career advice",
         color: suggestionToColorMap[SuggestionType.Interviewing] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Help me prepare for an interview",
     },
     {
         type: SuggestionType.Fun,
         actionTagline: "Get creative",
         color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Suggest a fun activity",
     },
     {
         type: SuggestionType.Finance,
         actionTagline: "Explain money",
         color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Help me build mental models for finance",
     },
     {
         type: SuggestionType.Math,
         actionTagline: "Explain math",
         color: suggestionToColorMap[SuggestionType.Math] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Help me understand the math behind",
     },
     {
         type: SuggestionType.Image,
         actionTagline: "Explain image",
         color: suggestionToColorMap[SuggestionType.Image] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Explain the significance of this image",
     },
     {
         type: SuggestionType.Health,
         actionTagline: "Improve health",
         color: suggestionToColorMap[SuggestionType.Health] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Help me improve my health",
     },
     {
         type: SuggestionType.Home,
         actionTagline: "Improve home",
         color: suggestionToColorMap[SuggestionType.Home] || DEFAULT_COLOR,
         focus: ChatInputFocus.MESSAGE,
+        intent: "Help me improve my home",
     },
 ];
 

src/interface/web/app/page.tsx

@@ -204,13 +204,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
     }, []);
 
     function clickStepOneSuggestion(suggestion: StepOneSuggestion) {
-        let message_str = "";
+        setPrefilledMessage(suggestion.intent);
-        let prompt =
-            suggestion.actionTagline.charAt(0).toLowerCase() + suggestion.actionTagline.slice(1);
-
-        message_str = prompt;
-
-        setPrefilledMessage(message_str);
         const stepTwoSuggestions = getStepTwoSuggestions(suggestion.type);
         setSelectedStepOneSuggestion(suggestion);
         setStepTwoSuggestionOptions(stepTwoSuggestions);