diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
index d23e690dc5..47ba846be1 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
@@ -2,15 +2,9 @@ import React from 'react'
 import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
 
-export type IProps = {
-  params: { appId: string }
-}
-
-const Logs = async ({
-  params: { appId },
-}: IProps) => {
+const Logs = async () => {
   return (
-    <Main pageType={PageType.log} appId={appId} />
+    <Main pageType={PageType.log} />
   )
 }
 
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 00ee067fbe..8d808befaf 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -24,14 +24,14 @@ import { sleep } from '@/utils'
 import { useProviderContext } from '@/context/provider-context'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
-import { fetchAppDetail } from '@/service/apps'
+import type { App } from '@/types/app'
 
 type Props = {
-  appId: string
+  appDetail: App
 }
 
 const Annotation: FC<Props> = ({
-  appId,
+  appDetail,
 }) => {
   const { t } = useTranslation()
   const [isShowEdit, setIsShowEdit] = React.useState(false)
@@ -39,16 +39,14 @@ const Annotation: FC<Props> = ({
   const [isChatApp, setIsChatApp] = useState(false)
 
   const fetchAnnotationConfig = async () => {
-    const res = await doFetchAnnotationConfig(appId)
+    const res = await doFetchAnnotationConfig(appDetail.id)
     setAnnotationConfig(res as AnnotationReplyConfig)
   }
   useEffect(() => {
-    fetchAppDetail({ url: '/apps', id: appId }).then(async (res: any) => {
-      const isChatApp = res.mode === 'chat'
-      setIsChatApp(isChatApp)
-      if (isChatApp)
-        fetchAnnotationConfig()
-    })
+    const isChatApp = appDetail.mode !== 'completion'
+    setIsChatApp(isChatApp)
+    if (isChatApp)
+      fetchAnnotationConfig()
   }, [])
   const [controlRefreshSwitch, setControlRefreshSwitch] = useState(Date.now())
   const { plan, enableBilling } = useProviderContext()
@@ -57,7 +55,7 @@ const Annotation: FC<Props> = ({
   const ensureJobCompleted = async (jobId: string, status: AnnotationEnableStatus) => {
     let isCompleted = false
     while (!isCompleted) {
-      const res: any = await queryAnnotationJobStatus(appId, status, jobId)
+      const res: any = await queryAnnotationJobStatus(appDetail.id, status, jobId)
       isCompleted = res.job_status === JobStatus.completed
       if (isCompleted)
         break
@@ -81,7 +79,7 @@ const Annotation: FC<Props> = ({
   const fetchList = async (page = 1) => {
     setIsLoading(true)
     try {
-      const { data, total }: any = await fetchAnnotationList(appId, {
+      const { data, total }: any = await fetchAnnotationList(appDetail.id, {
         ...query,
         page,
       })
@@ -104,7 +102,7 @@ const Annotation: FC<Props> = ({
   }, [queryParams])
 
   const handleAdd = async (payload: AnnotationItemBasic) => {
-    await addAnnotation(appId, {
+    await addAnnotation(appDetail.id, {
       ...payload,
     })
     Toast.notify({
@@ -116,7 +114,7 @@ const Annotation: FC<Props> = ({
   }
 
   const handleRemove = async (id: string) => {
-    await delAnnotation(appId, id)
+    await delAnnotation(appDetail.id, id)
     Toast.notify({
       message: t('common.api.actionSuccess'),
       type: 'success',
@@ -137,7 +135,7 @@ const Annotation: FC<Props> = ({
   }
 
   const handleSave = async (question: string, answer: string) => {
-    await editAnnotation(appId, (currItem as AnnotationItem).id, {
+    await editAnnotation(appDetail.id, (currItem as AnnotationItem).id, {
       question,
       answer,
     })
@@ -153,7 +151,7 @@ const Annotation: FC<Props> = ({
     <div className='flex flex-col h-full'>
       <p className='flex text-sm font-normal text-gray-500'>{t('appLog.description')}</p>
       <div className='grow flex flex-col py-4 '>
-        <Filter appId={appId} queryParams={queryParams} setQueryParams={setQueryParams}>
+        <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
           <div className='flex items-center space-x-2'>
             {isChatApp && (
               <>
@@ -173,7 +171,7 @@ const Annotation: FC<Props> = ({
                         setIsShowEdit(true)
                       }
                       else {
-                        const { job_id: jobId }: any = await updateAnnotationStatus(appId, AnnotationEnableStatus.disable, annotationConfig?.embedding_model, annotationConfig?.score_threshold)
+                        const { job_id: jobId }: any = await updateAnnotationStatus(appDetail.id, AnnotationEnableStatus.disable, annotationConfig?.embedding_model, annotationConfig?.score_threshold)
                         await ensureJobCompleted(jobId, AnnotationEnableStatus.disable)
                         await fetchAnnotationConfig()
                         Toast.notify({
@@ -205,7 +203,7 @@ const Annotation: FC<Props> = ({
             )}
 
             <HeaderOpts
-              appId={appId}
+              appId={appDetail.id}
               controlUpdateList={controlUpdateList}
               onAdd={handleAdd}
               onAdded={() => {
@@ -260,7 +258,7 @@ const Annotation: FC<Props> = ({
 
         {isShowViewModal && (
           <ViewAnnotationModal
-            appId={appId}
+            appId={appDetail.id}
             isShow={isShowViewModal}
             onHide={() => setIsShowViewModal(false)}
             onRemove={async () => {
@@ -272,7 +270,7 @@ const Annotation: FC<Props> = ({
         )}
         {isShowEdit && (
           <ConfigParamModal
-            appId={appId}
+            appId={appDetail.id}
             isShow
             isInit={!annotationConfig?.enabled}
             onHide={() => {
@@ -283,12 +281,12 @@ const Annotation: FC<Props> = ({
                 embeddingModel.embedding_model_name !== annotationConfig?.embedding_model?.embedding_model_name
                 && embeddingModel.embedding_provider_name !== annotationConfig?.embedding_model?.embedding_provider_name
               ) {
-                const { job_id: jobId }: any = await updateAnnotationStatus(appId, AnnotationEnableStatus.enable, embeddingModel, score)
+                const { job_id: jobId }: any = await updateAnnotationStatus(appDetail.id, AnnotationEnableStatus.enable, embeddingModel, score)
                 await ensureJobCompleted(jobId, AnnotationEnableStatus.enable)
               }
 
               if (score !== annotationConfig?.score_threshold)
-                await updateAnnotationScore(appId, annotationConfig?.id || '', score)
+                await updateAnnotationScore(appDetail.id, annotationConfig?.id || '', score)
 
               await fetchAnnotationConfig()
               Toast.notify({
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index ea548e2b61..d767a1473c 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -14,12 +14,10 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 
 type Props = {
   pageType: PageType
-  appId: string
 }
 
 const LogAnnotation: FC<Props> = ({
   pageType,
-  appId,
 }) => {
   const { t } = useTranslation()
   const router = useRouter()
@@ -45,14 +43,14 @@ const LogAnnotation: FC<Props> = ({
           className='shrink-0'
           value={pageType}
           onChange={(value) => {
-            router.push(`/app/${appId}/${value === PageType.log ? 'logs' : 'annotations'}`)
+            router.push(`/app/${appDetail.id}/${value === PageType.log ? 'logs' : 'annotations'}`)
           }}
           options={options}
         />
       )}
       <div className={cn('grow', appDetail.mode !== 'workflow' && 'mt-3')}>
-        {pageType === PageType.log && appDetail.mode !== 'workflow' && (<Log appId={appId} />)}
-        {pageType === PageType.annotation && (<Annotation appId={appId} />)}
+        {pageType === PageType.log && appDetail.mode !== 'workflow' && (<Log appDetail={appDetail} />)}
+        {pageType === PageType.annotation && (<Annotation appDetail={appDetail} />)}
         {pageType === PageType.log && appDetail.mode === 'workflow' && (<WorkflowLog appDetail={appDetail} />)}
       </div>
     </div>
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index 0df303a627..851cb9f02d 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -14,10 +14,10 @@ import Filter from './filter'
 import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
 import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
-import { fetchAppDetail } from '@/service/apps'
 import { APP_PAGE_LIMIT } from '@/config'
+import type { App } from '@/types/app'
 export type ILogsProps = {
-  appId: string
+  appDetail: App
 }
 
 export type QueryParam = {
@@ -50,7 +50,7 @@ const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
   </div>
 }
 
-const Logs: FC<ILogsProps> = ({ appId }) => {
+const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const { t } = useTranslation()
   const [queryParams, setQueryParams] = useState<QueryParam>({ period: 7, annotation_status: 'all' })
   const [currPage, setCurrPage] = React.useState<number>(0)
@@ -68,20 +68,19 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
   }
 
   // Get the app type first
-  const { data: appDetail } = useSWR({ url: '/apps', id: appId }, fetchAppDetail)
-  const isChatMode = appDetail?.mode === 'chat'
+  const isChatMode = appDetail.mode !== 'completion'
 
   // When the details are obtained, proceed to the next request
   const { data: chatConversations, mutate: mutateChatList } = useSWR(() => isChatMode
     ? {
-      url: `/apps/${appId}/chat-conversations`,
+      url: `/apps/${appDetail.id}/chat-conversations`,
       params: query,
     }
     : null, fetchChatConversations)
 
   const { data: completionConversations, mutate: mutateCompletionList } = useSWR(() => !isChatMode
     ? {
-      url: `/apps/${appId}/completion-conversations`,
+      url: `/apps/${appDetail.id}/completion-conversations`,
       params: query,
     }
     : null, fetchCompletionConversations)
@@ -92,12 +91,12 @@ const Logs: FC<ILogsProps> = ({ appId }) => {
     <div className='flex flex-col h-full'>
       <p className='flex text-sm font-normal text-gray-500'>{t('appLog.description')}</p>
       <div className='flex flex-col py-4 flex-1'>
-        <Filter appId={appId} queryParams={queryParams} setQueryParams={setQueryParams} />
+        <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams} />
         {total === undefined
           ? <Loading type='app' />
           : total > 0
             ? <List logs={isChatMode ? chatConversations : completionConversations} appDetail={appDetail} onRefresh={isChatMode ? mutateChatList : mutateCompletionList} />
-            : <EmptyElement appUrl={`${appDetail?.site.app_base_url}/${appDetail?.mode}/${appDetail?.site.access_token}`} />
+            : <EmptyElement appUrl={`${appDetail.site.app_base_url}/${appDetail.mode}/${appDetail.site.access_token}`} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 0346d4d0ce..06e95ff562 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -38,7 +38,7 @@ import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 
 type IConversationList = {
   logs?: ChatConversationsResponse | CompletionConversationsResponse
-  appDetail?: App
+  appDetail: App
   onRefresh: () => void
 }
 
@@ -175,11 +175,11 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
   }
 
   useEffect(() => {
-    if (appDetail?.id && detail.id && appDetail?.mode === 'chat')
+    if (appDetail?.id && detail.id && appDetail?.mode === 'completion')
       fetchData()
   }, [appDetail?.id, detail.id, appDetail?.mode])
 
-  const isChatMode = appDetail?.mode === 'chat'
+  const isChatMode = appDetail?.mode !== 'completion'
 
   const targetTone = TONE_LIST.find((item: any) => {
     let res = true
@@ -460,7 +460,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
 
   const [showDrawer, setShowDrawer] = useState<boolean>(false) // Whether to display the chat details drawer
   const [currentConversation, setCurrentConversation] = useState<ChatConversationGeneralDetail | CompletionConversationGeneralDetail | undefined>() // Currently selected conversation
-  const isChatMode = appDetail?.mode === 'chat' // Whether the app is a chat app
+  const isChatMode = appDetail.mode !== 'completion' // Whether the app is a chat app
 
   // Annotated data needs to be highlighted
   const renderTdValue = (value: string | number | null, isEmptyStyle: boolean, isHighlight = false, annotation?: LogAnnotation) => {
@@ -559,8 +559,8 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
           appDetail,
         }}>
           {isChatMode
-            ? <ChatConversationDetailComp appId={appDetail?.id} conversationId={currentConversation?.id} />
-            : <CompletionConversationDetailComp appId={appDetail?.id} conversationId={currentConversation?.id} />
+            ? <ChatConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />
+            : <CompletionConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />
           }
         </DrawerContext.Provider>
       </Drawer>