@lobehub/chat 0.100.4 → 0.101.0

package/src/app/chat/(desktop)/features/ChatInput/index.tsx

@@ -1,37 +1,78 @@
-import { DraggablePanel } from '@lobehub/ui';
+import { ActionIcon, DraggablePanel } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Maximize2, Minimize2 } from 'lucide-react';
 import { memo, useState } from 'react';
 
+import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 
-import ChatInputContent from '../../../features/ChatInputContent';
+import DragUpload from './DragUpload';
 import Footer from './Footer';
+import InputArea from './InputArea';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      height: 100%;
+      padding: 12px 0 16px;
+    `,
+  };
+});
 
 const ChatInputDesktopLayout = memo(() => {
+  const { styles } = useStyles();
   const [expand, setExpand] = useState<boolean>(false);
+
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
     s.preference.inputHeight,
     s.updatePreference,
   ]);
 
+  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
   return (
-    <DraggablePanel
-      fullscreen={expand}
-      headerHeight={HEADER_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 }}
-    >
-      <ChatInputContent expand={expand} footer={<Footer />} onExpandChange={setExpand} />
-    </DraggablePanel>
+    <>
+      {canUpload && <DragUpload />}
+      <DraggablePanel
+        fullscreen={expand}
+        headerHeight={HEADER_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 }}
+      >
+        <section className={styles.container} style={{ minHeight: CHAT_TEXTAREA_HEIGHT }}>
+          <ActionBar
+            rightAreaEndRender={
+              <ActionIcon
+                icon={expand ? Minimize2 : Maximize2}
+                onClick={() => {
+                  setExpand(!expand);
+                }}
+              />
+            }
+          />
+          <InputArea />
+          <Footer />
+        </section>
+      </DraggablePanel>
+    </>
   );
 });
 

package/src/app/chat/(mobile)/features/ChatInput/Mobile.tsx

@@ -0,0 +1,79 @@
+import { Icon, Input } from '@lobehub/ui';
+import { Button, type InputRef } from 'antd';
+import { Loader2, SendHorizonal } from 'lucide-react';
+import { forwardRef, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+
+import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
+import SaveTopic from '@/app/chat/features/ChatInput/Topic';
+
+import { useStyles } from './style.mobile';
+
+export type ChatInputAreaMobile = {
+  loading?: boolean;
+  onChange?: (value: string) => void;
+  onSend?: (value: string) => void;
+  onStop?: () => void;
+  value?: string;
+};
+
+const ChatInputArea = forwardRef<InputRef, ChatInputAreaMobile>(
+  ({ onSend, loading, onChange, onStop, value }) => {
+    const { t } = useTranslation('chat');
+    const [currentValue, setCurrentValue] = useControlledState<string>('', {
+      onChange: onChange,
+      value,
+    });
+    const { cx, styles } = useStyles();
+    const isChineseInput = useRef(false);
+
+    const handleSend = useCallback(() => {
+      if (loading) return;
+      if (onSend) onSend(currentValue);
+      setCurrentValue('');
+    }, [currentValue]);
+
+    return (
+      <Flexbox className={cx(styles.container)} gap={12}>
+        <ActionBar rightAreaStartRender={<SaveTopic />} />
+        <Flexbox className={styles.inner} gap={8} horizontal>
+          <Input
+            className={cx(styles.input)}
+            onBlur={(e) => {
+              setCurrentValue(e.target.value);
+            }}
+            onChange={(e) => {
+              setCurrentValue(e.target.value);
+            }}
+            onCompositionEnd={() => {
+              isChineseInput.current = false;
+            }}
+            onCompositionStart={() => {
+              isChineseInput.current = true;
+            }}
+            onPressEnter={(e) => {
+              if (!loading && !e.shiftKey && !isChineseInput.current) {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+            placeholder={t('sendPlaceholder')}
+            type={'block'}
+            value={currentValue}
+          />
+          <div>
+            {loading ? (
+              <Button icon={loading && <Icon icon={Loader2} spin />} onClick={onStop} />
+            ) : (
+              <Button icon={<Icon icon={SendHorizonal} />} onClick={handleSend} type={'primary'} />
+            )}
+          </div>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default ChatInputArea;

package/src/app/chat/(mobile)/features/{ChatInput.tsx → ChatInput/index.tsx}

@@ -1,10 +1,11 @@
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
+import { useSessionStore } from '@/store/session';
 
-import ChatInputContent from '../../features/ChatInputContent';
+import ChatInputArea from './Mobile';
 
 const useStyles = createStyles(
   ({ css, token }) => css`
