@lobehub/chat 1.11.9 → 1.12.1

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

@@ -51,7 +51,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
 
   const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
 
-  const sendMessage = useSendMessage();
+  const { send: sendMessage } = useSendMessage();
 
   useAutoFocus(ref);
 

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

@@ -9,13 +9,12 @@ import {
   CHAT_TEXTAREA_MAX_HEIGHT,
   HEADER_HEIGHT,
 } from '@/const/layoutTokens';
-import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+import LocalFiles from './FilePreview';
 import Footer from './Footer';
 import Head from './Header';
-import LocalFiles from './LocalFiles';
 import TextArea from './TextArea';
 
 const DesktopChatInput = memo(() => {
@@ -25,11 +24,10 @@ const DesktopChatInput = memo(() => {
     systemStatusSelectors.inputHeight(s),
     s.updateSystemStatus,
   ]);
-  const showFileList = useFileStore((s) => s.inputFilesList.length > 0);
 
   return (
     <>
-      {!expand && <LocalFiles padding={showFileList ? '8px 16px' : 0} />}
+      {!expand && <LocalFiles />}
       <DraggablePanel
         fullscreen={expand}
         headerHeight={HEADER_HEIGHT}

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/FileItem/File.tsx

@@ -0,0 +1,72 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Trash } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { UploadFileItem } from '@/types/files';
+
+import UploadDetail from '../../../components/UploadDetail';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 250px;
+    height: 64px;
+    padding-block: 4px;
+    padding-inline: 8px 24px;
+
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+  `,
+  deleteButton: css`
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+
+    color: #fff;
+
+    background: ${token.colorBgMask};
+
+    &:hover {
+      background: ${token.colorError};
+    }
+  `,
+}));
+
+interface FileItemProps extends UploadFileItem {
+  onRemove?: () => void;
+}
+
+const FileItem = memo<FileItemProps>(({ id, onRemove, file, status, uploadState, tasks }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} className={styles.container} gap={12} horizontal key={id}>
+      <FileIcon fileName={file.name} fileType={file.type} />
+      <Flexbox style={{ overflow: 'hidden' }}>
+        <Typography.Text ellipsis={{ tooltip: false }}>{file.name}</Typography.Text>
+        <UploadDetail size={file.size} status={status} tasks={tasks} uploadState={uploadState} />
+      </Flexbox>
+      <ActionIcon
+        className={styles.deleteButton}
+        glass
+        icon={Trash}
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove?.();
+        }}
+        size={'small'}
+      />
+    </Flexbox>
+  );
+});
+export default FileItem;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/FileItem/Image.tsx

@@ -0,0 +1,74 @@
+import { ActionIcon, Image } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Trash } from 'lucide-react';
+import { memo } from 'react';
+
+import { usePlatform } from '@/hooks/usePlatform';
+
+import { MIN_IMAGE_SIZE } from './style';
+
+const useStyles = createStyles(({ css, token }) => ({
+  deleteButton: css`
+    color: #fff;
+    background: ${token.colorBgMask};
+
+    &:hover {
+      background: ${token.colorError};
+    }
+  `,
+  editableImage: css`
+    background: ${token.colorBgContainer};
+    box-shadow: 0 0 0 1px ${token.colorFill} inset;
+  `,
+  image: css`
+    margin-block: 0 !important;
+
+    .ant-image {
+      height: 100% !important;
+
+      img {
+        height: 100% !important;
+      }
+    }
+  `,
+}));
+
+interface FileItemProps {
+  alt?: string;
+  loading?: boolean;
+  onRemove?: () => void;
+  src?: string;
+}
+
+const FileItem = memo<FileItemProps>(({ alt, onRemove, src, loading }) => {
+  const IMAGE_SIZE = MIN_IMAGE_SIZE;
+  const { styles, cx } = useStyles();
+  const { isSafari } = usePlatform();
+
+  return (
+    <Image
+      actions={
+        <ActionIcon
+          className={styles.deleteButton}
+          glass
+          icon={Trash}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove?.();
+          }}
+          size={'small'}
+        />
+      }
+      alt={alt || ''}
+      alwaysShowActions
+      height={isSafari ? 'auto' : '100%'}
+      isLoading={loading}
+      size={IMAGE_SIZE as any}
+      src={src}
+      style={{ height: isSafari ? 'auto' : '100%' }}
+      wrapperClassName={cx(styles.image, styles.editableImage)}
+    />
+  );
+});
+
+export default FileItem;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/FileItem/index.tsx

@@ -0,0 +1,39 @@
+import { CSSProperties, memo } from 'react';
+
+import { useFileStore } from '@/store/file';
+import { UploadFileItem } from '@/types/files';
+
+import File from './File';
+import Image from './Image';
+
+interface FileItemProps extends UploadFileItem {
+  alt?: string;
+  className?: string;
+  loading?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  style?: CSSProperties;
+  url?: string;
+}
+
+const FileItem = memo<FileItemProps>((props) => {
+  const { file, id, previewUrl, status } = props;
+  const [removeFile] = useFileStore((s) => [s.removeChatUploadFile]);
+
+  if (file.type.startsWith('image')) {
+    return (
+      <Image
+        alt={file.name}
+        loading={status === 'pending'}
+        onRemove={() => {
+          removeFile(id);
+        }}
+        src={previewUrl}
+      />
+    );
+  }
+
+  return <File onRemove={() => removeFile(id)} {...props} />;
+});
+
+export default FileItem;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/FileItem/style.ts

@@ -0,0 +1 @@
+export const MIN_IMAGE_SIZE = 64;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files/index.tsx

@@ -0,0 +1,33 @@
+import { ImageGallery } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { filesSelectors, useFileStore } from '@/store/file';
+
+import FileItem from './FileItem';
+
+const Files = memo(() => {
+  const list = useFileStore(filesSelectors.chatUploadFileList, isEqual);
+
+  if (!list || list?.length === 0) return null;
+
+  return (
+    <Flexbox paddingBlock={4} style={{ position: 'relative' }}>
+      <Flexbox
+        gap={4}
+        horizontal
+        padding={'4px 8px 8px'}
+        style={{ overflow: 'scroll', width: '100%' }}
+      >
+        <ImageGallery>
+          {list.map((i) => (
+            <FileItem {...i} key={i.id} loading={i.status === 'pending'} />
+          ))}
+        </ImageGallery>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Files;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/InputArea/Container.tsx

@@ -0,0 +1,41 @@
+import { css, cx } from 'antd-style';
+import { FC, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const container = css`
+  height: inherit;
+  padding-block: 0;
+  padding-inline: 8px;
+`;
+
+interface InnerContainerProps {
+  bottomAddons?: ReactNode;
+  children: ReactNode;
+  expand?: boolean;
+  textAreaLeftAddons?: ReactNode;
+  textAreaRightAddons?: ReactNode;
+  topAddons?: ReactNode;
+}
+
+const InnerContainer: FC<InnerContainerProps> = memo(
+  ({ children, expand, textAreaRightAddons, textAreaLeftAddons, bottomAddons, topAddons }) =>
+    expand ? (
+      <Flexbox className={cx(container)} gap={8}>
+        <Flexbox gap={8} horizontal justify={'flex-end'}>
+          {textAreaLeftAddons}
+          {textAreaRightAddons}
+        </Flexbox>
+        {children}
+        {topAddons}
+        {bottomAddons}
+      </Flexbox>
+    ) : (
+      <Flexbox align={'flex-end'} className={cx(container)} gap={8} horizontal>
+        {textAreaLeftAddons}
+        {children}
+        {textAreaRightAddons}
+      </Flexbox>
+    ),
+);
+
+export default InnerContainer;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/InputArea/index.tsx

@@ -0,0 +1,154 @@
+import { ActionIcon, MobileSafeArea, TextArea } from '@lobehub/ui';
+import { useSize } from 'ahooks';
+import { createStyles } from 'antd-style';
+import { TextAreaRef } from 'antd/es/input/TextArea';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { rgba } from 'polished';
+import { CSSProperties, ReactNode, forwardRef, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InnerContainer from './Container';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      flex: none;
+      padding-block: 12px 12px;
+      background: ${token.colorFillQuaternary};
+      border-block-start: 1px solid ${rgba(token.colorBorder, 0.25)};
+    `,
+    expand: css`
+      position: absolute;
+      height: 100%;
+    `,
+    expandButton: css`
+      position: absolute;
+      inset-inline-start: 14px;
+    `,
+    expandTextArea: css`
+      flex: 1;
+    `,
+  };
+});
+
+export interface MobileChatInputAreaProps {
+  bottomAddons?: ReactNode;
+  className?: string;
+  expand?: boolean;
+  loading?: boolean;
+  onInput?: (value: string) => void;
+  onSend?: () => void;
+  safeArea?: boolean;
+  setExpand?: (expand: boolean) => void;
+  style?: CSSProperties;
+  textAreaLeftAddons?: ReactNode;
+  textAreaRightAddons?: ReactNode;
+  topAddons?: ReactNode;
+  value: string;
+}
+
+const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
+  (
+    {
+      className,
+      style,
+      topAddons,
+      textAreaLeftAddons,
+      textAreaRightAddons,
+      bottomAddons,
+      expand = false,
+      setExpand,
+      onSend,
+      onInput,
+      loading,
+      value,
+      safeArea,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation('chat');
+    const isChineseInput = useRef(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { cx, styles } = useStyles();
+    const size = useSize(containerRef);
+    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);
+    const [isFocused, setIsFocused] = useState<boolean>(false);
+
+    useEffect(() => {
+      if (!size?.height) return;
+      setShowFullscreen(size.height > 72);
+    }, [size]);
+
+    const showAddons = !expand && !isFocused;
+
+    return (
+      <Flexbox
+        className={cx(styles.container, expand && styles.expand, className)}
+        gap={12}
+        style={style}
+      >
+        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}
+        <Flexbox
+          className={cx(expand && styles.expand)}
+          ref={containerRef}
+          style={{ position: 'relative' }}
+        >
+          {showFullscreen && (
+            <ActionIcon
+              active
+              className={styles.expandButton}
+              icon={expand ? ChevronDown : ChevronUp}
+              onClick={() => setExpand?.(!expand)}
+              size={{ blockSize: 24, borderRadius: '50%', fontSize: 14 }}
+              style={expand ? { top: 6 } : {}}
+            />
+          )}
+          <InnerContainer
+            bottomAddons={bottomAddons}
+            expand={expand}
+            textAreaLeftAddons={textAreaLeftAddons}
+            textAreaRightAddons={textAreaRightAddons}
+            topAddons={topAddons}
+          >
+            <TextArea
+              autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
+              className={cx(expand && styles.expandTextArea)}
+              onBlur={(e) => {
+                onInput?.(e.target.value);
+                setIsFocused(false);
+              }}
+              onChange={(e) => {
+                onInput?.(e.target.value);
+              }}
+              onCompositionEnd={() => {
+                isChineseInput.current = false;
+              }}
+              onCompositionStart={() => {
+                isChineseInput.current = true;
+              }}
+              onFocus={() => setIsFocused(true)}
+              onPressEnter={(e) => {
+                if (!loading && !isChineseInput.current && e.shiftKey) {
+                  e.preventDefault();
+                  onSend?.();
+                }
+              }}
+              placeholder={t('sendPlaceholder')}
+              ref={ref}
+              style={{ height: 36, paddingBlock: 6 }}
+              type={expand ? 'pure' : 'block'}
+              value={value}
+            />
+          </InnerContainer>
+        </Flexbox>
+        {bottomAddons && (
+          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
+        )}
+        {safeArea && !isFocused && <MobileSafeArea position={'bottom'} />}
+      </Flexbox>
+    );
+  },
+);
+
+export default MobileChatInputArea;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Send.tsx

