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';

web/src/pages/agents/compilation-template-card.tsx

@@ -1,5 +1,6 @@
 import { MoreButton } from '@/components/more-button';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { TruncatedText } from '@/components/truncated-text';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -42,9 +43,13 @@ export function CompilationTemplateCard({
 
         <div className="flex-1 min-w-0 flex flex-col gap-1">
           <section className="flex items-center justify-between gap-2">
-            <h3 className="flex-1 min-w-0 text-base font-normal truncate text-text-primary">
+            <TruncatedText
+              as="h3"
+              className="flex-1 min-w-0 truncate"
+              tooltip={data.name}
+            >
               {data.name}
-            </h3>
+            </TruncatedText>
 
             <Button variant="ghost" size="sm">
               <CompilerIcon />
@@ -55,9 +60,13 @@ export function CompilationTemplateCard({
             </CompilationTemplateDropdown>
           </section>
 
-          <p className="text-sm text-text-secondary line-clamp-1">
+          <TruncatedText
+            as="p"
+            className="text-sm text-text-secondary line-clamp-1"
+            tooltip={data.description}
+          >
             {data.description}
-          </p>
+          </TruncatedText>
 
           <div className="flex flex-wrap gap-2 mt-2">
             {kinds.map((kind) => (

web/src/pages/dataset/compilation/utils/nav-tree.ts

@@ -1,5 +1,6 @@
 import { TreeDataItem } from '@/components/ui/tree-view';
 import { DatasetNavNode } from '@/interfaces/database/dataset-nav';
+import trim from 'lodash/trim';
 import { ReactNode } from 'react';
 
 export type NavTreeActionsFactory = (
@@ -28,7 +29,7 @@ export function buildNavTreeData(
   return items.map((node) => {
     const item: TreeDataItem = {
       id: node.name,
-      name: node.name,
+      name: trim(node.name),
       hasChildren: node.has_children,
       actions: getActions?.(node, null),
       onClick: () => onParentClick(node),
@@ -39,7 +40,7 @@ export function buildNavTreeData(
       if (children?.length) {
         item.children = children.map((child) => ({
           id: `${node.name}/${child.name}`,
-          name: child.name,
+          name: trim(child.name),
           hasChildren: child.has_children,
           actions: getActions?.(child, node.name),
           onClick: () => onChildClick(child, node.name),