opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-09-08 02:43:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: path

Browse Source
This commit is contained in:
Joel 2026-04-20 13:50:25 +08:00
parent 3bb3670cb5
commit 3de8151a7a
9 changed files with 116 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app/components/app-sidebar/snippet-info/dropdown.tsx
View File

@ -2,9 +2,6 @@
import type { AppIconSelection } from '@/app/components/base/app-icon-picker' import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
import type { SnippetDetail } from '@/models/snippet' import type { SnippetDetail } from '@/models/snippet'
import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { import {
AlertDialog, AlertDialog,
AlertDialogActions, AlertDialogActions,
@ -13,7 +10,8 @@ import {
AlertDialogContent, AlertDialogContent,
AlertDialogDescription, AlertDialogDescription,
AlertDialogTitle, AlertDialogTitle,
} from '@/app/components/base/ui/alert-dialog' } from '@langgenius/dify-ui/alert-dialog'
import { cn } from '@langgenius/dify-ui/cn'
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -22,6 +20,8 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@langgenius/dify-ui/dropdown-menu' } from '@langgenius/dify-ui/dropdown-menu'
import { toast } from '@langgenius/dify-ui/toast' import { toast } from '@langgenius/dify-ui/toast'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog' import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
import { useRouter } from '@/next/navigation' import { useRouter } from '@/next/navigation'
import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets' import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
@ -53,10 +53,10 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
description: snippet.description, description: snippet.description,
icon: snippet.icon icon: snippet.icon
? { ? {
type: 'emoji' as const, type: 'emoji' as const,
icon: snippet.icon, icon: snippet.icon,
background: snippet.iconBackground || FALLBACK_ICON.background, background: snippet.iconBackground || FALLBACK_ICON.background,
} }
: FALLBACK_ICON, : FALLBACK_ICON,
}), [snippet.description, snippet.icon, snippet.iconBackground, snippet.name]) }), [snippet.description, snippet.icon, snippet.iconBackground, snippet.name])

14
web/app/components/app/workflow-log/evaluation-cell.tsx
View File

