90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { useContext, useState } from "react";
|
|
import { AppContext } from "@/src/pages/__root";
|
|
import Button from "@moduletrace/twui/layout/Button";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import SharedComputerViewerModal from "@/src/components/general/computer-viewer-modal";
|
|
import type { BotWithLastMessage } from "@/src/types";
|
|
import { BotComputersContext } from "../(data)/bot-computers-context";
|
|
import sendBotMessage from "../(functions)/send-bot-message";
|
|
|
|
type Props = {
|
|
bot: BotWithLastMessage;
|
|
};
|
|
|
|
/**
|
|
* The computer the user opened (from the computers modal, or a take-over
|
|
* the bot asked for), large, in its browser, terminal or code editor.
|
|
* After a take-over the user hands it back from here, which tells the
|
|
* bot in chat so it carries on.
|
|
*/
|
|
export default function ComputerViewerModal({ bot }: Props) {
|
|
const { pageProps } = useContext(AppContext);
|
|
const { computers, viewing, closeComputer } =
|
|
useContext(BotComputersContext);
|
|
const [handing_back, setHandingBack] = useState(false);
|
|
const [error, setError] = useState<string>();
|
|
|
|
const computer = computers.find((c) => c.id == viewing?.computer_id);
|
|
|
|
if (!viewing || !computer?.id) return null;
|
|
|
|
const name = computer.name || `Computer ${computer.id}`;
|
|
const bot_name = bot.name || "the bot";
|
|
|
|
const handBack = async () => {
|
|
setHandingBack(true);
|
|
setError(undefined);
|
|
|
|
const res = await sendBotMessage({
|
|
bot_id: bot.id || 0,
|
|
workspace_id: pageProps?.workspace?.id || null,
|
|
text: `I'm done on ${name}. You can carry on.`,
|
|
media_ids: [],
|
|
}).catch(() => null);
|
|
|
|
setHandingBack(false);
|
|
|
|
if (res?.success) closeComputer();
|
|
else setError(res?.msg || "Couldn't tell the bot");
|
|
};
|
|
|
|
return (
|
|
<SharedComputerViewerModal
|
|
open
|
|
onClose={closeComputer}
|
|
computer_id={Number(computer.id)}
|
|
name={name}
|
|
default_mode={viewing.mode}
|
|
note={
|
|
viewing.take_over
|
|
? `${bot_name} asked you to take over. Hand it back when you're done.`
|
|
: undefined
|
|
}
|
|
action={
|
|
viewing.take_over ? (
|
|
<>
|
|
<Button
|
|
type="button"
|
|
size="small"
|
|
loading={handing_back}
|
|
onClick={handBack}
|
|
title={`Tell ${bot_name} you're done`}
|
|
>
|
|
{`Hand back to ${bot_name}`}
|
|
</Button>
|
|
{error ? (
|
|
<Span
|
|
role="alert"
|
|
className="text-[13px] leading-[18px] text-ink-secondary"
|
|
>
|
|
{error}
|
|
</Span>
|
|
) : null}
|
|
</>
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
}
|