From 08504930d45d499469194c888fa7e7e63a5082a8 Mon Sep 17 00:00:00 2001 From: ecwu Date: Wed, 25 Dec 2024 16:12:10 +0800 Subject: [PATCH 1/4] Refactor Chatbox to improve AddImage component handling and button functionality --- src/addImage.tsx | 608 ++++++++++++++++++++------------------ src/editMessageDetail.tsx | 282 ++++++++++-------- src/pages/Chatbox.tsx | 20 +- 3 files changed, 484 insertions(+), 426 deletions(-) diff --git a/src/addImage.tsx b/src/addImage.tsx index 48cfd3e..78259d2 100644 --- a/src/addImage.tsx +++ b/src/addImage.tsx @@ -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,308 +54,316 @@ export function AddImage({ const [imageGenGenerating, setImageGenGenerating] = useState(false); useState("b64_json"); return ( -
{ - setShowAddImage(false); - }} - > -
{ - event.stopPropagation(); - }} - > -
-

Add Images

- -
- - - - { - setEnableHighResolution(!enableHighResolution); - }} - > - - - - -
- {chatStore.image_gen_api && chatStore.image_gen_key && ( -
-

Generate Image

- - - - ) : ( -
- { - window.open(mdt.image_url?.url, "_blank"); - }} - /> - + + { if (typeof chat.content === "string") return; const obj = chat.content[index].image_url; if (obj === undefined) return; - obj.url = String(base64data); + obj.detail = obj.detail === "high" ? "low" : "high"; + chat.token = calculate_token_length(chat.content); setChatStore({ ...chatStore }); - }; - }; - input.click(); - }} - > - {Tr("Upload")} - - + + + +
+ )} +
- )} - - -
+
+ ))} + + - ))} - - - + + + + + ); } diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx index 12478ec..2d0f266 100644 --- a/src/pages/Chatbox.tsx +++ b/src/pages/Chatbox.tsx @@ -803,7 +803,8 @@ export default function ChatBOX(props: { ); }; From 192bae7339865ac23afef2e6cc70713ef5f43ea0 Mon Sep 17 00:00:00 2001 From: ecwu Date: Wed, 25 Dec 2024 16:28:10 +0800 Subject: [PATCH 3/4] allow to add image when API key is not set --- src/pages/Chatbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx index 2d0f266..705de43 100644 --- a/src/pages/Chatbox.tsx +++ b/src/pages/Chatbox.tsx @@ -805,7 +805,7 @@ export default function ChatBOX(props: { size="icon" type="button" onClick={() => setShowAddImage(true)} - disabled={showGenerating || !chatStore.apiKey} + disabled={showGenerating} > Add Image From 834e27810cb18d3fcf28fb13beacf848dde32168 Mon Sep 17 00:00:00 2001 From: ecwu Date: Wed, 25 Dec 2024 16:30:35 +0800 Subject: [PATCH 4/4] Replace VoicemailIcon with CircleStopIcon in WhisperButton during recording state --- src/components/WhisperButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/WhisperButton.tsx b/src/components/WhisperButton.tsx index 30a6c53..1bc838c 100644 --- a/src/components/WhisperButton.tsx +++ b/src/components/WhisperButton.tsx @@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button"; import { AudioWaveform, AudioWaveformIcon, + CircleStopIcon, MicIcon, VoicemailIcon, } from "lucide-react"; @@ -136,7 +137,7 @@ const WhisperButton = (props: { {isRecording === "Mic" ? ( ) : isRecording === "Recording" ? ( - + ) : ( )}