estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add retriever rank fe (#1557)

Browse Source 
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Joel
2023-11-18 11:53:35 +08:00
committed by GitHub
parent e017eff5e4
commit 888e8c6dac
80 changed files with 2757 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/app/components/base/radio-card/index.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import s from './style.module.css'
type Props = {
className?: string
icon: React.ReactNode
iconBgClassName?: string
title: React.ReactNode
description: string
noRadio?: boolean
isChosen?: boolean
onChosen?: () => void
chosenConfig?: React.ReactNode
chosenConfigWrapClassName?: string
}
const RadioCard: FC<Props> = ({
icon,
iconBgClassName = 'bg-[#F5F3FF]',
title,
description,
noRadio,
isChosen,
onChosen = () => {},
chosenConfig,
chosenConfigWrapClassName,
}) => {
return (
<div className={cn(s.item, isChosen && s.active)}>
<div className='flex py-3 pl-3 pr-4' onClick={onChosen}>
<div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}>
{icon}
</div>
<div className='grow'>
<div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-[#667085]'>{description}</div>
</div>
{!noRadio && (
<div className='shrink-0 flex items-center h-8'>
<div className={s.radio}></div>
</div>
)}
</div>
{((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'pt-2 px-14 pb-6 border-t border-gray-200')}>
{chosenConfig}
</div>
)}
</div>
)
}
export default React.memo(RadioCard)

40
web/app/components/base/radio-card/simple/index.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import s from './style.module.css'
type Props = {
className?: string
title: string
description: string
isChosen: boolean
onChosen: () => void
chosenConfig?: React.ReactNode
icon?: JSX.Element
}
const RadioCard: FC<Props> = ({
title,
description,
isChosen,
onChosen,
icon,
}) => {
return (
<div
className={cn(s.item, isChosen && s.active, 'flex')}
onClick={onChosen}
>
{icon}
<div>
<div className='flex justify-between items-center'>
<div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
<div className={s.radio}></div>
</div>
<div className='leading-[18px] text-xs font-normal text-gray-500'>{description}</div>
</div>
</div>
)
}
export default React.memo(RadioCard)

25
web/app/components/base/radio-card/simple/style.module.css Normal file
View File

@@ -0,0 +1,25 @@
.item {
@apply relative p-4 rounded-xl border border-gray-100 cursor-pointer;
background-color: #fcfcfd;
}
.item.active {
border-width: 1.5px;
border-color: #528BFF;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}
.item:hover {
background-color: #ffffff;
border-color: #B2CCFF;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.radio {
@apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
}
.item.active .radio {
border-width: 5px;
border-color: #155EEF;
}

25
web/app/components/base/radio-card/style.module.css Normal file
View File

@@ -0,0 +1,25 @@
.item {
@apply relative rounded-xl border border-gray-100 cursor-pointer;
background-color: #fcfcfd;
}
.item.active {
border-width: 1.5px;
border-color: #528BFF;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}
.item:hover {
background-color: #ffffff;
border-color: #B2CCFF;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.radio {
@apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
}
.item.active .radio {
border-width: 5px;
border-color: #155EEF;
}