From 05d273d643244d7853d87c5c8bbfd8ee00bbdf51 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 8 Jan 2025 15:40:13 +0800
Subject: [PATCH] fix tracing dropdown

---
 .../overview/tracing/config-button.tsx        | 26 +++----------------
 .../[appId]/overview/tracing/panel.tsx        | 18 ++++++++++---
 web/context/app-context.tsx                   |  2 +-
 3 files changed, 20 insertions(+), 26 deletions(-)

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 39fc81a274..ca6fa3a904 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
@@ -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} />
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 790705e9fb..06621a2ae4 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/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'>
-              <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+            <div className='flex items-center' onClick={e => e.stopPropagation()}>
+              <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'>
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index 25a313a76b..7addfb83d4 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.dark)
+  const [theme, setTheme] = useState<Theme>(Theme.light)
   const handleSetTheme = useCallback((theme: Theme) => {
     setTheme(theme)
     globalThis.document.documentElement.setAttribute('data-theme', theme)