Implementation:Ucbepic Docetl SpotlightOverlay

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the spotlight overlay component with a floating toolbar and draggable chat window.

Description

The SpotlightOverlay wraps child content with an overlay layer that provides a floating toolbar (cursor and chat tool selection) and a resizable, draggable chat window powered by react-rnd. The cursor tool passes events through to the underlying content, while the chat tool opens a floating chat interface where users can type messages and receive simulated AI responses. The toolbar is centered at the top of the viewport with a gradient border styling. The chat panel includes history management and a clear function.

Usage

Wraps content that needs AI annotation capabilities. Provides a floating toolbar for switching between cursor interaction and chat modes.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/SpotlightOverlay.tsx
• Lines: 1-216

Signature

interface SpotlightOverlayProps {
  children: ReactNode;
}

const SpotlightOverlay: React.FC<SpotlightOverlayProps>

Import

import SpotlightOverlay from "@/components/SpotlightOverlay";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
children	ReactNode	Yes	Content to wrap with the spotlight overlay

Outputs

Name	Type	Description
rendered	JSX.Element	Overlay with floating toolbar and draggable chat

Usage Examples

<SpotlightOverlay>
  <div>Your content here</div>
</SpotlightOverlay>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment