@lobehub/chat 1.14.6 → 1.14.8

package/src/app/(main)/chat/(workspace)/@portal/FilePreview/Header.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
+import { ArrowLeft } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+import { useFileStore } from '@/store/file';
+import { oneLineEllipsis } from '@/styles';
+
+const Header = () => {
+  const [closeFilePreview, previewFileId] = useChatStore((s) => [
+    s.closeFilePreview,
+    chatPortalSelectors.previewFileId(s),
+  ]);
+
+  const useFetchFileItem = useFileStore((s) => s.useFetchFileItem);
+
+  const { data, isLoading } = useFetchFileItem(previewFileId);
+
+  return (
+    <Flexbox align={'center'} gap={4} horizontal>
+      <ActionIcon icon={ArrowLeft} onClick={() => closeFilePreview()} />
+
+      {isLoading ? (
+        <Skeleton.Button active style={{ height: 28 }} />
+      ) : (
+        <Typography.Text className={oneLineEllipsis} style={{ fontSize: 16 }} type={'secondary'}>
+          {data?.name}
+        </Typography.Text>
+      )}
+    </Flexbox>
+  );
+};
+
+export default Header;

package/src/app/(main)/chat/(workspace)/@portal/FilePreview/index.ts

@@ -0,0 +1,9 @@
+import Body from './Body';
+import Header from './Header';
+import { useEnable } from './useEnable';
+
+export const FilePreview = {
+  Body,
+  Header,
+  useEnable,
+};

package/src/app/(main)/chat/(workspace)/@portal/FilePreview/useEnable.ts

@@ -0,0 +1,6 @@
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+export const useEnable = () => {
+  return useChatStore(chatPortalSelectors.showFilePreview);
+};

package/src/app/(main)/chat/(workspace)/@portal/Home/{Files → Body/Files}/FileList/Item.tsx

@@ -4,6 +4,7 @@ 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';
 
