Initial commit

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Main from '@/app/components/app/log-annotation'
+import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
+
+export type IProps = {
+  params: Promise<{ appId: string }>
+}
+
+const Logs = async () => {
+  return (
+    <Main pageType={PageType.annotation} />
+  )
+}
+
+export default Logs

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/configuration/page.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Configuration from '@/app/components/app/configuration'
+
+const IConfiguration = async () => {
+  return (
+    <Configuration />
+  )
+}
+
+export default IConfiguration

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/develop/page.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { Locale } from '@/i18n'
+import DevelopMain from '@/app/components/develop'
+
+export type IDevelopProps = {
+  params: Promise<{ locale: Locale; appId: string }>
+}
+
+const Develop = async (props: IDevelopProps) => {
+  const params = await props.params
+
+  const {
+    appId,
+  } = params
+
+  return <DevelopMain appId={appId} />
+}
+
+export default Develop

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx

@@ -0,0 +1,177 @@
+'use client'
+import type { FC } from 'react'
+import { useUnmount } from 'ahooks'
+import React, { useCallback, useEffect, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import {
+  RiDashboard2Fill,
+  RiDashboard2Line,
+  RiFileList3Fill,
+  RiFileList3Line,
+  RiTerminalBoxFill,
+  RiTerminalBoxLine,
+  RiTerminalWindowFill,
+  RiTerminalWindowLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useShallow } from 'zustand/react/shallow'
+import { useContextSelector } from 'use-context-selector'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+import { useStore } from '@/app/components/app/store'
+import AppSideBar from '@/app/components/app-sidebar'
+import type { NavIcon } from '@/app/components/app-sidebar/navLink'
+import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
+import AppContext, { useAppContext } from '@/context/app-context'
+import Loading from '@/app/components/base/loading'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import type { App } from '@/types/app'
+
+export type IAppDetailLayoutProps = {
+  children: React.ReactNode
+  appId: string
+}
+
+const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
+  const {
+    children,
+    appId, // get appId in path
+  } = props
+  const { t } = useTranslation()
+  const router = useRouter()
+  const pathname = usePathname()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace } = useAppContext()
+  const { appDetail, setAppDetail, setAppSiderbarExpand } = useStore(useShallow(state => ({
+    appDetail: state.appDetail,
+    setAppDetail: state.setAppDetail,
+    setAppSiderbarExpand: state.setAppSiderbarExpand,
+  })))
+  const [isLoadingAppDetail, setIsLoadingAppDetail] = useState(false)
+  const [appDetailRes, setAppDetailRes] = useState<App | null>(null)
+  const [navigation, setNavigation] = useState<Array<{
+    name: string
+    href: string
+    icon: NavIcon
+    selectedIcon: NavIcon
+  }>>([])
+  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+
+  const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
+    const navs = [
+      ...(isCurrentWorkspaceEditor
+        ? [{
+          name: t('common.appMenus.promptEng'),
+          href: `/app/${appId}/${(mode === 'workflow' || mode === 'advanced-chat') ? 'workflow' : 'configuration'}`,
+          icon: RiTerminalWindowLine,
+          selectedIcon: RiTerminalWindowFill,
+        }]
+        : []
+      ),
+      {
+        name: t('common.appMenus.apiAccess'),
+        href: `/app/${appId}/develop`,
+        icon: RiTerminalBoxLine,
+        selectedIcon: RiTerminalBoxFill,
+      },
+      ...(isCurrentWorkspaceEditor
+        ? [{
+          name: mode !== 'workflow'
+            ? t('common.appMenus.logAndAnn')
+            : t('common.appMenus.logs'),
+          href: `/app/${appId}/logs`,
+          icon: RiFileList3Line,
+          selectedIcon: RiFileList3Fill,
+        }]
+        : []
+      ),
+      {
+        name: t('common.appMenus.overview'),
+        href: `/app/${appId}/overview`,
+        icon: RiDashboard2Line,
+        selectedIcon: RiDashboard2Fill,
+      },
+    ]
+    return navs
+  }, [])
+
+  useEffect(() => {
+    if (appDetail) {
+      document.title = `${(appDetail.name || 'App')} - Dify`
+      const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+      const mode = isMobile ? 'collapse' : 'expand'
+      setAppSiderbarExpand(isMobile ? mode : localeMode)
+      // TODO: consider screen size and mode
+      // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
+      //   setAppSiderbarExpand('collapse')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appDetail, isMobile])
+
+  useEffect(() => {
+    setAppDetail()
+    setIsLoadingAppDetail(true)
+    fetchAppDetail({ url: '/apps', id: appId }).then((res) => {
+      setAppDetailRes(res)
+    }).catch((e: any) => {
+      if (e.status === 404)
+        router.replace('/apps')
+    }).finally(() => {
+      setIsLoadingAppDetail(false)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appId, pathname])
+
+  useEffect(() => {
+    if (!appDetailRes || isLoadingCurrentWorkspace || isLoadingAppDetail)
+      return
+    const res = appDetailRes
+    // redirection
+    const canIEditApp = isCurrentWorkspaceEditor
+    if (!canIEditApp && (pathname.endsWith('configuration') || pathname.endsWith('workflow') || pathname.endsWith('logs'))) {
+      router.replace(`/app/${appId}/overview`)
+      return
+    }
+    if ((res.mode === 'workflow' || res.mode === 'advanced-chat') && (pathname).endsWith('configuration')) {
+      router.replace(`/app/${appId}/workflow`)
+    }
+    else if ((res.mode !== 'workflow' && res.mode !== 'advanced-chat') && (pathname).endsWith('workflow')) {
+      router.replace(`/app/${appId}/configuration`)
+    }
+    else {
+      setAppDetail({ ...res, enable_sso: false })
+      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode))
+      if (systemFeatures.enable_web_sso_switch_component && canIEditApp) {
+        fetchAppSSO({ appId }).then((ssoRes) => {
+          setAppDetail({ ...res, enable_sso: ssoRes.enabled })
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appDetailRes, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, systemFeatures.enable_web_sso_switch_component])
+
+  useUnmount(() => {
+    setAppDetail()
+  })
+
+  if (!appDetail) {
+    return (
+      <div className='flex h-full items-center justify-center bg-background-body'>
+        <Loading />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(s.app, 'relative flex', 'overflow-hidden')}>
+      {appDetail && (
+        <AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background as string} desc={appDetail.mode} navigation={navigation} />
+      )}
+      <div className="grow overflow-hidden bg-components-panel-bg">
+        {children}
+      </div>
+    </div>
+  )
+}
+export default React.memo(AppDetailLayout)

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

@@ -0,0 +1,14 @@
+import Main from './layout-main'
+
+const AppDetailLayout = async (props: {
+  children: React.ReactNode
+  params: Promise<{ appId: string }>
+}) => {
+  const {
+    children,
+    params,
+  } = props
+
+  return <Main appId={(await params).appId}>{children}</Main>
+}
+export default AppDetailLayout

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Main from '@/app/components/app/log-annotation'
+import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
+
+const Logs = async () => {
+  return (
+    <Main pageType={PageType.log} />
+  )
+}
+
+export default Logs

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx

@@ -0,0 +1,144 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext, useContextSelector } from 'use-context-selector'
+import AppCard from '@/app/components/app/overview/appCard'
+import Loading from '@/app/components/base/loading'
+import { ToastContext } from '@/app/components/base/toast'
+import {
+  fetchAppDetail,
+  fetchAppSSO,
+  updateAppSSO,
+  updateAppSiteAccessToken,
+  updateAppSiteConfig,
+  updateAppSiteStatus,
+} from '@/service/apps'
+import type { App, AppSSO } from '@/types/app'
+import type { UpdateAppSiteCodeResponse } from '@/models/app'
+import { asyncRunSafe } from '@/utils'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import type { IAppCardProps } from '@/app/components/app/overview/appCard'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import AppContext from '@/context/app-context'
+
+export type ICardViewProps = {
+  appId: string
+  isInPanel?: boolean
+  className?: string
+}
+
+const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(state => state.setAppDetail)
+  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
+
+  const updateAppDetail = async () => {
+    try {
+      const res = await fetchAppDetail({ url: '/apps', id: appId })
+      if (systemFeatures.enable_web_sso_switch_component) {
+        const ssoRes = await fetchAppSSO({ appId })
+        setAppDetail({ ...res, enable_sso: ssoRes.enabled })
+      }
+      else {
+        setAppDetail({ ...res })
+      }
+    }
+    catch (error) { console.error(error) }
+  }
+
+  const handleCallbackResult = (err: Error | null, message?: string) => {
+    const type = err ? 'error' : 'success'
+
+    message ||= (type === 'success' ? 'modifiedSuccessfully' : 'modifiedUnsuccessfully')
+
+    if (type === 'success')
+      updateAppDetail()
+
+    notify({
+      type,
+      message: t(`common.actionMsg.${message}`),
+    })
+  }
+
+  const onChangeSiteStatus = async (value: boolean) => {
+    const [err] = await asyncRunSafe<App>(
+      updateAppSiteStatus({
+        url: `/apps/${appId}/site-enable`,
+        body: { enable_site: value },
+      }) as Promise<App>,
+    )
+
+    handleCallbackResult(err)
+  }
+
+  const onChangeApiStatus = async (value: boolean) => {
+    const [err] = await asyncRunSafe<App>(
+      updateAppSiteStatus({
+        url: `/apps/${appId}/api-enable`,
+        body: { enable_api: value },
+      }) as Promise<App>,
+    )
+
+    handleCallbackResult(err)
+  }
+
+  const onSaveSiteConfig: IAppCardProps['onSaveSiteConfig'] = async (params) => {
+    const [err] = await asyncRunSafe<App>(
+      updateAppSiteConfig({
+        url: `/apps/${appId}/site`,
+        body: params,
+      }) as Promise<App>,
+    )
+    if (!err)
+      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
+
+    if (systemFeatures.enable_web_sso_switch_component) {
+      const [sso_err] = await asyncRunSafe<AppSSO>(
+        updateAppSSO({ id: appId, enabled: Boolean(params.enable_sso) }) as Promise<AppSSO>,
+      )
+      if (sso_err) {
+        handleCallbackResult(sso_err)
+        return
+      }
+    }
+
+    handleCallbackResult(err)
+  }
+
+  const onGenerateCode = async () => {
+    const [err] = await asyncRunSafe<UpdateAppSiteCodeResponse>(
+      updateAppSiteAccessToken({
+        url: `/apps/${appId}/site/access-token-reset`,
+      }) as Promise<UpdateAppSiteCodeResponse>,
+    )
+
+    handleCallbackResult(err, err ? 'generatedUnsuccessfully' : 'generatedSuccessfully')
+  }
+
+  if (!appDetail)
+    return <Loading />
+
+  return (
+    <div className={className || 'mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'}>
+      <AppCard
+        appInfo={appDetail}
+        cardType="webapp"
+        isInPanel={isInPanel}
+        onChangeStatus={onChangeSiteStatus}
+        onGenerateCode={onGenerateCode}
+        onSaveSiteConfig={onSaveSiteConfig}
+      />
+      <AppCard
+        cardType="api"
+        appInfo={appDetail}
+        isInPanel={isInPanel}
+        onChangeStatus={onChangeApiStatus}
+      />
+    </div>
+  )
+}
+
+export default CardView

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx

@@ -0,0 +1,106 @@
+'use client'
+import React, { useState } from 'react'
+import dayjs from 'dayjs'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+import { useTranslation } from 'react-i18next'
+import type { PeriodParams } from '@/app/components/app/overview/appChart'
+import { AvgResponseTime, AvgSessionInteractions, AvgUserInteractions, ConversationsChart, CostChart, EndUsersChart, MessagesChart, TokenPerSecond, UserSatisfactionRate, WorkflowCostChart, WorkflowDailyTerminalsChart, WorkflowMessagesChart } from '@/app/components/app/overview/appChart'
+import type { Item } from '@/app/components/base/select'
+import { SimpleSelect } from '@/app/components/base/select'
+import { TIME_PERIOD_MAPPING } from '@/app/components/app/log/filter'
+import { useStore as useAppStore } from '@/app/components/app/store'
+
+dayjs.extend(quarterOfYear)
+
+const today = dayjs()
+
+const queryDateFormat = 'YYYY-MM-DD HH:mm'
+
+export type IChartViewProps = {
+  appId: string
+}
+
+export default function ChartView({ appId }: IChartViewProps) {
+  const { t } = useTranslation()
+  const appDetail = useAppStore(state => state.appDetail)
+  const isChatApp = appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow'
+  const isWorkflow = appDetail?.mode === 'workflow'
+  const [period, setPeriod] = useState<PeriodParams>({ name: t('appLog.filter.period.last7days'), query: { start: today.subtract(7, 'day').startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } })
+
+  const onSelect = (item: Item) => {
+    if (item.value === -1) {
+      setPeriod({ name: item.name, query: undefined })
+    }
+    else if (item.value === 0) {
+      const startOfToday = today.startOf('day').format(queryDateFormat)
+      const endOfToday = today.endOf('day').format(queryDateFormat)
+      setPeriod({ name: item.name, query: { start: startOfToday, end: endOfToday } })
+    }
+    else {
+      setPeriod({ name: item.name, query: { start: today.subtract(item.value as number, 'day').startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) } })
+    }
+  }
+
+  if (!appDetail)
+    return null
+
+  return (
+    <div>
+      <div className='system-xl-semibold mb-4 mt-8 flex flex-row items-center text-text-primary'>
+        <span className='mr-3'>{t('appOverview.analysis.title')}</span>
+        <SimpleSelect
+          items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+          className='mt-0 !w-40'
+          onSelect={(item) => {
+            const id = item.value
+            const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'
+            const name = item.name || t('appLog.filter.period.allTime')
+            onSelect({ value, name })
+          }}
+          defaultValue={'2'}
+        />
+      </div>
+      {!isWorkflow && (
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
+          <ConversationsChart period={period} id={appId} />
+          <EndUsersChart period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && (
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
+          {isChatApp
+            ? (
+              <AvgSessionInteractions period={period} id={appId} />
+            )
+            : (
+              <AvgResponseTime period={period} id={appId} />
+            )}
+          <TokenPerSecond period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && (
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
+          <UserSatisfactionRate period={period} id={appId} />
+          <CostChart period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && isChatApp && (
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
+          <MessagesChart period={period} id={appId} />
+        </div>
+      )}
+      {isWorkflow && (
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
+          <WorkflowMessagesChart period={period} id={appId} />
+          <WorkflowDailyTerminalsChart period={period} id={appId} />
+        </div>
+      )}
+      {isWorkflow && (
+        <div className='mb-6 grid w-full grid-cols-1 gap-6 xl:grid-cols-2'>
+          <WorkflowCostChart period={period} id={appId} />
+          <AvgUserInteractions period={period} id={appId} />
+        </div>
+      )}
+    </div>
+  )
+}

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import ChartView from './chartView'
+import CardView from './cardView'
+import TracingPanel from './tracing/panel'
+import ApikeyInfoPanel from '@/app/components/app/overview/apikey-info-panel'
+
+export type IDevelopProps = {
+  params: Promise<{ appId: string }>
+}
+
+const Overview = async (props: IDevelopProps) => {
+  const params = await props.params
+
+  const {
+    appId,
+  } = params
+
+  return (
+    <div className="h-full overflow-scroll bg-chatbot-bg px-4 py-6 sm:px-12">
+      <ApikeyInfoPanel />
+      <TracingPanel />
+      <CardView appId={appId} />
+      <ChartView appId={appId} />
+    </div>
+  )
+}
+
+export default Overview

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

@@ -0,0 +1,71 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import type { PopupProps } from './config-popup'
+import ConfigPopup from './config-popup'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type Props = {
+  readOnly: boolean
+  className?: string
+  hasConfigured: boolean
+  controlShowPopup?: number
+} & PopupProps
+
+const ConfigBtn: FC<Props> = ({
+  className,
+  hasConfigured,
+  controlShowPopup,
+  ...popupProps
+}) => {
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+  }, [doSetOpen])
+
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  useEffect(() => {
+    if (controlShowPopup)
+      // setOpen(!openRef.current)
+      setOpen(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlShowPopup])
+
+  if (popupProps.readOnly && !hasConfigured)
+    return null
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 12,
+        crossAxis: hasConfigured ? 8 : 49,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        <div className={cn(className, 'rounded-md p-1')}>
+          <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <ConfigPopup {...popupProps} />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(ConfigBtn)

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

@@ -0,0 +1,236 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import TracingIcon from './tracing-icon'
+import ProviderPanel from './provider-panel'
+import type { LangFuseConfig, LangSmithConfig, OpikConfig } from './type'
+import { TracingProvider } from './type'
+import ProviderConfigModal from './provider-config-modal'
+import Indicator from '@/app/components/header/indicator'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
+import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'
+
+const I18N_PREFIX = 'app.tracing'
+
+export type PopupProps = {
+  appId: string
+  readOnly: boolean
+  enabled: boolean
+  onStatusChange: (enabled: boolean) => void
+  chosenProvider: TracingProvider | null
+  onChooseProvider: (provider: TracingProvider) => void
+  langSmithConfig: LangSmithConfig | null
+  langFuseConfig: LangFuseConfig | null
+  opikConfig: OpikConfig | null
+  onConfigUpdated: (provider: TracingProvider, payload: LangSmithConfig | LangFuseConfig | OpikConfig) => void
+  onConfigRemoved: (provider: TracingProvider) => void
+}
+
+const ConfigPopup: FC<PopupProps> = ({
+  appId,
+  readOnly,
+  enabled,
+  onStatusChange,
+  chosenProvider,
+  onChooseProvider,
+  langSmithConfig,
+  langFuseConfig,
+  opikConfig,
+  onConfigUpdated,
+  onConfigRemoved,
+}) => {
+  const { t } = useTranslation()
+
+  const [currentProvider, setCurrentProvider] = useState<TracingProvider | null>(TracingProvider.langfuse)
+  const [isShowConfigModal, {
+    setTrue: showConfigModal,
+    setFalse: hideConfigModal,
+  }] = useBoolean(false)
+  const handleOnConfig = useCallback((provider: TracingProvider) => {
+    return () => {
+      setCurrentProvider(provider)
+      showConfigModal()
+    }
+  }, [showConfigModal])
+
+  const handleOnChoose = useCallback((provider: TracingProvider) => {
+    return () => {
+      onChooseProvider(provider)
+    }
+  }, [onChooseProvider])
+
+  const handleConfigUpdated = useCallback((payload: LangSmithConfig | LangFuseConfig | OpikConfig) => {
+    onConfigUpdated(currentProvider!, payload)
+    hideConfigModal()
+  }, [currentProvider, hideConfigModal, onConfigUpdated])
+
+  const handleConfigRemoved = useCallback(() => {
+    onConfigRemoved(currentProvider!)
+    hideConfigModal()
+  }, [currentProvider, hideConfigModal, onConfigRemoved])
+
+  const providerAllConfigured = langSmithConfig && langFuseConfig && opikConfig
+  const providerAllNotConfigured = !langSmithConfig && !langFuseConfig && !opikConfig
+
+  const switchContent = (
+    <Switch
+      className='ml-3'
+      defaultValue={enabled}
+      onChange={onStatusChange}
+      disabled={providerAllNotConfigured}
+    />
+  )
+  const langSmithPanel = (
+    <ProviderPanel
+      type={TracingProvider.langSmith}
+      readOnly={readOnly}
+      config={langSmithConfig}
+      hasConfigured={!!langSmithConfig}
+      onConfig={handleOnConfig(TracingProvider.langSmith)}
+      isChosen={chosenProvider === TracingProvider.langSmith}
+      onChoose={handleOnChoose(TracingProvider.langSmith)}
+      key="langSmith-provider-panel"
+    />
+  )
+
+  const langfusePanel = (
+    <ProviderPanel
+      type={TracingProvider.langfuse}
+      readOnly={readOnly}
+      config={langFuseConfig}
+      hasConfigured={!!langFuseConfig}
+      onConfig={handleOnConfig(TracingProvider.langfuse)}
+      isChosen={chosenProvider === TracingProvider.langfuse}
+      onChoose={handleOnChoose(TracingProvider.langfuse)}
+      key="langfuse-provider-panel"
+    />
+  )
+
+  const opikPanel = (
+    <ProviderPanel
+      type={TracingProvider.opik}
+      readOnly={readOnly}
+      config={opikConfig}
+      hasConfigured={!!opikConfig}
+      onConfig={handleOnConfig(TracingProvider.opik)}
+      isChosen={chosenProvider === TracingProvider.opik}
+      onChoose={handleOnChoose(TracingProvider.opik)}
+      key="opik-provider-panel"
+    />
+  )
+
+  const configuredProviderPanel = () => {
+    const configuredPanels: any[] = []
+
+    if (langSmithConfig)
+      configuredPanels.push(langSmithPanel)
+
+    if (langFuseConfig)
+      configuredPanels.push(langfusePanel)
+
+    if (opikConfig)
+      configuredPanels.push(opikPanel)
+
+    return configuredPanels
+  }
+
+  const moreProviderPanel = () => {
+    const notConfiguredPanels: any[] = []
+
+    if (!langSmithConfig)
+      notConfiguredPanels.push(langSmithPanel)
+
+    if (!langFuseConfig)
+      notConfiguredPanels.push(langfusePanel)
+
+    if (!opikConfig)
+      notConfiguredPanels.push(opikPanel)
+
+    return notConfiguredPanels
+  }
+
+  const configuredProviderConfig = () => {
+    if (currentProvider === TracingProvider.langSmith)
+      return langSmithConfig
+    if (currentProvider === TracingProvider.langfuse)
+      return langFuseConfig
+    return opikConfig
+  }
+
+  return (
+    <div className='w-[420px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-xl'>
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center'>
+          <TracingIcon size='md' className='mr-2' />
+          <div className='title-2xl-semi-bold text-text-primary'>{t(`${I18N_PREFIX}.tracing`)}</div>
+        </div>
+        <div className='flex items-center'>
+          <Indicator color={enabled ? 'green' : 'gray'} />
+          <div className={cn('system-xs-semibold-uppercase ml-1 text-text-tertiary', enabled && 'text-util-colors-green-green-600')}>
+            {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+          </div>
+          {!readOnly && (
+            <>
+              {providerAllNotConfigured
+                ? (
+                  <Tooltip
+                    popupContent={t(`${I18N_PREFIX}.disabledTip`)}
+                  >
+                    {switchContent}
+                  </Tooltip>
+                )
+                : switchContent}
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className='system-xs-regular mt-2 text-text-tertiary'>
+        {t(`${I18N_PREFIX}.tracingDescription`)}
+      </div>
+      <Divider className='my-3' />
+      <div className='relative'>
+        {(providerAllConfigured || providerAllNotConfigured)
+          ? (
+            <>
+              <div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.${providerAllConfigured ? 'configured' : 'notConfigured'}`)}</div>
+              <div className='mt-2 space-y-2'>
+                {langSmithPanel}
+                {langfusePanel}
+                {opikPanel}
+              </div>
+            </>
+          )
+          : (
+            <>
+              <div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.configured`)}</div>
+              <div className='mt-2 space-y-2'>
+                {configuredProviderPanel()}
+              </div>
+              <div className='system-xs-medium-uppercase mt-3 text-text-tertiary'>{t(`${I18N_PREFIX}.configProviderTitle.moreProvider`)}</div>
+              <div className='mt-2 space-y-2'>
+                {moreProviderPanel()}
+              </div>
+            </>
+          )}
+
+      </div>
+      {isShowConfigModal && (
+        <ProviderConfigModal
+          appId={appId}
+          type={currentProvider!}
+          payload={configuredProviderConfig()}
+          onCancel={hideConfigModal}
+          onSaved={handleConfigUpdated}
+          onChosen={onChooseProvider}
+          onRemoved={handleConfigRemoved}
+        />
+      )}
+    </div>
+  )
+}
+export default React.memo(ConfigPopup)

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config.ts

@@ -0,0 +1,7 @@
+import { TracingProvider } from './type'
+
+export const docURL = {
+  [TracingProvider.langSmith]: 'https://docs.smith.langchain.com/',
+  [TracingProvider.langfuse]: 'https://docs.langfuse.com',
+  [TracingProvider.opik]: 'https://www.comet.com/docs/opik/tracing/integrations/dify#setup-instructions',
+}

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
+
+type Props = {
+  className?: string
+  label: string
+  labelClassName?: string
+  value: string | number
+  onChange: (value: string) => void
+  isRequired?: boolean
+  placeholder?: string
+}
+
+const Field: FC<Props> = ({
+  className,
+  label,
+  labelClassName,
+  value,
+  onChange,
+  isRequired = false,
+  placeholder = '',
+}) => {
+  return (
+    <div className={cn(className)}>
+      <div className='flex py-[7px]'>
+        <div className={cn(labelClassName, 'flex h-[18px] items-center text-[13px] font-medium text-text-primary')}>{label} </div>
+        {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
+      </div>
+      <Input
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        className='h-9'
+        placeholder={placeholder}
+      />
+    </div>
+  )
+}
+export default React.memo(Field)

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

@@ -0,0 +1,226 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import {
+  RiArrowDownDoubleLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { usePathname } from 'next/navigation'
+import { useBoolean } from 'ahooks'
+import type { LangFuseConfig, LangSmithConfig, OpikConfig } from './type'
+import { TracingProvider } from './type'
+import TracingIcon from './tracing-icon'
+import ConfigButton from './config-button'
+import cn from '@/utils/classnames'
+import { LangfuseIcon, LangsmithIcon, OpikIcon } from '@/app/components/base/icons/src/public/tracing'
+import Indicator from '@/app/components/header/indicator'
+import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
+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'
+
+const I18N_PREFIX = 'app.tracing'
+
+const Title = ({
+  className,
+}: {
+  className?: string
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('system-xl-semibold flex items-center text-text-primary', className)}>
+      {t('common.appMenus.overview')}
+    </div>
+  )
+}
+const Panel: FC = () => {
+  const { t } = useTranslation()
+  const pathname = usePathname()
+  const matched = pathname.match(/\/app\/([^/]+)/)
+  const appId = (matched?.length && matched[1]) ? matched[1] : ''
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const readOnly = !isCurrentWorkspaceEditor
+
+  const [isLoaded, {
+    setTrue: setLoaded,
+  }] = useBoolean(false)
+
+  const [tracingStatus, setTracingStatus] = useState<TracingStatus | null>(null)
+  const enabled = tracingStatus?.enabled || false
+  const handleTracingStatusChange = async (tracingStatus: TracingStatus, noToast?: boolean) => {
+    await updateTracingStatus({ appId, body: tracingStatus })
+    setTracingStatus(tracingStatus)
+    if (!noToast) {
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.success'),
+      })
+    }
+  }
+
+  const handleTracingEnabledChange = (enabled: boolean) => {
+    handleTracingStatusChange({
+      tracing_provider: tracingStatus?.tracing_provider || null,
+      enabled,
+    })
+  }
+  const handleChooseProvider = (provider: TracingProvider) => {
+    handleTracingStatusChange({
+      tracing_provider: provider,
+      enabled: true,
+    })
+  }
+  const inUseTracingProvider: TracingProvider | null = tracingStatus?.tracing_provider || null
+
+  const InUseProviderIcon
+    = inUseTracingProvider === TracingProvider.langSmith
+      ? LangsmithIcon
+      : inUseTracingProvider === TracingProvider.langfuse
+        ? LangfuseIcon
+        : inUseTracingProvider === TracingProvider.opik
+          ? OpikIcon
+          : LangsmithIcon
+
+  const [langSmithConfig, setLangSmithConfig] = useState<LangSmithConfig | null>(null)
+  const [langFuseConfig, setLangFuseConfig] = useState<LangFuseConfig | null>(null)
+  const [opikConfig, setOpikConfig] = useState<OpikConfig | null>(null)
+  const hasConfiguredTracing = !!(langSmithConfig || langFuseConfig || opikConfig)
+
+  const fetchTracingConfig = async () => {
+    const { tracing_config: langSmithConfig, has_not_configured: langSmithHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.langSmith })
+    if (!langSmithHasNotConfig)
+      setLangSmithConfig(langSmithConfig as LangSmithConfig)
+    const { tracing_config: langFuseConfig, has_not_configured: langFuseHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.langfuse })
+    if (!langFuseHasNotConfig)
+      setLangFuseConfig(langFuseConfig as LangFuseConfig)
+    const { tracing_config: opikConfig, has_not_configured: OpikHasNotConfig } = await doFetchTracingConfig({ appId, provider: TracingProvider.opik })
+    if (!OpikHasNotConfig)
+      setOpikConfig(opikConfig as OpikConfig)
+  }
+
+  const handleTracingConfigUpdated = async (provider: TracingProvider) => {
+    // call api to hide secret key value
+    const { tracing_config } = await doFetchTracingConfig({ appId, provider })
+    if (provider === TracingProvider.langSmith)
+      setLangSmithConfig(tracing_config as LangSmithConfig)
+    else if (provider === TracingProvider.langfuse)
+      setLangFuseConfig(tracing_config as LangFuseConfig)
+    else if (provider === TracingProvider.opik)
+      setOpikConfig(tracing_config as OpikConfig)
+  }
+
+  const handleTracingConfigRemoved = (provider: TracingProvider) => {
+    if (provider === TracingProvider.langSmith)
+      setLangSmithConfig(null)
+    else if (provider === TracingProvider.langfuse)
+      setLangFuseConfig(null)
+    else if (provider === TracingProvider.opik)
+      setOpikConfig(null)
+    if (provider === inUseTracingProvider) {
+      handleTracingStatusChange({
+        enabled: false,
+        tracing_provider: null,
+      }, true)
+    }
+  }
+
+  useEffect(() => {
+    (async () => {
+      const tracingStatus = await fetchTracingStatus({ appId })
+      setTracingStatus(tracingStatus)
+      await fetchTracingConfig()
+      setLoaded()
+    })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const [controlShowPopup, setControlShowPopup] = useState<number>(0)
+  const showPopup = useCallback(() => {
+    setControlShowPopup(Date.now())
+  }, [setControlShowPopup])
+  if (!isLoaded) {
+    return (
+      <div className='mb-3 flex items-center justify-between'>
+        <Title className='h-[41px]' />
+        <div className='w-[200px]'>
+          <Loading />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('mb-3 flex items-center justify-between')}>
+      <Title className='h-[41px]' />
+      <div
+        className={cn(
+          'flex cursor-pointer items-center rounded-xl border-l-[0.5px] border-t border-effects-highlight bg-background-default-dodge p-2 shadow-xs hover:border-effects-highlight-lightmode-off hover:bg-background-default-lighter',
+          controlShowPopup && 'border-effects-highlight-lightmode-off bg-background-default-lighter',
+        )}
+        onClick={showPopup}
+      >
+        {!inUseTracingProvider && (
+          <>
+            <TracingIcon size='md' />
+            <div className='system-sm-semibold mx-2 text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
+            <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}
+                opikConfig={opikConfig}
+                onConfigUpdated={handleTracingConfigUpdated}
+                onConfigRemoved={handleTracingConfigRemoved}
+                controlShowPopup={controlShowPopup}
+              />
+            </div>
+            <Divider type='vertical' className='h-3.5' />
+            <div className='rounded-md p-1'>
+              <RiArrowDownDoubleLine className='h-4 w-4 text-text-tertiary' />
+            </div>
+          </>
+        )}
+        {hasConfiguredTracing && (
+          <>
+            <div className='ml-4 mr-1 flex items-center'>
+              <Indicator color={enabled ? 'green' : 'gray'} />
+              <div className='system-xs-semibold-uppercase ml-1.5 text-text-tertiary'>
+                {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+              </div>
+            </div>
+            {InUseProviderIcon && <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}
+                opikConfig={opikConfig}
+                onConfigUpdated={handleTracingConfigUpdated}
+                onConfigRemoved={handleTracingConfigRemoved}
+                controlShowPopup={controlShowPopup}
+              />
+            </div>
+          </>
+        )}
+      </div >
+    </div >
+  )
+}
+export default React.memo(Panel)

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx

@@ -0,0 +1,339 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import Field from './field'
+import type { LangFuseConfig, LangSmithConfig, OpikConfig } from './type'
+import { TracingProvider } from './type'
+import { docURL } from './config'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Button from '@/app/components/base/button'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import Confirm from '@/app/components/base/confirm'
+import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
+import Toast from '@/app/components/base/toast'
+import Divider from '@/app/components/base/divider'
+
+type Props = {
+  appId: string
+  type: TracingProvider
+  payload?: LangSmithConfig | LangFuseConfig | OpikConfig | null
+  onRemoved: () => void
+  onCancel: () => void
+  onSaved: (payload: LangSmithConfig | LangFuseConfig | OpikConfig) => void
+  onChosen: (provider: TracingProvider) => void
+}
+
+const I18N_PREFIX = 'app.tracing.configProvider'
+
+const langSmithConfigTemplate = {
+  api_key: '',
+  project: '',
+  endpoint: '',
+}
+
+const langFuseConfigTemplate = {
+  public_key: '',
+  secret_key: '',
+  host: '',
+}
+
+const opikConfigTemplate = {
+  api_key: '',
+  project: '',
+  url: '',
+  workspace: '',
+}
+
+const ProviderConfigModal: FC<Props> = ({
+  appId,
+  type,
+  payload,
+  onRemoved,
+  onCancel,
+  onSaved,
+  onChosen,
+}) => {
+  const { t } = useTranslation()
+  const isEdit = !!payload
+  const isAdd = !isEdit
+  const [isSaving, setIsSaving] = useState(false)
+  const [config, setConfig] = useState<LangSmithConfig | LangFuseConfig | OpikConfig>((() => {
+    if (isEdit)
+      return payload
+
+    if (type === TracingProvider.langSmith)
+      return langSmithConfigTemplate
+
+    else if (type === TracingProvider.langfuse)
+      return langFuseConfigTemplate
+
+    return opikConfigTemplate
+  })())
+  const [isShowRemoveConfirm, {
+    setTrue: showRemoveConfirm,
+    setFalse: hideRemoveConfirm,
+  }] = useBoolean(false)
+
+  const handleRemove = useCallback(async () => {
+    await removeTracingConfig({
+      appId,
+      provider: type,
+    })
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.remove'),
+    })
+    onRemoved()
+    hideRemoveConfirm()
+  }, [hideRemoveConfirm, appId, type, t, onRemoved])
+
+  const handleConfigChange = useCallback((key: string) => {
+    return (value: string) => {
+      setConfig({
+        ...config,
+        [key]: value,
+      })
+    }
+  }, [config])
+
+  const checkValid = useCallback(() => {
+    let errorMessage = ''
+    if (type === TracingProvider.langSmith) {
+      const postData = config as LangSmithConfig
+      if (!postData.api_key)
+        errorMessage = t('common.errorMsg.fieldRequired', { field: 'API Key' })
+      if (!errorMessage && !postData.project)
+        errorMessage = t('common.errorMsg.fieldRequired', { field: t(`${I18N_PREFIX}.project`) })
+    }
+
+    if (type === TracingProvider.langfuse) {
+      const postData = config as LangFuseConfig
+      if (!errorMessage && !postData.secret_key)
+        errorMessage = t('common.errorMsg.fieldRequired', { field: t(`${I18N_PREFIX}.secretKey`) })
+      if (!errorMessage && !postData.public_key)
+        errorMessage = t('common.errorMsg.fieldRequired', { field: t(`${I18N_PREFIX}.publicKey`) })
+      if (!errorMessage && !postData.host)
+        errorMessage = t('common.errorMsg.fieldRequired', { field: 'Host' })
+    }
+
+    if (type === TracingProvider.opik) {
+      // todo: check field validity
+      // const postData = config as OpikConfig
+    }
+
+    return errorMessage
+  }, [config, t, type])
+  const handleSave = useCallback(async () => {
+    if (isSaving)
+      return
+    const errorMessage = checkValid()
+    if (errorMessage) {
+      Toast.notify({
+        type: 'error',
+        message: errorMessage,
+      })
+      return
+    }
+    const action = isEdit ? updateTracingConfig : addTracingConfig
+    try {
+      await action({
+        appId,
+        body: {
+          tracing_provider: type,
+          tracing_config: config,
+        },
+      })
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.success'),
+      })
+      onSaved(config)
+      if (isAdd)
+        onChosen(type)
+    }
+    finally {
+      setIsSaving(false)
+    }
+  }, [appId, checkValid, config, isAdd, isEdit, isSaving, onChosen, onSaved, t, type])
+
+  return (
+    <>
+      {!isShowRemoveConfirm
+        ? (
+          <PortalToFollowElem open>
+            <PortalToFollowElemContent className='z-[60] h-full w-full'>
+              <div className='fixed inset-0 flex items-center justify-center bg-background-overlay'>
+                <div className='mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl'>
+                  <div className='px-8 pt-8'>
+                    <div className='mb-4 flex items-center justify-between'>
+                      <div className='title-2xl-semi-bold text-text-primary'>{t(`${I18N_PREFIX}.title`)}{t(`app.tracing.${type}.title`)}</div>
+                    </div>
+
+                    <div className='space-y-4'>
+                      {type === TracingProvider.langSmith && (
+                        <>
+                          <Field
+                            label='API Key'
+                            labelClassName='!text-sm'
+                            isRequired
+                            value={(config as LangSmithConfig).api_key}
+                            onChange={handleConfigChange('api_key')}
+                            placeholder={t(`${I18N_PREFIX}.placeholder`, { key: 'API Key' })!}
+                          />
+                          <Field
+                            label={t(`${I18N_PREFIX}.project`)!}
+                            labelClassName='!text-sm'
+                            isRequired
+                            value={(config as LangSmithConfig).project}
+                            onChange={handleConfigChange('project')}
+                            placeholder={t(`${I18N_PREFIX}.placeholder`, { key: t(`${I18N_PREFIX}.project`) })!}
+                          />
+                          <Field
+                            label='Endpoint'
+                            labelClassName='!text-sm'
+                            value={(config as LangSmithConfig).endpoint}
+                            onChange={handleConfigChange('endpoint')}
+                            placeholder={'https://api.smith.langchain.com'}
+                          />
+                        </>
+                      )}
+                      {type === TracingProvider.langfuse && (
+                        <>
+                          <Field
+                            label={t(`${I18N_PREFIX}.secretKey`)!}
+                            labelClassName='!text-sm'
+                            value={(config as LangFuseConfig).secret_key}
+                            isRequired
+                            onChange={handleConfigChange('secret_key')}
+                            placeholder={t(`${I18N_PREFIX}.placeholder`, { key: t(`${I18N_PREFIX}.secretKey`) })!}
+                          />
+                          <Field
+                            label={t(`${I18N_PREFIX}.publicKey`)!}
+                            labelClassName='!text-sm'
+                            isRequired
+                            value={(config as LangFuseConfig).public_key}
+                            onChange={handleConfigChange('public_key')}
+                            placeholder={t(`${I18N_PREFIX}.placeholder`, { key: t(`${I18N_PREFIX}.publicKey`) })!}
+                          />
+                          <Field
+                            label='Host'
+                            labelClassName='!text-sm'
+                            isRequired
+                            value={(config as LangFuseConfig).host}
+                            onChange={handleConfigChange('host')}
+                            placeholder='https://cloud.langfuse.com'
+                          />
+                        </>
+                      )}
+                      {type === TracingProvider.opik && (
+                        <>
+                          <Field
+                            label='API Key'
+                            labelClassName='!text-sm'
+                            value={(config as OpikConfig).api_key}
+                            onChange={handleConfigChange('api_key')}
+                            placeholder={t(`${I18N_PREFIX}.placeholder`, { key: 'API Key' })!}
+                          />
+                          <Field
+                            label={t(`${I18N_PREFIX}.project`)!}
+                            labelClassName='!text-sm'
+                            value={(config as OpikConfig).project}
+                            onChange={handleConfigChange('project')}
+                            placeholder={t(`${I18N_PREFIX}.placeholder`, { key: t(`${I18N_PREFIX}.project`) })!}
+                          />
+                          <Field
+                            label='Workspace'
+                            labelClassName='!text-sm'
+                            value={(config as OpikConfig).workspace}
+                            onChange={handleConfigChange('workspace')}
+                            placeholder={'default'}
+                          />
+                          <Field
+                            label='Url'
+                            labelClassName='!text-sm'
+                            value={(config as OpikConfig).url}
+                            onChange={handleConfigChange('url')}
+                            placeholder={'https://www.comet.com/opik/api/'}
+                          />
+                        </>
+                      )}
+
+                    </div>
+                    <div className='my-8 flex h-8 items-center justify-between'>
+                      <a
+                        className='flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]'
+                        target='_blank'
+                        href={docURL[type]}
+                      >
+                        <span>{t(`${I18N_PREFIX}.viewDocsLink`, { key: t(`app.tracing.${type}.title`) })}</span>
+                        <LinkExternal02 className='h-3 w-3' />
+                      </a>
+                      <div className='flex items-center'>
+                        {isEdit && (
+                          <>
+                            <Button
+                              className='h-9 text-sm font-medium text-text-secondary'
+                              onClick={showRemoveConfirm}
+                            >
+                              <span className='text-[#D92D20]'>{t('common.operation.remove')}</span>
+                            </Button>
+                            <Divider className='mx-3 h-[18px]' />
+                          </>
+                        )}
+                        <Button
+                          className='mr-2 h-9 text-sm font-medium text-text-secondary'
+                          onClick={onCancel}
+                        >
+                          {t('common.operation.cancel')}
+                        </Button>
+                        <Button
+                          className='h-9 text-sm font-medium'
+                          variant='primary'
+                          onClick={handleSave}
+                          loading={isSaving}
+                        >
+                          {t(`common.operation.${isAdd ? 'saveAndEnable' : 'save'}`)}
+                        </Button>
+                      </div>
+
+                    </div>
+                  </div>
+                  <div className='border-t-[0.5px] border-divider-regular'>
+                    <div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
+                      <Lock01 className='mr-1 h-3 w-3 text-text-tertiary' />
+                      {t('common.modelProvider.encrypted.front')}
+                      <a
+                        className='mx-1 text-primary-600'
+                        target='_blank' rel='noopener noreferrer'
+                        href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+                      >
+                        PKCS1_OAEP
+                      </a>
+                      {t('common.modelProvider.encrypted.back')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </PortalToFollowElemContent>
+          </PortalToFollowElem>
+        )
+        : (
+          <Confirm
+            isShow
+            type='warning'
+            title={t(`${I18N_PREFIX}.removeConfirmTitle`, { key: t(`app.tracing.${type}.title`) })!}
+            content={t(`${I18N_PREFIX}.removeConfirmContent`)}
+            onConfirm={handleRemove}
+            onCancel={hideRemoveConfirm}
+          />
+        )}
+    </>
+  )
+}
+export default React.memo(ProviderConfigModal)

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -0,0 +1,103 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { TracingProvider } from './type'
+import cn from '@/utils/classnames'
+import { LangfuseIconBig, LangsmithIconBig, OpikIconBig } from '@/app/components/base/icons/src/public/tracing'
+import { Eye as View } from '@/app/components/base/icons/src/vender/solid/general'
+
+const I18N_PREFIX = 'app.tracing'
+
+type Props = {
+  type: TracingProvider
+  readOnly: boolean
+  isChosen: boolean
+  config: any
+  onChoose: () => void
+  hasConfigured: boolean
+  onConfig: () => void
+}
+
+const getIcon = (type: TracingProvider) => {
+  return ({
+    [TracingProvider.langSmith]: LangsmithIconBig,
+    [TracingProvider.langfuse]: LangfuseIconBig,
+    [TracingProvider.opik]: OpikIconBig,
+  })[type]
+}
+
+const ProviderPanel: FC<Props> = ({
+  type,
+  readOnly,
+  isChosen,
+  config,
+  onChoose,
+  hasConfigured,
+  onConfig,
+}) => {
+  const { t } = useTranslation()
+  const Icon = getIcon(type)
+
+  const handleConfigBtnClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    onConfig()
+  }, [onConfig])
+
+  const viewBtnClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const url = config?.project_url
+    if (url)
+      window.open(url, '_blank', 'noopener,noreferrer')
+  }, [config?.project_url])
+
+  const handleChosen = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isChosen || !hasConfigured || readOnly)
+      return
+    onChoose()
+  }, [hasConfigured, isChosen, onChoose, readOnly])
+  return (
+    <div
+      className={cn(
+        'rounded-xl border-[1.5px] bg-background-section-burn px-4 py-3',
+        isChosen ? 'border-components-option-card-option-selected-border bg-background-section' : 'border-transparent',
+        !isChosen && hasConfigured && !readOnly && 'cursor-pointer',
+      )}
+      onClick={handleChosen}
+    >
+      <div className={'flex items-center justify-between space-x-1'}>
+        <div className='flex items-center'>
+          <Icon className='h-6' />
+          {isChosen && <div className='system-2xs-medium-uppercase ml-1 flex h-4 items-center rounded-[4px] border border-text-accent-secondary px-1 text-text-accent-secondary'>{t(`${I18N_PREFIX}.inUse`)}</div>}
+        </div>
+        {!readOnly && (
+          <div className={'flex items-center justify-between space-x-1'}>
+            {hasConfigured && (
+              <div className='flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs' onClick={viewBtnClick} >
+                <View className='h-3 w-3' />
+                <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
+              </div>
+            )}
+            <div
+              className='flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs'
+              onClick={handleConfigBtnClick}
+            >
+              <RiEqualizer2Line className='h-3 w-3' />
+              <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className='system-xs-regular mt-2 text-text-tertiary'>
+        {t(`${I18N_PREFIX}.${type}.description`)}
+      </div>
+    </div>
+  )
+}
+export default React.memo(ProviderPanel)

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx

@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
+
+type Props = {
+  className?: string
+  size: 'lg' | 'md'
+}
+
+const sizeClassMap = {
+  lg: 'w-9 h-9 p-2 rounded-[10px]',
+  md: 'w-6 h-6 p-1 rounded-lg',
+}
+
+const TracingIcon: FC<Props> = ({
+  className,
+  size,
+}) => {
+  const sizeClass = sizeClassMap[size]
+  return (
+    <div className={cn(className, sizeClass, 'bg-primary-500 shadow-md')}>
+      <Icon className='h-full w-full' />
+    </div>
+  )
+}
+export default React.memo(TracingIcon)

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/type.ts

@@ -0,0 +1,24 @@
+export enum TracingProvider {
+  langSmith = 'langsmith',
+  langfuse = 'langfuse',
+  opik = 'opik',
+}
+
+export type LangSmithConfig = {
+  api_key: string
+  project: string
+  endpoint: string
+}
+
+export type LangFuseConfig = {
+  public_key: string
+  secret_key: string
+  host: string
+}
+
+export type OpikConfig = {
+  api_key: string
+  project: string
+  workspace: string
+  url: string
+}

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/style.module.css

@@ -0,0 +1,6 @@
+.app {
+    flex-grow: 1;
+    height: 0;
+    border-radius: 16px 16px 0px 0px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05), 0px 0px 2px -1px rgba(0, 0, 0, 0.03);
+}

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import Workflow from '@/app/components/workflow'
+
+const Page = () => {
+  return (
+    <div className='h-full w-full overflow-x-auto'>
+      <Workflow />
+    </div>
+  )
+}
+export default Page

