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

2024-12-25 18:04:28 +08:00
parent 6a7f273682 834e27810c
commit b021f65a59
4 changed files with 504 additions and 430 deletions
--- 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,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>
  );
 }
--- a/src/components/WhisperButton.tsx
+++ b/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>
  );
 };
--- a/src/editMessageDetail.tsx
+++ b/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
-      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>
  );
 }
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -803,8 +803,9 @@ export default function ChatBOX(props: {
              <Button
                variant="ghost"
                size="icon"
-                onClick={() => setShowAddImage(!showAddImage)}
-                disabled={showGenerating || !chatStore.apiKey}
+                type="button"
+                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>
    </>