Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/tools/add-tool-modal/index.tsx

@@ -19,7 +19,7 @@ import { getLanguage } from '@/i18n/language'
 import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
-import SearchInput from '@/app/components/base/search-input'
+import Input from '@/app/components/base/input'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import {
@@ -193,7 +193,13 @@ const AddToolModal: FC<Props> = ({
           <div className='relative grow bg-white rounded-r-xl overflow-y-auto'>
             <div className='z-10 sticky top-0 left-0 right-0 p-2 flex items-center gap-1 bg-white'>
               <div className='grow'>
-                <SearchInput className='w-full' value={keywords} onChange={handleKeywordsChange} />
+                <Input
+                  showLeftIcon
+                  showClearIcon
+                  value={keywords}
+                  onChange={e => handleKeywordsChange(e.target.value)}
+                  onClear={() => handleKeywordsChange('')}
+                />
               </div>
               <div className='ml-2 mr-1 w-[1px] h-4 bg-gray-200'></div>
               <div className='p-2 cursor-pointer' onClick={onHide}>

web/app/components/tools/edit-custom-collection-modal/index.tsx

@@ -13,6 +13,8 @@ import TestApi from './test-api'
 import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import AppIcon from '@/app/components/base/app-icon'
 import { parseParamsSchema } from '@/service/tools'
@@ -72,7 +74,7 @@ const EditCustomCollectionModal: FC<Props> = ({
   }
   const schema = customCollection.schema
   const debouncedSchema = useDebounce(schema, { wait: 500 })
-  const setSchema = (schema: string) => {
+  const setSchema = (schema: any) => {
     const newCollection = produce(customCollection, (draft) => {
       draft.schema = schema
     })
@@ -195,8 +197,8 @@ const EditCustomCollectionModal: FC<Props> = ({
                 <div className={fieldNameClassNames}>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
                 <div className='flex items-center justify-between gap-3'>
                   <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
-                  <input
-                    className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
+                  <Input
+                    className='h-10 grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
                     value={customCollection.provider}
                     onChange={(e) => {
                       const newCollection = produce(customCollection, (draft) => {
@@ -226,12 +228,12 @@ const EditCustomCollectionModal: FC<Props> = ({
                   <GetSchema onChange={setSchema} />
 
                 </div>
-                <textarea
+                <Textarea
+                  className='h-[240px] resize-none'
                   value={schema}
                   onChange={e => setSchema(e.target.value)}
-                  className='w-full h-[240px] px-3 py-2 leading-4 text-xs font-normal text-gray-900 bg-gray-100 rounded-lg overflow-y-auto'
                   placeholder={t('tools.createTool.schemaPlaceHolder')!}
-                ></textarea>
+                />
               </div>
 
               {/* Available Tools  */}
@@ -291,7 +293,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               {/* Privacy Policy */}
               <div>
                 <div className={fieldNameClassNames}>{t('tools.createTool.privacyPolicy')}</div>
-                <input
+                <Input
                   value={customCollection.privacy_policy}
                   onChange={(e) => {
                     const newCollection = produce(customCollection, (draft) => {
@@ -299,12 +301,12 @@ const EditCustomCollectionModal: FC<Props> = ({
                     })
                     setCustomCollection(newCollection)
                   }}
-                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+                  className='h-10 grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
               </div>
 
               <div>
                 <div className={fieldNameClassNames}>{t('tools.createTool.customDisclaimer')}</div>
-                <input
+                <Input
                   value={customCollection.custom_disclaimer}
                   onChange={(e) => {
                     const newCollection = produce(customCollection, (draft) => {
@@ -312,7 +314,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                     })
                     setCustomCollection(newCollection)
                   }}
-                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
+                  className='h-10 grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
               </div>
 
             </div>

web/app/components/tools/labels/filter.tsx

@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import SearchInput from '@/app/components/base/search-input'
+import Input from '@/app/components/base/input'
 import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
@@ -113,7 +113,13 @@ const LabelFilter: FC<LabelFilterProps> = ({
         <PortalToFollowElemContent className='z-[1002]'>
           <div className='relative w-[240px] bg-white rounded-lg border-[0.5px] border-gray-200  shadow-lg'>
             <div className='p-2 border-b-[0.5px] border-black/5'>
-              <SearchInput white value={keywords} onChange={handleKeywordsChange} />
+              <Input
+                showLeftIcon
+                showClearIcon
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
             </div>
             <div className='p-1'>
               {filteredLabelList.map(label => (

web/app/components/tools/labels/selector.tsx

@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import SearchInput from '@/app/components/base/search-input'
+import Input from '@/app/components/base/input'
 import { Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import Checkbox from '@/app/components/base/checkbox'
 import type { Label } from '@/app/components/tools/labels/constant'
@@ -79,7 +79,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
           className='block'
         >
           <div className={cn(
-            'flex items-center gap-1 px-3 h-9 rounded-lg border-[0.5px] border-transparent bg-gray-100 cursor-pointer hover:bg-gray-200',
+            'flex items-center gap-1 px-3 h-10 rounded-lg border-[0.5px] border-transparent bg-gray-100 cursor-pointer hover:bg-gray-200',
             open && '!bg-gray-200 hover:bg-gray-200',
           )}>
             <div title={value.length > 0 ? selectedLabels : ''} className={cn('grow text-[13px] leading-[18px] text-gray-700 truncate', !value.length && '!text-gray-400')}>
@@ -94,7 +94,13 @@ const LabelSelector: FC<LabelSelectorProps> = ({
         <PortalToFollowElemContent className='z-[1040]'>
           <div className='relative w-[591px] bg-white rounded-lg border-[0.5px] border-gray-200  shadow-lg'>
             <div className='p-2 border-b-[0.5px] border-black/5'>
-              <SearchInput white value={keywords} onChange={handleKeywordsChange} />
+              <Input
+                showLeftIcon
+                showClearIcon
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
             </div>
             <div className='p-1 max-h-[264px] overflow-y-auto'>
               {filteredLabelList.map(label => (

web/app/components/tools/provider-list.tsx

@@ -7,7 +7,7 @@ import cn from '@/utils/classnames'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import LabelFilter from '@/app/components/tools/labels/filter'
-import SearchInput from '@/app/components/base/search-input'
+import Input from '@/app/components/base/input'
 import { DotsGrid } from '@/app/components/base/icons/src/vender/line/general'
 import { Colors } from '@/app/components/base/icons/src/vender/line/others'
 import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
@@ -84,7 +84,14 @@ const ProviderList = () => {
           />
           <div className='flex items-center gap-2'>
             <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
-            <SearchInput className='w-[200px]' value={keywords} onChange={handleKeywordsChange} />
+            <Input
+              showLeftIcon
+              showClearIcon
+              wrapperClassName='w-[200px]'
+              value={keywords}
+              onChange={e => handleKeywordsChange(e.target.value)}
+              onClear={() => handleKeywordsChange('')}
+            />
           </div>
         </div>
         <div className={cn(

web/app/components/tools/utils/index.ts

@@ -1,5 +1,5 @@
 import type { ThoughtItem } from '@/app/components/base/chat/chat/type'
-import type { VisionFile } from '@/types/app'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
 
 export const sortAgentSorts = (list: ThoughtItem[]) => {
   if (!list)
@@ -11,14 +11,14 @@ export const sortAgentSorts = (list: ThoughtItem[]) => {
   return temp
 }
 
-export const addFileInfos = (list: ThoughtItem[], messageFiles: VisionFile[]) => {
+export const addFileInfos = (list: ThoughtItem[], messageFiles: FileEntity[]) => {
   if (!list || !messageFiles)
     return list
   return list.map((item) => {
     if (item.files && item.files?.length > 0) {
       return {
         ...item,
-        message_files: item.files.map(fileId => messageFiles.find(file => file.id === fileId)) as VisionFile[],
+        message_files: item.files.map(fileId => messageFiles.find(file => file.id === fileId)) as FileEntity[],
       }
     }
     return item

web/app/components/tools/workflow-tool/index.tsx

@@ -6,6 +6,8 @@ import produce from 'immer'
 import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
 import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
 import EmojiPicker from '@/app/components/base/emoji-picker'
@@ -131,9 +133,8 @@ const WorkflowToolAsModal: FC<Props> = ({
                 <div className='py-2 leading-5 text-sm font-medium text-gray-900'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
                 <div className='flex items-center justify-between gap-3'>
                   <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' iconType='emoji' icon={emoji.content} background={emoji.background} />
-                  <input
-                    type='text'
-                    className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+                  <Input
+                    className='grow h-10'
                     placeholder={t('tools.createTool.toolNamePlaceHolder')!}
                     value={label}
                     onChange={e => setLabel(e.target.value)}
@@ -152,9 +153,8 @@ const WorkflowToolAsModal: FC<Props> = ({
                     }
                   />
                 </div>
-                <input
-                  type='text'
-                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+                <Input
+                  className='h-10'
                   placeholder={t('tools.createTool.nameForToolCallPlaceHolder')!}
                   value={name}
                   onChange={e => setName(e.target.value)}
@@ -166,8 +166,7 @@ const WorkflowToolAsModal: FC<Props> = ({
               {/* description */}
               <div>
                 <div className='py-2 leading-5 text-sm font-medium text-gray-900'>{t('tools.createTool.description')}</div>
-                <textarea
-                  className='w-full px-3 py-2 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs h-[80px] resize-none'
+                <Textarea
                   placeholder={t('tools.createTool.descriptionPlaceholder') || ''}
                   value={description}
                   onChange={e => setDescription(e.target.value)}
@@ -234,10 +233,11 @@ const WorkflowToolAsModal: FC<Props> = ({
               {/* Privacy Policy */}
               <div>
                 <div className='py-2 leading-5 text-sm font-medium text-gray-900'>{t('tools.createTool.privacyPolicy')}</div>
-                <input
+                <Input
+                  className='h-10'
                   value={privacyPolicy}
                   onChange={e => setPrivacyPolicy(e.target.value)}
-                  className='grow w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+                  placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
               </div>
             </div>
             <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >