@lobehub/chat 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.26.1](https://github.com/lobehub/lobe-chat/compare/v0.26.0...v0.26.1)
+
+<sup>Released on **2023-07-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 优化 setting Layout 实现.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 优化 setting Layout 实现 ([f789935](https://github.com/lobehub/lobe-chat/commit/f789935))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.26.0](https://github.com/lobehub/lobe-chat/compare/v0.25.0...v0.26.0)
 
 <sup>Released on **2023-07-28**</sup>

package/package.json

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

package/src/const/message.ts

@@ -1,2 +1,4 @@
 // 只要 start with 这个，就可以判断为 function message
 export const FUNCTION_MESSAGE_FLAG = '{"function';
+
+export const FUNCTION_LOADING = 'FUNCTION_LOADING';

package/src/locales/default/common.ts

@@ -30,6 +30,9 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
+  message: {
+    function_loading: '插件请求中...',
+  },
   moreSetting: '更多设置...',
   newAgent: '新建助手',
   noDescription: '暂无描述',

package/src/locales/default/plugin.ts

@@ -1,10 +1,28 @@
 export default {
+  loading: {
+    content: '数据获取中...',
+    plugin: '插件运行中...',
+  },
   pluginList: '插件列表',
-  pluginLoading: '插件运行中...',
   plugins: {
     realtimeWeather: '实时天气预报',
     searchEngine: '搜索引擎',
     undefined: '插件检测中...',
     websiteCrawler: '网页内容提取',
   },
+  realtimeWeather: {
+    data: {
+      date: '日期',
+      daytemp_float: '日间温度',
+      dayweather: '日间天气',
+      daywind: '日间风速',
+      nighttemp_float: '夜间温度',
+      nightweather: '夜间天气',
+      nightwind: '夜间风速',
+      week: '星期',
+    },
+    title: '近7日天气数据（{{city}}）',
+    updateAt: '更新时间',
+  },
+  responseData: '返回数据',
 };

package/src/pages/api/openai.ts

@@ -4,11 +4,10 @@ import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
 import { getServerConfig } from '@/config/server';
 import { createErrorResponse } from '@/pages/api/error';
+import { PluginsMap } from '@/plugins';
 import { ErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
-import pluginList from '../../plugins';
-
 const isDev = process.env.NODE_ENV === 'development';
 
 // 创建 OpenAI 实例
@@ -41,7 +40,7 @@ export const createChatCompletion = async ({
 
   // ============  1. 前置处理 functions   ============ //
 
-  const filterFunctions: ChatCompletionFunctions[] = pluginList
+  const filterFunctions: ChatCompletionFunctions[] = Object.values(PluginsMap)
     .filter((p) => {
       // 如果不存在 enabledPlugins，那么全部不启用
       if (!enabledPlugins) return false;
@@ -54,7 +53,11 @@ export const createChatCompletion = async ({
   const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
 
   // ============  2. 前置处理 messages   ============ //
-  const formatMessages = messages.map((m) => ({ content: m.content, role: m.role }));
+  const formatMessages = messages.map((m) => ({
+    content: m.content,
+    name: m.name,
+    role: m.role,
+  }));
 
   // ============  3. 发送请求   ============ //
 

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

@@ -1,44 +1,22 @@
-import { ChatCompletionRequestMessage } from 'openai-edge';
+import { OpenAIPluginPayload } from '@/types/plugin';
 
-import { OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
-import { OpenAIStreamPayload } from '@/types/openai';
-
-import pluginList from '../../plugins';
-import { createChatCompletion, createOpenAI } from './openai';
+import { PluginsMap } from '../../plugins';
 
 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 openai = createOpenAI(apiKey);
-
-  return await createChatCompletion({
-    OPENAI_API_KEY: apiKey,
-    callbacks: (payload) => ({
-      experimental_onFunctionCall: async (
-        { name, arguments: args },
-        createFunctionCallMessages,
-      ) => {
-        console.log(`检测到 functionCall: ${name}`);
-
-        const func = pluginList.find((f) => f.name === name);
-
-        if (func) {
-          const result = await func.runner(args as any);
-
-          console.log(`[${name}]`, args, `result:`, JSON.stringify(result, null, 2));
-
-          const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
-
-          return openai.createChatCompletion({
-            ...payload,
-            messages: [...payload.messages, ...newMessages],
-          });
-        }
-      },
-    }),
-    payload,
-  });
+  const { name, arguments: args } = (await req.json()) as OpenAIPluginPayload;
+
+  console.log(`检测到 functionCall: ${name}`);
+
+  const func = PluginsMap[name];
+
+  if (func) {
+    const data = JSON.parse(args);
+    const result = await func.runner(data);
+
+    console.log(`[${name}]`, args, `result:`, JSON.stringify(result, null, 2));
+
+    return new Response(JSON.stringify(result));
+  }
 }

package/src/pages/chat/[id]/Conversation/ChatList/MessageExtra.tsx

@@ -1,13 +1,9 @@
-import { Avatar, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
-import { LucideToyBrick } from 'lucide-react';
 import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import pluginList from '@/plugins';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 
@@ -23,25 +19,29 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode => {
+const MessageExtra = ({
+  role,
+  extra,
+  // name,
+  function_call,
+}: ChatMessage): ReactNode => {
   const { styles } = useStyles();
 
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
   const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)], shallow);
 
-  const plugin = pluginList.find((p) => p.name === function_call?.name);
-  const funcTag = (
-    <Tooltip title={function_call?.arguments}>
-      <Tag bordered={false} className={styles.plugin} style={{ borderRadius: 6 }}>
-        {plugin?.avatar ? (
-          <Avatar avatar={plugin?.avatar} size={18} />
-        ) : (
-          <Icon icon={LucideToyBrick} />
-        )}
-        {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
-      </Tag>
-    </Tooltip>
-  );
+  // const plugin = PluginsMap[name || ''];
+
+  // const funcTag = (
+  //   <Tag bordered={false} className={styles.plugin} style={{ borderRadius: 6 }}>
+  //     {plugin?.avatar ? (
+  //       <Avatar avatar={plugin?.avatar} size={18} />
+  //     ) : (
+  //       <Icon icon={LucideToyBrick} />
+  //     )}
+  //     {t(`plugins.${name}` as any, { ns: 'plugin' })}
+  //   </Tag>
+  // );
 
   const modelTag = (
     <div>
@@ -59,6 +59,7 @@ const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode =>
 
   switch (role) {
     case 'user':
+    case 'function':
     case 'system': {
       return;
     }
@@ -69,15 +70,16 @@ const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode =>
       if (!(hasModelTag || hasFuncTag)) return;
 
       return (
-        <Flexbox className={styles.container} horizontal>
-          {hasFuncTag && funcTag}
-          {hasModelTag && modelTag}
-        </Flexbox>
+        hasModelTag && (
+          <Flexbox className={styles.container} horizontal>
+            {modelTag}
+          </Flexbox>
+        )
       );
     }
-    case 'function': {
-      return <Flexbox className={styles.container}>{funcTag}</Flexbox>;
-    }
+    // case 'function': {
+    //   return <Flexbox className={styles.container}>{funcTag}</Flexbox>;
+    // }
   }
 };
 

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/FunctionCall.tsx

@@ -0,0 +1,60 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { LucideChevronDown, LucideChevronUp, LucideToyBrick } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginsMap } from '@/plugins';
+import { OpenAIFunctionCall } from '@/types/chatMessage';
+
+import { useStyles } from './style';
+
+export interface FunctionCallProps {
+  function_call?: OpenAIFunctionCall;
+  loading?: boolean;
+}
+
+const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+  const [open, setOpen] = useState(false);
+
+  const plugin = PluginsMap[function_call?.name || ''];
+
+  const avatar = plugin?.avatar ? (
+    <Avatar avatar={plugin?.avatar} size={32} />
+  ) : (
+    <Icon icon={LucideToyBrick} />
+  );
+
+  const args = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
+
+  return (
+    <Flexbox gap={8}>
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        gap={8}
+        horizontal
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        {loading ? (
+          <div>
+            <LoadingOutlined />
+          </div>
+        ) : (
+          avatar
+        )}
+        {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
+        {loading ? `（${t('loading.plugin')}）` : null}
+        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+      </Flexbox>
+      {open && <Highlighter language={'json'}>{args}</Highlighter>}
+    </Flexbox>
+  );
+});
+
+export default FunctionCall;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginMessage.tsx

@@ -0,0 +1,45 @@
+import { Loading3QuartersOutlined } from '@ant-design/icons';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PluginsRender } from '@/plugins/Render';
+import { ChatMessage } from '@/types/chatMessage';
+
+import PluginResult from './PluginResultRender';
+
+export interface FunctionMessageProps extends ChatMessage {
+  loading?: boolean;
+}
+
+const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
+  const { t } = useTranslation('plugin');
+
+  const Render = PluginsRender[name || ''];
+
+  let isJSON = true;
+  try {
+    JSON.parse(content);
+  } catch {
+    isJSON = false;
+  }
+
+  if (!isJSON) {
+    return (
+      <Flexbox gap={8} horizontal>
+        <div>
+          <Loading3QuartersOutlined spin />
+        </div>
+        {t('loading.content')}
+      </Flexbox>
+    );
+  }
+
+  if (Render) {
+    return <Render content={JSON.parse(content)} name={name || 'unknown'} />;
+  }
+
+  return <PluginResult content={content} />;
+});
+
+export default PluginMessage;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginResultRender.tsx

@@ -0,0 +1,51 @@
+import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+
+export interface FunctionMessageProps {
+  content: string;
+}
+
+const PluginResult = memo<FunctionMessageProps>(({ content }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+
+  const [open, setOpen] = useState(false);
+
+  let data;
+
+  try {
+    data = JSON.stringify(JSON.parse(content), null, 2);
+  } catch {
+    data = content;
+  }
+
+  return (
+    <Flexbox gap={8}>
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        gap={8}
+        horizontal
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <Avatar avatar={'💾'} size={24} />
+        {t('responseData')}
+        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+      </Flexbox>
+      {open && (
+        <Highlighter language={'json'} style={{ maxHeight: 200 }}>
+          {data}
+        </Highlighter>
+      )}
+    </Flexbox>
+  );
+});
+
+export default PluginResult;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/style.ts

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    width: fit-content;
+    padding: 6px 8px;
+
+    color: ${token.colorText};
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+}));

package/src/pages/chat/[id]/Conversation/ChatList/index.tsx

@@ -1,24 +1,20 @@
 import { ChatList, RenderErrorMessage, RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { ChatMessage } from '@/types/chatMessage';
 import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
 
 import InvalidAccess from './Error/InvalidAccess';
 import OpenAiBizError from './Error/OpenAiBizError';
-import FunctionMessage from './FunctionMessage';
 import MessageExtra from './MessageExtra';
-
-const renderMessage: RenderMessage = (content, message) => {
-  if (message.role === 'function')
-    return isFunctionMessage(message.content) ? <FunctionMessage /> : content;
-
-  return content;
-};
+import FunctionCall from './Plugins/FunctionCall';
+import PluginMessage from './Plugins/PluginMessage';
 
 const renderErrorMessage: RenderErrorMessage = (error, message) => {
   switch (error.type as ErrorType) {
@@ -46,6 +42,35 @@ const List = () => {
       shallow,
     );
 
+  const renderMessage: RenderMessage = useCallback(
+    (content, message: ChatMessage) => {
+      if (message.role === 'function')
+        return (
+          <Flexbox gap={12}>
+            <FunctionCall
+              function_call={message.function_call}
+              loading={message.id === chatLoadingId}
+            />
+            <PluginMessage loading={message.id === chatLoadingId} {...message} />
+          </Flexbox>
+        );
+
+      if (message.role === 'assistant') {
+        return isFunctionMessage(message.content) || !!message.function_call ? (
+          <FunctionCall
+            function_call={message.function_call}
+            loading={message.id === chatLoadingId}
+          />
+        ) : (
+          content
+        );
+      }
+
+      return content;
+    },
+    [chatLoadingId],
+  );
+
   return (
     <ChatList
       data={data}

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import pluginList from '@/plugins';
+import { PluginsMap } from '@/plugins';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
 const PluginList = () => {
@@ -19,7 +19,7 @@ const PluginList = () => {
 
   const plugin: ItemGroup = useMemo(
     () => ({
-      children: pluginList.map((item) => ({
+      children: Object.values(PluginsMap).map((item) => ({
         avatar: <Avatar avatar={item.avatar} />,
         children: (
           <Switch

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,