@@ -21,11 +22,26 @@ const useStyles = createStyles(
 
 const ChatInputMobileLayout = memo(() => {
   const { styles } = useStyles();
+
+  const [message, setMessage] = useState('');
+
+  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.sendMessage,
+    s.stopGenerateMessage,
+  ]);
+
   return (
     <>
       <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
       <div className={styles}>
-        <ChatInputContent mobile />
+        <ChatInputArea
+          loading={isLoading}
+          onChange={setMessage}
+          onSend={sendMessage}
+          onStop={stopGenerateMessage}
+          value={message}
+        />
       </div>
     </>
   );

package/src/app/chat/(mobile)/features/ChatInput/style.mobile.ts

@@ -0,0 +1,19 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      padding: 12px 0;
+      background: ${token.colorBgLayout};
+      border-top: 1px solid ${rgba(token.colorBorder, 0.25)};
+    `,
+    inner: css`
+      padding: 0 16px;
+    `,
+    input: css`
+      background: ${token.colorFillSecondary} !important;
+      border: none !important;
+    `,
+  };
+});

package/src/app/chat/components/FileList/FileItem.style.ts

@@ -0,0 +1,81 @@
+import { createStyles } from 'antd-style';
+
+export const IMAGE_SIZE = 64;
+const imageBorderRaidus = 8;
+
+export const useStyles = createStyles(({ css, cx, token, isDarkMode }) => {
+  const closeIcon = cx(css`
+    cursor: pointer;
+
+    position: absolute;
+    top: -6px;
+    right: -6px;
+
+    width: 16px;
+    height: 16px;
+
+    color: ${isDarkMode ? token.colorTextQuaternary : token.colorTextTertiary};
+
+    opacity: 0;
+    background: ${isDarkMode ? token.colorTextSecondary : token.colorBgContainer};
+    border-radius: 50%;
+
+    transition: all 0.2s ease-in;
+
+    &:hover {
+      scale: 1.2;
+    }
+  `);
+
+  return {
+    closeIcon,
+    container: css`
+      cursor: pointer;
+
+      position: relative;
+
+      width: ${IMAGE_SIZE}px;
+      height: ${IMAGE_SIZE}px;
+
+      border-radius: ${imageBorderRaidus}px;
+
+      &:hover {
+        .${closeIcon} {
+          opacity: 1;
+        }
+      }
+    `,
+    image: css`
+      opacity: ${isDarkMode ? 0.6 : 1};
+      object-fit: cover;
+      border-radius: 8px;
+      animation: fade-in 0.3s ease-in;
+
+      @keyframes fade-in {
+        from {
+          scale: 1.2;
+          opacity: 1;
+        }
+
+        to {
+          scale: 1;
+          opacity: 1;
+        }
+      }
+    `,
+    imageCtn: css`
+      position: relative;
+    `,
+    imageWrapper: css`
+      overflow: hidden;
+      width: ${IMAGE_SIZE}px;
+      height: ${IMAGE_SIZE}px;
+      border-radius: ${imageBorderRaidus}px;
+    `,
+    notFound: css`
+      color: ${token.colorTextSecondary};
+      background: ${token.colorFillTertiary};
+      border-radius: ${imageBorderRaidus}px;
+    `,
+  };
+});

package/src/app/chat/components/FileList/FileItem.tsx

@@ -0,0 +1,69 @@
+import { CloseCircleFilled } from '@ant-design/icons';
+import { Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { LucideImageOff } from 'lucide-react';
+import Image from 'next/image';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/files';
+
+import { IMAGE_SIZE, useStyles } from './FileItem.style';
+
+const FileItem = memo<{ editable: boolean; id: string; onClick: () => void }>(
+  ({ editable, id, onClick }) => {
+    const { styles } = useStyles();
+    const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
+
+    const { data, isLoading } = useFetchFile(id);
+
+    return (
+      <Flexbox className={styles.container} onClick={onClick}>
+        {isLoading ? (
+          <Skeleton
+            active
+            title={{
+              style: { borderRadius: 8, height: IMAGE_SIZE },
+              width: IMAGE_SIZE,
+            }}
+          />
+        ) : (
+          <Flexbox className={styles.imageCtn}>
+            <div className={styles.imageWrapper}>
+              {data ? (
+                <Image
+                  alt={data.name || ''}
+                  className={styles.image}
+                  fetchPriority={'high'}
+                  height={IMAGE_SIZE}
+                  loading={'lazy'}
+                  src={data.url}
+                  width={IMAGE_SIZE}
+                />
+              ) : (
+                <Center className={styles.notFound} height={'100%'}>
+                  <Icon icon={LucideImageOff} size={{ fontSize: 28 }} />
+                </Center>
+              )}
+            </div>
+          </Flexbox>
+        )}
+        {/* only show close icon when editable */}
+        {editable && (
+          <Center
+            className={styles.closeIcon}
+            onClick={(e) => {
+              e.stopPropagation();
+
+              removeFile(id);
+            }}
+          >
+            <CloseCircleFilled />
+          </Center>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default FileItem;

package/src/app/chat/components/FileList/Lightbox.tsx

@@ -0,0 +1,46 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import Lightbox from 'react-spring-lightbox';
+
+import { filesSelectors, useFileStore } from '@/store/files';
+
+const useStyles = createStyles(({ css, token }) => ({
+  wrapper: css`
+    background: ${token.colorBgMask};
+    backdrop-filter: blur(4px);
+  `,
+}));
+
+interface LightBoxProps {
+  index: number;
+  items: string[];
+  onNext: () => void;
+  onOpenChange: (open: boolean) => void;
+  onPrev: () => void;
+  open: boolean;
+}
+
+const LightBox = memo<LightBoxProps>(({ onOpenChange, open, items, index, onNext, onPrev }) => {
+  const { styles } = useStyles();
+
+  const list = useFileStore(filesSelectors.getImageDetailByList(items));
+  return (
+    <Lightbox
+      className={styles.wrapper}
+      currentIndex={index}
+      images={list.map((i) => ({
+        alt: i.name,
+        loading: 'lazy',
+        src: i.url,
+      }))}
+      isOpen={open}
+      onClose={() => {
+        onOpenChange(false);
+      }}
+      onNext={onNext}
+      onPrev={onPrev}
+    />
+  );
+});
+
+export default LightBox;

package/src/app/chat/components/FileList/index.tsx

@@ -0,0 +1,63 @@
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileItem from './FileItem';
+import Lightbox from './Lightbox';
+
+// TODO：后续看情况是否做图片过多的滚动功能
+// const useStyles = createStyles(({ css }) => ({
+//   container: css`
+//     width: ${IMAGE_SIZE * 5 + 4 * 8 + IMAGE_SIZE / 2}px;
+//     overflow-x: scroll;
+//     height: ${IMAGE_SIZE + 12}px;
+//   `,
+// }));
+
+interface FileListProps {
+  editable?: boolean;
+  items: string[];
+}
+
+const FileList = memo<FileListProps>(({ items, editable = true }) => {
+  // const { styles } = useStyles();
+
+  const [showLightbox, setShowLightbox] = useState(false);
+  const [currentImageIndex, setCurrentIndex] = useState(0);
+
+  const gotoPrevious = () => currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);
+  const gotoNext = () =>
+    currentImageIndex + 1 < items.length && setCurrentIndex(currentImageIndex + 1);
+
+  return (
+    <>
+      <Flexbox
+        align={'flex-end'}
+        // className={styles.container}
+        gap={8}
+        horizontal
+      >
+        {items.map((i, index) => (
+          <FileItem
+            editable={editable}
+            id={i}
+            key={i}
+            onClick={() => {
+              setCurrentIndex(index);
+              setShowLightbox(true);
+            }}
+          />
+        ))}
+      </Flexbox>
+      <Lightbox
+        index={currentImageIndex}
+        items={items}
+        onNext={gotoNext}
+        onOpenChange={setShowLightbox}
+        onPrev={gotoPrevious}
+        open={showLightbox}
+      />
+    </>
+  );
+});
+
+export default FileList;

