fix(web): fix issues with links, Chinese translations, and styling on the logs page (#27669)

web/app/components/app/log/empty-element.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC, SVGProps } from 'react'
+import React from 'react'
+import Link from 'next/link'
+import { Trans, useTranslation } from 'react-i18next'
+import { basePath } from '@/utils/var'
+import { getRedirectionPath } from '@/utils/app-redirection'
+import type { App, AppMode } from '@/types/app'
+
+const ThreeDotsIcon = ({ className }: SVGProps<SVGElement>) => {
+  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
+    <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+}
+
+const EmptyElement: FC<{ appDetail: App }> = ({ appDetail }) => {
+  const { t } = useTranslation()
+
+  const getWebAppType = (appType: AppMode) => {
+    if (appType !== 'completion' && appType !== 'workflow')
+      return 'chat'
+    return appType
+  }
+
+  return <div className='flex h-full items-center justify-center'>
+    <div className='box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4'>
+      <span className='system-md-semibold text-text-secondary'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline text-text-secondary' /></span>
+      <div className='system-sm-regular mt-2 text-text-tertiary'>
+        <Trans
+          i18nKey="appLog.table.empty.element.content"
+          components={{
+            shareLink: <Link href={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' />,
+            testLink: <Link href={getRedirectionPath(true, appDetail)} className='text-util-colors-blue-blue-600' />,
+          }}
+        />
+      </div>
+    </div>
+  </div>
+}
+
+export default React.memo(EmptyElement)

web/app/components/app/log/index.tsx

@@ -1,21 +1,19 @@
 'use client'
-import type { FC, SVGProps } from 'react'
+import type { FC } from 'react'
 import React, { useState } from 'react'
 import useSWR from 'swr'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
 import { useDebounce } from 'ahooks'
 import { omit } from 'lodash-es'
 import dayjs from 'dayjs'
-import { basePath } from '@/utils/var'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import List from './list'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
+import EmptyElement from './empty-element'
 import Pagination from '@/app/components/base/pagination'
 import Loading from '@/app/components/base/loading'
 import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
 import { APP_PAGE_LIMIT } from '@/config'
-import type { App, AppMode } from '@/types/app'
+import type { App } from '@/types/app'
 export type ILogsProps = {
   appDetail: App
 }
@@ -27,30 +25,6 @@ export type QueryParam = {
   sort_by?: string
 }
 
-const ThreeDotsIcon = ({ className }: SVGProps<SVGElement>) => {
-  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
-    <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-}
-
-const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
-  const { t } = useTranslation()
-  const pathname = usePathname()
-  const pathSegments = pathname.split('/')
-  pathSegments.pop()
-  return <div className='flex h-full items-center justify-center'>
-    <div className='box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4'>
-      <span className='system-md-semibold text-text-secondary'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
-      <div className='system-sm-regular mt-2 text-text-tertiary'>
-        <Trans
-          i18nKey="appLog.table.empty.element.content"
-          components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }}
-        />
-      </div>
-    </div>
-  </div>
-}
-
 const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const { t } = useTranslation()
   const [queryParams, setQueryParams] = useState<QueryParam>({
@@ -78,12 +52,6 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
     ...omit(debouncedQueryParams, ['period']),
   }
 
-  const getWebAppType = (appType: AppMode) => {
-    if (appType !== 'completion' && appType !== 'workflow')
-      return 'chat'
-    return appType
-  }
-
   // When the details are obtained, proceed to the next request
   const { data: chatConversations, mutate: mutateChatList } = useSWR(() => isChatMode
     ? {
@@ -110,7 +78,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={isChatMode ? chatConversations : completionConversations} appDetail={appDetail} onRefresh={isChatMode ? mutateChatList : mutateCompletionList} />
-            : <EmptyElement appUrl={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
+            : <EmptyElement appDetail={appDetail} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)

web/app/components/app/workflow-log/index.tsx

@@ -1,23 +1,21 @@
 'use client'
-import type { FC, SVGProps } from 'react'
+import type { FC } from 'react'
 import React, { useState } from 'react'
 import useSWR from 'swr'
-import { usePathname } from 'next/navigation'
 import { useDebounce } from 'ahooks'
 import { omit } from 'lodash-es'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
-import { Trans, useTranslation } from 'react-i18next'
-import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
 import List from './list'
-import { basePath } from '@/utils/var'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
+import EmptyElement from '@/app/components/app/log/empty-element'
 import Pagination from '@/app/components/base/pagination'
 import Loading from '@/app/components/base/loading'
 import { fetchWorkflowLogs } from '@/service/log'
 import { APP_PAGE_LIMIT } from '@/config'
-import type { App, AppMode } from '@/types/app'
+import type { App } from '@/types/app'
 import { useAppContext } from '@/context/app-context'
 
 dayjs.extend(utc)
@@ -33,29 +31,6 @@ export type QueryParam = {
   keyword?: string
 }
 
-const ThreeDotsIcon = ({ className }: SVGProps<SVGElement>) => {
-  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
-    <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-}
-const EmptyElement: FC<{ appUrl: string }> = ({ appUrl }) => {
-  const { t } = useTranslation()
-  const pathname = usePathname()
-  const pathSegments = pathname.split('/')
-  pathSegments.pop()
-  return <div className='flex h-full items-center justify-center'>
-    <div className='box-border h-fit w-[560px] rounded-2xl bg-background-section-burn px-5 py-4'>
-      <span className='system-md-semibold text-text-secondary'>{t('appLog.table.empty.element.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
-      <div className='system-sm-regular mt-2 text-text-tertiary'>
-        <Trans
-          i18nKey="appLog.table.empty.element.content"
-          components={{ shareLink: <Link href={`${pathSegments.join('/')}/overview`} className='text-util-colors-blue-blue-600' />, testLink: <Link href={appUrl} className='text-util-colors-blue-blue-600' target='_blank' rel='noopener noreferrer' /> }}
-        />
-      </div>
-    </div>
-  </div>
-}
-
 const Logs: FC<ILogsProps> = ({ appDetail }) => {
   const { t } = useTranslation()
   const { userProfile: { timezone } } = useAppContext()
@@ -78,12 +53,6 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
     ...omit(debouncedQueryParams, ['period', 'status']),
   }
 
-  const getWebAppType = (appType: AppMode) => {
-    if (appType !== 'completion' && appType !== 'workflow')
-      return 'chat'
-    return appType
-  }
-
   const { data: workflowLogs, mutate } = useSWR({
     url: `/apps/${appDetail.id}/workflow-app-logs`,
     params: query,
@@ -101,7 +70,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={workflowLogs} appDetail={appDetail} onRefresh={mutate} />
-            : <EmptyElement appUrl={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
+            : <EmptyElement appDetail={appDetail} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)

web/i18n/zh-Hans/app-log.ts

@@ -30,7 +30,7 @@ const translation = {
       noOutput: '无输出',
       element: {
         title: '这里有人吗',
-        content: '在这里观测和标注最终用户和 AI 应用程序之间的交互，以不断提高 AI 的准确性。您可以<testLink>试试</testLink> web app 或<shareLink>分享</shareLink>出去，然后返回此页面。',
+        content: '在这里观测和标注最终用户和 AI 应用程序之间的交互，以不断提高 AI 的准确性。您可以尝试<shareLink>分享</shareLink>或<testLink>测试</testLink>此Web应用程序，然后返回此页面。',
       },
     },
   },

web/i18n/zh-Hant/app-log.ts

@@ -29,7 +29,7 @@ const translation = {
       noOutput: '無輸出',
       element: {
         title: '這裡有人嗎',
-        content: '在這裡觀測和標註終端使用者和 AI 應用程式之間的互動，以不斷提高 AI 的準確性。您可以<testLink>試試</testLink> web app 或<shareLink>分享</shareLink>出去，然後返回此頁面。',
+        content: '在這裡觀測和標註終端使用者和 AI 應用程式之間的互動，以不斷提高 AI 的準確性。您可以嘗試<shareLink>分享</shareLink>或<testLink>測試</testLink>此Web應用程序，然後返回此頁面。',
       },
     },
   },