@lobehub/chat 0.14.0 → 0.15.1

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,
   });
 };
 

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

@@ -1,4 +1,4 @@
-import { DEFAULT_AVATAR } from '@/store/session/slices/agentConfig';
+import { DEFAULT_AVATAR } from '@/const/meta';
 import { MetaData } from '@/types/meta';
 
 export const getAgentAvatar = (s: MetaData) => s.avatar || DEFAULT_AVATAR;

package/src/utils/genSiteHeadTitle.ts

@@ -0,0 +1 @@
+export const genSiteHeadTitle = (title?: string) => (title ? `${title} - LobeChat` : 'LobeChat');

package/src/pages/chat/[id]/Config/ReadMode.tsx

@@ -1,64 +0,0 @@
-import { Avatar } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { LucideBrain, LucideThermometer, WholeWord } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
-
-import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
-import { DEFAULT_TITLE } from '@/store/session/slices/agentConfig';
-
-import { ConfigCell, ConfigCellGroup } from './ConfigCell';
-
-const useStyles = createStyles(({ css, token }) => ({
-  desc: css`
-    color: ${token.colorText};
-  `,
-  model: css`
-    color: ${token.colorTextTertiary};
-  `,
-  title: css`
-    font-size: ${token.fontSizeHeading4}px;
-    font-weight: bold;
-  `,
-}));
-
-const ReadMode = memo(() => {
-  const { styles } = useStyles();
-  const session = useSessionStore(sessionSelectors.currentSessionSafe, isEqual);
-  const avatar = useSessionStore(agentSelectors.currentAgentAvatar, shallow);
-  const title = useSessionStore(agentSelectors.currentAgentTitle, shallow);
-  const model = useSessionStore(agentSelectors.currentAgentModel, shallow);
-
-  const { t } = useTranslation('common');
-  return (
-    <Center gap={12} paddingBlock={16} style={{ marginTop: 8 }}>
-      <Avatar avatar={avatar} size={100} />
-      <Flexbox className={styles.title}>{title || DEFAULT_TITLE}</Flexbox>
-      <Flexbox className={styles.model}>{model}</Flexbox>
-      <Flexbox className={styles.desc}>{session.meta.description}</Flexbox>
-
-      <Flexbox flex={1} gap={12} width={'100%'}>
-        <ConfigCell icon={LucideBrain} label={t('agentPrompt')} />
-        <ConfigCellGroup
-          items={[
-            {
-              icon: LucideThermometer,
-              label: t('modelTemperature'),
-              value: session.config.params.temperature,
-            },
-            {
-              icon: WholeWord,
-              label: t('agentMaxToken'),
-              value: session.config.params.max_tokens,
-            },
-          ]}
-        />
-      </Flexbox>
-    </Center>
-  );
-});
-
-export default ReadMode;

package/src/pages/chat/[id]/edit/AgentConfig/Plugin.tsx

@@ -1,46 +0,0 @@
-import { Avatar } from '@lobehub/ui';
-import { List, Switch, Tag } from 'antd';
-import isEqual from 'fast-deep-equal';
-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';
-
-const PluginList = () => {
-  const { t } = useTranslation('common');
-
-  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
-
-  const [toggleAgentPlugin] = useSessionStore((s) => [s.toggleAgentPlugin], shallow);
-
-  return (
-    <List
-      bordered
-      dataSource={pluginList}
-      renderItem={(item) => (
-        <List.Item>
-          <List.Item.Meta
-            avatar={<Avatar avatar={item.avatar} />}
-            description={item.schema.description}
-            title={
-              <Flexbox align={'center'} gap={8} horizontal>
-                {t(`plugin-${item.name}` as any)} <Tag>{item.name}</Tag>
-              </Flexbox>
-            }
-          />
-          <Switch
-            checked={!config.plugins ? false : config.plugins.includes(item.name)}
-            onChange={() => {
-              toggleAgentPlugin(item.name);
-            }}
-          />
-        </List.Item>
-      )}
-      size={'large'}
-    />
-  );
-};
-
-export default PluginList;

package/src/pages/chat/[id]/edit/AgentConfig/Prompt.tsx

@@ -1,69 +0,0 @@
-import { EditableMessage } from '@lobehub/ui';
-import { Button } from 'antd';
-import { createStyles } from 'antd-style';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
-
-import { agentSelectors, useSessionStore } from '@/store/session';
-
-import { FormItem } from '../FormItem';
-
-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 Prompt = () => {
-  const { t } = useTranslation('common');
-
-  const [editing, setEditing] = useState(false);
-  const { styles } = useStyles();
-
-  const systemRole = useSessionStore((s) => {
-    const config = agentSelectors.currentAgentConfigSafe(s);
-    return config.systemRole;
-  }, shallow);
-
-  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
-
-  return (
-    <FormItem label={t('agentPrompt')}>
-      <Flexbox gap={16}>
-        <EditableMessage
-          classNames={styles}
-          editing={editing}
-          onChange={(e) => {
-            updateAgentConfig({ systemRole: e });
-          }}
-          onEditingChange={setEditing}
-          showEditWhenEmpty
-          value={systemRole}
-        />
-        {!editing && !!systemRole && (
-          <Flexbox direction={'horizontal-reverse'}>
-            <Button
-              onClick={() => {
-                setEditing(true);
-              }}
-              type={'primary'}
-            >
-              {t('edit')}
-            </Button>
-          </Flexbox>
-        )}
-      </Flexbox>
-    </FormItem>
-  );
-};
-
-export default Prompt;