@@ -0,0 +1,34 @@
+import { ActionIcon, type ActionIconSize, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { Loader2, SendHorizontal } from 'lucide-react';
+import { memo } from 'react';
+
+export interface MobileChatSendButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  onSend?: () => void;
+  onStop?: () => void;
+}
+
+const MobileChatSendButton = memo<MobileChatSendButtonProps>(
+  ({ loading, onStop, onSend, disabled }) => {
+    const size: ActionIconSize = {
+      blockSize: 36,
+      fontSize: 16,
+    };
+
+    return loading ? (
+      <ActionIcon active icon={Loader2} onClick={onStop} size={size} spin />
+    ) : (
+      <Button
+        disabled={disabled}
+        icon={(<Icon icon={SendHorizontal} />) as any}
+        onClick={onSend}
+        style={{ flex: 'none' }}
+        type={'primary'}
+      />
+    );
+  },
+);
+
+export default MobileChatSendButton;

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

@@ -1,29 +1,42 @@
 'use client';
 
-import { MobileChatInputArea, MobileChatSendButton } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { TextAreaRef } from 'antd/es/input/TextArea';
+import { memo, useRef, useState } from 'react';
 
 import ActionBar from '@/features/ChatInput/ActionBar';
 import STT from '@/features/ChatInput/STT';
 import SaveTopic from '@/features/ChatInput/Topic';
