✨ feat: 初步实现分支话题选择

lobehub · Nov 13, 2024 · 331a04c · 331a04c
1 parent e2ce935
commit 331a04c
Show file tree

Hide file tree

Showing 29 changed files with 3,943 additions and 117 deletions.
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx
@@ -49,9 +49,10 @@ const useStyles = createStyles(({ css, prefixCls, token }) => {
 interface FooterProps {
   expand: boolean;
   setExpand?: (expand: boolean) => void;
+  showSaveTopic?: boolean;
 }
 
-const Footer = memo<FooterProps>(({ setExpand, expand }) => {
+const Footer = memo<FooterProps>(({ setExpand, expand, showSaveTopic = true }) => {
   const { t } = useTranslation('chat');
 
   const { theme, styles } = useStyles();
@@ -118,7 +119,7 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
           {wrapperShortcut}
           <span>{t('input.warp')}</span>
         </Flexbox>
-        <SaveTopic />
+        {showSaveTopic && <SaveTopic />}
         <Flexbox style={{ minWidth: 92 }}>
           {isAIGenerating ? (
             <Button

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Header/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Header/index.tsx
@@ -3,14 +3,19 @@ import { Maximize2, Minimize2 } from 'lucide-react';
 import { memo } from 'react';
 
 import ActionBar from '@/features/ChatInput/ActionBar';
+import { ActionKeys } from '@/features/ChatInput/types';
 
 interface HeaderProps {
   expand: boolean;
+  leftActions: ActionKeys[];
+  rightActions: ActionKeys[];
   setExpand: (expand: boolean) => void;
 }
 
-const Header = memo<HeaderProps>(({ expand, setExpand }) => (
+const Header = memo<HeaderProps>(({ expand, setExpand, leftActions, rightActions }) => (
   <ActionBar
+    leftActions={leftActions}
+    rightActions={rightActions}
     rightAreaEndRender={
       <ActionIcon
         icon={expand ? Minimize2 : Maximize2}

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx
@@ -4,11 +4,8 @@ import { DraggablePanel } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import {
-  CHAT_TEXTAREA_HEIGHT,
-  CHAT_TEXTAREA_MAX_HEIGHT,
-  HEADER_HEIGHT,
-} from '@/const/layoutTokens';
+import { CHAT_TEXTAREA_HEIGHT, CHAT_TEXTAREA_MAX_HEIGHT } from '@/const/layoutTokens';
+import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
@@ -17,48 +14,72 @@ import Footer from './Footer';
 import Head from './Header';
 import TextArea from './TextArea';
 
-const DesktopChatInput = memo(() => {
-  const [expand, setExpand] = useState<boolean>(false);
+const defaultLeftActions = [
+  'model',
+  'fileUpload',
+  'knowledgeBase',
+  'temperature',
+  'history',
+  'stt',
+  'tools',
+  'token',
+] as ActionKeys[];
 
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    systemStatusSelectors.inputHeight(s),
-    s.updateSystemStatus,
-  ]);
+const defaultRightActions = ['clear'] as ActionKeys[];
 
-  return (
-    <>
-      {!expand && <LocalFiles />}
-      <DraggablePanel
-        fullscreen={expand}
-        headerHeight={HEADER_HEIGHT}
-        maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
-        onSizeChange={(_, size) => {
-          if (!size) return;
+interface DesktopChatInputProps {
+  leftActions?: ActionKeys[];
+  rightActions?: ActionKeys[];
+  showSaveTopic?: boolean;
+}
+const DesktopChatInput = memo<DesktopChatInputProps>(
+  ({ leftActions = defaultLeftActions, rightActions = defaultRightActions, showSaveTopic }) => {
+    const [expand, setExpand] = useState<boolean>(false);
 
-          updatePreference({
-            inputHeight:
-              typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-          });
-        }}
-        placement="bottom"
-        size={{ height: inputHeight, width: '100%' }}
-        style={{ zIndex: 10 }}
-      >
-        <Flexbox
-          gap={8}
-          height={'100%'}
-          padding={'12px 0 16px'}
-          style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+    const [inputHeight, updatePreference] = useGlobalStore((s) => [
+      systemStatusSelectors.inputHeight(s),
+      s.updateSystemStatus,
+    ]);
+
+    return (
+      <>
+        {!expand && <LocalFiles />}
+        <DraggablePanel
+          fullscreen={expand}
+          maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
+          minHeight={CHAT_TEXTAREA_HEIGHT}
+          onSizeChange={(_, size) => {
+            if (!size) return;
+
+            updatePreference({
+              inputHeight:
+                typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+            });
+          }}
+          placement="bottom"
+          size={{ height: inputHeight, width: '100%' }}
+          style={{ zIndex: 10 }}
         >
-          <Head expand={expand} setExpand={setExpand} />
-          <TextArea setExpand={setExpand} />
-          <Footer expand={expand} setExpand={setExpand} />
-        </Flexbox>
-      </DraggablePanel>
-    </>
-  );
-});
+          <Flexbox
+            gap={8}
+            height={'100%'}
+            padding={'12px 0 16px'}
+            style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+          >
+            <Head
+              expand={expand}
+              leftActions={leftActions}
+              rightActions={rightActions}
+              setExpand={setExpand}
+            />
+            <TextArea setExpand={setExpand} />
+            <Footer expand={expand} setExpand={setExpand} showSaveTopic={showSaveTopic} />
+          </Flexbox>
+        </DraggablePanel>
+      </>
+    );
+  },
+);
 
 DesktopChatInput.displayName = 'DesktopChatInput';
 

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx
@@ -5,6 +5,7 @@ import { TextAreaRef } from 'antd/es/input/TextArea';
 import { memo, useRef, useState } from 'react';
 
 import ActionBar from '@/features/ChatInput/ActionBar';
+import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
 import STT from '@/features/ChatInput/STT';
 import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
@@ -15,6 +16,18 @@ import Files from './Files';
 import InputArea from './InputArea';
 import SendButton from './Send';
 
+const defaultLeftActions = [
+  'model',
+  'fileUpload',
+  'knowledgeBase',
+  'temperature',
+  'history',
+  'tools',
+  'token',
+] as ActionKeys[];
+
+const defaultRightActions = ['clear'] as ActionKeys[];
+
 const MobileChatInput = memo(() => {
   const theme = useTheme();
   const ref = useRef<TextAreaRef>(null);
@@ -52,7 +65,12 @@ const MobileChatInput = memo(() => {
       topAddons={
         <>
           <Files />
-          <ActionBar mobile padding={'0 8px'} rightAreaStartRender={<SaveTopic mobile />} />
+          <ActionBar
+            leftActions={defaultLeftActions}
+            padding={'0 8px'}
+            rightActions={defaultRightActions}
+            rightAreaStartRender={<SaveTopic mobile />}
+          />
         </>
       }
       value={value}

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/.../server/migrations/0011_strange_blade.sql → ...migrations/0012_redundant_starjammers.sql b/.../server/migrations/0011_strange_blade.sql → ...migrations/0012_redundant_starjammers.sql