dify_1.2.0/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx

@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { useAppContext } from '@/context/app-context'
+
+export type IAppDetail = {
+  children: React.ReactNode
+}
+
+const AppDetail: FC<IAppDetail> = ({ children }) => {
+  const router = useRouter()
+  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+
+  useEffect(() => {
+    if (isCurrentWorkspaceDatasetOperator)
+      return router.replace('/datasets')
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCurrentWorkspaceDatasetOperator])
+
+  return (
+    <>
+      {children}
+    </>
+  )
+}
+
+export default React.memo(AppDetail)

dify_1.2.0/web/app/(commonLayout)/apps/AppCard.tsx

@@ -0,0 +1,425 @@
+'use client'
+
+import { useContext, useContextSelector } from 'use-context-selector'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiMoreFill } from '@remixicon/react'
+import type { App } from '@/types/app'
+import Confirm from '@/app/components/base/confirm'
+import Toast, { ToastContext } from '@/app/components/base/toast'
+import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
+import DuplicateAppModal from '@/app/components/app/duplicate-modal'
+import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
+import AppIcon from '@/app/components/base/app-icon'
+import AppsContext, { useAppContext } from '@/context/app-context'
+import type { HtmlContentProps } from '@/app/components/base/popover'
+import CustomPopover from '@/app/components/base/popover'
+import Divider from '@/app/components/base/divider'
+import { getRedirection } from '@/utils/app-redirection'
+import { useProviderContext } from '@/context/provider-context'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
+import EditAppModal from '@/app/components/explore/create-app-modal'
+import SwitchAppModal from '@/app/components/app/switch-app-modal'
+import type { Tag } from '@/app/components/base/tag-management/constant'
+import TagSelector from '@/app/components/base/tag-management/selector'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
+import { fetchWorkflowDraft } from '@/service/workflow'
+import { fetchInstalledAppList } from '@/service/explore'
+import { AppTypeIcon } from '@/app/components/app/type-selector'
+import cn from '@/utils/classnames'
+
+export type AppCardProps = {
+  app: App
+  onRefresh?: () => void
+}
+
+const AppCard = ({ app, onRefresh }: AppCardProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const { onPlanInfoChanged } = useProviderContext()
+  const { push } = useRouter()
+
+  const mutateApps = useContextSelector(
+    AppsContext,
+    state => state.mutateApps,
+  )
+
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showDuplicateModal, setShowDuplicateModal] = useState(false)
+  const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
+
+  const onConfirmDelete = useCallback(async () => {
+    try {
+      await deleteApp(app.id)
+      notify({ type: 'success', message: t('app.appDeleted') })
+      if (onRefresh)
+        onRefresh()
+      mutateApps()
+      onPlanInfoChanged()
+    }
+    catch (e: any) {
+      notify({
+        type: 'error',
+        message: `${t('app.appDeleteFailed')}${'message' in e ? `: ${e.message}` : ''}`,
+      })
+    }
+    setShowConfirmDelete(false)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [app.id])
+
+  const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
+    name,
+    icon_type,
+    icon,
+    icon_background,
+    description,
+    use_icon_as_answer_icon,
+  }) => {
+    try {
+      await updateAppInfo({
+        appID: app.id,
+        name,
+        icon_type,
+        icon,
+        icon_background,
+        description,
+        use_icon_as_answer_icon,
+      })
+      setShowEditModal(false)
+      notify({
+        type: 'success',
+        message: t('app.editDone'),
+      })
+      if (onRefresh)
+        onRefresh()
+      mutateApps()
+    }
+    catch {
+      notify({ type: 'error', message: t('app.editFailed') })
+    }
+  }, [app.id, mutateApps, notify, onRefresh, t])
+
+  const onCopy: DuplicateAppModalProps['onConfirm'] = async ({ name, icon_type, icon, icon_background }) => {
+    try {
+      const newApp = await copyApp({
+        appID: app.id,
+        name,
+        icon_type,
+        icon,
+        icon_background,
+        mode: app.mode,
+      })
+      setShowDuplicateModal(false)
+      notify({
+        type: 'success',
+        message: t('app.newApp.appCreated'),
+      })
+      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
+      if (onRefresh)
+        onRefresh()
+      mutateApps()
+      onPlanInfoChanged()
+      getRedirection(isCurrentWorkspaceEditor, newApp, push)
+    }
+    catch {
+      notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
+    }
+  }
+
+  const onExport = async (include = false) => {
+    try {
+      const { data } = await exportAppConfig({
+        appID: app.id,
+        include,
+      })
+      const a = document.createElement('a')
+      const file = new Blob([data], { type: 'application/yaml' })
+      a.href = URL.createObjectURL(file)
+      a.download = `${app.name}.yml`
+      a.click()
+    }
+    catch {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
+  const exportCheck = async () => {
+    if (app.mode !== 'workflow' && app.mode !== 'advanced-chat') {
+      onExport()
+      return
+    }
+    try {
+      const workflowDraft = await fetchWorkflowDraft(`/apps/${app.id}/workflows/draft`)
+      const list = (workflowDraft.environment_variables || []).filter(env => env.value_type === 'secret')
+      if (list.length === 0) {
+        onExport()
+        return
+      }
+      setSecretEnvList(list)
+    }
+    catch {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
+  const onSwitch = () => {
+    if (onRefresh)
+      onRefresh()
+    mutateApps()
+    setShowSwitchModal(false)
+  }
+
+  const Operations = (props: HtmlContentProps) => {
+    const onMouseLeave = async () => {
+      props.onClose?.()
+    }
+    const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowEditModal(true)
+    }
+    const onClickDuplicate = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowDuplicateModal(true)
+    }
+    const onClickExport = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      exportCheck()
+    }
+    const onClickSwitch = async (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowSwitchModal(true)
+    }
+    const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowConfirmDelete(true)
+    }
+    const onClickInstalledApp = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      try {
+        const { installed_apps }: any = await fetchInstalledAppList(app.id) || {}
+        if (installed_apps?.length > 0)
+          window.open(`/explore/installed/${installed_apps[0].id}`, '_blank')
+        else
+          throw new Error('No app found in Explore')
+      }
+      catch (e: any) {
+        Toast.notify({ type: 'error', message: `${e.message || e}` })
+      }
+    }
+    return (
+      <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickSettings}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.editApp')}</span>
+        </button>
+        <Divider className="!my-1" />
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickDuplicate}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.duplicate')}</span>
+        </button>
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickExport}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.export')}</span>
+        </button>
+        {(app.mode === 'completion' || app.mode === 'chat') && (
+          <>
+            <Divider className="!my-1" />
+            <div
+              className='mx-1 flex h-9 cursor-pointer items-center rounded-lg px-3 py-2 hover:bg-state-base-hover'
+              onClick={onClickSwitch}
+            >
+              <span className='text-sm leading-5 text-text-secondary'>{t('app.switch')}</span>
+            </div>
+          </>
+        )}
+        <Divider className="!my-1" />
+        <button className='mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickInstalledApp}>
+          <span className='system-sm-regular text-text-secondary'>{t('app.openInExplore')}</span>
+        </button>
+        <Divider className="!my-1" />
+        <div
+          className='group mx-1 flex h-8 w-[calc(100%_-_8px)] cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
+          onClick={onClickDelete}
+        >
+          <span className='system-sm-regular text-text-secondary group-hover:text-text-destructive'>
+            {t('common.operation.delete')}
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  const [tags, setTags] = useState<Tag[]>(app.tags)
+  useEffect(() => {
+    setTags(app.tags)
+  }, [app.tags])
+
+  return (
+    <>
+      <div
+        onClick={(e) => {
+          e.preventDefault()
+          getRedirection(isCurrentWorkspaceEditor, app, push)
+        }}
+        className='group relative col-span-1 inline-flex h-[160px] cursor-pointer flex-col rounded-xl border-[1px] border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
+      >
+        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
+          <div className='relative shrink-0'>
+            <AppIcon
+              size="large"
+              iconType={app.icon_type}
+              icon={app.icon}
+              background={app.icon_background}
+              imageUrl={app.icon_url}
+            />
+            <AppTypeIcon type={app.mode} wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm' className='h-3 w-3' />
+          </div>
+          <div className='w-0 grow py-[1px]'>
+            <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
+              <div className='truncate' title={app.name}>{app.name}</div>
+            </div>
+            <div className='flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary'>
+              {app.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
+              {app.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
+              {app.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
+              {app.mode === 'workflow' && <div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>}
+              {app.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
+            </div>
+          </div>
+        </div>
+        <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
+          <div
+            className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')}
+            title={app.description}
+          >
+            {app.description}
+          </div>
+        </div>
+        <div className={cn(
+          'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
+          tags.length ? 'flex' : '!hidden group-hover:!flex',
+        )}>
+          {isCurrentWorkspaceEditor && (
+            <>
+              <div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
+                e.stopPropagation()
+                e.preventDefault()
+              }}>
+                <div className={cn(
+                  'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
+                  tags.length ? '!block' : '!hidden',
+                )}>
+                  <TagSelector
+                    position='bl'
+                    type='app'
+                    targetID={app.id}
+                    value={tags.map(tag => tag.id)}
+                    selectedTags={tags}
+                    onCacheUpdate={setTags}
+                    onChange={onRefresh}
+                  />
+                </div>
+              </div>
+              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
+              <div className='!hidden shrink-0 group-hover:!flex'>
+                <CustomPopover
+                  htmlContent={<Operations />}
+                  position="br"
+                  trigger="click"
+                  btnElement={
+                    <div
+                      className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
+                    >
+                      <RiMoreFill className='h-4 w-4 text-text-tertiary' />
+                    </div>
+                  }
+                  btnClassName={open =>
+                    cn(
+                      open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
+                      'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
+                    )
+                  }
+                  popupClassName={
+                    (app.mode === 'completion' || app.mode === 'chat')
+                      ? '!w-[256px] translate-x-[-224px]'
+                      : '!w-[160px] translate-x-[-128px]'
+                  }
+                  className={'!z-20 h-fit'}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {showEditModal && (
+        <EditAppModal
+          isEditModal
+          appName={app.name}
+          appIconType={app.icon_type}
+          appIcon={app.icon}
+          appIconBackground={app.icon_background}
+          appIconUrl={app.icon_url}
+          appDescription={app.description}
+          appMode={app.mode}
+          appUseIconAsAnswerIcon={app.use_icon_as_answer_icon}
+          show={showEditModal}
+          onConfirm={onEdit}
+          onHide={() => setShowEditModal(false)}
+        />
+      )}
+      {showDuplicateModal && (
+        <DuplicateAppModal
+          appName={app.name}
+          icon_type={app.icon_type}
+          icon={app.icon}
+          icon_background={app.icon_background}
+          icon_url={app.icon_url}
+          show={showDuplicateModal}
+          onConfirm={onCopy}
+          onHide={() => setShowDuplicateModal(false)}
+        />
+      )}
+      {showSwitchModal && (
+        <SwitchAppModal
+          show={showSwitchModal}
+          appDetail={app}
+          onClose={() => setShowSwitchModal(false)}
+          onSuccess={onSwitch}
+        />
+      )}
+      {showConfirmDelete && (
+        <Confirm
+          title={t('app.deleteAppConfirmTitle')}
+          content={t('app.deleteAppConfirmContent')}
+          isShow={showConfirmDelete}
+          onConfirm={onConfirmDelete}
+          onCancel={() => setShowConfirmDelete(false)}
+        />
+      )}
+      {secretEnvList.length > 0 && (
+        <DSLExportConfirmModal
+          envList={secretEnvList}
+          onConfirm={onExport}
+          onClose={() => setSecretEnvList([])}
+        />
+      )}
+    </>
+  )
+}
+
+export default AppCard

dify_1.2.0/web/app/(commonLayout)/apps/Apps.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  useRouter,
+} from 'next/navigation'
+import useSWRInfinite from 'swr/infinite'
+import { useTranslation } from 'react-i18next'
+import { useDebounceFn } from 'ahooks'
+import {
+  RiApps2Line,
+  RiExchange2Line,
+  RiFile4Line,
+  RiMessage3Line,
+  RiRobot3Line,
+} from '@remixicon/react'
+import AppCard from './AppCard'
+import NewAppCard from './NewAppCard'
+import useAppsQueryState from './hooks/useAppsQueryState'
+import type { AppListResponse } from '@/models/app'
+import { fetchAppList } from '@/service/apps'
+import { useAppContext } from '@/context/app-context'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { CheckModal } from '@/hooks/use-pay'
+import TabSliderNew from '@/app/components/base/tab-slider-new'
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import Input from '@/app/components/base/input'
+import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
+import TagManagementModal from '@/app/components/base/tag-management'
+import TagFilter from '@/app/components/base/tag-management/filter'
+import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
+
+const getKey = (
+  pageIndex: number,
+  previousPageData: AppListResponse,
+  activeTab: string,
+  isCreatedByMe: boolean,
+  tags: string[],
+  keywords: string,
+) => {
+  if (!pageIndex || previousPageData.has_more) {
+    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords, is_created_by_me: isCreatedByMe } }
+
+    if (activeTab !== 'all')
+      params.params.mode = activeTab
+    else
+      delete params.params.mode
+
+    if (tags.length)
+      params.params.tag_ids = tags
+
+    return params
+  }
+  return null
+}
+
+const Apps = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
+  const [activeTab, setActiveTab] = useTabSearchParams({
+    defaultTab: 'all',
+  })
+  const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
+  const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe)
+  const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
+  const [searchKeywords, setSearchKeywords] = useState(keywords)
+  const setKeywords = useCallback((keywords: string) => {
+    setQuery(prev => ({ ...prev, keywords }))
+  }, [setQuery])
+  const setTagIDs = useCallback((tagIDs: string[]) => {
+    setQuery(prev => ({ ...prev, tagIDs }))
+  }, [setQuery])
+
+  const { data, isLoading, setSize, mutate } = useSWRInfinite(
+    (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, activeTab, isCreatedByMe, tagIDs, searchKeywords),
+    fetchAppList,
+    { revalidateFirstPage: true },
+  )
+
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const options = [
+    { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'completion', text: t('app.types.completion'), icon: <RiFile4Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'advanced-chat', text: t('app.types.advanced'), icon: <RiMessage3Line className='mr-1 h-[14px] w-[14px]' /> },
+    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='mr-1 h-[14px] w-[14px]' /> },
+  ]
+
+  useEffect(() => {
+    document.title = `${t('common.menus.apps')} - Dify`
+    if (localStorage.getItem(NEED_REFRESH_APP_LIST_KEY) === '1') {
+      localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY)
+      mutate()
+    }
+  }, [mutate, t])
+
+  useEffect(() => {
+    if (isCurrentWorkspaceDatasetOperator)
+      return router.replace('/datasets')
+  }, [router, isCurrentWorkspaceDatasetOperator])
+
+  useEffect(() => {
+    const hasMore = data?.at(-1)?.has_more ?? true
+    let observer: IntersectionObserver | undefined
+    if (anchorRef.current) {
+      observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && !isLoading && hasMore)
+          setSize((size: number) => size + 1)
+      }, { rootMargin: '100px' })
+      observer.observe(anchorRef.current)
+    }
+    return () => observer?.disconnect()
+  }, [isLoading, setSize, anchorRef, mutate, data])
+
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
+  const { run: handleTagsUpdate } = useDebounceFn(() => {
+    setTagIDs(tagFilterValue)
+  }, { wait: 500 })
+  const handleTagsChange = (value: string[]) => {
+    setTagFilterValue(value)
+    handleTagsUpdate()
+  }
+
+  const handleCreatedByMeChange = useCallback(() => {
+    const newValue = !isCreatedByMe
+    setIsCreatedByMe(newValue)
+    setQuery(prev => ({ ...prev, isCreatedByMe: newValue }))
+  }, [isCreatedByMe, setQuery])
+
+  return (
+    <>
+      <div className='sticky top-0 z-10 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'>
+        <TabSliderNew
+          value={activeTab}
+          onChange={setActiveTab}
+          options={options}
+        />
+        <div className='flex items-center gap-2'>
+          <CheckboxWithLabel
+            className='mr-2'
+            label={t('app.showMyCreatedAppsOnly')}
+            isChecked={isCreatedByMe}
+            onChange={handleCreatedByMeChange}
+          />
+          <TagFilter type='app' value={tagFilterValue} onChange={handleTagsChange} />
+          <Input
+            showLeftIcon
+            showClearIcon
+            wrapperClassName='w-[200px]'
+            value={keywords}
+            onChange={e => handleKeywordsChange(e.target.value)}
+            onClear={() => handleKeywordsChange('')}
+          />
+        </div>
+      </div>
+      {(data && data[0].total > 0)
+        ? <div className='relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
+          {isCurrentWorkspaceEditor
+            && <NewAppCard onSuccess={mutate} />}
+          {data.map(({ data: apps }) => apps.map(app => (
+            <AppCard key={app.id} app={app} onRefresh={mutate} />
+          )))}
+        </div>
+        : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
+          {isCurrentWorkspaceEditor
+            && <NewAppCard className='z-10' onSuccess={mutate} />}
+          <NoAppsFound />
+        </div>}
+      <CheckModal />
+      <div ref={anchorRef} className='h-0'> </div>
+      {showTagManagementModal && (
+        <TagManagementModal type='app' show={showTagManagementModal} />
+      )}
+    </>
+  )
+}
+
+export default Apps
+
+function NoAppsFound() {
+  const { t } = useTranslation()
+  function renderDefaultCard() {
+    const defaultCards = Array.from({ length: 36 }, (_, index) => (
+      <div key={index} className='inline-flex h-[160px] rounded-xl bg-background-default-lighter'></div>
+    ))
+    return defaultCards
+  }
+  return (
+    <>
+      {renderDefaultCard()}
+      <div className='absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-gradient-to-t from-background-body to-transparent'>
+        <span className='system-md-medium text-text-tertiary'>{t('app.newApp.noAppsFound')}</span>
+      </div>
+    </>
+  )
+}

