You are v0, the AI code generator that just scaffolded DataAsk v0 with Phase 1 features. Now your mission is to refine and elevate that codebase into a polished v1 Chat-First DMS experience. Follow these precise instructions:---## 1. Chat-First UX & Conversational Onboarding- Fullscreen Chat on Launch • On app start, render only the chat interface. • If no data sources connected, show a dismissible banner inside the chat: “👋 Welcome to DataAsk! To get started, connect your Postgres database or upload a PDF.” Include two inline buttons: [Connect Database] and [Upload PDF].- Conversational Onboarding Flow • When the user clicks “Connect Database”, open a modal form (host, port, database, user, password) built with shadcn/ui. • Upon successful connect, send a bot message: “Great, your database is connected. Ready to ask your first question?” • Next prompt for PDF upload likewise in-chat: “Now, would you like to upload a PDF report?” • Only after at least one source is connected should free-form questions be accepted.- Quick-Ask Suggestions • Below the ChatInput, render up to 5 context-aware suggestion chips, e.g.: – “Show last month’s sales by region” – “Summarize Q2_report.pdf” – “Compare PDF targets to DB numbers” • Clicking a chip sends that text into the chat input.---## 2. Contextual DMS Integration- Collapsible Schema Sidebar • Add a right-side panel (collapsed by default) toggled via a lucide-react “database” icon in the header. • Show the Postgres schema tree: tables → columns. • Sidebar styling: black background (#000), white text (#fff), thin white borders, p-4 spacing.- Inline Previews in Chat Bubbles • When a chat message references a table, append a link “[View sample rows]”. – On click, expand a <DataTable> preview below the message showing first 5 rows. • When referencing a PDF snippet, append “[View snippet]”. – On click, open a small overlay showing that page excerpt (use a <Modal> with a PDF viewer).- Source-Aware Autocomplete • In the ChatInput, implement typeahead: – Suggest SQL keywords (SELECT, FROM, etc.) and connector names. – After typing FROM , suggest table names from the schema. – Typing # or the start of a PDF filename suggests PDF titles to reference.- “Ask About This” Actions • In the schema sidebar next to each table and column, render a lucide-react chat icon. – On click, auto-send a question like “Show me the top 5 values of table.column.” • Provide hover tooltips explaining “Ask DataAsk about this field.”---## 3. Proactive Guided Intelligence- Dynamic Insight Buttons • Under every chart or table message, show action buttons: – [Analyze by region], [Drill into anomalies], [Trend forecast]. • These buttons send follow-up prompts to the chat.- Auto-Summary (TL;DR) • After any answer longer than 3 sentences or containing a table >3 rows, append a bullet-list summary of key points: – Use the LLM to generate 3 short bullets. – Render the summary in a white box with subtle drop shadow on black.- Error-Recovery Prompts • If SQL execution fails, the bot should catch the error and automatically offer: “I ran into an error: ‘…’. Would you like to browse available columns?” Render a button [Browse Columns] that opens the schema sidebar. • If PDF search returns no snippets, bot says: “I didn’t find anything in filename.pdf about that. Try another term?” And show suggested alternate keywords.- Magic Mode Toggle • In the header, add a switch labeled “Guide Me” / “Expert”. • Guide Me: – Show every generated SQL before running (in a preview bubble). – Offer inline suggestions and confirmations. • Expert: – Run queries immediately with no confirmation. – Hide suggestion chips unless hovered.---## 4. Technical & UI Requirements- Stack & Styling • Next.js (App Router), Tailwind CSS v4 (no custom config), shadcn/ui, lucide-react, lucidechart. • Color Palette: – Page bg: #000 – UI panels/cells: #111 or #000 – Text: #fff – Borders/shadows: subtle white (opacity 10–20%). • Typography & Spacing: – Headings: text-xl to text-2xl, subhead text-base, body text-sm. – Padding/Margins: consistent p-4/m-4, rounded-2xl.- Components to Update/Add • app/layout.tsx → auto-launch ChatPage, include header with toggles/icons. • app/page.tsx → deprecated; onboarding moved to chat. • app/chat/page.tsx → incorporate conversational onboarding, suggestion chips. • components/SchemaSidebar.tsx → collapsible schema viewer. • components/ChatOnboarding.tsx → handles initial source-connect prompts. • components/QuickPrompts.tsx → renders suggestion chips. • components/DataTablePreview.tsx → inline table. • components/PDFSnippetModal.tsx → inline snippet viewer. • components/AutocompleteInput.tsx → enhanced ChatInput with typeahead. • components/InsightActions.tsx → dynamic buttons below charts. • components/TldrSummary.tsx → bullet summary. • components/MagicToggle.tsx → guide/expert mode. • Update lib/chat.ts (client) to include mode and context for dynamic prompts.- Behavior & Integration • Maintain conversation state in React Context: chat history, mode, connected sources, schema. • Ensure each chat request to /api/chat includes: – Last 4 turns, selected mode, source flags, and any dynamic suggestions. • Enhance /api/chat handler to support: – Returning generated SQL for preview, snippet metadata, TL;DR bullets, and insight actions. – Error payloads for SQL/document failures.- Documentation • Update README.md with: – New chat-first flow instructions. – Explanation of “Guide Me” vs “Expert”. – How to use schema sidebar, inline previews, and quick prompts. – How to extend via Connector scaffold.---Deliverable: Update the existing v0 codebase to implement all of the above refinements. The result should feel like a polished v1: fully chat-centric, deeply integrated with the DMS, and empowered by proactive, guided intelligence—while adhering strictly to the black-and-white, minimalist aesthetic. ```