Spaces:
Running
Running
File size: 2,893 Bytes
c2ea5ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import React, { useState, useEffect } from "react";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import { Upload, FileText, Settings, HelpCircle, Link } from "lucide-react";
import { useModal } from "@/context/ModalContext";
import { useAgentGraph } from "@/context/AgentGraphContext";
export function CommandPalette() {
const [open, setOpen] = useState(false);
const { openModal } = useModal();
const { actions } = useAgentGraph();
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
const handleConnectObservability = () => {
setOpen(false);
openModal("observability-connection", "Connect to AI Observability");
};
const handleUploadTrace = () => {
setOpen(false);
actions.setActiveView("upload");
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem onSelect={handleUploadTrace}>
<Upload className="mr-2 h-4 w-4" />
<span>Upload Trace</span>
</CommandItem>
<CommandItem onSelect={handleConnectObservability}>
<Link className="mr-2 h-4 w-4" />
<span>Connect to AI Observability</span>
</CommandItem>
<CommandItem>
<FileText className="mr-2 h-4 w-4" />
<span>View Traces</span>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Settings">
<CommandItem>
<Settings className="mr-2 h-4 w-4" />
<span>Preferences</span>
</CommandItem>
<CommandItem>
<HelpCircle className="mr-2 h-4 w-4" />
<span>Help</span>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</DialogContent>
</Dialog>
);
}
|