prevent toggle model event to link

coaidev · Oct 25, 2023 · 1cbcbcc · 1cbcbcc
1 parent 4951906
commit 1cbcbcc
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 48 deletions.
diff --git a/app/src/components/SelectGroup.tsx b/app/src/components/SelectGroup.tsx
@@ -8,6 +8,7 @@ import {
 import { mobile } from "../utils.ts";
 import { useEffect, useState } from "react";
 import { Badge } from "./ui/badge.tsx";
+import {toggleEvent} from "../events/model.ts";
 
 export type SelectItemBadgeProps = {
   variant: "default" | "gold";
@@ -95,12 +96,19 @@ function SelectGroupMobile(props: SelectGroupProps) {
   return (
     <Select
       value={props.current.name}
-      onValueChange={(value: string) => props.onChange?.(value)}
+      onValueChange={(value: string) => {
+        toggleEvent.emit(new Date().getTime());
+        props.onChange?.(value);
+      }}
     >
       <SelectTrigger className="select-group mobile">
         <SelectValue placeholder={props.current.value} />
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent onCloseAutoFocus={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleEvent.emit(new Date().getTime());
+      }}>
         {props.list.map((select: SelectItemProps, idx: number) => (
           <SelectItem key={idx} value={select.name}>
             <GroupSelectItem {...select} />

diff --git a/app/src/components/home/ChatWrapper.tsx b/app/src/components/home/ChatWrapper.tsx
@@ -31,8 +31,61 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
 } from "../ui/dialog.tsx";
+import {toggleEvent} from "../../events/model.ts";
+
+function ChatSpace() {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
+  const [prevent, setPrevent] = useState(0);
+  toggleEvent.bind(setPrevent);
+
+  const notPrevent = (): boolean => (new Date().getTime() - prevent) >= 1000;
+
+  return (
+    <div className={`chat-product`}>
+      <Button variant={`outline`} onClick={() => notPrevent() && setOpen(true)}>
+        <Users2 className={`h-4 w-4 mr-1.5`} />
+        {t("contact.title")}
+        <ChevronRight className={`h-4 w-4 ml-2`} />
+      </Button>
+      <Button
+        variant={`outline`}
+        onClick={() => notPrevent() && router.navigate("/generate")}
+      >
+        <FolderKanban className={`h-4 w-4 mr-1.5`} />
+        {t("generate.title")}
+        <ChevronRight className={`h-4 w-4 ml-2`} />
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("contact.title")}</DialogTitle>
+            <DialogDescription />
+            <Button
+              className={`mx-auto`}
+              variant={`outline`}
+              onClick={() => window.open("https://docs.chatnio.net", "_blank")}
+            >
+              <BookMarked className={`h-4 w-4 mr-1.5`} />
+              {t("docs.title")}
+            </Button>
+            <a
+              href={"http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=1oKfIbNVXmMNMVzW1NiFSTKDcT1qIEq5&authKey=uslxslIBZtLImf4BSxjDqfx4hiJA52YV7PFM38W%2BOArr%2BhE0jwVdQCRYs0%2FXKX7W&noverify=0&group_code=565902327"}
+              target={"_blank"}
+              className={`mx-auto`}
+            >
+              <img src={`/source/qq.jpg`} className={`contact-image`} alt={`QQ`} />
+            </a>
+
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
 
 function ChatWrapper() {
   const { t } = useTranslation();
@@ -97,47 +150,7 @@ function ChatWrapper() {
         {messages.length > 0 ? (
           <ChatInterface />
         ) : (
-          <div className={`chat-product`}>
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant={`outline`}>
-                  <Users2 className={`h-4 w-4 mr-1.5`} />
-                  {t("contact.title")}
-                  <ChevronRight className={`h-4 w-4 ml-2`} />
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>{t("contact.title")}</DialogTitle>
-                  <DialogDescription />
-                  <Button
-                    className={`mx-auto`}
-                    variant={`outline`}
-                    onClick={() => window.open("https://docs.chatnio.net", "_blank")}
-                  >
-                    <BookMarked className={`h-4 w-4 mr-1.5`} />
-                    {t("docs.title")}
-                  </Button>
-                  <a
-                    href={"http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=1oKfIbNVXmMNMVzW1NiFSTKDcT1qIEq5&authKey=uslxslIBZtLImf4BSxjDqfx4hiJA52YV7PFM38W%2BOArr%2BhE0jwVdQCRYs0%2FXKX7W&noverify=0&group_code=565902327"}
-                    target={"_blank"}
-                    className={`mx-auto`}
-                  >
-                    <img src={`/source/qq.jpg`} className={`contact-image`} alt={`QQ`} />
-                  </a>
-
-                </DialogHeader>
-              </DialogContent>
-            </Dialog>
-            <Button
-              variant={`outline`}
-              onClick={() => router.navigate("/generate")}
-            >
-              <FolderKanban className={`h-4 w-4 mr-1.5`} />
-              {t("generate.title")}
-              <ChevronRight className={`h-4 w-4 ml-2`} />
-            </Button>
-          </div>
+          <ChatSpace />
         )}
         <div className={`chat-input`}>
           <div className={`input-wrapper`}>

diff --git a/app/src/events/model.ts b/app/src/events/model.ts
@@ -3,3 +3,7 @@ import { EventCommitter } from "./struct.ts";
 export const modelEvent = new EventCommitter<string>({
   name: "model",
 });
+
+export const toggleEvent = new EventCommitter<number>({
+  name: "toggle",
+});
diff --git a/app/src/i18n.ts b/app/src/i18n.ts
@@ -199,8 +199,8 @@ const resources = {
         title: "Open Docs",
       },
       invitation: {
-        title: "Invitation Code",
-        "input-placeholder": "Please enter the invitation code",
+        title: "Redeem Code",
+        "input-placeholder": "Please enter the redeem code",
         "cancel": "Cancel",
         "check": "Check",
         "check-success": "Redeem Success",
@@ -395,8 +395,8 @@ const resources = {
         title: "开放文档",
       },
       invitation: {
-        title: "邀请码",
-        "input-placeholder": "请输入邀请码",
+        title: "兑换码",
+        "input-placeholder": "请输入兑换码",
         "cancel": "取消",
         "check": "验证",
         "check-success": "兑换成功",