@lobehub/chat 0.26.0 → 0.27.0

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/Render.tsx

@@ -0,0 +1,85 @@
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginRenderProps } from '@/plugins/type';
+
+import { Result } from './type';
+
+const useStyles = createStyles(({ css, token, cx }) => {
+  const title = css`
+    margin-top: 4px;
+    font-size: 16px;
+  `;
+  return {
+    container: css`
+      :not(:last-child) {
+        border-bottom: 1px solid ${token.colorBorder};
+      }
+    `,
+    desc: css`
+      color: ${token.colorTextTertiary};
+    `,
+    displayLink: css`
+      color: ${token.colorTextQuaternary};
+    `,
+    favicon: css`
+      border-radius: 50%;
+    `,
+    link: css`
+      &:hover {
+        .${cx(title)} {
+          text-decoration: underline;
+        }
+      }
+    `,
+    title,
+  };
+});
+
+const Render = memo<PluginRenderProps<Result>>(({ content }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox gap={8}>
+      <Flexbox>
+        {content.map((item) => (
+          <Flexbox
+            className={styles.container}
+            distribution={'space-between'}
+            horizontal
+            key={item.link}
+            padding={12}
+          >
+            <Flexbox>
+              <Link className={styles.link} href={item.link!} target={'_blank'}>
+                <Flexbox>
+                  <Flexbox align={'center'} gap={12} horizontal>
+                    {item.favicon && (
+                      <img
+                        alt={item.title || item.link}
+                        className={styles.favicon}
+                        height={24}
+                        src={item.favicon}
+                        width={24}
+                      />
+                    )}
+                    <Flexbox>
+                      <Flexbox className={styles.desc}>{item.source}</Flexbox>
+                      <Flexbox className={styles.displayLink}>{item.displayed_link}</Flexbox>
+                    </Flexbox>
+                  </Flexbox>
+                  <Flexbox className={styles.title}>{item.title}</Flexbox>
+                </Flexbox>
+              </Link>
+              <Flexbox className={styles.desc}>
+                {item.date ? `${item.date} - ${item.content}` : item.content}
+              </Flexbox>
+            </Flexbox>
+          </Flexbox>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+export default Render;

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',
@@ -98,6 +30,8 @@ const fetchResult = async ({ keywords }: { keywords: string }) => {
   return results.map((r) => ({
     content: r.snippet,
     date: r.date,
+    displayed_link: r.displayed_link,
+    favicon: r.favicon,
     link: r.link,
     source: r.source,
     title: r.title,

package/src/plugins/searchEngine/type.ts

@@ -0,0 +1,82 @@
+export type OrganicResults = OrganicResult[];
+
+export interface SearchItem {
+  content: string;
+  date?: string;
+  displayed_link?: string;
+  favicon?: 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();
+};