♻️ refactor: refactor to use better underline style

packages/builtin-tool-web-browsing/src/client/Inspector/CrawlMultiPages/index.tsx

@@ -1,25 +1,20 @@
 'use client';
 
 import { type BuiltinInspectorProps } from '@lobechat/types';
-import { Icon } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { shinyTextStyles } from '@/styles';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
-  content: css`
-    font-family: ${cssVar.fontFamilyCode};
-  `,
   root: css`
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
 
-    color: ${cssVar.colorTextDescription};
+    color: ${cssVar.colorTextSecondary};
   `,
 }));
 
@@ -28,41 +23,35 @@ interface CrawlMultiPagesParams {
 }
 
 export const CrawlMultiPagesInspector = memo<BuiltinInspectorProps<CrawlMultiPagesParams>>(
-  ({ args, isLoading }) => {
+  ({ args, partialArgs, isArgumentsStreaming }) => {
     const { t } = useTranslation('plugin');
 
+    const urls = args?.urls || partialArgs?.urls;
+
     // Show count and first domain for context
     let displayText = '';
-    if (args?.urls && args.urls.length > 0) {
-      const count = args.urls.length;
+    if (urls && urls.length > 0) {
+      const count = urls.length;
       try {
-        const firstUrl = new URL(args.urls[0]);
+        const firstUrl = new URL(urls[0]);
         displayText = count > 1 ? `${firstUrl.hostname} +${count - 1}` : firstUrl.hostname;
       } catch {
         displayText = `${count} pages`;
       }
     }
 
-    // When loading, show "联网搜索 > 读取多个页面内容"
-    if (isLoading) {
+    if (isArgumentsStreaming && !displayText) {
       return (
         <div className={cx(styles.root, shinyTextStyles.shinyText)}>
-          <span>{t('builtins.lobe-web-browsing.title')}</span>
-          <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
           <span>{t('builtins.lobe-web-browsing.apiName.crawlMultiPages')}</span>
         </div>
       );
     }
 
     return (
-      <div className={styles.root}>
-        <span>{t('builtins.lobe-web-browsing.apiName.crawlMultiPages')}</span>
-        {displayText && (
-          <>
-            <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
-            <span className={styles.content}>{displayText}</span>
-          </>
-        )}
+      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-web-browsing.apiName.crawlMultiPages')}: </span>
+        {displayText && <span className={highlightTextStyles.gold}>{displayText}</span>}
       </div>
     );
   },

packages/builtin-tool-web-browsing/src/client/Inspector/CrawlSinglePage/index.tsx

@@ -1,25 +1,20 @@
 'use client';
 
 import type { BuiltinInspectorProps } from '@lobechat/types';
-import { Icon } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { shinyTextStyles } from '@/styles';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
-  content: css`
-    font-family: ${cssVar.fontFamilyCode};
-  `,
   root: css`
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
 
-    color: ${cssVar.colorTextDescription};
+    color: ${cssVar.colorTextSecondary};
   `,
 }));
 
@@ -28,29 +23,23 @@ interface CrawlSinglePageParams {
 }
 
 export const CrawlSinglePageInspector = memo<BuiltinInspectorProps<CrawlSinglePageParams>>(
-  ({ args, isLoading }) => {
+  ({ args, partialArgs, isArgumentsStreaming }) => {
     const { t } = useTranslation('plugin');
 
-    // When loading, show "联网搜索 > 读取页面内容"
-    if (isLoading) {
+    const url = args?.url || partialArgs?.url;
+
+    if (isArgumentsStreaming && !url) {
       return (
         <div className={cx(styles.root, shinyTextStyles.shinyText)}>
-          <span>{t('builtins.lobe-web-browsing.title')}</span>
-          <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
           <span>{t('builtins.lobe-web-browsing.apiName.crawlSinglePage')}</span>
         </div>
       );
     }
 
     return (
-      <div className={styles.root}>
-        <span>{t('builtins.lobe-web-browsing.apiName.crawlSinglePage')}</span>
-        {args.url && (
-          <>
-            <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
-            <span className={styles.content}>{args.url}</span>
-          </>
-        )}
+      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-web-browsing.apiName.crawlSinglePage')}: </span>
+        {url && <span className={highlightTextStyles.gold}>{url}</span>}
       </div>
     );
   },

packages/builtin-tool-web-browsing/src/client/Inspector/Search/index.tsx

@@ -35,7 +35,7 @@ export const SearchInspector = memo<BuiltinInspectorProps<SearchQuery>>(
     return (
       <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
         <span>{t('builtins.lobe-web-browsing.apiName.search')}: </span>
-        {query && <span className={highlightTextStyles.info}>{query}</span>}
+        {query && <span className={highlightTextStyles.gold}>{query}</span>}
       </div>
     );
   },

src/styles/text.ts

@@ -22,18 +22,22 @@ export const oneLineEllipsis = lineEllipsis(1);
 export const highlightTextStyles = createStaticStyles(({ css, cssVar }) => ({
   gold: css`
     padding-block-end: 1px;
-    background: linear-gradient(to top, ${cssVar.gold3} 40%, transparent 40%);
+    color: ${cssVar.colorText};
+    background: linear-gradient(to top, ${cssVar.gold4} 40%, transparent 40%);
   `,
   info: css`
     padding-block-end: 1px;
+    color: ${cssVar.colorText};
     background: linear-gradient(to top, ${cssVar.colorInfoBg} 40%, transparent 40%);
   `,
   primary: css`
     padding-block-end: 1px;
+    color: ${cssVar.colorText};
     background: linear-gradient(to top, ${cssVar.colorPrimaryBg} 40%, transparent 40%);
   `,
   warning: css`
     padding-block-end: 1px;
+    color: ${cssVar.colorText};
     background: linear-gradient(to top, ${cssVar.colorWarningBg} 40%, transparent 40%);
   `,
 }));

src/tools/code-interpreter/Inspector/ExecuteCode/index.tsx

@@ -1,27 +1,22 @@
 'use client';
 
 import { type BuiltinInspectorProps } from '@lobechat/types';
-import { Icon } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { shinyTextStyles } from '@/styles';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
 
 import { type ExecuteCodeState } from '../../type';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
-  content: css`
-    font-family: ${cssVar.fontFamilyCode};
-  `,
   root: css`
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
 
-    color: ${cssVar.colorTextDescription};
+    color: ${cssVar.colorTextSecondary};
   `,
 }));
 
@@ -36,26 +31,20 @@ export const ExecuteCodeInspector = memo<
 >(({ args, partialArgs, isArgumentsStreaming }) => {
   const { t } = useTranslation('plugin');
 
-  if (isArgumentsStreaming && !partialArgs?.description)
+  const description = args?.description || partialArgs?.description;
+
+  if (isArgumentsStreaming && !description) {
     return (
       <div className={cx(styles.root, shinyTextStyles.shinyText)}>
-        <span>{t('builtins.lobe-cloud-code-interpreter.title')}</span>
-        <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
         <span>{t('builtins.lobe-cloud-code-interpreter.apiName.executeCode')}</span>
       </div>
     );
-
-  const displayText = args?.description || partialArgs?.description || '';
+  }
 
   return (
     <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
-      <span>{t('builtins.lobe-cloud-code-interpreter.apiName.executeCode')}</span>
-      {displayText && (
-        <>
-          <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
-          <span className={styles.content}>{displayText}</span>
-        </>
-      )}
+      <span>{t('builtins.lobe-cloud-code-interpreter.apiName.executeCode')}: </span>
+      {description && <span className={highlightTextStyles.gold}>{description}</span>}
     </div>
   );
 });