update: split into two constant arrays

Author: liangfung

ee/tabby-ui/components/markdown.tsx

@@ -1,12 +1,19 @@
 import { ElementType, FC, memo } from 'react'
 import ReactMarkdown, { Components, Options } from 'react-markdown'
 
-import { MARKDOWN_CUSTOM_TAGS } from '@/lib/constants'
+import {
+  CUSTOM_HTML_BLOCK_TAGS,
+  CUSTOM_HTML_INLINE_TAGS
+} from '@/lib/constants'
+
+type CustomTag =
+  | (typeof CUSTOM_HTML_BLOCK_TAGS)[number]
+  | (typeof CUSTOM_HTML_INLINE_TAGS)[number]
 
 type ExtendedOptions = Omit<Options, 'components'> & {
   components: Components & {
     // for custom html tags rendering
-    [Tag in (typeof MARKDOWN_CUSTOM_TAGS)[number]]?: ElementType
+    [Tag in CustomTag]?: ElementType
   }
 }
 

ee/tabby-ui/components/message-markdown/custom-strip-tags-plugin.ts

@@ -1,24 +1,28 @@
-import { MARKDOWN_CUSTOM_TAGS } from '@/lib/constants'
 import type { Root } from 'hast'
 import type { Raw } from 'react-markdown/lib/ast-to-react'
 import { visit } from 'unist-util-visit'
 
+function createTagFilterExpression(tagNames: string[]): RegExp {
+  const escapedTags = tagNames
+    .map(tag => tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|')
+  return new RegExp(
+    `<(/?)(?!/?(${escapedTags}))([^>]*)(?=[\\t\\n\\f\\r />])`,
+    'gi'
+  )
+}
+
 /**
- * Escape HTML tags that are not in MARKDOWN_CUSTOM_TAGS
+ * Escape HTML tags that are not in tagNames
  */
-// const tagFilterExpression = /<(\/?)(?!\/?(think))([^>]*)(?=[\t\n\f\r />])/gi
-const tagFilterExpression = createTagFilterExpression(MARKDOWN_CUSTOM_TAGS)
+export function customStripTagsPlugin({ tagNames }: { tagNames: string[] }) {
+  // const tagFilterExpression = /<(\/?)(?!\/?(think))([^>]*)(?=[\t\n\f\r />])/gi
+  const tagFilterExpression = createTagFilterExpression(tagNames)
 
-function createTagFilterExpression(tagNames: typeof MARKDOWN_CUSTOM_TAGS): RegExp {
-  const escapedTags = tagNames.map(tag => tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')
-  return new RegExp(`<(/?)(?!/?(${escapedTags}))([^>]*)(?=[\\t\\n\\f\\r />])`, 'gi')
-}
-
-export function customStripTagsPlugin() {
   return function (tree: Root) {
     visit(tree, 'raw', (node: Raw) => {
       node.value = node.value.replace(tagFilterExpression, '&lt;$2$3')
     })
     return tree
   }
-}
+}

ee/tabby-ui/components/message-markdown/index.tsx

@@ -1,5 +1,5 @@
 import { Fragment, ReactNode, useContext, useMemo, useState } from 'react'
-import { compact, isNil } from 'lodash-es'
+import { compact, flatten, isNil } from 'lodash-es'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'
 import remarkGfm from 'remark-gfm'
@@ -21,7 +21,7 @@ import {
   convertFromFilepath,
   convertToFilepath,
   encodeMentionPlaceHolder,
-  formatMarkdownCustomTags,
+  formatCustomHTMLBlockTags,
   getRangeFromAttachmentCode,
   resolveFileNameForDisplay
 } from '@/lib/utils'
@@ -43,7 +43,10 @@ import {
   SymbolInfo
 } from 'tabby-chat-panel/index'
 
-import { MARKDOWN_CUSTOM_TAGS } from '@/lib/constants'
+import {
+  CUSTOM_HTML_BLOCK_TAGS,
+  CUSTOM_HTML_INLINE_TAGS
+} from '@/lib/constants'
 import {
   MARKDOWN_CITATION_REGEX,
   MARKDOWN_COMMAND_REGEX,
@@ -277,8 +280,11 @@ export function MessageMarkdown({
   }
 
   const encodedMessage = useMemo(() => {
-    const formatedMessage = formatMarkdownCustomTags(message)
-    return encodeMentionPlaceHolder(formatedMessage)
+    const formattedMessage = formatCustomHTMLBlockTags(
+      message,
+      CUSTOM_HTML_BLOCK_TAGS as unknown as string[]
+    )
+    return encodeMentionPlaceHolder(formattedMessage)
   }, [message])
 
   return (
@@ -310,16 +316,25 @@ export function MessageMarkdown({
         )}
         remarkPlugins={[remarkGfm, remarkMath]}
         rehypePlugins={[
-          customStripTagsPlugin,
+          [
+            customStripTagsPlugin,
+            {
+              tagNames: flatten([
+                CUSTOM_HTML_BLOCK_TAGS,
+                CUSTOM_HTML_INLINE_TAGS
+              ])
+            }
+          ],
           rehypeRaw,
           [
             rehypeSanitize,
             {
               ...defaultSchema,
-              tagNames: [
-                ...(defaultSchema.tagNames ?? []),
-                ...MARKDOWN_CUSTOM_TAGS
-              ]
+              tagNames: flatten([
+                defaultSchema.tagNames,
+                CUSTOM_HTML_BLOCK_TAGS,
+                CUSTOM_HTML_INLINE_TAGS
+              ])
             }
           ]
         ]}

ee/tabby-ui/lib/constants/index.ts

@@ -14,4 +14,5 @@ export const ERROR_CODE_NOT_FOUND = 'NOT_FOUND'
 
 export const NEWLINE_CHARACTER = '\n'
 
-export const MARKDOWN_CUSTOM_TAGS = ['think'] as const
+export const CUSTOM_HTML_BLOCK_TAGS = ['think'] as const
+export const CUSTOM_HTML_INLINE_TAGS = [] as const

ee/tabby-ui/lib/utils/chat.ts

@@ -9,7 +9,6 @@ import {
 } from '@/lib/gql/generates/graphql'
 import type { MentionAttributes } from '@/lib/types'
 
-import { MARKDOWN_CUSTOM_TAGS } from '../constants'
 import {
   MARKDOWN_FILE_REGEX,
   MARKDOWN_SOURCE_REGEX,
@@ -308,10 +307,13 @@ export function getTitleFromMessages(
  * @param inputString
  * @returns formatted markdown string
  */
-export function formatMarkdownCustomTags(inputString: string): string {
-  const tagPattern = MARKDOWN_CUSTOM_TAGS.map(tag =>
-    tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  ).join('|')
+export function formatCustomHTMLBlockTags(
+  inputString: string,
+  tagNames: string[]
+): string {
+  const tagPattern = tagNames
+    .map(tag => tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|')
   const regex = new RegExp(`(<(${tagPattern})>.*?</\\2>)`, 'gs')
 
   // Adjust the newline characters for matched closing tags