@lobehub/chat 0.101.1 → 0.101.3

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.101.3](https://github.com/lobehub/lobe-chat/compare/v0.101.2...v0.101.3)
+
+<sup>Released on **2023-11-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve password ui to make it more clear.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve password ui to make it more clear, closes [#458](https://github.com/lobehub/lobe-chat/issues/458) ([e3d2a8e](https://github.com/lobehub/lobe-chat/commit/e3d2a8e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.101.2](https://github.com/lobehub/lobe-chat/compare/v0.101.1...v0.101.2)
+
+<sup>Released on **2023-11-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: upload image to vision model adapting to mobile device.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: upload image to vision model adapting to mobile device, closes [#457](https://github.com/lobehub/lobe-chat/issues/457) ([9c4f4ee](https://github.com/lobehub/lobe-chat/commit/9c4f4ee))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.101.1](https://github.com/lobehub/lobe-chat/compare/v0.101.0...v0.101.1)
 
 <sup>Released on **2023-11-14**</sup>

package/locales/en_US/chat.json

@@ -61,5 +61,10 @@
   },
   "translateTo": "Translate",
   "updateAgent": "Update Agent Information",
+  "upload": {
+    "actionTooltip": "Upload Image",
+    "dragDesc": "Drag and drop files here, supports uploading multiple images. Hold Shift to send images directly",
+    "dragTitle": "Upload Image"
+  },
   "warp": "Line Break"
 }

package/locales/en_US/error.json

@@ -37,7 +37,8 @@
     "confirm": "Confirm and Retry",
     "password": {
       "description": "The application encryption has been enabled by the administrator. Enter the application password to unlock the application. The password only needs to be filled in once.",
-      "title": "Enter Password to Unlock Application"
+      "title": "Enter Password to Unlock Application",
+      "placeholder": "Please enter password"
     },
     "closeMessage": "Close message"
   }

package/locales/ja_JP/chat.json

@@ -61,5 +61,10 @@
   },
   "translateTo": "翻訳",
   "updateAgent": "エージェント情報を更新",
+  "upload": {
+    "actionTooltip": "画像をアップロード",
+    "dragDesc": "ファイルをここにドラッグして複数の画像をアップロードできます。Shift キーを押しながら画像を直接送信できます",
+    "dragTitle": "画像をアップロード"
+  },
   "warp": "改行"
 }

package/locales/ja_JP/error.json

@@ -38,7 +38,8 @@
     "confirm": "確認して再試行",
     "password": {
       "description": "管理者によってアプリが暗号化されました。アプリをロック解除するには、アプリのパスワードを入力してください。パスワードは1回だけ入力すればよいです",
-      "title": "パスワードを入力してアプリをロック解除"
+      "title": "パスワードを入力してアプリをロック解除",
+      "placeholder": "パスワードを入力してください"
     }
   }
 }

package/locales/ko_KR/chat.json

@@ -61,5 +61,10 @@
   },
   "translateTo": "번역",
   "updateAgent": "도우미 정보 업데이트",
+  "upload": {
+    "actionTooltip": "이미지 업로드",
+    "dragDesc": "여기로 파일을 끌어다 놓으세요. 여러 이미지를 업로드할 수 있습니다. Shift를 누른 채로 이미지를 직접 보내세요.",
+    "dragTitle": "이미지 업로드"
+  },
   "warp": "줄바꿈"
 }

package/locales/ko_KR/error.json

@@ -38,7 +38,8 @@
     "confirm": "확인 및 다시 시도",
     "password": {
       "description": "관리자가 애플리케이션 암호화를 활성화했습니다. 애플리케이션을 잠금 해제하려면 애플리케이션 비밀번호를 입력하십시오. 비밀번호는 한 번만 입력하면 됩니다.",
-      "title": "암호 입력하여 애플리케이션 잠금 해제"
+      "title": "암호 입력하여 애플리케이션 잠금 해제",
+      "placeholder": "비밀번호를 입력하세요"
     }
   }
 }

package/locales/ru_RU/chat.json

@@ -61,5 +61,10 @@
   },
   "translateTo": "Перевести на",
   "updateAgent": "Обновить информацию о помощнике",
+  "upload": {
+    "actionTooltip": "Загрузить изображение",
+    "dragDesc": "Перетащите файлы сюда, поддерживается загрузка нескольких изображений. Удерживайте клавишу Shift для прямой отправки изображений",
+    "dragTitle": "Загрузить изображение"
+  },
   "warp": "Перенос строки"
 }

package/locales/ru_RU/error.json

@@ -37,7 +37,8 @@
     "confirm": "Подтвердить и повторить попытку",
     "password": {
       "description": "Шифрование приложения включено администратором. Введите пароль приложения, чтобы разблокировать приложение. Пароль необходимо ввести только один раз.",
-      "title": "Введите пароль для разблокировки приложения"
+      "title": "Введите пароль для разблокировки приложения",
+      "placeholder": "Введите пароль"
     },
     "closeMessage": "Закрыть сообщение"
   }

