♻️ refactor: fix Highlighter style and add selection style

src/Avatar/index.tsx

@@ -30,9 +30,10 @@ export interface AvatarProps extends AntAvatarProps {
 
 const Avatar = memo<AvatarProps>(
   ({ className, avatar, title, size = 40, shape = 'circle', background, ...props }) => {
-    const isImage = avatar && ['/', 'http', 'data:'].some((i) => avatar.startsWith(i));
-    const isEmoji =
-      avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar);
+    const isImage = Boolean(avatar && ['/', 'http', 'data:'].some((i) => avatar.startsWith(i)));
+    const isEmoji = Boolean(
+      avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar),
+    );
 
     const { styles, cx } = useStyles({ background, size, isEmoji });
 

src/Avatar/style.ts

@@ -4,7 +4,7 @@ import { readableColor } from 'polished';
 export const useStyles = createStyles(
   (
     { css, token },
-    { background, size, isEmoji }: { background?: string; isEmoji: boolean; size: number },
+    { background, size, isEmoji }: { background?: string; isEmoji?: boolean; size: number },
   ) => {
     const backgroundColor = background ?? token.colorBgContainer;
     const color = readableColor(backgroundColor);

src/ChatItem/style.ts

@@ -24,10 +24,6 @@ export const useStyles = createStyles(
       background-color: ${primary ? token.colorFillSecondary : token.colorFillTertiary};
       border-radius: ${token.borderRadiusLG}px;
       transition: background-color 100ms ${token.motionEaseOut};
-
-      &:active {
-        background-color: ${primary ? token.colorFill : token.colorFillSecondary};
-      }
     `;
 
     const pureStylish = css`
@@ -41,10 +37,6 @@ export const useStyles = createStyles(
       &:hover {
         background-color: ${token.colorFillTertiary};
       }
-
-      &:active {
-        background-color: ${token.colorFillSecondary};
-      }
     `;
 
     const typeStylish = type === 'block' ? blockStylish : pureStylish;

src/Highlighter/index.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 
+import { CopyButton, Spotlight } from '@/index';
 import { DivProps } from '@/types';
 
-import CopyButton from '../CopyButton';
 import SyntaxHighlighter, { type SyntaxHighlighterProps } from './SyntaxHighlighter';
 import { useStyles } from './style';
 
@@ -27,6 +27,11 @@ export interface HighlighterProps extends DivProps {
    * @default true
    */
   showLanguage?: boolean;
+  /**
+   * @description Whether add spotlight background
+   * @default false
+   */
+  spotlight?: boolean;
   /**
    * @description The theme of the code block
    * @default 'light'
@@ -49,12 +54,15 @@ export const Highlighter = memo<HighlighterProps>(
     copyable = true,
     showLanguage = true,
     type = 'block',
+    spotlight,
+    ...props
   }) => {
     const { styles, cx } = useStyles(type);
     const container = cx(styles.container, className);
 
     return (
-      <div className={container} data-code-type="highlighter" style={style}>
+      <div className={container} data-code-type="highlighter" style={style} {...props}>
+        {spotlight && <Spotlight size={240} />}
         {copyable && <CopyButton className={styles.button} content={children} placement="left" />}
         {showLanguage && language && <div className={styles.lang}>{language.toLowerCase()}</div>}
         <SyntaxHighlighter language={language?.toLowerCase()} theme={theme}>

src/Highlighter/style.ts

@@ -11,14 +11,14 @@ export const useStyles = createStyles(
       border: 1px solid ${type === 'block' ? 'transparent' : token.colorBorder};
 
       &:hover {
-        background-color: ${type === 'pure' ? 'transparent' : token.colorFillTertiary};
+        background-color: ${type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary};
       }
     `;
 
     return {
       container: cx(
         prefix,
-        typeStylish,
+        type !== 'pure' && typeStylish,
         css`
           position: relative;
           overflow: auto;
@@ -56,8 +56,8 @@ export const useStyles = createStyles(
         css`
           position: absolute;
           z-index: 51;
-          top: 8px;
-          right: 8px;
+          top: ${type === 'pure' ? 0 : '8px'};
+          right: ${type === 'pure' ? 0 : '8px'};
 
           opacity: 0;
         `,

src/Markdown/CodeBlock.tsx

@@ -27,6 +27,7 @@ const Code = memo((props: any) => {
     <Highlighter
       className={styles}
       language={className?.replace('language-', '') || 'markdown'}
+      spotlight
       theme={theme.appearance as any}
       type="block"
     >

src/Spotlight/style.ts

@@ -7,7 +7,7 @@ export const useStyles = createStyles(
   ) => {
     const spotlightX = (offset?.x ?? 0) + 'px';
     const spotlightY = (offset?.y ?? 0) + 'px';
-    const spotlightOpacity = outside ? '0' : isDarkMode ? '.1' : '0.07';
+    const spotlightOpacity = outside ? '0' : '.1';
     const spotlightSize = size + 'px';
     return css`
       pointer-events: none;
@@ -19,8 +19,8 @@ export const useStyles = createStyles(
       opacity: ${spotlightOpacity};
       background: radial-gradient(
         ${spotlightSize} circle at ${spotlightX} ${spotlightY},
-        ${token.colorText},
-        transparent
+        ${isDarkMode ? token.colorText : '#fff'},
+        ${!isDarkMode ? token.colorTextQuaternary : 'transparent'}
       );
       border-radius: inherit;
 

src/ThemeProvider/GlobalStyle.ts

@@ -28,13 +28,18 @@ const GlobalStyle = createGlobalStyle`
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: transparent;
   }
-  
+
 
   * {
 	  box-sizing: border-box;
 	  vertical-align: baseline;
   }
 
+  ::selection {
+    color: #000;
+    background: ${({ theme }) => theme.yellow9};
+  }
+
   ::-webkit-scrollbar {
 	  width: 0;
 	  height: 4px;
@@ -59,7 +64,7 @@ const GlobalStyle = createGlobalStyle`
     text-align: justify;
     word-wrap: break-word;
   }
-  
+
   code {
 	  font-family: ${({ theme }) => theme.fontFamilyCode} !important;
 

src/styles/algorithms/generateCustomStylish.ts

@@ -69,6 +69,7 @@ export const generateCustomStylish: GetCustomStylish<LobeCustomStylish> = ({
       }
 
       pre {
+        border: none;
         border-radius: ${token.borderRadius}px;
       }