Initial commit

dify_0.15.3/web/.dockerignore

@@ -0,0 +1,24 @@
+.env
+.env.*
+
+# Logs
+logs
+*.log*
+
+# node
+node_modules
+.husky
+.next
+
+# vscode
+.vscode
+
+# webstorm
+.idea
+*.iml
+*.iws
+*.ipr
+
+
+# Jetbrains
+.idea

dify_0.15.3/web/.editorconfig

@@ -0,0 +1,22 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,tsx}]
+charset = utf-8
+indent_style = space
+indent_size = 2
+
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

dify_0.15.3/web/.env.example

@@ -0,0 +1,33 @@
+# For production release, change this to PRODUCTION
+NEXT_PUBLIC_DEPLOY_ENV=DEVELOPMENT
+# The deployment edition, SELF_HOSTED
+NEXT_PUBLIC_EDITION=SELF_HOSTED
+# The base URL of console application, refers to the Console base URL of WEB service if console domain is
+# different from api or web app domain.
+# example: http://cloud.dify.ai/console/api
+NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
+# The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from
+# console or api domain.
+# example: http://udify.app/api
+NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
+
+# SENTRY
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Disable Next.js Telemetry (https://nextjs.org/telemetry)
+NEXT_TELEMETRY_DISABLED=1
+
+# Disable Upload Image as WebApp icon default is false
+NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON=false
+
+# The timeout for the text generation in millisecond
+NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS=60000
+
+# CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+NEXT_PUBLIC_CSP_WHITELIST=
+
+# The maximum number of top-k value for RAG.
+NEXT_PUBLIC_TOP_K_MAX_VALUE=10
+
+# The maximum number of tokens for segmentation
+NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH=4000

dify_0.15.3/web/.eslintignore

@@ -0,0 +1,7 @@
+/**/node_modules/*
+node_modules/
+
+dist/
+build/
+out/
+.next/

dify_0.15.3/web/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": [
+    "next",
+    "@antfu",
+    "plugin:storybook/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/consistent-type-definitions": [
+      "error",
+      "type"
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "no-console": "off",
+    "indent": "off",
+    "@typescript-eslint/indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1,
+        "flatTernaryExpressions": false,
+        "ignoredNodes": [
+          "PropertyDefinition[decorators]",
+          "TSUnionType",
+          "FunctionExpression[params]:has(Identifier[decorators])"
+        ]
+      }
+    ],
+    "react-hooks/exhaustive-deps": "warn",
+    "react/display-name": "warn"
+  }
+}

dify_0.15.3/web/.gitignore

@@ -0,0 +1,57 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+/.history
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# npm
+package-lock.json
+
+# yarn
+.pnp.cjs
+.pnp.loader.mjs
+.yarn/
+.yarnrc.yml
+
+# pmpm
+pnpm-lock.yaml
+
+.favorites.json
+*storybook.log
+
+# mise
+mise.toml
+

dify_0.15.3/web/.husky/pre-commit

@@ -0,0 +1,82 @@
+#!/usr/bin/env bash
+. "$(dirname -- "$0")/_/husky.sh"
+
+# get the list of modified files
+files=$(git diff --cached --name-only)
+
+# check if api or web directory is modified
+
+api_modified=false
+web_modified=false
+
+for file in $files
+do
+    if [[ $file == "api/"* && $file == *.py ]]; then
+        # set api_modified flag to true
+        api_modified=true
+    elif [[ $file == "web/"* ]]; then
+        # set web_modified flag to true
+        web_modified=true
+    fi
+done
+
+# run linters based on the modified modules
+
+if $api_modified; then
+    echo "Running Ruff linter on api module"
+
+    # python style checks rely on `ruff` in path
+    if ! command -v ruff &> /dev/null; then
+        echo "Installing linting tools (Ruff, dotenv-linter ...) ..."
+        poetry install -C api --only lint
+    fi
+
+    # run Ruff linter auto-fixing
+    ruff check --fix ./api
+
+    # run Ruff linter checks
+    ruff check --preview ./api || status=$?
+
+    status=${status:-0}
+
+
+    if [ $status -ne 0 ]; then
+      echo "Ruff linter on api module error, exit code: $status"
+      echo "Please run 'dev/reformat' to fix the fixable linting errors."
+      exit 1
+    fi
+fi
+
+if $web_modified; then
+    echo "Running ESLint on web module"
+    cd ./web || exit 1
+    npx lint-staged
+
+    echo "Running unit tests check"
+    modified_files=$(git diff --cached --name-only -- utils | grep -v '\.spec\.ts$' || true)
+
+    if [ -n "$modified_files" ]; then
+        for file in $modified_files; do
+            test_file="${file%.*}.spec.ts"
+            echo "Checking for test file: $test_file"
+
+            # check if the test file exists
+            if [ -f "../$test_file" ]; then
+                echo "Detected changes in $file, running corresponding unit tests..."
+                npm run test "../$test_file"
+
+                if [ $? -ne 0 ]; then
+                    echo "Unit tests failed. Please fix the errors before committing."
+                    exit 1
+                fi
+                echo "Unit tests for $file passed."
+            else
+                echo "Warning: $file does not have a corresponding test file."
+            fi
+
+        done
+        echo "All unit tests for modified web/utils files have passed."
+    fi
+
+    cd ../
+fi

dify_0.15.3/web/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+const config: StorybookConfig = {
+    // stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    staticDirs: ['../public'],
+}
+export default config

dify_0.15.3/web/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import I18nServer from '../app/components/i18n-server'
+
+import '../app/styles/globals.css'
+import '../app/styles/markdown.scss'
+import './storybook.css'
+
+export const decorators = [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+    Story => {
+      return <I18nServer>
+        <Story />
+      </I18nServer>
+    }
+  ];
+
+const preview: Preview = {
+  parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview

dify_0.15.3/web/.storybook/storybook.css

@@ -0,0 +1,6 @@
+html,
+body {
+  max-width: unset;
+  overflow: auto;
+  user-select: text;
+}

dify_0.15.3/web/Dockerfile

@@ -0,0 +1,71 @@
+# base image
+FROM node:20-alpine3.20 AS base
+LABEL maintainer="takatost@gmail.com"
+
+# if you located in China, you can use aliyun mirror to speed up
+RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
+
+RUN apk add --no-cache tzdata
+
+
+# install packages
+FROM base AS packages
+
+WORKDIR /app/web
+
+COPY package.json .
+COPY yarn.lock .
+
+# if you located in China, you can use taobao registry to speed up
+RUN yarn install --frozen-lockfile --registry https://registry.npmmirror.com/
+
+#RUN yarn install --frozen-lockfile
+
+# build resources
+FROM base AS builder
+WORKDIR /app/web
+COPY --from=packages /app/web/ .
+COPY . .
+
+RUN yarn build
+
+
+# production stage
+FROM base AS production
+
+ENV NODE_ENV=production
+ENV EDITION=SELF_HOSTED
+ENV DEPLOY_ENV=PRODUCTION
+ENV CONSOLE_API_URL=http://127.0.0.1:5001
+ENV APP_API_URL=http://127.0.0.1:5001
+ENV PORT=3000
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# set timezone
+ENV TZ=UTC
+RUN ln -s /usr/share/zoneinfo/${TZ} /etc/localtime \
+    && echo ${TZ} > /etc/timezone
+
+
+WORKDIR /app/web
+COPY --from=builder /app/web/public ./public
+COPY --from=builder /app/web/.next/standalone ./
+COPY --from=builder /app/web/.next/static ./.next/static
+
+COPY docker/pm2.json ./pm2.json
+COPY docker/entrypoint.sh ./entrypoint.sh
+
+
+# global runtime packages
+RUN yarn global add pm2 \
+    && yarn cache clean \
+    && mkdir /.pm2 \
+    && chown -R 1001:0 /.pm2 /app/web \
+    && chmod -R g=u /.pm2 /app/web
+
+ARG COMMIT_SHA
+ENV COMMIT_SHA=${COMMIT_SHA}
+
+USER 1001
+EXPOSE 3000
+ENTRYPOINT ["/bin/sh", "./entrypoint.sh"]

dify_0.15.3/web/README.md

@@ -0,0 +1,118 @@
+# Dify Frontend
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+### Run by source code
+
+To start the web frontend service, you will need [Node.js v18.x (LTS)](https://nodejs.org/en) and [NPM version 8.x.x](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/).
+
+First, install the dependencies:
+
+```bash
+npm install
+# or
+yarn install --frozen-lockfile
+```
+
+Then, configure the environment variables. Create a file named `.env.local` in the current directory and copy the contents from `.env.example`. Modify the values of these environment variables according to your requirements:
+
+```bash
+cp .env.example .env.local
+```
+
+```
+# For production release, change this to PRODUCTION
+NEXT_PUBLIC_DEPLOY_ENV=DEVELOPMENT
+# The deployment edition, SELF_HOSTED
+NEXT_PUBLIC_EDITION=SELF_HOSTED
+# The base URL of console application, refers to the Console base URL of WEB service if console domain is
+# different from api or web app domain.
+# example: http://cloud.dify.ai/console/api
+NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
+# The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from
+# console or api domain.
+# example: http://udify.app/api
+NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
+
+# SENTRY
+NEXT_PUBLIC_SENTRY_DSN=
+```
+
+Finally, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the file under folder `app`. The page auto-updates as you edit the file.
+
+## Deploy
+
+### Deploy on server
+
+First, build the app for production:
+
+```bash
+npm run build
+```
+
+Then, start the server:
+
+```bash
+npm run start
+```
+
+If you want to customize the host and port:
+
+```bash
+npm run start --port=3001 --host=0.0.0.0
+```
+
+## Storybook
+
+This project uses [Storybook](https://storybook.js.org/) for UI component development.
+
+To start the storybook server, run:
+
+```bash
+yarn storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.
+
+## Lint Code
+
+If your IDE is VSCode, rename `web/.vscode/settings.example.json` to `web/.vscode/settings.json` for lint code setting.
+
+## Test
+
+We start to use [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for Unit Testing.
+
+You can create a test file with a suffix of `.spec` beside the file that to be tested. For example, if you want to test a file named `util.ts`. The test file name should be `util.spec.ts`.
+
+Run test:
+
+```bash
+npm run test
+```
+
+If you are not familiar with writing tests, here is some code to refer to:
+* [classnames.spec.ts](./utils/classnames.spec.ts)
+* [index.spec.tsx](./app/components/base/button/index.spec.tsx)
+
+
+
+
+## Documentation
+
+Visit <https://docs.dify.ai/getting-started/readme> to view the full documentation.
+
+## Community
+
+The Dify community can be found on [Discord community](https://discord.gg/5AEfbxcd9k), where you can ask questions, voice ideas, and share your projects.

dify_0.15.3/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: { appId: string }
+}
+
+const Logs = async () => {
+  return (
+    <Main pageType={PageType.annotation} />
+  )
+}
+
+export default Logs

dify_0.15.3/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_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/develop/page.tsx

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

dify_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

@@ -0,0 +1,174 @@
+'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
+  params: { appId: string }
+}
+
+const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
+  const {
+    children,
+    params: { 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
+  }, [t])
+
+  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')
+    }
+  }, [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)
+    })
+  }, [appId, router, setAppDetail])
+
+  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 })
+        })
+      }
+    }
+  }, [appDetailRes, appId, getNavigations, isCurrentWorkspaceEditor, isLoadingAppDetail, isLoadingCurrentWorkspace, pathname, router, setAppDetail, 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, 'flex', 'overflow-hidden')}>
+      {appDetail && (
+        <AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background} desc={appDetail.mode} navigation={navigation} />
+      )}
+      <div className="bg-components-panel-bg grow overflow-hidden">
+        {children}
+      </div>
+    </div>
+  )
+}
+export default React.memo(AppDetailLayout)

dify_0.15.3/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_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx

@@ -0,0 +1,140 @@
+'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
+}
+
+const CardView: FC<ICardViewProps> = ({ appId }) => {
+  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="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
+      <AppCard
+        appInfo={appDetail}
+        cardType="webapp"
+        onChangeStatus={onChangeSiteStatus}
+        onGenerateCode={onGenerateCode}
+        onSaveSiteConfig={onSaveSiteConfig}
+      />
+      <AppCard
+        cardType="api"
+        appInfo={appDetail}
+        onChangeStatus={onChangeApiStatus}
+      />
+    </div>
+  )
+}
+
+export default CardView

dify_0.15.3/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='flex flex-row items-center mt-8 mb-4 text-gray-900 text-base'>
+        <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='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <ConversationsChart period={period} id={appId} />
+          <EndUsersChart period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          {isChatApp
+            ? (
+              <AvgSessionInteractions period={period} id={appId} />
+            )
+            : (
+              <AvgResponseTime period={period} id={appId} />
+            )}
+          <TokenPerSecond period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <UserSatisfactionRate period={period} id={appId} />
+          <CostChart period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && isChatApp && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <MessagesChart period={period} id={appId} />
+        </div>
+      )}
+      {isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <WorkflowMessagesChart period={period} id={appId} />
+          <WorkflowDailyTerminalsChart period={period} id={appId} />
+        </div>
+      )}
+      {isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <WorkflowCostChart period={period} id={appId} />
+          <AvgUserInteractions period={period} id={appId} />
+        </div>
+      )}
+    </div>
+  )
+}

dify_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx

@@ -0,0 +1,24 @@
+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: { appId: string }
+}
+
+const Overview = async ({
+  params: { appId },
+}: IDevelopProps) => {
+  return (
+    <div className="h-full px-4 sm:px-16 py-6 overflow-scroll">
+      <ApikeyInfoPanel />
+      <TracingPanel />
+      <CardView appId={appId} />
+      <ChartView appId={appId} />
+    </div>
+  )
+}
+
+export default Overview

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

@@ -0,0 +1,87 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { PopupProps } from './config-popup'
+import ConfigPopup from './config-popup'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+const I18N_PREFIX = 'app.tracing'
+
+type Props = {
+  readOnly: boolean
+  className?: string
+  hasConfigured: boolean
+  controlShowPopup?: number
+} & PopupProps
+
+const ConfigBtn: FC<Props> = ({
+  className,
+  hasConfigured,
+  controlShowPopup,
+  ...popupProps
+}) => {
+  const { t } = useTranslation()
+  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
+
+  const triggerContent = hasConfigured
+    ? (
+      <div className={cn(className, 'p-1 rounded-md hover:bg-black/5 cursor-pointer')}>
+        <Settings04 className='w-4 h-4 text-gray-500' />
+      </div>
+    )
+    : (
+      <Button variant='primary'
+        className={cn(className, '!h-8 !px-3 select-none')}
+      >
+        <Settings04 className='mr-1 w-4 h-4' />
+        <span className='text-[13px]'>{t(`${I18N_PREFIX}.config`)}</span>
+      </Button>
+    )
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 12,
+        crossAxis: hasConfigured ? 8 : 0,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        {triggerContent}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <ConfigPopup {...popupProps} />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(ConfigBtn)

dify_0.15.3/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'
+
+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}
+      size='l'
+      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: ProviderPanel[] = []
+
+    if (langSmithConfig)
+      configuredPanels.push(langSmithPanel)
+
+    if (langFuseConfig)
+      configuredPanels.push(langfusePanel)
+
+    if (opikConfig)
+      configuredPanels.push(opikPanel)
+
+    return configuredPanels
+  }
+
+  const moreProviderPanel = () => {
+    const notConfiguredPanels: ProviderPanel[] = []
+
+    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] p-4 rounded-2xl bg-white border-[0.5px] border-black/5 shadow-lg'>
+      <div className='flex justify-between items-center'>
+        <div className='flex items-center'>
+          <TracingIcon size='md' className='mr-2' />
+          <div className='leading-[120%] text-[18px] font-semibold text-gray-900'>{t(`${I18N_PREFIX}.tracing`)}</div>
+        </div>
+        <div className='flex items-center'>
+          <Indicator color={enabled ? 'green' : 'gray'} />
+          <div className='ml-1.5 text-xs font-semibold text-gray-500 uppercase'>
+            {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+          </div>
+          {!readOnly && (
+            <>
+              {providerAllNotConfigured
+                ? (
+                  <Tooltip
+                    popupContent={t(`${I18N_PREFIX}.disabledTip`)}
+                  >
+                    {switchContent}
+                  </Tooltip>
+                )
+                : switchContent}
+            </>
+          )}
+
+        </div>
+      </div>
+
+      <div className='mt-2 leading-4 text-xs font-normal text-gray-500'>
+        {t(`${I18N_PREFIX}.tracingDescription`)}
+      </div>
+      <div className='mt-3 h-px bg-gray-100'></div>
+      <div className='mt-3'>
+        {(providerAllConfigured || providerAllNotConfigured)
+          ? (
+            <>
+              <div className='leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${I18N_PREFIX}.configProviderTitle.${providerAllConfigured ? 'configured' : 'notConfigured'}`)}</div>
+              <div className='mt-2 space-y-2'>
+                {langSmithPanel}
+                {langfusePanel}
+                {opikPanel}
+              </div>
+            </>
+          )
+          : (
+            <>
+              <div className='leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${I18N_PREFIX}.configProviderTitle.configured`)}</div>
+              <div className='mt-2 space-y-2'>
+                {configuredProviderPanel()}
+              </div>
+              <div className='mt-3 leading-4 text-xs font-medium text-gray-500 uppercase'>{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_0.15.3/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_0.15.3/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 items-center h-[18px] text-[13px] font-medium text-gray-900')}>{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_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -0,0 +1,196 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePathname } from 'next/navigation'
+import { useBoolean } from 'ahooks'
+import type { LangFuseConfig, LangSmithConfig } 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'
+
+const I18N_PREFIX = 'app.tracing'
+
+const Title = ({
+  className,
+}: {
+  className?: string
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn(className, 'flex items-center text-lg font-semibold text-gray-900')}>
+      {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
+          : null
+
+  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.langSmith)
+      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.langSmith)
+      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='flex items-center justify-between mb-3'>
+        <Title className='h-[41px]' />
+        <div className='w-[200px]'>
+          <Loading />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('mb-3 flex justify-between items-center')}>
+      <Title className='h-[41px]' />
+      <div className='flex items-center p-2 rounded-xl border-[0.5px] border-gray-200 shadow-xs cursor-pointer hover:bg-gray-100' onClick={showPopup}>
+        {!inUseTracingProvider
+          ? <>
+            <TracingIcon size='md' className='mr-2' />
+            <div className='leading-5 text-sm font-semibold text-gray-700'>{t(`${I18N_PREFIX}.title`)}</div>
+          </>
+          : <InUseProviderIcon className='ml-1 h-4' />}
+
+        {hasConfiguredTracing && (
+          <div className='ml-4 mr-1 flex items-center'>
+            <Indicator color={enabled ? 'green' : 'gray'} />
+            <div className='ml-1.5 text-xs font-semibold text-gray-500 uppercase'>
+              {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+            </div>
+          </div>
+        )}
+
+        {hasConfiguredTracing && (
+          <div className='ml-2 w-px h-3.5 bg-gray-200'></div>
+        )}
+        <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_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx

@@ -0,0 +1,337 @@
+'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'
+
+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) {
+      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='w-full h-full z-[60]'>
+              <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
+                <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+                  <div className='px-8 pt-8'>
+                    <div className='flex justify-between items-center mb-4'>
+                      <div className='text-xl font-semibold text-gray-900'>{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 justify-between items-center h-8'>
+                      <a
+                        className='flex items-center space-x-1 leading-[18px] text-xs font-normal text-[#155EEF]'
+                        target='_blank'
+                        href={docURL[type]}
+                      >
+                        <span>{t(`${I18N_PREFIX}.viewDocsLink`, { key: t(`app.tracing.${type}.title`) })}</span>
+                        <LinkExternal02 className='w-3 h-3' />
+                      </a>
+                      <div className='flex items-center'>
+                        {isEdit && (
+                          <>
+                            <Button
+                              className='h-9 text-sm font-medium text-gray-700'
+                              onClick={showRemoveConfirm}
+                            >
+                              <span className='text-[#D92D20]'>{t('common.operation.remove')}</span>
+                            </Button>
+                            <div className='mx-3 w-px h-[18px] bg-gray-200'></div>
+                          </>
+                        )}
+                        <Button
+                          className='mr-2 h-9 text-sm font-medium text-gray-700'
+                          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-t-black/5'>
+                    <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
+                      <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                      {t('common.modelProvider.encrypted.front')}
+                      <a
+                        className='text-primary-600 mx-1'
+                        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_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -0,0 +1,98 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from '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 { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
+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(isChosen ? 'border-primary-400' : 'border-transparent', !isChosen && hasConfigured && !readOnly && 'cursor-pointer', 'px-4 py-3 rounded-xl border-[1.5px]  bg-gray-100')}
+      onClick={handleChosen}
+    >
+      <div className={'flex justify-between items-center space-x-1'}>
+        <div className='flex items-center'>
+          <Icon className='h-6' />
+          {isChosen && <div className='ml-1 flex items-center h-4  px-1 rounded-[4px] border border-primary-500 leading-4 text-xs font-medium text-primary-500 uppercase '>{t(`${I18N_PREFIX}.inUse`)}</div>}
+        </div>
+        {!readOnly && (
+          <div className={'flex justify-between items-center space-x-1'}>
+            {hasConfigured && (
+              <div className='flex px-2 items-center h-6 bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer text-gray-700 space-x-1' onClick={viewBtnClick} >
+                <View className='w-3 h-3'/>
+                <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.view`)}</div>
+              </div>
+            )}
+            <div
+              className='flex px-2 items-center h-6 bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer text-gray-700 space-x-1'
+              onClick={handleConfigBtnClick}
+            >
+              <Settings04 className='w-3 h-3' />
+              <div className='text-xs font-medium'>{t(`${I18N_PREFIX}.config`)}</div>
+            </div>
+          </div>
+        )}
+
+      </div>
+      <div className='mt-2 leading-4 text-xs font-normal text-gray-500'>
+        {t(`${I18N_PREFIX}.${type}.description`)}
+      </div>
+    </div>
+  )
+}
+export default React.memo(ProviderPanel)

dify_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx

@@ -0,0 +1,45 @@
+'use client'
+import { ChevronDoubleDownIcon } from '@heroicons/react/20/solid'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import React, { useCallback } from 'react'
+import Tooltip from '@/app/components/base/tooltip'
+
+const I18N_PREFIX = 'app.tracing'
+
+type Props = {
+  isFold: boolean
+  onFoldChange: (isFold: boolean) => void
+}
+
+const ToggleFoldBtn: FC<Props> = ({
+  isFold,
+  onFoldChange,
+}) => {
+  const { t } = useTranslation()
+
+  const handleFoldChange = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    onFoldChange(!isFold)
+  }, [isFold, onFoldChange])
+  return (
+    // text-[0px] to hide spacing between tooltip elements
+    <div className='shrink-0 cursor-pointer text-[0px]' onClick={handleFoldChange}>
+      <Tooltip
+        popupContent={t(`${I18N_PREFIX}.${isFold ? 'expand' : 'collapse'}`)}
+      >
+        {isFold && (
+          <div className='p-1 rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5'>
+            <ChevronDoubleDownIcon className='w-4 h-4' />
+          </div>
+        )}
+        {!isFold && (
+          <div className='p-2 rounded-lg text-gray-500 border-[0.5px] border-gray-200 hover:text-gray-800 hover:bg-black/5'>
+            <ChevronDoubleDownIcon className='w-4 h-4 transform rotate-180' />
+          </div>
+        )}
+      </Tooltip>
+    </div>
+  )
+}
+export default React.memo(ToggleFoldBtn)

dify_0.15.3/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='w-full h-full' />
+    </div>
+  )
+}
+export default React.memo(TracingIcon)

dify_0.15.3/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_0.15.3/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_0.15.3/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='w-full h-full overflow-x-auto'>
+      <Workflow />
+    </div>
+  )
+}
+export default Page

dify_0.15.3/web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx

@@ -0,0 +1,27 @@
+'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')
+  }, [isCurrentWorkspaceDatasetOperator])
+
+  return (
+    <>
+      {children}
+    </>
+  )
+}
+
+export default React.memo(AppDetail)

dify_0.15.3/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 s from './style.module.css'
+import cn from '@/utils/classnames'
+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'
+
+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)
+  }, [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 (e) {
+      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 (e) {
+      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 (e) {
+      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 (e) {
+      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={s.actionItem} onClick={onClickSettings}>
+          <span className={s.actionName}>{t('app.editApp')}</span>
+        </button>
+        <Divider className="!my-1" />
+        <button className={s.actionItem} onClick={onClickDuplicate}>
+          <span className={s.actionName}>{t('app.duplicate')}</span>
+        </button>
+        <button className={s.actionItem} onClick={onClickExport}>
+          <span className={s.actionName}>{t('app.export')}</span>
+        </button>
+        {(app.mode === 'completion' || app.mode === 'chat') && (
+          <>
+            <Divider className="!my-1" />
+            <div
+              className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
+              onClick={onClickSwitch}
+            >
+              <span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
+            </div>
+          </>
+        )}
+        <Divider className="!my-1" />
+        <button className={s.actionItem} onClick={onClickInstalledApp}>
+          <span className={s.actionName}>{t('app.openInExplore')}</span>
+        </button>
+        <Divider className="!my-1" />
+        <div
+          className={cn(s.actionItem, s.deleteActionItem, 'group')}
+          onClick={onClickDelete}
+        >
+          <span className={cn(s.actionName, 'group-hover:text-red-500')}>
+            {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='relative h-[160px] group col-span-1 bg-components-card-bg border-[1px] border-solid border-components-card-border rounded-xl shadow-sm inline-flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
+      >
+        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+          <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='w-3 h-3' />
+          </div>
+          <div className='grow w-0 py-[1px]'>
+            <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
+              <div className='truncate' title={app.name}>{app.name}</div>
+            </div>
+            <div className='flex items-center text-[10px] leading-[18px] text-text-tertiary font-medium'>
+              {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 items-center shrink-0 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          tags.length ? 'flex' : '!hidden group-hover:!flex',
+        )}>
+          {isCurrentWorkspaceEditor && (
+            <>
+              <div className={cn('grow flex items-center gap-1 w-0')} onClick={(e) => {
+                e.stopPropagation()
+                e.preventDefault()
+              }}>
+                <div className={cn(
+                  'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+                  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='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px]' />
+              <div className='!hidden group-hover:!flex shrink-0'>
+                <CustomPopover
+                  htmlContent={<Operations />}
+                  position="br"
+                  trigger="click"
+                  btnElement={
+                    <div
+                      className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                    >
+                      <RiMoreFill className='w-4 h-4 text-text-tertiary' />
+                    </div>
+                  }
+                  btnClassName={open =>
+                    cn(
+                      open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
+                      'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                    )
+                  }
+                  popupClassName={
+                    (app.mode === 'completion' || app.mode === 'chat')
+                      ? '!w-[256px] translate-x-[-224px]'
+                      : '!w-[160px] translate-x-[-128px]'
+                  }
+                  className={'h-fit !z-20'}
+                />
+              </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_0.15.3/web/app/(commonLayout)/apps/Apps.tsx

@@ -0,0 +1,195 @@
+'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,
+  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 = '' }, setQuery } = useAppsQueryState()
+  const [isCreatedByMe, setIsCreatedByMe] = useState(false)
+  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='w-[14px] h-[14px] mr-1' /> },
+    { value: 'chat', text: t('app.types.chatbot'), icon: <RiMessage3Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'agent-chat', text: t('app.types.agent'), icon: <RiRobot3Line className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'workflow', text: t('app.types.workflow'), icon: <RiExchange2Line className='w-[14px] h-[14px] mr-1' /> },
+  ]
+
+  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()
+  }
+
+  return (
+    <>
+      <div className='sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
+        <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={() => setIsCreatedByMe(!isCreatedByMe)}
+          />
+          <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='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative'>
+          {isCurrentWorkspaceEditor
+            && <NewAppCard onSuccess={mutate} />}
+          {data.map(({ data: apps }) => apps.map(app => (
+            <AppCard key={app.id} app={app} onRefresh={mutate} />
+          )))}
+        </div>
+        : <div className='grid content-start grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6 gap-4 px-12 pt-2 grow relative overflow-hidden'>
+          {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='h-[160px] inline-flex rounded-xl bg-background-default-lighter'></div>
+    ))
+    return defaultCards
+  }
+  return (
+    <>
+      {renderDefaultCard()}
+      <div className='absolute top-0 left-0 right-0 bottom-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_0.15.3/web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { forwardRef, 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 = forwardRef<HTMLDivElement, CreateAppCardProps>(({ className, onSuccess }, ref) => {
+  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 flex-col justify-between h-[160px] bg-components-card-bg rounded-xl border-[0.5px] border-components-card-border', className)}
+    >
+      <div className='grow p-2 rounded-t-xl'>
+        <div className='px-6 pt-2 pb-1 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
+        <button className='w-full flex items-center mb-1 px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppModal(true)}>
+          <FilePlus01 className='shrink-0 mr-2 w-4 h-4' />
+          {t('app.newApp.startFromBlank')}
+        </button>
+        <button className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover' onClick={() => setShowNewAppTemplateDialog(true)}>
+          <FilePlus02 className='shrink-0 mr-2 w-4 h-4' />
+          {t('app.newApp.startFromTemplate')}
+        </button>
+        <button
+          onClick={() => setShowCreateFromDSLModal(true)}
+          className='w-full flex items-center px-6 py-[7px] rounded-lg text-[13px] font-medium leading-[18px] text-text-tertiary cursor-pointer hover:text-text-secondary hover:bg-state-base-hover'>
+          <FileArrow01 className='shrink-0 mr-2 w-4 h-4' />
+          {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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/web/app/(commonLayout)/apps/hooks/useAppsQueryState.ts

@@ -0,0 +1,53 @@
+import { type ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+type AppsQuery = {
+  tagIDs?: string[]
+  keywords?: string
+}
+
+// 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
+  return { tagIDs, keywords }
+}
+
+// Update the URL search string with the given query parameters.
+function updateSearchParams(query: AppsQuery, current: URLSearchParams) {
+  const { tagIDs, keywords } = 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')
+}
+
+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_0.15.3/web/app/(commonLayout)/apps/page.tsx

@@ -0,0 +1,34 @@
+'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'
+
+const AppList = () => {
+  const { t } = useTranslation()
+  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
+
+  return (
+    <div className='relative flex flex-col overflow-y-auto bg-background-body shrink-0 h-0 grow'>
+      <Apps />
+      {systemFeatures.license.status === LicenseStatus.NONE && <footer className='px-12 py-6 grow-0 shrink-0'>
+        <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('app.join')}</h3>
+        <p className='mt-1 system-sm-regular text-text-tertiary'>{t('app.communityIntro')}</p>
+        <div className='flex items-center gap-2 mt-3'>
+          <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://github.com/langgenius/dify'>
+            <RiGithubFill className='w-5 h-5 text-text-tertiary' />
+          </Link>
+          <Link className={style.socialMediaLink} target='_blank' rel='noopener noreferrer' href='https://discord.gg/FngNHpbcY7'>
+            <RiDiscordFill className='w-5 h-5 text-text-tertiary' />
+          </Link>
+        </div>
+      </footer>}
+    </div >
+  )
+}
+
+export default AppList

dify_0.15.3/web/app/(commonLayout)/apps/style.module.css

@@ -0,0 +1,29 @@
+
+.commonIcon {
+  @apply w-4 h-4 inline-block align-middle;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+}
+.actionIcon {
+  @apply bg-gray-500;
+  mask-image: url(~@/assets/action.svg);
+}
+.actionItem {
+  @apply h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer;
+  width: calc(100% - 0.5rem);
+}
+.deleteActionItem {
+  @apply hover:bg-red-50 !important;
+}
+.actionName {
+  @apply text-gray-700 text-sm;
+}
+
+/* .completionPic {
+  background-image: url(~@/app/components/app-sidebar/completion.png)
+}
+    
+.expertPic {
+  background-image: url(~@/app/components/app-sidebar/expert.png)
+} */

dify_0.15.3/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_0.15.3/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/[documentId]/page.tsx

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

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

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

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

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

dify_0.15.3/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/documents/page.tsx

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

dify_0.15.3/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_0.15.3/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx

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

dify_0.15.3/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -0,0 +1,228 @@
+'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, 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>
+}
+
+const BookOpenIcon = ({ className }: SVGProps<SVGElement>) => {
+  return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
+    <path opacity="0.12" d="M1 3.1C1 2.53995 1 2.25992 1.10899 2.04601C1.20487 1.85785 1.35785 1.70487 1.54601 1.60899C1.75992 1.5 2.03995 1.5 2.6 1.5H2.8C3.9201 1.5 4.48016 1.5 4.90798 1.71799C5.28431 1.90973 5.59027 2.21569 5.78201 2.59202C6 3.01984 6 3.5799 6 4.7V10.5L5.94997 10.425C5.60265 9.90398 5.42899 9.64349 5.19955 9.45491C4.99643 9.28796 4.76238 9.1627 4.5108 9.0863C4.22663 9 3.91355 9 3.28741 9H2.6C2.03995 9 1.75992 9 1.54601 8.89101C1.35785 8.79513 1.20487 8.64215 1.10899 8.45399C1 8.24008 1 7.96005 1 7.4V3.1Z" fill="#155EEF" />
+    <path d="M6 10.5L5.94997 10.425C5.60265 9.90398 5.42899 9.64349 5.19955 9.45491C4.99643 9.28796 4.76238 9.1627 4.5108 9.0863C4.22663 9 3.91355 9 3.28741 9H2.6C2.03995 9 1.75992 9 1.54601 8.89101C1.35785 8.79513 1.20487 8.64215 1.10899 8.45399C1 8.24008 1 7.96005 1 7.4V3.1C1 2.53995 1 2.25992 1.10899 2.04601C1.20487 1.85785 1.35785 1.70487 1.54601 1.60899C1.75992 1.5 2.03995 1.5 2.6 1.5H2.8C3.9201 1.5 4.48016 1.5 4.90798 1.71799C5.28431 1.90973 5.59027 2.21569 5.78201 2.59202C6 3.01984 6 3.5799 6 4.7M6 10.5V4.7M6 10.5L6.05003 10.425C6.39735 9.90398 6.57101 9.64349 6.80045 9.45491C7.00357 9.28796 7.23762 9.1627 7.4892 9.0863C7.77337 9 8.08645 9 8.71259 9H9.4C9.96005 9 10.2401 9 10.454 8.89101C10.6422 8.79513 10.7951 8.64215 10.891 8.45399C11 8.24008 11 7.96005 11 7.4V3.1C11 2.53995 11 2.25992 10.891 2.04601C10.7951 1.85785 10.6422 1.70487 10.454 1.60899C10.2401 1.5 9.96005 1.5 9.4 1.5H9.2C8.07989 1.5 7.51984 1.5 7.09202 1.71799C6.71569 1.90973 6.40973 2.21569 6.21799 2.59202C6 3.01984 6 3.5799 6 4.7" stroke="#155EEF" strokeLinecap="round" strokeLinejoin="round" />
+  </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='inline-flex items-center system-xs-medium-uppercase text-text-secondary space-x-1 cursor-pointer'>
+              <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
+              <RiInformation2Line className='w-4 h-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='p-4 w-[240px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl'>
+            <div className='inline-flex p-2 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle'>
+              <RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
+            </div>
+            <div className='text-xs text-text-tertiary my-2'>{t('common.datasetMenus.emptyTip')}</div>
+            <a
+              className='inline-flex items-center text-xs text-text-accent mt-2 cursor-pointer'
+              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'
+            >
+              <BookOpenIcon className='mr-1' />
+              {t('common.datasetMenus.viewDoc')}
+            </a>
+          </div>
+        }
+      >
+        <div className='inline-flex items-center system-xs-medium-uppercase text-text-secondary space-x-1 cursor-pointer'>
+          <span>{t('common.datasetMenus.noRelatedApp')}</span>
+          <RiInformation2Line className='w-4 h-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='grow flex 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="bg-background-default-subtle grow overflow-hidden">{children}</div>
+      </DatasetDetailContext.Provider>
+    </div>
+  )
+}
+export default React.memo(DatasetDetailLayout)

