improve usability

frontend/src/pages/Home.tsx

@@ -37,7 +37,7 @@ const clientNavCards: NavCard[] = [
   },
   {
     label: 'Configs',
-    desc: 'Manage your configs',
+    desc: 'Manage your configs, adjust the starting model and parameters',
     path: '/configs',
     icon: <DocumentSettings20Regular />
   },

frontend/src/pages/PresetsManager/MessagesEditor.tsx

@@ -3,7 +3,7 @@ import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautif
 import commonStore from '../../stores/commonStore';
 import { observer } from 'mobx-react-lite';
 import { v4 as uuid } from 'uuid';
-import { Button, Card, Dropdown, Option, Textarea } from '@fluentui/react-components';
+import { Card, Dropdown, Option, Textarea } from '@fluentui/react-components';
 import { useTranslation } from 'react-i18next';
 import { ToolTipButton } from '../../components/ToolTipButton';
 import { Delete20Regular, ReOrderDotsVertical20Regular } from '@fluentui/react-icons';
@@ -84,7 +84,10 @@ const MessagesEditor: FC = observer(() => {
 
   return (
     <div className="grid grid-cols-1 gap-2 overflow-hidden">
-      <Button style={{ width: '100%' }} onClick={createNewItem}>{t('New')}</Button>
+      <ToolTipButton text={t('New')}
+        desc={t('Create a new user or AI message content. You can prepare a chat record with AI here, and fill in the responses you want to get from AI in the tone of AI. When you use this preset, the chat record will be processed, and at this point, AI will better understand what you want it to do or what role to play.')}
+        style={{ width: '100%' }}
+        onClick={createNewItem} />
       <div className="overflow-x-hidden overflow-y-auto p-2">
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="droppable">

frontend/src/pages/PresetsManager/PresetsButton.tsx

@@ -230,6 +230,7 @@ const ChatPresetEditor: FC<{
             editingMessages ?
               <div className="flex flex-col gap-1">
                 <Labeled flex spaceBetween label={t('Insert default system prompt at the beginning')}
+                  desc={t('Inside the model, there is a default prompt to improve the model\'s handling of common issues, but it may degrade the role-playing effect. You can disable this option to achieve a better role-playing effect.')}
                   content={
                     <Switch checked={editingPreset.presystem === undefined ? true : editingPreset.presystem}
                       onChange={(e, data) => {
@@ -239,6 +240,7 @@ const ChatPresetEditor: FC<{
                       }} />
                   } />
                 <Labeled flex breakline label={t('User Name')}
+                  desc={t('The name used internally by the model when processing user message, changing this value helps improve the role-playing effect.')}
                   content={
                     <Input placeholder="User" value={editingPreset.userName} onChange={(e, data) => {
                       setEditingPreset({
@@ -247,6 +249,7 @@ const ChatPresetEditor: FC<{
                     }} />
                   } />
                 <Labeled flex breakline label={t('Assistant Name')}
+                  desc={t('The name used internally by the model when processing AI message, changing this value helps improve the role-playing effect.')}
                   content={
                     <Input placeholder="Assistant" value={editingPreset.assistantName} onChange={(e, data) => {
                       setEditingPreset({