Files
chatgpt-api-web/src/editMessage.tsx
2024-01-30 10:09:36 +08:00

71 lines
2.2 KiB
TypeScript

import { Tr, langCodeContext, LANG_OPTIONS, tr } from "./translate";
import { useState, useEffect, StateUpdater } from "preact/hooks";
import { ChatStore, ChatStoreMessage } from "./app";
import { calculate_token_length, getMessageText } from "./chatgpt";
import { isVailedJSON } from "./message";
import { EditMessageString } from "./editMessageString";
import { EditMessageDetail } from "./editMessageDetail";
interface EditMessageProps {
chat: ChatStoreMessage;
chatStore: ChatStore;
setShowEdit: StateUpdater<boolean>;
setChatStore: (cs: ChatStore) => void;
}
export function EditMessage(props: EditMessageProps) {
const { setShowEdit, chat, setChatStore, chatStore } = props;
return (
<div
className={
"absolute bg-black bg-opacity-50 w-full h-full top-0 left-0 rounded z-10 overflow-scroll"
}
onClick={() => setShowEdit(false)}
>
<div
className="m-10 p-2 bg-white rounded"
onClick={(event: any) => {
event.stopPropagation();
}}
>
{typeof chat.content === "string" ? (
<EditMessageString
chat={chat}
chatStore={chatStore}
setChatStore={setChatStore}
setShowEdit={setShowEdit}
/>
) : (
<EditMessageDetail
chat={chat}
chatStore={chatStore}
setChatStore={setChatStore}
setShowEdit={setShowEdit}
/>
)}
<div className={"w-full flex justify-center"}>
{chatStore.develop_mode && <button
className="w-full m-2 p-1 rounded bg-red-500"
onClick={() => {
if (typeof chat.content === "string") {
chat.content = []
} else {
chat.content = ''
}
setChatStore({ ...chatStore })
}}
>Switch to {typeof chat.content === 'string' ? "media message" : "string message"}</button>}
<button
className={"w-full m-2 p-1 rounded bg-purple-500"}
onClick={() => {
setShowEdit(false);
}}
>
{Tr("Close")}
</button>
</div>
</div>
</div>
);
}