@lobehub/chat 1.33.4 → 1.34.0

package/src/features/Portal/Thread/Chat/ChatItem.tsx

@@ -0,0 +1,62 @@
+import React, { memo, useMemo } from 'react';
+
+import { ChatItem } from '@/features/Conversation';
+import ActionsBar from '@/features/Conversation/components/ChatItem/ActionsBar';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+
+import ThreadDivider from './ThreadDivider';
+
+export interface ThreadChatItemProps {
+  id: string;
+  index: number;
+}
+
+const ThreadChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
+  const [threadMessageId, threadStartMessageIndex, historyLength] = useChatStore((s) => [
+    threadSelectors.threadSourceMessageId(s),
+    threadSelectors.threadSourceMessageIndex(s),
+    threadSelectors.portalDisplayChatsLength(s),
+  ]);
+
+  const enableThreadDivider = threadMessageId === id;
+
+  const endRender = useMemo(
+    () => enableThreadDivider && <ThreadDivider />,
+    [enableThreadDivider, id],
+  );
+
+  const isParentMessage = index <= threadStartMessageIndex;
+
+  const actionBar = useMemo(
+    () => !isParentMessage && <ActionsBar id={id} inPortalThread />,
+    [id, isParentMessage],
+  );
+
+  const enableHistoryDivider = useAgentStore((s) => {
+    const config = agentSelectors.currentAgentChatConfig(s);
+    return (
+      config.enableHistoryCount &&
+      historyLength > (config.historyCount ?? 0) &&
+      config.historyCount === historyLength - index
+    );
+  });
+
+  return (
+    <ChatItem
+      actionBar={actionBar}
+      disableEditing={isParentMessage}
+      enableHistoryDivider={enableHistoryDivider}
+      endRender={endRender}
+      id={id}
+      inPortalThread
+      index={index}
+    />
+  );
+});
+
+ThreadChatItem.displayName = 'ThreadChatItem';
+
+export default ThreadChatItem;

package/src/features/Portal/Thread/Chat/ChatList.tsx

