mirror of https://github.com/langgenius/dify.git
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import React from 'react'
|
|
import {
|
|
RiClipboardLine,
|
|
RiDeleteBinLine,
|
|
} from '@remixicon/react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import copy from 'copy-to-clipboard'
|
|
import NoData from './no-data'
|
|
import cn from '@/utils/classnames'
|
|
import type { SavedMessage } from '@/models/debug'
|
|
import { Markdown } from '@/app/components/base/markdown'
|
|
import Toast from '@/app/components/base/toast'
|
|
import ActionButton from '@/app/components/base/action-button'
|
|
import NewAudioButton from '@/app/components/base/new-audio-button'
|
|
|
|
export type ISavedItemsProps = {
|
|
className?: string
|
|
isShowTextToSpeech?: boolean
|
|
list: SavedMessage[]
|
|
onRemove: (id: string) => void
|
|
onStartCreateContent: () => void
|
|
}
|
|
|
|
const SavedItems: FC<ISavedItemsProps> = ({
|
|
className,
|
|
isShowTextToSpeech,
|
|
list,
|
|
onRemove,
|
|
onStartCreateContent,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className={cn('space-y-4', className)}>
|
|
{list.length === 0
|
|
? (
|
|
<NoData onStartCreateContent={onStartCreateContent} />
|
|
)
|
|
: (<>
|
|
{list.map(({ id, answer }) => (
|
|
<div key={id} className='relative'>
|
|
<div className={cn(
|
|
'p-4 bg-background-section-burn rounded-2xl',
|
|
)}>
|
|
<Markdown content={answer} />
|
|
</div>
|
|
<div className='mt-1 h-4 px-4 text-text-quaternary system-xs-regular'>
|
|
<span>{answer.length} {t('common.unit.char')}</span>
|
|
</div>
|
|
<div className='absolute right-2 bottom-1'>
|
|
<div className='ml-1 flex items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
|
|
{isShowTextToSpeech && <NewAudioButton value={answer}/>}
|
|
<ActionButton onClick={() => {
|
|
copy(answer)
|
|
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
|
|
}}>
|
|
<RiClipboardLine className='w-4 h-4' />
|
|
</ActionButton>
|
|
<ActionButton onClick={() => {
|
|
onRemove(id)
|
|
}}>
|
|
<RiDeleteBinLine className='w-4 h-4' />
|
|
</ActionButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>)}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
export default React.memo(SavedItems)
|