mirror of
https://github.com/langgenius/dify.git
synced 2026-07-21 18:58:35 +08:00
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import type { ComponentProps } from 'react'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
type ThinkingDetailsProps = ComponentProps<'details'> & {
|
|
isComplete: boolean
|
|
elapsedTime: number
|
|
}
|
|
|
|
/**
|
|
* Presentational collapsible "thinking" shell: the chevron summary with the
|
|
* "Thinking…/Thought (Xs)" label and the bordered content body. Driver-agnostic
|
|
* — callers compute `isComplete`/`elapsedTime` and pass the body as children.
|
|
*/
|
|
const ThinkingDetails = ({
|
|
isComplete,
|
|
elapsedTime,
|
|
className,
|
|
open,
|
|
children,
|
|
...rest
|
|
}: ThinkingDetailsProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<details {...rest} className={cn('group', className)} open={isComplete ? open : true}>
|
|
<summary className="flex cursor-pointer list-none items-center pl-2 font-bold whitespace-nowrap text-text-secondary select-none">
|
|
<div className="flex shrink-0 items-center">
|
|
<svg
|
|
className="mr-2 size-3 transition-transform duration-500 group-open:rotate-90"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
{isComplete
|
|
? `${t(($) => $['chat.thought'], { ns: 'common' })}(${elapsedTime.toFixed(1)}s)`
|
|
: `${t(($) => $['chat.thinking'], { ns: 'common' })}(${elapsedTime.toFixed(1)}s)`}
|
|
</div>
|
|
</summary>
|
|
<div className="ml-2 border-l border-components-panel-border bg-components-panel-bg-alt p-3 text-text-secondary">
|
|
{children}
|
|
</div>
|
|
</details>
|
|
)
|
|
}
|
|
|
|
export default ThinkingDetails
|