@lobehub/chat 0.162.12 → 0.162.14

package/locales/vi-VN/common.json

@@ -39,6 +39,10 @@
   "historyRange": "Phạm vi lịch sử",
   "import": "Nhập cấu hình",
   "importModal": {
+    "error": {
+      "desc": "Xin lỗi vì quá trình nhập dữ liệu gặp sự cố. Vui lòng thử nhập lại hoặc <1>gửi vấn đề</1>, chúng tôi sẽ kiểm tra vấn đề ngay lập tức.",
+      "title": "Nhập dữ liệu thất bại"
+    },
     "finish": {
       "onlySettings": "Nhập cài đặt hệ thống thành công",
       "start": "Bắt đầu sử dụng",
@@ -46,6 +50,7 @@
       "title": "Hoàn tất nhập dữ liệu"
     },
     "loading": "Đang nhập dữ liệu, vui lòng chờ...",
+    "preparing": "Đang chuẩn bị mô-đun nhập dữ liệu...",
     "result": {
       "added": "Nhập thành công",
       "errors": "Lỗi nhập",
@@ -56,7 +61,12 @@
       "topics": "Chủ đề",
       "type": "Loại dữ liệu"
     },
-    "title": "Nhập dữ liệu"
+    "title": "Nhập dữ liệu",
+    "uploading": {
+      "desc": "Tập tin hiện tại quá lớn, đang cố gắng tải lên...",
+      "restTime": "Thời gian còn lại",
+      "speed": "Tốc độ tải lên"
+    }
   },
   "installPWA": "Cài đặt ứng dụng trình duyệt",
   "lang": {

package/locales/zh-CN/common.json

@@ -39,6 +39,10 @@
   "historyRange": "历史范围",
   "import": "导入配置",
   "importModal": {
+    "error": {
+      "desc": "非常抱歉，数据导入过程发生异常。请尝试重新导入，或 <1>提交问题</1>，我们将会第一时间帮你排查问题。",
+      "title": "数据导入失败"
+    },
     "finish": {
       "onlySettings": "系统设置导入成功",
       "start": "开始使用",
@@ -46,6 +50,7 @@
       "title": "数据导入完成"
     },
     "loading": "数据导入中，请耐心等待...",
+    "preparing": "数据导入模块准备中...",
     "result": {
       "added": "导入成功",
       "errors": "导入出错",
@@ -56,7 +61,12 @@
       "topics": "话题",
       "type": "数据类型"
     },
-    "title": "导入数据"
+    "title": "导入数据",
+    "uploading": {
+      "desc": "当前文件较大，正在努力上传中...",
+      "restTime": "剩余时间",
+      "speed": "上传速度"
+    }
   },
   "installPWA": "安装浏览器应用 (PWA)",
   "lang": {

package/locales/zh-TW/common.json

@@ -39,6 +39,10 @@
   "historyRange": "歷史範圍",
   "import": "匯入設定",
   "importModal": {
+    "error": {
+      "desc": "非常抱歉，資料匯入過程發生異常。請嘗試重新匯入，或 <1>提交問題</1>，我們將會第一時間幫你排查問題。",
+      "title": "資料匯入失敗"
+    },
     "finish": {
       "onlySettings": "系統設定匯入成功",
       "start": "開始使用",
@@ -46,6 +50,7 @@
       "title": "資料匯入完成"
     },
     "loading": "資料匯入中，請耐心等候...",
+    "preparing": "資料匯入模組準備中...",
     "result": {
       "added": "匯入成功",
       "errors": "匯入出錯",
@@ -56,7 +61,12 @@
       "topics": "話題",
       "type": "資料類型"
     },
-    "title": "匯入資料"
+    "title": "匯入資料",
+    "uploading": {
+      "desc": "當前檔案較大，正在努力上傳中...",
+      "restTime": "剩餘時間",
+      "speed": "上傳速度"
+    }
   },
   "installPWA": "安裝瀏覽器應用 (PWA)",
   "lang": {

package/netlify.toml

@@ -2,6 +2,8 @@
 command = "npm run build"
 publish = ".next"
 
+[build.environment]
+NODE_OPTIONS = "--max_old_space_size=8192"
 
 [template.environment]
 OPENAI_API_KEY = "set your OpenAI API Key"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.162.12",
+  "version": "0.162.14",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -13,7 +13,7 @@ import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
 import { filesSelectors, useFileStore } from '@/store/file';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors, preferenceSelectors } from '@/store/user/selectors';
@@ -61,10 +61,20 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
 
   const { theme, styles } = useStyles();
 
-  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
+  const [
+    isAIGenerating,
+    isHasMessageLoading,
+    isCreatingMessage,
+    isCreatingTopic,
+    stopGenerateMessage,
+  ] = useChatStore((s) => [
     chatSelectors.isAIGenerating(s),
+    chatSelectors.isHasMessageLoading(s),
+    chatSelectors.isCreatingMessage(s),
+    topicSelectors.isCreatingTopic(s),
     s.stopGenerateMessage,
   ]);
+
   const isImageUploading = useFileStore(filesSelectors.isImageUploading);
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
@@ -93,6 +103,9 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
 
   const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;
 
+  const buttonDisabled =
+    isImageUploading || isHasMessageLoading || isCreatingTopic || isCreatingMessage;
+
   return (
     <Flexbox
       align={'end'}
@@ -136,7 +149,8 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
           ) : (
             <Space.Compact>
               <Button
-                disabled={isImageUploading}
+                disabled={buttonDisabled}
+                loading={buttonDisabled}
                 onClick={() => {
                   sendMessage();
                   setExpand?.(false);
@@ -145,7 +159,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
               >
                 {t('input.send')}
               </Button>
-              <SendMore disabled={isImageUploading} />
+              <SendMore disabled={buttonDisabled} />
             </Space.Compact>
           )}
         </Flexbox>

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicItem.tsx

@@ -20,13 +20,16 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     cursor: pointer;
 
-    width: calc(100% - 16px);
     margin-block: 2px;
     margin-inline: 8px;
     padding: 8px;
 
     border-radius: ${token.borderRadius}px;
 
+    &.topic-item {
+      width: calc(100% - 16px);
+    }
+
     &:hover {
       background: ${token.colorFillSecondary};
     }
@@ -52,7 +55,7 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
   return (
     <Flexbox
       align={'center'}
-      className={cx(styles.container, active && styles.active)}
+      className={cx(styles.container, 'topic-item', active && styles.active)}
       distribution={'space-between'}
       horizontal
       onClick={() => {

package/src/features/Conversation/Error/OllamaBizError/InvalidOllamaModel/useDownloadMonitor.ts

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
+import { formatTime } from '@/utils/speed';
+
 export const formatSize = (bytes: number): string => {
   const kbSize = bytes / 1024;
   if (kbSize < 1024) {
@@ -17,16 +19,6 @@ const formatSpeed = (speed: number): string => {
   return `${formatSize(speed)}/s`;
 };
 
-const formatTime = (timeInSeconds: number): string => {
-  if (timeInSeconds < 60) {
-    return `${timeInSeconds.toFixed(1)} s`;
-  } else if (timeInSeconds < 3600) {
-    return `${(timeInSeconds / 60).toFixed(1)} min`;
-  } else {
-    return `${(timeInSeconds / 3600).toFixed(2)} h`;
-  }
-};
-
 export const useDownloadMonitor = (totalSize: number, completedSize: number) => {
   const [downloadSpeed, setDownloadSpeed] = useState<string>('0 KB/s');
   const [remainingTime, setRemainingTime] = useState<string>('-');

package/src/features/DataImporter/Error.tsx

@@ -0,0 +1,65 @@
+import { Alert, Highlighter, Icon } from '@lobehub/ui';
+import { Button, Result } from 'antd';
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+import React, { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import Balancer from 'react-wrap-balancer';
+
+import { GITHUB_ISSUES } from '@/const/url';
+import { githubService } from '@/services/github';
+import { ErrorShape } from '@/types/importer';
+
+interface ErrorProps {
+  error?: ErrorShape;
+  onClick: () => void;
+}
+
+const Error = memo<ErrorProps>(({ error, onClick }) => {
+  const { t } = useTranslation('common');
+  return (
+    <Result
+      extra={
+        <Flexbox gap={12} style={{ textAlign: 'start' }}>
+          <Alert
+            extra={
+              <Highlighter copyButtonSize={'small'} language={'json'}>
+                {JSON.stringify(error, null, 2)}
+              </Highlighter>
+            }
+            message={error?.message}
+            style={{ flex: 1 }}
+            type={'error'}
+          />
+          <Button onClick={onClick}>{t('close')}</Button>
+        </Flexbox>
+      }
+      icon={<Icon icon={ShieldAlert} />}
+      status={'error'}
+      style={{ paddingBlock: 24, width: 450 }}
+      subTitle={
+        <Balancer>
+          <Trans i18nKey="importModal.error.desc" ns={'common'}>
+            非常抱歉，数据库升级过程发生异常。请重试升级，或
+            <Link
+              aria-label={'issue'}
+              href={GITHUB_ISSUES}
+              onClick={(e) => {
+                e.preventDefault();
+                githubService.submitImportError(error!);
+              }}
+              target="_blank"
+            >
+              提交问题
+            </Link>
+            我们将会第一时间帮你排查问题。
+          </Trans>
+        </Balancer>
+      }
+      title={t('importModal.error.title')}
+    />
+  );
+});
+
+export default Error;

package/src/features/DataImporter/FileUploading.tsx

@@ -0,0 +1,50 @@
+import { Progress } from 'antd';
+import { useTheme } from 'antd-style';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { formatSpeed, formatTime } from '@/utils/speed';
+
+import DataLoading from './Loading';
+
+interface FileUploadingProps {
+  progress?: number;
+  restTime?: number;
+  speed?: number;
+}
+
+export const FileUploading = memo<FileUploadingProps>(({ progress = 0, speed = 0, restTime }) => {
+  const { t } = useTranslation('common');
+
+  const theme = useTheme();
+
+  return (
+    <>
+      <DataLoading />
+      <Flexbox align={'center'} gap={8} width={'100%'}>
+        {t('importModal.uploading.desc')}
+        <Flexbox flex={1} gap={8} width={'100%'}>
+          <Progress
+            percent={progress}
+            showInfo
+            strokeColor={theme.colorSuccess}
+            trailColor={theme.colorSuccessBg}
+          />
+          <Flexbox
+            distribution={'space-between'}
+            horizontal
+            style={{ color: theme.colorTextDescription, fontSize: 12 }}
+          >
+            <span>
+              {t('importModal.uploading.restTime')}: {restTime ? formatTime(restTime) : '-'}
+            </span>
+            <span>
+              {t('importModal.uploading.speed')}: {formatSpeed(speed)}
+            </span>
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </>
+  );
+});

package/src/features/DataImporter/Loading.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => {
+  const size = 28;
+
+  return {
+    loader: css`
+      transform: translateX(-${size * 2}px);
+
+      aspect-ratio: 1;
+      width: 6px;
+
+      color: ${token.colorPrimary};
+
+      border-radius: 50%;
+      box-shadow:
+        ${size}px -${size}px 0 0,
+        ${size * 2}px -${size}px 0 0,
+        ${size * 3}px -${size}px 0 0,
+        ${size}px 0 0 5px,
+        ${size * 2}px 0 0 5px,
+        ${size * 3}px 0 0 5px,
+        ${size}px ${size}px 0 0,
+        ${size * 2}px ${size}px 0 0,
+        ${size * 3}px ${size}px 0 0;
+
+      animation: loading 2s infinite linear;
+
+      @keyframes loading {
+        12.5% {
+          box-shadow:
+            ${size}px -${size}px 0 0,
+            ${size * 2}px -${size}px 0 0,
+            ${size * 3}px -${size}px 0 5px,
+            ${size}px 0 0 5px,
+            ${size * 2}px 0 0 0,
+            ${size * 3}px 0 0 5px,
+            ${size}px ${size}px 0 0,
+            ${size * 2}px ${size}px 0 0,
+            ${size * 3}px ${size}px 0 0;
+        }
+
+        25% {
+          box-shadow:
+            ${size}px -${size}px 0 5px,
+            ${size * 2}px -${size}px 0 0,
+            ${size * 3}px -${size}px 0 5px,
+            ${size}px 0 0 0,
+            ${size * 2}px 0 0 0,
+            ${size * 3}px 0 0 0,
+            ${size}px ${size}px 0 0,
+            ${size * 2}px ${size}px 0 5px,
+            ${size * 3}px ${size}px 0 0;
+        }
+
+        50% {
+          box-shadow:
+            ${size}px -${size}px 0 5px,
+            ${size * 2}px -${size}px 0 5px,
+            ${size * 3}px -${size}px 0 0,
+            ${size}px 0 0 0,
+            ${size * 2}px 0 0 0,
+            ${size * 3}px 0 0 0,
+            ${size}px ${size}px 0 0,
+            ${size * 2}px ${size}px 0 0,
+            ${size * 3}px ${size}px 0 5px;
+        }
+
+        62.5% {
+          box-shadow:
+            ${size}px -${size}px 0 0,
+            ${size * 2}px -${size}px 0 0,
+            ${size * 3}px -${size}px 0 0,
+            ${size}px 0 0 5px,
+            ${size * 2}px 0 0 0,
+            ${size * 3}px 0 0 0,
+            ${size}px ${size}px 0 0,
+            ${size * 2}px ${size}px 0 5px,
+            ${size * 3}px ${size}px 0 5px;
+        }
+
+        75% {
+          box-shadow:
+            ${size}px -${size}px 0 0,
+            ${size * 2}px -${size}px 0 5px,
+            ${size * 3}px -${size}px 0 0,
+            ${size}px 0 0 0,
+            ${size * 2}px 0 0 0,
+            ${size * 3}px 0 0 5px,
+            ${size}px ${size}px 0 0,
+            ${size * 2}px ${size}px 0 0,
+            ${size * 3}px ${size}px 0 5px;
+        }
+
+        87.5% {
+          box-shadow:
+            ${size}px -${size}px 0 0,
+            ${size * 2}px -${size}px 0 5px,
+            ${size * 3}px -${size}px 0 0,
+            ${size}px 0 0 0,
+            ${size * 2}px 0 0 5px,
+            ${size * 3}px 0 0 0,
+            ${size}px ${size}px 0 5px,
+            ${size * 2}px ${size}px 0 0,
+            ${size * 3}px ${size}px 0 0;
+        }
+      }
+    `,
+  };
+});
+
+const DataLoading = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <Center style={{ height: 80 }}>
+      <div className={styles.loader} />
+    </Center>
+  );
+});
+
+export default DataLoading;

package/src/features/DataImporter/SuccessResult.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Button, Result, Table } from 'antd';
+import { CheckCircle } from 'lucide-react';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+interface SuccessResultProps {
+  dataSource?: {
+    added: number;
+    error: number;
+    skips: number;
+    title: string;
+  }[];
+  duration: number;
+  onClickFinish?: () => void;
+}
+
+const SuccessResult = memo<SuccessResultProps>(({ duration, dataSource, onClickFinish }) => {
+  const { t } = useTranslation('common');
+
+  return (
+    <Result
+      extra={
+        <Button onClick={onClickFinish} size={'large'} type={'primary'}>
+          {t('importModal.finish.start')}
+        </Button>
+      }
+      icon={<Icon icon={CheckCircle} />}
+      status={'success'}
+      style={{ paddingBlock: 24 }}
+      subTitle={
+        // if there is no importData, means it's only import the settings
+        !dataSource ? (
+          t('importModal.finish.onlySettings')
+        ) : (
+          <Flexbox gap={16} width={400}>
+            {t('importModal.finish.subTitle', { duration: (duration / 1000).toFixed(2) })}
+            <Table
+              bordered
+              columns={[
+                { dataIndex: 'title', title: t('importModal.result.type') },
+                { dataIndex: 'added', title: t('importModal.result.added') },
+                { dataIndex: 'skips', title: t('importModal.result.skips') },
+                { dataIndex: 'error', title: t('importModal.result.errors') },
+              ]}
+              dataSource={dataSource}
+              pagination={false}
+              size={'small'}
+            />
+          </Flexbox>
+        )
+      }
+      title={t('importModal.finish.title')}
+    />
+  );
+});
+
+export default SuccessResult;