Feat: add skills space to context engine (#13908)

### What problem does this PR solve?

issue #13714

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/empty/constant.tsx

@@ -11,6 +11,7 @@ export enum EmptyCardType {
   Chat = 'chat',
   Search = 'search',
   Memory = 'memory',
+  Skills = 'skills',
 }
 
 export const EmptyCardData = {
@@ -39,4 +40,9 @@ export const EmptyCardData = {
     titleKey: 'empty.memoryTitle',
     notFoundKey: 'empty.notFoundMemory',
   },
+  [EmptyCardType.Skills]: {
+    icon: <HomeIcon name="skills" width={'24'} />,
+    titleKey: 'empty.skillsTitle',
+    notFoundKey: 'empty.notFoundSkills',
+  },
 };

web/src/components/icon-font.tsx

@@ -2,6 +2,7 @@ import { FileIconMap } from '@/constants/file';
 import { cn } from '@/lib/utils';
 import { getExtension } from '@/utils/document-util';
 import { CSSProperties } from 'react';
+import SvgIcon from './svg-icon';
 
 type IconFontType = {
   name: string;
@@ -36,6 +37,14 @@ export function FileIcon({
   type,
 }: IconFontType & { type?: string }) {
   const isFolder = type === 'folder';
+  const isSkills = type === 'skills';
+  if (isSkills) {
+    return (
+      <span className={cn('size-4', className)}>
+        <SvgIcon name="home-icon/skills" width={16} height={16} />
+      </span>
+    );
+  }
   return (
     <span className={cn('size-4', className)}>
       <IconFont

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

@@ -16,6 +16,7 @@ interface IProps {
   searchString?: string;
   onSearchChange?: ChangeEventHandler<HTMLInputElement>;
   showFilter?: boolean;
+  showSearch?: boolean;
   leftPanel?: ReactNode;
   preChildren?: ReactNode;
 }
@@ -58,6 +59,7 @@ export default function ListFilterBar({
   searchString,
   onSearchChange,
   showFilter = true,
+  showSearch = true,
   leftPanel,
   value,
   onChange,
@@ -121,12 +123,14 @@ export default function ListFilterBar({
           </FilterPopover>
         )}
 
-        <SearchInput
-          value={searchString}
-          onChange={onSearchChange}
-          className="w-32"
-          role="searchbox"
-        ></SearchInput>
+        {showSearch && (
+          <SearchInput
+            value={searchString}
+            onChange={onSearchChange}
+            className="w-32"
+            role="searchbox"
+          ></SearchInput>
+        )}
         {children}
       </div>
     </div>

web/src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:pointer-events-none',
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-bg-base rounded-lg p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-bg-base rounded-lg p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:pointer-events-none',
   {
     variants: {
       side: {

web/src/components/ui/slider.tsx

@@ -17,15 +17,15 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-colors-background-inverse-strong">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-border-button">
+      <SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
     </SliderPrimitive.Track>
 
     <SliderPrimitive.Thumb
       className="
-      block h-5 w-5 rounded-full border-2 border-primary bg-colors-text-core-standard transition-colors ring-offset-background
+      block h-2.5 w-2.5 rounded-full border-2 border-accent-primary bg-white ring-offset-background transition-colors
       focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2
-      disabled:pointer-events-none disabled:opacity-50"
+      disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
     />
   </SliderPrimitive.Root>
 ));

web/src/components/ui/spin.tsx

@@ -26,13 +26,16 @@ export const Spin: React.FC<SpinProps> = ({
   className,
   children,
 }) => {
+  // When used without children (standalone), don't show mask background
+  const hasChildren = React.Children.count(children) > 0;
+
   return (
     <div
       className={cn(
         'relative',
         {
           'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-text-primary/40 after:transition-all after:duration-300 h-full w-full':
-            spinning,
+            spinning && hasChildren,
         },
         className,
       )}
@@ -40,7 +43,9 @@ export const Spin: React.FC<SpinProps> = ({
       {spinning && (
         <div
           className={cn(
-            'absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30',
+            hasChildren
+              ? 'absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30'
+              : 'flex items-center justify-center',
             minSizeClasses[size],
           )}
         >