@lobehub/chat 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -2,6 +2,74 @@
 
 # Changelog
 
+## [Version 0.11.0](https://github.com/lobehub/lobe-chat/compare/v0.10.2...v0.11.0)
+
+<sup>Released on **2023-07-23**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Remove langchain, 优化代码.
+
+#### ✨ Features
+
+- **misc**: 支持查询天气.
+
+#### 💄 Styles
+
+- **misc**: Update manifest, 增加国际化文案.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Remove langchain ([7b0f96c](https://github.com/lobehub/lobe-chat/commit/7b0f96c))
+- **misc**: 优化代码 ([6a8f7df](https://github.com/lobehub/lobe-chat/commit/6a8f7df))
+
+#### What's improved
+
+- **misc**: 支持查询天气 ([34bf285](https://github.com/lobehub/lobe-chat/commit/34bf285))
+
+#### Styles
+
+- **misc**: Update manifest ([ea9e8de](https://github.com/lobehub/lobe-chat/commit/ea9e8de))
+- **misc**: 增加国际化文案 ([f5e8d7c](https://github.com/lobehub/lobe-chat/commit/f5e8d7c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.10.2](https://github.com/lobehub/lobe-chat/compare/v0.10.1...v0.10.2)
+
+<sup>Released on **2023-07-23**</sup>
+
+#### 💄 Styles
+
+- **misc**: 优化模型在 list 中的展示逻辑.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 优化模型在 list 中的展示逻辑 ([4bdf3c5](https://github.com/lobehub/lobe-chat/commit/4bdf3c5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.10.1](https://github.com/lobehub/lobe-chat/compare/v0.10.0...v0.10.1)
 
 <sup>Released on **2023-07-22**</sup>

package/README.md

@@ -8,9 +8,7 @@
 
 <h1>Lobe Chat</h1>
 
-Lobe Chat is an open-source chatbot client using LangChain
-
-Typescript and Next.js
+Lobe Chat is an open-source chatbot client using OpenAI and Next.js
 
 [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
 

package/next.config.mjs

@@ -1,13 +1,14 @@
 import nextPWA from 'next-pwa';
 
+const isProd = process.env.NODE_ENV === 'production';
+const API_END_PORT_URL = process.env.API_END_PORT_URL || '';
+
 const withPWA = nextPWA({
   dest: 'public',
   register: true,
   skipWaiting: true,
-  disable: process.env.NODE_ENV === 'development',
 });
 
-const API_END_PORT_URL = process.env.API_END_PORT_URL || '';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -37,4 +38,4 @@ const nextConfig = {
   },
 };
 
-export default withPWA(nextConfig);
+export default isProd ? withPWA(nextConfig) : nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -76,7 +76,6 @@
     "gpt-tokenizer": "^2",
     "i18next": "^23",
     "immer": "^10",
-    "langchain": "latest",
     "lodash-es": "^4",
     "lucide-react": "latest",
     "nanoid": "^4",

package/public/manifest.json

@@ -5,20 +5,17 @@
     {
       "src": "icons/icon-72x72.png",
       "sizes": "72x72",
-      "type": "image/png",
-      "purpose": "any maskable"
+      "type": "image/png"
     },
     {
       "src": "icons/icon-96x96.png",
       "sizes": "96x96",
-      "type": "image/png",
-      "purpose": "any maskable"
+      "type": "image/png"
     },
     {
       "src": "icons/icon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
+      "type": "image/png"
     }
   ],
   "name": "LobeChat",

package/src/locales/default/common.ts

@@ -4,6 +4,7 @@ export default {
   'agentAvatar': '头像',
   'agentDescription': '描述',
   'agentDescriptionPlaceholder': '请输入描述',
+  'agentMaxToken': '会话最大长度',
   'agentModel': '模型',
   'agentName': '名称',
   'agentNamePlaceholder': '请输入名称',

package/src/pages/_app.page.tsx

@@ -3,11 +3,9 @@ import type { AppProps } from 'next/app';
 
 import Layout from '@/layout';
 
-export default ({ Component, pageProps }: AppProps) => {
-  return (
-    <Layout>
-      <Component {...pageProps} />
-      <Analytics />
-    </Layout>
-  );
-};
+export default ({ Component, pageProps }: AppProps) => (
+  <Layout>
+    <Component {...pageProps} />
+    <Analytics />
+  </Layout>
+);

package/src/pages/api/openai.api.ts

@@ -1,8 +1,13 @@
 import { OpenAIStream, StreamingTextResponse } from 'ai';
 import { Configuration, OpenAIApi } from 'openai-edge';
+import { ChatCompletionFunctions, ChatCompletionRequestMessage } from 'openai-edge/types/api';
 
 import { OpenAIStreamPayload } from '@/types/openai';
 
+import { plugins } from './plugins';
+
+export const runtime = 'edge';
+
 const isDev = process.env.NODE_ENV === 'development';
 const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
 
@@ -13,19 +18,38 @@ const config = new Configuration({
 
 const openai = new OpenAIApi(config, isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined);
 
-export const runtime = 'edge';
+const functions: ChatCompletionFunctions[] = plugins.map((f) => f.schema);
 
 export default async function handler(req: Request) {
   // Extract the `messages` from the body of the request
   const { messages, ...params } = (await req.json()) as OpenAIStreamPayload;
 
-  console.log(params);
+  const formatMessages = messages.map((m) => ({ content: m.content, role: m.role }));
+
   const response = await openai.createChatCompletion({
+    functions,
+    messages: formatMessages,
     stream: true,
     ...params,
-    messages: messages.map((m) => ({ content: m.content, role: m.role })),
   });
 
-  const stream = OpenAIStream(response);
+  const stream = OpenAIStream(response, {
+    experimental_onFunctionCall: async ({ name, arguments: args }, createFunctionCallMessages) => {
+      const func = plugins.find((f) => f.name === name);
+
+      if (func) {
+        const result = await func.runner(args as any);
+
+        const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
+
+        return openai.createChatCompletion({
+          functions,
+          messages: [...formatMessages, ...newMessages],
+          stream: true,
+          ...params,
+        });
+      }
+    },
+  });
   return new StreamingTextResponse(stream);
 }

package/src/pages/api/plugins/index.ts

@@ -0,0 +1,3 @@
+import getWeather from './weather';
+
+export const plugins = [getWeather];

package/src/pages/api/plugins/weather/index.ts

@@ -0,0 +1,20 @@
+import runner from './runner';
+
+const schema = {
+  description: '获取当前天气情况',
+  name: 'fetchWeather',
+  parameters: {
+    properties: {
+      city: {
+        description: '城市名称',
+        type: 'string',
+      },
+    },
+    required: ['city'],
+    type: 'object',
+  },
+};
+
+const getWeather = { name: 'fetchWeather', runner, schema };
+
+export default getWeather;

package/src/pages/api/plugins/weather/runner.ts

@@ -0,0 +1,30 @@
+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();
+
+  return data.districts[0].adcode;
+};
+
+const fetchWeather = async ({ city, extensions = 'all' }: WeatherParams) => {
+  const cityCode = await fetchCityCode(city);
+
+  const URL = `${weatherBaseURL}?city=${cityCode}&extensions=${extensions}&key=${KEY}`;
+  const res = await fetch(URL);
+
+  return await res.json();
+};
+
+export default fetchWeather;

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -6,8 +6,9 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 import { DEFAULT_TITLE } from '@/store/session/slices/agentConfig';
+import { useSettings } from '@/store/settings';
 
 import { useStyles } from './style';
 
@@ -22,22 +23,37 @@ interface SessionItemProps {
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
   const { t } = useTranslation('common');
   const { styles, theme, cx } = useStyles();
-  const [title, description, systemRole, avatar, avatarBackground, updateAt, model, removeSession] =
-    useSessionStore((s) => {
-      const session = sessionSelectors.getSessionById(id)(s);
-      const meta = session.meta;
-      const systemRole = session.config.systemRole;
-      return [
-        meta.title,
-        meta.description,
-        systemRole,
-        sessionSelectors.getAgentAvatar(meta),
-        meta.backgroundColor,
-        session?.updateAt,
-        session.config.model,
-        s.removeSession,
-      ];
-    }, shallow);
+  const [defaultModel] = useSettings((s) => [s.settings.model], shallow);
+
+  const [
+    title,
+    description,
+    systemRole,
+    avatar,
+    avatarBackground,
+    updateAt,
+    model,
+    chatLength,
+    removeSession,
+  ] = useSessionStore((s) => {
+    const session = sessionSelectors.getSessionById(id)(s);
+    const meta = session.meta;
+    const systemRole = session.config.systemRole;
+    return [
+      meta.title,
+      meta.description,
+      systemRole,
+      sessionSelectors.getAgentAvatar(meta),
+      meta.backgroundColor,
+      session?.updateAt,
+      session.config.model,
+      chatSelectors.currentChats(s).length,
+      s.removeSession,
+    ];
+  }, shallow);
+
+  const showModel = model !== defaultModel;
+  const showChatLength = chatLength > 0;
 
   return (
     <Flexbox className={styles.container} style={{ position: 'relative' }}>
@@ -57,9 +73,25 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         description={
           <Flexbox gap={4}>
             <Flexbox>{description || systemRole}</Flexbox>
-            <Flexbox horizontal>
-              <Tag bordered={false}>{model}</Tag>
-            </Flexbox>
+
+            {!(showModel || showChatLength) ? undefined : (
+              <Flexbox horizontal>
+                {showModel && (
+                  <Tag bordered={false} style={{ color: theme.colorTextSecondary }}>
+                    {model}
+                  </Tag>
+                )}
+                {/*{showChatLength && (*/}
+                {/*  <Tag*/}
+                {/*    bordered={false}*/}
+                {/*    style={{ color: theme.colorTextSecondary, display: 'flex', gap: 4 }}*/}
+                {/*  >*/}
+                {/*    <Icon icon={LucideMessageCircle} />*/}
+                {/*    {chatLength}*/}
+                {/*  </Tag>*/}
+                {/*)}*/}
+              </Flexbox>
+            )}
           </Flexbox>
         }
         loading={loading}

package/src/pages/chat/[id]/Config/ReadMode.tsx

@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { LucideBrain, LucideThermometer, WholeWord } from 'lucide-react';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -31,26 +32,26 @@ const ReadMode = memo(() => {
   const title = useSessionStore(agentSelectors.currentAgentTitle, shallow);
   const model = useSessionStore(agentSelectors.currentAgentModel, shallow);
 
+  const { t } = useTranslation('common');
   return (
-    <Center gap={12} padding={'32px 16px'} style={{ marginTop: 8 }}>
+    <Center gap={12} paddingBlock={16} style={{ marginTop: 8 }}>
       <Avatar avatar={avatar} size={100} />
       <Flexbox className={styles.title}>{title || DEFAULT_TITLE}</Flexbox>
       <Flexbox className={styles.model}>{model}</Flexbox>
       <Flexbox className={styles.desc}>{session.meta.description}</Flexbox>
 
       <Flexbox flex={1} gap={12} width={'100%'}>
-        <ConfigCell icon={LucideBrain} label={'提示词'} />
-
+        <ConfigCell icon={LucideBrain} label={t('agentPrompt')} />
         <ConfigCellGroup
           items={[
             {
               icon: LucideThermometer,
-              label: '温度',
+              label: t('modelTemperature'),
               value: session.config.params.temperature,
             },
             {
               icon: WholeWord,
-              label: '会话最大长度',
+              label: t('agentMaxToken'),
               value: session.config.params.max_tokens,
             },
           ]}

package/src/services/url.ts

@@ -3,6 +3,5 @@ const isDev = process.env.NODE_ENV === 'development';
 const prefix = isDev ? '-dev' : '';
 
 export const URLS = {
-  chain: '/api/chain' + prefix,
   openai: '/api/openai' + prefix,
 };

package/src/pages/api/LangChainStream.ts

@@ -1,95 +0,0 @@
-import { LLMChain } from 'langchain/chains';
-import { ChatOpenAI } from 'langchain/chat_models/openai';
-import {
-  AIMessagePromptTemplate,
-  ChatPromptTemplate,
-  HumanMessagePromptTemplate,
-  SystemMessagePromptTemplate,
-} from 'langchain/prompts';
-
-import { LangChainParams } from '@/types/langchain';
-
-const isDev = process.env.NODE_ENV === 'development';
-const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
-
-export function LangChainStream(payload: LangChainParams) {
-  const { prompts, vars, llm } = payload;
-
-  // 将 payload 中的消息转换为 ChatOpenAI 所需的 HumanChatMessage、SystemChatMessage 和 AIChatMessage 类型
-  const chatPrompt = ChatPromptTemplate.fromPromptMessages(
-    prompts.map((m) => {
-      switch (m.role) {
-        default:
-        case 'user': {
-          return HumanMessagePromptTemplate.fromTemplate(m.content);
-        }
-        case 'system': {
-          return SystemMessagePromptTemplate.fromTemplate(m.content);
-        }
-
-        case 'assistant': {
-          return AIMessagePromptTemplate.fromTemplate(m.content);
-        }
-      }
-    }),
-  );
-
-  // 使用 TextEncoder 将字符串转换为字节数组，以便在 ReadableStream 中发送
-  const encoder = new TextEncoder();
-
-  // 初始化换行符计数器
-
-  return new ReadableStream({
-    async start(controller) {
-      let newlineCounter = 0;
-
-      const chat = new ChatOpenAI(
-        {
-          streaming: true,
-          ...llm,
-
-          callbacks: [
-            {
-              handleLLMNewToken(token) {
-                // 如果 message 是换行符，且 newlineCounter 小于 2，那么跳过该换行符
-                if (newlineCounter < 2 && token === '\n') {
-                  return;
-                }
-
-                // 将 message 编码为字节并添加到流中
-                const queue = encoder.encode(token);
-                controller.enqueue(queue);
-                newlineCounter++;
-              },
-            },
-          ],
-          // 暂时设定不重试 ，后续看是否需要支持重试
-          maxRetries: 0,
-        },
-        isDev && OPENAI_PROXY_URL ? { basePath: OPENAI_PROXY_URL } : undefined,
-      );
-
-      const chain = new LLMChain({
-        callbacks: [
-          {
-            handleChainError(err: Error): Promise<void> | void {
-              console.log(err.message);
-            },
-          },
-        ],
-        llm: chat,
-        prompt: chatPrompt,
-        verbose: true,
-      });
-      try {
-        // 使用转换后的聊天消息作为输入开始聊天
-        await chain.call(vars);
-        // 完成后，关闭流
-        controller.close();
-      } catch (error) {
-        // 如果在执行过程中发生错误，向流发送错误
-        controller.error(error);
-      }
-    },
-  });
-}

package/src/pages/api/chain.api.ts

@@ -1,17 +0,0 @@
-import { LangChainParams } from '@/types/langchain';
-
-import { LangChainStream } from './LangChainStream';
-
-if (!process.env.OPENAI_API_KEY) {
-  throw new Error('Missing env var from OpenAI');
-}
-
-export const config = {
-  runtime: 'edge',
-};
-
-export default async function handler(request: Request) {
-  const payload = (await request.json()) as LangChainParams;
-
-  return new Response(LangChainStream(payload));
-}

package/src/services/langChain.ts

@@ -1,18 +0,0 @@
-import { URLS } from '@/services/url';
-import { LangChainParams } from '@/types/langchain';
-import { fetchAIFactory } from '@/utils/fetch';
-
-/**
- * 专门用于 FlowChain 的 fetch
- */
-export const fetchLangChain = fetchAIFactory(
-  (params: LangChainParams, signal?: AbortSignal | undefined) =>
-    fetch(URLS.chain, {
-      body: JSON.stringify(params),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-      signal,
-    }),
-);

package/src/types/langchain.ts

@@ -1,34 +0,0 @@
-import { ChatMessage } from '@lobehub/ui';
-
-export interface LangChainParams {
-  llm: {
-    /**
-     *  控制生成文本中的惩罚系数，用于减少重复性
-     */
-    frequency_penalty?: number;
-    /**
-     *  生成文本的最大长度
-     */
-    max_tokens?: number;
-    model: string;
-    /**
-     *  控制生成文本中的惩罚系数，用于减少主题的变化
-     */
-    presence_penalty?: number;
-    /**
-     *  生成文本的随机度量，用于控制文本的创造性和多样性
-     * @default 0.6
-     */
-    temperature: number;
-    /**
-     *  控制生成文本中最高概率的单个令牌
-     */
-    top_p?: number;
-  };
-
-  /**
-   *  聊天信息列表
-   */
-  prompts: ChatMessage[];
-  vars: Record<string, string>;
-}