package/src/app/chat/features/ChatInput/ActionBar/Clear.tsx

@@ -0,0 +1,48 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { Eraser } from 'lucide-react';
+import { memo, useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
+
+import HotKeys from '@/components/HotKeys';
+import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { useFileStore } from '@/store/files';
+import { useSessionStore } from '@/store/session';
+
+const Clear = memo(() => {
+  const { t } = useTranslation('setting');
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage]);
+  const [clearImageList] = useFileStore((s) => [s.clearImageList]);
+  const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+
+  const resetConversation = useCallback(() => {
+    clearMessage();
+    clearImageList();
+  }, []);
+
+  useHotkeys(hotkeys, resetConversation, {
+    preventDefault: true,
+  });
+
+  return (
+    <Popconfirm
+      cancelText={t('cancel', { ns: 'common' })}
+      okButtonProps={{ danger: true }}
+      okText={t('ok', { ns: 'common' })}
+      onConfirm={() => {
+        resetConversation();
+      }}
+      placement={'topRight'}
+      title={t('confirmClearCurrentMessages', { ns: 'chat' })}
+    >
+      <ActionIcon
+        icon={Eraser}
+        placement={'bottom'}
+        title={(<HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />) as any}
+      />
+    </Popconfirm>
+  );
+});
+
+export default Clear;

