update quota dialog

syfssb · Sep 7, 2023 · fbe1590 · fbe1590
1 parent cf81373
commit fbe1590
Show file tree

Hide file tree

Showing 20 changed files with 637 additions and 148 deletions.
diff --git a/api/chat.go b/api/chat.go
@@ -14,7 +14,8 @@ import (
 	"strings"
 )
 
-const defaultMessage = "There was something wrong... Please try again later."
+const defaultErrorMessage = "There was something wrong... Please try again later."
+const defaultQuotaMessage = "You have run out of GPT-4 usage. Please keep your nio points above **5**."
 
 type WebsocketAuthForm struct {
 	Token string `json:"token" binding:"required"`
@@ -37,13 +38,13 @@ func TextChat(db *sql.DB, user *auth.User, conn *websocket.Conn, instance *conve
 
 	SendSegmentMessage(conn, types.ChatGPTSegmentResponse{Keyword: keyword, End: false})
 
-	if instance.IsEnableGPT4() && !auth.ReduceGPT4(db, user) {
+	if instance.IsEnableGPT4() && !auth.CanEnableGPT4(db, user) {
 		SendSegmentMessage(conn, types.ChatGPTSegmentResponse{
-			Message: "You have run out of GPT-4 usage. Please buy more.",
+			Message: defaultQuotaMessage,
 			Quota:   0,
 			End:     true,
 		})
-		return "You have run out of GPT-4 usage. Please buy more."
+		return defaultQuotaMessage
 	}
 
 	buffer := NewBuffer(instance.IsEnableGPT4(), segment)
@@ -55,18 +56,18 @@ func TextChat(db *sql.DB, user *auth.User, conn *websocket.Conn, instance *conve
 		})
 	})
 	if buffer.IsEmpty() {
-		if instance.IsEnableGPT4() {
-			auth.IncreaseGPT4(db, user, 1)
-		}
 		SendSegmentMessage(conn, types.ChatGPTSegmentResponse{
-			Message: defaultMessage,
+			Message: defaultErrorMessage,
 			Quota:   buffer.GetQuota(),
 			End:     false,
 		})
 	}
+
+	// collect quota
+	user.UseQuota(db, buffer.GetQuota())
 	SendSegmentMessage(conn, types.ChatGPTSegmentResponse{End: true, Quota: buffer.GetQuota()})
 
