💄 style: improve auto scroll and loading hint (#11579)

* improve operation hint

* improve i18n

* try to fix auto scroll

locales/en-US/plugin.json

@@ -70,6 +70,7 @@
   "builtins.lobe-group-management.apiName.summarize": "Summarize conversation",
   "builtins.lobe-group-management.apiName.vote": "Start vote",
   "builtins.lobe-group-management.inspector.broadcast.title": "Following Agents speak:",
+  "builtins.lobe-group-management.inspector.executeAgentTask.title": "Assigning task to:",
   "builtins.lobe-group-management.inspector.executeAgentTasks.title": "Assigning tasks to:",
   "builtins.lobe-group-management.inspector.speak.title": "Designated Agent speaks:",
   "builtins.lobe-group-management.title": "Group Coordinator",

locales/zh-CN/discover.json

@@ -27,12 +27,12 @@
   "assistants.details.overview.title": "概览",
   "assistants.details.related.listTitle": "相关助理",
   "assistants.details.related.more": "查看更多",
-  "assistants.details.related.title": "相似助手",
+  "assistants.details.related.title": "相似助理",
   "assistants.details.sidebar.toc": "目录",
   "assistants.details.summary.title": "你可以使用该助理做什么？",
   "assistants.details.systemRole.openingMessage": "开场消息",
   "assistants.details.systemRole.openingQuestions": "开场问题",
-  "assistants.details.systemRole.title": "助手简介",
+  "assistants.details.systemRole.title": "助理简介",
   "assistants.details.version.empty": "暂无历史版本",
   "assistants.details.version.status.archived": "已归档",
   "assistants.details.version.status.deprecated": "已拒绝",
@@ -76,8 +76,8 @@
   "assistants.status.support": "有问题请复制链接发送到 <email>support@lobehub.com</email> 咨询",
   "assistants.status.unpublished.subtitle": "该助理正在审核中。若你需要确认状态，请复制链接并发送至 <email>support@lobehub.com</email>",
   "assistants.status.unpublished.title": "该助理正在审核",
-  "assistants.suggestions": "相似助手",
-  "assistants.systemRole": "助手简介",
+  "assistants.suggestions": "相似助理",
+  "assistants.systemRole": "助理简介",
   "assistants.tokenUsage": "助理提示词 Token 使用量",
   "assistants.try": "试一下",
   "assistants.withKnowledge": "该助理附带资源库",

locales/zh-CN/plugin.json

@@ -70,6 +70,7 @@
   "builtins.lobe-group-management.apiName.summarize": "总结对话",
   "builtins.lobe-group-management.apiName.vote": "发起投票",
   "builtins.lobe-group-management.inspector.broadcast.title": "以下 Agent 发言：",
+  "builtins.lobe-group-management.inspector.executeAgentTask.title": "分配任务给：",
   "builtins.lobe-group-management.inspector.executeAgentTasks.title": "分配任务给：",
   "builtins.lobe-group-management.inspector.speak.title": "指定 Agent 发言：",
   "builtins.lobe-group-management.title": "群组协调",

packages/builtin-tool-group-management/src/client/Inspector/ExecuteAgentTask/index.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { DEFAULT_AVATAR } from '@lobechat/const';
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { Avatar, Flexbox } from '@lobehub/ui';
+import { createStaticStyles, cx, useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import type { ExecuteTaskParams } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+  title: css`
+    flex-shrink: 0;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+  `,
+}));
+
+export const ExecuteAgentTaskInspector = memo<BuiltinInspectorProps<ExecuteTaskParams>>(
+  ({ args, partialArgs, isArgumentsStreaming }) => {
+    const { t } = useTranslation('plugin');
+
+    const agentId = args?.agentId || partialArgs?.agentId;
+
+    // Get active group ID and agent from store
+    const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+    const agent = useAgentGroupStore((s) =>
+      activeGroupId && agentId
+        ? agentGroupSelectors.getAgentByIdFromGroup(activeGroupId, agentId)(s)
+        : undefined,
+    );
+    const theme = useTheme();
+
+    if (isArgumentsStreaming && !agent) {
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-group-management.apiName.executeAgentTask')}</span>
+        </div>
+      );
+    }
+
+    const agentName = agent?.title || agentId;
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}
+        gap={8}
+        horizontal
+      >
+        <span className={styles.title}>
+          {t('builtins.lobe-group-management.inspector.executeAgentTask.title')}
+        </span>
+        {agent && (
+          <Avatar
+            avatar={agent.avatar || DEFAULT_AVATAR}
+            background={agent.backgroundColor || theme.colorBgContainer}
+            shape={'square'}
+            size={24}
+            title={agent.title || undefined}
+          />
+        )}
+        {agentName && <span className={highlightTextStyles.primary}>{agentName}</span>}
+      </Flexbox>
+    );
+  },
+);