package/locales/zh_CN/chat.json

@@ -59,5 +59,10 @@
   },
   "translateTo": "翻译",
   "updateAgent": "更新助理信息",
+  "upload": {
+    "actionTooltip": "上传图片",
+    "dragDesc": "拖拽文件到这里，支持上传多个图片。按住 Shift 直接发送图片",
+    "dragTitle": "上传图片"
+  },
   "warp": "换行"
 }

package/locales/zh_CN/error.json

@@ -38,6 +38,7 @@
     "confirm": "确认并重试",
     "password": {
       "description": "管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次",
+      "placeholder": "请输入密码",
       "title": "输入密码解锁应用"
     }
   }

package/locales/zh_TW/chat.json

@@ -61,5 +61,10 @@
   },
   "translateTo": "翻譯",
   "updateAgent": "更新助理資訊",
+  "upload": {
+    "actionTooltip": "上傳圖片",
+    "dragDesc": "拖曳檔案到這裡，支援上傳多張圖片。按住 Shift 直接發送圖片",
+    "dragTitle": "上傳圖片"
+  },
   "warp": "換行"
 }

package/locales/zh_TW/error.json

@@ -37,7 +37,8 @@
     "confirm": "確認並重試",
     "password": {
       "description": "管理員已啟用應用程式加密，輸入應用程式密碼後即可解鎖應用程式。密碼只需填寫一次。",
-      "title": "輸入密碼解鎖應用程式"
+      "title": "輸入密碼解鎖應用程式",
+      "placeholder": "請輸入密碼"
     },
     "closeMessage": "關閉提示"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.101.1",
+  "version": "0.101.3",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

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

@@ -1,11 +1,7 @@
-import { TextArea } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
-import { useSessionStore } from '@/store/session';
-
-import { useSendMessage } from '../../../features/ChatInput/useSend';
+import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
 
 const useStyles = createStyles(({ css }) => {
   return {
@@ -22,46 +18,11 @@ const useStyles = createStyles(({ css }) => {
 });
 
 const InputArea = memo(() => {
-  const { t } = useTranslation('common');
-  const { cx, styles } = useStyles();
-
-  const isChineseInput = useRef(false);
-
-  const [loading, message, updateInputMessage] = useSessionStore((s) => [
-    !!s.chatLoadingId,
-    s.inputMessage,
-    s.updateInputMessage,
-  ]);
-
-  const handleSend = useSendMessage();
+  const { styles } = useStyles();
 
   return (
-    <div className={cx(styles.textareaContainer)}>
-      <TextArea
-        className={styles.textarea}
-        onBlur={(e) => {
-          updateInputMessage(e.target.value);
-        }}
-        onChange={(e) => {
-          updateInputMessage(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', { ns: 'chat' })}
-        resize={false}
-        type="pure"
-        value={message}
-      />
+    <div className={styles.textareaContainer}>
+      <InputAreaInner className={styles.textarea} />
     </div>
   );
 });

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

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileList from '@/app/chat/components/FileList';
+import { useFileStore } from '@/store/files';
+
+const Files = memo(() => {
+  const inputFilesList = useFileStore((s) => s.inputFilesList);
+
+  return (
+    <Flexbox padding={12}>
+      <FileList alwaysShowClose items={inputFilesList} />
+    </Flexbox>
+  );
+});
+
+export default Files;

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

@@ -1,79 +1,25 @@
-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 { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import useControlledState from 'use-merge-value';
 
 import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
+import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
 import SaveTopic from '@/app/chat/features/ChatInput/Topic';
 
+import SendButton from './SendButton';
 import { useStyles } from './style.mobile';
 
-export type ChatInputAreaMobile = {
-  loading?: boolean;
-  onChange?: (value: string) => void;
-  onSend?: (value: string) => void;
-  onStop?: () => void;
-  value?: string;
-};
+const ChatInputArea = memo(() => {
+  const { cx, styles } = useStyles();
 
-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>
+  return (
+    <Flexbox className={cx(styles.container)} gap={12}>
+      <ActionBar rightAreaStartRender={<SaveTopic />} />
+      <Flexbox className={styles.inner} gap={8} horizontal>
+        <InputAreaInner mobile />
+        <SendButton />
       </Flexbox>
-    );
-  },
-);
+    </Flexbox>
+  );
+});
 
 export default ChatInputArea;

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

@@ -0,0 +1,30 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { Loader2, SendHorizonal } from 'lucide-react';
+import { memo } from 'react';
+
+import { useSendMessage } from '@/app/chat/features/ChatInput/useSend';
+import { useSessionStore } from '@/store/session';
+
+const SendButton = memo(() => {
+  const [loading, onStop] = useSessionStore((s) => [!!s.chatLoadingId, s.stopGenerateMessage]);
+
+  const handleSend = useSendMessage();
+
+  return loading ? (
+    <Button
+      icon={loading && <Icon icon={Loader2} spin />}
+      onClick={onStop}
+      style={{ flex: 'none' }}
+    />
+  ) : (
+    <Button
+      icon={<Icon icon={SendHorizonal} />}
+      onClick={handleSend}
+      style={{ flex: 'none' }}
+      type={'primary'}
+    />
+  );
+});
+
+export default SendButton;

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

@@ -1,10 +1,10 @@
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
-import { useSessionStore } from '@/store/session';
 
+import Files from './Files';
 import ChatInputArea from './Mobile';
 
 const useStyles = createStyles(
@@ -23,25 +23,12 @@ 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 (
     <>
+      <Files />
       <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
       <div className={styles}>
-        <ChatInputArea
-          loading={isLoading}
-          onChange={setMessage}
-          onSend={sendMessage}
-          onStop={stopGenerateMessage}
-          value={message}
-        />
+        <ChatInputArea />
       </div>
     </>
   );

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

@@ -28,6 +28,9 @@ export const useStyles = createStyles(({ css, cx, token, isDarkMode }) => {
   `);
 
   return {
+    alwaysShowClose: css`
+      opacity: 1 !important;
+    `,
     closeIcon,
     container: css`
       cursor: pointer;

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

@@ -10,60 +10,64 @@ 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]);
+interface FileItemProps {
+  alwaysShowClose?: boolean;
+  editable: boolean;
+  id: string;
+  onClick: () => void;
+}
+const FileItem = memo<FileItemProps>(({ editable, id, onClick, alwaysShowClose }) => {
+  const { styles, cx } = useStyles();
+  const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
 
-    const { data, isLoading } = useFetchFile(id);
+  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();
+  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={cx(styles.closeIcon, alwaysShowClose && styles.alwaysShowClose)}
+          onClick={(e) => {
+            e.stopPropagation();
 
-              removeFile(id);
-            }}
-          >
-            <CloseCircleFilled />
-          </Center>
-        )}
-      </Flexbox>
-    );
-  },
-);
+            removeFile(id);
+          }}
+        >
+          <CloseCircleFilled />
+        </Center>
+      )}
+    </Flexbox>
+  );
+});
 
 export default FileItem;

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

