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,45 +75,55 @@ 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) => (
-          <Card
-            key={dataset.id}
-            className="bg-colors-background-inverse-weak flex-1"
-          >
-            <CardContent className="p-4">
-              <div className="flex justify-between mb-4">
-                <Avatar className="w-[70px] h-[70px] rounded-lg">
-                  <AvatarImage src={dataset.avatar} />
-                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                </Avatar>
-                <DatasetDropdown
-                  showDatasetRenameModal={showDatasetRenameModal}
-                  dataset={dataset}
-                >
-                  <Button variant="ghost" size="icon">
-                    <Ellipsis />
+        {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">
+                <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}
+                  >
+                    <Button variant="ghost" size="icon">
+                      <Ellipsis />
+                    </Button>
+                  </DatasetDropdown>
+                </section>
+                <div className="flex justify-between items-end">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-2">
+                      {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>
+                  </div>
+                  <Button
+                    variant="icon"
+                    size="icon"
+                    onClick={navigateToDataset(dataset.id)}
+                  >
+                    <ChevronRight className="h-6 w-6" />
                   </Button>
-                </DatasetDropdown>
-              </div>
-              <div className="flex justify-between items-end">
-                <div>
-                  <h3 className="text-lg font-semibold mb-2">{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>
                 </div>
-                <Button
-                  variant="icon"
-                  size="icon"
-                  onClick={navigateToDataset(dataset.id)}
-                >
-                  <ChevronRight className="h-6 w-6" />
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
+              </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;
+}