Add files viaContribute a new workflow template: SQL Assistant upload (#9311 )

### What problem does this PR solve? Contribute a new workflow template: SQL Assistant ### Type of change - [x] Other (please describe): new workflow template
Feat: Restore the button's background color #3221 (#9307 )
2026-02-02 16:45:08 +08:00 · 2025-08-07 18:06:49 +08:00 · 2025-08-07 17:37:53 +08:00 · 2025-08-07 16:14:47 +08:00 · 2025-08-07 15:20:01 +08:00 · 2025-08-07 15:19:45 +08:00
86 changed files with 865 additions and 363 deletions
--- a/agent/templates/SQL
+++ b/agent/templates/SQL
--- a/agent/tools/retrieval.py
+++ b/agent/tools/retrieval.py
@ -86,7 +86,7 @@ class Retrieval(ToolBase, ABC):
                kb_ids.append(id)
                continue
            kb_nm = self._canvas.get_variable_value(id)
-            e, kb = KnowledgebaseService.get_by_name(kb_nm)
+            e, kb = KnowledgebaseService.get_by_name(kb_nm, self._canvas._tenant_id)
            if not e:
                raise Exception(f"Dataset({kb_nm}) does not exist.")
            kb_ids.append(kb.id)
--- a/api/db/services/llm_service.py
+++ b/api/db/services/llm_service.py
@ -225,6 +225,9 @@ class TenantLLMService(CommonService):
                if llm_id == llm["llm_name"]:
                    return llm["model_type"].split(",")[-1]

+        for llm in TenantLLMService.query(llm_name=llm_id):
+            return llm.model_type
+
        for llm in LLMService.query(llm_name=llm_id):
            return llm.model_type

--- a/api/settings.py
+++ b/api/settings.py
@ -70,7 +70,7 @@ REGISTER_ENABLED = 1
 # sandbox-executor-manager
 SANDBOX_ENABLED = 0
 SANDBOX_HOST = None
-STRONG_TEST_COUNT = int(os.environ.get("STRONG_TEST_COUNT", "32"))
+STRONG_TEST_COUNT = int(os.environ.get("STRONG_TEST_COUNT", "8"))

 BUILTIN_EMBEDDING_MODELS = ["BAAI/bge-large-zh-v1.5@BAAI", "maidalun1020/bce-embedding-base_v1@Youdao"]

--- a/rag/llm/cv_model.py
+++ b/rag/llm/cv_model.py
@ -60,7 +60,7 @@ class Base(ABC):
        if not images:
            return text

-        if isinstance(images, str):
+        if isinstance(images, str) or "bytes" in type(images).__name__:
            images = [images]

        pmpt = [{"type": "text", "text": text}]
--- a/rag/utils/s3_conn.py
+++ b/rag/utils/s3_conn.py
@ -31,7 +31,7 @@ class RAGFlowS3:
        self.access_key = self.s3_config.get('access_key', None)
        self.secret_key = self.s3_config.get('secret_key', None)
        self.session_token = self.s3_config.get('session_token', None)
-        self.region = self.s3_config.get('region', None)
+        self.region_name = self.s3_config.get('region_name', None)
        self.endpoint_url = self.s3_config.get('endpoint_url', None)
        self.signature_version = self.s3_config.get('signature_version', None)
        self.addressing_style = self.s3_config.get('addressing_style', None)
@ -76,8 +76,8 @@ class RAGFlowS3:
                    'aws_secret_access_key': self.secret_key,
                    'aws_session_token': self.session_token,
                }
-            if self.region:
-                s3_params['region_name'] = self.region
+            if self.region_name:
+                s3_params['region_name'] = self.region_name
            if self.endpoint_url:
                s3_params['endpoint_url'] = self.endpoint_url
            if self.signature_version:
@ -89,7 +89,7 @@ class RAGFlowS3:
            
            self.conn = [boto3.client('s3', **s3_params)]
        except Exception:
-            logging.exception(f"Fail to connect at region {self.region} or endpoint {self.endpoint_url}")
+            logging.exception(f"Fail to connect at region {self.region_name} or endpoint {self.endpoint_url}")

    def __close__(self):
        del self.conn[0]
