@lobehub/chat 0.14.0 → 0.15.0

package/src/pages/chat/[id]/edit/AgentMeta/BackgroundSwatches.tsx

@@ -0,0 +1,31 @@
+import { Swatches, primaryColorsSwatches } from '@lobehub/ui';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+const BackgroundSwatches = memo(() => {
+  const [backgroundColor, updateAgentMeta] = useSessionStore(
+    (s) => [agentSelectors.currentAgentBackgroundColor(s), s.updateAgentMeta],
+    shallow,
+  );
+
+  const handleSelect = (v: any) => {
+    if (v) {
+      updateAgentMeta({ backgroundColor: v });
+    } else {
+      updateAgentMeta({ backgroundColor: DEFAULT_BACKGROUND_COLOR });
+    }
+  };
+
+  return (
+    <Swatches
+      activeColor={backgroundColor}
+      colors={primaryColorsSwatches}
+      onSelect={handleSelect}
+    />
+  );
+});
+
+export default BackgroundSwatches;

package/src/pages/chat/[id]/edit/AgentMeta/EmojiPicker.tsx

@@ -39,8 +39,12 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
 
 const EmojiPicker = () => {
   const { styles } = useStyles();
-  const [avatar, updateAgentMeta] = useSessionStore(
-    (s) => [agentSelectors.currentAgentAvatar(s), s.updateAgentMeta],
+  const [avatar, backgroundColor, updateAgentMeta] = useSessionStore(
+    (s) => [
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      s.updateAgentMeta,
+    ],
     shallow,
   );
 
@@ -65,7 +69,7 @@ const EmojiPicker = () => {
       trigger={'click'}
     >
       <div className={styles.avatar} style={{ width: 'fit-content' }}>
-        <Avatar avatar={avatar} size={200} />
+        <Avatar avatar={avatar} background={backgroundColor} size={44} />
       </div>
     </Popover>
   );

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

@@ -1,21 +1,20 @@
-import { ActionIcon, Input, Tooltip } from '@lobehub/ui';
-import { Button, Collapse } from 'antd';
+import { Form, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideSparkles } from 'lucide-react';
+import { UserCircle, Wand2 } from 'lucide-react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { FORM_STYLE } from '@/const/layoutTokens';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
-import { FormItem } from '../FormItem';
-import { useStyles } from '../style';
+import AutoGenerateInput from './AutoGenerateInput';
+import BackgroundSwatches from './BackgroundSwatches';
 import EmojiPicker from './EmojiPicker';
 
-const AgentMeta = () => {
-  const { t } = useTranslation('common');
-
-  const { styles, theme } = useStyles();
+const AgentMeta = memo(() => {
+  const { t } = useTranslation('setting');
 
   const metaData = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
 
@@ -39,80 +38,74 @@ const AgentMeta = () => {
   );
 
   const basic = [
-    { key: 'title', label: t('agentName'), placeholder: t('agentNamePlaceholder') },
+    {
+      key: 'title',
+      label: t('settingAgent.name.title'),
+      placeholder: t('settingAgent.name.placeholder'),
+    },
     {
       key: 'description',
-      label: t('agentDescription'),
-      placeholder: t('agentDescriptionPlaceholder'),
+      label: t('settingAgent.description.title'),
+      placeholder: t('settingAgent.description.placeholder'),
     },
     // { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
   ];
 
-  return (
-    <Collapse
-      defaultActiveKey={hasSystemRole ? ['meta'] : []}
-      items={[
+  const meta: ItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <EmojiPicker />,
+          label: t('settingAgent.avatar.title'),
+          minWidth: undefined,
+        },
         {
+          children: <BackgroundSwatches />,
+          label: t('settingAgent.backgroundColor.title'),
+          minWidth: undefined,
+        },
+        ...basic.map((item) => ({
           children: (
-            <Flexbox gap={80} horizontal style={{ marginTop: 16 }}>
-              <Flexbox flex={1} gap={24}>
-                {basic.map((item) => (
-                  <FormItem key={item.key} label={item.label}>
-                    <Input
-                      onChange={(e) => {
-                        updateAgentMeta({ [item.key]: e.target.value });
-                      }}
-                      placeholder={item.placeholder}
-                      suffix={
-                        <ActionIcon
-                          icon={LucideSparkles}
-                          loading={loading[item.key as keyof typeof loading]}
-                          onClick={() => {
-                            autocompleteMeta(item.key as keyof typeof metaData);
-                          }}
-                          size={'small'}
-                          style={{
-                            color: theme.purple,
-                          }}
-                          title={t('autoGenerate')}
-                        />
-                      }
-                      type={'block'}
-                      value={metaData[item.key as keyof typeof metaData]}
-                    />
-                  </FormItem>
-                ))}
-              </Flexbox>
-              <FormItem label={t('agentAvatar')}>
-                <EmojiPicker />
-              </FormItem>
-            </Flexbox>
-          ),
-          className: styles.collapseHeader,
-          extra: (
-            <Tooltip title={t('autoGenerateTooltip')}>
-              <Button
-                disabled={!hasSystemRole}
-                loading={Object.values(loading).some((i) => !!i)}
-                onClick={(e: any) => {
-                  e.stopPropagation();
-                  console.log(id);
-                  if (!id) return;
-
-                  autocompleteSessionAgentMeta(id, true);
-                }}
-                size={'large'}
-              >
-                {t('autoGenerate')}
-              </Button>
-            </Tooltip>
+            <AutoGenerateInput
+              loading={loading[item.key as keyof typeof loading]}
+              onChange={(e) => {
+                updateAgentMeta({ [item.key]: e.target.value });
+              }}
+              onGenerate={() => {
+                autocompleteMeta(item.key as keyof typeof metaData);
+              }}
+              placeholder={item.placeholder}
+              value={metaData[item.key as keyof typeof metaData]}
+            />
           ),
-          key: 'meta',
-          label: <Flexbox className={styles.profile}>{t('profile')}</Flexbox>,
-        },
-      ]}
-    />
+          label: item.label,
+        })),
+      ],
+      extra: (
+        <Tooltip title={t('autoGenerateTooltip', { ns: 'common' })}>
+          <Button
+            disabled={!hasSystemRole}
+            icon={<Icon icon={Wand2} />}
+            loading={Object.values(loading).some((i) => !!i)}
+            onClick={(e: any) => {
+              e.stopPropagation();
+              console.log(id);
+              if (!id) return;
+              autocompleteSessionAgentMeta(id, true);
+            }}
+            size={'small'}
+          >
+            {t('autoGenerate', { ns: 'common' })}
+          </Button>
+        </Tooltip>
+      ),
+      icon: UserCircle,
+      title: t('settingAgent.title'),
+    }),
+    [basic, metaData],
   );
