@lobehub/chat 0.25.0 → 0.26.1

package/src/pages/setting/index.page.tsx

@@ -1,39 +1,22 @@
-import Head from 'next/head';
-import { memo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
-import { createI18nNext } from '@/locales/create';
-import ChatLayout from '@/pages/chat/layout';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Header from './Header';
 import SettingForm from './SettingForm';
+import SettingLayout from './layout';
 
-const initI18n = createI18nNext('setting');
-
-const SettingLayout = memo(() => {
-  const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('header.global'));
-
-  useEffect(() => {
-    initI18n.finally();
-  }, []);
+const Setting = memo(() => {
   return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <ChatLayout>
-        <Header />
-        <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
-          <HeaderSpacing />
-          <SettingForm />
-        </Flexbox>
-      </ChatLayout>
-    </>
+    <SettingLayout>
+      <Header />
+      <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+        <HeaderSpacing />
+        <SettingForm />
+      </Flexbox>
+    </SettingLayout>
   );
 });
 
-export default SettingLayout;
+export default Setting;

package/src/pages/setting/layout.tsx

@@ -0,0 +1,35 @@
+import Head from 'next/head';
+import { ReactNode, memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SideBar from '@/features/SideBar';
+import { createI18nNext } from '@/locales/create';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+const initI18n = createI18nNext('setting');
+
+const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('header.global'));
+
+  useEffect(() => {
+    initI18n.finally();
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <Flexbox horizontal width={'100%'}>
+        <SideBar />
+        <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
+          {children}
+        </Flexbox>
+      </Flexbox>
+    </>
+  );
+});
+
+export default SettingLayout;

package/src/plugins/Render.ts

@@ -0,0 +1,8 @@
+import { PluginRender } from '@/plugins/type';
+
+import getWeather from './weather';
+import WeatherRender from './weather/Render';
+
+export const PluginsRender: Record<string, PluginRender> = {
+  [getWeather.name]: WeatherRender,
+};

package/src/plugins/index.ts

@@ -1,7 +1,11 @@
+import type { PluginItem } from '@/plugins/type';
+
 import searchEngine from './searchEngine';
 import getWeather from './weather';
 import webCrawler from './webCrawler';
 
-const pluginList = [getWeather, searchEngine, webCrawler];
-
-export default pluginList;
+export const PluginsMap: Record<string, PluginItem> = {
+  [getWeather.name]: getWeather,
+  [searchEngine.name]: searchEngine,
+  [webCrawler.name]: webCrawler,
+};

package/src/plugins/searchEngine/index.ts

@@ -1,6 +1,9 @@
 import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
+import { PluginItem } from '@/plugins/type';
+
 import runner from './runner';
+import { Result } from './type';
 
 const schema: ChatCompletionFunctions = {
   description: '查询搜索引擎获取信息',
@@ -17,7 +20,7 @@ const schema: ChatCompletionFunctions = {
   },
 };
 
-const searchEngine = {
+const searchEngine: PluginItem<Result> = {
   avatar: '🔍',
   name: 'searchEngine',
   runner,

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

@@ -1,6 +1,6 @@
 import { merge } from 'lodash-es';
 
-import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
+import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
 import { initialLobeAgentConfig } from '@/store/session';
 import { useSettings } from '@/store/settings';
 import type { OpenAIStreamPayload } from '@/types/openai';
@@ -9,7 +9,6 @@ import { URLS } from './url';
 
 interface FetchChatModelOptions {
   signal?: AbortSignal | undefined;
-  withPlugin?: boolean;
 }
 
 /**
@@ -28,10 +27,11 @@ 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',
+      [LOBE_CHAT_ACCESS_CODE]: useSettings.getState().settings.password || '',
       [OPENAI_API_KEY_HEADER_KEY]: useSettings.getState().settings.OPENAI_API_KEY || '',
     },
     method: 'POST',

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();
+};