packages/builtin-tool-group-management/src/client/Inspector/ExecuteAgentTasks/index.tsx

@@ -27,7 +27,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 }));
 
-export const ExecuteTasksInspector = memo<BuiltinInspectorProps<ExecuteTasksParams>>(
+export const ExecuteAgentTasksInspector = memo<BuiltinInspectorProps<ExecuteTasksParams>>(
   ({ args, partialArgs, isArgumentsStreaming }) => {
     const { t } = useTranslation('plugin');
 
@@ -84,7 +84,3 @@ export const ExecuteTasksInspector = memo<BuiltinInspectorProps<ExecuteTasksPara
     );
   },
 );
-
-ExecuteTasksInspector.displayName = 'ExecuteTasksInspector';
-
-export default ExecuteTasksInspector;

packages/builtin-tool-group-management/src/client/Inspector/index.ts

@@ -2,7 +2,8 @@ import { type BuiltinInspector } from '@lobechat/types';
 
 import { GroupManagementApiName } from '../../types';
 import { BroadcastInspector } from './Broadcast';
-import { ExecuteTasksInspector } from './ExecuteTasks';
+import { ExecuteAgentTaskInspector } from './ExecuteAgentTask';
+import { ExecuteAgentTasksInspector } from './ExecuteAgentTasks';
 import { SpeakInspector } from './Speak';
 
 /**
@@ -13,6 +14,7 @@ import { SpeakInspector } from './Speak';
  */
 export const GroupManagementInspectors: Record<string, BuiltinInspector> = {
   [GroupManagementApiName.broadcast]: BroadcastInspector as BuiltinInspector,
-  [GroupManagementApiName.executeAgentTasks]: ExecuteTasksInspector as BuiltinInspector,
+  [GroupManagementApiName.executeAgentTask]: ExecuteAgentTaskInspector as BuiltinInspector,
+  [GroupManagementApiName.executeAgentTasks]: ExecuteAgentTasksInspector as BuiltinInspector,
   [GroupManagementApiName.speak]: SpeakInspector as BuiltinInspector,
 };

src/features/Conversation/ChatList/components/AutoScroll.tsx

@@ -2,19 +2,13 @@
 
 import { memo, useEffect } from 'react';
 
-import { useConversationStore, virtuaListSelectors } from '../../store';
+import { messageStateSelectors, useConversationStore, virtuaListSelectors } from '../../store';
 import BackBottom from './BackBottom';
 
-interface AutoScrollProps {
-  /**
-   * Whether AI is generating (for auto-scroll during generation)
-   */
-  isGenerating?: boolean;
-}
-
-const AutoScroll = memo<AutoScrollProps>(({ isGenerating }) => {
+const AutoScroll = memo(() => {
   const atBottom = useConversationStore(virtuaListSelectors.atBottom);
   const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
   const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
 
   useEffect(() => {

src/features/Conversation/ChatList/components/VirtualizedList.tsx

@@ -10,10 +10,6 @@ import AutoScroll from './AutoScroll';
 
 interface VirtualizedListProps {
   dataSource: string[];
-  /**
-   * Whether AI is generating (for auto-scroll)
-   */
-  isGenerating?: boolean;
   itemContent: (index: number, data: string) => ReactNode;
 }
 
@@ -22,7 +18,7 @@ interface VirtualizedListProps {
  *
  * Based on ConversationStore data flow, no dependency on global ChatStore.
  */
-const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent, isGenerating }) => {
+const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent }) => {
   const virtuaRef = useRef<VListHandle>(null);
   const prevDataLengthRef = useRef(dataSource.length);
   const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -154,7 +150,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent, i
           position: 'relative',
         }}
       >
-        <AutoScroll isGenerating={isGenerating} />
+        <AutoScroll />
       </WideScreenContainer>
     </>
   );

src/locales/default/plugin.ts

@@ -70,6 +70,7 @@ export default {
   'builtins.lobe-group-management.apiName.summarize': 'Summarize conversation',
   'builtins.lobe-group-management.apiName.vote': 'Start vote',
   'builtins.lobe-group-management.inspector.broadcast.title': 'Following Agents speak:',
+  'builtins.lobe-group-management.inspector.executeAgentTask.title': 'Assigning task to:',
   'builtins.lobe-group-management.inspector.executeAgentTasks.title': 'Assigning tasks to:',
   'builtins.lobe-group-management.inspector.speak.title': 'Designated Agent speaks:',
   'builtins.lobe-group-management.title': 'Group Coordinator',