Only import highlight js when needed; decrease build size

- while waiting for load, make sure the information is still shown
- Highlight js should use a color scheme thats universal

src/App.tsx

@@ -16,8 +16,6 @@ import Warning from './icons/Warning'
 import Bars3 from './icons/Bars3'
 import CloudDown from './icons/CloudDown'
 
-import 'highlight.js/styles/github.css'
-
 const Navbar = observer(() => {
   const noServer = !settingStore.selectedModel
 

src/components/CustomCodeBlock.tsx

@@ -4,6 +4,8 @@ import Copy from '../icons/Copy'
 
 import hljs from 'highlight.js/lib/common'
 
+import 'highlight.js/styles/base16/woodland.min.css'
+
 const CustomCodeBlock = (props: React.HTMLAttributes<HTMLElement>) => {
   const { children, className = '', ...rest } = props
 

src/components/Message.tsx

@@ -1,3 +1,4 @@
+import React, { Suspense } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { PropsWithChildren, useState } from 'react'
@@ -13,7 +14,15 @@ import ChevronDown from '../icons/ChevronDown'
 import { IMessageModel } from '../models/ChatModel'
 import { chatStore } from '../models/ChatStore'
 
-import CustomCodeBlock from './CustomCodeBlock'
+const CustomCodeBlock = React.lazy(() => import('./CustomCodeBlock'))
+
+const DelayedCustomCodeBlock = (props: PropsWithChildren) => {
+  return (
+    <Suspense fallback={<code {...props} className="not-prose bg-transparent" />}>
+      <CustomCodeBlock {...props} />
+    </Suspense>
+  )
+}
 
 const Loading = () => (
   <span className="indicator-item loading loading-dots loading-sm indicator-start ml-8" />
@@ -96,7 +105,7 @@ export const Message = ({
             remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
             className="prose inline-table w-full"
             components={{
-              code: CustomCodeBlock,
+              code: DelayedCustomCodeBlock,
             }}
           >
             {content}