Merge branch 'main' into feat/rag-plugin-recommendation-optimization

api/constants/__init__.py

@@ -56,11 +56,15 @@ else:
     }
 DOCUMENT_EXTENSIONS: set[str] = convert_to_lower_and_upper_set(_doc_extensions)
 
+# console
 COOKIE_NAME_ACCESS_TOKEN = "access_token"
 COOKIE_NAME_REFRESH_TOKEN = "refresh_token"
-COOKIE_NAME_PASSPORT = "passport"
 COOKIE_NAME_CSRF_TOKEN = "csrf_token"
 
+# webapp
+COOKIE_NAME_WEBAPP_ACCESS_TOKEN = "webapp_access_token"
+COOKIE_NAME_PASSPORT = "passport"
+
 HEADER_NAME_CSRF_TOKEN = "X-CSRF-Token"
 HEADER_NAME_APP_CODE = "X-App-Code"
 HEADER_NAME_PASSPORT = "X-App-Passport"

api/controllers/web/login.py

@@ -17,8 +17,8 @@ from libs.helper import email
 from libs.passport import PassportService
 from libs.password import valid_password
 from libs.token import (
-    clear_access_token_from_cookie,
-    extract_access_token,
+    clear_webapp_access_token_from_cookie,
+    extract_webapp_access_token,
 )
 from services.account_service import AccountService
 from services.app_service import AppService
@@ -81,7 +81,7 @@ class LoginStatusApi(Resource):
     )
     def get(self):
         app_code = request.args.get("app_code")
