diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 4adca38aa0..46277d3349 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -246,11 +246,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/app-access-control/add-member-or-group-pop.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/app-publisher/features-wrapper.tsx": {
     "ts/no-explicit-any": {
       "count": 4
diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md
index 9524394214..6eadd200f0 100644
--- a/packages/dify-ui/AGENTS.md
+++ b/packages/dify-ui/AGENTS.md
@@ -9,6 +9,7 @@ Shared design tokens, the `cn()` utility, CSS-first Tailwind styles, and headles
 - No imports from `web/`. No dependencies on next / i18next / ky / jotai / zustand.
 - One component per folder: `src/<name>/index.tsx`, optional `index.stories.tsx` and `__tests__/index.spec.tsx`. Add a matching `./<name>` subpath to `package.json#exports`.
 - Props pattern: `Omit<BaseXxx.Root.Props, 'className' | ...> & VariantProps<typeof xxxVariants> & { /* custom */ }`.
+- Use plain `Omit<...>` only for non-union Base UI props. When a prop changes the valid shape of related props (for example `value` / `defaultValue`, `multiple` / `value`, or `clearable` / `onChange`), model that relationship with an explicit discriminated union or a distributive helper instead of flattening the props.
 - When a component accepts a prop typed from a shared internal module, `export type` it from that component so consumers import it from the component subpath.
 
 ## Overlay Primitive Selection: Tooltip vs PreviewCard vs Popover
diff --git a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
index a3c63f5a0c..52c2a0dd54 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
@@ -254,9 +254,7 @@ describe('AddMemberOrGroupDialog', () => {
     await user.click(expandButton)
     expect(useAccessControlStore.getState().selectedGroupsForBreadcrumb).toEqual([baseGroup])
 
-    const memberLabel = screen.getByText(baseMember.name)
-    const memberCheckbox = memberLabel.parentElement?.previousElementSibling as HTMLElement
-    fireEvent.click(memberCheckbox)
+    await user.click(screen.getByRole('option', { name: /Member One/ }))
 
     expect(useAccessControlStore.getState().specificMembers).toEqual([baseMember])
   })
@@ -277,13 +275,13 @@ describe('AddMemberOrGroupDialog', () => {
     await user.type(screen.getByPlaceholderText('app.accessControlDialog.operateGroupAndMember.searchPlaceholder'), 'Group')
     expect(document.querySelector('.spin-animation')).toBeInTheDocument()
 
-    const groupCheckbox = screen.getByText(baseGroup.name).closest('div')?.previousElementSibling as HTMLElement
-    fireEvent.click(groupCheckbox)
-    fireEvent.click(groupCheckbox)
+    const groupOption = screen.getByRole('option', { name: /Group One/ })
+    fireEvent.click(groupOption)
+    fireEvent.click(groupOption)
 
-    const memberCheckbox = screen.getByText(baseMember.name).parentElement?.previousElementSibling as HTMLElement
-    fireEvent.click(memberCheckbox)
-    fireEvent.click(memberCheckbox)
+    const memberOption = screen.getByRole('option', { name: /Member One/ })
+    fireEvent.click(memberOption)
+    fireEvent.click(memberOption)
 
     fireEvent.click(screen.getByText('app.accessControlDialog.operateGroupAndMember.expand'))
     fireEvent.click(screen.getByText('app.accessControlDialog.operateGroupAndMember.allMembers'))
@@ -307,7 +305,7 @@ describe('AddMemberOrGroupDialog', () => {
 
     await user.click(screen.getByText('common.operation.add'))
 
-    expect(screen.getByText('app.accessControlDialog.operateGroupAndMember.noResult')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toHaveTextContent('app.accessControlDialog.operateGroupAndMember.noResult')
   })
 })
 
diff --git a/web/app/components/app/app-access-control/__tests__/add-member-or-group-pop.spec.tsx b/web/app/components/app/app-access-control/__tests__/add-member-or-group-pop.spec.tsx
index 725b121d30..d34756e85e 100644
--- a/web/app/components/app/app-access-control/__tests__/add-member-or-group-pop.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/add-member-or-group-pop.spec.tsx
@@ -1,5 +1,5 @@
 import type { AccessControlAccount, AccessControlGroup, Subject } from '@/models/access-control'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import useAccessControlStore from '@/context/access-control-store'
 import { SubjectType } from '@/models/access-control'
@@ -106,8 +106,7 @@ describe('AddMemberOrGroupDialog', () => {
 
     expect(useAccessControlStore.getState().selectedGroupsForBreadcrumb).toEqual([baseGroup])
 
-    const memberCheckbox = screen.getByText(baseMember.name).parentElement?.previousElementSibling as HTMLElement
-    fireEvent.click(memberCheckbox)
+    await user.click(screen.getByRole('option', { name: /Member One/ }))
 
     expect(useAccessControlStore.getState().specificMembers).toEqual([baseMember])
   })
@@ -125,6 +124,31 @@ describe('AddMemberOrGroupDialog', () => {
 
     await user.click(screen.getByText('common.operation.add'))
 
-    expect(screen.getByText('app.accessControlDialog.operateGroupAndMember.noResult')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toHaveTextContent('app.accessControlDialog.operateGroupAndMember.noResult')
+  })
+
+  it('should keep breadcrumbs visible when the current group has no candidates', async () => {
+    useAccessControlStore.setState({
+      selectedGroupsForBreadcrumb: [baseGroup],
+    })
+    mockUseSearchForWhiteListCandidates.mockReturnValue({
+      isLoading: false,
+      isFetchingNextPage: false,
+      fetchNextPage: vi.fn(),
+      data: { pages: [{ currPage: 1, subjects: [], hasMore: false }] },
+    })
+
+    const user = userEvent.setup()
+    render(<AddMemberOrGroupDialog />)
+
+    await user.click(screen.getByText('common.operation.add'))
+
+    expect(screen.getByRole('button', { name: 'app.accessControlDialog.operateGroupAndMember.allMembers' })).toBeInTheDocument()
+    expect(screen.getByText(baseGroup.name)).toBeInTheDocument()
+    expect(screen.getByRole('status')).toHaveTextContent('app.accessControlDialog.operateGroupAndMember.noResult')
+
+    await user.click(screen.getByRole('button', { name: 'app.accessControlDialog.operateGroupAndMember.allMembers' }))
+
+    expect(useAccessControlStore.getState().selectedGroupsForBreadcrumb).toEqual([])
   })
 })
diff --git 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
index 8d9bf19ea3..1e3a992136 100644
--- 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
@@ -1,110 +1,207 @@
 'use client'
+import type { ComboboxRootChangeEventDetails } from '@langgenius/dify-ui/combobox'
 import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
-import { FloatingOverlay } from '@floating-ui/react'
 import { Avatar } from '@langgenius/dify-ui/avatar'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemText,
+  ComboboxList,
+  ComboboxStatus,
+  ComboboxTrigger,
+} from '@langgenius/dify-ui/combobox'
 import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from '@/context/app-context'
 import { SubjectType } from '@/models/access-control'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
 import useAccessControlStore from '../../../../context/access-control-store'
-import Checkbox from '../../base/checkbox'
-import Input from '../../base/input'
 import Loading from '../../base/loading'
 
 export default function AddMemberOrGroupDialog() {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [keyword, setKeyword] = useState('')
+  const scrollRootRef = useRef<HTMLDivElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const specificGroups = useAccessControlStore(s => s.specificGroups)
+  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
+  const specificMembers = useAccessControlStore(s => s.specificMembers)
+  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
   const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
   const debouncedKeyword = useDebounce(keyword, { wait: 500 })
 
   const lastAvailableGroup = selectedGroupsForBreadcrumb[selectedGroupsForBreadcrumb.length - 1]
   const { isLoading, isFetchingNextPage, fetchNextPage, data } = useSearchForWhiteListCandidates({ keyword: debouncedKeyword, groupId: lastAvailableGroup?.id, resultsPerPage: 10 }, open)
-  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setKeyword(e.target.value)
-  }
+  const pages = data?.pages ?? []
+  const subjects = pages.flatMap(page => page.subjects ?? [])
+  const selectedSubjects = [
+    ...specificGroups.map(groupToSubject),
+    ...specificMembers.map(memberToSubject),
+  ]
+  const hasResults = pages.length > 0 && subjects.length > 0
+  const shouldShowBreadcrumb = hasResults || selectedGroupsForBreadcrumb.length > 0
+  const hasMore = pages[pages.length - 1]?.hasMore ?? false
 
-  const anchorRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
-    const hasMore = data?.pages?.[0]?.hasMore ?? false
     let observer: IntersectionObserver | undefined
     if (anchorRef.current) {
       observer = new IntersectionObserver((entries) => {
         if (entries[0]!.isIntersecting && !isLoading && hasMore)
           fetchNextPage()
-      }, { rootMargin: '20px' })
+      }, { root: scrollRootRef.current, rootMargin: '20px' })
       observer.observe(anchorRef.current)
     }
     return () => observer?.disconnect()
