@lobehub/chat 1.0.0

package/src/features/FolderPanel/index.tsx

@@ -0,0 +1,55 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  panel: css`
+    height: 100vh;
+    color: ${token.colorTextSecondary};
+    background: ${token.colorBgContainer};
+  `,
+}));
+
+export default ({ children }: PropsWithChildren) => {
+  const { styles } = useStyles();
+  const [sessionsWidth, sessionExpandable] = useSettings(
+    (s) => [s.sessionsWidth, s.sessionExpandable],
+    shallow,
+  );
+  const [tmpWidth, setWidth] = useState(sessionsWidth);
+  if (tmpWidth !== sessionsWidth) setWidth(sessionsWidth);
+
+  return (
+    <DraggablePanel
+      className={styles.panel}
+      defaultSize={{ width: tmpWidth }}
+      expand={sessionExpandable}
+      maxWidth={400}
+      minWidth={256}
+      onExpandChange={(expand) => {
+        useSettings.setState({
+          sessionExpandable: expand,
+          sessionsWidth: expand ? 320 : 0,
+        });
+      }}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+
+        const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+
+        if (isEqual(nextWidth, sessionsWidth)) return;
+
+        setWidth(nextWidth);
+        useSettings.setState({ sessionsWidth: nextWidth });
+      }}
+      placement="left"
+      size={{ height: '100vh', width: sessionsWidth }}
+    >
+      {children}
+    </DraggablePanel>
+  );
+};

package/src/helpers/prompt.test.ts

@@ -0,0 +1,36 @@
+import { ChatMessage } from '@lobehub/ui';
+
+import { getInputVariablesFromMessages } from '@/helpers/prompt';
+
+describe('getInputVariablesFromMessages 方法', () => {
+  it('应当在输入为空数组时返回空数组', () => {
+    const result = getInputVariablesFromMessages([]);
+    expect(result).toEqual([]);
+  });
+
+  it('应当在输入消息不包含变量时返回空数组', () => {
+    const input: ChatMessage[] = [{ role: 'user', content: 'Hello, how are you?' }];
+    const result = getInputVariablesFromMessages(input);
+    expect(result).toEqual([]);
+  });
+
+  it('应当在输入消息包含变量时返回包含变量、模板和消息索引的对象数组', () => {
+    const input: ChatMessage[] = [
+      { role: 'user', content: 'Hello {name}, how are you?' },
+      { role: 'user', content: 'My name is {name}' },
+    ];
+    const expectedOutput = ['name'];
+    const result = getInputVariablesFromMessages(input);
+    expect(result).toEqual(expectedOutput);
+  });
+
+  it('多个变量的情况', () => {
+    const input: ChatMessage[] = [
+      { role: 'user', content: 'Hello {name}, how are {you}?' },
+      { role: 'user', content: 'My name is {name}' },
+    ];
+    const expectedOutput = ['name', 'you'];
+    const result = getInputVariablesFromMessages(input);
+    expect(result).toEqual(expectedOutput);
+  });
+});

package/src/helpers/prompt.ts

@@ -0,0 +1,36 @@
+import { ChatMessage } from '@lobehub/ui';
+import {
+  AIMessagePromptTemplate,
+  ChatPromptTemplate,
+  HumanMessagePromptTemplate,
+  SystemMessagePromptTemplate,
+} from 'langchain/prompts';
+
+export const getChatPromptTemplate = (chatMessages: ChatMessage[]) =>
+  ChatPromptTemplate.fromPromptMessages(
+    chatMessages.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);
+        }
+      }
+    }),
+  );
+export const getInputVariablesFromMessages = (chatMessages: ChatMessage[]) => {
+  let inputVariables: string[] = [];
+  try {
+    const chatPrompt = getChatPromptTemplate(chatMessages);
+    inputVariables = chatPrompt.inputVariables;
+  } catch {}
+
+  return inputVariables;
+};

package/src/helpers/url.ts

