feat: enhance UI

recally-io · Aug 21, 2024 · b1de2ca · b1de2ca
1 parent ee7f347
commit b1de2ca
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 43 deletions.
diff --git a/web/src/components/assistants.jsx b/web/src/components/assistants.jsx
@@ -9,6 +9,7 @@ import {
   LoadingOverlay,
   Modal,
   NativeSelect,
+  NavLink,
   Stack,
   Text,
   Textarea,
@@ -190,9 +191,11 @@ export default function Assistants() {
                   <Group mt="xs" mb="1" justify="flex-end">
                     <Tooltip label="Chat">
                       <Button variant="outline" size="xs" w={60}>
-                        <a href={`/threads.html?assistant-id=${assistant.id}`}>
-                          <Icon icon="tabler:message-2" />
-                        </a>
+                        <NavLink
+                          px="0"
+                          href={`/threads.html?assistant-id=${assistant.id}`}
+                          label={<Icon icon="tabler:message-2" />}
+                        ></NavLink>
                       </Button>
                     </Tooltip>
                     <Tooltip label="Edit">

diff --git a/web/src/components/header.jsx b/web/src/components/header.jsx
@@ -55,57 +55,126 @@ export default function Header({ opened, toggle, showNavBurger }) {
     }
   }, [checkLogin.isFetching]);
 
+  const navHome = () => {
+    return (
+      <Button variant="transparent" px="0">
+        <NavLink
+          size="sm"
+          href="/"
+          label="Home"
+          leftSection={<Icon icon="tabler:home" />}
+        ></NavLink>
+      </Button>
+    );
+  };
+
+  const navAssistants = () => {
+    return (
+      <Button variant="transparent" px="0">
+        <NavLink
+          size="sm"
+          href="/assistants.html"
+          label="Assistants"
+          leftSection={<Icon icon="tabler:augmented-reality" />}
+        ></NavLink>
+      </Button>
+    );
+  };
+
+  const loginButton = () => {
+    if (isLogin) {
+      return (
+        <Button
+          leftSection={<Icon icon="tabler:logout" />}
+          variant="transparent"
+          onClick={() => {
+            Cookie.remove("token");
+            window.location.href = "/";
+          }}
+        >
+          Logout
+        </Button>
+      );
+    }
+    return (
+      <Button
+        leftSection={<Icon icon="tabler:login" />}
+        variant="transparent"
+        onClick={() => {
+          window.location.href = authPage;
+        }}
+      >
+        Login
+      </Button>
+    );
+  };
+
+  const themeToggleButton = () => {
+    return (
+      <Button
+        variant="transparent"
+        size="sm"
+        onClick={() => {
+          setColorScheme(colorScheme === "dark" ? "light" : "dark");
+        }}
+        leftSection={
+          colorScheme === "dark" ? (
+            <Icon icon="tabler:sun" color="white" />
+          ) : (
+            <Icon icon="tabler:moon-filled" color="black" />
+          )
+        }
+      >
+        {colorScheme === "dark" ? "Light" : "Dark"}
+      </Button>
+    );
+  };
+
   return (
     <>
-      <Flex direction="row" justify="space-between" align="center" px="md">
+      <Flex
+        direction="row"
+        justify="space-between"
+        align="center"
+        gap="lg"
+        bg={colorScheme === "dark" ? "gray.8" : "gray.3"}
+      >
         {showNavBurger && (
           <Burger
             opened={opened}
             onClick={toggle}
             size="sm"
+            pl="lg"
             aria-label="Toggle navigation"
           />
         )}
-        <NavLink href="/" label="Vibrain"></NavLink>
-        <NavLink href="/assistants.html" label="Assistants"></NavLink>
-        <Flex direction="row" justify="flex-end" align="center">
-          <Button
-            variant="transparent"
-            size="sm"
-            onClick={() => {
-              setColorScheme(colorScheme === "dark" ? "light" : "dark");
-            }}
-          >
-            {colorScheme === "dark" ? (
-              <Icon icon="tabler:sun" color="white" />
-            ) : (
-              <Icon icon="tabler:moon-filled" color="black" />
-            )}
-          </Button>
-          <Menu shadow="xl" trigger="hover" transition="slide-up" withArrow>
-            <Menu.Target>
-              <Button variant="transparent" size="sm">
-                <Avatar size="sm" radius="lg" src={avatarImgUrl} />
-              </Button>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Label>Vibrain</Menu.Label>
-              {isLogin && (
-                <Menu.Item
-                  color="red"
-                  leftSection={<Icon icon="tabler:logout" />}
-                  onClick={() => {
-                    // setIsLogin(false);
-                    Cookie.remove("token");
-                    window.location.href = "/";
-                  }}
-                >
-                  Logout
-                </Menu.Item>
-              )}
-            </Menu.Dropdown>
-          </Menu>
+        {!showNavBurger && <div></div>}
+        <Flex visibleFrom="md" gap="1">
+          {navHome()}
+          {navAssistants()}
+          {themeToggleButton()}
+          {loginButton()}
         </Flex>
+        <Menu
+          shadow="xl"
+          trigger="hover"
+          transition="slide-up"
+          withArrow
+          hiddenFrom="md"
+        >
+          <Menu.Target>
+            <Button variant="transparent" size="sm">
+              <Avatar size="sm" radius="lg" src={avatarImgUrl} />
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Label>Vibrain</Menu.Label>
+            <Menu.Item>{navHome()}</Menu.Item>
+            <Menu.Item>{navAssistants()}</Menu.Item>
+            <Menu.Item>{themeToggleButton()}</Menu.Item>
+            <Menu.Item>{loginButton()}</Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
       </Flex>
     </>
   );

diff --git a/web/src/components/thread.jsx b/web/src/components/thread.jsx
@@ -9,6 +9,7 @@ import {
   Group,
   Menu,
   Modal,
+  NativeSelect,
   Paper,
   ScrollArea,
   Slider,
@@ -61,6 +62,33 @@ export default function ChatWindowsComponent() {
     enabled: isLogin && !!threadId && !!assistantId,
   });
 
+  const getThread = useQuery({
+    queryKey: ["get-thread", threadId],
+    queryFn: async () => {
+      const res = await get(
+        `/api/v1/assistants/${assistantId}/threads/${threadId}`,
+      );
+      return res.data || {};
+    },
+    enabled: isLogin && !!threadId && !!assistantId,
+    onSuccess: (data) => {
+      settingsForm.setValues(data);
+    },
+  });
+  // set page title
+  useEffect(() => {
+    document.title = `Chat with ${getThread.data?.name || "Assistant"}`;
+  }, [getThread.data]);
+
+  const listModels = useQuery({
+    queryKey: ["list-assistants-models"],
+    queryFn: async () => {
+      const res = await get("/api/v1/assistants/models");
+      return res.data || [];
+    },
+    enabled: isLogin,
+  });
+
   useEffect(() => {
     if (listMessages.data) {
       setMessageList(listMessages.data);
@@ -292,6 +320,15 @@ export default function ChatWindowsComponent() {
                   labelAlwaysOn
                 />
               </Stack>
+              <NativeSelect
+                label="Model"
+                key={settingsForm.key("model")}
+                {...settingsForm.getInputProps("model")}
+                onChange={(e) => {
+                  settingsForm.setFieldValue("model", e.target.value);
+                }}
+                data={listModels.data}
+              />
             </Stack>
             <Group justify="flex-end" mt="md">
               <Button type="submit">Submit</Button>