Feat/new UI (#13)

* new custom theme

* improve css: scrollbar, header, tabs and buttons

* update settings tab

* open file index selector by default

* update chat control panel

* update chat panel

* update file index page

* cap gradio<=4.22.0

* rename admin page

* adjust UI

* update flowsettings

* auto start in browser

* change colour for edit LLM page's button

libs/ktem/ktem/assets/css/main.css

@@ -1,55 +1,91 @@
+/* no footer */
 footer {
-    display: none !important;
+  display: none !important;
+}
+
+/* customize scrollbar */
+::-webkit-scrollbar {
+  background: var(--background-fill-primary);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-color-primary);
+  border: 4px solid transparent;
+  border-radius: 100px;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-corner {
+  background: var(--border-color-primary);
 }
 
 .gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
+  max-width: 100% !important;
 }
 
+/* styling for header bar */
 .header-bar {
-    background-color: #f7f7f7;
-    margin: 0px 0px 20px;
-    overflow-x: scroll;
-    display: block !important;
-    text-wrap: nowrap;
+  background-color: transparent;
+  margin: 0px 0px 20px;
+  overflow-x: scroll;
+  display: block !important;
+  text-wrap: nowrap;
+  border: none;
 }
-
-.dark .header-bar {
-    border: none !important;
-    background-color: #8080802b !important;
-}
-
 .header-bar button.selected {
-    border-radius: 0;
+  border: none;
+
+  /* an alternative header bar style with rounded background */
+  /* background-color: var(--background-fill-primary);
+  border: 4px solid transparent;
+  border-radius: var(--radius-lg);
+  background-clip: padding-box; */
 }
 
-.indices-tab {
-    border: none !important;
+/* selected buttons have highlighted text */
+button.selected {
+  color: var(--block-label-text-color);
+  font-weight: bold;
 }
 
-#chat-tab, #settings-tab, #help-tab, #admin-tab, #login-tab {
-    border: none !important;
+#chat-tab,
+#settings-tab,
+#help-tab,
+#resources-tab,
+#login-tab {
+  border: none !important;
+}
+
+#help-tab,
+#settings-tab {
+  /* text-dense view should not be wide for readability */
+  max-width: max(56vw, 900px) !important;
+  margin: 0 auto !important;
+}
+
+.indices-tab,
+#resources-tab {
+  /* Other view should not be too wide */
+  border: none !important;
+  max-width: max(70vw, 1200px) !important;
+  margin: 0 auto !important;
 }
 
 #main-chat-bot {
-    height: calc(100vh - 140px) !important;
+  /* span the chat area to occupy full height minus space for chat input */
+  height: calc(100vh - 180px) !important;
 }
 
 #chat-info-panel {
-    max-height: calc(100vh - 140px) !important;
-    overflow-y: scroll !important;
+  max-height: calc(100vh - 180px) !important;
+  overflow-y: scroll !important;
 }
 
 .setting-answer-mode-description {
-    margin: 5px 5px 2px !important
+  margin: 5px 5px 2px !important;
 }
-
-mark {
+*/ mark {
   background-color: #1496bb;
 }
 
-
 /* clpse */
 .clpse {
   background-color: var(--background-fill-secondary);
@@ -61,3 +97,33 @@ mark {
   text-align: left;
   outline: none;
 }
+
+/* for setting transparent background for elements */
+.no-background {
+  background-color: transparent;
+  border: none;
+}
+
+/* for setting bold text for elements */
+.bold-text {
+  font-weight: bold;
+}
+
+/* for setting highlighted text for elements */
+.body-text-color {
+  color: var(--body-text-color);
+}
+
+/* for setting right-aligned buttons */
+.right-button {
+  min-width: 200px !important;
+  width: fit-content;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin: 0px 0px 0px auto;
+}
+
+/* for setting height limit for buttons */
+.cap-height {
+  max-height: 42px;
+}