dify_0.15.3/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 = getLocaleOnServer()
+  const { t } = await translate(locale, 'dataset-settings')
+
+  return (
+    <div className='h-full overflow-y-auto'>
+      <div className='px-6 py-3'>
+        <div className='mb-1 system-xl-semibold text-text-primary'>{t('title')}</div>
+        <div className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
+      </div>
+      <Form />
+    </div>
+  )
+}
+
+export default Settings

dify_0.15.3/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_0.15.3/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_0.15.3/web/app/(commonLayout)/datasets/ApiServer.tsx

@@ -0,0 +1,41 @@
+'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 items-center flex-wrap gap-y-2'>
+      <div className='flex items-center mr-2 pl-1.5 pr-1 h-8 bg-white/80 border-[0.5px] border-white rounded-lg leading-5'>
+        <div className='mr-0.5 px-1.5 h-5 border border-gray-200 text-[11px] text-gray-500 rounded-md shrink-0'>{t('appApi.apiServer')}</div>
+        <div className='px-1 truncate w-fit sm:w-[248px] text-[13px] font-medium text-gray-800'>{apiBaseUrl}</div>
+        <div className='mx-1 w-[1px] h-[14px] bg-gray-200'></div>
+        <CopyFeedback
+          content={apiBaseUrl}
+          selectorId={randomString(8)}
+          className={'!w-6 !h-6 hover:bg-gray-200'}
+        />
+      </div>
+      <div className='flex items-center mr-2 px-3 h-8 bg-[#ECFDF3] text-xs font-semibold text-[#039855] rounded-lg border-[0.5px] border-[#D1FADF]'>
+        {t('appApi.ok')}
+      </div>
+      <SecretKeyButton
+        className='flex-shrink-0 !h-8 bg-white'
+        textCls='!text-gray-700 font-medium'
+        iconCls='stroke-[1.2px]'
+      />
+    </div>
+  )
+}
+
+export default ApiServer

