feat: variable preview

web/app/components/base/features/types.ts

@@ -29,6 +29,11 @@ export type SensitiveWordAvoidance = EnabledOrDisabled & {
   config?: any
 }
 
+export enum PreviewMode {
+  NewPage = 'new_page',
+  CurrentPage = 'current_page',
+}
+
 export type FileUpload = {
   image?: EnabledOrDisabled & {
     detail?: Resolution
@@ -56,6 +61,10 @@ export type FileUpload = {
   allowed_file_upload_methods?: TransferMethod[]
   number_limits?: number
   fileUploadConfig?: FileUploadConfigResponse
+  preview_config?: {
+    mode?: PreviewMode
+    file_type_list?: string[]
+  }
 } & EnabledOrDisabled
 
 export type AnnotationReplyConfig = {

web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx

@@ -23,6 +23,7 @@ import cn from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
+import { PreviewMode } from '@/app/components/base/features/types'
 
 type FileInAttachmentItemProps = {
   file: FileEntity
@@ -31,6 +32,7 @@ type FileInAttachmentItemProps = {
   onRemove?: (fileId: string) => void
   onReUpload?: (fileId: string) => void
   canPreview?: boolean
+  previewMode?: PreviewMode
 }
 const FileInAttachmentItem = ({
   file,
@@ -39,6 +41,7 @@ const FileInAttachmentItem = ({
   onRemove,
   onReUpload,
   canPreview,
+  previewMode = PreviewMode.CurrentPage,
 }: FileInAttachmentItemProps) => {
   const { id, name, type, progress, supportFileType, base64Url, url, isRemote } = file
   const ext = getFileExtension(name, type, isRemote)
@@ -49,7 +52,13 @@ const FileInAttachmentItem = ({
       <div className={cn(
         'flex h-12 items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pr-3 shadow-xs',
         progress === -1 && 'border-state-destructive-border bg-state-destructive-hover',
-      )}>
+        canPreview && previewMode === PreviewMode.NewPage && 'cursor-pointer',
+      )}
+        onClick={() => {
+          if (canPreview && previewMode === PreviewMode.NewPage)
+            window.open(url || base64Url || '', '_blank')
+        }}
+      >
         <div className='flex h-12 w-12 items-center justify-center'>
           {
             isImageFile && (

web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx

@@ -106,6 +106,8 @@ const FileUploaderInAttachment = ({
               showDownloadAction={false}
               onRemove={() => handleRemoveFile(file.id)}
               onReUpload={() => handleReUploadFile(file.id)}
+              canPreview={fileConfig.preview_config?.file_type_list?.includes(file.type)}
+              previewMode={fileConfig.preview_config?.mode}
             />
           ))
         }

web/app/components/base/segmented-control/index.tsx

@@ -20,6 +20,7 @@ type SegmentedControlProps<T extends string | number | symbol> = {
   onChange: (value: T) => void
   className?: string
   activeClassName?: string
+  btnClassName?: string
 }
 
 const SegmentedControlVariants = cva(
@@ -90,6 +91,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
   padding,
   activeState,
   activeClassName,
+  btnClassName,
 }: SegmentedControlProps<T>
   & VariantProps<typeof SegmentedControlVariants>
   & VariantProps<typeof SegmentedControlItemVariants>
@@ -115,6 +117,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
               SegmentedControlItemVariants({ size, activeState: isSelected ? activeState : 'default' }),
               isSelected && activeClassName,
               disabled && 'disabled',
+              btnClassName,
             )}
             onClick={() => {
               if (!isSelected)

web/app/components/base/textarea/index.tsx

@@ -24,12 +24,16 @@ export type TextareaProps = {
   disabled?: boolean
   destructive?: boolean
   styleCss?: CSSProperties
+  onFocus?: () => void
+  onBlur?: () => void
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants>
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, value, onChange, disabled, size, destructive, styleCss, ...props }, ref) => {
+  ({ className, value, onChange, disabled, size, destructive, styleCss, onFocus, onBlur, ...props }, ref) => {
     return (
       <textarea
+        onFocus={onFocus}
+        onBlur={onBlur}
         ref={ref}
         style={styleCss}
         className={cn(