-import { useChatInput } from '@/features/ChatInput/useChatInput';
+import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 
 import Files from './Files';
+import InputArea from './InputArea';
+import SendButton from './Send';
 
 const MobileChatInput = memo(() => {
-  const { t } = useTranslation('chat');
   const theme = useTheme();
-  const { ref, onSend, loading, value, onInput, onStop, expand, setExpand } = useChatInput();
+  const ref = useRef<TextAreaRef>(null);
+  const [expand, setExpand] = useState<boolean>(false);
+  const { send: sendMessage, canSend } = useSendMessage();
+
+  const [loading, value, onInput, onStop] = useChatStore((s) => [
+    chatSelectors.isAIGenerating(s),
+    s.inputMessage,
+    s.updateInputMessage,
+    s.stopGenerateMessage,
+  ]);
 
   return (
-    <MobileChatInputArea
+    <InputArea
       expand={expand}
-      loading={loading}
       onInput={onInput}
-      onSend={onSend}
-      placeholder={t('sendPlaceholder')}
+      onSend={() => {
+        setExpand(false);
+
+        sendMessage();
+      }}
       ref={ref}
       setExpand={setExpand}
       style={{
@@ -34,7 +47,7 @@ const MobileChatInput = memo(() => {
       }}
       textAreaLeftAddons={<STT mobile />}
       textAreaRightAddons={
-        <MobileChatSendButton loading={loading} onSend={onSend} onStop={onStop} />
+        <SendButton disabled={!canSend} loading={loading} onSend={sendMessage} onStop={onStop} />
       }
       topAddons={
         <>

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/components/UploadDetail/UploadStatus.tsx

@@ -0,0 +1,71 @@
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Icon } from '@lobehub/ui';
+import { Progress, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { Loader2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FileUploadState, FileUploadStatus } from '@/types/files/upload';
+import { formatSize } from '@/utils/format';
+
+interface UploadStateProps {
+  size: number;
+  status: FileUploadStatus;
+  uploadState?: FileUploadState;
+}
+
+const UploadStatus = memo<UploadStateProps>(({ status, size, uploadState }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('chat');
+
+  switch (status) {
+    default:
+    case 'pending': {
+      return (
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Icon icon={Loader2Icon} size={{ fontSize: 12 }} spin />
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {t('upload.preview.status.pending')}
+          </Typography.Text>
+        </Flexbox>
+      );
+    }
+
+    case 'uploading': {
+      return (
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Progress percent={uploadState?.progress} size={14} type="circle" />
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {formatSize(size * ((uploadState?.progress || 0) / 100), 2)} / {formatSize(size)}
+          </Typography.Text>
+        </Flexbox>
+      );
+    }
+
+    case 'processing': {
+      return (
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Progress percent={uploadState?.progress} size={14} type="circle" />
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {formatSize(size)} · {t('upload.preview.status.processing')}
+          </Typography.Text>
+        </Flexbox>
+      );
+    }
+
+    case 'success': {
+      return (
+        <Flexbox align={'center'} gap={4} horizontal>
+          <CheckCircleFilled style={{ color: theme.colorSuccess, fontSize: 12 }} />
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {formatSize(size)}
+          </Typography.Text>
+        </Flexbox>
+      );
+    }
+  }
+});
+
+export default UploadStatus;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/components/UploadDetail/index.tsx

@@ -0,0 +1,49 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileParsingStatus from '@/components/FileParsingStatus';
+import { FileParsingTask } from '@/types/asyncTask';
+import { FileUploadState, FileUploadStatus } from '@/types/files';
+
+import UploadStatus from './UploadStatus';
+
+const useStyles = createStyles(({ css }) => ({
+  status: css`
+    &.ant-tag {
+      padding-inline: 0;
+      background: none;
+    }
+  `,
+}));
+
+interface UploadDetailProps {
+  size: number;
+  status: FileUploadStatus;
+  tasks?: FileParsingTask;
+  uploadState?: FileUploadState;
+}
+
+const UploadDetail = memo<UploadDetailProps>(({ uploadState, status, size, tasks }) => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} gap={8} height={22} horizontal>
+      <UploadStatus size={size} status={status} uploadState={uploadState} />
+      {!!tasks && Object.keys(tasks).length === 0 ? (
+        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          {t('upload.preview.prepareTasks')}
+        </Typography.Text>
+      ) : (
+        <div>
+          <FileParsingStatus {...tasks} className={styles.status} hideEmbeddingButton />
+        </div>
+      )}
+    </Flexbox>
+  );
+});
+
+export default UploadDetail;