-};
+
+  return <Form items={[meta]} {...FORM_STYLE} />;
+});
 
 export default AgentMeta;

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

@@ -0,0 +1,44 @@
+import { Avatar, Form, ItemGroup } from '@lobehub/ui';
+import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ToyBrick } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import pluginList from '@/plugins';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+const PluginList = () => {
+  const { t } = useTranslation('setting');
+
+  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
+
+  const toggleAgentPlugin = useSessionStore((s) => s.toggleAgentPlugin, shallow);
+
+  const plugin: ItemGroup = useMemo(
+    () => ({
+      children: pluginList.map((item) => ({
+        avatar: <Avatar avatar={item.avatar} />,
+        children: (
+          <Switch
+            checked={!config.plugins ? false : config.plugins.includes(item.name)}
+            onChange={() => toggleAgentPlugin(item.name)}
+          />
+        ),
+        desc: item.schema.description,
+        label: t(`plugins.${item.name}` as any, { ns: 'plugin' }),
+        minWidth: undefined,
+        tag: item.name,
+      })),
+      icon: ToyBrick,
+      title: t('settingPlugin.title'),
+    }),
+    [config],
+  );
+
+  return <Form items={[plugin]} {...FORM_STYLE} />;
+};
+
+export default PluginList;

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

@@ -0,0 +1,48 @@
+import { CodeEditor, FormGroup } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Bot } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  input: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorPrimaryBorder};
+    border-radius: 8px;
+  `,
+  markdown: css`
+    padding: 12px;
+    background: ${token.colorFillTertiary};
+  `,
+}));
+
+const AgentPrompt = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole, shallow);
+
+  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
+
+  return (
+    <FormGroup icon={Bot} style={FORM_STYLE.style} title={t('settingAgent.prompt.title')}>
+      <CodeEditor
+        language={'md'}
+        onValueChange={(e) => {
+          updateAgentConfig({ systemRole: e });
+        }}
+        placeholder={t('settingAgent.name.placeholder')}
+        resize={false}
+        style={{ marginBottom: 16, marginTop: 16 }}
+        type={'pure'}
+        value={systemRole}
+      />
+    </FormGroup>
+  );
+});
+
+export default AgentPrompt;

package/src/pages/chat/[id]/edit/Header.tsx

@@ -0,0 +1,31 @@
+import { ActionIcon, ChatHeader } from '@lobehub/ui';
+import { Download, Share2 } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import HeaderTitle from '@/components/HeaderTitle';
+
+const Header = memo(() => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <ChatHeader
+      left={<HeaderTitle title={t('header.session')} />}
+      onBackClick={() => Router.back()}
+      right={
+        <>
+          <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />
+          <ActionIcon
+            icon={Download}
+            size={{ fontSize: 24 }}
+            title={t('export', { ns: 'common' })}
+          />
+        </>
+      }
+      showBackButton
+    />
+  );
+});
+
+export default Header;

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

@@ -1,43 +1,23 @@
-import { ActionIcon, ChatHeader } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { Download, Share2 } from 'lucide-react';
 import Head from 'next/head';
-import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import ChatLayout from '../../layout';
 import AgentConfig from './AgentConfig';
 import AgentMeta from './AgentMeta';
-
-const useStyles = createStyles(({ css, token }) => ({
-  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};
-  `,
-  title: css`
-    font-size: 16px;
-    font-weight: 500;
-  `,
-}));
+import AgentPlugin from './AgentPlugin';
+import AgentPrompt from './AgentPrompt';
+import Header from './Header';
 
 const EditPage = memo(() => {
-  const { t } = useTranslation('common');
-
-  const { styles } = useStyles();
+  const { t } = useTranslation('setting');
 
-  const pageTitle = t('editAgentProfile');
+  const pageTitle = genSiteHeadTitle(t('header.session'));
 
   return (
     <>
@@ -45,21 +25,13 @@ const EditPage = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <ChatLayout>
-        <ChatHeader
-          left={<div className={styles.title}>{t('editAgentProfile')}</div>}
-          onBackClick={() => Router.back()}
-          right={
-            <>
-              <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share')} />
-              <ActionIcon icon={Download} size={{ fontSize: 24 }} title={t('export')} />
-            </>
-          }
-          showBackButton
-        />
-        <Flexbox className={styles.form} flex={1} gap={10} padding={24}>
-          <HeaderSpacing />
+        <Header />
+        <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
+          <HeaderSpacing height={HEADER_HEIGHT - 16} />
+          <AgentPrompt />
           <AgentMeta />
           <AgentConfig />
+          <AgentPlugin />
         </Flexbox>
       </ChatLayout>
     </>

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

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { sessionSelectors, useSessionStore } from '@/store/session';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Layout from '../layout';
 import Config from './Config';
@@ -16,7 +17,7 @@ const Chat = memo(() => {
     return [context?.meta.title];
   }, isEqual);
 
-  const pageTitle = title ? `${title} - LobeChat` : 'LobeChat';
+  const pageTitle = genSiteHeadTitle(title);
 
   return (
     <>

package/src/pages/setting/Header.tsx

@@ -1,23 +1,16 @@
 import { ChatHeader } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { useTranslation } from 'react-i18next';
 import Router from 'next/router';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import HeaderTitle from '@/components/HeaderTitle';
 
-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>}
+      left={<HeaderTitle title={t('header.global')} />}
       onBackClick={() => Router.back()}
       showBackButton
     />

package/src/pages/setting/SettingForm.tsx

@@ -2,11 +2,12 @@ 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 { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 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';
@@ -99,7 +100,7 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const OpenAI: SettingItemGroup = useMemo(
+  const openAI: SettingItemGroup = useMemo(
     () => ({
       children: [
         {
@@ -123,7 +124,7 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const Chat: SettingItemGroup = useMemo(
+  const chat: SettingItemGroup = useMemo(
     () => ({
       children: [
         {
@@ -161,7 +162,7 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const Model: SettingItemGroup = useMemo(
+  const model: SettingItemGroup = useMemo(
     () => ({
       children: [
         {
@@ -222,13 +223,13 @@ const SettingForm = memo(() => {
           tag: 'max_tokens',
         },
       ],
-      icon: Bot,
+      icon: BrainCog,
       title: t('settingModel.title'),
     }),
     [settings],
   );
 
-  const System: SettingItemGroup = useMemo(
+  const system: SettingItemGroup = useMemo(
     () => ({
       children: [
         {
@@ -282,16 +283,15 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const items = useMemo(() => [theme, OpenAI, Chat, Model, System], [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%' }}
+      {...FORM_STYLE}
     />
   );
 });

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

@@ -6,6 +6,7 @@ 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';
@@ -14,7 +15,7 @@ const initI18n = createI18nNext('setting');
 
 const SettingLayout = memo(() => {
   const { t } = useTranslation('setting');
-  const pageTitle = `${t('header')} - LobeChat`;
+  const pageTitle = genSiteHeadTitle(t('header.global'));
 
   useEffect(() => {
     initI18n.finally();

package/src/store/session/slices/agentConfig/initialState.ts

@@ -16,10 +16,6 @@ export const initialLobeAgentConfig: LobeAgentConfig = {
   systemRole: '',
 };
 
-export const DEFAULT_AVATAR = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';
-
-export const DEFAULT_TITLE = 'DefaultSession';
-
 export const initialAgentConfigState: AgentConfigState = {
   // // loading 中间态
   autocompleteLoading: {
@@ -30,5 +26,5 @@ export const initialAgentConfigState: AgentConfigState = {
     title: false,
   },
 
-  showAgentSettings: false,
+  showAgentSettings: true,
 };

package/src/store/session/slices/agentConfig/selectors.ts

@@ -1,30 +1,34 @@
+import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
 import { SessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 
 import { sessionSelectors } from '../session';
-import { DEFAULT_AVATAR, initialLobeAgentConfig } from './initialState';
+import { initialLobeAgentConfig } from './initialState';
 
 const currentAgentMeta = (s: SessionStore): MetaData => {
   const session = sessionSelectors.currentSession(s);
 
-  return session?.meta || {};
+  return { avatar: DEFAULT_AVATAR, backgroundColor: DEFAULT_BACKGROUND_COLOR, ...session?.meta };
 };
 
 const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title;
 
-const currentAgentAvatar = (s: SessionStore) => {
+const currentAgentBackgroundColor = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
+  if (!session) return DEFAULT_BACKGROUND_COLOR;
+  return session.meta.backgroundColor || DEFAULT_BACKGROUND_COLOR;
+};
 
+const currentAgentAvatar = (s: SessionStore) => {
+  const session = sessionSelectors.currentSession(s);
   if (!session) return DEFAULT_AVATAR;
-
   return session.meta.avatar || DEFAULT_AVATAR;
 };
 
 const currentAgentConfig = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
-
   return session?.config;
 };
 
@@ -32,6 +36,10 @@ const currentAgentConfigSafe = (s: SessionStore): LobeAgentConfig => {
   return currentAgentConfig(s) || initialLobeAgentConfig;
 };
 
+const currentAgentSystemRole = (s: SessionStore) => {
+  return currentAgentConfigSafe(s).systemRole;
+};
+
 const currentAgentModel = (s: SessionStore): LanguageModel => {
   const config = currentAgentConfig(s);
 
@@ -45,10 +53,12 @@ const hasSystemRole = (s: SessionStore) => {
 };
 export const agentSelectors = {
   currentAgentAvatar,
+  currentAgentBackgroundColor,
   currentAgentConfig,
   currentAgentConfigSafe,
   currentAgentMeta,
   currentAgentModel,
+  currentAgentSystemRole,
   currentAgentTitle,
   hasSystemRole,
 };

package/src/store/session/slices/chat/selectors/chat.ts

@@ -1,9 +1,9 @@
+import { DEFAULT_USER_AVATAR } from '@/const/meta';
 import { agentSelectors } from '@/store/session';
 import { useSettings } from '@/store/settings';
 import { ChatMessage } from '@/types/chatMessage';
 
 import type { SessionStore } from '../../../store';
-import { DEFAULT_AVATAR } from '../../agentConfig';
 import { sessionSelectors } from '../../session';
 import { organizeChats } from './utils';
 
@@ -14,7 +14,7 @@ export const currentChats = (s: SessionStore): ChatMessage[] => {
 
   return organizeChats(session, {
     assistant: agentSelectors.currentAgentAvatar(s),
-    user: useSettings.getState().settings.avatar || DEFAULT_AVATAR,
+    user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
   });
 };