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):
Features:
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.
Design an intuitive and aesthetically pleasing chatbot interface inspired by popular platforms like Reddit and modern chatbot UIs. Focus on consolidating the prompt input area by adding stylish, clearly labeled options for various use cases such as daily assistance, studying, creating slides, or generating mind maps. These options should be easily selectable and recognized by the AI to customize responses effectively. Ensure the prompt box is the only element with a background—eliminate the main background for a cleaner look. Incorporate subtle, advanced features that enhance user experience and reduce friction, such as quick access buttons, smooth transitions, and visual cues indicating active states. The overall design should foster quick, effortless interaction with noticeable but unobtrusive enhancements that make the experience feel seamless, engaging, and efficient.