-        token = extract_access_token(request)
+        token = extract_webapp_access_token(request)
         if not app_code:
             return {
                 "logged_in": bool(token),
@@ -128,7 +128,7 @@ class LogoutApi(Resource):
         response = make_response({"result": "success"})
         # enterprise SSO sets same site to None in https deployment
         # so we need to logout by calling api
-        clear_access_token_from_cookie(response, samesite="None")
+        clear_webapp_access_token_from_cookie(response, samesite="None")
         return response
 
 

api/controllers/web/passport.py

@@ -12,7 +12,7 @@ from controllers.web import web_ns
 from controllers.web.error import WebAppAuthRequiredError
 from extensions.ext_database import db
 from libs.passport import PassportService
-from libs.token import extract_access_token
+from libs.token import extract_webapp_access_token
 from models.model import App, EndUser, Site
 from services.feature_service import FeatureService
 from services.webapp_auth_service import WebAppAuthService, WebAppAuthType
@@ -35,7 +35,7 @@ class PassportResource(Resource):
         system_features = FeatureService.get_system_features()
         app_code = request.headers.get(HEADER_NAME_APP_CODE)
         user_id = request.args.get("user_id")
-        access_token = extract_access_token(request)
+        access_token = extract_webapp_access_token(request)
         if app_code is None:
             raise Unauthorized("X-App-Code header is missing.")
         if system_features.webapp_auth.enabled:

api/libs/token.py

@@ -12,6 +12,7 @@ from constants import (
     COOKIE_NAME_CSRF_TOKEN,
     COOKIE_NAME_PASSPORT,
     COOKIE_NAME_REFRESH_TOKEN,
+    COOKIE_NAME_WEBAPP_ACCESS_TOKEN,
     HEADER_NAME_CSRF_TOKEN,
     HEADER_NAME_PASSPORT,
 )
@@ -81,6 +82,14 @@ def extract_access_token(request: Request) -> str | None:
     return _try_extract_from_cookie(request) or _try_extract_from_header(request)
 
 
+def extract_webapp_access_token(request: Request) -> str | None:
+    """
+    Try to extract webapp access token from cookie, then header.
+    """
+
+    return request.cookies.get(_real_cookie_name(COOKIE_NAME_WEBAPP_ACCESS_TOKEN)) or _try_extract_from_header(request)
+
+
 def extract_webapp_passport(app_code: str, request: Request) -> str | None:
     """
     Try to extract app token from header or params.
@@ -155,6 +164,10 @@ def clear_access_token_from_cookie(response: Response, samesite: str = "Lax"):
     _clear_cookie(response, COOKIE_NAME_ACCESS_TOKEN, samesite)
 
 
+def clear_webapp_access_token_from_cookie(response: Response, samesite: str = "Lax"):
+    _clear_cookie(response, COOKIE_NAME_WEBAPP_ACCESS_TOKEN, samesite)
+
+
 def clear_refresh_token_from_cookie(response: Response):
     _clear_cookie(response, COOKIE_NAME_REFRESH_TOKEN)
 

api/tests/unit_tests/libs/test_token.py

@@ -1,5 +1,5 @@
-from constants import COOKIE_NAME_ACCESS_TOKEN
-from libs.token import extract_access_token
+from constants import COOKIE_NAME_ACCESS_TOKEN, COOKIE_NAME_WEBAPP_ACCESS_TOKEN
+from libs.token import extract_access_token, extract_webapp_access_token
 
 
 class MockRequest:
@@ -14,10 +14,12 @@ def test_extract_access_token():
         return MockRequest(headers, cookies, args)
 
     test_cases = [
-        (_mock_request({"Authorization": "Bearer 123"}, {}, {}), "123"),
-        (_mock_request({}, {COOKIE_NAME_ACCESS_TOKEN: "123"}, {}), "123"),
-        (_mock_request({}, {}, {}), None),
-        (_mock_request({"Authorization": "Bearer_aaa 123"}, {}, {}), None),
+        (_mock_request({"Authorization": "Bearer 123"}, {}, {}), "123", "123"),
+        (_mock_request({}, {COOKIE_NAME_ACCESS_TOKEN: "123"}, {}), "123", None),
+        (_mock_request({}, {}, {}), None, None),
+        (_mock_request({"Authorization": "Bearer_aaa 123"}, {}, {}), None, None),
+        (_mock_request({}, {COOKIE_NAME_WEBAPP_ACCESS_TOKEN: "123"}, {}), None, "123"),
     ]
-    for request, expected in test_cases:
-        assert extract_access_token(request) == expected  # pyright: ignore[reportArgumentType]
+    for request, expected_console, expected_webapp in test_cases:
+        assert extract_access_token(request) == expected_console  # pyright: ignore[reportArgumentType]
+        assert extract_webapp_access_token(request) == expected_webapp  # pyright: ignore[reportArgumentType]

web/.storybook/main.ts

@@ -1,5 +1,8 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const storybookDir = path.dirname(fileURLToPath(import.meta.url))
 
 const config: StorybookConfig = {
   stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -32,9 +35,9 @@ const config: StorybookConfig = {
     config.resolve.alias = {
       ...config.resolve.alias,
       // Mock the plugin index files to avoid circular dependencies
-      [path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/context-block/index.tsx')]: path.resolve(__dirname, '__mocks__/context-block.tsx'),
-      [path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/history-block/index.tsx')]: path.resolve(__dirname, '__mocks__/history-block.tsx'),
-      [path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/query-block/index.tsx')]: path.resolve(__dirname, '__mocks__/query-block.tsx'),
+      [path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/context-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/context-block.tsx'),
+      [path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/history-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/history-block.tsx'),
+      [path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/query-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/query-block.tsx'),
     }
     return config
   },

web/.storybook/utils/audio-player-manager.mock.ts

@@ -0,0 +1,64 @@
+import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
+
+type PlayerCallback = ((event: string) => void) | null
+
+class MockAudioPlayer {
+  private callback: PlayerCallback = null
+  private finishTimer?: ReturnType<typeof setTimeout>
+
+  public setCallback(callback: PlayerCallback) {
+    this.callback = callback
+  }
+
+  public playAudio() {
+    this.clearTimer()
+    this.callback?.('play')
+    this.finishTimer = setTimeout(() => {
+      this.callback?.('ended')
+    }, 2000)
+  }
+
+  public pauseAudio() {
+    this.clearTimer()
+    this.callback?.('paused')
+  }
+
+  private clearTimer() {
+    if (this.finishTimer)
+      clearTimeout(this.finishTimer)
+  }
+}
+
+class MockAudioPlayerManager {
+  private readonly player = new MockAudioPlayer()
+
+  public getAudioPlayer(
+    _url: string,
+    _isPublic: boolean,
+    _id: string | undefined,
+    _msgContent: string | null | undefined,
+    _voice: string | undefined,
+    callback: PlayerCallback,
+  ) {
+    this.player.setCallback(callback)
+    return this.player
+  }
+
+  public resetMsgId() {
+    // No-op for the mock
+  }
+}
+
+export const ensureMockAudioManager = () => {
+  const managerAny = AudioPlayerManager as unknown as {
+    getInstance: () => AudioPlayerManager
+    __isStorybookMockInstalled?: boolean
+  }
+
+  if (managerAny.__isStorybookMockInstalled)
+    return
+
+  const mock = new MockAudioPlayerManager()
+  managerAny.getInstance = () => mock as unknown as AudioPlayerManager
+  managerAny.__isStorybookMockInstalled = true
+}

web/app/components/app/log/list.tsx

@@ -14,6 +14,7 @@ import timezone from 'dayjs/plugin/timezone'
 import { createContext, useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import type { ChatItemInTree } from '../../base/chat/types'
 import Indicator from '../../header/indicator'
 import VarPanel from './var-panel'
@@ -42,6 +43,10 @@ import cn from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import PromptLogModal from '../../base/prompt-log-modal'
 
+type AppStoreState = ReturnType<typeof useAppStore.getState>
+type ConversationListItem = ChatConversationGeneralDetail | CompletionConversationGeneralDetail
+type ConversationSelection = ConversationListItem | { id: string; isPlaceholder?: true }
+
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
@@ -201,7 +206,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
   const { formatTime } = useTimestamp()
   const { onClose, appDetail } = useContext(DrawerContext)
   const { notify } = useContext(ToastContext)
-  const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, showPromptLogModal, setShowPromptLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
+  const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, showPromptLogModal, setShowPromptLogModal, currentLogModalActiveTab } = useAppStore(useShallow((state: AppStoreState) => ({
     currentLogItem: state.currentLogItem,
     setCurrentLogItem: state.setCurrentLogItem,
     showMessageLogModal: state.showMessageLogModal,
@@ -893,20 +898,113 @@ const ChatConversationDetailComp: FC<{ appId?: string; conversationId?: string }
 const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh }) => {
   const { t } = useTranslation()
   const { formatTime } = useTimestamp()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const conversationIdInUrl = searchParams.get('conversation_id') ?? undefined
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
 
   const [showDrawer, setShowDrawer] = useState<boolean>(false) // Whether to display the chat details drawer
-  const [currentConversation, setCurrentConversation] = useState<ChatConversationGeneralDetail | CompletionConversationGeneralDetail | undefined>() // Currently selected conversation
+  const [currentConversation, setCurrentConversation] = useState<ConversationSelection | undefined>() // Currently selected conversation
+  const closingConversationIdRef = useRef<string | null>(null)
+  const pendingConversationIdRef = useRef<string | null>(null)
+  const pendingConversationCacheRef = useRef<ConversationSelection | undefined>(undefined)
   const isChatMode = appDetail.mode !== 'completion' // Whether the app is a chat app
   const isChatflow = appDetail.mode === 'advanced-chat' // Whether the app is a chatflow app
-  const { setShowPromptLogModal, setShowAgentLogModal, setShowMessageLogModal } = useAppStore(useShallow(state => ({
+  const { setShowPromptLogModal, setShowAgentLogModal, setShowMessageLogModal } = useAppStore(useShallow((state: AppStoreState) => ({
     setShowPromptLogModal: state.setShowPromptLogModal,
     setShowAgentLogModal: state.setShowAgentLogModal,
     setShowMessageLogModal: state.setShowMessageLogModal,
   })))
 
+  const activeConversationId = conversationIdInUrl ?? pendingConversationIdRef.current ?? currentConversation?.id
+
+  const buildUrlWithConversation = useCallback((conversationId?: string) => {
+    const params = new URLSearchParams(searchParams.toString())
+    if (conversationId)
+      params.set('conversation_id', conversationId)
+    else
+      params.delete('conversation_id')
+
+    const queryString = params.toString()
+    return queryString ? `${pathname}?${queryString}` : pathname
+  }, [pathname, searchParams])
+
+  const handleRowClick = useCallback((log: ConversationListItem) => {
+    if (conversationIdInUrl === log.id) {
+      if (!showDrawer)
+        setShowDrawer(true)
+
+      if (!currentConversation || currentConversation.id !== log.id)
+        setCurrentConversation(log)
+      return
+    }
+
+    pendingConversationIdRef.current = log.id
+    pendingConversationCacheRef.current = log
+    if (!showDrawer)
+      setShowDrawer(true)
+
+    if (currentConversation?.id !== log.id)
+      setCurrentConversation(undefined)
+
+    router.push(buildUrlWithConversation(log.id), { scroll: false })
+  }, [buildUrlWithConversation, conversationIdInUrl, currentConversation, router, showDrawer])
+
+  const currentConversationId = currentConversation?.id
+
+  useEffect(() => {
+    if (!conversationIdInUrl) {
+      if (pendingConversationIdRef.current)
+        return
+
+      if (showDrawer || currentConversationId) {
+        setShowDrawer(false)
+        setCurrentConversation(undefined)
+      }
+      closingConversationIdRef.current = null
+      pendingConversationCacheRef.current = undefined
+      return
+    }
+
+    if (closingConversationIdRef.current === conversationIdInUrl)
+      return
+
+    if (pendingConversationIdRef.current === conversationIdInUrl)
+      pendingConversationIdRef.current = null
+
+    const matchedConversation = logs?.data?.find((item: ConversationListItem) => item.id === conversationIdInUrl)
+    const nextConversation: ConversationSelection = matchedConversation
+      ?? pendingConversationCacheRef.current
+      ?? { id: conversationIdInUrl, isPlaceholder: true }
+
+    if (!showDrawer)
+      setShowDrawer(true)
+
+    if (!currentConversation || currentConversation.id !== conversationIdInUrl || (matchedConversation && currentConversation !== matchedConversation))
+      setCurrentConversation(nextConversation)
+
+    if (pendingConversationCacheRef.current?.id === conversationIdInUrl || matchedConversation)
+      pendingConversationCacheRef.current = undefined
+  }, [conversationIdInUrl, currentConversation, isChatMode, logs?.data, showDrawer])
+
+  const onCloseDrawer = useCallback(() => {
+    onRefresh()
+    setShowDrawer(false)
+    setCurrentConversation(undefined)
+    setShowPromptLogModal(false)
+    setShowAgentLogModal(false)
+    setShowMessageLogModal(false)
+    pendingConversationIdRef.current = null
+    pendingConversationCacheRef.current = undefined
+    closingConversationIdRef.current = conversationIdInUrl ?? null
+
+    if (conversationIdInUrl)
+      router.replace(buildUrlWithConversation(), { scroll: false })
+  }, [buildUrlWithConversation, conversationIdInUrl, onRefresh, router, setShowAgentLogModal, setShowMessageLogModal, setShowPromptLogModal])
+
   // Annotated data needs to be highlighted
   const renderTdValue = (value: string | number | null, isEmptyStyle: boolean, isHighlight = false, annotation?: LogAnnotation) => {
     return (
@@ -925,15 +1023,6 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
     )
   }
 
-  const onCloseDrawer = () => {
-    onRefresh()
-    setShowDrawer(false)
-    setCurrentConversation(undefined)
-    setShowPromptLogModal(false)
-    setShowAgentLogModal(false)
-    setShowMessageLogModal(false)
-  }
-
   if (!logs)
     return <Loading />
 
@@ -960,11 +1049,8 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
             const rightValue = get(log, isChatMode ? 'message_count' : 'message.answer')
             return <tr
               key={log.id}
-              className={cn('cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover', currentConversation?.id !== log.id ? '' : 'bg-background-default-hover')}
-              onClick={() => {
-                setShowDrawer(true)
-                setCurrentConversation(log)
-              }}>
+              className={cn('cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover', activeConversationId !== log.id ? '' : 'bg-background-default-hover')}
+              onClick={() => handleRowClick(log)}>
               <td className='h-4'>
                 {!log.read_at && (
                   <div className='flex items-center p-3 pr-0.5'>

web/app/components/base/action-button/index.stories.tsx

@@ -3,7 +3,7 @@ import { RiAddLine, RiDeleteBinLine, RiEditLine, RiMore2Fill, RiSaveLine, RiShar
 import ActionButton, { ActionButtonState } from '.'
 
 const meta = {
-  title: 'Base/ActionButton',
+  title: 'Base/Button/ActionButton',
   component: ActionButton,
   parameters: {
     layout: 'centered',

web/app/components/base/audio-btn/index.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect } from 'react'
+import type { ComponentProps } from 'react'
+import AudioBtn from '.'
+import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
+
+ensureMockAudioManager()
+
+const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
+  useEffect(() => {
+    ensureMockAudioManager()
+  }, [])
+
+  return (
+    <div className="flex items-center justify-center space-x-3">
+      <AudioBtn {...props} />
+      <span className="text-xs text-gray-500">Click to toggle playback</span>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Button/AudioBtn',
+  component: AudioBtn,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Audio playback toggle that streams assistant responses. The story uses a mocked audio player so you can inspect loading and playback states without calling the real API.',
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/apps/demo-app/text-to-audio',
+        params: { appId: 'demo-app' },
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: 'text',
+      description: 'Message identifier used to scope the audio stream.',
+    },
+    value: {
+      control: 'text',
+      description: 'Text content that would be converted to speech.',
+    },
+    voice: {
+      control: 'text',
+      description: 'Voice profile used for playback.',
+    },
+    isAudition: {
+      control: 'boolean',
+      description: 'Switches to the audition style with minimal padding.',
+    },
+    className: {
+      control: 'text',
+      description: 'Optional custom class for the wrapper.',
+    },
+  },
+} satisfies Meta<typeof AudioBtn>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => <StoryWrapper {...args} />,
+  args: {
+    id: 'message-1',
+    value: 'This is an audio preview for the current assistant response.',
+    voice: 'alloy',
+  },
+}

web/app/components/base/auto-height-textarea/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import AutoHeightTextarea from '.'
 
 const meta = {
-  title: 'Base/AutoHeightTextarea',
+  title: 'Base/Input/AutoHeightTextarea',
   component: AutoHeightTextarea,
   parameters: {
     layout: 'centered',

web/app/components/base/block-input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import BlockInput from '.'
 
 const meta = {
-  title: 'Base/BlockInput',
+  title: 'Base/Input/BlockInput',
   component: BlockInput,
   parameters: {
     layout: 'centered',

web/app/components/base/button/add-button.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import AddButton from './add-button'
+
+const meta = {
+  title: 'Base/Button/AddButton',
+  component: AddButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Compact icon-only button used for inline “add” actions in lists, cards, and modals.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Extra classes appended to the clickable container.',
+    },
+    onClick: {
+      control: false,
+      description: 'Triggered when the add button is pressed.',
+    },
+  },
+  args: {
+    onClick: () => console.log('Add button clicked'),
+  },
+} satisfies Meta<typeof AddButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'bg-white/80 shadow-sm backdrop-blur-sm',
+  },
+}
+
+export const InToolbar: Story = {
+  render: args => (
+    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
+      <span className="text-xs text-text-tertiary">Attachments</span>
+      <div className="ml-auto flex items-center gap-2">
+        <AddButton {...args} />
+      </div>
+    </div>
+  ),
+  args: {
+    className: 'border border-dashed border-primary-200',
+  },
+}

web/app/components/base/button/index.stories.tsx

@@ -4,7 +4,7 @@ import { RocketLaunchIcon } from '@heroicons/react/20/solid'
 import { Button } from '.'
 
 const meta = {
-  title: 'Base/Button',
+  title: 'Base/Button/Button',
   component: Button,
   parameters: {
     layout: 'centered',

web/app/components/base/button/sync-button.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import SyncButton from './sync-button'
+
+const meta = {
+  title: 'Base/Button/SyncButton',
+  component: SyncButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Icon-only refresh button that surfaces a tooltip and is used for manual sync actions across the UI.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes appended to the clickable container.',
+    },
+    popupContent: {
+      control: 'text',
+      description: 'Tooltip text shown on hover.',
+    },
+    onClick: {
+      control: false,
+      description: 'Triggered when the sync button is pressed.',
+    },
+  },
+  args: {
+    popupContent: 'Sync now',
+    onClick: () => console.log('Sync button clicked'),
+  },
+} satisfies Meta<typeof SyncButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'bg-white/80 shadow-sm backdrop-blur-sm',
+  },
+}
+
+export const InHeader: Story = {
+  render: args => (
+    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
+      <span className="text-xs text-text-tertiary">Logs</span>
+      <div className="ml-auto flex items-center gap-2">
+        <SyncButton {...args} />
+      </div>
+    </div>
+  ),
+  args: {
+    popupContent: 'Refresh logs',
+  },
+}

web/app/components/base/chat/chat/answer/index.stories.tsx

@@ -6,7 +6,7 @@ import { markdownContentSVG } from './__mocks__/markdownContentSVG'
 import Answer from '.'
 
 const meta = {
-  title: 'Base/Chat Answer',
+  title: 'Base/Chat/Chat Answer',
   component: Answer,
   parameters: {
     layout: 'fullscreen',

web/app/components/base/chat/chat/question.stories.tsx

@@ -5,7 +5,7 @@ import Question from './question'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 
 const meta = {
-  title: 'Base/Chat Question',
+  title: 'Base/Chat/Chat Question',
   component: Question,
   parameters: {
     layout: 'centered',

web/app/components/base/checkbox/index.stories.tsx

@@ -13,7 +13,7 @@ const createToggleItem = <T extends { id: string; checked: boolean }>(
 }
 
 const meta = {
-  title: 'Base/Checkbox',
+  title: 'Base/Input/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',

web/app/components/base/confirm/index.stories.tsx

@@ -4,7 +4,7 @@ import Confirm from '.'
 import Button from '../button'
 
 const meta = {
-  title: 'Base/Confirm',
+  title: 'Base/Dialog/Confirm',
   component: Confirm,
   parameters: {
     layout: 'centered',

web/app/components/base/content-dialog/index.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import ContentDialog from '.'
+
+type Props = React.ComponentProps<typeof ContentDialog>
+
+const meta = {
+  title: 'Base/Dialog/ContentDialog',
+  component: ContentDialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Sliding panel overlay used in the app detail view. Includes dimmed backdrop and animated entrance/exit transitions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes applied to the sliding panel container.',
+    },
+    show: {
+      control: 'boolean',
+      description: 'Controls visibility of the dialog.',
+    },
+    onClose: {
+      control: false,
+      description: 'Invoked when the overlay/backdrop is clicked.',
+    },
+  },
+  args: {
+    show: false,
+  },
+} satisfies Meta<typeof ContentDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DemoWrapper = (props: Props) => {
+  const [open, setOpen] = useState(props.show)
+
+  useEffect(() => {
+    setOpen(props.show)
+  }, [props.show])
+
+  return (
+    <div className="relative h-[480px] w-full overflow-hidden bg-gray-100">
+      <div className="flex h-full items-center justify-center">
+        <button
+          className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+          onClick={() => setOpen(true)}
+        >
+          Open dialog
+        </button>
+      </div>
+
+      <ContentDialog
+        {...props}
+        show={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="flex h-full flex-col space-y-4 bg-white p-6">
+          <h2 className="text-lg font-semibold text-gray-900">Plan summary</h2>
+          <p className="text-sm text-gray-600">
+            Use this area to present rich content for the selected run, configuration details, or
+            any supporting context.
+          </p>
+          <div className="flex-1 overflow-y-auto rounded-md border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            Scrollable placeholder content. Add domain-specific information, activity logs, or
+            editors in the real application.
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <button
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </button>
+            <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+              Apply changes
+            </button>
+          </div>
+        </div>
+      </ContentDialog>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <DemoWrapper {...args} />,
+}
+
+export const NarrowPanel: Story = {
+  render: args => <DemoWrapper {...args} />,
+  args: {
+    className: 'max-w-[420px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies a custom width class to show the dialog as a narrower information panel.',
+      },
+    },
+  },
+}

web/app/components/base/dialog/index.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Dialog from '.'
+
+const meta = {
+  title: 'Base/Dialog/Dialog',
+  component: Dialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Modal dialog built on Headless UI. Provides animated overlay, title slot, and optional footer region.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes applied to the panel.',
+    },
+    titleClassName: {
+      control: 'text',
+      description: 'Extra classes for the title element.',
+    },
+    bodyClassName: {
+      control: 'text',
+      description: 'Extra classes for the content area.',
+    },
+    footerClassName: {
+      control: 'text',
+      description: 'Extra classes for the footer container.',
+    },
+    title: {
+      control: 'text',
+      description: 'Dialog title.',
+    },
+    show: {
+      control: 'boolean',
+      description: 'Controls visibility of the dialog.',
+    },
+    onClose: {
+      control: false,
+      description: 'Called when the dialog backdrop or close handler fires.',
+    },
+  },
+  args: {
+    title: 'Manage API Keys',
+    show: false,
+  },
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DialogDemo = (props: React.ComponentProps<typeof Dialog>) => {
+  const [open, setOpen] = useState(props.show)
+  useEffect(() => {
+    setOpen(props.show)
+  }, [props.show])
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show dialog
+      </button>
+
+      <Dialog
+        {...props}
+        show={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="space-y-4 text-sm text-gray-600">
+          <p>
+            Centralize API key management for collaborators. You can revoke, rotate, or generate new keys directly from this dialog.
+          </p>
+          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            This placeholder area represents a form or table that would live inside the dialog body.
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    footer: (
+      <>
+        <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
+          Cancel
+        </button>
+        <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+          Save changes
+        </button>
+      </>
+    ),
+  },
+}
+
+export const WithoutFooter: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    footer: undefined,
+    title: 'Read-only summary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the dialog when no footer actions are provided.',
+      },
+    },
+  },
+}
+
+export const CustomStyling: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    className: 'max-w-[560px] bg-white/95 backdrop-blur',
+    bodyClassName: 'bg-gray-50 rounded-xl p-5',
+    footerClassName: 'justify-between px-4 pb-4 pt-4',
+    titleClassName: 'text-lg text-primary-600',
+    footer: (
+      <>
+        <span className="text-xs text-gray-400">Last synced 2 minutes ago</span>
+        <div className="flex gap-2">
+          <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
+            Close
+          </button>
+          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+            Refresh data
+          </button>
+        </div>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies custom classes to the panel, body, title, and footer to match different surfaces.',
+      },
+    },
+  },
+}

web/app/components/base/input-number/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { InputNumber } from '.'
 
 const meta = {
-  title: 'Base/InputNumber',
+  title: 'Base/Input/InputNumber',
   component: InputNumber,
   parameters: {
     layout: 'centered',

web/app/components/base/input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Input from '.'
 
 const meta = {
-  title: 'Base/Input',
+  title: 'Base/Input/Input',
   component: Input,
   parameters: {
     layout: 'centered',

web/app/components/base/modal-like-wrap/index.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import ModalLikeWrap from '.'
+
+const meta = {
+  title: 'Base/Dialog/ModalLikeWrap',
+  component: ModalLikeWrap,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Compact “modal-like” card used in wizards. Provides header actions, optional back slot, and confirm/cancel buttons.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Header title text.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional classes on the wrapper.',
+    },
+    beforeHeader: {
+      control: false,
+      description: 'Slot rendered before the header (commonly a back link).',
+    },
+    hideCloseBtn: {
+      control: 'boolean',
+      description: 'Hides the top-right close icon when true.',
+    },
+    children: {
+      control: false,
+    },
+    onClose: {
+      control: false,
+    },
+    onConfirm: {
+      control: false,
+    },
+  },
+  args: {
+    title: 'Create dataset field',
+    hideCloseBtn: false,
+    onClose: () => console.log('close'),
+    onConfirm: () => console.log('confirm'),
+  },
+} satisfies Meta<typeof ModalLikeWrap>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const BaseContent = () => (
+  <div className="space-y-3 text-sm text-gray-600">
+    <p>
+      Describe the new field your dataset should collect. Provide a clear label and optional helper text.
+    </p>
+    <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+      Form inputs would be placed here in the real flow.
+    </div>
+  </div>
+)
+
+export const Default: Story = {
+  render: args => (
+    <ModalLikeWrap {...args}>
+      <BaseContent />
+    </ModalLikeWrap>
+  ),
+}
+
+export const WithBackLink: Story = {
+  render: args => (
+    <ModalLikeWrap
+      {...args}
+      hideCloseBtn
+      beforeHeader={(
+        <button
+          className="mb-1 flex items-center gap-1 text-xs font-medium uppercase text-text-accent"
+          onClick={() => console.log('back')}
+        >
+          <span className="bg-text-accent/10 inline-block h-4 w-4 rounded text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
+          Back
+        </button>
+      )}
+    >
+      <BaseContent />
+    </ModalLikeWrap>
+  ),
+  args: {
+    title: 'Select metadata type',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates feeding content into `beforeHeader` while hiding the close button.',
+      },
+    },
+  },
+}
+
+export const CustomWidth: Story = {
+  render: args => (
+    <ModalLikeWrap
+      {...args}
+      className="w-[420px]"
+    >
+      <BaseContent />
+      <div className="mt-4 rounded-md bg-blue-50 p-3 text-xs text-blue-600">
+        Tip: metadata keys may only include letters, numbers, and underscores.
+      </div>
+    </ModalLikeWrap>
+  ),
+  args: {
+    title: 'Advanced configuration',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies extra width and helper messaging to emulate configuration panels.',
+      },
+    },
+  },
+}

web/app/components/base/modal/index.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Modal from '.'
+
+const meta = {
+  title: 'Base/Dialog/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Lightweight modal wrapper with optional header/description, close icon, and high-priority stacking for dropdown overlays.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Extra classes applied to the modal panel.',
+    },
+    wrapperClassName: {
+      control: 'text',
+      description: 'Additional wrapper classes for the dialog.',
+    },
+    isShow: {
+      control: 'boolean',
+      description: 'Controls whether the modal is visible.',
+    },
+    title: {
+      control: 'text',
+      description: 'Heading displayed at the top of the modal.',
+    },
+    description: {
+      control: 'text',
+      description: 'Secondary text beneath the title.',
+    },
+    closable: {
+      control: 'boolean',
+      description: 'Whether the close icon should be shown.',
+    },
+    overflowVisible: {
+      control: 'boolean',
+      description: 'Allows content to overflow the modal panel.',
+    },
+    highPriority: {
+      control: 'boolean',
+      description: 'Lifts the modal above other high z-index elements like dropdowns.',
+    },
+    onClose: {
+      control: false,
+      description: 'Callback invoked when the modal requests to close.',
+    },
+  },
+  args: {
+    isShow: false,
+    title: 'Create new API key',
+    description: 'Generate a scoped key for this workspace. You can revoke it at any time.',
+    closable: true,
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const ModalDemo = (props: React.ComponentProps<typeof Modal>) => {
+  const [open, setOpen] = useState(props.isShow)
+
+  useEffect(() => {
+    setOpen(props.isShow)
+  }, [props.isShow])
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show modal
+      </button>
+
+      <Modal
+        {...props}
+        isShow={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="mt-6 space-y-4 text-sm text-gray-600">
+          <p>
+            Provide a descriptive name for this key so collaborators know its purpose. Restrict usage with scopes to limit access.
+          </p>
+          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            Form fields and validation messaging would appear here. This placeholder keeps the story lightweight.
+          </div>
+        </div>
+        <div className="mt-8 flex justify-end gap-3">
+          <button
+            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </button>
+          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+            Create key
+          </button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <ModalDemo {...args} />,
+}
+
+export const HighPriorityOverflow: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    highPriority: true,
+    overflowVisible: true,
+    description: 'Demonstrates the modal configured to sit above dropdowns while letting the body content overflow.',
+    className: 'max-w-[540px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the modal with `highPriority` and `overflowVisible` enabled, useful when nested within complex surfaces.',
+      },
+    },
+  },
+}

web/app/components/base/modal/modal.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Modal from './modal'
+
+const meta = {
+  title: 'Base/Dialog/RichModal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Full-featured modal with header, subtitle, customizable footer buttons, and optional extra action.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+      description: 'Defines the panel width.',
+    },
+    title: {
+      control: 'text',
+      description: 'Primary heading text.',
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Secondary text below the title.',
+    },
+    confirmButtonText: {
+      control: 'text',
+      description: 'Label for the confirm button.',
+    },
+    cancelButtonText: {
+      control: 'text',
+      description: 'Label for the cancel button.',
+    },
+    showExtraButton: {
+      control: 'boolean',
+      description: 'Whether to render the extra button.',
+    },
+    extraButtonText: {
+      control: 'text',
+      description: 'Label for the extra button.',
+    },
+    extraButtonVariant: {
+      control: 'select',
+      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      description: 'Visual style for the extra button.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables footer actions when true.',
+    },
+    footerSlot: {
+      control: false,
+    },
+    bottomSlot: {
+      control: false,
+    },
+    onClose: {
+      control: false,
+      description: 'Handler fired when the close icon or backdrop is clicked.',
+    },
+    onConfirm: {
+      control: false,
+      description: 'Handler fired when confirm is pressed.',
+    },
+    onCancel: {
+      control: false,
+      description: 'Handler fired when cancel is pressed.',
+    },
+    onExtraButtonClick: {
+      control: false,
+      description: 'Handler fired when the extra button is pressed.',
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    size: 'sm',
+    title: 'Delete integration',
+    subTitle: 'Disabling this integration will revoke access tokens and webhooks.',
+    confirmButtonText: 'Delete integration',
+    cancelButtonText: 'Cancel',
+    showExtraButton: false,
+    extraButtonText: 'Disable temporarily',
+    extraButtonVariant: 'warning',
+    disabled: false,
+    onClose: () => console.log('Modal closed'),
+    onConfirm: () => console.log('Confirm pressed'),
+    onCancel: () => console.log('Cancel pressed'),
+    onExtraButtonClick: () => console.log('Extra button pressed'),
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+type ModalProps = React.ComponentProps<typeof Modal>
+
+const ModalDemo = (props: ModalProps) => {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (props.disabled && open)
+      setOpen(false)
+  }, [props.disabled, open])
+
+  const {
+    onClose,
+    onConfirm,
+    onCancel,
+    onExtraButtonClick,
+    children,
+    ...rest
+  } = props
+
+  const handleClose = () => {
+    onClose?.()
+    setOpen(false)
+  }
+
+  const handleConfirm = () => {
+    onConfirm?.()
+    setOpen(false)
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    setOpen(false)
+  }
+
+  const handleExtra = () => {
+    onExtraButtonClick?.()
+  }
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show rich modal
+      </button>
+
+      {open && (
+        <Modal
+          {...rest}
+          onClose={handleClose}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          onExtraButtonClick={handleExtra}
+          children={children ?? (
+            <div className="space-y-4 text-sm text-gray-600">
+              <p>
+                Removing integrations immediately stops workflow automations related to this connection.
+                Make sure no scheduled jobs depend on this integration before proceeding.
+              </p>
+              <ul className="list-disc space-y-1 pl-4 text-xs text-gray-500">
+                <li>All API credentials issued by this integration will be revoked.</li>
+                <li>Historical logs remain accessible for auditing.</li>
+                <li>You can re-enable the integration later with fresh credentials.</li>
+              </ul>
+            </div>
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <ModalDemo {...args} />,
+}
+
+export const WithExtraAction: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    showExtraButton: true,
+    extraButtonVariant: 'secondary',
+    extraButtonText: 'Disable only',
+    footerSlot: (
+      <span className="text-xs text-gray-400">Last synced 5 minutes ago</span>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Illustrates the optional extra button and footer slot for advanced workflows.',
+      },
+    },
+  },
+}
+
+export const MediumSized: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    size: 'md',
+    subTitle: 'Use the larger width to surface forms with more fields or supporting descriptions.',
+    bottomSlot: (
+      <div className="border-t border-divider-subtle bg-components-panel-bg px-6 py-4 text-xs text-gray-500">
+        Need finer control? Configure automation rules in the integration settings page.
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the medium sized panel and a populated `bottomSlot` for supplemental messaging.',
+      },
+    },
+  },
+}

web/app/components/base/new-audio-button/index.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect } from 'react'
+import type { ComponentProps } from 'react'
+import AudioBtn from '.'
+import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
+
+ensureMockAudioManager()
+
+const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
+  useEffect(() => {
+    ensureMockAudioManager()
+  }, [])
+
+  return (
+    <div className="flex items-center justify-center space-x-3">
+      <AudioBtn {...props} />
+      <span className="text-xs text-gray-500">Audio toggle using ActionButton styling</span>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Button/NewAudioButton',
+  component: AudioBtn,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Updated audio playback trigger styled with `ActionButton`. Behaves like the legacy audio button but adopts the new button design system.',
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/apps/demo-app/text-to-audio',
+        params: { appId: 'demo-app' },
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: 'text',
+      description: 'Message identifier used by the audio request.',
+    },
+    value: {
+      control: 'text',
+      description: 'Prompt or response text that will be converted to speech.',
+    },
+    voice: {
+      control: 'text',
+      description: 'Voice profile for the generated speech.',
+    },
+  },
+} satisfies Meta<typeof AudioBtn>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => <StoryWrapper {...args} />,
+  args: {
+    id: 'message-1',
+    value: 'Listen to the latest assistant message.',
+    voice: 'alloy',
+  },
+}

web/app/components/base/prompt-editor/index.stories.tsx

@@ -25,7 +25,7 @@ const PromptEditorMock = ({ value, onChange, placeholder, editable, compact, cla
 }
 
 const meta = {
-  title: 'Base/PromptEditor',
+  title: 'Base/Input/PromptEditor',
   component: PromptEditorMock,
   parameters: {
     layout: 'centered',

web/app/components/base/radio-card/index.stories.tsx

@@ -4,7 +4,7 @@ import { RiCloudLine, RiCpuLine, RiDatabase2Line, RiLightbulbLine, RiRocketLine,
 import RadioCard from '.'
 
 const meta = {
-  title: 'Base/RadioCard',
+  title: 'Base/Input/RadioCard',
   component: RadioCard,
   parameters: {
     layout: 'centered',

web/app/components/base/radio/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Radio from '.'
 
 const meta = {
-  title: 'Base/Radio',
+  title: 'Base/Input/Radio',
   component: Radio,
   parameters: {
     layout: 'centered',

web/app/components/base/search-input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import SearchInput from '.'
 
 const meta = {
-  title: 'Base/SearchInput',
+  title: 'Base/Input/SearchInput',
   component: SearchInput,
   parameters: {
     layout: 'centered',

web/app/components/base/select/index.stories.tsx

@@ -4,7 +4,7 @@ import Select, { PortalSelect, SimpleSelect } from '.'
 import type { Item } from '.'
 
 const meta = {
-  title: 'Base/Select',
+  title: 'Base/Input/Select',
   component: SimpleSelect,
   parameters: {
     layout: 'centered',

web/app/components/base/slider/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Slider from '.'
 
 const meta = {
-  title: 'Base/Slider',
+  title: 'Base/Input/Slider',
   component: Slider,
   parameters: {
     layout: 'centered',

web/app/components/base/switch/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Switch from '.'
 
 const meta = {
-  title: 'Base/Switch',
+  title: 'Base/Input/Switch',
   component: Switch,
   parameters: {
     layout: 'centered',

web/app/components/base/tag-input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import TagInput from '.'
 
 const meta = {
-  title: 'Base/TagInput',
+  title: 'Base/Input/TagInput',
   component: TagInput,
   parameters: {
     layout: 'centered',

web/app/components/base/textarea/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Textarea from '.'
 
 const meta = {
-  title: 'Base/Textarea',
+  title: 'Base/Input/Textarea',
   component: Textarea,
   parameters: {
     layout: 'centered',

web/app/components/base/voice-input/index.stories.tsx

@@ -81,7 +81,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
 }
 
 const meta = {
-  title: 'Base/VoiceInput',
+  title: 'Base/Input/VoiceInput',
   component: VoiceInputMock,
   parameters: {
     layout: 'centered',

web/app/components/base/with-input-validation/index.stories.tsx

@@ -63,7 +63,7 @@ const ValidatedUserCard = withValidation(UserCard, userSchema)
 const ValidatedProductCard = withValidation(ProductCard, productSchema)
 
 const meta = {
-  title: 'Base/WithInputValidation',
+  title: 'Base/Input/WithInputValidation',
   parameters: {
     layout: 'centered',
     docs: {

web/app/components/workflow/hooks/use-checklist.ts

@@ -192,6 +192,8 @@ export const useChecklistBeforePublish = () => {
   const { getStartNodes } = useWorkflow()
   const workflowStore = useWorkflowStore()
   const { getNodesAvailableVarList } = useGetNodesAvailableVarList()
+  const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
+  const { data: rerankModelList } = useModelList(ModelTypeEnum.rerank)
 
   const getCheckData = useCallback((data: CommonNodeType<{}>, datasets: DataSet[]) => {
     let checkData = data
@@ -211,6 +213,13 @@ export const useChecklistBeforePublish = () => {
         _datasets,
       } as CommonNodeType<KnowledgeRetrievalNodeType>
     }
+    else if (data.type === BlockEnum.KnowledgeBase) {
+      checkData = {
+        ...data,
+        _embeddingModelList: embeddingModelList,
+        _rerankModelList: rerankModelList,
+      } as CommonNodeType<KnowledgeBaseNodeType>
+    }
     return checkData
   }, [])