fix: agents tabs not shown

2024-10-28 16:23:55 +08:00 · 2024-10-28 16:23:55 +08:00 · 73c2945961
commit 73c2945961
parent 18beffcc29
4 changed files with 88 additions and 65 deletions
--- a/src/renderer/src/config/agents.json
+++ b/src/renderer/src/config/agents.json
@ -179,7 +179,7 @@
      "职业"
    ],
    "prompt": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题。",
-    "description": ""
+    "description": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题"
  },
  {
    "id": "19",
@ -189,7 +189,7 @@
      "职业"
    ],
    "prompt": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。",
-    "description": ""
+    "description": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。"
  },
  {
    "id": "20",
@ -199,7 +199,7 @@
      "职业"
    ],
    "prompt": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。",
-    "description": ""
+    "description": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。"
  },
  {
    "id": "21",
@ -209,7 +209,7 @@
      "职业"
    ],
    "prompt": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。",
-    "description": ""
+    "description": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。"
  },
  {
    "id": "22",
@ -219,7 +219,7 @@
      "职业"
    ],
    "prompt": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。",
-    "description": ""
+    "description": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。"
  },
  {
    "id": "23",
@ -229,7 +229,7 @@
      "职业"
    ],
    "prompt": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n",
-    "description": ""
+    "description": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n"
  },
  {
    "id": "24",
@ -239,7 +239,7 @@
      "职业"
    ],
    "prompt": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n",
-    "description": ""
+    "description": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n"
  },
  {
    "id": "25",
@ -249,7 +249,7 @@
      "职业"
    ],
    "prompt": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n",
-    "description": ""
+    "description": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n"
  },
  {
    "id": "26",
@ -259,7 +259,7 @@
      "职业"
    ],
    "prompt": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。",
-    "description": ""
+    "description": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。"
  },
  {
    "id": "27",
@ -269,7 +269,7 @@
      "语言"
    ],
    "prompt": "你是一个好用的翻译助手。请将我的英文翻译成中文，将所有非中文的翻译成中文。我发给你所有的话都是需要翻译的内容，你只需要回答翻译结果。翻译结果请符合中文的语言习惯。",
-    "description": ""
+    "description": "你是一个好用的翻译助手。请将我的英文翻译成中文，将所有非中文的翻译成中文。我发给你所有的话都是需要翻译的内容，你只需要回答翻译结果。翻译结果请符合中文的语言习惯。"
  },
  {
    "id": "28",
@ -279,7 +279,7 @@
      "语言"
    ],
    "prompt": "您是一位语言专家，擅长阐释英语词汇的复杂性。您的角色是将复杂的英语单词分解为简单的概念，提供易懂的英语解释，提供中文翻译，并提供助记设备以帮助记忆。\n\n技能\n1. 分析高级英语单词的拼写、发音和含义。\n2. 使用简单的英语词汇进行解释，然后提供中文翻译。\n3. 使用音标联想、形象联想和词源等记忆技巧。\n4. 创作高质量的句子，以示范单词在语境中的使用。\n\n规则\n1. 总是以使用简单的英语词汇进行解释为开头。\n2. 在适当的时候，保持解释和例句的清晰、准确和幽默。\n3. 确保助记设备与记忆相关且有效。\n\n工作流程\n1. 问候用户并询问他们感兴趣的英语单词。\n2. 分解单词，分析其拼写、发音和复杂含义。\n3. 用简单的英语词汇解释，使含义更易理解。\n4. 提供单词的中文翻译和简单的英语解释。\n5. 针对单词的特点提供个性化的助记策略。\n6. 使用单词构建高质量、信息丰富且引人入胜的句子。\n\n初始化\n作为一名<角色>，您必须遵循<规则>并使用<语言>进行沟通。在问候用户时，确认他们想要理解和记忆的英语单词，然后按照<工作流程>进行操作。",
-    "description": ""
+    "description": "您是一位语言专家，擅长阐释英语词汇的复杂性。您的角色是将复杂的英语单词分解为简单的概念，提供易懂的英语解释，提供中文翻译，并提供助记设备以帮助记忆。"
  },
  {
    "id": "29",
@ -289,7 +289,7 @@
      "工具"
    ],
    "prompt": "总结下面的文章，给出总结、摘要、观点三个部分内容，其中观点部分要使用列表列出，使用 Markdown 回复",
-    "description": ""
+    "description": "总结下面的文章，给出总结、摘要、观点三个部分内容，其中观点部分要使用列表列出，使用 Markdown 回复"
  },
  {
    "id": "30",
@ -299,7 +299,7 @@
      "职业"
    ],
    "prompt": "我想让你担任招聘人员。我将提供一些关于职位空缺的信息，而你的工作是制定寻找合格申请人的策略。这可能包括通过社交媒体、社交活动甚至参加招聘会接触潜在候选人，以便为每个职位找到最合适的人选。",