dify_1.2.0/web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import {
+  useRouter,
+  useSearchParams,
+} from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
+import CreateAppModal from '@/app/components/app/create-app-modal'
+import CreateFromDSLModal, { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-modal'
+import { useProviderContext } from '@/context/provider-context'
+import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
+import cn from '@/utils/classnames'
+
+export type CreateAppCardProps = {
+  className?: string
+  onSuccess?: () => void
+}
+
+const CreateAppCard = (
+  {
+    ref,
+    className,
+    onSuccess,
+  }: CreateAppCardProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  },
+) => {
+  const { t } = useTranslation()
+  const { onPlanInfoChanged } = useProviderContext()
+  const searchParams = useSearchParams()
+  const { replace } = useRouter()
+  const dslUrl = searchParams.get('remoteInstallUrl') || undefined
+
+  const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
+  const [showNewAppModal, setShowNewAppModal] = useState(false)
+  const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(!!dslUrl)
+
+  const activeTab = useMemo(() => {
+    if (dslUrl)
+      return CreateFromDSLModalTab.FROM_URL
+
+    return undefined
+  }, [dslUrl])
+
+  return (
+    <div
+      ref={ref}
+      className={cn('relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg', className)}
+    >
+      <div className='grow rounded-t-xl p-2'>
+        <div className='px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
+        <button className='mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppModal(true)}>
+          <FilePlus01 className='mr-2 h-4 w-4 shrink-0' />
+          {t('app.newApp.startFromBlank')}
+        </button>
+        <button className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppTemplateDialog(true)}>
+          <FilePlus02 className='mr-2 h-4 w-4 shrink-0' />
+          {t('app.newApp.startFromTemplate')}
+        </button>
+        <button
+          onClick={() => setShowCreateFromDSLModal(true)}
+          className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'>
+          <FileArrow01 className='mr-2 h-4 w-4 shrink-0' />
+          {t('app.importDSL')}
+        </button>
+      </div>
+
+      <CreateAppModal
+        show={showNewAppModal}
+        onClose={() => setShowNewAppModal(false)}
+        onSuccess={() => {
+          onPlanInfoChanged()
+          if (onSuccess)
+            onSuccess()
+        }}
+        onCreateFromTemplate={() => {
+          setShowNewAppTemplateDialog(true)
+          setShowNewAppModal(false)
+        }}
+      />
+      <CreateAppTemplateDialog
+        show={showNewAppTemplateDialog}
+        onClose={() => setShowNewAppTemplateDialog(false)}
+        onSuccess={() => {
+          onPlanInfoChanged()
+          if (onSuccess)
+            onSuccess()
+        }}
+        onCreateFromBlank={() => {
+          setShowNewAppModal(true)
+          setShowNewAppTemplateDialog(false)
+        }}
+      />
+      <CreateFromDSLModal
+        show={showCreateFromDSLModal}
+        onClose={() => {
+          setShowCreateFromDSLModal(false)
+
+          if (dslUrl)
+            replace('/')
+        }}
+        activeTab={activeTab}
+        dslUrl={dslUrl}
+        onSuccess={() => {
+          onPlanInfoChanged()
+          if (onSuccess)
+            onSuccess()
+        }}
+      />
+    </div>
+  )
+}
+
+CreateAppCard.displayName = 'CreateAppCard'
+export default CreateAppCard
+export { CreateAppCard }

dify_1.2.0/web/app/(commonLayout)/apps/assets/add.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 4V8M8 8V12M8 8H12M8 8H4" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/chat-solid.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.631586 8.25C0.631586 6.46656 2.04586 5 3.8158 5C5.58573 5 7.00001 6.46656 7.00001 8.25C7.00001 10.0334 5.58573 11.5 3.8158 11.5C3.45197 11.5 3.10149 11.4375 2.77474 11.3222C2.72073 11.3031 2.68723 11.2913 2.66266 11.2832C2.65821 11.2817 2.65456 11.2806 2.65164 11.2796L2.64892 11.2799C2.63177 11.2818 2.60839 11.285 2.56507 11.2909L1.06766 11.4954C0.905637 11.5175 0.743029 11.459 0.632239 11.3387C0.521449 11.2185 0.476481 11.0516 0.511825 10.8919L0.817497 9.51109C0.828118 9.46311 0.833802 9.43722 0.837453 9.41817C0.83766 9.4171 0.838022 9.41517 0.838022 9.41517C0.837114 9.412 0.835963 9.40808 0.834525 9.40332C0.826292 9.37605 0.814183 9.33888 0.794499 9.27863C0.688657 8.95463 0.631586 8.60857 0.631586 8.25Z" fill="#98A2B3"/>
+<path d="M2.57377 4.1863C2.96256 4.06535 3.37698 4 3.80894 4C6.16566 4 8.00006 5.94534 8.00006 8.24999C8.00006 8.65682 7.9429 9.05245 7.8358 9.42816C8.10681 9.37948 8.36964 9.30678 8.6219 9.21229C8.65748 9.19897 8.69298 9.18534 8.72893 9.17304C8.75795 9.17641 8.78684 9.18093 8.81574 9.18517L10.4222 9.42065C10.498 9.43179 10.5841 9.44444 10.6591 9.4487C10.7422 9.45343 10.8713 9.45292 11.0081 9.39408C11.1789 9.32061 11.3164 9.18628 11.3938 9.01716C11.4558 8.88174 11.4593 8.75269 11.4564 8.66955C11.4539 8.59442 11.4433 8.5081 11.4339 8.43202L11.2309 6.78307C11.2256 6.7402 11.2229 6.71768 11.2213 6.70118C11.23 6.66505 11.2466 6.6301 11.2598 6.59546C11.4492 6.09896 11.5526 5.56093 11.5526 5C11.5526 2.51163 9.52304 0.5 7.02632 0.5C4.80843 0.5 2.95915 2.08742 2.57377 4.1863Z" fill="#98A2B3"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/chat.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1667 6.66634H15.8333C16.2754 6.66634 16.6993 6.84194 17.0118 7.1545C17.3244 7.46706 17.5 7.89098 17.5 8.33301V13.333C17.5 13.775 17.3244 14.199 17.0118 14.5115C16.6993 14.8241 16.2754 14.9997 15.8333 14.9997H14.1667V18.333L10.8333 14.9997H7.5C7.28111 14.9999 7.06433 14.9569 6.86211 14.8731C6.6599 14.7893 6.47623 14.6663 6.32167 14.5113M6.32167 14.5113L9.16667 11.6663H12.5C12.942 11.6663 13.366 11.4907 13.6785 11.1782C13.9911 10.8656 14.1667 10.4417 14.1667 9.99967V4.99967C14.1667 4.55765 13.9911 4.13372 13.6785 3.82116C13.366 3.5086 12.942 3.33301 12.5 3.33301H4.16667C3.72464 3.33301 3.30072 3.5086 2.98816 3.82116C2.67559 4.13372 2.5 4.55765 2.5 4.99967V9.99967C2.5 10.4417 2.67559 10.8656 2.98816 11.1782C3.30072 11.4907 3.72464 11.6663 4.16667 11.6663H5.83333V14.9997L6.32167 14.5113Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/completion-solid.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.00779C6.5 0.994638 6.5 0.988062 6.49943 0.976137C6.48764 0.729248 6.27052 0.51224 6.02363 0.50056C6.01171 0.499996 6.0078 0.499998 6.00001 0.5H4.37933C3.97686 0.499995 3.64468 0.49999 3.37409 0.522098C3.09304 0.545061 2.83469 0.594343 2.59202 0.717989C2.2157 0.909735 1.90973 1.2157 1.71799 1.59202C1.59434 1.83469 1.54506 2.09304 1.5221 2.37409C1.49999 2.64468 1.49999 2.97686 1.5 3.37934V8.62066C1.49999 9.02313 1.49999 9.35532 1.5221 9.62591C1.54506 9.90696 1.59434 10.1653 1.71799 10.408C1.90973 10.7843 2.2157 11.0903 2.59202 11.282C2.83469 11.4057 3.09304 11.4549 3.37409 11.4779C3.64468 11.5 3.97686 11.5 4.37934 11.5H7.62066C8.02314 11.5 8.35532 11.5 8.62591 11.4779C8.90696 11.4549 9.16531 11.4057 9.40798 11.282C9.78431 11.0903 10.0903 10.7843 10.282 10.408C10.4057 10.1653 10.4549 9.90696 10.4779 9.62591C10.5 9.35532 10.5 9.02314 10.5 8.62066V4.99997C10.5 4.9922 10.5 4.98832 10.4994 4.97641C10.4878 4.72949 10.2707 4.51236 10.0238 4.50057C10.0119 4.50001 10.0054 4.50001 9.99225 4.50001L7.78404 4.50001C7.65786 4.50002 7.53496 4.50004 7.43089 4.49153C7.31659 4.48219 7.18172 4.46016 7.04601 4.39101C6.85785 4.29514 6.70487 4.14216 6.609 3.954C6.53985 3.81828 6.51781 3.68342 6.50848 3.56912C6.49997 3.46504 6.49999 3.34215 6.5 3.21596L6.5 1.00779ZM4 6.5C3.72386 6.5 3.5 6.72386 3.5 7C3.5 7.27614 3.72386 7.5 4 7.5H8C8.27614 7.5 8.5 7.27614 8.5 7C8.5 6.72386 8.27614 6.5 8 6.5H4ZM4 8.5C3.72386 8.5 3.5 8.72386 3.5 9C3.5 9.27614 3.72386 9.5 4 9.5H7C7.27614 9.5 7.5 9.27614 7.5 9C7.5 8.72386 7.27614 8.5 7 8.5H4Z" fill="#98A2B3"/>
+<path d="M9.45398 3.5C9.60079 3.5 9.67419 3.5 9.73432 3.46314C9.81925 3.41107 9.87002 3.28842 9.84674 3.19157C9.83025 3.12299 9.78238 3.07516 9.68665 2.97952L8.02049 1.31336C7.92484 1.21762 7.87701 1.16975 7.80843 1.15326C7.71158 1.12998 7.58893 1.18075 7.53687 1.26567C7.5 1.3258 7.5 1.39921 7.5 1.54602L7.5 3.09998C7.5 3.23999 7.5 3.30999 7.52725 3.36347C7.55122 3.41051 7.58946 3.44876 7.6365 3.47272C7.68998 3.49997 7.75998 3.49997 7.9 3.49998L9.45398 3.5Z" fill="#98A2B3"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/completion.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 11.875V9.6875C16.25 8.1342 14.9908 6.875 13.4375 6.875H12.1875C11.6697 6.875 11.25 6.45527 11.25 5.9375V4.6875C11.25 3.1342 9.9908 1.875 8.4375 1.875H6.875M6.875 12.5H13.125M6.875 15H10M8.75 1.875H4.6875C4.16973 1.875 3.75 2.29473 3.75 2.8125V17.1875C3.75 17.7053 4.16973 18.125 4.6875 18.125H15.3125C15.8303 18.125 16.25 17.7053 16.25 17.1875V9.375C16.25 5.23286 12.8921 1.875 8.75 1.875Z" stroke="#1F2A37" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/discord.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0101 4.50191C20.3529 3.74154 18.5759 3.18133 16.7179 2.86048C16.6841 2.85428 16.6503 2.86976 16.6328 2.90071C16.4043 3.30719 16.1511 3.83748 15.9738 4.25429C13.9754 3.95511 11.9873 3.95511 10.0298 4.25429C9.85253 3.82822 9.59019 3.30719 9.36062 2.90071C9.34319 2.87079 9.30939 2.85532 9.27555 2.86048C7.41857 3.18031 5.64152 3.74051 3.98335 4.50191C3.96899 4.5081 3.95669 4.51843 3.94852 4.53183C0.577841 9.56755 -0.345529 14.4795 0.107445 19.3306C0.109495 19.3543 0.122817 19.377 0.141265 19.3914C2.36514 21.0246 4.51935 22.0161 6.63355 22.6732C6.66739 22.6836 6.70324 22.6712 6.72477 22.6433C7.22489 21.9604 7.6707 21.2402 8.05293 20.4829C8.07549 20.4386 8.05396 20.386 8.00785 20.3684C7.30073 20.1002 6.6274 19.7731 5.97971 19.4017C5.92848 19.3718 5.92437 19.2985 5.9715 19.2635C6.1078 19.1613 6.24414 19.0551 6.37428 18.9478C6.39783 18.9282 6.43064 18.924 6.45833 18.9364C10.7134 20.8791 15.32 20.8791 19.5249 18.9364C19.5525 18.923 19.5854 18.9272 19.6099 18.9467C19.7401 19.054 19.8764 19.1613 20.0137 19.2635C20.0609 19.2985 20.0578 19.3718 20.0066 19.4017C19.3589 19.7804 18.6855 20.1002 17.9774 20.3674C17.9313 20.3849 17.9108 20.4386 17.9333 20.4829C18.3238 21.2392 18.7696 21.9593 19.2605 22.6423C19.281 22.6712 19.3179 22.6836 19.3517 22.6732C21.4761 22.0161 23.6303 21.0246 25.8542 19.3914C25.8737 19.377 25.886 19.3553 25.8881 19.3316C26.4302 13.7232 24.98 8.85156 22.0439 4.53286C22.0367 4.51843 22.0245 4.5081 22.0101 4.50191ZM8.68836 16.3768C7.40729 16.3768 6.35173 15.2007 6.35173 13.7563C6.35173 12.3119 7.38682 11.1358 8.68836 11.1358C10.0001 11.1358 11.0455 12.3222 11.025 13.7563C11.025 15.2007 9.98986 16.3768 8.68836 16.3768ZM17.3276 16.3768C16.0466 16.3768 14.991 15.2007 14.991 13.7563C14.991 12.3119 16.0261 11.1358 17.3276 11.1358C18.6394 11.1358 19.6847 12.3222 19.6643 13.7563C19.6643 15.2007 18.6394 16.3768 17.3276 16.3768Z" fill="#5865F2"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/github.svg