@ -2,13 +2,13 @@
import type { EvaluationLogItem } from '@/models/log' import type { EvaluationLogItem } from '@/models/log'
import { cn } from '@langgenius/dify-ui/cn' import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@/app/components/base/ui/popover' } from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils' import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
type EvaluationCellProps = { type EvaluationCellProps = {
@ -30,7 +30,7 @@ const EvaluationCell = ({
if (!evaluation.length) { if (!evaluation.length) {
return ( return (
<div className="system-sm-regular flex items-center justify-center px-2 py-3 text-text-quaternary"> <div className="flex items-center justify-center px-2 py-3 system-sm-regular text-text-quaternary">
- -
</div> </div>
) )
@ -73,19 +73,19 @@ const EvaluationCell = ({
)} )}
> >
<div className="min-w-0"> <div className="min-w-0">
<div className="system-sm-medium truncate text-text-secondary">{item.name}</div> <div className="truncate system-sm-medium text-text-secondary">{item.name}</div>
{item.nodeInfo && nodeVisual && nodeToneClasses && ( {item.nodeInfo && nodeVisual && nodeToneClasses && (
<div className="mt-1 flex min-w-0 items-center gap-1.5"> <div className="mt-1 flex min-w-0 items-center gap-1.5">
<div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}> <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
<span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} /> <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
</div> </div>
<span className="system-xs-regular truncate text-text-tertiary"> <span className="truncate system-xs-regular text-text-tertiary">
{item.nodeInfo.title} {item.nodeInfo.title}
</span> </span>
</div> </div>
)} )}
</div> </div>
<div className="system-sm-regular max-w-[120px] text-right wrap-break-word text-text-secondary"> <div className="max-w-[120px] text-right system-sm-regular wrap-break-word text-text-secondary">
{formatEvaluationValue(item.value)} {formatEvaluationValue(item.value)}
</div> </div>
</div> </div>

126
web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
View File

@ -1,14 +1,14 @@
import type { ChangeEvent, DragEvent } from 'react' import type { ChangeEvent, DragEvent } from 'react'
import type { InputField } from './input-fields-utils' import type { InputField } from './input-fields-utils'
import { cn } from '@langgenius/dify-ui/cn'
import { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@langgenius/dify-ui/button' import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@/app/components/base/ui/popover' } from '@langgenius/dify-ui/popover'
import { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { getExampleValue } from './input-fields-utils' import { getExampleValue } from './input-fields-utils'
type UploadRunPopoverProps = { type UploadRunPopoverProps = {
@ -87,71 +87,71 @@ const UploadRunPopover = ({
/> />
{currentFileName {currentFileName
? ( ? (
<div className="flex h-20 items-center gap-3 rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3"> <div className="flex h-20 items-center gap-3 rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3">
<div className="flex p-3"> <div className="flex p-3">
<span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" /> <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
</div>
<div className="min-w-0 flex-1 py-1 pr-2">
<div className="system-xs-medium truncate text-text-secondary">
{currentFileName}
</div> </div>
<div className="system-2xs-medium mt-0.5 flex h-3 items-center gap-1 text-text-tertiary"> <div className="min-w-0 flex-1 py-1 pr-2">
{!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>} <div className="truncate system-xs-medium text-text-secondary">
{!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>} {currentFileName}
{!!currentFileSize && <span>{currentFileSize}</span>} </div>
<div className="mt-0.5 flex h-3 items-center gap-1 system-2xs-medium text-text-tertiary">
{!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
{!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
{!!currentFileSize && <span>{currentFileSize}</span>}
</div>
</div> </div>
</div> <div className="flex items-center gap-1 pr-3">
<div className="flex items-center gap-1 pr-3"> {isFileUploading && (
{isFileUploading && ( <span aria-hidden="true" className="i-ri-loader-4-line h-4 w-4 animate-spin text-text-accent" />
<span aria-hidden="true" className="i-ri-loader-4-line h-4 w-4 animate-spin text-text-accent" /> )}
)}
<button
type="button"
className="rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
onClick={onClearUploadedFile}
aria-label={t('batch.removeUploadedFile')}
>
<span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
</button>
</div>
</div>
)
: (
<div
className="flex h-20 w-full items-center justify-center gap-3 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg p-3 text-left hover:border-components-button-secondary-border"
onDragOver={event => event.preventDefault()}
onDrop={handleDropFile}
>
<button
type="button"
className="flex shrink-0 p-3"
onClick={() => fileInputRef.current?.click()}
>
<span aria-hidden="true" className="i-ri-file-upload-line h-6 w-6 text-text-tertiary" />
<span className="sr-only">{t('batch.uploadTitle')}</span>
</button>
<div className="min-w-0 flex-1 text-left">
<div className="system-md-regular text-text-secondary">
{t('batch.uploadDropzonePrefix')}
{' '}
<span className="system-md-semibold">{t('batch.uploadDropzoneEmphasis')}</span>
{' '}
{t('batch.uploadDropzoneSuffix')}
</div>
<div className="system-xs-regular mt-0.5 text-text-tertiary">
{t('batch.uploadDropzoneDownloadPrefix')}
{' '}
<button <button
type="button" type="button"
className="text-text-accent hover:underline" className="rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
onClick={onDownloadTemplate} onClick={onClearUploadedFile}
aria-label={t('batch.removeUploadedFile')}
> >
{t('batch.uploadDropzoneDownloadLink')} <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
</button> </button>
</div> </div>
</div> </div>
</div> )
)} : (
<div
className="flex h-20 w-full items-center justify-center gap-3 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg p-3 text-left hover:border-components-button-secondary-border"
onDragOver={event => event.preventDefault()}
onDrop={handleDropFile}
>
<button
type="button"
className="flex shrink-0 p-3"
onClick={() => fileInputRef.current?.click()}
>
<span aria-hidden="true" className="i-ri-file-upload-line h-6 w-6 text-text-tertiary" />
<span className="sr-only">{t('batch.uploadTitle')}</span>
</button>
<div className="min-w-0 flex-1 text-left">
<div className="system-md-regular text-text-secondary">
{t('batch.uploadDropzonePrefix')}
{' '}
<span className="system-md-semibold">{t('batch.uploadDropzoneEmphasis')}</span>
{' '}
{t('batch.uploadDropzoneSuffix')}
</div>
<div className="mt-0.5 system-xs-regular text-text-tertiary">
{t('batch.uploadDropzoneDownloadPrefix')}
{' '}
<button
type="button"
className="text-text-accent hover:underline"
onClick={onDownloadTemplate}
>
{t('batch.uploadDropzoneDownloadLink')}
</button>
</div>
</div>
</div>
)}
{!!previewFields.length && ( {!!previewFields.length && (
<div className="space-y-1"> <div className="space-y-1">
@ -159,10 +159,10 @@ const UploadRunPopover = ({
<div className="flex overflow-hidden rounded-lg border border-divider-regular"> <div className="flex overflow-hidden rounded-lg border border-divider-regular">
{previewFields.map((field, index) => ( {previewFields.map((field, index) => (
<div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}> <div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
<div className="system-xs-medium-uppercase min-h-8 border-b border-divider-regular px-3 py-2 text-text-tertiary"> <div className="min-h-8 border-b border-divider-regular px-3 py-2 system-xs-medium-uppercase text-text-tertiary">
{field.name} {field.name}
</div> </div>
<div className="system-sm-regular min-h-8 px-3 py-2 text-text-secondary"> <div className="min-h-8 px-3 py-2 system-sm-regular text-text-secondary">
{getExampleValue(field, booleanExampleValue)} {getExampleValue(field, booleanExampleValue)}
</div> </div>
</div> </div>

6
web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
View File

@ -2,8 +2,6 @@
import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types' import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
import { cn } from '@langgenius/dify-ui/cn' import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { import {
Select, Select,
SelectContent, SelectContent,
@ -11,7 +9,9 @@ import {
SelectItem, SelectItem,
SelectLabel, SelectLabel,
SelectTrigger, SelectTrigger,
} from '@/app/components/base/ui/select' } from '@langgenius/dify-ui/select'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useEvaluationStore } from '../../store' import { useEvaluationStore } from '../../store'
import { getConditionMetricValueTypeTranslationKey } from '../../utils' import { getConditionMetricValueTypeTranslationKey } from '../../utils'

10
web/app/components/evaluation/components/conditions-section/condition-group.tsx
View File

@ -6,11 +6,8 @@ import type {
EvaluationResourceProps, EvaluationResourceProps,
JudgmentConditionItem, JudgmentConditionItem,
} from '../../types' } from '../../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import { Button } from '@langgenius/dify-ui/button' import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { import {
Select, Select,
SelectContent, SelectContent,
@ -19,7 +16,10 @@ import {
SelectLabel, SelectLabel,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from '@/app/components/base/ui/select' } from '@langgenius/dify-ui/select'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store' import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
import { import {
buildConditionMetricOptions, buildConditionMetricOptions,

22
web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
View File

@ -2,24 +2,24 @@
import type { AvailableEvaluationWorkflow } from '@/types/evaluation' import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
import { cn } from '@langgenius/dify-ui/cn' import { cn } from '@langgenius/dify-ui/cn'
import { useInfiniteScroll } from 'ahooks'
import * as React from 'react'
import { useDeferredValue, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import Loading from '@/app/components/base/loading'
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@/app/components/base/ui/popover' } from '@langgenius/dify-ui/popover'
import { import {
ScrollAreaContent, ScrollAreaContent,
ScrollAreaRoot, ScrollAreaRoot,
ScrollAreaScrollbar, ScrollAreaScrollbar,
ScrollAreaThumb, ScrollAreaThumb,
ScrollAreaViewport, ScrollAreaViewport,
} from '@/app/components/base/ui/scroll-area' } from '@langgenius/dify-ui/scroll-area'
import { useInfiniteScroll } from 'ahooks'
import * as React from 'react'
import { useDeferredValue, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import Loading from '@/app/components/base/loading'
import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation' import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
type WorkflowSelectorProps = { type WorkflowSelectorProps = {
@ -119,7 +119,7 @@ const WorkflowSelector = ({
</div> </div>
<div className="min-w-0 flex-1 px-1 py-1 text-left"> <div className="min-w-0 flex-1 px-1 py-1 text-left">
<div className={cn( <div className={cn(
'system-sm-regular truncate', 'truncate system-sm-regular',
currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder', currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
)} )}
> >
@ -158,7 +158,7 @@ const WorkflowSelector = ({
) )
: !workflows.length : !workflows.length
? ( ? (
<div className="system-sm-regular flex h-[120px] items-center justify-center text-text-tertiary"> <div className="flex h-[120px] items-center justify-center system-sm-regular text-text-tertiary">
{t('noData', { ns: 'common' })} {t('noData', { ns: 'common' })}
</div> </div>
) )
@ -184,7 +184,7 @@ const WorkflowSelector = ({
<span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" /> <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
</div> </div>
</div> </div>
<div className="system-sm-medium min-w-0 flex-1 truncate px-1 py-1 text-text-secondary"> <div className="min-w-0 flex-1 truncate px-1 py-1 system-sm-medium text-text-secondary">
{getWorkflowName(workflow)} {getWorkflowName(workflow)}
</div> </div>
{workflow.id === value && ( {workflow.id === value && (

30
web/app/components/evaluation/components/metric-selector/index.tsx
View File

@ -2,16 +2,16 @@
import type { ChangeEvent } from 'react' import type { ChangeEvent } from 'react'
import type { MetricSelectorProps } from './types' import type { MetricSelectorProps } from './types'
import { cn } from '@langgenius/dify-ui/cn'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import { Button } from '@langgenius/dify-ui/button' import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@/app/components/base/ui/popover' } from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import { useEvaluationResource, useEvaluationStore } from '../../store' import { useEvaluationResource, useEvaluationStore } from '../../store'
import SelectorEmptyState from './selector-empty-state' import SelectorEmptyState from './selector-empty-state'
import SelectorFooter from './selector-footer' import SelectorFooter from './selector-footer'
@ -68,17 +68,17 @@ const MetricSelector = ({
render={( render={(
triggerStyle === 'text' triggerStyle === 'text'
? ( ? (
<button type="button" className={cn('system-sm-medium inline-flex items-center text-text-accent', triggerClassName)}> <button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
<span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" /> <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
{t('metrics.add')} {t('metrics.add')}
</button> </button>
) )
: ( : (
<Button variant="ghost-accent" className={triggerClassName}> <Button variant="ghost-accent" className={triggerClassName}>
<span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" /> <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
{t('metrics.add')} {t('metrics.add')}
</Button> </Button>
) )
)} )}
/> />
<PopoverContent popupClassName="w-[360px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]"> <PopoverContent popupClassName="w-[360px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]">

4
web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
View File

@ -2,10 +2,10 @@
import type { MetricOption } from '../../types' import type { MetricOption } from '../../types'
import { cn } from '@langgenius/dify-ui/cn' import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox' import Checkbox from '@/app/components/base/checkbox'
import Input from '@/app/components/base/input' import Input from '@/app/components/base/input'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
import { getTranslatedMetricDescription } from '../../default-metric-descriptions' import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils' import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
@ -37,7 +37,7 @@ const PipelineMetricItem = ({
onClick={onToggle} onClick={onToggle}
> >
<Checkbox checked={selected} /> <Checkbox checked={selected} />
<span className="system-sm-medium truncate text-text-secondary">{metric.label}</span> <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
<Tooltip> <Tooltip>
<TooltipTrigger <TooltipTrigger
render={( render={(

4
web/app/components/evaluation/components/section-header.tsx
View File

@ -2,7 +2,7 @@
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn' import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip' import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
type SectionHeaderProps = { type SectionHeaderProps = {
title: string title: string
@ -32,7 +32,7 @@ const SectionHeader = ({
<div className={cn('flex flex-wrap items-start justify-between gap-3', className)}> <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
<div> <div>
<div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div> <div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div>
{description && <div className={cn('system-sm-regular mt-1 text-text-tertiary', descriptionClassName)}>{description}</div>} {description && <div className={cn('mt-1 system-sm-regular text-text-tertiary', descriptionClassName)}>{description}</div>}
</div> </div>
{action} {action}
</div> </div>