@lobehub/chat 0.1.6

package/scripts/genResources.ts

@@ -0,0 +1,51 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import { tocForResources } from 'i18next-resources-for-ts';
+import fs from 'node:fs';
+import { resolve } from 'node:path';
+
+import i18nConfig from '../.i18nrc.js';
+
+const locales = [i18nConfig.entryLocale, ...i18nConfig.outputLocales];
+export const genResources = (output: string) => {
+  let index = '';
+  let indexObj = '';
+  consola.start(`Generate locale resources and types, found ${locales.length} locales...`);
+  for (const locale of locales) {
+    const files = fs
+      .readdirSync(resolve(i18nConfig.output, locale))
+      .filter((name) => name.includes('.json'));
+    index += `import ${locale} from "./${locale}";\n`;
+    indexObj += `   "${locale.replace('_', '-')}": ${locale},\n`;
+    const ns = [];
+    for (const file of files) {
+      ns.push({
+        name: file.replace('.json', ''),
+        path: resolve(i18nConfig.output, locale, file),
+      });
+    }
+    let toc = tocForResources(ns, resolve(output)).replaceAll('\\', '/');
+    if (locale === i18nConfig.entryLocale) {
+      toc = toc.replaceAll('.json', '').replaceAll('../../../locales/zh_CN', '../default');
+    }
+    const filepath = resolve(output, `${locale}.ts`);
+    fs.writeFileSync(filepath, toc);
+    consola.success(colors.bgBlue(colors.black(` ${locale} `)), colors.gray(filepath));
+  }
+  const indexFilepath = resolve(output, `index.ts`);
+  fs.writeFileSync(
+    indexFilepath,
+    `${index}
+const resources = {
+${indexObj}} as const;
+export default resources;
+export const defaultResources = ${i18nConfig.entryLocale};
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;
+`,
+  );
+
+  consola.success(colors.bgGreen(colors.black(` INDEX `)), colors.gray(indexFilepath));
+};

package/scripts/toc.ts

@@ -0,0 +1,7 @@
+import { genDefaultLocale } from './genDefaultLocale';
+import { genResources } from './genResources';
+
+const RES_OUTPUT = 'src/locales/resources';
+
+genDefaultLocale(RES_OUTPUT);
+genResources(RES_OUTPUT);

package/src/const/fetch.ts

@@ -0,0 +1 @@
+export const OPENAI_SERVICE_ERROR_CODE = 555;

package/src/const/modelTokens.ts

@@ -0,0 +1,8 @@
+import { LanguageModel } from '@/types/llm';
+
+export const ModelTokens: Record<LanguageModel, number> = {
+  [LanguageModel.GPT3_5]: 4096,
+  [LanguageModel.GPT3_5_16K]: 4096 * 4,
+  [LanguageModel.GPT4]: 8196,
+  [LanguageModel.GPT4_32K]: 8196 * 4,
+};

package/src/features/AvatarWithUpload/index.tsx

