Update scrollbar

AI-QL · Sep 5, 2024 · 99cf239 · 99cf239
1 parent d786833
commit 99cf239
Showing 1 changed file with 25 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -37,20 +37,21 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="AIQL provides a suite of tools designed to streamline the development and deployment of AI applications in a cloud-native environment.">
+    <meta name="description"
+        content="AIQL provides a suite of tools designed to streamline the development and deployment of AI applications in a cloud-native environment.">
     <title>Chatbot</title>
 
+    <!-- MDI -->
+    <!-- https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css -->
+    <link href="https://cdn.aiql.com/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet" rel="preload">
+
     <!-- Keep the order, vue should be the first -->
     <script src="https://cdn.aiql.com/npm/vue/dist/vue.global.prod.min.js"></script>
 
     <!-- Vuetify -->
     <script src="https://cdn.aiql.com/npm/vuetify/dist/vuetify.js"></script>
     <link href="https://cdn.aiql.com/npm/vuetify/dist/vuetify.css" rel="stylesheet">
 
-    <!-- MDI -->
-    <!-- https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css -->
-    <link href="https://cdn.aiql.com/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
-
     <!-- Pinia -->
     <script src="https://cdn.aiql.com/npm/vue-demi/lib/index.iife.min.js"></script>
     <script src="https://cdn.aiql.com/npm/pinia/dist/pinia.iife.prod.js"></script>
@@ -74,12 +75,6 @@
             display: none;
         }
 
-        html,
-        .v-card,
-        .v-field__input {
-            scrollbar-width: thin;
-        }
-
         .chat-bot {
             height: 100%;
             display: flex;
@@ -227,6 +222,23 @@
                 transform: rotate(360deg);
             }
         }
+
+        ::-webkit-scrollbar {
+            block-size: 5px;
+            inline-size: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color: lightgrey;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: grey;
+        }
     </style>
 </head>
 
@@ -463,7 +475,7 @@
                                         </v-checkbox>
                                     </v-row>
                                     <v-row class="px-3 mt-0 mb-0">
-                                        <v-combobox class="px-2" density='compact' label="MaxTokenPrefix"
+                                        <v-combobox class="px-2" density='compact' label="MaxTokenPrefix" :items="defaultChoiceStore.max_tokens_type"
                                             v-model="chatbotStore.max_tokens_type" variant="outlined">
                                         </v-combobox>
                                         <v-combobox class="px-2" density='compact' label="MaxTokenValue"
@@ -998,6 +1010,7 @@ <h5 class="font-weight-bold">{{ column.key }}</h5>
                             'meta-llama/Meta-Llama-3-70B-Instruct',
                             'Qwen/Qwen2-72B-Instruct'],
                         authPrefix: ["Bearer", "Base", "Token"],
+                        max_tokens_type: ["max_tokens", "max_new_tokens"],
                     }),
                     persist: {
                         enabled: true,