refactor: move edit message components to components directory for better organization
This commit is contained in:
ecwu
@@ -6,7 +6,7 @@ import { addTotalCost } from "@/utils/totalCost";
|
||||
|
||||
import { Tr } from "@/translate";
|
||||
import { getMessageText } from "@/chatgpt";
|
||||
import { EditMessage } from "@/editMessage";
|
||||
import { EditMessage } from "@/components/editMessage";
|
||||
import logprobToColor from "@/utils/logprob";
|
||||
import {
|
||||
ChatBubble,
|
||||
|
||||
74
src/components/editMessage.tsx
Normal file
74
src/components/editMessage.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
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 { AppContext } from "../pages/App";
|
||||
|
||||
interface EditMessageProps {
|
||||
chat: ChatStoreMessage;
|
||||
showEdit: boolean;
|
||||
setShowEdit: Dispatch<boolean>;
|
||||
}
|
||||
export function EditMessage(props: EditMessageProps) {
|
||||
const ctx = useContext(AppContext);
|
||||
if (!ctx) return <div>error</div>;
|
||||
|
||||
const { showEdit, setShowEdit, chat } = props;
|
||||
|
||||
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} />
|
||||
)}
|
||||
{ctx.chatStore.develop_mode && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
const confirm = window.confirm(
|
||||
"Change message type will clear the content, are you sure?"
|
||||
);
|
||||
if (!confirm) return;
|
||||
|
||||
if (typeof chat.content === "string") {
|
||||
chat.content = [];
|
||||
} else {
|
||||
chat.content = "";
|
||||
}
|
||||
ctx.setChatStore({ ...ctx.chatStore });
|
||||
}}
|
||||
>
|
||||
Switch to{" "}
|
||||
{typeof chat.content === "string"
|
||||
? "media message"
|
||||
: "string message"}
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={() => setShowEdit(false)}>Save & Close</Button>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
191
src/components/editMessageDetail.tsx
Normal file
191
src/components/editMessageDetail.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
|
||||
import { calculate_token_length } from "@/chatgpt";
|
||||
import { Tr } from "@/translate";
|
||||
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer";
|
||||
|
||||
import { Button } from "./ui/button";
|
||||
import { useContext } from "react";
|
||||
import { AppContext } from "../pages/App";
|
||||
|
||||
interface Props {
|
||||
chat: ChatStoreMessage;
|
||||
setShowEdit: (se: boolean) => void;
|
||||
}
|
||||
export function EditMessageDetail({ chat, setShowEdit }: Props) {
|
||||
const ctx = useContext(AppContext);
|
||||
if (!ctx) return <div>error</div>;
|
||||
|
||||
const { chatStore, setChatStore } = ctx;
|
||||
|
||||
if (typeof chat.content !== "object") return <div>error</div>;
|
||||
return (
|
||||
<Drawer open={true} onOpenChange={setShowEdit}>
|
||||
<DrawerTrigger>Open</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Edit Message Detail</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
Modify the content of the message.
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<div className={"w-full h-full flex flex-col overflow-scroll"}>
|
||||
{chat.content.map((mdt, index) => (
|
||||
<div className={"w-full p-2 px-4"} key={index}>
|
||||
<div className="flex justify-center">
|
||||
{mdt.type === "text" ? (
|
||||
<textarea
|
||||
className={"w-full border p-1 rounded"}
|
||||
value={mdt.text}
|
||||
onChange={(event: any) => {
|
||||
if (typeof chat.content === "string") return;
|
||||
chat.content[index].text = event.target.value;
|
||||
chat.token = calculate_token_length(chat.content);
|
||||
console.log("calculated token length", chat.token);
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
onKeyPress={(event: any) => {
|
||||
if (event.keyCode == 27) {
|
||||
setShowEdit(false);
|
||||
}
|
||||
}}
|
||||
></textarea>
|
||||
) : (
|
||||
<div className="border p-1 rounded">
|
||||
<img
|
||||
className="max-h-32 max-w-xs cursor-pointer m-2"
|
||||
src={mdt.image_url?.url}
|
||||
onClick={() => {
|
||||
window.open(mdt.image_url?.url, "_blank");
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className="bg-blue-300 p-1 rounded m-1"
|
||||
onClick={() => {
|
||||
const image_url = prompt(
|
||||
"image url",
|
||||
mdt.image_url?.url
|
||||
);
|
||||
if (image_url) {
|
||||
if (typeof chat.content === "string") return;
|
||||
const obj = chat.content[index].image_url;
|
||||
if (obj === undefined) return;
|
||||
obj.url = image_url;
|
||||
setChatStore({ ...chatStore });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{Tr("Edit URL")}
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-blue-300 p-1 rounded m-1"
|
||||
onClick={() => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "image/*";
|
||||
input.onchange = (event) => {
|
||||
const file = (event.target as HTMLInputElement)
|
||||
.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = () => {
|
||||
const base64data = reader.result;
|
||||
if (!base64data) return;
|
||||
if (typeof chat.content === "string") return;
|
||||
const obj = chat.content[index].image_url;
|
||||
if (obj === undefined) return;
|
||||
obj.url = String(base64data);
|
||||
setChatStore({ ...chatStore });
|
||||
};
|
||||
};
|
||||
input.click();
|
||||
}}
|
||||
>
|
||||
{Tr("Upload")}
|
||||
</Button>
|
||||
<span
|
||||
className="bg-blue-300 p-1 rounded m-1"
|
||||
onClick={() => {
|
||||
if (typeof chat.content === "string") return;
|
||||
const obj = chat.content[index].image_url;
|
||||
if (obj === undefined) return;
|
||||
obj.detail = obj.detail === "high" ? "low" : "high";
|
||||
chat.token = calculate_token_length(chat.content);
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
<label>High Resolution</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mdt.image_url?.detail === "high"}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (typeof chat.content === "string") return;
|
||||
chat.content.splice(index, 1);
|
||||
chat.token = calculate_token_length(chat.content);
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
❌
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
className={"m-2 p-1 rounded bg-green-500"}
|
||||
onClick={() => {
|
||||
if (typeof chat.content === "string") return;
|
||||
chat.content.push({
|
||||
type: "text",
|
||||
text: "",
|
||||
});
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
{Tr("Add text")}
|
||||
</Button>
|
||||
<Button
|
||||
className={"m-2 p-1 rounded bg-green-500"}
|
||||
onClick={() => {
|
||||
if (typeof chat.content === "string") return;
|
||||
chat.content.push({
|
||||
type: "image_url",
|
||||
image_url: {
|
||||
url: "",
|
||||
detail: "high",
|
||||
},
|
||||
});
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
{Tr("Add image")}
|
||||
</Button>
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
className="bg-blue-500 p-2 rounded"
|
||||
onClick={() => setShowEdit(false)}
|
||||
>
|
||||
{Tr("Close")}
|
||||
</Button>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
121
src/components/editMessageString.tsx
Normal file
121
src/components/editMessageString.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import { ChatStore, ChatStoreMessage } from "@/types/chatstore";
|
||||
import { isVailedJSON } from "@/utils/isVailedJSON";
|
||||
import { calculate_token_length } from "@/chatgpt";
|
||||
import { Tr } from "@/translate";
|
||||
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useContext } from "react";
|
||||
import { AppContext } from "../pages/App";
|
||||
|
||||
interface Props {
|
||||
chat: ChatStoreMessage;
|
||||
setShowEdit: (se: boolean) => void;
|
||||
}
|
||||
export function EditMessageString({ chat, setShowEdit }: Props) {
|
||||
const ctx = useContext(AppContext);
|
||||
if (!ctx) return <div>error</div>;
|
||||
|
||||
const { chatStore, setChatStore } = ctx;
|
||||
|
||||
if (typeof chat.content !== "string") return <div>error</div>;
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{chat.tool_call_id && (
|
||||
<span className="my-2">
|
||||
<label>tool_call_id: </label>
|
||||
<input
|
||||
className="rounded border border-gray-400"
|
||||
value={chat.tool_call_id}
|
||||
onChange={(event: any) => {
|
||||
chat.tool_call_id = event.target.value;
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
{chat.tool_calls &&
|
||||
chat.tool_calls.map((tool_call) => (
|
||||
<div className="flex flex-col w-full">
|
||||
<span className="my-2 w-full">
|
||||
<label>Tool Call ID: </label>
|
||||
<input
|
||||
value={tool_call.id}
|
||||
className="rounded border border-gray-400"
|
||||
/>
|
||||
</span>
|
||||
<span className="my-2 w-full">
|
||||
<label>Function: </label>
|
||||
<input
|
||||
value={tool_call.function.name}
|
||||
className="rounded border border-gray-400"
|
||||
/>
|
||||
</span>
|
||||
<span className="my-2">
|
||||
<label>Arguments: </label>
|
||||
<span className="underline">
|
||||
Vailed JSON:{" "}
|
||||
{isVailedJSON(tool_call.function.arguments) ? "🆗" : "❌"}
|
||||
</span>
|
||||
<textarea
|
||||
className="rounded border border-gray-400 w-full h-32 my-2"
|
||||
value={tool_call.function.arguments}
|
||||
onChange={(event: any) => {
|
||||
tool_call.function.arguments = event.target.value.trim();
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
></textarea>
|
||||
</span>
|
||||
<span className="flex flex-col my-2 justify-between">
|
||||
<button
|
||||
className="bg-red-300 text-black p-1 rounded"
|
||||
onClick={() => {
|
||||
if (!chat.tool_calls) return;
|
||||
chat.tool_calls = chat.tool_calls.filter(
|
||||
(tc) => tc.id !== tool_call.id
|
||||
);
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
{Tr("Delete this tool call")}
|
||||
</button>
|
||||
</span>
|
||||
<hr className="my-2" />
|
||||
<span className="flex flex-col my-2 justify-between">
|
||||
<button
|
||||
className="bg-blue-300 text-black p-1 rounded"
|
||||
onClick={() => {
|
||||
if (!chat.tool_calls) return;
|
||||
chat.tool_calls.push({
|
||||
type: "function",
|
||||
index: chat.tool_calls.length,
|
||||
id: "",
|
||||
function: {
|
||||
name: "",
|
||||
arguments: "",
|
||||
},
|
||||
});
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
>
|
||||
{Tr("Add a tool call")}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<Textarea
|
||||
className="w-full h-32 my-2"
|
||||
value={chat.content}
|
||||
onChange={(event) => {
|
||||
chat.content = event.target.value;
|
||||
chat.token = calculate_token_length(chat.content);
|
||||
setChatStore({ ...chatStore });
|
||||
}}
|
||||
onKeyPress={(event) => {
|
||||
if (event.keyCode == 27) {
|
||||
setShowEdit(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user