Fix: bug fixes and icon replacement #10703 (#10814)

### What problem does this PR solve?

Fix: bug fixes and icon replacement #10703

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/file-uploader.tsx

@@ -12,7 +12,6 @@ import { toast } from 'sonner';
 
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { useControllableState } from '@/hooks/use-controllable-state';
 import { cn, formatBytes } from '@/lib/utils';
 import { useTranslation } from 'react-i18next';
@@ -53,11 +52,13 @@ function FilePreview({ file }: FilePreviewProps) {
 function FileCard({ file, progress, onRemove }: FileCardProps) {
   return (
     <div className="relative flex items-center gap-2.5">
-      <div className="flex flex-1 gap-2.5">
-        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}
-        <div className="flex w-full flex-col gap-2">
+      <div className="flex flex-1 gap-2.5 overflow-hidden">
+        <div className="w-8">
+          {isFileWithPreview(file) ? <FilePreview file={file} /> : null}
+        </div>
+        <div className="flex flex-col flex-1 gap-2 overflow-hidden">
           <div className="flex flex-col gap-px">
-            <p className="line-clamp-1 text-sm font-medium text-foreground/80">
+            <p className="line-clamp-1 text-sm font-medium text-foreground/80 text-ellipsis">
               {file.name}
             </p>
             <p className="text-xs text-muted-foreground">
@@ -319,8 +320,8 @@ export function FileUploader(props: FileUploaderProps) {
         )}
       </Dropzone>
       {files?.length ? (
-        <ScrollArea className="h-fit w-full px-3">
-          <div className="flex max-h-48 flex-col gap-4">
+        <div className="h-fit w-full px-3">
+          <div className="flex max-h-48 flex-col gap-4 overflow-auto scrollbar-auto">
             {files?.map((file, index) => (
               <FileCard
                 key={index}
@@ -330,7 +331,7 @@ export function FileUploader(props: FileUploaderProps) {
               />
             ))}
           </div>
-        </ScrollArea>
+        </div>
       ) : null}
     </div>
   );

web/src/components/list-filter-bar/index.tsx

@@ -6,7 +6,7 @@ import React, {
   ReactNode,
   useMemo,
 } from 'react';
-import { IconFont } from '../icon-font';
+import { HomeIcon } from '../svg-icon';
 import { Button, ButtonProps } from '../ui/button';
 import { SearchInput } from '../ui/input';
 import { CheckboxFormMultipleProps, FilterPopover } from './filter-popover';
@@ -72,7 +72,8 @@ export default function ListFilterBar({
     <div className={cn('flex justify-between mb-5 items-center', className)}>
       <div className="text-2xl font-semibold flex items-center gap-2.5">
         {typeof icon === 'string' ? (
-          <IconFont name={icon} className="size-6"></IconFont>
+          // <IconFont name={icon} className="size-6"></IconFont>
+          <HomeIcon name={`${icon}`} width={'32'} />
         ) : (
           icon
         )}

web/src/components/svg-icon.tsx

@@ -4,6 +4,7 @@ import Icon, { UserOutlined } from '@ant-design/icons';
 import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
 import { Avatar } from 'antd';
 import { AvatarSize } from 'antd/es/avatar/AvatarContext';
+import { useIsDarkTheme } from './theme-provider';
 
 const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
   const list = requireContext.keys().map((key) => {
@@ -74,4 +75,32 @@ export const LlmIcon = ({
   );
 };
 
+export const HomeIcon = ({
+  name,
+  height = '32',
+  width = '32',
+  size = 'large',
+  imgClass,
+}: {
+  name: string;
+  height?: string;
+  width?: string;
+  size?: AvatarSize;
+  imgClass?: string;
+}) => {
+  const isDark = useIsDarkTheme();
+  const icon = isDark ? name : `${name}-bri`;
+
+  return icon ? (
+    <SvgIcon
+      name={`home-icon/${icon}`}
+      width={width}
+      height={height}
+      imgClass={imgClass}
+    ></SvgIcon>
+  ) : (
+    <Avatar shape="square" size={size} icon={<UserOutlined />} />
+  );
+};
+
 export default SvgIcon;