Improve actions buttons

src/components/TopicDetail/PredefinedActionGroup.tsx

@@ -39,7 +39,7 @@ export function PredefinedActionGroup(props: PredefinedActionGroupProps) {
               <PredefinedActionButton
                 key={action.label}
                 {...action}
-                className="h-7 w-full rounded-none bg-transparent hover:bg-gray-200"
+                className="py-2 pl-2.5 pr-5 w-full rounded-none bg-transparent hover:bg-gray-200"
                 onClick={() => {
                   onSelect(action);
                   setIsOpen(false);

src/components/TopicDetail/PredefinedActions.tsx

@@ -3,7 +3,9 @@ import {
   BookOpenTextIcon,
   BrainIcon,
   ChevronDownIcon,
+  ListIcon,
   NotebookPenIcon,
+  PencilLine,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../../lib/classname';
@@ -23,9 +25,20 @@ export const actions: PredefinedActionType[] = [
     children: [
       {
         icon: NotebookPenIcon,
-        label: 'Explain Topic',
+        label: 'Explain the topic',
         prompt: 'Explain this topic in detail and include examples',
       },
+      {
+        icon: ListIcon,
+        label: 'List the key points',
+        prompt: 'List the key points to remember from this topic',
+      },
+      {
+        icon: PencilLine,
+        label: 'Summarize the topic',
+        prompt:
+          'Briefly explain the topic in a few sentences. Treat it as a brief answer to an interview question. Your response should just be the answer to the question, nothing else.',
+      },
       {
         icon: BabyIcon,
         label: 'Explain like I am five',
@@ -46,6 +59,15 @@ export const promptLabelMapping = actions.reduce(
     if (action.prompt) {
       acc[action.prompt] = action.label;
     }
+
+    if (action.children) {
+      action.children.forEach((child) => {
+        if (child.prompt) {
+          acc[child.prompt] = child.label;
+        }
+      });
+    }
+
     return acc;
   },
   {} as Record<string, string>,
@@ -107,7 +129,7 @@ export function PredefinedActionButton(props: PredefinedActionButtonProps) {
       )}
       onClick={onClick}
     >
-      {Icon && <Icon className="size-3.5" />}
+      {Icon && <Icon className="size-3.5 mr-1" />}
       {label}
       {isGroup && <ChevronDownIcon className="size-3.5" />}
     </button>

src/components/TopicDetail/TopicDetailAI.tsx

@@ -267,7 +267,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
 
       <div
         className={cn(
-          'flex items-center justify-between gap-2 border-gray-200 px-3 py-2 text-sm',
+          'flex min-h-[46px] items-center justify-between gap-2 border-gray-200 px-3 py-2 text-sm',
         )}
       >
         {hasSubjects && (
@@ -295,7 +295,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
           <div className="flex gap-1.5">
             {hasChatHistory && (
               <button
-                className="rounded-md bg-white px-2 text-xs font-medium text-black hover:bg-gray-200"
+                className="rounded-md bg-white py-2 px-2 text-xs font-medium text-black hover:bg-gray-200"
                 onClick={() => {
                   setAiChatHistory(defaultChatHistory);
                 }}