merge main

web/app/components/base/app-icon-picker/index.tsx

@@ -112,7 +112,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     isShow
     closable={false}
     wrapperClassName={className}
-    className={cn(s.container, '!w-[362px] !p-0')}
+    className={cn(s.container, '!h-[462px] !w-[362px] !p-0')}
   >
     {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
       <div className='flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary'>
@@ -131,8 +131,8 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
       </div>
     </div>}
 
-    <EmojiPickerInner className={cn(activeTab === 'emoji' ? 'block' : 'hidden', 'pt-2')} onSelect={handleSelectEmoji} />
-    <ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
+    {activeTab === 'emoji' && <EmojiPickerInner className={cn('flex-1 overflow-hidden pt-2')} onSelect={handleSelectEmoji} />}
+    {activeTab === 'image' && <ImageInput className={cn('flex-1 overflow-hidden')} onImageInput={handleImageInput} />}
 
     <Divider className='m-0' />
     <div className='flex w-full items-center justify-center gap-2 p-3'>

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

@@ -274,7 +274,7 @@ const Chat: FC<ChatProps> = ({
           </div>
         </div>
         <div
-          className={`absolute bottom-0 flex justify-center bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
+          className={`absolute bottom-0 z-10 flex justify-center bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
           ref={chatFooterRef}
         >
           <div

web/app/components/base/emoji-picker/Inner.tsx

@@ -5,6 +5,8 @@ import data from '@emoji-mart/data'
 import type { EmojiMartData } from '@emoji-mart/data'
 import { init } from 'emoji-mart'
 import {
+  ChevronDownIcon,
+  ChevronUpIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
 import Input from '@/app/components/base/input'
@@ -60,16 +62,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
   const { categories } = data as EmojiMartData
   const [selectedEmoji, setSelectedEmoji] = useState('')
   const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
+  const [showStyleColors, setShowStyleColors] = useState(false)
 
   const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
   const [isSearching, setIsSearching] = useState(false)
 
   React.useEffect(() => {
-    if (selectedEmoji && selectedBackground)
-      onSelect?.(selectedEmoji, selectedBackground)
+    if (selectedEmoji) {
+      setShowStyleColors(true)
+      if (selectedBackground)
+        onSelect?.(selectedEmoji, selectedBackground)
+    }
   }, [onSelect, selectedEmoji, selectedBackground])
 
-  return <div className={cn(className)}>
+  return <div className={cn(className, 'flex flex-col')}>
     <div className='flex w-full flex-col items-center px-3 pb-2'>
       <div className="relative w-full">
         <div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3">
@@ -95,7 +101,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     </div>
     <Divider className='my-3' />
 
-    <div className="max-h-[200px] w-full overflow-y-auto overflow-x-hidden px-3">
+    <div className="w-full flex-1 overflow-y-auto overflow-x-hidden px-3">
       {isSearching && <>
         <div key={'category-search'} className='flex flex-col'>
           <p className='system-xs-medium-uppercase mb-1 text-text-primary'>Search</p>
@@ -141,33 +147,34 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     </div>
 
     {/* Color Select */}
-    <div className={cn('p-3 pb-0', selectedEmoji === '' ? 'opacity-25' : '')}>
+    <div className={cn('flex items-center justify-between p-3 pb-0')}>
       <p className='system-xs-medium-uppercase mb-2 text-text-primary'>Choose Style</p>
-      <div className='grid h-full w-full grid-cols-8 gap-1'>
-        {backgroundColors.map((color) => {
-          return <div
-            key={color}
-            className={
-              cn(
-                'cursor-pointer',
-                'ring-offset-1 hover:ring-1',
-                'inline-flex h-10 w-10 items-center justify-center rounded-lg',
-                color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
-              )}
-            onClick={() => {
-              setSelectedBackground(color)
-            }}
-          >
-            <div className={cn(
-              'flex h-8 w-8 items-center justify-center rounded-lg p-1',
-            )
-            } style={{ background: color }}>
-              {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
-            </div>
-          </div>
-        })}
-      </div>
+      {showStyleColors ? <ChevronDownIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} /> : <ChevronUpIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} />}
     </div>
+    {showStyleColors && <div className='grid w-full grid-cols-8 gap-1 px-3'>
+      {backgroundColors.map((color) => {
+        return <div
+          key={color}
+          className={
+            cn(
+              'cursor-pointer',
+              'ring-offset-1 hover:ring-1',
+              'inline-flex h-10 w-10 items-center justify-center rounded-lg',
+              color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
+            )}
+          onClick={() => {
+            setSelectedBackground(color)
+          }}
+        >
+          <div className={cn(
+            'flex h-8 w-8 items-center justify-center rounded-lg p-1',
+          )
+          } style={{ background: color }}>
+          {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
+          </div>
+        </div>
+      })}
+    </div>}
   </div>
 }
 export default EmojiPickerInner

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

@@ -26,9 +26,11 @@ type Option = {
   icon: React.JSX.Element
 }
 type FileUploaderInAttachmentProps = {
+  isDisabled?: boolean
   fileConfig: FileUpload
 }
 const FileUploaderInAttachment = ({
+  isDisabled,
   fileConfig,
 }: FileUploaderInAttachmentProps) => {
   const { t } = useTranslation()
@@ -89,16 +91,18 @@ const FileUploaderInAttachment = ({
 
   return (
     <div>
-      <div className='flex items-center space-x-1'>
-        {options.map(renderOption)}
-      </div>
+      {!isDisabled && (
+        <div className='flex items-center space-x-1'>
+          {options.map(renderOption)}
+        </div>
+      )}
       <div className='mt-1 space-y-1'>
         {
           files.map(file => (
             <FileItem
               key={file.id}
               file={file}
-              showDeleteAction
+              showDeleteAction={!isDisabled}
               showDownloadAction={false}
               onRemove={() => handleRemoveFile(file.id)}
               onReUpload={() => handleReUploadFile(file.id)}
@@ -114,18 +118,20 @@ export type FileUploaderInAttachmentWrapperProps = {
   value?: FileEntity[]
   onChange: (files: FileEntity[]) => void
   fileConfig: FileUpload
+  isDisabled?: boolean
 }
 const FileUploaderInAttachmentWrapper = ({
   value,
   onChange,
   fileConfig,
+  isDisabled,
 }: FileUploaderInAttachmentWrapperProps) => {
   return (
     <FileContextProvider
       value={value}
       onChange={onChange}
     >
-      <FileUploaderInAttachment fileConfig={fileConfig} />
+      <FileUploaderInAttachment isDisabled={isDisabled} fileConfig={fileConfig} />
     </FileContextProvider>
   )
 }

web/app/components/base/file-uploader/utils.ts

@@ -154,7 +154,7 @@ export const getProcessedFilesFromResponse = (files: FileResponse[]) => {
       transferMethod: fileItem.transfer_method,
       supportFileType: fileItem.type,
       uploadedId: fileItem.upload_file_id || fileItem.related_id,
-      url: fileItem.url,
+      url: fileItem.url || fileItem.remote_url,
     }
   })
 }

web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx

@@ -32,6 +32,10 @@ export const PromptMenuItem = memo(({
           return
         onMouseEnter()
       }}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
       onClick={() => {
         if (disabled)
           return

web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx

@@ -44,6 +44,10 @@ export const VariableMenuItem = memo(({
       tabIndex={-1}
       ref={setRefElement}
       onMouseEnter={onMouseEnter}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
       onClick={onClick}>
       <div className='mr-2'>
         {icon}

web/app/components/base/tab-header/index.tsx

@@ -9,30 +9,34 @@ type Item = {
   isRight?: boolean
   icon?: React.ReactNode
   extra?: React.ReactNode
+  disabled?: boolean
 }
 
 export type ITabHeaderProps = {
   items: Item[]
   value: string
+  itemClassName?: string
   onChange: (value: string) => void
 }
 
 const TabHeader: FC<ITabHeaderProps> = ({
   items,
   value,
+  itemClassName,
   onChange,
 }) => {
-  const renderItem = ({ id, name, icon, extra }: Item) => (
+  const renderItem = ({ id, name, icon, extra, disabled }: Item) => (
     <div
       key={id}
       className={cn(
         'system-md-semibold relative flex cursor-pointer items-center border-b-2 border-transparent pb-2 pt-2.5',
         id === value ? 'border-components-tab-active text-text-primary' : 'text-text-tertiary',
+        disabled && 'cursor-not-allowed opacity-30',
       )}
-      onClick={() => onChange(id)}
+      onClick={() => !disabled && onChange(id)}
     >
       {icon || ''}
-      <div className='ml-2'>{name}</div>
+      <div className={cn('ml-2', itemClassName)}>{name}</div>
       {extra || ''}
     </div>
   )