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 {
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
-  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>

web/src/pages/agent/log-sheet/workflow-timeline.tsx

@@ -1,4 +1,4 @@
-import HightLightMarkdown from '@/components/highlight-markdown';
+import HighLightMarkdown from '@/components/highlight-markdown';
 import {
   Timeline,
   TimelineContent,
@@ -327,9 +327,9 @@ export const WorkFlowTimeline = ({
                         <AccordionContent>
                           <div className="space-y-2">
                             <div className="w-full h-[200px] break-words overflow-auto scrollbar-auto p-2 bg-muted">
-                              <HightLightMarkdown>
+                              <HighLightMarkdown>
                                 {x.data.thoughts || ''}
-                              </HightLightMarkdown>
+                              </HighLightMarkdown>
                             </div>
                           </div>
                         </AccordionContent>

web/src/pages/memory/memory-message/index.tsx

@@ -43,9 +43,6 @@ export default function MemoryMessage() {
         // setRowSelection={setRowSelection}
         // loading={loading}
       ></MemoryTable>
-      <div className="flex items-center gap-2">
-        <div className="h-4 w-4 rounded-full bg-text ">message</div>
-      </div>
     </div>
   );
 }

web/src/pages/memory/memory-message/message-table.tsx

@@ -122,7 +122,7 @@ export function MemoryTable({
           cellClassName: 'w-12',
         },
         cell: () => (
-          <div className=" hidden group-hover:flex">
+          <div className=" flex opacity-0 group-hover:opacity-100">
             <Button variant={'ghost'} className="bg-transparent">
               <TextSelect />
             </Button>

web/src/pages/next-search/embed-app-modal.tsx

@@ -1,4 +1,4 @@
-import HightLightMarkdown from '@/components/highlight-markdown';
+import HighLightMarkdown from '@/components/highlight-markdown';
 import message from '@/components/ui/message';
 import { Modal } from '@/components/ui/modal/modal';
 import { RAGFlowSelect } from '@/components/ui/select';
@@ -102,7 +102,7 @@ const EmbedAppModal = (props: IEmbedAppModalProps) => {
           </label>
           {/* <div className=" border rounded-lg"> */}
           {/* <pre className="text-sm whitespace-pre-wrap">{text}</pre> */}
-          <HightLightMarkdown>{text}</HightLightMarkdown>
+          <HighLightMarkdown>{text}</HighLightMarkdown>
           {/* </div> */}
         </div>
 

web/src/pages/next-search/highlight-markdown/index.tsx

@@ -1,48 +0,0 @@
-import Markdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import rehypeKatex from 'rehype-katex';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
-
-import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
-
-import { preprocessLaTeX } from '@/utils/chat';
-
-const HightLightMarkdown = ({
-  children,
-}: {
-  children: string | null | undefined;
-}) => {
-  return (
-    <Markdown
-      remarkPlugins={[remarkGfm, remarkMath]}
-      rehypePlugins={[rehypeRaw, rehypeKatex]}
-      className="text-text-primary text-sm"
-      components={
-        {
-          code(props: any) {
-            const { children, className, ...rest } = props;
-            const match = /language-(\w+)/.exec(className || '');
-            return match ? (
-              <SyntaxHighlighter {...rest} PreTag="div" language={match[1]}>
-                {String(children).replace(/\n$/, '')}
-              </SyntaxHighlighter>
-            ) : (
-              <code
-                {...rest}
-                className={`${className} pt-1 px-2 pb-2 m-0 whitespace-break-spaces rounded text-text-primary text-sm`}
-              >
-                {children}
-              </code>
-            );
-          },
-        } as any
-      }
-    >
-      {children ? preprocessLaTeX(children) : children}
-    </Markdown>
-  );
-};
-
-export default HightLightMarkdown;

web/src/pages/next-search/search-view.tsx

@@ -1,5 +1,6 @@
 import { EmptyType } from '@/components/empty/constant';
 import Empty from '@/components/empty/empty';
+import HighLightMarkdown from '@/components/highlight-markdown';
 import { FileIcon } from '@/components/icon-font';
 import { ImageWithPopover } from '@/components/image';
 import { Input } from '@/components/originui/input';
@@ -20,7 +21,6 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ISearchAppDetailProps } from '../next-searches/hooks';
 import PdfDrawer from './document-preview-modal';
-import HightLightMarkdown from './highlight-markdown';
 import { ISearchReturnProps } from './hooks';
 import './index.less';
 import MarkdownContent from './markdown-content';
@@ -217,9 +217,9 @@ export default function SearchingView({
                               </PopoverTrigger>
                               <PopoverContent className="text-text-primary !w-full max-w-lg ">
                                 <div className="max-h-96 overflow-auto scrollbar-thin">
-                                  <HightLightMarkdown>
+                                  <HighLightMarkdown>
                                     {chunk.content_with_weight}
-                                  </HightLightMarkdown>
+                                  </HighLightMarkdown>
                                 </div>
                               </PopoverContent>
                             </Popover>

web/src/pages/next-searches/hooks.ts

@@ -4,7 +4,7 @@ import message from '@/components/ui/message';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useHandleSearchChange } from '@/hooks/logic-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import searchService from '@/services/search-service';
+import searchService, { searchServiceNext } from '@/services/search-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
 import { useCallback, useState } from 'react';
@@ -103,7 +103,7 @@ export const useFetchSearchList = () => {
       },
     ],
     queryFn: async () => {
-      const { data: response } = await searchService.getSearchList(
+      const { data: response } = await searchServiceNext.getSearchList(
         {
           params: {
             keywords: debouncedSearchString,

web/src/services/search-service.ts

@@ -1,5 +1,6 @@
 import api from '@/utils/api';
-import { registerNextServer } from '@/utils/register-server';
+import registerServer, { registerNextServer } from '@/utils/register-server';
+import request from '@/utils/request';
 
 const {
   createSearch,
@@ -48,6 +49,8 @@ const methods = {
     method: 'get',
   },
 } as const;
-const searchService = registerNextServer<keyof typeof methods>(methods);
+const searchService = registerServer<keyof typeof methods>(methods, request);
+export const searchServiceNext =
+  registerNextServer<keyof typeof methods>(methods);
 
 export default searchService;