@@ -0,0 +1,17 @@
+import { ChatMessage } from '@lobehub/ui';
+
+import { Compressor } from '@/utils/compass';
+
+export const genShareMessagesUrl = (messages: ChatMessage[], systemRole?: string) => {
+  const compassedMsg = systemRole
+    ? [{ content: systemRole, role: 'system' }, ...messages]
+    : messages;
+
+  return `/share?messages=${Compressor.compress(JSON.stringify(compassedMsg))}`;
+};
+
+export const genSystemRoleQuery = async (content: string) => {
+  const x = { state: { systemRole: content } };
+  const systemRole = await Compressor.compressAsync(JSON.stringify(x));
+  return `#systemRole=${systemRole}`;
+};

package/src/layout/index.tsx

@@ -0,0 +1,42 @@
+import { ThemeProvider } from '@lobehub/ui';
+import { App, ConfigProvider } from 'antd';
+import 'antd/dist/reset.css';
+import Zh_CN from 'antd/locale/zh_CN';
+import { PropsWithChildren, useEffect } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+import { GlobalStyle } from '@/styles';
+
+import i18n from '../locales';
+import { useStyles } from './style';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const { styles } = useStyles();
+
+  useEffect(() => {
+    // 用一种比较奇怪的方式import 了 18n
+    i18n.finally(() => {});
+  }, []);
+
+  return (
+    <ConfigProvider locale={Zh_CN}>
+      <App className={styles.bg}>{children}</App>
+    </ConfigProvider>
+  );
+};
+
+export default ({ children }: PropsWithChildren) => {
+  useEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useSessionStore.persist.rehydrate();
+    useSettings.persist.rehydrate();
+  }, []);
+
+  return (
+    <ThemeProvider themeMode={'auto'}>
+      <GlobalStyle />
+      <Layout>{children}</Layout>
+    </ThemeProvider>
+  );
+};

package/src/layout/style.ts

@@ -0,0 +1,18 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  bg: css`
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    height: 100%;
+
+    background: ${token.colorBgLayout};
+
+    :has(#ChatLayout, #FlowLayout) {
+      overflow: hidden;
+    }
+  `,
+}));

package/src/locales/create.ts

@@ -0,0 +1,48 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { isArray } from 'lodash-es';
+import { initReactI18next } from 'react-i18next';
+
+import type { Namespaces, Resources } from '@/types/locale';
+
+import resources from './resources';
+
+const getRes = (res: Resources, namespace: Namespaces[]) => {
+  const newRes: any = {};
+  for (const [locale, value] of Object.entries(res)) {
+    newRes[locale] = {};
+    for (const ns of namespace) {
+      newRes[locale][ns] = value[ns];
+    }
+  }
+  return newRes;
+};
+
+export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
+  const ns: Namespaces[] = namespace
+    ? isArray(namespace)
+      ? ['common', ...namespace]
+      : ['common', namespace]
+    : ['common'];
+  return (
+    i18n
+      // detect user language
+      // learn more: https://github.com/i18next/i18next-browser-languageDetector
+      .use(LanguageDetector)
+      // pass the i18n instance to react-i18next.
+      .use(initReactI18next)
+      // init i18next
+      // for all options read: https://www.i18next.com/overview/configuration-options
+      .init({
+        // @ts-ignore
+        debug: process.env.NODE_ENV === 'development',
+        defaultNS: ns,
+        fallbackLng: 'zh-CN',
+        interpolation: {
+          escapeValue: false, // not needed for react as it escapes by default
+        },
+        ns,
+        resources: getRes(resources, ns),
+      })
+  );
+};

package/src/locales/default/common.ts

