merge main

2026-04-27 14:08:18 +08:00 · 2025-10-20 14:21:09 +08:00
parent 3632b473df 9cc8ac981b
commit a4e2ef6b0c
804 changed files with 16368 additions and 10423 deletions
--- a/web/app/components/app-sidebar/dataset-info/menu.tsx
+++ b/web/app/components/app-sidebar/dataset-info/menu.tsx
@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import MenuItem from './menu-item'
 import { RiDeleteBinLine, RiEditLine, RiFileDownloadLine } from '@remixicon/react'
 import Divider from '../../base/divider'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'

 type MenuProps = {
  showDelete: boolean
@ -18,6 +19,7 @@ const Menu = ({
  detectIsUsedByApp,
 }: MenuProps) => {
  const { t } = useTranslation()
+  const runtimeMode = useDatasetDetailContextWithSelector(state => state.dataset?.runtime_mode)

  return (
    <div className='flex w-[200px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
@ -27,11 +29,13 @@ const Menu = ({
          name={t('common.operation.edit')}
          handleClick={openRenameModal}
        />
-        <MenuItem
-          Icon={RiFileDownloadLine}
-          name={t('datasetPipeline.operations.exportPipeline')}
-          handleClick={handleExportPipeline}
-        />
+        {runtimeMode === 'rag_pipeline' && (
+          <MenuItem
+            Icon={RiFileDownloadLine}
+            name={t('datasetPipeline.operations.exportPipeline')}
+            handleClick={handleExportPipeline}
+          />
+        )}
      </div>
      {showDelete && (
        <>
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
@ -16,7 +16,7 @@ type Props = {
  type: EditItemType
  content: string
  readonly?: boolean
-  onSave: (content: string) => void
+  onSave: (content: string) => Promise<void>
 }

 export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
@ -46,8 +46,13 @@ const EditItem: FC<Props> = ({
  const placeholder = type === EditItemType.Query ? t('appAnnotation.editModal.queryPlaceholder') : t('appAnnotation.editModal.answerPlaceholder')
  const [isEdit, setIsEdit] = useState(false)

-  const handleSave = () => {
-    onSave(newContent)
+  // Reset newContent when content prop changes
+  useEffect(() => {
+    setNewContent('')
+  }, [content])
+
+  const handleSave = async () => {
+    await onSave(newContent)
    setIsEdit(false)
  }

--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@ -21,7 +21,7 @@ type Props = {
  isShow: boolean
  onHide: () => void
  item: AnnotationItem
-  onSave: (editedQuery: string, editedAnswer: string) => void
+  onSave: (editedQuery: string, editedAnswer: string) => Promise<void>
  onRemove: () => void
 }

@ -46,6 +46,16 @@ const ViewAnnotationModal: FC<Props> = ({
  const [currPage, setCurrPage] = React.useState<number>(0)
  const [total, setTotal] = useState(0)
  const [hitHistoryList, setHitHistoryList] = useState<HitHistoryItem[]>([])
+
+  // Update local state when item prop changes (e.g., when modal is reopened with updated data)
+  useEffect(() => {
+    setNewQuery(question)
+    setNewAnswer(answer)
+    setCurrPage(0)
+    setTotal(0)
+    setHitHistoryList([])
+  }, [question, answer, id])
+
  const fetchHitHistory = async (page = 1) => {
    try {
      const { data, total }: any = await fetchHitHistoryList(appId, id, {
@ -63,6 +73,12 @@ const ViewAnnotationModal: FC<Props> = ({
    fetchHitHistory(currPage + 1)
  }, [currPage])

+  // Fetch hit history when item changes
+  useEffect(() => {
+    if (isShow && id)
+      fetchHitHistory(1)
+  }, [id, isShow])
+
  const tabs = [
    { value: TabType.annotation, text: t('appAnnotation.viewModal.annotatedResponse') },
    {
@ -82,14 +98,20 @@ const ViewAnnotationModal: FC<Props> = ({
    },
  ]
  const [activeTab, setActiveTab] = useState(TabType.annotation)
-  const handleSave = (type: EditItemType, editedContent: string) => {
-    if (type === EditItemType.Query) {
-      setNewQuery(editedContent)
-      onSave(editedContent, newAnswer)
+  const handleSave = async (type: EditItemType, editedContent: string) => {
+    try {
+      if (type === EditItemType.Query) {
+        await onSave(editedContent, newAnswer)
+        setNewQuery(editedContent)
+      }
+      else {
+        await onSave(newQuestion, editedContent)
+        setNewAnswer(editedContent)
+      }
    }
-    else {
-      setNewAnswer(editedContent)
-      onSave(newQuestion, editedContent)
+    catch (error) {
+      // If save fails, don't update local state
+      console.error('Failed to save annotation:', error)
    }
  }
  const [showModal, setShowModal] = useState(false)
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@ -22,7 +22,7 @@ const AccessControlDialog = ({
  }, [onClose])
  return (
    <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" open={true} className="relative z-20" onClose={() => null}>
+      <Dialog as="div" open={true} className="relative z-[99]" onClose={() => null}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
@ -32,7 +32,7 @@ const AccessControlDialog = ({
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
-          <div className="bg-background-overlay/25 fixed inset-0" />
+          <div className="fixed inset-0 bg-background-overlay" />
        </Transition.Child>

        <div className="fixed inset-0 flex items-center justify-center">
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@ -52,7 +52,7 @@ export default function AddMemberOrGroupDialog() {
      </Button>
    </PortalToFollowElemTrigger>
    {open && <FloatingOverlay />}
-    <PortalToFollowElemContent className='z-[25]'>
+    <PortalToFollowElemContent className='z-[100]'>
      <div className='relative flex max-h-[400px] w-[400px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
        <div className='sticky top-0 z-10 bg-components-panel-bg-blur p-2 pb-0.5 backdrop-blur-[5px]'>
          <Input value={keyword} onChange={handleKeywordChange} showLeftIcon placeholder={t('app.accessControlDialog.operateGroupAndMember.searchPlaceholder') as string} />
--- a/web/app/components/app/app-publisher/features-wrapper.tsx
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import type { AppPublisherProps } from '@/app/components/app/app-publisher'
 import Confirm from '@/app/components/base/confirm'
 import AppPublisher from '@/app/components/app/app-publisher'
--- a/web/app/components/app/configuration/base/icons/citation.tsx
+++ b/web/app/components/app/configuration/base/icons/citation.tsx
@ -1,29 +0,0 @@
-import type { SVGProps } from 'react'
-
-const CitationIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    {...props}
-  >
-    <path
-      d="M7 6h10M7 12h6M7 18h10"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5 6c0-1.105.895-2 2-2h10c1.105 0 2 .895 2 2v12c0 1.105-.895 2-2 2H9l-4 3v-3H7"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-    />
-  </svg>
-)
-
-export default CitationIcon
--- a/web/app/components/app/configuration/base/icons/more-like-this-icon.tsx
+++ b/web/app/components/app/configuration/base/icons/more-like-this-icon.tsx
@ -1,14 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-
-const MoreLikeThisIcon: FC = () => {
-  return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M5.83914 0.666748H10.1609C10.6975 0.666741 11.1404 0.666734 11.5012 0.696212C11.8759 0.726829 12.2204 0.792538 12.544 0.957399C13.0457 1.21306 13.4537 1.62101 13.7093 2.12277C13.8742 2.44633 13.9399 2.7908 13.9705 3.16553C14 3.52633 14 3.96923 14 4.50587V7.41171C14 7.62908 14 7.73776 13.9652 7.80784C13.9303 7.87806 13.8939 7.91566 13.8249 7.95288C13.756 7.99003 13.6262 7.99438 13.3665 8.00307C12.8879 8.01909 12.4204 8.14633 11.997 8.36429C10.9478 7.82388 9.62021 7.82912 8.53296 8.73228C7.15064 9.88056 6.92784 11.8645 8.0466 13.2641C8.36602 13.6637 8.91519 14.1949 9.40533 14.6492C9.49781 14.7349 9.54405 14.7777 9.5632 14.8041C9.70784 15.003 9.5994 15.2795 9.35808 15.3271C9.32614 15.3334 9.26453 15.3334 9.14129 15.3334H5.83912C5.30248 15.3334 4.85958 15.3334 4.49878 15.304C4.12405 15.2733 3.77958 15.2076 3.45603 15.0428C2.95426 14.7871 2.54631 14.3792 2.29065 13.8774C2.12579 13.5538 2.06008 13.2094 2.02946 12.8346C1.99999 12.4738 1.99999 12.0309 2 11.4943V4.50587C1.99999 3.96924 1.99999 3.52632 2.02946 3.16553C2.06008 2.7908 2.12579 2.44633 2.29065 2.12277C2.54631 1.62101 2.95426 1.21306 3.45603 0.957399C3.77958 0.792538 4.12405 0.726829 4.49878 0.696212C4.85957 0.666734 5.3025 0.666741 5.83914 0.666748ZM4.66667 5.33342C4.29848 5.33342 4 5.63189 4 6.00008C4 6.36827 4.29848 6.66675 4.66667 6.66675H8.66667C9.03486 6.66675 9.33333 6.36827 9.33333 6.00008C9.33333 5.63189 9.03486 5.33342 8.66667 5.33342H4.66667ZM4 8.66675C4 8.29856 4.29848 8.00008 4.66667 8.00008H6C6.36819 8.00008 6.66667 8.29856 6.66667 8.66675C6.66667 9.03494 6.36819 9.33342 6 9.33342H4.66667C4.29848 9.33342 4 9.03494 4 8.66675ZM4.66667 2.66675C4.29848 2.66675 4 2.96523 4 3.33342C4 3.7016 4.29848 4.00008 4.66667 4.00008H10.6667C11.0349 4.00008 11.3333 3.7016 11.3333 3.33342C11.3333 2.96523 11.0349 2.66675 10.6667 2.66675H4.66667Z" fill="#DD2590" />
-      <path d="M11.9977 10.0256C11.3313 9.26808 10.2199 9.06432 9.3849 9.75796C8.54988 10.4516 8.43232 11.6113 9.08807 12.4317C9.58479 13.0531 10.9986 14.3025 11.655 14.8719C11.7744 14.9754 11.8341 15.0272 11.9037 15.0477C11.9642 15.0654 12.0312 15.0654 12.0917 15.0477C12.1613 15.0272 12.221 14.9754 12.3404 14.8719C12.9968 14.3025 14.4106 13.0531 14.9074 12.4317C15.5631 11.6113 15.4599 10.4443 14.6105 9.75796C13.7612 9.07161 12.6642 9.26808 11.9977 10.0256Z" fill="#DD2590" />
-    </svg>
-
-  )
-}
-export default React.memo(MoreLikeThisIcon)
--- a/web/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon.tsx
+++ b/web/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon.tsx
@ -1,12 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-
-const SuggestedQuestionsAfterAnswerIcon: FC = () => {
-  return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M10.8275 1.33325H5.17245C4.63581 1.33324 4.19289 1.33324 3.8321 1.36272C3.45737 1.39333 3.1129 1.45904 2.78934 1.6239C2.28758 1.87956 1.87963 2.28751 1.62397 2.78928C1.45911 3.11284 1.3934 3.4573 1.36278 3.83204C1.3333 4.19283 1.33331 4.63574 1.33332 5.17239L1.33328 9.42497C1.333 9.95523 1.33278 10.349 1.42418 10.6901C1.67076 11.6103 2.38955 12.3291 3.3098 12.5757C3.51478 12.6306 3.73878 12.6525 3.99998 12.6611L3.99998 13.5806C3.99995 13.7374 3.99992 13.8973 4.01182 14.0283C4.0232 14.1536 4.05333 14.3901 4.21844 14.5969C4.40843 14.8349 4.69652 14.9734 5.00106 14.973C5.26572 14.9728 5.46921 14.8486 5.57416 14.7792C5.6839 14.7066 5.80872 14.6067 5.93117 14.5087L7.53992 13.2217C7.88564 12.9451 7.98829 12.8671 8.09494 12.8126C8.20192 12.7579 8.3158 12.718 8.43349 12.6938C8.55081 12.6697 8.67974 12.6666 9.12248 12.6666H10.8275C11.3642 12.6666 11.8071 12.6666 12.1679 12.6371C12.5426 12.6065 12.8871 12.5408 13.2106 12.3759C13.7124 12.1203 14.1203 11.7123 14.376 11.2106C14.5409 10.887 14.6066 10.5425 14.6372 10.1678C14.6667 9.80701 14.6667 9.36411 14.6667 8.82747V5.17237C14.6667 4.63573 14.6667 4.19283 14.6372 3.83204C14.6066 3.4573 14.5409 3.11284 14.376 2.78928C14.1203 2.28751 13.7124 1.87956 13.2106 1.6239C12.8871 1.45904 12.5426 1.39333 12.1679 1.36272C11.8071 1.33324 11.3642 1.33324 10.8275 1.33325ZM8.99504 4.99992C8.99504 4.44763 9.44275 3.99992 9.99504 3.99992C10.5473 3.99992 10.995 4.44763 10.995 4.99992C10.995 5.5522 10.5473 5.99992 9.99504 5.99992C9.44275 5.99992 8.99504 5.5522 8.99504 4.99992ZM4.92837 7.79996C5.222 7.57974 5.63816 7.63837 5.85961 7.93051C5.90071 7.98295 5.94593 8.03229 5.99199 8.08035C6.09019 8.18282 6.23775 8.32184 6.42882 8.4608C6.81353 8.74059 7.3454 8.99996 7.99504 8.99996C8.64469 8.99996 9.17655 8.74059 9.56126 8.4608C9.75233 8.32184 9.89989 8.18282 9.99809 8.08035C10.0441 8.0323 10.0894 7.98294 10.1305 7.93051C10.3519 7.63837 10.7681 7.57974 11.0617 7.79996C11.3563 8.02087 11.416 8.43874 11.195 8.73329C11.1967 8.73112 11.1928 8.7361 11.186 8.74466C11.1697 8.7651 11.1372 8.80597 11.1261 8.81916C11.087 8.86575 11.0317 8.92884 10.9607 9.00289C10.8194 9.15043 10.6128 9.34474 10.3455 9.53912C9.81353 9.92599 9.01206 10.3333 7.99504 10.3333C6.97802 10.3333 6.17655 9.92599 5.64459 9.53912C5.37733 9.34474 5.17072 9.15043 5.02934 9.00289C4.95837 8.92884 4.90305 8.86575 4.86395 8.81916C4.84438 8.79585 4.82881 8.77659 4.81731 8.76207C4.58702 8.46455 4.61798 8.03275 4.92837 7.79996ZM5.99504 3.99992C5.44275 3.99992 4.99504 4.44763 4.99504 4.99992C4.99504 5.5522 5.44275 5.99992 5.99504 5.99992C6.54732 5.99992 6.99504 5.5522 6.99504 4.99992C6.99504 4.44763 6.54732 3.99992 5.99504 3.99992Z" fill="#06AED4" />
-    </svg>
-  )
-}
-export default React.memo(SuggestedQuestionsAfterAnswerIcon)
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@ -5,7 +5,7 @@ import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
-import produce from 'immer'
+import { produce } from 'immer'
 import {
  RiDeleteBinLine,
  RiErrorWarningFill,
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useContext } from 'use-context-selector'
-import produce from 'immer'
+import { produce } from 'immer'
 import {
  RiAddLine,
 } from '@remixicon/react'
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@ -3,7 +3,7 @@ import type { ChangeEvent, FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import produce from 'immer'
+import { produce } from 'immer'
 import ModalFoot from '../modal-foot'
 import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@ -1,10 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
-import produce from 'immer'
+import { produce } from 'immer'
+import { ReactSortable } from 'react-sortablejs'
 import Panel from '../base/feature-panel'
 import EditModal from './config-modal'
 import VarItem from './var-item'
@ -22,6 +23,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import type { InputVar } from '@/app/components/workflow/types'
 import { InputVarType } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'

 export const ADD_EXTERNAL_DATA_TOOL = 'ADD_EXTERNAL_DATA_TOOL'

@ -218,6 +220,16 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar

    showEditModal()
  }
+
+  const promptVariablesWithIds = useMemo(() => promptVariables.map((item) => {
+    return {
+      id: item.key,
+      variable: { ...item },
+    }
+  }), [promptVariables])
+
+  const canDrag = !readonly && promptVariables.length > 1
+
  return (
    <Panel
      className="mt-2"
@ -245,18 +257,32 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
      )}
      {hasVar && (
        <div className='mt-1 px-3 pb-3'>
-          {promptVariables.map(({ key, name, type, required, config, icon, icon_background }, index) => (
-            <VarItem
-              key={index}
-              readonly={readonly}
-              name={key}
-              label={name}
-              required={!!required}
-              type={type}
-              onEdit={() => handleConfig({ type, key, index, name, config, icon, icon_background })}
-              onRemove={() => handleRemoveVar(index)}
-            />
-          ))}
+          <ReactSortable
+            className='space-y-1'
+            list={promptVariablesWithIds}
+            setList={(list) => { onPromptVariablesChange?.(list.map(item => item.variable)) }}
+            handle='.handle'
+            ghostClass='opacity-50'
+            animation={150}
+          >
+            {promptVariablesWithIds.map((item, index) => {
+              const { key, name, type, required, config, icon, icon_background } = item.variable
+              return (
+                <VarItem
+                  className={cn(canDrag && 'handle')}
+                  key={key}
+                  readonly={readonly}
+                  name={key}
+                  label={name}
+                  required={!!required}
+                  type={type}
+                  onEdit={() => handleConfig({ type, key, index, name, config, icon, icon_background })}
+                  onRemove={() => handleRemoveVar(index)}
+                  canDrag={canDrag}
+                />
+              )
+            })}
+          </ReactSortable>
        </div>
      )}

--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import {
  RiDeleteBinLine,
+  RiDraggable,
  RiEditLine,
 } from '@remixicon/react'
 import type { IInputTypeIconProps } from './input-type-icon'
@ -12,6 +13,7 @@ import Badge from '@/app/components/base/badge'
 import cn from '@/utils/classnames'

 type ItemProps = {
+  className?: string
  readonly?: boolean
  name: string
  label: string
@ -19,9 +21,11 @@ type ItemProps = {
  type: string
  onEdit: () => void
  onRemove: () => void
+  canDrag?: boolean
 }

 const VarItem: FC<ItemProps> = ({
+  className,
  readonly,
  name,
  label,
@ -29,12 +33,16 @@ const VarItem: FC<ItemProps> = ({
  type,
  onEdit,
  onRemove,
+  canDrag,
 }) => {
  const [isDeleting, setIsDeleting] = useState(false)

  return (
-    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center  rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed opacity-30')}>
-      <VarIcon className='mr-1 h-4 w-4 shrink-0 text-text-accent' />
+    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed opacity-30', className)}>
+      <VarIcon className={cn('mr-1 h-4 w-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
+      {canDrag && (
+        <RiDraggable className='absolute left-3 top-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block' />
+      )}
      <div className='flex w-0 grow items-center'>
        <div className='truncate' title={`${name} · ${label}`}>
          <span className='system-sm-medium text-text-secondary'>{name}</span>
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import ParamConfig from './param-config'
 import { Vision } from '@/app/components/base/icons/src/vender/features'
--- a/web/app/components/app/configuration/config-vision/param-config-content.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config-content.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { Resolution, TransferMethod } from '@/types/app'
 import ParamItem from '@/app/components/base/param-item'
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import copy from 'copy-to-clipboard'
-import produce from 'immer'
+import { produce } from 'immer'
 import {
  RiDeleteBinLine,
  RiEqualizer2Line,
--- a/web/app/components/app/configuration/config/config-audio.tsx
+++ b/web/app/components/app/configuration/config/config-audio.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useContext } from 'use-context-selector'

 import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
--- a/web/app/components/app/configuration/config/config-document.tsx
+++ b/web/app/components/app/configuration/config/config-document.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useContext } from 'use-context-selector'

 import { Document } from '@/app/components/base/icons/src/vender/features'
--- a/web/app/components/app/configuration/config/feature/use-feature.tsx
+++ b/web/app/components/app/configuration/config/feature/use-feature.tsx
@ -1,96 +0,0 @@
-import React, { useEffect } from 'react'
-
-function useFeature({
-  introduction,
-  setIntroduction,
-  moreLikeThis,
-  setMoreLikeThis,
-  suggestedQuestionsAfterAnswer,
-  setSuggestedQuestionsAfterAnswer,
-  speechToText,
-  setSpeechToText,
-  textToSpeech,
-  setTextToSpeech,
-  citation,
-  setCitation,
-  annotation,
-  setAnnotation,
-  moderation,
-  setModeration,
-}: {
-  introduction: string
-  setIntroduction: (introduction: string) => void
-  moreLikeThis: boolean
-  setMoreLikeThis: (moreLikeThis: boolean) => void
-  suggestedQuestionsAfterAnswer: boolean
-  setSuggestedQuestionsAfterAnswer: (suggestedQuestionsAfterAnswer: boolean) => void
-  speechToText: boolean
-  setSpeechToText: (speechToText: boolean) => void
-  textToSpeech: boolean
-  setTextToSpeech: (textToSpeech: boolean) => void
-  citation: boolean
-  setCitation: (citation: boolean) => void
-  annotation: boolean
-  setAnnotation: (annotation: boolean) => void
-  moderation: boolean
-  setModeration: (moderation: boolean) => void
-}) {
-  const [tempShowOpeningStatement, setTempShowOpeningStatement] = React.useState(!!introduction)
-  useEffect(() => {
-    // wait to api data back
-    if (introduction)
-      setTempShowOpeningStatement(true)
-  }, [introduction])
-
-  // const [tempMoreLikeThis, setTempMoreLikeThis] = React.useState(moreLikeThis)
-  // useEffect(() => {
-  //   setTempMoreLikeThis(moreLikeThis)
-  // }, [moreLikeThis])
-
-  const featureConfig = {
-    openingStatement: tempShowOpeningStatement,
-    moreLikeThis,
-    suggestedQuestionsAfterAnswer,
-    speechToText,
-    textToSpeech,
-    citation,
-    annotation,
-    moderation,
-  }
-  const handleFeatureChange = (key: string, value: boolean) => {
-    switch (key) {
-      case 'openingStatement':
-        if (!value)
-          setIntroduction('')
-
-        setTempShowOpeningStatement(value)
-        break
-      case 'moreLikeThis':
-        setMoreLikeThis(value)
-        break
-      case 'suggestedQuestionsAfterAnswer':
-        setSuggestedQuestionsAfterAnswer(value)
-        break
-      case 'speechToText':
-        setSpeechToText(value)
-        break
-      case 'textToSpeech':
-        setTextToSpeech(value)
-        break
-      case 'citation':
-        setCitation(value)
-        break
-      case 'annotation':
-        setAnnotation(value)
-        break
-      case 'moderation':
-        setModeration(value)
-    }
-  }
-  return {
-    featureConfig,
-    handleFeatureChange,
-  }
-}
-
-export default useFeature
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useContext } from 'use-context-selector'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useFormattingChangedDispatcher } from '../debug/hooks'
 import DatasetConfig from '../dataset-config'
 import HistoryPanel from '../config-prompt/conversation-history/history-panel'
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@ -4,7 +4,7 @@ import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { intersectionBy } from 'lodash-es'
 import { useContext } from 'use-context-selector'
-import produce from 'immer'
+import { produce } from 'immer'
 import { v4 as uuid4 } from 'uuid'
 import { useFormattingChangedDispatcher } from '../debug/hooks'
 import FeaturePanel from '../base/feature-panel'
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import produce, { setAutoFreeze } from 'immer'
+import { produce, setAutoFreeze } from 'immer'
 import { useBoolean } from 'ahooks'
 import {
  RiAddLine,
--- a/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts
+++ b/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts
@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { clone } from 'lodash-es'
-import produce from 'immer'
+import { produce } from 'immer'
 import type { ChatPromptConfig, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug'
 import { PromptMode } from '@/models/debug'
 import { ModelModeType } from '@/types/app'
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@ -6,7 +6,7 @@ import { basePath } from '@/utils/var'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { usePathname } from 'next/navigation'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useBoolean, useGetState } from 'ahooks'
 import { clone, isEqual } from 'lodash-es'
 import { CodeBracketIcon } from '@heroicons/react/20/solid'
--- a/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
+++ b/web/app/components/app/configuration/prompt-mode/advanced-mode-waring.tsx
@ -1,50 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useDocLink } from '@/context/i18n'
-type Props = {
-  onReturnToSimpleMode: () => void
-}
-
-const AdvancedModeWarning: FC<Props> = ({
-  onReturnToSimpleMode,
-}) => {
-  const { t } = useTranslation()
-  const docLink = useDocLink()
-  const [show, setShow] = React.useState(true)
-  if (!show)
-    return null
-  return (
-    <div className='mb-3 rounded-xl border border-[#FEF0C7] bg-[#FFFAEB] px-4 py-3' >
-      <div className='mb-2 text-xs font-bold leading-[18px] text-[#DC6803]'>{t('appDebug.promptMode.advancedWarning.title')}</div>
-      <div className='flex items-center justify-between'>
-        <div className='text-xs leading-[18px] '>
-          <span className='text-gray-700'>{t('appDebug.promptMode.advancedWarning.description')}</span>
-          <a
-            className='font-medium text-[#155EEF]'
-            href={docLink('/guides/features/prompt-engineering')}
-            target='_blank' rel='noopener noreferrer'
-          >
-            {t('appDebug.promptMode.advancedWarning.learnMore')}
-          </a>
-        </div>
-
-        <div className='flex items-center space-x-1'>
-          <div
-            onClick={onReturnToSimpleMode}
-            className='flex h-6 shrink-0 cursor-pointer items-center space-x-1 rounded-lg border border-gray-200 bg-indigo-600 px-2 text-xs font-semibold text-white shadow-xs'
-          >
-            <div className='text-xs font-semibold uppercase'>{t('appDebug.promptMode.switchBack')}</div>
-          </div>
-          <div
-            className='flex h-6 cursor-pointer items-center rounded-md border border-gray-200 bg-[#fff] px-2 text-xs font-medium text-primary-600 shadow-xs'
-            onClick={() => setShow(false)}
-          >{t('appDebug.promptMode.advancedWarning.ok')}</div>
-        </div>
-
-      </div>
-    </div>
-  )
-}
-export default React.memo(AdvancedModeWarning)
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@ -1,9 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
+import { RiCloseLine, RiPlayLargeLine } from '@remixicon/react'
 import Run from '@/app/components/workflow/run'
 import { useStore } from '@/app/components/app/store'
+import TooltipPlus from '@/app/components/base/tooltip'
+import { useRouter } from 'next/navigation'

 type ILogDetail = {
  runID: string
@ -13,13 +15,34 @@ type ILogDetail = {
 const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
  const { t } = useTranslation()
  const appDetail = useStore(state => state.appDetail)
+  const router = useRouter()
+
+  const handleReplay = () => {
+    if (!appDetail?.id) return
+    router.push(`/app/${appDetail.id}/workflow?replayRunId=${runID}`)
+  }

  return (
    <div className='relative flex grow flex-col pt-3'>
      <span className='absolute right-3 top-4 z-20 cursor-pointer p-1' onClick={onClose}>
        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
      </span>
-      <h1 className='system-xl-semibold shrink-0 px-4 py-1 text-text-primary'>{t('appLog.runDetail.workflowTitle')}</h1>
+      <div className='flex items-center bg-components-panel-bg'>
+        <h1 className='system-xl-semibold shrink-0 px-4 py-1 text-text-primary'>{t('appLog.runDetail.workflowTitle')}</h1>
+        <TooltipPlus
+          popupContent={t('appLog.runDetail.testWithParams')}
+          popupClassName='rounded-xl'
+        >
+          <button
+            type='button'
+            className='mr-1 flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-base-hover'
+            aria-label={t('appLog.runDetail.testWithParams')}
+            onClick={handleReplay}
+          >
+            <RiPlayLargeLine className='h-4 w-4 text-text-tertiary' />
+          </button>
+        </TooltipPlus>
+      </div>
      <Run
        runDetailUrl={runID ? `/apps/${appDetail?.id}/workflow-runs/${runID}` : ''}
        tracingListUrl={runID ? `/apps/${appDetail?.id}/workflow-runs/${runID}/node-executions` : ''}
--- a/web/app/components/base/auto-height-textarea/common.tsx
+++ b/web/app/components/base/auto-height-textarea/common.tsx
@ -1,54 +0,0 @@
-import { useEffect, useRef } from 'react'
-import cn from '@/utils/classnames'
-
-type AutoHeightTextareaProps
-  = & React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>
-  & { outerClassName?: string }
-
-const AutoHeightTextarea = (
-  {
-    ref: outRef,
-    outerClassName,
-    value,
-    className,
-    placeholder,
-    autoFocus,
-    disabled,
-    ...rest
-  }: AutoHeightTextareaProps & {
-    ref: React.RefObject<HTMLTextAreaElement>;
-  },
-) => {
-  const innerRef = useRef<HTMLTextAreaElement>(null)
-  const ref = outRef || innerRef
-
-  useEffect(() => {
-    if (autoFocus && !disabled && value) {
-      if (typeof ref !== 'function') {
-        ref.current?.setSelectionRange(`${value}`.length, `${value}`.length)
-        ref.current?.focus()
-      }
-    }
-  }, [autoFocus, disabled, ref])
-  return (
-    (<div className={outerClassName}>
-      <div className='relative'>
-        <div className={cn(className, 'invisible whitespace-pre-wrap break-all')}>
-          {!value ? placeholder : `${value}`.replace(/\n$/, '\n ')}
-        </div>
-        <textarea
-          ref={ref}
-          placeholder={placeholder}
-          className={cn(className, 'absolute inset-0 h-full w-full resize-none appearance-none border-none outline-none disabled:bg-transparent')}
-          value={value}
-          disabled={disabled}
-          {...rest}
-        />
-      </div>
-    </div>)
-  )
-}
-
-AutoHeightTextarea.displayName = 'AutoHeightTextarea'
-
-export default AutoHeightTextarea
--- a/web/app/components/base/button/index.stories.tsx
+++ b/web/app/components/base/button/index.stories.tsx
@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/nextjs'

 import { RocketLaunchIcon } from '@heroicons/react/20/solid'
 import { Button } from '.'
@ -20,8 +19,7 @@ const meta = {
  },
  args: {
    variant: 'ghost',
-    onClick: fn(),
-    children: 'adsf',
+    children: 'Button',
  },
 } satisfies Meta<typeof Button>

@ -33,6 +31,9 @@ export const Default: Story = {
    variant: 'primary',
    loading: false,
    children: 'Primary Button',
+    styleCss: {},
+    spinnerClassName: '',
+    destructive: false,
  },
 }

--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@ -53,9 +53,6 @@ const ChatWrapper = () => {
    initUserVariables,
  } = useChatWithHistoryContext()

-  // Semantic variable for better code readability
-  const isHistoryConversation = !!currentConversationId
-
  const appConfig = useMemo(() => {
    const config = appParams || {}

@ -66,9 +63,9 @@ const ChatWrapper = () => {
        fileUploadConfig: (config as any).system_parameters,
      },
      supportFeedback: true,
-      opening_statement: isHistoryConversation ? currentConversationItem?.introduction : (config as any).opening_statement,
+      opening_statement: currentConversationItem?.introduction || (config as any).opening_statement,
    } as ChatConfig
-  }, [appParams, currentConversationItem?.introduction, isHistoryConversation])
+  }, [appParams, currentConversationItem?.introduction])
  const {
    chatList,
    setTargetMessageId,
@ -79,7 +76,7 @@ const ChatWrapper = () => {
  } = useChat(
    appConfig,
    {
-      inputs: (isHistoryConversation ? currentConversationInputs : newConversationInputs) as any,
+      inputs: (currentConversationId ? currentConversationInputs : newConversationInputs) as any,
      inputsForm: inputsForms,
    },
    appPrevChatTree,
@ -87,7 +84,7 @@ const ChatWrapper = () => {
    clearChatList,
    setClearChatList,
  )
-  const inputsFormValue = isHistoryConversation ? currentConversationInputs : newConversationInputsRef?.current
+  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputsRef?.current
  const inputDisabled = useMemo(() => {
    if (allInputsHidden)
      return false
@ -136,7 +133,7 @@ const ChatWrapper = () => {
    const data: any = {
      query: message,
      files,
-      inputs: formatBooleanInputs(inputsForms, isHistoryConversation ? currentConversationInputs : newConversationInputs),
+      inputs: formatBooleanInputs(inputsForms, currentConversationId ? currentConversationInputs : newConversationInputs),
      conversation_id: currentConversationId,
      parent_message_id: (isRegenerate ? parentAnswer?.id : getLastAnswer(chatList)?.id) || null,
    }
@ -146,11 +143,11 @@ const ChatWrapper = () => {
      data,
      {
        onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, isInstalledApp, appId),
-        onConversationComplete: isHistoryConversation ? undefined : handleNewConversationCompleted,
+        onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
        isPublicAPI: !isInstalledApp,
      },
    )
-  }, [chatList, handleNewConversationCompleted, handleSend, isHistoryConversation, currentConversationInputs, newConversationInputs, isInstalledApp, appId])
+  }, [chatList, handleNewConversationCompleted, handleSend, currentConversationId, currentConversationInputs, newConversationInputs, isInstalledApp, appId])

  const doRegenerate = useCallback((chatItem: ChatItemInTree, editedQuestion?: { message: string, files?: FileEntity[] }) => {
    const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
@ -163,30 +160,38 @@ const ChatWrapper = () => {
  }, [chatList, doSend])

  const messageList = useMemo(() => {
-    // Always filter out opening statement from message list as it's handled separately in welcome component
+    if (currentConversationId || chatList.length > 1)
+      return chatList
+    // Without messages we are in the welcome screen, so hide the opening statement from chatlist
    return chatList.filter(item => !item.isOpeningStatement)
  }, [chatList])

-  const [collapsed, setCollapsed] = useState(isHistoryConversation)
+  const [collapsed, setCollapsed] = useState(!!currentConversationId)

  const chatNode = useMemo(() => {
    if (allInputsHidden || !inputsForms.length)
      return null
    if (isMobile) {
-      if (!isHistoryConversation)
+      if (!currentConversationId)
        return <InputsForm collapsed={collapsed} setCollapsed={setCollapsed} />
      return null
    }
    else {
      return <InputsForm collapsed={collapsed} setCollapsed={setCollapsed} />
    }
-  }, [inputsForms.length, isMobile, isHistoryConversation, collapsed, allInputsHidden])
+  },
+  [
+    inputsForms.length,
+    isMobile,
+    currentConversationId,
+    collapsed, allInputsHidden,
+  ])

  const welcome = useMemo(() => {
    const welcomeMessage = chatList.find(item => item.isOpeningStatement)
    if (respondingState)
      return null
-    if (isHistoryConversation)
+    if (currentConversationId)
      return null
    if (!welcomeMessage)
      return null
@ -227,7 +232,18 @@ const ChatWrapper = () => {
        </div>
      </div>
    )
-  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, isHistoryConversation, inputsForms.length, respondingState, allInputsHidden])
+  },
+  [
+    appData?.site.icon,
+    appData?.site.icon_background,
+    appData?.site.icon_type,
+    appData?.site.icon_url,
+    chatList, collapsed,
+    currentConversationId,
+    inputsForms.length,
+    respondingState,
+    allInputsHidden,
+  ])

  const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
    ? <AnswerIcon
@ -251,7 +267,7 @@ const ChatWrapper = () => {
        chatFooterClassName='pb-4'
        chatFooterInnerClassName={`mx-auto w-full max-w-[768px] ${isMobile ? 'px-2' : 'px-4'}`}
        onSend={doSend}
-        inputs={isHistoryConversation ? currentConversationInputs as any : newConversationInputs}
+        inputs={currentConversationId ? currentConversationInputs as any : newConversationInputs}
        inputsForm={inputsForms}
        onRegenerate={doRegenerate}
        onStopResponding={handleStop}
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useLocalStorageState } from 'ahooks'
-import produce from 'immer'
+import { produce } from 'immer'
 import type {
  Callback,
  ChatConfig,
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@ -4,7 +4,6 @@ import {
  useEffect,
  useState,
 } from 'react'
-import { useAsyncEffect } from 'ahooks'
 import { useThemeContext } from '../embedded-chatbot/theme/theme-context'
 import {
  ChatWithHistoryContext,
@ -18,8 +17,6 @@ import ChatWrapper from './chat-wrapper'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { checkOrSetAccessToken } from '@/app/components/share/utils'
-import AppUnavailable from '@/app/components/base/app-unavailable'
 import cn from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'

@ -201,36 +198,6 @@ const ChatWithHistoryWrapWithCheckToken: FC<ChatWithHistoryWrapProps> = ({
  installedAppInfo,
  className,
 }) => {
-  const [initialized, setInitialized] = useState(false)
-  const [appUnavailable, setAppUnavailable] = useState<boolean>(false)
-  const [isUnknownReason, setIsUnknownReason] = useState<boolean>(false)
-
-  useAsyncEffect(async () => {
-    if (!initialized) {
-      if (!installedAppInfo) {
-        try {
-          await checkOrSetAccessToken()
-        }
-        catch (e: any) {
-          if (e.status === 404) {
-            setAppUnavailable(true)
-          }
-          else {
-            setIsUnknownReason(true)
-            setAppUnavailable(true)
-          }
-        }
-      }
-      setInitialized(true)
-    }
-  }, [])
-
-  if (!initialized)
-    return null
-
-  if (appUnavailable)
-    return <AppUnavailable isUnknownReason={isUnknownReason} />
-
  return (
    <ChatWithHistoryWrap
      installedAppInfo={installedAppInfo}
--- a/web/app/components/base/chat/chat/answer/index.stories.tsx
+++ b/web/app/components/base/chat/chat/answer/index.stories.tsx
@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/nextjs'

 import type { ChatItem } from '../../types'
 import { mockedWorkflowProcess } from './__mocks__/workflowProcess'
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@ -117,6 +117,8 @@ const Answer: FC<AnswerProps> = ({
    }
  }, [switchSibling, item.prevSibling, item.nextSibling])

+  const contentIsEmpty = content.trim() === ''
+
  return (
    <div className='mb-2 flex last:mb-0'>
      {!hideAvatar && (
@ -161,14 +163,14 @@ const Answer: FC<AnswerProps> = ({
              )
            }
            {
-              responding && !content && !hasAgentThoughts && (
+              responding && contentIsEmpty && !hasAgentThoughts && (
                <div className='flex h-5 w-6 items-center justify-center'>
                  <LoadingAnim type='text' />
                </div>
              )
            }
            {
-              content && !hasAgentThoughts && (
+              !contentIsEmpty && !hasAgentThoughts && (
                <BasicContent item={item} />
              )
            }
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@ -83,6 +83,15 @@ const ChatInputArea = ({
  const historyRef = useRef([''])
  const [currentIndex, setCurrentIndex] = useState(-1)
  const isComposingRef = useRef(false)
+
+  const handleQueryChange = useCallback(
+    (value: string) => {
+      setQuery(value)
+      setTimeout(handleTextareaResize, 0)
+    },
+    [handleTextareaResize],
+  )
+
  const handleSend = () => {
    if (isResponding) {
      notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
@ -101,7 +110,7 @@ const ChatInputArea = ({
      }
      if (checkInputsForm(inputs, inputsForm)) {
        onSend(query, files)
-        setQuery('')
+        handleQueryChange('')
        setFiles([])
      }
    }
@ -131,19 +140,19 @@ const ChatInputArea = ({
      // When the cmd + up key is pressed, output the previous element
      if (currentIndex > 0) {
        setCurrentIndex(currentIndex - 1)
-        setQuery(historyRef.current[currentIndex - 1])
+        handleQueryChange(historyRef.current[currentIndex - 1])
      }
    }
    else if (e.key === 'ArrowDown' && !e.shiftKey && !e.nativeEvent.isComposing && e.metaKey) {
      // When the cmd + down key is pressed, output the next element
      if (currentIndex < historyRef.current.length - 1) {
        setCurrentIndex(currentIndex + 1)
-        setQuery(historyRef.current[currentIndex + 1])
+        handleQueryChange(historyRef.current[currentIndex + 1])
      }
      else if (currentIndex === historyRef.current.length - 1) {
        // If it is the last element, clear the input box
        setCurrentIndex(historyRef.current.length)
-        setQuery('')
+        handleQueryChange('')
      }
    }
  }
@ -171,7 +180,7 @@ const ChatInputArea = ({
    <>
      <div
        className={cn(
-          'relative z-10 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md',
+          'relative z-10 overflow-hidden rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md',
          isDragActive && 'border border-dashed border-components-option-card-option-selected-border',
          disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none',
        )}
@ -197,12 +206,8 @@ const ChatInputArea = ({
                placeholder={t('common.chat.inputPlaceholder', { botName }) || ''}
                autoFocus
                minRows={1}
-                onResize={handleTextareaResize}
                value={query}
-                onChange={(e) => {
-                  setQuery(e.target.value)
-                  setTimeout(handleTextareaResize, 0)
-                }}
+                onChange={e => handleQueryChange(e.target.value)}
                onKeyDown={handleKeyDown}
                onCompositionStart={handleCompositionStart}
                onCompositionEnd={handleCompositionEnd}
@ -221,7 +226,7 @@ const ChatInputArea = ({
            showVoiceInput && (
              <VoiceInput
                onCancel={() => setShowVoiceInput(false)}
-                onConverted={text => setQuery(text)}
+                onConverted={text => handleQueryChange(text)}
              />
            )
          }
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@ -1,3 +1,4 @@
+import type { FC, Ref } from 'react'
 import { memo } from 'react'
 import {
  RiMicLine,
@ -18,20 +19,17 @@ type OperationProps = {
  speechToTextConfig?: EnableType
  onShowVoiceInput?: () => void
  onSend: () => void
-  theme?: Theme | null
+  theme?: Theme | null,
+  ref?: Ref<HTMLDivElement>;
 }
-const Operation = (
-  {
-    ref,
-    fileConfig,
-    speechToTextConfig,
-    onShowVoiceInput,
-    onSend,
-    theme,
-  }: OperationProps & {
-    ref: React.RefObject<HTMLDivElement>;
-  },
-) => {
+const Operation: FC<OperationProps> = ({
+  ref,
+  fileConfig,
+  speechToTextConfig,
+  onShowVoiceInput,
+  onSend,
+  theme,
+}) => {
  return (
    <div
      className={cn(
--- a/web/app/components/base/chat/chat/question.stories.tsx
+++ b/web/app/components/base/chat/chat/question.stories.tsx
@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/nextjs'

 import type { ChatItem } from '../types'
 import Question from './question'
--- a/web/app/components/base/chat/chat/thought/panel.tsx
+++ b/web/app/components/base/chat/chat/thought/panel.tsx
@ -1,28 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-type Props = {
-  isRequest: boolean
-  toolName: string
-  content: string
-}
-
-const Panel: FC<Props> = ({
-  isRequest,
-  toolName,
-  content,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className='overflow-hidden rounded-md border border-black/5 bg-gray-100'>
-      <div className='flex items-center bg-gray-50 px-2 py-1 text-xs font-medium uppercase leading-[18px] text-gray-500'>
-        {t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
-      </div>
-      <div className='border-t border-black/5 p-2 text-xs leading-4 text-gray-700'>{content}</div>
-    </div>
-  )
-}
-export default React.memo(Panel)
--- a/web/app/components/base/chat/chat/thought/tool.tsx
+++ b/web/app/components/base/chat/chat/thought/tool.tsx
@ -1,106 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import {
-  RiArrowDownSLine,
-  RiLoader2Line,
-} from '@remixicon/react'
-import type { ToolInfoInThought } from '../type'
-import Panel from './panel'
-import cn from '@/utils/classnames'
-import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import { DataSet as DataSetIcon } from '@/app/components/base/icons/src/public/thought'
-import type { Emoji } from '@/app/components/tools/types'
-import AppIcon from '@/app/components/base/app-icon'
-
-type Props = {
-  payload: ToolInfoInThought
-  allToolIcons?: Record<string, string | Emoji>
-}
-
-const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>) => {
-  if (toolName.startsWith('dataset_'))
-    return <DataSetIcon className='shrink-0'></DataSetIcon>
-  const icon = allToolIcons[toolName]
-  if (!icon)
-    return null
-  return (
-    typeof icon === 'string'
-      ? (
-        <div
-          className='h-3 w-3 shrink-0 rounded-[3px] bg-cover bg-center'
-          style={{
-            backgroundImage: `url(${icon})`,
-          }}
-        ></div>
-      )
-      : (
-        <AppIcon
-          className='shrink-0 rounded-[3px]'
-          size='xs'
-          icon={icon?.content}
-          background={icon?.background}
-        />
-      ))
-}
-
-const Tool: FC<Props> = ({
-  payload,
-  allToolIcons = {},
-}) => {
-  const { t } = useTranslation()
-  const { name, label, input, isFinished, output } = payload
-  const toolName = name.startsWith('dataset_') ? t('dataset.knowledge') : name
-  const toolLabel = name.startsWith('dataset_') ? t('dataset.knowledge') : label
-  const [isShowDetail, setIsShowDetail] = useState(false)
-  const icon = getIcon(name, allToolIcons) as any
-  return (
-    <div>
-      <div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto rounded-md bg-white')}>
-        <div
-          className={cn('flex h-7 cursor-pointer items-center px-2')}
-          onClick={() => setIsShowDetail(!isShowDetail)}
-        >
-          {!isFinished && (
-            <RiLoader2Line className='h-3 w-3 shrink-0 animate-spin text-gray-500' />
-          )}
-          {isFinished && !isShowDetail && (
-            <CheckCircle className='h-3 w-3 shrink-0 text-[#12B76A]' />
-          )}
-          {isFinished && isShowDetail && (
-            icon
-          )}
-          <span className='mx-1 shrink-0 text-xs font-medium text-gray-500'>
-            {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
-          </span>
-          <span
-            className='truncate text-xs font-medium text-gray-700'
-            title={toolLabel}
-          >
-            {toolLabel}
-          </span>
-          <RiArrowDownSLine
-            className={cn(isShowDetail && 'rotate-180', 'ml-1 h-3 w-3 shrink-0 cursor-pointer select-none text-gray-500')}
-          />
-        </div>
-        {isShowDetail && (
-          <div className='space-y-2 border-t border-black/5 p-2 '>
-            <Panel
-              isRequest={true}
-              toolName={toolName}
-              content={input} />
-            {output && (
-              <Panel
-                isRequest={false}
-                toolName={toolName}
-                content={output as string} />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-export default React.memo(Tool)
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@ -62,9 +62,9 @@ const ChatWrapper = () => {
        fileUploadConfig: (config as any).system_parameters,
      },
      supportFeedback: true,
-      opening_statement: currentConversationId ? currentConversationItem?.introduction : (config as any).opening_statement,
+      opening_statement: currentConversationItem?.introduction || (config as any).opening_statement,
    } as ChatConfig
-  }, [appParams, currentConversationItem?.introduction, currentConversationId])
+  }, [appParams, currentConversationItem?.introduction])
  const {
    chatList,
    setTargetMessageId,
@ -158,8 +158,9 @@ const ChatWrapper = () => {
  }, [chatList, doSend])

  const messageList = useMemo(() => {
-    if (currentConversationId)
+    if (currentConversationId || chatList.length > 1)
      return chatList
+    // Without messages we are in the welcome screen, so hide the opening statement from chatlist
    return chatList.filter(item => !item.isOpeningStatement)
  }, [chatList, currentConversationId])

@ -240,7 +241,7 @@ const ChatWrapper = () => {
      config={appConfig}
      chatList={messageList}
      isResponding={respondingState}
-      chatContainerInnerClassName={cn('mx-auto w-full max-w-full pt-4 tablet:px-4', isMobile && 'px-4')}
+      chatContainerInnerClassName={cn('mx-auto w-full max-w-full px-4', messageList.length && 'pt-4')}
      chatFooterClassName={cn('pb-4', !isMobile && 'rounded-b-2xl')}
      chatFooterInnerClassName={cn('mx-auto w-full max-w-full px-4', isMobile && 'px-2')}
      onSend={doSend}
--- a/web/app/components/base/chat/embedded-chatbot/context.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/context.tsx
@ -17,12 +17,9 @@ import type {
 import { noop } from 'lodash-es'

 export type EmbeddedChatbotContextValue = {
-  userCanAccess?: boolean
-  appInfoError?: any
-  appInfoLoading?: boolean
-  appMeta?: AppMeta
-  appData?: AppData
-  appParams?: ChatConfig
+  appMeta: AppMeta | null
+  appData: AppData | null
+  appParams: ChatConfig | null
  appChatListDataLoading?: boolean
  currentConversationId: string
  currentConversationItem?: ConversationItem
@ -59,7 +56,10 @@ export type EmbeddedChatbotContextValue = {
 }

 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
-  userCanAccess: false,
+  appData: null,
+  appMeta: null,
+  appParams: null,
+  appChatListDataLoading: false,
  currentConversationId: '',
  appPrevChatList: [],
  pinnedConversationList: [],
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@ -36,6 +36,7 @@ const Header: FC<IHeaderProps> = ({
    appData,
    currentConversationId,
    inputsForms,
+    allInputsHidden,
  } = useEmbeddedChatbotContext()

  const isClient = typeof window !== 'undefined'
@ -124,7 +125,7 @@ const Header: FC<IHeaderProps> = ({
              </ActionButton>
            </Tooltip>
          )}
-          {currentConversationId && inputsForms.length > 0 && (
+          {currentConversationId && inputsForms.length > 0 && !allInputsHidden && (
            <ViewFormDropdown />
          )}
        </div>
@ -135,7 +136,7 @@ const Header: FC<IHeaderProps> = ({
  return (
    <div
      className={cn('flex h-14 shrink-0 items-center justify-between rounded-t-2xl px-3')}
-      style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? ''))}
+      style={CssTransform(theme?.headerBorderBottomStyle ?? '')}
    >
      <div className="flex grow items-center space-x-3">
        {customerIcon}
@ -171,7 +172,7 @@ const Header: FC<IHeaderProps> = ({
            </ActionButton>
          </Tooltip>
        )}
-        {currentConversationId && inputsForms.length > 0 && (
+        {currentConversationId && inputsForms.length > 0 && !allInputsHidden && (
          <ViewFormDropdown iconColor={theme?.colorPathOnHeader} />
        )}
      </div>
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useLocalStorageState } from 'ahooks'
-import produce from 'immer'
+import { produce } from 'immer'
 import type {
  ChatConfig,
  ChatItem,
@ -18,9 +18,6 @@ import { CONVERSATION_ID_INFO } from '../constants'
 import { buildChatItemTree, getProcessedInputsFromUrlParams, getProcessedSystemVariablesFromUrlParams, getProcessedUserVariablesFromUrlParams } from '../utils'
 import { getProcessedFilesFromResponse } from '../../file-uploader/utils'
 import {
-  fetchAppInfo,
-  fetchAppMeta,
-  fetchAppParams,
  fetchChatList,
  fetchConversations,
  generationConversationName,
@ -36,8 +33,7 @@ import { InputVarType } from '@/app/components/workflow/types'
 import { TransferMethod } from '@/types/app'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { noop } from 'lodash-es'
-import { useGetUserCanAccessApp } from '@/service/access-control'
-import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useWebAppStore } from '@/context/web-app-context'

 function getFormattedChatList(messages: any[]) {
  const newChatList: ChatItem[] = []
@ -67,18 +63,10 @@ function getFormattedChatList(messages: any[]) {

 export const useEmbeddedChatbot = () => {
  const isInstalledApp = false
-  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
-  const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR('appInfo', fetchAppInfo)
-  const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp({
-    appId: appInfo?.app_id,
-    isInstalledApp,
-    enabled: systemFeatures.webapp_auth.enabled,
-  })
-
-  const appData = useMemo(() => {
-    return appInfo
-  }, [appInfo])
-  const appId = useMemo(() => appData?.app_id, [appData])
+  const appInfo = useWebAppStore(s => s.appInfo)
+  const appMeta = useWebAppStore(s => s.appMeta)
+  const appParams = useWebAppStore(s => s.appParams)
+  const appId = useMemo(() => appInfo?.app_id, [appInfo])

  const [userId, setUserId] = useState<string>()
  const [conversationId, setConversationId] = useState<string>()
@ -145,8 +133,6 @@ export const useEmbeddedChatbot = () => {
    return currentConversationId
  }, [currentConversationId, newConversationId])

-  const { data: appParams } = useSWR(['appParams', isInstalledApp, appId], () => fetchAppParams(isInstalledApp, appId))
-  const { data: appMeta } = useSWR(['appMeta', isInstalledApp, appId], () => fetchAppMeta(isInstalledApp, appId))
  const { data: appPinnedConversationData } = useSWR(['appConversationData', isInstalledApp, appId, true], () => fetchConversations(isInstalledApp, appId, undefined, true, 100))
  const { data: appConversationData, isLoading: appConversationDataLoading, mutate: mutateAppConversationData } = useSWR(['appConversationData', isInstalledApp, appId, false], () => fetchConversations(isInstalledApp, appId, undefined, false, 100))
  const { data: appChatListData, isLoading: appChatListDataLoading } = useSWR(chatShouldReloadKey ? ['appChatList', chatShouldReloadKey, isInstalledApp, appId] : null, () => fetchChatList(chatShouldReloadKey, isInstalledApp, appId))
@ -398,16 +384,13 @@ export const useEmbeddedChatbot = () => {
  }, [isInstalledApp, appId, t, notify])

  return {
-    appInfoError,
-    appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && isCheckingPermission),
-    userCanAccess: systemFeatures.webapp_auth.enabled ? userCanAccessResult?.result : true,
    isInstalledApp,
    allowResetChat,
    appId,
    currentConversationId,
    currentConversationItem,
    handleConversationIdInfoChange,
-    appData,
+    appData: appInfo,
    appParams: appParams || {} as ChatConfig,
    appMeta,
    appPinnedConversationData,
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@ -49,8 +49,8 @@ const Chatbot = () => {
    <div className='relative'>
      <div
        className={cn(
-          'flex flex-col rounded-2xl border border-components-panel-border-subtle',
-          isMobile ? 'h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border shadow-xs' : 'h-[100vh] bg-chatbot-bg',
+          'flex flex-col rounded-2xl',
+          isMobile ? 'h-[calc(100vh_-_60px)] shadow-xs' : 'h-[100vh] bg-chatbot-bg',
        )}
        style={isMobile ? Object.assign({}, CssTransform(themeBuilder?.theme?.backgroundHeaderColorStyle ?? '')) : {}}
      >
@ -62,7 +62,7 @@ const Chatbot = () => {
          theme={themeBuilder?.theme}
          onCreateNewChat={handleNewConversation}
        />
-        <div className={cn('flex grow flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)] rounded-2xl bg-chatbot-bg')}>
+        <div className={cn('flex grow flex-col overflow-y-auto', isMobile && 'm-[0.5px] !h-[calc(100vh_-_3rem)] rounded-2xl bg-chatbot-bg')}>
          {appChatListDataLoading && (
            <Loading type='app' />
          )}
@ -101,7 +101,6 @@ const EmbeddedChatbotWrapper = () => {

  const {
    appData,
-    userCanAccess,
    appParams,
    appMeta,
    appChatListDataLoading,
@ -135,7 +134,6 @@ const EmbeddedChatbotWrapper = () => {
  } = useEmbeddedChatbot()

  return <EmbeddedChatbotContext.Provider value={{
-    userCanAccess,
    appData,
    appParams,
    appMeta,
--- a/web/app/components/base/confirm/index.stories.tsx
+++ b/web/app/components/base/confirm/index.stories.tsx
@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import Confirm from '.'
+import Button from '../button'
+
+const meta = {
+  title: 'Base/Confirm',
+  component: Confirm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Confirmation dialog component that supports warning and info types, with customizable button text and behavior.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['info', 'warning'],
+      description: 'Dialog type',
+    },
+    isShow: {
+      control: 'boolean',
+      description: 'Whether to show the dialog',
+    },
+    title: {
+      control: 'text',
+      description: 'Dialog title',
+    },
+    content: {
+      control: 'text',
+      description: 'Dialog content',
+    },
+    confirmText: {
+      control: 'text',
+      description: 'Confirm button text',
+    },
+    cancelText: {
+      control: 'text',
+      description: 'Cancel button text',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Confirm button loading state',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Confirm button disabled state',
+    },
+    showConfirm: {
+      control: 'boolean',
+      description: 'Whether to show confirm button',
+    },
+    showCancel: {
+      control: 'boolean',
+      description: 'Whether to show cancel button',
+    },
+    maskClosable: {
+      control: 'boolean',
+      description: 'Whether clicking mask closes dialog',
+    },
+  },
+} satisfies Meta<typeof Confirm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Interactive demo wrapper
+const ConfirmDemo = (args: any) => {
+  const [isShow, setIsShow] = useState(false)
+
+  return (
+    <div>
+      <Button variant="primary" onClick={() => setIsShow(true)}>
+        Open Dialog
+      </Button>
+      <Confirm
+        {...args}
+        isShow={isShow}
+        onConfirm={() => {
+          console.log('✅ User clicked confirm')
+          setIsShow(false)
+        }}
+        onCancel={() => {
+          console.log('❌ User clicked cancel')
+          setIsShow(false)
+        }}
+      />
+    </div>
+  )
+}
+
+// Basic warning dialog - Delete action
+export const WarningDialog: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'warning',
+    title: 'Delete Confirmation',
+    content: 'Are you sure you want to delete this project? This action cannot be undone.',
+  },
+}
+
+// Info dialog
+export const InfoDialog: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'info',
+    title: 'Notice',
+    content: 'Your changes have been saved. Do you want to proceed to the next step?',
+  },
+}
+
+// Custom button text
+export const CustomButtonText: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'warning',
+    title: 'Exit Editor',
+    content: 'You have unsaved changes. Are you sure you want to exit?',
+    confirmText: 'Discard Changes',
+    cancelText: 'Continue Editing',
+  },
+}
+
+// Loading state
+export const LoadingState: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'warning',
+    title: 'Deleting...',
+    content: 'Please wait while we delete the file...',
+    isLoading: true,
+  },
+}
+
+// Disabled state
+export const DisabledState: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'info',
+    title: 'Verification Required',
+    content: 'Please complete email verification before proceeding.',
+    isDisabled: true,
+  },
+}
+
+// Alert style - Confirm button only
+export const AlertStyle: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'info',
+    title: 'Success',
+    content: 'Your settings have been updated!',
+    showCancel: false,
+    confirmText: 'Got it',
+  },
+}
+
+// Dangerous action - Long content
+export const DangerousAction: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'warning',
+    title: 'Permanently Delete Account',
+    content: 'This action will permanently delete your account and all associated data, including: all projects and files, collaboration history, and personal settings. This action cannot be reversed!',
+    confirmText: 'Delete My Account',
+    cancelText: 'Keep My Account',
+  },
+}
+
+// Non-closable mask
+export const NotMaskClosable: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'warning',
+    title: 'Important Action',
+    content: 'This action requires your explicit choice. Clicking outside will not close this dialog.',
+    maskClosable: false,
+  },
+}
+
+// Full feature demo - Playground
+export const Playground: Story = {
+  render: args => <ConfirmDemo {...args} />,
+  args: {
+    type: 'warning',
+    title: 'This is a title',
+    content: 'This is the dialog content text...',
+    confirmText: undefined,
+    cancelText: undefined,
+    isLoading: false,
+    isDisabled: false,
+    showConfirm: true,
+    showCancel: true,
+    maskClosable: true,
+  },
+}
--- a/web/app/components/base/copy-btn/index.tsx
+++ b/web/app/components/base/copy-btn/index.tsx
@ -1,54 +0,0 @@
-'use client'
-import { useState } from 'react'
-import { t } from 'i18next'
-import { debounce } from 'lodash-es'
-import copy from 'copy-to-clipboard'
-import s from './style.module.css'
-import Tooltip from '@/app/components/base/tooltip'
-
-type ICopyBtnProps = {
-  value: string
-  className?: string
-  isPlain?: boolean
-}
-
-const CopyBtn = ({
-  value,
-  className,
-  isPlain,
-}: ICopyBtnProps) => {
-  const [isCopied, setIsCopied] = useState(false)
-
-  const onClickCopy = debounce(() => {
-    copy(value)
-    setIsCopied(true)
-  }, 100)
-
-  const onMouseLeave = debounce(() => {
-    setIsCopied(false)
-  }, 100)
-
-  return (
-    <div className={`${className}`}>
-      <Tooltip
-        popupContent={(isCopied ? t('appApi.copied') : t('appApi.copy'))}
-        asChild={false}
-      >
-        <div
-          onMouseLeave={onMouseLeave}
-          className={'box-border flex cursor-pointer items-center justify-center rounded-md bg-components-button-secondary-bg p-0.5'}
-          style={!isPlain
-            ? {
-              boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
-            }
-            : {}}
-          onClick={onClickCopy}
-        >
-          <div className={`h-6 w-6 rounded-md hover:bg-components-button-secondary-bg-hover  ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
-        </div>
-      </Tooltip>
-    </div>
-  )
-}
-
-export default CopyBtn
--- a/web/app/components/base/copy-btn/style.module.css
+++ b/web/app/components/base/copy-btn/style.module.css
@ -1,15 +0,0 @@
-.copyIcon {
-  background-image: url(~@/app/components/develop/secret-key/assets/copy.svg);
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.copyIcon:hover {
-  background-image: url(~@/app/components/develop/secret-key/assets/copy-hover.svg);
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.copyIcon.copied {
-  background-image: url(~@/app/components/develop/secret-key/assets/copied.svg);
-}
--- a/web/app/components/base/custom-icon/index.tsx
+++ b/web/app/components/base/custom-icon/index.tsx
@ -1,16 +0,0 @@
-import type { FC } from 'react'
-import React from 'react'
-
-type IconProps = {
-  icon: any
-  className?: string
-  [key: string]: any
-}
-
-const Icon: FC<IconProps> = ({ icon, className, ...other }) => {
-  return (
-    <img src={icon} className={`h-3 w-3 ${className}`} {...other} alt="icon" />
-  )
-}
-
-export default Icon
--- a/web/app/components/base/divider/with-label.tsx
+++ b/web/app/components/base/divider/with-label.tsx
@ -1,23 +0,0 @@
-import type { FC } from 'react'
-import type { DividerProps } from '.'
-import Divider from '.'
-import classNames from '@/utils/classnames'
-
-export type DividerWithLabelProps = DividerProps & {
-  label: string
-}
-
-export const DividerWithLabel: FC<DividerWithLabelProps> = (props) => {
-  const { label, className, ...rest } = props
-  return <div
-    className="my-2 flex items-center gap-2"
-  >
-    <Divider {...rest} className={classNames('flex-1', className)} />
-    <span className="text-xs text-text-tertiary">
-      {label}
-    </span>
-    <Divider {...rest} className={classNames('flex-1', className)} />
-  </div>
-}
-
-export default DividerWithLabel
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@ -14,16 +14,6 @@ import Divider from '@/app/components/base/divider'
 import { searchEmoji } from '@/utils/emoji'
 import cn from '@/utils/classnames'

-declare global {
-  // eslint-disable-next-line ts/no-namespace
-  namespace JSX {
-    // eslint-disable-next-line ts/consistent-type-definitions
-    interface IntrinsicElements {
-      'em-emoji': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
-    }
-  }
-}
-
 init({ data })

 const backgroundColors = [
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { usePathname, useRouter } from 'next/navigation'
-import produce from 'immer'
+import { produce } from 'immer'
 import { RiEqualizer2Line, RiExternalLinkLine } from '@remixicon/react'
 import { MessageFast } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.ts
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.ts
@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import produce from 'immer'
+import { produce } from 'immer'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import { queryAnnotationJobStatus, updateAnnotationStatus } from '@/service/annotation'
 import type { EmbeddingModelConfig } from '@/app/components/app/annotation/type'
--- a/web/app/components/base/features/new-feature-panel/citation.tsx
+++ b/web/app/components/base/features/new-feature-panel/citation.tsx
@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { Citations } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { RiEditLine } from '@remixicon/react'
 import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import produce from 'immer'
+import { produce } from 'immer'
 import { ReactSortable } from 'react-sortablejs'
 import { RiAddLine, RiAsterisk, RiCloseLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import Modal from '@/app/components/base/modal'
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { FolderUpload } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
--- a/web/app/components/base/features/new-feature-panel/follow-up.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up.tsx
@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { RiEqualizer2Line, RiImage2Fill } from '@remixicon/react'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
-import produce from 'immer'
+import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { ContentModeration } from '@/app/components/base/icons/src/vender/features'
--- a/web/app/components/base/features/new-feature-panel/more-like-this.tsx
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { RiSparklingFill } from '@remixicon/react'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
--- a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import produce from 'immer'
+import { produce } from 'immer'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { TextToAudio } from '@/app/components/base/icons/src/vender/features'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@ -1,6 +1,6 @@
 'use client'
 import useSWR from 'swr'
-import produce from 'immer'
+import { produce } from 'immer'
 import React, { Fragment } from 'react'
 import { usePathname } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@ -4,7 +4,7 @@ import {
  useState,
 } from 'react'
 import { useParams } from 'next/navigation'
-import produce from 'immer'
+import { produce } from 'immer'
 import { v4 as uuid4 } from 'uuid'
 import { useTranslation } from 'react-i18next'
 import type { FileEntity } from './types'
--- a/web/app/components/base/float-popover-container/index.tsx
+++ b/web/app/components/base/float-popover-container/index.tsx
@ -1,37 +0,0 @@
-'use client'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import type { PortalToFollowElemOptions } from '@/app/components/base/portal-to-follow-elem'
-
-type IFloatRightContainerProps = {
-  isMobile: boolean
-  open: boolean
-  toggle: () => void
-  triggerElement?: React.ReactNode
-  children?: React.ReactNode
-} & PortalToFollowElemOptions
-
-const FloatRightContainer = ({ open, toggle, triggerElement, isMobile, children, ...portalProps }: IFloatRightContainerProps) => {
-  return (
-    <>
-      {isMobile && (
-        <PortalToFollowElem open={open} {...portalProps}>
-          <PortalToFollowElemTrigger onClick={toggle}>
-            {triggerElement}
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent>
-            {children}
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
-      )}
-      {!isMobile && open && (
-        <>{children}</>
-      )}
-    </>
-  )
-}
-
-export default FloatRightContainer
--- a/web/app/components/base/icons/assets/vender/knowledge/index.ts
+++ b/web/app/components/base/icons/assets/vender/knowledge/index.ts
@ -1,13 +0,0 @@
-export { default as Chunk } from './Chunk'
-export { default as Collapse } from './Collapse'
-export { default as Divider } from './Divider'
-export { default as File } from './File'
-export { default as GeneralType } from './GeneralType'
-export { default as LayoutRight2LineMod } from './LayoutRight2LineMod'
-export { default as OptionCardEffectBlueLight } from './OptionCardEffectBlueLight'
-export { default as OptionCardEffectBlue } from './OptionCardEffectBlue'
-export { default as OptionCardEffectOrange } from './OptionCardEffectOrange'
-export { default as OptionCardEffectPurple } from './OptionCardEffectPurple'
-export { default as ParentChildType } from './ParentChildType'
-export { default as SelectionMod } from './SelectionMod'
-export { default as Watercrawl } from './Watercrawl'
--- a/web/app/components/base/icons/assets/vender/line/mapsAndTravel/route.svg
+++ b/web/app/components/base/icons/assets/vender/line/mapsAndTravel/route.svg
@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="route" clip-path="url(#clip0_3167_28693)">
-<path id="Icon" d="M6.70866 2.91699H6.96206C8.73962 2.91699 9.6284 2.91699 9.96578 3.23624C10.2574 3.51221 10.3867 3.91874 10.3079 4.31245C10.2168 4.76792 9.49122 5.28116 8.03999 6.30763L5.66899 7.98468C4.21777 9.01116 3.49215 9.5244 3.40106 9.97987C3.32233 10.3736 3.45157 10.7801 3.7432 11.0561C4.08059 11.3753 4.96937 11.3753 6.74693 11.3753H7.29199M4.66699 2.91699C4.66699 3.88349 3.88349 4.66699 2.91699 4.66699C1.95049 4.66699 1.16699 3.88349 1.16699 2.91699C1.16699 1.95049 1.95049 1.16699 2.91699 1.16699C3.88349 1.16699 4.66699 1.95049 4.66699 2.91699ZM12.8337 11.0837C12.8337 12.0502 12.0502 12.8337 11.0837 12.8337C10.1172 12.8337 9.33366 12.0502 9.33366 11.0837C9.33366 10.1172 10.1172 9.33366 11.0837 9.33366C12.0502 9.33366 12.8337 10.1172 12.8337 11.0837Z" stroke="#344054" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_3167_28693">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/web/app/components/base/icons/assets/vender/solid/mapsAndTravel/globe-06.svg
+++ b/web/app/components/base/icons/assets/vender/solid/mapsAndTravel/globe-06.svg
@ -1,8 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Icon">
-<g id="Solid">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.39498 2.71706C6.90587 2.57557 7.44415 2.49996 8.00008 2.49996C9.30806 2.49996 10.5183 2.91849 11.5041 3.62893C10.9796 3.97562 10.5883 4.35208 10.3171 4.75458C9.90275 5.36959 9.79654 6.00558 9.88236 6.58587C9.96571 7.1494 10.2245 7.63066 10.4965 7.98669C10.7602 8.33189 11.0838 8.6206 11.3688 8.76305C12.0863 9.12177 12.9143 9.30141 13.5334 9.39399C14.0933 9.47774 15.2805 9.75802 15.3244 8.86608C15.3304 8.74474 15.3334 8.62267 15.3334 8.49996C15.3334 4.44987 12.0502 1.16663 8.00008 1.16663C3.94999 1.16663 0.666748 4.44987 0.666748 8.49996C0.666748 12.55 3.94999 15.8333 8.00008 15.8333C8.1228 15.8333 8.24486 15.8303 8.3662 15.8243C8.73395 15.8062 9.01738 15.4934 8.99927 15.1256C8.98117 14.7579 8.66837 14.4745 8.30063 14.4926C8.20111 14.4975 8.10091 14.5 8.00008 14.5C5.6605 14.5 3.63367 13.1609 2.6442 11.2074L3.28991 10.8346L5.67171 11.2804C6.28881 11.3959 6.85846 10.9208 6.85566 10.293L6.84632 8.19093L8.06357 6.10697C8.26079 5.76932 8.24312 5.3477 8.01833 5.02774L6.39498 2.71706Z" fill="#1570EF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29718 8.93736C9.05189 8.84432 8.77484 8.90379 8.58934 9.08929C8.40383 9.27479 8.34437 9.55184 8.43741 9.79713L10.5486 15.363C10.6461 15.6199 10.8912 15.7908 11.166 15.7932C11.4408 15.7956 11.689 15.6292 11.791 15.374L12.6714 13.1714L14.874 12.2909C15.1292 12.1889 15.2957 11.9408 15.2932 11.666C15.2908 11.3912 15.12 11.146 14.863 11.0486L9.29718 8.93736Z" fill="#1570EF"/>
-</g>
-</g>
-</svg>
--- a/web/app/components/base/icons/assets/vender/solid/mapsAndTravel/route.svg
+++ b/web/app/components/base/icons/assets/vender/solid/mapsAndTravel/route.svg
@ -1,7 +0,0 @@
-<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="route-sep">
-<path id="Icon" d="M6.08303 2.5H6.30023C7.82386 2.5 8.58567 2.5 8.87485 2.77364C9.12483 3.01018 9.23561 3.35864 9.16812 3.69611C9.09004 4.08651 8.46809 4.52643 7.22418 5.40627L5.19189 6.84373C3.94799 7.72357 3.32603 8.16349 3.24795 8.55389C3.18046 8.89136 3.29124 9.23982 3.54122 9.47636C3.8304 9.75 4.59221 9.75 6.11584 9.75H6.58303" stroke="#F79009" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Icon_2" d="M2.83301 4C3.66143 4 4.33301 3.32843 4.33301 2.5C4.33301 1.67157 3.66143 1 2.83301 1C2.00458 1 1.33301 1.67157 1.33301 2.5C1.33301 3.32843 2.00458 4 2.83301 4Z" fill="#F79009"/>
-<path id="Icon_3" d="M9.83301 11C10.6614 11 11.333 10.3284 11.333 9.5C11.333 8.67157 10.6614 8 9.83301 8C9.00458 8 8.33301 8.67157 8.33301 9.5C8.33301 10.3284 9.00458 11 9.83301 11Z" fill="#F79009"/>
-</g>
-</svg>
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.module.css
+++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/baichuan-text-cn.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './BaichuanTextCn.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'BaichuanTextCn'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/Minimax.module.css
+++ b/web/app/components/base/icons/src/image/llm/Minimax.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/minimax.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/Minimax.tsx
+++ b/web/app/components/base/icons/src/image/llm/Minimax.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './Minimax.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'Minimax'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.module.css
+++ b/web/app/components/base/icons/src/image/llm/MinimaxText.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/minimax-text.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
+++ b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './MinimaxText.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'MinimaxText'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/Tongyi.module.css
+++ b/web/app/components/base/icons/src/image/llm/Tongyi.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/tongyi.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx
+++ b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './Tongyi.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'Tongyi'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/TongyiText.module.css
+++ b/web/app/components/base/icons/src/image/llm/TongyiText.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/tongyi-text.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './TongyiText.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'TongyiText'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.module.css
+++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/tongyi-text-cn.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './TongyiTextCn.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'TongyiTextCn'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/Wxyy.module.css
+++ b/web/app/components/base/icons/src/image/llm/Wxyy.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/wxyy.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx
+++ b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './Wxyy.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'Wxyy'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/WxyyText.module.css
+++ b/web/app/components/base/icons/src/image/llm/WxyyText.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/wxyy-text.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './WxyyText.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'WxyyText'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.module.css
+++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.module.css
@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/wxyy-text-cn.png) center center no-repeat;
-  background-size: contain;
-}
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import cn from '@/utils/classnames'
-import s from './WxyyTextCn.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>;
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'WxyyTextCn'
-
-export default Icon
--- a/web/app/components/base/icons/src/image/llm/index.ts
+++ b/web/app/components/base/icons/src/image/llm/index.ts
@ -1,9 +0,0 @@
-export { default as BaichuanTextCn } from './BaichuanTextCn'
-export { default as MinimaxText } from './MinimaxText'
-export { default as Minimax } from './Minimax'
-export { default as TongyiTextCn } from './TongyiTextCn'
-export { default as TongyiText } from './TongyiText'
-export { default as Tongyi } from './Tongyi'
-export { default as WxyyTextCn } from './WxyyTextCn'
-export { default as WxyyText } from './WxyyText'
-export { default as Wxyy } from './Wxyy'
--- a/web/app/components/base/icons/src/public/model/index.ts
+++ b/web/app/components/base/icons/src/public/model/index.ts
@ -1 +0,0 @@
-export { default as Checked } from './Checked'
--- a/web/app/components/base/icons/src/public/plugins/WebReader.tsx
+++ b/web/app/components/base/icons/src/public/plugins/WebReader.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './WebReader.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'WebReader'
-
-export default Icon
--- a/web/app/components/base/icons/src/public/plugins/Wikipedia.tsx
+++ b/web/app/components/base/icons/src/public/plugins/Wikipedia.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './Wikipedia.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Wikipedia'
-
-export default Icon
--- a/web/app/components/base/icons/src/public/plugins/index.ts
+++ b/web/app/components/base/icons/src/public/plugins/index.ts
@ -1,7 +0,0 @@
-export { default as Google } from './Google'
-export { default as PartnerDark } from './PartnerDark'
-export { default as PartnerLight } from './PartnerLight'
-export { default as VerifiedDark } from './VerifiedDark'
-export { default as VerifiedLight } from './VerifiedLight'
-export { default as WebReader } from './WebReader'
-export { default as Wikipedia } from './Wikipedia'
--- a/web/app/components/base/icons/src/public/thought/DataSet.tsx
+++ b/web/app/components/base/icons/src/public/thought/DataSet.tsx
@ -18,3 +18,4 @@ const Icon = (
 Icon.displayName = 'DataSet'

 export default Icon
+
--- a/web/app/components/base/icons/src/public/thought/Loading.tsx
+++ b/web/app/components/base/icons/src/public/thought/Loading.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './Loading.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Loading'
-
-export default Icon
--- a/web/app/components/base/icons/src/public/thought/Search.tsx
+++ b/web/app/components/base/icons/src/public/thought/Search.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './Search.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Search'
-
-export default Icon
--- a/web/app/components/base/icons/src/public/thought/ThoughtList.tsx
+++ b/web/app/components/base/icons/src/public/thought/ThoughtList.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './ThoughtList.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ThoughtList'
-
-export default Icon
--- a/web/app/components/base/icons/src/public/thought/WebReader.tsx
+++ b/web/app/components/base/icons/src/public/thought/WebReader.tsx
@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './WebReader.json'
-import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconData } from '@/app/components/base/icons/IconBase'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'WebReader'
-
-export default Icon
--- a/web/app/components/base/icons/src/public/thought/index.ts
+++ b/web/app/components/base/icons/src/public/thought/index.ts
@ -1,5 +1,2 @@
 export { default as DataSet } from './DataSet'
-export { default as Loading } from './Loading'
-export { default as Search } from './Search'
-export { default as ThoughtList } from './ThoughtList'
-export { default as WebReader } from './WebReader'
+
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`export { default as Checked } from './Checked'`