@lobehub/chat 0.100.5 → 0.101.1

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

@@ -1,20 +1,27 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
 import { Eraser } from 'lucide-react';
-import { memo } from '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, s.updateAgentConfig]);
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage]);
+  const [clearImageList] = useFileStore((s) => [s.clearImageList]);
   const hotkeys = [PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
 
-  useHotkeys(hotkeys, clearMessage, {
+  const resetConversation = useCallback(() => {
+    clearMessage();
+    clearImageList();
+  }, []);
+
+  useHotkeys(hotkeys, resetConversation, {
     preventDefault: true,
   });
 
@@ -23,7 +30,9 @@ const Clear = memo(() => {
       cancelText={t('cancel', { ns: 'common' })}
       okButtonProps={{ danger: true }}
       okText={t('ok', { ns: 'common' })}
-      onConfirm={() => clearMessage()}
+      onConfirm={() => {
+        resetConversation();
+      }}
       placement={'topRight'}
       title={t('confirmClearCurrentMessages', { ns: 'chat' })}
     >

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/config.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import Clear from './Clear';
+import FileUpload from './FileUpload';
 import History from './History';
 import ModelSwitch from './ModelSwitch';
 import Temperature from './Temperature';
@@ -8,6 +9,7 @@ import Token from './Token';
 
 export const actionMap: Record<string, FC> = {
   clear: Clear,
+  fileUpload: FileUpload,
   history: History,
   model: ModelSwitch,
   temperature: Temperature,
@@ -15,5 +17,5 @@ export const actionMap: Record<string, FC> = {
 };
 
 // we can make these action lists configurable in the future
-export const leftActionList = ['model', 'temperature', 'history', 'token'];
+export const leftActionList = ['model', 'fileUpload', 'temperature', 'history', 'token'];
 export const rightActionList = ['clear'];

package/src/app/chat/{(desktop)/features → features}/ChatInput/useSend.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { filesSelectors, useFileStore } from '@/store/files';
 import { useSessionStore } from '@/store/session';
 
 export const useSendMessage = () => {
@@ -11,7 +12,10 @@ export const useSendMessage = () => {
   return useCallback(() => {
     const store = useSessionStore.getState();
     if (!!store.chatLoadingId) return;
-    sendMessage(store.inputMessage);
+    const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());
+
+    sendMessage(store.inputMessage, imageList);
     updateInputMessage('');
+    useFileStore.getState().clearImageList();
   }, []);
 };

package/src/app/chat/features/Conversation/ChatList/Messages/User.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileList from '@/app/chat/components/FileList';
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/chatMessage';
+
+import BubblesLoading from '../Loading';
+
+export const UserMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, editableContent, content, ...res }) => {
+  if (content === LOADING_FLAT) return <BubblesLoading />;
+
+  return (
+    <Flexbox gap={8} id={id}>
+      {editableContent}
+      {res.files && <FileList editable={false} items={res.files} />}
+    </Flexbox>
+  );
+});

package/src/app/chat/features/Conversation/ChatList/Messages/index.ts

@@ -10,11 +10,13 @@ import { pathString } from '@/utils/url';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
+import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
   assistant: AssistantMessage,
   default: DefaultMessage,
   function: FunctionMessage,
+  user: UserMessage,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {

package/src/app/market/(desktop)/features/AgentDetail.tsx

@@ -1,6 +1,6 @@
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -31,6 +31,18 @@ const SideBar = memo(() => {
     s.activateAgent,
   ]);
 
+  const handleExpandChange = useCallback(
+    (show: boolean) => {
+      if (!show) {
+        setTempId(useMarketStore.getState().currentIdentifier);
+        deactivateAgent();
+      } else if (tempId) {
+        activateAgent(tempId);
+      }
+    },
+    [deactivateAgent, activateAgent, tempId],
+  );
+
   return (
     <DraggablePanel
       className={styles.drawer}
@@ -40,14 +52,7 @@ const SideBar = memo(() => {
       expand={showAgentSidebar}
       minWidth={MARKET_SIDEBAR_WIDTH}
       mode={'fixed'}
-      onExpandChange={(show) => {
-        if (!show) {
-          setTempId(useMarketStore.getState().currentIdentifier);
-          deactivateAgent();
-        } else if (tempId) {
-          activateAgent(tempId);
-        }
-      }}
+      onExpandChange={handleExpandChange}
       placement={'right'}
     >
       <DraggablePanelContainer

package/src/app/market/(desktop)/index.tsx

@@ -6,18 +6,17 @@ import { FC, memo } from 'react';
 
 import AgentCard from '@/app/market/features/AgentCard';
 import ResponsiveIndex from '@/components/ResponsiveIndex';
-import { AgentsMarketIndexItem } from '@/types/market';
 
 import Index from '../index';
 import Layout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
-export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
+export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>
     <Layout>
       <Index />
-      <AgentCard CardRender={SpotlightCard} defaultAgents={defaultAgents} />
+      <AgentCard CardRender={SpotlightCard} />
     </Layout>
   </ResponsiveIndex>
 ));

package/src/app/market/(mobile)/index.tsx

@@ -3,15 +3,14 @@
 import { memo } from 'react';
 
 import AgentCard from '@/app/market/features/AgentCard';
-import { AgentsMarketIndexItem } from '@/types/market';
 
 import Index from '../index';
 import CardRender from './features/AgentCard';
 import Layout from './layout.mobile';
 
-export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
+export default memo(() => (
   <Layout>
     <Index />
-    <AgentCard CardRender={CardRender} defaultAgents={defaultAgents} mobile />
+    <AgentCard CardRender={CardRender} mobile />
   </Layout>
 ));

package/src/app/market/features/AgentCard/AgentCardItem.tsx

@@ -13,13 +13,16 @@ import AgentCardBanner from './AgentCardBanner';
 import { useStyles } from './style';
 
 const { Paragraph } = Typography;
+
 const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const onAgentCardClick = useMarketStore((s) => s.activateAgent);
-  const { avatar, title, description, tags, backgroundColor } = meta;
   const { styles, theme } = useStyles();
   const { isDarkMode } = useThemeMode();
+
+  const { avatar, title, description, tags, backgroundColor } = meta;
+
   return (
     <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
       <AgentCardBanner meta={meta} style={{ opacity: isDarkMode ? 0.9 : 0.4 }} />

package/src/app/market/features/AgentCard/index.tsx

@@ -1,71 +1,60 @@
 import { SpotlightCardProps } from '@lobehub/ui';
-import { FC, memo, useMemo } from 'react';
+import isEqual from 'fast-deep-equal';
+import { FC, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import LazyLoad from 'react-lazy-load';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
-import { AgentsMarketIndexItem } from '@/types/market';
 
 import TagList from '../TagList';
 import AgentCardItem from './AgentCardItem';
 import Loading from './Loading';
 import { useStyles } from './style';
 
-const gridRender: SpotlightCardProps['renderItem'] = (item) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { styles } = useStyles();
-  return (
-    <LazyLoad className={styles.lazy}>
-      <AgentCardItem {...item} />
-    </LazyLoad>
-  );
-};
-
 export interface AgentCardProps {
   CardRender: FC<SpotlightCardProps>;
-  defaultAgents?: AgentsMarketIndexItem[];
   mobile?: boolean;
 }
 
-const AgentCard = memo<AgentCardProps>(({ defaultAgents, CardRender, mobile }) => {
+const AgentCard = memo<AgentCardProps>(({ CardRender, mobile }) => {
   const { t } = useTranslation('market');
-
-  const { styles } = useStyles();
-
   const [useFetchAgentList, keywords] = useMarketStore((s) => [
     s.useFetchAgentList,
     s.searchKeywords,
   ]);
-  useFetchAgentList();
-
-  const clientAgentList = useMarketStore(agentMarketSelectors.getAgentList);
-  const agentList = clientAgentList.length === 0 && defaultAgents ? defaultAgents : clientAgentList;
+  const { isLoading } = useFetchAgentList();
+  const agentList = useMarketStore(agentMarketSelectors.getAgentList, isEqual);
+  const { styles } = useStyles();
 
-  const agentListData = useMemo(() => {
-    if (!keywords) return agentList;
-    return agentList.filter(({ meta }) => JSON.stringify(meta).toLowerCase().includes(keywords));
-  }, [agentList, keywords]);
+  const GridRender: SpotlightCardProps['renderItem'] = useCallback(
+    (props: any) => (
+      <LazyLoad className={styles.lazy}>
+        <AgentCardItem {...props} />
+      </LazyLoad>
+    ),
+    [styles.lazy],
+  );
 
-  if (agentList.length === 0) return <Loading />;
+  if (isLoading) return <Loading />;
 
   return (
     <Flexbox gap={mobile ? 16 : 24}>
       <TagList />
       {keywords ? (
         <CardRender
-          items={agentListData}
-          renderItem={gridRender}
+          items={agentList}
+          renderItem={GridRender}
           spotlight={mobile ? undefined : false}
         />
       ) : (
         <>
           <div className={styles.subTitle}>{t('title.recentSubmits')}</div>
-          <CardRender items={agentListData.slice(0, 3)} renderItem={gridRender} />
+          <CardRender items={agentList.slice(0, 3)} renderItem={GridRender} />
           <div className={styles.subTitle}>{t('title.allAgents')}</div>
           <CardRender
-            items={agentListData.slice(3)}
-            renderItem={gridRender}
+            items={agentList.slice(3)}
+            renderItem={GridRender}
             spotlight={mobile ? undefined : false}
           />
         </>

package/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -17,7 +17,6 @@ const { Link } = Typography;
 const Header = memo(() => {
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
-
   const createSession = useSessionStore((s) => s.createSession);
   const switchSideBar = useGlobalStore((s) => s.switchSideBar);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);

package/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx

@@ -22,11 +22,10 @@ const AgentModalInner = memo(() => {
     s.useFetchAgent,
     s.currentIdentifier,
   ]);
-  const { styles } = useStyles();
-
-  const { data, isLoading } = useFetchAgent(currentIdentifier);
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
+  const { data, isLoading } = useFetchAgent(currentIdentifier);
+  const { styles } = useStyles();
 
   if (isLoading || !data?.meta) return <Loading />;