dify_0.15.3/web/app/(commonLayout)/datasets/Container.tsx

@@ -0,0 +1,139 @@
+'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)
+
+  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='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
+      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
+        <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="w-[1px] h-4 bg-divider-regular" />
+            <Button
+              className='gap-0.5 shadows-shadow-xs'
+              onClick={() => setShowExternalApiPanel(true)}
+            >
+              <ApiConnectionMod className='w-4 h-4 text-components-button-secondary-text' />
+              <div className='flex px-0.5 justify-center items-center gap-1 text-components-button-secondary-text system-sm-medium'>{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_0.15.3/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='h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer' onClick={onClickRename}>
+          <span className='text-gray-700 text-sm'>{t('common.operation.settings')}</span>
+        </div>
+        {props.showDelete && (
+          <>
+            <Divider className="!my-1" />
+            <div
+              className='group h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-red-50 rounded-lg cursor-pointer'
+              onClick={onClickDelete}
+            >
+              <span className={cn('text-gray-700 text-sm', 'group-hover:text-red-500')}>
+                {t('common.operation.delete')}
+              </span>
+            </div>
+          </>
+        )}
+      </div>
+    )
+  }
+
+  useEffect(() => {
+    setTags(dataset.tags)
+  }, [dataset])
+
+  return (
+    <>
+      <div
+        className='group relative col-span-1 bg-components-card-bg border-[0.5px] border-solid border-components-card-border rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer 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 pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+          <div className={cn(
+            'shrink-0 flex items-center justify-center p-2.5 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]',
+            !dataset.embedding_available && 'opacity-50 hover:opacity-100',
+          )}>
+            <Folder className='w-5 h-5 text-[#444CE7]' />
+          </div>
+          <div className='grow w-0 py-[1px]'>
+            <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
+              <div className={cn('truncate', !dataset.embedding_available && 'opacity-50 hover:opacity-100 text-text-tertiary')} title={dataset.name}>{dataset.name}</div>
+              {!dataset.embedding_available && (
+                <Tooltip
+                  popupContent={t('dataset.unavailableTip')}
+                >
+                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                </Tooltip>
+              )}
+            </div>
+            <div className='flex items-center mt-[1px] 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='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
+                    <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
+                    <span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
+                    <span>{dataset.app_count}{t('dataset.appCount')}</span>
+                  </>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'grow mb-2 px-[14px] max-h-[72px] 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(
+          'items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+          tags.length ? 'flex' : '!hidden group-hover:!flex',
+        )}>
+          <div className={cn('grow flex items-center gap-1 w-0', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+          }}>
+            <div className={cn(
+              'group-hover:!block group-hover:!mr-0 mr-[41px] grow w-full',
+              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='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
+          <div className='!hidden group-hover:!flex shrink-0'>
+            <CustomPopover
+              htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
+              position="br"
+              trigger="click"
+              btnElement={
+                <div
+                  className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
+                >
+                  <RiMoreFill className='w-4 h-4 text-gray-700' />
+                </div>
+              }
+              btnClassName={open =>
+                cn(
+                  open ? '!bg-black/5 !shadow-none' : '!bg-transparent',
+                  'h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5',
+                )
+              }
+              className={'!w-[128px] h-fit !z-20'}
+            />
+          </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_0.15.3/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='px-12 py-6 grow-0 shrink-0'>
+      <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('dataset.didYouKnow')}</h3>
+      <p className='mt-1 text-sm font-normal leading-tight text-gray-700'>
+        {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
+        {t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro5')}</span>{t('dataset.intro6')}
+      </p>
+    </footer>
+  )
+}
+
+export default DatasetFooter

dify_0.15.3/web/app/(commonLayout)/datasets/Datasets.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { 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])
+
+  useEffect(() => {
+    const onScroll = debounce(() => {
+      if (!loadingStateRef.current) {
+        const { scrollTop, clientHeight } = containerRef.current!
+        const anchorOffset = anchorRef.current!.offsetTop
+        if (anchorOffset - scrollTop - clientHeight < 100)
+          setSize(size => size + 1)
+      }
+    }, 50)
+
+    containerRef.current?.addEventListener('scroll', onScroll)
+    return () => containerRef.current?.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
+      { isCurrentWorkspaceEditor && <NewDatasetCard ref={anchorRef} /> }
+      {data?.map(({ data: datasets }) => datasets.map(dataset => (
+        <DatasetCard key={dataset.id} dataset={dataset} onSuccess={mutate} />),
+      ))}
+    </nav>
+  )
+}
+
+export default Datasets

