AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 13:26:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: view to ui and fix some ui promblem

Browse Source
This commit is contained in:
Joel 2024-10-12 18:15:11 +08:00
parent b8cd6ea478
commit 0e5c16d0c2
4 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/components/workflow/block-selector/all-tools.tsx
View File

@ -75,6 +75,7 @@ const AllTools = ({
showWorkflowEmpty={activeTab === ToolTypeEnum.Workflow}
tools={tools}
onSelect={onSelect}
viewType={activeView}
/>
</div>
)

5
web/app/components/workflow/block-selector/index-bar.tsx
View File

@ -47,9 +47,10 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
element.scrollIntoView({ behavior: 'smooth' })
}
return (
<div className="index-bar absolute right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
<div className="index-bar absolute right-4 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary ">
<div className='absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]'></div>
{letters.map(letter => (
<div className="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
<div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
{letter}
</div>
))}

33
web/app/components/workflow/block-selector/tool-item.tsx
View File

@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { RiArrowRightSLine } from '@remixicon/react'
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import BlockIcon from '../block-icon'
import type { ToolWithProvider } from '../types'
@ -10,8 +10,10 @@ 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
@ -19,6 +21,7 @@ type Props = {
}
const ToolItem: FC<Props> = ({
className,
isToolPlugin,
provider,
payload,
@ -27,7 +30,9 @@ const ToolItem: FC<Props> = ({
const language = useGetLanguage()
const [isFold, {
toggle: toggleFold,
}] = useBoolean(true)
}] = useBoolean(false)
const FoldIcon = isFold ? RiArrowDownSLine : RiArrowRightSLine
const actions = [
'DuckDuckGo AI Search',
@ -52,9 +57,9 @@ const ToolItem: FC<Props> = ({
</div>
)}
>
<div>
<div className={cn(className)}>
<div
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
className='flex items-center justify-between pl-3 pr-1 w-full rounded-lg hover:bg-gray-50 cursor-pointer'
onClick={() => {
if (isToolPlugin) {
toggleFold()
@ -70,22 +75,24 @@ const ToolItem: FC<Props> = ({
})
}}
>
<div className='flex 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 min-w-0 truncate'>{payload.label[language]}</div>
</div>
{isToolPlugin && (
<RiArrowRightSLine className='mr-1 w-4 h-4 text-text-quaternary shrink-0' />
<FoldIcon className={cn('w-4 h-4 text-text-quaternary shrink-0', isFold && 'text-text-tertiary')} />
)}
<BlockIcon
className='mr-2 shrink-0'
type={BlockEnum.Tool}
toolIcon={provider.icon}
/>
<div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{payload.label[language]}</div>
</div>
{(!isFold && isToolPlugin) && (
<div>
{actions.map(action => (
<div
key={action}
className='rounded-lg pl-[37px] hover:bg-state-base-hover cursor-pointer'
className='rounded-lg pl-[21px] hover:bg-state-base-hover cursor-pointer'
onClick={() => {
onSelect(BlockEnum.Tool, {
provider_id: provider.id,
@ -97,7 +104,7 @@ const ToolItem: FC<Props> = ({
})
}}
>
<div className='h-8 leading-8 border-l-2 border-divider-subtle pl-[19px] truncate text-text-secondary system-sm-medium'>{action}</div>
<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>

16
web/app/components/workflow/block-selector/tools.tsx
View File

@ -9,6 +9,7 @@ import { CollectionType } from '../../tools/types'
import IndexBar, { groupItems } from './index-bar'
import type { ToolDefaultValue } from './types'
import ToolItem from './tool-item'
import { ViewType } from './view-type-select'
import Empty from '@/app/components/tools/add-tool-modal/empty'
import { useGetLanguage } from '@/context/i18n'
@ -16,14 +17,18 @@ type ToolsProps = {
showWorkflowEmpty: boolean
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
tools: ToolWithProvider[]
viewType: ViewType
}
const Blocks = ({
showWorkflowEmpty,
onSelect,
tools,
viewType,
}: ToolsProps) => {
const { t } = useTranslation()
const language = useGetLanguage()
const isListView = viewType === ViewType.list
const isTreeView = viewType === ViewType.tree
const { letters, groups: groupedTools } = groupItems(tools, tool => tool.label[language][0])
const toolRefs = useRef({})
@ -36,13 +41,16 @@ const Blocks = ({
key={toolWithProvider.id}
className='mb-1 last-of-type:mb-0'
>
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
{toolWithProvider.label[language]}
</div>
{isTreeView && (
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
{toolWithProvider.label[language]}
</div>
)}
{
list.map(tool => (
<ToolItem
key={tool.name}
className={isListView && 'mr-6'}
isToolPlugin={toolWithProvider.type === CollectionType.builtIn}
provider={toolWithProvider}
payload={tool}
@ -79,7 +87,7 @@ const Blocks = ({
</div>
)}
{!!tools.length && letters.map(renderLetterGroup)}
{tools.length > 10 && <IndexBar letters={letters} itemRefs={toolRefs} />}
{isListView && tools.length > 10 && <IndexBar letters={letters} itemRefs={toolRefs} />}
</div>
)
}