@lobehub/chat 0.26.0 → 0.26.1

package/src/plugins/searchEngine/runner.ts

@@ -1,82 +1,14 @@
 import querystring from 'query-string';
 
-const BASE_URL = 'https://serpapi.com/search';
-
-const API_KEY = process.env.SERPAI_API_KEY;
-
-export type OrganicResults = OrganicResult[];
-
-export interface OrganicResult {
-  about_page_link: string;
-  about_page_serpapi_link: string;
-  about_this_result: AboutThisResult;
-  cached_page_link?: string;
-  date?: string;
-  displayed_link: string;
-  favicon?: string;
-  link: string;
-  position: number;
-  related_results?: RelatedResult[];
-  rich_snippet?: RichSnippet;
-  snippet: string;
-  snippet_highlighted_words?: string[];
-  source: string;
-  thumbnail?: string;
-  title: string;
-}
-
-export interface AboutThisResult {
-  languages: string[];
-  regions: string[];
-  source: Source;
-}
+import { PluginRunner } from '@/plugins/type';
 
-export interface Source {
-  description: string;
-  icon: string;
-  security?: string;
-  source_info_link?: string;
-}
+import { OrganicResults, Result } from './type';
 
-export interface RelatedResult {
-  about_page_link: string;
-  about_page_serpapi_link: string;
-  about_this_result: AboutThisResult2;
-  cached_page_link: string;
-  date: string;
-  displayed_link: string;
-  link: string;
-  position: number;
-  snippet: string;
-  snippet_highlighted_words: string[];
-  title: string;
-}
-
-export interface AboutThisResult2 {
-  languages: string[];
-  regions: string[];
-  source: Source2;
-}
-
-export interface Source2 {
-  description: string;
-  icon: string;
-}
-
-export interface RichSnippet {
-  top: Top;
-}
-
-export interface Top {
-  detected_extensions: DetectedExtensions;
-  extensions: string[];
-}
+const BASE_URL = 'https://serpapi.com/search';
 
-export interface DetectedExtensions {
-  month_ago: number;
-}
+const API_KEY = process.env.SERPAI_API_KEY;
 
