mirror of https://github.com/langgenius/dify.git
feat: add ActionBar and WorkflowContent components for enhanced text generation item interactions
- Introduced ActionBar component to manage user actions such as copying content, providing feedback, and handling more like this functionality. - Created WorkflowContent component to display workflow process details and manage tab switching between result and detail views. - Refactored GenerationItem component to utilize new hooks for managing state and interactions, improving code organization and readability. - Removed redundant code and integrated new components for a cleaner structure.
This commit is contained in:
yyh
parent
71497954b8
commit
67c69a5fd7
|
|
@ -0,0 +1,153 @@
|
|||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiBookmark3Line,
|
||||
RiClipboardLine,
|
||||
RiFileList3Line,
|
||||
RiReplay15Line,
|
||||
RiSparklingLine,
|
||||
RiThumbDownLine,
|
||||
RiThumbUpLine,
|
||||
} from '@remixicon/react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import NewAudioButton from '@/app/components/base/new-audio-button'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import type { FeedbackType } from '@/app/components/base/chat/chat/type'
|
||||
import type { WorkflowProcess } from '@/app/components/base/chat/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { MAX_DEPTH, type WorkflowTab } from './hooks'
|
||||
|
||||
type ActionBarProps = {
|
||||
isWorkflow?: boolean
|
||||
content: any
|
||||
isMobile?: boolean
|
||||
hasChildItem: boolean
|
||||
isInWebApp?: boolean
|
||||
isInstalledApp: boolean
|
||||
isResponding?: boolean
|
||||
isError: boolean
|
||||
messageId?: string | null
|
||||
moreLikeThis?: boolean
|
||||
depth: number
|
||||
onMoreLikeThis: () => void
|
||||
onOpenLog: () => void
|
||||
isShowTextToSpeech?: boolean
|
||||
voiceId?: string
|
||||
onRetry: () => void
|
||||
onSave?: (messageId: string) => void
|
||||
feedback?: FeedbackType
|
||||
onFeedback?: (feedback: FeedbackType) => void
|
||||
supportFeedback?: boolean
|
||||
workflowProcessData?: WorkflowProcess
|
||||
currentTab: WorkflowTab
|
||||
}
|
||||
|
||||
const ActionBar: FC<ActionBarProps> = ({
|
||||
isWorkflow,
|
||||
content,
|
||||
isMobile,
|
||||
hasChildItem,
|
||||
isInWebApp,
|
||||
isInstalledApp,
|
||||
isResponding,
|
||||
isError,
|
||||
messageId,
|
||||
moreLikeThis,
|
||||
depth,
|
||||
onMoreLikeThis,
|
||||
onOpenLog,
|
||||
isShowTextToSpeech,
|
||||
voiceId,
|
||||
onRetry,
|
||||
onSave,
|
||||
feedback,
|
||||
onFeedback,
|
||||
supportFeedback,
|
||||
workflowProcessData,
|
||||
currentTab,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const showCopyButton = ((currentTab === 'RESULT' && workflowProcessData?.resultText) || !isWorkflow) && !isResponding
|
||||
|
||||
const handleCopy = () => {
|
||||
const copyContent = isWorkflow ? workflowProcessData?.resultText : content
|
||||
if (typeof copyContent === 'string')
|
||||
copy(copyContent)
|
||||
else
|
||||
copy(JSON.stringify(copyContent))
|
||||
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'system-xs-regular relative mt-1 h-4 px-4 text-text-quaternary',
|
||||
isMobile && hasChildItem && 'pl-10',
|
||||
)}>
|
||||
{!isWorkflow && <span>{content?.length} {t('common.unit.char')}</span>}
|
||||
<div className='absolute bottom-1 right-2 flex items-center'>
|
||||
{!isInWebApp && !isInstalledApp && !isResponding && (
|
||||
<div className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'>
|
||||
<ActionButton disabled={isError || !messageId} onClick={onOpenLog}>
|
||||
<RiFileList3Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
)}
|
||||
<div className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'>
|
||||
{moreLikeThis && (
|
||||
<ActionButton state={depth === MAX_DEPTH ? ActionButtonState.Disabled : ActionButtonState.Default} disabled={depth === MAX_DEPTH} onClick={onMoreLikeThis}>
|
||||
<RiSparklingLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{isShowTextToSpeech && messageId && (
|
||||
<NewAudioButton
|
||||
id={messageId}
|
||||
voice={voiceId}
|
||||
/>
|
||||
)}
|
||||
{showCopyButton && (
|
||||
<ActionButton disabled={isError || !messageId} onClick={handleCopy}>
|
||||
<RiClipboardLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{isInWebApp && isError && (
|
||||
<ActionButton onClick={onRetry}>
|
||||
<RiReplay15Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{isInWebApp && !isWorkflow && (
|
||||
<ActionButton disabled={isError || !messageId} onClick={() => { onSave?.(messageId as string) }}>
|
||||
<RiBookmark3Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
{(supportFeedback || isInWebApp) && !isWorkflow && !isError && messageId && !isResponding && (
|
||||
<div className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'>
|
||||
{!feedback?.rating && (
|
||||
<>
|
||||
<ActionButton onClick={() => onFeedback?.({ rating: 'like' })}>
|
||||
<RiThumbUpLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
<ActionButton onClick={() => onFeedback?.({ rating: 'dislike' })}>
|
||||
<RiThumbDownLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</>
|
||||
)}
|
||||
{feedback?.rating === 'like' && (
|
||||
<ActionButton state={ActionButtonState.Active} onClick={() => onFeedback?.({ rating: null })}>
|
||||
<RiThumbUpLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{feedback?.rating === 'dislike' && (
|
||||
<ActionButton state={ActionButtonState.Destructive} onClick={() => onFeedback?.({ rating: null })}>
|
||||
<RiThumbDownLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActionBar
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { fetchMoreLikeThis, updateFeedback } from '@/service/share'
|
||||
import type { FeedbackType } from '@/app/components/base/chat/chat/type'
|
||||
import type { WorkflowProcess } from '@/app/components/base/chat/types'
|
||||
|
||||
export const MAX_DEPTH = 3
|
||||
export type WorkflowTab = 'RESULT' | 'DETAIL'
|
||||
|
||||
export const useMoreLikeThis = (
|
||||
messageId: string | null | undefined,
|
||||
isInstalledApp: boolean,
|
||||
installedAppId: string | undefined,
|
||||
controlClearMoreLikeThis: number | undefined,
|
||||
isLoading: boolean | undefined,
|
||||
) => {
|
||||
const { t } = useTranslation()
|
||||
const [completionRes, setCompletionRes] = useState('')
|
||||
const [childMessageId, setChildMessageId] = useState<string | null>(null)
|
||||
const [childFeedback, setChildFeedback] = useState<FeedbackType>({ rating: null })
|
||||
const [isQuerying, { setTrue: startQuerying, setFalse: stopQuerying }] = useBoolean(false)
|
||||
|
||||
const handleMoreLikeThis = useCallback(async () => {
|
||||
if (isQuerying || !messageId) {
|
||||
Toast.notify({ type: 'warning', message: t('appDebug.errorMessage.waitForResponse') })
|
||||
return
|
||||
}
|
||||
startQuerying()
|
||||
try {
|
||||
const res: any = await fetchMoreLikeThis(messageId, isInstalledApp, installedAppId)
|
||||
setCompletionRes(res.answer)
|
||||
setChildFeedback({ rating: null })
|
||||
setChildMessageId(res.id)
|
||||
}
|
||||
finally {
|
||||
stopQuerying()
|
||||
}
|
||||
}, [isQuerying, messageId, t, startQuerying, isInstalledApp, installedAppId, stopQuerying])
|
||||
|
||||
const handleFeedback = useCallback(async (feedback: FeedbackType) => {
|
||||
if (childMessageId) {
|
||||
await updateFeedback({ url: `/messages/${childMessageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, installedAppId)
|
||||
setChildFeedback(feedback)
|
||||
}
|
||||
}, [childMessageId, isInstalledApp, installedAppId])
|
||||
|
||||
useEffect(() => {
|
||||
if (controlClearMoreLikeThis) {
|
||||
setChildMessageId(null)
|
||||
setCompletionRes('')
|
||||
}
|
||||
}, [controlClearMoreLikeThis])
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading)
|
||||
setChildMessageId(null)
|
||||
}, [isLoading])
|
||||
|
||||
return {
|
||||
completionRes,
|
||||
childMessageId,
|
||||
childFeedback,
|
||||
isQuerying,
|
||||
handleMoreLikeThis,
|
||||
handleFeedback,
|
||||
}
|
||||
}
|
||||
|
||||
export const useWorkflowTabs = (workflowProcessData?: WorkflowProcess) => {
|
||||
const [currentTab, setCurrentTab] = useState<WorkflowTab>('DETAIL')
|
||||
|
||||
useEffect(() => {
|
||||
if (workflowProcessData?.resultText || !!workflowProcessData?.files?.length)
|
||||
setCurrentTab('RESULT')
|
||||
else
|
||||
setCurrentTab('DETAIL')
|
||||
}, [workflowProcessData?.files?.length, workflowProcessData?.resultText])
|
||||
|
||||
return {
|
||||
currentTab,
|
||||
setCurrentTab,
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +1,24 @@
|
|||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiBookmark3Line,
|
||||
RiClipboardLine,
|
||||
RiFileList3Line,
|
||||
RiPlayList2Line,
|
||||
RiReplay15Line,
|
||||
RiSparklingFill,
|
||||
RiSparklingLine,
|
||||
RiThumbDownLine,
|
||||
RiThumbUpLine,
|
||||
} from '@remixicon/react'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import ResultTab from './result-tab'
|
||||
import { Markdown } from '@/app/components/base/markdown'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import type { FeedbackType } from '@/app/components/base/chat/chat/type'
|
||||
import { fetchMoreLikeThis, updateFeedback } from '@/service/share'
|
||||
import { fetchTextGenerationMessage } from '@/service/debug'
|
||||
import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow-process'
|
||||
import type { WorkflowProcess } from '@/app/components/base/chat/types'
|
||||
import type { SiteInfo } from '@/models/share'
|
||||
import { useChatContext } from '@/app/components/base/chat/chat/context'
|
||||
import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
|
||||
import NewAudioButton from '@/app/components/base/new-audio-button'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const MAX_DEPTH = 3
|
||||
import { MAX_DEPTH, useMoreLikeThis, useWorkflowTabs } from './hooks'
|
||||
import ActionBar from './action-bar'
|
||||
import WorkflowContent from './workflow-content'
|
||||
|
||||
export type IGenerationItemProps = {
|
||||
isWorkflow?: boolean
|
||||
|
|
@ -63,12 +49,6 @@ export type IGenerationItemProps = {
|
|||
inSidePanel?: boolean
|
||||
}
|
||||
|
||||
export const copyIcon = (
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.3335 2.33341C9.87598 2.33341 10.1472 2.33341 10.3698 2.39304C10.9737 2.55486 11.4454 3.02657 11.6072 3.63048C11.6668 3.85302 11.6668 4.12426 11.6668 4.66675V10.0334C11.6668 11.0135 11.6668 11.5036 11.4761 11.8779C11.3083 12.2072 11.0406 12.4749 10.7113 12.6427C10.337 12.8334 9.84692 12.8334 8.86683 12.8334H5.1335C4.1534 12.8334 3.66336 12.8334 3.28901 12.6427C2.95973 12.4749 2.69201 12.2072 2.52423 11.8779C2.3335 11.5036 2.3335 11.0135 2.3335 10.0334V4.66675C2.3335 4.12426 2.3335 3.85302 2.39313 3.63048C2.55494 3.02657 3.02665 2.55486 3.63056 2.39304C3.8531 2.33341 4.12435 2.33341 4.66683 2.33341M5.60016 3.50008H8.40016C8.72686 3.50008 8.89021 3.50008 9.01499 3.4365C9.12475 3.38058 9.21399 3.29134 9.26992 3.18158C9.3335 3.05679 9.3335 2.89345 9.3335 2.56675V2.10008C9.3335 1.77338 9.3335 1.61004 9.26992 1.48525C9.21399 1.37549 9.12475 1.28625 9.01499 1.23033C8.89021 1.16675 8.72686 1.16675 8.40016 1.16675H5.60016C5.27347 1.16675 5.11012 1.16675 4.98534 1.23033C4.87557 1.28625 4.78634 1.37549 4.73041 1.48525C4.66683 1.61004 4.66683 1.77338 4.66683 2.10008V2.56675C4.66683 2.89345 4.66683 3.05679 4.73041 3.18158C4.78634 3.29134 4.87557 3.38058 4.98534 3.4365C5.11012 3.50008 5.27347 3.50008 5.60016 3.50008Z" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const GenerationItem: FC<IGenerationItemProps> = ({
|
||||
isWorkflow,
|
||||
workflowProcessData,
|
||||
|
|
@ -99,11 +79,6 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
|||
const { t } = useTranslation()
|
||||
const params = useParams()
|
||||
const isTop = depth === 1
|
||||
const [completionRes, setCompletionRes] = useState('')
|
||||
const [childMessageId, setChildMessageId] = useState<string | null>(null)
|
||||
const [childFeedback, setChildFeedback] = useState<FeedbackType>({
|
||||
rating: null,
|
||||
})
|
||||
const {
|
||||
config,
|
||||
} = useChatContext()
|
||||
|
|
@ -111,12 +86,49 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
|||
const setCurrentLogItem = useAppStore(s => s.setCurrentLogItem)
|
||||
const setShowPromptLogModal = useAppStore(s => s.setShowPromptLogModal)
|
||||
|
||||
const handleFeedback = async (childFeedback: FeedbackType) => {
|
||||
await updateFeedback({ url: `/messages/${childMessageId}/feedbacks`, body: { rating: childFeedback.rating } }, isInstalledApp, installedAppId)
|
||||
setChildFeedback(childFeedback)
|
||||
}
|
||||
const {
|
||||
completionRes,
|
||||
childMessageId,
|
||||
childFeedback,
|
||||
isQuerying,
|
||||
handleMoreLikeThis,
|
||||
handleFeedback,
|
||||
} = useMoreLikeThis(messageId, isInstalledApp, installedAppId, controlClearMoreLikeThis, isLoading)
|
||||
|
||||
const [isQuerying, { setTrue: startQuerying, setFalse: stopQuerying }] = useBoolean(false)
|
||||
const { currentTab, setCurrentTab } = useWorkflowTabs(workflowProcessData)
|
||||
|
||||
const handleOpenLogModal = async () => {
|
||||
const data = await fetchTextGenerationMessage({
|
||||
appId: params.appId as string,
|
||||
messageId: messageId!,
|
||||
})
|
||||
const logItem = Array.isArray(data.message)
|
||||
? {
|
||||
...data,
|
||||
log: [
|
||||
...data.message,
|
||||
...(data.message[data.message.length - 1].role !== 'assistant'
|
||||
? [
|
||||
{
|
||||
role: 'assistant',
|
||||
text: data.answer,
|
||||
files: data.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...data,
|
||||
log: [typeof data.message === 'string'
|
||||
? {
|
||||
text: data.message,
|
||||
}
|
||||
: data.message],
|
||||
}
|
||||
setCurrentLogItem(logItem)
|
||||
setShowPromptLogModal(true)
|
||||
}
|
||||
|
||||
const childProps = {
|
||||
isInWebApp: true,
|
||||
|
|
@ -138,75 +150,6 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
|||
taskId,
|
||||
}
|
||||
|
||||
const handleMoreLikeThis = async () => {
|
||||
if (isQuerying || !messageId) {
|
||||
Toast.notify({ type: 'warning', message: t('appDebug.errorMessage.waitForResponse') })
|
||||
return
|
||||
}
|
||||
startQuerying()
|
||||
const res: any = await fetchMoreLikeThis(messageId as string, isInstalledApp, installedAppId)
|
||||
setCompletionRes(res.answer)
|
||||
setChildFeedback({
|
||||
rating: null,
|
||||
})
|
||||
setChildMessageId(res.id)
|
||||
stopQuerying()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (controlClearMoreLikeThis) {
|
||||
setChildMessageId(null)
|
||||
setCompletionRes('')
|
||||
}
|
||||
}, [controlClearMoreLikeThis])
|
||||
|
||||
// regeneration clear child
|
||||
useEffect(() => {
|
||||
if (isLoading)
|
||||
setChildMessageId(null)
|
||||
}, [isLoading])
|
||||
|
||||
const handleOpenLogModal = async () => {
|
||||
const data = await fetchTextGenerationMessage({
|
||||
appId: params.appId as string,
|
||||
messageId: messageId!,
|
||||
})
|
||||
const logItem = Array.isArray(data.message) ? {
|
||||
...data,
|
||||
log: [
|
||||
...data.message,
|
||||
...(data.message[data.message.length - 1].role !== 'assistant'
|
||||
? [
|
||||
{
|
||||
role: 'assistant',
|
||||
text: data.answer,
|
||||
files: data.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
} : {
|
||||
...data,
|
||||
log: [typeof data.message === 'string' ? {
|
||||
text: data.message,
|
||||
} : data.message],
|
||||
}
|
||||
setCurrentLogItem(logItem)
|
||||
setShowPromptLogModal(true)
|
||||
}
|
||||
|
||||
const [currentTab, setCurrentTab] = useState<string>('DETAIL')
|
||||
const showResultTabs = !!workflowProcessData?.resultText || !!workflowProcessData?.files?.length
|
||||
const switchTab = async (tab: string) => {
|
||||
setCurrentTab(tab)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (workflowProcessData?.resultText || !!workflowProcessData?.files?.length)
|
||||
switchTab('RESULT')
|
||||
else
|
||||
switchTab('DETAIL')
|
||||
}, [workflowProcessData?.files?.length, workflowProcessData?.resultText])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cn('relative', !isTop && 'mt-3', className)}>
|
||||
|
|
@ -221,51 +164,16 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
|||
!inSidePanel && 'rounded-2xl border-t border-divider-subtle bg-chat-bubble-bg',
|
||||
)}>
|
||||
{workflowProcessData && (
|
||||
<>
|
||||
<div className={cn(
|
||||
'p-3',
|
||||
showResultTabs && 'border-b border-divider-subtle',
|
||||
)}>
|
||||
{taskId && (
|
||||
<div className={cn('system-2xs-medium-uppercase mb-2 flex items-center text-text-accent-secondary', isError && 'text-text-destructive')}>
|
||||
<RiPlayList2Line className='mr-1 h-3 w-3' />
|
||||
<span>{t('share.generation.execution')}</span>
|
||||
<span className='px-1'>·</span>
|
||||
<span>{taskId}</span>
|
||||
</div>
|
||||
)}
|
||||
{siteInfo && workflowProcessData && (
|
||||
<WorkflowProcessItem
|
||||
data={workflowProcessData}
|
||||
expand={workflowProcessData.expand}
|
||||
hideProcessDetail={hideProcessDetail}
|
||||
hideInfo={hideProcessDetail}
|
||||
readonly={!siteInfo.show_workflow_steps}
|
||||
/>
|
||||
)}
|
||||
{showResultTabs && (
|
||||
<div className='flex items-center space-x-6 px-1'>
|
||||
<div
|
||||
className={cn(
|
||||
'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
|
||||
currentTab === 'RESULT' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
|
||||
)}
|
||||
onClick={() => switchTab('RESULT')}
|
||||
>{t('runLog.result')}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
|
||||
currentTab === 'DETAIL' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
|
||||
)}
|
||||
onClick={() => switchTab('DETAIL')}
|
||||
>{t('runLog.detail')}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!isError && (
|
||||
<ResultTab data={workflowProcessData} content={content} currentTab={currentTab} />
|
||||
)}
|
||||
</>
|
||||
<WorkflowContent
|
||||
workflowProcessData={workflowProcessData}
|
||||
taskId={taskId}
|
||||
isError={isError}
|
||||
hideProcessDetail={hideProcessDetail}
|
||||
siteInfo={siteInfo}
|
||||
currentTab={currentTab}
|
||||
onSwitchTab={setCurrentTab}
|
||||
content={content}
|
||||
/>
|
||||
)}
|
||||
{!workflowProcessData && taskId && (
|
||||
<div className={cn('system-2xs-medium-uppercase sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary', isError && 'text-text-destructive')}>
|
||||
|
|
@ -284,83 +192,32 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* meta data */}
|
||||
<div className={cn(
|
||||
'system-xs-regular relative mt-1 h-4 px-4 text-text-quaternary',
|
||||
isMobile && ((childMessageId || isQuerying) && depth < 3) && 'pl-10',
|
||||
)}>
|
||||
{!isWorkflow && <span>{content?.length} {t('common.unit.char')}</span>}
|
||||
{/* action buttons */}
|
||||
<div className='absolute bottom-1 right-2 flex items-center'>
|
||||
{!isInWebApp && !isInstalledApp && !isResponding && (
|
||||
<div className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'>
|
||||
<ActionButton disabled={isError || !messageId} onClick={handleOpenLogModal}>
|
||||
<RiFileList3Line className='h-4 w-4' />
|
||||
{/* <div>{t('common.operation.log')}</div> */}
|
||||
</ActionButton>
|
||||
</div>
|
||||
)}
|
||||
<div className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'>
|
||||
{moreLikeThis && (
|
||||
<ActionButton state={depth === MAX_DEPTH ? ActionButtonState.Disabled : ActionButtonState.Default} disabled={depth === MAX_DEPTH} onClick={handleMoreLikeThis}>
|
||||
<RiSparklingLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{isShowTextToSpeech && (
|
||||
<NewAudioButton
|
||||
id={messageId!}
|
||||
voice={config?.text_to_speech?.voice}
|
||||
/>
|
||||
)}
|
||||
{((currentTab === 'RESULT' && workflowProcessData?.resultText) || !isWorkflow) && (
|
||||
<ActionButton disabled={isError || !messageId} onClick={() => {
|
||||
const copyContent = isWorkflow ? workflowProcessData?.resultText : content
|
||||
if (typeof copyContent === 'string')
|
||||
copy(copyContent)
|
||||
else
|
||||
copy(JSON.stringify(copyContent))
|
||||
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
|
||||
}}>
|
||||
<RiClipboardLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{isInWebApp && isError && (
|
||||
<ActionButton onClick={onRetry}>
|
||||
<RiReplay15Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{isInWebApp && !isWorkflow && (
|
||||
<ActionButton disabled={isError || !messageId} onClick={() => { onSave?.(messageId as string) }}>
|
||||
<RiBookmark3Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
{(supportFeedback || isInWebApp) && !isWorkflow && !isError && messageId && (
|
||||
<div className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'>
|
||||
{!feedback?.rating && (
|
||||
<>
|
||||
<ActionButton onClick={() => onFeedback?.({ rating: 'like' })}>
|
||||
<RiThumbUpLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
<ActionButton onClick={() => onFeedback?.({ rating: 'dislike' })}>
|
||||
<RiThumbDownLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</>
|
||||
)}
|
||||
{feedback?.rating === 'like' && (
|
||||
<ActionButton state={ActionButtonState.Active} onClick={() => onFeedback?.({ rating: null })}>
|
||||
<RiThumbUpLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{feedback?.rating === 'dislike' && (
|
||||
<ActionButton state={ActionButtonState.Destructive} onClick={() => onFeedback?.({ rating: null })}>
|
||||
<RiThumbDownLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActionBar
|
||||
isWorkflow={isWorkflow}
|
||||
content={content}
|
||||
isMobile={isMobile}
|
||||
hasChildItem={(!!childMessageId || isQuerying) && depth < MAX_DEPTH}
|
||||
isInWebApp={isInWebApp}
|
||||
isInstalledApp={isInstalledApp}
|
||||
isResponding={isResponding}
|
||||
isError={isError}
|
||||
messageId={messageId}
|
||||
moreLikeThis={moreLikeThis}
|
||||
depth={depth}
|
||||
onMoreLikeThis={handleMoreLikeThis}
|
||||
onOpenLog={handleOpenLogModal}
|
||||
isShowTextToSpeech={isShowTextToSpeech}
|
||||
voiceId={config?.text_to_speech?.voice}
|
||||
onRetry={onRetry}
|
||||
onSave={onSave}
|
||||
feedback={feedback}
|
||||
onFeedback={onFeedback}
|
||||
supportFeedback={supportFeedback}
|
||||
workflowProcessData={workflowProcessData}
|
||||
currentTab={currentTab}
|
||||
/>
|
||||
|
||||
{/* more like this elements */}
|
||||
{!isTop && (
|
||||
<div className={cn(
|
||||
|
|
@ -379,10 +236,11 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
{((childMessageId || isQuerying) && depth < 3) && (
|
||||
{((childMessageId || isQuerying) && depth < MAX_DEPTH) && (
|
||||
<GenerationItem {...childProps as any} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(GenerationItem)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiPlayList2Line } from '@remixicon/react'
|
||||
import ResultTab from './result-tab'
|
||||
import type { WorkflowTab } from './hooks'
|
||||
import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow-process'
|
||||
import type { WorkflowProcess } from '@/app/components/base/chat/types'
|
||||
import type { SiteInfo } from '@/models/share'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type WorkflowContentProps = {
|
||||
workflowProcessData: WorkflowProcess
|
||||
taskId?: string
|
||||
isError: boolean
|
||||
hideProcessDetail?: boolean
|
||||
siteInfo: SiteInfo | null
|
||||
currentTab: WorkflowTab
|
||||
onSwitchTab: (tab: WorkflowTab) => void
|
||||
content: any
|
||||
}
|
||||
|
||||
const WorkflowContent: FC<WorkflowContentProps> = ({
|
||||
workflowProcessData,
|
||||
taskId,
|
||||
isError,
|
||||
hideProcessDetail,
|
||||
siteInfo,
|
||||
currentTab,
|
||||
onSwitchTab,
|
||||
content,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const showResultTabs = !!workflowProcessData?.resultText || !!workflowProcessData?.files?.length
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={cn(
|
||||
'p-3',
|
||||
showResultTabs && 'border-b border-divider-subtle',
|
||||
)}>
|
||||
{taskId && (
|
||||
<div className={cn('system-2xs-medium-uppercase mb-2 flex items-center text-text-accent-secondary', isError && 'text-text-destructive')}>
|
||||
<RiPlayList2Line className='mr-1 h-3 w-3' />
|
||||
<span>{t('share.generation.execution')}</span>
|
||||
<span className='px-1'>·</span>
|
||||
<span>{taskId}</span>
|
||||
</div>
|
||||
)}
|
||||
{siteInfo && (
|
||||
<WorkflowProcessItem
|
||||
data={workflowProcessData}
|
||||
expand={workflowProcessData.expand}
|
||||
hideProcessDetail={hideProcessDetail}
|
||||
hideInfo={hideProcessDetail}
|
||||
readonly={!siteInfo.show_workflow_steps}
|
||||
/>
|
||||
)}
|
||||
{showResultTabs && (
|
||||
<div className='flex items-center space-x-6 px-1'>
|
||||
<div
|
||||
className={cn(
|
||||
'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
|
||||
currentTab === 'RESULT' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
|
||||
)}
|
||||
onClick={() => onSwitchTab('RESULT')}
|
||||
>{t('runLog.result')}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'system-sm-semibold-uppercase cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
|
||||
currentTab === 'DETAIL' && 'border-util-colors-blue-brand-blue-brand-600 text-text-primary',
|
||||
)}
|
||||
onClick={() => onSwitchTab('DETAIL')}
|
||||
>{t('runLog.detail')}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!isError && (
|
||||
<ResultTab data={workflowProcessData} content={content} currentTab={currentTab} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkflowContent
|
||||
Loading…
Reference in New Issue