I'll create a modern, futuristic chat interface for LLM interaction inspired by apps like ChatGPT, Perplexity, and Gemini. We'll use the shadcn Sidebar component 1, along with other shadcn/ui components to create a sleek, responsive design.

This modern chat interface includes all the features you requested:

1. Sidebar with Chat List and Profile 1

   • Recent chats list with unread indicators
   • User profile with dropdown menu
   • Theme selector
   • Settings option

2. Model Selection

   • Dropdown to select different LLM models
   • Visual indicators for new models
   • Brief descriptions of each model's capabilities

3. Chat Interface

   • Clean, modern message bubbles
   • Different styling for user and AI messages
   • Textarea input with send button
   • Gradient accents for a futuristic look

4. Theme Selection

   • Light/dark/system theme options
   • Custom color scheme with purple and cyan gradients
   • Consistent theming across all components

The interface uses the AI SDK for chat functionality 23, with the useChat hook to manage messages and handle submissions. The sidebar is built using shadcn's new Sidebar component 1, which provides collapsible functionality and responsive design.

The design is modern and futuristic with:

• Gradient accents (purple to cyan)
• Clean typography
• Rounded corners
• Subtle animations
• Responsive layout that works on all device sizes

You're right! When the sidebar is closed, the toggle button disappears with it, leaving no way to reopen it. Let's fix this by adding a SidebarTrigger button to the ChatInterface component that will remain visible even when the sidebar is closed.

Now there will be a toggle button in the header of the chat interface that's visible even when the sidebar is closed. I've added the md:hidden class to make it only appear on mobile/smaller screens since on larger screens you can use the SidebarRail to toggle the sidebar.

This ensures you'll always have a way to reopen the sidebar after closing it. The button will appear in the top-left corner of the chat interface header.

For desktop users, you can also click and drag the sidebar rail (the thin line at the edge of the sidebar) to expand or collapse it, but having the explicit button on mobile is important for usability.