A modern, responsive React + TypeScript chat interface built with shadcn/ui, Framer Motion, and TailwindCSS. Features Vision Chat AI - a hardcoded AI agent with deterministic responses that vary based on user options and file attachments.
- Real-time messaging with user and Vision Chat AI message bubbles
- Markdown support for AI responses (bold, code, links, lists)
- Syntax highlighting for code blocks with dark theme
- Collapsible code blocks with "Show more/less" functionality
- Collapsible user messages for long text and code
- Typing indicators with animated dots
- Auto-scroll to latest messages
- Timestamps for all messages
- File attachments with image previews and validation
- Voice input with speech recognition
- Mobile responsive design with drawer navigation
- Conversation persistence with local storage
- Share functionality with copyable links
🎨 Design: I created the UI/UX design in Figma. You can view the complete design system and mockups here: Figma Design - Transform Your Workflow With AI Assistant
- 6 distinct response styles:
- Summary paragraphs
- Bullet lists (with proper ChatGPT-style formatting)
- Numbered steps
- Witty quips
- Definition + examples
- Q&A format
- Code detection and automatic code example generation
- Deterministic responses based on:
- Response length (short/medium/long)
- Response style (bullets/steps/paragraph/definition/qa/quip)
- Response tone (casual/formal/friendly)
- File-aware responses when attachments are present
- Multi-line textarea (Enter to send, Shift+Enter for newline)
- File upload with validation (max 5 files, 10MB each)
- Options panel with 3 customizable controls:
- Response Length (Short/Medium/Long)
- Response Style (Bullets/Steps/Paragraph/Definition/Q&A/Quip)
- Response Tone (Casual/Formal/Friendly)
- Quick action dropdown with preset prompts:
- Add photos & files
- Create image
- Thinking mode
- Deep research
- Study and learn
- Real-time option updates affecting AI responses
- Framer Motion animations for:
- Message appearance
- Typing indicators
- File chip interactions
- Options panel toggle
- Mobile drawer transitions
- Responsive design for all screen sizes
- Mobile drawer navigation for smaller devices
- Accessibility features (keyboard navigation, screen reader support)
- Smooth scrolling and auto-scroll to latest messages
- React 19 with TypeScript
- shadcn/ui for UI components
- TailwindCSS for styling
- Framer Motion for animations
- React Markdown for message rendering
- Lucide React for icons
- React Router DOM for navigation
- Vite for build tooling
src/
├── components/
│ ├── chat/
│ │ ├── ChatArea.tsx # Main chat interface
│ │ ├── ChatSidebar.tsx # Left sidebar with conversations
│ │ ├── MessageRenderer.tsx # Message rendering with markdown
│ │ └── OptionsPanel.tsx # Chat options configuration
│ └── ui/ # shadcn/ui components
├── hooks/
│ ├── useChatActions.ts # Chat action handlers
│ ├── useChatPersistence.ts # Chat state persistence
│ ├── useInputState.ts # Input state management
│ ├── useUIState.ts # UI state management
│ └── useVoiceState.ts # Voice input handling
├── lib/
│ └── utils.ts # shadcn/ui utilities
├── pages/
│ ├── ChatPage.tsx # Main chat page
│ └── LandingPage.tsx # Landing page
├── App.tsx # Root component
└── main.tsx # Application entry point
- Node.js 18+
- npm
-
Clone the repository
git clone <repository-url> cd simple-ai-chat-interface-job
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:5173(or the port shown in terminal)
npm run build
npm run preview- Type a message in the textarea
- Press Enter to send (Shift+Enter for newline)
- Wait for Vision Chat AI response with typing indicator
- Continue the conversation
- Click the pink "+" button
- Select "Add photos & files" from dropdown
- Select up to 5 files (max 10MB each)
- Files appear as chips below the input
- AI responses will reference attached files
- Remove files by clicking the X on chips
- Click the purple "Options" button to open panel
- Adjust settings:
- Response Length: Short/Medium/Long
- Response Style: Bullets/Steps/Paragraph/Definition/Q&A/Quip
- Response Tone: Casual/Formal/Friendly
- Options affect AI response style immediately
- Click the pink "+" button
- Select from quick actions:
- Add photos & files: Upload files
- Create image: Insert image creation prompt
- Thinking: Insert thinking mode prompt
- Deep research: Insert research prompt
- Study and learn: Insert learning prompt
- Click the microphone button
- Allow microphone permissions
- Speak your message
- Click stop when finished
- Message will be transcribed automatically
-
Share entire conversation:
- Click the three dots menu (⋯) next to any conversation in the sidebar
- Select "Share" to copy a link to the entire conversation
- The link opens the conversation when clicked
-
Share individual messages:
- Click the copy icon (📋) below any AI response
- Click the share icon (🔗) below any AI response
- This copies a direct link to that specific message
- When opened, the link scrolls to and highlights the specific message
-
Shareable links:
- Links are formatted as:
yoursite.com/chat?conversation=ID&message=ID - Work across devices and browsers
- Preserve conversation context and message history
- Links are formatted as:
- Real-time chat interface with user and AI message bubbles
- Markdown rendering with syntax highlighting for code blocks
- Collapsible content for long messages and code
- File attachments with image previews and validation
- Voice input with speech recognition
- Mobile responsive design with drawer navigation
- Conversation persistence with local storage
- Share functionality with copyable conversation links
- Code detection and automatic code example generation
- 6 response styles (bullets, steps, paragraph, definition, Q&A, quip)
- 3 response tones (casual, formal, friendly)
- 3 response lengths (short, medium, long)
- Quick action dropdown with preset prompts
- Options panel with real-time response customization
- Typing indicators with animated dots
- Auto-scroll to latest messages