♻️ refactor: refactor to use better underline style

2026-03-26 13:19:34 +07:00 · 2025-12-30 16:15:04 +08:00
parent 73b773260b
commit 5e10ac8d88
11 changed files with 54 additions and 92 deletions
--- a/packages/builtin-tool-group-management/src/client/Inspector/Speak/index.tsx
+++ b/packages/builtin-tool-group-management/src/client/Inspector/Speak/index.tsx
@@ -9,16 +9,11 @@ import { useTranslation } from 'react-i18next';

 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
-import { shinyTextStyles } from '@/styles';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';

 import type { SpeakParams } from '../../../types';

 const styles = createStaticStyles(({ css, cssVar }) => ({
-  agentName: css`
-    padding-block-end: 1px;
-    color: ${cssVar.colorText};
-    background: linear-gradient(to top, ${cssVar.colorPrimaryBg} 40%, transparent 40%);
-  `,
  root: css`
    overflow: hidden;
    display: flex;
@@ -76,7 +71,7 @@ export const SpeakInspector = memo<BuiltinInspectorProps<SpeakParams>>(
            title={agent.title || undefined}
          />
        )}
-        {agentName && <span className={styles.agentName}>{agentName}</span>}
+        {agentName && <span className={highlightTextStyles.primary}>{agentName}</span>}
      </Flexbox>
    );
  },
--- a/packages/builtin-tool-gtd/src/client/Inspector/CreatePlan/index.tsx
+++ b/packages/builtin-tool-gtd/src/client/Inspector/CreatePlan/index.tsx
@@ -5,16 +5,11 @@ import { createStaticStyles, cx } from 'antd-style';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';

-import { shinyTextStyles } from '@/styles';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';

 import type { CreatePlanParams, CreatePlanState } from '../../../types';

 const styles = createStaticStyles(({ css, cssVar }) => ({
-  goal: css`
-    padding-block-end: 1px;
-    color: ${cssVar.colorText};
-    background: linear-gradient(to top, ${cssVar.colorPrimaryBg} 40%, transparent 40%);
-  `,
  root: css`
    overflow: hidden;
    display: -webkit-box;
@@ -43,7 +38,7 @@ export const CreatePlanInspector = memo<BuiltinInspectorProps<CreatePlanParams,
      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
        {goal ? (
          <Trans
-            components={{ goal: <span className={styles.goal} /> }}
+            components={{ goal: <span className={highlightTextStyles.primary} /> }}
            i18nKey="builtins.lobe-gtd.apiName.createPlan.result"
            ns="plugin"
            values={{ goal }}
--- a/packages/builtin-tool-gtd/src/client/Inspector/ExecTask/index.tsx
+++ b/packages/builtin-tool-gtd/src/client/Inspector/ExecTask/index.tsx
@@ -5,16 +5,11 @@ import { createStaticStyles, cx } from 'antd-style';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';

-import { shinyTextStyles } from '@/styles';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';

 import type { ExecTaskParams, ExecTaskState } from '../../../types';

 const styles = createStaticStyles(({ css, cssVar }) => ({
-  description: css`
-    padding-block-end: 1px;
-    color: ${cssVar.colorText};
-    background: linear-gradient(to top, ${cssVar.colorInfoBg} 40%, transparent 40%);
-  `,
  root: css`
    overflow: hidden;
    display: -webkit-box;
@@ -43,7 +38,7 @@ export const ExecTaskInspector = memo<BuiltinInspectorProps<ExecTaskParams, Exec
      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
        {description ? (
          <Trans
-            components={{ desc: <span className={styles.description} /> }}
+            components={{ desc: <span className={highlightTextStyles.primary} /> }}
            i18nKey="builtins.lobe-gtd.apiName.execTask.result"
            ns="plugin"
            values={{ description }}
--- a/packages/builtin-tool-gtd/src/manifest.ts
+++ b/packages/builtin-tool-gtd/src/manifest.ts
@@ -77,7 +77,7 @@ export const GTDManifest: BuiltinToolManifest = {
            type: 'array',
          },
        },
-        required: ['items'],
+        required: ['adds'],
        type: 'object',
      },
    },
--- a/packages/builtin-tool-page-agent/src/client/Inspector/EditTitle/index.tsx
+++ b/packages/builtin-tool-page-agent/src/client/Inspector/EditTitle/index.tsx
@@ -1,22 +1,16 @@
 'use client';

+import type { EditTitleArgs } from '@lobechat/editor-runtime';
 import type { BuiltinInspectorProps } from '@lobechat/types';
 import { createStaticStyles, cx } from 'antd-style';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';

-import { shinyTextStyles } from '@/styles';
-
-import type { EditTitleArgs } from '@lobechat/editor-runtime';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';

 import type { EditTitleState } from '../../../types';

 const styles = createStaticStyles(({ css, cssVar }) => ({
-  highlight: css`
-    padding-block-end: 1px;
-    color: ${cssVar.colorText};
-    background: linear-gradient(to top, ${cssVar.gold3} 40%, transparent 40%);
-  `,
  root: css`
    overflow: hidden;
    display: -webkit-box;
@@ -37,7 +31,7 @@ export const EditTitleInspector = memo<BuiltinInspectorProps<EditTitleArgs, Edit
      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
        {title ? (
          <Trans
-            components={{ title: <span className={styles.highlight} /> }}
+            components={{ title: <span className={highlightTextStyles.gold} /> }}
            i18nKey="builtins.lobe-page-agent.apiName.editTitle.result"
            ns="plugin"
            values={{ title }}
--- a/packages/builtin-tool-page-agent/src/client/Inspector/ReplaceText/index.tsx
+++ b/packages/builtin-tool-page-agent/src/client/Inspector/ReplaceText/index.tsx
@@ -1,5 +1,6 @@
 'use client';

+import type { ReplaceTextArgs } from '@lobechat/editor-runtime';
 import type { BuiltinInspectorProps } from '@lobechat/types';
 import { Icon } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
@@ -7,9 +8,7 @@ import { ArrowRight } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

-import { shinyTextStyles } from '@/styles';
-
-import type { ReplaceTextArgs } from '@lobechat/editor-runtime';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';

 import type { ReplaceTextState } from '../../../types';

@@ -22,11 +21,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
    color: ${cssVar.colorTextSecondary};
    text-decoration: line-through;
  `,
-  highlight: css`
-    padding-block-end: 1px;
-    color: ${cssVar.colorText};
-    background: linear-gradient(to top, ${cssVar.gold3} 40%, transparent 40%);
-  `,
  root: css`
    overflow: hidden;
    display: -webkit-box;
@@ -71,7 +65,7 @@ export const ReplaceTextInspector = memo<BuiltinInspectorProps<ReplaceTextArgs,
          <>
            <span className={styles.from}>{from}</span>
            <Icon className={styles.arrow} icon={ArrowRight} size={12} />
-            <span className={styles.highlight}>
+            <span className={highlightTextStyles.gold}>
              {to || t('builtins.lobe-page-agent.apiName.replaceText.empty')}
            </span>
            {count > 0 && (
--- a/packages/builtin-tool-web-browsing/src/client/Inspector/Search/index.tsx
+++ b/packages/builtin-tool-web-browsing/src/client/Inspector/Search/index.tsx
@@ -1,13 +1,11 @@
 'use client';

 import { type BuiltinInspectorProps, type SearchQuery } 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 }) => ({
  root: css`
@@ -16,38 +14,32 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;

-    color: ${cssVar.colorTextDescription};
+    color: ${cssVar.colorTextSecondary};
  `,
 }));

-export const SearchInspector = memo<BuiltinInspectorProps<SearchQuery>>(({ args, isLoading }) => {
-  const { t } = useTranslation('plugin');
+export const SearchInspector = memo<BuiltinInspectorProps<SearchQuery>>(
+  ({ args, partialArgs, isArgumentsStreaming }) => {
+    const { t } = useTranslation('plugin');

-  const query = args?.query || '';
+    const query = args?.query || partialArgs?.query || '';
+
+    if (isArgumentsStreaming && !query) {
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-web-browsing.apiName.search')}</span>
+        </div>
+      );
+    }

-  // When loading, show "联网搜索 > 搜索页面"
-  if (isLoading) {
    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.search')}</span>
+      <div className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-web-browsing.apiName.search')}: </span>
+        {query && <span className={highlightTextStyles.info}>{query}</span>}
      </div>
    );
-  }
-
-  return (
-    <div className={styles.root}>
-      <span>{t('builtins.lobe-web-browsing.apiName.search')}</span>
-      {query && (
-        <>
-          <Icon icon={ChevronRight} style={{ marginInline: 4 }} />
-          <span>{query}</span>
-        </>
-      )}
-    </div>
-  );
-});
+  },
+);

 SearchInspector.displayName = 'SearchInspector';

--- a/packages/builtin-tool-web-browsing/src/client/Inspector/index.ts
+++ b/packages/builtin-tool-web-browsing/src/client/Inspector/index.ts
@@ -11,5 +11,3 @@ export const WebBrowsingInspectors = {
  [WebBrowsingApiName.crawlSinglePage]: CrawlSinglePageInspector,
  [WebBrowsingApiName.search]: SearchInspector,
 };
-
-export { CrawlMultiPagesInspector, CrawlSinglePageInspector, SearchInspector };
--- a/src/app/[variants]/(main)/group/_layout/Sidebar/Header/Agent/index.tsx
+++ b/src/app/[variants]/(main)/group/_layout/Sidebar/Header/Agent/index.tsx
@@ -5,7 +5,6 @@ import { ChevronsUpDownIcon } from 'lucide-react';
 import React, { type PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';

-import { DEFAULT_AVATAR } from '@/const/meta';
 import GroupAvatar from '@/features/GroupAvatar';
 import { SkeletonItem } from '@/features/NavPanel/components/SkeletonList';
 import { useAgentGroupStore } from '@/store/agentGroup';
@@ -16,10 +15,10 @@ import SwitchPanel from './SwitchPanel';
 const Agent = memo<PropsWithChildren>(() => {
  const { t } = useTranslation(['chat', 'common']);

-  const [isGroupsInit, groupMeta, agents] = useAgentGroupStore((s) => [
+  const [isGroupsInit, groupMeta, memberAvatars] = useAgentGroupStore((s) => [
    agentGroupSelectors.isGroupsInit(s),
    agentGroupSelectors.currentGroupMeta(s),
-    agentGroupSelectors.currentGroupAgents(s),
+    agentGroupSelectors.currentGroupMemberAvatars(s),
  ]);

  const displayTitle = groupMeta?.title || t('untitledGroup', { ns: 'chat' });
@@ -40,13 +39,7 @@ const Agent = memo<PropsWithChildren>(() => {
        }}
        variant={'borderless'}
      >
-        <GroupAvatar
-          avatars={agents.map((agent) => ({
-            avatar: agent.avatar || DEFAULT_AVATAR,
-            background: agent.backgroundColor || undefined,
-          }))}
-          size={28}
-        />
+        <GroupAvatar avatars={memberAvatars} size={28} />
        <Text ellipsis weight={500}>
          {displayTitle}
        </Text>
--- a/src/app/[variants]/(main)/group/features/GroupAvatar.tsx
+++ b/src/app/[variants]/(main)/group/features/GroupAvatar.tsx
@@ -3,23 +3,17 @@
 import isEqual from 'fast-deep-equal';
 import React, { memo } from 'react';

-import { DEFAULT_AVATAR } from '@/const/meta';
 import GroupAvatar from '@/features/GroupAvatar';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';

 const SupervisorAvatar = memo<{ size?: number }>(({ size = 28 }) => {
-  const agents = useAgentGroupStore((s) => agentGroupSelectors.currentGroupAgents(s), isEqual);
-
-  return (
-    <GroupAvatar
-      avatars={agents.map((agent) => ({
-        avatar: agent.avatar || DEFAULT_AVATAR,
-        background: agent.backgroundColor || undefined,
-      }))}
-      size={size}
-    />
+  const memberAvatars = useAgentGroupStore(
+    (s) => agentGroupSelectors.currentGroupMemberAvatars(s),
+    isEqual,
  );
+
+  return <GroupAvatar avatars={memberAvatars} size={size} />;
 });

 export default SupervisorAvatar;
--- a/src/store/agentGroup/selectors/current.ts
+++ b/src/store/agentGroup/selectors/current.ts
@@ -1,7 +1,10 @@
+import {
+  DEFAULT_AVATAR,
+  DEFAULT_CHAT_GROUP_CHAT_CONFIG,
+  DEFAULT_CHAT_GROUP_META_CONFIG,
+} from '@lobechat/const';
 import type { AgentGroupDetail, AgentGroupMember, AgentItem } from '@lobechat/types';

-import { DEFAULT_CHAT_GROUP_CHAT_CONFIG, DEFAULT_CHAT_GROUP_META_CONFIG } from '@/const/settings';
-
 import type { ChatGroupState } from '../initialState';
 import type { ChatGroupStore } from '../store';
 import { agentGroupByIdSelectors } from './byId';
@@ -43,6 +46,14 @@ const currentGroupMembers = (s: ChatGroupStore): AgentGroupMember[] => {
  return groupId ? agentGroupByIdSelectors.groupMembers(groupId)(s) : [];
 };

+const currentGroupMemberAvatars = (s: ChatGroupStore) => {
+  const members = currentGroupMembers(s);
+  return members.map((agent) => ({
+    avatar: agent.avatar || DEFAULT_AVATAR,
+    background: agent.backgroundColor || undefined,
+  }));
+};
+
 const getAllGroups = (s: ChatGroupState): AgentGroupDetail[] => Object.values(s.groupMap);

 /**
@@ -59,6 +70,7 @@ export const currentSelectors = {
  currentGroup,
  currentGroupAgents,
  currentGroupConfig,
+  currentGroupMemberAvatars,
  currentGroupMembers,
  currentGroupMeta,
  currentGroupOpeningMessage,