Sync custom icons from server

src/util/APIUtil.ts

@@ -7,6 +7,7 @@ class APIUtil {
   private accessKey: string | undefined;
   private webappUrl: string | undefined;
   private currentMessageId: string | undefined;
+  private devchatAvatarUrl: string | undefined;
 
 
   constructor() {
@@ -19,6 +20,20 @@ class APIUtil {
     }
     return APIUtil.instance;
   }
+
+  config(baseUrl: string, accessKey: string) {
+    this.baseUrl = baseUrl;
+    this.accessKey = accessKey;
+    this.fetchWebappUrl().then(url => {
+      this.webappUrl = url;
+      this.fetchDevchatAvatarUrl().then(url => {
+        this.devchatAvatarUrl = url;
+      })
+    }).catch(err => {
+      console.error(err);
+    })
+  }
+
   async fetchWebappUrl() {
     try {
       const res = await axios.get(
@@ -48,16 +63,6 @@ class APIUtil {
     }
   }
 
-  config(baseUrl: string, accessKey: string) {
-    this.baseUrl = baseUrl;
-    this.accessKey = accessKey;
-    this.fetchWebappUrl().then(url => {
-      this.webappUrl = url;
-    }).catch(err => {
-      console.error(err);
-    })
-  }
-
   async createMessage(message: object) {
     this.currentMessageId = `msg-${uuidv4()}`;
     try {
@@ -106,6 +111,25 @@ class APIUtil {
       return null;
     }
   }
+
+  async fetchDevchatAvatarUrl() {
+    try {
+      if (!this.webappUrl) this.webappUrl = await this.fetchWebappUrl();
+      const res = await axios.get(
+        `${this.webappUrl}/api/v1/plugin/icons/filename/gui`,
+        {headers: { Authorization: `Bearer ${this.accessKey}` }}
+      )
+      return `${this.webappUrl}/api/v1/plugin/icons/${res?.data?.filename}`
+    } catch(err) {
+      console.error(err);
+      return "unknown";
+    }
+  }
+  async getDevchatAvatarUrl() {
+    if (!this.devchatAvatarUrl) this.devchatAvatarUrl = await this.fetchDevchatAvatarUrl();
+    return this.devchatAvatarUrl;
+  }
+
 }
 
 

src/views/components/Header/index.tsx

@@ -15,6 +15,7 @@ import SvgAvatarDevChat from "../MessageAvatar/avatar_devchat.svg";
 import messageUtil from "@/util/MessageUtil";
 import { useRouter } from "@/views/router";
 import { useMst } from "@/views/stores/RootStore";
+import APIUtil from "@/util/APIUtil";
 
 const useStyles = createStyles((theme) => ({
   logoName: {
@@ -27,6 +28,7 @@ export default function Head() {
   const { classes } = useStyles();
   const { i18n } = useTranslation();
   const { config } = useMst();
+  const [devchatAvatarSrc, setDevchatAvatarSrc] = React.useState("unknown")
 
   useEffect(() => {
     const lang = config.getLanguage();
@@ -35,6 +37,7 @@ export default function Head() {
     } else {
       i18n.changeLanguage("zh");
     }
+    APIUtil.getDevchatAvatarUrl().then(url => setDevchatAvatarSrc(url))
   }, []);
 
   const openSetting = () => {
@@ -72,7 +75,7 @@ export default function Head() {
             height: 40,
           }}
         >
-          <Avatar color="indigo" size={25} radius="xl" src={SvgAvatarDevChat} />
+          <Avatar color="indigo" size={25} radius="xl" src={devchatAvatarSrc} onError={()=>setDevchatAvatarSrc(SvgAvatarDevChat)} />
           <Text weight="bold" className={classes.logoName}>
             DevChat
           </Text>

src/views/components/MessageAvatar/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Text,
   Flex,
@@ -23,6 +23,7 @@ import { useTranslation } from "react-i18next";
 import { useMst } from "@/views/stores/RootStore";
 import { IMessage } from "@/views/stores/ChatStore";
 import { IChatContext } from "@/views/stores/InputStore";
+import APIUtil from "@/util/APIUtil";
 
 interface IProps {
   item?: IMessage;
@@ -46,6 +47,11 @@ const MessageAvatar = observer((props: IProps) => {
   const { input, chat } = useMst();
   const [done, setDone] = React.useState(false);
   const { t } = useTranslation();
+  const [devchatAvatarSrc, setDevchatAvatarSrc] = React.useState("")
+
+  useEffect(() => {
+    APIUtil.getDevchatAvatarUrl().then(url => setDevchatAvatarSrc(url))
+  }, [])
   return (
     <Flex
       m="10px 0 10px 0"
@@ -56,7 +62,7 @@ const MessageAvatar = observer((props: IProps) => {
       wrap="wrap"
     >
       {avatarType === "bot" ? (
-        <Avatar color="indigo" size={25} radius="xl" src={SvgAvatarDevChat} />
+        <Avatar color="indigo" size={25} radius="xl" src={devchatAvatarSrc} onError={()=>setDevchatAvatarSrc(SvgAvatarDevChat)} />
       ) : (
         <Avatar color="cyan" size={25} radius="xl" src={SvgAvatarUser} />
       )}