@lobehub/chat 1.14.5 → 1.14.7

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

@@ -23,6 +23,25 @@ const Google: ModelProviderCard = {
       tokens: 1_048_576 + 8192,
       vision: true,
     },
+    {
+      description: 'Fast and versatile multimodal model for scaling across diverse tasks',
+      displayName: 'Gemini 1.5 Flash Experimental 0827',
+      enabled: true,
+      functionCall: true,
+      id: 'gemini-1.5-flash-exp-0827',
+      maxOutput: 8192,
+      tokens: 1_048_576 + 8192,
+      vision: true,
+    },
+    {
+      description: 'Fast and versatile multimodal model for scaling across diverse tasks',
+      displayName: 'Gemini 1.5 Flash 8B Experimental 0827',
+      functionCall: true,
+      id: 'gemini-1.5-flash-8b-exp-0827',
+      maxOutput: 8192,
+      tokens: 1_048_576 + 8192,
+      vision: true,
+    },
     {
       description: 'Mid-size multimodal model that supports up to 2 million tokens',
       displayName: 'Gemini 1.5 Pro',
@@ -45,13 +64,22 @@ const Google: ModelProviderCard = {
     {
       description: 'Mid-size multimodal model that supports up to 2 million tokens',
       displayName: 'Gemini 1.5 Pro Experimental 0801',
-      enabled: true,
       functionCall: true,
       id: 'gemini-1.5-pro-exp-0801',
       maxOutput: 8192,
       tokens: 2_097_152 + 8192,
       vision: true,
     },
+    {
+      description: 'Mid-size multimodal model that supports up to 2 million tokens',
+      displayName: 'Gemini 1.5 Pro Experimental 0827',
+      enabled: true,
+      functionCall: true,
+      id: 'gemini-1.5-pro-exp-0827',
+      maxOutput: 8192,
+      tokens: 2_097_152 + 8192,
+      vision: true,
+    },
     {
       description:
         'The best model for scaling across a wide range of tasks. This is the latest model.',

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,

package/src/database/server/models/message.ts

@@ -144,6 +144,7 @@ export class MessageModel {
         filename: files.name,
         id: chunks.id,
         messageId: messageQueryChunks.messageId,
+        similarity: messageQueryChunks.similarity,
         text: chunks.text,
       })
       .from(messageQueryChunks)
@@ -168,7 +169,12 @@ export class MessageModel {
         const messageQuery = messageQueriesList.find((relation) => relation.messageId === item.id);
         return {
           ...item,
-          chunksList: chunksList.filter((relation) => relation.messageId === item.id),
+          chunksList: chunksList
+            .filter((relation) => relation.messageId === item.id)
+            .map((c) => ({
+              ...c,
+              similarity: Number(c.similarity) ?? undefined,
+            })),
 
           extra: {
             fromModel: model,
@@ -343,7 +349,7 @@ export class MessageModel {
             chunkId: chunk.id,
             messageId: id,
             queryId: ragQueryId,
-            similarity: chunk.similarity.toString(),
+            similarity: chunk.similarity?.toString(),
           })),
         );
       }

package/src/features/Conversation/Messages/Assistant/FileChunks/Item/index.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import FileIcon from '@/components/FileIcon';
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -14,7 +14,7 @@ export interface ChunkItemProps extends ChatFileChunk {
   index: number;
 }
 
-const ChunkItem = memo<ChunkItemProps>(({ id, fileId, text, filename, fileType }) => {
+const ChunkItem = memo<ChunkItemProps>(({ id, fileId, similarity, text, filename, fileType }) => {
   const { styles, cx } = useStyles();
   const openFilePreview = useChatStore((s) => s.openFilePreview);
 
@@ -28,14 +28,12 @@ const ChunkItem = memo<ChunkItemProps>(({ id, fileId, text, filename, fileType }
       key={id}
       onClick={(e) => {
         e.stopPropagation();
-        openFilePreview(fileId);
+        openFilePreview({ chunkId: id, chunkText: text, fileId });
       }}
     >
       <FileIcon fileName={filename} fileType={fileType} size={20} variant={'pure'} />
-      <Flexbox style={{ maxWidth: 200 }}>
-        <Tooltip title={text.slice(0, 100) + '...'}>
-          <Typography.Text ellipsis={{ tooltip: false }}>{filename}</Typography.Text>
-        </Tooltip>
+      <Flexbox gap={12} horizontal justify={'space-between'} style={{ maxWidth: 200 }}>
+        <Typography.Text ellipsis={{ tooltip: false }}>{filename}</Typography.Text>
         {/*<Typography.Text*/}
         {/*  ellipsis={{ suffix: '...' }}*/}
         {/*  style={{ fontSize: 12, lineHeight: 1 }}*/}
@@ -43,6 +41,11 @@ const ChunkItem = memo<ChunkItemProps>(({ id, fileId, text, filename, fileType }
         {/*>*/}
         {/*  {text}*/}
         {/*</Typography.Text>*/}
+        {similarity && (
+          <Tooltip title={similarity}>
+            <Center className={styles.badge}>{similarity.toFixed(1)}</Center>
+          </Tooltip>
+        )}
       </Flexbox>
     </Flexbox>
   );