feat(#42): Implement persistent Jarvis chat overlay
Add a persistent chat overlay accessible from any authenticated view. The overlay wraps the existing Chat component and adds state management, keyboard shortcuts, and responsive design. Features: - Three states: Closed (floating button), Open (full panel), Minimized (header) - Keyboard shortcuts: - Cmd/Ctrl + K: Open chat (when closed) - Escape: Minimize chat (when open) - Cmd/Ctrl + Shift + J: Toggle chat panel - State persistence via localStorage - Responsive design (full-width mobile, sidebar desktop) - PDA-friendly design with calm colors - 32 comprehensive tests (14 hook tests + 18 component tests) Files added: - apps/web/src/hooks/useChatOverlay.ts - apps/web/src/hooks/useChatOverlay.test.ts - apps/web/src/components/chat/ChatOverlay.tsx - apps/web/src/components/chat/ChatOverlay.test.tsx Files modified: - apps/web/src/components/chat/index.ts (added export) - apps/web/src/app/(authenticated)/layout.tsx (integrated overlay) All tests passing (490 tests, 50 test files) All lint checks passing Build succeeds Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
214
apps/web/src/components/chat/ChatOverlay.tsx
Normal file
214
apps/web/src/components/chat/ChatOverlay.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
/**
|
||||
* @file ChatOverlay.tsx
|
||||
* @description Persistent chat overlay component that is accessible from any view
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useChatOverlay } from "@/hooks/useChatOverlay";
|
||||
import { Chat } from "./Chat";
|
||||
import type { ChatRef } from "./Chat";
|
||||
|
||||
export function ChatOverlay(): React.JSX.Element {
|
||||
const { isOpen, isMinimized, open, close, minimize, expand, toggle } = useChatOverlay();
|
||||
|
||||
const chatRef = useRef<ChatRef>(null);
|
||||
|
||||
// Global keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent): void => {
|
||||
// Cmd/Ctrl + Shift + J: Toggle chat panel
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === "j" || e.key === "J")) {
|
||||
e.preventDefault();
|
||||
toggle();
|
||||
return;
|
||||
}
|
||||
|
||||
// Cmd/Ctrl + K: Open chat and focus input
|
||||
if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K")) {
|
||||
e.preventDefault();
|
||||
if (!isOpen) {
|
||||
open();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Escape: Minimize chat (if open and not minimized)
|
||||
if (e.key === "Escape" && isOpen && !isMinimized) {
|
||||
e.preventDefault();
|
||||
minimize();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return (): void => {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [isOpen, isMinimized, open, minimize, toggle]);
|
||||
|
||||
// Render floating button when closed
|
||||
if (!isOpen) {
|
||||
return (
|
||||
<button
|
||||
onClick={open}
|
||||
className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 lg:bottom-8 lg:right-8"
|
||||
style={{
|
||||
backgroundColor: "rgb(var(--accent-primary))",
|
||||
color: "rgb(var(--text-on-accent))",
|
||||
}}
|
||||
aria-label="Open chat"
|
||||
title="Open Jarvis chat (Cmd+Shift+J)"
|
||||
>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Render minimized header when minimized
|
||||
if (isMinimized) {
|
||||
return (
|
||||
<div
|
||||
className="fixed bottom-0 right-0 z-40 w-full sm:w-96"
|
||||
style={{
|
||||
backgroundColor: "rgb(var(--surface-0))",
|
||||
borderColor: "rgb(var(--border-default))",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={expand}
|
||||
className="flex w-full items-center justify-between border-t px-4 py-3 text-left transition-colors hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-inset"
|
||||
style={{
|
||||
borderColor: "rgb(var(--border-default))",
|
||||
backgroundColor: "rgb(var(--surface-0))",
|
||||
}}
|
||||
aria-label="Expand chat"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
style={{ color: "rgb(var(--accent-primary))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium" style={{ color: "rgb(var(--text-primary))" }}>
|
||||
Jarvis
|
||||
</span>
|
||||
</div>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
style={{ color: "rgb(var(--text-secondary))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render full chat overlay when open and expanded
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop for mobile */}
|
||||
<div
|
||||
className="fixed inset-0 z-30 bg-black/50 lg:hidden"
|
||||
onClick={close}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Chat Panel */}
|
||||
<div
|
||||
className="fixed inset-y-0 right-0 z-40 flex w-full flex-col border-l sm:w-96 lg:inset-y-16"
|
||||
style={{
|
||||
backgroundColor: "rgb(var(--surface-0))",
|
||||
borderColor: "rgb(var(--border-default))",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="flex items-center justify-between border-b px-4 py-3"
|
||||
style={{ borderColor: "rgb(var(--border-default))" }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
style={{ color: "rgb(var(--accent-primary))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
<h2 className="text-base font-semibold" style={{ color: "rgb(var(--text-primary))" }}>
|
||||
Jarvis
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Header Controls */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Minimize Button */}
|
||||
<button
|
||||
onClick={minimize}
|
||||
className="rounded p-1.5 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2"
|
||||
aria-label="Minimize chat"
|
||||
title="Minimize (Esc)"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
style={{ color: "rgb(var(--text-secondary))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={close}
|
||||
className="rounded p-1.5 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2"
|
||||
aria-label="Close chat"
|
||||
title="Close (Cmd+Shift+J)"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
style={{ color: "rgb(var(--text-secondary))" }}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat Content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Chat ref={chatRef} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user