@lobehub/chat 0.96.8 → 0.97.0

package/src/app/chat/features/{TopicListContent/SystemRole → SystemRole}/index.tsx

@@ -1,19 +1,23 @@
 import { ActionIcon, EditableMessage } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { Edit } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
 
 import AgentInfo from '@/features/AgentInfo';
+import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
+import { pathString } from '@/utils/url';
 
-import Header from './Header';
+import SidebarHeader from '../SidebarHeader';
 import { useStyles } from './style';
 
 const SystemRole = memo(() => {
-  const [openModal, setOpenModal] = useState(false);
+  const router = useRouter();
   const [editing, setEditing] = useState(false);
   const { styles } = useStyles();
   const [systemRole, meta, updateAgentConfig] = useSessionStore((s) => [
@@ -21,30 +25,45 @@ const SystemRole = memo(() => {
     agentSelectors.currentAgentMeta(s),
     s.updateAgentConfig,
   ]);
+  const [showSystemRole, toggleSystemRole] = useGlobalStore((s) => [
+    s.preference.showSystemRole,
+    s.toggleSystemRole,
+  ]);
+  const [open, setOpen] = useMergeState(false, {
+    defaultValue: showSystemRole,
+    onChange: toggleSystemRole,
+    value: showSystemRole,
+  });
 
   const init = useSessionChatInit();
   const { t } = useTranslation('common');
+
+  const handleOpenWithEdit = () => {
+    if (!init) return;
+    setEditing(true);
+    setOpen(true);
+  };
+
+  const handleOpen = () => {
+    if (!init) return;
+    setEditing(false);
+    setOpen(true);
+  };
+
   return (
     <Flexbox height={'fit-content'}>
-      <Header
+      <SidebarHeader
         actions={
-          <ActionIcon
-            icon={Edit}
-            onClick={() => setOpenModal(true)}
-            size={'small'}
-            title={t('edit')}
-          />
+          <ActionIcon icon={Edit} onClick={handleOpenWithEdit} size={'small'} title={t('edit')} />
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
       <Flexbox
         className={styles.promptBox}
         height={200}
+        onClick={handleOpen}
         onDoubleClick={(e) => {
-          if (e.altKey) {
-            setOpenModal(true);
-            setEditing(true);
-          }
+          if (e.altKey) handleOpenWithEdit();
         }}
       >
         {!init ? (
@@ -59,13 +78,23 @@ const SystemRole = memo(() => {
             <EditableMessage
               classNames={{ markdown: styles.prompt }}
               editing={editing}
-              model={{ extra: <AgentInfo meta={meta} style={{ marginBottom: 16 }} /> }}
+              model={{
+                extra: (
+                  <AgentInfo
+                    meta={meta}
+                    onAvatarClick={() =>
+                      router.push(pathString('/chat/settings', { hash: location.hash }))
+                    }
+                    style={{ marginBottom: 16 }}
+                  />
+                ),
+              }}
               onChange={(e) => {
                 updateAgentConfig({ systemRole: e });
               }}
               onEditingChange={setEditing}
-              onOpenChange={setOpenModal}
-              openModal={openModal}
+              onOpenChange={setOpen}
+              openModal={open}
               placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
               styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
               text={{

package/src/app/chat/features/TopicListContent/Header.tsx

@@ -0,0 +1,86 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { App, Dropdown, MenuProps } from 'antd';
+import { MoreHorizontal, Search, Trash } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { topicSelectors } from '@/store/session/selectors';
+
+import SidebarHeader from '../SidebarHeader';
+import TopicSearchBar from './TopicSearchBar';
+
+const Header = memo(() => {
+  const { t } = useTranslation('chat');
+  const [topicLength, removeUnstarredTopic, removeAllTopic] = useSessionStore((s) => [
+    topicSelectors.currentTopicLength(s),
+    s.removeUnstarredTopic,
+    s.removeAllTopic,
+  ]);
+
+  const [showSearch, setShowSearch] = useState(false);
+  const { modal } = App.useApp();
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={Trash} />,
+        key: 'deleteUnstarred',
+        label: t('topic.removeUnstarred'),
+        onClick: () => {
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: removeUnstarredTopic,
+            title: t('topic.confirmRemoveUnstarred', { ns: 'chat' }),
+          });
+        },
+      },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'deleteAll',
+        label: t('topic.removeAll'),
+        onClick: () => {
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: removeAllTopic,
+            title: t('topic.confirmRemoveAll', { ns: 'chat' }),
+          });
+        },
+      },
+    ],
+    [],
+  );
+
+  return showSearch ? (
+    <Flexbox padding={'12px 16px 4px'}>
+      <TopicSearchBar onClear={() => setShowSearch(false)} />
+    </Flexbox>
+  ) : (
+    <SidebarHeader
+      actions={
+        <>
+          <ActionIcon icon={Search} onClick={() => setShowSearch(true)} size={'small'} />
+          <Dropdown
+            arrow={false}
+            menu={{
+              items: items,
+              onClick: ({ domEvent }) => {
+                domEvent.stopPropagation();
+              },
+            }}
+            trigger={['click']}
+          >
+            <ActionIcon icon={MoreHorizontal} size={'small'} />
+          </Dropdown>
+        </>
+      }
+      title={`${t('topic.title')} ${topicLength > 1 ? topicLength + 1 : ''}`}
+    />
+  );
+});
+
+export default Header;

package/src/app/chat/features/TopicListContent/Topic/SkeletonList.tsx

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 
 const SkeletonList = memo(() => {
   return (
-    <Flexbox gap={8} style={{ marginTop: 8 }}>
+    <Flexbox gap={8} paddingInline={10} style={{ marginTop: 8 }}>
       {Array.from({ length: 8 }).map((_, i) => (
         <Skeleton
           active

package/src/app/chat/features/TopicListContent/TopicSearchBar/index.tsx

@@ -5,14 +5,19 @@ import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
-const TopicSearchBar = memo(() => {
+const TopicSearchBar = memo<{ onClear?: () => void }>(({ onClear }) => {
   const { t } = useTranslation('chat');
   const [keywords] = useSessionStore((s) => [s.topicSearchKeywords]);
   const { mobile } = useResponsive();
   return (
     <SearchBar
-      allowClear
-      onChange={(e) => useSessionStore.setState({ topicSearchKeywords: e.target.value })}
+      autoFocus
+      onBlur={() => {
+        if (keywords === '') onClear?.();
+      }}
+      onChange={(e) => {
+        useSessionStore.setState({ topicSearchKeywords: e.target.value });
+      }}
       placeholder={t('topic.searchPlaceholder')}
       spotlight={!mobile}
       type={mobile ? 'block' : 'ghost'}

package/src/app/chat/features/TopicListContent/index.tsx

@@ -1,19 +1,30 @@
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import TopicSearchBar from '@/app/chat/features/TopicListContent/TopicSearchBar';
+
+import Header from './Header';
 import { Topic } from './Topic';
-import TopicSearchBar from './TopicSearchBar';
 
-const TopicListContent = () => {
+const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
     <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-      <Flexbox padding={16}>
-        <TopicSearchBar />
-      </Flexbox>
-      <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+      {mobile ? (
+        <Flexbox padding={'12px 16px'}>
+          <TopicSearchBar />
+        </Flexbox>
+      ) : (
+        <Header />
+      )}
+      <Flexbox
+        gap={16}
+        paddingInline={mobile ? 16 : 8}
+        style={{ overflowY: 'auto', paddingTop: 6, position: 'relative' }}
+      >
         <Topic />
       </Flexbox>
     </Flexbox>
   );
-};
+});
 
 export default TopicListContent;

package/src/app/settings/features/SideBar/index.tsx

@@ -31,7 +31,7 @@ const SideBar = memo(() => {
           </div>
         </Flexbox>
         <UpgradeAlert />
-        <Flexbox gap={2} style={{ paddingInline: 6 }}>
+        <Flexbox gap={2} style={{ paddingInline: 8 }}>
           <List />
         </Flexbox>
       </DraggablePanelBody>

package/src/features/AgentInfo/index.tsx

@@ -26,11 +26,12 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
 
 export interface AgentInfoProps {
   meta?: MetaData;
+  onAvatarClick?: () => void;
   style?: CSSProperties;
   systemRole?: string;
 }
 
-const AgentInfo = memo<AgentInfoProps>(({ systemRole, style, meta }) => {
+const AgentInfo = memo<AgentInfoProps>(({ systemRole, style, meta, onAvatarClick }) => {
   const { styles, theme } = useStyles();
 
   if (!meta) return;
@@ -43,6 +44,7 @@ const AgentInfo = memo<AgentInfoProps>(({ systemRole, style, meta }) => {
           avatar={meta.avatar}
           background={meta.backgroundColor || theme.colorFillTertiary}
           className={styles.avatar}
+          onClick={onAvatarClick}
           size={100}
         />
       )}

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -8,6 +8,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 import { useStore } from '../store';
 import { SessionLoadingState } from '../store/initialState';
@@ -15,16 +16,18 @@ import AutoGenerateInput from './AutoGenerateInput';
 import AutoGenerateSelect from './AutoGenerateSelect';
 import BackgroundSwatches from './BackgroundSwatches';
 
-const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'), { ssr: false });
+const EmojiPicker = dynamic(() => import('@lobehub/ui/es/EmojiPicker'), { ssr: false });
 
 const AgentMeta = memo(() => {
   const { t } = useTranslation('setting');
+
   const [hasSystemRole, updateMeta, autocompleteMeta, autocompleteAllMeta] = useStore((s) => [
     !!s.config.systemRole,
     s.setAgentMeta,
     s.autocompleteMeta,
     s.autocompleteAllMeta,
   ]);
+  const locale = useGlobalStore(settingsSelectors.currentLanguage);
   const loading = useStore((s) => s.autocompleteLoading);
   const meta = useStore((s) => s.meta, isEqual);
 
@@ -77,6 +80,7 @@ const AgentMeta = memo(() => {
           children: (
             <EmojiPicker
               backgroundColor={meta.backgroundColor}
+              locale={locale}
               onChange={(avatar) => updateMeta({ avatar })}
               value={meta.avatar}
             />

package/src/features/PluginDevModal/MetaForm.tsx

@@ -4,13 +4,14 @@ import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 
-const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'), { ssr: false });
+const EmojiPicker = dynamic(() => import('@lobehub/ui/es/EmojiPicker'), { ssr: false });
 
 const MetaForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form, mode }) => {
   const isEditMode = mode === 'edit';
-
+  const locale = useGlobalStore(settingsSelectors.currentLanguage);
   const { t } = useTranslation('plugin');
   const [plugins] = usePluginStore((s) => [pluginSelectors.pluginList(s).map((i) => i.identifier)]);
 
@@ -65,7 +66,7 @@ const MetaForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form,
       name: 'homepage',
     },
     {
-      children: <EmojiPicker defaultAvatar={'🧩'} />,
+      children: <EmojiPicker defaultAvatar={'🧩'} locale={locale} />,
       desc: t('dev.meta.avatar.desc'),
       label: t('dev.meta.avatar.label'),
       name: ['meta', 'avatar'],

package/src/layout/GlobalLayout/Locale.tsx

@@ -1,5 +1,5 @@
 import { ConfigProvider } from 'antd';
-import Zh_CN from 'antd/locale/zh_CN';
+import defaultLocale from 'antd/locale/en_US';
 import { PropsWithChildren, memo, useState } from 'react';
 
 import { createI18nNext } from '@/locales/create';
@@ -12,6 +12,7 @@ interface LocaleLayoutProps extends PropsWithChildren {
 }
 
 const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
+  const [locale, setLocale] = useState(defaultLocale);
   const [i18n] = useState(createI18nNext(lang));
 
   // if run on server side, init i18n instance everytime
@@ -26,13 +27,22 @@ const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
       });
   }
 
+  const getLocale = async (localeName: string) => {
+    setLocale((await import(`antd/locale/${localeName}.js`)) as any);
+  };
+
   useOnFinishHydrationGlobal((s) => {
     if (s.settings.language === 'auto') {
       switchLang('auto');
     }
+
+    if (lang?.includes('-') && lang !== 'en-US') {
+      const localeName = lang?.replace('-', '_');
+      getLocale(localeName);
+    }
   }, []);
 
-  return <ConfigProvider locale={Zh_CN}>{children}</ConfigProvider>;
+  return <ConfigProvider locale={locale}>{children}</ConfigProvider>;
 });
 
 // const Locale = memo<LocaleLayoutProps>((props) => (

package/src/locales/default/chat.ts

@@ -46,11 +46,16 @@ export default {
     used: '使用',
   },
   topic: {
+    confirmRemoveAll: '即将删除全部话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
+    confirmRemoveUnstarred: '即将删除未收藏话题，删除后将不可恢复，请谨慎操作。',
     defaultTitle: '默认话题',
+    openNewTopic: '开启新话题',
+    removeAll: '删除全部话题',
+    removeUnstarred: '删除未收藏话题',
     saveCurrentMessages: '将当前会话保存为话题',
     searchPlaceholder: '搜索话题...',
-    title: '话题',
+    title: '话题列表',
   },
   translate: {
     clear: '删除翻译',

package/src/store/global/initialState.ts

@@ -26,6 +26,7 @@ export interface GlobalPreference {
   sessionsWidth: number;
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
+  showSystemRole?: boolean;
 }
 
 export interface GlobalState {
@@ -54,6 +55,7 @@ export const initialState: GlobalState = {
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,
+    showSystemRole: false,
   },
   settings: DEFAULT_SETTINGS,
   settingsTab: SettingsTabs.Common,

package/src/store/global/slices/common.ts

@@ -24,6 +24,7 @@ export interface CommonAction {
   switchSideBar: (key: SidebarTabKey) => void;
   toggleChatSideBar: (visible?: boolean) => void;
   toggleMobileTopic: (visible?: boolean) => void;
+  toggleSystemRole: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
   updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
   useCheckLatestVersion: () => SWRResponse<string>;
@@ -50,6 +51,12 @@ export const createCommonSlice: StateCreator<
 
     get().updatePreference({ mobileShowTopic }, t('toggleMobileTopic', newValue) as string);
   },
+  toggleSystemRole: (newValue) => {
+    const showSystemRole =
+      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+
+    get().updatePreference({ showSystemRole }, t('toggleMobileTopic', newValue) as string);
+  },
   updateGuideState: (guide) => {
     const { updatePreference } = get();
     const nextGuide = merge(get().preference.guide, guide);

package/src/store/session/slices/chat/actions/message.ts

@@ -83,13 +83,16 @@ export const chatMessage: StateCreator<
   ChatMessageAction
 > = (set, get) => ({
   clearMessage: () => {
-    const { dispatchMessage, activeTopicId, dispatchTopic } = get();
+    const { dispatchMessage, activeTopicId, dispatchTopic, toggleTopic } = get();
 
     dispatchMessage({ topicId: activeTopicId, type: 'resetMessages' });
 
     if (activeTopicId) {
       dispatchTopic({ id: activeTopicId, type: 'deleteChatTopic' });
     }
+
+    // after remove topic , go back to default topic
+    toggleTopic();
   },
 
   coreProcessMessage: async (messages, userMessageId) => {

package/src/store/session/slices/chat/actions/topic.ts

@@ -18,11 +18,20 @@ export interface ChatTopicAction {
    * @param payload - 要分发的主题
    */
   dispatchTopic: (payload: ChatTopicDispatch) => void;
+  openNewTopicOrSaveTopic: () => void;
+  /**
+   * 移出所有话题
+   */
+  removeAllTopic: () => void;
   /**
    * 移除话题
    * @param id
    */
   removeTopic: (id: string) => void;
+  /**
+   * 移出所有未标记的话题
+   */
+  removeUnstarredTopic: () => void;
   /**
    * 将当前消息保存为主题
    */
@@ -54,16 +63,33 @@ export const chatTopic: StateCreator<
 
     get().dispatchSession({ id: activeId, topics, type: 'updateSessionTopic' });
   },
+  openNewTopicOrSaveTopic: () => {
+    const { toggleTopic, saveToTopic, activeTopicId } = get();
+    const hasTopic = !!activeTopicId;
+
+    if (hasTopic) toggleTopic();
+    else {
+      saveToTopic();
+    }
+  },
+  removeAllTopic: () => {
+    const { removeTopic, toggleTopic } = get();
+    const topics = topicSelectors.currentTopics(get());
+
+    for (const { id } of topics) {
+      removeTopic(id);
+    }
+
+    // 切换到默认 topic
+    toggleTopic();
+  },
   removeTopic: (id) => {
     const { dispatchTopic, dispatchMessage, toggleTopic } = get();
 
     // 移除关联的 message
     const messages = topicSelectors.getTopicMessages(id)(get());
     for (const m of messages) {
-      dispatchMessage({
-        id: m.id,
-        type: 'deleteMessage',
-      });
+      dispatchMessage({ id: m.id, type: 'deleteMessage' });
     }
 
     // 最后移除 topic
@@ -72,14 +98,28 @@ export const chatTopic: StateCreator<
     // 切换到默认 topic
     toggleTopic();
   },
+  removeUnstarredTopic: () => {
+    const { removeTopic, toggleTopic } = get();
+    const topics = topicSelectors.currentTopics(get());
+
+    for (const { id, favorite } of topics) {
+      if (!favorite) removeTopic(id);
+    }
+
+    // 切换到默认 topic
+    toggleTopic();
+  },
   saveToTopic: async () => {
     const session = sessionSelectors.currentSession(get());
     if (!session) return;
 
     const { dispatchTopic, dispatchMessage, updateTopicLoading } = get();
-    // 获取当前的 messages
+    // get current messages
     const messages = chatSelectors.currentChats(get());
 
+    // if there is no message, stop saving
+    if (messages.length === 0) return;
+
     const topicId = nanoid();
 
     const defaultTitle = '默认话题';
@@ -124,6 +164,7 @@ export const chatTopic: StateCreator<
   toggleTopic: (id) => {
     set({ activeTopicId: id }, false, t('toggleTopic'));
   },
+
   updateTopicLoading: (id) => {
     set({ topicLoadingId: id }, false, t('updateTopicLoading'));
   },

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

@@ -7,7 +7,7 @@ import {
   getFunctionMessageProps,
   getMessageById,
 } from './chat';
-import { currentTopics, getTopicMessages } from './topic';
+import { currentTopicLength, currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
   chatsMessageString,
@@ -20,6 +20,7 @@ export const chatSelectors = {
 };
 
 export const topicSelectors = {
+  currentTopicLength,
   currentTopics,
   getTopicMessages,
 };

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

@@ -18,6 +18,10 @@ export const currentTopics = (s: SessionStore): ChatTopic[] => {
   return [...favTopics, ...defaultTopics];
 };
 
+export const currentTopicLength = (s: SessionStore): number => {
+  return currentTopics(s).length;
+};
+
 export const getTopicMessages = (topicId: string) => (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
   if (!session) return [];

package/src/components/EmojiPicker/index.tsx

@@ -1,56 +0,0 @@
-import data from '@emoji-mart/data';
-import i18n from '@emoji-mart/data/i18n/zh.json';
-import Picker from '@emoji-mart/react';
-import { Avatar } from '@lobehub/ui';
-import { Popover } from 'antd';
-import { memo } from 'react';
-import useMergeState from 'use-merge-value';
-
-import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
-
-import { useStyles } from './style';
-
-export interface EmojiPickerProps {
-  backgroundColor?: string;
-  defaultAvatar?: string;
-  onChange?: (emoji: string) => void;
-  value?: string;
-}
-
-const EmojiPicker = memo<EmojiPickerProps>(
-  ({ value, defaultAvatar, backgroundColor = DEFAULT_BACKGROUND_COLOR, onChange }) => {
-    const { styles } = useStyles();
-
-    const [ava, setAva] = useMergeState(DEFAULT_AVATAR, {
-      defaultValue: defaultAvatar,
-      onChange,
-      value,
-    });
-
-    return (
-      <Popover
-        content={
-          <div className={styles.picker}>
-            <Picker
-              data={data}
-              i18n={i18n}
-              locale={'zh'}
-              onEmojiSelect={(e: any) => setAva(e.native)}
-              skinTonePosition={'none'}
-              theme={'auto'}
-            />
-          </div>
-        }
-        placement={'left'}
-        rootClassName={styles.popover}
-        trigger={'click'}
-      >
-        <div className={styles.avatar} style={{ width: 'fit-content' }}>
-          <Avatar avatar={ava} background={backgroundColor} size={44} />
-        </div>
-      </Popover>
-    );
-  },
-);
-
-export default EmojiPicker;