@lobehub/chat 1.7.5 → 1.7.7

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.7.7](https://github.com/lobehub/lobe-chat/compare/v1.7.6...v1.7.7)
+
+<sup>Released on **2024-07-30**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve tools calling UI.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve tools calling UI, closes [#3326](https://github.com/lobehub/lobe-chat/issues/3326) ([36cabc0](https://github.com/lobehub/lobe-chat/commit/36cabc0))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.7.6](https://github.com/lobehub/lobe-chat/compare/v1.7.5...v1.7.6)
+
+<sup>Released on **2024-07-29**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Disable anthropic browser request.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Disable anthropic browser request, closes [#3359](https://github.com/lobehub/lobe-chat/issues/3359) ([a519837](https://github.com/lobehub/lobe-chat/commit/a519837))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.7.5](https://github.com/lobehub/lobe-chat/compare/v1.7.4...v1.7.5)
 
 <sup>Released on **2024-07-29**</sup>

package/README.md

@@ -270,10 +270,10 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [C Program Learning Assistant](https://chat-preview.lobehub.com/market?agent=sichuan-university-941-c-programming-assistant)<br/><sup>By **[YBGuoYang](https://github.com/YBGuoYang)** on **2024-07-28**</sup> | Assist me in learning C program design<br/>`941`                                                                                                                                                                                                                                                                                                                                                                                |
 | [Brand Pioneer](https://chat-preview.lobehub.com/market?agent=brand-pioneer)<br/><sup>By **[SaintFresh](https://github.com/SaintFresh)** on **2024-07-25**</sup>                                               | A brand development specialist, thought leader, brand strategy super-genius, and brand visionary. Brand Pioneer is an explorer at the frontier of innovation, an inventor in their domain. Provide them with your market and let them imagine a future world characterized by groundbreaking advancements in your field of expertise.<br/>`business` `brand-pioneer` `brand-development` `business-assistant` `brand-narrative` |
+| [Network Security Assistant](https://chat-preview.lobehub.com/market?agent=cybersecurity-copilot)<br/><sup>By **[huoji120](https://github.com/huoji120)** on **2024-07-23**</sup>                              | A network security expert assistant that analyzes logs, code, decompiles, identifies issues, and provides optimization suggestions.<br/>`network-security` `traffic-analysis` `log-analysis` `code-reverse-engineering` `ctf`                                                                                                                                                                                                   |
 | [BIDOSx2](https://chat-preview.lobehub.com/market?agent=bidosx-2-v-2)<br/><sup>By **[SaintFresh](https://github.com/SaintFresh)** on **2024-07-21**</sup>                                                      | A highly advanced AI LLM transcending conventional AI. 'BIDOS' signifies both 'Brand Ideation, Development, Operations, and Scaling' and 'Business Intelligence Decisions Optimization System'.<br/>`brand-development` `ai-assistant` `market-analysis` `strategic-planning` `business-optimization` `business-intelligence`                                                                                                   |
-| [Growth Coach](https://chat-preview.lobehub.com/market?agent=personal-development-coach)<br/><sup>By **[zer0boss](https://github.com/zer0boss)** on **2024-07-20**</sup>                                       | Specializes in helping users explore themselves through dialogue, find solutions, and paths to growth<br/>`growth-coach` `self-exploration` `goal-setting` `self-awareness`                                                                                                                                                                                                                                                     |
 
-> 📊 Total agents: [<kbd>**306**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**307**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -258,10 +258,10 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [c 程序学习助手](https://chat-preview.lobehub.com/market?agent=sichuan-university-941-c-programming-assistant)<br/><sup>By **[YBGuoYang](https://github.com/YBGuoYang)** on **2024-07-28**</sup> | 辅助我进行 c 程序设计的学习<br/>`941`                                                                                                                                                                                                                   |
 | [品牌先锋](https://chat-preview.lobehub.com/market?agent=brand-pioneer)<br/><sup>By **[SaintFresh](https://github.com/SaintFresh)** on **2024-07-25**</sup>                                      | 一位品牌发展专家、思想领袖、品牌战略超级天才和品牌远见者。品牌先锋是创新前沿的探险家，在其领域是一位发明家。将您的市场提供给他们，让他们想象一个未来世界，其中以您的专业领域的突破性进展为特征。<br/>`商业` `品牌先锋` `品牌发展` `商业助手` `品牌叙事` |
+| [网络安全助手](https://chat-preview.lobehub.com/market?agent=cybersecurity-copilot)<br/><sup>By **[huoji120](https://github.com/huoji120)** on **2024-07-23**</sup>                              | 网络安全专家助手，分析日志、代码、反编译，发现问题并提供优化建议。<br/>`网络安全` `流量分析` `日志分析` `代码逆向` `ctf`                                                                                                                                |
 | [BIDOSx2](https://chat-preview.lobehub.com/market?agent=bidosx-2-v-2)<br/><sup>By **[SaintFresh](https://github.com/SaintFresh)** on **2024-07-21**</sup>                                        | 一种高度先进的 AI LLM，超越传统人工智能。'BIDOS' 既代表 ' 品牌构思、发展、运营和扩展 '，也代表 ' 商业智能决策优化系统 '。<br/>`品牌发展` `ai助手` `市场分析` `战略规划` `业务优化` `商业智能`                                                           |
-| [成长教练](https://chat-preview.lobehub.com/market?agent=personal-development-coach)<br/><sup>By **[zer0boss](https://github.com/zer0boss)** on **2024-07-20**</sup>                             | 擅长用对话的方式帮助用户自我探索，找到解决之道和成长之路<br/>`成长教练` `自我探索` `目标设定` `自我觉察`                                                                                                                                                |
 
-> 📊 Total agents: [<kbd>**306**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**307**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -110,7 +110,7 @@
     "@clerk/localizations": "2.0.0",
     "@clerk/nextjs": "^5.2.6",
     "@clerk/themes": "^2.1.10",
-    "@google/generative-ai": "^0.14.1",
+    "@google/generative-ai": "^0.16.0",
     "@icons-pack/react-simple-icons": "^9.6.0",
     "@khmyznikov/pwa-install": "^0.3.9",
     "@lobehub/chat-plugin-sdk": "^1.32.4",

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicContent.tsx

@@ -14,6 +14,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import BubblesLoading from '@/components/BubblesLoading';
+import { LOADING_FLAT } from '@/const/message';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 
@@ -160,13 +162,19 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
         spin={isLoading}
       />
       {!editing ? (
-        <Paragraph
-          className={styles.title}
-          ellipsis={{ rows: 1, tooltip: { placement: 'left', title } }}
-          style={{ margin: 0 }}
-        >
-          {title}
-        </Paragraph>
+        title === LOADING_FLAT ? (
+          <Flexbox flex={1} height={28} justify={'center'}>
+            <BubblesLoading />
+          </Flexbox>
+        ) : (
+          <Paragraph
+            className={styles.title}
+            ellipsis={{ rows: 1, tooltip: { placement: 'left', title } }}
+            style={{ margin: 0 }}
+          >
+            {title}
+          </Paragraph>
+        )
       ) : (
         <EditableText
           editing={editing}

package/src/config/modelProviders/anthropic.ts

@@ -70,6 +70,7 @@ const Anthropic: ModelProviderCard = {
     },
   ],
   checkModel: 'claude-3-haiku-20240307',
+  disableBrowserRequest: true,  
   id: 'anthropic',
   name: 'Anthropic',
   proxyUrl: {

package/src/features/Conversation/Extras/Translate.tsx

@@ -6,11 +6,10 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import BubblesLoading from '@/components/BubblesLoading';
 import { useChatStore } from '@/store/chat';
 import { ChatTranslate } from '@/types/message';
 
-import BubblesLoading from '../components/BubblesLoading';
-
 interface TranslateProps extends ChatTranslate {
   id: string;
   loading?: boolean;

package/src/features/Conversation/Messages/Assistant/{ToolCalls → ToolCallItem}/index.tsx

@@ -1,57 +1,84 @@
-import { Icon } from '@lobehub/ui';
+import { Icon, Tag } from '@lobehub/ui';
+import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Loader2, LucideChevronDown, LucideChevronRight, LucideToyBrick } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 import { CSSProperties, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginAvatar from '@/features/PluginAvatar';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
+import { ToolMessage } from '../../Tool';
 import Arguments from '../../components/Arguments';
 import { useStyles } from './style';
 
 export interface InspectorProps {
+  apiName: string;
   arguments?: string;
+  id: string;
   identifier: string;
   index: number;
   messageId: string;
-  style: CSSProperties;
+  style?: CSSProperties;
 }
 
 const CallItem = memo<InspectorProps>(
-  ({ arguments: requestArgs, messageId, index, identifier, style }) => {
+  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
     const loading = useChatStore(chatSelectors.isToolCallStreaming(messageId, index));
+    const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(id));
+    const isMobile = useIsMobile();
 
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
     const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
-    return (
+    // when tool calling stop streaming, we should show the tool message
+    return !loading && toolMessage ? (
+      <ToolMessage {...toolMessage} />
+    ) : (
       <Flexbox gap={8} style={style}>
         <Flexbox
           align={'center'}
           className={styles.container}
           distribution={'space-between'}
           gap={8}
-          height={32}
           horizontal
           onClick={() => {
             setOpen(!open);
           }}
         >
           <Flexbox align={'center'} gap={8} horizontal>
-            {loading ? <Icon icon={Loader2} spin /> : <Icon icon={LucideToyBrick} />}
-            {pluginTitle}
+            {loading ? (
+              <div>
+                <Icon icon={Loader2} spin />
+              </div>
+            ) : (
+              <PluginAvatar identifier={identifier} size={isMobile ? 36 : undefined} />
+            )}
+            {isMobile ? (
+              <Flexbox>
+                <div>{pluginTitle}</div>
+                <Typography.Text className={styles.apiName} type={'secondary'}>
+                  {apiName}
+                </Typography.Text>
+              </Flexbox>
+            ) : (
+              <>
+                <div>{pluginTitle}</div>
+                <Tag>{apiName}</Tag>
+              </>
+            )}
           </Flexbox>
-          <Icon icon={open ? LucideChevronDown : LucideChevronRight} />
         </Flexbox>
-        {(open || loading) && <Arguments arguments={requestArgs} />}
+        {loading && <Arguments arguments={requestArgs} />}
       </Flexbox>
     );
   },

package/src/features/Conversation/Messages/Assistant/{ToolCalls → ToolCallItem}/style.ts

@@ -1,19 +1,30 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
+  apiName: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
   container: css`
     cursor: pointer;
 
     width: fit-content;
-    padding-inline: 4px 6px;
+    padding-block: 6px;
+    padding-inline: 8px;
+    padding-inline-end: 12px;
 
     color: ${token.colorText};
 
-    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorBorder};
     border-radius: 8px;
 
     &:hover {
-      background: ${token.colorFillSecondary};
+      background: ${token.colorFillTertiary};
     }
   `,
   plugin: css`

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -7,7 +7,7 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
 import { DefaultMessage } from '../Default';
-import ToolCall from './ToolCalls';
+import ToolCall from './ToolCallItem';
 
 export const AssistantMessage = memo<
   ChatMessage & {
@@ -31,17 +31,16 @@ export const AssistantMessage = memo<
         />
       )}
       {!editing && tools && (
-        <Flexbox gap={8} horizontal>
+        <Flexbox gap={8}>
           {tools.map((toolCall, index) => (
             <ToolCall
+              apiName={toolCall.apiName}
               arguments={toolCall.arguments}
+              id={toolCall.id}
               identifier={toolCall.identifier}
               index={index}
               key={toolCall.id}
               messageId={id}
-              style={{
-                maxWidth: `max(${100 / tools.length}%, 300px)`,
-              }}
             />
           ))}
         </Flexbox>

package/src/features/Conversation/Messages/Default.tsx

@@ -3,7 +3,7 @@ import { ReactNode, memo } from 'react';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../components/BubblesLoading';
+import BubblesLoading from '@/components/BubblesLoading';
 
 export const DefaultMessage = memo<
   ChatMessage & {

package/src/features/Conversation/Messages/User.tsx

@@ -1,12 +1,11 @@
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
 import { FileListPreviewer } from '@/features/FileList';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../components/BubblesLoading';
-
 export const UserMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;

package/src/store/chat/slices/message/selectors.test.ts

@@ -131,6 +131,36 @@ describe('chatSelectors', () => {
     });
   });
 
+  describe('getMessageByToolCallId', () => {
+    it('should return undefined if the message with the given id does not exist', () => {
+      const message = chatSelectors.getMessageByToolCallId('non-existent-id')(initialStore);
+      expect(message).toBeUndefined();
+    });
+
+    it('should return the message object with the matching tool_call_id', () => {
+      const toolMessage = {
+        id: 'msg3',
+        content: 'Function Message',
+        role: 'tool',
+        tool_call_id: 'ttt',
+        plugin: {
+          arguments: 'arg1',
+          identifier: 'func1',
+          apiName: 'ttt',
+          type: 'default',
+        },
+      } as ChatMessage;
+      const state = merge(initialStore, {
+        messagesMap: {
+          [messageMapKey('abc')]: [...mockMessages, toolMessage],
+        },
+        activeId: 'abc',
+      });
+      const message = chatSelectors.getMessageByToolCallId('ttt')(state);
+      expect(message).toMatchObject(toolMessage);
+    });
+  });
+
   describe('currentChatsWithHistoryConfig', () => {
     it('should slice the messages according to the current agent config', () => {
       const state = merge(initialStore, {
@@ -203,7 +233,7 @@ describe('chatSelectors', () => {
   });
 
   describe('currentChatsWithGuideMessage', () => {
-    it('should return existing messages if there are any', () => {
+    it('should return existing messages except tool message', () => {
       const state = merge(initialStore, {
         messagesMap: {
           [messageMapKey('someActiveId')]: mockMessages,
@@ -211,7 +241,7 @@ describe('chatSelectors', () => {
         activeId: 'someActiveId',
       });
       const chats = chatSelectors.currentChatsWithGuideMessage({} as MetaData)(state);
-      expect(chats).toEqual(mockedChats);
+      expect(chats).toEqual(mockedChats.slice(0, 2));
     });
 
     it('should add a guide message if the chat is brand new', () => {

package/src/store/chat/slices/message/selectors.ts

@@ -65,11 +65,12 @@ const showInboxWelcome = (s: ChatStore): boolean => {
   return isBrandNewChat;
 };
 
-// 针对新助手添加初始化时的自定义消息
+// Custom message for new assistant initialization
 const currentChatsWithGuideMessage =
   (meta: MetaData) =>
   (s: ChatStore): ChatMessage[] => {
-    const data = currentChats(s);
+    // skip tool message
+    const data = currentChats(s).filter((m) => m.role !== 'tool');
 
     const { isAgentEditable } = featureFlagsSelectors(createServerConfigStore().getState());
 
@@ -125,6 +126,10 @@ const chatsMessageString = (s: ChatStore): string => {
 const getMessageById = (id: string) => (s: ChatStore) =>
   chatHelpers.getMessageById(currentChats(s), id);
 
+const getMessageByToolCallId = (id: string) => (s: ChatStore) => {
+  const messages = currentChats(s);
+  return messages.find((m) => m.tool_call_id === id);
+};
 const getTraceIdByMessageId = (id: string) => (s: ChatStore) => getMessageById(id)(s)?.traceId;
 
 const latestMessage = (s: ChatStore) => currentChats(s).at(-1);
@@ -160,6 +165,7 @@ export const chatSelectors = {
   currentChatsWithHistoryConfig,
   currentToolMessages,
   getMessageById,
+  getMessageByToolCallId,
   getTraceIdByMessageId,
   isAIGenerating,
   isCreatingMessage,