feat(floating-ai): step 4 — build FloatingChat component

Create the floating AI chat popup rendered via portal to document.body.
Uses useAIChat for chat logic, useFloatingChat for position/state,
Framer Motion for enter/exit animations, and pointer-event dragging.

Includes: close on Escape, close on route change, auto-scroll,
auto-focus, window resize clamping, and compact message rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Roberto Musso
2026-02-27 23:05:25 +01:00
parent 28a5d65f1a
commit 6cd121fa80
5 changed files with 350 additions and 7 deletions

View File

@@ -33,8 +33,8 @@ Steps MUST be implemented in order. Each step lists its prerequisites.
|------|-------|--------|
| 1 | Extract shared `useAIChat` hook | [x] 2026-02-27 |
| 2 | Create section registry + `FloatingChatContext` | [x] 2026-02-27 |
| 3 | Create double-click hook | [ ] |
| 4 | Build `FloatingChat` component | [ ] |
| 3 | Create double-click hook | [x] 2026-02-27 |
| 4 | Build `FloatingChat` component | [x] 2026-02-27 |
| 5 | Add `ai:action` IPC side-channel | [ ] |
| 6 | Pass `uiContext` through to the AI | [ ] |
| 7 | Implement morph animation (FLIP) | [ ] |
@@ -452,7 +452,7 @@ function AppShellInner({ children }: AppShellProps) {
## Step 4: Build `FloatingChat` Component
**Status**: [ ]
**Status**: [x] 2026-02-27
**Prerequisites**: Steps 1-3 completed
**Creates**: `src/renderer/components/ai/FloatingChat.tsx`
**Modifies**: `src/renderer/components/layout/AppShell.tsx` (render the portal)