@@ -0,0 +1,41 @@
+export default {
+  'advanceSettings': '高级设置',
+  'agentAvatar': '头像',
+  'agentDescription': '描述',
+  'agentDescriptionPlaceholder': '请输入描述',
+  'agentModel': '模型',
+  'agentName': '名称',
+  'agentNamePlaceholder': '请输入名称',
+  'agentProfile': '助手信息',
+  'agentPrompt': '提示词',
+  'agentPromptPlaceholder': '请输入 AI 提示词',
+  'agentTag': '标签',
+  'agentTagPlaceholder': '请输入标签',
+  'archive': '归档',
+  'autoGenerate': '自动补全',
+  'autoGenerateTooltip': '基于提示词自动补全助手描述',
+  'cancel': '取消',
+  'close': '关闭',
+  'confirmRemoveSessionItemAlert': '即将删除该助手，删除后该将无法找回，请确认你的操作',
+  'defaultAgent': '默认助手',
+  'edit': '编辑',
+  'editAgentProfile': '编辑助手信息',
+  'export': '导出',
+  'gpt-3.5-turbo': 'GPT 3.5',
+  'gpt-3.5-turbo-16k': 'GPT 3.5 (16K)',
+  'gpt-4': 'GPT 4',
+  'gpt-4-32k': 'GPT 4 (32K)',
+  'modelConfig': '模型配置',
+  'modelTemperature': '发散度',
+  'newAgent': '新建助手',
+  'noDescription': '暂无描述',
+  'ok': '确定',
+  'profile': '助手身份',
+  'reset': '重置',
+  'searchAgentPlaceholder': '搜索助手和对话...',
+  'sessionSetting': '会话设置',
+  'setting': '设置',
+  'share': '分享',
+  'updateAgent': '更新助理信息',
+  'updatePrompt': '更新提示词',
+};

package/src/locales/default/setting.ts

@@ -0,0 +1,97 @@
+export default {
+  danger: {
+    clear: {
+      action: '立即清除',
+      confirm: '确认清除所有聊天、设置数据？',
+      desc: '清除所有聊天、设置数据',
+      title: '清除所有数据',
+    },
+    reset: {
+      action: '立即重置',
+      confirm: '确认重置所有设置？',
+      currentVersion: '当前版本',
+      desc: '重置所有设置项回默认值',
+      title: '重置所有设置',
+    },
+  },
+  header: '设置',
+  settingChat: {
+    compressThreshold: {
+      desc: '当未压缩的历史消息超过该值时，将进行压缩',
+      title: '历史消息长度压缩阈值',
+    },
+    historyCount: {
+      desc: '每次请求携带的历史消息数',
+      title: '附带历史消息数',
+    },
+    inputTemplate: {
+      desc: '用户最新的一条消息会填充到此模板',
+      title: '用户输入预处理',
+    },
+    maxTokens: {
+      desc: '单次交互所用的最大 Token 数',
+      title: '单次回复限制 (max_tokens)',
+    },
+    sendKey: {
+      title: '发送键',
+    },
+    title: '聊天设置',
+  },
+  settingModel: {
+    frequencyPenalty: {
+      desc: '值越大，越有可能降低重复字词',
+      title: '频率惩罚度 (frequency_penalty)',
+    },
+    model: {
+      title: '模型',
+    },
+    presencePenalty: {
+      desc: '值越大，越有可能扩展到新话题',
+      title: '话题新鲜度 (presence_penalty)',
+    },
+    temperature: {
+      desc: '值越大，回复越随机',
+      title: '随机性 (temperature)',
+    },
+    title: '模型设置',
+    topP: {
+      desc: '与随机性类似，但不要和随机性一起更改',
+      title: '核采样 (top_p)',
+    },
+  },
+  settingOpenAI: {
+    endpoint: {
+      desc: '除默认地址外，必须包含 http(s)://',
+      title: '接口地址',
+    },
+    title: 'OpenAI 设置',
+    token: {
+      desc: '使用自己的 Key 可绕过密码访问限制',
+      placeholder: 'OpenAI API Key',
+      title: 'API Key',
+    },
+  },
+  settingSystem: {
+    accessCode: {
+      desc: '管理员已开启加密访问',
+      placeholder: '请输入访问密码',
+      title: '访问密码',
+    },
+    title: '系统设置',
+  },
+  settingTheme: {
+    avatar: {
+      desc: '支持 URL / Base64 / Emoji 表情符号',
+      title: '头像',
+    },
+    fontSize: {
+      desc: '聊天内容的字体大小',
+      title: '字体大小',
+    },
+    lang: {
+      all: '所有语言',
+      name: '语言设置',
+    },
+    title: '主题设置',
+  },
+};

package/src/locales/index.ts

@@ -0,0 +1,5 @@
+import { createI18nNext } from './create';
+
+const initI18n = createI18nNext();
+
+export default initI18n;

package/src/locales/resources/en_US.ts

