ngskcloud
/
gcgj-dify-1.7.0
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: others headless change

Browse Source
chore/upgrade-next
Joel 1 year ago
parent e797e97b18
commit 333aae6795
13 changed files with 152 additions and 153 deletions
Show Stats Download Patch File Download Diff File

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

@ -5,7 +5,7 @@ import React, { Fragment } 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'
@ -67,7 +67,7 @@ const VoiceParamConfig = ({
<> <>
<div className='mb-4 flex items-center justify-between'> <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='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>
<div className='mb-3'> <div className='mb-3'>
<div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'> <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'> <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,7 +103,7 @@ const VoiceParamConfig = ({
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
</Listbox.Button> </ListboxButton>
<Transition <Transition
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
@ -111,10 +111,10 @@ const VoiceParamConfig = ({
leaveTo="opacity-0" 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"> 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
key={item.value} key={item.value}
className={({ active }) => 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' : '' `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', '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> </span>
)} )}
</> </>
)} )}
</Listbox.Option> </ListboxOption>
))} ))}
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
</div> </div>
</Listbox> </Listbox>
@ -160,7 +160,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,7 +170,7 @@ const VoiceParamConfig = ({
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
</Listbox.Button> </ListboxButton>
<Transition <Transition
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
@ -178,10 +178,10 @@ const VoiceParamConfig = ({
leaveTo="opacity-0" 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"> 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
key={item.value} key={item.value}
className={({ active }) => 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' : '' `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', '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> </span>
)} )}
</> </>
)} )}
</Listbox.Option> </ListboxOption>
))} ))}
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
</div> </div>
</Listbox> </Listbox>

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

@ -1,7 +1,7 @@
'use client' 'use client'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment } from 'react' 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 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 +25,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,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 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} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -44,7 +44,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 +55,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 +70,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>
</> </>
) )

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

34
web/app/components/base/select/index.tsx
Unescape Escape 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, { 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 { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
import { RiCheckLine } from '@remixicon/react' import { RiCheckLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -100,7 +100,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)
@ -108,28 +108,28 @@ 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 && open) && ( {(filteredItems.length > 0 && open) && (
<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}`}>
{filteredItems.map((item: Item) => ( {filteredItems.map((item: Item) => (
<Combobox.Option <ComboboxOption
key={item.value} key={item.value}
value={item} value={item}
className={({ active }: { active: boolean }) => className={({ active }: { active: boolean }) =>
@ -160,9 +160,9 @@ const Select: FC<ISelectProps> = ({
)} )}
</> </>
)} )}
</Combobox.Option> </ComboboxOption>
))} ))}
</Combobox.Options> </ComboboxOptions>
)} )}
</div> </div>
</Combobox > </Combobox >
@ -209,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-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={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)
@ -233,7 +233,7 @@ const SimpleSelect: FC<ISelectProps> = ({
/> />
)} )}
</span> </span>
</Listbox.Button> </ListboxButton>
)} )}
{!disabled && ( {!disabled && (
@ -244,9 +244,9 @@ const SimpleSelect: FC<ISelectProps> = ({
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-components-panel-bg-blur 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 py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
{items.map((item: Item) => ( {items.map((item: Item) => (
<Listbox.Option <ListboxOption
key={item.value} key={item.value}
className={({ active }) => className={({ active }) =>
classNames( classNames(
@ -275,9 +275,9 @@ const SimpleSelect: FC<ISelectProps> = ({
</>)} </>)}
</> </>
)} )}
</Listbox.Option> </ListboxOption>
))} ))}
</Listbox.Options> </ListboxOptions>
</Transition> </Transition>
)} )}
</div> </div>

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

@ -1,7 +1,8 @@
'use client' 'use client'
import { Menu, Transition } from '@headlessui/react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
import { Fragment } from 'react' import { Fragment } from 'react'
import { GlobeAltIcon } from '@heroicons/react/24/outline' import { GlobeAltIcon } from '@heroicons/react/24/outline'
import cn from '@/utils/classnames'
type ISelectProps = { type ISelectProps = {
items: Array<{ value: string; name: string }> items: Array<{ value: string; name: string }>
@ -21,14 +22,14 @@ 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} as={Fragment}
@ -39,14 +40,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 }) => ( {({ active }) => (
<button <button
className={`${active ? 'bg-gray-100' : '' className={cn(active && '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()
onChange && onChange(item.value) onChange && onChange(item.value)
@ -55,12 +55,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,9 +77,9 @@ 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} as={Fragment}
@ -90,14 +90,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 }) => ( {({ active }) => (
<button <button
className={`${active ? 'bg-gray-100' : '' className={`${active ? '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 +104,12 @@ export function InputSelect({
{item.name} {item.name}
</button> </button>
)} )}
</Menu.Item> </MenuItem>
})} })}
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>

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

