Merge pull request #300 from devchat-ai/feat/header

feat: add header
2023-09-08 04:15:57 -05:00 · 2023-09-08 04:15:57 -05:00 · 80f0ccf02d
commit 80f0ccf02d
parent 34da535e00 60468af2b2
4 changed files with 89 additions and 42 deletions
--- a/src/views/App.tsx
+++ b/src/views/App.tsx
@ -4,14 +4,16 @@ import {
    useMantineTheme,
 } from '@mantine/core';
 import ChatPanel from '@/views/pages/ChatPanel';
+import Head from '@/views/components/Header';

 export default function App() {
    const theme = useMantineTheme();
    return (
        <AppShell
+            header={<Head />}
            styles={{
                main: {
-                    padding: 0,
+                    padding:'40px 0 0 0',
                    fontFamily: 'var(--vscode-editor-font-familyy)',
                    fontSize: 'var(--vscode-editor-font-size)',
                },
--- a/src/views/components/BalanceTip/index.tsx
+++ b/src/views/components/BalanceTip/index.tsx
@ -2,7 +2,13 @@ import React, { useEffect, useState } from "react";
 import axios from "axios";
 import messageUtil from "@/util/MessageUtil";
 import { IconWallet } from "@tabler/icons-react";
-import { HoverCard, Text, ActionIcon, Group } from "@mantine/core";
+import {
+  HoverCard,
+  Text,
+  ActionIcon,
+  Group,
+  LoadingOverlay,
+} from "@mantine/core";

 const currencyMap = {
  USD: "$",
@ -94,44 +100,35 @@ export default function WechatTip() {
  }

  return (
-    <div
-      style={{
-        position: "absolute",
-        zIndex: 2,
-        right: 5,
-        top: 5,
-      }}
+    <HoverCard
+      shadow="lg"
+      position="left"
+      width="200"
+      withArrow={true}
+      zIndex={999}
    >
-      <HoverCard position="left" width="200" withArrow={true}>
-        <HoverCard.Target>
-          <div onMouseEnter={getBalance}>
-            <ActionIcon
-              loading={loading}
-              color="blue"
-              radius="xl"
-              variant="filled"
-              sx={{
-                opacity: 0.5,
-                transition: "opacity 300ms ease",
-                "&:hover": {
-                  opacity: 1,
-                },
-              }}
-            >
-              <IconWallet size="16" />
-            </ActionIcon>
-          </div>
-        </HoverCard.Target>
-        <HoverCard.Dropdown>
-          <Group style={{ width: "90%" }}>
-            <Text size="sm">
-              Your remaining credit is {formatCurrency(balance, currency)}. Sign
-              in to <a href={envMap[env].link}>devchat.ai </a>to{" "}
-              {bindWechat ? "purchase more tokens." : "earn additional ¥8"}
-            </Text>
-          </Group>
-        </HoverCard.Dropdown>
-      </HoverCard>
-    </div>
+      <HoverCard.Target>
+        <div onMouseEnter={getBalance}>
+          <ActionIcon size='sm'>
+            <IconWallet size="1.125rem" />
+          </ActionIcon>
+        </div>
+      </HoverCard.Target>
+      <HoverCard.Dropdown
+        sx={{
+          background: "var(--vscode-dropdown-background)",
+          borderColor: "var(--vscode-dropdown-border)",
+        }}
+      >
+        <Group style={{ width: "90%" }}>
+          <Text size="sm">
+            Your remaining credit is {formatCurrency(balance, currency)}. Sign
+            in to <a href={envMap[env].link}>devchat.ai </a>to{" "}
+            {bindWechat ? "purchase more tokens." : "earn additional ¥8"}
+          </Text>
+          <LoadingOverlay visible={loading} />
+        </Group>
+      </HoverCard.Dropdown>
+    </HoverCard>
  );
 }
--- a/src/views/components/Header/index.tsx
+++ b/src/views/components/Header/index.tsx
@ -0,0 +1,50 @@
+import React from "react";
+import { Header, Avatar, Flex, Text, ActionIcon } from "@mantine/core";
+import BalanceTip from "@/views/components/BalanceTip";
+import { IconSettings } from "@tabler/icons-react";
+// @ts-ignore
+import SvgAvatarDevChat from "../MessageAvatar/avatar_devchat.svg";
+import messageUtil from "@/util/MessageUtil";
+
+export default function Head() {
+  const openSetting = () => {
+    messageUtil.sendMessage({
+      command: "doCommand",
+      content: ["workbench.action.openSettings", "DevChat"],
+    });
+  };
+  return (
+    <Header
+      height={40}
+      style={{
+        backgroundColor: "var(--vscode-sideBar-background)",
+        // borderBottom: "1px solid var(--vscode-disabledForeground)",
+        boxShadow: "0 0px 3px var(--vscode-widget-shadow)",
+      }}
+    >
+      <Flex justify="space-between" align="center" sx={{ padding: "0 10px" }}>
+        <Flex
+          gap="sm"
+          justify="flex-start"
+          align="center"
+          style={{
+            height: 40,
+          }}
+        >
+          <Avatar color="indigo" size={25} radius="xl" src={SvgAvatarDevChat} />
+          <Text weight="bold">DevChat</Text>
+        </Flex>
+        <Flex align="center" gap="xs" sx={{paddingRight:10}}>
+          <div>
+            <BalanceTip />
+          </div>
+          <div>
+            <ActionIcon size='sm' onClick={openSetting}>
+              <IconSettings size="1.125rem" />
+            </ActionIcon>
+          </div>
+        </Flex>
+      </Flex>
+    </Header>
+  );
+}
--- a/src/views/pages/ChatPanel.tsx
+++ b/src/views/pages/ChatPanel.tsx
@ -27,7 +27,6 @@ import { Message } from "@/views/stores/ChatStore";

 import InputMessage from "@/views/components/InputMessage";
 import MessageList from "@/views/components/MessageList";
-import WechatTip from "@/views/components/BalanceTip";
 import {
  IconCircleArrowDownFilled,
  IconExternalLink,
@ -166,7 +165,6 @@ const chatPanel = observer(() => {
        color: "var(--vscode-editor-foreground)",
      }}
    >
-      <WechatTip />
      {!chat.isBottom && (
        <ActionIcon
          onClick={() => {