-  }, [isLoading, fetchNextPage, anchorRef, data])
+  }, [isLoading, fetchNextPage, hasMore])
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen)
+      setKeyword('')
+
+    setOpen(nextOpen)
+  }
+
+  const handleInputValueChange = (inputValue: string, details: ComboboxRootChangeEventDetails) => {
+    if (details.reason !== 'item-press')
+      setKeyword(inputValue)
+  }
+
+  const handleValueChange = (nextSubjects: Subject[]) => {
+    const nextGroups: AccessControlGroup[] = []
+    const nextMembers: AccessControlAccount[] = []
+
+    for (const subject of nextSubjects) {
+      if (subject.subjectType === SubjectType.GROUP)
+        nextGroups.push((subject as SubjectGroup).groupData)
+      else
+        nextMembers.push((subject as SubjectAccount).accountData)
+    }
+
+    setSpecificGroups(nextGroups)
+    setSpecificMembers(nextMembers)
+  }
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        render={(
-          <Button variant="ghost-accent" size="small" className="flex shrink-0 items-center gap-x-0.5">
-            <RiAddCircleFill className="h-4 w-4" />
-            <span>{t('operation.add', { ns: 'common' })}</span>
-          </Button>
-        )}
-      />
-      {open && <FloatingOverlay />}
-      <PopoverContent
+    <Combobox<Subject, true>
+      multiple
+      open={open}
+      value={selectedSubjects}
+      inputValue={keyword}
+      items={subjects}
+      itemToStringLabel={getSubjectLabel}
+      itemToStringValue={getSubjectValue}
+      isItemEqualToValue={isSameSubject}
+      filter={null}
+      onOpenChange={handleOpenChange}
+      onInputValueChange={handleInputValueChange}
+      onValueChange={handleValueChange}
+    >
+      <ComboboxTrigger
+        aria-label={t('operation.add', { ns: 'common' })}
+        icon={false}
+        size="small"
+        className="flex h-6 w-auto shrink-0 items-center gap-x-0.5 rounded-md border-0 bg-transparent px-2 py-0 text-xs font-medium text-components-button-secondary-accent-text hover:bg-state-accent-hover focus-visible:bg-state-accent-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid data-open:bg-state-accent-hover"
+      >
+        <RiAddCircleFill className="h-4 w-4" aria-hidden="true" />
+        <span>{t('operation.add', { ns: 'common' })}</span>
+      </ComboboxTrigger>
+      <ComboboxContent
         placement="bottom-end"
         alignOffset={300}
-        popupClassName="border-none bg-transparent shadow-none"
+        popupClassName="relative flex max-h-[400px] w-[400px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-0 shadow-lg backdrop-blur-[5px]"
       >
-        <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 ref={scrollRootRef} className="min-h-0 overflow-y-auto">
           <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('accessControlDialog.operateGroupAndMember.searchPlaceholder', { ns: 'app' }) as string} />
+            <ComboboxInputGroup className="h-8 min-h-8 px-2">
+              <span className="mr-0.5 i-ri-search-line size-4 shrink-0 text-text-tertiary" aria-hidden="true" />
+              <ComboboxInput
+                aria-label={t('accessControlDialog.operateGroupAndMember.searchPlaceholder', { ns: 'app' })}
+                placeholder={t('accessControlDialog.operateGroupAndMember.searchPlaceholder', { ns: 'app' })}
+                className="block h-4.5 grow px-1 py-0 text-[13px] text-text-primary"
+              />
+            </ComboboxInputGroup>
           </div>
-          {
-            isLoading
-              ? <div className="p-1"><Loading /></div>
-              : (data?.pages?.length ?? 0) > 0
-                  ? (
-                      <>
-                        <div className="flex h-7 items-center px-2 py-0.5">
-                          <SelectedGroupsBreadCrumb />
-                        </div>
-                        <div className="p-1">
-                          {renderGroupOrMember(data?.pages ?? [])}
+          {isLoading
+            ? (
+                <ComboboxStatus className="p-1">
+                  <Loading />
+                </ComboboxStatus>
+              )
+            : (
+                <>
+                  {shouldShowBreadcrumb && (
+                    <div className="flex h-7 items-center px-2 py-0.5">
+                      <SelectedGroupsBreadCrumb />
+                    </div>
+                  )}
+                  {hasResults
+                    ? (
+                        <>
+                          <ComboboxList className="max-h-none p-1">
+                            {(subject: Subject) => <SubjectItem key={getSubjectValue(subject)} subject={subject} />}
+                          </ComboboxList>
                           {isFetchingNextPage && <Loading />}
-                        </div>
-                        <div ref={anchorRef} className="h-0"> </div>
-                      </>
-                    )
-                  : (
-                      <div className="flex h-7 items-center justify-center px-2 py-0.5">
-                        <span className="system-xs-regular text-text-tertiary">{t('accessControlDialog.operateGroupAndMember.noResult', { ns: 'app' })}</span>
-                      </div>
-                    )
-          }
+                          <div ref={anchorRef} className="h-0" />
+                        </>
+                      )
+                    : (
+                        <ComboboxEmpty className="flex h-7 items-center justify-center px-2 py-0.5">
+                          {t('accessControlDialog.operateGroupAndMember.noResult', { ns: 'app' })}
+                        </ComboboxEmpty>
+                      )}
+                </>
+              )}
         </div>
-      </PopoverContent>
-    </Popover>
+      </ComboboxContent>
+    </Combobox>
   )
 }
 
