Feat: Show the owner of this knowledge base on the list card. #3221 (#7204)

### What problem does this PR solve?

Feat: Show the owner of this knowledge base on the list card. #3221

### Type of change


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

web/src/pages/datasets/index.tsx

@@ -1,6 +1,7 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
@@ -14,6 +15,7 @@ import { DatasetDropdown } from './dataset-dropdown';
 import { DatasetsFilterPopover } from './datasets-filter-popover';
 import { DatasetsPagination } from './datasets-pagination';
 import { useSaveKnowledge } from './hooks';
+import { useDisplayOwnerName } from './use-display-owner';
 import { useRenameDataset } from './use-rename-dataset';
 
 export default function Datasets() {
@@ -46,6 +48,8 @@ export default function Datasets() {
     showDatasetRenameModal,
   } = useRenameDataset();
 
+  const displayOwnerName = useDisplayOwnerName();
+
   const handlePageChange = useCallback(
     (page: number, pageSize?: number) => {
       setPagination({ page, pageSize });
@@ -71,17 +75,22 @@ export default function Datasets() {
         Create dataset
       </ListFilterBar>
       <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8">
-        {kbs.map((dataset) => (
+        {kbs.map((dataset) => {
+          const owner = displayOwnerName(dataset.tenant_id, dataset.nickname);
+          return (
             <Card
               key={dataset.id}
               className="bg-colors-background-inverse-weak flex-1"
             >
               <CardContent className="p-4">
-              <div className="flex justify-between mb-4">
+                <section className="flex justify-between mb-4">
+                  <div className="flex  gap-2">
                     <Avatar className="w-[70px] h-[70px] rounded-lg">
                       <AvatarImage src={dataset.avatar} />
                       <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                     </Avatar>
+                    {owner && <Badge className="h-5">{owner}</Badge>}
+                  </div>
                   <DatasetDropdown
                     showDatasetRenameModal={showDatasetRenameModal}
                     dataset={dataset}
@@ -90,11 +99,15 @@ export default function Datasets() {
                       <Ellipsis />
                     </Button>
                   </DatasetDropdown>
-              </div>
+                </section>
                 <div className="flex justify-between items-end">
                   <div>
-                  <h3 className="text-lg font-semibold mb-2">{dataset.name}</h3>
+                    <h3 className="text-lg font-semibold mb-2">
-                  <p className="text-sm opacity-80">{dataset.doc_num} files</p>
+                      {dataset.name}
+                    </h3>
+                    <p className="text-sm opacity-80">
+                      {dataset.doc_num} files
+                    </p>
                     <p className="text-sm opacity-80">
                       Created {formatDate(dataset.update_time)}
                     </p>
@@ -109,7 +122,8 @@ export default function Datasets() {
                 </div>
               </CardContent>
             </Card>
-        ))}
+          );
+        })}
       </div>
       <div className="mt-8">
         <DatasetsPagination

web/src/pages/datasets/use-display-owner.ts

@@ -0,0 +1,17 @@
+import { useFetchTenantInfo } from '@/hooks/user-setting-hooks';
+import { useCallback } from 'react';
+
+export function useDisplayOwnerName() {
+  const { data } = useFetchTenantInfo();
+  const getOwnerName = useCallback(
+    (tenantId: string, nickname: string) => {
+      if (tenantId === data.tenant_id) {
+        return null;
+      }
+      return nickname;
+    },
+    [data.tenant_id],
+  );
+
+  return getOwnerName;
+}