From bb4e7da720e8f720c4fa2bcd8026ad04adf34d2d Mon Sep 17 00:00:00 2001 From: KVOJJJin Date: Mon, 3 Mar 2025 16:05:35 +0800 Subject: [PATCH] Fix: web app theme intialization (#14761) --- web/app/(shareLayout)/layout.tsx | 5 +- .../base/audio-gallery/AudioPlayer.tsx | 4 +- .../chat/chat-with-history/chat-wrapper.tsx | 2 +- .../embedded-chatbot/theme/theme-context.ts | 9 ++-- web/app/components/base/markdown.tsx | 4 +- web/context/share-page-context.tsx | 47 ------------------- 6 files changed, 12 insertions(+), 59 deletions(-) delete mode 100644 web/context/share-page-context.tsx diff --git a/web/app/(shareLayout)/layout.tsx b/web/app/(shareLayout)/layout.tsx index 0782603ebc..94ac1deb0b 100644 --- a/web/app/(shareLayout)/layout.tsx +++ b/web/app/(shareLayout)/layout.tsx @@ -1,7 +1,6 @@ import React from 'react' import type { FC } from 'react' import type { Metadata } from 'next' -import { SharePageContextProvider } from '@/context/share-page-context' export const metadata: Metadata = { icons: 'data:,', // prevent browser from using default favicon @@ -12,9 +11,7 @@ const Layout: FC<{ }> = ({ children }) => { return (
- - {children} - + {children}
) } diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx index d6d265c8d2..17ecc0005d 100644 --- a/web/app/components/base/audio-gallery/AudioPlayer.tsx +++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx @@ -5,7 +5,7 @@ import { RiPlayLargeFill, } from '@remixicon/react' import Toast from '@/app/components/base/toast' -import { useAppContext } from '@/context/app-context' +import useTheme from '@/hooks/use-theme' import { Theme } from '@/types/app' import cn from '@/utils/classnames' @@ -24,7 +24,7 @@ const AudioPlayer: React.FC = ({ src }) => { const [hasStartedPlaying, setHasStartedPlaying] = useState(false) const [hoverTime, setHoverTime] = useState(0) const [isAudioAvailable, setIsAudioAvailable] = useState(true) - const { theme } = useAppContext() + const { theme } = useTheme() useEffect(() => { const audio = audioRef.current diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx index a4a76fbbf6..4a3e292f80 100644 --- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx +++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx @@ -206,7 +206,7 @@ const ChatWrapper = () => { isResponding={isResponding} chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-[720px] ${isMobile && 'px-4'}`} chatFooterClassName='pb-4' - chatFooterInnerClassName={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`} + chatFooterInnerClassName={`mx-auto w-full max-w-[720px] ${isMobile ? 'px-2' : 'px-4'}`} onSend={doSend} inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs} inputsForm={inputsForms} diff --git a/web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts b/web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts index 298f07603f..d4d617d4b7 100644 --- a/web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts +++ b/web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts @@ -48,10 +48,13 @@ export class ThemeBuilder { private buildChecker = false public get theme() { - if (this._theme === undefined) - throw new Error('The theme should be built first and then accessed') - else + if (this._theme === undefined) { + this._theme = new Theme() return this._theme + } + else { + return this._theme + } } public buildTheme(chatColorTheme: string | null = null, chatColorThemeInverted = false) { diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx index fae0e3c0fe..dc985bd6df 100644 --- a/web/app/components/base/markdown.tsx +++ b/web/app/components/base/markdown.tsx @@ -26,7 +26,7 @@ import MarkdownButton from '@/app/components/base/markdown-blocks/button' import MarkdownForm from '@/app/components/base/markdown-blocks/form' import ThinkBlock from '@/app/components/base/markdown-blocks/think-block' import { Theme } from '@/types/app' -import { useAppContext } from '@/context/app-context' +import useTheme from '@/hooks/use-theme' import cn from '@/utils/classnames' // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD @@ -107,7 +107,7 @@ export function PreCode(props: { children: any }) { // or use the non-minified dev environment for full errors and additional helpful warnings. const CodeBlock: any = memo(({ inline, className, children, ...props }: any) => { - const { theme } = useAppContext() + const { theme } = useTheme() const [isSVG, setIsSVG] = useState(true) const match = /language-(\w+)/.exec(className || '') const language = match?.[1] diff --git a/web/context/share-page-context.tsx b/web/context/share-page-context.tsx deleted file mode 100644 index a071743abe..0000000000 --- a/web/context/share-page-context.tsx +++ /dev/null @@ -1,47 +0,0 @@ -'use client' -import { useCallback, useEffect, useState } from 'react' -import { createContext, useContextSelector } from 'use-context-selector' -import type { FC, ReactNode } from 'react' -import { Theme } from '@/types/app' - -export type SharePageContextValue = { - theme: Theme - setTheme: (theme: Theme) => void -} - -const SharePageContext = createContext({ - theme: Theme.light, - setTheme: () => { }, -}) - -export function useSelector(selector: (value: SharePageContextValue) => T): T { - return useContextSelector(SharePageContext, selector) -} - -export type SharePageContextProviderProps = { - children: ReactNode -} - -export const SharePageContextProvider: FC = ({ children }) => { - const [theme, setTheme] = useState(Theme.light) - const handleSetTheme = useCallback((theme: Theme) => { - setTheme(theme) - globalThis.document.documentElement.setAttribute('data-theme', theme) - }, []) - - useEffect(() => { - globalThis.document.documentElement.setAttribute('data-theme', theme) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - return ( - - {children} - - ) -} - -export default SharePageContextProvider