feat: can add tree view
Joel
1 year ago
parent
06729f6d9d
commit
074e660a67
@ -1,117 +0,0 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import BlockIcon from '../block-icon'
|
||||
import type { ToolWithProvider } from '../types'
|
||||
import { BlockEnum } from '../types'
|
||||
import type { ToolDefaultValue } from './types'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import type { Tool } from '@/app/components/tools/types'
|
||||
import { useGetLanguage } from '@/context/i18n'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
isToolPlugin: boolean // Tool plugin should choose action
|
||||
provider: ToolWithProvider
|
||||
payload: Tool
|
||||
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
|
||||
}
|
||||
|
||||
const ToolItem: FC<Props> = ({
|
||||
className,
|
||||
isToolPlugin,
|
||||
provider,
|
||||
payload,
|
||||
onSelect,
|
||||
}) => {
|
||||
const language = useGetLanguage()
|
||||
const [isFold, {
|
||||
toggle: toggleFold,
|
||||
}] = useBoolean(false)
|
||||
|
||||
const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
|
||||
|
||||
const actions = [
|
||||
'DuckDuckGo AI Search',
|
||||
'DuckDuckGo Connect',
|
||||
]
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
key={payload.name}
|
||||
position='right'
|
||||
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
|
||||
popupContent={(
|
||||
<div>
|
||||
<BlockIcon
|
||||
size='md'
|
||||
className='mb-2'
|
||||
type={BlockEnum.Tool}
|
||||
toolIcon={provider.icon}
|
||||
/>
|
||||
<div className='mb-1 text-sm leading-5 text-gray-900'>{payload.label[language]}</div>
|
||||
<div className='text-xs text-gray-700 leading-[18px]'>{payload.description[language]}</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className={cn(className)}>
|
||||
<div
|
||||
className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer'
|
||||
onClick={() => {
|
||||
if (isToolPlugin) {
|
||||
toggleFold()
|
||||
return
|
||||
}
|
||||
onSelect(BlockEnum.Tool, {
|
||||
provider_id: provider.id,
|
||||
provider_type: provider.type,
|
||||
provider_name: provider.name,
|
||||
tool_name: payload.name,
|
||||
tool_label: payload.label[language],
|
||||
title: payload.label[language],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className='flex grow items-center h-8'>
|
||||
<BlockIcon
|
||||
className='shrink-0'
|
||||
type={BlockEnum.Tool}
|
||||
toolIcon={provider.icon}
|
||||
/>
|
||||
<div className='ml-2 text-sm text-gray-900 flex-1 w-0 grow truncate'>{payload.label[language]}</div>
|
||||
</div>
|
||||
{isToolPlugin && (
|
||||
<FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
|
||||
)}
|
||||
</div>
|
||||
{(!isFold && isToolPlugin) && (
|
||||
<div>
|
||||
{actions.map(action => (
|
||||
<div
|
||||
key={action}
|
||||
className='rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
|
||||
onClick={() => {
|
||||
onSelect(BlockEnum.Tool, {
|
||||
provider_id: provider.id,
|
||||
provider_type: provider.type,
|
||||
provider_name: provider.name,
|
||||
tool_name: payload.name,
|
||||
tool_label: payload.label[language],
|
||||
title: payload.label[language],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className='h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium'>{action}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
export default React.memo(ToolItem)
|
||||
@ -0,0 +1,64 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { ToolWithProvider } from '../../types'
|
||||
import { BlockEnum } from '../../types'
|
||||
import type { ToolDefaultValue } from '../types'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import type { Tool } from '@/app/components/tools/types'
|
||||
import { useGetLanguage } from '@/context/i18n'
|
||||
import BlockIcon from '../../block-icon'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
provider: ToolWithProvider
|
||||
payload: Tool
|
||||
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
|
||||
}
|
||||
|
||||
const ToolItem: FC<Props> = ({
|
||||
className,
|
||||
provider,
|
||||
payload,
|
||||
onSelect,
|
||||
}) => {
|
||||
const language = useGetLanguage()
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
key={payload.name}
|
||||
position='right'
|
||||
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
|
||||
popupContent={(
|
||||
<div>
|
||||
<BlockIcon
|
||||
size='md'
|
||||
className='mb-2'
|
||||
type={BlockEnum.Tool}
|
||||
toolIcon={provider.icon}
|
||||
/>
|
||||
<div className='mb-1 text-sm leading-5 text-gray-900'>{payload.label[language]}</div>
|
||||
<div className='text-xs text-gray-700 leading-[18px]'>{payload.description[language]}</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div
|
||||
key={payload.name}
|
||||
className='rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
|
||||
onClick={() => {
|
||||
onSelect(BlockEnum.Tool, {
|
||||
provider_id: provider.id,
|
||||
provider_type: provider.type,
|
||||
provider_name: provider.name,
|
||||
tool_name: payload.name,
|
||||
tool_label: payload.label[language],
|
||||
title: payload.label[language],
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className='h-8 leading-8 border-l-2 border-divider-subtle pl-4 truncate text-text-secondary system-sm-medium'>{payload.name}</div>
|
||||
</div>
|
||||
</Tooltip >
|
||||
)
|
||||
}
|
||||
export default React.memo(ToolItem)
|
||||
@ -0,0 +1,16 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
|
||||
}
|
||||
|
||||
const ToolViewFlatView: FC<Props> = () => {
|
||||
return (
|
||||
<div>
|
||||
list...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(ToolViewFlatView)
|
||||
@ -0,0 +1,41 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { ToolWithProvider } from '../../../types'
|
||||
import Tool from '../tool'
|
||||
import type { BlockEnum } from '../../../types'
|
||||
import { ViewType } from '../../view-type-select'
|
||||
import type { ToolDefaultValue } from '../../types'
|
||||
|
||||
type Props = {
|
||||
groupName: string
|
||||
toolList: ToolWithProvider[]
|
||||
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
|
||||
}
|
||||
|
||||
const Item: FC<Props> = ({
|
||||
groupName,
|
||||
toolList,
|
||||
onSelect,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
|
||||
{groupName}
|
||||
</div>
|
||||
<div>
|
||||
{toolList.map((tool: ToolWithProvider) => (
|
||||
<Tool
|
||||
key={tool.id}
|
||||
payload={tool}
|
||||
viewType={ViewType.tree}
|
||||
isShowLetterIndex
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
@ -0,0 +1,33 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { ToolWithProvider } from '../../../types'
|
||||
import type { BlockEnum } from '../../../types'
|
||||
import type { ToolDefaultValue } from '../../types'
|
||||
import Item from './item'
|
||||
|
||||
type Props = {
|
||||
payload: Record<string, ToolWithProvider[]>
|
||||
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
|
||||
}
|
||||
|
||||
const OrgTools: FC<Props> = ({
|
||||
payload,
|
||||
onSelect,
|
||||
}) => {
|
||||
if (!payload) return null
|
||||
|
||||
return (
|
||||
<div>
|
||||
{Object.keys(payload).map(groupName => (
|
||||
<Item
|
||||
key={groupName}
|
||||
groupName={groupName}
|
||||
toolList={payload[groupName]}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(OrgTools)
|
||||
@ -0,0 +1,95 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
|
||||
import { useGetLanguage } from '@/context/i18n'
|
||||
import { CollectionType } from '../../../tools/types'
|
||||
import type { ToolWithProvider } from '../../types'
|
||||
import { BlockEnum } from '../../types'
|
||||
import type { ToolDefaultValue } from '../types'
|
||||
import { ViewType } from '../view-type-select'
|
||||
import ActonItem from './action-item'
|
||||
import BlockIcon from '../../block-icon'
|
||||
|
||||
import { useBoolean } from 'ahooks'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
payload: ToolWithProvider
|
||||
viewType: ViewType
|
||||
isShowLetterIndex: boolean
|
||||
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
|
||||
}
|
||||
|
||||
const Tool: FC<Props> = ({
|
||||
className,
|
||||
payload,
|
||||
viewType,
|
||||
isShowLetterIndex,
|
||||
onSelect,
|
||||
}) => {
|
||||
const language = useGetLanguage()
|
||||
const isTreeView = viewType === ViewType.tree
|
||||
const actions = payload.tools
|
||||
const isToolPlugin = payload.type === CollectionType.builtIn
|
||||
const [isFold, {
|
||||
toggle: toggleFold,
|
||||
}] = useBoolean(false)
|
||||
const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
|
||||
const {
|
||||
label,
|
||||
} = payload
|
||||
|
||||
return (
|
||||
<div
|
||||
key={payload.id}
|
||||
className='mb-1 last-of-type:mb-0'
|
||||
>
|
||||
<div className={cn(className)}>
|
||||
<div
|
||||
className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer'
|
||||
// onClick={() => {
|
||||
// if (isToolPlugin) {
|
||||
// toggleFold()
|
||||
// return
|
||||
// }
|
||||
// onSelect(BlockEnum.Tool, {
|
||||
// provider_id: provider.id,
|
||||
// provider_type: provider.type,
|
||||
// provider_name: provider.name,
|
||||
// tool_name: payload.name,
|
||||
// tool_label: payload.label[language],
|
||||
// title: payload.label[language],
|
||||
// })
|
||||
// }}
|
||||
>
|
||||
<div className='flex grow items-center h-8'>
|
||||
<BlockIcon
|
||||
className='shrink-0'
|
||||
type={BlockEnum.Tool}
|
||||
toolIcon={payload.icon}
|
||||
/>
|
||||
<div className='ml-2 text-sm text-gray-900 flex-1 w-0 grow truncate'>{payload.label[language]}</div>
|
||||
</div>
|
||||
{isToolPlugin && (
|
||||
<FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isToolPlugin && (
|
||||
actions.map(action => (
|
||||
<ActonItem
|
||||
key={action.name}
|
||||
className={cn(isShowLetterIndex && 'mr-6')}
|
||||
provider={payload}
|
||||
payload={action}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Tool)
|
||||
Loading…
Reference in New Issue