Merge remote-tracking branch 'github/dev' into dev

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,32 +54,17 @@ export function AddImage({
   const [imageGenGenerating, setImageGenGenerating] = useState(false);
   useState("b64_json");
   return (
-    <div
+    <Drawer open={showAddImage} onOpenChange={setShowAddImage}>
-      className="absolute z-10 bg-black bg-opacity-50 w-full h-full flex justify-center items-center left-0 top-0 overflow-scroll"
+      <DrawerContent>
-      onClick={() => {
+        <div className="mx-auto w-full max-w-lg">
-        setShowAddImage(false);
+          <DrawerHeader>
-      }}
+            <DrawerTitle>Add Images</DrawerTitle>
-    >
+          </DrawerHeader>
-      <div
+          <div className="flex gap-2 items-center">
-        className="bg-base-200 p-2 z-20"
+            <Button
-        onClick={(event) => {
+              variant="secondary"
-          event.stopPropagation();
+              size="sm"
-        }}
+              disabled={false}
-      >
-        <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"
               onClick={() => {
                 const image_url = prompt("Image URL");
                 if (!image_url) {
@@ -78,11 +83,12 @@ export function AddImage({
               }}
             >
               Add from URL
-          </button>
+            </Button>
-          <button
+            <Button
-            className="btn btn-primary btn-sm disabled:btn-disabled"
+              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>
+            </Button>
-          <span
+            <div className="flex items-center space-x-2">
-            onClick={() => {
+              <Checkbox
-              setEnableHighResolution(!enableHighResolution);
+                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>
+                High resolution
-            <input type="checkbox" checked={enableHighResolution} />
+              </label>
-          </span>
+            </div>
-        </span>
+          </div>
-        <div className="divider"></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>
+                <Label>Prompt: </Label>
-              <textarea
+                <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
+                <Button
-                className="btn btn-primary btn-sm"
+                  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]);
                     }}
                   >
-                  🖋
+                    <PenIcon />
-                </button>
+                  </Button>
-                <span
+                  <div className="flex items-center space-x-2">
-                  onClick={() => {
+                    <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>
+                    <label
-                <button
+                      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]);
                     }}
                   >
-                  ❌
+                    <XIcon />
-                </button>
+                  </Button>
                 </span>
               </div>
             ))}
           </div>
+
+          <DrawerFooter>
+            <Button onClick={() => setShowAddImage(false)}>Done</Button>
+          </DrawerFooter>
         </div>
-    </div>
+      </DrawerContent>
+    </Drawer>
   );
 }

src/components/WhisperButton.tsx

@@ -3,6 +3,13 @@ import { createRef } from "preact";
 import { ChatStore } from "@/types/chatstore";
 import { StateUpdater, useEffect, useState, Dispatch } from "preact/hooks";
 import { Button } from "@/components/ui/button";
+import {
+  AudioWaveform,
+  AudioWaveformIcon,
+  CircleStopIcon,
+  MicIcon,
+  VoicemailIcon,
+} from "lucide-react";
 
 const WhisperButton = (props: {
   chatStore: ChatStore;
@@ -14,11 +21,14 @@ const WhisperButton = (props: {
   const [isRecording, setIsRecording] = useState("Mic");
   return (
     <Button
-      variant={isRecording === "Recording" ? "destructive" : "default"}
+      variant="ghost"
+      size="icon"
       className={`m-1 p-1 ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
       disabled={isRecording === "Transcribing"}
       ref={mediaRef}
-      onClick={async () => {
+      onClick={async (event) => {
+        event.preventDefault(); // Prevent the default behavior
+
         if (isRecording === "Recording") {
           // @ts-ignore
           window.mediaRecorder.stop();
@@ -124,7 +134,13 @@ const WhisperButton = (props: {
         }
       }}
     >
-      {isRecording}
+      {isRecording === "Mic" ? (
+        <MicIcon />
+      ) : isRecording === "Recording" ? (
+        <CircleStopIcon />
+      ) : (
+        <AudioWaveformIcon />
+      )}
     </Button>
   );
 };

src/editMessageDetail.tsx

@@ -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
+    <Drawer open={true} onOpenChange={setShowEdit}>
-      className={"w-full h-full flex flex-col overflow-scroll"}
+      <DrawerTrigger>Open</DrawerTrigger>
-      onClick={(event) => event.stopPropagation()}
+      <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>
   );
 }

src/pages/Chatbox.tsx

@@ -803,8 +803,9 @@ export default function ChatBOX(props: {
               <Button
                 variant="ghost"
                 size="icon"
-                onClick={() => setShowAddImage(!showAddImage)}
+                type="button"
-                disabled={showGenerating || !chatStore.apiKey}
+                onClick={() => setShowAddImage(true)}
+                disabled={showGenerating}
               >
                 <ImageIcon className="size-4" />
                 <span className="sr-only">Add Image</span>
@@ -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>
     </>