diff --git a/Ralph/prd.json b/Ralph/prd.json index 57a4cbd..3befe83 100644 --- a/Ralph/prd.json +++ b/Ralph/prd.json @@ -128,7 +128,7 @@ "Verify in browser using dev-browser skill" ], "priority": 7, - "passes": false, + "passes": true, "notes": "Use framer-motion for the entrance animation to match the rest of the app's motion patterns. The button should use font-ui for any text. On mobile (<640px), button is 40px and positioned bottom: 16px, right: 16px. The VITE_GEMINI_API_KEY env var check can wait until the Gemini integration story — for now just render the button unconditionally." }, { diff --git a/Ralph/progress.txt b/Ralph/progress.txt index fc4b2b0..01a5cc6 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -15,6 +15,8 @@ - `src/lib/semantic-search.ts` exports `semanticSearch(queryEmbedding, embeddings, threshold?)` and `loadEmbeddings()` — embeddings are normalized so cosine similarity is dot(a,b)/(mag(a)*mag(b)) - CommandPalette uses `semanticResults` state + debounced `useEffect` for async semantic search, falling back to Fuse.js when `isModelReady()` returns false or on any error - `loadEmbeddings()` and `paletteMap` (Map) are precomputed via `useMemo` — no re-computation on each search +- ChatWidget is mounted in DashboardLayout alongside CommandPalette and DetailPanel — z-index 90 (below command palette z-1000) +- `prefersReducedMotion` pattern: read `window.matchMedia` at module level, use in framer-motion variants to skip animation --- @@ -114,3 +116,22 @@ - The ONNX model takes several seconds to load in the browser (downloads ~23MB first time, then cached in IndexedDB), so initial searches will always use Fuse.js fallback - `loadEmbeddings()` is cheap (just returns the already-imported JSON) — safe to call in `useMemo` without performance concern --- + +## 2026-02-15 - US-007 +- Created `src/components/ChatWidget.tsx` — floating chat button with toggle state +- 48px circular button (40px on mobile <640px), fixed bottom-right, teal accent background, white MessageCircle icon +- Entrance animation: fade + translateY(8px→0), 1s delay after mount, via framer-motion variants +- Respects `prefers-reduced-motion` — skips animation, shows immediately +- Hover: shadow-md → shadow-lg + scale(1.05), 150ms transition +- z-index 90 (below command palette z-1000) +- onClick toggles `isOpen` state, swaps icon between MessageCircle and X +- Mounted in `DashboardLayout.tsx` alongside CommandPalette and DetailPanel +- Typecheck, lint (0 errors), and build all pass +- Browser verified: button visible at bottom-right, toggle works (Open chat ↔ Close chat) +- Files changed: `src/components/ChatWidget.tsx` (new), `src/components/DashboardLayout.tsx` +- **Learnings for future iterations:** + - Responsive sizing via Tailwind classes (`h-10 w-10 sm:h-12 sm:w-12`) works well with inline style for non-Tailwind properties (boxShadow, border-radius) + - `AnimatePresence` is already imported and ready for the panel animation in US-008 + - The `isOpen` state lives in ChatWidget — US-008 will add the panel UI inside the same component + - Hover effects use `onMouseEnter/Leave` with direct style mutation (same pattern as other dashboard components) +--- diff --git a/src/components/ChatWidget.tsx b/src/components/ChatWidget.tsx new file mode 100644 index 0000000..2742cf3 --- /dev/null +++ b/src/components/ChatWidget.tsx @@ -0,0 +1,62 @@ +import { useState } from 'react' +import { motion, AnimatePresence } from 'framer-motion' +import { MessageCircle, X } from 'lucide-react' + +const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches + +const buttonVariants = { + hidden: prefersReducedMotion + ? { opacity: 1, y: 0 } + : { opacity: 0, y: 8 }, + visible: { + opacity: 1, + y: 0, + transition: prefersReducedMotion + ? { duration: 0 } + : { duration: 0.3, ease: 'easeOut', delay: 1 }, + }, +} + +export function ChatWidget() { + const [isOpen, setIsOpen] = useState(false) + + return ( + <> + {/* Chat panel placeholder — wired in US-008 */} + + {isOpen && null} + + + {/* Floating chat button */} + setIsOpen((prev) => !prev)} + aria-label={isOpen ? 'Close chat' : 'Open chat'} + className="fixed z-[90] cursor-pointer bottom-4 right-4 h-10 w-10 sm:bottom-6 sm:right-6 sm:h-12 sm:w-12" + style={{ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '50%', + border: 'none', + background: 'var(--accent)', + color: '#FFFFFF', + boxShadow: 'var(--shadow-md)', + transition: 'box-shadow 150ms ease-out, transform 150ms ease-out', + }} + onMouseEnter={(e) => { + e.currentTarget.style.boxShadow = 'var(--shadow-lg)' + e.currentTarget.style.transform = 'scale(1.05)' + }} + onMouseLeave={(e) => { + e.currentTarget.style.boxShadow = 'var(--shadow-md)' + e.currentTarget.style.transform = 'scale(1)' + }} + > + {isOpen ? : } + + + ) +} diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx index 4c884df..d705ab8 100644 --- a/src/components/DashboardLayout.tsx +++ b/src/components/DashboardLayout.tsx @@ -14,6 +14,7 @@ import { ParentSection } from './ParentSection' import CareerConstellation from './CareerConstellation' import { WorkExperienceSubsection } from './WorkExperienceSubsection' import { RepeatMedicationsSubsection } from './RepeatMedicationsSubsection' +import { ChatWidget } from './ChatWidget' import { useActiveSection } from '@/hooks/useActiveSection' import { useDetailPanel } from '@/contexts/DetailPanelContext' import { consultations } from '@/data/consultations' @@ -418,6 +419,9 @@ export function DashboardLayout() { {/* Detail panel */} + + {/* Floating chat widget */} + ) }