@lobehub/chat 0.149.0 → 0.149.2

package/src/features/ChatInput/Topic/index.tsx

@@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
-import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
+import { ALT_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
 
@@ -24,7 +24,7 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const iconRender: any = mobile ? icon : <Icon icon={icon} />;
   const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
-  const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
+  const hotkeys = [ALT_KEY, SAVE_TOPIC_KEY].join('+');
 
   useHotkeys(hotkeys, () => mutate(), {
     enableOnFormTags: true,
@@ -32,7 +32,7 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   });
 
   return (
-    <Tooltip title={<HotKeys desc={desc} keys={hotkeys} />}>
+    <Tooltip title={<HotKeys desc={desc} inverseTheme keys={hotkeys} />}>
       <Render aria-label={desc} icon={iconRender} loading={isValidating} onClick={() => mutate()} />
     </Tooltip>
   );

package/src/features/Conversation/Actions/Assistant.tsx

@@ -27,7 +27,7 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
         delAndRegenerate,
         del,
       ]}
-      items={[regenerate, copy]}
+      items={[edit, copy]}
       onActionClick={onActionClick}
       type="ghost"
     />

package/src/features/Conversation/Error/OllamaBizError/SetupGuide.tsx

@@ -1,19 +1,28 @@
-import { Highlighter, Snippet } from '@lobehub/ui';
-import { Tab, Tabs } from '@lobehub/ui/mdx';
+import { Highlighter, Snippet, TabsNav } from '@lobehub/ui';
 import { Steps } from 'antd';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
