Fix: Changed 'HightLightMarkdown' to 'HighLightMarkdown' (#11803)

### What problem does this PR solve?

Fix: Changed 'HightLightMarkdown' to 'HighLightMarkdown', and replaced
the private component with a public component.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/api-service/embed-modal/index.tsx

@@ -1,5 +1,5 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
-import HightLightMarkdown from '@/components/highlight-markdown';
+import HighLightMarkdown from '@/components/highlight-markdown';
 import { SharedFrom } from '@/constants/chat';
 import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
@@ -111,7 +111,7 @@ const EmbedModal = ({
               />
             </Form.Item>
           </div>
-          <HightLightMarkdown>{text}</HightLightMarkdown>
+          <HighLightMarkdown>{text}</HighLightMarkdown>
         </Card>
       ),
     },

web/src/components/embed-dialog/index.tsx

@@ -1,5 +1,5 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
-import HightLightMarkdown from '@/components/highlight-markdown';
+import HighLightMarkdown from '@/components/highlight-markdown';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import {
   Dialog,
@@ -277,7 +277,7 @@ function EmbedDialog({
           <div className="max-h-[350px] overflow-auto">
             <span>{t('embedCode', { keyPrefix: 'search' })}</span>
             <div className="max-h-full overflow-y-auto">
-              <HightLightMarkdown>{text}</HightLightMarkdown>
+              <HighLightMarkdown>{text}</HighLightMarkdown>
             </div>
           </div>
           <div className=" font-medium mt-4 mb-1">

web/src/components/highlight-markdown/index.tsx

@@ -16,7 +16,7 @@ import { preprocessLaTeX } from '@/utils/chat';
 import { useIsDarkTheme } from '../theme-provider';
 import styles from './index.less';
 
-const HightLightMarkdown = ({
+const HighLightMarkdown = ({
   children,
 }: {
   children: string | null | undefined;
@@ -56,4 +56,4 @@ const HightLightMarkdown = ({
   );
 };
 
-export default HightLightMarkdown;
+export default HighLightMarkdown;

web/src/components/hooks/use-toast.tsx

@@ -3,10 +3,7 @@
 // Inspired by react-hot-toast library
 import * as React from 'react';
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from '@/components/ui/toast';
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;

web/src/components/prompt-dialog.tsx

@@ -1,6 +1,6 @@
 import { IModalProps } from '@/interfaces/common';
 import { IFeedbackRequestBody } from '@/interfaces/request/chat';
-import HightLightMarkdown from './highlight-markdown';
+import HighLightMarkdown from './highlight-markdown';
 import SvgIcon from './svg-icon';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
 
@@ -25,7 +25,7 @@ export function PromptDialog({
           </DialogTitle>
         </DialogHeader>
         <section className="max-h-[80vh] overflow-auto">
-          <HightLightMarkdown>{prompt}</HightLightMarkdown>
+          <HighLightMarkdown>{prompt}</HighLightMarkdown>
         </section>
       </DialogContent>
     </Dialog>