@@ -26,8 +27,9 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const ArtifactItem = memo<ChatFileItem>(({ name, fileType, size }) => {
+const FileItem = memo<ChatFileItem>(({ name, fileType, size, id }) => {
   const { styles } = useStyles();
+  const openFilePreview = useChatStore((s) => s.openFilePreview);
 
   return (
     <Flexbox
@@ -35,11 +37,9 @@ const ArtifactItem = memo<ChatFileItem>(({ name, fileType, size }) => {
       className={styles.container}
       gap={8}
       horizontal
-      // onClick={() => {
-      //   if (!isToolHasUI || !identifier) return;
-      //
-      //   openToolUI(messageId, identifier);
-      // }}
+      onClick={() => {
+        openFilePreview({ fileId: id });
+      }}
     >
       <FileIcon fileName={name} fileType={fileType} />
       <Flexbox>
@@ -50,4 +50,4 @@ const ArtifactItem = memo<ChatFileItem>(({ name, fileType, size }) => {
   );
 });
 
-export default ArtifactItem;
+export default FileItem;

package/src/app/(main)/chat/(workspace)/@portal/Home/{Files → Body/Files}/FileList/index.tsx

@@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import Balancer from 'react-wrap-balancer';
 
+import SkeletonLoading from '@/components/SkeletonLoading';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 
-import SkeletonLoading from '../../../components/SkeletonLoading';
 import FileItem from './Item';
 
 const FileList = () => {
@@ -35,7 +35,7 @@ const FileList = () => {
         size={48}
       />
       <Balancer>
-        <Typography.Text type={'secondary'}>{t('emptyArtifactList')}</Typography.Text>
+        <Typography.Text type={'secondary'}>{t('emptyKnowledgeList')}</Typography.Text>
       </Balancer>
     </Center>
   ) : (

package/src/app/(main)/chat/(workspace)/@portal/Home/Header.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Typography } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Header = memo(() => {
+  const { t } = useTranslation('portal');
+
+  return (
+    <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
+      {t('title')}
+    </Typography.Text>
+  );
+});
+
+export default Header;

package/src/app/(main)/chat/(workspace)/@portal/Home/index.ts

@@ -0,0 +1,2 @@
+export { default as HomeBody } from './Body';
+export { default as HomeHeader } from './Header';

package/src/app/(main)/chat/(workspace)/@portal/_layout/Desktop.tsx

@@ -7,7 +7,7 @@ const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Header />
-      <Flexbox height={'100%'} style={{ overflow: 'auto', position: 'relative' }} width={'100%'}>
+      <Flexbox height={'100%'} style={{ position: 'relative' }} width={'100%'}>
         {children}
       </Flexbox>
     </>

package/src/app/(main)/chat/(workspace)/@portal/default.tsx

@@ -6,7 +6,7 @@ import { isMobileDevice } from '@/utils/responsive';
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 
-const PortalView = lazy(() => import('./router'));
+const PortalBody = lazy(() => import('./router'));
 
 const Inspector = () => {
   const mobile = isMobileDevice();
@@ -16,7 +16,7 @@ const Inspector = () => {
   return (
     <Suspense fallback={<Loading />}>
       <Layout>
-        <PortalView />
+        <PortalBody />
       </Layout>
     </Suspense>
   );

package/src/app/(main)/chat/(workspace)/@portal/features/Header.tsx

@@ -1,51 +1,22 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { Typography } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { ArrowLeft, XIcon } from 'lucide-react';
+import { XIcon } from 'lucide-react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import SidebarHeader from '@/components/SidebarHeader';
-import PluginAvatar from '@/features/PluginAvatar';
 import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/selectors';
-import { pluginHelpers, useToolStore } from '@/store/tool';
-import { toolSelectors } from '@/store/tool/selectors';
 
-const Header = memo(() => {
-  const [showToolUI, toggleInspector, closeToolUI, toolUIIdentifier = ''] = useChatStore((s) => [
-    chatPortalSelectors.showArtifactUI(s),
-    s.togglePortal,
-    s.closeToolUI,
-    chatPortalSelectors.toolUIIdentifier(s),
-  ]);
+import { PortalHeader } from '../router';
 
-  const { t } = useTranslation(['plugin', 'portal']);
-  const pluginMeta = useToolStore(toolSelectors.getMetaById(toolUIIdentifier), isEqual);
-  const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
+const Header = memo(() => {
+  const [toggleInspector] = useChatStore((s) => [s.togglePortal]);
 
   return (
     <SidebarHeader
       actions={<ActionIcon icon={XIcon} onClick={() => toggleInspector(false)} />}
-      style={{ paddingBlock: 8 }}
-      title={
-        showToolUI ? (
-          <Flexbox align={'center'} gap={4} horizontal>
-            <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />
-            <PluginAvatar identifier={toolUIIdentifier} size={28} />
-            <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
-              {pluginTitle}
-            </Typography.Text>
-          </Flexbox>
-        ) : (
-          <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
-            {t('portal:title')}
-          </Typography.Text>
-        )
-      }
+      style={{ paddingBlock: 8, paddingInline: 8 }}
+      title={<PortalHeader />}
     />
   );
 });

package/src/app/(main)/chat/(workspace)/@portal/router.tsx

@@ -2,22 +2,46 @@
 
 import { memo } from 'react';
 
-import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/selectors';
+import { Artifacts } from './Artifacts';
+import { FilePreview } from './FilePreview';
+import { HomeBody, HomeHeader } from './Home';
 
-import Artifacts from './Artifacts';
-import FilePreview from './FilePreview';
-import Home from './Home';
+const items = [Artifacts, FilePreview];
 
-const PortalView = memo(() => {
-  const showArtifactUI = useChatStore(chatPortalSelectors.showArtifactUI);
-  const showFilePreview = useChatStore(chatPortalSelectors.showFilePreview);
+export const PortalHeader = memo(() => {
+  const enabledList: boolean[] = [];
 
-  if (showArtifactUI) return <Artifacts />;
+  for (const item of items) {
+    const enabled = item.useEnable();
+    enabledList.push(enabled);
+  }
 
-  if (showFilePreview) return <FilePreview />;
+  for (const [i, element] of enabledList.entries()) {
+    const Header = items[i].Header;
+    if (element) {
+      return <Header />;
+    }
+  }
 
-  return <Home />;
+  return <HomeHeader />;
 });
 
-export default PortalView;
+const PortalBody = memo(() => {
+  const enabledList: boolean[] = [];
+
+  for (const item of items) {
+    const enabled = item.useEnable();
+    enabledList.push(enabled);
+  }
+
+  for (const [i, element] of enabledList.entries()) {
+    const Body = items[i].Body;
+    if (element) {
+      return <Body />;
+    }
+  }
+
+  return <HomeBody />;
+});
+
+export default PortalBody;

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/KnowledgeTag.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { Icon, Tag } from '@lobehub/ui';
-import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
+import { Dropdown, MenuProps } from 'antd';
 import { LibraryBig } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import KnowledgeIcon from '@/components/KnowledgeIcon';
+import { oneLineEllipsis } from '@/styles';
 import { KnowledgeItem } from '@/types/knowledgeBase';
 
 export interface PluginTagProps {
@@ -30,7 +30,9 @@ const PluginTag = memo<PluginTagProps>(({ data }) => {
       <div>
         <Tag>
           {<Icon icon={LibraryBig} />}
-          {data[0].name}
+          <div className={oneLineEllipsis} style={{ maxWidth: 140 }}>
+            {data[0].name}
+          </div>
           {count > 1 && <div>({data.length - 1}+)</div>}
         </Tag>
       </div>

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -102,6 +102,7 @@ export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id' | 'cha
     showModelFetcher?: boolean;
   };
   showAceGcm?: boolean;
+  title?: ReactNode;
 }
 
 const ProviderConfig = memo<ProviderConfigProps>(
@@ -114,6 +115,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
     canDeactivate = true,
     checkerItem,
     modelList,
+    title,
     defaultShowBrowserRequest,
     disableBrowserRequest,
     className,
@@ -264,7 +266,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
           ) : undefined}
         </Flexbox>
       ),
-      title: (
+      title: title ?? (
         <Flexbox
           align={'center'}
           className={styles.safariIconWidthFix}

package/src/app/(main)/settings/tts/features/const.tsx

@@ -16,7 +16,7 @@ export const opeanaiTTSOptions: SelectProps['options'] = [
 
 export const opeanaiSTTOptions: SelectProps['options'] = [
   {
-    label: <LabelRenderer Icon={OpenAI.Avatar} label={'stt-1'} />,
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'whisper-1'} />,
     value: 'whisper-1',
   },
 ];

package/src/components/FileParsingStatus/EmbeddingStatus.tsx

@@ -0,0 +1,117 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { BoltIcon, RotateCwIcon } from 'lucide-react';
+import { darken, lighten } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { AsyncTaskStatus, FileParsingTask } from '@/types/asyncTask';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  errorReason: css`
+    padding: 4px;
+
+    font-family: monospace;
+    font-size: 12px;
+
+    background: ${isDarkMode ? darken(0.1, token.colorText) : lighten(0.1, token.colorText)};
+    border-radius: 4px;
+  `,
+}));
+
+interface EmbeddingStatusProps extends FileParsingTask {
+  className?: string;
+  onClick?: (status: AsyncTaskStatus) => void;
+  onErrorClick?: (task: 'chunking' | 'embedding') => void;
+}
+
+const EmbeddingStatus = memo<EmbeddingStatusProps>(
+  ({ chunkCount, embeddingStatus, embeddingError, onClick, onErrorClick, className }) => {
+    const { t } = useTranslation(['components', 'common']);
+    const { styles, cx } = useStyles();
+
+    switch (embeddingStatus) {
+      case AsyncTaskStatus.Processing: {
+        return (
+          <Flexbox horizontal>
+            <Tooltip
+              overlayStyle={{ pointerEvents: 'none' }}
+              title={t('FileParsingStatus.chunks.embeddingStatus.processing')}
+            >
+              <Tag
+                bordered={false}
+                className={cx('chunk-tag', className)}
+                color={'processing'}
+                icon={<Icon icon={BoltIcon} spin />}
+                style={{ cursor: 'pointer' }}
+              >
+                {chunkCount}
+              </Tag>
+            </Tooltip>
+          </Flexbox>
+        );
+      }
+
+      case AsyncTaskStatus.Error: {
+        return (
+          <Tooltip
+            overlayStyle={{ maxWidth: 340, pointerEvents: 'none' }}
+            title={
+              <Flexbox gap={4}>
+                {t('FileParsingStatus.chunks.embeddingStatus.errorResult')}
+                {embeddingError && (
+                  <Flexbox className={styles.errorReason}>
+                    [{embeddingError.name}]:{' '}
+                    {embeddingError.body && typeof embeddingError.body !== 'string'
+                      ? embeddingError.body.detail
+                      : embeddingError.body}
+                  </Flexbox>
+                )}
+              </Flexbox>
+            }
+          >
+            <Tag bordered={false} className={className} color={'error'}>
+              {t('FileParsingStatus.chunks.embeddingStatus.error')}{' '}
+              <Icon
+                icon={RotateCwIcon}
+                onClick={() => {
+                  onErrorClick?.('embedding');
+                }}
+                style={{ cursor: 'pointer' }}
+                title={t('retry', { ns: 'common' })}
+              />
+            </Tag>
+          </Tooltip>
+        );
+      }
+
+      case AsyncTaskStatus.Success: {
+        return (
+          <Flexbox horizontal>
+            <Tooltip
+              overlayStyle={{ pointerEvents: 'none' }}
+              title={t('FileParsingStatus.chunks.embeddingStatus.success')}
+            >
+              <Tag
+                bordered={false}
+                className={cx('chunk-tag', className)}
+                color={'purple'}
+                icon={<Icon icon={BoltIcon} />}
+                onClick={() => {
+                  onClick?.(AsyncTaskStatus.Success);
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                {chunkCount}
+              </Tag>
+            </Tooltip>
+          </Flexbox>
+        );
+      }
+    }
+  },
+);
+
+export default EmbeddingStatus;

package/src/components/FileParsingStatus/index.tsx

@@ -9,6 +9,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { AsyncTaskStatus, FileParsingTask } from '@/types/asyncTask';
 
+import EmbeddingStatus from './EmbeddingStatus';
+
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   errorReason: css`
     padding: 4px;
@@ -72,7 +74,6 @@ const FileParsingStatus = memo<FileParsingStatusProps>(
         return (
           <Tooltip
             overlayStyle={{ maxWidth: 340, pointerEvents: 'none' }}
-            // style={{}}
             title={
               <Flexbox gap={4}>
                 {t('FileParsingStatus.chunks.status.errorResult')}
@@ -103,124 +104,65 @@ const FileParsingStatus = memo<FileParsingStatusProps>(
       }
 
       case AsyncTaskStatus.Success: {
-        const isEmbeddingProcessing = embeddingStatus === AsyncTaskStatus.Processing;
-
-        switch (embeddingStatus) {
-          case AsyncTaskStatus.Processing: {
-            return (
-              <Flexbox horizontal>
-                <Tooltip
-                  overlayStyle={{ pointerEvents: 'none' }}
-                  title={t('FileParsingStatus.chunks.embeddingStatus.processing')}
-                >
-                  <Tag
-                    bordered={false}
-                    className={cx('chunk-tag', className)}
-                    color={'processing'}
-                    icon={
-                      preparingEmbedding ? (
-                        <Icon icon={Loader2Icon} spin />
-                      ) : (
-                        <Icon icon={BoltIcon} spin={isEmbeddingProcessing} />
-                      )
-                    }
-                    style={{ cursor: 'pointer' }}
-                  >
-                    {chunkCount}
-                  </Tag>
-                </Tooltip>
-              </Flexbox>
-            );
-          }
+        console.log(embeddingStatus);
 
-          case AsyncTaskStatus.Error: {
-            return (
+        // if no embedding status, it means that the embedding is not started
+        if (!embeddingStatus || preparingEmbedding)
+          return (
+            <Flexbox horizontal>
               <Tooltip
-                overlayStyle={{ maxWidth: 340, pointerEvents: 'none' }}
-                title={
-                  <Flexbox gap={4}>
-                    {t('FileParsingStatus.chunks.embeddingStatus.errorResult')}
-                    {embeddingError && (
-                      <Flexbox className={styles.errorReason}>
-                        [{embeddingError.name}]:{' '}
-                        {embeddingError.body && typeof embeddingError.body !== 'string'
-                          ? embeddingError.body.detail
-                          : embeddingError.body}
-                      </Flexbox>
-                    )}
-                  </Flexbox>
-                }
+                overlayStyle={{ pointerEvents: 'none' }}
+                title={t('FileParsingStatus.chunks.embeddingStatus.empty')}
               >
-                <Tag bordered={false} className={className} color={'error'}>
-                  {t('FileParsingStatus.chunks.embeddingStatus.error')}{' '}
-                  <Icon
-                    icon={RotateCwIcon}
-                    onClick={() => {
-                      onErrorClick?.('embedding');
-                    }}
-                    style={{ cursor: 'pointer' }}
-                    title={t('retry', { ns: 'common' })}
-                  />
+                <Tag
+                  bordered={false}
+                  className={cx('chunk-tag', className)}
+                  icon={
+                    preparingEmbedding ? <Icon icon={Loader2Icon} spin /> : <Icon icon={BoltIcon} />
+                  }
+                  onClick={() => {
+                    onClick?.(AsyncTaskStatus.Success);
+                  }}
+                  style={{ cursor: 'pointer' }}
+                >
+                  {chunkCount}
+                  {
+                    // if want to hide button
+                    hideEmbeddingButton ||
+                    // or if preparing the embedding
+                    preparingEmbedding ? null : (
+                      <Button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onEmbeddingClick?.();
+                        }}
+                        style={{
+                          fontSize: 12,
+                          height: 'auto',
+                          paddingBlock: 0,
+                          paddingInline: '8px 0',
+                        }}
+                        type={'link'}
+                      >
+                        {t('FileParsingStatus.chunks.embeddings')}
+                      </Button>
+                    )
+                  }
                 </Tag>
               </Tooltip>
-            );
-          }
-        }
+            </Flexbox>
+          );
 
         return (
-          <Flexbox horizontal>
-            <Tooltip
-              overlayStyle={{ pointerEvents: 'none' }}
-              title={
-                finishEmbedding
-                  ? t('FileParsingStatus.chunks.embeddingStatus.success')
-                  : t('FileParsingStatus.chunks.embeddingStatus.empty')
-              }
-            >
-              <Tag
-                bordered={false}
-                className={cx('chunk-tag', className)}
-                color={finishEmbedding ? 'purple' : undefined}
-                icon={
-                  preparingEmbedding ? (
-                    <Icon icon={Loader2Icon} spin />
-                  ) : (
-                    <Icon icon={BoltIcon} spin={isEmbeddingProcessing} />
-                  )
-                }
-                onClick={() => {
-                  onClick?.(AsyncTaskStatus.Success);
-                }}
-                style={{ cursor: 'pointer' }}
-              >
-                {chunkCount}
-                {
-                  // if want to hide button
-                  hideEmbeddingButton ||
-                  // or if finished the embedding
-                  finishEmbedding ||
-                  // or if preparing the embedding
-                  preparingEmbedding ? null : (
-                    <Button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onEmbeddingClick?.();
-                      }}
-                      style={{
-                        fontSize: 12,
-                        height: 'auto',
-                        paddingBlock: 0,
-                        paddingInline: '8px 0',
-                      }}
-                      type={'link'}
-                    >
-                      {t('FileParsingStatus.chunks.embeddings')}
-                    </Button>
-                  )
-                }
-              </Tag>
-            </Tooltip>
-          </Flexbox>
+          <EmbeddingStatus
+            chunkCount={chunkCount}
+            className={className}
+            embeddingError={embeddingError}
+            embeddingStatus={embeddingStatus}
+            finishEmbedding={finishEmbedding}
+            onClick={onClick}
+            onErrorClick={onErrorClick}
+          />
         );
       }
     }

package/src/config/modelProviders/openai.ts

@@ -37,7 +37,6 @@ const OpenAI: ModelProviderCard = {
       description: 'Dynamic model continuously updated to the current version of GPT-4o in ChatGPT',
       displayName: 'ChatGPT-4o',
       enabled: true,
-      functionCall: true,
       id: 'chatgpt-4o-latest',
       tokens: 128_000,
       vision: true,