@lobehub/chat 1.11.8 → 1.12.0

package/src/features/ChatInput/ActionBar/config.ts

@@ -1,16 +1,18 @@
 import STT from '../STT';
 import Clear from './Clear';
-import FileUpload from './FileUpload';
 import History from './History';
+import Knowledge from './Knowledge';
 import ModelSwitch from './ModelSwitch';
 import Temperature from './Temperature';
 import Token from './Token';
 import Tools from './Tools';
+import Upload from './Upload';
 
 export const actionMap = {
   clear: Clear,
-  fileUpload: FileUpload,
+  fileUpload: Upload,
   history: History,
+  knowledgeBase: Knowledge,
   model: ModelSwitch,
   stt: STT,
   temperature: Temperature,
@@ -26,8 +28,15 @@ type getActionList = (mobile?: boolean) => ActionKeys[];
 
 // we can make these action lists configurable in the future
 export const getLeftActionList: getActionList = (mobile) =>
-  ['model', 'fileUpload', 'temperature', 'history', !mobile && 'stt', 'tools', 'token'].filter(
-    Boolean,
-  ) as ActionKeys[];
+  [
+    'model',
+    'fileUpload',
+    'knowledgeBase',
+    'temperature',
+    'history',
+    !mobile && 'stt',
+    'tools',
+    'token',
+  ].filter(Boolean) as ActionKeys[];
 
 export const getRightActionList: getActionList = () => ['clear'].filter(Boolean) as ActionKeys[];

package/src/features/ChatInput/useSend.ts

@@ -1,9 +1,9 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { SendMessageParams } from '@/store/chat/slices/message/action';
-import { filesSelectors, useFileStore } from '@/store/file';
+import { fileChatSelectors, useFileStore } from '@/store/file';
 
 export type UseSendMessageParams = Pick<
   SendMessageParams,
@@ -16,22 +16,24 @@ export const useSendMessage = () => {
     s.updateInputMessage,
   ]);
 
