@lobehub/chat 0.1.6

package/src/pages/chat/[id]/edit/style.ts

@@ -0,0 +1,42 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  collapseHeader: css`
+    .ant-collapse-header {
+      align-items: center !important;
+    }
+  `,
+  footer: css`
+    position: sticky;
+    bottom: 0;
+    border-top: 1px solid ${token.colorBorder};
+  `,
+  form: css`
+    overflow-y: auto;
+  `,
+  header: css`
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+  profile: css`
+    font-size: 20px;
+    font-weight: bold;
+    color: ${token.colorText};
+  `,
+  prompt: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+  `,
+  title: css`
+    font-size: 16px;
+    font-weight: 500;
+
+    .ant-collapse-header {
+      padding: 0 !important;
+    }
+
+    .ant-collapse-content-box {
+      padding: 0 !important;
+    }
+  `,
+}));

package/src/pages/chat/[id]/index.page.tsx

@@ -0,0 +1,40 @@
+import isEqual from 'fast-deep-equal';
+import Head from 'next/head';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { sessionSelectors, useSessionStore } from '@/store/session';
+
+import Layout from '../layout';
+import Config from './Config';
+import Conversation from './Conversation';
+import Header from './Header';
+
+const Chat = memo(() => {
+  const [title] = useSessionStore((s) => {
+    const context = sessionSelectors.currentSession(s);
+    return [context?.meta.title];
+  }, isEqual);
+
+  const pageTitle = title ? `${title} - LobeChat` : 'LobeChat';
+
+  return (
+    <Layout>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+
+      <Flexbox flex={1}>
+        <Header />
+        <Flexbox
+          id={'lobe-conversion-container'}
+          style={{ height: 'calc(100vh - 64px)', position: 'relative' }}
+        >
+          <Conversation />
+          <Config />
+        </Flexbox>
+      </Flexbox>
+    </Layout>
+  );
+});
+export default Chat;

package/src/pages/chat/index.page.tsx

@@ -0,0 +1 @@
+export { default } from './[id]/index.page';

package/src/pages/chat/layout.tsx

@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router';
+import { PropsWithChildren, memo, useEffect } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import SideBar from '@/features/SideBar';
+import { createI18nNext } from '@/locales/create';
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+
+import { Sessions } from './SessionList';
+
+const initI18n = createI18nNext();
+
+const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+  useEffect(() => {
+    initI18n.finally();
+  }, []);
+
+  const [activeSession] = useSessionStore((s) => {
+    return [s.activeSession];
+  }, shallow);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+    // 只有当水合完毕后，才能正常去激活会话
+    if (typeof id === 'string' && hasRehydrated) {
+      activeSession(id);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    const hasRehydrated = useSettings.persist.hasHydrated();
+    if (hasRehydrated) {
+      useSettings.setState({ sidebarKey: 'chat' });
+    }
+  }, []);
+
+  return (
+    <Flexbox horizontal width={'100%'}>
+      <SideBar />
+      <Sessions />
+      {children}
+    </Flexbox>
+  );
+});
+
+export default ChatLayout;

package/src/pages/index.page.tsx

@@ -0,0 +1 @@
+export { default } from './chat/index.page';

package/src/pages/setting/Header.tsx

@@ -0,0 +1,27 @@
+import { ChatHeader } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+import Router from 'next/router';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  title: css`
+    font-size: 16px;
+    font-weight: bold;
+    color: ${token.colorText};
+  `,
+}));
+const Header = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const { styles } = useStyles();
+  return (
+    <ChatHeader
+      left={<div className={styles.title}>{t('header')}</div>}
+      onBackClick={() => Router.back()}
+      showBackButton
+    />
+  );
+});
+
+export default Header;

package/src/pages/setting/SettingForm.tsx