-const fetchResult = async ({ keywords }: { keywords: string }) => {
+const fetchResult: PluginRunner<{ keywords: string }, Result> = async ({ keywords }) => {
   const params = {
     api_key: API_KEY,
     engine: 'google',

package/src/plugins/searchEngine/type.ts

@@ -0,0 +1,80 @@
+export type OrganicResults = OrganicResult[];
+
+export interface SearchItem {
+  content?: string;
+  date?: string;
+  link?: string;
+  source?: string;
+  title?: string;
+}
+export type Result = SearchItem[];
+
+interface OrganicResult {
+  about_page_link: string;
+  about_page_serpapi_link: string;
+  about_this_result: AboutThisResult;
+  cached_page_link?: string;
+  date?: string;
+  displayed_link: string;
+  favicon?: string;
+  link: string;
+  position: number;
+  related_results?: RelatedResult[];
+  rich_snippet?: RichSnippet;
+  snippet: string;
+  snippet_highlighted_words?: string[];
+  source: string;
+  thumbnail?: string;
+  title: string;
+}
+
+interface AboutThisResult {
+  languages: string[];
+  regions: string[];
+  source: Source;
+}
+
+interface Source {
+  description: string;
+  icon: string;
+  security?: string;
+  source_info_link?: string;
+}
+
+interface RelatedResult {
+  about_page_link: string;
+  about_page_serpapi_link: string;
+  about_this_result: AboutThisResult2;
+  cached_page_link: string;
+  date: string;
+  displayed_link: string;
+  link: string;
+  position: number;
+  snippet: string;
+  snippet_highlighted_words: string[];
+  title: string;
+}
+
+interface AboutThisResult2 {
+  languages: string[];
+  regions: string[];
+  source: Source2;
+}
+
+interface Source2 {
+  description: string;
+  icon: string;
+}
+
+interface RichSnippet {
+  top: Top;
+}
+
+interface Top {
+  detected_extensions: DetectedExtensions;
+  extensions: string[];
+}
+
+interface DetectedExtensions {
+  month_ago: number;
+}

package/src/plugins/type.ts

@@ -0,0 +1,17 @@
+import { ChatCompletionFunctions } from 'openai-edge/types/api';
+import { ReactNode } from 'react';
+
+export interface PluginItem<Result = any, RunnerParams = any> {
+  avatar: string;
+  name: string;
+  runner: PluginRunner<RunnerParams, Result>;
+  schema: ChatCompletionFunctions;
+}
+export type PluginRender = (props: PluginRenderProps) => ReactNode;
+
+export type PluginRunner<Params = object, Result = any> = (params: Params) => Promise<Result>;
+
+export interface PluginRenderProps<Result = any> {
+  content: Result;
+  name: string;
+}

package/src/plugins/weather/Render.tsx

@@ -0,0 +1,53 @@
+import { Table } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginRenderProps } from '@/plugins/type';
+
+import { WeatherResult } from './type';
+
+const useStyles = createStyles(({ css, token }) => ({
+  time: css`
+    color: ${token.colorTextQuaternary};
+  `,
+  title: css`
+    font-weight: bold;
+  `,
+}));
+
+const Render = memo<PluginRenderProps<WeatherResult>>(({ content }) => {
+  const { t } = useTranslation('plugin');
+
+  const { styles } = useStyles();
+  return (
+    <div>
+      {content.map((item, index) => (
+        <Flexbox gap={8} key={`${item.city}-${index}`}>
+          <Flexbox align={'center'} distribution={'space-between'} horizontal>
+            <div className={styles.title}>{t('realtimeWeather.title', { city: item.city })}</div>
+            <div className={styles.time}>
+              {t('realtimeWeather.updateAt')}： {item.reporttime}
+            </div>
+          </Flexbox>
+          <Table
+            bordered
+            columns={[
+              { dataIndex: 'date', title: t('realtimeWeather.data.date') },
+              { dataIndex: 'week', title: t('realtimeWeather.data.week') },
+              { dataIndex: 'dayweather', title: t('realtimeWeather.data.dayweather') },
+              { dataIndex: 'daytemp_float', title: t('realtimeWeather.data.daytemp_float') },
+              { dataIndex: 'daywind', title: t('realtimeWeather.data.daywind') },
+              { dataIndex: 'nightweather', title: t('realtimeWeather.data.nightweather') },
+              { dataIndex: 'nighttemp_float', title: t('realtimeWeather.data.nighttemp_float') },
+            ]}
+            dataSource={item.casts}
+            pagination={false}
+          />
+        </Flexbox>
+      ))}
+    </div>
+  );
+});
+export default Render;

package/src/plugins/weather/index.ts

@@ -1,3 +1,6 @@
+import { PluginItem } from '@/plugins/type';
+import { WeatherResult } from '@/plugins/weather/type';
+
 import runner from './runner';
 
 const schema = {
@@ -15,6 +18,11 @@ const schema = {
   },
 };
 
-const getWeather = { avatar: '☂️', name: 'realtimeWeather', runner, schema };
+const getWeather: PluginItem<WeatherResult> = {
+  avatar: '☂️',
+  name: 'realtimeWeather',
+  runner,
+  schema,
+};
 
 export default getWeather;

package/src/plugins/weather/runner.ts

@@ -1,30 +1,35 @@
+import { PluginRunner } from '@/plugins/type';
+
+import { Response, WeatherParams, WeatherResult } from './type';
+
 const weatherBaseURL = 'https://restapi.amap.com/v3/weather/weatherInfo';
 
 const citySearchURL = 'https://restapi.amap.com/v3/config/district';
 
 const KEY = process.env.GAODE_WEATHER_KEY;
 
-interface WeatherParams {
-  city: string;
-  extensions?: 'base' | 'all';
-}
-
 const fetchCityCode = async (keywords: string): Promise<string> => {
   const URL = `${citySearchURL}?keywords=${keywords}&subdistrict=0&extensions=base&key=${KEY}`;
   const res = await fetch(URL);
 
   const data = await res.json();
+  console.log(data);
 
   return data.districts[0].adcode;
 };
 
-const fetchWeather = async ({ city, extensions = 'all' }: WeatherParams) => {
+const fetchWeather: PluginRunner<WeatherParams, WeatherResult> = async ({
+  city,
+  extensions = 'all',
+}) => {
   const cityCode = await fetchCityCode(city);
 
   const URL = `${weatherBaseURL}?city=${cityCode}&extensions=${extensions}&key=${KEY}`;
   const res = await fetch(URL);
 
-  return await res.json();
+  const data: Response = await res.json();
+
+  return data.forecasts;
 };
 
 export default fetchWeather;

package/src/plugins/weather/type.ts

@@ -0,0 +1,36 @@
+export interface WeatherParams {
+  city: string;
+  extensions?: 'base' | 'all';
+}
+export type WeatherResult = Forecast[];
+
+export interface Response {
+  count: string;
+  forecasts: Forecast[];
+  info: string;
+  infocode: string;
+  status: string;
+}
+
+export interface Forecast {
+  adcode: string;
+  casts: Cast[];
+  city: string;
+  province: string;
+  reporttime: string;
+}
+
+export interface Cast {
+  date: string;
+  daypower: string;
+  daytemp: string;
+  daytemp_float: string;
+  dayweather: string;
+  daywind: string;
+  nightpower: string;
+  nighttemp: string;
+  nighttemp_float: string;
+  nightweather: string;
+  nightwind: string;
+  week: string;
+}

package/src/plugins/webCrawler/index.ts

@@ -1,4 +1,7 @@
+import { PluginItem } from '@/plugins/type';
+
 import runner from './runner';
+import { Result } from './type';
 
 const schema = {
   description: '提取网页内容并总结',
@@ -15,6 +18,6 @@ const schema = {
   },
 };
 
-const getWeather = { avatar: '🕸', name: 'websiteCrawler', runner, schema };
+const getWeather: PluginItem<Result> = { avatar: '🕸', name: 'websiteCrawler', runner, schema };
 
 export default getWeather;

package/src/plugins/webCrawler/runner.ts

@@ -1,36 +1,12 @@
-export type DataResults = DataItem[];
+import { PluginRunner } from '@/plugins/type';
 
-export interface DataItem {
-  crawl: Crawl;
-  markdown: string;
-  metadata: Metadata;
-  screenshotUrl: any;
-  text: string;
-  url: string;
-}
-
-export interface Crawl {
-  depth: number;
-  httpStatusCode: number;
-  loadedTime: string;
-  loadedUrl: string;
-  referrerUrl: string;
-}
-
-export interface Metadata {
-  author: any;
-  canonicalUrl: string;
-  description: string;
-  keywords: string;
-  languageCode: string;
-  title: string;
-}
+import { DataResults, Result } from './type';
 
 const BASE_URL =
   'https://api.apify.com/v2/acts/apify~website-content-crawler/run-sync-get-dataset-items';
 const token = process.env.APIFY_API_KEY;
 
-const runner = async ({ url }: { url: string }) => {
+const runner: PluginRunner<{ url: string }, Result> = async ({ url }) => {
   // Prepare Actor input
   const input = {
     aggressivePrune: false,

package/src/plugins/webCrawler/type.ts

@@ -0,0 +1,32 @@
+export type DataResults = DataItem[];
+
+export type Result = {
+  content?: string;
+  title?: string;
+  url?: string;
+};
+export interface DataItem {
+  crawl: Crawl;
+  markdown: string;
+  metadata: Metadata;
+  screenshotUrl: any;
+  text: string;
+  url: string;
+}
+
+export interface Crawl {
+  depth: number;
+  httpStatusCode: number;
+  loadedTime: string;
+  loadedUrl: string;
+  referrerUrl: string;
+}
+
+export interface Metadata {
+  author: any;
+  canonicalUrl: string;
+  description: string;
+  keywords: string;
+  languageCode: string;
+  title: string;
+}

package/src/services/chatModel.ts

@@ -9,7 +9,6 @@ import { URLS } from './url';
 
 interface FetchChatModelOptions {
   signal?: AbortSignal | undefined;
-  withPlugin?: boolean;
 }
 
 /**
@@ -28,7 +27,7 @@ export const fetchChatModel = (
     params,
   );
 
-  return fetch(options?.withPlugin ? URLS.plugins : URLS.openai, {
+  return fetch(URLS.openai, {
     body: JSON.stringify(payload),
     headers: {
       'Content-Type': 'application/json',

package/src/services/plugin.ts

@@ -0,0 +1,30 @@
+import { LOBE_CHAT_ACCESS_CODE } from '@/const/fetch';
+import { useSettings } from '@/store/settings';
+import { OpenAIPluginPayload } from '@/types/plugin';
+
+import { URLS } from './url';
+
+interface FetchChatModelOptions {
+  signal?: AbortSignal | undefined;
+  withPlugin?: boolean;
+}
+
+/**
+ * 专门用于对话的 fetch
+ */
+export const fetchPlugin = async (
+  params: Partial<OpenAIPluginPayload>,
+  options?: FetchChatModelOptions,
+) => {
+  const res = await fetch(URLS.plugins, {
+    body: JSON.stringify(params),
+    headers: {
+      'Content-Type': 'application/json',
+      [LOBE_CHAT_ACCESS_CODE]: useSettings.getState().settings.password || '',
+    },
+    method: 'POST',
+    signal: options?.signal,
+  });
+
+  return await res.text();
+};

package/src/store/session/slices/chat/actions/message.ts

@@ -1,8 +1,9 @@
 import { StateCreator } from 'zustand/vanilla';
 
 import { fetchChatModel } from '@/services/chatModel';
+import { fetchPlugin } from '@/services/plugin';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
-import { ChatMessage } from '@/types/chatMessage';
+import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
 import { nanoid } from '@/utils/uuid';
@@ -42,8 +43,7 @@ export interface ChatMessageAction {
   generateMessage: (
     messages: ChatMessage[],
     assistantMessageId: string,
-    withPlugin?: boolean,
-  ) => Promise<{ isFunctionCall: boolean; output: string }>;
+  ) => Promise<{ isFunctionCall: boolean }>;
 
   /**
    * 实际获取 AI 响应
@@ -63,6 +63,7 @@ export interface ChatMessageAction {
    * @param text - 消息文本
    */
   sendMessage: (text: string) => Promise<void>;
+  triggerFunctionCall: (id: string) => Promise<void>;
 }
 
 export const chatMessage: StateCreator<
@@ -108,16 +109,13 @@ export const chatMessage: StateCreator<
     get().dispatchSession({ chats, id: activeId, type: 'updateSessionChat' });
   },
 
-  generateMessage: async (messages, assistantId, withPlugin) => {
+  generateMessage: async (messages, assistantId) => {
     const { dispatchMessage } = get();
     set({ chatLoadingId: assistantId });
     const config = agentSelectors.currentAgentConfigSafe(get());
 
     const fetcher = () =>
-      fetchChatModel(
-        { messages, model: config.model, ...config.params, plugins: config.plugins },
-        { withPlugin },
-      );
+      fetchChatModel({ messages, model: config.model, ...config.params, plugins: config.plugins });
 
     let output = '';
     let isFunctionCall = false;
@@ -139,13 +137,6 @@ export const chatMessage: StateCreator<
         // 如果是 function call
         if (isFunctionMessage(output)) {
           isFunctionCall = true;
-          // 设为 function
-          dispatchMessage({
-            id: assistantId,
-            key: 'role',
-            type: 'updateMessage',
-            value: 'function',
-          });
         }
 
         // 滚动到最后一条消息
@@ -158,11 +149,11 @@ export const chatMessage: StateCreator<
 
     set({ chatLoadingId: undefined });
 
-    return { isFunctionCall, output };
+    return { isFunctionCall };
   },
 
   realFetchAIResponse: async (messages, userMessageId) => {
-    const { dispatchMessage, generateMessage, activeTopicId } = get();
+    const { dispatchMessage, generateMessage, triggerFunctionCall, activeTopicId } = get();
 
     // 添加 systemRole
     const { systemRole, model } = agentSelectors.currentAgentConfigSafe(get());
@@ -191,31 +182,11 @@ export const chatMessage: StateCreator<
     dispatchMessage({ id: mid, key: 'fromModel', type: 'updateMessageExtra', value: model });
 
     // 生成 ai message
-    const { output, isFunctionCall } = await generateMessage(messages, mid);
+    const { isFunctionCall } = await generateMessage(messages, mid);
 
     // 如果是 function，则发送函数调用方法
     if (isFunctionCall) {
-      const { function_call } = JSON.parse(output);
-
-      dispatchMessage({
-        id: mid,
-        key: 'function_call',
-        type: 'updateMessage',
-        value: function_call,
-      });
-
-      await generateMessage(
-        [...messages, { content: '', function_call, id: mid, role: 'assistant' } as ChatMessage],
-        mid,
-        true,
-      );
-
-      dispatchMessage({
-        id: mid,
-        key: 'role',
-        type: 'updateMessage',
-        value: 'assistant',
-      });
+      triggerFunctionCall(mid);
     }
   },
 
@@ -245,7 +216,6 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(histories, latestMsg.id);
   },
-
   sendMessage: async (message) => {
     const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
       get();
@@ -270,4 +240,53 @@ export const chatMessage: StateCreator<
       autocompleteSessionAgentMeta(session.id);
     }
   },
+
+  triggerFunctionCall: async (id) => {
+    const { dispatchMessage, generateMessage } = get();
+    const session = sessionSelectors.currentSession(get());
+
+    if (!session) return;
+
+    const message = session.chats[id];
+    if (!message) return;
+
+    let payload: OpenAIFunctionCall = { name: '' };
+    if (message.content) {
+      const { function_call } = JSON.parse(message.content);
+      dispatchMessage({ id, key: 'function_call', type: 'updateMessage', value: function_call });
+      dispatchMessage({ id, key: 'content', type: 'updateMessage', value: '' });
+      payload = function_call;
+    } else {
+      if (message.function_call) {
+        payload = message.function_call;
+      }
+    }
+
+    if (!payload.name) return;
+
+    // const fid = nanoid();
+    dispatchMessage({ id, key: 'role', type: 'updateMessage', value: 'function' });
+    dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.name });
+    dispatchMessage({ id, key: 'function_call', type: 'updateMessage', value: payload });
+
+    // dispatchMessage({
+    //   id: id,
+    //   message: FUNCTION_LOADING,
+    //   parentId: message.,
+    //   role: 'function',
+    //   type: 'addMessage',
+    // });
+
+    const data = await fetchPlugin(payload);
+
+    dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
+
+    const mid = nanoid();
+
+    dispatchMessage({ id: mid, message: LOADING_FLAT, role: 'assistant', type: 'addMessage' });
+
+    const chats = chatSelectors.currentChats(get());
+
+    await generateMessage(chats, mid);
+  },
 });