--- a/web/src/components/bulk-operate-bar.tsx
+++ b/web/src/components/bulk-operate-bar.tsx
@ -40,7 +40,7 @@ export function BulkOperateBar({
          {list.map((x) => (
            <li
              key={x.id}
-              className={cn({ ['text-text-delete-red']: isDeleteItem(x.id) })}
+              className={cn({ ['text-state-error']: isDeleteItem(x.id) })}
            >
              <ConfirmDeleteDialog
                hidden={!isDeleteItem(x.id)}
--- a/web/src/components/chat-input.tsx
+++ b/web/src/components/chat-input.tsx
@ -1,46 +0,0 @@
-import { useEventListener } from 'ahooks';
-import { Mic, Paperclip, Send } from 'lucide-react';
-import { useRef, useState } from 'react';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
-
-export function ChatInput() {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [textareaHeight, setTextareaHeight] = useState<number>(40);
-
-  useEventListener(
-    'keydown',
-    (ev) => {
-      if (ev.shiftKey && ev.code === 'Enter') {
-        setTextareaHeight((h) => {
-          return h + 10;
-        });
-      }
-    },
-    {
-      target: textareaRef,
-    },
-  );
-
-  return (
-    <section className="flex items-end bg-colors-background-neutral-strong px-4 py-3 rounded-xl m-8">
-      <Button variant={'icon'} className="w-10 h-10">
-        <Mic />
-      </Button>
-      <Textarea
-        ref={textareaRef}
-        placeholder="Tell us a little bit about yourself "
-        className="resize-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent border-none min-h-0 max-h-20"
-        style={{ height: textareaHeight }}
-      />
-      <div className="flex gap-2">
-        <Button variant={'icon'} size={'icon'}>
-          <Paperclip />
-        </Button>
-        <Button variant={'tertiary'} size={'icon'}>
-          <Send />
-        </Button>
-      </div>
-    </section>
-  );
-}
--- a/web/src/components/confirm-delete-dialog.tsx
+++ b/web/src/components/confirm-delete-dialog.tsx
@ -52,7 +52,7 @@ export function ConfirmDeleteDialog({
            {t('common.cancel')}
          </AlertDialogCancel>
          <AlertDialogAction
-            className="bg-text-delete-red text-text-title"
+            className="bg-state-error text-text-primary"
            onClick={onOk}
          >
            {t('common.ok')}
--- a/web/src/components/list-filter-bar/filter-popover.tsx
+++ b/web/src/components/list-filter-bar/filter-popover.tsx
@ -95,7 +95,7 @@ function CheckboxFormMultiple({
                    name={x.field}
                    render={({ field }) => {
                      return (
-                        <div className="flex items-center justify-between text-text-title text-xs">
+                        <div className="flex items-center justify-between text-text-primary text-xs">
                          <FormItem
                            key={item.id}
                            className="flex flex-row  space-x-3 space-y-0 items-center "
--- a/web/src/components/list-filter-bar/index.tsx
+++ b/web/src/components/list-filter-bar/index.tsx
@ -27,7 +27,7 @@ export const FilterButton = React.forwardRef<
    <Button variant="secondary" {...props} ref={ref}>
      <span
        className={cn({
-          'text-text-title': count > 0,
+          'text-text-primary': count > 0,
          'text-text-sub-title-invert': count === 0,
        })}
      >
--- a/web/src/components/next-message-item/uploaded-message-files.tsx
+++ b/web/src/components/next-message-item/uploaded-message-files.tsx
@ -25,7 +25,7 @@ export function InnerUploadedMessageFiles({ files = [] }: IProps) {
          )}
          <div className="text-xs max-w-20">
            <div className="truncate">{file.name}</div>
-            <p className="text-text-sub-title pt-1">{formatBytes(file.size)}</p>
+            <p className="text-text-secondary pt-1">{formatBytes(file.size)}</p>
          </div>
        </div>
      ))}
--- a/web/src/components/prompt-editor/index.tsx
+++ b/web/src/components/prompt-editor/index.tsx
@ -142,7 +142,7 @@ export function PromptEditor({
          }
          placeholder={
            <div
-              className="absolute top-10 left-2 text-text-sub-title"
+              className="absolute top-10 left-2 text-text-secondary"
              data-xxx
            >
              {placeholder || t('common.pleaseInput')}
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@ -15,8 +15,6 @@ const badgeVariants = cva(
        destructive:
          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
        outline: 'text-foreground',
-        tertiary:
-          'border-transparent bg-colors-background-core-strong text-colors-text-persist-light hover:bg-colors-background-core-strong/80',
      },
    },
    defaultVariants: {
--- a/web/src/components/ui/breadcrumb.tsx
+++ b/web/src/components/ui/breadcrumb.tsx
@ -34,7 +34,7 @@ const BreadcrumbItem = React.forwardRef<
  <li
    ref={ref}
    className={cn(
-      'inline-flex items-center gap-1.5 text-text-sub-title',
+      'inline-flex items-center gap-1.5 text-text-secondary',
      className,
    )}
    {...props}
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@ -6,20 +6,21 @@ import { cn } from '@/lib/utils';
 import { Loader2, Plus } from 'lucide-react';

 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
-          'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-bg-card text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
-        tertiary:
-          'bg-colors-background-sentiment-solid-primary text-colors-text-persist-light hover:bg-colors-background-sentiment-solid-primary/80',
        icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
        dashed: 'border border-dashed border-input hover:bg-accent',
        transparent: 'bg-transparent hover:bg-accent border',
--- a/web/src/components/ui/container.tsx
+++ b/web/src/components/ui/container.tsx
@ -1,19 +0,0 @@
-import { cn } from '@/lib/utils';
-
-export function Container({
-  children,
-  className,
-  ...props
-}: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
-  return (
-    <div
-      className={cn(
-        'px-2 py-1 bg-colors-background-inverse-standard  inline-flex items-center rounded-sm gap-2',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
--- a/web/src/components/ui/dual-range-slider.tsx
+++ b/web/src/components/ui/dual-range-slider.tsx
@ -29,11 +29,11 @@ const DualRangeSlider = React.forwardRef<
      {...props}
    >
      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-        <SliderPrimitive.Range className="absolute h-full bg-background-checked" />
+        <SliderPrimitive.Range className="absolute h-full bg-accent-primary" />
      </SliderPrimitive.Track>
      {initialValue.map((value, index) => (
        <React.Fragment key={index}>
-          <SliderPrimitive.Thumb className="relative block h-4 w-4 rounded-full border-2 border-background-checked bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
+          <SliderPrimitive.Thumb className="relative block h-4 w-4 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-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer">
            {label && (
              <span
                className={cn(
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@ -14,7 +14,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <input
        type={type}
        className={cn(
-          'flex h-8 w-full rounded-md border border-input bg-colors-background-inverse-weak px-2 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-md border border-input bg-bg-card px-2 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        ref={ref}
--- a/web/src/components/ui/loading-button.tsx
+++ b/web/src/components/ui/loading-button.tsx
@ -20,8 +20,6 @@ const buttonVariants = cva(
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
-        tertiary:
-          'bg-colors-background-sentiment-solid-primary text-colors-text-persist-light hover:bg-colors-background-sentiment-solid-primary/80',
      },
      size: {
        default: 'h-10 px-4 py-2',
--- a/web/src/components/ui/ragflow-pagination.tsx
+++ b/web/src/components/ui/ragflow-pagination.tsx
@ -150,7 +150,7 @@ export function RAGFlowPagination({
              <PaginationItem
                key={page}
                className={cn({
-                  ['bg-background-header-bar rounded-md text-text-title']:
+                  ['bg-bg-card rounded-md text-text-primary']:
                    currentPage === page,
                })}
              >
@ -174,7 +174,7 @@ export function RAGFlowPagination({
          options={sizeChangerOptions}
          value={currentPageSize}
          onChange={handlePageSizeChange}
-          triggerClassName="bg-background-header-bar"
+          triggerClassName="bg-bg-card"
        ></RAGFlowSelect>
      )}
    </section>
--- a/web/src/components/ui/segmented.tsx
+++ b/web/src/components/ui/segmented.tsx
@ -43,7 +43,7 @@ export function Segmented({
  return (
    <div
      className={cn(
-        'flex items-center rounded-3xl p-1 gap-2 bg-background-header-bar px-5 py-2.5',
+        'flex items-center rounded-3xl p-1 gap-2 bg-bg-card px-5 py-2.5',
        className,
      )}
    >
@ -55,10 +55,10 @@ export function Segmented({
          <div
            key={actualValue}
            className={cn(
-              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer text-text-badge',
+              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer',
              {
-                'bg-text-title': selectedValue === actualValue,
-                'text-text-title-invert': selectedValue === actualValue,
+                'bg-text-primary': selectedValue === actualValue,
+                'text-bg-base': selectedValue === actualValue,
              },
            )}
            onClick={() => handleOnChange(actualValue)}
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      'flex h-8 w-full items-center justify-between rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-8 w-full items-center bg-bg-card justify-between rounded-md border border-input  px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
      className,
    )}
    {...props}
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@ -316,6 +316,7 @@ const SidebarRail = React.forwardRef<
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
+      type="button"
      {...props}
    />
  );
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
-      'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-checked data-[state=unchecked]:bg-text-sub-title',
+      'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-primary data-[state=unchecked]:bg-text-sub-title',
      className,
    )}
    {...props}
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@ -82,7 +82,7 @@ const TableHead = React.forwardRef<
  <th
    ref={ref}
    className={cn(
-      'h-12 px-4 text-left align-middle font-normal text-text-sub-title [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-normal text-text-secondary [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
@ -97,7 +97,7 @@ const TableCell = React.forwardRef<
  <td
    ref={ref}
    className={cn(
-      'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-title font-normal',
+      'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-primary font-normal',
      className,
    )}
    {...props}
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
  <TabsPrimitive.List
    ref={ref}
    className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-colors-background-inverse-standard p-1 text-colors-text-neutral-standard',
+      'inline-flex h-10 items-center justify-center rounded-md  p-1 ',
      className,
    )}
    {...props}
@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-title data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
      className,
    )}
    {...props}
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/components/ui/textarea.tsx
@ -54,7 +54,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
    return (
      <textarea
        className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
+          'flex min-h-[80px] w-full bg-bg-card rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
          className,
        )}
        rows={autoSize?.minRows ?? props.rows ?? undefined}
--- a/web/src/layouts/next-header.tsx
+++ b/web/src/layouts/next-header.tsx
@ -125,7 +125,7 @@ export function Header() {
          className="size-10 mr-[12]"
          onClick={handleLogoClick}
        />
-        <div className="flex items-center gap-1.5 text-text-sub-title">
+        <div className="flex items-center gap-1.5 text-text-secondary">
          <Github className="size-3.5" />
          <span className=" text-base">21.5k stars</span>
        </div>
@ -164,7 +164,7 @@ export function Header() {
            className="size-8 cursor-pointer"
            onClick={navigateToProfile}
          ></RAGFlowAvatar>
-          <Badge className="h-5 w-8 absolute font-normal p-0 justify-center -right-8 -top-2 text-text-title-invert bg-gradient-to-l from-[#42D7E7] to-[#478AF5]">
+          <Badge className="h-5 w-8 absolute font-normal p-0 justify-center -right-8 -top-2 text-bg-base bg-gradient-to-l from-[#42D7E7] to-[#478AF5]">
            Pro
          </Badge>
        </div>
--- a/web/src/layouts/next.tsx
+++ b/web/src/layouts/next.tsx
@ -3,7 +3,7 @@ import { Header } from './next-header';

 export default function NextLayout() {
  return (
-    <section className="h-full flex flex-col text-colors-text-neutral-strong">
+    <section className="h-full flex flex-col">
      <Header></Header>
      <Outlet />
    </section>
--- a/web/src/pages/agent/canvas/edge/index.tsx
+++ b/web/src/pages/agent/canvas/edge/index.tsx
@ -90,7 +90,7 @@ function InnerButtonEdge({
        path={edgePath}
        markerEnd={markerEnd}
        style={{ ...style, ...selectedStyle, ...highlightStyle }}
-        className="text-text-sub-title"
+        className="text-text-secondary"
      />

      <EdgeLabelRenderer>
@ -108,7 +108,7 @@ function InnerButtonEdge({
        >
          <button
            className={cn(
-              'size-3.5 border border-text-delete-red text-text-delete-red rounded-full leading-none',
+              'size-3.5 border border-state-error text-state-error rounded-full leading-none',
              'invisible',
              { visible },
            )}
--- a/web/src/pages/agent/canvas/node/agent-node.tsx
+++ b/web/src/pages/agent/canvas/node/agent-node.tsx
@ -89,7 +89,7 @@ function InnerAgentNode({
          {(isGotoMethod ||
            exceptionMethod === AgentExceptionMethod.Comment) && (
            <div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
-              <span className="text-text-sub-title">On Failure</span>
+              <span className="text-text-secondary">On Failure</span>
              <span className="truncate flex-1 text-right">
                {t(`flow.${exceptionMethod}`)}
              </span>
@ -101,7 +101,7 @@ function InnerAgentNode({
            type="source"
            position={Position.Right}
            isConnectable={isConnectable}
-            className="!bg-text-delete-red"
+            className="!bg-state-error"
            style={{ ...RightHandleStyle, top: 94 }}
            nodeId={id}
            id={NodeHandleId.AgentException}
--- a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
@ -68,7 +68,7 @@ function AccordionOperators() {
  return (
    <Accordion
      type="multiple"
-      className="px-2 text-text-title max-h-[45vh] overflow-auto"
+      className="px-2 text-text-primary max-h-[45vh] overflow-auto"
      defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
    >
      <AccordionItem value="item-1">
--- a/web/src/pages/agent/canvas/node/handle.tsx
+++ b/web/src/pages/agent/canvas/node/handle.tsx
@ -28,7 +28,7 @@ export function CommonHandle({
      <Handle
        {...props}
        className={cn(
-          'inline-flex justify-center items-center !bg-background-checked !size-4 !rounded-sm !border-none ',
+          'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
          className,
        )}
        onClick={(e) => {
--- a/web/src/pages/agent/canvas/node/node-wrapper.tsx
+++ b/web/src/pages/agent/canvas/node/node-wrapper.tsx
@ -8,7 +8,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
    <section
      className={cn(
        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
-        { 'border border-background-checked': selected },
+        { 'border border-accent-primary': selected },
        className,
      )}
    >
--- a/web/src/pages/agent/canvas/node/switch-node.tsx
+++ b/web/src/pages/agent/canvas/node/switch-node.tsx
@ -48,7 +48,7 @@ const ConditionBlock = ({
        {items.map((x, idx) => (
          <div key={idx}>
            <section className="flex justify-between gap-2 items-center text-xs p-1">
-              <div className="flex-1 truncate text-background-checked">
+              <div className="flex-1 truncate text-accent-primary">
                {getLabel(x?.cpn_id)}
              </div>
              <span>{renderOperatorIcon(x?.operator)}</span>
@ -81,11 +81,11 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
                <section className="flex flex-col text-xs">
                  <div className="text-right">
                    <span>{getConditionKey(idx, positions.length)}</span>
-                    <div className="text-text-sub-title">
+                    <div className="text-text-secondary">
                      {idx < positions.length - 1 && position.text}
                    </div>
                  </div>
-                  <span className="text-background-checked">
+                  <span className="text-accent-primary">
                    {idx < positions.length - 1 &&
                      position.condition?.logical_operator?.toUpperCase()}
                  </span>
--- a/web/src/pages/agent/embed-dialog/index.tsx
+++ b/web/src/pages/agent/embed-dialog/index.tsx
@ -100,7 +100,7 @@ function EmbedDialog({
            {t('embedIntoSite', { keyPrefix: 'common' })}
          </DialogTitle>
        </DialogHeader>
-        <section className="w-full overflow-auto space-y-5 text-sm text-text-sub-title">
+        <section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
          <Form {...form}>
            <form className="space-y-5">
              <FormField
@ -150,7 +150,7 @@ function EmbedDialog({
            <CopyToClipboard text={token}></CopyToClipboard>
          </div>
          <a
-            className="cursor-pointer text-background-checked inline-block"
+            className="cursor-pointer text-accent-primary inline-block"
            href={
              isAgent
                ? 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-agent'
--- a/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
+++ b/web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
@ -64,7 +64,7 @@ const SingleDebugSheet = ({
          {!isEmpty(data) ? (
            <div
              className={cn('mt-4 rounded-md border', {
-                [`border-text-delete-red`]: !isEmpty(data._ERROR),
+                [`border-state-error`]: !isEmpty(data._ERROR),
              })}
            >
              <div className="flex justify-between p-2">
--- a/web/src/pages/agent/form/agent-form/agent-tools.tsx
+++ b/web/src/pages/agent/form/agent-form/agent-tools.tsx
@ -71,7 +71,7 @@ function ActionButton<T>({ deleteRecord, record, edit }: ActionButtonProps<T>) {
  }, [deleteRecord, record]);

  return (
-    <div className="flex items-center gap-2 text-text-sub-title">
+    <div className="flex items-center gap-2 text-text-secondary">
      <PencilLine
        className="size-4 cursor-pointer"
        data-tool={record}
@ -106,7 +106,7 @@ export function AgentTools() {

  return (
    <section className="space-y-2.5">
-      <span className="text-text-sub-title">Tools</span>
+      <span className="text-text-secondary">Tools</span>
      <ul className="space-y-2">
        {toolNames.map((x) => (
          <ToolCard key={x}>
@ -160,7 +160,7 @@ export function Agents({ node }: INextOperatorForm) {

  return (
    <section className="space-y-2.5">
-      <span className="text-text-sub-title">Agents</span>
+      <span className="text-text-secondary">Agents</span>
      <ul className="space-y-2">
        {subBottomAgentNodeIds.map((id) => {
          const currentNode = getNode(id);
--- a/web/src/pages/agent/form/code-form/next-variable.tsx
+++ b/web/src/pages/agent/form/code-form/next-variable.tsx
@ -66,7 +66,7 @@ export function DynamicVariableForm({ name = 'arguments', isOutputs }: IProps) {
                </FormItem>
              )}
            />
-            <Separator className="w-3 text-text-sub-title" />
+            <Separator className="w-3 text-text-secondary" />
            <FormField
              control={form.control}
              name={`${name}.${index}.type`}
@ -104,7 +104,7 @@ export function DynamicVariableForm({ name = 'arguments', isOutputs }: IProps) {
 }

 export function VariableTitle({ title }: { title: ReactNode }) {
-  return <div className="font-medium text-text-title pb-2">{title}</div>;
+  return <div className="font-medium text-text-primary pb-2">{title}</div>;
 }

 export function DynamicInputVariable({
--- a/web/src/pages/agent/form/components/output.tsx
+++ b/web/src/pages/agent/form/components/output.tsx
@ -22,9 +22,9 @@ export function Output({ list }: OutputProps) {
        {list.map((x, idx) => (
          <li
            key={idx}
-            className="bg-background-highlight text-background-checked rounded-sm px-2 py-1"
+            className="bg-background-highlight text-accent-primary rounded-sm px-2 py-1"
          >
-            {x.title}: <span className="text-text-sub-title">{x.type}</span>
+            {x.title}: <span className="text-text-secondary">{x.type}</span>
          </li>
        ))}
      </ul>
--- a/web/src/pages/agent/form/components/prompt-editor/index.tsx
+++ b/web/src/pages/agent/form/components/prompt-editor/index.tsx
@ -160,7 +160,7 @@ export function PromptEditor({
          placeholder={
            <div
              className={cn(
-                'absolute top-1 left-2 text-text-sub-title pointer-events-none',
+                'absolute top-1 left-2 text-text-secondary pointer-events-none',
                {
                  'truncate w-[90%]': !multiLine,
                },
--- a/web/src/pages/agent/form/iteration-form/dynamic-output.tsx
+++ b/web/src/pages/agent/form/iteration-form/dynamic-output.tsx
@ -75,7 +75,7 @@ export function DynamicOutputForm({ node }: IProps) {
                </FormItem>
              )}
            />
-            <Separator className="w-3 text-text-sub-title" />
+            <Separator className="w-3 text-text-secondary" />
            <FormField
              control={form.control}
              name={`${name}.${index}.ref`}
@ -114,7 +114,7 @@ export function DynamicOutputForm({ node }: IProps) {
 }

 export function VariableTitle({ title }: { title: ReactNode }) {
-  return <div className="font-medium text-text-title pb-2">{title}</div>;
+  return <div className="font-medium text-text-primary pb-2">{title}</div>;
 }

 export function DynamicOutput({ node }: IProps) {
--- a/web/src/pages/agent/form/switch-form/index.tsx
+++ b/web/src/pages/agent/form/switch-form/index.tsx
@ -143,7 +143,7 @@ function ConditionCards({
                        <SelectWithSearch
                          {...field}
                          options={finalOptions}
-                          triggerClassName="text-background-checked bg-transparent border-none truncate"
+                          triggerClassName="text-accent-primary bg-transparent border-none truncate"
                        ></SelectWithSearch>
                      </FormControl>
                      <FormMessage />
@ -260,7 +260,7 @@ function SwitchForm({ node }: IOperatorForm) {
              <div className="flex justify-between items-center">
                <section>
                  <span>{index === 0 ? 'IF' : 'ELSEIF'}</span>
-                  <div className="text-text-sub-title">Case {index + 1}</div>
+                  <div className="text-text-secondary">Case {index + 1}</div>
                </section>
                {index !== 0 && (
                  <Button
--- a/web/src/pages/agent/form/tool-form/mcp-form/index.tsx
+++ b/web/src/pages/agent/form/tool-form/mcp-form/index.tsx
@ -46,7 +46,7 @@ function MCPForm() {
          </CardHeader>
          <CardContent className="p-0 text-sm">
            <span className="pr-2"> URL:</span>
-            <a href={data.url} className="text-background-checked">
+            <a href={data.url} className="text-accent-primary">
              {data.url}
            </a>
          </CardContent>
--- a/web/src/pages/agent/form/tool-form/mcp-form/mcp-card.tsx
+++ b/web/src/pages/agent/form/tool-form/mcp-form/mcp-card.tsx
@ -12,7 +12,7 @@ export function MCPCard({
        {children}
        <section>
          <div className="pb-3 text-sm">{data.name}</div>
-          <p className="text-text-sub-title text-xs">{data.description}</p>
+          <p className="text-text-secondary text-xs">{data.description}</p>
        </section>
      </CardContent>
    </Card>
--- a/web/src/pages/agent/index.tsx
+++ b/web/src/pages/agent/index.tsx
@ -114,7 +114,7 @@ export default function Agent() {
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
-          <div className="text-xs text-text-sub-title translate-y-3">
+          <div className="text-xs text-text-secondary translate-y-3">
            {t('flow.autosaved')} {time}
          </div>
        </section>
--- a/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
+++ b/web/src/pages/agent/log-sheet/toolTimelineItem.tsx
@ -157,13 +157,13 @@ const ToolTimelineItem = ({
                            ] ?? changeToolName(tool.tool_name)}
                          </span>
                        )}
-                        <span className="text-text-sub-title text-xs">
+                        <span className="text-text-secondary text-xs">
                          {/* 0:00
                          {x.data.elapsed_time?.toString().slice(0, 6)} */}
                        </span>
                        <span
                          className={cn(
-                            'border-background  -end-1 -top-1 size-2 rounded-full bg-dot-green',
+                            'border-background  -end-1 -top-1 size-2 rounded-full bg-state--success',
                          )}
                        >
                          <span className="sr-only">Online</span>
--- a/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
+++ b/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
@ -211,7 +211,7 @@ export const WorkFlowTimeline = ({
            >
              <TimelineHeader>
                <TimelineSeparator
-                  className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-background-checked"
+                  className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-accent-primary"
                  style={{
                    background:
                      x.data.component_type === 'Agent'
@ -271,14 +271,14 @@ export const WorkFlowTimeline = ({
                              ] ??
                                nodeLabel)}
                          </span>
-                          <span className="text-text-sub-title text-xs">
+                          <span className="text-text-secondary text-xs">
                            {x.data.elapsed_time?.toString().slice(0, 6)}
                          </span>
                          <span
                            className={cn(
                              'border-background  -end-1 -top-1 size-2 rounded-full',
-                              { 'bg-dot-green': isEmpty(x.data.error) },
-                              { 'bg-dot-red': !isEmpty(x.data.error) },
+                              { 'bg-state--success': isEmpty(x.data.error) },
+                              { 'bg-state--error': !isEmpty(x.data.error) },
                            )}
                          >
                            <span className="sr-only">Online</span>
--- a/web/src/pages/agent/operator-icon.tsx
+++ b/web/src/pages/agent/operator-icon.tsx
@ -64,7 +64,7 @@ const OperatorIcon = ({ name, className }: IProps) => {

  if (name === Operator.Begin) {
    return (
-      <div className="inline-block p-1 bg-background-checked rounded-sm">
+      <div className="inline-block p-1 bg-accent-primary rounded-sm">
        <HousePlus className="rounded size-3" />
      </div>
    );
--- a/web/src/pages/agent/version-dialog/index.tsx
+++ b/web/src/pages/agent/version-dialog/index.tsx
@ -92,7 +92,7 @@ export function VersionDialog({
                  <section className="flex justify-between">
                    <div>
                      <div className="pb-1 truncate">{agent?.title}</div>
-                      <p className="text-text-sub-title text-xs">
+                      <p className="text-text-secondary text-xs">
                        Created: {formatDate(agent?.create_date)}
                      </p>
                    </div>
--- a/web/src/pages/agents/agent-card.tsx
+++ b/web/src/pages/agents/agent-card.tsx
@ -37,8 +37,8 @@ export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
            <h3 className="text-lg font-semibold mb-2 line-clamp-1">
              {data.title}
            </h3>
-            <p className="text-xs text-text-sub-title">{data.description}</p>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">{data.description}</p>
+            <p className="text-xs text-text-secondary">
              {formatDate(data.update_time)}
            </p>
          </div>
--- a/web/src/pages/agents/agent-dropdown.tsx
+++ b/web/src/pages/agents/agent-dropdown.tsx
@ -47,7 +47,7 @@ export function AgentDropdown({
        <DropdownMenuSeparator />
        <ConfirmDeleteDialog onOk={handleDelete}>
          <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
            onSelect={(e) => {
              e.preventDefault();
            }}
--- a/web/src/pages/agents/template-card.tsx
+++ b/web/src/pages/agents/template-card.tsx
@ -19,7 +19,7 @@ export function TemplateCard({ data, showModal, isCreate = false }: IProps) {
    showModal(data);
  }, [data, showModal]);
  return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard group relative min-h-40">
+    <Card className="border-colors-outline-neutral-standard group relative min-h-40">
      <CardContent className="p-4 ">
        {isCreate && (
          <div
--- a/web/src/pages/chunk/index.tsx
+++ b/web/src/pages/chunk/index.tsx
@ -69,14 +69,13 @@ export default function ChunkPage() {
            options={options}
            value={path}
            onChange={navigateToChunk as (val: SegmentedValue) => void}
-            className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
          ></Segmented>
        </div>
        <div className="flex items-center gap-2">
          <Button variant={'icon'} size={'icon'}>
            <EllipsisVertical />
          </Button>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <Save />
            Save
          </Button>
--- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/csv-preview.tsx
+++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/csv-preview.tsx
@ -84,7 +84,7 @@ const CSVFileViewer: React.FC<FileViewerProps> = () => {
              {data.headers.map((header, index) => (
                <th
                  key={`header-${index}`}
-                  className="px-6 py-3 text-left text-sm font-medium text-text-title"
+                  className="px-6 py-3 text-left text-sm font-medium text-text-primary"
                >
                  {header}
                </th>
--- a/web/src/pages/dataset/dataset-title.tsx
+++ b/web/src/pages/dataset/dataset-title.tsx
@ -9,7 +9,7 @@ export function TopTitle({ title, description }: TopTitleProps) {
  return (
    <div className="pb-5">
      <div className="text-2xl font-semibold">{title}</div>
-      <p className="text-text-sub-title pt-2">{description}</p>
+      <p className="text-text-secondary pt-2">{description}</p>
    </div>
  );
 }
--- a/web/src/pages/dataset/setting/advanced-setting-form.tsx
+++ b/web/src/pages/dataset/setting/advanced-setting-form.tsx
@ -148,12 +148,7 @@ export default function AdvancedSettingForm() {
            </FormItem>
          )}
        />
-        <Button
-          variant={'tertiary'}
-          size={'sm'}
-          type="submit"
-          className="w-2/5"
-        >
+        <Button size={'sm'} type="submit" className="w-2/5">
          Test
        </Button>
      </form>
--- a/web/src/pages/dataset/setting/chunk-method-card.tsx
+++ b/web/src/pages/dataset/setting/chunk-method-card.tsx
@ -93,7 +93,7 @@ export default function ChunkMethodCard() {
  const form = useFormContext();

  return (
-    <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak flex">
+    <Card className="border-0 p-6 mb-8 flex">
      <div className="w-2/5">
        <FormField
          control={form.control}
@ -103,7 +103,7 @@ export default function ChunkMethodCard() {
              <FormLabel>{t('chunkMethod')}</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
-                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                  <SelectTrigger>
                    <SelectValue placeholder="Select a verified email to display" />
                  </SelectTrigger>
                </FormControl>
--- a/web/src/pages/dataset/sidebar/index.tsx
+++ b/web/src/pages/dataset/sidebar/index.tsx
@ -62,8 +62,8 @@ export function SideBar({ refreshCount }: PropType) {
          name={data.name}
          className="size-16"
        ></RAGFlowAvatar>
-        <div className=" text-text-sub-title text-xs space-y-1">
-          <h3 className="text-lg font-semibold line-clamp-1 text-text-title">
+        <div className=" text-text-secondary text-xs space-y-1">
+          <h3 className="text-lg font-semibold line-clamp-1 text-text-primary">
            {data.name}
          </h3>
          <div className="flex justify-between">
@ -85,7 +85,7 @@ export function SideBar({ refreshCount }: PropType) {
                'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
                {
                  'bg-bg-card': active,
-                  'text-text-title': active,
+                  'text-text-primary': active,
                },
              )}
              onClick={handleMenuClick(item.key)}
--- a/web/src/pages/dataset/testing/index.tsx
+++ b/web/src/pages/dataset/testing/index.tsx
@ -44,7 +44,7 @@ export default function RetrievalTesting() {
        <section className="flex divide-x h-full">
          <div className="p-4 flex-1">
            <div className="flex justify-between pb-2.5">
-              <span className="text-text-title font-semibold text-2xl">
+              <span className="text-text-primary font-semibold text-2xl">
                Test setting
              </span>
              {/* <Button variant={'outline'} onClick={addCount}>
--- a/web/src/pages/dataset/testing/testing-form.tsx
+++ b/web/src/pages/dataset/testing/testing-form.tsx
@ -98,10 +98,7 @@ export default function TestingForm({
            <FormItem>
              <FormLabel>{t('knowledgeDetails.testText')}</FormLabel>
              <FormControl>
-                <Textarea
-                  {...field}
-                  className="bg-colors-background-inverse-weak"
-                ></Textarea>
+                <Textarea {...field}></Textarea>
              </FormControl>

              <FormMessage />
--- a/web/src/pages/dataset/testing/testing-result.tsx
+++ b/web/src/pages/dataset/testing/testing-result.tsx
@ -65,7 +65,7 @@ export function TestingResult({
  return (
    <div className="p-4 flex-1">
      <div className="flex justify-between pb-2.5">
-        <span className="text-text-title font-semibold text-2xl">
+        <span className="text-text-primary font-semibold text-2xl">
          Test results
        </span>
        <FilterPopover
--- a/web/src/pages/datasets/dataset-card.tsx
+++ b/web/src/pages/datasets/dataset-card.tsx
@ -55,10 +55,10 @@ export function DatasetCard({
            <h3 className="text-lg font-semibold mb-2 line-clamp-1">
              {dataset.name}
            </h3>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">
              {dataset.doc_num} files
            </p>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">
              {formatDate(dataset.update_time)}
            </p>
          </div>
@ -72,11 +72,8 @@ export function SeeAllCard() {
  const { navigateToDatasetList } = useNavigatePage();

  return (
-    <Card
-      className="bg-colors-background-inverse-weak w-40"
-      onClick={navigateToDatasetList}
-    >
-      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
+    <Card className="w-40" onClick={navigateToDatasetList}>
+      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
        See All <ChevronRight className="size-4" />
      </CardContent>
    </Card>
--- a/web/src/pages/datasets/dataset-dropdown.tsx
+++ b/web/src/pages/datasets/dataset-dropdown.tsx
@ -47,7 +47,7 @@ export function DatasetDropdown({
        <DropdownMenuSeparator />
        <ConfirmDeleteDialog onOk={handleDelete}>
          <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
            onSelect={(e) => {
              e.preventDefault();
            }}
--- a/web/src/pages/home/application-card.tsx
+++ b/web/src/pages/home/application-card.tsx
@ -1,5 +1,5 @@
 import { MoreButton } from '@/components/more-button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
 import { ChevronRight } from 'lucide-react';
@ -17,15 +17,16 @@ export function ApplicationCard({ app }: ApplicationCardProps) {
    <Card className="w-[264px]">
      <CardContent className="p-2.5  group flex justify-between">
        <div className="flex items-center gap-2.5">
-          <Avatar className="size-14 rounded-lg">
-            <AvatarImage src={app.avatar === null ? '' : app.avatar} />
-            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-          </Avatar>
+          <RAGFlowAvatar
+            className="size-14 rounded-lg"
+            avatar={app.avatar}
+            name={app.title || 'CN'}
+          ></RAGFlowAvatar>
          <div className="flex-1">
            <h3 className="text-sm font-normal line-clamp-1 mb-1">
              {app.title}
            </h3>
-            <p className="text-xs font-normal text-text-sub-title">
+            <p className="text-xs font-normal text-text-secondary">
              {formatDate(app.update_time)}
            </p>
          </div>
@ -44,7 +45,7 @@ export type SeeAllAppCardProps = {
 export function SeeAllAppCard({ click }: SeeAllAppCardProps) {
  return (
    <Card className="w-64 min-h-[76px]" onClick={click}>
-      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
+      <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
        See All <ChevronRight className="size-4" />
      </CardContent>
    </Card>
--- a/web/src/pages/home/banner.tsx
+++ b/web/src/pages/home/banner.tsx
@ -43,7 +43,7 @@ export function NextBanner() {
  const { t } = useTranslation();
  return (
    <section className="text-5xl pt-10 pb-14 font-bold">
-      <span className="text-text-title">{t('header.welcome')}</span>
+      <span className="text-text-primary">{t('header.welcome')}</span>
      <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
        RAGFlow
      </span>
--- a/web/src/pages/home/header.tsx
+++ b/web/src/pages/home/header.tsx
@ -1,113 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Container } from '@/components/ui/container';
-import { Segmented, SegmentedValue } from '@/components/ui/segmented';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useNavigateWithFromState } from '@/hooks/route-hook';
-import {
-  ChevronDown,
-  Cpu,
-  Github,
-  Library,
-  MessageSquareText,
-  Search,
-  Star,
-  Zap,
-} from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
-import { useLocation } from 'umi';
-
-export function HomeHeader() {
-  const { t } = useTranslate('header');
-  const { pathname } = useLocation();
-  const navigate = useNavigateWithFromState();
-  const [currentPath, setCurrentPath] = useState('/home');
-
-  const tagsData = useMemo(
-    () => [
-      { path: '/home', name: t('knowledgeBase'), icon: Library },
-      { path: '/chat', name: t('chat'), icon: MessageSquareText },
-      { path: '/search', name: t('search'), icon: Search },
-      { path: '/flow', name: t('flow'), icon: Cpu },
-      // { path: '/file', name: t('fileManager'), icon: FileIcon },
-    ],
-    [t],
-  );
-
-  const options = useMemo(() => {
-    return tagsData.map((tag) => {
-      const HeaderIcon = tag.icon;
-
-      return {
-        label: (
-          <div className="flex items-center gap-1">
-            <HeaderIcon className="size-5"></HeaderIcon>
-            <span>{tag.name}</span>
-          </div>
-        ),
-        value: tag.path,
-      };
-    });
-  }, [tagsData]);
-
-  // const currentPath = useMemo(() => {
-  //   return tagsData.find((x) => pathname.startsWith(x.path))?.name || 'home';
-  // }, [pathname, tagsData]);
-
-  const handleChange = (path: SegmentedValue) => {
-    // navigate(path as string);
-    setCurrentPath(path as string);
-  };
-
-  const handleLogoClick = useCallback(() => {
-    navigate('/');
-  }, [navigate]);
-
-  return (
-    <section className="py-[12px] flex justify-between items-center">
-      <div className="flex items-center gap-4">
-        <img
-          src={'/logo.svg'}
-          alt="logo"
-          className="w-[100] h-[100] mr-[12]"
-          onClick={handleLogoClick}
-        />
-        <Button variant="secondary">
-          <Github />
-          21.5k stars
-          <Star />
-        </Button>
-      </div>
-      <div>
-        <Segmented
-          options={options}
-          value={currentPath}
-          onChange={handleChange}
-          className="bg-colors-background-inverse-standard text-backgroundInverseStandard-foreground"
-        ></Segmented>
-      </div>
-      <div className="flex items-center gap-4">
-        <Container>
-          V 0.13.0
-          <Button variant="secondary" className="size-8">
-            <ChevronDown />
-          </Button>
-        </Container>
-        <Container className="px-3 py-2">
-          <Avatar className="w-[30px] h-[30px]">
-            <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          yifanwu92@gmail.com
-          <Button
-            variant="destructive"
-            className="py-[2px] px-[8px] h-[23px] rounded-[4px]"
-          >
-            <Zap />
-            Pro
-          </Button>
-        </Container>
-      </div>
-    </section>
-  );
-}
--- a/web/src/pages/next-chats/chat-card.tsx
+++ b/web/src/pages/next-chats/chat-card.tsx
@ -34,8 +34,8 @@ export function ChatCard({ data, showChatRenameModal }: IProps) {
            <h3 className="text-lg font-semibold mb-2 line-clamp-1 truncate">
              {data.name}
            </h3>
-            <p className="text-xs text-text-sub-title">{data.description}</p>
-            <p className="text-xs text-text-sub-title">
+            <p className="text-xs text-text-secondary">{data.description}</p>
+            <p className="text-xs text-text-secondary">
              {formatDate(data.update_time)}
            </p>
          </div>
--- a/web/src/pages/next-chats/chat-dropdown.tsx
+++ b/web/src/pages/next-chats/chat-dropdown.tsx
@ -47,7 +47,7 @@ export function ChatDropdown({
        <DropdownMenuSeparator />
        <ConfirmDeleteDialog onOk={handleDelete}>
          <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
            onSelect={(e) => {
              e.preventDefault();
            }}
--- a/web/src/pages/next-search/index.tsx
+++ b/web/src/pages/next-search/index.tsx
@ -13,9 +13,7 @@ export default function SearchPage() {
          <Button variant={'icon'} size={'icon'}>
            <EllipsisVertical />
          </Button>
-          <Button variant={'tertiary'} size={'sm'}>
-            Publish
-          </Button>
+          <Button size={'sm'}>Publish</Button>
        </div>
      </PageHeader>
    </section>
--- a/web/src/pages/next-searches/search-card.tsx
+++ b/web/src/pages/next-searches/search-card.tsx
@ -15,7 +15,7 @@ export function SearchCard({ data }: IProps) {
  const { navigateToSearch } = useNavigatePage();

  return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard">
+    <Card className="border-colors-outline-neutral-standard">
      <CardContent className="p-4 flex gap-2 items-start group">
        <div className="flex justify-between mb-4">
          <RAGFlowAvatar
--- a/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx
+++ b/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx
@ -133,7 +133,7 @@ export function EditMcpDialog({
              onClick={handleTest}
            >
              <RefreshCw
-                className={cn('text-background-checked', {
+                className={cn('text-accent-primary', {
                  'animate-spin': testLoading,
                })}
              />
--- a/web/src/pages/profile-setting/mcp/index.tsx
+++ b/web/src/pages/profile-setting/mcp/index.tsx
@ -33,9 +33,9 @@ export default function McpServer() {

  return (
    <section className="p-4 w-full">
-      <div className="text-text-title text-2xl">MCP Servers</div>
+      <div className="text-text-primary text-2xl">MCP Servers</div>
      <section className="flex items-center justify-between pb-5">
-        <div className="text-text-sub-title">
+        <div className="text-text-secondary">
          Customize the list of MCP servers
        </div>
        <div className="flex gap-5">
--- a/web/src/pages/profile-setting/mcp/mcp-card.tsx
+++ b/web/src/pages/profile-setting/mcp/mcp-card.tsx
@ -36,7 +36,7 @@ export function McpCard({
    <Card key={data.id} className="w-64">
      <CardContent className="p-2.5 pt-2 group">
        <section className="flex justify-between pb-2">
-          <h3 className="text-lg font-semibold line-clamp-1">{data.name}</h3>
+          <h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>
          <div className="space-x-4">
            <McpDropdown mcpId={data.id} showEditModal={showEditModal}>
              <MoreButton></MoreButton>
@ -52,10 +52,10 @@ export function McpCard({
        </section>
        <div className="flex justify-between items-end">
          <div className="w-full">
-            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-sub-title">
+            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-secondary">
              {toolLength} cached tools
            </div>
-            <p className="text-sm text-text-sub-title">
+            <p className="text-sm text-text-secondary">
              {formatDate(data.update_date)}
            </p>
          </div>
--- a/web/src/pages/profile-setting/mcp/mcp-dropdown.tsx
+++ b/web/src/pages/profile-setting/mcp/mcp-dropdown.tsx
@ -43,7 +43,7 @@ export function McpDropdown({
        <DropdownMenuSeparator />
        <ConfirmDeleteDialog onOk={handleDelete}>
          <DropdownMenuItem
-            className="text-text-delete-red"
+            className="text-state-error"
            onSelect={(e) => {
              e.preventDefault();
            }}
--- a/web/src/pages/profile-setting/mcp/tool-card.tsx
+++ b/web/src/pages/profile-setting/mcp/tool-card.tsx
@ -10,7 +10,7 @@ export function McpToolCard({ data }: McpToolCardProps) {
    <Card>
      <CardContent className="p-2.5 pt-2 group">
        <h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
-        <div className="text-xs font-normal mb-3 text-text-sub-title">
+        <div className="text-xs font-normal mb-3 text-text-secondary">
          {data.description}
        </div>
      </CardContent>
--- a/web/src/pages/profile-setting/model/index.tsx
+++ b/web/src/pages/profile-setting/model/index.tsx
@ -30,10 +30,7 @@ export default function ModelManagement() {
        <section className="mt-6">
          <div className="flex justify-between items-center mb-3">
            <h2 className="text-2xl font-semibold ">Model library</h2>
-            <Input
-              placeholder="search"
-              className="bg-colors-background-inverse-weak w-1/5"
-            ></Input>
+            <Input placeholder="search" className="w-1/5"></Input>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
            {modelLibraryList.map((x, idx) => (
--- a/web/src/pages/profile-setting/model/model-card.tsx
+++ b/web/src/pages/profile-setting/model/model-card.tsx
@ -104,7 +104,7 @@ export function AddModelCard() {
          <Button variant="secondary" size="icon">
            <MoreVertical className="h-4 w-4" />
          </Button>
-          <Button variant={'tertiary'}>
+          <Button>
            <Key /> API
          </Button>
        </div>
@ -126,7 +126,7 @@ export function ModelLibraryCard() {
        <p>LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION</p>

        <div className="text-right">
-          <Button variant={'tertiary'}>
+          <Button>
            <Plus /> Add
          </Button>
        </div>
--- a/web/src/pages/profile-setting/plan/index.tsx
+++ b/web/src/pages/profile-setting/plan/index.tsx
@ -79,20 +79,20 @@ export default function Plan() {
  return (
    <section className="p-8">
      <h1 className="text-3xl font-bold mb-6">Plan & balance</h1>
-      <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak divide-y divide-colors-outline-neutral-strong">
+      <Card className="border-0 p-6 mb-6  divide-y divide-colors-outline-neutral-strong">
        <div className="pb-2 flex justify-between text-xl">
          <span className="font-bold ">Balance</span>
          <span className="font-medium">$ 100.00</span>
        </div>
        <div className="flex items-center justify-between pt-3">
          <span>The value equals to 1,000 tokens or 10.00 GBs of storage</span>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <LogOut />
            Recharge
          </Button>
        </div>
      </Card>
-      <Card className="pt-6 bg-colors-background-inverse-weak">
+      <Card className="pt-6 ">
        <CardContent className="space-y-4">
          <div className="font-bold text-xl">Upgrade to access</div>
          <section className="grid grid-cols-2 gap-3">
@ -107,7 +107,7 @@ export default function Plan() {
            options={options}
            value={val}
            onChange={handleChange}
-            className="bg-colors-background-inverse-standard inline-flex"
+            className="inline-flex"
          ></Segmented>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {pricingData.map((plan, index) => (
--- a/web/src/pages/profile-setting/plan/pricing-card.tsx
+++ b/web/src/pages/profile-setting/plan/pricing-card.tsx
@ -38,10 +38,7 @@ export function PricingCard({
      <CardHeader className=" justify-between p-0 pb-3 h-52">
        <section>
          <div className="flex items-center justify-between mb-2">
-            <Badge
-              variant={isFree ? 'secondary' : 'tertiary'}
-              className="text-xs"
-            >
+            <Badge className="text-xs">
              {isPro && <Zap className="mr-2 h-4 w-4" />}
              {isEnterprise && <Mail className="mr-2 h-4 w-4" />}
              {title}
@ -59,7 +56,6 @@ export function PricingCard({
            )}
          </div>
          <Button
-            variant={isFree ? 'secondary' : 'tertiary'}
            className={cn('w-full', {
              'bg-colors-text-core-standard': !isFree,
            })}
--- a/web/src/pages/profile-setting/profile/index.tsx
+++ b/web/src/pages/profile-setting/profile/index.tsx
@ -188,11 +188,7 @@ export default function Profile() {
                      {t('username')}
                    </FormLabel>
                    <FormControl className="w-3/4">
-                      <Input
-                        placeholder=""
-                        {...field}
-                        className="bg-colors-background-inverse-weak"
-                      />
+                      <Input placeholder="" {...field} />
                    </FormControl>
                  </div>
                  <div className="flex w-[640px] pt-1">
--- a/web/src/pages/profile-setting/prompt/index.tsx
+++ b/web/src/pages/profile-setting/prompt/index.tsx
@ -16,7 +16,7 @@ const PromptManagement = () => {
      <div className="mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-4xl font-bold">Prompt templates</h1>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <Plus className="mr-2 h-4 w-4" />
            Create template
          </Button>
--- a/web/src/pages/profile-setting/team/index.tsx
+++ b/web/src/pages/profile-setting/team/index.tsx
@ -32,7 +32,7 @@ const TeamManagement = () => {
      <div className=" mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-4xl font-bold">Team management</h1>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <Plus className="mr-2 h-4 w-4" />
            Create team
          </Button>
@ -46,7 +46,7 @@ const TeamManagement = () => {
            </Button>
          </div>

-          <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak">
+          <Card className="border-0 p-6 mb-6">
            <div className="grid grid-cols-3 gap-8">
              <div>
                <p className="text-sm text-gray-400 mb-2">Project</p>
@ -63,7 +63,7 @@ const TeamManagement = () => {
            </div>
          </Card>

-          <Card className="border-0 p-6 bg-colors-background-inverse-weak">
+          <Card className="border-0 p-6">
            <Table>
              <TableBody>
                {teamMembers.map((member, idx) => (
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -40,7 +40,6 @@ module.exports = {
        'colors-text-inverse-strong': 'var(--colors-text-inverse-strong)',
        'colors-text-persist-light': 'var(--colors-text-persist-light)',
        'colors-text-inverse-weak': 'var(--colors-text-inverse-weak)',
-        'text-delete-red': 'var(--text-delete-red)',

        'background-badge': 'var(--background-badge)',
        'text-badge': 'var(--text-badge)',
@ -51,12 +50,9 @@ module.exports = {
        'background-header-bar': 'var(--background-header-bar)',
        'background-card': 'var(--background-card)',
        'background-note': 'var(--background-note)',
-        'background-checked': 'var(--background-checked)',
        'background-highlight': 'var(--background-highlight)',

        'input-border': 'var(--input-border)',
-        'dot-green': 'var(--dot-green)',
-        'dot-red': 'var(--dot-red)',

        /* design colors */

@ -70,9 +66,9 @@ module.exports = {
        'border-button': 'var(--border-button)',
        'accent-primary': 'var(--accent-primary)',
        'bg-accent': 'var(--bg-accent)',
-        'state--success': 'var(--state--success)',
-        'state--warning': 'var(--state--warning)',
-        'state--error': 'var(--state--error)',
+        'state-success': 'var(--state-success)',
+        'state-warning': 'var(--state-warning)',
+        'state-error': 'var(--state-error)',
        'team-group': 'var(--team-group)',
        'team-member': 'var(--team-member)',
        'team-department': 'var(--team-department)',
@ -182,10 +178,6 @@ module.exports = {
          DEFAULT: 'var(--colors-background-inverse-strong)',
          foreground: 'var(--background-inverse-standard-foreground)',
        },
-        'colors-background-inverse-weak': {
-          DEFAULT: 'var(--colors-background-inverse-weak)',
-          foreground: 'var(--background-inverse-standard-foreground)',
-        },
        'colors-background-neutral-standard': {
          DEFAULT: 'var(--colors-background-neutral-standard)',
          foreground: 'var(--background-inverse-standard-foreground)',
--- a/web/tailwind.css
+++ b/web/tailwind.css
@ -61,7 +61,6 @@
    --colors-text-inverse-strong: rgba(255, 255, 255, 1);
    --colors-text-persist-light: rgba(255, 255, 255, 1);
    --colors-text-inverse-weak: rgba(184, 181, 203, 1);
-    --text-delete-red: rgba(216, 73, 75, 1);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
@ -87,12 +86,9 @@

    --background-note: rgba(22, 22, 24, 0.1);

-    --background-checked: rgba(76, 164, 231, 1);
    --background-highlight: rgba(76, 164, 231, 0.1);

    --input-border: rgba(22, 22, 24, 0.2);
-    --dot-green: rgba(59, 160, 92, 1);
-    --dot-red: rgba(216, 73, 75, 1);

    /* design colors */

@ -115,8 +111,8 @@
    /* Output Variables Box */
    --bg-accent: rgba(76, 164, 231, 0.05);

-    --state--success: #3ba05c;
-    --state--warning: #faad14;
+    --state-success: #3ba05c;
+    --state-warning: #faad14;
    --state-error: #d8494b;

    --team-group: #5ab77e;
@ -193,7 +189,6 @@
    );
    --colors-background-inverse-standard: rgba(230, 227, 246, 0.15);
    --colors-background-inverse-strong: rgba(255, 255, 255, 0.8);
-    --colors-background-inverse-weak: rgba(184, 181, 203, 0.15);
    --colors-background-neutral-standard: rgba(11, 10, 18, 1);
    --colors-background-neutral-strong: rgba(29, 26, 44, 1);
    --colors-background-neutral-weak: rgba(17, 16, 23, 1);
@ -211,7 +206,6 @@
    --colors-text-inverse-strong: rgba(17, 16, 23, 1);
    --colors-text-persist-light: rgba(255, 255, 255, 1);
    --colors-text-inverse-weak: rgba(84, 80, 106, 1);
-    --text-delete-red: rgba(216, 73, 75, 1);

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
@ -231,15 +225,11 @@

    --background-card: rgba(255, 255, 255, 0.05);
    --background-note: rgba(255, 255, 255, 0.05);
-    --background-checked: rgba(76, 164, 231, 1);

    --background-highlight: rgba(76, 164, 231, 0.1);

    --input-border: rgba(255, 255, 255, 0.2);

-    --dot-green: rgba(59, 160, 92, 1);
-    --dot-red: rgba(216, 73, 75, 1);
-
    /* design colors */

    --bg-base: #161618;
@ -259,7 +249,7 @@
    @apply border-border;
  }
  body {
-    @apply bg-text-title-invert text-foreground;
+    @apply bg-bg-base text-text-primary;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
Author	SHA1	Message	Date
YyBoom	07354f4a1a	Add files viaContribute a new workflow template: SQL Assistant upload (#9311 ) ### What problem does this PR solve? Contribute a new workflow template: SQL Assistant ### Type of change - [x] Other (please describe): new workflow template	2025-08-07 18:06:49 +08:00
balibabu	d628234942	Feat: Restore the button's background color #3221 (#9307 ) ### What problem does this PR solve? Feat: Restore the button's background color #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)	2025-08-07 17:37:53 +08:00
Kevin Hu	5749aa30b0	Fix: model type error. (#9308 ) ### What problem does this PR solve? #9240 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)	2025-08-07 16:14:47 +08:00
Kevin Hu	a2e1f5618d	Fix: bytes style image issue. (#9304 ) ### What problem does this PR solve? #9302 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)	2025-08-07 15:20:01 +08:00
balibabu	dc48c3863d	Feat: Replace color variables according to design draft #3221 (#9305 ) ### What problem does this PR solve? Feat: Replace color variables according to design draft #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)	2025-08-07 15:19:45 +08:00