Feat: Render MessageForm with shadcn-ui. #3221 (#5596)

### What problem does this PR solve?

Feat: Render MessageForm with shadcn-ui. #3221

### Type of change


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

web/src/layouts/components/right-toolbar/index.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '@/components/theme-provider';
 import { LanguageList, LanguageMap } from '@/constants/common';
 import { useChangeLanguage } from '@/hooks/logic-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { MoonIcon, SunIcon } from 'lucide-react';
+import { CircleHelp, MoonIcon, SunIcon } from 'lucide-react';
 import styled from './index.less';
 
 const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
@@ -24,6 +24,10 @@ const handleGithubCLick = () => {
   window.open('https://github.com/infiniflow/ragflow', 'target');
 };
 
+const handleDocHelpCLick = () => {
+  window.open('https://ragflow.io/docs/dev/category/guides', 'target');
+};
+
 const RightToolBar = () => {
   const { t } = useTranslate('common');
   const changeLanguage = useChangeLanguage();
@@ -63,6 +67,9 @@ const RightToolBar = () => {
         <Circle>
           <GithubOutlined onClick={handleGithubCLick} />
         </Circle>
+        <Circle>
+          <CircleHelp className="size-4" onClick={handleDocHelpCLick} />
+        </Circle>
         <Circle>
           {theme === 'dark' ? (
             <MoonIcon onClick={onMoonClick} size={20} />