Refactor Markdown component. (#51)

Author: blrchen

components/Chat/Chat.tsx

@@ -274,7 +274,7 @@ const Chat = (props: ChatProps, ref: any) => {
                 <FiSend className="size-4" />
               </IconButton>
             </Tooltip>
-            <Tooltip content={'Clear Message'}>
+            <Tooltip content={'Clear History'}>
               <IconButton
                 variant="soft"
                 color="gray"

components/Markdown.tsx renamed to components/Markdown/Markdown.tsx

@@ -16,6 +16,8 @@ import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
 
+import './index.scss'
+
 export interface MarkdownProps {
   className?: string
   children: string

components/Markdown/index.scss

@@ -0,0 +1,18 @@
+.prose {
+  img {
+    @apply max-w-3xl max-lg:max-w-full;
+  }
+
+  :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    position: relative;
+    background-color: rgb(30, 30, 30) !important;
+  }
+
+  :where(pre code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    @apply whitespace-pre-wrap #{!important};
+  }
+
+  :where(code[class~='highlight']) {
+    background-color: var(--accent-a5);
+  }
+}

components/Markdown/index.ts

@@ -0,0 +1 @@
+export * from './Markdown'

components/Themes/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { ThemeProviderProps } from './interface'
+import { ThemeProviderProps, UseThemeProps } from './interface'
 import { ThemeContext } from './ThemeContext'
 import ThemeScript from './ThemeScript'
 import { ColorSchemes, disableAnimation, getSystemTheme, MEDIA } from './utils'
@@ -141,14 +141,15 @@ const Theme = ({
   }, [defaultTheme, storageKey])
 
   const providerValue = useMemo(
-    () => ({
-      theme,
-      setTheme,
-      forcedTheme,
-      resolvedTheme: theme === 'system' ? resolvedTheme : theme,
-      themes: enableSystem ? [...themes, 'system'] : themes,
-      systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined
-    }),
+    () =>
+      ({
+        theme,
+        setTheme,
+        forcedTheme,
+        resolvedTheme: theme === 'system' ? resolvedTheme : theme,
+        themes: enableSystem ? [...themes, 'system'] : themes,
+        systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined
+      }) as UseThemeProps,
     [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes]
   )
 

components/Themes/interface.ts

@@ -22,7 +22,7 @@ export interface UseThemeProps {
   /**
    * If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme`
    */
-  resolvedTheme?: string | undefined
+  resolvedTheme?: 'dark' | 'light'
   /**
    * If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is
    */