dify_0.15.3/web/app/(commonLayout)/datasets/Doc.tsx

@@ -0,0 +1,118 @@
+'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 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-16 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
+        {isTocExpanded
+          ? (
+            <nav className="toc w-full bg-gray-50 p-4 rounded-lg shadow-md max-h-[calc(100vh-150px)] overflow-y-auto">
+              <div className="flex justify-between items-center mb-4">
+                <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 hover:text-gray-900 hover:underline transition-colors duration-200"
+                      onClick={e => handleTocClick(e, item)}
+                    >
+                      {item.text}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          )
+          : (
+            <button
+              onClick={() => setIsTocExpanded(true)}
+              className="w-10 h-10 bg-gray-50 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors duration-200"
+            >
+              <RiListUnordered className="w-6 h-6" />
+            </button>
+          )}
+      </div>
+      <article className='mx-1 px-4 sm:mx-12 pt-16 bg-white rounded-t-xl prose prose-xl'>
+        {locale !== LanguagesSupported[1]
+          ? <TemplateEn apiBaseUrl={apiBaseUrl} />
+          : <TemplateZh apiBaseUrl={apiBaseUrl} />
+        }
+      </article>
+    </div>
+  )
+}
+
+export default Doc

dify_0.15.3/web/app/(commonLayout)/datasets/NewDatasetCard.tsx

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

