Feat: Add xai logo #1853 (#9321)

### What problem does this PR solve?

Feat: Add xai logo #1853

### Type of change


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

README.md

@@ -87,6 +87,7 @@ Try our demo at [https://demo.ragflow.io](https://demo.ragflow.io).
 
 ## 🔥 Latest Updates
 
+- 2025-08-08 Supports OpenAI's latest GPT-5 series models.
 - 2025-08-04 Supports new models, including Kimi K2 and Grok 4.
 - 2025-08-01 Supports agentic workflow and MCP.
 - 2025-05-23 Adds a Python/JavaScript code executor component to Agent.

README_id.md

@@ -80,6 +80,7 @@ Coba demo kami di [https://demo.ragflow.io](https://demo.ragflow.io).
 
 ## 🔥 Pembaruan Terbaru
 
+- 2025-08-08 Mendukung model seri GPT-5 terbaru dari OpenAI.
 - 2025-08-04 Mendukung model baru, termasuk Kimi K2 dan Grok 4.
 - 2025-08-01 Mendukung alur kerja agen dan MCP.
 - 2025-05-23 Menambahkan komponen pelaksana kode Python/JS ke Agen.

README_ja.md

@@ -60,6 +60,7 @@
 
 ## 🔥 最新情報
 
+- 2025-08-08 OpenAI の最新 GPT-5 シリーズモデルをサポートします。
 - 2025-08-04 新モデル、キミK2およびGrok 4をサポート。
 - 2025-08-01 エージェントワークフローとMCPをサポート。
 - 2025-05-23 エージェントに Python/JS コードエグゼキュータコンポーネントを追加しました。

README_ko.md

@@ -60,6 +60,7 @@
 
 ## 🔥 업데이트
 
+- 2025-08-08 OpenAI의 최신 GPT-5 시리즈 모델을 지원합니다.
 - 2025-08-04 새로운 모델인 Kimi K2와 Grok 4를 포함하여 지원합니다.
 - 2025-08-01 에이전트 워크플로우와 MCP를 지원합니다.
 - 2025-05-23 Agent에 Python/JS 코드 실행기 구성 요소를 추가합니다.

README_pt_br.md

@@ -80,6 +80,7 @@ Experimente nossa demo em [https://demo.ragflow.io](https://demo.ragflow.io).
 
 ## 🔥 Últimas Atualizações
 
+- 08-08-2025 Suporta a mais recente série GPT-5 da OpenAI.
 - 04-08-2025 Suporta novos modelos, incluindo Kimi K2 e Grok 4.
 - 01-08-2025 Suporta fluxo de trabalho agente e MCP.
 - 23-05-2025 Adicione o componente executor de código Python/JS ao Agente.

README_tzh.md

@@ -83,6 +83,7 @@
 
 ## 🔥 近期更新
 
+- 2025-08-08 支援 OpenAI 最新的 GPT-5 系列模型。
 - 2025-08-04 支援 Kimi K2 和 Grok 4 等模型.
 - 2025-08-01 支援 agentic workflow 和 MCP
 - 2025-05-23 為 Agent 新增 Python/JS 程式碼執行器元件。

README_zh.md

@@ -83,6 +83,7 @@
 
 ## 🔥 近期更新
 
+- 2025-08-08 支持 OpenAI 最新的 GPT-5 系列模型.
 - 2025-08-04 新增对 Kimi K2 和 Grok 4 等模型的支持.
 - 2025-08-01 支持 agentic workflow 和 MCP。
 - 2025-05-23 Agent 新增 Python/JS 代码执行器组件。

api/apps/sdk/session.py

@@ -51,7 +51,7 @@ def create(tenant_id, chat_id):
         "name": req.get("name", "New session"),
         "message": [{"role": "assistant", "content": dia[0].prompt_config.get("prologue")}],
         "user_id": req.get("user_id", ""),
-        "reference":[{}],
+        "reference": [{}],
     }
     if not conv.get("name"):
         return get_error_data_result(message="`name` can not be empty.")
@@ -475,41 +475,38 @@ def agents_completion_openai_compatibility(tenant_id, agent_id):
 @token_required
 def agent_completions(tenant_id, agent_id):
     req = request.json
-    cvs = UserCanvasService.query(user_id=tenant_id, id=agent_id)
-    if not cvs:
-        return get_error_data_result(f"You don't own the agent {agent_id}")
-    if req.get("session_id"):
-        dsl = cvs[0].dsl
-        if not isinstance(dsl, str):
-            dsl = json.dumps(dsl)
 
-        conv = API4ConversationService.query(id=req["session_id"], dialog_id=agent_id)
-        if not conv:
-            return get_error_data_result(f"You don't own the session {req['session_id']}")
-        # If an update to UserCanvas is detected, update the API4Conversation.dsl
-        sync_dsl = req.get("sync_dsl", False)
-        if sync_dsl is True and cvs[0].update_time > conv[0].update_time:
-            current_dsl = conv[0].dsl
-            new_dsl = json.loads(dsl)
-            state_fields = ["history", "messages", "path", "reference"]
-            states = {field: current_dsl.get(field, []) for field in state_fields}
-            current_dsl.update(new_dsl)
-            current_dsl.update(states)
-            API4ConversationService.update_by_id(req["session_id"], {"dsl": current_dsl})
-    else:
-        req["question"] = ""
+    ans = {}
     if req.get("stream", True):
-        resp = Response(agent_completion(tenant_id, agent_id, **req), mimetype="text/event-stream")
+
+        def generate():
+            for answer in agent_completion(tenant_id=tenant_id, agent_id=agent_id, **req):
+                if isinstance(answer, str):
+                    try:
+                        ans = json.loads(answer[5:])  # remove "data:"
+                    except Exception:
+                        continue
+
+                if ans.get("event") != "message":
+                    continue
+
+                yield answer
+
+            yield "data:[DONE]\n\n"
+
+        resp = Response(generate(), mimetype="text/event-stream")
         resp.headers.add_header("Cache-control", "no-cache")
         resp.headers.add_header("Connection", "keep-alive")
         resp.headers.add_header("X-Accel-Buffering", "no")
         resp.headers.add_header("Content-Type", "text/event-stream; charset=utf-8")
         return resp
-    try:
-        for answer in agent_completion(tenant_id, agent_id, **req):
-            return get_result(data=answer)
-    except Exception as e:
-        return get_error_data_result(str(e))
+
+    for answer in agent_completion(tenant_id=tenant_id, agent_id=agent_id, **req):
+        try:
+            ans = json.loads(answer[5:])  # remove "data:"
+        except Exception as e:
+            return get_result(data=f"**ERROR**: {str(e)}")
+    return get_result(data=ans)
 
 
 @manager.route("/chats/<chat_id>/sessions", methods=["GET"])  # noqa: F821
@@ -836,44 +833,30 @@ def chatbot_completions(dialog_id):
 
 
 @manager.route("/agentbots/<agent_id>/completions", methods=["POST"])  # noqa: F821
-def agent_bot_completions(agent_id):
+@token_required
+def agent_bot_completions(tenant_id, agent_id):
     req = request.json
 
-    token = request.headers.get("Authorization").split()
-    if len(token) != 2:
-        return get_error_data_result(message='Authorization is not valid!"')
-    token = token[1]
-    objs = APIToken.query(beta=token)
-    if not objs:
-        return get_error_data_result(message='Authentication error: API key is invalid!"')
-
     if req.get("stream", True):
-        resp = Response(agent_completion(objs[0].tenant_id, agent_id, **req), mimetype="text/event-stream")
+        resp = Response(agent_completion(tenant_id, agent_id, **req), mimetype="text/event-stream")
         resp.headers.add_header("Cache-control", "no-cache")
         resp.headers.add_header("Connection", "keep-alive")
         resp.headers.add_header("X-Accel-Buffering", "no")
         resp.headers.add_header("Content-Type", "text/event-stream; charset=utf-8")
         return resp
 
-    for answer in agent_completion(objs[0].tenant_id, agent_id, **req):
+    for answer in agent_completion(tenant_id, agent_id, **req):
         return get_result(data=answer)
 
 
 @manager.route("/agentbots/<agent_id>/inputs", methods=["GET"])  # noqa: F821
-def begin_inputs(agent_id):
-    token = request.headers.get("Authorization").split()
-    if len(token) != 2:
-        return get_error_data_result(message='Authorization is not valid!"')
-    token = token[1]
-    objs = APIToken.query(beta=token)
-    if not objs:
-        return get_error_data_result(message='Authentication error: API key is invalid!"')
-
+@token_required
+def begin_inputs(tenant_id, agent_id):
     e, cvs = UserCanvasService.get_by_id(agent_id)
     if not e:
         return get_error_data_result(f"Can't find agent by ID: {agent_id}")
 
-    canvas = Canvas(json.dumps(cvs.dsl), objs[0].tenant_id)
+    canvas = Canvas(json.dumps(cvs.dsl), tenant_id)
     return get_result(
         data={
             "title": cvs.title,

api/db/services/canvas_service.py

@@ -123,7 +123,7 @@ class UserCanvasService(CommonService):
 
 
 def completion(tenant_id, agent_id, session_id=None, **kwargs):
-    query = kwargs.get("query", "")
+    query = kwargs.get("query", "") or kwargs.get("question", "")
     files = kwargs.get("files", [])
     inputs = kwargs.get("inputs", {})
     user_id = kwargs.get("user_id", "")

api/db/services/llm_service.py

@@ -230,6 +230,8 @@ class TenantLLMService(CommonService):
 
         for llm in LLMService.query(llm_name=llm_id):
             return llm.model_type
+        for llm in TenantLLMService.query(llm_name=llm_id):
+            return llm.model_type
 
 
 class LLMBundle:

conf/llm_factories.json

@@ -6,6 +6,34 @@
             "tags": "LLM,TEXT EMBEDDING,TTS,TEXT RE-RANK,SPEECH2TEXT,MODERATION",
             "status": "1",
             "llm": [
+                {
+                    "llm_name": "gpt-5",
+                    "tags": "LLM,CHAT,400k,IMAGE2TEXT",
+                    "max_tokens": 400000,
+                    "model_type": "chat",
+                    "is_tools": true
+                },
+                {
+                    "llm_name": "gpt-5-mini",
+                    "tags": "LLM,CHAT,400k,IMAGE2TEXT",
+                    "max_tokens": 400000,
+                    "model_type": "chat",
+                    "is_tools": true
+                },
+                {
+                    "llm_name": "gpt-5-nano",
+                    "tags": "LLM,CHAT,400k,IMAGE2TEXT",
+                    "max_tokens": 400000,
+                    "model_type": "chat",
+                    "is_tools": true
+                },
+                {
+                    "llm_name": "gpt-5-chat-latest",
+                    "tags": "LLM,CHAT,400k,IMAGE2TEXT",
+                    "max_tokens": 400000,
+                    "model_type": "chat",
+                    "is_tools": false
+                },
                 {
                     "llm_name": "gpt-4.1",
                     "tags": "LLM,CHAT,1M,IMAGE2TEXT",

rag/llm/chat_model.py

@@ -1099,9 +1099,20 @@ class GeminiChat(Base):
 
         if system:
             self.model._system_instruction = content_types.to_content(system)
-        response = self.model.generate_content(hist, generation_config=gen_conf)
-        ans = response.text
-        return ans, response.usage_metadata.total_token_count
+        retry_count = 0
+        max_retries = 3
+        while retry_count < max_retries:
+            try:
+                response = self.model.generate_content(hist, generation_config=gen_conf)
+                ans = response.text
+                return ans, response.usage_metadata.total_token_count
+            except Exception as e:
+                retry_count += 1
+                if retry_count >= max_retries:
+                    raise e
+                else:
+                    import time
+                    time.sleep(50) 
 
     def chat_streamly(self, system, history, gen_conf={}, **kwargs):
         from google.generativeai.types import content_types

web/src/assets/svg/llm/grok.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path d="M18.542 30.532l15.956-11.776c.783-.576 1.902-.354 2.274.545 1.962 4.728 1.084 10.411-2.819 14.315-3.903 3.901-9.333 4.756-14.299 2.808l-5.423 2.511c7.778 5.315 17.224 4 23.125-1.903 4.682-4.679 6.131-11.058 4.775-16.812l.011.011c-1.966-8.452.482-11.829 5.501-18.735C47.759 1.332 47.88 1.166 48 1l-6.602 6.599V7.577l-22.86 22.958M15.248 33.392c-5.582-5.329-4.619-13.579.142-18.339 3.521-3.522 9.294-4.958 14.331-2.847l5.412-2.497c-.974-.704-2.224-1.46-3.659-1.994-6.478-2.666-14.238-1.34-19.505 3.922C6.904 16.701 5.31 24.488 8.045 31.133c2.044 4.965-1.307 8.48-4.682 12.023C2.164 44.411.967 45.67 0 47l15.241-13.608"/></svg>

web/src/assets/svg/llm/xai.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><polygon fill="#212121" fill-rule="evenodd" points="24.032,28.919 40.145,5.989 33.145,5.989 20.518,23.958" clip-rule="evenodd"/><polygon fill="#212121" fill-rule="evenodd" points="14.591,32.393 7.145,42.989 14.145,42.989 18.105,37.354" clip-rule="evenodd"/><polygon fill="#212121" fill-rule="evenodd" points="14.547,18.989 7.547,18.989 24.547,42.989 31.547,42.989" clip-rule="evenodd"/><polygon fill="#212121" fill-rule="evenodd" points="35,16.789 35,43 41,43 41,8.251" clip-rule="evenodd"/></svg>

web/src/components/ragflow-form.tsx

@@ -0,0 +1,44 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { ReactNode, cloneElement, isValidElement } from 'react';
+import { ControllerRenderProps, useFormContext } from 'react-hook-form';
+
+type RAGFlowFormItemProps = {
+  name: string;
+  label: ReactNode;
+  tooltip?: ReactNode;
+  children: ReactNode | ((field: ControllerRenderProps) => ReactNode);
+};
+
+export function RAGFlowFormItem({
+  name,
+  label,
+  tooltip,
+  children,
+}: RAGFlowFormItemProps) {
+  const form = useFormContext();
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel tooltip={tooltip}>{label}</FormLabel>
+          <FormControl>
+            {typeof children === 'function'
+              ? children(field)
+              : isValidElement(children)
+                ? cloneElement(children, { ...field })
+                : children}
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

web/src/components/shared-badge.tsx

@@ -0,0 +1,16 @@
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
+import { PropsWithChildren } from 'react';
+
+export function SharedBadge({ children }: PropsWithChildren) {
+  const { data: userInfo } = useFetchUserInfo();
+
+  if (typeof children === 'string' && userInfo.nickname === children) {
+    return null;
+  }
+
+  return (
+    <span className="bg-text-secondary rounded-sm px-1 text-bg-base text-xs">
+      {children}
+    </span>
+  );
+}

web/src/components/ui/radio-group.tsx

@@ -1,44 +1,45 @@
 'use client';
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
+import { CircleIcon } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
   return (
     <RadioGroupPrimitive.Root
-      className={cn('grid gap-2', className)}
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
       {...props}
-      ref={ref}
     />
   );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+}
 
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
   return (
     <RadioGroupPrimitive.Item
-      ref={ref}
+      data-slot="radio-group-item"
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+}
 
 export { RadioGroup, RadioGroupItem };

web/src/constants/llm.ts

@@ -52,6 +52,8 @@ export enum LLMFactory {
   GiteeAI = 'GiteeAI',
   Ai302 = '302.AI',
   DeepInfra = 'DeepInfra',
+  Grok = 'Grok',
+  XAI = 'xAI',
 }
 
 // Please lowercase the file name
@@ -109,4 +111,6 @@ export const IconMap = {
   [LLMFactory.GiteeAI]: 'gitee-ai',
   [LLMFactory.Ai302]: 'ai302',
   [LLMFactory.DeepInfra]: 'deepinfra',
+  [LLMFactory.Grok]: 'grok',
+  [LLMFactory.XAI]: 'xai',
 };

web/src/hooks/use-agent-request.ts

@@ -48,6 +48,7 @@ export const enum AgentApiAction {
   FetchVersion = 'fetchVersion',
   FetchAgentAvatar = 'fetchAgentAvatar',
   FetchExternalAgentInputs = 'fetchExternalAgentInputs',
+  SetAgentSetting = 'setAgentSetting',
 }
 
 export const EmptyDsl = {
@@ -613,3 +614,30 @@ export const useFetchExternalAgentInputs = () => {
 
   return { data, loading, refetch };
 };
+
+export const useSetAgentSetting = () => {
+  const { id } = useParams();
+  const queryClient = useQueryClient();
+
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [AgentApiAction.SetAgentSetting],
+    mutationFn: async (params: any) => {
+      const ret = await agentService.settingCanvas({ id, ...params });
+      if (ret?.data?.code === 0) {
+        message.success('success');
+        queryClient.invalidateQueries({
+          queryKey: [AgentApiAction.FetchAgentDetail],
+        });
+      } else {
+        message.error(ret?.data?.data);
+      }
+      return ret?.data?.code;
+    },
+  });
+
+  return { data, loading, setAgentSetting: mutateAsync };
+};

web/src/interfaces/database/flow.ts

@@ -32,7 +32,7 @@ export declare interface IFlow {
   canvas_type: null;
   create_date: string;
   create_time: number;
-  description: null;
+  description: string;
   dsl: DSL;
   id: string;
   title: string;

web/src/pages/agent/index.tsx

@@ -27,6 +27,7 @@ import {
   LaptopMinimalCheck,
   Logs,
   ScreenShare,
+  Settings,
   Upload,
 } from 'lucide-react';
 import { ComponentPropsWithoutRef, useCallback } from 'react';
@@ -43,6 +44,7 @@ import {
   useWatchAgentChange,
 } from './hooks/use-save-graph';
 import { useShowEmbedModal } from './hooks/use-show-dialog';
+import { SettingDialog } from './setting-dialog';
 import { UploadAgentDialog } from './upload-agent-dialog';
 import { useAgentHistoryManager } from './use-agent-history-manager';
 import { VersionDialog } from './version-dialog';
@@ -92,6 +94,12 @@ export default function Agent() {
     showModal: showVersionDialog,
   } = useSetModalState();
 
+  const {
+    visible: settingDialogVisible,
+    hideModal: hideSettingDialog,
+    showModal: showSettingDialog,
+  } = useSetModalState();
+
   const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
     useShowEmbedModal();
   const { navigateToAgentLogs } = useNavigatePage();
@@ -149,11 +157,6 @@ export default function Agent() {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              {/* <AgentDropdownMenuItem onClick={openDocument}>
-                <Key />
-                API
-              </AgentDropdownMenuItem> */}
-              {/* <DropdownMenuSeparator /> */}
               <AgentDropdownMenuItem onClick={handleImportJson}>
                 <Download />
                 {t('flow.import')}
@@ -163,6 +166,11 @@ export default function Agent() {
                 <Upload />
                 {t('flow.export')}
               </AgentDropdownMenuItem>
+              <DropdownMenuSeparator />
+              <AgentDropdownMenuItem onClick={showSettingDialog}>
+                <Settings />
+                {t('flow.setting')}
+              </AgentDropdownMenuItem>
               {location.hostname !== 'demo.ragflow.io' && (
                 <>
                   <DropdownMenuSeparator />
@@ -201,6 +209,9 @@ export default function Agent() {
       {versionDialogVisible && (
         <VersionDialog hideModal={hideVersionDialog}></VersionDialog>
       )}
+      {settingDialogVisible && (
+        <SettingDialog hideModal={hideSettingDialog}></SettingDialog>
+      )}
     </section>
   );
 }

web/src/pages/agent/setting-dialog/index.tsx

@@ -0,0 +1,53 @@
+import { ButtonLoading } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useSetAgentSetting } from '@/hooks/use-agent-request';
+import { IModalProps } from '@/interfaces/common';
+import { transformFile2Base64 } from '@/utils/file-util';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  AgentSettingId,
+  SettingForm,
+  SettingFormSchemaType,
+} from './setting-form';
+
+export function SettingDialog({ hideModal }: IModalProps<any>) {
+  const { t } = useTranslation();
+  const { setAgentSetting } = useSetAgentSetting();
+
+  const submit = useCallback(
+    async (values: SettingFormSchemaType) => {
+      const avatar = values.avatar;
+      const code = await setAgentSetting({
+        ...values,
+        avatar: avatar.length > 0 ? await transformFile2Base64(avatar[0]) : '',
+      });
+      if (code === 0) {
+        hideModal?.();
+      }
+    },
+    [hideModal, setAgentSetting],
+  );
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you absolutely sure?</DialogTitle>
+        </DialogHeader>
+        <SettingForm submit={submit}></SettingForm>
+        <DialogFooter>
+          <ButtonLoading type="submit" form={AgentSettingId} loading={false}>
+            {t('common.save')}
+          </ButtonLoading>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/agent/setting-dialog/setting-form.tsx

@@ -0,0 +1,158 @@
+import { z } from 'zod';
+
+import {
+  FileUpload,
+  FileUploadDropzone,
+  FileUploadItem,
+  FileUploadItemDelete,
+  FileUploadItemMetadata,
+  FileUploadItemPreview,
+  FileUploadList,
+  FileUploadTrigger,
+} from '@/components/file-upload';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Textarea } from '@/components/ui/textarea';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useFetchAgent } from '@/hooks/use-agent-request';
+import { transformBase64ToFile } from '@/utils/file-util';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CloudUpload, X } from 'lucide-react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+const formSchema = z.object({
+  title: z.string().min(1, {}),
+  avatar: z.array(z.custom<File>()),
+  description: z.string(),
+  permission: z.string(),
+});
+
+export type SettingFormSchemaType = z.infer<typeof formSchema>;
+
+export const AgentSettingId = 'agentSettingId';
+
+type SettingFormProps = {
+  submit: (values: SettingFormSchemaType) => void;
+};
+
+export function SettingForm({ submit }: SettingFormProps) {
+  const { t } = useTranslate('flow.settings');
+  const { data } = useFetchAgent();
+
+  const form = useForm<SettingFormSchemaType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: '',
+      permission: 'me',
+    },
+  });
+
+  useEffect(() => {
+    form.reset({
+      title: data?.title,
+      description: data?.description,
+      avatar: data.avatar ? [transformBase64ToFile(data.avatar)] : [],
+      permission: data?.permission,
+    });
+  }, [data, form]);
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(submit)}
+        className="space-y-8"
+        id={AgentSettingId}
+      >
+        <RAGFlowFormItem name="title" label={t('title')}>
+          <Input />
+        </RAGFlowFormItem>
+        <RAGFlowFormItem name="avatar" label={t('photo')}>
+          {(field) => (
+            <FileUpload
+              value={field.value}
+              onValueChange={field.onChange}
+              accept="image/*"
+              maxFiles={1}
+              onFileReject={(_, message) => {
+                form.setError('avatar', {
+                  message,
+                });
+              }}
+              multiple
+            >
+              <FileUploadDropzone className="flex-row flex-wrap border-dotted text-center">
+                <CloudUpload className="size-4" />
+                Drag and drop or
+                <FileUploadTrigger asChild>
+                  <Button variant="link" size="sm" className="p-0">
+                    choose files
+                  </Button>
+                </FileUploadTrigger>
+                to upload
+              </FileUploadDropzone>
+              <FileUploadList>
+                {field.value?.map((file: File, index: number) => (
+                  <FileUploadItem key={index} value={file}>
+                    <FileUploadItemPreview />
+                    <FileUploadItemMetadata />
+                    <FileUploadItemDelete asChild>
+                      <Button variant="ghost" size="icon" className="size-7">
+                        <X />
+                        <span className="sr-only">Delete</span>
+                      </Button>
+                    </FileUploadItemDelete>
+                  </FileUploadItem>
+                ))}
+              </FileUploadList>
+            </FileUpload>
+          )}
+        </RAGFlowFormItem>
+        <RAGFlowFormItem name="description" label={t('description')}>
+          <Textarea rows={4} />
+        </RAGFlowFormItem>
+
+        <RAGFlowFormItem
+          name="permission"
+          label={t('permissions')}
+          tooltip={t('permissionsTip')}
+        >
+          {(field) => (
+            <RadioGroup
+              onValueChange={field.onChange}
+              value={field.value}
+              className="flex"
+            >
+              <FormItem className="flex items-center gap-3">
+                <FormControl>
+                  <RadioGroupItem value="me" id="me" />
+                </FormControl>
+                <FormLabel
+                  className="font-normal !m-0 cursor-pointer"
+                  htmlFor="me"
+                >
+                  {t('me')}
+                </FormLabel>
+              </FormItem>
+
+              <FormItem className="flex items-center gap-3">
+                <FormControl>
+                  <RadioGroupItem value="team" id="team" />
+                </FormControl>
+                <FormLabel
+                  className="font-normal !m-0 cursor-pointer"
+                  htmlFor="team"
+                >
+                  {t('team')}
+                </FormLabel>
+              </FormItem>
+            </RadioGroup>
+          )}
+        </RAGFlowFormItem>
+      </form>
+    </Form>
+  );
+}

web/src/pages/agents/agent-card.tsx

@@ -1,5 +1,6 @@
 import { MoreButton } from '@/components/more-button';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
+import { SharedBadge } from '@/components/shared-badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IFlow } from '@/interfaces/database/flow';
@@ -24,6 +25,7 @@ export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
               avatar={data.avatar}
               name={data.title || 'CN'}
             ></RAGFlowAvatar>
+            <SharedBadge>{data.nickname}</SharedBadge>
           </div>
           <AgentDropdown
             showAgentRenameModal={showAgentRenameModal}

web/tailwind.config.js

@@ -59,6 +59,7 @@ module.exports = {
         'bg-base': 'var(--bg-base)',
         'bg-card': 'var(--bg-card)',
         'text-primary': 'var(--text-primary)',
+        'text-secondary': 'var(--text-secondary)',
         'text-disabled': 'var(--text-disabled)',
         'text-input-tip': 'var(--text-input-tip)',
         'border-default': 'var(--border-default)',