Docs: Added token chunker and title chunker components (#10711)

### What problem does this PR solve?

### Type of change

- [x] Documentation Update

deepdoc/parser/figure_parser.py

@@ -41,13 +41,13 @@ def vision_figure_parser_docx_wrapper(sections,tbls,callback=None,**kwargs):
     except Exception:
         vision_model = None
     if vision_model:
-            figures_data = vision_figure_parser_figure_data_wrapper(sections)
-            try:
-                docx_vision_parser = VisionFigureParser(vision_model=vision_model, figures_data=figures_data, **kwargs)
-                boosted_figures = docx_vision_parser(callback=callback)
-                tbls.extend(boosted_figures)
-            except Exception as e:
-                callback(0.8, f"Visual model error: {e}. Skipping figure parsing enhancement.")
+        figures_data = vision_figure_parser_figure_data_wrapper(sections)
+        try:
+            docx_vision_parser = VisionFigureParser(vision_model=vision_model, figures_data=figures_data, **kwargs)
+            boosted_figures = docx_vision_parser(callback=callback)
+            tbls.extend(boosted_figures)
+        except Exception as e:
+            callback(0.8, f"Visual model error: {e}. Skipping figure parsing enhancement.")
     return tbls
 
 def vision_figure_parser_pdf_wrapper(tbls,callback=None,**kwargs):

docs/guides/agent/agent_component_reference/chunker_title.md

@@ -0,0 +1,40 @@
+---
+sidebar_position: 31
+slug: /chunker_title_component
+---
+
+# Title chunker component
+
+A component that splits texts into chunks by heading level.
+
+---
+
+A **Token chunker** component is a text splitter that uses specified heading level as delimiter to define chunk boundaries and create chunks.
+
+## Scenario
+
+A **Title chunker** component is optional, usually placed immediately after **Parser**.
+
+:::caution WARNING
+Placing a **Title chunker** after a **Token chunker** is invalid and will cause an error. Please note that this restriction is not currently system-enforced and requires your attention.
+:::
+
+## Configurations
+
+### Hierarchy
+
+Specifies the heading level to define chunk boundaries: 
+
+- H1
+- H2
+- H3 (Default)
+- H4
+
+Click **+ Add** to add heading levels here or update the corresponding **Regular Expressions** fields for custom heading patterns.
+
+### Output
+
+The global variable name for the output of the **Title chunkder** component, which can be referenced by subsequent components in the ingestion pipeline.
+
+- Default: `chunks`
+- Type: `Array<Object>`

docs/guides/agent/agent_component_reference/chunker_token.md

@@ -3,15 +3,41 @@ sidebar_position: 32
 slug: /chunker_token_component
 ---
 
-# Parser component
+# Token chunker component
 
-A component that sets the parsing rules for your dataset.
+A component that splits texts into chunks, respecting a maximum token limit and using delimiters to find optimal breakpoints.
 
 ---
 
-A **Parser** component defines how various file types should be parsed, including parsing methods for PDFs , fields to parse for Emails, and OCR methods for images.
+A **Token chunker** component is a text splitter that creates chunks by respecting a recommended maximum token length, using delimiters to ensure logical chunk breakpoints. It splits long texts into appropriately-sized, semantically related chunks.
 
 
 ## Scenario
 
-A **Parser** component is auto-populated on the ingestion pipeline canvas and required in all ingestion pipeline workflows.
+A **Token chunker** component is optional, usually placed immediately after **Parser** or **Title chunker**.
+
+## Configurations
+
+### Recommended chunk size
+
+The recommended maximum token limit for each created chunk. The **Token chunker** component creates chunks at specified delimiters. If this token limit is reached before a delimiter, a chunk is created at that point.
+
+### Overlapped percent (%)
+
+This defines the overlap percentage between chunks. An appropriate degree of overlap ensures semantic coherence without creating excessive, redundant tokens for the LLM.
+
+- Default: 0
+- Maximum: 30%
+
+
+### Delimiters
+
+Defaults to `\n`. Click the right-hand **Recycle bin** button to remove it, or click **+ Add** to add a delimiter.
+
+
+### Output
+
+The global variable name for the output of the **Token chunkder** component, which can be referenced by subsequent components in the ingestion pipeline.
+
+- Default: `chunks`
+- Type: `Array<Object>`

rag/app/manual.py

@@ -262,7 +262,7 @@ def chunk(filename, binary=None, from_page=0, to_page=100000,
         docx_parser = Docx()
         ti_list, tbls = docx_parser(filename, binary,
                                     from_page=0, to_page=10000, callback=callback)
-        tbls=vision_figure_parser_docx_wrapper(sections=sections,tbls=tbls,callback=callback,**kwargs)
+        tbls=vision_figure_parser_docx_wrapper(sections=ti_list,tbls=tbls,callback=callback,**kwargs)
         res = tokenize_table(tbls, doc, eng)
         for text, image in ti_list:
             d = copy.deepcopy(doc)

web/src/components/avatar-upload.tsx

@@ -1,5 +1,5 @@
 import { transformFile2Base64 } from '@/utils/file-util';
-import { Pencil, Upload, XIcon } from 'lucide-react';
+import { Pencil, Plus, XIcon } from 'lucide-react';
 import {
   ChangeEventHandler,
   forwardRef,
@@ -12,10 +12,14 @@ import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 
-type AvatarUploadProps = { value?: string; onChange?: (value: string) => void };
+type AvatarUploadProps = {
+  value?: string;
+  onChange?: (value: string) => void;
+  tips?: string;
+};
 
 export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
-  function AvatarUpload({ value, onChange }, ref) {
+  function AvatarUpload({ value, onChange, tips }, ref) {
     const { t } = useTranslation();
     const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
 
@@ -47,9 +51,9 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
       <div className="flex justify-start items-end space-x-2">
         <div className="relative group">
           {!avatarBase64Str ? (
-            <div className="w-[64px] h-[64px] grid place-content-center border border-dashed	rounded-md">
+            <div className="w-[64px] h-[64px] grid place-content-center border border-dashed bg-bg-input	rounded-md">
               <div className="flex flex-col items-center">
-                <Upload />
+                <Plus />
                 <p>{t('common.upload')}</p>
               </div>
             </div>
@@ -86,8 +90,8 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
             ref={ref}
           />
         </div>
-        <div className="margin-1 text-muted-foreground">
-          {t('knowledgeConfiguration.photoTip')}
+        <div className="margin-1 text-text-secondary">
+          {tips ?? t('knowledgeConfiguration.photoTip')}
         </div>
       </div>
     );

web/src/components/card-container.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils';
+import { PropsWithChildren } from 'react';
+
+type CardContainerProps = { className?: string } & PropsWithChildren;
+
+export function CardContainer({ children, className }: CardContainerProps) {
+  return (
+    <section
+      className={cn(
+        'grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}

web/src/components/home-card.tsx

@@ -24,7 +24,6 @@ export function HomeCard({
 }: IProps) {
   return (
     <Card
-      className="bg-bg-card  border-colors-outline-neutral-standard"
       onClick={() => {
         // navigateToSearch(data?.id);
         onClick?.();

web/src/components/ui/card.tsx

@@ -8,7 +8,10 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('rounded-lg  bg-bg-card  shadow-sm', className)}
+    className={cn(
+      'rounded-lg border-border-default border shadow-sm bg-bg-input',
+      className,
+    )}
     {...props}
   />
 ));

web/src/components/ui/form.tsx

@@ -106,8 +106,10 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     >
-      {required && <span className="text-destructive">*</span>}
-      {props.children}
+      <section>
+        {required && <span className="text-destructive">*</span>}
+        {props.children}
+      </section>
       {tooltip && <FormTooltip tooltip={tooltip}></FormTooltip>}
     </Label>
   );

web/src/components/ui/modal/modal.tsx

@@ -140,6 +140,7 @@ const Modal: ModalType = ({
       </div>
     );
   }, [
+    disabled,
     footer,
     cancelText,
     t,
@@ -158,7 +159,7 @@ const Modal: ModalType = ({
           onClick={() => maskClosable && onOpenChange?.(false)}
         >
           <DialogPrimitive.Content
-            className={`relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-colors-background-neutral-standard rounded-lg shadow-lg border transition-all focus-visible:!outline-none`}
+            className={`relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-bg-base rounded-lg shadow-lg border border-border-default transition-all focus-visible:!outline-none`}
             onClick={(e) => e.stopPropagation()}
           >
             {/* title */}

web/src/interfaces/database/agent.ts

@@ -83,12 +83,19 @@ export interface IFlowTemplate {
   canvas_type: string;
   create_date: string;
   create_time: number;
-  description: string;
+  canvas_category?: string;
   dsl: DSL;
   id: string;
-  title: string;
   update_date: string;
   update_time: number;
+  description: {
+    en: string;
+    zh: string;
+  };
+  title: {
+    en: string;
+    zh: string;
+  };
 }
 
 export interface IGenerateForm {

web/src/locales/en.ts

@@ -137,7 +137,7 @@ export default {
       completed: 'Completed',
       datasetLog: 'Dataset Log',
       created: 'Created',
-      learnMore: 'Learn More',
+      learnMore: 'Built-in pipeline introduction',
       general: 'General',
       chunkMethodTab: 'Chunk Method',
       testResults: 'Test Results',
@@ -697,7 +697,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       system: 'System',
       logout: 'Log out',
       api: 'API',
-      username: 'Username',
+      username: 'Name',
       usernameMessage: 'Please input your username!',
       photo: 'Your photo',
       photoDescription: 'This will be displayed on your profile.',

web/src/locales/zh.ts

@@ -125,7 +125,7 @@ export default {
       completed: '已完成',
       datasetLog: '知识库日志',
       created: '创建于',
-      learnMore: '了解更多',
+      learnMore: '内置pipeline简介',
       general: '通用',
       chunkMethodTab: '切片方法',
       testResults: '测试结果',

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

@@ -10,9 +10,10 @@ import {
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentTemplates, useSetAgent } from '@/hooks/use-agent-request';
-import { IFlowTemplate } from '@/interfaces/database/flow';
 
+import { CardContainer } from '@/components/card-container';
 import { AgentCategory } from '@/constants/agent';
+import { IFlowTemplate } from '@/interfaces/database/agent';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateAgentDialog } from './create-agent-dialog';
@@ -121,7 +122,7 @@ export default function AgentTemplates() {
         ></SideBar>
 
         <main className="flex-1 bg-text-title-invert/50 h-dvh">
-          <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[94vh] overflow-auto px-8 pt-8">
+          <CardContainer className="max-h-[94vh] overflow-auto px-8 pt-8">
             {tempListFilter?.map((x) => {
               return (
                 <TemplateCard
@@ -131,14 +132,13 @@ export default function AgentTemplates() {
                 ></TemplateCard>
               );
             })}
-          </div>
+          </CardContainer>
           {creatingVisible && (
             <CreateAgentDialog
               loading={loading}
               visible={creatingVisible}
               hideModal={hideCreatingModal}
               onOk={handleOk}
-              canvasCategory={template?.canvas_category}
             ></CreateAgentDialog>
           )}
         </main>

web/src/pages/agents/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -113,7 +114,7 @@ export default function Agents() {
         </ListFilterBar>
       </div>
       <div className="flex-1 overflow-auto">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {data.map((x) => {
             return (
               <AgentCard
@@ -123,7 +124,7 @@ export default function Agents() {
               ></AgentCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       <div className="mt-8 px-8 pb-8">
         <RAGFlowPagination

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

@@ -1,7 +1,7 @@
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { IFlowTemplate } from '@/interfaces/database/flow';
+import { IFlowTemplate } from '@/interfaces/database/agent';
 import i18n from '@/locales/config';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/pages/datasets/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -70,7 +71,7 @@ export default function Datasets() {
         </Button>
       </ListFilterBar>
       <div className="flex-1">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {kbs.map((dataset) => {
             return (
               <DatasetCard
@@ -80,7 +81,7 @@ export default function Datasets() {
               ></DatasetCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       <div className="mt-8 px-8">
         <RAGFlowPagination

web/src/pages/next-chats/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
 import { Button } from '@/components/ui/button';
@@ -50,7 +51,7 @@ export default function ChatList() {
         </ListFilterBar>
       </div>
       <div className="flex-1 overflow-auto">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {data.dialogs.map((x) => {
             return (
               <ChatCard
@@ -60,7 +61,7 @@ export default function ChatList() {
               ></ChatCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       <div className="mt-8 px-8 pb-8">
         <RAGFlowPagination

web/src/pages/next-searches/index.tsx

@@ -1,3 +1,4 @@
+import { CardContainer } from '@/components/card-container';
 import { IconFont } from '@/components/icon-font';
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
@@ -64,7 +65,7 @@ export default function SearchList() {
         </ListFilterBar>
       </div>
       <div className="flex-1">
-        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[calc(100dvh-280px)] overflow-auto px-8">
+        <CardContainer className="max-h-[calc(100dvh-280px)] overflow-auto px-8">
           {list?.data.search_apps.map((x) => {
             return (
               <SearchCard
@@ -76,7 +77,7 @@ export default function SearchList() {
               ></SearchCard>
             );
           })}
-        </div>
+        </CardContainer>
       </div>
       {list?.data.total && list?.data.total > 0 && (
         <div className="px-8 mb-4">

web/src/pages/profile-setting/mcp/index.tsx

@@ -1,4 +1,5 @@
 import { BulkOperateBar } from '@/components/bulk-operate-bar';
+import { CardContainer } from '@/components/card-container';
 import { Button } from '@/components/ui/button';
 import { SearchInput } from '@/components/ui/input';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
@@ -60,7 +61,7 @@ export default function McpServer() {
           className="mb-2.5"
         ></BulkOperateBar>
       )}
-      <section className="flex gap-5 flex-wrap">
+      <CardContainer>
         {data.mcp_servers.map((item) => (
           <McpCard
             key={item.id}
@@ -70,8 +71,8 @@ export default function McpServer() {
             showEditModal={showEditModal}
           ></McpCard>
         ))}
-      </section>
-      <div className="mt-8 px-8">
+      </CardContainer>
+      <div className="mt-8">
         <RAGFlowPagination
           {...pick(pagination, 'current', 'pageSize')}
           total={pagination.total || 0}

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -33,7 +33,7 @@ export function McpCard({
     }
   };
   return (
-    <Card key={data.id} className="w-64">
+    <Card key={data.id}>
       <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between pb-2">
           <h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>

web/src/pages/profile-setting/profile/hooks/use-profile.ts

@@ -0,0 +1,151 @@
+// src/hooks/useProfile.ts
+import {
+  useFetchUserInfo,
+  useSaveSetting,
+} from '@/hooks/use-user-setting-request';
+import { rsaPsw } from '@/utils';
+import { useCallback, useEffect, useState } from 'react';
+
+interface ProfileData {
+  userName: string;
+  timeZone: string;
+  currPasswd?: string;
+  newPasswd?: string;
+  avatar: string;
+  email: string;
+  confirmPasswd?: string;
+}
+
+export const EditType = {
+  editName: 'editName',
+  editTimeZone: 'editTimeZone',
+  editPassword: 'editPassword',
+} as const;
+
+export type IEditType = keyof typeof EditType;
+
+export const modalTitle = {
+  [EditType.editName]: 'Edit Name',
+  [EditType.editTimeZone]: 'Edit Time Zone',
+  [EditType.editPassword]: 'Edit Password',
+} as const;
+
+export const useProfile = () => {
+  const { data: userInfo } = useFetchUserInfo();
+  const [profile, setProfile] = useState<ProfileData>({
+    userName: '',
+    avatar: '',
+    timeZone: '',
+    email: '',
+    currPasswd: '',
+  });
+
+  const [editType, setEditType] = useState<IEditType>(EditType.editName);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editForm, setEditForm] = useState<Partial<ProfileData>>({});
+  const {
+    saveSetting,
+    loading: submitLoading,
+    data: saveSettingData,
+  } = useSaveSetting();
+
+  useEffect(() => {
+    // form.setValue('currPasswd', ''); // current password
+    const profile = {
+      userName: userInfo.nickname,
+      timeZone: userInfo.timezone,
+      avatar: userInfo.avatar || '',
+      email: userInfo.email,
+      currPasswd: userInfo.password,
+    };
+    setProfile(profile);
+  }, [userInfo, setProfile]);
+
+  useEffect(() => {
+    if (saveSettingData === 0) {
+      setIsEditing(false);
+      setEditForm({});
+    }
+  }, [saveSettingData]);
+  const onSubmit = (newProfile: ProfileData) => {
+    const payload: Partial<{
+      nickname: string;
+      password: string;
+      new_password: string;
+      avatar: string;
+      timezone: string;
+    }> = {
+      nickname: newProfile.userName,
+      avatar: newProfile.avatar,
+      timezone: newProfile.timeZone,
+    };
+
+    if (
+      'currPasswd' in newProfile &&
+      'newPasswd' in newProfile &&
+      newProfile.currPasswd &&
+      newProfile.newPasswd
+    ) {
+      payload.password = rsaPsw(newProfile.currPasswd!) as string;
+      payload.new_password = rsaPsw(newProfile.newPasswd!) as string;
+    }
+    console.log('payload', payload);
+    if (editType === EditType.editName && payload.nickname) {
+      saveSetting({ nickname: payload.nickname });
+      setProfile(newProfile);
+    }
+    if (editType === EditType.editTimeZone && payload.timezone) {
+      saveSetting({ timezone: payload.timezone });
+      setProfile(newProfile);
+    }
+    if (editType === EditType.editPassword && payload.password) {
+      saveSetting({
+        password: payload.password,
+        new_password: payload.new_password,
+      });
+      setProfile(newProfile);
+    }
+    // saveSetting(payload);
+  };
+
+  const handleEditClick = useCallback(
+    (type: IEditType) => {
+      setEditForm(profile);
+      setEditType(type);
+      setIsEditing(true);
+    },
+    [profile],
+  );
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false);
+    setEditForm({});
+  }, []);
+
+  const handleSave = (data: ProfileData) => {
+    console.log('handleSave', data);
+    const newProfile = { ...profile, ...data };
+
+    onSubmit(newProfile);
+    // setIsEditing(false);
+    // setEditForm({});
+  };
+
+  const handleAvatarUpload = (avatar: string) => {
+    setProfile((prev) => ({ ...prev, avatar }));
+    saveSetting({ avatar });
+  };
+
+  return {
+    profile,
+    setProfile,
+    submitLoading: submitLoading,
+    isEditing,
+    editType,
+    editForm,
+    handleEditClick,
+    handleCancel,
+    handleSave,
+    handleAvatarUpload,
+  };
+};

web/src/pages/profile-setting/profile/index.tsx

@@ -1,5 +1,6 @@
+// src/components/ProfilePage.tsx
+import { AvatarUpload } from '@/components/avatar-upload';
 import PasswordInput from '@/components/originui/password-input';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
   Form,
@@ -10,6 +11,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { Modal } from '@/components/ui/modal/modal';
 import {
   Select,
   SelectContent,
@@ -18,434 +20,393 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchUserInfo, useSaveSetting } from '@/hooks/user-setting-hooks';
 import { TimezoneList } from '@/pages/user-setting/constants';
-import { rsaPsw } from '@/utils';
-import { transformFile2Base64 } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { TFunction } from 'i18next';
-import { Loader2Icon, Pencil, Upload } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { t } from 'i18next';
+import { Loader2Icon, PenLine } from 'lucide-react';
+import { FC, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-function defineSchema(
-  t: TFunction<'translation', string>,
-  showPasswordForm = false,
-) {
-  const baseSchema = z.object({
-    userName: z
-      .string()
-      .min(1, { message: t('usernameMessage') })
-      .trim(),
-    avatarUrl: z.string().trim(),
-    timeZone: z
-      .string()
-      .trim()
-      .min(1, { message: t('timezonePlaceholder') }),
-    email: z
-      .string({ required_error: 'Please select an email to display.' })
-      .trim()
-      .regex(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, {
-        message: 'Enter a valid email address.',
-      }),
-  });
+import { EditType, modalTitle, useProfile } from './hooks/use-profile';
 
-  if (showPasswordForm) {
-    return baseSchema
-      .extend({
-        currPasswd: z
-          .string({
-            required_error: t('currentPasswordMessage'),
-          })
-          .trim()
-          .min(1, { message: t('currentPasswordMessage') }),
-        newPasswd: z
-          .string({
-            required_error: t('confirmPasswordMessage'),
-          })
-          .trim()
-          .min(8, { message: t('confirmPasswordMessage') }),
-        confirmPasswd: z
-          .string({
-            required_error: t('newPasswordDescription'),
-          })
-          .trim()
-          .min(8, { message: t('newPasswordDescription') }),
+const baseSchema = z.object({
+  userName: z
+    .string()
+    .min(1, { message: t('setting.usernameMessage') })
+    .trim(),
+  timeZone: z
+    .string()
+    .trim()
+    .min(1, { message: t('setting.timezonePlaceholder') }),
+});
+
+const nameSchema = baseSchema.extend({
+  currPasswd: z.string().optional(),
+  newPasswd: z.string().optional(),
+  confirmPasswd: z.string().optional(),
+});
+
+const passwordSchema = baseSchema
+  .extend({
+    currPasswd: z
+      .string({
+        required_error: t('setting.currentPasswordMessage'),
       })
-      .refine((data) => data.newPasswd === data.confirmPasswd, {
-        message: t('confirmPasswordNonMatchMessage'),
+      .trim(),
+    newPasswd: z
+      .string({
+        required_error: t('setting.newPasswordMessage'),
+      })
+      .trim()
+      .min(8, { message: t('setting.newPasswordDescription') }),
+    confirmPasswd: z
+      .string({
+        required_error: t('setting.confirmPasswordMessage'),
+      })
+      .trim()
+      .min(8, { message: t('setting.newPasswordDescription') }),
+  })
+  .superRefine((data, ctx) => {
+    if (
+      data.newPasswd &&
+      data.confirmPasswd &&
+      data.newPasswd !== data.confirmPasswd
+    ) {
+      ctx.addIssue({
         path: ['confirmPasswd'],
+        message: t('setting.confirmPasswordNonMatchMessage'),
+        code: z.ZodIssueCode.custom,
       });
-  }
-
-  return baseSchema;
-}
-export default function Profile() {
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
-  const { data: userInfo } = useFetchUserInfo();
-  const {
-    saveSetting,
-    loading: submitLoading,
-    data: saveUserData,
-  } = useSaveSetting();
-
+    }
+  });
+const ProfilePage: FC = () => {
   const { t } = useTranslate('setting');
-  const [showPasswordForm, setShowPasswordForm] = useState(false);
-  const FormSchema = defineSchema(t, showPasswordForm);
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
+
+  const {
+    profile,
+    editType,
+    isEditing,
+    submitLoading,
+    editForm,
+    handleEditClick,
+    handleCancel,
+    handleSave,
+    handleAvatarUpload,
+  } = useProfile();
+
+  const form = useForm<z.infer<typeof baseSchema | typeof passwordSchema>>({
+    resolver: zodResolver(
+      editType === EditType.editPassword ? passwordSchema : nameSchema,
+    ),
     defaultValues: {
       userName: '',
-      avatarUrl: '',
       timeZone: '',
-      email: '',
-      // currPasswd: '',
-      // newPasswd: '',
-      // confirmPasswd: '',
     },
-    shouldUnregister: true,
+    // shouldUnregister: true,
   });
-
   useEffect(() => {
-    // init user info when mounted
-    form.setValue('email', userInfo?.email); // email
-    form.setValue('userName', userInfo?.nickname); // nickname
-    form.setValue('timeZone', userInfo?.timezone); // time zone
-    // form.setValue('currPasswd', ''); // current password
-    setAvatarBase64Str(userInfo?.avatar ?? '');
-  }, [userInfo]);
+    form.reset({ ...editForm, currPasswd: undefined });
+  }, [editForm, form]);
 
-  useEffect(() => {
-    if (saveUserData === 0) {
-      setShowPasswordForm(false);
-      form.resetField('currPasswd');
-      form.resetField('newPasswd');
-      form.resetField('confirmPasswd');
-    }
-    console.log('saveUserData', saveUserData);
-  }, [saveUserData]);
+  //   const ModalContent: FC = () => {
+  //     // let content = null;
+  //     // if (editType === EditType.editName) {
+  //     //   content = editName();
+  //     // }
+  //     return (
+  //       <>
 
-  useEffect(() => {
-    if (avatarFile) {
-      // make use of img compression transformFile2Base64
-      (async () => {
-        setAvatarBase64Str(await transformFile2Base64(avatarFile));
-      })();
-    }
-  }, [avatarFile]);
+  //       </>
+  //     );
+  //   };
 
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    const payload: Partial<{
-      nickname: string;
-      password: string;
-      new_password: string;
-      avatar: string;
-      timezone: string;
-    }> = {
-      nickname: data.userName,
-      avatar: avatarBase64Str,
-      timezone: data.timeZone,
-    };
-
-    if (showPasswordForm && 'currPasswd' in data && 'newPasswd' in data) {
-      payload.password = rsaPsw(data.currPasswd!) as string;
-      payload.new_password = rsaPsw(data.newPasswd!) as string;
-    }
-    saveSetting(payload);
-  }
-
-  useEffect(() => {
-    if (showPasswordForm) {
-      form.register('currPasswd');
-      form.register('newPasswd');
-      form.register('confirmPasswd');
-    } else {
-      form.unregister(['currPasswd', 'newPasswd', 'confirmPasswd']);
-    }
-  }, [showPasswordForm]);
   return (
-    <section className="p-8">
-      <h1 className="text-3xl font-bold">{t('profile')}</h1>
-      <div className="text-sm text-muted-foreground mb-6">
-        {t('profileDescription')}
-      </div>
-      <div>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="block space-y-6"
-          >
-            {/* Username Field */}
-            <FormField
-              control={form.control}
-              name="userName"
-              render={({ field }) => (
-                <FormItem className=" items-center space-y-0 ">
-                  <div className="flex w-[640px]">
-                    <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
-                      <span className="text-red-600">*</span>
-                      {t('username')}
-                    </FormLabel>
-                    <FormControl className="w-3/4">
-                      <Input placeholder="" {...field} />
-                    </FormControl>
-                  </div>
-                  <div className="flex w-[640px] pt-1">
-                    <div className="w-1/4"></div>
-                    <FormMessage />
-                  </div>
-                </FormItem>
-              )}
-            />
+    <div className="min-h-screen bg-bg-base text-text-secondary p-5">
+      {/* Header */}
+      <header className="flex flex-col gap-1 justify-between items-start mb-6">
+        <h1 className="text-2xl font-bold text-text-primary">{t('profile')}</h1>
+        <div className="text-sm text-text-secondary mb-6">
+          {t('profileDescription')}
+        </div>
+      </header>
 
-            {/* Avatar Field */}
-            <FormField
-              control={form.control}
-              name="avatarUrl"
-              render={({ field }) => (
-                <FormItem className="flex items-center space-y-0">
-                  <div className="flex w-[640px]">
-                    <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
-                      Avatar
-                    </FormLabel>
-                    <FormControl className="w-3/4">
-                      <div className="flex justify-start items-end space-x-2">
-                        <div className="relative group">
-                          {!avatarBase64Str ? (
-                            <div className="w-[64px] h-[64px] grid place-content-center">
-                              <div className="flex flex-col items-center">
-                                <Upload />
-                                <p>Upload</p>
-                              </div>
-                            </div>
-                          ) : (
-                            <div className="w-[64px] h-[64px] relative grid place-content-center">
-                              <Avatar className="w-[64px] h-[64px] rounded-md">
-                                <AvatarImage
-                                  className="block"
-                                  src={avatarBase64Str}
-                                  alt=""
-                                />
-                                <AvatarFallback className="rounded-md"></AvatarFallback>
-                              </Avatar>
-                              <div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
-                                <Pencil
-                                  size={16}
-                                  className="absolute right-1 bottom-1 opacity-50 hidden group-hover:block"
-                                />
-                              </div>
-                            </div>
-                          )}
+      {/* Main Content */}
+      <div className="max-w-3xl space-y-11 w-3/4">
+        {/* Name */}
+        <div className="flex items-start gap-4">
+          <label className="w-[190px] text-sm font-medium">
+            {t('username')}
+          </label>
+          <div className="flex-1 flex items-center gap-4 min-w-60">
+            <div className="text-sm text-text-primary border border-border-button flex-1 rounded-md py-1.5 px-2">
+              {profile.userName}
+            </div>
+            <Button
+              variant={'secondary'}
+              type="button"
+              onClick={() => handleEditClick(EditType.editName)}
+              className="text-sm text-text-secondary flex gap-1 px-1"
+            >
+              <PenLine size={12} /> Edit
+            </Button>
+          </div>
+        </div>
+
+        {/* Avatar */}
+        <div className="flex items-start gap-4">
+          <label className="w-[190px] text-sm font-medium">{t('avatar')}</label>
+          <div className="flex items-center gap-4">
+            <AvatarUpload
+              value={profile.avatar}
+              onChange={handleAvatarUpload}
+              tips={'This will be displayed on your profile.'}
+            />
+          </div>
+        </div>
+
+        {/* Time Zone */}
+        <div className="flex items-start gap-4">
+          <label className="w-[190px] text-sm font-medium">
+            {t('timezone')}
+          </label>
+          <div className="flex-1 flex items-center gap-4">
+            <div className="text-sm text-text-primary border border-border-button flex-1 rounded-md py-1.5 px-2">
+              {profile.timeZone}
+            </div>
+            <Button
+              variant={'secondary'}
+              type="button"
+              onClick={() => handleEditClick(EditType.editTimeZone)}
+              className="text-sm text-text-secondary flex gap-1 px-1"
+            >
+              <PenLine size={12} /> Edit
+            </Button>
+          </div>
+        </div>
+
+        {/* Email Address */}
+        <div className="flex items-start gap-4">
+          <label className="w-[190px] text-sm font-medium"> {t('email')}</label>
+          <div className="flex-1 flex flex-col items-start gap-2">
+            <div className="text-sm text-text-primary flex-1 rounded-md py-1.5 ">
+              {profile.email}
+            </div>
+            <span className="text-text-secondary text-xs">
+              {t('emailDescription')}
+            </span>
+          </div>
+        </div>
+
+        {/* Password */}
+        <div className="flex items-start gap-4">
+          <label className="w-[190px] text-sm font-medium">
+            {t('password')}
+          </label>
+          <div className="flex-1 flex items-center gap-4">
+            <div className="text-sm text-text-primary border border-border-button flex-1 rounded-md py-1.5 px-2">
+              {profile.currPasswd ? '********' : ''}
+            </div>
+            <Button
+              variant={'secondary'}
+              type="button"
+              onClick={() => handleEditClick(EditType.editPassword)}
+              className="text-sm text-text-secondary flex gap-1 px-1"
+            >
+              <PenLine size={12} /> Edit
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {editType && (
+        <Modal
+          title={modalTitle[editType]}
+          open={isEditing}
+          showfooter={false}
+          onOpenChange={(open) => {
+            if (!open) {
+              handleCancel();
+            }
+          }}
+          className="!w-[480px]"
+        >
+          {/* <ModalContent /> */}
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit((data) => handleSave(data as any))}
+              className="flex flex-col mt-6 mb-8 ml-2 space-y-6 "
+            >
+              {editType === EditType.editName && (
+                <FormField
+                  control={form.control}
+                  name="userName"
+                  render={({ field }) => (
+                    <FormItem className=" items-center space-y-0 ">
+                      <div className="flex flex-col w-full gap-2">
+                        <FormLabel className="text-sm text-text-secondary whitespace-nowrap">
+                          {t('username')}
+                        </FormLabel>
+                        <FormControl className="w-full">
                           <Input
                             placeholder=""
                             {...field}
-                            type="file"
-                            title=""
-                            accept="image/*"
-                            className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
-                            onChange={(ev) => {
-                              const file = ev.target?.files?.[0];
-                              if (
-                                /\.(jpg|jpeg|png|webp|bmp)$/i.test(
-                                  file?.name ?? '',
-                                )
-                              ) {
-                                setAvatarFile(file!);
-                              }
-                              ev.target.value = '';
-                            }}
+                            className="bg-bg-input border-border-default"
                           />
-                        </div>
-                        <div className="margin-1 text-muted-foreground">
-                          {t('avatarTip')}
-                        </div>
+                        </FormControl>
                       </div>
-                    </FormControl>
-                  </div>
-                  <div className="flex w-[640px] pt-1">
-                    <div className="w-1/4"></div>
-                    <FormMessage />
-                  </div>
-                </FormItem>
+                      <div className="flex w-full pt-1">
+                        <div className="w-1/4"></div>
+                        <FormMessage />
+                      </div>
+                    </FormItem>
+                  )}
+                />
               )}
-            />
 
-            {/* Time Zone Field */}
-            <FormField
-              control={form.control}
-              name="timeZone"
-              render={({ field }) => (
-                <FormItem className="items-center space-y-0">
-                  <div className="flex w-[640px]">
-                    <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
-                      <span className="text-red-600">*</span>
-                      {t('timezone')}
-                    </FormLabel>
-                    <Select onValueChange={field.onChange} value={field.value}>
-                      <FormControl className="w-3/4">
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a timeZone" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {TimezoneList.map((timeStr) => (
-                          <SelectItem key={timeStr} value={timeStr}>
-                            {timeStr}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="flex w-[640px] pt-1">
-                    <div className="w-1/4"></div>
-                    <FormMessage />
-                  </div>
-                </FormItem>
-              )}
-            />
-
-            {/* Email Address Field */}
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <div>
-                  <FormItem className="items-center space-y-0">
-                    <div className="flex w-[640px]">
-                      <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
-                        {t('email')}
-                      </FormLabel>
-                      <FormControl className="w-3/4">
-                        <>{field.value}</>
-                      </FormControl>
-                    </div>
-                    <div className="flex w-[640px] pt-1">
-                      <div className="w-1/4"></div>
-                      <FormMessage />
-                    </div>
-                  </FormItem>
-                  <div className="flex w-[640px] pt-1">
-                    <p className="w-1/4">&nbsp;</p>
-                    <p className="text-sm text-muted-foreground whitespace-nowrap w-3/4">
-                      {t('emailDescription')}
-                    </p>
-                  </div>
-                </div>
-              )}
-            />
-
-            {/* Password Section */}
-            <div className="pb-6">
-              <div className="flex items-center justify-start">
-                <h1 className="text-3xl font-bold">{t('password')}</h1>
-                <Button
-                  type="button"
-                  className="bg-transparent hover:bg-transparent border text-muted-foreground hover:text-white ml-10"
-                  onClick={() => {
-                    setShowPasswordForm(!showPasswordForm);
-                  }}
-                >
-                  {t('changePassword')}
-                </Button>
-              </div>
-              <div className="text-sm text-muted-foreground">
-                {t('passwordDescription')}
-              </div>
-            </div>
-            {/* Password Form */}
-            {showPasswordForm && (
-              <>
+              {editType === EditType.editTimeZone && (
                 <FormField
                   control={form.control}
-                  name="currPasswd"
+                  name="timeZone"
                   render={({ field }) => (
                     <FormItem className="items-center space-y-0">
-                      <div className="flex w-[640px]">
-                        <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
-                          <span className="text-red-600">*</span>
-                          {t('currentPassword')}
+                      <div className="flex flex-col w-full gap-2">
+                        <FormLabel className="text-sm text-text-secondary whitespace-nowrap">
+                          {t('timezone')}
                         </FormLabel>
-                        <FormControl className="w-3/5">
-                          <PasswordInput {...field} />
-                        </FormControl>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <FormControl className="w-full bg-bg-input border-border-default">
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select a timeZone" />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {TimezoneList.map((timeStr) => (
+                              <SelectItem key={timeStr} value={timeStr}>
+                                {timeStr}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </div>
-                      <div className="flex w-[640px] pt-1">
-                        <div className="min-w-[170px] max-w-[170px]"></div>
+                      <div className="flex w-full pt-1">
+                        <div className="w-1/4"></div>
                         <FormMessage />
                       </div>
                     </FormItem>
                   )}
                 />
-                <FormField
-                  control={form.control}
-                  name="newPasswd"
-                  render={({ field }) => (
-                    <FormItem className=" items-center space-y-0">
-                      <div className="flex w-[640px]">
-                        <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
-                          <span className="text-red-600">*</span>
-                          {t('newPassword')}
-                        </FormLabel>
-                        <FormControl className="w-3/5">
-                          <PasswordInput {...field} />
-                        </FormControl>
-                      </div>
-                      <div className="flex w-[640px] pt-1">
-                        <div className="min-w-[170px] max-w-[170px]"></div>
-                        <FormMessage />
-                      </div>
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="confirmPasswd"
-                  render={({ field }) => (
-                    <FormItem className=" items-center space-y-0">
-                      <div className="flex w-[640px]">
-                        <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
-                          <span className="text-red-600">*</span>
-                          {t('confirmPassword')}
-                        </FormLabel>
-                        <FormControl className="w-3/5">
-                          <PasswordInput
-                            {...field}
-                            onBlur={() => {
-                              form.trigger('confirmPasswd');
-                            }}
-                            onChange={(ev) => {
-                              form.setValue(
-                                'confirmPasswd',
-                                ev.target.value.trim(),
-                              );
-                            }}
-                          />
-                        </FormControl>
-                      </div>
-                      <div className="flex w-[640px] pt-1">
-                        <div className="min-w-[170px] max-w-[170px]">
-                          &nbsp;
+              )}
+
+              {editType === EditType.editPassword && (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="currPasswd"
+                    render={({ field }) => (
+                      <FormItem className="items-center space-y-0">
+                        <div className="flex flex-col w-full gap-2">
+                          <FormLabel
+                            required
+                            className="text-sm flex justify-between text-text-secondary whitespace-nowrap"
+                          >
+                            {t('currentPassword')}
+                          </FormLabel>
+                          <FormControl className="w-full">
+                            <PasswordInput
+                              {...field}
+                              autoComplete="current-password"
+                              className="bg-bg-input border-border-default"
+                            />
+                          </FormControl>
                         </div>
-                        <FormMessage />
-                      </div>
-                    </FormItem>
-                  )}
-                />
-              </>
-            )}
-            <div className="w-[640px] text-right space-x-4">
-              <Button type="reset" variant="secondary">
-                {t('cancel')}
-              </Button>
-              <Button type="submit" disabled={submitLoading}>
-                {submitLoading && <Loader2Icon className="animate-spin" />}
-                {t('save', { keyPrefix: 'common' })}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </div>
-    </section>
+                        <div className="flex w-full pt-1">
+                          <FormMessage />
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="newPasswd"
+                    render={({ field }) => (
+                      <FormItem className=" items-center space-y-0">
+                        <div className="flex flex-col w-full gap-2">
+                          <FormLabel
+                            required
+                            className="text-sm text-text-secondary whitespace-nowrap"
+                          >
+                            {t('newPassword')}
+                          </FormLabel>
+                          <FormControl className="w-full">
+                            <PasswordInput
+                              {...field}
+                              autoComplete="new-password"
+                              className="bg-bg-input border-border-default"
+                            />
+                          </FormControl>
+                        </div>
+                        <div className="flex w-full pt-1">
+                          <FormMessage />
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="confirmPasswd"
+                    render={({ field }) => (
+                      <FormItem className=" items-center space-y-0">
+                        <div className="flex flex-col w-full gap-2">
+                          <FormLabel
+                            required
+                            className="text-sm text-text-secondary whitespace-nowrap"
+                          >
+                            {t('confirmPassword')}
+                          </FormLabel>
+                          <FormControl className="w-full">
+                            <PasswordInput
+                              {...field}
+                              className="bg-bg-input border-border-default"
+                              autoComplete="new-password"
+                              onBlur={() => {
+                                form.trigger('confirmPasswd');
+                              }}
+                              onChange={(ev) => {
+                                form.setValue(
+                                  'confirmPasswd',
+                                  ev.target.value.trim(),
+                                );
+                              }}
+                            />
+                          </FormControl>
+                        </div>
+                        <div className="flex w-full pt-1">
+                          <FormMessage />
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </>
+              )}
+
+              <div className="w-full text-right space-x-4 !mt-11">
+                <Button type="reset" variant="secondary">
+                  {t('cancel')}
+                </Button>
+                <Button type="submit" disabled={submitLoading}>
+                  {submitLoading && <Loader2Icon className="animate-spin" />}
+                  {t('save', { keyPrefix: 'common' })}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </Modal>
+      )}
+    </div>
   );
-}
+};
+
+export default ProfilePage;

web/tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
       center: true,
       padding: '2rem',
       screens: {
-        '2xl': '1400px',
+        '2xl': '1536px',
       },
     },
     screens: {
@@ -22,7 +22,7 @@ module.exports = {
       md: '768px',
       lg: '1024px',
       xl: '1280px',
-      '2xl': '1400px',
+      '2xl': '1536px',
       '3xl': '1780px',
       '4xl': '1980px',
     },