File size: 2,114 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import type { FC } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useClickAway } from 'ahooks'
import Card from './card'
import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import type { IChatItem } from '@/app/components/app/chat/type'
type PromptLogModalProps = {
currentLogItem?: IChatItem
width: number
onCancel: () => void
}
const PromptLogModal: FC<PromptLogModalProps> = ({
currentLogItem,
width,
onCancel,
}) => {
const ref = useRef(null)
const [mounted, setMounted] = useState(false)
useClickAway(() => {
if (mounted)
onCancel()
}, ref)
useEffect(() => {
setMounted(true)
}, [])
if (!currentLogItem || !currentLogItem.log)
return null
return (
<div
className='fixed top-16 left-2 bottom-2 flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
style={{
width: 480,
position: 'fixed',
top: 56 + 8,
left: 8 + (width - 480),
bottom: 16,
}}
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'>PROMPT LOG</div>
<div className='flex items-center'>
{
currentLogItem.log?.length === 1 && (
<>
<CopyFeedbackNew className='w-6 h-6' content={currentLogItem.log[0].text} />
<div className='mx-2.5 w-[1px] h-[14px] bg-gray-200' />
</>
)
}
<div
onClick={onCancel}
className='flex justify-center items-center w-6 h-6 cursor-pointer'
>
<XClose className='w-4 h-4 text-gray-500' />
</div>
</div>
</div>
<div className='grow p-2 overflow-y-auto'>
<Card log={currentLogItem.log} />
</div>
</div>
)
}
export default PromptLogModal
|