From b6d206e095c65cc5d2316297ce1812394b9caa59 Mon Sep 17 00:00:00 2001 From: Hash Brown Date: Thu, 8 Aug 2024 15:29:11 +0800 Subject: [PATCH] feat: app icon enhancements (#7095) --- .../base/chat/chat-with-history/hooks.tsx | 3 +++ .../components/base/emoji-picker/index.tsx | 17 ++++---------- .../share/text-generation/index.tsx | 5 ++++ web/hooks/use-app-favicon.ts | 23 +++++++++++++++++++ web/utils/emoji.ts | 11 +++++++++ 5 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 web/hooks/use-app-favicon.ts create mode 100644 web/utils/emoji.ts diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx index ab8b3648e7..3fa301d268 100644 --- a/web/app/components/base/chat/chat-with-history/hooks.tsx +++ b/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! diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx index f861bcb20c..8840f47950 100644 --- a/web/app/components/base/emoji-picker/index.tsx +++ b/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 = ({ } else { setIsSearching(true) - const emojis = await search(e.target.value) + const emojis = await searchEmoji(e.target.value) setSearchedEmojis(emojis) } }} diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx index c02e0fb9c0..1bc41a5440 100644 --- a/web/app/components/share/text-generation/index.tsx +++ b/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 = ({ 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 = ({ } }, [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 diff --git a/web/hooks/use-app-favicon.ts b/web/hooks/use-app-favicon.ts new file mode 100644 index 0000000000..8904b884ce --- /dev/null +++ b/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,' + + '' + + '' + + (icon ? await searchEmoji(icon) : '🤖') + + '' + + '' + + link.rel = 'shortcut icon' + link.type = 'image/svg' + document.getElementsByTagName('head')[0].appendChild(link) + }, [enable, icon, icon_background]) +} diff --git a/web/utils/emoji.ts b/web/utils/emoji.ts new file mode 100644 index 0000000000..9123f780f2 --- /dev/null +++ b/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 +}