diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx index 977e3f057c..39fc81a274 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx @@ -1,12 +1,14 @@ 'use client' import type { FC } from 'react' import React, { useCallback, useEffect, useRef, useState } from 'react' +import { + RiEqualizer2Line, +} from '@remixicon/react' import { useTranslation } from 'react-i18next' import type { PopupProps } from './config-popup' import ConfigPopup from './config-popup' import cn from '@/utils/classnames' import Button from '@/app/components/base/button' -import { Settings04 } from '@/app/components/base/icons/src/vender/line/general' import { PortalToFollowElem, PortalToFollowElemContent, @@ -52,15 +54,15 @@ const ConfigBtn: FC = ({ const triggerContent = hasConfigured ? ( -
- +
+
) : ( ) diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx index bc724c1449..790705e9fb 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx @@ -1,6 +1,10 @@ 'use client' import type { FC } from 'react' import React, { useCallback, useEffect, useState } from 'react' +import { + RiArrowDownDoubleLine, + RiEqualizer2Line, +} from '@remixicon/react' import { useTranslation } from 'react-i18next' import { usePathname } from 'next/navigation' import { useBoolean } from 'ahooks' @@ -8,7 +12,6 @@ import type { LangFuseConfig, LangSmithConfig } from './type' import { TracingProvider } from './type' import TracingIcon from './tracing-icon' import ConfigButton from './config-button' -import cn from '@/utils/classnames' import { LangfuseIcon, LangsmithIcon } from '@/app/components/base/icons/src/public/tracing' import Indicator from '@/app/components/header/indicator' import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps' @@ -16,6 +19,8 @@ import type { TracingStatus } from '@/models/app' import Toast from '@/app/components/base/toast' import { useAppContext } from '@/context/app-context' import Loading from '@/app/components/base/loading' +import Divider from '@/app/components/base/divider' +import cn from '@/utils/classnames' const I18N_PREFIX = 'app.tracing' @@ -27,7 +32,7 @@ const Title = ({ const { t } = useTranslation() return ( -
+
{t('common.appMenus.overview')}
) @@ -135,43 +140,55 @@ const Panel: FC = () => { return (
- <div className='flex items-center p-2 rounded-xl border-[0.5px] border-gray-200 shadow-xs cursor-pointer hover:bg-gray-100' onClick={showPopup}> - {!inUseTracingProvider - ? <> - <TracingIcon size='md' className='mr-2' /> - <div className='leading-5 text-sm font-semibold text-gray-700'>{t(`${I18N_PREFIX}.title`)}</div> - </> - : <InUseProviderIcon className='ml-1 h-4' />} - - {hasConfiguredTracing && ( - <div className='ml-4 mr-1 flex items-center'> - <Indicator color={enabled ? 'green' : 'gray'} /> - <div className='ml-1.5 text-xs font-semibold text-gray-500 uppercase'> - {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)} + <div + className={cn( + 'flex items-center p-2 rounded-xl bg-background-default-dodge border-t border-l-[0.5px] border-effects-highlight shadow-xs cursor-pointer hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off', + controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off', + )} + onClick={showPopup} + > + {!inUseTracingProvider && ( + <> + <TracingIcon size='md' /> + <div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div> + <div className='p-1 rounded-md'> + <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' /> </div> - </div> + <Divider type='vertical' className='h-3.5' /> + <div className='p-1 rounded-md'> + <RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' /> + </div> + </> )} - {hasConfiguredTracing && ( - <div className='ml-2 w-px h-3.5 bg-gray-200'></div> + <> + <div className='ml-4 mr-1 flex items-center'> + <Indicator color={enabled ? 'green' : 'gray'} /> + <div className='ml-1.5 system-xs-semibold-uppercase text-text-tertiary'> + {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)} + </div> + </div> + <InUseProviderIcon className='ml-1 h-4' /> + <Divider type='vertical' className='h-3.5' /> + <div className='flex items-center' onClick={e => e.stopPropagation()}> + <ConfigButton + appId={appId} + readOnly={readOnly} + hasConfigured + className='ml-2' + enabled={enabled} + onStatusChange={handleTracingEnabledChange} + chosenProvider={inUseTracingProvider} + onChooseProvider={handleChooseProvider} + langSmithConfig={langSmithConfig} + langFuseConfig={langFuseConfig} + onConfigUpdated={handleTracingConfigUpdated} + onConfigRemoved={handleTracingConfigRemoved} + controlShowPopup={controlShowPopup} + /> + </div> + </> )} - <div className='flex items-center' onClick={e => e.stopPropagation()}> - <ConfigButton - appId={appId} - readOnly={readOnly} - hasConfigured - className='ml-2' - enabled={enabled} - onStatusChange={handleTracingEnabledChange} - chosenProvider={inUseTracingProvider} - onChooseProvider={handleChooseProvider} - langSmithConfig={langSmithConfig} - langFuseConfig={langFuseConfig} - onConfigUpdated={handleTracingConfigUpdated} - onConfigRemoved={handleTracingConfigRemoved} - controlShowPopup={controlShowPopup} - /> - </div> </div> </div> ) diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx deleted file mode 100644 index 934eb681b9..0000000000 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx +++ /dev/null @@ -1,45 +0,0 @@ -'use client' -import { ChevronDoubleDownIcon } from '@heroicons/react/20/solid' -import type { FC } from 'react' -import { useTranslation } from 'react-i18next' -import React, { useCallback } from 'react' -import Tooltip from '@/app/components/base/tooltip' - -const I18N_PREFIX = 'app.tracing' - -type Props = { - isFold: boolean - onFoldChange: (isFold: boolean) => void -} - -const ToggleFoldBtn: FC<Props> = ({ - isFold, - onFoldChange, -}) => { - const { t } = useTranslation() - - const handleFoldChange = useCallback((e: React.MouseEvent<HTMLDivElement>) => { - e.stopPropagation() - onFoldChange(!isFold) - }, [isFold, onFoldChange]) - return ( - // text-[0px] to hide spacing between tooltip elements - <div className='shrink-0 cursor-pointer text-[0px]' onClick={handleFoldChange}> - <Tooltip - popupContent={t(`${I18N_PREFIX}.${isFold ? 'expand' : 'collapse'}`)} - > - {isFold && ( - <div className='p-1 rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5'> - <ChevronDoubleDownIcon className='w-4 h-4' /> - </div> - )} - {!isFold && ( - <div className='p-2 rounded-lg text-gray-500 border-[0.5px] border-gray-200 hover:text-gray-800 hover:bg-black/5'> - <ChevronDoubleDownIcon className='w-4 h-4 transform rotate-180' /> - </div> - )} - </Tooltip> - </div> - ) -} -export default React.memo(ToggleFoldBtn) diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx index 7addfb83d4..25a313a76b 100644 --- a/web/context/app-context.tsx +++ b/web/context/app-context.tsx @@ -127,7 +127,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) => setCurrentWorkspace(currentWorkspaceResponse) }, [currentWorkspaceResponse]) - const [theme, setTheme] = useState<Theme>(Theme.light) + const [theme, setTheme] = useState<Theme>(Theme.dark) const handleSetTheme = useCallback((theme: Theme) => { setTheme(theme) globalThis.document.documentElement.setAttribute('data-theme', theme)