@lobehub/chat 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+## [Version 0.22.0](https://github.com/lobehub/lobe-chat/compare/v0.21.0...v0.22.0)
+
+<sup>Released on **2023-07-25**</sup>
+
+#### ✨ Features
+
+- **misc**: 支持使用自定义 OpenAI Key.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持使用自定义 OpenAI Key, closes [#20](https://github.com/lobehub/lobe-chat/issues/20) ([fb454a0](https://github.com/lobehub/lobe-chat/commit/fb454a0))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.21.0](https://github.com/lobehub/lobe-chat/compare/v0.20.0...v0.21.0)
+
+<sup>Released on **2023-07-25**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Move component folder.
+
+#### ✨ Features
+
+- **misc**: 支持快捷配置模型、温度.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Move component folder ([fb85d16](https://github.com/lobehub/lobe-chat/commit/fb85d16))
+
+#### What's improved
+
+- **misc**: 支持快捷配置模型、温度, closes [#19](https://github.com/lobehub/lobe-chat/issues/19) ([31daee1](https://github.com/lobehub/lobe-chat/commit/31daee1))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.20.0](https://github.com/lobehub/lobe-chat/compare/v0.19.0...v0.20.0)
 
 <sup>Released on **2023-07-25**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/{features → components}/SliderWithInput/index.tsx

@@ -20,6 +20,7 @@ const SliderWithInput = memo<SliderSingleProps>(
           onChange={handleOnchange}
           step={step}
           style={{ flex: 1 }}
+          tooltip={{ open: false }}
           value={typeof value === 'number' ? value : 0}
           {...props}
         />

package/src/const/fetch.ts

@@ -1 +1,3 @@
 export const OPENAI_SERVICE_ERROR_CODE = 555;
+
+export const OPENAI_API_KEY_HEADER_KEY = 'X-OPENAI-API-KEY';

package/src/locales/default/setting.ts

@@ -102,6 +102,7 @@ export default {
     temperature: {
       desc: '值越大，回复越随机',
       title: '随机性',
+      titleWithValue: '随机性 {{value}}',
     },
     title: '模型设置',
     topP: {

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

@@ -1,5 +1,6 @@
 import { StreamingTextResponse } from 'ai';
 
+import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
 import { createChatCompletion } from './openai';
@@ -8,8 +9,9 @@ export const runtime = 'edge';
 
 export default async function handler(req: Request) {
   const payload = (await req.json()) as OpenAIStreamPayload;
+  const apiKey = req.headers.get(OPENAI_API_KEY_HEADER_KEY);
 
-  const stream = await createChatCompletion(payload);
+  const stream = await createChatCompletion({ OPENAI_API_KEY: apiKey, payload });
 
   return new StreamingTextResponse(stream);
 }

package/src/pages/api/openai.ts

@@ -9,20 +9,30 @@ import pluginList from '../../plugins';
 const isDev = process.env.NODE_ENV === 'development';
 const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
 
-// Create an OpenAI API client (that's edge friendly!)
-const config = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY,
-});
-
-export const openai = new OpenAIApi(
-  config,
-  isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined,
-);
-
-export const createChatCompletion = async (
-  payload: OpenAIStreamPayload,
-  callbacks?: (payload: OpenAIStreamPayload) => OpenAIStreamCallbacks,
-) => {
+// 创建 OpenAI 实例
+export const createOpenAI = (OPENAI_API_KEY: string | null) => {
+  const config = new Configuration({
+    apiKey: OPENAI_API_KEY ?? process.env.OPENAI_API_KEY,
+  });
+
+  return new OpenAIApi(config, isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined);
+};
+
+interface CreateChatCompletionOptions {
+  OPENAI_API_KEY: string | null;
+  callbacks?: (payload: OpenAIStreamPayload) => OpenAIStreamCallbacks;
+  payload: OpenAIStreamPayload;
+}
+
+export const createChatCompletion = async ({
+  payload,
+  callbacks,
+  OPENAI_API_KEY,
+}: CreateChatCompletionOptions) => {
+  // ============  0.创建 OpenAI 实例   ============ //
+
+  const openai = createOpenAI(OPENAI_API_KEY);
+
   const { messages, plugins: enabledPlugins, ...params } = payload;
 
   // ============  1. 前置处理 functions   ============ //
@@ -42,6 +52,8 @@ export const createChatCompletion = async (
   // ============  2. 前置处理 messages   ============ //
   const formatMessages = messages.map((m) => ({ content: m.content, role: m.role }));
 
+  // ============  3. 发送请求   ============ //
+
   const requestParams = { functions, messages: formatMessages, stream: true, ...params };
 
   const response = await openai.createChatCompletion(requestParams);

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

@@ -1,36 +1,47 @@
 import { StreamingTextResponse } from 'ai';
 import { ChatCompletionRequestMessage } from 'openai-edge';
 
+import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
 import pluginList from '../../plugins';
-import { createChatCompletion, openai } from './openai';
+import { createChatCompletion, createOpenAI } from './openai';
 
 export const runtime = 'edge';
 
 export default async function handler(req: Request) {
   const payload = (await req.json()) as OpenAIStreamPayload;
+  const apiKey = req.headers.get(OPENAI_API_KEY_HEADER_KEY);
 
-  const stream = await createChatCompletion(payload, (payload) => ({
-    experimental_onFunctionCall: async ({ name, arguments: args }, createFunctionCallMessages) => {
-      console.log(`检测到 functionCall: ${name}`);
+  const openai = createOpenAI(apiKey);
 
-      const func = pluginList.find((f) => f.name === name);
+  const stream = await createChatCompletion({
+    OPENAI_API_KEY: apiKey,
+    callbacks: (payload) => ({
+      experimental_onFunctionCall: async (
+        { name, arguments: args },
+        createFunctionCallMessages,
+      ) => {
+        console.log(`检测到 functionCall: ${name}`);
 
-      if (func) {
-        const result = await func.runner(args as any);
+        const func = pluginList.find((f) => f.name === name);
 
-        console.log(`[${name}]`, args, `result:`, JSON.stringify(result, null, 2));
+        if (func) {
+          const result = await func.runner(args as any);
 
-        const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
+          console.log(`[${name}]`, args, `result:`, JSON.stringify(result, null, 2));
 
-        return openai.createChatCompletion({
-          ...payload,
-          messages: [...payload.messages, ...newMessages],
-        });
-      }
-    },
-  }));
+          const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
+
+          return openai.createChatCompletion({
+            ...payload,
+            messages: [...payload.messages, ...newMessages],
+          });
+        }
+      },
+    }),
+    payload,
+  });
 
   return new StreamingTextResponse(stream);
 }

package/src/pages/chat/[id]/Conversation/Input/Action.tsx

@@ -1,21 +1,80 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Popconfirm } from 'antd';
-import { BrainCog, Eraser, Thermometer, Timer } from 'lucide-react';
+import { Dropdown, Popconfirm, Popover } from 'antd';
+import { BrainCog, Eraser, Thermometer } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
-import { useSessionStore } from '@/store/session';
+import SliderWithInput from '@/components/SliderWithInput';
+import { agentSelectors, useSessionStore } from '@/store/session';
+import { LanguageModel } from '@/types/llm';
 
 const InputActions = memo(() => {
   const { t } = useTranslation('setting');
-  const [clearMessage] = useSessionStore((s) => [s.clearMessage], shallow);
+  const [clearMessage, updateAgentConfig] = useSessionStore(
+    (s) => [s.clearMessage, s.updateAgentConfig],
+    shallow,
+  );
+  const [model, temperature] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfigSafe(s);
+    return [
+      config.model,
+      config.params.temperature,
+      // config.historyCount
+    ];
+  }, shallow);
 
   return (
     <>
-      <ActionIcon icon={BrainCog} title={t('settingModel.model.title')} />
-      <ActionIcon icon={Thermometer} title={t('settingModel.temperature.title')} />
-      <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />
+      <Dropdown
+        menu={{
+          activeKey: model,
+          items: Object.values(LanguageModel).map((i) => ({ key: i, label: i })),
+          onClick: (e) => {
+            updateAgentConfig({ model: e.key as LanguageModel });
+          },
+        }}
+        trigger={['click']}
+      >
+        <ActionIcon icon={BrainCog} title={t('settingModel.model.title')} />
+      </Dropdown>
+      <Popover
+        content={
+          <SliderWithInput
+            max={1}
+            min={0}
+            onChange={(v) => {
+              updateAgentConfig({ params: { temperature: v } });
+            }}
+            step={0.1}
+            style={{ width: 120 }}
+            value={temperature}
+          />
+        }
+        trigger={'click'}
+      >
+        <ActionIcon
+          icon={Thermometer}
+          title={t('settingModel.temperature.titleWithValue', { value: temperature })}
+        />
+      </Popover>
+      {/*TODO 历史记录功能实现 */}
+      {/*<Popover*/}
+      {/*  content={*/}
+      {/*    <SliderWithInput*/}
+      {/*      min={0}*/}
+      {/*      onChange={(v) => {*/}
+      {/*        updateAgentConfig({ historyCount: v });*/}
+      {/*      }}*/}
+      {/*      step={1}*/}
+      {/*      style={{ width: 120 }}*/}
+      {/*      value={historyCount}*/}
+      {/*    />*/}
+      {/*  }*/}
+      {/*  trigger={'click'}*/}
+      {/*>*/}
+      {/*  <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />*/}
+      {/*</Popover>*/}
       <Popconfirm
         cancelText={t('cancel', { ns: 'common' })}
         okButtonProps={{ danger: true }}

package/src/pages/chat/[id]/edit/AgentConfig/index.tsx

@@ -6,10 +6,10 @@ import { debounce } from 'lodash-es';
 import { BrainCog, MessagesSquare } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import SliderWithInput from 'src/components/SliderWithInput';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import SliderWithInput from '@/features/SliderWithInput';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import type { LobeAgentConfig } from '@/types/session';

package/src/pages/setting/SettingForm.tsx

@@ -5,11 +5,11 @@ import { debounce } from 'lodash-es';
 import { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import SliderWithInput from 'src/components/SliderWithInput';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import SliderWithInput from '@/features/SliderWithInput';
 import { options } from '@/locales/options';
 import { settingsSelectors, useSettings } from '@/store/settings';
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
@@ -107,7 +107,7 @@ const SettingForm = memo(() => {
           children: <Input.Password placeholder={t('settingOpenAI.token.placeholder')} />,
           desc: t('settingOpenAI.token.desc'),
           label: t('settingOpenAI.token.title'),
-          name: 'token',
+          name: 'OPENAI_API_KEY',
         },
         {
           children: <Input placeholder={t('settingOpenAI.endpoint.placeholder')} />,
@@ -236,7 +236,7 @@ const SettingForm = memo(() => {
           children: <Input.Password placeholder={t('settingSystem.accessCode.placeholder')} />,
           desc: t('settingSystem.accessCode.desc'),
           label: t('settingSystem.accessCode.title'),
-          name: 'accessCode',
+          name: 'password',
         },
         {
           children: (

package/src/services/chatModel.ts

@@ -1,16 +1,23 @@
 import { merge } from 'lodash-es';
 
+import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
 import { initialLobeAgentConfig } from '@/store/session';
+import { useSettings } from '@/store/settings';
 import type { OpenAIStreamPayload } from '@/types/openai';
 
 import { URLS } from './url';
 
+interface FetchChatModelOptions {
+  signal?: AbortSignal | undefined;
+  withPlugin?: boolean;
+}
+
 /**
  * 专门用于对话的 fetch
  */
 export const fetchChatModel = (
   params: Partial<OpenAIStreamPayload>,
-  options?: { signal?: AbortSignal | undefined; withPlugin?: boolean },
+  options?: FetchChatModelOptions,
 ) => {
   const payload = merge(
     {
@@ -25,6 +32,7 @@ export const fetchChatModel = (
     body: JSON.stringify(payload),
     headers: {
       'Content-Type': 'application/json',
+      [OPENAI_API_KEY_HEADER_KEY]: useSettings.getState().settings.OPENAI_API_KEY || '',
     },
     method: 'POST',
     signal: options?.signal,

package/src/store/settings/initialState.ts

@@ -4,7 +4,7 @@ import { LanguageModel } from '@/types/llm';
 export type SidebarTabKey = 'chat' | 'market';
 
 export const DEFAULT_SETTINGS: ConfigSettings = {
-  accessCode: '',
+  OPENAI_API_KEY: '',
   avatar: '',
   compressThreshold: 24,
   enableCompressThreshold: false,
@@ -18,11 +18,11 @@ export const DEFAULT_SETTINGS: ConfigSettings = {
   maxTokens: 2000,
   model: LanguageModel.GPT3_5,
   neutralColor: '',
+  password: '',
   presencePenalty: 0,
   primaryColor: '',
   temperature: 0.5,
   themeMode: 'auto',
-  token: '',
   topP: 1,
 };
 

package/src/types/exportConfig.ts

@@ -9,7 +9,7 @@ import { Locales } from './locale';
  * 配置设置
  */
 export interface ConfigSettings {
-  accessCode: string;
+  OPENAI_API_KEY: string;
   avatar: string;
   compressThreshold: number;
   enableCompressThreshold: boolean;
@@ -23,11 +23,11 @@ export interface ConfigSettings {
   maxTokens: number;
   model: LanguageModel;
   neutralColor: NeutralColors | '';
+  password: string;
   presencePenalty: number;
   primaryColor: PrimaryColors | '';
   temperature: number;
   themeMode: ThemeMode;
-  token: string;
   topP: number;
 }