@ -7,7 +7,7 @@ import {
useRef, useRef,
useState, useState,
} from 'react' } from 'react'
import { Tab } from '@headlessui/react' import { Tab, TabGroup, 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>
) )
} }
@ -260,7 +260,7 @@ export function CodeGroup({ children, title, inputs, targetCode, ...props }: ICh
) )
const tabGroupProps = useTabGroupProps(languages) const tabGroupProps = useTabGroupProps(languages)
const hasTabs = Children.count(children) > 1 const hasTabs = Children.count(children) > 1
const Container = hasTabs ? Tab.Group : 'div' const Container = hasTabs ? TabGroup : 'div'
const containerProps = hasTabs ? tabGroupProps : {} const containerProps = hasTabs ? tabGroupProps : {}
const headerProps = hasTabs const headerProps = hasTabs
? { selectedIndex: tabGroupProps.selectedIndex } ? { selectedIndex: tabGroupProps.selectedIndex }

50
web/app/components/header/account-dropdown/index.tsx
Unescape Escape 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, RiLogoutBoxRLine } from '@remixicon/react' import { RiArrowDownSLine, RiLogoutBoxRLine } 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 }) => (
<> <>
<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,7 +73,7 @@ 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>
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -83,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-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
shadow-lg focus:outline-none shadow-lg focus:outline-none
" "
> >
<Menu.Item disabled> <MenuItem disabled>
<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'>
@ -98,13 +98,13 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div> <div className='system-xs-regular text-text-tertiary break-all'>{userProfile.email}</div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
<div className='px-1 py-1'> <div className='px-1 py-1'>
<div className='mt-2 px-3 text-xs font-medium text-text-tertiary'>{t('common.userProfile.workspace')}</div> <div className='mt-2 px-3 text-xs font-medium text-text-tertiary'>{t('common.userProfile.workspace')}</div>
<WorkplaceSelector /> <WorkplaceSelector />
</div> </div>
<div className="px-1 py-1"> <div className="px-1 py-1">
<Menu.Item> <MenuItem>
{({ active }) => <Link {({ active }) => <Link
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
@ -114,15 +114,15 @@ 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-text-tertiary group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>} </Link>}
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
{({ active }) => <div className={classNames(itemClassName, {({ active }) => <div className={classNames(itemClassName,
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} onClick={() => setShowAccountSettingModal({ payload: 'members' })}> )} 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>
{({ active }) => <a {({ active }) => <a
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
@ -132,8 +132,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-text-tertiary group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</a>} </a>}
</Menu.Item>} </MenuItem>}
<Menu.Item> <MenuItem>
{({ active }) => <Link {({ active }) => <Link
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
@ -143,8 +143,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-text-tertiary group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>} </Link>}
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
{({ active }) => <Link {({ active }) => <Link
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
@ -154,8 +154,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-text-tertiary group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>} </Link>}
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
{({ active }) => <Link {({ active }) => <Link
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
@ -167,8 +167,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-text-tertiary group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
</Link>} </Link>}
</Menu.Item> </MenuItem>
<Menu.Item> <MenuItem>
{({ active }) => <Link {({ active }) => <Link
className={classNames(itemClassName, 'group justify-between', className={classNames(itemClassName, 'group justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
@ -178,10 +178,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-text-tertiary group-hover:flex' /> <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary 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>
{({ active }) => <div className={classNames(itemClassName, 'justify-between', {({ active }) => <div className={classNames(itemClassName, 'justify-between',
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} onClick={() => setAboutVisible(true)}> )} onClick={() => setAboutVisible(true)}>
@ -191,11 +191,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>
{({ active }) => <div className='p-1' onClick={() => handleLogout()}> {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
<div <div
className={ className={
@ -206,8 +206,8 @@ export default function AppSelector({ isMobile }: IAppSelector) {
<RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' /> <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
</div> </div>
</div>} </div>}
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

14
web/app/components/header/account-dropdown/workplace-selector/index.tsx
Unescape Escape 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, MenuItem, MenuItems, Transition } from '@headlessui/react'
import s from './index.module.css' import s from './index.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import { switchWorkspace } from '@/service/common' import { switchWorkspace } from '@/service/common'
@ -48,7 +48,7 @@ const WorkplaceSelector = () => {
{ {
({ open }) => ( ({ open }) => (
<> <>
<Menu.Button className={cn( <MenuButton className={cn(
` `
${itemClassName} w-full ${itemClassName} w-full
group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
@ -57,7 +57,7 @@ const WorkplaceSelector = () => {
<div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div> <div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
<div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div> <div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div>
<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} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -67,7 +67,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(
` `
absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200 absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
@ -79,7 +79,7 @@ const WorkplaceSelector = () => {
<div className="px-1 py-1"> <div className="px-1 py-1">
{ {
workspaces.map(workspace => ( workspaces.map(workspace => (
<Menu.Item key={workspace.id}> <MenuItem key={workspace.id}>
{({ active }) => <div className={classNames(itemClassName, {({ active }) => <div className={classNames(itemClassName,
active && 'bg-state-base-hover', active && 'bg-state-base-hover',
)} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}> )} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
@ -88,11 +88,11 @@ const WorkplaceSelector = () => {
{workspace.current && <Check className={itemCheckClassName} />} {workspace.current && <Check className={itemCheckClassName} />}
</div>} </div>}
</Menu.Item> </MenuItem>
)) ))
} }
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

22
web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
Unescape Escape 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,9 +54,9 @@ 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} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -66,7 +66,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 +74,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 +87,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>
</> </>
) )

18
web/app/components/header/account-setting/members-page/operation/index.tsx
Unescape Escape 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'
@ -90,7 +90,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'}
@ -99,7 +99,7 @@ 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} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -109,7 +109,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
@ -121,7 +121,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
@ -133,11 +133,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} />
@ -147,8 +147,8 @@ const Operation = ({
</div> </div>
</div> </div>
</div> </div>
</Menu.Item> </MenuItem>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</> </>
) )

14
web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
Unescape Escape 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,19 @@ const Selector: FC<SelectorProps> = ({
</Button> </Button>
) )
} }
</Popover.Button> </PopoverButton>
<Transition <Transition
as={Fragment} 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 +62,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>
) )

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

@ -2,7 +2,7 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Fragment, useState } from 'react' import { Fragment, 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,7 +42,7 @@ 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} as={Fragment}
@ -53,7 +53,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 +63,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 +75,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,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 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
show={showNewAppDialog} show={showNewAppDialog}
onClose={() => setShowNewAppDialog(false)} onClose={() => setShowNewAppDialog(false)}
onSuccess={() => {}} onSuccess={() => { }}
/> />
</div> </div>
) )

28
web/app/components/header/nav/nav-selector/index.tsx
Unescape Escape 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
@ -85,7 +85,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
router.push(nav.link) router.push(nav.link)
}} title={nav.name}> }} title={nav.name}>
<div className='relative w-6 h-6 mr-2 rounded-md'> <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 && ( {!!nav.mode && (
<span className={cn( <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', '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} {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,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> <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} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -153,7 +153,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 +172,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>

Write Preview
Loading…
Cancel
Save