Open History to see the last commit
1import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
2
3import { Button } from "../ui/button";
4
5export function WorkspaceFileDropOverlay() {
6 return (
7 <div
8 className="pointer-events-none absolute inset-2 z-40 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/60 bg-primary/[0.035]"
9 data-chat-workspace-drop-overlay="true"
10 >
11 <div
12 role="status"
13 className="flex items-center gap-2 rounded-full border border-primary/25 bg-background/95 px-4 py-2.5 text-sm font-medium text-foreground shadow-lg"
14 >
15 <PaperclipIcon className="size-4 text-primary" aria-hidden="true" />
16 Drop files to attach
17 </div>
18 </div>
19 );
20}
21
22/**
23 * Sits `bottom` pixels up, clear of the composer and its attached banners. The summary names
24 * what waits at the end of the timeline, which is out of view while it shows.
25 */
26export function ScrollToEndButton(props: {
27 readonly bottom: number;
28 readonly summary: string | null;
29 readonly onScrollToEnd: () => void;
30}) {
31 return (
32 <div
33 className="chat-scroll-to-bottom pointer-events-none absolute z-30 flex justify-center py-1.5"
34 style={{ bottom: props.bottom }}
35 >
36 <Button
37 data-scroll-to-end="true"
38 onPointerDown={(event) => event.preventDefault()}
39 onClick={props.onScrollToEnd}
40 className="pointer-events-auto"
41 size="xs"
42 variant="glass"
43 >
44 <ChevronDownIcon className="size-3.5" />
45 Scroll to end
46 {props.summary === null ? null : (
47 <span className="text-muted-foreground">
48 <span aria-hidden>· </span>
49 {props.summary}
50 </span>
51 )}
52 </Button>
53 </div>
54 );
55}