@@ -14,11 +14,14 @@ import Lightbox from './Lightbox';
 // }));
 
 interface FileListProps {
+  alwaysShowClose?: boolean;
+
   editable?: boolean;
+
   items: string[];
 }
 
-const FileList = memo<FileListProps>(({ items, editable = true }) => {
+const FileList = memo<FileListProps>(({ items, editable = true, alwaysShowClose }) => {
   // const { styles } = useStyles();
 
   const [showLightbox, setShowLightbox] = useState(false);
@@ -38,6 +41,7 @@ const FileList = memo<FileListProps>(({ items, editable = true }) => {
       >
         {items.map((i, index) => (
           <FileItem
+            alwaysShowClose={alwaysShowClose}
             editable={editable}
             id={i}
             key={i}

package/src/app/chat/features/ChatInput/InputAreaInner/index.tsx

@@ -0,0 +1,57 @@
+import { Input, TextArea } from '@lobehub/ui';
+import { memo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+import { useSendMessage } from '../useSend';
+
+export interface InputAreaInnerProps {
+  className?: string;
+  mobile?: boolean;
+}
+
+const InputAreaInner = memo<InputAreaInnerProps>(({ className, mobile }) => {
+  const { t } = useTranslation('chat');
+  const isChineseInput = useRef(false);
+
+  const [loading, message, updateInputMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.inputMessage,
+    s.updateInputMessage,
+  ]);
+
+  const handleSend = useSendMessage();
+
+  const Render = mobile ? Input : TextArea;
+
+  return (
+    <Render
+      className={className}
+      onBlur={(e) => {
+        updateInputMessage(e.target.value);
+      }}
+      onChange={(e) => {
+        updateInputMessage(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')}
+      resize={false}
+      type={mobile ? 'block' : 'pure'}
+      value={message}
+    />
+  );
+});
+
+export default InputAreaInner;

package/src/app/chat/features/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -1,5 +1,5 @@
 import { Icon, RenderErrorMessage } from '@lobehub/ui';
-import { Button, Segmented } from 'antd';
+import { Button, Input, Segmented } from 'antd';
 import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,6 @@ import { Flexbox } from 'react-layout-kit';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
-import OtpInput from '../OTPInput';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 
@@ -47,11 +46,12 @@ const InvalidAccess: RenderErrorMessage = memo(({ id }) => {
               description={t('unlock.password.description')}
               title={t('unlock.password.title')}
             >
-              <OtpInput
+              <Input.Password
                 onChange={(e) => {
-                  setSettings({ password: e });
+                  setSettings({ password: e.target.value });
                 }}
-                validationPattern={/.*/}
+                placeholder={t('unlock.password.placeholder')}
+                type={'block'}
                 value={password}
               />
             </FormAction>

package/src/locales/default/error.ts

@@ -45,6 +45,7 @@ export default {
     confirm: '确认并重试',
     password: {
       description: '管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次',
+      placeholder: '请输入密码',
       title: '输入密码解锁应用',
     },
   },