@@ -0,0 +1,9 @@
+import common from '../../../locales/en_US/common.json';
+import setting from '../../../locales/en_US/setting.json';
+
+const resources = {
+  common,
+  setting,
+} as const;
+
+export default resources;

package/src/locales/resources/index.ts

@@ -0,0 +1,7 @@
+import en_US from './en_US';
+import zh_CN from './zh_CN';
+
+export default {
+  'en-US': en_US,
+  'zh-CN': zh_CN,
+};

package/src/locales/resources/zh_CN.ts

@@ -0,0 +1,9 @@
+import common from '../default/common';
+import setting from '../default/setting';
+
+const resources = {
+  common,
+  setting,
+} as const;
+
+export default resources;

package/src/migrations/FromV0ToV1.ts

@@ -0,0 +1,12 @@
+import type { Migration, MigrationData } from '../utils/VersionController';
+
+export class MigrationV0ToV1 implements Migration {
+  /***
+   * 配置项里的当前版本号
+   */
+  version = 0;
+
+  migrate(data: MigrationData): MigrationData {
+    return data;
+  }
+}

package/src/migrations/index.ts

@@ -0,0 +1,13 @@
+import { ConfigState } from '@/types/exportConfig';
+import { VersionController } from '@/utils/VersionController';
+
+// 当前最新的版本号
+export const CURRENT_CONFIG_VERSION = 1;
+
+// 历史记录版本升级模块
+export const ConfigMigrations = [];
+
+export const Migration = new VersionController<ConfigState>(
+  ConfigMigrations,
+  CURRENT_CONFIG_VERSION,
+);

package/src/pages/Sidebar.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon, Logo, SideNav } from '@lobehub/ui';
+import { MessageSquare, Settings2, Sticker } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+const Sidebar = memo(() => {
+  const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
+  return (
+    <SideNav
+      avatar={<Logo size={40} />}
+      bottomActions={<ActionIcon icon={Settings2} onClick={() => Router.push('/setting')} />}
+      style={{ height: '100vh' }}
+      topActions={
+        <>
+          <ActionIcon
+            active={tab === 'chat'}
+            icon={MessageSquare}
+            onClick={() => setTab('chat')}
+            size="large"
+          />
+          <ActionIcon
+            active={tab === 'market'}
+            icon={Sticker}
+            onClick={() => setTab('market')}
+            size="large"
+          />
+        </>
+      }
+    />
+  );
+});
+
+export default Sidebar;

package/src/pages/_app.page.tsx

@@ -0,0 +1,13 @@
+import { Analytics } from '@vercel/analytics/react';
+import type { AppProps } from 'next/app';
+
+import Layout from '@/layout';
+
+export default ({ Component, pageProps }: AppProps) => {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+      <Analytics />
+    </Layout>
+  );
+};

package/src/pages/_document.page.tsx

@@ -0,0 +1,70 @@
+import { StyleProvider, extractStaticStyle } from 'antd-style';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  static async getStaticProps(ctx: DocumentContext) {
+    const page = await ctx.renderPage({
+      enhanceApp: (App) => (props) =>
+        (
+          <StyleProvider cache={extractStaticStyle.cache}>
+            <App {...props} />
+          </StyleProvider>
+        ),
+    });
+
+    const styles = extractStaticStyle(page.html).map((item) => item.style);
+
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {styles}
+        </>
+      ),
+    };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/apple-touch-icon.png"
+            rel="apple-touch-icon"
+            sizes="180x180"
+          />
+          <link
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-32x32.png"
+            rel="icon"
+            sizes="32x32"
+            type="image/png"
+          />
+          <link
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/favicon-16x16.png"
+            rel="icon"
+            sizes="16x16"
+            type="image/png"
+          />
+          <link
+            color="#000000"
+            href="https://npm.elemecdn.com/@lobehub/assets-favicons/assets/safari-pinned-tab.svg"
+            rel="mask-icon"
+          />
+          <meta content="LobeHub" name="apple-mobile-web-app-title" />
+          <meta content="LobeHub" name="application-name" />
+          <meta content="#000000" name="msapplication-TileColor" />
+          <meta content="#000000" name="theme-color" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

package/src/pages/api/LangChainStream.ts

@@ -0,0 +1,95 @@
+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);
+      }
+    },
+  });
+}