+import { readableColor } from 'polished';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(({ css, prefixCls }) => ({
+const useStyles = createStyles(({ css, prefixCls, token }) => ({
   steps: css`
+    margin-top: 32px;
     &.${prefixCls}-steps-small .${prefixCls}-steps-item-title {
       margin-bottom: 16px;
       font-size: 16px;
       font-weight: bold;
     }
+
+    .${prefixCls}-steps-item-description {
+      margin-bottom: 24px;
+    }
+
+    .${prefixCls}-steps-icon {
+      color: ${readableColor(token.colorPrimary)} !important;
+    }
   `,
 }));
 
@@ -21,29 +30,91 @@ const SetupGuide = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('modelProvider');
   return (
-    <Flexbox paddingBlock={8}>
-      <Steps
-        className={styles.steps}
-        direction={'vertical'}
-        items={[
-          {
-            description: (
-              <Flexbox>
-                {t('ollama.setup.install.description')}
-                <Tabs items={['macOS', t('ollama.setup.install.windowsTab'), 'Linux', 'Docker']}>
-                  <Tab>
-                    <Trans i18nKey={'ollama.setup.install.macos'} ns={'modelProvider'}>
-                      <Link href={'https://ollama.com/download'}>下载 Ollama for macOS</Link>
-                      并解压。
+    <TabsNav
+      items={[
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Trans i18nKey={'ollama.setup.install.description'} ns={'modelProvider'}>
+                      请确认你已经开启 Ollama ，如果没有安装 Ollama ，请前往官网
+                      <Link href={'https://ollama.com/download'}>下载</Link>
                     </Trans>
-                  </Tab>
-                  <Tab>
-                    <Trans i18nKey={'ollama.setup.install.windows'} ns={'modelProvider'}>
-                      <Link href={'https://ollama.com/download'}>下载 Ollama for macOS</Link>
-                      并解压。
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('ollama.setup.cors.description')}
+
+                      <Flexbox gap={8}>
+                        {t('ollama.setup.cors.macos')}
+                        <Snippet language={'bash'}>
+                          {/* eslint-disable-next-line react/no-unescaped-entities */}
+                          launchctl setenv OLLAMA_ORIGINS "*"
+                        </Snippet>
+                        {t('ollama.setup.cors.reboot')}
+                      </Flexbox>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'macos',
+          label: 'macOS',
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Trans i18nKey={'ollama.setup.install.description'} ns={'modelProvider'}>
+                      请确认你已经开启 Ollama ，如果没有安装 Ollama ，请前往官网
+                      <Link href={'https://ollama.com/download'}>下载</Link>
                     </Trans>
-                  </Tab>
-                  <Tab>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('ollama.setup.cors.description')}
+                      <div>{t('ollama.setup.cors.windows')}</div>
+                      <div>{t('ollama.setup.cors.reboot')}</div>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'windows',
+          label: t('ollama.setup.install.windowsTab'),
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
                     <Flexbox gap={8}>
                       {t('ollama.setup.install.linux.command')}
                       <Snippet language={'bash'}>
@@ -59,43 +130,16 @@ const SetupGuide = memo(() => {
                         </Trans>
                       </div>
                     </Flexbox>
-                  </Tab>
-                  <Tab>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.install.title'),
+                },
+                {
+                  description: (
                     <Flexbox gap={8}>
-                      {t('ollama.setup.install.docker')}
-                      <Snippet language={'bash'}>docker pull ollama/ollama</Snippet>
-                    </Flexbox>
-                  </Tab>
-                </Tabs>
-              </Flexbox>
-            ),
-            status: 'process',
-            title: t('ollama.setup.install.title'),
-          },
-          {
-            description: (
-              <Flexbox>
-                {t('ollama.setup.cors.description')}
+                      <div>{t('ollama.setup.cors.description')}</div>
 
-                <Tabs items={['macOS', t('ollama.setup.install.windowsTab'), 'Linux']}>
-                  <Tab>
-                    <Flexbox gap={8}>
-                      {t('ollama.setup.cors.macos')}
-                      {/* eslint-disable-next-line react/no-unescaped-entities */}
-                      <Snippet language={'bash'}>launchctl setenv OLLAMA_ORIGINS "*"</Snippet>
-                      {t('ollama.setup.cors.reboot')}
-                    </Flexbox>
-                  </Tab>
-                  <Tab>
-                    <Flexbox gap={8}>
-                      <div>{t('ollama.setup.cors.windows')}</div>
-                      <div>{t('ollama.setup.cors.reboot')}</div>
-                    </Flexbox>
-                  </Tab>
-                  <Tab>
-                    {' '}
-                    <Flexbox gap={8}>
-                      {t('ollama.setup.cors.linux.systemd')}
+                      <div>{t('ollama.setup.cors.linux.systemd')}</div>
                       {/* eslint-disable-next-line react/no-unescaped-entities */}
                       <Snippet language={'bash'}> sudo systemctl edit ollama.service</Snippet>
                       {t('ollama.setup.cors.linux.env')}
@@ -111,17 +155,62 @@ Environment="OLLAMA_ORIGINS=*"`}
                       />
                       {t('ollama.setup.cors.linux.reboot')}
                     </Flexbox>
-                  </Tab>
-                </Tabs>
-              </Flexbox>
-            ),
-            status: 'process',
-            title: t('ollama.setup.cors.title'),
-          },
-        ]}
-        size={'small'}
-      />
-    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'linux',
+          label: 'Linux',
+        },
+        {
+          children: (
+            <Steps
+              className={styles.steps}
+              direction={'vertical'}
+              items={[
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('ollama.setup.install.description')}
+                      <div>{t('ollama.setup.install.docker')}</div>
+                      <Snippet language={'bash'}>docker pull ollama/ollama</Snippet>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.install.title'),
+                },
+                {
+                  description: (
+                    <Flexbox gap={8}>
+                      {t('ollama.setup.cors.description')}
+                      <Highlighter
+                        fileName={'ollama.service'}
+                        fullFeatured
+                        language={'bash'}
+                        showLanguage
+                      >
+                        {/* eslint-disable-next-line react/no-unescaped-entities */}
+                        docker run -d --gpus=all -v ollama:/root/.ollama -e OLLAMA_ORIGINS="*" -p
+                        11434:11434 --name ollama ollama/ollama
+                      </Highlighter>
+                    </Flexbox>
+                  ),
+                  status: 'process',
+                  title: t('ollama.setup.cors.title'),
+                },
+              ]}
+              size={'small'}
+            />
+          ),
+          key: 'docker',
+          label: 'Docker',
+        },
+      ]}
+    />
   );
 });
 

package/src/locales/default/chat.ts

@@ -27,8 +27,9 @@ export default {
     title: '随便聊聊',
   },
   input: {
+    addAi: '添加一条 AI 消息',
+    addUser: '添加一条用户消息',
     more: '更多',
-    onlyAdd: '仅添加消息',
     send: '发送',
     sendWithCmdEnter: '按 {{meta}} + Enter 键发送',
     sendWithEnter: '按 Enter 键发送',
@@ -103,6 +104,8 @@ export default {
     confirmRemoveTopic: '即将删除该话题，删除后将不可恢复，请谨慎操作。',
     confirmRemoveUnstarred: '即将删除未收藏话题，删除后将不可恢复，请谨慎操作。',
     defaultTitle: '默认话题',
+    duplicateLoading: '话题复制中...',
+    duplicateSuccess: '话题复制成功',
     guide: {
       desc: '点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话',
       title: '话题列表',

package/src/locales/default/modelProvider.ts

@@ -150,16 +150,14 @@ export default {
           '在 Windows 上，点击「控制面板」，进入编辑系统环境变量。为您的用户账户新建名为 「OLLAMA_ORIGINS」 的环境变量，值为 * ，点击 「OK/应用」 保存',
       },
       install: {
-        description: '请确认你已经开启 Ollama ，如果没有下载 Ollama ，请前往官网下载',
+        description: '请确认你已经开启 Ollama ，如果没有下载 Ollama ，请前往官网<1>下载</1>',
         docker:
           '如果你更倾向于使用 Docker，Ollama 也提供了官方 Docker 镜像，你可以通过以下命令拉取：',
         linux: {
           command: '通过以下命令安装：',
           manual: '或者，你也可以参考 <1>Linux 手动安装指南</1> 自行安装',
         },
-        macos: '<0>下载 macOS 版 Ollama</0>，解压并安装',
         title: '在本地安装并开启 Ollama 应用',
-        windows: '<0>下载 Windows 版 Ollama</0>，解压并安装',
         windowsTab: 'Windows (预览版)',
       },
     },

package/src/store/chat/slices/message/action.ts

@@ -38,6 +38,7 @@ interface SendMessageParams {
 export interface ChatMessageAction {
   // create
   sendMessage: (params: SendMessageParams) => Promise<void>;
+  addAIMessage: () => Promise<void>;
   /**
    * regenerate message
    * trace enabled
@@ -214,7 +215,21 @@ export const chatMessage: StateCreator<
       if (id) switchTopic(id);
     }
   },
+  addAIMessage: async () => {
+    const { internalCreateMessage, updateInputMessage, activeTopicId, activeId, inputMessage } =
+      get();
+    if (!activeId) return;
+
+    await internalCreateMessage({
+      content: inputMessage,
+      role: 'assistant',
+      sessionId: activeId,
+      // if there is activeTopicId，then add topicId to message
+      topicId: activeTopicId,
+    });
 
+    updateInputMessage('');
+  },
   copyMessage: async (id, content) => {
     await copyToClipboard(content);
 

package/src/store/chat/slices/topic/action.test.ts

@@ -379,14 +379,18 @@ describe('topic action', () => {
   describe('updateTopicLoading', () => {
     it('should call update topicLoadingId', async () => {
       const { result } = renderHook(() => useChatStore());
-      expect(result.current.topicLoadingId).toBeUndefined();
+      act(() => {
+        useChatStore.setState({ topicLoadingIds: [] });
+      });
+
+      expect(result.current.topicLoadingIds).toHaveLength(0);
 
       // Call the action with the topicId and newTitle
-      await act(async () => {
-        await result.current.updateTopicLoading('loading-id');
+      act(() => {
+        result.current.internal_updateTopicLoading('loading-id', true);
       });
 
-      expect(result.current.topicLoadingId).toEqual('loading-id');
+      expect(result.current.topicLoadingIds).toEqual(['loading-id']);
     });
   });
   describe('summaryTopicTitle', () => {

package/src/store/chat/slices/topic/action.ts

@@ -7,18 +7,21 @@ import useSWR, { SWRResponse, mutate } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
 import { chainSummaryTitle } from '@/chains/summaryTitle';
+import { message } from '@/components/AntdStaticMethods';
 import { LOADING_FLAT } from '@/const/message';
 import { TraceNameMap } from '@/const/trace';
 import { useClientDataSWR } from '@/libs/swr';
 import { chatService } from '@/services/chat';
 import { messageService } from '@/services/message';
 import { topicService } from '@/services/topic';
+import { CreateTopicParams } from '@/services/topic/type';
 import type { ChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/message';
 import { ChatTopic } from '@/types/topic';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { chatSelectors } from '../message/selectors';
+import { ChatTopicDispatch, topicReducer } from './reducer';
 import { topicSelectors } from './selectors';
 
 const n = setNamespace('topic');
@@ -40,10 +43,14 @@ export interface ChatTopicAction {
   summaryTopicTitle: (topicId: string, messages: ChatMessage[]) => Promise<void>;
   switchTopic: (id?: string) => Promise<void>;
   updateTopicTitleInSummary: (id: string, title: string) => void;
-  updateTopicLoading: (id?: string) => void;
   updateTopicTitle: (id: string, title: string) => Promise<void>;
   useFetchTopics: (sessionId: string) => SWRResponse<ChatTopic[]>;
   useSearchTopics: (keywords?: string, sessionId?: string) => SWRResponse<ChatTopic[]>;
+
+  internal_updateTopicLoading: (id: string, loading: boolean) => void;
+  internal_createTopic: (params: CreateTopicParams) => Promise<string>;
+  internal_updateTopic: (id: string, data: Partial<ChatTopic>) => Promise<void>;
+  internal_dispatchTopic: (payload: ChatTopicDispatch, action?: any) => void;
 }
 
 export const chatTopic: StateCreator<
@@ -69,27 +76,16 @@ export const chatTopic: StateCreator<
     const messages = chatSelectors.currentChats(get());
     if (messages.length === 0) return;
 
-    const { activeId, summaryTopicTitle, refreshTopic } = get();
+    const { activeId, summaryTopicTitle, internal_createTopic } = get();
 
     // 1. create topic and bind these messages
-    const topicId = await topicService.createTopic({
+    const topicId = await internal_createTopic({
       sessionId: activeId,
       title: t('topic.defaultTitle', { ns: 'chat' }),
       messages: messages.map((m) => m.id),
     });
-    await refreshTopic();
-    // TODO: 优化为乐观更新
-    // const params: CreateTopicParams = {
-    //   sessionId: activeId,
-    //   title: t('topic.defaultTitle', { ns: 'chat' }),
-    //   messages: messages.map((m) => m.id),
-    // };
-
-    // const topicId = await refreshTopic({
-    //   action: async () => topicService.createTopic(params),
-    //   optimisticData: (data) => topicReducer(data, { type: 'addTopic', value: params }),
-    // });
 
+    get().internal_updateTopicLoading(topicId, true);
     // 2. auto summary topic Title
     // we don't need to wait for summary, just let it run async
     summaryTopicTitle(topicId, messages);
@@ -104,14 +100,22 @@ export const chatTopic: StateCreator<
 
     const newTitle = t('duplicateTitle', { ns: 'chat', title: topic?.title });
 
+    message.loading({
+      content: t('topic.duplicateLoading', { ns: 'chat' }),
+      key: 'duplicateTopic',
+      duration: 0,
+    });
+
     const newTopicId = await topicService.cloneTopic(id, newTitle);
     await refreshTopic();
+    message.destroy('duplicateTopic');
+    message.success(t('topic.duplicateSuccess', { ns: 'chat' }));
 
-    switchTopic(newTopicId);
+    await switchTopic(newTopicId);
   },
   // update
   summaryTopicTitle: async (topicId, messages) => {
-    const { updateTopicTitleInSummary, updateTopicLoading, refreshTopic } = get();
+    const { updateTopicTitleInSummary, internal_updateTopicLoading } = get();
     const topic = topicSelectors.getTopicById(topicId)(get());
     if (!topic) return;
 
@@ -125,10 +129,10 @@ export const chatTopic: StateCreator<
         updateTopicTitleInSummary(topicId, topic.title);
       },
       onFinish: async (text) => {
-        await topicService.updateTopic(topicId, { title: text });
+        await get().internal_updateTopic(topicId, { title: text });
       },
       onLoadingChange: (loading) => {
-        updateTopicLoading(loading ? topicId : undefined);
+        internal_updateTopicLoading(topicId, loading);
       },
       onMessageHandle: (x) => {
         output += x;
@@ -137,23 +141,23 @@ export const chatTopic: StateCreator<
       params: await chainSummaryTitle(messages),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.SummaryTopicTitle, topicId }),
     });
-    await refreshTopic();
   },
   favoriteTopic: async (id, favorite) => {
-    await topicService.updateTopic(id, { favorite });
-    await get().refreshTopic();
+    await get().internal_updateTopic(id, { favorite });
   },
 
   updateTopicTitle: async (id, title) => {
-    await topicService.updateTopic(id, { title });
-    await get().refreshTopic();
+    await get().internal_updateTopic(id, { title });
   },
 
   autoRenameTopicTitle: async (id) => {
-    const { activeId: sessionId, summaryTopicTitle } = get();
+    const { activeId: sessionId, summaryTopicTitle, internal_updateTopicLoading } = get();
+
+    internal_updateTopicLoading(id, true);
     const messages = await messageService.getMessages(sessionId, id);
 
     await summaryTopicTitle(id, messages);
+    internal_updateTopicLoading(id, false);
   },
 
   // query
@@ -235,10 +239,48 @@ export const chatTopic: StateCreator<
 
     set({ topics }, false, n(`updateTopicTitleInSummary`, { id, title }));
   },
-  updateTopicLoading: (id) => {
-    set({ topicLoadingId: id }, false, n('updateTopicLoading'));
-  },
   refreshTopic: async () => {
     return mutate([SWR_USE_FETCH_TOPIC, get().activeId]);
   },
+
+  internal_updateTopicLoading: (id, loading) => {
+    set(
+      (state) => {
+        if (loading) return { topicLoadingIds: [...state.topicLoadingIds, id] };
+
+        return { topicLoadingIds: state.topicLoadingIds.filter((i) => i !== id) };
+      },
+      false,
+      n('updateTopicLoading'),
+    );
+  },
+
+  internal_updateTopic: async (id, data) => {
+    get().internal_dispatchTopic({ type: 'updateTopic', id, value: data });
+
+    get().internal_updateTopicLoading(id, true);
+    await topicService.updateTopic(id, data);
+    await get().refreshTopic();
+    get().internal_updateTopicLoading(id, false);
+  },
+  internal_createTopic: async (params) => {
+    const tmpId = Date.now().toString();
+    get().internal_dispatchTopic({ type: 'addTopic', value: { ...params, id: tmpId } });
+
+    get().internal_updateTopicLoading(tmpId, true);
+    const topicId = await topicService.createTopic(params);
+    get().internal_updateTopicLoading(tmpId, false);
+
+    get().internal_updateTopicLoading(topicId, true);
+    await get().refreshTopic();
+    get().internal_updateTopicLoading(topicId, false);
+
+    return topicId;
+  },
+
+  internal_dispatchTopic: (payload, action) => {
+    const nextTopics = topicReducer(get().topics, payload);
+
+    set({ topics: nextTopics }, false, action);
+  },
 });

package/src/store/chat/slices/topic/initialState.ts

@@ -4,7 +4,7 @@ export interface ChatTopicState {
   activeTopicId?: string;
   isSearchingTopic: boolean;
   searchTopics: ChatTopic[];
-  topicLoadingId?: string;
+  topicLoadingIds: string[];
   topicRenamingId?: string;
   topicSearchKeywords: string;
   topics: ChatTopic[];
@@ -17,6 +17,7 @@ export interface ChatTopicState {
 export const initialTopicState: ChatTopicState = {
   isSearchingTopic: false,
   searchTopics: [],
+  topicLoadingIds: [],
   topicSearchKeywords: '',
   topics: [],
   topicsInit: false,

package/src/store/chat/slices/topic/reducer.test.ts

@@ -42,8 +42,7 @@ describe('topicReducer', () => {
       const payload: ChatTopicDispatch = {
         type: 'updateTopic',
         id: '1',
-        key: 'title',
-        value: 'Updated Topic',
+        value: { title: 'Updated Topic' },
       };
 
       const newState = topicReducer(state, payload);
@@ -64,13 +63,12 @@ describe('topicReducer', () => {
       const payload: ChatTopicDispatch = {
         type: 'updateTopic',
         id: '1',
-        key: 'title',
-        value: 'Updated Topic',
+        value: { title: 'Updated Topic' },
       };
 
       const newState = topicReducer(state, payload);
 
-      expect(newState[0].updatedAt).toBeGreaterThan(topic.updatedAt);
+      expect((newState[0].updatedAt as unknown as Date).valueOf()).toBeGreaterThan(topic.updatedAt);
     });
   });