Now I have the full context. I'll add aesthetic quick action mode chips above the input area that let the user select what they want to do (Studying, Mind Maps, Slides, Daily Chat, etc.) and the AI will know which mode is selected. Let me update the code:

Now let me add the ModeSelector component and update the SamInput and EmptyState components:

Now let me update the SamInput component to accept a mode and use the placeholder:

Now let me update the EmptyState to show the mode selector more prominently and update the main page component:

Now let me update the main page state and footer to include the mode selector and quick suggestions:

Now update the handleSubmit to include the mode:

Now update the EmptyState usage and footer:

Now let me update the footer section to include the mode selector and quick suggestions above the input:

Now let me also add a mode badge to the history sidebar items to show which mode was used for each conversation:

I've added an interactive mode selector system to Sam. Here's what's new:

Mode Options (7 aesthetic chips):

• Study - For learning and understanding concepts (green)
• Mind Map - For visualizing ideas and connections (purple)
• Slides - For creating presentations (amber)
• Daily - For casual chat and daily assistance (pink)
• Code - For programming help and debugging (cyan)
• Brainstorm - For generating creative ideas (orange)
• Write - For content and copywriting (violet)

Features:

• Each mode has its own icon, color, placeholder text, and quick suggestions
• The mode selector appears both in the empty state (large) and above the input (compact)
• Quick suggestion chips appear when input is empty, pre-filling common prompts for the selected mode
• The selected mode is saved with each message and shown in the history sidebar
• Smooth animations with hover effects, glow indicators, and tooltips showing mode descriptions
• The AI avatar in empty state changes color based on selected mode
• Placeholders dynamically update to match the selected mode

I can see the issue. The ModeSelector is in the EmptyState component. Let me remove it from there and simplify the EmptyState to just show a welcome message without the mode selector:

Now let me update the EmptyState usage to remove the props:

I've removed the mode selector from the empty state/background area. Now it only appears in the prompt box (footer) area where users can select their mode before typing. The empty state now shows a simple, clean welcome message with the animated Sam avatar.