feat: add author_name for app list card (#16900)

Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

api/fields/app_fields.py

@@ -100,6 +100,8 @@ app_partial_fields = {
     "updated_at": TimestampField,
     "tags": fields.List(fields.Nested(tag_fields)),
     "access_mode": fields.String,
+    "create_user_name": fields.String,
+    "author_name": fields.String,
 }
 
 

api/models/model.py

@@ -294,6 +294,15 @@ class App(Base):
 
         return tags or []
 
+    @property
+    def author_name(self):
+        if self.created_by:
+            account = db.session.query(Account).filter(Account.id == self.created_by).first()
+            if account:
+                return account.name
+
+        return None
+
 
 class AppModelConfig(Base):
     __tablename__ = "app_model_configs"

web/app/(commonLayout)/apps/AppCard.tsx

@@ -2,7 +2,7 @@
 
 import { useContext, useContextSelector } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill } from '@remixicon/react'
 import cn from '@/utils/classnames'
@@ -35,6 +35,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import AccessControl from '@/app/components/app/app-access-control'
 import { AccessMode } from '@/models/access-control'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { formatTime } from '@/utils/time'
 
 export type AppCardProps = {
   app: App
@@ -296,6 +297,15 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     setTags(app.tags)
   }, [app.tags])
 
+  const EditTimeText = useMemo(() => {
+    const timeText = formatTime({
+      date: (app.updated_at || app.created_at) * 1000,
+      dateFormat: 'MM/DD/YYYY h:mm',
+    })
+    return `${t('datasetDocuments.segment.editedAt')} ${timeText}`
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [app.updated_at, app.created_at])
+
   return (
     <>
       <div
@@ -320,12 +330,10 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
               <div className='truncate' title={app.name}>{app.name}</div>
             </div>
-            <div className='flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary'>
+            <div className='flex items-center gap-1 text-[10px] font-medium leading-[18px] text-text-tertiary'>
-              {app.mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
+              <div className='truncate' title={app.author_name}>{app.author_name}</div>
-              {app.mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
+              <div>·</div>
-              {app.mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
+              <div className='truncate'>{EditTimeText}</div>
-              {app.mode === 'workflow' && <div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>}
-              {app.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
             </div>
           </div>
           <div className='flex h-5 w-5 shrink-0 items-center justify-center'>

web/types/app.ts

@@ -316,6 +316,8 @@ export type App = {
   name: string
   /** Description */
   description: string
+  /** Author Name */
+  author_name: string;
 
   /**
    * Icon Type
@@ -348,6 +350,8 @@ export type App = {
   app_model_config: ModelConfig
   /** Timestamp of creation */
   created_at: number
+  /** Timestamp of update */
+  updated_at: number
   /** Web Application Configuration */
   site: SiteConfig
   /** api site url */