jandres/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-01-07 23:04:12 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

chore: change headlessui api to new

Browse Source
This commit is contained in:
Joel
2025-01-26 15:02:31 +08:00
parent c044cc5160
commit fd5028da5b
22 changed files with 305 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,13 +2,13 @@
import { useTranslation } from 'react-i18next'
import { Fragment } from 'react'
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 { logout } from '@/service/common'
import { useAppContext } from '@/context/app-context'
import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
export interface IAppSelector {
export type IAppSelector = {
isMobile: boolean
}
@@ -36,7 +36,7 @@ export default function AppSelector() {
({ open }) => (
<>
<div>
<Menu.Button
<MenuButton
className={`
inline-flex items-center
rounded-[20px] p-1x text-sm
@@ -46,7 +46,7 @@ export default function AppSelector() {
`}
>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
</Menu.Button>
</MenuButton>
</div>
<Transition
as={Fragment}
@@ -57,14 +57,14 @@ export default function AppSelector() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="
absolute -right-2 -top-1 w-60 max-w-80
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
shadow-lg
"
>
<Menu.Item>
<MenuItem>
<div className='p-1'>
<div className='flex flex-nowrap items-center px-3 py-2'>
<div className='grow'>
@@ -74,8 +74,8 @@ export default function AppSelector() {
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
</div>
</div>
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
<div className='p-1' onClick={() => handleLogout()}>
<div
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
@@ -84,8 +84,8 @@ export default function AppSelector() {
<div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
</div>
</div>
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</>
)

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

@@ -10,7 +10,7 @@ import { useContext } from 'use-context-selector'
import {
useCSVDownloader,
} from 'react-papaparse'
import { Menu, Transition } from '@headlessui/react'
import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import Button from '../../../base/button'
import AddAnnotationModal from '../add-annotation-modal'
import type { AnnotationItemBasic } from '../type'
@@ -87,11 +87,11 @@ const HeaderOptions: FC<Props> = ({
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
</button>
<Menu as="div" className="relative w-full h-full">
<Menu.Button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
<MenuButton className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
<FileDownload02 className='w-4 h-4 text-text-tertiary' />
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -101,7 +101,7 @@ const HeaderOptions: FC<Props> = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className={cn(
'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
)}
@@ -122,7 +122,7 @@ const HeaderOptions: FC<Props> = ({
<button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
<span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
</button>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
</div>

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

@@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react'
import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import cn from '@/utils/classnames'
type DialogProps = {
@@ -20,7 +20,7 @@ const NewAppDialog = ({
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -30,11 +30,13 @@ const NewAppDialog = ({
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<div className="fixed inset-0">
<div className="flex flex-col items-center justify-center min-h-full pt-[56px]">
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
@@ -43,10 +45,14 @@ const NewAppDialog = ({
leaveFrom="opacity-100 scale-100"
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}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<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}
</DialogPanel>
</div>
</div>
</Dialog>

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

@@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react'
import type { ElementType, ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'
import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog
@@ -34,7 +34,7 @@ const CustomDialog = ({
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -44,11 +44,13 @@ const CustomDialog = ({
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<div className="fixed inset-0 overflow-y-auto">
<div className="flex items-center justify-center min-h-full">
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
@@ -57,14 +59,14 @@ const CustomDialog = ({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
<DialogPanel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
{Boolean(title) && (
<Dialog.Title
<DialogTitle
as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
>
{title}
</Dialog.Title>
</DialogTitle>
)}
<div className={classNames(bodyClassName)}>
{children}
@@ -74,8 +76,27 @@ const CustomDialog = ({
{footer}
</div>
)}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
{Boolean(title) && (
<DialogTitle
as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
>
{title}
</DialogTitle>
)}
<div className={classNames(bodyClassName)}>
{children}
</div>
{Boolean(footer) && (
<div className={classNames('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
{footer}
</div>
)}
</DialogPanel>
</div>
</div>
</Dialog>

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

@@ -1,5 +1,5 @@
'use client'
import { Dialog } from '@headlessui/react'
import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button'
@@ -48,21 +48,21 @@ export default function Drawer({
>
<div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
{/* mask */}
<Dialog.Overlay
<DialogBackdrop
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-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
<>
{title && <Dialog.Title
{title && <DialogTitle
as="h3"
className="text-lg font-medium leading-6 text-text-primary"
>
{title}
</Dialog.Title>}
{showClose && <Dialog.Title className="flex items-center mb-4" as="div">
</DialogTitle>}
{showClose && <DialogTitle className="flex items-center mb-4" as="div">
<XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={onClose} />
</Dialog.Title>}
{description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>{description}</Dialog.Description>}
</DialogTitle>}
{description && <div className='text-text-tertiary text-xs font-normal mt-2'>{description}</div>}
{children}
</>
{footer || (footer === null

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

@@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react'
import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import cn from '@/utils/classnames'
type DialogProps = {
@@ -22,7 +22,7 @@ const DialogWrapper = ({
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -32,11 +32,13 @@ const DialogWrapper = ({
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-black bg-opacity-25" />
<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')}>
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
@@ -45,10 +47,14 @@ const DialogWrapper = ({
leaveFrom="opacity-100 scale-100"
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}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<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}
</DialogPanel>
</div>
</div>
</Dialog>

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

@@ -5,7 +5,7 @@ import React, { Fragment } from 'react'
import { usePathname } from 'next/navigation'
import { useTranslation } from 'react-i18next'
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 { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
import type { Item } from '@/app/components/base/select'
@@ -67,7 +67,7 @@ const VoiceParamConfig = ({
<>
<div className='mb-4 flex items-center justify-between'>
<div className='text-text-primary system-xl-semibold'>{t('appDebug.voice.voiceSettings.title')}</div>
<div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
<div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary' /></div>
</div>
<div className='mb-3'>
<div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
@@ -92,7 +92,7 @@ const VoiceParamConfig = ({
}}
>
<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'}>
<span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}>
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
@@ -103,7 +103,7 @@ const VoiceParamConfig = ({
aria-hidden="true"
/>
</span>
</Listbox.Button>
</ListboxButton>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
@@ -111,10 +111,10 @@ const VoiceParamConfig = ({
leaveTo="opacity-0"
>
<Listbox.Options
<ListboxOptions
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) => (
<Listbox.Option
<ListboxOption
key={item.value}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
@@ -133,14 +133,14 @@ const VoiceParamConfig = ({
'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true"/>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
)}
</>
)}
</Listbox.Option>
</ListboxOption>
))}
</Listbox.Options>
</ListboxOptions>
</Transition>
</div>
</Listbox>
@@ -160,7 +160,7 @@ const VoiceParamConfig = ({
}}
>
<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'}>
<span
className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
@@ -170,7 +170,7 @@ const VoiceParamConfig = ({
aria-hidden="true"
/>
</span>
</Listbox.Button>
</ListboxButton>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
@@ -178,10 +178,10 @@ const VoiceParamConfig = ({
leaveTo="opacity-0"
>
<Listbox.Options
<ListboxOptions
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) => (
<Listbox.Option
<ListboxOption
key={item.value}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
@@ -199,14 +199,14 @@ const VoiceParamConfig = ({
'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true"/>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
)}
</>
)}
</Listbox.Option>
</ListboxOption>
))}
</Listbox.Options>
</ListboxOptions>
</Transition>
</div>
</Listbox>

34
web/app/components/base/fullscreen-modal/index.tsx
View File

@@ -1,4 +1,4 @@
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { RiCloseLargeLine } from '@remixicon/react'
import classNames from '@/utils/classnames'
@@ -27,7 +27,7 @@ export default function FullScreenModal({
return (
<Transition show={open} as={Fragment}>
<Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -37,7 +37,9 @@ export default function FullScreenModal({
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
</Transition.Child>
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]" />
<div
className="fixed inset-0 h-screen w-screen p-4"
@@ -47,7 +49,7 @@ export default function FullScreenModal({
}}
>
<div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
@@ -56,7 +58,7 @@ export default function FullScreenModal({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className={classNames(
<DialogPanel className={classNames(
'h-full',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
@@ -72,8 +74,26 @@ export default function FullScreenModal({
<RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
</div>}
{children}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={classNames(
'h-full',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
)}>
{closable
&& <div
className='absolute z-50 top-3 right-3 w-9 h-9 flex items-center justify-center rounded-[10px]
bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer'
onClick={(e) => {
e.stopPropagation()
onClose()
}}>
<RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
</div>}
{children}
</DialogPanel>
</div>
</div>
</Dialog>

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

@@ -1,4 +1,4 @@
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import { RiCloseLine } from '@remixicon/react'
import classNames from '@/utils/classnames'
@@ -30,7 +30,7 @@ export default function Modal({
return (
<Transition appear show={isShow} as={Fragment}>
<Dialog as="div" className={classNames('relative z-[60]', wrapperClassName)} onClose={onClose}>
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
@@ -40,7 +40,9 @@ export default function Modal({
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-background-overlay" />
</Transition.Child>
</Transition.Child> */}
{/* TODO: to new Transition */}
<div className="fixed inset-0 bg-background-overlay" />
<div
className="fixed inset-0 overflow-y-auto"
@@ -50,7 +52,7 @@ export default function Modal({
}}
>
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
@@ -59,20 +61,20 @@ export default function Modal({
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className={classNames(
<DialogPanel className={classNames(
'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
)}>
{title && <Dialog.Title
{title && <DialogTitle
as="h3"
className="title-2xl-semi-bold text-text-primary"
>
{title}
</Dialog.Title>}
{description && <Dialog.Description className='text-text-secondary body-md-regular mt-2'>
</DialogTitle>}
{description && <div className='text-text-secondary body-md-regular mt-2'>
{description}
</Dialog.Description>}
</div>}
{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-state-base-hover'>
<RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
@@ -83,8 +85,34 @@ export default function Modal({
} />
</div>}
{children}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<DialogPanel className={classNames(
'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
className,
)}>
{title && <DialogTitle
as="h3"
className="title-2xl-semi-bold text-text-primary"
>
{title}
</DialogTitle>}
{description && <div className='text-text-secondary body-md-regular mt-2'>
{description}
</div>}
{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-state-base-hover'>
<RiCloseLine className='w-4 h-4 text-text-tertiary' onClick={
(e) => {
e.stopPropagation()
onClose()
}
} />
</div>}
{children}
</DialogPanel>
</div>
</div>
</Dialog>

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

@@ -1,7 +1,7 @@
'use client'
import { useTranslation } from 'react-i18next'
import { Fragment } from 'react'
import { Menu, Transition } from '@headlessui/react'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import NotionIcon from '../../notion-icon'
import s from './index.module.css'
import cn from '@/utils/classnames'
@@ -25,7 +25,7 @@ export default function WorkspaceSelector({
{
({ 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
className='ml-1 mr-2'
src={currentWorkspace?.workspace_icon}
@@ -34,7 +34,7 @@ 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 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')} />
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -44,7 +44,7 @@ export default function WorkspaceSelector({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className={cn(
s.popup,
`absolute left-0 top-8 w-80
@@ -55,7 +55,7 @@ export default function WorkspaceSelector({
<div className="p-1 max-h-50 overflow-auto">
{
items.map(item => (
<Menu.Item key={item.workspace_id}>
<MenuItem key={item.workspace_id}>
<div
className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
onClick={() => onSelect(item.workspace_id)}
@@ -70,11 +70,11 @@ export default function WorkspaceSelector({
{item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
</div>
</div>
</Menu.Item>
</MenuItem>
))
}
</div>
</Menu.Items>
</MenuItems>
</Transition>
</>
)

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

@@ -1,4 +1,4 @@
import { Popover, Transition } from '@headlessui/react'
import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
import { Fragment, cloneElement, useRef } from 'react'
import cn from '@/utils/classnames'
@@ -59,7 +59,7 @@ export default function CustomPopover({
onMouseEnter: () => onMouseEnter(open),
})}
>
<Popover.Button
<PopoverButton
ref={buttonRef}
disabled={disabled}
className={cn(
@@ -70,9 +70,9 @@ export default function CustomPopover({
)}
>
{btnElement}
</Popover.Button>
</PopoverButton>
<Transition as={Fragment}>
<Popover.Panel
<PopoverPanel
className={cn(
'absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl',
position === 'bottom' && '-translate-x-1/2 left-1/2',
@@ -109,7 +109,7 @@ export default function CustomPopover({
})}
</div>
)}
</Popover.Panel>
</PopoverPanel>
</Transition>
</div>
</>

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

@@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React, { Fragment, 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 { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
import Badge from '../badge/index'
import { RiCheckLine } from '@remixicon/react'
@@ -101,7 +101,7 @@ const Select: FC<ISelectProps> = ({
<div className={classNames('relative')}>
<div className='group text-text-secondary'>
{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-state-base-hover group-hover:bg-state-base-hover ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
onChange={(event) => {
if (!disabled)
@@ -109,28 +109,28 @@ const Select: FC<ISelectProps> = ({
}}
displayValue={(item: Item) => item?.name}
/>
: <Combobox.Button onClick={
: <ComboboxButton onClick={
() => {
if (!disabled)
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-state-base-hover group-hover:bg-state-base-hover`, optionClassName)}>
<div className='w-0 grow text-left truncate' title={selectedItem?.name}>{selectedItem?.name}</div>
</Combobox.Button>}
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
</ComboboxButton>}
<ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
() => {
if (!disabled)
setOpen(!open)
}
}>
{open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
</Combobox.Button>
</ComboboxButton>
</div>
{(filteredItems.length > 0 && open) && (
<Combobox.Options className={`absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border 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-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm ${overlayClassName}`}>
{filteredItems.map((item: Item) => (
<Combobox.Option
<ComboboxOption
key={item.value}
value={item}
className={({ active }: { active: boolean }) =>
@@ -161,9 +161,9 @@ const Select: FC<ISelectProps> = ({
)}
</>
)}
</Combobox.Option>
</ComboboxOption>
))}
</Combobox.Options>
</ComboboxOptions>
)}
</div>
</Combobox >
@@ -210,9 +210,9 @@ const SimpleSelect: FC<ISelectProps> = ({
}}
>
<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 && (
<Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt 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-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt 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="absolute inset-y-0 right-0 flex items-center pr-2">
{(selectedItem && !notClearable)
@@ -234,7 +234,7 @@ const SimpleSelect: FC<ISelectProps> = ({
/>
)}
</span>
</Listbox.Button>
</ListboxButton>
)}
{!disabled && (
@@ -245,9 +245,9 @@ const SimpleSelect: FC<ISelectProps> = ({
leaveTo="opacity-0"
>
<Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border 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-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
{items.map((item: Item) => (
<Listbox.Option
<ListboxOption
key={item.value}
className={({ active }) =>
classNames(
@@ -276,9 +276,9 @@ const SimpleSelect: FC<ISelectProps> = ({
</>)}
</>
)}
</Listbox.Option>
</ListboxOption>
))}
</Listbox.Options>
</ListboxOptions>
</Transition>
)}
</div>

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

@@ -1,7 +1,8 @@
'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 cn from '@/utils/classnames'
type ISelectProps = {
items: Array<{ value: string; name: string }>
@@ -21,14 +22,14 @@ export default function Select({
<div className="w-56 text-right">
<Menu as="div" className="relative inline-block text-left">
<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]
text-gray-900 text-[13px] font-medium
border border-gray-200
hover:bg-gray-100">
<GlobeAltIcon className="w-5 h-5 mr-1" aria-hidden="true" />
{item?.name}
</Menu.Button>
</MenuButton>
</div>
<Transition
as={Fragment}
@@ -39,14 +40,13 @@ export default function Select({
leaveFrom="transform opacity-100 scale-100"
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 ">
{items.map((item) => {
return <Menu.Item key={item.value}>
return <MenuItem key={item.value}>
{({ active }) => (
<button
className={`${active ? 'bg-gray-100' : ''
} group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700`}
className={cn(active && 'bg-gray-100', 'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-gray-700')}
onClick={(evt) => {
evt.preventDefault()
onChange && onChange(item.value)
@@ -55,12 +55,12 @@ export default function Select({
{item.name}
</button>
)}
</Menu.Item>
</MenuItem>
})}
</div>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
</div>
@@ -77,9 +77,9 @@ export function InputSelect({
<div className="w-full">
<Menu as="div" className="w-full">
<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:text-gray-400 sm:text-sm h-[38px] text-left">
{item?.name}
</Menu.Button>
</MenuButton>
</div>
<Transition
as={Fragment}
@@ -90,14 +90,13 @@ export function InputSelect({
leaveFrom="transform opacity-100 scale-100"
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 ">
{items.map((item) => {
return <Menu.Item key={item.value}>
return <MenuItem key={item.value}>
{({ active }) => (
<button
className={`${active ? 'bg-gray-100' : ''
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
className={`${active ? 'bg-gray-100' : ''} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
onClick={() => {
onChange && onChange(item.value)
}}
@@ -105,12 +104,12 @@ export function InputSelect({
{item.name}
</button>
)}
</Menu.Item>
</MenuItem>
})}
</div>
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
</div>

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

@@ -7,7 +7,7 @@ import {
useRef,
useState,
} from 'react'
import { Tab } from '@headlessui/react'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tag } from './tag'
import classNames from '@/utils/classnames'
import { writeTextToClipboard } from '@/utils/clipboard'
@@ -162,7 +162,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
</h3>
)}
{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) => (
<Tab
className={classNames(
@@ -175,7 +175,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
{getPanelTitle(child.props.children.props)}
</Tab>
))}
</Tab.List>
</TabList>
)}
</div>
)
@@ -190,13 +190,13 @@ function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsPro
if (hasTabs) {
return (
<Tab.Panels>
<TabPanels>
{Children.map(children, child => (
<Tab.Panel>
<TabPanel>
<CodePanel {...props}>{child}</CodePanel>
</Tab.Panel>
</TabPanel>
))}
</Tab.Panels>
</TabPanels>
)
}
@@ -261,7 +261,7 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
)
const tabGroupProps = useTabGroupProps(languages)
const hasTabs = Children.count(children) > 1
const Container = hasTabs ? Tab.Group : 'div'
const Container = hasTabs ? TabGroup : 'div'
const containerProps = hasTabs ? tabGroupProps : {}
const headerProps = hasTabs
? { selectedIndex: tabGroupProps.selectedIndex }

50
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 { RiArrowDownSLine, RiLogoutBoxRLine } from '@remixicon/react'
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 AccountAbout from '../account-about'
import { mailToSupport } from '../utils/util'
@@ -58,7 +58,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{
({ open }) => (
<>
<Menu.Button
<MenuButton
className={`
inline-flex items-center
rounded-[20px] py-1 pr-2.5 pl-1 text-sm
@@ -72,7 +72,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
{userProfile.name}
<RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
</>}
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -82,14 +82,14 @@ export default function AppSelector({ isMobile }: IAppSelector) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="
absolute right-0 mt-1.5 w-60 max-w-80
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
shadow-lg focus:outline-none
"
>
<Menu.Item disabled>
<MenuItem disabled>
<div className='flex flex-nowrap items-center px-4 py-[13px]'>
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} className='mr-3' />
<div className='grow'>
@@ -97,9 +97,9 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
</div>
</div>
</Menu.Item>
</MenuItem>
<div className="px-1 py-1">
<Menu.Item>
<MenuItem>
{({ active }) => <Link
className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover',
@@ -109,15 +109,15 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.account.account')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => <div className={classNames(itemClassName,
active && 'bg-state-base-hover',
)} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
<div>{t('common.userProfile.settings')}</div>
</div>}
</Menu.Item>
{canEmailSupport && <Menu.Item>
</MenuItem>
{canEmailSupport && <MenuItem>
{({ active }) => <a
className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover',
@@ -127,8 +127,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.emailSupport')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</a>}
</Menu.Item>}
<Menu.Item>
</MenuItem>}
<MenuItem>
{({ active }) => <Link
className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover',
@@ -138,8 +138,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.communityFeedback')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => <Link
className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover',
@@ -149,8 +149,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.community')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => <Link
className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover',
@@ -162,8 +162,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.helpCenter')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>}
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
{({ active }) => <Link
className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover',
@@ -173,10 +173,10 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div>{t('common.userProfile.roadmap')}</div>
<ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>}
</Menu.Item>
</MenuItem>
{
document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
<Menu.Item>
<MenuItem>
{({ active }) => <div className={classNames(itemClassName, 'justify-between',
active && 'bg-state-base-hover',
)} onClick={() => setAboutVisible(true)}>
@@ -186,11 +186,11 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
</div>
</div>}
</Menu.Item>
</MenuItem>
)
}
</div>
<Menu.Item>
<MenuItem>
{({ active }) => <div className='p-1' onClick={() => handleLogout()}>
<div
className={
@@ -201,8 +201,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
</div>
</div>}
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</>
)

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

@@ -1,7 +1,7 @@
import { Fragment } from 'react'
import { useContext } from 'use-context-selector'
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 cn from '@/utils/classnames'
import { switchWorkspace } from '@/service/common'
@@ -35,7 +35,7 @@ const WorkplaceSelector = () => {
{
({ open }) => (
<>
<Menu.Button className={cn(
<MenuButton className={cn(
`
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]
@@ -46,7 +46,7 @@ const WorkplaceSelector = () => {
<div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
<RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
</div>
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -56,7 +56,7 @@ const WorkplaceSelector = () => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className={cn(
`
flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg
@@ -85,7 +85,7 @@ const WorkplaceSelector = () => {
))
}
</div>
</Menu.Items>
</MenuItems>
</Transition>
</>
)

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

@@ -8,7 +8,7 @@ import {
RiMoreFill,
RiStickyNoteAddLine,
} 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 Toast from '@/app/components/base/toast'
@@ -54,9 +54,9 @@ export default function Operate({
{
({ 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' />
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -66,7 +66,7 @@ export default function Operate({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="
absolute right-0 top-9 w-60 max-w-80
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
@@ -74,7 +74,7 @@ export default function Operate({
"
>
<div className="px-1 py-1">
<Menu.Item>
<MenuItem>
<div
className={itemClassName}
onClick={onAuthAgain}
@@ -87,23 +87,23 @@ export default function Operate({
</div>
</div>
</div>
</Menu.Item>
<Menu.Item>
</MenuItem>
<MenuItem>
<div className={itemClassName} onClick={handleSync}>
<RiLoopLeftLine className={itemIconClassName} />
<div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
</div>
</Menu.Item>
</MenuItem>
</div>
<Menu.Item>
<MenuItem>
<div className='p-1'>
<div className={itemClassName} onClick={handleRemove}>
<RiDeleteBinLine className={itemIconClassName} />
<div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
</div>
</div>
</Menu.Item>
</Menu.Items>
</MenuItem>
</MenuItems>
</Transition>
</>
)

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

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

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

@@ -1,6 +1,6 @@
import { Fragment, useCallback, useEffect } from 'react'
import type { ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, Transition } from '@headlessui/react'
import cn from '@/utils/classnames'
type DialogProps = {
@@ -32,10 +32,10 @@ const MenuDialog = ({
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-[60]" onClose={() => {}}>
<Dialog as="div" className="relative z-[60]" onClose={() => { }}>
<div className="fixed inset-0">
<div className="flex flex-col items-center justify-center min-h-full">
<Transition.Child
{/* <Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
@@ -44,11 +44,16 @@ const MenuDialog = ({
leaveFrom="opacity-100 scale-100"
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 top-0 right-0 h-full w-1/2 bg-components-panel-bg' />
{children}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</Transition.Child> */}
{/* TODO: to new Transition */}
<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 top-0 right-0 h-full w-1/2 bg-components-panel-bg' />
{children}
</DialogPanel>
</div>
</div>
</Dialog>

14
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 type { FC } from 'react'
import { Popover, Transition } from '@headlessui/react'
import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import {
RiCheckLine,
@@ -32,7 +32,7 @@ const Selector: FC<SelectorProps> = ({
return (
<Popover className='relative'>
<Popover.Button>
<PopoverButton>
{
({ open }) => (
<Button className={cn(
@@ -43,19 +43,19 @@ const Selector: FC<SelectorProps> = ({
</Button>
)
}
</Popover.Button>
</PopoverButton>
<Transition
as={Fragment}
leave='transition ease-in duration-100'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<Popover.Panel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
<PopoverPanel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
<div className='p-1'>
<div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
{
options.map(option => (
<Popover.Button as={Fragment} key={option.key}>
<PopoverButton as={Fragment} key={option.key}>
<div
className='flex items-center justify-between px-3 h-9 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
onClick={() => onSelect(option.key)}
@@ -63,11 +63,11 @@ const Selector: FC<SelectorProps> = ({
<div className='grow'>{option.text}</div>
{value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
</div>
</Popover.Button>
</PopoverButton>
))
}
</div>
</Popover.Panel>
</PopoverPanel>
</Transition>
</Popover>
)

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

@@ -2,7 +2,7 @@
import { useTranslation } from 'react-i18next'
import { Fragment, useState } from 'react'
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 Indicator from '../indicator'
import type { AppDetailResponse } from '@/models/app'
@@ -30,7 +30,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
<div className="">
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button
<MenuButton
className="
inline-flex items-center w-full h-7 justify-center
rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
@@ -42,7 +42,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
className="w-3 h-3 ml-1"
aria-hidden="true"
/>
</Menu.Button>
</MenuButton>
</div>
<Transition
as={Fragment}
@@ -53,7 +53,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
<MenuItems
className="
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
@@ -63,7 +63,7 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
{!!appItems.length && (<div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
{
appItems.map((app: AppDetailResponse) => (
<Menu.Item key={app.id}>
<MenuItem key={app.id}>
<div className={itemClassName} onClick={() =>
router.push(`/app/${app.id}/${isCurrentWorkspaceEditor ? 'configuration' : 'overview'}`)
}>
@@ -75,11 +75,11 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
</div>
{app.name}
</div>
</Menu.Item>
</MenuItem>
))
}
</div>)}
{isCurrentWorkspaceEditor && <Menu.Item>
{isCurrentWorkspaceEditor && <MenuItem>
<div className='p-1' onClick={() => setShowNewAppDialog(true)}>
<div
className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
@@ -96,15 +96,15 @@ export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {
<div className='font-normal text-[14px] text-gray-700'>{t('common.menus.newApp')}</div>
</div>
</div>
</Menu.Item>
</MenuItem>
}
</Menu.Items>
</MenuItems>
</Transition>
</Menu>
<CreateAppDialog
show={showNewAppDialog}
onClose={() => setShowNewAppDialog(false)}
onSuccess={() => {}}
onSuccess={() => { }}
/>
</div>
)

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

@@ -6,7 +6,7 @@ import {
RiArrowDownSLine,
RiArrowRightSLine,
} from '@remixicon/react'
import { Menu, Transition } from '@headlessui/react'
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { useRouter } from 'next/navigation'
import { debounce } from 'lodash-es'
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">
{({ 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',
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')}
aria-hidden="true"
/>
</Menu.Button>
<Menu.Items
</MenuButton>
<MenuItems
className="
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
@@ -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}>
{
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={() => {
if (curNav?.id === nav.id)
return
@@ -85,7 +85,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
router.push(nav.link)
}} title={nav.name}>
<div className='relative w-6 h-6 mr-2 rounded-md'>
<AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url}/>
<AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} />
{!!nav.mode && (
<span className={cn(
'absolute w-3.5 h-3.5 -bottom-0.5 -right-0.5 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
@@ -112,12 +112,12 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
{nav.name}
</div>
</div>
</Menu.Item>
</MenuItem>
))
}
</div>
{!isApp && isCurrentWorkspaceEditor && (
<Menu.Button className='p-1 w-full'>
<MenuButton className='p-1 w-full'>
<div onClick={() => onCreate('')} className={cn(
'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 className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
</div>
</Menu.Button>
</MenuButton>
)}
{isApp && isCurrentWorkspaceEditor && (
<Menu as="div" className="relative w-full h-full">
{({ open }) => (
<>
<Menu.Button className='p-1 w-full'>
<MenuButton className='p-1 w-full'>
<div className={cn(
'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
open && '!bg-gray-100',
@@ -143,7 +143,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
<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' />
</div>
</Menu.Button>
</MenuButton>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -153,7 +153,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
leaveFrom="transform opacity-100 scale-100"
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',
)}>
<div className='p-1'>
@@ -172,13 +172,13 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
{t('app.importDSL')}
</div>
</div>
</Menu.Items>
</MenuItems>
</Transition>
</>
)}
</Menu>
)}
</Menu.Items>
</MenuItems>
</>
)}
</Menu>