@@ -0,0 +1,299 @@
+import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
+import { Form as AntForm, Button, Input, Popconfirm, Select, Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { debounce } from 'lodash-es';
+import { AppWindow, Bot, MessagesSquare, Palette, Webhook } from 'lucide-react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { options } from '@/locales/options';
+import SliderWithInput from '@/pages/setting/SliderWithInput';
+import { settingsSelectors, useSettings } from '@/store/settings';
+import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
+import { ConfigKeys } from '@/types/exportConfig';
+import { LanguageModel } from '@/types/llm';
+
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
+
+type SettingItemGroup = ItemGroup & {
+  children: {
+    name?: ConfigKeys;
+  }[];
+};
+
+const SettingForm = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = AntForm.useForm();
+  const settings = useSettings(settingsSelectors.currentSettings, isEqual);
+  const { setThemeMode, setSettings, resetSettings } = useSettings(
+    (s) => ({
+      resetSettings: s.resetSettings,
+      setSettings: s.setSettings,
+      setThemeMode: s.setThemeMode,
+    }),
+    shallow,
+  );
+
+  const handleReset = useCallback(() => {
+    resetSettings();
+    form.setFieldsValue(DEFAULT_SETTINGS);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    handleReset();
+    // TODO: 删除聊天记录
+  }, []);
+
+  const theme: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <AvatarWithUpload />,
+          label: t('settingTheme.avatar.title'),
+          minWidth: undefined,
+        },
+        {
+          children: (
+            <ThemeSwitch
+              labels={{
+                auto: t('settingTheme.themeMode.auto'),
+                dark: t('settingTheme.themeMode.dark'),
+                light: t('settingTheme.themeMode.light'),
+              }}
+              onThemeSwitch={setThemeMode}
+              themeMode={settings.themeMode}
+              type={'select'}
+            />
+          ),
+          label: t('settingTheme.themeMode.title'),
+        },
+        {
+          children: <Select options={options} />,
+          label: t('settingTheme.lang.title'),
+          name: 'language',
+        },
+        {
+          children: <SliderWithInput max={18} min={12} />,
+          desc: t('settingTheme.fontSize.desc'),
+          label: t('settingTheme.fontSize.title'),
+          name: 'fontSize',
+        },
+        {
+          children: <ThemeSwatchesPrimary />,
+          desc: t('settingTheme.primaryColor.desc'),
+          label: t('settingTheme.primaryColor.title'),
+          minWidth: undefined,
+        },
+        {
+          children: <ThemeSwatchesNeutral />,
+          desc: t('settingTheme.neutralColor.desc'),
+          label: t('settingTheme.neutralColor.title'),
+          minWidth: undefined,
+        },
+      ],
+      icon: Palette,
+      title: t('settingTheme.title'),
+    }),
+    [settings],
+  );
+
+  const OpenAI: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Input.Password placeholder={t('settingOpenAI.token.placeholder')} />,
+          desc: t('settingOpenAI.token.desc'),
+          label: t('settingOpenAI.token.title'),
+          name: 'token',
+        },
+        {
+          children: <Input placeholder={t('settingOpenAI.endpoint.placeholder')} />,
+          desc: t('settingOpenAI.endpoint.desc'),
+
+          label: t('settingOpenAI.endpoint.title'),
+
+          name: 'endpoint',
+        },
+      ],
+      icon: Webhook,
+      title: t('settingOpenAI.title'),
+    }),
+    [settings],
+  );
+
+  const Chat: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Switch />,
+          label: t('settingChat.enableHistoryCount.title'),
+          minWidth: undefined,
+          name: 'enableHistoryCount',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.historyCount.desc'),
+          hidden: !settings.enableHistoryCount,
+          label: t('settingChat.historyCount.title'),
+          name: 'historyCount',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableCompressThreshold.title'),
+          minWidth: undefined,
+          name: 'enableCompressThreshold',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.compressThreshold.desc'),
+          hidden: !settings.enableCompressThreshold,
+          label: t('settingChat.compressThreshold.title'),
+          name: 'compressThreshold',
+        },
+      ],
+      icon: MessagesSquare,
+      title: t('settingChat.title'),
+    }),
+    [settings],
+  );
+
+  const Model: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: (
+            <Select
+              options={Object.values(LanguageModel).map((value) => ({
+                label: value,
+                value,
+              }))}
+            />
+          ),
+          desc: t('settingModel.model.desc'),
+          label: t('settingModel.model.title'),
+          name: 'model',
+          tag: 'model',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.temperature.desc'),
+          label: t('settingModel.temperature.title'),
+          name: 'temperature',
+          tag: 'temperature',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.topP.desc'),
+          label: t('settingModel.topP.title'),
+          name: 'topP',
+          tag: 'top_p',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.presencePenalty.desc'),
+          label: t('settingModel.presencePenalty.title'),
+          name: 'presencePenalty',
+          tag: 'presence_penalty',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.frequencyPenalty.desc'),
+          label: t('settingModel.frequencyPenalty.title'),
+          name: 'frequencyPenalty',
+          tag: 'frequency_penalty',
+        },
+        {
+          children: <Switch />,
+          label: t('settingModel.enableMaxTokens.title'),
+          minWidth: undefined,
+          name: 'enableMaxTokens',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32_000} min={0} step={100} />,
+          desc: t('settingModel.maxTokens.desc'),
+          hidden: !settings.enableMaxTokens,
+          label: t('settingModel.maxTokens.title'),
+          name: 'maxTokens',
+          tag: 'max_tokens',
+        },
+      ],
+      icon: Bot,
+      title: t('settingModel.title'),
+    }),
+    [settings],
+  );
+
+  const System: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Input.Password placeholder={t('settingSystem.accessCode.placeholder')} />,
+          desc: t('settingSystem.accessCode.desc'),
+          label: t('settingSystem.accessCode.title'),
+          name: 'accessCode',
+        },
+        {
+          children: (
+            <Popconfirm
+              arrow={false}
+              cancelText={t('cancel', { ns: 'common' })}
+              okButtonProps={{ danger: true }}
+              okText={t('ok', { ns: 'common' })}
+              onConfirm={handleReset}
+              title={t('danger.reset.confirm')}
+            >
+              <Button danger type="primary">
+                {t('danger.reset.action')}
+              </Button>
+            </Popconfirm>
+          ),
+          desc: t('danger.reset.title'),
+          label: t('danger.reset.desc'),
+          minWidth: undefined,
+        },
+        {
+          children: (
+            <Popconfirm
+              arrow={false}
+              cancelText={t('cancel', { ns: 'common' })}
+              okButtonProps={{ danger: true }}
+              okText={t('ok', { ns: 'common' })}
+              onConfirm={handleClear}
+              title={t('danger.clear.confirm')}
+            >
+              <Button danger type="primary">
+                {t('danger.clear.action')}
+              </Button>
+            </Popconfirm>
+          ),
+          desc: t('danger.clear.title'),
+          label: t('danger.clear.desc'),
+          minWidth: undefined,
+        },
+      ],
+      icon: AppWindow,
+      title: t('settingSystem.title'),
+    }),
+    [settings],
+  );
+
+  const items = useMemo(() => [theme, OpenAI, Chat, Model, System], [settings]);
+
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      itemMinWidth="max(30%,240px)"
+      items={items}
+      onValuesChange={debounce(setSettings, 100)}
+      style={{ maxWidth: 1024, width: '100%' }}
+    />
+  );
+});
+
+export default SettingForm;