@@ -0,0 +1,49 @@
+import React, { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SkeletonList, VirtualizedList } from '@/features/Conversation';
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+
+import ThreadChatItem from './ChatItem';
+
+interface ChatListProps {
+  mobile?: boolean;
+}
+
+const ChatList = memo(({ mobile }: ChatListProps) => {
+  const data = useChatStore(threadSelectors.portalDisplayChatIDs);
+  const isInit = useChatStore((s) => s.threadsInit);
+
+  const useFetchThreads = useChatStore((s) => s.useFetchThreads);
+
+  useFetchThreads();
+
+  const itemContent = useCallback(
+    (index: number, id: string) => <ThreadChatItem id={id} index={index} />,
+    [mobile],
+  );
+
+  if (!isInit)
+    return (
+      <Flexbox flex={1} height={'100%'}>
+        <SkeletonList mobile={mobile} />
+      </Flexbox>
+    );
+
+  return (
+    <Flexbox
+      flex={1}
+      style={{
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      <VirtualizedList dataSource={data} itemContent={itemContent} mobile={mobile} />
+    </Flexbox>
+  );
+});
+
+export default ChatList;

package/src/features/Portal/Thread/Chat/ThreadDivider/index.tsx

@@ -0,0 +1,19 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { GitBranch } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ThreadDivider = memo(() => {
+  const { t } = useTranslation('chat');
+
+  return (
+    <div style={{ padding: '0 20px' }}>
+      <Divider style={{ margin: 0, padding: '20px 0' }}>
+        <Tag icon={<Icon icon={GitBranch} />}>{t('thread.divider')}</Tag>
+      </Divider>
+    </div>
+  );
+});
+
+export default ThreadDivider;

package/src/features/Portal/Thread/Chat/index.tsx

@@ -0,0 +1,28 @@
+import { Suspense, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SkeletonList } from '@/features/Conversation';
+
+import ChatInput from './ChatInput';
+import ChatList from './ChatList';
+
+interface ConversationProps {
+  mobile?: boolean;
+}
+
+const Conversation = memo<ConversationProps>(({ mobile }) => (
+  <Flexbox height={'100%'}>
+    <Suspense
+      fallback={
+        <Flexbox flex={1} height={'100%'}>
+          <SkeletonList mobile={mobile} />
+        </Flexbox>
+      }
+    >
+      <ChatList mobile={mobile} />
+    </Suspense>
+    <ChatInput />
+  </Flexbox>
+));
+
+export default Conversation;

package/src/features/Portal/Thread/Header/Active.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ListTree } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import { LOADING_FLAT } from '@/const/message';
+import { useChatStore } from '@/store/chat';
+import { portalThreadSelectors } from '@/store/chat/selectors';
+import { oneLineEllipsis } from '@/styles';
+
+const Active = () => {
+  const currentThread = useChatStore(portalThreadSelectors.portalCurrentThread, isEqual);
+
+  return (
+    currentThread && (
+      <Flexbox align={'center'} gap={8} horizontal style={{ marginInlineStart: 8 }}>
+        <Icon icon={ListTree} size={{ fontSize: 20 }} />
+
+        <Typography.Text className={oneLineEllipsis} style={{ fontSize: 16, fontWeight: 'bold' }}>
+          {currentThread?.title === LOADING_FLAT ? (
+            <Flexbox flex={1} height={30} justify={'center'}>
+              <BubblesLoading />
+            </Flexbox>
+          ) : (
+            currentThread?.title
+          )}
+        </Typography.Text>
+      </Flexbox>
+    )
+  );
+};
+
+export default Active;

package/src/features/Portal/Thread/Header/New.tsx

@@ -0,0 +1,37 @@
+import { Icon } from '@lobehub/ui';
+import { Checkbox, Typography } from 'antd';
+import { GitBranch } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { portalThreadSelectors } from '@/store/chat/selectors';
+import { oneLineEllipsis } from '@/styles';
+import { ThreadType } from '@/types/topic';
+
+const NewThreadHeader = () => {
+  const [newThreadMode] = useChatStore((s) => [portalThreadSelectors.newThreadMode(s)]);
+
+  return (
+    <Flexbox>
+      <Flexbox align={'center'} gap={8} horizontal style={{ marginInlineStart: 8 }}>
+        <Icon icon={GitBranch} size={{ fontSize: 20 }} />
+        <Typography.Text className={oneLineEllipsis} style={{ fontSize: 16, fontWeight: 'bold' }}>
+          开启新的子话题
+        </Typography.Text>
+        <Checkbox
+          checked={newThreadMode === ThreadType.Continuation}
+          onChange={(e) => {
+            useChatStore.setState({
+              newThreadMode: e.target.checked ? ThreadType.Continuation : ThreadType.Standalone,
+            });
+          }}
+          style={{ marginInlineStart: 12 }}
+        >
+          包含话题上下文
+        </Checkbox>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default NewThreadHeader;

package/src/features/Portal/Thread/Header/Title.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from 'antd';
+
+import { useChatStore } from '@/store/chat';
+
+import ActiveThread from './Active';
+import NewThread from './New';
+
+const Header = () => {
+  const isInNew = useChatStore((s) => s.startToForkThread);
+
+  const isInit = useChatStore((s) => s.threadsInit);
+
+  if (!isInit) return <Skeleton.Button active size={'small'} style={{ height: 22, width: 200 }} />;
+
+  return isInNew ? <NewThread /> : <ActiveThread />;
+};
+
+export default Header;

package/src/features/Portal/Thread/Header/index.tsx

@@ -0,0 +1,20 @@
+import { ActionIcon } from '@lobehub/ui';
+import { XIcon } from 'lucide-react';
+
+import SidebarHeader from '@/components/SidebarHeader';
+import { useChatStore } from '@/store/chat';
+
+import Title from './Title';
+
+const Header = () => {
+  const closeThreadPortal = useChatStore((s) => s.closeThreadPortal);
+  return (
+    <SidebarHeader
+      actions={<ActionIcon icon={XIcon} onClick={closeThreadPortal} />}
+      style={{ paddingBlock: 8, paddingInline: 8 }}
+      title={<Title />}
+    />
+  );
+};
+
+export default Header;

package/src/features/Portal/Thread/hook.ts

@@ -0,0 +1,8 @@
+import { useChatStore } from '@/store/chat';
+import { portalThreadSelectors } from '@/store/chat/selectors';
+
+export const useEnable = () => useChatStore(portalThreadSelectors.showThread);
+
+export const onClose = () => {
+  useChatStore.setState({ portalThreadId: undefined });
+};

package/src/features/Portal/Thread/index.ts

@@ -0,0 +1,12 @@
+import { PortalImpl } from '../type';
+import Chat from './Chat';
+import Header from './Header';
+import { onClose, useEnable } from './hook';
+
+export const Thread: PortalImpl = {
+  Body: Chat,
+  Header,
+  Title: () => null,
+  onClose,
+  useEnable,
+};

package/src/features/Portal/router.tsx

@@ -7,10 +7,11 @@ import { FilePreview } from './FilePreview';
 import { HomeBody, HomeTitle } from './Home';
 import { MessageDetail } from './MessageDetail';
 import { Plugins } from './Plugins';
+import { Thread } from './Thread';
 import Header from './components/Header';
 import { PortalImpl } from './type';
 
-const items: PortalImpl[] = [MessageDetail, Artifacts, Plugins, FilePreview];
+const items: PortalImpl[] = [Thread, MessageDetail, Artifacts, Plugins, FilePreview];
 
 export const PortalTitle = memo(() => {
   const enabledList: boolean[] = [];

package/src/hooks/useFetchTopics.ts

@@ -6,6 +6,12 @@ import { useSessionStore } from '@/store/session';
  */
 export const useFetchTopics = () => {
   const [sessionId] = useSessionStore((s) => [s.activeId]);
-  const [useFetchTopics] = useChatStore((s) => [s.useFetchTopics]);
+  const [activeTopicId, useFetchTopics, useFetchThreads] = useChatStore((s) => [
+    s.activeTopicId,
+    s.useFetchTopics,
+    s.useFetchThreads,
+  ]);
   useFetchTopics(sessionId);
+
+  useFetchThreads(activeTopicId);
 };

package/src/locales/default/chat.ts

@@ -9,6 +9,7 @@ export default {
   agents: '助手',
   artifact: {
     generating: '生成中',
+    inThread: '子话题中无法查看，请切换到主对话区打开',
     thinking: '思考中',
     thought: '思考过程',
     unknownTitle: '未命名作品',
@@ -67,6 +68,7 @@ export default {
   },
   messageAction: {
     delAndRegenerate: '删除并重新生成',
+    deleteDisabledByThreads: '存在子话题，不能删除',
     regenerate: '重新生成',
   },
   newAgent: '新建助手',
@@ -123,6 +125,11 @@ export default {
     loading: '识别中...',
     prettifying: '润色中...',
   },
+  thread: {
+    divider: '子话题',
+    threadMessageCount: '{{messageCount}} 条消息',
+    title: '子话题',
+  },
   tokenDetails: {
     chats: '会话消息',
     historySummary: '历史总结',
@@ -152,8 +159,8 @@ export default {
     action: '语音朗读',
     clear: '删除语音',
   },
-  updateAgent: '更新助理信息',
 
+  updateAgent: '更新助理信息',
   upload: {
     action: {
       fileUpload: '上传文件',

package/src/locales/default/common.ts

@@ -17,6 +17,9 @@ export default {
   back: '返回',
   batchDelete: '批量删除',
   blog: '产品博客',
+  branching: '创建子话题',
+  branchingDisable:
+    '「子话题」功能仅服务端版本可用，如需该功能，请切换到服务端部署模式或使用 LobeChat Cloud',
   cancel: '取消',
   changelog: '更新日志',
   close: '关闭',

package/src/locales/default/index.ts

@@ -16,6 +16,7 @@ import portal from './portal';
 import providers from './providers';
 import ragEval from './ragEval';
 import setting from './setting';
+import thread from './thread';
 import tool from './tool';
 import topic from './topic';
 import welcome from './welcome';
@@ -39,6 +40,7 @@ const resources = {
   providers,
   ragEval,
   setting,
+  thread,
   tool,
   topic,
   welcome,

package/src/locales/default/setting.ts

@@ -391,6 +391,11 @@ export default {
       modelDesc: '指定用于优化用户提问的模型',
       title: '知识库提问重写',
     },
+    thread: {
+      label: '子话题命名模型',
+      modelDesc: '指定用于子话题自动重命名的模型',
+      title: '子话题自动命名',
+    },
     title: '系统助手',
     topic: {
       label: '话题命名模型',

package/src/locales/default/thread.ts

@@ -0,0 +1,5 @@
+export default {
+  actions: {
+    confirmRemoveThread: '即将删除该子话题，删除后将不可恢复，请谨慎操作。',
+  },
+};

package/src/server/routers/lambda/index.ts

@@ -13,6 +13,7 @@ import { pluginRouter } from './plugin';
 import { ragEvalRouter } from './ragEval';
 import { sessionRouter } from './session';
 import { sessionGroupRouter } from './sessionGroup';
+import { threadRouter } from './thread';
 import { topicRouter } from './topic';
 import { userRouter } from './user';
 
@@ -28,6 +29,7 @@ export const lambdaRouter = router({
   ragEval: ragEvalRouter,
   session: sessionRouter,
   sessionGroup: sessionGroupRouter,
+  thread: threadRouter,
   topic: topicRouter,
   user: userRouter,
 });

package/src/server/routers/lambda/thread.ts

@@ -0,0 +1,83 @@
+import { z } from 'zod';
+
+import { MessageModel } from '@/database/server/models/message';
+import { ThreadModel } from '@/database/server/models/thread';
+import { insertThreadSchema } from '@/database/server/schemas/lobechat';
+import { authedProcedure, router } from '@/libs/trpc';
+import { ThreadItem, createThreadSchema } from '@/types/topic/thread';
+
+const threadProcedure = authedProcedure.use(async (opts) => {
+  const { ctx } = opts;
+
+  return opts.next({
+    ctx: {
+      messageModel: new MessageModel(ctx.userId),
+      threadModel: new ThreadModel(ctx.userId),
+    },
+  });
+});
+
+export const threadRouter = router({
+  createThread: threadProcedure.input(createThreadSchema).mutation(async ({ input, ctx }) => {
+    const thread = await ctx.threadModel.create({
+      parentThreadId: input.parentThreadId,
+      sourceMessageId: input.sourceMessageId,
+      title: input.title,
+      topicId: input.topicId,
+      type: input.type,
+    });
+
+    return thread?.id;
+  }),
+  createThreadWithMessage: threadProcedure
+    .input(
+      createThreadSchema.extend({
+        message: z.any(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      const thread = await ctx.threadModel.create({
+        parentThreadId: input.parentThreadId,
+        sourceMessageId: input.sourceMessageId,
+        title: input.message.content.slice(0, 20),
+        topicId: input.topicId,
+        type: input.type,
+      });
+
+      const message = await ctx.messageModel.create({ ...input.message, threadId: thread?.id });
+
+      return { messageId: message?.id, threadId: thread?.id };
+    }),
+  getThread: threadProcedure.query(async ({ ctx }): Promise<ThreadItem[]> => {
+    return ctx.threadModel.query() as any;
+  }),
+
+  getThreads: threadProcedure
+    .input(z.object({ topicId: z.string() }))
+    .query(async ({ input, ctx }) => {
+      return ctx.threadModel.queryByTopicId(input.topicId);
+    }),
+
+  removeAllThreads: threadProcedure.mutation(async ({ ctx }) => {
+    return ctx.threadModel.deleteAll();
+  }),
+
+  removeThread: threadProcedure
+    .input(z.object({ id: z.string(), removeChildren: z.boolean().optional() }))
+    .mutation(async ({ input, ctx }) => {
+      return ctx.threadModel.delete(input.id);
+    }),
+
+  updateThread: threadProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        value: insertThreadSchema.partial(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      return ctx.threadModel.update(input.id, input.value);
+    }),
+});
+
+export type ThreadRouter = typeof threadRouter;

package/src/services/thread.ts

@@ -0,0 +1,54 @@
+import { INBOX_SESSION_ID } from '@/const/session';
+import { lambdaClient } from '@/libs/trpc/client';
+import { CreateMessageParams } from '@/types/message';
+import { CreateThreadParams, ThreadItem } from '@/types/topic';
+
+interface CreateThreadWithMessageParams extends CreateThreadParams {
+  message: CreateMessageParams;
+}
+export class ThreadService {
+  getThreads = (topicId: string): Promise<ThreadItem[]> => {
+    return lambdaClient.thread.getThreads.query({ topicId });
+  };
+
+  createThreadWithMessage({
+    message,
+    ...params
+  }: CreateThreadWithMessageParams): Promise<{ messageId: string; threadId: string }> {
+    return lambdaClient.thread.createThreadWithMessage.mutate({
+      ...params,
+      message: { ...message, sessionId: this.toDbSessionId(message.sessionId) },
+    });
+  }
+
+  // createThread(params: CreateThreadParams): Promise<string> {
+  //   return lambdaClient.thread.createThread.mutate(params);
+  // }
+
+  updateThread(id: string, data: Partial<ThreadItem>): Promise<any> {
+    return lambdaClient.thread.updateThread.mutate({ id, value: data });
+  }
+
+  //
+  removeThread(id: string): Promise<any> {
+    return lambdaClient.thread.removeThread.mutate({ id });
+  }
+  //
+  // removeThreads(sessionId: string): Promise<any> {
+  //   return lambdaClient.thread.batchDeleteBySessionId.mutate({ id: this.toDbSessionId(sessionId) });
+  // }
+  //
+  // batchRemoveThreads(topics: string[]): Promise<any> {
+  //   return lambdaClient.thread.batchDelete.mutate({ ids: topics });
+  // }
+  //
+  // removeAllThread(): Promise<any> {
+  //   return lambdaClient.thread.removeAllThreads.mutate();
+  // }
+
+  private toDbSessionId(sessionId: string | undefined) {
+    return sessionId === INBOX_SESSION_ID ? null : sessionId;
+  }
+}
+
+export const threadService = new ThreadService();

package/src/store/chat/initialState.ts

@@ -5,12 +5,14 @@ import { ChatMessageState, initialMessageState } from './slices/message/initialS
 import { ChatShareState, initialShareState } from './slices/share/initialState';
 import { ChatTopicState, initialTopicState } from './slices/topic/initialState';
 import { ChatAIChatState, initialAiChatState } from './slices/aiChat/initialState';
+import { ChatThreadState, initialThreadState } from './slices/thread/initialState';
 
 export type ChatStoreState = ChatTopicState &
   ChatMessageState &
   ChatAIChatState &
   ChatToolState &
   ChatShareState &
+  ChatThreadState &
   ChatPortalState;
 
 export const initialState: ChatStoreState = {
@@ -19,6 +21,7 @@ export const initialState: ChatStoreState = {
   ...initialTopicState,
   ...initialToolState,
   ...initialShareState,
+  ...initialThreadState,
   ...initialChatPortalState,
 
   // cloud

package/src/store/chat/selectors.ts

@@ -1,4 +1,5 @@
 export { chatToolSelectors } from './slices/builtinTool/selectors';
 export { chatSelectors } from './slices/message/selectors';
-export { chatPortalSelectors } from './slices/portal/selectors';
+export * from './slices/portal/selectors';
+export { threadSelectors } from './slices/thread/selectors';
 export { topicSelectors } from './slices/topic/selectors';

package/src/store/chat/slices/aiChat/actions/__tests__/generateAIChat.test.ts

@@ -527,7 +527,7 @@ describe('chatMessage actions', () => {
         await result.current.regenerateMessage(messageId);
       });
 
-      expect(resendMessageSpy).toHaveBeenCalledWith(messageId, 'abc');
+      expect(resendMessageSpy).toHaveBeenCalledWith(messageId, { traceId: 'abc' });
     });
   });
 

package/src/store/chat/slices/aiChat/actions/__tests__/rag.test.ts

@@ -243,7 +243,7 @@ describe('chatRAG actions', () => {
           }) as ChatMessage,
       );
 
-      vi.spyOn(chatSelectors, 'currentChatsWithHistoryConfig').mockReturnValue([
+      vi.spyOn(chatSelectors, 'mainAIChatsWithHistoryConfig').mockReturnValue([
         { content: 'history' },
       ] as ChatMessage[]);