heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refactor Chatbox to improve AddImage component handling and button functionality

Browse Source
This commit is contained in:
ecwu
2024-12-25 16:12:10 +08:00
parent 60b1481dab
commit 08504930d4
3 changed files with 484 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/addImage.tsx
View File

@@ -3,10 +3,29 @@ import { ChatStore } from "@/types/chatstore";
import { MessageDetail } from "@/chatgpt";
import { Tr } from "@/translate";
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Button } from "./components/ui/button";
import { PenIcon, XIcon } from "lucide-react";
import { Checkbox } from "./components/ui/checkbox";
import { Label } from "./components/ui/label";
import { Textarea } from "./components/ui/textarea";
import { Separator } from "./components/ui/separator";
interface Props {
chatStore: ChatStore;
setChatStore: (cs: ChatStore) => void;
images: MessageDetail[];
showAddImage: boolean;
setShowAddImage: (se: boolean) => void;
setImages: (images: MessageDetail[]) => void;
}
@@ -18,6 +37,7 @@ interface ImageResponse {
export function AddImage({
chatStore,
setChatStore,
showAddImage,
setShowAddImage,
setImages,
images,
@@ -34,32 +54,17 @@ export function AddImage({
const [imageGenGenerating, setImageGenGenerating] = useState(false);
useState("b64_json");
return (
<div
className="absolute z-10 bg-black bg-opacity-50 w-full h-full flex justify-center items-center left-0 top-0 overflow-scroll"
onClick={() => {
setShowAddImage(false);
}}
>
<div
className="bg-base-200 p-2 z-20"
onClick={(event) => {
event.stopPropagation();
}}
>
<div className="flex justify-between items-center p-1">
<h3>Add Images</h3>
<button
className="btn btn-sm btn-neutral"
onClick={() => {
setShowAddImage(false);
}}
>
Done
</button>
</div>
<span className="">
<button
className="btn btn-secondary btn-sm disabled:btn-disabled"
<Drawer open={showAddImage} onOpenChange={setShowAddImage}>
<DrawerContent>
<div className="mx-auto w-full max-w-lg">
<DrawerHeader>
<DrawerTitle>Add Images</DrawerTitle>
</DrawerHeader>
<div className="flex gap-2 items-center">
<Button
variant="secondary"
size="sm"
disabled={false}
onClick={() => {
const image_url = prompt("Image URL");
if (!image_url) {
@@ -78,11 +83,12 @@ export function AddImage({
}}
>
Add from URL
</button>
<button
className="btn btn-primary btn-sm disabled:btn-disabled"
</Button>
<Button
variant="default"
size="sm"
disabled={false}
onClick={() => {
// select file and load it to base64 image URL format
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
@@ -111,23 +117,29 @@ export function AddImage({
}}
>
Add from local file
</button>
<span
onClick={() => {
setEnableHighResolution(!enableHighResolution);
}}
</Button>
<div className="flex items-center space-x-2">
<Checkbox
checked={enableHighResolution}
onCheckedChange={(checked) =>
setEnableHighResolution(checked === true)
}
/>
<label
htmlFor="terms"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<label>High resolution</label>
<input type="checkbox" checked={enableHighResolution} />
</span>
</span>
<div className="divider"></div>
High resolution
</label>
</div>
</div>
<Separator className="my-2" />
{chatStore.image_gen_api && chatStore.image_gen_key && (
<div className="flex flex-col">
<h3>Generate Image</h3>
<span className="flex flex-col justify-between m-1 p-1">
<label>Prompt: </label>
<textarea
<Label>Prompt: </Label>
<Textarea
className="textarea textarea-sm textarea-bordered"
value={imageGenPrompt}
onChange={(e: any) => {
@@ -175,7 +187,9 @@ export function AddImage({
<select
className="select select-sm select-bordered"
value={imageGenResponseFormat}
onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
onChange={(e: any) =>
setImageGenResponseFormat(e.target.value)
}
>
<option value="b64_json">b64_json</option>
<option value="url">url</option>
@@ -207,8 +221,9 @@ export function AddImage({
</select>
</span>
<span className="flex flex-row justify-between items-center m-1 p-1">
<button
className="btn btn-primary btn-sm"
<Button
variant="default"
size="sm"
disabled={imageGenGenerating}
onClick={async () => {
try {
@@ -277,7 +292,7 @@ export function AddImage({
}}
>
{Tr("Generate")}
</button>
</Button>
</span>
</div>
)}
@@ -291,7 +306,9 @@ export function AddImage({
/>
)}
<span className="flex justify-between">
<button
<Button
variant="ghost"
size="sm"
onClick={() => {
const image_url = prompt("Image URL");
if (!image_url) {
@@ -304,23 +321,29 @@ export function AddImage({
setImages([...images]);
}}
>
🖋
</button>
<span
onClick={() => {
<PenIcon />
</Button>
<div className="flex items-center space-x-2">
<Checkbox
id={`hires-${index}`}
checked={image.image_url?.detail === "high"}
onCheckedChange={() => {
if (image.image_url === undefined) return;
image.image_url.detail =
image.image_url?.detail === "low" ? "high" : "low";
setImages([...images]);
}}
>
<label>HiRes</label>
<input
type="checkbox"
checked={image.image_url?.detail === "high"}
/>
</span>
<button
<label
htmlFor={`hires-${index}`}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
HiRes
</label>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => {
if (!confirm("Are you sure to delete this image?")) {
return;
@@ -329,13 +352,18 @@ export function AddImage({
setImages([...images]);
}}
>
❌
</button>
<XIcon />
</Button>
</span>
</div>
))}
</div>
<DrawerFooter>
<Button onClick={() => setShowAddImage(false)}>Done</Button>
</DrawerFooter>
</div>
</div>
</DrawerContent>
</Drawer>
);
}

66
src/editMessageDetail.tsx
View File

@@ -2,6 +2,19 @@ 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 "./components/ui/button";
interface Props {
chat: ChatStoreMessage;
chatStore: ChatStore;
@@ -16,12 +29,18 @@ export function EditMessageDetail({
}: Props) {
if (typeof chat.content !== "object") return <div>error</div>;
return (
<div
className={"w-full h-full flex flex-col overflow-scroll"}
onClick={(event) => event.stopPropagation()}
>
<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"}>
<div className={"w-full p-2 px-4"} key={index}>
<div className="flex justify-center">
{mdt.type === "text" ? (
<textarea
@@ -49,10 +68,13 @@ export function EditMessageDetail({
window.open(mdt.image_url?.url, "_blank");
}}
/>
<button
<Button
className="bg-blue-300 p-1 rounded m-1"
onClick={() => {
const image_url = prompt("image url", mdt.image_url?.url);
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;
@@ -63,11 +85,10 @@ export function EditMessageDetail({
}}
>
{Tr("Edit URL")}
</button>
<button
</Button>
<Button
className="bg-blue-300 p-1 rounded m-1"
onClick={() => {
// select file and load it to base64 image URL format
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
@@ -93,7 +114,7 @@ export function EditMessageDetail({
}}
>
{Tr("Upload")}
</button>
</Button>
<span
className="bg-blue-300 p-1 rounded m-1"
onClick={() => {
@@ -113,8 +134,7 @@ export function EditMessageDetail({
</span>
</div>
)}
<button
<Button
onClick={() => {
if (typeof chat.content === "string") return;
chat.content.splice(index, 1);
@@ -123,11 +143,11 @@ export function EditMessageDetail({
}}
>
❌
</button>
</Button>
</div>
</div>
))}
<button
<Button
className={"m-2 p-1 rounded bg-green-500"}
onClick={() => {
if (typeof chat.content === "string") return;
@@ -139,8 +159,8 @@ export function EditMessageDetail({
}}
>
{Tr("Add text")}
</button>
<button
</Button>
<Button
className={"m-2 p-1 rounded bg-green-500"}
onClick={() => {
if (typeof chat.content === "string") return;
@@ -155,7 +175,17 @@ export function EditMessageDetail({
}}
>
{Tr("Add image")}
</button>
</Button>
</div>
<DrawerFooter>
<Button
className="bg-blue-500 p-2 rounded"
onClick={() => setShowEdit(false)}
>
{Tr("Close")}
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
);
}

6
src/pages/Chatbox.tsx
View File

@@ -803,7 +803,8 @@ export default function ChatBOX(props: {
<Button
variant="ghost"
size="icon"
onClick={() => setShowAddImage(!showAddImage)}
type="button"
onClick={() => setShowAddImage(true)}
disabled={showGenerating || !chatStore.apiKey}
>
<ImageIcon className="size-4" />
@@ -837,15 +838,14 @@ export default function ChatBOX(props: {
</div>
</form>
{showAddImage && (
<AddImage
chatStore={chatStore}
setChatStore={setChatStore}
setShowAddImage={setShowAddImage}
images={images}
showAddImage={showAddImage}
setImages={setImages}
/>
)}
</div>
</div>
</>