@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_131_1011)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0003 0.5C9.15149 0.501478 6.39613 1.51046 4.22687 3.34652C2.05761 5.18259 0.615903 7.72601 0.159545 10.522C-0.296814 13.318 0.261927 16.1842 1.73587 18.6082C3.20981 21.0321 5.50284 22.8558 8.20493 23.753C8.80105 23.8636 9.0256 23.4941 9.0256 23.18C9.0256 22.8658 9.01367 21.955 9.0097 20.9592C5.6714 21.6804 4.96599 19.5505 4.96599 19.5505C4.42152 18.1674 3.63464 17.8039 3.63464 17.8039C2.54571 17.065 3.71611 17.0788 3.71611 17.0788C4.92227 17.1637 5.55616 18.3097 5.55616 18.3097C6.62521 20.1333 8.36389 19.6058 9.04745 19.2976C9.15475 18.5251 9.46673 17.9995 9.8105 17.7012C7.14383 17.4008 4.34204 16.3774 4.34204 11.8054C4.32551 10.6197 4.76802 9.47305 5.57801 8.60268C5.45481 8.30236 5.04348 7.08923 5.69524 5.44143C5.69524 5.44143 6.7027 5.12135 8.9958 6.66444C10.9627 6.12962 13.0379 6.12962 15.0047 6.66444C17.2958 5.12135 18.3013 5.44143 18.3013 5.44143C18.9551 7.08528 18.5437 8.29841 18.4205 8.60268C19.2331 9.47319 19.6765 10.6218 19.6585 11.8094C19.6585 16.3912 16.8507 17.4008 14.1801 17.6952C14.6093 18.0667 14.9928 18.7918 14.9928 19.9061C14.9928 21.5026 14.9789 22.7868 14.9789 23.18C14.9789 23.4981 15.1955 23.8695 15.8035 23.753C18.5059 22.8557 20.7992 21.0317 22.2731 18.6073C23.747 16.183 24.3055 13.3163 23.8486 10.5201C23.3917 7.7238 21.9493 5.18035 19.7793 3.34461C17.6093 1.50886 14.8533 0.500541 12.0042 0.5H12.0003Z" fill="#191717"/>
+<path d="M4.54444 17.6321C4.5186 17.6914 4.42322 17.7092 4.34573 17.6677C4.26823 17.6262 4.21061 17.5491 4.23843 17.4879C4.26625 17.4266 4.35964 17.4108 4.43714 17.4523C4.51463 17.4938 4.57424 17.5729 4.54444 17.6321Z" fill="#191717"/>
+<path d="M5.03123 18.1714C4.99008 18.192 4.943 18.1978 4.89805 18.1877C4.8531 18.1776 4.81308 18.1523 4.78483 18.1161C4.70734 18.0331 4.69143 17.9185 4.75104 17.8671C4.81066 17.8157 4.91797 17.8395 4.99546 17.9224C5.07296 18.0054 5.09084 18.12 5.03123 18.1714Z" fill="#191717"/>
+<path d="M5.50425 18.857C5.43072 18.9084 5.30553 18.857 5.23598 18.7543C5.21675 18.7359 5.20146 18.7138 5.19101 18.6893C5.18056 18.6649 5.17517 18.6386 5.17517 18.612C5.17517 18.5855 5.18056 18.5592 5.19101 18.5347C5.20146 18.5103 5.21675 18.4882 5.23598 18.4698C5.3095 18.4204 5.4347 18.4698 5.50425 18.5705C5.57379 18.6713 5.57578 18.8057 5.50425 18.857V18.857Z" fill="#191717"/>
+<path d="M6.14612 19.5207C6.08054 19.5939 5.94741 19.5741 5.83812 19.4753C5.72883 19.3765 5.70299 19.2422 5.76857 19.171C5.83414 19.0999 5.96727 19.1197 6.08054 19.2165C6.1938 19.3133 6.21566 19.4496 6.14612 19.5207V19.5207Z" fill="#191717"/>
+<path d="M7.04617 19.9081C7.01637 20.001 6.88124 20.0425 6.74612 20.003C6.611 19.9635 6.52158 19.8528 6.54741 19.758C6.57325 19.6631 6.71036 19.6197 6.84747 19.6631C6.98457 19.7066 7.07201 19.8113 7.04617 19.9081Z" fill="#191717"/>
+<path d="M8.02783 19.9752C8.02783 20.072 7.91656 20.155 7.77349 20.1569C7.63042 20.1589 7.51318 20.0799 7.51318 19.9831C7.51318 19.8863 7.62445 19.8033 7.76752 19.8013C7.91059 19.7993 8.02783 19.8764 8.02783 19.9752Z" fill="#191717"/>
+<path d="M8.9419 19.8232C8.95978 19.92 8.86042 20.0207 8.71735 20.0445C8.57428 20.0682 8.4491 20.0109 8.43121 19.916C8.41333 19.8212 8.51666 19.7185 8.65576 19.6928C8.79485 19.6671 8.92401 19.7264 8.9419 19.8232Z" fill="#191717"/>
+</g>
+<defs>
+<clipPath id="clip0_131_1011">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/link-gray.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.41663 3.75033H3.24996C2.96264 3.75033 2.68709 3.86446 2.48393 4.06763C2.28076 4.27079 2.16663 4.54634 2.16663 4.83366V10.2503C2.16663 10.5376 2.28076 10.8132 2.48393 11.0164C2.68709 11.2195 2.96264 11.3337 3.24996 11.3337H8.66663C8.95394 11.3337 9.22949 11.2195 9.43266 11.0164C9.63582 10.8132 9.74996 10.5376 9.74996 10.2503V8.08366M7.58329 2.66699H10.8333M10.8333 2.66699V5.91699M10.8333 2.66699L5.41663 8.08366" stroke="#9CA3AF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/link.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.41663 3.75008H3.24996C2.96264 3.75008 2.68709 3.86422 2.48393 4.06738C2.28076 4.27055 2.16663 4.5461 2.16663 4.83341V10.2501C2.16663 10.5374 2.28076 10.8129 2.48393 11.0161C2.68709 11.2193 2.96264 11.3334 3.24996 11.3334H8.66663C8.95394 11.3334 9.22949 11.2193 9.43266 11.0161C9.63582 10.8129 9.74996 10.5374 9.74996 10.2501V8.08341M7.58329 2.66675H10.8333M10.8333 2.66675V5.91675M10.8333 2.66675L5.41663 8.08341" stroke="#1C64F2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/assets/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 2.5L10.5 6M10.5 6L7 9.5M10.5 6H1.5" stroke="#1C64F2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dify_1.2.0/web/app/(commonLayout)/apps/hooks/useAppsQueryState.ts

@@ -0,0 +1,60 @@
+import { type ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+type AppsQuery = {
+  tagIDs?: string[]
+  keywords?: string
+  isCreatedByMe?: boolean
+}
+
+// Parse the query parameters from the URL search string.
+function parseParams(params: ReadonlyURLSearchParams): AppsQuery {
+  const tagIDs = params.get('tagIDs')?.split(';')
+  const keywords = params.get('keywords') || undefined
+  const isCreatedByMe = params.get('isCreatedByMe') === 'true'
+  return { tagIDs, keywords, isCreatedByMe }
+}
+
+// Update the URL search string with the given query parameters.
+function updateSearchParams(query: AppsQuery, current: URLSearchParams) {
+  const { tagIDs, keywords, isCreatedByMe } = query || {}
+
+  if (tagIDs && tagIDs.length > 0)
+    current.set('tagIDs', tagIDs.join(';'))
+  else
+    current.delete('tagIDs')
+
+  if (keywords)
+    current.set('keywords', keywords)
+  else
+    current.delete('keywords')
+
+  if (isCreatedByMe)
+    current.set('isCreatedByMe', 'true')
+  else
+    current.delete('isCreatedByMe')
+}
+
+function useAppsQueryState() {
+  const searchParams = useSearchParams()
+  const [query, setQuery] = useState<AppsQuery>(() => parseParams(searchParams))
+
+  const router = useRouter()
+  const pathname = usePathname()
+  const syncSearchParams = useCallback((params: URLSearchParams) => {
+    const search = params.toString()
+    const query = search ? `?${search}` : ''
+    router.push(`${pathname}${query}`, { scroll: false })
+  }, [router, pathname])
+
+  // Update the URL search string whenever the query changes.
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams)
+    updateSearchParams(query, params)
+    syncSearchParams(params)
+  }, [query, searchParams, syncSearchParams])
+
+  return useMemo(() => ({ query, setQuery }), [query])
+}
+
+export default useAppsQueryState

dify_1.2.0/web/app/(commonLayout)/apps/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { useContextSelector } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
+import Link from 'next/link'
+import style from '../list.module.css'
+import Apps from './Apps'
+import AppContext from '@/context/app-context'
+import { LicenseStatus } from '@/types/feature'
+import { useEducationInit } from '@/app/education-apply/hooks'
+
+const AppList = () => {
+  const { t } = useTranslation()
+  useEducationInit()
+
+  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
+
+  return (
+    <div className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-background-body'>
+      <Apps />
+      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='shrink-0 grow-0 px-12 py-6'>
+        <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
+        <p className='system-sm-regular mt-1 text-text-tertiary'>{t('app.communityIntro')}</p>
+        <div className='mt-3 flex items-center gap-2'>
+          <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'>
+            <RiGithubFill className='h-5 w-5 text-text-tertiary' />
+          </Link>
+          <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'>
+            <RiDiscordFill className='h-5 w-5 text-text-tertiary' />
+          </Link>
+        </div>
+      </footer>}
+    </div >
+  )
+}
+
+export default AppList

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/api/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {}
+
+const page = (props: Props) => {
+  return (
+    <div>dataset detail api</div>
+  )
+}
+
+export default page

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/[documentId]/page.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import MainDetail from '@/app/components/datasets/documents/detail'
+
+export type IDocumentDetailProps = {
+  params: Promise<{ datasetId: string; documentId: string }>
+}
+
+const DocumentDetail = async (props: IDocumentDetailProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+    documentId,
+  } = params
+
+  return (
+    <MainDetail datasetId={datasetId} documentId={documentId} />
+  )
+}
+
+export default DocumentDetail

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/[documentId]/settings/page.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Settings from '@/app/components/datasets/documents/detail/settings'
+
+export type IProps = {
+  params: Promise<{ datasetId: string; documentId: string }>
+}
+
+const DocumentSettings = async (props: IProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+    documentId,
+  } = params
+
+  return (
+    <Settings datasetId={datasetId} documentId={documentId} />
+  )
+}
+
+export default DocumentSettings

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/create/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import DatasetUpdateForm from '@/app/components/datasets/create'
+
+export type IProps = {
+  params: Promise<{ datasetId: string }>
+}
+
+const Create = async (props: IProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+  } = params
+
+  return (
+    <DatasetUpdateForm datasetId={datasetId} />
+  )
+}
+
+export default Create

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Main from '@/app/components/datasets/documents'
+
+export type IProps = {
+  params: Promise<{ datasetId: string }>
+}
+
+const Documents = async (props: IProps) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+  } = params
+
+  return (
+    <Main datasetId={datasetId} />
+  )
+}
+
+export default Documents

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/style.module.css

@@ -0,0 +1,9 @@
+.logTable td {
+  padding: 7px 8px;
+  box-sizing: border-box;
+  max-width: 200px;
+}
+
+.pagination li {
+  list-style: none;
+}

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Main from '@/app/components/datasets/hit-testing'
+
+type Props = {
+  params: Promise<{ datasetId: string }>
+}
+
+const HitTesting = async (props: Props) => {
+  const params = await props.params
+
+  const {
+    datasetId,
+  } = params
+
+  return (
+    <Main datasetId={datasetId} />
+  )
+}
+
+export default HitTesting

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -0,0 +1,221 @@
+'use client'
+import type { FC, SVGProps } from 'react'
+import React, { useEffect, useMemo } from 'react'
+import { usePathname } from 'next/navigation'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import {
+  Cog8ToothIcon,
+  DocumentTextIcon,
+  PaperClipIcon,
+} from '@heroicons/react/24/outline'
+import {
+  Cog8ToothIcon as Cog8ToothSolidIcon,
+  // CommandLineIcon as CommandLineSolidIcon,
+  DocumentTextIcon as DocumentTextSolidIcon,
+} from '@heroicons/react/24/solid'
+import { RiApps2AddLine, RiBookOpenLine, RiInformation2Line } from '@remixicon/react'
+import s from './style.module.css'
+import classNames from '@/utils/classnames'
+import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
+import type { RelatedAppResponse } from '@/models/datasets'
+import AppSideBar from '@/app/components/app-sidebar'
+import Loading from '@/app/components/base/loading'
+import DatasetDetailContext from '@/context/dataset-detail'
+import { DataSourceType } from '@/models/datasets'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { LanguagesSupported } from '@/i18n/language'
+import { useStore } from '@/app/components/app/store'
+import { getLocaleOnClient } from '@/i18n'
+import { useAppContext } from '@/context/app-context'
+import Tooltip from '@/app/components/base/tooltip'
+import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
+
+export type IAppDetailLayoutProps = {
+  children: React.ReactNode
+  params: { datasetId: string }
+}
+
+const TargetIcon = ({ 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 ?? ''}>
+    <g clipPath="url(#clip0_4610_6951)">
+      <path d="M10.6666 5.33325V3.33325L12.6666 1.33325L13.3332 2.66659L14.6666 3.33325L12.6666 5.33325H10.6666ZM10.6666 5.33325L7.9999 7.99988M14.6666 7.99992C14.6666 11.6818 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6818 1.33325 7.99992C1.33325 4.31802 4.31802 1.33325 7.99992 1.33325M11.3333 7.99992C11.3333 9.84087 9.84087 11.3333 7.99992 11.3333C6.15897 11.3333 4.66659 9.84087 4.66659 7.99992C4.66659 6.15897 6.15897 4.66659 7.99992 4.66659" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+    <defs>
+      <clipPath id="clip0_4610_6951">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+}
+
+const TargetSolidIcon = ({ 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 fillRule="evenodd" clipRule="evenodd" d="M12.7733 0.67512C12.9848 0.709447 13.1669 0.843364 13.2627 1.03504L13.83 2.16961L14.9646 2.73689C15.1563 2.83273 15.2902 3.01486 15.3245 3.22639C15.3588 3.43792 15.2894 3.65305 15.1379 3.80458L13.1379 5.80458C13.0128 5.92961 12.8433 5.99985 12.6665 5.99985H10.9426L8.47124 8.47124C8.21089 8.73159 7.78878 8.73159 7.52843 8.47124C7.26808 8.21089 7.26808 7.78878 7.52843 7.52843L9.9998 5.05707V3.33318C9.9998 3.15637 10.07 2.9868 10.1951 2.86177L12.1951 0.861774C12.3466 0.710244 12.5617 0.640794 12.7733 0.67512Z" fill="#155EEF" />
+    <path d="M1.99984 7.99984C1.99984 4.68613 4.68613 1.99984 7.99984 1.99984C8.36803 1.99984 8.6665 1.70136 8.6665 1.33317C8.6665 0.964981 8.36803 0.666504 7.99984 0.666504C3.94975 0.666504 0.666504 3.94975 0.666504 7.99984C0.666504 12.0499 3.94975 15.3332 7.99984 15.3332C12.0499 15.3332 15.3332 12.0499 15.3332 7.99984C15.3332 7.63165 15.0347 7.33317 14.6665 7.33317C14.2983 7.33317 13.9998 7.63165 13.9998 7.99984C13.9998 11.3135 11.3135 13.9998 7.99984 13.9998C4.68613 13.9998 1.99984 11.3135 1.99984 7.99984Z" fill="#155EEF" />
+    <path d="M5.33317 7.99984C5.33317 6.52708 6.52708 5.33317 7.99984 5.33317C8.36803 5.33317 8.6665 5.03469 8.6665 4.6665C8.6665 4.29831 8.36803 3.99984 7.99984 3.99984C5.7907 3.99984 3.99984 5.7907 3.99984 7.99984C3.99984 10.209 5.7907 11.9998 7.99984 11.9998C10.209 11.9998 11.9998 10.209 11.9998 7.99984C11.9998 7.63165 11.7014 7.33317 11.3332 7.33317C10.965 7.33317 10.6665 7.63165 10.6665 7.99984C10.6665 9.4726 9.4726 10.6665 7.99984 10.6665C6.52708 10.6665 5.33317 9.4726 5.33317 7.99984Z" fill="#155EEF" />
+  </svg>
+}
+
+type IExtraInfoProps = {
+  isMobile: boolean
+  relatedApps?: RelatedAppResponse
+  expand: boolean
+}
+
+const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
+  const locale = getLocaleOnClient()
+  const [isShowTips, { toggle: toggleTips, set: setShowTips }] = useBoolean(!isMobile)
+  const { t } = useTranslation()
+
+  const hasRelatedApps = relatedApps?.data && relatedApps?.data?.length > 0
+  const relatedAppsTotal = relatedApps?.data?.length || 0
+
+  useEffect(() => {
+    setShowTips(!isMobile)
+  }, [isMobile, setShowTips])
+
+  return <div>
+    {hasRelatedApps && (
+      <>
+        {!isMobile && (
+          <Tooltip
+            position='right'
+            noDecoration
+            needsDelay
+            popupContent={
+              <LinkedAppsPanel
+                relatedApps={relatedApps.data}
+                isMobile={isMobile}
+              />
+            }
+          >
+            <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+              <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
+              <RiInformation2Line className='h-4 w-4' />
+            </div>
+          </Tooltip>
+        )}
+
+        {isMobile && <div className={classNames(s.subTitle, 'flex items-center justify-center !px-0 gap-1')}>
+          {relatedAppsTotal || '--'}
+          <PaperClipIcon className='h-4 w-4 text-gray-700' />
+        </div>}
+      </>
+    )}
+    {!hasRelatedApps && !expand && (
+      <Tooltip
+        position='right'
+        noDecoration
+        needsDelay
+        popupContent={
+          <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
+            <div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
+              <RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
+            </div>
+            <div className='my-2 text-xs text-text-tertiary'>{t('common.datasetMenus.emptyTip')}</div>
+            <a
+              className='mt-2 inline-flex cursor-pointer items-center text-xs text-text-accent'
+              href={
+                locale === LanguagesSupported[1]
+                  ? 'https://docs.dify.ai/v/zh-hans/guides/knowledge-base/integrate-knowledge-within-application'
+                  : 'https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'
+              }
+              target='_blank' rel='noopener noreferrer'
+            >
+              <RiBookOpenLine className='mr-1 text-text-accent' />
+              {t('common.datasetMenus.viewDoc')}
+            </a>
+          </div>
+        }
+      >
+        <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+          <span>{t('common.datasetMenus.noRelatedApp')}</span>
+          <RiInformation2Line className='h-4 w-4' />
+        </div>
+      </Tooltip>
+    )}
+  </div>
+}
+
+const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
+  const {
+    children,
+    params: { datasetId },
+  } = props
+  const pathname = usePathname()
+  const hideSideBar = /documents\/create$/.test(pathname)
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
+  const { data: datasetRes, error, mutate: mutateDatasetRes } = useSWR({
+    url: 'fetchDatasetDetail',
+    datasetId,
+  }, apiParams => fetchDatasetDetail(apiParams.datasetId))
+
+  const { data: relatedApps } = useSWR({
+    action: 'fetchDatasetRelatedApps',
+    datasetId,
+  }, apiParams => fetchDatasetRelatedApps(apiParams.datasetId))
+
+  const navigation = useMemo(() => {
+    const baseNavigation = [
+      { name: t('common.datasetMenus.hitTesting'), href: `/datasets/${datasetId}/hitTesting`, icon: TargetIcon, selectedIcon: TargetSolidIcon },
+      // { name: 'api & webhook', href: `/datasets/${datasetId}/api`, icon: CommandLineIcon, selectedIcon: CommandLineSolidIcon },
+      { name: t('common.datasetMenus.settings'), href: `/datasets/${datasetId}/settings`, icon: Cog8ToothIcon, selectedIcon: Cog8ToothSolidIcon },
+    ]
+
+    if (datasetRes?.provider !== 'external') {
+      baseNavigation.unshift({
+        name: t('common.datasetMenus.documents'),
+        href: `/datasets/${datasetId}/documents`,
+        icon: DocumentTextIcon,
+        selectedIcon: DocumentTextSolidIcon,
+      })
+    }
+    return baseNavigation
+  }, [datasetRes?.provider, datasetId, t])
+
+  useEffect(() => {
+    if (datasetRes)
+      document.title = `${datasetRes.name || 'Dataset'} - Dify`
+  }, [datasetRes])
+
+  const setAppSiderbarExpand = useStore(state => state.setAppSiderbarExpand)
+
+  useEffect(() => {
+    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+    const mode = isMobile ? 'collapse' : 'expand'
+    setAppSiderbarExpand(isMobile ? mode : localeMode)
+  }, [isMobile, setAppSiderbarExpand])
+
+  if (!datasetRes && !error)
+    return <Loading type='app' />
+
+  return (
+    <div className='flex grow overflow-hidden'>
+      {!hideSideBar && <AppSideBar
+        title={datasetRes?.name || '--'}
+        icon={datasetRes?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
+        icon_background={datasetRes?.icon_background || '#F5F5F5'}
+        desc={datasetRes?.description || '--'}
+        isExternal={datasetRes?.provider === 'external'}
+        navigation={navigation}
+        extraInfo={!isCurrentWorkspaceDatasetOperator ? mode => <ExtraInfo isMobile={mode === 'collapse'} relatedApps={relatedApps} expand={mode === 'collapse'} /> : undefined}
+        iconType={datasetRes?.data_source_type === DataSourceType.NOTION ? 'notion' : 'dataset'}
+      />}
+      <DatasetDetailContext.Provider value={{
+        indexingTechnique: datasetRes?.indexing_technique,
+        dataset: datasetRes,
+        mutateDatasetRes: () => mutateDatasetRes(),
+      }}>
+        <div className="grow overflow-hidden bg-background-default-subtle">{children}</div>
+      </DatasetDetailContext.Provider>
+    </div>
+  )
+}
+export default React.memo(DatasetDetailLayout)

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -0,0 +1,17 @@
+import Main from './layout-main'
+
+const DatasetDetailLayout = async (
+  props: {
+    children: React.ReactNode
+    params: Promise<{ datasetId: string }>
+  },
+) => {
+  const params = await props.params
+
+  const {
+    children,
+  } = props
+
+  return <Main params={(await params)}>{children}</Main>
+}
+export default DatasetDetailLayout

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
+import Form from '@/app/components/datasets/settings/form'
+
+const Settings = async () => {
+  const locale = await getLocaleOnServer()
+  const { t } = await translate(locale, 'dataset-settings')
+
+  return (
+    <div className='h-full overflow-y-auto'>
+      <div className='px-6 py-3'>
+        <div className='system-xl-semibold mb-1 text-text-primary'>{t('title')}</div>
+        <div className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
+      </div>
+      <Form />
+    </div>
+  )
+}
+
+export default Settings

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/style.module.css