dify_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/web/app/(commonLayout)/datasets/page.tsx

@@ -0,0 +1,11 @@
+import Container from './Container'
+
+const AppList = async () => {
+  return <Container />
+}
+
+export const metadata = {
+  title: 'Datasets - Dify',
+}
+
+export default AppList

dify_0.15.3/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_0.15.3/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_0.15.3/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: {
+    appId: string
+  }
+}
+
+const InstalledApp: FC<IInstalledAppProps> = ({ params: { appId } }) => {
+  return (
+    <Main id={appId} />
+  )
+}
+export default React.memo(InstalledApp)

dify_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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_0.15.3/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="min-w-[300px] h-full pb-[env(safe-area-inset-bottom)]">
+      {children}
+    </div>
+  )
+}
+
+export default Layout

dify_0.15.3/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 items-center justify-center h-full">
+      <div className={cn('flex flex-col items-center w-full grow justify-center', 'px-6', 'md:px-[108px]')}>
+        <Loading type='area' />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(WebSSOForm)

dify_0.15.3/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_0.15.3/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="relative group">
+          <Avatar {...props} />
+          <div
+            onClick={() => { setIsShowAvatarPicker(true) }}
+            className="absolute inset-0 bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center"
+          >
+            <span className="text-white text-xs">
+              <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='w-full flex items-center justify-center p-3 gap-2'>
+          <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_0.15.3/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_0.15.3/web/app/account/account-page/index.tsx

