feat(app): glassmorphism chat UI with widget embed system
- Glassmorphism chat window matching Proux design rules (glass layers, gradient backgrounds, glow effects, blur intensities, inner glows) - Conversation ID displayed in header, side-switching (left/right layout) - Chat store with Pinia: conversations, messages, streaming state - OpenRouter AI integration with SSE streaming (Llama 4 Maverick free model) - Chat components: ChatWindow, ChatHeader, ChatInput, ChatMessage, StreamingDots (typing indicator) - Embeddable widget system: floating action button (FAB) + modal popup with scale-in animation, side-aware positioning - Widget demo page (/widget-demo) showing AIUI embedded in a mock "Acme App" with documentation of 4 integration methods: script tag, web component, npm package, and iframe - Theme composable with dark/light mode, system preference detection - Custom CSS: glass variants (subtle/medium/strong/light/dark), glow effects, gradient text, animation keyframes, thin scrollbar - Responsive: mobile-first, 44px touch targets, dvh viewport Made-with: Cursor
This commit is contained in:
@@ -12,6 +12,11 @@ const router = createRouter({
|
||||
name: 'chat',
|
||||
component: () => import('./pages/ChatPage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/widget-demo',
|
||||
name: 'widget-demo',
|
||||
component: () => import('./pages/WidgetDemoPage.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user