@lobehub/chat 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+## [Version 0.21.0](https://github.com/lobehub/lobe-chat/compare/v0.20.0...v0.21.0)
+
+<sup>Released on **2023-07-25**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Move component folder.
+
+#### ✨ Features
+
+- **misc**: 支持快捷配置模型、温度.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Move component folder ([fb85d16](https://github.com/lobehub/lobe-chat/commit/fb85d16))
+
+#### What's improved
+
+- **misc**: 支持快捷配置模型、温度, closes [#19](https://github.com/lobehub/lobe-chat/issues/19) ([31daee1](https://github.com/lobehub/lobe-chat/commit/31daee1))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.20.0](https://github.com/lobehub/lobe-chat/compare/v0.19.0...v0.20.0)
+
+<sup>Released on **2023-07-25**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现话题模块.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现话题模块, closes [#16](https://github.com/lobehub/lobe-chat/issues/16) ([64fd6ee](https://github.com/lobehub/lobe-chat/commit/64fd6ee))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.19.0](https://github.com/lobehub/lobe-chat/compare/v0.18.2...v0.19.0)
 
 <sup>Released on **2023-07-24**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/{features → components}/SliderWithInput/index.tsx

@@ -20,6 +20,7 @@ const SliderWithInput = memo<SliderSingleProps>(
           onChange={handleOnchange}
           step={step}
           style={{ flex: 1 }}
+          tooltip={{ open: false }}
           value={typeof value === 'number' ? value : 0}
           {...props}
         />

package/src/locales/default/common.ts

@@ -27,8 +27,8 @@ export default {
   share: '分享',
   tokenDetail: '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
   topic: {
-    saveCurrentMessages: '保存当前对话为话题',
-    searchPlaceholder: '搜索归档对话...',
+    saveCurrentMessages: '将当前会话保存为话题',
+    searchPlaceholder: '搜索话题...',
   },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',

package/src/locales/default/setting.ts

@@ -102,6 +102,7 @@ export default {
     temperature: {
       desc: '值越大，回复越随机',
       title: '随机性',
+      titleWithValue: '随机性 {{value}}',
     },
     title: '模型设置',
     topP: {

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

@@ -1,11 +1,12 @@
 import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
+import { Maximize2Icon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { Topic } from '@/pages/chat/[id]/Config/Topic';
 import { agentSelectors, useSessionStore } from '@/store/session';
 
 import Header from './Header';
@@ -42,8 +43,10 @@ const useStyles = createStyles(({ css, token }) => ({
 const SideBar = memo(() => {
   const [openModal, setOpenModal] = useState(false);
   const { styles } = useStyles();
-  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
-  const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole, shallow);
+  const [systemRole, updateAgentConfig] = useSessionStore(
+    (s) => [agentSelectors.currentAgentSystemRole(s), s.updateAgentConfig],
+    shallow,
+  );
 
   const { t } = useTranslation('common');
   return (
@@ -51,7 +54,7 @@ const SideBar = memo(() => {
       <Header
         actions={
           <ActionIcon
-            icon={ChevronRight}
+            icon={Maximize2Icon}
             onClick={() => setOpenModal(true)}
             size="small"
             title={t('edit')}
@@ -76,8 +79,9 @@ const SideBar = memo(() => {
         }}
         value={systemRole}
       />
-      <Flexbox style={{ padding: 16 }}>
+      <Flexbox gap={12} style={{ padding: 16 }}>
         <SearchBar placeholder={t('topic.searchPlaceholder')} type={'block'} />
+        <Topic />
       </Flexbox>
     </DraggablePanelBody>
   );

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

@@ -0,0 +1,27 @@
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { topicSelectors, useSessionStore } from '@/store/session';
+
+import TopicItem from './TopicItem';
+
+export const Topic = () => {
+  const topics = useSessionStore(topicSelectors.currentTopics);
+  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId], shallow);
+  return (
+    <Flexbox gap={8}>
+      <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
+
+      {topics.map(({ id, favorite, title }) => (
+        <TopicItem
+          active={activeTopicId === id}
+          fav={favorite}
+          id={id}
+          key={id}
+          showFav
+          title={title}
+        />
+      ))}
+    </Flexbox>
+  );
+};

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

@@ -0,0 +1,80 @@
+import { StarFilled, StarOutlined } from '@ant-design/icons';
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    background: ${token.colorFill};
+
+    &:hover {
+      background: ${token.colorFill};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+    background: ${token.colorFillTertiary};
+    border-radius: 6px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  split: css`
+    border-bottom: 1px solid ${token.colorSplit};
+  `,
+}));
+
+export interface ConfigCellProps {
+  active?: boolean;
+  fav?: boolean;
+  id?: string;
+  showFav?: boolean;
+  title: string;
+}
+
+const TopicItem = memo<ConfigCellProps>(({ title, active, id, showFav, fav }) => {
+  const { styles, theme, cx } = useStyles();
+
+  const [dispatchTopic, toggleTopic] = useSessionStore(
+    (s) => [s.dispatchTopic, s.toggleTopic],
+    shallow,
+  );
+  const starIcon = (fav ? StarFilled : StarOutlined) as LucideIcon;
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={cx(styles.container, active && styles.active)}
+      distribution={'space-between'}
+      horizontal
+      onClick={() => {
+        toggleTopic(id);
+      }}
+      padding={'10px 12px'}
+    >
+      {title}
+      {!showFav ? undefined : (
+        <ActionIcon
+          icon={starIcon}
+          onClick={() => {
+            if (!id) return;
+
+            dispatchTopic({ id, key: 'favorite', type: 'updateChatTopic', value: !fav });
+          }}
+          size={'small'}
+          style={{
+            color: fav ? theme.yellow : undefined,
+          }}
+        />
+      )}
+    </Flexbox>
+  );
+});
+
+export default TopicItem;

package/src/pages/chat/[id]/Conversation/Input/Action.tsx

@@ -1,21 +1,80 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Popconfirm } from 'antd';
-import { BrainCog, Eraser, Thermometer, Timer } from 'lucide-react';
+import { Dropdown, Popconfirm, Popover } from 'antd';
+import { BrainCog, Eraser, Thermometer } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
-import { useSessionStore } from '@/store/session';
+import SliderWithInput from '@/components/SliderWithInput';
+import { agentSelectors, useSessionStore } from '@/store/session';
+import { LanguageModel } from '@/types/llm';
 
 const InputActions = memo(() => {
   const { t } = useTranslation('setting');
-  const [clearMessage] = useSessionStore((s) => [s.clearMessage], shallow);
+  const [clearMessage, updateAgentConfig] = useSessionStore(
+    (s) => [s.clearMessage, s.updateAgentConfig],
+    shallow,
+  );
+  const [model, temperature] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfigSafe(s);
+    return [
+      config.model,
+      config.params.temperature,
+      // config.historyCount
+    ];
+  }, shallow);
 
   return (
     <>
-      <ActionIcon icon={BrainCog} title={t('settingModel.model.title')} />
-      <ActionIcon icon={Thermometer} title={t('settingModel.temperature.title')} />
-      <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />
+      <Dropdown
+        menu={{
+          activeKey: model,
+          items: Object.values(LanguageModel).map((i) => ({ key: i, label: i })),
+          onClick: (e) => {
+            updateAgentConfig({ model: e.key as LanguageModel });
+          },
+        }}
+        trigger={['click']}
+      >
+        <ActionIcon icon={BrainCog} title={t('settingModel.model.title')} />
+      </Dropdown>
+      <Popover
+        content={
+          <SliderWithInput
+            max={1}
+            min={0}
+            onChange={(v) => {
+              updateAgentConfig({ params: { temperature: v } });
+            }}
+            step={0.1}
+            style={{ width: 120 }}
+            value={temperature}
+          />
+        }
+        trigger={'click'}
+      >
+        <ActionIcon
+          icon={Thermometer}
+          title={t('settingModel.temperature.titleWithValue', { value: temperature })}
+        />
+      </Popover>
+      {/*TODO 历史记录功能实现 */}
+      {/*<Popover*/}
+      {/*  content={*/}
+      {/*    <SliderWithInput*/}
+      {/*      min={0}*/}
+      {/*      onChange={(v) => {*/}
+      {/*        updateAgentConfig({ historyCount: v });*/}
+      {/*      }}*/}
+      {/*      step={1}*/}
+      {/*      style={{ width: 120 }}*/}
+      {/*      value={historyCount}*/}
+      {/*    />*/}
+      {/*  }*/}
+      {/*  trigger={'click'}*/}
+      {/*>*/}
+      {/*  <ActionIcon icon={Timer} title={t('settingChat.historyCount.title')} />*/}
+      {/*</Popover>*/}
       <Popconfirm
         cancelText={t('cancel', { ns: 'common' })}
         okButtonProps={{ danger: true }}

package/src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -18,12 +18,15 @@ const ChatInput = () => {
   const [text, setText] = useState('');
 
   const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
-  const [sendMessage] = useSessionStore((s) => [s.createOrSendMsg], shallow);
+  const [sendMessage, saveToTopic] = useSessionStore(
+    (s) => [s.createOrSendMsg, s.saveToTopic],
+    shallow,
+  );
 
   const footer = useMemo(
     () => (
       <Tooltip title={t('topic.saveCurrentMessages')}>
-        <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} />
+        <Button icon={<Icon icon={LucideGalleryVerticalEnd} />} onClick={saveToTopic} />
       </Tooltip>
     ),
     [],

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

@@ -12,10 +12,18 @@ import { agentSelectors, useSessionStore } from '@/store/session';
 const Header = memo(() => {
   const { t } = useTranslation('common');
 
-  const [meta, id, modle] = useSessionStore(
-    (s) => [agentSelectors.currentAgentMeta(s), s.activeId, agentSelectors.currentAgentModel(s)],
+  const [title, description, avatar, backgroundColor, id, model] = useSessionStore(
+    (s) => [
+      agentSelectors.currentAgentTitle(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      s.activeId,
+      agentSelectors.currentAgentModel(s),
+    ],
     shallow,
   );
+
   const [showAgentSettings, toggleConfig] = useSessionStore(
     (s) => [s.showAgentSettings, s.toggleConfig],
     shallow,
@@ -26,20 +34,16 @@ const Header = memo(() => {
       left={
         <>
           <Avatar
-            avatar={meta?.avatar}
-            background={meta?.backgroundColor}
+            avatar={avatar}
+            background={backgroundColor}
             onClick={() => {
               Router.push(`/chat/${id}/edit`);
             }}
             size={40}
             style={{ cursor: 'pointer' }}
-            title={meta?.title}
-          />
-          <HeaderTitle
-            desc={meta?.description || t('noDescription')}
-            tag={<Tag>{modle}</Tag>}
-            title={meta?.title || t('defaultAgent')}
+            title={title}
           />
+          <HeaderTitle desc={description} tag={<Tag>{model}</Tag>} title={title} />
         </>
       }
       right={

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

@@ -6,10 +6,10 @@ import { debounce } from 'lodash-es';
 import { BrainCog, MessagesSquare } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import SliderWithInput from 'src/components/SliderWithInput';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import SliderWithInput from '@/features/SliderWithInput';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import type { LobeAgentConfig } from '@/types/session';

package/src/pages/chat/layout.tsx

@@ -17,8 +17,8 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     initI18n.finally();
   }, []);
 
-  const [activeSession] = useSessionStore((s) => {
-    return [s.activeSession];
+  const [activeSession, toggleTopic] = useSessionStore((s) => {
+    return [s.activeSession, s.toggleTopic];
   }, shallow);
 
   const router = useRouter();
@@ -26,10 +26,16 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
 
   useEffect(() => {
     const hasRehydrated = useSessionStore.persist.hasHydrated();
-    // 只有当水合完毕后，才能正常去激活会话
-    if (typeof id === 'string' && hasRehydrated) {
+    // 只有当水合完毕后再开始做操作
+    if (!hasRehydrated) return;
+
+    // 1. 正常激活会话
+    if (typeof id === 'string') {
       activeSession(id);
     }
+
+    // 将话题重置为默认值
+    toggleTopic();
   }, [id]);
 
   useEffect(() => {

package/src/pages/setting/SettingForm.tsx

@@ -5,11 +5,11 @@ import { debounce } from 'lodash-es';
 import { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import SliderWithInput from 'src/components/SliderWithInput';
 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';
 import { settingsSelectors, useSettings } from '@/store/settings';
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';

package/src/prompts/chat.ts

@@ -0,0 +1,19 @@
+import { OpenAIChatMessage, OpenAIStreamPayload } from '@/types/openai';
+
+export const promptSummaryTitle = (
+  messages: OpenAIChatMessage[],
+): Partial<OpenAIStreamPayload> => ({
+  messages: [
+    {
+      content:
+        '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不需要包含标点符号',
+      role: 'system',
+    },
+    {
+      content: `${messages.map((message) => `${message.role}: ${message.content}`).join('\n')}
+
+请总结上述对话为10个字以内的标题，不需要包含标点符号`,
+      role: 'user',
+    },
+  ],
+});

package/src/store/session/selectors.ts

@@ -1,3 +1,3 @@
 export { agentSelectors } from './slices/agentConfig';
-export { chatSelectors } from './slices/chat';
+export { chatSelectors, topicSelectors } from './slices/chat';
 export { sessionSelectors } from './slices/session';

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

@@ -17,6 +17,9 @@ const currentAgentMeta = (s: SessionStore): MetaData => {
 
 const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('defaultSession');
 
+const currentAgentDescription = (s: SessionStore) =>
+  currentAgentMeta(s)?.description || t('noDescription');
+
 const currentAgentBackgroundColor = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
   if (!session) return DEFAULT_BACKGROUND_COLOR;
@@ -62,6 +65,7 @@ export const agentSelectors = {
   currentAgentBackgroundColor,
   currentAgentConfig,
   currentAgentConfigSafe,
+  currentAgentDescription,
   currentAgentMeta,
   currentAgentModel,
   currentAgentSystemRole,

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

@@ -0,0 +1,21 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { SessionStore } from '@/store/session';
+
+import { ChatMessageAction, chatMessage } from './message';
+import { ChatTopicAction, chatTopic } from './topic';
+
+/**
+ * 聊天操作
+ */
+export interface ChatAction extends ChatTopicAction, ChatMessageAction {}
+
+export const createChatSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  ChatAction
+> = (...params) => ({
+  ...chatTopic(...params),
+  ...chatMessage(...params),
+});

package/src/store/session/slices/chat/{action.ts → actions/message.ts}

@@ -7,14 +7,14 @@ import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
 import { nanoid } from '@/utils/uuid';
 
-import { MessageDispatch, messagesReducer } from './reducers/message';
+import { MessageDispatch, messagesReducer } from '../reducers/message';
 
 const LOADING_FLAT = '...';
 
 /**
  * 聊天操作
  */
-export interface ChatAction {
+export interface ChatMessageAction {
   /**
    * 清除消息
    */
@@ -57,6 +57,7 @@ export interface ChatAction {
    * @param id - 消息 ID
    */
   resendMessage: (id: string) => Promise<void>;
+
   /**
    * 发送消息
    * @param text - 消息文本
@@ -64,14 +65,20 @@ export interface ChatAction {
   sendMessage: (text: string) => Promise<void>;
 }
 
-export const createChatSlice: StateCreator<
+export const chatMessage: StateCreator<
   SessionStore,
   [['zustand/devtools', never]],
   [],
-  ChatAction
+  ChatMessageAction
 > = (set, get) => ({
   clearMessage: () => {
-    get().dispatchMessage({ type: 'resetMessages' });
+    const { dispatchMessage, activeTopicId, dispatchTopic } = get();
+
+    dispatchMessage({ topicId: activeTopicId, type: 'resetMessages' });
+
+    if (activeTopicId) {
+      dispatchTopic({ id: activeTopicId, type: 'deleteChatTopic' });
+    }
   },
 
   createOrSendMsg: async (message) => {
@@ -155,7 +162,7 @@ export const createChatSlice: StateCreator<
   },
 
   realFetchAIResponse: async (messages, userMessageId) => {
-    const { dispatchMessage, generateMessage } = get();
+    const { dispatchMessage, generateMessage, activeTopicId } = get();
 
     // 添加 systemRole
     const { systemRole, model } = agentSelectors.currentAgentConfigSafe(get());
@@ -165,49 +172,46 @@ export const createChatSlice: StateCreator<
 
     // 再添加一个空的信息用于放置 ai 响应，注意顺序不能反
     // 因为如果顺序反了，messages 中将包含新增的 ai message
-    const assistantId = nanoid();
+    const mid = nanoid();
 
     dispatchMessage({
-      id: assistantId,
+      id: mid,
       message: LOADING_FLAT,
       parentId: userMessageId,
       role: 'assistant',
       type: 'addMessage',
     });
 
+    // 如果有 activeTopicId，则添加 topicId
+    if (activeTopicId) {
+      dispatchMessage({ id: mid, key: 'topicId', type: 'updateMessage', value: activeTopicId });
+    }
+
     // 为模型添加 fromModel 的额外信息
-    dispatchMessage({
-      id: assistantId,
-      key: 'fromModel',
-      type: 'updateMessageExtra',
-      value: model,
-    });
+    dispatchMessage({ id: mid, key: 'fromModel', type: 'updateMessageExtra', value: model });
 
     // 生成 ai message
-    const { output, isFunctionCall } = await generateMessage(messages, assistantId);
+    const { output, isFunctionCall } = await generateMessage(messages, mid);
 
     // 如果是 function，则发送函数调用方法
     if (isFunctionCall) {
       const { function_call } = JSON.parse(output);
 
       dispatchMessage({
-        id: assistantId,
+        id: mid,
         key: 'function_call',
         type: 'updateMessage',
         value: function_call,
       });
 
       await generateMessage(
-        [
-          ...messages,
-          { content: '', function_call, id: assistantId, role: 'assistant' } as ChatMessage,
-        ],
-        assistantId,
+        [...messages, { content: '', function_call, id: mid, role: 'assistant' } as ChatMessage],
+        mid,
         true,
       );
 
       dispatchMessage({
-        id: assistantId,
+        id: mid,
         key: 'role',
         type: 'updateMessage',
         value: 'assistant',
@@ -243,13 +247,19 @@ export const createChatSlice: StateCreator<
   },
 
   sendMessage: async (message) => {
-    const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta } = get();
+    const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
+      get();
     const session = sessionSelectors.currentSession(get());
     if (!session || !message) return;
 
     const userId = nanoid();
     dispatchMessage({ id: userId, message, role: 'user', type: 'addMessage' });
 
+    // 如果有 activeTopicId，则添加 topicId
+    if (activeTopicId) {
+      dispatchMessage({ id: userId, key: 'topicId', type: 'updateMessage', value: activeTopicId });
+    }
+
     // 先拿到当前的 messages
     const messages = chatSelectors.currentChats(get());