-  return useCallback((params: UseSendMessageParams = {}) => {
+  const clearChatUploadFileList = useFileStore((s) => s.clearChatUploadFileList);
+
+  const send = useCallback((params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
     if (chatSelectors.isAIGenerating(store)) return;
 
-    const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());
+    const fileList = fileChatSelectors.chatUploadFileList(useFileStore.getState());
     // if there is no message and no image, then we should not send the message
-    if (!store.inputMessage && imageList.length === 0) return;
+    if (!store.inputMessage && fileList.length === 0) return;
 
     sendMessage({
-      files: imageList,
+      files: fileList,
       message: store.inputMessage,
       ...params,
     });
 
     updateInputMessage('');
-    useFileStore.getState().clearImageList();
+    clearChatUploadFileList();
 
     // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
     // const agentSetting = useAgentStore.getState().agentSettingInstance;
@@ -41,4 +43,11 @@ export const useSendMessage = () => {
     //   agentSetting.autocompleteAllMeta();
     // }
   }, []);
+
+  const isUploadingFiles = useFileStore(fileChatSelectors.isUploadingFiles);
+  const isSendButtonDisabledByMessage = useChatStore(chatSelectors.isSendButtonDisabledByMessage);
+
+  const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
+
+  return useMemo(() => ({ canSend, send }), [canSend]);
 };

package/src/features/Conversation/Messages/Assistant/FileChunks/Item/index.tsx

@@ -0,0 +1,51 @@
+import { Tooltip } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useChatStore } from '@/store/chat';
+import { ChatFileChunk } from '@/types/message';
+
+import { useStyles } from './style';
+
+export interface ChunkItemProps extends ChatFileChunk {
+  index: number;
+}
+
+const ChunkItem = memo<ChunkItemProps>(({ id, fileId, text, filename, fileType }) => {
+  const { styles, cx } = useStyles();
+  const openFilePreview = useChatStore((s) => s.openFilePreview);
+
+  const isMobile = useIsMobile();
+  return (
+    <Flexbox
+      align={'center'}
+      className={cx(styles.container, isMobile && styles.mobile)}
+      gap={4}
+      horizontal
+      key={id}
+      onClick={(e) => {
+        e.stopPropagation();
+        openFilePreview(fileId);
+      }}
+    >
+      <FileIcon fileName={filename} fileType={fileType} size={20} variant={'pure'} />
+      <Flexbox style={{ maxWidth: 200 }}>
+        <Tooltip title={text.slice(0, 100) + '...'}>
+          <Typography.Text ellipsis={{ tooltip: false }}>{filename}</Typography.Text>
+        </Tooltip>
+        {/*<Typography.Text*/}
+        {/*  ellipsis={{ suffix: '...' }}*/}
+        {/*  style={{ fontSize: 12, lineHeight: 1 }}*/}
+        {/*  type={'secondary'}*/}
+        {/*>*/}
+        {/*  {text}*/}
+        {/*</Typography.Text>*/}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ChunkItem;

package/src/features/Conversation/Messages/Assistant/FileChunks/Item/style.ts

@@ -0,0 +1,38 @@
+import { createStyles } from 'antd-style';
+import { lighten } from 'polished';
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    cursor: pointer;
+
+    width: fit-content;
+    padding-block: 6px;
+    padding-inline: 8px;
+    padding-inline-end: 12px;
+
+    color: ${token.colorText};
+
+    background: ${lighten(0.1, token.colorBgElevated)};
+    border-radius: 8px;
+    box-shadow: ${token.boxShadowTertiary};
+
+    transition: all 0.2s;
+
+    &:hover {
+      background: ${isDarkMode ? lighten(0.15, token.colorBgElevated) : ''};
+      box-shadow: ${token.boxShadowSecondary};
+    }
+  `,
+  filename: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+  mobile: css`
+    width: 100%;
+  `,
+}));

package/src/features/Conversation/Messages/Assistant/FileChunks/index.tsx

@@ -0,0 +1,76 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BookOpenTextIcon, ChevronDown, ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatFileChunk } from '@/types/message';
+
+import ChunkItem from './Item';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    cursor: pointer;
+
+    padding-block: 8px;
+    padding-inline: 12px;
+    padding-inline-end: 12px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorFillTertiary};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${isDarkMode ? '' : token.colorFillSecondary};
+    }
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+}));
+
+interface FileChunksProps {
+  data: ChatFileChunk[];
+}
+
+const FileChunks = memo<FileChunksProps>(({ data }) => {
+  const { t } = useTranslation('chat');
+  const { styles, theme } = useStyles();
+
+  const [showDetail, setShowDetail] = useState(false);
+
+  return (
+    <Flexbox
+      className={styles.container}
+      gap={16}
+      onClick={() => {
+        setShowDetail(!showDetail);
+      }}
+      width={'100%'}
+    >
+      <Flexbox distribution={'space-between'} flex={1} horizontal>
+        <Flexbox gap={8} horizontal>
+          <Icon color={theme.geekblue} icon={BookOpenTextIcon} /> {t('rag.referenceChunks')}
+        </Flexbox>
+        <Icon icon={showDetail ? ChevronDown : ChevronRight} />
+      </Flexbox>
+      {showDetail && (
+        <Flexbox gap={8} horizontal wrap={'wrap'}>
+          {data.map((item, index) => {
+            return <ChunkItem index={index} key={item.id} {...item}></ChunkItem>;
+          })}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default FileChunks;

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -7,21 +7,30 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
 import { DefaultMessage } from '../Default';
+import FileChunks from './FileChunks';
 import ToolCall from './ToolCallItem';
 
 export const AssistantMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
   }
->(({ id, tools, content, ...props }) => {
+>(({ id, tools, content, chunksList, ...props }) => {
   const editing = useChatStore(chatSelectors.isMessageEditing(id));
   const generating = useChatStore(chatSelectors.isMessageGenerating(id));
 
   const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
 
-  return (
+  return editing ? (
+    <DefaultMessage
+      content={content}
+      id={id}
+      isToolCallGenerating={isToolCallGenerating}
+      {...props}
+    />
+  ) : (
     <Flexbox gap={8} id={id}>
-      {(content || editing) && (
+      {!!chunksList && chunksList.length > 0 && <FileChunks data={chunksList} />}
+      {content && (
         <DefaultMessage
           addIdOnDOM={false}
           content={content}
@@ -30,7 +39,7 @@ export const AssistantMessage = memo<
           {...props}
         />
       )}
-      {!editing && tools && (
+      {tools && (
         <Flexbox gap={8}>
           {tools.map((toolCall, index) => (
             <ToolCall

package/src/features/Conversation/Messages/Default.tsx

@@ -21,3 +21,7 @@ export const DefaultMessage = memo<
 
   return <div id={addIdOnDOM ? id : undefined}>{editableContent}</div>;
 });
+
+export const DefaultBelowMessage = memo<ChatMessage>(() => {
+  return null;
+});

package/src/features/Conversation/Messages/User/BelowMessage.tsx

@@ -0,0 +1,78 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { RotateCwIcon, Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { ChatMessage } from '@/types/message';
+
+const useStyles = createStyles(({ css, cx }) => ({
+  action: cx(
+    css`
+      align-self: flex-end;
+      opacity: 0;
+    `,
+    'rag-query-actions',
+  ),
+  container: css`
+    &:hover {
+      .rag-query-actions {
+        opacity: 1;
+      }
+    }
+  `,
+  content: css`
+    overflow-y: scroll;
+    flex-wrap: wrap;
+
+    width: 100%;
+    max-height: 54px;
+    margin-block-start: 6px;
+  `,
+}));
+
+export const UserBelowMessage = memo<ChatMessage>(({ ragQuery, content, id }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('chat');
+
+  const [deleteUserMessageRagQuery, rewriteQuery] = useChatStore((s) => [
+    s.deleteUserMessageRagQuery,
+    s.rewriteQuery,
+  ]);
+
+  return (
+    !!ragQuery &&
+    !isEqual(ragQuery, content) && (
+      <Flexbox className={styles.container}>
+        <Flexbox align={'center'} className={styles.content} gap={4} horizontal>
+          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+            {ragQuery}
+          </Typography.Text>
+        </Flexbox>
+        <Flexbox className={styles.action} horizontal>
+          <ActionIcon
+            icon={Trash2}
+            onClick={() => {
+              deleteUserMessageRagQuery(id);
+            }}
+            size={'small'}
+            title={t('rag.userQuery.actions.delete')}
+          />
+          <ActionIcon
+            icon={RotateCwIcon}
+            onClick={() => {
+              rewriteQuery(id);
+            }}
+            size={'small'}
+            title={t('rag.userQuery.actions.regenerate')}
+          />
+        </Flexbox>
+      </Flexbox>
+    )
+  );
+});

package/src/features/Conversation/Messages/User/FileListViewer/Item.tsx

@@ -0,0 +1,53 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { useChatStore } from '@/store/chat';
+import { ChatFileItem } from '@/types/message';
+import { formatSize } from '@/utils/format';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    cursor: pointer;
+
+    overflow: hidden;
+
+    max-width: 420px;
+    padding-block: 8px;
+    padding-inline: 12px 32px;
+
+    border: 1px solid ${isDarkMode ? token.colorBorder : token.colorSplit};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+}));
+
+const FileItem = memo<ChatFileItem>(({ id, fileType, size, name }) => {
+  const { styles } = useStyles();
+
+  const openFilePreview = useChatStore((s) => s.openFilePreview);
+
+  return (
+    <Flexbox
+      className={styles.container}
+      gap={12}
+      horizontal
+      key={id}
+      onClick={() => {
+        openFilePreview(id);
+      }}
+    >
+      <FileIcon fileName={name} fileType={fileType} />
+      <Flexbox style={{ overflow: 'hidden' }}>
+        <Typography.Text ellipsis>{name}</Typography.Text>
+        <Typography.Text type={'secondary'}>{formatSize(size)}</Typography.Text>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+export default FileItem;

package/src/features/Conversation/Messages/User/FileListViewer/index.tsx

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatFileItem } from '@/types/message';
+
+import FileItem from './Item';
+
+interface FileListViewerProps {
+  items: ChatFileItem[];
+}
+
+const FileListViewer = memo<FileListViewerProps>(({ items }) => {
+  return (
+    <Flexbox gap={8}>
+      {items.map((item) => (
+        <FileItem key={item.id} {...item} />
+      ))}
+    </Flexbox>
+  );
+});
+export default FileListViewer;

package/src/{components/FileList/FileListViewer.tsx → features/Conversation/Messages/User/ImageFileListViewer.tsx}

@@ -4,16 +4,24 @@ import { memo } from 'react';
 import GalleyGrid from '@/components/GalleyGrid';
 import ImageItem from '@/components/ImageItem';
 
-import { ImageFileItem } from './type';
+interface ImageFileItem {
+  alt?: string;
+  id: string;
+  loading?: boolean;
+  onRemove?: (id: string) => void;
+  url: string;
+}
 
 interface FileListProps {
   items: ImageFileItem[];
 }
 
-export const ImageFileListViewer = memo<FileListProps>(({ items }) => {
+const ImageFileListViewer = memo<FileListProps>(({ items }) => {
   return (
     <ImageGallery>
       <GalleyGrid items={items} renderItem={ImageItem} />
     </ImageGallery>
   );
 });
+
+export default ImageFileListViewer;

package/src/features/Conversation/Messages/{User.tsx → User/index.tsx}

@@ -3,9 +3,11 @@ import { Flexbox } from 'react-layout-kit';
 
 import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
-import { FileListPreviewer } from '@/features/FileList';
 import { ChatMessage } from '@/types/message';
 
+import FileListViewer from './FileListViewer';
+import ImageFileListViewer from './ImageFileListViewer';
+
 export const UserMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
@@ -16,7 +18,14 @@ export const UserMessage = memo<
   return (
     <Flexbox gap={8} id={id}>
       {editableContent}
-      {res.files && res.files?.length > 0 && <FileListPreviewer items={res.files} />}
+      {res.imageList && res.imageList?.length > 0 && <ImageFileListViewer items={res.imageList} />}
+      {res.fileList && res.fileList?.length > 0 && (
+        <div style={{ marginTop: 8 }}>
+          <FileListViewer items={res.fileList} />
+        </div>
+      )}
     </Flexbox>
   );
 });
+
+export * from './BelowMessage';

package/src/features/Conversation/Messages/index.ts

@@ -3,11 +3,11 @@ import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import { OnAvatarsClick, RenderMessage } from '../types';
+import { OnAvatarsClick, RenderBelowMessage, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
-import { DefaultMessage } from './Default';
+import { DefaultBelowMessage, DefaultMessage } from './Default';
 import { ToolMessage } from './Tool';
-import { UserMessage } from './User';
+import { UserBelowMessage, UserMessage } from './User';
 
 export const renderMessages: Record<string, RenderMessage> = {
   assistant: AssistantMessage,
@@ -17,6 +17,11 @@ export const renderMessages: Record<string, RenderMessage> = {
   user: UserMessage,
 };
 
+export const renderBelowMessages: Record<string, RenderBelowMessage> = {
+  default: DefaultBelowMessage,
+  user: UserBelowMessage,
+};
+
 export const useAvatarsClick = (): OnAvatarsClick => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -16,7 +16,7 @@ import { ChatMessage } from '@/types/message';
 
 import ErrorMessageExtra, { useErrorContent } from '../../Error';
 import { renderMessagesExtra } from '../../Extras';
-import { renderMessages, useAvatarsClick } from '../../Messages';
+import { renderBelowMessages, renderMessages, useAvatarsClick } from '../../Messages';
 import ActionsBar from './ActionsBar';
 import HistoryDivider from './HistoryDivider';
 
@@ -57,14 +57,24 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
   const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
 
-  const [isMessageLoading, generating, editing, toggleMessageEditing, updateMessageContent] =
-    useChatStore((s) => [
-      chatSelectors.isMessageLoading(id)(s),
-      chatSelectors.isMessageGenerating(id)(s),
-      chatSelectors.isMessageEditing(id)(s),
-      s.toggleMessageEditing,
-      s.modifyMessageContent,
-    ]);
+  const [
+    isMessageLoading,
+    generating,
+    isInRAGFlow,
+    editing,
+    toggleMessageEditing,
+    updateMessageContent,
+  ] = useChatStore((s) => [
+    chatSelectors.isMessageLoading(id)(s),
+    chatSelectors.isMessageGenerating(id)(s),
+    chatSelectors.isMessageInRAGFlow(id)(s),
+    chatSelectors.isMessageEditing(id)(s),
+    s.toggleMessageEditing,
+    s.modifyMessageContent,
+  ]);
+
+  // when the message is in RAG flow or the AI generating, it should be in loading state
+  const isProcessing = isInRAGFlow || generating;
 
   const onAvatarsClick = useAvatarsClick();
 
@@ -80,6 +90,18 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     [item?.role],
   );
 
+  const BelowMessage = useCallback(
+    ({ data }: { data: ChatMessage }) => {
+      if (!item?.role) return;
+      const RenderFunction = renderBelowMessages[item.role] ?? renderBelowMessages['default'];
+
+      if (!RenderFunction) return;
+
+      return <RenderFunction {...data} />;
+    },
+    [item?.role],
+  );
+
   const MessageExtra = useCallback(
     ({ data }: { data: ChatMessage }) => {
       if (!renderMessagesExtra || !item?.role) return;
@@ -116,12 +138,13 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
             />
           }
           avatar={item.meta}
+          belowMessage={<BelowMessage data={item} />}
           className={cx(styles.message, isMessageLoading && styles.loading)}
           editing={editing}
           error={error}
           errorMessage={<ErrorMessageExtra data={item} />}
           fontSize={fontSize}
-          loading={generating}
+          loading={isProcessing}
           message={item.content}
           messageExtra={<MessageExtra data={item} />}
           onAvatarClick={onAvatarsClick?.(item.role)}

package/src/features/Conversation/components/InboxWelcome/QuestionSuggest.tsx

@@ -65,7 +65,7 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
-  const sendMessage = useSendMessage();
+  const { send: sendMessage } = useSendMessage();
 
   return (
     <Flexbox gap={8} width={'100%'}>

package/src/features/Conversation/types/index.tsx

@@ -11,6 +11,7 @@ export type OnActionsClick = (action: ActionEvent, message: ChatMessage) => void
 export type OnAvatarsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
 export type RenderRole = LLMRoleType | 'default' | string;
 export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;
+export type RenderBelowMessage = FC<ChatMessage>;
 export type RenderMessageExtra = FC<ChatMessage>;
 
 export type RenderAction = FC<ActionsBarProps & ChatMessage>;