Add bots files handling logic
This commit is contained in:
@@ -0,0 +1,173 @@
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import Modal from "@moduletrace/twui/elements/Modal";
|
||||
import H2 from "@moduletrace/twui/layout/H2";
|
||||
import Span from "@moduletrace/twui/layout/Span";
|
||||
import Stack from "@moduletrace/twui/layout/Stack";
|
||||
import Input from "@moduletrace/twui/form/Input";
|
||||
import { FolderOpen } from "lucide-react";
|
||||
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
|
||||
import type { APIResponseObject } from "@moduletrace/bunext/types";
|
||||
import type { BUN_SQLITE_COBBLE_WORKSPACES } from "@/db/types/db";
|
||||
import type { BotWithLastMessage } from "@/src/types";
|
||||
import HeaderIconButton from "@/src/components/general/header-icon-button";
|
||||
import { AppContext } from "@/src/pages/__root";
|
||||
import canManageCrew from "@/src/utils/rbac/can-manage-crew";
|
||||
import useBotFiles from "../(hooks)/use-bot-files";
|
||||
import FileRow from "./file-row";
|
||||
import HeaderMenuItem from "./header-menu-item";
|
||||
|
||||
type Props = {
|
||||
bot: BotWithLastMessage;
|
||||
workspace?: BUN_SQLITE_COBBLE_WORKSPACES | null;
|
||||
/**
|
||||
* A row in the conversation header's menu instead of an icon beside it.
|
||||
*/
|
||||
menu?: boolean;
|
||||
on_open?: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* The files a conversation works with: a bot's own folder, or the
|
||||
* workspace's shared one. Each can be opened, read again so it can be
|
||||
* searched, or deleted (a crew manager only). The list loads when the
|
||||
* modal opens, and search goes through the same endpoint, so the page
|
||||
* props stay small.
|
||||
*/
|
||||
export default function BotFilesModal({ bot, workspace, menu, on_open }: Props) {
|
||||
const { pageProps } = useContext(AppContext);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [busy_id, setBusyId] = useState<number>();
|
||||
const [status, setStatus] = useState<string>();
|
||||
const { data, loading, error, reload } = useBotFiles({
|
||||
bot_id: Number(bot.id),
|
||||
workspace_id: workspace?.id ? Number(workspace.id) : null,
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const can_manage = canManageCrew({ user_types: pageProps?.user_types });
|
||||
const name = bot.name || "This bot";
|
||||
const title = workspace?.id ? `${workspace.name || "Workspace"} files` : `${name}'s files`;
|
||||
|
||||
useEffect(() => {
|
||||
if (open) on_open?.();
|
||||
}, [open]);
|
||||
|
||||
const run = async ({
|
||||
url,
|
||||
payload,
|
||||
file_id,
|
||||
done,
|
||||
}: {
|
||||
url: string;
|
||||
payload: Record<string, unknown>;
|
||||
file_id: number;
|
||||
done: string;
|
||||
}) => {
|
||||
setBusyId(file_id);
|
||||
setStatus(undefined);
|
||||
|
||||
const res = await fetchApi<{}, APIResponseObject>(url, {
|
||||
method: "POST",
|
||||
body: payload,
|
||||
}).catch(() => null);
|
||||
|
||||
setBusyId(undefined);
|
||||
setStatus(res?.success ? done : res?.msg || `That didn't work.`);
|
||||
|
||||
if (res?.success) await reload({ search });
|
||||
};
|
||||
|
||||
const files = data?.files || [];
|
||||
const usage = data?.usage;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
target={
|
||||
menu ? (
|
||||
<HeaderMenuItem
|
||||
icon={FolderOpen}
|
||||
title="Files"
|
||||
description={title}
|
||||
loading={loading}
|
||||
/>
|
||||
) : (
|
||||
<HeaderIconButton icon={FolderOpen} title={title} loading={loading} />
|
||||
)
|
||||
}
|
||||
targetWrapperProps={{ className: menu ? "w-full" : "shrink-0" }}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
className="max-w-xl bg-paper p-6"
|
||||
>
|
||||
<Stack className="w-full gap-1! items-stretch">
|
||||
<H2 className="text-lg! leading-6! tracking-normal! font-bold text-ink">{title}</H2>
|
||||
<Span className="text-[13px] leading-[18px] text-ink-secondary">
|
||||
{workspace?.id
|
||||
? `Files every bot here can read and search. They're kept with the app, not on a computer.`
|
||||
: `What ${name} has saved: documents you sent, files it wrote and images it made. They're kept with the app, not on a computer.${can_manage ? " Deleting one removes it for good." : ""}`}
|
||||
</Span>
|
||||
{usage ? (
|
||||
<Span className="text-[12px] leading-4 text-ink-secondary">
|
||||
{`${usage.files} file(s), ${(usage.bytes / (1024 * 1024)).toFixed(1)} MB of ${
|
||||
data?.quota_mb || 0
|
||||
} MB used in this folder.`}
|
||||
</Span>
|
||||
) : null}
|
||||
</Stack>
|
||||
|
||||
<Stack className="w-full mt-4 gap-2! items-stretch">
|
||||
<Input
|
||||
placeholder="Search files"
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key == "Enter") reload({ search }).catch(() => {});
|
||||
}}
|
||||
clearInputProps={{ onClick: () => reload({}).catch(() => {}) }}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack className="w-full mt-2 gap-0! items-stretch overflow-y-auto max-h-[50vh]">
|
||||
{files.length ? (
|
||||
files.map((file) => (
|
||||
<FileRow
|
||||
key={file.id}
|
||||
file={file}
|
||||
can_manage={can_manage}
|
||||
busy={busy_id == file.id}
|
||||
onIngest={() =>
|
||||
run({
|
||||
url: `/api/admin/bots/ingest-file`,
|
||||
payload: { file_id: file.id },
|
||||
file_id: file.id,
|
||||
done: `${file.name} will be read again shortly.`,
|
||||
})
|
||||
}
|
||||
onDelete={() =>
|
||||
run({
|
||||
url: `/api/admin/bots/delete-file`,
|
||||
payload: { file_id: file.id },
|
||||
file_id: file.id,
|
||||
done: `${file.name} is deleted.`,
|
||||
})
|
||||
}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Span className="py-6 text-[13px] leading-[18px] text-ink-secondary">
|
||||
{loading
|
||||
? "Loading files..."
|
||||
: error || (search ? `Nothing matches "${search}".` : "No files yet.")}
|
||||
</Span>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{status ? (
|
||||
<Span role="status" className="mt-3 text-[13px] leading-[18px] text-ink-secondary">
|
||||
{status}
|
||||
</Span>
|
||||
) : null}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user