-    "description": ""
+    "description": "我想让你担任招聘人员。我将提供一些关于职位空缺的信息，而你的工作是制定寻找合格申请人的策略。这可能包括通过社交媒体、社交活动甚至参加招聘会接触潜在候选人，以便为每个职位找到最合适的人选。"
  },
  {
    "id": "31",
--- a/src/renderer/src/pages/agents/AgentsPage.tsx
+++ b/src/renderer/src/pages/agents/AgentsPage.tsx
@ -4,10 +4,10 @@ import Scrollbar from '@renderer/components/Scrollbar'
 import SystemAgents from '@renderer/config/agents.json'
 import { createAssistantFromAgent } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
-import { uuid } from '@renderer/utils'
+import { sortByEnglishFirst, uuid } from '@renderer/utils'
 import { Col, Empty, Input, Row, Tabs as TabsAntd, Typography } from 'antd'
 import { groupBy, omit } from 'lodash'
-import { FC, useMemo, useState } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
@ -28,9 +28,18 @@ const getAgentsFromSystemAgents = () => {
  return agents
 }

+let _agentGroups: Record<string, Agent[]> = {}
+
 const AgentsPage: FC = () => {
  const [search, setSearch] = useState('')
-  const agentGroups = useMemo(() => groupBy(getAgentsFromSystemAgents(), 'group'), [])
+
+  const agentGroups = useMemo(() => {
+    if (Object.keys(_agentGroups).length === 0) {
+      _agentGroups = groupBy(getAgentsFromSystemAgents(), 'group')
+    }
+    return _agentGroups
+  }, [])
+
  const { t } = useTranslation()

  const filteredAgentGroups = useMemo(() => {
@ -41,7 +50,7 @@ const AgentsPage: FC = () => {
      const filteredAgents = agents.filter(
        (agent) =>
          agent.name.toLowerCase().includes(search.toLowerCase()) ||
-          agent.prompt?.toLowerCase().includes(search.toLowerCase())
+          agent.description?.toLowerCase().includes(search.toLowerCase())
      )
      if (filteredAgents.length > 0) {
        filtered[group] = filteredAgents
@ -54,24 +63,27 @@ const AgentsPage: FC = () => {
    return agent.emoji ? agent.emoji + ' ' + agent.name : agent.name
  }

-  const onAddAgentConfirm = (agent: Agent) => {
-    window.modal.confirm({
-      title: getAgentName(agent),
-      content: (
-        <AgentPrompt>
-          <ReactMarkdown className="markdown">{agent.description || agent.prompt}</ReactMarkdown>
-        </AgentPrompt>
-      ),
-      width: 600,
-      icon: null,
-      closable: true,
-      maskClosable: true,
-      centered: true,
-      okButtonProps: { type: 'primary' },
-      okText: t('agents.add.button'),
-      onOk: () => createAssistantFromAgent(agent)
-    })
-  }
+  const onAddAgentConfirm = useCallback(
+    (agent: Agent) => {
+      window.modal.confirm({
+        title: getAgentName(agent),
+        content: (
+          <AgentPrompt>
+            <ReactMarkdown className="markdown">{agent.description || agent.prompt}</ReactMarkdown>
+          </AgentPrompt>
+        ),
+        width: 600,
+        icon: null,
+        closable: true,
+        maskClosable: true,
+        centered: true,
+        okButtonProps: { type: 'primary' },
+        okText: t('agents.add.button'),
+        onOk: () => createAssistantFromAgent(agent)
+      })
+    },
+    [t]
+  )

  const getAgentFromSystemAgent = (agent: (typeof SystemAgents)[number]) => {
    return {
@ -83,29 +95,36 @@ const AgentsPage: FC = () => {
    }
  }

-  const tabItems = Object.keys(filteredAgentGroups).map((group, i) => {
-    const id = String(i + 1)
-    return {
-      label: group,
-      key: id,
-      children: (
-        <TabContent key={group}>
-          <Title level={5} key={group} style={{ marginBottom: 16 }}>
-            {group}
-          </Title>
-          <Row gutter={16}>
-            {filteredAgentGroups[group].map((agent, index) => {
-              return (
-                <Col span={8} key={group + index}>
-                  <AgentCard onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))} agent={agent as any} />
-                </Col>
-              )
-            })}
-          </Row>
-        </TabContent>
-      )
-    }
-  })
+  const tabItems = useMemo(() => {
+    return Object.keys(filteredAgentGroups)
+      .sort(sortByEnglishFirst)
+      .map((group, i) => {
+        const id = String(i + 1)
+        return {
+          label: group,
+          key: id,
+          children: (
+            <TabContent key={group}>
+              <Title level={5} key={group} style={{ marginBottom: 16 }}>
+                {group}
+              </Title>
+              <Row gutter={16}>
+                {filteredAgentGroups[group].map((agent, index) => {
+                  return (
+                    <Col span={8} key={group + index}>
+                      <AgentCard
+                        onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))}
+                        agent={agent as any}
+                      />
+                    </Col>
+                  )
+                })}
+              </Row>
+            </TabContent>
+          )
+        }
+      })
+  }, [filteredAgentGroups, onAddAgentConfirm])

  return (
    <Container>
--- a/src/renderer/src/pages/agents/components/AgentCard.tsx
+++ b/src/renderer/src/pages/agents/components/AgentCard.tsx
@ -15,7 +15,7 @@ const AgentCard: React.FC<Props> = ({ agent, onClick }) => {
        <AgentHeader>
          <AgentName style={{ marginBottom: 0 }}>{agent.name}</AgentName>
        </AgentHeader>
-        <AgentCardPrompt>{agent.prompt}</AgentCardPrompt>
+        <AgentCardPrompt className="text-nowrap">{agent.description || agent.prompt}</AgentCardPrompt>
      </Col>
    </Container>
  )
@ -66,12 +66,8 @@ const AgentName = styled.div`
 const AgentCardPrompt = styled.div`
  color: #666;
  margin-top: 6px;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  white-space: pre-wrap;
  font-size: 12px;
+  max-width: auto;
 `

 export default AgentCard
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@ -333,3 +333,11 @@ export function formatFileSize(file: FileType) {
 export function classNames(...classes: Array<string | boolean | undefined | null>) {
  return classes.filter(Boolean).join(' ')
 }
+
+export function sortByEnglishFirst(a: string, b: string) {
+  const isAEnglish = /^[a-zA-Z]/.test(a)
+  const isBEnglish = /^[a-zA-Z]/.test(b)
+  if (isAEnglish && !isBEnglish) return -1
+  if (!isAEnglish && isBEnglish) return 1
+  return a.localeCompare(b)
+}