update plus badge

coaidev · Oct 25, 2023 · 9b23dff · 9b23dff
1 parent ba3d930
commit 9b23dff
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/app/src/assets/ui.less b/app/src/assets/ui.less
@@ -39,11 +39,13 @@
       color: hsl(var(--background));
 
       .badge {
-        background: hsl(var(--background)) !important;
-        color: hsl(var(--text));
-
-        &:hover {
+        &.badge-default {
           background: hsl(var(--background)) !important;
+          color: hsl(var(--text));
+
+          &:hover {
+            background: hsl(var(--background)) !important;
+          }
         }
       }
     }
@@ -53,10 +55,18 @@
       transition: .2s;
       padding-left: 0.45rem;
       padding-right: 0.45rem;
-      background: hsl(var(--primary)) !important;
 
-      &:hover {
+      &.badge-default {
         background: hsl(var(--primary)) !important;
+
+        &:hover {
+          background: hsl(var(--primary)) !important;
+        }
+      }
+
+      &.badge-gold {
+        color: rgb(146, 114, 1) !important;
+        background: rgb(250, 230, 158) !important;
       }
     }
   }

diff --git a/app/src/components/SelectGroup.tsx b/app/src/components/SelectGroup.tsx
@@ -9,10 +9,15 @@ import { mobile } from "../utils.ts";
 import { useEffect, useState } from "react";
 import { Badge } from "./ui/badge.tsx";
 
+export type SelectItemBadgeProps = {
+  variant: "default" | "gold";
+  name: string;
+}
+
 export type SelectItemProps = {
   name: string;
   value: string;
-  badge?: string;
+  badge?: SelectItemBadgeProps;
   tag?: any;
 };
 
@@ -27,7 +32,12 @@ function GroupSelectItem(props: SelectItemProps) {
   return (
     <>
       {props.value}
-      {props.badge && <Badge className="badge ml-1">{props.badge}</Badge>}
+      {
+        props.badge &&
+        <Badge className={`badge ml-1 badge-${props.badge.variant}`}>
+          {props.badge.name}
+        </Badge>
+      }
     </>
   );
 }

diff --git a/app/src/components/home/ModelSelector.tsx b/app/src/components/home/ModelSelector.tsx
@@ -8,6 +8,7 @@ import { useToast } from "../ui/use-toast.ts";
 import { useEffect } from "react";
 import { Model } from "../../conversation/types.ts";
 import { modelEvent } from "../../events/model.ts";
+import {isSubscribedSelector} from "../../store/subscription.ts";
 
 function GetModel(name: string): Model {
   return supportModels.find((model) => model.id === name) as Model;
@@ -20,6 +21,7 @@ function ModelSelector() {
 
   const model = useSelector(selectModel);
   const auth = useSelector(selectAuthenticated);
+  const subscription = useSelector(isSubscribedSelector);
 
   useEffect(() => {
     if (auth && model === "GPT-3.5") dispatch(setModel("GPT-3.5-16k"));
@@ -37,7 +39,10 @@ function ModelSelector() {
     (model: Model): SelectItemProps => ({
       name: model.id,
       value: model.name,
-      badge: model.free ? "free" : undefined,
+      badge: (model.free || (subscription && model.id === "gpt-4")) ? {
+        variant: model.free ? "default" : "gold",
+        name: model.free ? "free" : "plus",
+      } : undefined,
     }),
   );
 

diff --git a/app/src/conf.ts b/app/src/conf.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { Model } from "./conversation/types.ts";
 
-export const version = "3.5.7";
+export const version = "3.5.8";
 export const dev: boolean = window.location.hostname === "localhost";
 export const deploy: boolean = true;
 export let rest_api: string = "http://localhost:8094";