@@ -0,0 +1,307 @@
+'use client'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+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 { 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'
+
+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 { 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='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className='pt-2 pb-3'>
+        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
+      </div>
+      <div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
+        <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}</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='flex items-center justify-between gap-2 w-full mt-2'>
+          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.name}</span>
+          </div>
+          <div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium 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='flex items-center justify-between gap-2 w-full mt-2'>
+          <div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular 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='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
+              <div className='mb-2 body-xs-regular 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='mb-6 title-2xl-semi-bold 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='flex justify-end mt-10'>
+              <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='mb-6 title-2xl-semi-bold 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='mt-8 system-sm-semibold 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='mt-8 system-sm-semibold 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='flex justify-end mt-10'>
+              <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_0.15.3/web/app/account/avatar.tsx

@@ -0,0 +1,95 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment } from 'react'
+import { useRouter } from 'next/navigation'
+import { Menu, Transition } from '@headlessui/react'
+import Avatar from '@/app/components/base/avatar'
+import { logout } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
+
+export type IAppSelector = {
+  isMobile: boolean
+}
+
+export default function AppSelector() {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+
+  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>
+              <Menu.Button
+                className={`
+                    inline-flex items-center
+                    rounded-[20px] p-1x text-sm
+                    text-text-primary
+                    mobile:px-1
+                    ${open && 'bg-components-panel-bg-blur'}
+                  `}
+              >
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
+              </Menu.Button>
+            </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"
+            >
+              <Menu.Items
+                className="
+                    absolute -right-2 -top-1 w-60 max-w-80
+                    divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
+                    shadow-lg
+                  "
+              >
+                <Menu.Item>
+                  <div className='p-1'>
+                    <div className='flex flex-nowrap items-center px-3 py-2'>
+                      <div className='grow'>
+                        <div className='system-md-medium text-text-primary break-all'>{userProfile.name}</div>
+                        <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
+                      </div>
+                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
+                    </div>
+                  </div>
+                </Menu.Item>
+                <Menu.Item>
+                  <div className='p-1' onClick={() => handleLogout()}>
+                    <div
+                      className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
+                    >
+                      <LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
+                      <div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
+                    </div>
+                  </div>
+                </Menu.Item>
+              </Menu.Items>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}