package/src/app/chat/features/ChatInput/ActionBar/FileUpload.tsx

@@ -0,0 +1,53 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { useTheme } from 'antd-style';
+import { LucideImage, LucideLoader2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/files';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agentConfig';
+
+const FileUpload = memo(() => {
+  const { t } = useTranslation('chat');
+  const [loading, setLoading] = useState(false);
+  const theme = useTheme();
+  const upload = useFileStore((s) => s.uploadFile);
+
+  const canUpload = useSessionStore(agentSelectors.modelHasVisionAbility);
+
+  if (!canUpload) return null;
+
+  return (
+    <Upload
+      accept="image/*"
+      beforeUpload={async (file) => {
+        setLoading(true);
+
+        await upload(file);
+
+        setLoading(false);
+        return false;
+      }}
+      multiple={true}
+      showUploadList={false}
+    >
+      {loading ? (
+        <Center height={36} width={36}>
+          <Icon
+            color={theme.colorTextSecondary}
+            icon={LucideLoader2}
+            size={{ fontSize: 18 }}
+            spin
+          ></Icon>
+        </Center>
+      ) : (
+        <ActionIcon icon={LucideImage} placement={'bottom'} title={t('upload.actionTooltip')} />
+      )}
+    </Upload>
+  );
+});
+
+export default FileUpload;

package/src/app/chat/features/ChatInput/ActionBar/History.tsx

@@ -0,0 +1,64 @@
+import { ActionIcon, SliderWithInput } from '@lobehub/ui';
+import { Popover, Switch } from 'antd';
+import { Timer, TimerOff } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+const History = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.historyCount, !config.enableHistoryCount, s.updateAgentConfig];
+  });
+
+  return (
+    <Popover
+      arrow={false}
+      content={
+        <Flexbox align={'center'} gap={16} horizontal>
+          <SliderWithInput
+            disabled={unlimited}
+            max={30}
+            min={1}
+            onChange={(v) => {
+              updateAgentConfig({ historyCount: v });
+            }}
+            step={1}
+            style={{ width: 160 }}
+            value={historyCount}
+          />
+          <Flexbox align={'center'} gap={4} horizontal>
+            <Switch
+              checked={unlimited}
+              onChange={(checked) => {
+                updateAgentConfig({ enableHistoryCount: !checked });
+              }}
+              size={'small'}
+            />
+            {t('settingChat.enableHistoryCount.alias')}
+          </Flexbox>
+        </Flexbox>
+      }
+      placement={'top'}
+      trigger={'click'}
+    >
+      <ActionIcon
+        icon={unlimited ? TimerOff : Timer}
+        placement={'bottom'}
+        title={t(
+          unlimited
+            ? 'settingChat.enableHistoryCount.unlimited'
+            : 'settingChat.enableHistoryCount.limited',
+          { number: historyCount || 0 },
+        )}
+      />
+    </Popover>
+  );
+});
+
+export default History;