fix tracing dropdown

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx

@@ -4,19 +4,15 @@ 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 {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 
-const I18N_PREFIX = 'app.tracing'
-
 type Props = {
   readOnly: boolean
   className?: string
@@ -30,7 +26,6 @@ const ConfigBtn: FC<Props> = ({
   controlShowPopup,
   ...popupProps
 }) => {
-  const { t } = useTranslation()
   const [open, doSetOpen] = useState(false)
   const openRef = useRef(open)
   const setOpen = useCallback((v: boolean) => {
@@ -52,21 +47,6 @@ const ConfigBtn: FC<Props> = ({
   if (popupProps.readOnly && !hasConfigured)
     return null
 
-  const triggerContent = hasConfigured
-    ? (
-      <div className={cn(className, 'p-1 rounded-md')}>
-        <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
-      </div>
-    )
-    : (
-      <Button variant='primary'
-        className={cn(className, '!h-8 !px-3 select-none')}
-      >
-        <RiEqualizer2Line className='mr-1 w-4 h-4' />
-        <span className='text-[13px]'>{t(`${I18N_PREFIX}.config`)}</span>
-      </Button>
-    )
-
   return (
     <PortalToFollowElem
       open={open}
@@ -74,11 +54,13 @@ const ConfigBtn: FC<Props> = ({
       placement='bottom-end'
       offset={{
         mainAxis: 12,
-        crossAxis: hasConfigured ? 8 : 0,
+        crossAxis: hasConfigured ? 8 : 49,
       }}
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
-        {triggerContent}
+        <div className={cn(className, 'p-1 rounded-md')}>
+          <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+        </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
         <ConfigPopup {...popupProps} />

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -3,7 +3,6 @@ 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'
@@ -151,8 +150,21 @@ const Panel: FC = () => {
           <>
             <TracingIcon size='md' />
             <div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
-            <div className='p-1 rounded-md'>
+            <div className='flex items-center' onClick={e => e.stopPropagation()}>
-              <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+              <ConfigButton
+                appId={appId}
+                readOnly={readOnly}
+                hasConfigured={false}
+                enabled={enabled}
+                onStatusChange={handleTracingEnabledChange}
+                chosenProvider={inUseTracingProvider}
+                onChooseProvider={handleChooseProvider}
+                langSmithConfig={langSmithConfig}
+                langFuseConfig={langFuseConfig}
+                onConfigUpdated={handleTracingConfigUpdated}
+                onConfigRemoved={handleTracingConfigRemoved}
+                controlShowPopup={controlShowPopup}
+              />
             </div>
             <Divider type='vertical' className='h-3.5' />
             <div className='p-1 rounded-md'>

web/context/app-context.tsx

@@ -127,7 +127,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       setCurrentWorkspace(currentWorkspaceResponse)
   }, [currentWorkspaceResponse])
 
-  const [theme, setTheme] = useState<Theme>(Theme.dark)
+  const [theme, setTheme] = useState<Theme>(Theme.light)
   const handleSetTheme = useCallback((theme: Theme) => {
     setTheme(theme)
     globalThis.document.documentElement.setAttribute('data-theme', theme)