Spaces:
Runtime error
Runtime error
File size: 3,856 Bytes
cd6f98e | 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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | import { useSession } from "next-auth/react";
import React from "react";
import { useSID } from "../../hooks/useSID";
import type { ActiveTool } from "../../hooks/useTools";
import { useTools } from "../../hooks/useTools";
import Dialog from "../../ui/dialog";
import Button from "../Button";
import { Switch } from "../Switch";
export const ToolsDialog: React.FC<{
show: boolean;
setOpen: (boolean) => void;
}> = ({ show, setOpen }) => {
const { activeTools, setToolActive, isSuccess } = useTools();
return (
<Dialog
inline
open={show}
setOpen={setOpen}
title="Tools"
actions={
<>
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-sky-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400"
onClick={() => {
setOpen(false);
}}
>
Close
</button>
</>
}
>
<p>Select what external tools your agents have access to.</p>
<div className="mt-5 flex flex-col gap-3 ">
{activeTools.map((tool, i) => {
if (tool.name === "sid") {
return <SidTool key={i} tool={tool} onChange={setToolActive} />;
}
return <GenericTool key={i} tool={tool} onChange={setToolActive} />;
})}
{!isSuccess && <p className="text-center text-red-300">Error loading tools.</p>}
</div>
</Dialog>
);
};
interface ToolProps {
tool: ActiveTool;
onChange: (name: string, active: boolean) => void;
}
const GenericTool = ({ tool, onChange }: ToolProps) => {
return (
<div className="flex items-center gap-3 rounded-md border border-white/30 bg-zinc-800 p-2 px-4 text-white">
<ToolAvatar tool={tool} />
<div className="flex flex-grow flex-col gap-1">
<p className="font-bold capitalize">{tool.name}</p>
<p className="text-xs sm:text-sm">{tool.description}</p>
</div>
<Switch value={tool.active} onChange={() => onChange(tool.name, !tool.active)} />
</div>
);
};
const SidTool = ({ tool, onChange }: ToolProps) => {
const { data: session } = useSession();
const sid = useSID(session);
return (
<div className="relative flex items-center gap-3 overflow-hidden rounded-md border border-white/30 bg-zinc-800 p-2 px-4 text-white">
{!sid.connected && (
<div className="absolute inset-0 z-10 flex items-center justify-center">
<div className="absolute inset-0 backdrop-blur-sm" />
<Button
className="border-white/20 bg-gradient-to-t from-sky-500 to-sky-600 transition-all hover:bg-gradient-to-t hover:from-sky-400 hover:to-sky-600"
onClick={sid.install}
>
Connect your Data
</Button>
</div>
)}
<ToolAvatar tool={tool} />
<div className="flex flex-grow flex-col gap-1">
<p className="font-bold capitalize">{tool.name}</p>
<p className="text-xs sm:text-sm">{tool.description}</p>
{sid.connected && (
<>
<Button onClick={sid.manage}>Manage</Button>
<Button
className="rounded-full bg-gray-700 font-semibold text-white hover:bg-gray-600"
onClick={sid.uninstall}
>
Disconnect
</Button>
</>
)}
</div>
<Switch
value={!sid?.connected ?? false ? false : tool.active}
onChange={() => onChange(tool.name, !tool.active)}
/>
</div>
);
};
const ToolAvatar = ({ tool }: { tool: ActiveTool }) => {
if (tool.image_url) {
// eslint-disable-next-line @next/next/no-img-element
return <img alt={tool.name} width="40px" height="40px" src={tool.image_url} />;
}
return <div className="h-10 w-10 rounded-full border border-white/30 bg-amber-600" />;
};
|