Files
chatgpt-api-web/src/components/editMessage.tsx

80 lines
2.5 KiB
TypeScript

import { useState, useEffect, Dispatch, useContext } from "react";
import { Tr, langCodeContext, LANG_OPTIONS, tr } from "@/translate";
import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
import { EditMessageString } from "@/components/editMessageString";
import { EditMessageDetail } from "@/components/editMessageDetail";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "./ui/button";
import { AppChatStoreContext, AppContext } from "../pages/App";
import { ConfirmationDialog } from "./ui/confirmation-dialog";
interface EditMessageProps {
chat: ChatStoreMessage;
showEdit: boolean;
setShowEdit: Dispatch<boolean>;
}
export function EditMessage(props: EditMessageProps) {
const { chatStore, setChatStore } = useContext(AppChatStoreContext);
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const { showEdit, setShowEdit, chat } = props;
const handleSwitchMessageType = () => {
if (typeof chat.content === "string") {
chat.content = [];
} else {
chat.content = "";
}
setChatStore({ ...chatStore });
};
return (
<Dialog open={showEdit} onOpenChange={setShowEdit}>
{/* <DialogTrigger>
<button className="btn btn-sm btn-outline"></button>
</DialogTrigger> */}
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Edit Message</DialogTitle>
<DialogDescription>
Make changes to the message content.
</DialogDescription>
</DialogHeader>
{typeof chat.content === "string" ? (
<EditMessageString chat={chat} setShowEdit={setShowEdit} />
) : (
<EditMessageDetail chat={chat} setShowEdit={setShowEdit} />
)}
{chatStore.develop_mode && (
<Button
variant="destructive"
className="w-full"
onClick={() => setShowConfirmDialog(true)}
>
Switch to{" "}
{typeof chat.content === "string"
? "media message"
: "string message"}
</Button>
)}
<Button onClick={() => setShowEdit(false)}>Close</Button>
</DialogContent>
<ConfirmationDialog
isOpen={showConfirmDialog}
onClose={() => setShowConfirmDialog(false)}
onConfirm={handleSwitchMessageType}
title="Switch Message Type"
description="Change message type will clear the content, are you sure?"
/>
</Dialog>
);
}