@lobehub/chat 0.13.1 → 0.15.0

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/plugins/index.ts

@@ -1,6 +1,7 @@
 import searchEngine from './searchEngine';
 import getWeather from './weather';
+import webCrawler from './webCrawler';
 
-const pluginList = [getWeather, searchEngine];
+const pluginList = [getWeather, searchEngine, webCrawler];
 
 export default pluginList;

package/src/plugins/webCrawler/index.ts

@@ -0,0 +1,20 @@
+import runner from './runner';
+
+const schema = {
+  description: '提取网页内容并总结',
+  name: 'websiteCrawler',
+  parameters: {
+    properties: {
+      url: {
+        description: '网页内容',
+        type: 'string',
+      },
+    },
+    required: ['url'],
+    type: 'object',
+  },
+};
+
+const getWeather = { avatar: '🕸', name: 'websiteCrawler', runner, schema };
+
+export default getWeather;

package/src/plugins/webCrawler/runner.ts

@@ -0,0 +1,75 @@
+export type DataResults = DataItem[];
+
+export interface DataItem {
+  crawl: Crawl;
+  markdown: string;
+  metadata: Metadata;
+  screenshotUrl: any;
+  text: string;
+  url: string;
+}
+
+export interface Crawl {
+  depth: number;
+  httpStatusCode: number;
+  loadedTime: string;
+  loadedUrl: string;
+  referrerUrl: string;
+}
+
+export interface Metadata {
+  author: any;
+  canonicalUrl: string;
+  description: string;
+  keywords: string;
+  languageCode: string;
+  title: string;
+}
+
+const BASE_URL =
+  'https://api.apify.com/v2/acts/apify~website-content-crawler/run-sync-get-dataset-items';
+const token = process.env.APIFY_API_KEY;
+
+const runner = async ({ url }: { url: string }) => {
+  // Prepare Actor input
+  const input = {
+    aggressivePrune: false,
+    clickElementsCssSelector: '[aria-expanded="false"]',
+    debugMode: false,
+    dynamicContentWaitSecs: 3,
+    proxyConfiguration: {
+      useApifyProxy: true,
+    },
+    removeCookieWarnings: true,
+    removeElementsCssSelector:
+      'nav, footer, script, style, noscript, svg,\n[role="alert"],\n[role="banner"],\n[role="dialog"],\n[role="alertdialog"],\n[role="region"][aria-label*="skip" i],\n[aria-modal="true"]',
+    saveFiles: false,
+    saveHtml: false,
+    saveMarkdown: true,
+    saveScreenshots: false,
+    startUrls: [{ url }],
+  };
+
+  try {
+    const data = await fetch(`${BASE_URL}?token=${token}`, {
+      body: JSON.stringify(input),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    const result = (await data.json()) as DataResults;
+
+    const item = result[0];
+    return {
+      content: item.markdown,
+      title: item.metadata.title,
+      url: item.url,
+    };
+  } catch (error) {
+    console.error(error);
+    return { content: '抓取失败', errorMessage: (error as any).message };
+  }
+};
+
+export default runner;

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

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;