dify_0.15.3/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='py-1 text-text-destructive body-md-medium'>
+      {t('common.account.deleteTip')}
+    </div>
+    <div className='pt-1 pb-2 text-text-secondary body-md-regular'>
+      {t('common.account.deletePrivacyLinkTip')}
+      <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
+    </div>
+    <label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('common.account.deleteLabel')}</label>
+    <Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
+      setUserInputEmail(e.target.value)
+    }} />
+    <div className='w-full flex flex-col mt-3 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_0.15.3/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='mt-3 mb-1 flex items-center system-sm-semibold 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='w-full flex flex-col mt-3 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_0.15.3/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='pt-1 text-text-destructive body-md-medium'>
+      {t('common.account.deleteTip')}
+    </div>
+    <div className='pt-1 pb-2 text-text-secondary body-md-regular'>
+      {t('common.account.deletePrivacyLinkTip')}
+      <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
+    </div>
+    <label className='mt-3 mb-1 h-6 flex items-center system-sm-semibold 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='w-full flex flex-col mt-3 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_0.15.3/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_0.15.3/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_0.15.3/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 items-center cursor-pointer' onClick={back}>
+          <LogoSite className='object-contain' />
+        </div>
+        <div className='w-[1px] h-4 bg-divider-regular' />
+        <p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
+      </div>
+      <div className='flex items-center flex-shrink-0 gap-3'>
+        <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>
+          <RiRobot2Line className='w-4 h-4' />
+          <p>{t('common.account.studio')}</p>
+          <RiArrowRightUpLine className='w-4 h-4' />
+        </Button>
+        <div className='w-[1px] h-4 bg-divider-regular' />
+        <Avatar />
+      </div>
+    </div>
+  )
+}
+export default Header

dify_0.15.3/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 flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
+                  {children}
+                </div>
+              </ModalContextProvider>
+            </ProviderContextProvider>
+          </EventEmitterContextProvider>
+        </AppContextProvider>
+      </SwrInitor>
+    </>
+  )
+}
+
+export const metadata = {
+  title: 'Dify',
+}
+
+export default Layout

dify_0.15.3/web/app/account/page.tsx

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

dify_0.15.3/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 flex-col items-center w-full grow justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      {!checkRes && <Loading />}
+      {checkRes && !checkRes.is_valid && (
+        <div className="flex flex-col md:w-[400px]">
+          <div className="w-full mx-auto">
+            <div className="mb-3 flex justify-center items-center w-20 h-20 p-5 rounded-[20px] border border-gray-100 shadow-lg text-[40px] font-bold">🤷‍♂️</div>
+            <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
+          </div>
+          <div className="w-full mx-auto mt-6">
+            <Button variant='primary' className='w-full !text-sm'>
+              <a href="https://dify.ai">{t('login.explore')}</a>
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ActivateForm