@lobehub/chat 1.18.1 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "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",
@@ -112,6 +112,7 @@
     "@clerk/localizations": "2.0.0",
     "@clerk/nextjs": "^5.3.3",
     "@clerk/themes": "^2.1.27",
+    "@codesandbox/sandpack-react": "^2.19.8",
     "@cyntler/react-doc-viewer": "^1.16.6",
     "@google/generative-ai": "^0.16.0",
     "@icons-pack/react-simple-icons": "9.6.0",
@@ -172,6 +173,7 @@
     "next-auth": "beta",
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",
+    "nextjs-toploader": "^3.6.15",
     "numeral": "^2.0.6",
     "nuqs": "^1.17.8",
     "officeparser": "^4.1.1",
@@ -255,6 +257,7 @@
     "@types/semver": "^7.5.8",
     "@types/systemjs": "^6.13.5",
     "@types/ua-parser-js": "^0.7.39",
+    "@types/unist": "^3.0.3",
     "@types/uuid": "^10.0.0",
     "@types/ws": "^8.5.12",
     "@vitest/coverage-v8": "~1.2.2",

package/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/HTML.tsx

@@ -0,0 +1,25 @@
+import { memo, useEffect, useRef } from 'react';
+
+interface HTMLRendererProps {
+  height?: string;
+  htmlContent: string;
+  width?: string;
+}
+const HTMLRenderer = memo<HTMLRendererProps>(({ htmlContent, width = '100%', height = '100%' }) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    if (!iframeRef.current) return;
+
+    const doc = iframeRef.current.contentDocument;
+    if (!doc) return;
+
+    doc.open();
+    doc.write(htmlContent);
+    doc.close();
+  }, [htmlContent]);
+
+  return <iframe ref={iframeRef} style={{ border: 'none', height, width }} title="html-renderer" />;
+});
+
+export default HTMLRenderer;

package/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx

@@ -0,0 +1,30 @@
+import { SandpackLayout, SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react';
+import { memo } from 'react';
+
+interface ReactRendererProps {
+  code: string;
+}
+const ReactRenderer = memo<ReactRendererProps>(({ code }) => {
+  return (
+    <SandpackProvider
+      customSetup={{
+        dependencies: {
+          antd: 'latest',
+        },
+      }}
+      files={{
+        'App.js': code,
+      }}
+      options={{ externalResources: ['https://cdn.tailwindcss.com'] }}
+      style={{ height: '100%' }}
+      template="react"
+      theme="auto"
+    >
+      <SandpackLayout style={{ height: '100%' }}>
+        <SandpackPreview style={{ height: '100%' }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+});
+
+export default ReactRenderer;

package/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/SVG.tsx

@@ -0,0 +1,114 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { App, Button, Dropdown, Space } from 'antd';
+import { css, cx } from 'antd-style';
+import { CopyIcon, DownloadIcon } from 'lucide-react';
+import { domToPng } from 'modern-screenshot';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { BRANDING_NAME } from '@/const/branding';
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+import { copyImageToClipboard } from '@/utils/clipboard';
+
+const svgContainer = css`
+  width: 100%;
+  height: 100%;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const actions = css`
+  position: absolute;
+  inset-block-end: 8px;
+  inset-inline-end: 8px;
+`;
+
+const DOM_ID = 'artfact-svg';
+interface SVGRendererProps {
+  content: string;
+}
+
+const SVGRenderer = ({ content }: SVGRendererProps) => {
+  const { t } = useTranslation('portal');
+  const { message } = App.useApp();
+
+  const generatePng = async () => {
+    return domToPng(document.querySelector(`#${DOM_ID}`) as HTMLDivElement, {
+      features: {
+        // 不启用移除控制符，否则会导致 safari emoji 报错
+        removeControlCharacter: false,
+      },
+      scale: 2,
+    });
+  };
+
+  const downloadImage = async (type: string) => {
+    let dataUrl = '';
+    if (type === 'png') dataUrl = await generatePng();
+    else if (type === 'svg') {
+      const blob = new Blob([content], { type: 'image/svg+xml' });
+
+      dataUrl = URL.createObjectURL(blob);
+    }
+
+    const title = chatPortalSelectors.artifactTitle(useChatStore.getState());
+
+    const link = document.createElement('a');
+    link.download = `${BRANDING_NAME}_${title}.${type}`;
+    link.href = dataUrl;
+    link.click();
+    link.remove();
+  };
+
+  return (
+    <Flexbox
+      align={'center'}
+      className="svg-renderer"
+      height={'100%'}
+      style={{ position: 'relative' }}
+    >
+      <Center
+        className={cx(svgContainer)}
+        dangerouslySetInnerHTML={{ __html: content }}
+        id={DOM_ID}
+      />
+      <Flexbox className={cx(actions)}>
+        <Space.Compact>
+          <Dropdown
+            menu={{
+              items: [
+                { key: 'png', label: t('artifacts.svg.download.png') },
+                { key: 'svg', label: t('artifacts.svg.download.svg') },
+              ],
+              onClick: ({ key }) => {
+                downloadImage(key);
+              },
+            }}
+          >
+            <Button icon={<Icon icon={DownloadIcon} />} />
+          </Dropdown>
+          <Tooltip title={t('artifacts.svg.copyAsImage')}>
+            <Button
+              icon={<Icon icon={CopyIcon} />}
+              onClick={async () => {
+                const dataUrl = await generatePng();
+                try {
+                  await copyImageToClipboard(dataUrl);
+                  message.success(t('artifacts.svg.copySuccess'));
+                } catch (e) {
+                  message.error(t('artifacts.svg.copyFail', { error: e }));
+                }
+              }}
+            />
+          </Tooltip>
+        </Space.Compact>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default SVGRenderer;

package/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/index.tsx

@@ -0,0 +1,25 @@
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+
+import HTMLRenderer from './HTML';
+import SVGRender from './SVG';
+
+const ReactRenderer = dynamic(() => import('./React'), { ssr: false });
+
+const Renderer = memo<{ content: string; type?: string }>(({ content, type }) => {
+  switch (type) {
+    case 'application/lobe.artifacts.react': {
+      return <ReactRenderer code={content} />;
+    }
+
+    case 'image/svg+xml': {
+      return <SVGRender content={content} />;
+    }
+
+    default: {
+      return <HTMLRenderer htmlContent={content} />;
+    }
+  }
+});
+
+export default Renderer;

package/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/index.tsx

@@ -0,0 +1,79 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo, useEffect, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
+
+import Renderer from './Renderer';
+
+const ArtifactsUI = memo(() => {
+  const [
+    messageId,
+    displayMode,
+    isMessageGenerating,
+    artifactType,
+    artifactContent,
+
+    isArtifactTagClosed,
+  ] = useChatStore((s) => {
+    const messageId = chatPortalSelectors.artifactMessageId(s) || '';
+
+    return [
+      messageId,
+      s.portalArtifactDisplayMode,
+      chatSelectors.isMessageGenerating(messageId)(s),
+      chatPortalSelectors.artifactType(s),
+      chatPortalSelectors.artifactCode(messageId)(s),
+      chatPortalSelectors.isArtifactTagClosed(messageId)(s),
+    ];
+  });
+
+  useEffect(() => {
+    // when message generating , check whether the artifact is closed
+    // if close, move the display mode to preview
+    if (isMessageGenerating && isArtifactTagClosed && displayMode === 'code') {
+      useChatStore.setState({ portalArtifactDisplayMode: 'preview' });
+    }
+  }, [isMessageGenerating, displayMode, isArtifactTagClosed]);
+
+  const language = useMemo(() => {
+    switch (artifactType) {
+      case 'application/lobe.artifacts.react': {
+        return 'tsx';
+      }
+
+      case 'python': {
+        return 'python';
+      }
+
+      default: {
+        return 'html';
+      }
+    }
+  }, [artifactType]);
+
+  // make sure the message and id is valid
+  if (!messageId) return;
+
+  return (
+    <Flexbox
+      className={'portal-artifact'}
+      flex={1}
+      gap={8}
+      height={'100%'}
+      paddingInline={12}
+      style={{ overflow: 'hidden' }}
+    >
+      {!isArtifactTagClosed || displayMode === 'code' ? (
+        <Highlighter language={language} style={{ maxHeight: '100%', overflow: 'hidden' }}>
+          {artifactContent}
+        </Highlighter>
+      ) : (
+        <Renderer content={artifactContent} type={artifactType} />
+      )}
+    </Flexbox>
+  );
+});
+
+export default ArtifactsUI;

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

@@ -0,0 +1,69 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { ConfigProvider, Segmented, Typography } from 'antd';
+import { cx } from 'antd-style';
+import { ArrowLeft, CodeIcon, EyeIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+import { oneLineEllipsis } from '@/styles';
+
+const Header = () => {
+  const { t } = useTranslation('portal');
+
+  const [displayMode, artifactTitle, isArtifactTagClosed, closeArtifact] = useChatStore((s) => {
+    const messageId = chatPortalSelectors.artifactMessageId(s) || '';
+
+    return [
+      s.portalArtifactDisplayMode,
+      chatPortalSelectors.artifactTitle(s),
+      chatPortalSelectors.isArtifactTagClosed(messageId)(s),
+      s.closeArtifact,
+    ];
+  });
+
+  return (
+    <Flexbox align={'center'} flex={1} gap={12} horizontal justify={'space-between'} width={'100%'}>
+      <Flexbox align={'center'} gap={4} horizontal>
+        <ActionIcon icon={ArrowLeft} onClick={() => closeArtifact()} />
+        <Typography.Text
+          className={cx(oneLineEllipsis)}
+          style={{ fontSize: 16 }}
+          type={'secondary'}
+        >
+          {artifactTitle}
+        </Typography.Text>
+      </Flexbox>
+      <ConfigProvider
+        theme={{
+          token: {
+            borderRadiusSM: 16,
+            borderRadiusXS: 16,
+            fontSize: 12,
+          },
+        }}
+      >
+        {isArtifactTagClosed && (
+          <Segmented
+            onChange={(value: 'code' | 'preview') => {
+              useChatStore.setState({ portalArtifactDisplayMode: value });
+            }}
+            options={[
+              {
+                icon: <Icon icon={EyeIcon} />,
+                label: t('artifacts.display.preview'),
+                value: 'preview',
+              },
+              { icon: <Icon icon={CodeIcon} />, label: t('artifacts.display.code'), value: 'code' },
+            ]}
+            size={'small'}
+            value={displayMode}
+          />
+        )}
+      </ConfigProvider>
+    </Flexbox>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,10 @@
+import { PortalImpl } from '../type';
+import Body from './Body';
+import Header from './Header';
+import { useEnable } from './useEnable';
+
+export const Artifacts: PortalImpl = {
+  Body,
+  Header,
+  useEnable,
+};

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

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

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

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

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

@@ -11,7 +11,7 @@ export const Artifacts = memo(() => {
   return (
     <Flexbox gap={8}>
       <Typography.Title level={5} style={{ marginInline: 12 }}>
-        {t('Artifacts')}
+        {t('Plugins')}
       </Typography.Title>
       <ArtifactList />
     </Flexbox>

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

@@ -1,13 +1,13 @@
 import { Flexbox } from 'react-layout-kit';
 
-import Artifacts from './Artifacts';
 import Files from './Files';
+import Plugins from './Plugins';
 
 const Home = () => {
   return (
     <Flexbox gap={12} height={'100%'}>
       <Files />
-      <Artifacts />
+      <Plugins />
     </Flexbox>
   );
 };

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

@@ -1,8 +1,9 @@
+import { PortalImpl } from '../type';
 import Body from './Body';
 import Header from './Header';
 import { useEnable } from './useEnable';
 
-export const MessageDetail = {
+export const MessageDetail: PortalImpl = {
   Body,
   Header,
   useEnable,

package/src/app/(main)/chat/(workspace)/@portal/Plugins/Body/ToolRender.tsx

@@ -8,7 +8,7 @@ import { BuiltinToolsPortals } from '@/tools/portals';
 import { safeParseJSON } from '@/utils/safeParseJSON';
 
 const ToolRender = memo(() => {
-  const messageId = useChatStore(chatPortalSelectors.artifactMessageId);
+  const messageId = useChatStore(chatPortalSelectors.toolMessageId);
   const message = useChatStore(chatSelectors.getMessageById(messageId || ''), isEqual);
 
   // make sure the message and id is valid

package/src/app/(main)/chat/(workspace)/@portal/Plugins/Body/index.tsx

@@ -9,7 +9,7 @@ import Footer from '../Footer';
 import ToolRender from './ToolRender';
 
 const ToolUI = () => {
-  const messageId = useChatStore(chatPortalSelectors.artifactMessageId);
+  const messageId = useChatStore(chatPortalSelectors.toolMessageId);
   const message = useChatStore(chatSelectors.getMessageById(messageId || ''), isEqual);
 
   // make sure the message and id is valid

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

@@ -9,7 +9,7 @@ import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 
 const Footer = () => {
   const [messageId, isAIGenerating, triggerAIMessage, summaryPluginContent] = useChatStore((s) => [
-    chatPortalSelectors.artifactMessageId(s),
+    chatPortalSelectors.toolMessageId(s),
     chatSelectors.isAIGenerating(s),
     s.triggerAIMessage,
     s.summaryPluginContent,

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

@@ -1,8 +1,9 @@
+import { PortalImpl } from '../type';
 import Body from './Body';
 import Header from './Header';
 import { useEnable } from './useEnable';
 
-export const Plugins = {
+export const Plugins: PortalImpl = {
   Body,
   Header,
   useEnable,

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

@@ -2,5 +2,5 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
 export const useEnable = () => {
-  return useChatStore(chatPortalSelectors.showArtifactUI);
+  return useChatStore(chatPortalSelectors.showPluginUI);
 };

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

@@ -1,15 +1,13 @@
 import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
+import Body from '../features/Body';
 import Header from '../features/Header';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Header />
-      <Flexbox height={'100%'} style={{ position: 'relative' }} width={'100%'}>
-        {children}
-      </Flexbox>
+      <Body>{children}</Body>
     </>
   );
 };

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { css, cx } from 'antd-style';
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const body = css`
+  :has(.portal-artifact) {
+    overflow: hidden;
+    padding-block-end: 12px;
+  }
+`;
+
+const Body = ({ children }: PropsWithChildren) => {
+  return (
+    <Flexbox
+      className={cx(body, 'portal-body')}
+      height={'100%'}
+      style={{ position: 'relative' }}
+      width={'100%'}
+    >
+      {children}
+    </Flexbox>
+  );
+};
+
+export default Body;

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

@@ -2,12 +2,14 @@
 
 import { memo } from 'react';
 
+import { Artifacts } from './Artifacts';
 import { FilePreview } from './FilePreview';
 import { HomeBody, HomeHeader } from './Home';
 import { MessageDetail } from './MessageDetail';
 import { Plugins } from './Plugins';
+import { PortalImpl } from './type';
 
-const items = [MessageDetail, Plugins, FilePreview];
+const items: PortalImpl[] = [MessageDetail, Artifacts, Plugins, FilePreview];
 
 export const PortalHeader = memo(() => {
   const enabledList: boolean[] = [];

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+export interface PortalImpl {
+  Body: FC;
+  Header: FC;
+  useEnable: () => boolean;
+}

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

@@ -39,8 +39,9 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
   const { styles } = useStyles();
   const { md = true } = useResponsive();
 
-  const [showInspector, showToolUI] = useChatStore((s) => [
+  const [showInspector, showToolUI, showArtifactUI] = useChatStore((s) => [
     chatPortalSelectors.showPortal(s),
+    chatPortalSelectors.showPluginUI(s),
     chatPortalSelectors.showArtifactUI(s),
   ]);
 
@@ -54,7 +55,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
         expand
         hanlderStyle={{ display: 'none' }}
         maxWidth={MAX_WIDTH}
-        minWidth={showToolUI ? CHAT_DOCK_TOOL_UI_WIDTH : CHAT_DOCK_WIDTH}
+        minWidth={showArtifactUI || showToolUI ? CHAT_DOCK_TOOL_UI_WIDTH : CHAT_DOCK_WIDTH}
         mode={md ? 'fixed' : 'float'}
         placement={'right'}
         showHandlerWhenUnexpand={false}

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem, DiscoverPlugintem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -28,13 +28,13 @@ const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
       {pluginData && pluginData?.length > 0 && (
         <Block gap={12} title={t('assistants.plugins')}>
           {pluginData.map((item) => (
-            <InterceptingLink
+            <Link
               href={urlJoin('/discover/plugin', item.identifier)}
               key={item.identifier}
               style={{ color: 'inherit' }}
             >
               <ToolItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))}
         </Block>
       )}
@@ -46,12 +46,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/assistant', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/assistant', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/features/Back.tsx

@@ -8,8 +8,6 @@ import { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
-
 const useStyles = createStyles(({ css, token }) => {
   return {
     back: css`
@@ -23,12 +21,9 @@ const useStyles = createStyles(({ css, token }) => {
 });
 
 const Back = memo<{ href: string; style?: CSSProperties }>(({ href, style }) => {
-  const { isIntercepted } = useInterceptingRoutes();
   const { t } = useTranslation('discover');
   const { styles } = useStyles();
 
-  if (isIntercepted) return null;
-
   return (
     <Link className={styles.back} href={href} style={{ marginBottom: 8, ...style }}>
       <Flexbox align={'center'} gap={8} horizontal>