159 lines
3.6 KiB
TypeScript
159 lines
3.6 KiB
TypeScript
import * as React from "react";
|
|
|
|
const { useEffect, useRef } = React;
|
|
|
|
interface SlashCommand {
|
|
name: string;
|
|
description: string;
|
|
}
|
|
|
|
const SLASH_COMMANDS: SlashCommand[] = [
|
|
{
|
|
name: "/help",
|
|
description: "Show this list of available slash commands.",
|
|
},
|
|
{
|
|
name: "/btw <question>",
|
|
description:
|
|
"Ask a side question using the current conversation as context. The question and answer are not added to the conversation history.",
|
|
},
|
|
];
|
|
|
|
interface HelpOverlayProps {
|
|
onDismiss: () => void;
|
|
}
|
|
|
|
/**
|
|
* Dismissible overlay that lists all available slash commands.
|
|
* Dismiss with Escape, Enter, or Space.
|
|
*/
|
|
export function HelpOverlay({ onDismiss }: HelpOverlayProps) {
|
|
const dismissRef = useRef(onDismiss);
|
|
dismissRef.current = onDismiss;
|
|
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
dismissRef.current();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handler);
|
|
return () => window.removeEventListener("keydown", handler);
|
|
}, []);
|
|
|
|
return (
|
|
// biome-ignore lint/a11y/noStaticElementInteractions: backdrop dismiss is supplementary; keyboard handled via window keydown
|
|
// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard dismiss handled via window keydown listener
|
|
<div
|
|
data-testid="help-overlay"
|
|
onClick={onDismiss}
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
background: "rgba(0,0,0,0.55)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
zIndex: 1000,
|
|
}}
|
|
>
|
|
{/* biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only; no real interaction */}
|
|
{/* biome-ignore lint/a11y/noStaticElementInteractions: stop-propagation only; no real interaction */}
|
|
<div
|
|
data-testid="help-panel"
|
|
onClick={(e) => e.stopPropagation()}
|
|
style={{
|
|
background: "#2f2f2f",
|
|
border: "1px solid #444",
|
|
borderRadius: "12px",
|
|
padding: "24px",
|
|
maxWidth: "560px",
|
|
width: "90vw",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "16px",
|
|
boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "0.7rem",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.08em",
|
|
textTransform: "uppercase",
|
|
color: "#a0d4a0",
|
|
}}
|
|
>
|
|
Slash Commands
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
title="Dismiss (Escape, Enter, or Space)"
|
|
style={{
|
|
background: "none",
|
|
border: "none",
|
|
color: "#666",
|
|
cursor: "pointer",
|
|
fontSize: "1.1rem",
|
|
padding: "2px 6px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{/* Command list */}
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
|
|
{SLASH_COMMANDS.map((cmd) => (
|
|
<div
|
|
key={cmd.name}
|
|
style={{ display: "flex", flexDirection: "column", gap: "2px" }}
|
|
>
|
|
<code
|
|
style={{
|
|
fontSize: "0.88rem",
|
|
color: "#e0e0e0",
|
|
fontFamily: "monospace",
|
|
}}
|
|
>
|
|
{cmd.name}
|
|
</code>
|
|
<span
|
|
style={{
|
|
fontSize: "0.85rem",
|
|
color: "#999",
|
|
lineHeight: "1.5",
|
|
}}
|
|
>
|
|
{cmd.description}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer hint */}
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#555",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
Press Escape, Enter, or Space to dismiss
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|