💄 style: improve input file upload (lobehub#3314)

* 💄 style: improve input height

* 💄 style: improve input height

* fix drag

src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -7,20 +7,17 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import DragUpload from '@/components/DragUpload';
 import StopLoadingIcon from '@/components/StopLoading';
 import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
 import { filesSelectors, useFileStore } from '@/store/file';
 import { useUserStore } from '@/store/user';
-import { modelProviderSelectors, preferenceSelectors } from '@/store/user/selectors';
+import { preferenceSelectors } from '@/store/user/selectors';
 import { isMacOS } from '@/utils/platform';
 
-import { LocalFiles } from './LocalFiles';
+import LocalFiles from '../LocalFiles';
 import SendMore from './SendMore';
 
 const useStyles = createStyles(({ css, prefixCls, token }) => {
@@ -51,10 +48,11 @@ const useStyles = createStyles(({ css, prefixCls, token }) => {
 });
 
 interface FooterProps {
+  expand: boolean;
   setExpand?: (expand: boolean) => void;
 }
 
-const Footer = memo<FooterProps>(({ setExpand }) => {
+const Footer = memo<FooterProps>(({ setExpand, expand }) => {
   const { t } = useTranslation('chat');
 
   const { theme, styles } = useStyles();
@@ -75,28 +73,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
 
   const isImageUploading = useFileStore(filesSelectors.isImageUploading);
 
-  const model = useAgentStore(agentSelectors.currentAgentModel);
-
-  const enabledFiles = useUserStore(modelProviderSelectors.isModelEnabledFiles(model));
-
-  const [useCmdEnterToSend, canUpload] = useUserStore((s) => [
-    preferenceSelectors.useCmdEnterToSend(s),
-    modelProviderSelectors.isModelEnabledUpload(model)(s),
-  ]);
-
-  const uploadFile = useFileStore((s) => s.uploadFile);
-
-  const uploadImages = async (fileList: FileList | undefined) => {
-    if (!fileList || fileList.length === 0) return;
-
-    const pools = Array.from(fileList).map(async (file) => {
-      // skip none-file items
-      if (!file.type.startsWith('image') && !enabledFiles) return;
-      await uploadFile(file);
-    });
-
-    await Promise.all(pools);
-  };
+  const [useCmdEnterToSend] = useUserStore((s) => [preferenceSelectors.useCmdEnterToSend(s)]);
 
   const sendMessage = useSendMessage();
 
@@ -142,12 +119,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
       padding={'0 24px'}
     >
       <Flexbox align={'center'} gap={8} horizontal style={{ overflow: 'hidden' }}>
-        {canUpload && (
-          <>
-            <DragUpload enabledFiles={enabledFiles} onUploadFiles={uploadImages} />
-            <LocalFiles />
-          </>
-        )}
+        {expand && <LocalFiles />}
       </Flexbox>
       <Flexbox align={'center'} flex={'none'} gap={8} horizontal>
         <Flexbox

src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/LocalFiles.tsx

@@ -0,0 +1,46 @@
+import { memo } from 'react';
+
+import DragUpload from '@/components/DragUpload';
+import { EditableFileList } from '@/features/FileList';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { useFileStore } from '@/store/file';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+
+interface LocalFilesProps {
+  padding?: number | string;
+}
+
+const LocalFiles = memo<LocalFilesProps>(({ padding }) => {
+  const model = useAgentStore(agentSelectors.currentAgentModel);
+
+  const enabledFiles = useUserStore(modelProviderSelectors.isModelEnabledFiles(model));
+  const canUpload = useUserStore(modelProviderSelectors.isModelEnabledUpload(model));
+
+  const inputFilesList = useFileStore((s) => s.inputFilesList);
+  const uploadFile = useFileStore((s) => s.uploadFile);
+
+  const uploadImages = async (fileList: FileList | undefined) => {
+    if (!fileList || fileList.length === 0) return;
+
+    const pools = Array.from(fileList).map(async (file) => {
+      // skip none-file items
+      if (!file.type.startsWith('image') && !enabledFiles) return;
+      await uploadFile(file);
+    });
+
+    await Promise.all(pools);
+  };
+
+  return (
+    canUpload && (
+      <>
+        <DragUpload enabledFiles={enabledFiles} onUploadFiles={uploadImages} />
+        <EditableFileList items={inputFilesList} padding={padding ?? 0} />
+      </>
+    )
+  );
+});
+
+export default LocalFiles;

src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx

@@ -14,6 +14,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 
 import Footer from './Footer';
 import Head from './Header';
+import LocalFiles from './LocalFiles';
 import TextArea from './TextArea';
 
 const DesktopChatInput = memo(() => {
@@ -25,33 +26,37 @@ const DesktopChatInput = memo(() => {
   ]);
 
   return (
-    <DraggablePanel
-      fullscreen={expand}
-      headerHeight={HEADER_HEIGHT}
-      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 }}
-    >
-      <Flexbox
-        gap={8}
-        height={'100%'}
-        padding={'12px 0 16px'}
-        style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+    <>
+      {!expand && <LocalFiles padding={'8px 16px'} />}
+      <DraggablePanel
+        fullscreen={expand}
+        headerHeight={HEADER_HEIGHT}
+        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 setExpand={setExpand} />
-      </Flexbox>
-    </DraggablePanel>
+        <Flexbox
+          gap={8}
+          height={'100%'}
+          padding={'12px 0 16px'}
+          style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+        >
+          <Head expand={expand} setExpand={setExpand} />
+          <TextArea setExpand={setExpand} />
+          <Footer expand={expand} setExpand={setExpand} />
+        </Flexbox>
+      </DraggablePanel>
+    </>
   );
 });
 

src/const/layoutTokens.ts

@@ -4,7 +4,7 @@ export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_MAX_HEIGHT = 800;
-export const CHAT_TEXTAREA_HEIGHT = 230;
+export const CHAT_TEXTAREA_HEIGHT = 160;
 export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;