Fix: Remove leading and trailing whitespace from the pageIndex data returned by the backend. (#17967)

web/src/components/home-card.tsx

@@ -1,12 +1,8 @@
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { TruncatedText } from '@/components/truncated-text';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
 import { formatDate } from '@/utils/date';
-import { ElementType, ReactNode, useRef, useState } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface IProps {
@@ -30,48 +26,6 @@ function Time({ time }: { time: string | number | undefined }) {
   return <p className="text-sm truncate">{formatDate(time)}</p>;
 }
 
-function TruncatedText({
-  as: Tag = 'div',
-  className,
-  children,
-  tooltip,
-  testId,
-}: {
-  as?: ElementType;
-  className?: string;
-  children?: ReactNode;
-  tooltip?: ReactNode;
-  testId?: string;
-}) {
-  const ref = useRef<HTMLElement>(null);
-  const [open, setOpen] = useState(false);
-
-  if (tooltip == null) {
-    return (
-      <Tag ref={ref} className={className} data-testid={testId}>
-        {children}
-      </Tag>
-    );
-  }
-
-  return (
-    <Tooltip
-      open={open}
-      onOpenChange={(next) => {
-        const el = ref.current;
-        setOpen(next && el !== null && el.scrollWidth > el.clientWidth);
-      }}
-    >
-      <TooltipTrigger asChild>
-        <Tag ref={ref} className={className} data-testid={testId} tabIndex={0}>
-          {children}
-        </Tag>
-      </TooltipTrigger>
-      <TooltipContent>{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-}
-
 export function HomeCard({
   data,
   onClick,

web/src/components/structure-graph/adapters.ts

@@ -1,3 +1,4 @@
+import trim from 'lodash/trim';
 import { type TreeDataItem } from '@/components/ui/tree-view';
 import {
   type IArtifactGraph,
@@ -17,7 +18,7 @@ declare module '@/components/ui/tree-view' {
 }
 
 export function getEntityDisplayName(entity: IStructureGraphEntity) {
-  return entity.name ?? entity.id ?? '';
+  return trim(entity.name ?? entity.id ?? '');
 }
 
 function normalizeEntity(entity: IStructureGraphEntity) {

web/src/components/truncated-text.tsx

@@ -0,0 +1,48 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { ElementType, ReactNode, useRef, useState } from 'react';
+
+export function TruncatedText({
+  as: Tag = 'div',
+  className,
+  children,
+  tooltip,
+  testId,
+}: {
+  as?: ElementType;
+  className?: string;
+  children?: ReactNode;
+  tooltip?: ReactNode;
+  testId?: string;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [open, setOpen] = useState(false);
+
+  if (tooltip == null) {
+    return (
+      <Tag ref={ref} className={className} data-testid={testId}>
+        {children}
+      </Tag>
+    );
+  }
+
+  return (
+    <Tooltip
+      open={open}
+      onOpenChange={(next) => {
+        const el = ref.current;
+        setOpen(next && el !== null && el.scrollWidth > el.clientWidth);
+      }}
+    >
+      <TooltipTrigger asChild>
+        <Tag ref={ref} className={className} data-testid={testId} tabIndex={0}>
+          {children}
+        </Tag>
+      </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}

web/src/components/ui/tree-view.tsx

@@ -40,7 +40,9 @@ type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const TreeItemLabel = ({ item }: { item: TreeDataItem }) => {
   if (!item.entityType) {
-    return <span className="flex-grow truncate text-sm">{item.name}</span>;
+    return (
+      <span className="flex-grow truncate text-sm text-left">{item.name}</span>
+    );
   }
 
   const isTitle = item.entityType === 'title';