-type GroupOrMemberData = { subjects: Subject[], currPage: number }[]
-function renderGroupOrMember(data: GroupOrMemberData) {
-  return data?.map((page) => {
-    return (
-      <div key={`search_group_member_page_${page.currPage}`}>
-        {page.subjects?.map((item, index) => {
-          if (item.subjectType === SubjectType.GROUP)
-            return <GroupItem key={index} group={(item as SubjectGroup).groupData} />
-          return <MemberItem key={index} member={(item as SubjectAccount).accountData} />
-        })}
-      </div>
-    )
-  }) ?? null
+function groupToSubject(group: AccessControlGroup): SubjectGroup {
+  return {
+    subjectId: group.id,
+    subjectType: SubjectType.GROUP,
+    groupData: group,
+  }
+}
+
+function memberToSubject(member: AccessControlAccount): SubjectAccount {
+  return {
+    subjectId: member.id,
+    subjectType: SubjectType.ACCOUNT,
+    accountData: member,
+  }
+}
+
+function getSubjectLabel(subject: Subject) {
+  if (subject.subjectType === SubjectType.GROUP)
+    return (subject as SubjectGroup).groupData.name
+
+  return (subject as SubjectAccount).accountData.name
+}
+
+function getSubjectValue(subject: Subject) {
+  return `${subject.subjectType}:${subject.subjectId}`
+}
+
+function isSameSubject(item: Subject, value: Subject) {
+  return item.subjectId === value.subjectId && item.subjectType === value.subjectType
+}
+
+function SubjectItem({ subject }: { subject: Subject }) {
+  if (subject.subjectType === SubjectType.GROUP)
+    return <GroupItem group={(subject as SubjectGroup).groupData} subject={subject} />
+
+  return <MemberItem member={(subject as SubjectAccount).accountData} subject={subject} />
 }
 
 function SelectedGroupsBreadCrumb() {
@@ -112,13 +209,13 @@ function SelectedGroupsBreadCrumb() {
   const setSelectedGroupsForBreadcrumb = useAccessControlStore(s => s.setSelectedGroupsForBreadcrumb)
   const { t } = useTranslation()
 
-  const handleBreadCrumbClick = useCallback((index: number) => {
+  const handleBreadCrumbClick = (index: number) => {
     const newGroups = selectedGroupsForBreadcrumb.slice(0, index + 1)
     setSelectedGroupsForBreadcrumb(newGroups)
-  }, [setSelectedGroupsForBreadcrumb, selectedGroupsForBreadcrumb])
-  const handleReset = useCallback(() => {
+  }
+  const handleReset = () => {
     setSelectedGroupsForBreadcrumb([])
-  }, [setSelectedGroupsForBreadcrumb])
+  }
   const hasBreadcrumb = selectedGroupsForBreadcrumb.length > 0
 
   return (
@@ -162,104 +259,111 @@ function SelectedGroupsBreadCrumb() {
 
 type GroupItemProps = {
   group: AccessControlGroup
+  subject: Subject
 }
-function GroupItem({ group }: GroupItemProps) {
+function GroupItem({ group, subject }: GroupItemProps) {
   const { t } = useTranslation()
   const specificGroups = useAccessControlStore(s => s.specificGroups)
-  const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
   const selectedGroupsForBreadcrumb = useAccessControlStore(s => s.selectedGroupsForBreadcrumb)
   const setSelectedGroupsForBreadcrumb = useAccessControlStore(s => s.setSelectedGroupsForBreadcrumb)
   const isChecked = specificGroups.some(g => g.id === group.id)
-  const handleCheckChange = useCallback(() => {
-    if (!isChecked) {
-      const newGroups = [...specificGroups, group]
-      setSpecificGroups(newGroups)
-    }
-    else {
-      const newGroups = specificGroups.filter(g => g.id !== group.id)
-      setSpecificGroups(newGroups)
-    }
-  }, [specificGroups, setSpecificGroups, group, isChecked])
 
-  const handleExpandClick = useCallback(() => {
+  const handleExpandClick = () => {
     setSelectedGroupsForBreadcrumb([...selectedGroupsForBreadcrumb, group])
-  }, [selectedGroupsForBreadcrumb, setSelectedGroupsForBreadcrumb, group])
+  }
+
   return (
-    <BaseItem>
-      <Checkbox checked={isChecked} className="h-4 w-4 shrink-0" onCheck={handleCheckChange} />
-      <div className="item-center flex grow">
-        <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-          <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
-            <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
+    <div className="flex items-center gap-2 rounded-lg hover:bg-state-base-hover">
+      <BaseItem subject={subject}>
+        <SelectionBox checked={isChecked} />
+        <ComboboxItemText className="flex grow items-center px-0">
+          <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+            <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
+              <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" aria-hidden="true" />
+            </div>
           </div>
-        </div>
-        <p className="mr-1 system-sm-medium text-text-secondary">{group.name}</p>
-        <p className="system-xs-regular text-text-tertiary">{group.groupSize}</p>
-      </div>
+          <span className="mr-1 system-sm-medium text-text-secondary">{group.name}</span>
+          <span className="system-xs-regular text-text-tertiary">{group.groupSize}</span>
+        </ComboboxItemText>
+      </BaseItem>
       <Button
         size="small"
         disabled={isChecked}
         variant="ghost-accent"
-        className="flex shrink-0 items-center justify-between px-1.5 py-1"
+        className="mr-1 flex shrink-0 items-center justify-between px-1.5 py-1"
+        onPointerDown={event => event.preventDefault()}
         onClick={handleExpandClick}
       >
         <span className="px-[3px]">{t('accessControlDialog.operateGroupAndMember.expand', { ns: 'app' })}</span>
-        <RiArrowRightSLine className="h-4 w-4" />
+        <RiArrowRightSLine className="h-4 w-4" aria-hidden="true" />
       </Button>
-    </BaseItem>
+    </div>
   )
 }
 
 type MemberItemProps = {
   member: AccessControlAccount
+  subject: Subject
 }
-function MemberItem({ member }: MemberItemProps) {
+function MemberItem({ member, subject }: MemberItemProps) {
   const currentUser = useSelector(s => s.userProfile)
   const { t } = useTranslation()
   const specificMembers = useAccessControlStore(s => s.specificMembers)
-  const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
   const isChecked = specificMembers.some(m => m.id === member.id)
-  const handleCheckChange = useCallback(() => {
-    if (!isChecked) {
-      const newMembers = [...specificMembers, member]
-      setSpecificMembers(newMembers)
-    }
-    else {
-      const newMembers = specificMembers.filter(m => m.id !== member.id)
-      setSpecificMembers(newMembers)
-    }
-  }, [specificMembers, setSpecificMembers, member, isChecked])
   return (
-    <BaseItem className="pr-3">
-      <Checkbox checked={isChecked} className="h-4 w-4 shrink-0" onCheck={handleCheckChange} />
-      <div className="flex grow items-center">
+    <BaseItem subject={subject} className="pr-3">
+      <SelectionBox checked={isChecked} />
+      <ComboboxItemText className="flex grow items-center px-0">
         <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
           <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
             <Avatar size="xxs" avatar={null} name={member.name} />
           </div>
         </div>
-        <p className="mr-1 system-sm-medium text-text-secondary">{member.name}</p>
+        <span className="mr-1 system-sm-medium text-text-secondary">{member.name}</span>
         {currentUser.email === member.email && (
-          <p className="system-xs-regular text-text-tertiary">
+          <span className="system-xs-regular text-text-tertiary">
             (
             {t('you', { ns: 'common' })}
             )
-          </p>
+          </span>
         )}
-      </div>
-      <p className="system-xs-regular text-text-quaternary">{member.email}</p>
+      </ComboboxItemText>
+      <span className="system-xs-regular text-text-quaternary">{member.email}</span>
     </BaseItem>
   )
 }
 
 type BaseItemProps = {
   className?: string
+  subject: Subject
   children: React.ReactNode
 }
-function BaseItem({ children, className }: BaseItemProps) {
+function BaseItem({ children, className, subject }: BaseItemProps) {
   return (
-    <div className={cn('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}>
+    <ComboboxItem
+      value={subject}
+      className={cn(
+        'mx-0 flex min-h-8 grow grid-cols-none items-center gap-2 rounded-lg p-1 pl-2',
+        className,
+      )}
+    >
       {children}
-    </div>
+    </ComboboxItem>
+  )
+}
+
+function SelectionBox({ checked }: { checked: boolean }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'flex size-4 shrink-0 items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3',
+        checked
+          ? 'bg-components-checkbox-bg text-components-checkbox-icon'
+          : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked',
+      )}
+    >
+      {checked && <span className="i-ri-check-line size-3" />}
+    </span>
   )
 }
diff --git a/web/app/components/datasets/common/document-picker/__tests__/document-list.spec.tsx b/web/app/components/datasets/common/document-picker/__tests__/document-list.spec.tsx
index 83063cedf5..fa21f71c9d 100644
--- a/web/app/components/datasets/common/document-picker/__tests__/document-list.spec.tsx
+++ b/web/app/components/datasets/common/document-picker/__tests__/document-list.spec.tsx
@@ -1,6 +1,8 @@
-import type { DocumentItem } from '@/models/datasets'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { SimpleDocumentDetail } from '@/models/datasets'
+import { Combobox } from '@langgenius/dify-ui/combobox'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ChunkingMode, DataSourceType } from '@/models/datasets'
 import DocumentList from '../document-list'
 
 vi.mock('../../document-file-icon', () => ({
@@ -13,37 +15,92 @@ vi.mock('../../document-file-icon', () => ({
   ),
 }))
 
+const createDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
+  id: 'doc-1',
+  batch: 'batch-1',
+  position: 1,
+  dataset_id: 'dataset-1',
+  data_source_type: DataSourceType.FILE,
+  data_source_info: {
+    upload_file: {
+      id: 'file-1',
+      name: 'report.pdf',
+      size: 1024,
+      extension: 'pdf',
+      mime_type: 'application/pdf',
+      created_by: 'user-1',
+      created_at: Date.now(),
+    },
+    job_id: 'job-1',
+    url: '',
+  },
+  dataset_process_rule_id: 'rule-1',
+  name: 'report',
+  created_from: 'web',
+  created_by: 'user-1',
+  created_at: Date.now(),
+  indexing_status: 'completed',
+  display_status: 'enabled',
+  doc_form: ChunkingMode.text,
+  doc_language: 'en',
+  enabled: true,
+  word_count: 1000,
+  archived: false,
+  updated_at: Date.now(),
+  hit_count: 0,
+  data_source_detail_dict: {
+    upload_file: {
+      name: 'report.pdf',
+      extension: 'pdf',
+    },
+  },
+  ...overrides,
+})
+
+const renderDocumentList = (list: SimpleDocumentDetail[], onValueChange = vi.fn()) => ({
+  onValueChange,
+  ...render(
+    <Combobox
+      open
+      items={list}
+      itemToStringLabel={document => document.name}
+      itemToStringValue={document => document.id}
+      onValueChange={onValueChange}
+    >
+      <DocumentList />
+    </Combobox>,
+  ),
+})
+
 describe('DocumentList', () => {
-  const mockList = [
-    { id: 'doc-1', name: 'report', extension: 'pdf' },
-    { id: 'doc-2', name: 'data', extension: 'csv' },
-  ] as DocumentItem[]
-
-  const onChange = vi.fn()
-
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  it('should render all documents', () => {
-    render(<DocumentList list={mockList} onChange={onChange} />)
-    expect(screen.getByText('report')).toBeInTheDocument()
-    expect(screen.getByText('data')).toBeInTheDocument()
-  })
+  it('should render documents as combobox options', () => {
+    renderDocumentList([
+      createDocument({ id: 'doc-1', name: 'report' }),
+      createDocument({ id: 'doc-2', name: 'data' }),
+    ])
 
-  it('should render file icons', () => {
-    render(<DocumentList list={mockList} onChange={onChange} />)
+    expect(screen.getByRole('option', { name: /report/ })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: /data/ })).toBeInTheDocument()
     expect(screen.getAllByTestId('file-icon')).toHaveLength(2)
   })
 
-  it('should call onChange with document on click', () => {
-    render(<DocumentList list={mockList} onChange={onChange} />)
-    fireEvent.click(screen.getByText('report'))
-    expect(onChange).toHaveBeenCalledWith(mockList[0])
+  it('should keep item spacing symmetric with the search field', () => {
+    renderDocumentList([createDocument({ id: 'doc-1', name: 'report' })])
+
+    expect(screen.getByRole('option', { name: /report/ })).toHaveClass('px-3')
   })
 
-  it('should render empty list without errors', () => {
-    const { container } = render(<DocumentList list={[]} onChange={onChange} />)
-    expect(container.firstChild).toBeInTheDocument()
+  it('should select a document through combobox value change', async () => {
+    const user = userEvent.setup()
+    const selectedDocument = createDocument({ id: 'doc-1', name: 'report' })
+    const { onValueChange } = renderDocumentList([selectedDocument])
+
+    await user.click(screen.getByRole('option', { name: /report/ }))
+
+    expect(onValueChange).toHaveBeenCalledWith(selectedDocument, expect.any(Object))
   })
 })
diff --git a/web/app/components/datasets/common/document-picker/__tests__/index.spec.tsx b/web/app/components/datasets/common/document-picker/__tests__/index.spec.tsx
index 1251eab9fb..a6c2078836 100644
--- a/web/app/components/datasets/common/document-picker/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/document-picker/__tests__/index.spec.tsx
@@ -1,33 +1,22 @@
-import type { ParentMode, SimpleDocumentDetail } from '@/models/datasets'
+import type { SimpleDocumentDetail } from '@/models/datasets'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { ChunkingMode, DataSourceType } from '@/models/datasets'
-import DocumentPicker from '../index'
+import { DocumentPicker } from '../index'
 
-vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
-
-// Mock useDocumentList hook with controllable return value
 let mockDocumentListData: { data: SimpleDocumentDetail[] } | undefined
-let mockDocumentListLoading = false
 
 const { mockUseDocumentList } = vi.hoisted(() => ({
   mockUseDocumentList: vi.fn(),
 }))
 
-// Set up the implementation after variables are defined
-mockUseDocumentList.mockImplementation(() => ({
-  data: mockDocumentListLoading ? undefined : mockDocumentListData,
-  isLoading: mockDocumentListLoading,
-}))
-
 vi.mock('@/service/knowledge/use-document', () => ({
   useDocumentList: mockUseDocumentList,
 }))
 
-// Factory function to create mock SimpleDocumentDetail
-const createMockDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
-  id: `doc-${Math.random().toString(36).substr(2, 9)}`,
+const createDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
+  id: 'doc-1',
   batch: 'batch-1',
   position: 1,
   dataset_id: 'dataset-1',
@@ -35,19 +24,18 @@ const createMockDocument = (overrides: Partial<SimpleDocumentDetail> = {}): Simp
   data_source_info: {
     upload_file: {
       id: 'file-1',
-      name: 'test-file.txt',
+      name: 'document.pdf',
       size: 1024,
-      extension: 'txt',
-      mime_type: 'text/plain',
+      extension: 'pdf',
+      mime_type: 'application/pdf',
       created_by: 'user-1',
       created_at: Date.now(),
     },
-    // Required fields for LegacyDataSourceInfo
     job_id: 'job-1',
     url: '',
   },
   dataset_process_rule_id: 'rule-1',
-  name: 'Test Document',
+  name: 'Document 1',
   created_from: 'web',
   created_by: 'user-1',
   created_at: Date.now(),
@@ -62,937 +50,146 @@ const createMockDocument = (overrides: Partial<SimpleDocumentDetail> = {}): Simp
   hit_count: 0,
   data_source_detail_dict: {
     upload_file: {
-      name: 'test-file.txt',
-      extension: 'txt',
+      name: 'document.pdf',
+      extension: 'pdf',
     },
   },
   ...overrides,
 })
 
-// Factory function to create multiple documents
-const createMockDocumentList = (count: number): SimpleDocumentDetail[] => {
-  return Array.from({ length: count }, (_, index) =>
-    createMockDocument({
-      id: `doc-${index + 1}`,
-      name: `Document ${index + 1}`,
-      data_source_detail_dict: {
-        upload_file: {
-          name: `document-${index + 1}.pdf`,
-          extension: 'pdf',
-        },
-      },
-    }))
-}
-
-// Factory function to create props
-const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => ({
+const createProps = (overrides: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => ({
   datasetId: 'dataset-1',
-  value: {
-    name: 'Test Document',
-    extension: 'txt',
-    chunkingMode: ChunkingMode.text,
-    parentMode: undefined as ParentMode | undefined,
-  },
+  value: createDocument({ id: 'doc-1', name: 'Document 1' }),
   onChange: vi.fn(),
   ...overrides,
 })
 
-// Create a new QueryClient for each test
-const createTestQueryClient = () =>
-  new QueryClient({
+const renderDocumentPicker = (props: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => {
+  const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         retry: false,
-        gcTime: 0,
-        staleTime: 0,
       },
     },
   })
-
-// Helper to render component with providers
-const renderComponent = (props: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => {
-  const queryClient = createTestQueryClient()
-  const defaultProps = createDefaultProps(props)
+  const defaultProps = createProps(props)
 
   return {
+    props: defaultProps,
     ...render(
       <QueryClientProvider client={queryClient}>
         <DocumentPicker {...defaultProps} />
       </QueryClientProvider>,
     ),
-    queryClient,
-    props: defaultProps,
   }
 }
 
-const openPopover = () => {
-  fireEvent.click(screen.getByTestId('popover-trigger'))
-}
-
 describe('DocumentPicker', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    // Reset mock state
-    mockDocumentListData = { data: createMockDocumentList(5) }
-    mockDocumentListLoading = false
+    mockDocumentListData = {
+      data: [
+        createDocument({ id: 'doc-1', name: 'Document 1' }),
+        createDocument({ id: 'doc-2', name: 'Document 2' }),
+      ],
+    }
+    mockUseDocumentList.mockImplementation(() => ({
+      data: mockDocumentListData,
+    }))
   })
 
-  // Tests for basic rendering
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      renderComponent()
-
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
+  it('should render the current document and chunking mode', () => {
+    renderDocumentPicker({
+      value: createDocument({
+        id: 'current-doc',
+        name: 'Current Document',
+        doc_form: ChunkingMode.parentChild,
+      }),
+      parentMode: 'paragraph',
     })
 
-    it('should render document name when provided', () => {
-      renderComponent({
-        value: {
-          name: 'My Document',
-          extension: 'pdf',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      expect(screen.getByText('My Document')).toBeInTheDocument()
-    })
-
-    it('should render placeholder when name is not provided', () => {
-      renderComponent({
-        value: {
-          name: undefined,
-          extension: 'pdf',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      expect(screen.getByText('--')).toBeInTheDocument()
-    })
-
-    it('should render general mode label', () => {
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      expect(screen.getByText('dataset.chunkingMode.general')).toBeInTheDocument()
-    })
-
-    it('should render QA mode label', () => {
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.qa,
-        },
-      })
-
-      expect(screen.getByText('dataset.chunkingMode.qa')).toBeInTheDocument()
-    })
-
-    it('should render parentChild mode label with paragraph parent mode', () => {
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.parentChild,
-          parentMode: 'paragraph',
-        },
-      })
-
-      expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
-      expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
-    })
-
-    it('should render parentChild mode label with full-doc parent mode', () => {
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.parentChild,
-          parentMode: 'full-doc',
-        },
-      })
-
-      expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
-      expect(screen.getByText(/dataset.parentMode.fullDoc/)).toBeInTheDocument()
-    })
-
-    it('should render placeholder for parentMode when not provided', () => {
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.parentChild,
-          parentMode: undefined,
-        },
-      })
-
-      // parentModeLabel should be '--' when parentMode is not provided
-      expect(screen.getByText(/--/)).toBeInTheDocument()
-    })
+    expect(screen.getByRole('combobox', { name: 'Current Document' })).toBeInTheDocument()
+    expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
+    expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
   })
 
-  // Tests for props handling
-  describe('Props', () => {
-    it('should accept required props', () => {
-      const onChange = vi.fn()
-      renderComponent({
-        datasetId: 'test-dataset',
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.text,
-        },
-        onChange,
-      })
+  it('should fetch documents with the current dataset and search keyword', async () => {
+    const user = userEvent.setup()
+    renderDocumentPicker({ datasetId: 'dataset-custom' })
 
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
+    await user.click(screen.getByRole('combobox', { name: 'Document 1' }))
+    await user.type(screen.getByPlaceholderText('common.operation.search'), 'report')
 
-    it('should handle value with all fields', () => {
-      renderComponent({
-        value: {
-          name: 'Full Document',
-          extension: 'docx',
-          chunkingMode: ChunkingMode.parentChild,
-          parentMode: 'paragraph',
-        },
-      })
-
-      expect(screen.getByText('Full Document')).toBeInTheDocument()
-    })
-
-    it('should handle value with minimal fields', () => {
-      renderComponent({
-        value: {
-          name: undefined,
-          extension: undefined,
-          chunkingMode: undefined,
-          parentMode: undefined,
-        },
-      })
-
-      expect(screen.getByText('--')).toBeInTheDocument()
-    })
-
-    it('should pass datasetId to mockUseDocumentList hook', () => {
-      renderComponent({ datasetId: 'custom-dataset-id' })
-
-      expect(mockUseDocumentList).toHaveBeenCalledWith(
-        expect.objectContaining({
-          datasetId: 'custom-dataset-id',
-        }),
-      )
-    })
-  })
-
-  // Tests for state management and updates
-  describe('State Management', () => {
-    it('should initialize with popup closed', () => {
-      renderComponent()
-
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-
-    it('should open popup when trigger is clicked', () => {
-      renderComponent()
-
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      // Verify click handler is called
-      expect(trigger).toBeInTheDocument()
-    })
-
-    it('should maintain search query state', async () => {
-      renderComponent()
-
-      // Initial call should have empty keyword
-      expect(mockUseDocumentList).toHaveBeenCalledWith(
-        expect.objectContaining({
-          query: expect.objectContaining({
-            keyword: '',
-          }),
-        }),
-      )
-    })
-
-    it('should update query when search input changes', () => {
-      renderComponent()
-
-      // Verify the component uses mockUseDocumentList with query parameter
-
-      expect(mockUseDocumentList).toHaveBeenCalledWith(
-        expect.objectContaining({
-          query: expect.objectContaining({
-            keyword: '',
-          }),
-        }),
-      )
-    })
-  })
-
-  // Tests for callback stability and memoization
-  describe('Callback Stability', () => {
-    it('should maintain stable onChange callback when value changes', () => {
-      const onChange = vi.fn()
-      const value1 = {
-        name: 'Doc 1',
-        extension: 'txt',
-        chunkingMode: ChunkingMode.text,
-      }
-      const value2 = {
-        name: 'Doc 2',
-        extension: 'pdf',
-        chunkingMode: ChunkingMode.text,
-      }
-
-      const queryClient = createTestQueryClient()
-      const { rerender } = render(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="dataset-1"
-            value={value1}
-            onChange={onChange}
-          />
-        </QueryClientProvider>,
-      )
-
-      rerender(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="dataset-1"
-            value={value2}
-            onChange={onChange}
-          />
-        </QueryClientProvider>,
-      )
-
-      // Component should still render correctly after rerender
-      expect(screen.getByText('Doc 2')).toBeInTheDocument()
-    })
-
-    it('should use updated onChange callback after rerender', () => {
-      const onChange1 = vi.fn()
-      const onChange2 = vi.fn()
-      const value = {
-        name: 'Test Doc',
-        extension: 'txt',
-        chunkingMode: ChunkingMode.text,
-      }
-
-      const queryClient = createTestQueryClient()
-      const { rerender } = render(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="dataset-1"
-            value={value}
-            onChange={onChange1}
-          />
-        </QueryClientProvider>,
-      )
-
-      rerender(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="dataset-1"
-            value={value}
-            onChange={onChange2}
-          />
-        </QueryClientProvider>,
-      )
-
-      // The component should use the new callback
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should memoize handleChange callback with useCallback', () => {
-      // The handleChange callback is created with useCallback and depends on
-      // documentsList, onChange, and setOpen
-      const onChange = vi.fn()
-      renderComponent({ onChange })
-
-      // Verify component renders correctly, callback memoization is internal
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-  })
-
-  // Tests for memoization logic and dependencies
-  describe('Memoization Logic', () => {
-    it('should be wrapped with React.memo', () => {
-      // React.memo components have a $$typeof property
-      expect((DocumentPicker as unknown as { $$typeof: symbol }).$$typeof).toBeDefined()
-    })
-
-    it('should compute parentModeLabel correctly with useMemo', () => {
-      // Test paragraph mode
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.parentChild,
-          parentMode: 'paragraph',
-        },
-      })
-
-      expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
-    })
-
-    it('should update parentModeLabel when parentMode changes', () => {
-      // Test full-doc mode
-      renderComponent({
-        value: {
-          name: 'Test',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.parentChild,
-          parentMode: 'full-doc',
-        },
-      })
-
-      expect(screen.getByText(/dataset.parentMode.fullDoc/)).toBeInTheDocument()
-    })
-
-    it('should not re-render when props are the same', () => {
-      const onChange = vi.fn()
-      const value = {
-        name: 'Stable Doc',
-        extension: 'txt',
-        chunkingMode: ChunkingMode.text,
-      }
-
-      const queryClient = createTestQueryClient()
-      const { rerender } = render(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="dataset-1"
-            value={value}
-            onChange={onChange}
-          />
-        </QueryClientProvider>,
-      )
-
-      // Rerender with same props reference
-      rerender(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="dataset-1"
-            value={value}
-            onChange={onChange}
-          />
-        </QueryClientProvider>,
-      )
-
-      expect(screen.getByText('Stable Doc')).toBeInTheDocument()
-    })
-  })
-
-  // Tests for user interactions and event handlers
-  describe('User Interactions', () => {
-    it('should toggle popup when trigger is clicked', () => {
-      renderComponent()
-
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      // Trigger click should be handled
-      expect(trigger).toBeInTheDocument()
-    })
-
-    it('should handle document selection when popup is open', () => {
-      // Test the handleChange callback logic
-      const onChange = vi.fn()
-      const mockDocs = createMockDocumentList(3)
-      mockDocumentListData = { data: mockDocs }
-
-      renderComponent({ onChange })
-
-      // The handleChange callback should find the document and call onChange
-      // We can verify this by checking that mockUseDocumentList was called
-
-      expect(mockUseDocumentList).toHaveBeenCalled()
-    })
-
-    it('should handle search input change', () => {
-      renderComponent()
-
-      // The search input is only visible when popup is open
-      // We verify that the component initializes with empty query
-
-      expect(mockUseDocumentList).toHaveBeenCalledWith(
-        expect.objectContaining({
-          query: expect.objectContaining({
-            keyword: '',
-          }),
-        }),
-      )
-    })
-
-    it('should initialize with default query parameters', () => {
-      renderComponent()
-
-      expect(mockUseDocumentList).toHaveBeenCalledWith(
-        expect.objectContaining({
-          query: {
-            keyword: '',
-            page: 1,
-            limit: 20,
-          },
-        }),
-      )
-    })
-  })
-
-  // Tests for API calls
-  describe('API Calls', () => {
-    it('should call mockUseDocumentList with correct parameters', () => {
-      renderComponent({ datasetId: 'test-dataset-123' })
-
-      expect(mockUseDocumentList).toHaveBeenCalledWith({
-        datasetId: 'test-dataset-123',
+    await waitFor(() => {
+      expect(mockUseDocumentList).toHaveBeenLastCalledWith({
+        datasetId: 'dataset-custom',
         query: {
-          keyword: '',
+          keyword: 'report',
           page: 1,
           limit: 20,
         },
       })
     })
-
-    it('should handle loading state', () => {
-      mockDocumentListLoading = true
-      mockDocumentListData = undefined
-
-      renderComponent()
-
-      // When loading, component should still render without crashing
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should fetch documents on mount', () => {
-      mockDocumentListLoading = false
-      mockDocumentListData = { data: createMockDocumentList(3) }
-
-      renderComponent()
-
-      // Verify the hook was called
-
-      expect(mockUseDocumentList).toHaveBeenCalled()
-    })
-
-    it('should handle empty document list', () => {
-      mockDocumentListData = { data: [] }
-
-      renderComponent()
-
-      // Component should render without crashing
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should handle undefined data response', () => {
-      mockDocumentListData = undefined
-
-      renderComponent()
-
-      // Should not crash
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
   })
 
-  // Tests for component memoization
-  describe('Component Memoization', () => {
-    it('should export as React.memo wrapped component', () => {
-      // Check that the component is memoized
-      expect(DocumentPicker).toBeDefined()
-      expect(typeof DocumentPicker).toBe('object') // React.memo returns an object
-    })
+  it('should keep focus in the search input while deleting quickly', async () => {
+    const user = userEvent.setup()
+    renderDocumentPicker()
 
-    it('should preserve render output when datasetId is the same', () => {
-      const queryClient = createTestQueryClient()
-      const value = {
-        name: 'Memo Test',
-        extension: 'txt',
-        chunkingMode: ChunkingMode.text,
-      }
-      const onChange = vi.fn()
+    const trigger = screen.getByRole('combobox', { name: 'Document 1' })
+    await user.click(trigger)
 
-      const { rerender } = render(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="same-dataset"
-            value={value}
-            onChange={onChange}
-          />
-        </QueryClientProvider>,
-      )
+    const searchInput = screen.getByPlaceholderText('common.operation.search')
+    await user.type(searchInput, 'report')
+    await user.keyboard('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}')
 
-      expect(screen.getByText('Memo Test')).toBeInTheDocument()
-
-      rerender(
-        <QueryClientProvider client={queryClient}>
-          <DocumentPicker
-            datasetId="same-dataset"
-            value={value}
-            onChange={onChange}
-          />
-        </QueryClientProvider>,
-      )
-
-      expect(screen.getByText('Memo Test')).toBeInTheDocument()
-    })
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    expect(searchInput).toHaveFocus()
+    expect(trigger).not.toHaveFocus()
   })
 
-  // Tests for edge cases and error handling
-  describe('Edge Cases', () => {
-    it('should handle null name', () => {
-      renderComponent({
-        value: {
-          name: undefined,
-          extension: 'txt',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
+  it('should keep focus in the search input while typing quickly', async () => {
+    const user = userEvent.setup()
+    renderDocumentPicker()
 
-      expect(screen.getByText('--')).toBeInTheDocument()
-    })
+    const trigger = screen.getByRole('combobox', { name: 'Document 1' })
+    await user.click(trigger)
 
-    it('should handle empty string name', () => {
-      renderComponent({
-        value: {
-          name: '',
-          extension: 'txt',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
+    const searchInput = screen.getByPlaceholderText('common.operation.search')
+    await user.keyboard('quarterly-report-final')
 
-      // Empty string is falsy, so should show '--'
-      expect(screen.queryByText('--')).toBeInTheDocument()
-    })
-
-    it('should handle undefined extension', () => {
-      renderComponent({
-        value: {
-          name: 'Test Doc',
-          extension: undefined,
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      // Should not crash
-      expect(screen.getByText('Test Doc')).toBeInTheDocument()
-    })
-
-    it('should handle undefined chunkingMode', () => {
-      renderComponent({
-        value: {
-          name: 'Test Doc',
-          extension: 'txt',
-          chunkingMode: undefined,
-        },
-      })
-
-      // When chunkingMode is undefined, none of the mode conditions are true
-      expect(screen.getByText('Test Doc')).toBeInTheDocument()
-    })
-
-    it('should handle document without data_source_detail_dict', () => {
-      const docWithoutDetail = createMockDocument({
-        id: 'doc-no-detail',
-        name: 'Doc Without Detail',
-        data_source_detail_dict: undefined,
-      })
-      mockDocumentListData = { data: [docWithoutDetail] }
-
-      // Component should handle mapping documents even without data_source_detail_dict
-      renderComponent()
-
-      // Should not crash
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should handle rapid toggle clicks', () => {
-      renderComponent()
-
-      const trigger = screen.getByTestId('popover-trigger')
-
-      // Rapid clicks
-      fireEvent.click(trigger)
-      fireEvent.click(trigger)
-      fireEvent.click(trigger)
-      fireEvent.click(trigger)
-
-      // Should not crash
-      expect(trigger).toBeInTheDocument()
-    })
-
-    it('should handle very long document names in trigger', () => {
-      const longName = 'A'.repeat(500)
-      renderComponent({
-        value: {
-          name: longName,
-          extension: 'txt',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      // Should render long name without crashing
-      expect(screen.getByText(longName)).toBeInTheDocument()
-    })
-
-    it('should handle special characters in document name', () => {
-      const specialName = '<script>alert("xss")</script>'
-      renderComponent({
-        value: {
-          name: specialName,
-          extension: 'txt',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      // React should escape the text
-      expect(screen.getByText(specialName)).toBeInTheDocument()
-    })
-
-    it('should handle documents with missing extension in data_source_detail_dict', () => {
-      const docWithEmptyExtension = createMockDocument({
-        id: 'doc-empty-ext',
-        name: 'Doc Empty Ext',
-        data_source_detail_dict: {
-          upload_file: {
-            name: 'file-no-ext',
-            extension: '',
-          },
-        },
-      })
-      mockDocumentListData = { data: [docWithEmptyExtension] }
-
-      // Component should handle mapping documents with empty extension
-      renderComponent()
-
-      // Should not crash
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should handle document list mapping with various data_source_detail_dict states', () => {
-      // Test the mapping logic: d.data_source_detail_dict?.upload_file?.extension || ''
-      const docs = [
-        createMockDocument({
-          id: 'doc-1',
-          name: 'With Extension',
-          data_source_detail_dict: {
-            upload_file: { name: 'file.pdf', extension: 'pdf' },
-          },
-        }),
-        createMockDocument({
-          id: 'doc-2',
-          name: 'Without Detail Dict',
-          data_source_detail_dict: undefined,
-        }),
-      ]
-      mockDocumentListData = { data: docs }
-
-      renderComponent()
-
-      // Should not crash during mapping
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    expect(searchInput).toHaveFocus()
+    expect(trigger).not.toHaveFocus()
   })
 
-  // Tests for all prop variations
-  describe('Prop Variations', () => {
-    describe('datasetId variations', () => {
-      it('should handle empty datasetId', () => {
-        renderComponent({ datasetId: '' })
+  it('should call onChange with the selected document', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    const selectedDocument = createDocument({ id: 'doc-2', name: 'Document 2' })
+    mockDocumentListData = {
+      data: [
+        createDocument({ id: 'doc-1', name: 'Document 1' }),
+        selectedDocument,
+      ],
+    }
 
-        expect(screen.getByTestId('popover')).toBeInTheDocument()
-      })
+    renderDocumentPicker({ onChange })
 
-      it('should handle UUID format datasetId', () => {
-        renderComponent({ datasetId: '123e4567-e89b-12d3-a456-426614174000' })
+    await user.click(screen.getByRole('combobox', { name: 'Document 1' }))
+    await user.click(await screen.findByRole('option', { name: /Document 2/ }))
 
-        expect(screen.getByTestId('popover')).toBeInTheDocument()
-      })
-    })
-
-    describe('value.chunkingMode variations', () => {
-      const chunkingModes = [
-        { mode: ChunkingMode.text, label: 'dataset.chunkingMode.general' },
-        { mode: ChunkingMode.qa, label: 'dataset.chunkingMode.qa' },
-        { mode: ChunkingMode.parentChild, label: 'dataset.chunkingMode.parentChild' },
-      ]
-
-      it.each(chunkingModes)(
-        'should display correct label for $mode mode',
-        ({ mode, label }) => {
-          renderComponent({
-            value: {
-              name: 'Test',
-              extension: 'txt',
-              chunkingMode: mode,
-              parentMode: mode === ChunkingMode.parentChild ? 'paragraph' : undefined,
-            },
-          })
-
-          expect(screen.getByText(new RegExp(label))).toBeInTheDocument()
-        },
-      )
-    })
-
-    describe('value.parentMode variations', () => {
-      const parentModes: Array<{ mode: ParentMode, label: string }> = [
-        { mode: 'paragraph', label: 'dataset.parentMode.paragraph' },
-        { mode: 'full-doc', label: 'dataset.parentMode.fullDoc' },
-      ]
-
-      it.each(parentModes)(
-        'should display correct label for $mode parentMode',
-        ({ mode, label }) => {
-          renderComponent({
-            value: {
-              name: 'Test',
-              extension: 'txt',
-              chunkingMode: ChunkingMode.parentChild,
-              parentMode: mode,
-            },
-          })
-
-          expect(screen.getByText(new RegExp(label))).toBeInTheDocument()
-        },
-      )
-    })
-
-    describe('value.extension variations', () => {
-      const extensions = ['txt', 'pdf', 'docx', 'xlsx', 'csv', 'md', 'html']
-
-      it.each(extensions)('should handle %s extension', (ext) => {
-        renderComponent({
-          value: {
-            name: `File.${ext}`,
-            extension: ext,
-            chunkingMode: ChunkingMode.text,
-          },
-        })
-
-        expect(screen.getByText(`File.${ext}`)).toBeInTheDocument()
-      })
-    })
+    expect(onChange).toHaveBeenCalledWith(selectedDocument)
   })
 
-  // Tests for document selection
-  describe('Document Selection', () => {
-    it('should fetch documents list via mockUseDocumentList', () => {
-      const mockDoc = createMockDocument({
-        id: 'selected-doc',
-        name: 'Selected Document',
-      })
-      mockDocumentListData = { data: [mockDoc] }
-      const onChange = vi.fn()
+  it('should show an empty state when no documents match', async () => {
+    const user = userEvent.setup()
+    mockDocumentListData = { data: [] }
 
-      renderComponent({ onChange })
+    renderDocumentPicker()
 
-      // Verify the hook was called
+    await user.click(screen.getByRole('combobox', { name: 'Document 1' }))
 
-      expect(mockUseDocumentList).toHaveBeenCalled()
-    })
-
-    it('should call onChange when document is selected', () => {
-      const docs = createMockDocumentList(3)
-      mockDocumentListData = { data: docs }
-      const onChange = vi.fn()
-
-      renderComponent({ onChange })
-      openPopover()
-
-      fireEvent.click(screen.getByText('Document 2'))
-
-      // handleChange should find the document and call onChange with full document
-      expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenCalledWith(docs[1])
-    })
-
-    it('should map document list items correctly', () => {
-      const docs = createMockDocumentList(3)
-      mockDocumentListData = { data: docs }
-
-      renderComponent()
-      openPopover()
-
-      // Documents should be rendered in the list
-      expect(screen.getByText('Document 1')).toBeInTheDocument()
-      expect(screen.getByText('Document 2')).toBeInTheDocument()
-      expect(screen.getByText('Document 3')).toBeInTheDocument()
-    })
-  })
-
-  // Tests for integration with child components
-  describe('Child Component Integration', () => {
-    it('should pass correct data to DocumentList when popup is open', () => {
-      const docs = createMockDocumentList(3)
-      mockDocumentListData = { data: docs }
-
-      renderComponent()
-
-      // DocumentList receives mapped documents: { id, name, extension }
-      // We verify the data is fetched
-
-      expect(mockUseDocumentList).toHaveBeenCalled()
-    })
-
-    it('should map document data_source_detail_dict extension correctly', () => {
-      const doc = createMockDocument({
-        id: 'mapped-doc',
-        name: 'Mapped Document',
-        data_source_detail_dict: {
-          upload_file: {
-            name: 'mapped.pdf',
-            extension: 'pdf',
-          },
-        },
-      })
-      mockDocumentListData = { data: [doc] }
-
-      renderComponent()
-
-      // The mapping: d.data_source_detail_dict?.upload_file?.extension || ''
-      // Should extract 'pdf' from the document
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should render trigger with SearchInput integration', () => {
-      renderComponent()
-
-      // The trigger is always rendered
-      expect(screen.getByTestId('popover-trigger')).toBeInTheDocument()
-    })
-
-    it('should integrate FileIcon component', () => {
-      // Use empty document list to avoid duplicate icons from list
-      mockDocumentListData = { data: [] }
-
-      renderComponent({
-        value: {
-          name: 'test.pdf',
-          extension: 'pdf',
-          chunkingMode: ChunkingMode.text,
-        },
-      })
-
-      // FileIcon should render an SVG icon for the file extension
-      const trigger = screen.getByTestId('popover-trigger')
-      expect(trigger.querySelector('svg')).toBeInTheDocument()
-    })
-  })
-
-  // Tests for visual states
-  describe('Visual States', () => {
-    it('should render portal content for document selection', () => {
-      renderComponent()
-      openPopover()
-
-      // Popover content is rendered after opening the trigger in our mock
-      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
-    })
+    expect(await screen.findByRole('status')).toHaveTextContent('common.noData')
   })
 })
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index d2d8d1966c..366e744cbd 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -1,43 +1,49 @@
 'use client'
-import type { FC } from 'react'
-import type { DocumentItem } from '@/models/datasets'
+import type { SimpleDocumentDetail } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback } from 'react'
+import {
+  ComboboxItem,
+  ComboboxItemText,
+  ComboboxList,
+} from '@langgenius/dify-ui/combobox'
 import FileIcon from '../document-file-icon'
 
 type Props = {
   className?: string
-  list: DocumentItem[]
-  onChange: (value: DocumentItem) => void
 }
 
-const DocumentList: FC<Props> = ({
-  className,
-  list,
-  onChange,
-}) => {
-  const handleChange = useCallback((item: DocumentItem) => {
-    return () => onChange(item)
-  }, [onChange])
+function getDocumentExtension(document: SimpleDocumentDetail) {
+  const detailExtension = document.data_source_detail_dict?.upload_file?.extension
+  if (detailExtension)
+    return detailExtension
 
+  const dataSourceInfo = document.data_source_info
+  if (dataSourceInfo && 'upload_file' in dataSourceInfo)
+    return dataSourceInfo.upload_file.extension
+
+  return ''
+}
+
+export default function DocumentList({
+  className,
+}: Props) {
   return (
-    <div className={cn('max-h-[calc(100vh-120px)] overflow-auto', className)}>
-      {list.map((item) => {
-        const { id, name, extension } = item
+    <ComboboxList className={cn('max-h-[calc(100vh-120px)] p-0', className)}>
+      {(item: SimpleDocumentDetail) => {
+        const extension = getDocumentExtension(item)
         return (
-          <div
-            key={id}
-            className="flex h-8 cursor-pointer items-center space-x-2 rounded-lg px-2 hover:bg-state-base-hover"
-            onClick={handleChange(item)}
+          <ComboboxItem
+            key={item.id}
+            value={item}
+            className="mx-0 flex h-8 grid-cols-none items-center gap-2 rounded-lg px-3 py-0"
           >
             <FileIcon name={item.name} extension={extension} size="lg" />
-            <div className="truncate text-sm text-text-secondary">{name}</div>
-          </div>
+            <ComboboxItemText className="min-w-0 px-0 system-sm-regular text-text-secondary">
+              {item.name}
+            </ComboboxItemText>
+          </ComboboxItem>
         )
-      })}
-    </div>
+      }}
+    </ComboboxList>
   )
 }
-
-export default React.memo(DocumentList)
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 0566b590de..07f7443764 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -1,20 +1,22 @@
 'use client'
-import type { FC } from 'react'
-import type { DocumentItem, ParentMode, SimpleDocumentDetail } from '@/models/datasets'
+import type { ComboboxRootChangeEventDetails } from '@langgenius/dify-ui/combobox'
+import type { ParentMode, SimpleDocumentDetail } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@langgenius/dify-ui/popover'
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxStatus,
+  ComboboxTrigger,
+  ComboboxValue,
+} from '@langgenius/dify-ui/combobox'
 import { RiArrowDownSLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
-import * as React from 'react'
-import { useCallback, useMemo, useState } from 'react'
+import { useDeferredValue, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 import Loading from '@/app/components/base/loading'
-import SearchInput from '@/app/components/base/search-input'
 import { ChunkingMode } from '@/models/datasets'
 import { useDocumentList } from '@/service/knowledge/use-document'
 import FileIcon from '../document-file-icon'
@@ -22,116 +24,177 @@ import DocumentList from './document-list'
 
 type Props = {
   datasetId: string
-  value: {
-    name?: string
-    extension?: string
-    chunkingMode?: ChunkingMode
-    parentMode?: ParentMode
-  }
+  value?: SimpleDocumentDetail | null
+  parentMode?: ParentMode
   onChange: (value: SimpleDocumentDetail) => void
 }
 
-const DocumentPicker: FC<Props> = ({
+function getDocumentLabel(document: SimpleDocumentDetail) {
+  return document.name
+}
+
+function getDocumentValue(document: SimpleDocumentDetail) {
+  return document.id
+}
+
+function isSameDocument(item: SimpleDocumentDetail, value: SimpleDocumentDetail) {
+  return item.id === value.id
+}
+
+function getDocumentExtension(document?: SimpleDocumentDetail | null) {
+  if (!document)
+    return ''
+
+  const detailExtension = document.data_source_detail_dict?.upload_file?.extension
+  if (detailExtension)
+    return detailExtension
+
+  const dataSourceInfo = document.data_source_info
+  if (dataSourceInfo && 'upload_file' in dataSourceInfo)
+    return dataSourceInfo.upload_file.extension
+
+  return ''
+}
+
+function DocumentPickerTriggerValue({
+  document,
+  parentMode,
+}: {
+  document?: SimpleDocumentDetail | null
+  parentMode?: ParentMode
+}) {
+  const { t } = useTranslation()
+  const isGeneralMode = document?.doc_form === ChunkingMode.text
+  const isParentChild = document?.doc_form === ChunkingMode.parentChild
+  const isQAMode = document?.doc_form === ChunkingMode.qa
+  const TypeIcon = isParentChild ? ParentChildChunk : GeneralChunk
+  const ArrowIcon = RiArrowDownSLine
+  const parentModeLabel = (() => {
+    if (!parentMode)
+      return '--'
+    return parentMode === 'paragraph' ? t('parentMode.paragraph', { ns: 'dataset' }) : t('parentMode.fullDoc', { ns: 'dataset' })
+  })()
+
+  return (
+    <span className="flex min-w-0 items-center gap-1.5">
+      <FileIcon name={document?.name} extension={getDocumentExtension(document)} size="xl" />
+      <span className="flex min-w-0 flex-col items-start">
+        <span className="flex max-w-full min-w-0 items-center gap-1">
+          <span className="max-w-[280px] min-w-0 truncate system-md-semibold text-text-primary">
+            {document?.name || '--'}
+          </span>
+          <ArrowIcon className="h-4 w-4 shrink-0 text-text-primary" aria-hidden="true" />
+        </span>
+        <span className="flex h-3 max-w-[300px] items-center gap-0.5 text-text-tertiary">
+          <TypeIcon className="h-3 w-3 shrink-0" />
+          <span className={cn('truncate system-2xs-medium-uppercase', isParentChild && 'mt-0.5')}>
+            {isGeneralMode && t('chunkingMode.general', { ns: 'dataset' })}
+            {isQAMode && t('chunkingMode.qa', { ns: 'dataset' })}
+            {isParentChild && `${t('chunkingMode.parentChild', { ns: 'dataset' })} · ${parentModeLabel}`}
+          </span>
+        </span>
+      </span>
+    </span>
+  )
+}
+
+export function DocumentPicker({
   datasetId,
   value,
+  parentMode,
   onChange,
-}) => {
+}: Props) {
   const { t } = useTranslation()
-  const {
-    name,
-    extension,
-    chunkingMode,
-    parentMode,
-  } = value
-  const [query, setQuery] = useState('')
+  const [searchValue, setSearchValue] = useState('')
+  const deferredSearchValue = useDeferredValue(searchValue)
 
   const { data } = useDocumentList({
     datasetId,
     query: {
-      keyword: query,
+      keyword: deferredSearchValue,
       page: 1,
       limit: 20,
     },
   })
-  const documentsList = data?.data
-  const isGeneralMode = chunkingMode === ChunkingMode.text
-  const isParentChild = chunkingMode === ChunkingMode.parentChild
-  const isQAMode = chunkingMode === ChunkingMode.qa
-  const TypeIcon = isParentChild ? ParentChildChunk : GeneralChunk
+  const documentsList = data?.data ?? []
 
-  const [open, {
-    set: setOpen,
-  }] = useBoolean(false)
-  const ArrowIcon = RiArrowDownSLine
+  const handleInputValueChange = (inputValue: string, details: ComboboxRootChangeEventDetails) => {
+    if (details.reason !== 'item-press')
+      setSearchValue(inputValue)
+  }
 
-  const handleChange = useCallback(({ id }: DocumentItem) => {
-    onChange(documentsList?.find(item => item.id === id) as SimpleDocumentDetail)
-    setOpen(false)
-  }, [documentsList, onChange, setOpen])
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen)
+      setSearchValue('')
+  }
 
-  const parentModeLabel = useMemo(() => {
-    if (!parentMode)
-      return '--'
-    return parentMode === 'paragraph' ? t('parentMode.paragraph', { ns: 'dataset' }) : t('parentMode.fullDoc', { ns: 'dataset' })
-  }, [parentMode, t])
+  const handleDocumentChange = (document: SimpleDocumentDetail | null) => {
+    if (!document)
+      return
+
+    onChange(document)
+    setSearchValue('')
+  }
 
   return (
-    <Popover
-      open={open}
-      onOpenChange={setOpen}
+    <Combobox<SimpleDocumentDetail>
+      items={documentsList}
+      value={value ?? null}
+      inputValue={searchValue}
+      onOpenChange={handleOpenChange}
+      onInputValueChange={handleInputValueChange}
+      onValueChange={handleDocumentChange}
+      isItemEqualToValue={isSameDocument}
+      itemToStringLabel={getDocumentLabel}
+      itemToStringValue={getDocumentValue}
+      filter={null}
     >
-      <PopoverTrigger
-        nativeButton={false}
-        render={(
-          <div className={cn('ml-1 flex cursor-pointer items-center rounded-lg px-2 py-0.5 select-none hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
-            <FileIcon name={name} extension={extension} size="xl" />
-            <div className="mr-0.5 ml-1 flex flex-col items-start">
-              <div className="flex items-center space-x-0.5">
-                <span className={cn('system-md-semibold text-text-primary')}>
-                  {' '}
-                  {name || '--'}
-                </span>
-                <ArrowIcon className="h-4 w-4 text-text-primary" />
-              </div>
-              <div className="flex h-3 items-center space-x-0.5 text-text-tertiary">
-                <TypeIcon className="h-3 w-3" />
-                <span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
-                  {isGeneralMode && t('chunkingMode.general', { ns: 'dataset' })}
-                  {isQAMode && t('chunkingMode.qa', { ns: 'dataset' })}
-                  {isParentChild && `${t('chunkingMode.parentChild', { ns: 'dataset' })} · ${parentModeLabel}`}
-                </span>
-              </div>
-            </div>
-          </div>
+      <ComboboxTrigger
+        aria-label={value?.name || t('operation.search', { ns: 'common' })}
+        icon={false}
+        className={cn(
+          'ml-1 flex h-auto w-auto rounded-lg border-0 bg-transparent px-2 py-1 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active data-open:bg-state-base-hover',
         )}
-      />
-      <PopoverContent
+      >
+        <ComboboxValue>
+          {(document: SimpleDocumentDetail | null) => (
+            <DocumentPickerTriggerValue document={document} parentMode={parentMode} />
+          )}
+        </ComboboxValue>
+      </ComboboxTrigger>
+      <ComboboxContent
         placement="bottom-start"
         sideOffset={0}
-        popupClassName="border-none bg-transparent shadow-none"
+        popupClassName="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg backdrop-blur-[5px]"
       >
-        <div className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pt-2 shadow-lg backdrop-blur-[5px]">
-          <SearchInput value={query} onChange={setQuery} className="mx-1" />
-          {documentsList
-            ? (
-                <DocumentList
-                  className="mt-2"
-                  list={documentsList.map(d => ({
-                    id: d.id,
-                    name: d.name,
-                    extension: d.data_source_detail_dict?.upload_file?.extension || '',
-                  }))}
-                  onChange={handleChange}
-                />
-              )
-            : (
-                <div className="mt-2 flex h-[100px] w-[360px] items-center justify-center">
-                  <Loading />
-                </div>
-              )}
-        </div>
-      </PopoverContent>
-    </Popover>
+        <ComboboxInputGroup className="h-8 min-h-8 px-2">
+          <span className="mr-0.5 i-ri-search-line size-4 shrink-0 text-text-tertiary" aria-hidden="true" />
+          <ComboboxInput
+            aria-label={t('operation.search', { ns: 'common' })}
+            placeholder={t('operation.search', { ns: 'common' })}
+            className="block h-4.5 grow px-1 py-0 text-[13px] text-text-primary"
+          />
+        </ComboboxInputGroup>
+        {data
+          ? (
+              documentsList.length > 0
+                ? (
+                    <DocumentList
+                      className="mt-2"
+                    />
+                  )
+                : (
+                    <ComboboxEmpty className="mt-2 flex h-[100px] w-full items-center justify-center">
+                      {t('noData', { ns: 'common' })}
+                    </ComboboxEmpty>
+                  )
+            )
+          : (
+              <ComboboxStatus className="mt-2 flex h-[100px] w-full items-center justify-center">
+                <Loading />
+              </ComboboxStatus>
+            )}
+      </ComboboxContent>
+    </Combobox>
   )
 }
-export default React.memo(DocumentPicker)
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 597ceda9a5..fb90bf57f7 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -14,7 +14,6 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import FileIcon from '../document-file-icon'
-import DocumentList from './document-list'
 
 type Props = {
   className?: string
@@ -74,7 +73,7 @@ const PreviewDocumentPicker: FC<Props> = ({
           {files?.length > 1 && <div className="flex h-8 items-center pl-2 system-xs-medium-uppercase text-text-tertiary">{t('preprocessDocument', { ns: 'dataset', num: files.length })}</div>}
           {files?.length > 0
             ? (
-                <DocumentList
+                <PreviewDocumentList
                   list={files}
                   onChange={handleChange}
                 />
@@ -90,3 +89,27 @@ const PreviewDocumentPicker: FC<Props> = ({
   )
 }
 export default React.memo(PreviewDocumentPicker)
+
+function PreviewDocumentList({
+  list,
+  onChange,
+}: {
+  list: DocumentItem[]
+  onChange: (value: DocumentItem) => void
+}) {
+  return (
+    <div className="max-h-[calc(100vh-120px)] overflow-auto">
+      {list.map(item => (
+        <button
+          key={item.id}
+          type="button"
+          className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2 text-left hover:bg-state-base-hover"
+          onClick={() => onChange(item)}
+        >
+          <FileIcon name={item.name} extension={item.extension} size="lg" />
+          <span className="truncate text-sm text-text-secondary">{item.name}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx
index 3eb1017b8d..b48575d209 100644
--- a/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/document-title.spec.tsx
@@ -1,6 +1,7 @@
+import type { SimpleDocumentDetail } from '@/models/datasets'
 import { render } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ChunkingMode } from '@/models/datasets'
+import { ChunkingMode, DataSourceType } from '@/models/datasets'
 
 import { DocumentTitle } from '../document-title'
 
@@ -11,13 +12,23 @@ vi.mock('@/next/navigation', () => ({
   }),
 }))
 
-// Mock DocumentPicker
 vi.mock('../../../common/document-picker', () => ({
-  default: ({ datasetId, value, onChange }: { datasetId: string, value: unknown, onChange: (doc: { id: string }) => void }) => (
+  DocumentPicker: ({
+    datasetId,
+    value,
+    parentMode,
+    onChange,
+  }: {
+    datasetId: string
+    value?: SimpleDocumentDetail | null
+    parentMode?: string
+    onChange: (doc: { id: string }) => void
+  }) => (
     <div
       data-testid="document-picker"
       data-dataset-id={datasetId}
-      data-value={JSON.stringify(value)}
+      data-value-id={value?.id ?? ''}
+      data-parent-mode={parentMode ?? ''}
       onClick={() => onChange({ id: 'new-doc-id' })}
     >
       Document Picker
@@ -25,6 +36,42 @@ vi.mock('../../../common/document-picker', () => ({
   ),
 }))
 
+const createDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
+  id: 'doc-1',
+  batch: 'batch-1',
+  position: 1,
+  dataset_id: 'dataset-1',
+  data_source_type: DataSourceType.FILE,
+  data_source_info: {
+    upload_file: {
+      id: 'file-1',
+      name: 'document.pdf',
+      size: 1024,
+      extension: 'pdf',
+      mime_type: 'application/pdf',
+      created_by: 'user-1',
+      created_at: Date.now(),
+    },
+    job_id: 'job-1',
+    url: '',
+  },
+  dataset_process_rule_id: 'rule-1',
+  name: 'Document 1',
+  created_from: 'web',
+  created_by: 'user-1',
+  created_at: Date.now(),
+  indexing_status: 'completed',
+  display_status: 'enabled',
+  doc_form: ChunkingMode.text,
+  doc_language: 'en',
+  enabled: true,
+  word_count: 1000,
+  archived: false,
+  updated_at: Date.now(),
+  hit_count: 0,
+  ...overrides,
+})
+
 describe('DocumentTitle', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -69,31 +116,26 @@ describe('DocumentTitle', () => {
       expect(getByTestId('document-picker').getAttribute('data-dataset-id')).toBe('test-dataset-id')
     })
 
-    it('should pass value props to DocumentPicker', () => {
+    it('should pass the selected document to DocumentPicker', () => {
+      const document = createDocument({ id: 'doc-current' })
       const { getByTestId } = render(
         <DocumentTitle
           datasetId="dataset-1"
-          name="test-document"
-          extension="pdf"
-          chunkingMode={ChunkingMode.text}
-          parent_mode="paragraph"
+          document={document}
+          parentMode="paragraph"
         />,
       )
 
-      const value = JSON.parse(getByTestId('document-picker').getAttribute('data-value') || '{}')
-      expect(value.name).toBe('test-document')
-      expect(value.extension).toBe('pdf')
-      expect(value.chunkingMode).toBe(ChunkingMode.text)
-      expect(value.parentMode).toBe('paragraph')
+      expect(getByTestId('document-picker')).toHaveAttribute('data-value-id', 'doc-current')
+      expect(getByTestId('document-picker')).toHaveAttribute('data-parent-mode', 'paragraph')
     })
 
-    it('should default parentMode to paragraph when parent_mode is undefined', () => {
+    it('should pass no parent mode when it is undefined', () => {
       const { getByTestId } = render(
         <DocumentTitle datasetId="dataset-1" />,
       )
 
-      const value = JSON.parse(getByTestId('document-picker').getAttribute('data-value') || '{}')
-      expect(value.parentMode).toBe('paragraph')
+      expect(getByTestId('document-picker')).toHaveAttribute('data-parent-mode', '')
     })
 
     it('should apply custom wrapperCls', () => {
@@ -119,24 +161,23 @@ describe('DocumentTitle', () => {
   })
 
   describe('Edge Cases', () => {
-    it('should handle undefined optional props', () => {
+    it('should handle an empty document value', () => {
       const { getByTestId } = render(
         <DocumentTitle datasetId="dataset-1" />,
       )
 
-      const value = JSON.parse(getByTestId('document-picker').getAttribute('data-value') || '{}')
-      expect(value.name).toBeUndefined()
-      expect(value.extension).toBeUndefined()
+      expect(getByTestId('document-picker')).toHaveAttribute('data-value-id', '')
     })
 
     it('should maintain structure when rerendered', () => {
       const { rerender, getByTestId } = render(
-        <DocumentTitle datasetId="dataset-1" name="doc1" />,
+        <DocumentTitle datasetId="dataset-1" document={createDocument({ id: 'doc-1' })} />,
       )
 
-      rerender(<DocumentTitle datasetId="dataset-2" name="doc2" />)
+      rerender(<DocumentTitle datasetId="dataset-2" document={createDocument({ id: 'doc-2' })} />)
 
       expect(getByTestId('document-picker').getAttribute('data-dataset-id')).toBe('dataset-2')
+      expect(getByTestId('document-picker').getAttribute('data-value-id')).toBe('doc-2')
     })
   })
 })
diff --git a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
index e717475b38..e8946ce584 100644
--- a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
@@ -114,9 +114,20 @@ vi.mock('../batch-modal', () => ({
 }))
 
 vi.mock('../document-title', () => ({
-  DocumentTitle: ({ name, extension }: { name?: string, extension?: string }) => (
-    <div data-testid="document-title" data-extension={extension}>{name}</div>
-  ),
+  DocumentTitle: ({
+    document,
+  }: {
+    document?: {
+      name?: string
+      data_source_detail_dict?: { upload_file?: { extension?: string } }
+      data_source_info?: { upload_file?: { extension?: string } }
+    } | null
+  }) => {
+    const extension = document?.data_source_detail_dict?.upload_file?.extension
+      ?? document?.data_source_info?.upload_file?.extension
+
+    return <div data-testid="document-title" data-extension={extension}>{document?.name}</div>
+  },
 }))
 
 vi.mock('../segment-add', () => ({
diff --git a/web/app/components/datasets/documents/detail/document-title.tsx b/web/app/components/datasets/documents/detail/document-title.tsx
index d5bf5345ae..0a1cfbf61a 100644
--- a/web/app/components/datasets/documents/detail/document-title.tsx
+++ b/web/app/components/datasets/documents/detail/document-title.tsx
@@ -1,39 +1,29 @@
-import type { FC } from 'react'
-import type { ChunkingMode, ParentMode } from '@/models/datasets'
+import type { ParentMode, SimpleDocumentDetail } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useRouter } from '@/next/navigation'
-import DocumentPicker from '../../common/document-picker'
+import { DocumentPicker } from '../../common/document-picker'
 
 type DocumentTitleProps = {
   datasetId: string
-  extension?: string
-  name?: string
-  chunkingMode?: ChunkingMode
-  parent_mode?: ParentMode
-  iconCls?: string
-  textCls?: string
+  document?: SimpleDocumentDetail | null
+  parentMode?: ParentMode
   wrapperCls?: string
 }
 
-export const DocumentTitle: FC<DocumentTitleProps> = ({
+export function DocumentTitle({
   datasetId,
-  extension,
-  name,
-  chunkingMode,
-  parent_mode,
+  document,
+  parentMode,
   wrapperCls,
-}) => {
+}: DocumentTitleProps) {
   const router = useRouter()
+
   return (
     <div className={cn('flex flex-1 items-center justify-start', wrapperCls)}>
       <DocumentPicker
         datasetId={datasetId}
-        value={{
-          name,
-          extension,
-          chunkingMode,
-          parentMode: parent_mode || 'paragraph',
-        }}
+        value={document}
+        parentMode={parentMode}
         onChange={(doc) => {
           router.push(`/datasets/${datasetId}/documents/${doc.id}`)
         }}
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 732d7ffb28..190cf8edf7 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import type { DataSourceInfo, DocumentDisplayStatus, FileItem, FullDocumentDetail, LegacyDataSourceInfo } from '@/models/datasets'
+import type { DocumentDisplayStatus, FileItem, FullDocumentDetail } from '@/models/datasets'
 import type { SegmentImportStatus } from '@/types/dataset'
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
@@ -38,10 +38,6 @@ const NON_TERMINAL_DISPLAY_STATUSES = new Set<typeof DisplayStatusList[number]>(
   DisplayStatusList.filter(s => s === 'queuing' || s === 'indexing' || s === 'paused'),
 )
 
-const isLegacyDataSourceInfo = (info?: DataSourceInfo): info is LegacyDataSourceInfo => {
-  return !!info && 'upload_file' in info
-}
-
 const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -123,14 +119,6 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
 
   const embedding = NON_TERMINAL_DISPLAY_STATUSES.has(documentDetail?.display_status as DocumentDisplayStatus)
 
-  const documentUploadFile = useMemo(() => {
-    if (!documentDetail?.data_source_info)
-      return undefined
-    if (isLegacyDataSourceInfo(documentDetail.data_source_info))
-      return documentDetail.data_source_info.upload_file
-    return undefined
-  }, [documentDetail?.data_source_info])
-
   const invalidChunkList = useInvalid(useSegmentListKey)
   const invalidChildChunkList = useInvalid(useChildSegmentListKey)
   const invalidDocumentList = useInvalidDocumentList(datasetId)
@@ -212,11 +200,9 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
           </button>
           <DocumentTitle
             datasetId={datasetId}
-            extension={documentUploadFile?.extension}
-            name={documentDetail?.name}
+            document={documentDetail}
             wrapperCls="mr-2"
-            parent_mode={parentMode}
-            chunkingMode={documentDetail?.doc_form as ChunkingMode}
+            parentMode={parentMode}
           />
           <div className="flex flex-wrap items-center">
             {embeddingAvailable && documentDetail && !documentDetail.archived && !isFullDocMode && (