package/src/pages/setting/SliderWithInput/index.tsx

@@ -0,0 +1,40 @@
+import { InputNumber, Slider } from 'antd';
+import { SliderSingleProps } from 'antd/es/slider';
+import { isNull } from 'lodash-es';
+import { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const SliderWithInput = memo<SliderSingleProps>(
+  ({ step, value, onChange, max, min, defaultValue, ...props }) => {
+    const handleOnchange = useCallback((value: number | null) => {
+      if (Number.isNaN(value) || isNull(value)) return;
+      onChange?.(value);
+    }, []);
+
+    return (
+      <Flexbox direction={'horizontal'} gap={8}>
+        <Slider
+          defaultValue={defaultValue}
+          max={max}
+          min={min}
+          onChange={handleOnchange}
+          step={step}
+          style={{ flex: 1 }}
+          value={typeof value === 'number' ? value : 0}
+          {...props}
+        />
+        <InputNumber
+          defaultValue={defaultValue}
+          max={max}
+          min={min}
+          onChange={handleOnchange}
+          step={Number(step)}
+          style={{ flex: 1, maxWidth: 64 }}
+          value={typeof value === 'number' ? value : 0}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+export default SliderWithInput;

package/src/pages/setting/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -0,0 +1,33 @@
+import {
+  NeutralColors,
+  Swatches,
+  findCustomThemeName,
+  neutralColors,
+  neutralColorsSwatches,
+} from '@lobehub/ui';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+const ThemeSwatchesNeutral = memo(() => {
+  const { neutralColor, setSettings } = useSettings(
+    (s) => ({ neutralColor: s.settings.neutralColor, setSettings: s.setSettings }),
+    shallow,
+  );
+
+  const handleSelect = (v: any) => {
+    const name = findCustomThemeName('neutral', v) as NeutralColors;
+    setSettings({ neutralColor: name || '' });
+  };
+
+  return (
+    <Swatches
+      activeColor={neutralColor ? neutralColors[neutralColor] : undefined}
+      colors={neutralColorsSwatches}
+      onSelect={handleSelect}
+    />
+  );
+});
+
+export default ThemeSwatchesNeutral;

package/src/pages/setting/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -0,0 +1,33 @@
+import {
+  PrimaryColors,
+  Swatches,
+  findCustomThemeName,
+  primaryColors,
+  primaryColorsSwatches,
+} from '@lobehub/ui';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+const ThemeSwatchesPrimary = memo(() => {
+  const { primaryColor, setSettings } = useSettings(
+    (s) => ({ primaryColor: s.settings.primaryColor, setSettings: s.setSettings }),
+    shallow,
+  );
+
+  const handleSelect = (v: any) => {
+    const name = findCustomThemeName('primary', v) as PrimaryColors;
+    setSettings({ primaryColor: name || '' });
+  };
+
+  return (
+    <Swatches
+      activeColor={primaryColor ? primaryColors[primaryColor] : undefined}
+      colors={primaryColorsSwatches}
+      onSelect={handleSelect}
+    />
+  );
+});
+
+export default ThemeSwatchesPrimary;

package/src/pages/setting/ThemeSwatches/index.ts

@@ -0,0 +1,2 @@
+export { default as ThemeSwatchesNeutral } from './ThemeSwatchesNeutral';
+export { default as ThemeSwatchesPrimary } from './ThemeSwatchesPrimary';

package/src/pages/setting/index.page.tsx

@@ -0,0 +1,41 @@
+import Head from 'next/head';
+import { 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 { Sessions } from '@/pages/chat/SessionList';
+
+import Header from './Header';
+import SettingForm from './SettingForm';
+
+const initI18n = createI18nNext('setting');
+
+const SettingLayout = memo(() => {
+  const { t } = useTranslation('setting');
+  const pageTitle = `${t('header')} - LobeChat`;
+
+  useEffect(() => {
+    initI18n.finally();
+  }, []);
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <Flexbox height={'100vh'} horizontal width={'100%'}>
+        <SideBar />
+        <Sessions />
+        <Flexbox flex={1}>
+          <Header />
+          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+            <SettingForm />
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </>
+  );
+});
+
+export default SettingLayout;

package/src/prompts/agent.ts

@@ -0,0 +1,65 @@
+import { OpenAIStreamPayload } from '@/types/openai';
+
+// 自动起名
+export const promptSummaryAgentName = (content: string): Partial<OpenAIStreamPayload> => ({
+  messages: [
+    {
+      content: `你是一名擅长起名的起名大师，你需要将用户的描述总结为 20 个字以内的角色，格式要求如下：
+输入: {文本作为JSON引用字符串}
+输出: {角色名}
+`,
+      role: 'system',
+    },
+    {
+      content: `输入: {你是一名专业的前端开发者，擅长结合 vitest 和\`testing-library/react\` 书写单元测试。接下来用户会输入一串 ts 代码，你需要给出完善的单元测试。\n你需要注意，单元测试代码中，不应该使用 jest 。如果需要使用 \`jest.fn\`，请使用 \`vi.fn\` 替换}`,
+      role: 'user',
+    },
+    { content: '前端 vitest 测试专家', role: 'assistant' },
+    {
+      content: `输入: {你是一名前端专家，请将下面的代码转成 ts，不要修改实现。如果原本 js 中没有定义的全局变量，需要补充 declare 的类型声明。}`,
+      role: 'user',
+    },
+    { content: 'js 转 ts 专家', role: 'assistant' },
+    {
+      content: `输入:{你是一名擅长比喻和隐喻的UX Writter。用户会输入文案，你需要给出3个优化后的结果，使用 markdown格式的文本。下面是一个例子：
+输入：页面加载中
+输出：页面似乎在思考，一会儿才能准备好}`,
+      role: 'user',
+    },
+    { content: '文案比喻优化专家', role: 'assistant' },
+    { content: `输入: {${content}}`, role: 'user' },
+  ],
+});
+
+// 自动挑选 emoji 和背景色
+export const promptPickEmoji = (content: string): Partial<OpenAIStreamPayload> => ({
+  messages: [
+    {
+      content: `你是一名非常懂设计与时尚的设计师，你需要从用户的描述中匹配一个合适的 emoji。
+输入:你是一名精通体验设计的设计系统设计师，设计系统存在诸多类别的 token，比如品牌色、成功色等，你需要为各个类别的 token 提供说明文案。
+输出: 💅
+
+输入:用户会输入一串 ts 代码，为了确保所有功能和分支的 100% 的覆盖率，你需要给出需要考虑哪些数据场景。
+输出: 🧪
+`,
+      role: 'system',
+    },
+    {
+      content: `输入:${content}`,
+      role: 'user',
+    },
+  ],
+});
+
+export const promptSummaryDescription = (content: string): Partial<OpenAIStreamPayload> => ({
+  messages: [
+    {
+      content: '你是一名擅长会话的助理，你需要将用户的提示词做一个3句话以内的总结。',
+      role: 'system',
+    },
+    {
+      content: `输入:${content}`,
+      role: 'user',
+    },
+  ],
+});