@@ -0,0 +1,9 @@
+.statusPoint {
+  @apply flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded;
+}
+.subTitle {
+  @apply uppercase text-xs text-gray-500 font-medium px-3 pb-2 pt-4;
+}
+.emptyIconDiv {
+  @apply h-7 w-7 bg-gray-50 border border-[#EAECF5] inline-flex justify-center items-center rounded-lg;
+}

dify_1.2.0/web/app/(commonLayout)/datasets/(datasetDetailLayout)/layout.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react'
+import React from 'react'
+
+export type IDatasetDetail = {
+  children: React.ReactNode
+}
+
+const AppDetail: FC<IDatasetDetail> = ({ children }) => {
+  return (
+    <>
+      {children}
+    </>
+  )
+}
+
+export default React.memo(AppDetail)

dify_1.2.0/web/app/(commonLayout)/datasets/ApiServer.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import CopyFeedback from '@/app/components/base/copy-feedback'
+import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
+import { randomString } from '@/utils'
+
+type ApiServerProps = {
+  apiBaseUrl: string
+}
+const ApiServer: FC<ApiServerProps> = ({
+  apiBaseUrl,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex flex-wrap items-center gap-y-2'>
+      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'>
+        <div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div>
+        <div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div>
+        <div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div>
+        <CopyFeedback
+          content={apiBaseUrl}
+          selectorId={randomString(8)}
+          className={'!h-6 !w-6 hover:bg-gray-200'}
+        />
+      </div>
+      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
+        {t('appApi.ok')}
+      </div>
+      <SecretKeyButton
+        className='!h-8 shrink-0 bg-white'
+      />
+    </div>
+  )
+}
+
+export default ApiServer

dify_1.2.0/web/app/(commonLayout)/datasets/Container.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+// Libraries
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import { useBoolean, useDebounceFn } from 'ahooks'
+import { useQuery } from '@tanstack/react-query'
+
+// Components
+import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
+import Datasets from './Datasets'
+import DatasetFooter from './DatasetFooter'
+import ApiServer from './ApiServer'
+import Doc from './Doc'
+import TabSliderNew from '@/app/components/base/tab-slider-new'
+import TagManagementModal from '@/app/components/base/tag-management'
+import TagFilter from '@/app/components/base/tag-management/filter'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
+
+// Services
+import { fetchDatasetApiBaseUrl } from '@/service/datasets'
+
+// Hooks
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
+import { useAppContext } from '@/context/app-context'
+import { useExternalApiPanel } from '@/context/external-api-panel-context'
+
+const Container = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
+  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
+  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
+  const [includeAll, { toggle: toggleIncludeAll }] = useBoolean(false)
+
+  document.title = `${t('dataset.knowledge')} - Dify`
+
+  const options = useMemo(() => {
+    return [
+      { value: 'dataset', text: t('dataset.datasets') },
+      ...(currentWorkspace.role === 'dataset_operator' ? [] : [{ value: 'api', text: t('dataset.datasetsApi') }]),
+    ]
+  }, [currentWorkspace.role, t])
+
+  const [activeTab, setActiveTab] = useTabSearchParams({
+    defaultTab: 'dataset',
+  })
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { data } = useQuery(
+    {
+      queryKey: ['datasetApiBaseInfo'],
+      queryFn: () => fetchDatasetApiBaseUrl('/datasets/api-base-info'),
+      enabled: activeTab !== 'dataset',
+    },
+  )
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+  const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
+  const [tagIDs, setTagIDs] = useState<string[]>([])
+  const { run: handleTagsUpdate } = useDebounceFn(() => {
+    setTagIDs(tagFilterValue)
+  }, { wait: 500 })
+  const handleTagsChange = (value: string[]) => {
+    setTagFilterValue(value)
+    handleTagsUpdate()
+  }
+
+  useEffect(() => {
+    if (currentWorkspace.role === 'normal')
+      return router.replace('/apps')
+  }, [currentWorkspace, router])
+
+  return (
+    <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
+      <div className='sticky top-0 z-10 flex flex-wrap justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'>
+        <TabSliderNew
+          value={activeTab}
+          onChange={newActiveTab => setActiveTab(newActiveTab)}
+          options={options}
+        />
+        {activeTab === 'dataset' && (
+          <div className='flex items-center justify-center gap-2'>
+            {isCurrentWorkspaceOwner && <CheckboxWithLabel
+              isChecked={includeAll}
+              onChange={toggleIncludeAll}
+              label={t('dataset.allKnowledge')}
+              labelClassName='system-md-regular text-text-secondary'
+              className='mr-2'
+              tooltip={t('dataset.allKnowledgeDescription') as string}
+            />}
+            <TagFilter type='knowledge' value={tagFilterValue} onChange={handleTagsChange} />
+            <Input
+              showLeftIcon
+              showClearIcon
+              wrapperClassName='w-[200px]'
+              value={keywords}
+              onChange={e => handleKeywordsChange(e.target.value)}
+              onClear={() => handleKeywordsChange('')}
+            />
+            <div className="h-4 w-[1px] bg-divider-regular" />
+            <Button
+              className='shadows-shadow-xs gap-0.5'
+              onClick={() => setShowExternalApiPanel(true)}
+            >
+              <ApiConnectionMod className='h-4 w-4 text-components-button-secondary-text' />
+              <div className='system-sm-medium flex items-center justify-center gap-1 px-0.5 text-components-button-secondary-text'>{t('dataset.externalAPIPanelTitle')}</div>
+            </Button>
+          </div>
+        )}
+        {activeTab === 'api' && data && <ApiServer apiBaseUrl={data.api_base_url || ''} />}
+      </div>
+      {activeTab === 'dataset' && (
+        <>
+          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
+          <DatasetFooter />
+          {showTagManagementModal && (
+            <TagManagementModal type='knowledge' show={showTagManagementModal} />
+          )}
+        </>
+      )}
+      {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
+
+      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} />}
+    </div>
+  )
+}
+
+export default Container

dify_1.2.0/web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import { useContext } from 'use-context-selector'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiMoreFill } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Confirm from '@/app/components/base/confirm'
+import { ToastContext } from '@/app/components/base/toast'
+import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
+import type { DataSet } from '@/models/datasets'
+import Tooltip from '@/app/components/base/tooltip'
+import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
+import type { HtmlContentProps } from '@/app/components/base/popover'
+import CustomPopover from '@/app/components/base/popover'
+import Divider from '@/app/components/base/divider'
+import RenameDatasetModal from '@/app/components/datasets/rename-modal'
+import type { Tag } from '@/app/components/base/tag-management/constant'
+import TagSelector from '@/app/components/base/tag-management/selector'
+import CornerLabel from '@/app/components/base/corner-label'
+import { useAppContext } from '@/context/app-context'
+
+export type DatasetCardProps = {
+  dataset: DataSet
+  onSuccess?: () => void
+}
+
+const DatasetCard = ({
+  dataset,
+  onSuccess,
+}: DatasetCardProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { push } = useRouter()
+  const EXTERNAL_PROVIDER = 'external' as const
+
+  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const [tags, setTags] = useState<Tag[]>(dataset.tags)
+
+  const [showRenameModal, setShowRenameModal] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [confirmMessage, setConfirmMessage] = useState<string>('')
+  const isExternalProvider = (provider: string): boolean => provider === EXTERNAL_PROVIDER
+  const detectIsUsedByApp = useCallback(async () => {
+    try {
+      const { is_using: isUsedByApp } = await checkIsUsedInApp(dataset.id)
+      setConfirmMessage(isUsedByApp ? t('dataset.datasetUsedByApp')! : t('dataset.deleteDatasetConfirmContent')!)
+    }
+    catch (e: any) {
+      const res = await e.json()
+      notify({ type: 'error', message: res?.message || 'Unknown error' })
+    }
+
+    setShowConfirmDelete(true)
+  }, [dataset.id, notify, t])
+  const onConfirmDelete = useCallback(async () => {
+    try {
+      await deleteDataset(dataset.id)
+      notify({ type: 'success', message: t('dataset.datasetDeleted') })
+      if (onSuccess)
+        onSuccess()
+    }
+    catch (e: any) {
+    }
+    setShowConfirmDelete(false)
+  }, [dataset.id, notify, onSuccess, t])
+
+  const Operations = (props: HtmlContentProps & { showDelete: boolean }) => {
+    const onMouseLeave = async () => {
+      props.onClose?.()
+    }
+    const onClickRename = async (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowRenameModal(true)
+    }
+    const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      detectIsUsedByApp()
+    }
+    return (
+      <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
+        <div className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover' onClick={onClickRename}>
+          <span className='text-sm text-text-secondary'>{t('common.operation.settings')}</span>
+        </div>
+        {props.showDelete && (
+          <>
+            <Divider className="!my-1" />
+            <div
+              className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
+              onClick={onClickDelete}
+            >
+              <span className={cn('text-sm text-text-secondary', 'group-hover:text-text-destructive')}>
+                {t('common.operation.delete')}
+              </span>
+            </div>
+          </>
+        )}
+      </div>
+    )
+  }
+
+  useEffect(() => {
+    setTags(dataset.tags)
+  }, [dataset])
+
+  return (
+    <>
+      <div
+        className='group relative col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg'
+        data-disable-nprogress={true}
+        onClick={(e) => {
+          e.preventDefault()
+          isExternalProvider(dataset.provider)
+            ? push(`/datasets/${dataset.id}/hitTesting`)
+            : push(`/datasets/${dataset.id}/documents`)
+        }}
+      >
+        {isExternalProvider(dataset.provider) && <CornerLabel label='External' className='absolute right-0' labelClassName='rounded-tr-xl' />}
+        <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
+          <div className={cn(
+            'flex shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF] p-2.5',
+            !dataset.embedding_available && 'opacity-50 hover:opacity-100',
+          )}>
+            <Folder className='h-5 w-5 text-[#444CE7]' />
+          </div>
+          <div className='w-0 grow py-[1px]'>
+            <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
+              <div className={cn('truncate', !dataset.embedding_available && 'text-text-tertiary opacity-50 hover:opacity-100')} title={dataset.name}>{dataset.name}</div>
+              {!dataset.embedding_available && (
+                <Tooltip
+                  popupContent={t('dataset.unavailableTip')}
+                >
+                  <span className='ml-1 inline-flex w-max shrink-0 rounded-md border border-divider-regular px-1 text-xs font-normal leading-[18px] text-text-tertiary'>{t('dataset.unavailable')}</span>
+                </Tooltip>
+              )}
+            </div>
+            <div className='mt-[1px] flex items-center text-xs leading-[18px] text-text-tertiary'>
+              <div
+                className={cn('truncate', (!dataset.embedding_available || !dataset.document_count) && 'opacity-50')}
+                title={dataset.provider === 'external' ? `${dataset.app_count}${t('dataset.appCount')}` : `${dataset.document_count}${t('dataset.documentCount')} · ${Math.round(dataset.word_count / 1000)}${t('dataset.wordCount')} · ${dataset.app_count}${t('dataset.appCount')}`}
+              >
+                {dataset.provider === 'external'
+                  ? <>
+                    <span>{dataset.app_count}{t('dataset.appCount')}</span>
+                  </>
+                  : <>
+                    <span>{dataset.document_count}{t('dataset.documentCount')}</span>
+                    <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
+                    <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
+                    <span className='mx-0.5 w-1 shrink-0 text-text-tertiary'>·</span>
+                    <span>{dataset.app_count}{t('dataset.appCount')}</span>
+                  </>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
+            tags.length ? 'line-clamp-2' : 'line-clamp-4',
+            !dataset.embedding_available && 'opacity-50 hover:opacity-100',
+          )}
+          title={dataset.description}>
+          {dataset.description}
+        </div>
+        <div className={cn(
+          'mt-1 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
+          tags.length ? 'flex' : '!hidden group-hover:!flex',
+        )}>
+          <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+          }}>
+            <div className={cn(
+              'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
+              tags.length ? '!block' : '!hidden',
+            )}>
+              <TagSelector
+                position='bl'
+                type='knowledge'
+                targetID={dataset.id}
+                value={tags.map(tag => tag.id)}
+                selectedTags={tags}
+                onCacheUpdate={setTags}
+                onChange={onSuccess}
+              />
+            </div>
+          </div>
+          <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
+          <div className='!hidden shrink-0 group-hover:!flex'>
+            <CustomPopover
+              htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
+              position="br"
+              trigger="click"
+              btnElement={
+                <div
+                  className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-md'
+                >
+                  <RiMoreFill className='h-4 w-4 text-text-secondary' />
+                </div>
+              }
+              btnClassName={open =>
+                cn(
+                  open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
+                  'h-8 w-8 rounded-md border-none !p-2 hover:!bg-black/5',
+                )
+              }
+              className={'!z-20 h-fit !w-[128px]'}
+            />
+          </div>
+        </div>
+      </div>
+      {showRenameModal && (
+        <RenameDatasetModal
+          show={showRenameModal}
+          dataset={dataset}
+          onClose={() => setShowRenameModal(false)}
+          onSuccess={onSuccess}
+        />
+      )}
+      {showConfirmDelete && (
+        <Confirm
+          title={t('dataset.deleteDatasetConfirmTitle')}
+          content={confirmMessage}
+          isShow={showConfirmDelete}
+          onConfirm={onConfirmDelete}
+          onCancel={() => setShowConfirmDelete(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default DatasetCard

dify_1.2.0/web/app/(commonLayout)/datasets/DatasetFooter.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+const DatasetFooter = () => {
+  const { t } = useTranslation()
+
+  return (
+    <footer className='shrink-0 grow-0 px-12 py-6'>
+      <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('dataset.didYouKnow')}</h3>
+      <p className='mt-1 text-sm font-normal leading-tight text-text-secondary'>
+        {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
+        {t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro5')}</span>{t('dataset.intro6')}
+      </p>
+    </footer>
+  )
+}
+
+export default DatasetFooter

dify_1.2.0/web/app/(commonLayout)/datasets/Datasets.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useCallback, useEffect, useRef } from 'react'
+import useSWRInfinite from 'swr/infinite'
+import { debounce } from 'lodash-es'
+import { useTranslation } from 'react-i18next'
+import NewDatasetCard from './NewDatasetCard'
+import DatasetCard from './DatasetCard'
+import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
+import { fetchDatasets } from '@/service/datasets'
+import { useAppContext } from '@/context/app-context'
+
+const getKey = (
+  pageIndex: number,
+  previousPageData: DataSetListResponse,
+  tags: string[],
+  keyword: string,
+  includeAll: boolean,
+) => {
+  if (!pageIndex || previousPageData.has_more) {
+    const params: FetchDatasetsParams = {
+      url: 'datasets',
+      params: {
+        page: pageIndex + 1,
+        limit: 30,
+        include_all: includeAll,
+      },
+    }
+    if (tags.length)
+      params.params.tag_ids = tags
+    if (keyword)
+      params.params.keyword = keyword
+    return params
+  }
+  return null
+}
+
+type Props = {
+  containerRef: React.RefObject<HTMLDivElement>
+  tags: string[]
+  keywords: string
+  includeAll: boolean
+}
+
+const Datasets = ({
+  containerRef,
+  tags,
+  keywords,
+  includeAll,
+}: Props) => {
+  const { isCurrentWorkspaceEditor } = useAppContext()
+  const { data, isLoading, setSize, mutate } = useSWRInfinite(
+    (pageIndex: number, previousPageData: DataSetListResponse) => getKey(pageIndex, previousPageData, tags, keywords, includeAll),
+    fetchDatasets,
+    { revalidateFirstPage: false, revalidateAll: true },
+  )
+  const loadingStateRef = useRef(false)
+  const anchorRef = useRef<HTMLAnchorElement>(null)
+
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    loadingStateRef.current = isLoading
+    document.title = `${t('dataset.knowledge')} - Dify`
+  }, [isLoading, t])
+
+  const onScroll = useCallback(
+    debounce(() => {
+      if (!loadingStateRef.current && containerRef.current && anchorRef.current) {
+        const { scrollTop, clientHeight } = containerRef.current
+        const anchorOffset = anchorRef.current.offsetTop
+        if (anchorOffset - scrollTop - clientHeight < 100)
+          setSize(size => size + 1)
+      }
+    }, 50),
+    [setSize],
+  )
+
+  useEffect(() => {
+    const currentContainer = containerRef.current
+    currentContainer?.addEventListener('scroll', onScroll)
+    return () => {
+      currentContainer?.removeEventListener('scroll', onScroll)
+      onScroll.cancel()
+    }
+  }, [onScroll])
+
+  return (
+    <nav className='grid shrink-0 grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
+      { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
+      {data?.map(({ data: datasets }) => datasets.map(dataset => (
+        <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
+      ))}
+    </nav>
+  )
+}
+
+export default Datasets

dify_1.2.0/web/app/(commonLayout)/datasets/Doc.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import { RiListUnordered } from '@remixicon/react'
+import TemplateEn from './template/template.en.mdx'
+import TemplateZh from './template/template.zh.mdx'
+import TemplateJa from './template/template.ja.mdx'
+import I18n from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n/language'
+
+type DocProps = {
+  apiBaseUrl: string
+}
+
+const Doc = ({ apiBaseUrl }: DocProps) => {
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
+  const [isTocExpanded, setIsTocExpanded] = useState(false)
+
+  // Set initial TOC expanded state based on screen width
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 1280px)')
+    setIsTocExpanded(mediaQuery.matches)
+  }, [])
+
+  // Extract TOC from article content
+  useEffect(() => {
+    const extractTOC = () => {
+      const article = document.querySelector('article')
+      if (article) {
+        const headings = article.querySelectorAll('h2')
+        const tocItems = Array.from(headings).map((heading) => {
+          const anchor = heading.querySelector('a')
+          if (anchor) {
+            return {
+              href: anchor.getAttribute('href') || '',
+              text: anchor.textContent || '',
+            }
+          }
+          return null
+        }).filter((item): item is { href: string; text: string } => item !== null)
+        setToc(tocItems)
+      }
+    }
+
+    setTimeout(extractTOC, 0)
+  }, [locale])
+
+  // Handle TOC item click
+  const handleTocClick = (e: React.MouseEvent<HTMLAnchorElement>, item: { href: string; text: string }) => {
+    e.preventDefault()
+    const targetId = item.href.replace('#', '')
+    const element = document.getElementById(targetId)
+    if (element) {
+      const scrollContainer = document.querySelector('.scroll-container')
+      if (scrollContainer) {
+        const headerOffset = -40
+        const elementTop = element.offsetTop - headerOffset
+        scrollContainer.scrollTo({
+          top: elementTop,
+          behavior: 'smooth',
+        })
+      }
+    }
+  }
+
+  return (
+    <div className="flex">
+      <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
+        {isTocExpanded
+          ? (
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
+                <button
+                  onClick={() => setIsTocExpanded(false)}
+                  className="text-gray-500 hover:text-gray-700"
+                >
+                  ✕
+                </button>
+              </div>
+              <ul className="space-y-2">
+                {toc.map((item, index) => (
+                  <li key={index}>
+                    <a
+                      href={item.href}
+                      className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
+                      onClick={e => handleTocClick(e, item)}
+                    >
+                      {item.text}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          )
+          : (
+            <button
+              onClick={() => setIsTocExpanded(true)}
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
+            >
+              <RiListUnordered className="h-6 w-6" />
+            </button>
+          )}
+      </div>
+      <article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
+        {(() => {
+          switch (locale) {
+            case LanguagesSupported[1]:
+              return <TemplateZh apiBaseUrl={apiBaseUrl} />
+            case LanguagesSupported[7]:
+              return <TemplateJa apiBaseUrl={apiBaseUrl} />
+            default:
+              return <TemplateEn apiBaseUrl={apiBaseUrl} />
+          }
+        })()}
+      </article>
+    </div>
+  )
+}
+
+export default Doc

dify_1.2.0/web/app/(commonLayout)/datasets/NewDatasetCard.tsx

@@ -0,0 +1,41 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+  RiArrowRightLine,
+} from '@remixicon/react'
+
+const CreateAppCard = (
+  {
+    ref,
+    ..._
+  },
+) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='bg-background-default-dimm flex min-h-[160px] flex-col rounded-xl border-[0.5px]
+      border-components-panel-border transition-all duration-200 ease-in-out'
+    >
+      <a ref={ref} className='group flex grow cursor-pointer items-start p-4' href='/datasets/create'>
+        <div className='flex items-center gap-3'>
+          <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-regular bg-background-default-lighter
+            p-2 group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
+          >
+            <RiAddLine className='h-4 w-4 text-text-tertiary group-hover:text-text-accent'/>
+          </div>
+          <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
+        </div>
+      </a>
+      <div className='system-xs-regular p-4 pt-0 text-text-tertiary'>{t('dataset.createDatasetIntro')}</div>
+      <a className='group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle p-4' href='/datasets/connect'>
+        <div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
+        <RiArrowRightLine className='h-3.5 w-3.5 text-text-tertiary group-hover:text-text-accent' />
+      </a>
+    </div>
+  )
+}
+
+CreateAppCard.displayName = 'CreateAppCard'
+
+export default CreateAppCard

dify_1.2.0/web/app/(commonLayout)/datasets/connect/page.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ExternalKnowledgeBaseConnector from '@/app/components/datasets/external-knowledge-base/connector'
+
+const ExternalKnowledgeBaseCreation = () => {
+  return <ExternalKnowledgeBaseConnector />
+}
+
+export default ExternalKnowledgeBaseCreation

dify_1.2.0/web/app/(commonLayout)/datasets/create/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import DatasetUpdateForm from '@/app/components/datasets/create'
+
+type Props = {}
+
+const DatasetCreation = async (props: Props) => {
+  return (
+    <DatasetUpdateForm />
+  )
+}
+
+export default DatasetCreation

dify_1.2.0/web/app/(commonLayout)/datasets/layout.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { ExternalApiPanelProvider } from '@/context/external-api-panel-context'
+import { ExternalKnowledgeApiProvider } from '@/context/external-knowledge-api-context'
+
+export default function DatasetsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ExternalKnowledgeApiProvider>
+      <ExternalApiPanelProvider>
+        {children}
+      </ExternalApiPanelProvider>
+    </ExternalKnowledgeApiProvider>
+  )
+}

