🚧 wip: 子话题模式

lobehub · Nov 6, 2024 · cb1bdfa · cb1bdfa
1 parent be0d4d9
commit cb1bdfa
Show file tree

Hide file tree

Showing 17 changed files with 115 additions and 12 deletions.
diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx
@@ -32,16 +32,21 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     height: 100%;
     background: ${isDarkMode ? rgba(token.colorBgElevated, 0.8) : token.colorBgElevated};
   `,
+
+  thread: css`
+    background: ${token.colorBgLayout};
+  `,
 }));
 
 const PortalPanel = memo(({ children }: PropsWithChildren) => {
-  const { styles } = useStyles();
+  const { styles, cx } = useStyles();
   const { md = true } = useResponsive();
 
-  const [showInspector, showToolUI, showArtifactUI] = useChatStore((s) => [
+  const [showInspector, showToolUI, showArtifactUI, showThread] = useChatStore((s) => [
     chatPortalSelectors.showPortal(s),
     chatPortalSelectors.showPluginUI(s),
     chatPortalSelectors.showArtifactUI(s),
+    chatPortalSelectors.showThread(s),
   ]);
 
   return (
@@ -54,7 +59,9 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
         expand
         hanlderStyle={{ display: 'none' }}
         maxWidth={CHAT_PORTAL_MAX_WIDTH}
-        minWidth={showArtifactUI || showToolUI ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH}
+        minWidth={
+          showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
+        }
         mode={md ? 'fixed' : 'float'}
         placement={'right'}
         showHandlerWhenUnexpand={false}
@@ -68,7 +75,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
             minWidth: CHAT_PORTAL_WIDTH,
           }}
         >
-          <Flexbox className={styles.panel}>{children}</Flexbox>
+          <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
         </DraggablePanelContainer>
       </DraggablePanel>
     )

diff --git a/src/features/Conversation/Actions/Assistant.tsx b/src/features/Conversation/Actions/Assistant.tsx
@@ -7,7 +7,8 @@ import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 
 export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, error, tools }) => {
-  const { regenerate, edit, delAndRegenerate, copy, divider, del } = useChatListActionsBar();
+  const { regenerate, edit, delAndRegenerate, copy, divider, del, branching } =
+    useChatListActionsBar();
   const { translate, tts } = useCustomActions();
   const hasTools = !!tools;
 
@@ -28,7 +29,7 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
         delAndRegenerate,
         del,
       ]}
-      items={[hasTools ? delAndRegenerate : edit, copy]}
+      items={[hasTools ? delAndRegenerate : edit, copy, branching]}
       onActionClick={onActionClick}
       type="ghost"
     />

diff --git a/src/features/Conversation/Actions/User.tsx b/src/features/Conversation/Actions/User.tsx
@@ -6,13 +6,13 @@ import { RenderAction } from '../types';
 import { useCustomActions } from './customAction';
 
 export const UserActionsBar: RenderAction = memo(({ onActionClick }) => {
-  const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
+  const { regenerate, edit, copy, divider, del, branching } = useChatListActionsBar();
   const { translate, tts } = useCustomActions();
 
   return (
     <ActionIconGroup
       dropdownMenu={[edit, copy, divider, tts, translate, divider, regenerate, del]}
-      items={[regenerate, edit]}
+      items={[regenerate, edit, branching]}
       onActionClick={onActionClick}
       type="ghost"
     />

diff --git a/src/features/Conversation/Actions/index.ts b/src/features/Conversation/Actions/index.ts
@@ -27,13 +27,15 @@ export const useActionsClick = (): OnActionsClick => {
     ttsMessage,
     delAndRegenerateMessage,
     copyMessage,
+    openThreadCreator,
   ] = useChatStore((s) => [
     s.deleteMessage,
     s.regenerateMessage,
     s.translateMessage,
     s.ttsMessage,
     s.delAndRegenerateMessage,
     s.copyMessage,
+    s.openThreadCreator,
   ]);
   const { message } = App.useApp();
 
@@ -44,6 +46,10 @@ export const useActionsClick = (): OnActionsClick => {
         message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
         break;
       }
+      case 'branching': {
+        openThreadCreator(id);
+        break;
+      }
 
       case 'del': {
         deleteMessage(id);

diff --git a/src/features/Conversation/components/VirtualizedList/index.tsx b/src/features/Conversation/components/VirtualizedList/index.tsx
@@ -21,6 +21,7 @@ import SkeletonList from '../SkeletonList';
 
 interface VirtualizedListProps {
   mobile?: boolean;
+  threadMode?: boolean;
 }
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);

diff --git a/src/features/Conversation/hooks/useChatListActionsBar.tsx b/src/features/Conversation/hooks/useChatListActionsBar.tsx
@@ -1,9 +1,10 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
-import { Copy, Edit, ListRestart, RotateCcw, Trash } from 'lucide-react';
+import { Copy, Edit, ListRestart, RotateCcw, Split, Trash } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface ChatListActionsBar {
+  branching: ActionIconGroupItems;
   copy: ActionIconGroupItems;
   del: ActionIconGroupItems;
   delAndRegenerate: ActionIconGroupItems;
@@ -17,6 +18,11 @@ export const useChatListActionsBar = (): ChatListActionsBar => {
 
   return useMemo(
     () => ({
+      branching: {
+        icon: Split,
+        key: 'branching',
+        label: t('branching', { defaultValue: 'Create Sub Topic' }),
+      },
       copy: {
         icon: Copy,
         key: 'copy',

diff --git a/src/features/Conversation/index.tsx b/src/features/Conversation/index.tsx
@@ -7,9 +7,10 @@ const ChatList = lazy(() => import('./components/VirtualizedList'));
 
 interface ConversationProps {
   mobile?: boolean;
+  threadMode?: boolean;
 }
 
-const Conversation = ({ mobile }: ConversationProps) => {
+const Conversation = ({ mobile, threadMode }: ConversationProps) => {
   return (
     <Flexbox
       flex={1}
@@ -21,7 +22,7 @@ const Conversation = ({ mobile }: ConversationProps) => {
       width={'100%'}
     >
       <Suspense fallback={<SkeletonList mobile={mobile} />}>
-        <ChatList mobile={mobile} />
+        <ChatList mobile={mobile} threadMode={threadMode} />
       </Suspense>
     </Flexbox>
   );

diff --git a/src/features/Portal/Thread/Body/index.tsx b/src/features/Portal/Thread/Body/index.tsx
@@ -0,0 +1,30 @@
+import { Avatar, Icon } from '@lobehub/ui';
+import { Input } from 'antd';
+import { GitBranch } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import DesktopChatInput from '@/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop';
+import Conversation from '@/features/Conversation';
+
+const ThreadBody = () => {
+  return (
+    <Flexbox height={'100%'} justify={'space-between'} paddingInline={12}>
+      <div />
+      <Flexbox flex={1} gap={12}>
+        <Avatar
+          avatar={<Icon icon={GitBranch} size={'large'} />}
+          background={'#3f4148'}
+          size={56}
+        />
+        子话题名称（Optional）
+        <Input placeholder={'abc'} variant={'filled'} />
+        <Flexbox height={'100%'}>
+          <Conversation threadMode />
+          <DesktopChatInput />
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default ThreadBody;
diff --git a/src/features/Portal/Thread/Chat/index.tsx b/src/features/Portal/Thread/Chat/index.tsx
diff --git a/src/features/Portal/Thread/Header.tsx b/src/features/Portal/Thread/Header.tsx
@@ -0,0 +1,23 @@
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { GitBranch } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+import { oneLineEllipsis } from '@/styles';
+
+const Header = () => {
+  // const [previewFileId] = useChatStore((s) => [chatPortalSelectors.previewFileId(s)]);
+
+  return (
+    <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>
+    </Flexbox>
+  );
+};
+
+export default Header;
diff --git a/src/features/Portal/Thread/index.ts b/src/features/Portal/Thread/index.ts
@@ -0,0 +1,10 @@
+import { PortalImpl } from '../type';
+import Body from './Body';
+import Header from './Header';
+import { useEnable } from './useEnable';
+
+export const Thread: PortalImpl = {
+  Body,
+  Header,
+  useEnable,
+};
diff --git a/src/features/Portal/Thread/useEnable.ts b/src/features/Portal/Thread/useEnable.ts
@@ -0,0 +1,6 @@
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+export const useEnable = () => {
+  return useChatStore(chatPortalSelectors.showThread);
+};
diff --git a/src/features/Portal/router.tsx b/src/features/Portal/router.tsx
@@ -7,9 +7,10 @@ import { FilePreview } from './FilePreview';
 import { HomeBody, HomeHeader } from './Home';
 import { MessageDetail } from './MessageDetail';
 import { Plugins } from './Plugins';
+import { Thread } from './Thread';
 import { PortalImpl } from './type';
 
-const items: PortalImpl[] = [MessageDetail, Artifacts, Plugins, FilePreview];
+const items: PortalImpl[] = [Thread, MessageDetail, Artifacts, Plugins, FilePreview];
 
 export const PortalHeader = memo(() => {
   const enabledList: boolean[] = [];

diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts
@@ -17,6 +17,7 @@ export default {
   back: '返回',
   batchDelete: '批量删除',
   blog: '产品博客',
+  branching: '创建子话题',
   cancel: '取消',
   changelog: '更新日志',
   close: '关闭',

diff --git a/src/store/chat/slices/portal/action.ts b/src/store/chat/slices/portal/action.ts
@@ -13,6 +13,7 @@ export interface ChatPortalAction {
   openArtifact: (artifact: PortalArtifact) => void;
   openFilePreview: (portal: PortalFile) => void;
   openMessageDetail: (messageId: string) => void;
+  openThreadCreator: (messageId: string) => void;
   openToolUI: (messageId: string, identifier: string) => void;
   togglePortal: (open?: boolean) => void;
 }
@@ -51,6 +52,11 @@ export const chatPortalSlice: StateCreator<
 
     set({ portalMessageDetail: messageId }, false, 'openMessageDetail');
   },
+  openThreadCreator: (messageId) => {
+    get().togglePortal(true);
+
+    set({ portalThreadStartMessageId: messageId }, false, 'openMessageDetail');
+  },
   openToolUI: (id, identifier) => {
     get().togglePortal(true);
 

diff --git a/src/store/chat/slices/portal/initialState.ts b/src/store/chat/slices/portal/initialState.ts
@@ -11,6 +11,7 @@ export interface ChatPortalState {
   portalArtifactDisplayMode?: 'code' | 'preview';
   portalFile?: PortalFile;
   portalMessageDetail?: string;
+  portalThreadStartMessageId?: string;
   portalToolMessage?: { id: string; identifier: string };
   showPortal: boolean;
 }

diff --git a/src/store/chat/slices/portal/selectors.ts b/src/store/chat/slices/portal/selectors.ts
@@ -16,6 +16,7 @@ const isPluginUIOpen = (id: string) => (s: ChatStoreState) =>
 const toolUIIdentifier = (s: ChatStoreState) => s.portalToolMessage?.identifier;
 
 const showFilePreview = (s: ChatStoreState) => !!s.portalFile;
+const showThread = (s: ChatStoreState) => !!s.portalThreadStartMessageId;
 const previewFileId = (s: ChatStoreState) => s.portalFile?.fileId;
 const chunkText = (s: ChatStoreState) => s.portalFile?.chunkText;
 
@@ -55,6 +56,8 @@ export const chatPortalSelectors = {
   messageDetailId,
   showMessageDetail,
 
+  showThread,
+
   showPluginUI,
   showPortal,