package/src/store/session/slices/chat/selectors/utils.test.ts

@@ -295,7 +295,7 @@ describe('organizeChats', () => {
       const result = organizeChats(session, avatar);
       const meta = result[0].meta;
 
-      expect(meta.avatar).toBe(avatar.assistant);
+      expect(meta.avatar).toBe('assistant-avatar');
       expect(meta.title).toBeUndefined();
     });
 
@@ -329,6 +329,7 @@ describe('organizeChats', () => {
           function_call: {
             name: 'realtimeWeather',
           },
+          name: 'realtimeWeather',
         } as ChatMessage;
 
         session.chats[message.id] = message;
@@ -336,7 +337,7 @@ describe('organizeChats', () => {
         const result = organizeChats(session, avatar);
         const meta = result[3].meta;
 
-        expect(meta.avatar).toBe('☂️');
+        expect(meta.avatar).toBe('🧩');
         expect(meta.title).toBe('realtimeWeather');
       });
     });

package/src/store/session/slices/chat/selectors/utils.ts

@@ -1,4 +1,4 @@
-import pluginList from '@/plugins';
+import { PluginsMap } from '@/plugins';
 import { ChatMessage } from '@/types/chatMessage';
 import { LobeAgentSession } from '@/types/session';
 
@@ -27,9 +27,10 @@ export const organizeChats = (
       }
 
       case 'function': {
-        const plugin = pluginList.find((p) => p.name === message.function_call?.name);
+        const plugin = PluginsMap[message.name || ''];
+
         return {
-          avatar: plugin?.avatar || '🧩',
+          avatar: '🧩',
           title: plugin?.name || 'plugin-unknown',
         };
       }