dify_1.2.0/web/app/(commonLayout)/datasets/page.tsx

@@ -0,0 +1,7 @@
+import Container from './Container'
+
+const AppList = async () => {
+  return <Container />
+}
+
+export default AppList

dify_1.2.0/web/app/(commonLayout)/datasets/store.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+type DatasetStore = {
+  showExternalApiPanel: boolean
+  setShowExternalApiPanel: (show: boolean) => void
+}
+
+export const useDatasetStore = create<DatasetStore>(set => ({
+  showExternalApiPanel: false,
+  setShowExternalApiPanel: show => set({ showExternalApiPanel: show }),
+}))

dify_1.2.0/web/app/(commonLayout)/education-apply/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import {
+  useEffect,
+  useMemo,
+} from 'react'
+import {
+  useRouter,
+  useSearchParams,
+} from 'next/navigation'
+import EducationApplyPage from '@/app/education-apply/education-apply-page'
+import { useProviderContext } from '@/context/provider-context'
+
+export default function EducationApply() {
+  const router = useRouter()
+  const { enableEducationPlan, isEducationAccount } = useProviderContext()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const showEducationApplyPage = useMemo(() => {
+    return enableEducationPlan && !isEducationAccount && token
+  }, [enableEducationPlan, isEducationAccount, token])
+
+  useEffect(() => {
+    if (!showEducationApplyPage)
+      router.replace('/')
+  }, [showEducationApplyPage, router])
+
+  return <EducationApplyPage />
+}

dify_1.2.0/web/app/(commonLayout)/explore/apps/page.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import AppList from '@/app/components/explore/app-list'
+
+const Apps = () => {
+  return <AppList />
+}
+
+export default React.memo(Apps)

dify_1.2.0/web/app/(commonLayout)/explore/installed/[appId]/page.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react'
+import React from 'react'
+import Main from '@/app/components/explore/installed-app'
+
+export type IInstalledAppProps = {
+  params: Promise<{
+    appId: string
+  }>
+}
+
+const InstalledApp: FC<IInstalledAppProps> = async ({ params }) => {
+  return (
+    <Main id={(await params).appId} />
+  )
+}
+export default React.memo(InstalledApp)

dify_1.2.0/web/app/(commonLayout)/explore/layout.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react'
+import React from 'react'
+import ExploreClient from '@/app/components/explore'
+export type IAppDetail = {
+  children: React.ReactNode
+}
+
+const AppDetail: FC<IAppDetail> = ({ children }) => {
+  return (
+    <ExploreClient>
+      {children}
+    </ExploreClient>
+  )
+}
+
+export default React.memo(AppDetail)

dify_1.2.0/web/app/(commonLayout)/layout.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import SwrInitor from '@/app/components/swr-initor'
+import { AppContextProvider } from '@/context/app-context'
+import GA, { GaType } from '@/app/components/base/ga'
+import HeaderWrapper from '@/app/components/header/header-wrapper'
+import Header from '@/app/components/header'
+import { EventEmitterContextProvider } from '@/context/event-emitter'
+import { ProviderContextProvider } from '@/context/provider-context'
+import { ModalContextProvider } from '@/context/modal-context'
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <GA gaType={GaType.admin} />
+      <SwrInitor>
+        <AppContextProvider>
+          <EventEmitterContextProvider>
+            <ProviderContextProvider>
+              <ModalContextProvider>
+                <HeaderWrapper>
+                  <Header />
+                </HeaderWrapper>
+                {children}
+              </ModalContextProvider>
+            </ProviderContextProvider>
+          </EventEmitterContextProvider>
+        </AppContextProvider>
+      </SwrInitor>
+    </>
+  )
+}
+
+export const metadata = {
+  title: 'Dify',
+}
+
+export default Layout

dify_1.2.0/web/app/(commonLayout)/list.module.css

@@ -0,0 +1,217 @@
+.listItem {
+  @apply col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-xs min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg;
+}
+
+.listItem.newItemCard {
+  @apply outline outline-1 outline-gray-200 -outline-offset-1 hover:shadow-sm hover:bg-white;
+  background-color: rgba(229, 231, 235, 0.5);
+}
+
+.listItem.selectable {
+  @apply relative bg-gray-50 outline outline-1 outline-gray-200 -outline-offset-1 shadow-none hover:bg-none hover:shadow-none hover:outline-primary-200 transition-colors;
+}
+
+.listItem.selectable * {
+  @apply relative;
+}
+
+.listItem.selectable::before {
+  content: "";
+  @apply absolute top-0 left-0 block w-full h-full rounded-lg pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out hover:opacity-100;
+  background: linear-gradient(0deg,
+      rgba(235, 245, 255, 0.5),
+      rgba(235, 245, 255, 0.5)),
+    #ffffff;
+}
+
+.listItem.selectable:hover::before {
+  @apply opacity-100;
+}
+
+.listItem.selected {
+  @apply border-primary-600 hover:border-primary-600 border-2;
+}
+
+.listItem.selected::before {
+  @apply opacity-100;
+}
+
+.appIcon {
+  @apply flex items-center justify-center w-8 h-8 bg-pink-100 rounded-lg grow-0 shrink-0;
+}
+
+.appIcon.medium {
+  @apply w-9 h-9;
+}
+
+.appIcon.large {
+  @apply w-10 h-10;
+}
+
+.newItemIcon {
+  @apply flex items-center justify-center w-8 h-8 transition-colors duration-200 ease-in-out border border-gray-200 rounded-lg hover:bg-white grow-0 shrink-0;
+}
+
+.listItem:hover .newItemIcon {
+  @apply bg-gray-50 border-primary-100;
+}
+
+.newItemCard .newItemIcon {
+  @apply bg-gray-100;
+}
+
+.newItemCard:hover .newItemIcon {
+  @apply bg-white;
+}
+
+.selectable .newItemIcon {
+  @apply bg-gray-50;
+}
+
+.selectable:hover .newItemIcon {
+  @apply bg-primary-50;
+}
+
+.newItemIconImage {
+  @apply grow-0 shrink-0 block w-4 h-4 bg-center bg-contain transition-colors duration-200 ease-in-out;
+  color: #1f2a37;
+}
+
+.listItem:hover .newIconImage {
+  @apply text-primary-600;
+}
+
+.newItemIconAdd {
+  background-image: url("./apps/assets/add.svg");
+}
+
+/* .newItemIconChat {
+  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot.svg");
+}
+
+.selected .newItemIconChat {
+  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg");
+} */
+
+.newItemIconComplete {
+  background-image: url("./apps/assets/completion.svg");
+}
+
+.listItemTitle {
+  @apply flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0;
+}
+
+.listItemHeading {
+  @apply relative h-8 text-sm font-medium leading-8 grow;
+}
+
+.listItemHeadingContent {
+  @apply absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.actionIconWrapper {
+  @apply hidden h-8 w-8 p-2 rounded-md border-none hover:bg-gray-100 !important;
+}
+
+.listItem:hover .actionIconWrapper {
+  @apply !inline-flex;
+}
+
+.deleteDatasetIcon {
+  @apply hidden grow-0 shrink-0 basis-8 w-8 h-8 rounded-lg transition-colors duration-200 ease-in-out bg-white border border-gray-200 hover:bg-gray-100 bg-center bg-no-repeat;
+  background-size: 16px;
+  background-image: url('~@/assets/delete.svg');
+}
+
+.listItem:hover .deleteDatasetIcon {
+  @apply block;
+}
+
+.listItemDescription {
+  @apply mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2;
+}
+
+.listItemDescription.noClip {
+  @apply line-clamp-none;
+}
+
+.listItemFooter {
+  @apply flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px];
+}
+
+.listItemFooter.datasetCardFooter {
+  @apply flex items-center gap-4 text-xs text-gray-500;
+}
+
+.listItemStats {
+  @apply flex items-center gap-1;
+}
+
+.listItemFooterIcon {
+  @apply block w-3 h-3 bg-center bg-contain;
+}
+
+.solidChatIcon {
+  background-image: url("./apps/assets/chat-solid.svg");
+}
+
+.solidCompletionIcon {
+  background-image: url("./apps/assets/completion-solid.svg");
+}
+
+.newItemCardHeading {
+  @apply transition-colors duration-200 ease-in-out;
+}
+
+.listItem:hover .newItemCardHeading {
+  @apply text-primary-600;
+}
+
+.listItemLink {
+  @apply inline-flex items-center gap-1 text-xs text-gray-400 transition-colors duration-200 ease-in-out;
+}
+
+.listItem:hover .listItemLink {
+  @apply text-primary-600;
+}
+
+.linkIcon {
+  @apply block w-[13px] h-[13px] bg-center bg-contain;
+  background-image: url("./apps/assets/link.svg");
+}
+
+.linkIcon.grayLinkIcon {
+  background-image: url("./apps/assets/link-gray.svg");
+}
+
+.listItem:hover .grayLinkIcon {
+  background-image: url("./apps/assets/link.svg");
+}
+
+.rightIcon {
+  @apply block w-[13px] h-[13px] bg-center bg-contain;
+  background-image: url("./apps/assets/right-arrow.svg");
+}
+
+.socialMediaLink {
+  @apply flex items-center justify-center w-8 h-8 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;
+}
+
+.socialMediaIcon {
+  @apply block w-6 h-6 bg-center bg-contain;
+}
+
+/* #region new app dialog */
+.newItemCaption {
+  @apply inline-flex items-center mb-2 text-sm font-medium;
+}
+
+/* #endregion new app dialog */
+
+.unavailable {
+  @apply opacity-50;
+}
+
+.listItem:hover .unavailable {
+  @apply opacity-100;
+}

dify_1.2.0/web/app/(commonLayout)/plugins/page.tsx

@@ -0,0 +1,16 @@
+import PluginPage from '@/app/components/plugins/plugin-page'
+import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
+import Marketplace from '@/app/components/plugins/marketplace'
+import { getLocaleOnServer } from '@/i18n/server'
+
+const PluginList = async () => {
+  const locale = await getLocaleOnServer()
+  return (
+    <PluginPage
+      plugins={<PluginsPanel />}
+      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName='top-[60px]' searchBoxAutoAnimate={false} />}
+    />
+  )
+}
+
+export default PluginList

dify_1.2.0/web/app/(commonLayout)/tools/page.tsx

@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import React, { useEffect } from 'react'
+import ToolProviderList from '@/app/components/tools/provider-list'
+import { useAppContext } from '@/context/app-context'
+
+const Layout: FC = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+
+  useEffect(() => {
+    if (typeof window !== 'undefined')
+      document.title = `${t('tools.title')} - Dify`
+    if (isCurrentWorkspaceDatasetOperator)
+      return router.replace('/datasets')
+  }, [isCurrentWorkspaceDatasetOperator, router, t])
+
+  useEffect(() => {
+    if (isCurrentWorkspaceDatasetOperator)
+      return router.replace('/datasets')
+  }, [isCurrentWorkspaceDatasetOperator, router])
+
+  return <ToolProviderList />
+}
+export default React.memo(Layout)

dify_1.2.0/web/app/(shareLayout)/chat/[token]/page.tsx

@@ -0,0 +1,11 @@
+'use client'
+import React from 'react'
+import ChatWithHistoryWrap from '@/app/components/base/chat/chat-with-history'
+
+const Chat = () => {
+  return (
+    <ChatWithHistoryWrap />
+  )
+}
+
+export default React.memo(Chat)

dify_1.2.0/web/app/(shareLayout)/chatbot/[token]/page.tsx

@@ -0,0 +1,11 @@
+'use client'
+import React from 'react'
+import EmbeddedChatbot from '@/app/components/base/chat/embedded-chatbot'
+
+const Chatbot = () => {
+  return (
+    <EmbeddedChatbot />
+  )
+}
+
+export default React.memo(Chatbot)

dify_1.2.0/web/app/(shareLayout)/completion/[token]/page.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Main from '@/app/components/share/text-generation'
+
+const Completion = () => {
+  return (
+    <Main />
+  )
+}
+
+export default React.memo(Completion)

dify_1.2.0/web/app/(shareLayout)/layout.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { FC } from 'react'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  icons: 'data:,', // prevent browser from using default favicon
+}
+
+const Layout: FC<{
+  children: React.ReactNode
+}> = ({ children }) => {
+  return (
+    <div className="h-full min-w-[300px] pb-[env(safe-area-inset-bottom)]">
+      {children}
+    </div>
+  )
+}
+
+export default Layout

dify_1.2.0/web/app/(shareLayout)/webapp-signin/page.tsx