-	return buffer.ReadWithDefault(defaultMessage)
+	return buffer.ReadWithDefault(defaultErrorMessage)
 }
 
 func ImageChat(conn *websocket.Conn, instance *conversation.Conversation, user *auth.User, db *sql.DB, cache *redis.Client) string {

diff --git a/app/package.json b/app/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.4",

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -27,6 +27,8 @@ import {
 import { Toaster } from "./components/ui/toaster.tsx";
 import {login, tokenField} from "./conf.ts";
 import { useTranslation } from "react-i18next";
+import Quota from "./routes/Quota.tsx";
+import {openDialog} from "./store/quota.ts";
 
 function Settings() {
   const { t } = useTranslation();
@@ -46,7 +48,7 @@ function Settings() {
             {username}
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
-          <DropdownMenuItem>{t("quota")}</DropdownMenuItem>
+          <DropdownMenuItem onClick={() => dispatch(openDialog())}>{t("quota")}</DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem asChild>
             <Button
@@ -110,6 +112,7 @@ function App() {
       <ThemeProvider />
       <RouterProvider router={router} />
       <Toaster />
+      <Quota />
     </Provider>
   );
 }

diff --git a/app/src/assets/globals.less b/app/src/assets/globals.less
@@ -33,6 +33,7 @@
     --border: 37 26% 83%;
     --border-hover: 37 26% 78%;
     --input: 37 26% 90%;
+    --input-unread: 37 26% 95%;
     --ring: 222.2 84% 4.9%;
     --text: 0 0% 0%;
     --text-secondary: 0 0% 20%;
@@ -80,6 +81,7 @@
     --border: 240 3.7% 15.9%;
     --border-hover: 240 3.7% 20.9%;
     --input: 240 3.7% 15.9%;
+    --input-unread: 240 3.7% 50%;
     --ring: 240 4.9% 83.9%;
     --text: 0 0% 100%;
     --text-secondary: 0 0% 80%;

diff --git a/app/src/assets/home.less b/app/src/assets/home.less
@@ -13,6 +13,15 @@
   font-weight: bold !important;
 }
 
+.web {
+  color: hsl(var(--input-unread));
+  transition: .25s linear;
+
+  &.enable {
+    color: hsl(var(--text));
+  }
+}
+
 .sidebar {
   display: flex;
   flex-shrink: 0;

diff --git a/app/src/assets/quota.less b/app/src/assets/quota.less
@@ -0,0 +1,235 @@
+.buy-interface {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-basis: auto;
+  flex-shrink: 0;
+  width: 100%;
+  height: max-content;
+  padding: 16px 0;
+  gap: 36px;
+
+  @media (max-width: 820px) {
+    & {
+      width: min-content;
+      margin: 0 auto;
+    }
+  }
+
+  .interface-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-width: calc(90vw - 3rem);
+  }
+}
+
+.buy-action {
+  width: 100%;
+  margin: 24px 0;
+
+  .buy-button {
+    width: 100%;
+  }
+}
+
+.quota-dialog {
+  max-width: min(90vw, 1044px) !important;
+  border-radius: var(--radius) !important;
+}
+
+.amount-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: max-content;
+  max-width: 100%;
+  align-items: center;
+}
+
+.other-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  user-select: none;
+
+  .amount-number {
+    color: hsl(var(--text));
+    transform: translateY(-2px);
+  }
+
+  .amount-input-box {
+    position: relative;
+    width: max-content;
+    height: max-content;
+
+    .amount-input {
+      color: hsl(var(--text));
+      font-size: 16px;
+      text-align: center;
+    }
+
+    svg {
+      color: hsl(var(--text));
+      position: absolute;
+      top: 50%;
+      left: 12px;
+      user-select: none;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+.line {
+  background: hsl(var(--border));
+  width: 1px;
+  min-height: 0;
+  height: 100%;
+
+  @media (max-width: 980px) {
+    & {
+      display: none;
+    }
+  }
+}
+
+.amount-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 24px;
+  gap: 12px;
+  justify-content: center;
+
+  .amount {
+    position: relative;
+    display: flex;
+    padding: 12px 32px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--background-container));
+    border-radius: var(--radius);
+    user-select: none;
+    cursor: pointer;
+    gap: 6px;
+    min-width: 100px;
+    transition: .1s linear;
+
+    @media (max-width: 360px) {
+      & {
+        width: 100%;
+      }
+
+      &.active {
+        scale: 1 !important;
+        border-color: hsl(var(--text-secondary)) !important;
+      }
+
+      .amount-title {
+        font-size: 16px !important;
+      }
+    }
+
+    &.active {
+      border-color: hsl(var(--border-hover));
+      scale: 1.05;
+
+      .amount-desc,
+      .other {
+        color: hsl(var(--text));
+      }
+
+      .amount-title {
+        font-size: 17px;
+      }
+    }
+
+    .amount-title {
+      display: flex;
+      flex-direction: row;
+      gap: 4px;
+      color: hsl(var(--text));
+      font-size: 16px;
+      align-items: center;
+
+      svg {
+        transform: translateY(1px);
+      }
+    }
+
+    .amount-desc {
+      font-size: 12px;
+      color: hsl(var(--text-secondary));
+      transition: .1s linear;
+
+      &:after {
+        content: '￥';
+        font-size: 10px;
+      }
+    }
+
+    .other {
+      font-size: 14px;
+      color: hsl(var(--text-secondary));
+      transition: .1s linear;
+
+      &:after {
+        content: '...';
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.product-item {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 2px;
+  width: 100%;
+  gap: 4px;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+
+    .column {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+
+  .title {
+    color: hsl(var(--text));
+  }
+
+  .desc {
+    color: hsl(var(--text-secondary));
+  }
+}
+
+.tip {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: hsl(var(--text));
+  text-align: center;
+  align-items: center;
+  margin-top: 24px;
+
+  a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}