feat(webui): implement AI Copilot sidebar and resolve CORS blockers#1318
feat(webui): implement AI Copilot sidebar and resolve CORS blockers#1318Makeepan-dev wants to merge 1 commit intocybertec-postgresql:masterfrom
Conversation
|
I have completed the initial UI foundation for the AI Copilot feature. My goal with this PR was to establish a clean entry point and a "premium" feel for the assistant without disrupting the existing pgwatch3 dashboard flow. What I’ve delivered in this PR: Trigger UI: Added a dedicated IconButton in the AppBar using the AutoAwesome icon. State Logic: Implemented React "State Lifting" in App.tsx to toggle the sidebar. CopilotDrawer Component: A new, responsive MUI Drawer with a custom gradient header and a scrollable chat area. Dev Blocker Fix: Updated internal/webserver/webserver.go to handle CORS issues, which was preventing the React frontend from talking to the Go backend on different local ports. |
|
webui is admin. copilot must be TUI. |
|
Understood, Pavlo. Thank you for the clarification! I see that you want to keep the WebUI for admin tasks and move the Copilot to a TUI. I will pivot my GSoC proposal to focus on building a Go-based Terminal User Interface for the Copilot. I'll look into using libraries like Bubble Tea to keep it modern and interactive. |
Description
I have implemented the initial frontend infrastructure and UI components for the AI Copilot feature. This PR establishes the bridge between the global navigation and the new AI-driven sidebar, while also resolving local development blockers.
#Key Changes:
AppBar Integration: Added an IconButton with the AutoAwesome icon to serve as the entry point for the AI suite.
State Management: Implemented "State Lifting" in App.tsx to synchronize the AppBar toggle with the CopilotDrawer visibility.
CopilotDrawer (New): Created a premium-styled, responsive sidebar using MUI Drawer, featuring a gradient header and a scrollable message area.
CORS Middleware Update: Modified internal/webserver/webserver.go to allow cross-origin requests, enabling the React frontend (Vite/RSPack) to communicate with the Go backend during local development.
Motivation:
To provide a seamless, modern user interface for database insights as outlined in my GSoC 2026 proposal.
AI & Automation Policy
AI/automation tools used (leave blank if none):
Drafted architectural logic and UI component structure with the assistance of Gemini.
Used AI to refine the Material UI (MUI) styling and TypeScript definitions for better type safety.
Checklist