feat: add db types in file tree icon

web/app/components/base/file-uploader/file-type-icon.tsx

@@ -14,6 +14,7 @@ import {
   RiMarkdownFill,
 } from '@remixicon/react'
 import { memo } from 'react'
+import { FileDatabase2Fill } from '@/app/components/base/icons/src/vender/solid/development'
 import { cn } from '@/utils/classnames'
 import { FileAppearanceTypeEnum } from './types'
 
@@ -66,6 +67,10 @@ const FILE_TYPE_ICON_MAP = {
     component: RiFileGifFill,
     color: 'text-[#00B2EA]',
   },
+  [FileAppearanceTypeEnum.database]: {
+    component: FileDatabase2Fill,
+    color: 'text-[#A4AAC1]',
+  },
 }
 type FileTypeIconProps = {
   type: FileAppearanceType

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

@@ -12,6 +12,7 @@ export enum FileAppearanceTypeEnum {
   word = 'word',
   ppt = 'ppt',
   gif = 'gif',
+  database = 'database',
   custom = 'custom',
 }
 

web/app/components/base/icons/assets/vender/solid/development/file-database-2-fill.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 6.33333V8.33333C14 9.9902 11.3137 11.3333 8 11.3333C4.68629 11.3333 2 9.9902 2 8.33333V6.33333C2 7.9902 4.68629 9.33333 8 9.33333C11.3137 9.33333 14 7.9902 14 6.33333ZM2 9.66667C2 11.3235 4.68629 12.6667 8 12.6667C11.3137 12.6667 14 11.3235 14 9.66667V11.6667C14 13.3235 11.3137 14.6667 8 14.6667C4.68629 14.6667 2 13.3235 2 11.6667V9.66667ZM8 8C4.68629 8 2 6.65685 2 5C2 3.34315 4.68629 2 8 2C11.3137 2 14 3.34315 14 5C14 6.65685 11.3137 8 8 8Z" fill="#A4AAC1"/>
+</svg>

web/app/components/base/icons/src/vender/solid/development/FileDatabase2Fill.json

@@ -0,0 +1,26 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 16 16",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M14 6.33333V8.33333C14 9.9902 11.3137 11.3333 8 11.3333C4.68629 11.3333 2 9.9902 2 8.33333V6.33333C2 7.9902 4.68629 9.33333 8 9.33333C11.3137 9.33333 14 7.9902 14 6.33333ZM2 9.66667C2 11.3235 4.68629 12.6667 8 12.6667C11.3137 12.6667 14 11.3235 14 9.66667V11.6667C14 13.3235 11.3137 14.6667 8 14.6667C4.68629 14.6667 2 13.3235 2 11.6667V9.66667ZM8 8C4.68629 8 2 6.65685 2 5C2 3.34315 4.68629 2 8 2C11.3137 2 14 3.34315 14 5C14 6.65685 11.3137 8 8 8Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "FileDatabase2Fill"
+}

web/app/components/base/icons/src/vender/solid/development/FileDatabase2Fill.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './FileDatabase2Fill.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'FileDatabase2Fill'
+
+export default Icon

web/app/components/base/icons/src/vender/solid/development/index.ts

@@ -4,6 +4,7 @@ export { default as BarChartSquare02 } from './BarChartSquare02'
 export { default as Container } from './Container'
 export { default as Database02 } from './Database02'
 export { default as Database03 } from './Database03'
+export { default as FileDatabase2Fill } from './FileDatabase2Fill'
 export { default as FileHeart02 } from './FileHeart02'
 export { default as PatternRecognition } from './PatternRecognition'
 export { default as PromptEngineering } from './PromptEngineering'

web/app/components/workflow-app/components/workflow-header/view-picker-trigger.tsx

@@ -1,9 +1,9 @@
 'use client'
 
+import type { ViewType } from '@/app/components/workflow/types'
 import { useQueryState } from 'nuqs'
 import { useCallback } from 'react'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import { ViewType } from '@/app/components/workflow/types'
 import ViewPicker from '@/app/components/workflow/view-picker'
 import { parseAsViewType, WORKFLOW_VIEW_PARAM_KEY } from '../../search-params'
 

web/app/components/workflow/skill/hooks/use-file-type-info.ts

@@ -4,6 +4,7 @@ import {
   getFileExtension,
   isImageFile,
   isMarkdownFile,
+  isSQLiteFile,
   isTextLikeFile,
   isVideoFile,
 } from '../utils/file-utils'
@@ -13,6 +14,7 @@ export type FileTypeInfo = {
   isCodeOrText: boolean
   isImage: boolean
   isVideo: boolean
+  isSQLite: boolean
   isEditable: boolean
   isMediaFile: boolean
 }
@@ -23,6 +25,7 @@ export function useFileTypeInfo(fileNode: AppAssetTreeView | undefined): FileTyp
     const markdown = isMarkdownFile(ext)
     const image = isImageFile(ext)
     const video = isVideoFile(ext)
+    const sqlite = isSQLiteFile(ext)
     const editable = isTextLikeFile(ext)
     const codeOrText = editable && !markdown
 
@@ -31,6 +34,7 @@ export function useFileTypeInfo(fileNode: AppAssetTreeView | undefined): FileTyp
       isCodeOrText: codeOrText,
       isImage: image,
       isVideo: video,
+      isSQLite: sqlite,
       isEditable: editable,
       isMediaFile: image || video,
     }

web/app/components/workflow/skill/utils/file-utils.ts

@@ -4,6 +4,7 @@ const MARKDOWN_EXTENSIONS = ['md', 'markdown', 'mdx']
 const CODE_EXTENSIONS = ['json', 'yaml', 'yml', 'toml', 'js', 'jsx', 'ts', 'tsx', 'py', 'schema']
 const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico', 'tiff', 'psd', 'heic', 'heif', 'avif']
 const VIDEO_EXTENSIONS = ['mp4', 'mov', 'webm', 'mpeg', 'mpg', 'm4v', 'avi', 'mkv', 'flv', 'wmv', '3gp']
+const SQLITE_EXTENSIONS = ['db', 'sqlite', 'sqlite3']
 
 const BINARY_EXTENSIONS = [
   'mp3',
@@ -94,6 +95,9 @@ export function getFileIconType(name: string): FileAppearanceTypeEnum {
   if (CODE_EXTENSIONS.includes(extension))
     return FileAppearanceTypeEnum.code
 
+  if (SQLITE_EXTENSIONS.includes(extension))
+    return FileAppearanceTypeEnum.database
+
   return FileAppearanceTypeEnum.document
 }
 
@@ -117,6 +121,10 @@ export function isVideoFile(extension: string): boolean {
   return VIDEO_EXTENSIONS.includes(extension)
 }
 
+export function isSQLiteFile(extension: string): boolean {
+  return SQLITE_EXTENSIONS.includes(extension)
+}
+
 export function getFileLanguage(name: string): string {
   const extension = name.split('.').pop()?.toLowerCase() ?? ''