Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-15 19:22:36 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

build: update headlessui

Browse Source
This commit is contained in:
AkaraChen 2024-10-29 14:56:22 +08:00
parent 6726ca102e
commit c4e63bc167
23 changed files with 358 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/account/avatar.tsx
View File

@ -1,14 +1,13 @@
'use client' 'use client'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import Avatar from '@/app/components/base/avatar' import Avatar from '@/app/components/base/avatar'
import { logout } from '@/service/common' import { logout } from '@/service/common'
import { useAppContext } from '@/context/app-context' import { useAppContext } from '@/context/app-context'
import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general' import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
export interface IAppSelector { export type IAppSelector = {
isMobile: boolean isMobile: boolean
} }
@ -35,7 +34,7 @@ export default function AppSelector() {
({ open }) => ( ({ open }) => (
<> <>
<div> <div>
<Menu.Button <MenuButton
className={` className={`
inline-flex items-center inline-flex items-center
rounded-[20px] p-1x text-sm rounded-[20px] p-1x text-sm
@ -45,10 +44,9 @@ export default function AppSelector() {
`} `}
> >
<Avatar name={userProfile.name} size={32} /> <Avatar name={userProfile.name} size={32} />
</Menu.Button> </MenuButton>
</div> </div>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -56,14 +54,14 @@ export default function AppSelector() {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className=" className="
absolute -right-2 -top-1 w-60 max-w-80 absolute -right-2 -top-1 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white divide-y divide-gray-100 origin-top-right rounded-lg bg-white
shadow-lg shadow-lg
" "
> >
<Menu.Item> <MenuItem>
<div className='p-1'> <div className='p-1'>
<div className='flex flex-nowrap items-center px-3 py-2'> <div className='flex flex-nowrap items-center px-3 py-2'>
<div className='grow'> <div className='grow'>
@ -73,8 +71,8 @@ export default function AppSelector() {
<Avatar name={userProfile.name} size={32} /> <Avatar name={userProfile.name} size={32} />
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<div className='p-1' onClick={() => handleLogout()}> <div className='p-1' onClick={() => handleLogout()}>
<div <div
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50' className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
@ -83,8 +81,8 @@ export default function AppSelector() {
<div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div> <div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

13
web/app/components/app/annotation/header-opts/index.tsx
View File

@ -1,6 +1,6 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React, { Fragment, useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { import {
RiAddLine, RiAddLine,
@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector'
import { import {
useCSVDownloader, useCSVDownloader,
} from 'react-papaparse' } from 'react-papaparse'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import Button from '../../../base/button' import Button from '../../../base/button'
import AddAnnotationModal from '../add-annotation-modal' import AddAnnotationModal from '../add-annotation-modal'
import type { AnnotationItemBasic } from '../type' import type { AnnotationItemBasic } from '../type'
@ -87,13 +87,12 @@ const HeaderOptions: FC<Props> = ({
<span className={s.actionName}>{t('appAnnotation.table.header.bulkImport')}</span> <span className={s.actionName}>{t('appAnnotation.table.header.bulkImport')}</span>
</button> </button>
<Menu as="div" className="relative w-full h-full"> <Menu as="div" className="relative w-full h-full">
<Menu.Button className={s.actionItem}> <MenuButton className={s.actionItem}>
<FileDownload02 className={s.actionItemIcon} /> <FileDownload02 className={s.actionItemIcon} />
<span className={s.actionName}>{t('appAnnotation.table.header.bulkExport')}</span> <span className={s.actionName}>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' /> <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -101,7 +100,7 @@ const HeaderOptions: FC<Props> = ({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className={cn( className={cn(
` `
absolute top-[1px] py-1 min-w-[100px] z-10 bg-white border-[0.5px] border-gray-200 absolute top-[1px] py-1 min-w-[100px] z-10 bg-white border-[0.5px] border-gray-200
@ -126,7 +125,7 @@ const HeaderOptions: FC<Props> = ({
<button disabled={annotationUnavailable} className={cn(s.actionItem, '!border-0')} onClick={JSONLOutput}> <button disabled={annotationUnavailable} className={cn(s.actionItem, '!border-0')} onClick={JSONLOutput}>
<span className={s.actionName}>JSONL</span> <span className={s.actionName}>JSONL</span>
</button> </button>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>

21
web/app/components/app/create-app-dialog/newAppDialog.tsx
View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react' import { useCallback } from 'react'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
type DialogProps = { type DialogProps = {
@ -18,10 +18,10 @@ const NewAppDialog = ({
}: DialogProps) => { }: DialogProps) => {
const close = useCallback(() => onClose?.(), [onClose]) const close = useCallback(() => onClose?.(), [onClose])
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show}>
<Dialog as="div" className="relative z-40" onClose={close}> <Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child <TransitionChild
as={Fragment} as={'div'}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -30,12 +30,11 @@ const NewAppDialog = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </TransitionChild>
<div className="fixed inset-0"> <div className="fixed inset-0">
<div className="flex flex-col items-center justify-center min-h-full pt-[56px]"> <div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
@ -43,10 +42,10 @@ const NewAppDialog = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}> <DialogPanel className={cn('grow relative w-full h-[calc(100vh-56px)] p-0 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-t-xl', className)}>
{children} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</div> </div>
</Dialog> </Dialog>

24
web/app/components/base/dialog/index.tsx
View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react' import { useCallback } from 'react'
import type { ElementType, ReactNode } from 'react' import type { ElementType, ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog // https://headlessui.com/react/dialog
@ -32,10 +32,9 @@ const CustomDialog = ({
}: DialogProps) => { }: DialogProps) => {
const close = useCallback(() => onClose?.(), [onClose]) const close = useCallback(() => onClose?.(), [onClose])
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show}>
<Dialog as="div" className="relative z-40" onClose={close}> <Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -44,12 +43,11 @@ const CustomDialog = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </TransitionChild>
<div className="fixed inset-0 overflow-y-auto"> <div className="fixed inset-0 overflow-y-auto">
<div className="flex items-center justify-center min-h-full p-4 text-center"> <div className="flex items-center justify-center min-h-full p-4 text-center">
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
@ -57,14 +55,14 @@ const CustomDialog = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={classNames('w-full max-w-[800px] p-0 overflow-hidden text-left text-gray-900 align-middle transition-all transform bg-white shadow-xl rounded-2xl', className)}> <DialogPanel className={classNames('w-full max-w-[800px] p-0 overflow-hidden text-left text-gray-900 align-middle transition-all transform bg-white shadow-xl rounded-2xl', className)}>
{Boolean(title) && ( {Boolean(title) && (
<Dialog.Title <DialogTitle
as={titleAs || 'h3'} as={titleAs || 'h3'}
className={classNames('px-8 py-6 text-lg font-medium leading-6 text-gray-900', titleClassName)} className={classNames('px-8 py-6 text-lg font-medium leading-6 text-gray-900', titleClassName)}
> >
{title} {title}
</Dialog.Title> </DialogTitle>
)} )}
<div className={classNames('px-8 text-lg font-medium leading-6', bodyClassName)}> <div className={classNames('px-8 text-lg font-medium leading-6', bodyClassName)}>
{children} {children}
@ -74,8 +72,8 @@ const CustomDialog = ({
{footer} {footer}
</div> </div>
)} )}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</div> </div>
</Dialog> </Dialog>

62
web/app/components/base/drawer/index.tsx
View File

@ -1,5 +1,5 @@
'use client' 'use client'
import { Dialog } from '@headlessui/react' import { Description, Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline' import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button' import Button from '../button'
@ -46,37 +46,39 @@ export default function Drawer({
> >
<div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}> <div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
{/* mask */} {/* mask */}
<Dialog.Overlay <div
className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')} className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
/> />
<div className={cn('relative z-50 flex flex-col justify-between bg-white w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}> <DialogPanel>
<> <div className={cn('relative z-50 flex flex-col justify-between bg-white w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
{title && <Dialog.Title <>
as="h3" {title && <DialogTitle
className="text-lg font-medium leading-6 text-gray-900" as="h3"
> className="text-lg font-medium leading-6 text-gray-900"
{title} >
</Dialog.Title>} {title}
{showClose && <Dialog.Title className="flex items-center mb-4" as="div"> </DialogTitle>}
<XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} /> {showClose && <DialogTitle className="flex items-center mb-4" as="div">
</Dialog.Title>} <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
{description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Dialog.Description>} </DialogTitle>}
{children} {description && <Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Description>}
</> {children}
{footer || (footer === null </>
? null {footer || (footer === null
: <div className="mt-10 flex flex-row justify-end"> ? null
<Button : <div className="mt-10 flex flex-row justify-end">
className='mr-2' <Button
onClick={() => { className='mr-2'
onCancel && onCancel() onClick={() => {
}}>{t('common.operation.cancel')}</Button> onCancel && onCancel()
<Button }}>{t('common.operation.cancel')}</Button>
onClick={() => { <Button
onOk && onOk() onClick={() => {
}}>{t('common.operation.save')}</Button> onOk && onOk()
</div>)} }}>{t('common.operation.save')}</Button>
</div> </div>)}
</div>
</DialogPanel>
</div> </div>
</Dialog> </Dialog>
) )

20
web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
View File

@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react' import { useCallback } from 'react'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
type DialogProps = { type DialogProps = {
@ -20,10 +20,9 @@ const DialogWrapper = ({
}: DialogProps) => { }: DialogProps) => {
const close = useCallback(() => onClose?.(), [onClose]) const close = useCallback(() => onClose?.(), [onClose])
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show}>
<Dialog as="div" className="relative z-40" onClose={close}> <Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -32,12 +31,11 @@ const DialogWrapper = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </TransitionChild>
<div className="fixed inset-0"> <div className="fixed inset-0">
<div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}> <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[64px] pr-2')}>
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
@ -45,10 +43,10 @@ const DialogWrapper = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}> <DialogPanel className={cn('grow flex flex-col relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded-2xl', className)}>
{children} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</div> </div>
</Dialog> </Dialog>

42
web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
View File

@ -1,11 +1,11 @@
'use client' 'use client'
import useSWR from 'swr' import useSWR from 'swr'
import produce from 'immer' import produce from 'immer'
import React, { Fragment } from 'react' import React from 'react'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine } from '@remixicon/react'
import { Listbox, Transition } from '@headlessui/react' import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks' import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
import type { Item } from '@/app/components/base/select' import type { Item } from '@/app/components/base/select'
@ -92,7 +92,7 @@ const VoiceParamConfig = ({
}} }}
> >
<div className='relative h-8'> <div className='relative h-8'>
<Listbox.Button <ListboxButton
className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}> className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
<span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}> <span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}>
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder} {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
@ -103,21 +103,22 @@ const VoiceParamConfig = ({
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
</Listbox.Button> </ListboxButton>
<Transition <Transition
as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options <ListboxOptions
as={'ul'}
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm"> className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
{languages.map((item: Item) => ( {languages.map((item: Item) => (
<Listbox.Option <ListboxOption
as='li'
key={item.value} key={item.value}
className={({ active }) => className={({ focus }) =>
`relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : '' `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${focus ? 'bg-gray-100' : ''
}` }`
} }
value={item} value={item}
@ -138,9 +139,9 @@ const VoiceParamConfig = ({
)} )}
</> </>
)} )}
</Listbox.Option> </ListboxOption>
))} ))}
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
</div> </div>
</Listbox> </Listbox>
@ -160,7 +161,7 @@ const VoiceParamConfig = ({
}} }}
> >
<div className={'grow relative h-8'}> <div className={'grow relative h-8'}>
<Listbox.Button <ListboxButton
className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}> className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
<span <span
className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span> className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
@ -170,21 +171,22 @@ const VoiceParamConfig = ({
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
</Listbox.Button> </ListboxButton>
<Transition <Transition
as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options <ListboxOptions
as='ul'
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm"> className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
{voiceItems?.map((item: Item) => ( {voiceItems?.map((item: Item) => (
<Listbox.Option <ListboxOption
as='li'
key={item.value} key={item.value}
className={({ active }) => className={({ focus }) =>
`relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : '' `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${focus ? 'bg-gray-100' : ''
}` }`
} }
value={item} value={item}
@ -204,9 +206,9 @@ const VoiceParamConfig = ({
)} )}
</> </>
)} )}
</Listbox.Option> </ListboxOption>
))} ))}
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
</div> </div>
</Listbox> </Listbox>

27
web/app/components/base/modal/index.tsx
View File

@ -1,5 +1,4 @@
import { Dialog, Transition } from '@headlessui/react' import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
import { Fragment } from 'react'
import { XMarkIcon } from '@heroicons/react/24/outline' import { XMarkIcon } from '@heroicons/react/24/outline'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog // https://headlessui.com/react/dialog
@ -28,10 +27,9 @@ export default function Modal({
overflowVisible = false, overflowVisible = false,
}: IModal) { }: IModal) {
return ( return (
<Transition appear show={isShow} as={Fragment}> <Transition appear show={isShow}>
<Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}> <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -40,7 +38,7 @@ export default function Modal({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child> </TransitionChild>
<div <div
className="fixed inset-0 overflow-y-auto" className="fixed inset-0 overflow-y-auto"
@ -50,8 +48,7 @@ export default function Modal({
}} }}
> >
<div className="flex min-h-full items-center justify-center p-4 text-center"> <div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
@ -59,20 +56,20 @@ export default function Modal({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={classNames( <DialogPanel className={classNames(
'modal-panel', 'modal-panel',
overflowVisible ? 'overflow-visible' : 'overflow-hidden', overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className, className,
)}> )}>
{title && <Dialog.Title {title && <DialogTitle
as="h3" as="h3"
className="text-lg font-medium leading-6 text-gray-900" className="text-lg font-medium leading-6 text-gray-900"
> >
{title} {title}
</Dialog.Title>} </DialogTitle>}
{description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'> {description && <Description className='text-gray-500 text-xs font-normal mt-2'>
{description} {description}
</Dialog.Description>} </Description>}
{closable {closable
&& <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-gray-100'> && <div className='absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-gray-100'>
<XMarkIcon className='w-4 h-4 text-gray-500' onClick={ <XMarkIcon className='w-4 h-4 text-gray-500' onClick={
@ -83,8 +80,8 @@ export default function Modal({
} /> } />
</div>} </div>}
{children} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</div> </div>
</Dialog> </Dialog>

16
web/app/components/base/notion-page-selector/workspace-selector/index.tsx
View File

@ -1,7 +1,6 @@
'use client' 'use client'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment } from 'react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { Menu, Transition } from '@headlessui/react'
import NotionIcon from '../../notion-icon' import NotionIcon from '../../notion-icon'
import s from './index.module.css' import s from './index.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
@ -25,7 +24,7 @@ export default function WorkspaceSelector({
{ {
({ open }) => ( ({ open }) => (
<> <>
<Menu.Button className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}> <MenuButton className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
<NotionIcon <NotionIcon
className='ml-1 mr-2' className='ml-1 mr-2'
src={currentWorkspace?.workspace_icon} src={currentWorkspace?.workspace_icon}
@ -34,9 +33,8 @@ export default function WorkspaceSelector({
<div className='mr-1 w-[90px] text-left text-sm font-medium text-gray-700 truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div> <div className='mr-1 w-[90px] text-left text-sm font-medium text-gray-700 truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
<div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.pages.length}</div> <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.pages.length}</div>
<div className={cn(s['down-arrow'], 'mr-2 w-3 h-3')} /> <div className={cn(s['down-arrow'], 'mr-2 w-3 h-3')} />
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -44,7 +42,7 @@ export default function WorkspaceSelector({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className={cn( className={cn(
s.popup, s.popup,
`absolute left-0 top-8 w-80 `absolute left-0 top-8 w-80
@ -55,7 +53,7 @@ export default function WorkspaceSelector({
<div className="p-1 max-h-50 overflow-auto"> <div className="p-1 max-h-50 overflow-auto">
{ {
items.map(item => ( items.map(item => (
<Menu.Item key={item.workspace_id}> <MenuItem key={item.workspace_id}>
<div <div
className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer' className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
onClick={() => onSelect(item.workspace_id)} onClick={() => onSelect(item.workspace_id)}
@ -70,11 +68,11 @@ export default function WorkspaceSelector({
{item.pages.length} {t('common.dataSource.notion.selector.pageSelected')} {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
)) ))
} }
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

14
web/app/components/base/popover/index.tsx
View File

@ -1,5 +1,5 @@
import { Popover, Transition } from '@headlessui/react' import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
import { Fragment, cloneElement, useRef } from 'react' import { cloneElement, useRef } from 'react'
import s from './style.module.css' import s from './style.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
@ -60,7 +60,7 @@ export default function CustomPopover({
onMouseEnter: () => onMouseEnter(open), onMouseEnter: () => onMouseEnter(open),
})} })}
> >
<Popover.Button <PopoverButton
ref={buttonRef} ref={buttonRef}
disabled={disabled} disabled={disabled}
className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName className={`group ${s.popupBtn} ${open ? '' : 'bg-gray-100'} ${!btnClassName
@ -71,9 +71,9 @@ export default function CustomPopover({
}`} }`}
> >
{btnElement} {btnElement}
</Popover.Button> </PopoverButton>
<Transition as={Fragment}> <Transition>
<Popover.Panel <PopoverPanel
className={cn( className={cn(
s.popupPanel, s.popupPanel,
position === 'bottom' && '-translate-x-1/2 left-1/2', position === 'bottom' && '-translate-x-1/2 left-1/2',
@ -110,7 +110,7 @@ export default function CustomPopover({
})} })}
</div> </div>
)} )}
</Popover.Panel> </PopoverPanel>
</Transition> </Transition>
</div> </div>
</> </>

47
web/app/components/base/select/index.tsx
View File

@ -1,7 +1,7 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React, { Fragment, useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Combobox, Listbox, Transition } from '@headlessui/react' import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid' import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
@ -26,7 +26,7 @@ export type Item = {
name: string name: string
} & Record<string, any> } & Record<string, any>
export interface ISelectProps { export type ISelectProps = {
className?: string className?: string
wrapperClassName?: string wrapperClassName?: string
renderTrigger?: (value: Item | null) => JSX.Element | null renderTrigger?: (value: Item | null) => JSX.Element | null
@ -99,7 +99,7 @@ const Select: FC<ISelectProps> = ({
<div className={classNames('relative')}> <div className={classNames('relative')}>
<div className='group text-gray-800'> <div className='group text-gray-800'>
{allowSearch {allowSearch
? <Combobox.Input ? <ComboboxInput
className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`} className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
onChange={(event) => { onChange={(event) => {
if (!disabled) if (!disabled)
@ -107,28 +107,29 @@ const Select: FC<ISelectProps> = ({
}} }}
displayValue={(item: Item) => item?.name} displayValue={(item: Item) => item?.name}
/> />
: <Combobox.Button onClick={ : <ComboboxButton onClick={
() => { () => {
if (!disabled) if (!disabled)
setOpen(!open) setOpen(!open)
} }
} className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`, optionClassName)}> } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`, optionClassName)}>
<div className='w-0 grow text-left truncate' title={selectedItem?.name}>{selectedItem?.name}</div> <div className='w-0 grow text-left truncate' title={selectedItem?.name}>{selectedItem?.name}</div>
</Combobox.Button>} </ComboboxButton>}
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none group-hover:bg-gray-200" onClick={ <ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none group-hover:bg-gray-200" onClick={
() => { () => {
if (!disabled) if (!disabled)
setOpen(!open) setOpen(!open)
} }
}> }>
{open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />} {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
</Combobox.Button> </ComboboxButton>
</div> </div>
{filteredItems.length > 0 && ( {filteredItems.length > 0 && (
<Combobox.Options className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}> <ComboboxOptions className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`} as='ul'>
{filteredItems.map((item: Item) => ( {filteredItems.map((item: Item) => (
<Combobox.Option <ComboboxOption
as='li'
key={item.value} key={item.value}
value={item} value={item}
className={({ active }: { active: boolean }) => className={({ active }: { active: boolean }) =>
@ -159,9 +160,9 @@ const Select: FC<ISelectProps> = ({
)} )}
</> </>
)} )}
</Combobox.Option> </ComboboxOption>
))} ))}
</Combobox.Options> </ComboboxOptions>
)} )}
</div> </div>
</Combobox > </Combobox >
@ -208,9 +209,9 @@ const SimpleSelect: FC<ISelectProps> = ({
}} }}
> >
<div className={classNames('group/simple-select relative h-9', wrapperClassName)}> <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
{renderTrigger && <Listbox.Button className='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>} {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
{!renderTrigger && ( {!renderTrigger && (
<Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}> <ListboxButton className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
<span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span> <span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2"> <span className="absolute inset-y-0 right-0 flex items-center pr-2">
{(selectedItem && !notClearable) {(selectedItem && !notClearable)
@ -232,24 +233,24 @@ const SimpleSelect: FC<ISelectProps> = ({
/> />
)} )}
</span> </span>
</Listbox.Button> </ListboxButton>
)} )}
{!disabled && ( {!disabled && (
<Transition <Transition
as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}> <ListboxOptions className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)} as="ul">
{items.map((item: Item) => ( {items.map((item: Item) => (
<Listbox.Option <ListboxOption
as='li'
key={item.value} key={item.value}
className={({ active }) => className={({ focus }) =>
classNames( classNames(
`relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''}`, `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${focus ? 'bg-gray-100' : ''}`,
optionClassName, optionClassName,
) )
} }
@ -274,9 +275,9 @@ const SimpleSelect: FC<ISelectProps> = ({
</>)} </>)}
</> </>
)} )}
</Listbox.Option> </ListboxOption>
))} ))}
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
)} )}
</div> </div>
@ -284,7 +285,7 @@ const SimpleSelect: FC<ISelectProps> = ({
) )
} }
interface PortalSelectProps { type PortalSelectProps = {
value: string | number value: string | number
onSelect: (value: Item) => void onSelect: (value: Item) => void
items: Item[] items: Item[]

37
web/app/components/base/select/locale.tsx
View File

@ -1,6 +1,5 @@
'use client' 'use client'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { GlobeAltIcon } from '@heroicons/react/24/outline' import { GlobeAltIcon } from '@heroicons/react/24/outline'
type ISelectProps = { type ISelectProps = {
@ -21,17 +20,16 @@ export default function Select({
<div className="w-56 text-right"> <div className="w-56 text-right">
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block text-left">
<div> <div>
<Menu.Button className="inline-flex w-full h-[44px]justify-center items-center <MenuButton className="inline-flex w-full h-[44px]justify-center items-center
rounded-lg px-[10px] py-[6px] rounded-lg px-[10px] py-[6px]
text-gray-900 text-[13px] font-medium text-gray-900 text-[13px] font-medium
border border-gray-200 border border-gray-200
hover:bg-gray-100"> hover:bg-gray-100">
<GlobeAltIcon className="w-5 h-5 mr-1" aria-hidden="true" /> <GlobeAltIcon className="w-5 h-5 mr-1" aria-hidden="true" />
{item?.name} {item?.name}
</Menu.Button> </MenuButton>
</div> </div>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -39,13 +37,13 @@ export default function Select({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="absolute right-0 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10"> <MenuItems className="absolute right-0 mt-2 w-[200px] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="px-1 py-1 "> <div className="px-1 py-1 ">
{items.map((item) => { {items.map((item) => {
return <Menu.Item key={item.value}> return <MenuItem key={item.value}>
{({ active }) => ( {({ focus }) => (
<button <button
className={`${active ? 'bg-gray-100' : '' className={`${focus ? 'bg-gray-100' : ''
} group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700`} } group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700`}
onClick={(evt) => { onClick={(evt) => {
evt.preventDefault() evt.preventDefault()
@ -55,12 +53,12 @@ export default function Select({
{item.name} {item.name}
</button> </button>
)} )}
</Menu.Item> </MenuItem>
})} })}
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>
@ -77,12 +75,11 @@ export function InputSelect({
<div className="w-full"> <div className="w-full">
<Menu as="div" className="w-full"> <Menu as="div" className="w-full">
<div> <div>
<Menu.Button className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 sm:text-sm h-[38px] text-left"> <MenuButton className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 sm:text-sm h-[38px] text-left">
{item?.name} {item?.name}
</Menu.Button> </MenuButton>
</div> </div>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -90,13 +87,13 @@ export function InputSelect({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="absolute right-0 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10"> <MenuItems className="absolute right-0 mt-2 w-full origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
<div className="px-1 py-1 "> <div className="px-1 py-1 ">
{items.map((item) => { {items.map((item) => {
return <Menu.Item key={item.value}> return <MenuItem key={item.value}>
{({ active }) => ( {({ focus }) => (
<button <button
className={`${active ? 'bg-gray-100' : '' className={`${focus ? 'bg-gray-100' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`} } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
onClick={() => { onClick={() => {
onChange && onChange(item.value) onChange && onChange(item.value)
@ -105,12 +102,12 @@ export function InputSelect({
{item.name} {item.name}
</button> </button>
)} )}
</Menu.Item> </MenuItem>
})} })}
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>

14
web/app/components/develop/code.tsx
View File

@ -7,7 +7,7 @@ import {
useRef, useRef,
useState, useState,
} from 'react' } from 'react'
import { Tab } from '@headlessui/react' import { Tab, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tag } from './tag' import { Tag } from './tag'
import classNames from '@/utils/classnames' import classNames from '@/utils/classnames'
@ -161,7 +161,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
</h3> </h3>
)} )}
{hasTabs && ( {hasTabs && (
<Tab.List className="flex gap-4 -mb-px text-xs font-medium"> <TabList className="flex gap-4 -mb-px text-xs font-medium">
{Children.map(children, (child, childIndex) => ( {Children.map(children, (child, childIndex) => (
<Tab <Tab
className={classNames( className={classNames(
@ -174,7 +174,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
{getPanelTitle(child.props.children.props)} {getPanelTitle(child.props.children.props)}
</Tab> </Tab>
))} ))}
</Tab.List> </TabList>
)} )}
</div> </div>
) )
@ -189,13 +189,13 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro
if (hasTabs) { if (hasTabs) {
return ( return (
<Tab.Panels> <TabPanels>
{Children.map(children, child => ( {Children.map(children, child => (
<Tab.Panel> <TabPanel>
<CodePanel {...props}>{child}</CodePanel> <CodePanel {...props}>{child}</CodePanel>
</Tab.Panel> </TabPanel>
))} ))}
</Tab.Panels> </TabPanels>
) )
} }

51
web/app/components/header/account-dropdown/index.tsx
View File

@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'
import { useContext } from 'use-context-selector' import { useContext } from 'use-context-selector'
import { RiArrowDownSLine } from '@remixicon/react' import { RiArrowDownSLine } from '@remixicon/react'
import Link from 'next/link' import Link from 'next/link'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import Indicator from '../indicator' import Indicator from '../indicator'
import AccountAbout from '../account-about' import AccountAbout from '../account-about'
import { mailToSupport } from '../utils/util' import { mailToSupport } from '../utils/util'
@ -59,7 +59,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
({ open }) => ( ({ open }) => (
<> <>
<div> <div>
<Menu.Button <MenuButton
className={` className={`
inline-flex items-center inline-flex items-center
rounded-[20px] py-1 pr-2.5 pl-1 text-sm rounded-[20px] py-1 pr-2.5 pl-1 text-sm
@ -73,10 +73,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{userProfile.name} {userProfile.name}
<RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" /> <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
</>} </>}
</Menu.Button> </MenuButton>
</div> </div>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -84,14 +83,14 @@ export default function AppSelector({ isMobile }: IAppSelector) {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className=" className="
absolute right-0 mt-1.5 w-60 max-w-80 absolute right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white divide-y divide-gray-100 origin-top-right rounded-lg bg-white
shadow-lg shadow-lg
" "
> >
<Menu.Item> <MenuItem>
<div className='flex flex-nowrap items-center px-4 py-[13px]'> <div className='flex flex-nowrap items-center px-4 py-[13px]'>
<Avatar name={userProfile.name} size={36} className='mr-3' /> <Avatar name={userProfile.name} size={36} className='mr-3' />
<div className='grow'> <div className='grow'>
@ -99,9 +98,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className='leading-[18px] text-xs font-normal text-gray-500 break-all'>{userProfile.email}</div> <div className='leading-[18px] text-xs font-normal text-gray-500 break-all'>{userProfile.email}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
<div className="px-1 py-1"> <div className="px-1 py-1">
<Menu.Item> <MenuItem>
<Link <Link
className={classNames(itemClassName, 'group justify-between')} className={classNames(itemClassName, 'group justify-between')}
href='/account' href='/account'
@ -109,13 +108,13 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.account.account')}</div> <div>{t('common.account.account')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</Link> </Link>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<div className={itemClassName} onClick={() => setShowAccountSettingModal({ payload: 'members' })}> <div className={itemClassName} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
<div>{t('common.userProfile.settings')}</div> <div>{t('common.userProfile.settings')}</div>
</div> </div>
</Menu.Item> </MenuItem>
{canEmailSupport && <Menu.Item> {canEmailSupport && <MenuItem>
<a <a
className={classNames(itemClassName, 'group justify-between')} className={classNames(itemClassName, 'group justify-between')}
href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)} href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
@ -123,8 +122,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.emailSupport')}</div> <div>{t('common.userProfile.emailSupport')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</a> </a>
</Menu.Item>} </MenuItem>}
<Menu.Item> <MenuItem>
<Link <Link
className={classNames(itemClassName, 'group justify-between')} className={classNames(itemClassName, 'group justify-between')}
href='https://github.com/langgenius/dify/discussions/categories/feedbacks' href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
@ -132,8 +131,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.communityFeedback')}</div> <div>{t('common.userProfile.communityFeedback')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</Link> </Link>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<Link <Link
className={classNames(itemClassName, 'group justify-between')} className={classNames(itemClassName, 'group justify-between')}
href='https://discord.gg/5AEfbxcd9k' href='https://discord.gg/5AEfbxcd9k'
@ -141,8 +140,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.community')}</div> <div>{t('common.userProfile.community')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</Link> </Link>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<Link <Link
className={classNames(itemClassName, 'group justify-between')} className={classNames(itemClassName, 'group justify-between')}
href={ href={
@ -152,8 +151,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.helpCenter')}</div> <div>{t('common.userProfile.helpCenter')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</Link> </Link>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<Link <Link
className={classNames(itemClassName, 'group justify-between')} className={classNames(itemClassName, 'group justify-between')}
href='https://roadmap.dify.ai' href='https://roadmap.dify.ai'
@ -161,10 +160,10 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.roadmap')}</div> <div>{t('common.userProfile.roadmap')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</Link> </Link>
</Menu.Item> </MenuItem>
{ {
document?.body?.getAttribute('data-public-site-about') !== 'hide' && ( document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
<Menu.Item> <MenuItem>
<div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}> <div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
<div>{t('common.userProfile.about')}</div> <div>{t('common.userProfile.about')}</div>
<div className='flex items-center'> <div className='flex items-center'>
@ -172,11 +171,11 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} /> <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
) )
} }
</div> </div>
<Menu.Item> <MenuItem>
<div className='p-1' onClick={() => handleLogout()}> <div className='p-1' onClick={() => handleLogout()}>
<div <div
className='flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50' className='flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
@ -185,8 +184,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<LogOut01 className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' /> <LogOut01 className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

11
web/app/components/header/account-dropdown/workplace-selector/index.tsx
View File

@ -1,7 +1,7 @@
import { Fragment } from 'react' import { Fragment } from 'react'
import { useContext } from 'use-context-selector' import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import { RiArrowDownSLine } from '@remixicon/react' import { RiArrowDownSLine } from '@remixicon/react'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { switchWorkspace } from '@/service/common' import { switchWorkspace } from '@/service/common'
@ -34,7 +34,7 @@ const WorkplaceSelector = () => {
{ {
({ open }) => ( ({ open }) => (
<> <>
<Menu.Button className={cn( <MenuButton className={cn(
` `
flex items-center p-0.5 gap-1.5 w-full flex items-center p-0.5 gap-1.5 w-full
group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px] group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px]
@ -43,9 +43,8 @@ const WorkplaceSelector = () => {
<div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div> <div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
<div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div> <div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
<RiArrowDownSLine className='w-4 h-4 text-text-secondary' /> <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -53,7 +52,7 @@ const WorkplaceSelector = () => {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className={cn( className={cn(
` `
flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg
@ -78,7 +77,7 @@ const WorkplaceSelector = () => {
)) ))
} }
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

23
web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
View File

@ -8,7 +8,7 @@ import {
RiMoreFill, RiMoreFill,
RiStickyNoteAddLine, RiStickyNoteAddLine,
} from '@remixicon/react' } from '@remixicon/react'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common' import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
@ -54,11 +54,10 @@ export default function Operate({
{ {
({ open }) => ( ({ open }) => (
<> <>
<Menu.Button className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}> <MenuButton className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
<RiMoreFill className='w-4 h-4' /> <RiMoreFill className='w-4 h-4' />
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -66,7 +65,7 @@ export default function Operate({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className=" className="
absolute right-0 top-9 w-60 max-w-80 absolute right-0 top-9 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@ -74,7 +73,7 @@ export default function Operate({
" "
> >
<div className="px-1 py-1"> <div className="px-1 py-1">
<Menu.Item> <MenuItem>
<div <div
className={itemClassName} className={itemClassName}
onClick={onAuthAgain} onClick={onAuthAgain}
@ -87,23 +86,23 @@ export default function Operate({
</div> </div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
<div className={itemClassName} onClick={handleSync}> <div className={itemClassName} onClick={handleSync}>
<RiLoopLeftLine className={itemIconClassName} /> <RiLoopLeftLine className={itemIconClassName} />
<div className='leading-5'>{t('common.dataSource.notion.sync')}</div> <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
</div> </div>
</Menu.Item> </MenuItem>
</div> </div>
<Menu.Item> <MenuItem>
<div className='p-1'> <div className='p-1'>
<div className={itemClassName} onClick={handleRemove}> <div className={itemClassName} onClick={handleRemove}>
<RiDeleteBinLine className={itemIconClassName} /> <RiDeleteBinLine className={itemIconClassName} />
<div className='leading-5'>{t('common.dataSource.notion.remove')}</div> <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

19
web/app/components/header/account-setting/members-page/operation/index.tsx
View File

@ -2,7 +2,7 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment, useMemo } from 'react' import { Fragment, useMemo } from 'react'
import { useContext } from 'use-context-selector' import { useContext } from 'use-context-selector'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline' import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
import s from './index.module.css' import s from './index.module.css'
import { useProviderContext } from '@/context/provider-context' import { useProviderContext } from '@/context/provider-context'
@ -79,7 +79,7 @@ const Operation = ({
{ {
({ open }) => ( ({ open }) => (
<> <>
<Menu.Button className={cn( <MenuButton className={cn(
` `
group flex items-center justify-between w-full h-full group flex items-center justify-between w-full h-full
hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'} hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
@ -88,9 +88,8 @@ const Operation = ({
)}> )}>
{RoleMap[member.role] || RoleMap.normal} {RoleMap[member.role] || RoleMap.normal}
<ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} /> <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -98,7 +97,7 @@ const Operation = ({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className={cn( className={cn(
` `
absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200 absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
@ -110,7 +109,7 @@ const Operation = ({
<div className="px-1 py-1"> <div className="px-1 py-1">
{ {
roleList.map(role => ( roleList.map(role => (
<Menu.Item key={role}> <MenuItem key={role}>
<div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}> <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
{ {
role === member.role role === member.role
@ -122,11 +121,11 @@ const Operation = ({
<div className={itemDescClassName}>{t(`common.members.${toHump(role)}Tip`)}</div> <div className={itemDescClassName}>{t(`common.members.${toHump(role)}Tip`)}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
)) ))
} }
</div> </div>
<Menu.Item> <MenuItem>
<div className='px-1 py-1'> <div className='px-1 py-1'>
<div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}> <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
<div className={itemIconClassName} /> <div className={itemIconClassName} />
@ -136,8 +135,8 @@ const Operation = ({
</div> </div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

15
web/app/components/header/account-setting/menu-dialog.tsx
View File

@ -1,7 +1,7 @@
import { Fragment, useCallback, useEffect } from 'react' import { useCallback, useEffect } from 'react'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine } from '@remixicon/react'
import { Dialog, Transition } from '@headlessui/react' import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
@ -33,12 +33,11 @@ const MenuDialog = ({
}, [close]) }, [close])
return ( return (
<Transition appear show={show} as={Fragment}> <Transition appear show={show}>
<Dialog as="div" className="relative z-40" onClose={() => {}}> <Dialog as="div" className="relative z-40" onClose={() => {}}>
<div className="fixed inset-0"> <div className="fixed inset-0">
<div className="flex flex-col items-center justify-center min-h-full"> <div className="flex flex-col items-center justify-center min-h-full">
<Transition.Child <TransitionChild
as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 scale-95" enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100" enterTo="opacity-100 scale-100"
@ -46,7 +45,7 @@ const MenuDialog = ({
leaveFrom="opacity-100 scale-100" leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}> <DialogPanel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
<div className='absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg'/> <div className='absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg'/>
<div className='absolute top-6 right-6 flex flex-col items-center'> <div className='absolute top-6 right-6 flex flex-col items-center'>
<Button <Button
@ -60,8 +59,8 @@ const MenuDialog = ({
<div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div> <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
</div> </div>
{children} {children}
</Dialog.Panel> </DialogPanel>
</Transition.Child> </TransitionChild>
</div> </div>
</div> </div>
</Dialog> </Dialog>

15
web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
View File

@ -1,6 +1,6 @@
import { Fragment } from 'react' import { Fragment } from 'react'
import type { FC } from 'react' import type { FC } from 'react'
import { Popover, Transition } from '@headlessui/react' import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { import {
RiCheckLine, RiCheckLine,
@ -31,7 +31,7 @@ const Selector: FC<SelectorProps> = ({
return ( return (
<Popover className='relative'> <Popover className='relative'>
<Popover.Button> <PopoverButton>
{ {
({ open }) => ( ({ open }) => (
<Button className={` <Button className={`
@ -42,19 +42,18 @@ const Selector: FC<SelectorProps> = ({
</Button> </Button>
) )
} }
</Popover.Button> </PopoverButton>
<Transition <Transition
as={Fragment}
leave='transition ease-in duration-100' leave='transition ease-in duration-100'
leaveFrom='opacity-100' leaveFrom='opacity-100'
leaveTo='opacity-0' leaveTo='opacity-0'
> >
<Popover.Panel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'> <PopoverPanel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
<div className='p-1'> <div className='p-1'>
<div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div> <div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div>
{ {
options.map(option => ( options.map(option => (
<Popover.Button as={Fragment} key={option.key}> <PopoverButton as={Fragment} key={option.key}>
<div <div
className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
onClick={() => onSelect(option.key)} onClick={() => onSelect(option.key)}
@ -62,11 +61,11 @@ const Selector: FC<SelectorProps> = ({
<div className='grow'>{option.text}</div> <div className='grow'>{option.text}</div>
{value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />} {value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />}
</div> </div>
</Popover.Button> </PopoverButton>
)) ))
} }
</div> </div>
</Popover.Panel> </PopoverPanel>
</Transition> </Transition>
</Popover> </Popover>
) )

21
web/app/components/header/app-selector/index.tsx
View File

@ -1,8 +1,8 @@
'use client' 'use client'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment, useState } from 'react' import { useState } from 'react'
import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid' import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import Indicator from '../indicator' import Indicator from '../indicator'
import type { AppDetailResponse } from '@/models/app' import type { AppDetailResponse } from '@/models/app'
@ -30,7 +30,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
<div className=""> <div className="">
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block text-left">
<div> <div>
<Menu.Button <MenuButton
className=" className="
inline-flex items-center w-full h-7 justify-center inline-flex items-center w-full h-7 justify-center
rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
@ -42,10 +42,9 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
className="w-3 h-3 ml-1" className="w-3 h-3 ml-1"
aria-hidden="true" aria-hidden="true"
/> />
</Menu.Button> </MenuButton>
</div> </div>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -53,7 +52,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <MenuItems
className=" className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80 absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@ -63,7 +62,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
{!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}> {!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
{ {
appItems.map((app: AppDetailResponse) => ( appItems.map((app: AppDetailResponse) => (
<Menu.Item key={app.id}> <MenuItem key={app.id}>
<div className={itemClassName} onClick={() => <div className={itemClassName} onClick={() =>
router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`) router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)
}> }>
@ -75,11 +74,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
</div> </div>
{app.name} {app.name}
</div> </div>
</Menu.Item> </MenuItem>
)) ))
} }
</div>)} </div>)}
{isCurrentWorkspaceEditor && <Menu.Item> {isCurrentWorkspaceEditor && <MenuItem>
<div className='p-1' onClick={() => setShowNewAppDialog(true)}> <div className='p-1' onClick={() => setShowNewAppDialog(true)}>
<div <div
className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100' className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
@ -96,9 +95,9 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
<div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div> <div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
} }
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
<CreateAppDialog <CreateAppDialog

27
web/app/components/header/nav/nav-selector/index.tsx
View File

@ -6,7 +6,7 @@ import {
RiArrowDownSLine, RiArrowDownSLine,
RiArrowRightSLine, RiArrowRightSLine,
} from '@remixicon/react' } from '@remixicon/react'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
@ -57,7 +57,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block text-left">
{({ open }) => ( {({ open }) => (
<> <>
<Menu.Button className={cn( <MenuButton className={cn(
'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover', 'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover',
open && 'bg-components-main-nav-nav-button-bg-active', open && 'bg-components-main-nav-nav-button-bg-active',
)}> )}>
@ -66,8 +66,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')} className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
aria-hidden="true" aria-hidden="true"
/> />
</Menu.Button> </MenuButton>
<Menu.Items <MenuItems
className=" className="
absolute -left-11 right-0 mt-1.5 w-60 max-w-80 absolute -left-11 right-0 mt-1.5 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@ -77,7 +77,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}> <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
{ {
navs.map(nav => ( navs.map(nav => (
<Menu.Item key={nav.id}> <MenuItem key={nav.id}>
<div className='flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate' onClick={() => { <div className='flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate' onClick={() => {
if (curNav?.id === nav.id) if (curNav?.id === nav.id)
return return
@ -112,12 +112,12 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
{nav.name} {nav.name}
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
)) ))
} }
</div> </div>
{!isApp && isCurrentWorkspaceEditor && ( {!isApp && isCurrentWorkspaceEditor && (
<Menu.Button className='p-1 w-full'> <MenuButton className='p-1 w-full'>
<div onClick={() => onCreate('')} className={cn( <div onClick={() => onCreate('')} className={cn(
'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100', 'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
)}> )}>
@ -126,13 +126,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
</div> </div>
<div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div> <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
</div> </div>
</Menu.Button> </MenuButton>
)} )}
{isApp && isCurrentWorkspaceEditor && ( {isApp && isCurrentWorkspaceEditor && (
<Menu as="div" className="relative w-full h-full"> <Menu as="div" className="relative w-full h-full">
{({ open }) => ( {({ open }) => (
<> <>
<Menu.Button className='p-1 w-full'> <MenuButton className='p-1 w-full'>
<div className={cn( <div className={cn(
'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100', 'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
open && '!bg-gray-100', open && '!bg-gray-100',
@ -143,9 +143,8 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
<div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div> <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
<RiArrowRightSLine className='shrink-0 w-3.5 h-3.5 text-gray-500' /> <RiArrowRightSLine className='shrink-0 w-3.5 h-3.5 text-gray-500' />
</div> </div>
</Menu.Button> </MenuButton>
<Transition <Transition
as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
@ -153,7 +152,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className={cn( <MenuItems className={cn(
'absolute top-[3px] right-[-198px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg', 'absolute top-[3px] right-[-198px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg',
)}> )}>
<div className='p-1'> <div className='p-1'>
@ -172,13 +171,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
{t('app.importDSL')} {t('app.importDSL')}
</div> </div>
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
)} )}
</Menu> </Menu>
)} )}
</Menu.Items> </MenuItems>
</> </>
)} )}
</Menu> </Menu>

4
web/package.json
View File

@ -29,7 +29,7 @@
"@emoji-mart/data": "^1.2.1", "@emoji-mart/data": "^1.2.1",
"@floating-ui/react": "^0.25.2", "@floating-ui/react": "^0.25.2",
"@formatjs/intl-localematcher": "^0.5.6", "@formatjs/intl-localematcher": "^0.5.6",
"@headlessui/react": "^1.7.13", "@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.0.16", "@heroicons/react": "^2.0.16",
"@hookform/resolvers": "^3.3.4", "@hookform/resolvers": "^3.3.4",
"@lexical/react": "^0.18.0", "@lexical/react": "^0.18.0",
@ -153,9 +153,9 @@
"eslint": "^9.13.0", "eslint": "^9.13.0",
"eslint-config-next": "^15.0.0", "eslint-config-next": "^15.0.0",
"eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-hooks": "^5.0.0",
"husky": "^9.1.6",
"eslint-plugin-react-refresh": "^0.4.13", "eslint-plugin-react-refresh": "^0.4.13",
"eslint-plugin-storybook": "^0.10.1", "eslint-plugin-storybook": "^0.10.1",
"husky": "^9.1.6",
"jest": "^29.7.0", "jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"lint-staged": "^15.2.10", "lint-staged": "^15.2.10",

103
web/pnpm-lock.yaml
View File

@ -29,8 +29,8 @@ importers:
specifier: ^0.5.6 specifier: ^0.5.6
version: 0.5.6 version: 0.5.6
'@headlessui/react': '@headlessui/react':
specifier: ^1.7.13 specifier: ^2.2.0
version: 1.7.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0) version: 2.2.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@heroicons/react': '@heroicons/react':
specifier: ^2.0.16 specifier: ^2.0.16
version: 2.1.5(react@18.2.0) version: 2.1.5(react@18.2.0)
@ -1433,6 +1433,12 @@ packages:
react: '>=16.8.0' react: '>=16.8.0'
react-dom: '>=16.8.0' react-dom: '>=16.8.0'
'@floating-ui/react@0.26.25':
resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@floating-ui/utils@0.1.6': '@floating-ui/utils@0.1.6':
resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
@ -1442,12 +1448,12 @@ packages:
'@formatjs/intl-localematcher@0.5.6': '@formatjs/intl-localematcher@0.5.6':
resolution: {integrity: sha512-roz1+Ba5e23AHX6KUAWmLEyTRZegM5YDuxuvkHCyK3RJddf/UXB2f+s7pOMm9ktfPGla0g+mQXOn5vsuYirnaA==} resolution: {integrity: sha512-roz1+Ba5e23AHX6KUAWmLEyTRZegM5YDuxuvkHCyK3RJddf/UXB2f+s7pOMm9ktfPGla0g+mQXOn5vsuYirnaA==}
'@headlessui/react@1.7.19': '@headlessui/react@2.2.0':
resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==} resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
engines: {node: '>=10'} engines: {node: '>=10'}
peerDependencies: peerDependencies:
react: ^16 || ^17 || ^18 react: ^18 || ^19 || ^19.0.0-rc
react-dom: ^16 || ^17 || ^18 react-dom: ^18 || ^19 || ^19.0.0-rc
'@heroicons/react@2.1.5': '@heroicons/react@2.1.5':
resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==} resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==}
@ -1981,6 +1987,37 @@ packages:
webpack-plugin-serve: webpack-plugin-serve:
optional: true optional: true
'@react-aria/focus@3.18.4':
resolution: {integrity: sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
'@react-aria/interactions@3.22.4':
resolution: {integrity: sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
'@react-aria/ssr@3.9.6':
resolution: {integrity: sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==}
engines: {node: '>= 12'}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
'@react-aria/utils@3.25.3':
resolution: {integrity: sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
'@react-stately/utils@3.10.4':
resolution: {integrity: sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
'@react-types/shared@3.25.0':
resolution: {integrity: sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
'@reactflow/background@11.3.14': '@reactflow/background@11.3.14':
resolution: {integrity: sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==} resolution: {integrity: sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==}
peerDependencies: peerDependencies:
@ -9353,6 +9390,14 @@ snapshots:
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
tabbable: 6.2.0 tabbable: 6.2.0
'@floating-ui/react@0.26.25(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@floating-ui/utils': 0.2.8
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
tabbable: 6.2.0
'@floating-ui/utils@0.1.6': {} '@floating-ui/utils@0.1.6': {}
'@floating-ui/utils@0.2.8': {} '@floating-ui/utils@0.2.8': {}
@ -9361,10 +9406,12 @@ snapshots:
dependencies: dependencies:
tslib: 2.8.0 tslib: 2.8.0
'@headlessui/react@1.7.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': '@headlessui/react@2.2.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies: dependencies:
'@floating-ui/react': 0.26.25(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@react-aria/focus': 3.18.4(react@18.2.0)
'@react-aria/interactions': 3.22.4(react@18.2.0)
'@tanstack/react-virtual': 3.10.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@tanstack/react-virtual': 3.10.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
client-only: 0.0.1
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
@ -10001,6 +10048,46 @@ snapshots:
type-fest: 2.19.0 type-fest: 2.19.0
webpack-hot-middleware: 2.26.1 webpack-hot-middleware: 2.26.1
'@react-aria/focus@3.18.4(react@18.2.0)':
dependencies:
'@react-aria/interactions': 3.22.4(react@18.2.0)
'@react-aria/utils': 3.25.3(react@18.2.0)
'@react-types/shared': 3.25.0(react@18.2.0)
'@swc/helpers': 0.5.5
clsx: 2.1.1
react: 18.2.0
'@react-aria/interactions@3.22.4(react@18.2.0)':
dependencies:
'@react-aria/ssr': 3.9.6(react@18.2.0)
'@react-aria/utils': 3.25.3(react@18.2.0)
'@react-types/shared': 3.25.0(react@18.2.0)
'@swc/helpers': 0.5.5
react: 18.2.0
'@react-aria/ssr@3.9.6(react@18.2.0)':
dependencies:
'@swc/helpers': 0.5.5
react: 18.2.0
'@react-aria/utils@3.25.3(react@18.2.0)':
dependencies:
'@react-aria/ssr': 3.9.6(react@18.2.0)
'@react-stately/utils': 3.10.4(react@18.2.0)
'@react-types/shared': 3.25.0(react@18.2.0)
'@swc/helpers': 0.5.5
clsx: 2.1.1
react: 18.2.0
'@react-stately/utils@3.10.4(react@18.2.0)':
dependencies:
'@swc/helpers': 0.5.5
react: 18.2.0
'@react-types/shared@3.25.0(react@18.2.0)':
dependencies:
react: 18.2.0
'@reactflow/background@11.3.14(@types/react@18.2.79)(immer@9.0.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': '@reactflow/background@11.3.14(@types/react@18.2.79)(immer@9.0.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies: dependencies:
'@reactflow/core': 11.11.4(@types/react@18.2.79)(immer@9.0.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@reactflow/core': 11.11.4(@types/react@18.2.79)(immer@9.0.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)