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

feat: support assistant frontend (#2139)

Browse Source 
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Joel
2024-01-23 19:31:56 +08:00
committed by GitHub
parent e65a2a400d
commit 7bbe12b2bd
194 changed files with 8726 additions and 1586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/app/components/base/drawer-plus/index.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import type { FC } from 'react'
import React, { useRef } from 'react'
import cn from 'classnames'
import Drawer from '@/app/components/base/drawer'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -8,21 +9,33 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
type Props = {
isShow: boolean
onHide: () => void
panelClassName?: string
maxWidthClassName?: string
contentClassName?: string
headerClassName?: string
height?: number | string
title: string | JSX.Element
titleDescription?: string | JSX.Element
body: JSX.Element
foot?: JSX.Element
isShowMask?: boolean
clickOutsideNotOpen?: boolean
}
const DrawerPlus: FC<Props> = ({
isShow,
onHide,
panelClassName = '',
maxWidthClassName = '!max-w-[640px]',
height = 'calc(100vh - 72px)',
contentClassName,
headerClassName,
title,
titleDescription,
body,
foot,
isShowMask,
clickOutsideNotOpen = true,
}) => {
const ref = useRef(null)
const media = useBreakpoints()
@@ -33,26 +46,33 @@ const DrawerPlus: FC<Props> = ({
return (
// clickOutsideNotOpen to fix confirm modal click cause drawer close
<Drawer isOpen={isShow} clickOutsideNotOpen onClose={onHide} footer={null} mask={isMobile} panelClassname={`mt-16 mx-2 sm:mr-2 mb-3 !p-0 ${maxWidthClassName} rounded-xl`}>
<Drawer isOpen={isShow} clickOutsideNotOpen={clickOutsideNotOpen} onClose={onHide} footer={null} mask={isMobile || isShowMask} panelClassname={`mt-16 mx-2 sm:mr-2 mb-3 !p-0 ${panelClassName} ${maxWidthClassName} rounded-xl`}>
<div
className='w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
className={cn(contentClassName, 'w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
style={{
height,
}}
ref={ref}
>
<div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
<div className='text-base font-semibold text-gray-900'>
{title}
</div>
<div className='flex items-center'>
<div
onClick={onHide}
className='flex justify-center items-center w-6 h-6 cursor-pointer'
>
<XClose className='w-4 h-4 text-gray-500' />
<div className={cn(headerClassName, 'shrink-0 border-b border-b-gray-100 py-4')}>
<div className='flex justify-between items-center pl-6 pr-5 h-6'>
<div className='text-base font-semibold text-gray-900'>
{title}
</div>
<div className='flex items-center'>
<div
onClick={onHide}
className='flex justify-center items-center w-6 h-6 cursor-pointer'
>
<XClose className='w-4 h-4 text-gray-500' />
</div>
</div>
</div>
{titleDescription && (
<div className='pl-6 pr-10 leading-[18px] text-xs font-normal text-gray-500'>
{titleDescription}
</div>
)}
</div>
<div className='grow overflow-y-auto'>
{body}