@@ -0,0 +1,27 @@
+import { Avatar, Logo } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+import { createUploadImageHandler } from '@/utils/uploadFIle';
+
+interface AvatarWithUploadProps {
+  size?: number;
+}
+
+export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
+  const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
+
+  const handleUploadAvatar = createUploadImageHandler((avatar) => {
+    setSettings({ avatar });
+  });
+
+  return (
+    <div style={{ maxHeight: size, maxWidth: size }}>
+      <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+        {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
+      </Upload>
+    </div>
+  );
+});

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, memo, 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 memo<PropsWithChildren>(({ children }) => {
+  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/features/SideBar/index.tsx

@@ -0,0 +1,35 @@
+import { ActionIcon, 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 AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useSettings } from '@/store/settings';
+
+export default memo(() => {
+  const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
+  return (
+    <SideNav
+      avatar={<AvatarWithUpload />}
+      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"
+          />
+        </>
+      }
+    />
+  );
+});

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,57 @@
+import { ThemeProvider, lobeCustomTheme } from '@lobehub/ui';
+import { App, ConfigProvider } from 'antd';
+import { useThemeMode } from 'antd-style';
+import 'antd/dist/reset.css';
+import Zh_CN from 'antd/locale/zh_CN';
+import { PropsWithChildren, useCallback, useEffect } from 'react';
+import { shallow } from 'zustand/shallow';
+
+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) => {
+  const themeMode = useSettings((s) => s.settings.themeMode, shallow);
+  const { primaryColor, neutralColor } = useSettings(
+    (s) => ({ neutralColor: s.settings.neutralColor, primaryColor: s.settings.primaryColor }),
+    shallow,
+  );
+  const { browserPrefers } = useThemeMode();
+  const isDarkMode = themeMode === 'auto' ? browserPrefers === 'dark' : themeMode === 'dark';
+
+  useEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useSessionStore.persist.rehydrate();
+    useSettings.persist.rehydrate();
+  }, []);
+
+  const genCustomToken: any = useCallback(
+    () => lobeCustomTheme({ isDarkMode, neutralColor, primaryColor }),
+    [primaryColor, neutralColor, isDarkMode],
+  );
+
+  return (
+    <ThemeProvider customToken={genCustomToken || {}} themeMode={themeMode}>
+      <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,49 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { isArray } from 'lodash-es';
+import { initReactI18next } from 'react-i18next';
+
+import type { Namespaces } 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),
+        resources,
+      })
+  );
+};

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,117 @@
+export default {
+  danger: {
+    clear: {
+      action: '立即清除',
+      confirm: '确认清除所有聊天、设置数据？',
+      desc: '清除所有聊天、设置数据',
+      title: '清除所有数据',
+    },
+    reset: {
+      action: '立即重置',
+      confirm: '确认重置所有设置？',
+      currentVersion: '当前版本',
+      desc: '重置所有设置项回默认值',
+      title: '重置所有设置',
+    },
+  },
+  header: '设置',
+  settingChat: {
+    compressThreshold: {
+      desc: '当未压缩的历史消息超过该值时，将进行压缩',
+      title: '历史消息长度压缩阈值',
+    },
+    enableCompressThreshold: {
+      title: '是否开启历史消息长度压缩阈值',
+    },
+    enableHistoryCount: {
+      title: '是否开启携带的历史消息数限制',
+    },
+    historyCount: {
+      desc: '每次请求携带的历史消息数',
+      title: '附带历史消息数',
+    },
+    inputTemplate: {
+      desc: '用户最新的一条消息会填充到此模板',
+      title: '用户输入预处理',
+    },
+    title: '聊天设置',
+  },
+  settingModel: {
+    enableMaxTokens: {
+      title: '开启单次回复限制',
+    },
+    frequencyPenalty: {
+      desc: '值越大，越有可能降低重复字词',
+      title: '频率惩罚度',
+    },
+    maxTokens: {
+      desc: '单次交互所用的最大 Token 数',
+      title: '单次回复限制',
+    },
+    model: {
+      desc: 'ChatGPT 模型',
+      title: '模型',
+    },
+    presencePenalty: {
+      desc: '值越大，越有可能扩展到新话题',
+      title: '话题新鲜度',
+    },
+    temperature: {
+      desc: '值越大，回复越随机',
+      title: '随机性',
+    },
+    title: '模型设置',
+    topP: {
+      desc: '与随机性类似，但不要和随机性一起更改',
+      title: '核采样',
+    },
+  },
+  settingOpenAI: {
+    endpoint: {
+      desc: '除默认地址外，必须包含 http(s)://',
+      placeholder: 'https://api.openai.com/v1',
+      title: '接口代理地址',
+    },
+    title: 'OpenAI 设置',
+    token: {
+      desc: '使用自己的 OpenAI Key',
+      placeholder: 'OpenAI API Key',
+      title: 'API Key',
+    },
+  },
+  settingSystem: {
+    accessCode: {
+      desc: '管理员已开启加密访问',
+      placeholder: '请输入访问密码',
+      title: '访问密码',
+    },
+    title: '系统设置',
+  },
+  settingTheme: {
+    avatar: {
+      title: '头像',
+    },
+    fontSize: {
+      desc: '聊天内容的字体大小',
+      title: '字体大小',
+    },
+    lang: {
+      title: '语言设置',
+    },
+    neutralColor: {
+      desc: '不同色彩倾向的灰阶自定义',
+      title: '中性色',
+    },
+    primaryColor: {
+      desc: '自定义主题色',
+      title: '主题色',
+    },
+    themeMode: {
+      auto: '自动',
+      dark: '深色',
+      light: '浅色',
+      title: '主题',
+    },
+    title: '主题设置',
+  },
+};

package/src/locales/index.ts

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

package/src/locales/options.ts

@@ -0,0 +1,19 @@
+import type { SelectProps } from 'antd';
+
+import type { Locales } from '@/types/locale';
+
+type LocaleOptions = SelectProps['options'] &
+  {
+    value: Locales;
+  }[];
+
+export const options: LocaleOptions = [
+  {
+    label: '简体中文',
+    value: 'zh-CN',
+  },
+  {
+    label: 'English',
+    value: 'en-US',
+  },
+] as LocaleOptions;

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,13 @@
+import en_US from './en_US';
+import zh_CN from './zh_CN';
+
+const resources = {
+  'en-US': en_US,
+  'zh-CN': zh_CN,
+} as const;
+export default resources;
+export const defaultResources = zh_CN;
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;

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/_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>
+  );
+};