feat: app icon enhancements (#7095)

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -37,11 +37,14 @@ import type {
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { useToastContext } from '@/app/components/base/toast'
 import { changeLanguage } from '@/i18n/i18next-config'
+import { useAppFavicon } from '@/hooks/use-app-favicon'
 
 export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
  const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
  const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR(installedAppInfo ? null : 'appInfo', fetchAppInfo)
 
+ useAppFavicon(!installedAppInfo, appInfo?.site.icon, appInfo?.site.icon_background)
+
  const appData = useMemo(() => {
  if (isInstalledApp) {
  const { id, app } = installedAppInfo!

web/app/components/base/emoji-picker/index.tsx

@@ -3,8 +3,8 @@
 import type { ChangeEvent, FC } from 'react'
 import React, { useState } from 'react'
 import data from '@emoji-mart/data'
-import type { Emoji, EmojiMartData } from '@emoji-mart/data'
-import { SearchIndex, init } from 'emoji-mart'
+import type { EmojiMartData } from '@emoji-mart/data'
+import { init } from 'emoji-mart'
 import {
  MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
@@ -13,8 +13,8 @@ import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
-
 import Modal from '@/app/components/base/modal'
+import { searchEmoji } from '@/utils/emoji'
 
 declare global {
  namespace JSX {
@@ -30,15 +30,6 @@ declare global {
 
 init({ data })
 
-async function search(value: string) {
- const emojis: Emoji[] = await SearchIndex.search(value) || []
-
- const results = emojis.map((emoji) => {
- return emoji.skins[0].native
- })
- return results
-}
-
 const backgroundColors = [
  '#FFEAD5',
  '#E4FBCC',
@@ -105,7 +96,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
  }
  else {
  setIsSearching(true)
- const emojis = await search(e.target.value)
+ const emojis = await searchEmoji(e.target.value)
  setSearchedEmojis(emojis)
  }
  }}

web/app/components/share/text-generation/index.tsx

@@ -36,6 +36,7 @@ import { DEFAULT_VALUE_MAX_LEN, appDefaultIconBackground } from '@/config'
 import Toast from '@/app/components/base/toast'
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
+import { useAppFavicon } from '@/hooks/use-app-favicon'
 
 const GROUP_SIZE = 5 // to avoid RPM(Request per minute) limit. The group task finished then the next group.
 enum TaskStatus {
@@ -363,6 +364,8 @@ const TextGeneration: FC<IMainProps> = ({
  title: installedAppInfo?.app.name,
  prompt_public: false,
  copyright: '',
+ icon: installedAppInfo?.app.icon,
+ icon_background: installedAppInfo?.app.icon_background,
  },
  plan: 'basic',
  }
@@ -408,6 +411,8 @@ const TextGeneration: FC<IMainProps> = ({
  }
  }, [siteInfo?.title, canReplaceLogo])
 
+ useAppFavicon(!isInstalledApp, siteInfo?.icon, siteInfo?.icon_background)
+
  const [isShowResSidebar, { setTrue: doShowResSidebar, setFalse: hideResSidebar }] = useBoolean(false)
  const showResSidebar = () => {
  // fix: useClickAway hideResSidebar will close sidebar

web/hooks/use-app-favicon.ts

@@ -0,0 +1,23 @@
+import { useAsyncEffect } from 'ahooks'
+import { appDefaultIconBackground } from '@/config'
+import { searchEmoji } from '@/utils/emoji'
+
+export function useAppFavicon(enable: boolean, icon?: string, icon_background?: string) {
+ useAsyncEffect(async () => {
+ if (!enable)
+ return
+ const link: HTMLLinkElement = document.querySelector('link[rel*="icon"]') || document.createElement('link')
+
+ // eslint-disable-next-line prefer-template
+ link.href = 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>'
+ + '<rect width=%22100%25%22 height=%22100%25%22 fill=%22' + encodeURIComponent(icon_background || appDefaultIconBackground) + '%22 rx=%2230%22 ry=%2230%22 />'
+ + '<text x=%2212.5%22 y=%221em%22 font-size=%2275%22>'
+ + (icon ? await searchEmoji(icon) : '🤖')
+ + '</text>'
+ + '</svg>'
+
+ link.rel = 'shortcut icon'
+ link.type = 'image/svg'
+ document.getElementsByTagName('head')[0].appendChild(link)
+ }, [enable, icon, icon_background])
+}

web/utils/emoji.ts

@@ -0,0 +1,11 @@
+import { SearchIndex } from 'emoji-mart'
+import type { Emoji } from '@emoji-mart/data'
+
+export async function searchEmoji(value: string) {
+ const emojis: Emoji[] = await SearchIndex.search(value) || []
+
+ const results = emojis.map((emoji) => {
+ return emoji.skins[0].native
+ })
+ return results
+}