@@ -0,0 +1,103 @@
+'use client'
+import { useRouter, useSearchParams } from 'next/navigation'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import cn from '@/utils/classnames'
+import Toast from '@/app/components/base/toast'
+import { fetchSystemFeatures, fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
+import { setAccessToken } from '@/app/components/share/utils'
+import Loading from '@/app/components/base/loading'
+
+const WebSSOForm: FC = () => {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+
+  const redirectUrl = searchParams.get('redirect_url')
+  const tokenFromUrl = searchParams.get('web_sso_token')
+  const message = searchParams.get('message')
+
+  const showErrorToast = (message: string) => {
+    Toast.notify({
+      type: 'error',
+      message,
+    })
+  }
+
+  const getAppCodeFromRedirectUrl = () => {
+    const appCode = redirectUrl?.split('/').pop()
+    if (!appCode)
+      return null
+
+    return appCode
+  }
+
+  const processTokenAndRedirect = async () => {
+    const appCode = getAppCodeFromRedirectUrl()
+    if (!appCode || !tokenFromUrl || !redirectUrl) {
+      showErrorToast('redirect url or app code or token is invalid.')
+      return
+    }
+
+    await setAccessToken(appCode, tokenFromUrl)
+    router.push(redirectUrl)
+  }
+
+  const handleSSOLogin = async (protocol: string) => {
+    const appCode = getAppCodeFromRedirectUrl()
+    if (!appCode || !redirectUrl) {
+      showErrorToast('redirect url or app code is invalid.')
+      return
+    }
+
+    switch (protocol) {
+      case 'saml': {
+        const samlRes = await fetchWebSAMLSSOUrl(appCode, redirectUrl)
+        router.push(samlRes.url)
+        break
+      }
+      case 'oidc': {
+        const oidcRes = await fetchWebOIDCSSOUrl(appCode, redirectUrl)
+        router.push(oidcRes.url)
+        break
+      }
+      case 'oauth2': {
+        const oauth2Res = await fetchWebOAuth2SSOUrl(appCode, redirectUrl)
+        router.push(oauth2Res.url)
+        break
+      }
+      default:
+        showErrorToast('SSO protocol is not supported.')
+    }
+  }
+
+  useEffect(() => {
+    const init = async () => {
+      const res = await fetchSystemFeatures()
+      const protocol = res.sso_enforced_for_web_protocol
+
+      if (message) {
+        showErrorToast(message)
+        return
+      }
+
+      if (!tokenFromUrl) {
+        await handleSSOLogin(protocol)
+        return
+      }
+
+      await processTokenAndRedirect()
+    }
+
+    init()
+  }, [message, tokenFromUrl]) // Added dependencies to useEffect
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className={cn('flex w-full grow flex-col items-center justify-center', 'px-6', 'md:px-[108px]')}>
+        <Loading type='area' />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(WebSSOForm)

dify_1.2.0/web/app/(shareLayout)/workflow/[token]/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import Main from '@/app/components/share/text-generation'
+
+const Workflow = () => {
+  return (
+    <Main isWorkflow />
+  )
+}
+
+export default React.memo(Workflow)

dify_1.2.0/web/app/account/account-page/AvatarWithEdit.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import type { Area } from 'react-easy-crop'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { RiPencilLine } from '@remixicon/react'
+import { updateUserProfile } from '@/service/common'
+import { ToastContext } from '@/app/components/base/toast'
+import ImageInput, { type OnImageInput } from '@/app/components/base/app-icon-picker/ImageInput'
+import Modal from '@/app/components/base/modal'
+import Divider from '@/app/components/base/divider'
+import Button from '@/app/components/base/button'
+import Avatar, { type AvatarProps } from '@/app/components/base/avatar'
+import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
+import type { ImageFile } from '@/types/app'
+import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
+import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
+
+type InputImageInfo = { file: File } | { tempUrl: string; croppedAreaPixels: Area; fileName: string }
+type AvatarWithEditProps = AvatarProps & { onSave?: () => void }
+
+const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+
+  const [inputImageInfo, setInputImageInfo] = useState<InputImageInfo>()
+  const [isShowAvatarPicker, setIsShowAvatarPicker] = useState(false)
+  const [uploading, setUploading] = useState(false)
+
+  const handleImageInput: OnImageInput = useCallback(async (isCropped: boolean, fileOrTempUrl: string | File, croppedAreaPixels?: Area, fileName?: string) => {
+    setInputImageInfo(
+      isCropped
+        ? { tempUrl: fileOrTempUrl as string, croppedAreaPixels: croppedAreaPixels!, fileName: fileName! }
+        : { file: fileOrTempUrl as File },
+    )
+  }, [setInputImageInfo])
+
+  const handleSaveAvatar = useCallback(async (uploadedFileId: string) => {
+    try {
+      await updateUserProfile({ url: 'account/avatar', body: { avatar: uploadedFileId } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      setIsShowAvatarPicker(false)
+      onSave?.()
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+  }, [notify, onSave, t])
+
+  const { handleLocalFileUpload } = useLocalFileUploader({
+    limit: 3,
+    disabled: false,
+    onUpload: (imageFile: ImageFile) => {
+      if (imageFile.progress === 100) {
+        setUploading(false)
+        setInputImageInfo(undefined)
+        handleSaveAvatar(imageFile.fileId)
+      }
+
+      // Error
+      if (imageFile.progress === -1)
+        setUploading(false)
+    },
+  })
+
+  const handleSelect = useCallback(async () => {
+    if (!inputImageInfo)
+      return
+    setUploading(true)
+    if ('file' in inputImageInfo) {
+      handleLocalFileUpload(inputImageInfo.file)
+      return
+    }
+    const blob = await getCroppedImg(inputImageInfo.tempUrl, inputImageInfo.croppedAreaPixels, inputImageInfo.fileName)
+    const file = new File([blob], inputImageInfo.fileName, { type: blob.type })
+    handleLocalFileUpload(file)
+  }, [handleLocalFileUpload, inputImageInfo])
+
+  if (DISABLE_UPLOAD_IMAGE_AS_ICON)
+    return <Avatar {...props} />
+
+  return (
+    <>
+      <div>
+        <div className="group relative">
+          <Avatar {...props} />
+          <div
+            onClick={() => { setIsShowAvatarPicker(true) }}
+            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-50 opacity-0 transition-opacity group-hover:opacity-100"
+          >
+            <span className="text-xs text-white">
+              <RiPencilLine />
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        closable
+        className="!w-[362px] !p-0"
+        isShow={isShowAvatarPicker}
+        onClose={() => setIsShowAvatarPicker(false)}
+      >
+        <ImageInput onImageInput={handleImageInput} cropShape='round' />
+        <Divider className='m-0' />
+
+        <div className='flex w-full items-center justify-center gap-2 p-3'>
+          <Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
+            {t('app.iconPicker.cancel')}
+          </Button>
+
+          <Button variant="primary" className='w-full' disabled={uploading || !inputImageInfo} loading={uploading} onClick={handleSelect}>
+            {t('app.iconPicker.ok')}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default AvatarWithEdit

dify_1.2.0/web/app/account/account-page/index.module.css

@@ -0,0 +1,9 @@
+.modal {
+  padding: 24px 32px !important;
+  width: 400px !important;
+}
+
+.bg {
+  background: linear-gradient(180deg, rgba(217, 45, 32, 0.05) 0%, rgba(217, 45, 32, 0.00) 24.02%), #F9FAFB;
+}
+

dify_1.2.0/web/app/account/account-page/index.tsx

@@ -0,0 +1,320 @@
+'use client'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
+import { useContext } from 'use-context-selector'
+import DeleteAccount from '../delete-account'
+import s from './index.module.css'
+import AvatarWithEdit from './AvatarWithEdit'
+import Collapse from '@/app/components/header/account-setting/collapse'
+import type { IItem } from '@/app/components/header/account-setting/collapse'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { updateUserProfile } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { ToastContext } from '@/app/components/base/toast'
+import AppIcon from '@/app/components/base/app-icon'
+import { IS_CE_EDITION } from '@/config'
+import Input from '@/app/components/base/input'
+import PremiumBadge from '@/app/components/base/premium-badge'
+
+const titleClassName = `
+  system-sm-semibold text-text-secondary
+`
+const descriptionClassName = `
+  mt-1 body-xs-regular text-text-tertiary
+`
+
+const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
+export default function AccountPage() {
+  const { t } = useTranslation()
+  const { systemFeatures } = useAppContext()
+  const { mutateUserProfile, userProfile, apps } = useAppContext()
+  const { isEducationAccount } = useProviderContext()
+  const { notify } = useContext(ToastContext)
+  const [editNameModalVisible, setEditNameModalVisible] = useState(false)
+  const [editName, setEditName] = useState('')
+  const [editing, setEditing] = useState(false)
+  const [editPasswordModalVisible, setEditPasswordModalVisible] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false)
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+  const handleEditName = () => {
+    setEditNameModalVisible(true)
+    setEditName(userProfile.name)
+  }
+  const handleSaveName = async () => {
+    try {
+      setEditing(true)
+      await updateUserProfile({ url: 'account/name', body: { name: editName } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditNameModalVisible(false)
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditNameModalVisible(false)
+      setEditing(false)
+    }
+  }
+
+  const showErrorMessage = (message: string) => {
+    notify({
+      type: 'error',
+      message,
+    })
+  }
+  const valid = () => {
+    if (!password.trim()) {
+      showErrorMessage(t('login.error.passwordEmpty'))
+      return false
+    }
+    if (!validPassword.test(password)) {
+      showErrorMessage(t('login.error.passwordInvalid'))
+      return false
+    }
+    if (password !== confirmPassword) {
+      showErrorMessage(t('common.account.notEqual'))
+      return false
+    }
+
+    return true
+  }
+  const resetPasswordForm = () => {
+    setCurrentPassword('')
+    setPassword('')
+    setConfirmPassword('')
+  }
+  const handleSavePassword = async () => {
+    if (!valid())
+      return
+    try {
+      setEditing(true)
+      await updateUserProfile({
+        url: 'account/password',
+        body: {
+          password: currentPassword,
+          new_password: password,
+          repeat_new_password: confirmPassword,
+        },
+      })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditPasswordModalVisible(false)
+      resetPasswordForm()
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditPasswordModalVisible(false)
+      setEditing(false)
+    }
+  }
+
+  const renderAppItem = (item: IItem) => {
+    return (
+      <div className='flex px-3 py-1'>
+        <div className='mr-3'>
+          <AppIcon size='tiny' />
+        </div>
+        <div className='system-sm-medium mt-[3px] text-text-secondary'>{item.name}</div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className='pb-3 pt-2'>
+        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
+      </div>
+      <div className='mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6'>
+        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={ mutateUserProfile } size={64} />
+        <div className='ml-4'>
+          <p className='system-xl-semibold text-text-primary'>
+            {userProfile.name}
+            {isEducationAccount && (
+              <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                <RiGraduationCapFill className='mr-1 h-3 w-3' />
+                <span className='system-2xs-medium'>EDU</span>
+              </PremiumBadge>
+            )}
+          </p>
+          <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
+        </div>
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.name')}</div>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.name}</span>
+          </div>
+          <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={handleEditName}>
+            {t('common.operation.edit')}
+          </div>
+        </div>
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.email')}</div>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.email}</span>
+          </div>
+        </div>
+      </div>
+      {
+        systemFeatures.enable_email_password_login && (
+          <div className='mb-8 flex justify-between gap-2'>
+            <div>
+              <div className='system-sm-semibold mb-1 text-text-secondary'>{t('common.account.password')}</div>
+              <div className='body-xs-regular mb-2 text-text-tertiary'>{t('common.account.passwordTip')}</div>
+            </div>
+            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+          </div>
+        )
+      }
+      <div className='mb-6 border-[1px] border-divider-subtle' />
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
+        <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
+        {!!apps.length && (
+          <Collapse
+            title={`${t('common.account.showAppLength', { length: apps.length })}`}
+            items={apps.map(app => ({ key: app.id, name: app.name }))}
+            renderItem={renderAppItem}
+            wrapperClassName='mt-2'
+          />
+        )}
+        {!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+      </div>
+      {
+        editNameModalVisible && (
+          <Modal
+            isShow
+            onClose={() => setEditNameModalVisible(false)}
+            className={s.modal}
+          >
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{t('common.account.editName')}</div>
+            <div className={titleClassName}>{t('common.account.name')}</div>
+            <Input className='mt-2'
+              value={editName}
+              onChange={e => setEditName(e.target.value)}
+            />
+            <div className='mt-10 flex justify-end'>
+              <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing || !editName}
+                variant='primary'
+                onClick={handleSaveName}
+              >
+                {t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        editPasswordModalVisible && (
+          <Modal
+            isShow
+            onClose={() => {
+              setEditPasswordModalVisible(false)
+              resetPasswordForm()
+            }}
+            className={s.modal}
+          >
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            {userProfile.is_password_set && (
+              <>
+                <div className={titleClassName}>{t('common.account.currentPassword')}</div>
+                <div className='relative mt-2'>
+                  <Input
+                    type={showCurrentPassword ? 'text' : 'password'}
+                    value={currentPassword}
+                    onChange={e => setCurrentPassword(e.target.value)}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                    >
+                      {showCurrentPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+            <div className='system-sm-semibold mt-8 text-text-secondary'>
+              {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
+            </div>
+            <div className='relative mt-2'>
+              <Input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
+            <div className='system-sm-semibold mt-8 text-text-secondary'>{t('common.account.confirmPassword')}</div>
+            <div className='relative mt-2'>
+              <Input
+                type={showConfirmPassword ? 'text' : 'password'}
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                >
+                  {showConfirmPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
+            <div className='mt-10 flex justify-end'>
+              <Button className='mr-2' onClick={() => {
+                setEditPasswordModalVisible(false)
+                resetPasswordForm()
+              }}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing}
+                variant='primary'
+                onClick={handleSavePassword}
+              >
+                {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        showDeleteAccountModal && (
+          <DeleteAccount
+            onCancel={() => setShowDeleteAccountModal(false)}
+            onConfirm={() => setShowDeleteAccountModal(false)}
+          />
+        )
+      }
+    </>
+  )
+}

dify_1.2.0/web/app/account/avatar.tsx

@@ -0,0 +1,109 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import Avatar from '@/app/components/base/avatar'
+import { logout } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
+import PremiumBadge from '@/app/components/base/premium-badge'
+
+export type IAppSelector = {
+  isMobile: boolean
+}
+
+export default function AppSelector() {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const { isEducationAccount } = useProviderContext()
+
+  const handleLogout = async () => {
+    await logout({
+      url: '/logout',
+      params: {},
+    })
+
+    localStorage.removeItem('setup_status')
+    localStorage.removeItem('console_token')
+    localStorage.removeItem('refresh_token')
+
+    router.push('/signin')
+  }
+
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      {
+        ({ open }) => (
+          <>
+            <div>
+              <MenuButton
+                className={`
+                    p-1x inline-flex
+                    items-center rounded-[20px] text-sm
+                    text-text-primary
+                    mobile:px-1
+                    ${open && 'bg-components-panel-bg-blur'}
+                  `}
+              >
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
+              </MenuButton>
+            </div>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <MenuItems
+                className="
+                    absolute -right-2 -top-1 w-60 max-w-80
+                    origin-top-right divide-y divide-divider-subtle rounded-lg bg-components-panel-bg-blur
+                    shadow-lg
+                  "
+              >
+                <MenuItem>
+                  <div className='p-1'>
+                    <div className='flex flex-nowrap items-center px-3 py-2'>
+                      <div className='grow'>
+                        <div className='system-md-medium break-all text-text-primary'>
+                          {userProfile.name}
+                          {isEducationAccount && (
+                            <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                              <RiGraduationCapFill className='mr-1 h-3 w-3' />
+                              <span className='system-2xs-medium'>EDU</span>
+                            </PremiumBadge>
+                          )}
+                        </div>
+                        <div className='system-xs-regular break-all text-text-tertiary'>{userProfile.email}</div>
+                      </div>
+                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
+                    </div>
+                  </div>
+                </MenuItem>
+                <MenuItem>
+                  <div className='p-1' onClick={() => handleLogout()}>
+                    <div
+                      className='group flex h-9 cursor-pointer items-center justify-start rounded-lg px-3 hover:bg-state-base-hover'
+                    >
+                      <LogOut01 className='mr-1 flex h-4 w-4 text-text-tertiary' />
+                      <div className='text-[14px] font-normal text-text-secondary'>{t('common.userProfile.logout')}</div>
+                    </div>
+                  </div>
+                </MenuItem>
+              </MenuItems>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}

dify_1.2.0/web/app/account/delete-account/components/check-email.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import Link from 'next/link'
+import { useSendDeleteAccountEmail } from '../state'
+import { useAppContext } from '@/context/app-context'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function CheckEmail(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const [userInputEmail, setUserInputEmail] = useState('')
+
+  const { isPending: isSendingEmail, mutateAsync: getDeleteEmailVerifyCode } = useSendDeleteAccountEmail()
+
+  const handleConfirm = useCallback(async () => {
+    try {
+      const ret = await getDeleteEmailVerifyCode()
+      if (ret.result === 'success')
+        props.onConfirm()
+    }
+    catch (error) { console.error(error) }
+  }, [getDeleteEmailVerifyCode, props])
+
+  return <>
+    <div className='body-md-medium py-1 text-text-destructive'>
+      {t('common.account.deleteTip')}
+    </div>
+    <div className='body-md-regular pb-2 pt-1 text-text-secondary'>
+      {t('common.account.deletePrivacyLinkTip')}
+      <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
+    </div>
+    <label className='system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary'>{t('common.account.deleteLabel')}</label>
+    <Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
+      setUserInputEmail(e.target.value)
+    }} />
+    <div className='mt-3 flex w-full flex-col gap-2'>
+      <Button className='w-full' disabled={userInputEmail !== userProfile.email || isSendingEmail} loading={isSendingEmail} variant='primary' onClick={handleConfirm}>{t('common.account.sendVerificationButton')}</Button>
+      <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
+    </div>
+  </>
+}

dify_1.2.0/web/app/account/delete-account/components/feed-back.tsx

@@ -0,0 +1,68 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useDeleteAccountFeedback } from '../state'
+import { useAppContext } from '@/context/app-context'
+import Button from '@/app/components/base/button'
+import CustomDialog from '@/app/components/base/dialog'
+import Textarea from '@/app/components/base/textarea'
+import Toast from '@/app/components/base/toast'
+import { logout } from '@/service/common'
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function FeedBack(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const router = useRouter()
+  const [userFeedback, setUserFeedback] = useState('')
+  const { isPending, mutateAsync: sendFeedback } = useDeleteAccountFeedback()
+
+  const handleSuccess = useCallback(async () => {
+    try {
+      await logout({
+        url: '/logout',
+        params: {},
+      })
+      localStorage.removeItem('refresh_token')
+      localStorage.removeItem('console_token')
+      router.push('/signin')
+      Toast.notify({ type: 'info', message: t('common.account.deleteSuccessTip') })
+    }
+    catch (error) { console.error(error) }
+  }, [router, t])
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      await sendFeedback({ feedback: userFeedback, email: userProfile.email })
+      props.onConfirm()
+      await handleSuccess()
+    }
+    catch (error) { console.error(error) }
+  }, [handleSuccess, userFeedback, sendFeedback, userProfile, props])
+
+  const handleSkip = useCallback(() => {
+    props.onCancel()
+    handleSuccess()
+  }, [handleSuccess, props])
+  return <CustomDialog
+    show={true}
+    onClose={props.onCancel}
+    title={t('common.account.feedbackTitle')}
+    className="max-w-[480px]"
+    footer={false}
+  >
+    <label className='system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary'>{t('common.account.feedbackLabel')}</label>
+    <Textarea rows={6} value={userFeedback} placeholder={t('common.account.feedbackPlaceholder') as string} onChange={(e) => {
+      setUserFeedback(e.target.value)
+    }} />
+    <div className='mt-3 flex w-full flex-col gap-2'>
+      <Button className='w-full' loading={isPending} variant='primary' onClick={handleSubmit}>{t('common.operation.submit')}</Button>
+      <Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button>
+    </div>
+  </CustomDialog>
+}

dify_1.2.0/web/app/account/delete-account/components/verify-email.tsx

@@ -0,0 +1,55 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+import Countdown from '@/app/components/signin/countdown'
+
+const CODE_EXP = /[A-Za-z\d]{6}/gi
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function VerifyEmail(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+  const emailToken = useAccountDeleteStore(state => state.sendEmailToken)
+  const [verificationCode, setVerificationCode] = useState<string>()
+  const [shouldButtonDisabled, setShouldButtonDisabled] = useState(true)
+  const { mutate: sendEmail } = useSendDeleteAccountEmail()
+  const { isPending: isDeleting, mutateAsync: confirmDeleteAccount } = useConfirmDeleteAccount()
+
+  useEffect(() => {
+    setShouldButtonDisabled(!(verificationCode && CODE_EXP.test(verificationCode)) || isDeleting)
+  }, [verificationCode, isDeleting])
+
+  const handleConfirm = useCallback(async () => {
+    try {
+      const ret = await confirmDeleteAccount({ code: verificationCode!, token: emailToken })
+      if (ret.result === 'success')
+        props.onConfirm()
+    }
+    catch (error) { console.error(error) }
+  }, [emailToken, verificationCode, confirmDeleteAccount, props])
+  return <>
+    <div className='body-md-medium pt-1 text-text-destructive'>
+      {t('common.account.deleteTip')}
+    </div>
+    <div className='body-md-regular pb-2 pt-1 text-text-secondary'>
+      {t('common.account.deletePrivacyLinkTip')}
+      <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
+    </div>
+    <label className='system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary'>{t('common.account.verificationLabel')}</label>
+    <Input minLength={6} maxLength={6} placeholder={t('common.account.verificationPlaceholder') as string} onChange={(e) => {
+      setVerificationCode(e.target.value)
+    }} />
+    <div className='mt-3 flex w-full flex-col gap-2'>
+      <Button className='w-full' disabled={shouldButtonDisabled} loading={isDeleting} variant='warning' onClick={handleConfirm}>{t('common.account.permanentlyDeleteButton')}</Button>
+      <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
+      <Countdown onResend={sendEmail} />
+    </div>
+  </>
+}

dify_1.2.0/web/app/account/delete-account/index.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import CheckEmail from './components/check-email'
+import VerifyEmail from './components/verify-email'
+import FeedBack from './components/feed-back'
+import CustomDialog from '@/app/components/base/dialog'
+import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function DeleteAccount(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+
+  const [showVerifyEmail, setShowVerifyEmail] = useState(false)
+  const [showFeedbackDialog, setShowFeedbackDialog] = useState(false)
+
+  const handleEmailCheckSuccess = useCallback(async () => {
+    try {
+      setShowVerifyEmail(true)
+      localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+    }
+    catch (error) { console.error(error) }
+  }, [])
+
+  if (showFeedbackDialog)
+    return <FeedBack onCancel={props.onCancel} onConfirm={props.onConfirm} />
+
+  return <CustomDialog
+    show={true}
+    onClose={props.onCancel}
+    title={t('common.account.delete')}
+    className="max-w-[480px]"
+    footer={false}
+  >
+    {!showVerifyEmail && <CheckEmail onCancel={props.onCancel} onConfirm={handleEmailCheckSuccess} />}
+    {showVerifyEmail && <VerifyEmail onCancel={props.onCancel} onConfirm={() => {
+      setShowFeedbackDialog(true)
+    }} />}
+  </CustomDialog>
+}

dify_1.2.0/web/app/account/delete-account/state.tsx

@@ -0,0 +1,39 @@
+import { useMutation } from '@tanstack/react-query'
+import { create } from 'zustand'
+import { sendDeleteAccountCode, submitDeleteAccountFeedback, verifyDeleteAccountCode } from '@/service/common'
+
+type State = {
+  sendEmailToken: string
+  setSendEmailToken: (token: string) => void
+}
+
+export const useAccountDeleteStore = create<State>(set => ({
+  sendEmailToken: '',
+  setSendEmailToken: (token: string) => set({ sendEmailToken: token }),
+}))
+
+export function useSendDeleteAccountEmail() {
+  const updateEmailToken = useAccountDeleteStore(state => state.setSendEmailToken)
+  return useMutation({
+    mutationKey: ['delete-account'],
+    mutationFn: sendDeleteAccountCode,
+    onSuccess: (ret) => {
+      if (ret.result === 'success')
+        updateEmailToken(ret.data)
+    },
+  })
+}
+
+export function useConfirmDeleteAccount() {
+  return useMutation({
+    mutationKey: ['confirm-delete-account'],
+    mutationFn: verifyDeleteAccountCode,
+  })
+}
+
+export function useDeleteAccountFeedback() {
+  return useMutation({
+    mutationKey: ['delete-account-feedback'],
+    mutationFn: submitDeleteAccountFeedback,
+  })
+}

dify_1.2.0/web/app/account/header.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
+import { useRouter } from 'next/navigation'
+import Button from '../components/base/button'
+import Avatar from './avatar'
+import LogoSite from '@/app/components/base/logo/logo-site'
+
+const Header = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+
+  const back = () => {
+    router.back()
+  }
+  return (
+    <div className='flex flex-1 items-center justify-between px-4'>
+      <div className='flex items-center gap-3'>
+        <div className='flex cursor-pointer items-center' onClick={back}>
+          <LogoSite className='object-contain' />
+        </div>
+        <div className='h-4 w-[1px] bg-divider-regular' />
+        <p className='title-3xl-semi-bold text-text-primary'>{t('common.account.account')}</p>
+      </div>
+      <div className='flex shrink-0 items-center gap-3'>
+        <Button className='system-sm-medium gap-2 px-3 py-2' onClick={back}>
+          <RiRobot2Line className='h-4 w-4' />
+          <p>{t('common.account.studio')}</p>
+          <RiArrowRightUpLine className='h-4 w-4' />
+        </Button>
+        <div className='h-4 w-[1px] bg-divider-regular' />
+        <Avatar />
+      </div>
+    </div>
+  )
+}
+export default Header

dify_1.2.0/web/app/account/layout.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import Header from './header'
+import SwrInitor from '@/app/components/swr-initor'
+import { AppContextProvider } from '@/context/app-context'
+import GA, { GaType } from '@/app/components/base/ga'
+import HeaderWrapper from '@/app/components/header/header-wrapper'
+import { EventEmitterContextProvider } from '@/context/event-emitter'
+import { ProviderContextProvider } from '@/context/provider-context'
+import { ModalContextProvider } from '@/context/modal-context'
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <GA gaType={GaType.admin} />
+      <SwrInitor>
+        <AppContextProvider>
+          <EventEmitterContextProvider>
+            <ProviderContextProvider>
+              <ModalContextProvider>
+                <HeaderWrapper>
+                  <Header />
+                </HeaderWrapper>
+                <div className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-components-panel-bg'>
+                  {children}
+                </div>
+              </ModalContextProvider>
+            </ProviderContextProvider>
+          </EventEmitterContextProvider>
+        </AppContextProvider>
+      </SwrInitor>
+    </>
+  )
+}
+
+export const metadata = {
+  title: 'Dify',
+}
+
+export default Layout

dify_1.2.0/web/app/account/page.tsx

@@ -0,0 +1,7 @@
+import AccountPage from './account-page'
+
+export default function Account() {
+  return <div className='mx-auto w-full max-w-[640px] px-6 pt-12'>
+    <AccountPage />
+  </div>
+}

dify_1.2.0/web/app/activate/activateForm.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import { useRouter, useSearchParams } from 'next/navigation'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+
+import { invitationCheck } from '@/service/common'
+import Loading from '@/app/components/base/loading'
+
+const ActivateForm = () => {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const workspaceID = searchParams.get('workspace_id')
+  const email = searchParams.get('email')
+  const token = searchParams.get('token')
+
+  const checkParams = {
+    url: '/activate/check',
+    params: {
+      ...workspaceID && { workspace_id: workspaceID },
+      ...email && { email },
+      token,
+    },
+  }
+  const { data: checkRes } = useSWR(checkParams, invitationCheck, {
+    revalidateOnFocus: false,
+    onSuccess(data) {
+      if (data.is_valid) {
+        const params = new URLSearchParams(searchParams)
+        const { email, workspace_id } = data.data
+        params.set('email', encodeURIComponent(email))
+        params.set('workspace_id', encodeURIComponent(workspace_id))
+        params.set('invite_token', encodeURIComponent(token as string))
+        router.replace(`/signin?${params.toString()}`)
+      }
+    },
+  })
+
+  return (
+    <div className={
+      cn(
+        'flex w-full grow flex-col items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      {!checkRes && <Loading />}
+      {checkRes && !checkRes.is_valid && (
+        <div className="flex flex-col md:w-[400px]">
+          <div className="mx-auto w-full">
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
+            <h2 className="text-[32px] font-bold text-text-primary">{t('login.invalid')}</h2>
+          </div>
+          <div className="mx-auto mt-6 w-full">
+            <Button variant='primary' className='w-full !text-sm'>
+              <a href="https://dify.ai">{t('login.explore')}</a>
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ActivateForm

dify_1.2.0/web/app/activate/page.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Header from '../signin/_header'
+import ActivateForm from './activateForm'
+import cn from '@/utils/classnames'
+
+const Activate = () => {
+  return (
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <Header />
+        <ActivateForm />
+        <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Activate

dify_1.2.0/web/app/components/app-sidebar/app-info.tsx

@@ -0,0 +1,382 @@
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { useContext, useContextSelector } from 'use-context-selector'
+import React, { useCallback, useState } from 'react'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+  RiEqualizer2Line,
+  RiFileCopy2Line,
+  RiFileDownloadLine,
+  RiFileUploadLine,
+} from '@remixicon/react'
+import AppIcon from '../base/app-icon'
+import SwitchAppModal from '../app/switch-app-modal'
+import cn from '@/utils/classnames'
+import Confirm from '@/app/components/base/confirm'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { ToastContext } from '@/app/components/base/toast'
+import AppsContext, { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
+import DuplicateAppModal from '@/app/components/app/duplicate-modal'
+import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
+import CreateAppModal from '@/app/components/explore/create-app-modal'
+import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { getRedirection } from '@/utils/app-redirection'
+import UpdateDSLModal from '@/app/components/workflow/update-dsl-modal'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
+import { fetchWorkflowDraft } from '@/service/workflow'
+import ContentDialog from '@/app/components/base/content-dialog'
+import Button from '@/app/components/base/button'
+import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView'
+
+export type IAppInfoProps = {
+  expand: boolean
+}
+
+const AppInfo = ({ expand }: IAppInfoProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { replace } = useRouter()
+  const { onPlanInfoChanged } = useProviderContext()
+  const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(state => state.setAppDetail)
+  const [open, setOpen] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showDuplicateModal, setShowDuplicateModal] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
+  const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false)
+  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
+
+  const mutateApps = useContextSelector(
+    AppsContext,
+    state => state.mutateApps,
+  )
+
+  const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
+    name,
+    icon_type,
+    icon,
+    icon_background,
+    description,
+    use_icon_as_answer_icon,
+  }) => {
+    if (!appDetail)
+      return
+    try {
+      const app = await updateAppInfo({
+        appID: appDetail.id,
+        name,
+        icon_type,
+        icon,
+        icon_background,
+        description,
+        use_icon_as_answer_icon,
+      })
+      setShowEditModal(false)
+      notify({
+        type: 'success',
+        message: t('app.editDone'),
+      })
+      setAppDetail(app)
+      mutateApps()
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.editFailed') })
+    }
+  }, [appDetail, mutateApps, notify, setAppDetail, t])
+
+  const onCopy: DuplicateAppModalProps['onConfirm'] = async ({ name, icon_type, icon, icon_background }) => {
+    if (!appDetail)
+      return
+    try {
+      const newApp = await copyApp({
+        appID: appDetail.id,
+        name,
+        icon_type,
+        icon,
+        icon_background,
+        mode: appDetail.mode,
+      })
+      setShowDuplicateModal(false)
+      notify({
+        type: 'success',
+        message: t('app.newApp.appCreated'),
+      })
+      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
+      mutateApps()
+      onPlanInfoChanged()
+      getRedirection(true, newApp, replace)
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
+    }
+  }
+
+  const onExport = async (include = false) => {
+    if (!appDetail)
+      return
+    try {
+      const { data } = await exportAppConfig({
+        appID: appDetail.id,
+        include,
+      })
+      const a = document.createElement('a')
+      const file = new Blob([data], { type: 'application/yaml' })
+      a.href = URL.createObjectURL(file)
+      a.download = `${appDetail.name}.yml`
+      a.click()
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
+  const exportCheck = async () => {
+    if (!appDetail)
+      return
+    if (appDetail.mode !== 'workflow' && appDetail.mode !== 'advanced-chat') {
+      onExport()
+      return
+    }
+    try {
+      const workflowDraft = await fetchWorkflowDraft(`/apps/${appDetail.id}/workflows/draft`)
+      const list = (workflowDraft.environment_variables || []).filter(env => env.value_type === 'secret')
+      if (list.length === 0) {
+        onExport()
+        return
+      }
+      setSecretEnvList(list)
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
+  const onConfirmDelete = useCallback(async () => {
+    if (!appDetail)
+      return
+    try {
+      await deleteApp(appDetail.id)
+      notify({ type: 'success', message: t('app.appDeleted') })
+      mutateApps()
+      onPlanInfoChanged()
+      setAppDetail()
+      replace('/apps')
+    }
+    catch (e: any) {
+      notify({
+        type: 'error',
+        message: `${t('app.appDeleteFailed')}${'message' in e ? `: ${e.message}` : ''}`,
+      })
+    }
+    setShowConfirmDelete(false)
+  }, [appDetail, mutateApps, notify, onPlanInfoChanged, replace, t])
+
+  const { isCurrentWorkspaceEditor } = useAppContext()
+
+  if (!appDetail)
+    return null
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          if (isCurrentWorkspaceEditor)
+            setOpen(v => !v)
+        }}
+        className='block w-full'
+      >
+        <div className={cn('flex rounded-lg', expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1', open && 'bg-state-base-hover', isCurrentWorkspaceEditor && 'cursor-pointer hover:bg-state-base-hover')}>
+          <div className={`flex items-center self-stretch ${expand ? 'justify-between' : 'flex-col gap-1'}`}>
+            <AppIcon
+              size={expand ? 'large' : 'small'}
+              iconType={appDetail.icon_type}
+              icon={appDetail.icon}
+              background={appDetail.icon_background}
+              imageUrl={appDetail.icon_url}
+            />
+            <div className='flex items-center justify-center rounded-md p-0.5'>
+              <div className='flex h-5 w-5 items-center justify-center'>
+                <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+              </div>
+            </div>
+          </div>
+          {
+            expand && (
+              <div className='flex flex-col items-start gap-1'>
+                <div className='flex w-full'>
+                  <div className='system-md-semibold truncate text-text-secondary'>{appDetail.name}</div>
+                </div>
+                <div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.advanced') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
+              </div>
+            )
+          }
+        </div>
+      </button>
+      <ContentDialog
+        show={open}
+        onClose={() => setOpen(false)}
+        className='absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl !p-0'
+      >
+        <div className='flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4'>
+          <div className='flex items-center gap-3 self-stretch'>
+            <AppIcon
+              size="large"
+              iconType={appDetail.icon_type}
+              icon={appDetail.icon}
+              background={appDetail.icon_background}
+              imageUrl={appDetail.icon_url}
+            />
+            <div className='flex w-full grow flex-col items-start justify-center'>
+              <div className='system-md-semibold w-full truncate text-text-secondary'>{appDetail.name}</div>
+              <div className='system-2xs-medium-uppercase text-text-tertiary'>{appDetail.mode === 'advanced-chat' ? t('app.types.advanced') : appDetail.mode === 'agent-chat' ? t('app.types.agent') : appDetail.mode === 'chat' ? t('app.types.chatbot') : appDetail.mode === 'completion' ? t('app.types.completion') : t('app.types.workflow')}</div>
+            </div>
+          </div>
+          {/* description */}
+          {appDetail.description && (
+            <div className='system-xs-regular text-text-tertiary'>{appDetail.description}</div>
+          )}
+          {/* operations */}
+          <div className='flex flex-wrap items-center gap-1 self-stretch'>
+            <Button
+              size={'small'}
+              variant={'secondary'}
+              className='gap-[1px]'
+              onClick={() => {
+                setOpen(false)
+                setShowEditModal(true)
+              }}
+            >
+              <RiEditLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.editApp')}</span>
+            </Button>
+            <Button
+              size={'small'}
+              variant={'secondary'}
+              className='gap-[1px]'
+              onClick={() => {
+                setOpen(false)
+                setShowDuplicateModal(true)
+              }}
+            >
+              <RiFileCopy2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.duplicate')}</span>
+            </Button>
+            <Button
+              size={'small'}
+              variant={'secondary'}
+              className='gap-[1px]'
+              onClick={exportCheck}
+            >
+              <RiFileDownloadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+              <span className='system-xs-medium text-components-button-secondary-text'>{t('app.export')}</span>
+            </Button>
+            {
+              (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (
+                <Button
+                  size={'small'}
+                  variant={'secondary'}
+                  className='gap-[1px]'
+                  onClick={() => {
+                    setOpen(false)
+                    setShowImportDSLModal(true)
+                  }}
+                >
+                  <RiFileUploadLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
+                  <span className='system-xs-medium text-components-button-secondary-text'>{t('workflow.common.importDSL')}</span>
+                </Button>
+              )
+            }
+          </div>
+        </div>
+        <div className='flex flex-1'>
+          <CardView
+            appId={appDetail.id}
+            isInPanel={true}
+            className='flex grow flex-col gap-2 overflow-auto px-2 py-1'
+          />
+        </div>
+        <div className='flex min-h-fit shrink-0 flex-col items-start justify-center gap-3 self-stretch border-t-[0.5px] border-divider-subtle p-2'>
+          <Button
+            size={'medium'}
+            variant={'ghost'}
+            className='gap-0.5'
+            onClick={() => {
+              setOpen(false)
+              setShowConfirmDelete(true)
+            }}
+          >
+            <RiDeleteBinLine className='h-4 w-4 text-text-tertiary' />
+            <span className='system-sm-medium text-text-tertiary'>{t('common.operation.deleteApp')}</span>
+          </Button>
+        </div>
+      </ContentDialog>
+      {showSwitchModal && (
+        <SwitchAppModal
+          inAppDetail
+          show={showSwitchModal}
+          appDetail={appDetail}
+          onClose={() => setShowSwitchModal(false)}
+          onSuccess={() => setShowSwitchModal(false)}
+        />
+      )}
+      {showEditModal && (
+        <CreateAppModal
+          isEditModal
+          appName={appDetail.name}
+          appIconType={appDetail.icon_type}
+          appIcon={appDetail.icon}
+          appIconBackground={appDetail.icon_background}
+          appIconUrl={appDetail.icon_url}
+          appDescription={appDetail.description}
+          appMode={appDetail.mode}
+          appUseIconAsAnswerIcon={appDetail.use_icon_as_answer_icon}
+          show={showEditModal}
+          onConfirm={onEdit}
+          onHide={() => setShowEditModal(false)}
+        />
+      )}
+      {showDuplicateModal && (
+        <DuplicateAppModal
+          appName={appDetail.name}
+          icon_type={appDetail.icon_type}
+          icon={appDetail.icon}
+          icon_background={appDetail.icon_background}
+          icon_url={appDetail.icon_url}
+          show={showDuplicateModal}
+          onConfirm={onCopy}
+          onHide={() => setShowDuplicateModal(false)}
+        />
+      )}
+      {showConfirmDelete && (
+        <Confirm
+          title={t('app.deleteAppConfirmTitle')}
+          content={t('app.deleteAppConfirmContent')}
+          isShow={showConfirmDelete}
+          onConfirm={onConfirmDelete}
+          onCancel={() => setShowConfirmDelete(false)}
+        />
+      )}
+      {showImportDSLModal && (
+        <UpdateDSLModal
+          onCancel={() => setShowImportDSLModal(false)}
+          onBackup={exportCheck}
+        />
+      )}
+      {secretEnvList.length > 0 && (
+        <DSLExportConfirmModal
+          envList={secretEnvList}
+          onConfirm={onExport}
+          onClose={() => setSecretEnvList([])}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(AppInfo)

dify_1.2.0/web/app/components/app-sidebar/basic.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '../base/app-icon'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type IAppBasicProps = {
+  iconType?: 'app' | 'api' | 'dataset' | 'webapp' | 'notion'
+  icon?: string
+  icon_background?: string | null
+  isExternal?: boolean
+  name: string
+  type: string | React.ReactNode
+  hoverTip?: string
+  textStyle?: { main?: string; extra?: string }
+  isExtraInLine?: boolean
+  mode?: string
+}
+
+const ApiSvg = <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.5 3.5C8.5 4.60457 9.39543 5.5 10.5 5.5C11.6046 5.5 12.5 4.60457 12.5 3.5C12.5 2.39543 11.6046 1.5 10.5 1.5C9.39543 1.5 8.5 2.39543 8.5 3.5Z" stroke="#5850EC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  <path d="M12.5 9C12.5 10.1046 13.3954 11 14.5 11C15.6046 11 16.5 10.1046 16.5 9C16.5 7.89543 15.6046 7 14.5 7C13.3954 7 12.5 7.89543 12.5 9Z" stroke="#5850EC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  <path d="M8.5 3.5H5.5L3.5 6.5" stroke="#5850EC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  <path d="M8.5 14.5C8.5 15.6046 9.39543 16.5 10.5 16.5C11.6046 16.5 12.5 15.6046 12.5 14.5C12.5 13.3954 11.6046 12.5 10.5 12.5C9.39543 12.5 8.5 13.3954 8.5 14.5Z" stroke="#5850EC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  <path d="M8.5 14.5H5.5L3.5 11.5" stroke="#5850EC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  <path d="M12.5 9H1.5" stroke="#5850EC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+</svg>
+
+const DatasetSvg = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M0.833497 5.13481C0.833483 4.69553 0.83347 4.31654 0.858973 4.0044C0.88589 3.67495 0.94532 3.34727 1.10598 3.03195C1.34567 2.56155 1.72812 2.17909 2.19852 1.93941C2.51384 1.77875 2.84152 1.71932 3.17097 1.6924C3.48312 1.6669 3.86209 1.66691 4.30137 1.66693L7.62238 1.66684C8.11701 1.66618 8.55199 1.66561 8.95195 1.80356C9.30227 1.92439 9.62134 2.12159 9.88607 2.38088C10.1883 2.67692 10.3823 3.06624 10.603 3.50894L11.3484 5.00008H14.3679C15.0387 5.00007 15.5924 5.00006 16.0434 5.03691C16.5118 5.07518 16.9424 5.15732 17.3468 5.36339C17.974 5.68297 18.4839 6.19291 18.8035 6.82011C19.0096 7.22456 19.0917 7.65515 19.13 8.12356C19.1668 8.57455 19.1668 9.12818 19.1668 9.79898V13.5345C19.1668 14.2053 19.1668 14.7589 19.13 15.2099C19.0917 15.6784 19.0096 16.1089 18.8035 16.5134C18.4839 17.1406 17.974 17.6505 17.3468 17.9701C16.9424 18.1762 16.5118 18.2583 16.0434 18.2966C15.5924 18.3334 15.0387 18.3334 14.3679 18.3334H5.63243C4.96163 18.3334 4.40797 18.3334 3.95698 18.2966C3.48856 18.2583 3.05798 18.1762 2.65353 17.9701C2.02632 17.6505 1.51639 17.1406 1.19681 16.5134C0.990734 16.1089 0.908597 15.6784 0.870326 15.2099C0.833478 14.7589 0.833487 14.2053 0.833497 13.5345V5.13481ZM7.51874 3.33359C8.17742 3.33359 8.30798 3.34447 8.4085 3.37914C8.52527 3.41942 8.63163 3.48515 8.71987 3.57158C8.79584 3.64598 8.86396 3.7579 9.15852 4.34704L9.48505 5.00008L2.50023 5.00008C2.50059 4.61259 2.50314 4.34771 2.5201 4.14012C2.5386 3.91374 2.57 3.82981 2.59099 3.7886C2.67089 3.6318 2.79837 3.50432 2.95517 3.42442C2.99638 3.40343 3.08031 3.37203 3.30669 3.35353C3.54281 3.33424 3.85304 3.33359 4.3335 3.33359H7.51874Z" fill="#444CE7" />
+</svg>
+
+const WebappSvg = <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.375 5.45825L7.99998 8.99992M7.99998 8.99992L1.62498 5.45825M7.99998 8.99992L8 16.1249M14.75 12.0439V5.95603C14.75 5.69904 14.75 5.57055 14.7121 5.45595C14.6786 5.35457 14.6239 5.26151 14.5515 5.18299C14.4697 5.09424 14.3574 5.03184 14.1328 4.90704L8.58277 1.8237C8.37007 1.70553 8.26372 1.64645 8.15109 1.62329C8.05141 1.60278 7.9486 1.60278 7.84891 1.62329C7.73628 1.64645 7.62993 1.70553 7.41723 1.8237L1.86723 4.90704C1.64259 5.03184 1.53026 5.09424 1.44847 5.18299C1.37612 5.26151 1.32136 5.35457 1.28786 5.45595C1.25 5.57055 1.25 5.69904 1.25 5.95603V12.0439C1.25 12.3008 1.25 12.4293 1.28786 12.5439C1.32136 12.6453 1.37612 12.7384 1.44847 12.8169C1.53026 12.9056 1.64259 12.968 1.86723 13.0928L7.41723 16.1762C7.62993 16.2943 7.73628 16.3534 7.84891 16.3766C7.9486 16.3971 8.05141 16.3971 8.15109 16.3766C8.26372 16.3534 8.37007 16.2943 8.58277 16.1762L14.1328 13.0928C14.3574 12.968 14.4697 12.9056 14.5515 12.8169C14.6239 12.7384 14.6786 12.6453 14.7121 12.5439C14.75 12.4293 14.75 12.3008 14.75 12.0439Z" stroke="#155EEF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+</svg>
+
+const NotionSvg = <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clipPath="url(#clip0_6294_13848)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.287 21.9133L1.70748 18.6999C1.08685 17.9267 0.75 16.976 0.75 15.9974V4.36124C0.75 2.89548 1.92269 1.67923 3.43553 1.57594L15.3991 0.759137C16.2682 0.699797 17.1321 0.930818 17.8461 1.41353L22.0494 4.25543C22.8018 4.76414 23.25 5.59574 23.25 6.48319V19.7124C23.25 21.1468 22.0969 22.3345 20.6157 22.4256L7.3375 23.243C6.1555 23.3158 5.01299 22.8178 4.287 21.9133Z" fill="white" />
+    <path d="M8.43607 10.1842V10.0318C8.43607 9.64564 8.74535 9.32537 9.14397 9.29876L12.0475 9.10491L16.0628 15.0178V9.82823L15.0293 9.69046V9.6181C15.0293 9.22739 15.3456 8.90501 15.7493 8.88433L18.3912 8.74899V9.12918C18.3912 9.30765 18.2585 9.46031 18.0766 9.49108L17.4408 9.59861V18.0029L16.6429 18.2773C15.9764 18.5065 15.2343 18.2611 14.8527 17.6853L10.9545 11.803V17.4173L12.1544 17.647L12.1377 17.7583C12.0853 18.1069 11.7843 18.3705 11.4202 18.3867L8.43607 18.5195C8.39662 18.1447 8.67758 17.8093 9.06518 17.7686L9.45771 17.7273V10.2416L8.43607 10.1842Z" fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5062 2.22521L3.5426 3.04201C2.82599 3.09094 2.27051 3.66706 2.27051 4.36136V15.9975C2.27051 16.6499 2.49507 17.2837 2.90883 17.7992L5.48835 21.0126C5.90541 21.5322 6.56174 21.8183 7.24076 21.7765L20.519 20.9591C21.1995 20.9172 21.7293 20.3716 21.7293 19.7125V6.48332C21.7293 6.07557 21.5234 5.69348 21.1777 5.45975L16.9743 2.61784C16.546 2.32822 16.0277 2.1896 15.5062 2.22521ZM4.13585 4.54287C3.96946 4.41968 4.04865 4.16303 4.25768 4.14804L15.5866 3.33545C15.9476 3.30956 16.3063 3.40896 16.5982 3.61578L18.8713 5.22622C18.9576 5.28736 18.9171 5.41935 18.8102 5.42516L6.8129 6.07764C6.44983 6.09739 6.09144 5.99073 5.80276 5.77699L4.13585 4.54287ZM6.25018 8.12315C6.25018 7.7334 6.56506 7.41145 6.9677 7.38952L19.6523 6.69871C20.0447 6.67734 20.375 6.97912 20.375 7.35898V18.8141C20.375 19.2031 20.0613 19.5247 19.6594 19.5476L7.05516 20.2648C6.61845 20.2896 6.25018 19.954 6.25018 19.5312V8.12315Z" fill="black" />
+  </g>
+  <defs>
+    <clipPath id="clip0_6294_13848">
+      <rect width="24" height="24" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
+
+const ICON_MAP = {
+  app: <AppIcon className='border !border-[rgba(0,0,0,0.05)]' />,
+  api: <AppIcon innerIcon={ApiSvg} className='border !border-purple-200 !bg-purple-50' />,
+  dataset: <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />,
+  webapp: <AppIcon innerIcon={WebappSvg} className='border !border-primary-200 !bg-primary-100' />,
+  notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
+}
+
+export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, isExtraInLine, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex grow items-center">
+      {icon && icon_background && iconType === 'app' && (
+        <div className='mr-3 shrink-0'>
+          <AppIcon icon={icon} background={icon_background} />
+        </div>
+      )}
+      {iconType !== 'app'
+        && <div className='mr-3 shrink-0'>
+          {ICON_MAP[iconType]}
+        </div>
+
+      }
+      {mode === 'expand' && <div className="group w-full">
+        <div className={`system-md-semibold flex flex-row items-center text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
+          <div className="min-w-0 overflow-hidden text-ellipsis break-normal">
+            {name}
+          </div>
+          {hoverTip
+            && <Tooltip
+              popupContent={
+                <div className='w-[240px]'>
+                  {hoverTip}
+                </div>
+              }
+              popupClassName='ml-1'
+              triggerClassName='w-4 h-4 ml-1'
+              position='top'
+            />
+          }
+        </div>
+        {isExtraInLine ? (
+          <div className="system-2xs-medium-uppercase flex text-text-tertiary">{type}</div>
+        ) : (
+          <div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : type}</div>
+        )}
+      </div>}
+    </div>
+  )
+}

dify_1.2.0/web/app/components/app-sidebar/dataset-info.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '../base/app-icon'
+
+const DatasetSvg = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M0.833497 5.13481C0.833483 4.69553 0.83347 4.31654 0.858973 4.0044C0.88589 3.67495 0.94532 3.34727 1.10598 3.03195C1.34567 2.56155 1.72812 2.17909 2.19852 1.93941C2.51384 1.77875 2.84152 1.71932 3.17097 1.6924C3.48312 1.6669 3.86209 1.66691 4.30137 1.66693L7.62238 1.66684C8.11701 1.66618 8.55199 1.66561 8.95195 1.80356C9.30227 1.92439 9.62134 2.12159 9.88607 2.38088C10.1883 2.67692 10.3823 3.06624 10.603 3.50894L11.3484 5.00008H14.3679C15.0387 5.00007 15.5924 5.00006 16.0434 5.03691C16.5118 5.07518 16.9424 5.15732 17.3468 5.36339C17.974 5.68297 18.4839 6.19291 18.8035 6.82011C19.0096 7.22456 19.0917 7.65515 19.13 8.12356C19.1668 8.57455 19.1668 9.12818 19.1668 9.79898V13.5345C19.1668 14.2053 19.1668 14.7589 19.13 15.2099C19.0917 15.6784 19.0096 16.1089 18.8035 16.5134C18.4839 17.1406 17.974 17.6505 17.3468 17.9701C16.9424 18.1762 16.5118 18.2583 16.0434 18.2966C15.5924 18.3334 15.0387 18.3334 14.3679 18.3334H5.63243C4.96163 18.3334 4.40797 18.3334 3.95698 18.2966C3.48856 18.2583 3.05798 18.1762 2.65353 17.9701C2.02632 17.6505 1.51639 17.1406 1.19681 16.5134C0.990734 16.1089 0.908597 15.6784 0.870326 15.2099C0.833478 14.7589 0.833487 14.2053 0.833497 13.5345V5.13481ZM7.51874 3.33359C8.17742 3.33359 8.30798 3.34447 8.4085 3.37914C8.52527 3.41942 8.63163 3.48515 8.71987 3.57158C8.79584 3.64598 8.86396 3.7579 9.15852 4.34704L9.48505 5.00008L2.50023 5.00008C2.50059 4.61259 2.50314 4.34771 2.5201 4.14012C2.5386 3.91374 2.57 3.82981 2.59099 3.7886C2.67089 3.6318 2.79837 3.50432 2.95517 3.42442C2.99638 3.40343 3.08031 3.37203 3.30669 3.35353C3.54281 3.33424 3.85304 3.33359 4.3335 3.33359H7.51874Z" fill="#444CE7" />
+</svg>
+
+type Props = {
+  isExternal?: boolean
+  name: string
+  description: string
+  expand: boolean
+  extraInfo?: React.ReactNode
+}
+
+const DatasetInfo: FC<Props> = ({
+  name,
+  description,
+  isExternal,
+  expand,
+  extraInfo,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className='pl-1 pt-1'>
+      <div className='mr-3 shrink-0'>
+        <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
+      </div>
+      {expand && (
+        <div className='mt-2'>
+          <div className='system-md-semibold text-text-secondary'>
+            {name}
+          </div>
+          <div className='system-2xs-medium-uppercase mt-1 text-text-tertiary'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
+          <div className='system-xs-regular  my-3 text-text-tertiary first-letter:capitalize'>{description}</div>
+        </div>
+      )}
+      {extraInfo}
+    </div>
+  )
+}
+export default React.memo(DatasetInfo)

dify_1.2.0/web/app/components/app-sidebar/index.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { RiLayoutRight2Line } from '@remixicon/react'
+import { LayoutRight2LineMod } from '../base/icons/src/public/knowledge'
+import NavLink from './navLink'
+import type { NavIcon } from './navLink'
+import AppBasic from './basic'
+import AppInfo from './app-info'
+import DatasetInfo from './dataset-info'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import cn from '@/utils/classnames'
+
+export type IAppDetailNavProps = {
+  iconType?: 'app' | 'dataset' | 'notion'
+  title: string
+  desc: string
+  isExternal?: boolean
+  icon: string
+  icon_background: string
+  navigation: Array<{
+    name: string
+    href: string
+    icon: NavIcon
+    selectedIcon: NavIcon
+  }>
+  extraInfo?: (modeState: string) => React.ReactNode
+}
+
+const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
+  const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
+    appSidebarExpand: state.appSidebarExpand,
+    setAppSiderbarExpand: state.setAppSiderbarExpand,
+  })))
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const expand = appSidebarExpand === 'expand'
+
+  const handleToggle = (state: string) => {
+    setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
+  }
+
+  useEffect(() => {
+    if (appSidebarExpand) {
+      localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
+      setAppSiderbarExpand(appSidebarExpand)
+    }
+  }, [appSidebarExpand, setAppSiderbarExpand])
+
+  return (
+    <div
+      className={`
+        flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all
+        ${expand ? 'w-[216px]' : 'w-14'}
+      `}
+    >
+      <div
+        className={`
+          shrink-0
+          ${expand ? 'p-2' : 'p-1'}
+        `}
+      >
+        {iconType === 'app' && (
+          <AppInfo expand={expand} />
+        )}
+        {iconType === 'dataset' && (
+          <DatasetInfo
+            name={title}
+            description={desc}
+            isExternal={isExternal}
+            expand={expand}
+            extraInfo={extraInfo && extraInfo(appSidebarExpand)}
+          />
+        )}
+        {!['app', 'dataset'].includes(iconType) && (
+          <AppBasic
+            mode={appSidebarExpand}
+            iconType={iconType}
+            icon={icon}
+            icon_background={icon_background}
+            name={title}
+            type={desc}
+            isExternal={isExternal}
+          />
+        )}
+      </div>
+      <div className='px-4'>
+        <div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')} />
+      </div>
+      <nav
+        className={`
+          grow space-y-1
+          ${expand ? 'p-4' : 'px-2.5 py-4'}
+        `}
+      >
+        {navigation.map((item, index) => {
+          return (
+            <NavLink key={index} mode={appSidebarExpand} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
+          )
+        })}
+      </nav>
+      {
+        !isMobile && (
+          <div
+            className={`
+              shrink-0 py-3
+              ${expand ? 'px-6' : 'px-4'}
+            `}
+          >
+            <div
+              className='flex h-6 w-6 cursor-pointer items-center justify-center text-gray-500'
+              onClick={() => handleToggle(appSidebarExpand)}
+            >
+              {
+                expand
+                  ? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' />
+                  : <LayoutRight2LineMod className='h-5 w-5 text-components-menu-item-text' />
+              }
+            </div>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(AppDetailNav)

dify_1.2.0/web/app/components/app-sidebar/navLink.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { useSelectedLayoutSegment } from 'next/navigation'
+import Link from 'next/link'
+import classNames from '@/utils/classnames'
+import type { RemixiconComponentType } from '@remixicon/react'
+
+export type NavIcon = React.ComponentType<
+React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
+  title?: string | undefined
+  titleId?: string | undefined
+}> | RemixiconComponentType
+
+export type NavLinkProps = {
+  name: string
+  href: string
+  iconMap: {
+    selected: NavIcon
+    normal: NavIcon
+  }
+  mode?: string
+}
+
+export default function NavLink({
+  name,
+  href,
+  iconMap,
+  mode = 'expand',
+}: NavLinkProps) {
+  const segment = useSelectedLayoutSegment()
+  const formattedSegment = (() => {
+    let res = segment?.toLowerCase()
+    // logs and annotations use the same nav
+    if (res === 'annotations')
+      res = 'logs'
+
+    return res
+  })()
+  const isActive = href.toLowerCase().split('/')?.pop() === formattedSegment
+  const NavIcon = isActive ? iconMap.selected : iconMap.normal
+
+  return (
+    <Link
+      key={name}
+      href={href}
+      className={classNames(
+        isActive ? 'bg-state-accent-active text-text-accent font-semibold' : 'text-components-menu-item-text hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
+        'group flex items-center h-9 rounded-md py-2 text-sm font-normal',
+        mode === 'expand' ? 'px-3' : 'px-2.5',
+      )}
+      title={mode === 'collapse' ? name : ''}
+    >
+      <NavIcon
+        className={classNames(
+          'h-4 w-4 flex-shrink-0',
+          mode === 'expand' ? 'mr-2' : 'mr-0',
+        )}
+        aria-hidden="true"
+      />
+      {mode === 'expand' && name}
+    </Link>
+  )
+}

dify_1.2.0/web/app/components/app-sidebar/style.module.css

@@ -0,0 +1,11 @@
+.sidebar {
+    border-right: 1px solid #F3F4F6;
+}
+
+.completionPic {
+background-image: url('./completion.png')
+}
+  
+.expertPic {
+background-image: url('./expert.png')
+}

dify_1.2.0/web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Textarea from '@/app/components/base/textarea'
+import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
+
+export enum EditItemType {
+  Query = 'query',
+  Answer = 'answer',
+}
+type Props = {
+  type: EditItemType
+  content: string
+  onChange: (content: string) => void
+}
+
+const EditItem: FC<Props> = ({
+  type,
+  content,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const avatar = type === EditItemType.Query ? <User className='h-6 w-6' /> : <Robot className='h-6 w-6' />
+  const name = type === EditItemType.Query ? t('appAnnotation.addModal.queryName') : t('appAnnotation.addModal.answerName')
+  const placeholder = type === EditItemType.Query ? t('appAnnotation.addModal.queryPlaceholder') : t('appAnnotation.addModal.answerPlaceholder')
+
+  return (
+    <div className='flex' onClick={e => e.stopPropagation()}>
+      <div className='mr-3 shrink-0'>
+        {avatar}
+      </div>
+      <div className='grow'>
+        <div className='system-xs-semibold mb-1 text-text-primary'>{name}</div>
+        <Textarea
+          value={content}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
+          placeholder={placeholder}
+          autoFocus
+        />
+      </div>
+    </div>
+  )
+}
+export default React.memo(EditItem)