@lobehub/chat 0.100.5 → 0.101.0

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

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { getClientConfig } from '../client';
+
+// 测试前重置 process.env
+vi.stubGlobal('process', {
+  ...process, // 保持原有的 process 对象
+  env: { ...process.env }, // 克隆环境变量对象，以便修改
+});
+
+describe('getClientConfig', () => {
+  it('should return default URLs when no environment variables are set', () => {
+    const config = getClientConfig();
+    expect(config.AGENTS_INDEX_URL).toBe('https://chat-agents.lobehub.com');
+    expect(config.PLUGINS_INDEX_URL).toBe('https://chat-plugins.lobehub.com');
+  });
+
+  it('should return custom URLs when environment variables are set', () => {
+    process.env.AGENTS_INDEX_URL = 'https://custom-agents-url.com';
+    process.env.PLUGINS_INDEX_URL = 'https://custom-plugins-url.com';
+    const config = getClientConfig();
+    expect(config.AGENTS_INDEX_URL).toBe('https://custom-agents-url.com');
+    expect(config.PLUGINS_INDEX_URL).toBe('https://custom-plugins-url.com');
+  });
+
+  it('should return default URLs when environment variables are empty string', () => {
+    process.env.AGENTS_INDEX_URL = '';
+    process.env.PLUGINS_INDEX_URL = '';
+
+    const config = getClientConfig();
+    expect(config.AGENTS_INDEX_URL).toBe('https://chat-agents.lobehub.com');
+    expect(config.PLUGINS_INDEX_URL).toBe('https://chat-plugins.lobehub.com');
+  });
+
+  it('should correctly reflect boolean values for analytics flags', () => {
+    process.env.NEXT_PUBLIC_ANALYTICS_VERCEL = '1';
+    process.env.NEXT_PUBLIC_VERCEL_DEBUG = '1';
+    process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE = '1';
+    process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG = '1';
+    process.env.NEXT_PUBLIC_POSTHOG_DEBUG = '1';
+    process.env.NEXT_PUBLIC_I18N_DEBUG = '1';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER = '1';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '1';
+
+    const config = getClientConfig();
+    expect(config.ANALYTICS_VERCEL).toBe(true);
+    expect(config.VERCEL_DEBUG).toBe(true);
+    expect(config.ANALYTICS_PLAUSIBLE).toBe(true);
+    expect(config.ANALYTICS_POSTHOG).toBe(true);
+    expect(config.POSTHOG_DEBUG).toBe(true);
+    expect(config.I18N_DEBUG).toBe(true);
+    expect(config.I18N_DEBUG_BROWSER).toBe(true);
+    expect(config.I18N_DEBUG_SERVER).toBe(true);
+  });
+
+  it('should correctly handle falsy values for analytics flags', () => {
+    process.env.NEXT_PUBLIC_ANALYTICS_VERCEL = '0';
+    process.env.NEXT_PUBLIC_VERCEL_DEBUG = '0';
+    process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE = '0';
+    process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG = '0';
+    process.env.NEXT_PUBLIC_POSTHOG_DEBUG = '0';
+    process.env.NEXT_PUBLIC_I18N_DEBUG = '0';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER = '0';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '0';
+
+    const config = getClientConfig();
+    expect(config.ANALYTICS_VERCEL).toBe(false);
+    expect(config.VERCEL_DEBUG).toBe(false);
+    expect(config.ANALYTICS_PLAUSIBLE).toBe(false);
+    expect(config.ANALYTICS_POSTHOG).toBe(false);
+    expect(config.POSTHOG_DEBUG).toBe(false);
+    expect(config.I18N_DEBUG).toBe(false);
+    expect(config.I18N_DEBUG_BROWSER).toBe(false);
+    expect(config.I18N_DEBUG_SERVER).toBe(false);
+  });
+});

package/src/config/__tests__/server.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getServerConfig } from '../server';
+
+// Stub the global process object to safely mock environment variables
+vi.stubGlobal('process', {
+  ...process, // Preserve the original process object
+  env: { ...process.env }, // Clone the environment variables object for modification
+});
+
+describe('getServerConfig', () => {
+  beforeEach(() => {
+    // Reset environment variables before each test case
+    vi.restoreAllMocks();
+  });
+
+  it('throws an error if process is undefined', () => {
+    const originalProcess = global.process;
+    // To simulate the error condition, temporarily set the global process to `undefined`,
+    // @ts-ignore
+    global.process = undefined;
+
+    expect(() => getServerConfig()).toThrow(
+      '[Server Config] you are importing a nodejs-only module outside of nodejs',
+    );
+
+    global.process = originalProcess; // Restore the original process object
+  });
+
+  it('correctly reflects boolean value for USE_AZURE_OPENAI', () => {
+    process.env.USE_AZURE_OPENAI = '1';
+    const config = getServerConfig();
+    expect(config.USE_AZURE_OPENAI).toBe(true);
+  });
+
+  it('correctly handles falsy values for USE_AZURE_OPENAI', () => {
+    process.env.USE_AZURE_OPENAI = '0';
+    const config = getServerConfig();
+    expect(config.USE_AZURE_OPENAI).toBe(false);
+  });
+
+  it('returns default IMGUR_CLIENT_ID when no environment variable is set', () => {
+    const config = getServerConfig();
+    expect(config.IMGUR_CLIENT_ID).toBe('e415f320d6e24f9');
+  });
+
+  it('returns custom IMGUR_CLIENT_ID when environment variable is set', () => {
+    process.env.IMGUR_CLIENT_ID = 'custom-client-id';
+    const config = getServerConfig();
+    expect(config.IMGUR_CLIENT_ID).toBe('custom-client-id');
+  });
+});

package/src/config/server.ts

@@ -12,10 +12,16 @@ declare global {
       AZURE_API_KEY?: string;
       AZURE_API_VERSION?: string;
       USE_AZURE_OPENAI?: string;
+
+      IMGUR_CLIENT_ID?: string;
     }
   }
 }
 
+// we apply a free imgur app to get a client id
+// refs: https://apidocs.imgur.com/
+const DEFAULT_IMAGUR_CLIENT_ID = 'e415f320d6e24f9';
+
 export const getServerConfig = () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server Config] you are importing a nodejs-only module outside of nodejs');
@@ -30,5 +36,7 @@ export const getServerConfig = () => {
     AZURE_API_KEY: process.env.AZURE_API_KEY,
     AZURE_API_VERSION: process.env.AZURE_API_VERSION,
     USE_AZURE_OPENAI: process.env.USE_AZURE_OPENAI === '1',
+
+    IMGUR_CLIENT_ID: process.env.IMGUR_CLIENT_ID || DEFAULT_IMAGUR_CLIENT_ID,
   };
 };

package/src/const/layoutTokens.ts

@@ -3,7 +3,7 @@ import type { FormProps } from '@lobehub/ui';
 export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
-export const CHAT_TEXTAREA_HEIGHT = 200;
+export const CHAT_TEXTAREA_HEIGHT = 230;
 export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;

package/src/const/llm.ts

@@ -12,3 +12,6 @@ export const LanguageModelWhiteList = [
 ];
 
 export const DEFAULT_OPENAI_MODEL_LIST: string[] = Object.values(LanguageModel);
+
+// vision model white list, these models will change the content from string to array
+export const VISION_MODEL_WHITE_LIST = ['gpt-4-vision-preview'];

package/src/const/settings.ts

@@ -18,6 +18,8 @@ export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   themeMode: 'auto',
 };
 
+export const VISION_MODEL_DEFAULT_MAX_TOKENS = 1000;
+
 export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
   displayMode: 'chat',
   historyCount: 1,