@lobehub/chat 1.18.1 → 1.19.0

package/src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -51,6 +51,10 @@ const APIKeyForm = memo<APIKeyFormProps>(({ id, provider }) => {
         return 'sk-********************************';
       }
 
+      case ModelProvider.Github: {
+        return 'ghp_*****************************';
+      }
+
       default: {
         return '*********************************';
       }

package/src/features/Conversation/Messages/Tool/Inspector/index.tsx

@@ -52,7 +52,7 @@ const Inspector = memo<InspectorProps>(
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
     const [isMessageToolUIOpen, openToolUI, togglePortal] = useChatStore((s) => [
-      chatPortalSelectors.isArtifactMessageUIOpen(id)(s),
+      chatPortalSelectors.isPluginUIOpen(id)(s),
       s.openToolUI,
       s.togglePortal,
     ]);

package/src/features/Conversation/Messages/Tool/index.tsx

@@ -17,7 +17,7 @@ import Inspector from './Inspector';
 const Message = memo<ChatMessage>(({ id, content, pluginState, plugin }) => {
   const [loading, isMessageToolUIOpen] = useChatStore((s) => [
     chatSelectors.isPluginApiInvoking(id)(s),
-    chatPortalSelectors.isArtifactMessageUIOpen(id)(s),
+    chatPortalSelectors.isPluginUIOpen(id)(s),
   ]);
   const { direction } = useContext(ConfigProvider.ConfigContext);
   const { t } = useTranslation('plugin');

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -1,7 +1,7 @@
 import { ChatItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ReactNode, memo, useCallback } from 'react';
+import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
@@ -22,8 +22,12 @@ import {
   renderMessages,
   useAvatarsClick,
 } from '../../Messages';
+import { markdownElements } from '../MarkdownElements';
 import ActionsBar from './ActionsBar';
 import HistoryDivider from './HistoryDivider';
+import { processWithArtifact } from './utils';
+
+const rehypePlugins = markdownElements.map((element) => element.rehypePlugin);
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   loading: css`
@@ -143,6 +147,22 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     );
   });
 
+  // remove line breaks in artifact tag to make the ast transform easier
+  const message =
+    !editing && item?.role === 'assistant' ? processWithArtifact(item?.content) : item?.content;
+
+  const components = useMemo(
+    () =>
+      Object.fromEntries(
+        markdownElements.map((element) => {
+          const Component = element.Component;
+
+          return [element.tag, (props: any) => <Component {...props} id={id} />];
+        }),
+      ),
+    [id],
+  );
+
   return (
     item && (
       <>
@@ -165,9 +185,11 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
           fontSize={fontSize}
           loading={isProcessing}
           markdownProps={{
+            components,
             customRender: markdownCustomRender,
+            rehypePlugins,
           }}
-          message={item.content}
+          message={message}
           messageExtra={<MessageExtra data={item} />}
           onAvatarClick={onAvatarsClick?.(item.role)}
           onChange={(value) => updateMessageContent(item.id, value)}

package/src/features/Conversation/components/ChatItem/utils.test.ts

@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest';
+
+import { processWithArtifact } from './utils';
+
+describe('processWithArtifact', () => {
+  it('should removeLineBreaks with closed tag', () => {
+    const input = `好的
+
+<lobeArtifact identifier="sleep-interpretation-card" type="image/svg+xml" title="睡觉的新解释">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">
+<defs>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap');
+</style>
+</defs>
+<!-- 背景 -->
+<rect width="400" height="600" fill="#F0EAD6"/>
+<!-- 总结 -->
+<text x="200" y="500" font-family="'Noto Serif SC', serif" font-size="20" text-anchor="middle" fill="#8B4513">睡觉：生产力的假死，创造力的重生。</text>
+</svg>
+</lobeArtifact>`;
+
+    const output = processWithArtifact(input);
+
+    expect(output).toEqual(`好的
+
+<lobeArtifact identifier="sleep-interpretation-card" type="image/svg+xml" title="睡觉的新解释"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600"><defs><style>@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap');</style></defs><!-- 背景 --><rect width="400" height="600" fill="#F0EAD6"/><!-- 总结 --><text x="200" y="500" font-family="'Noto Serif SC', serif" font-size="20" text-anchor="middle" fill="#8B4513">睡觉：生产力的假死，创造力的重生。</text></svg></lobeArtifact>`);
+  });
+
+  it('should removeLineBreaks with open tag', () => {
+    const input = `好的
+
+<lobeArtifact identifier="ai-interpretation-card" type="image/svg+xml" title="人工智能新解卡片">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap');
+    </style>
+  </defs>
+`;
+
+    const output = processWithArtifact(input);
+
+    expect(output).toEqual(`好的
+
+<lobeArtifact identifier="ai-interpretation-card" type="image/svg+xml" title="人工智能新解卡片"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">  <defs>    <style>      @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap');    </style>  </defs>`);
+  });
+  it('should not throw error with empty', () => {
+    const input = '';
+
+    const output = processWithArtifact(input);
+
+    expect(output).toEqual('');
+  });
+
+  describe('close the <lobeArtifact tag', () => {
+    it('close tag for <lobeArtifact', () => {
+      const input = '<lobeArtifact';
+
+      const output = processWithArtifact(input);
+
+      expect(output).toEqual('<lobeArtifact>');
+    });
+
+    it('close tag for <lobeArtifact identifier="something"', () => {
+      const input = '<lobeArtifact identifier="something"';
+
+      const output = processWithArtifact(input);
+
+      expect(output).toEqual('<lobeArtifact>');
+    });
+
+    it('close tag for <lobeArtifact identifier="ai-interpretation" type="image/svg+xml" titl', () => {
+      const input = '<lobeArtifact identifier="ai-interpretation" type="image/svg+xml" titl';
+
+      const output = processWithArtifact(input);
+
+      expect(output).toEqual('<lobeArtifact>');
+    });
+
+    it('only change the <lobeArtifact> part', () => {
+      const input = `好的,让我来用新的视角解释"人工智能"这个词汇。
+
+<lobeThinking>这个词汇涉及了当代科技和社会热点,需要用批判性和幽默感来解读其本质。我会用隐喻和讽刺来表达,同时保持简洁有力。</lobeThinking>
+
+<lobeArtifact identifier="ai-new-interpretation" type="image/svg+xml" t`;
+
+      const output = processWithArtifact(input);
+
+      expect(output).toEqual(`好的,让我来用新的视角解释"人工智能"这个词汇。
+
+<lobeThinking>这个词汇涉及了当代科技和社会热点,需要用批判性和幽默感来解读其本质。我会用隐喻和讽刺来表达,同时保持简洁有力。</lobeThinking>
+
+<lobeArtifact>`);
+    });
+
+    it('not change for <lobeArtifact />', () => {
+      const input = '<lobeArtifact/>';
+
+      const output = processWithArtifact(input);
+
+      expect(output).toEqual(input);
+    });
+  });
+
+  it('should removeLinkBreaks for lobeThinking', () => {
+    const input = `好的,让我以一个特别的视角来解释"人工智能"这个词汇。
+
+<lobeThinking>
+这个词汇涉及了当代科技和社会热点,需要用批判性、幽默而深刻的视角来解读。我会运用隐喻和讽刺,抓住其本质,并以精练的方式表达出来。这符合一个好的artifact的标准,因为它是一个独立的、可能被用户修改或重用的内容。我将创建一个新的SVG artifact来呈现这个解释。
+</lobeThinking>
+
+<lobeArtifact identifier="ai-new-interpretation" type="image/svg+xml" title="人工智能的新解释">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap');
+      .background { fill: #f0f0f0; }
+      .title { font-family: 'Noto Serif SC', serif; font-size: 28px; font-weight: 700; fill: #333; }
+      .content { font-family: 'Noto Serif SC', serif; font-size: 18px; fill: #555; }
+      .divider { stroke: #999; stroke-width: 1; }
+      .decoration { fill: none; stroke: #999; stroke-width: 1; }
+    </style>
+  </defs>
+</svg>
+</lobeArtifact>
+
+我为"人工智能"这个词创建了一个新的解释,并将其呈现在一个SVG卡片中。这个解释采用了批判性和幽默的视角,试图揭示这个概念背后的一些潜在问题。`;
+
+    const output = processWithArtifact(input);
+
+    expect(output).toEqual(`好的,让我以一个特别的视角来解释"人工智能"这个词汇。
+
+<lobeThinking>这个词汇涉及了当代科技和社会热点,需要用批判性、幽默而深刻的视角来解读。我会运用隐喻和讽刺,抓住其本质,并以精练的方式表达出来。这符合一个好的artifact的标准,因为它是一个独立的、可能被用户修改或重用的内容。我将创建一个新的SVG artifact来呈现这个解释。</lobeThinking>
+
+<lobeArtifact identifier="ai-new-interpretation" type="image/svg+xml" title="人工智能的新解释"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600">  <defs>    <style>      @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;display=swap');      .background { fill: #f0f0f0; }      .title { font-family: 'Noto Serif SC', serif; font-size: 28px; font-weight: 700; fill: #333; }      .content { font-family: 'Noto Serif SC', serif; font-size: 18px; fill: #555; }      .divider { stroke: #999; stroke-width: 1; }      .decoration { fill: none; stroke: #999; stroke-width: 1; }    </style>  </defs></svg></lobeArtifact>
+
+我为"人工智能"这个词创建了一个新的解释,并将其呈现在一个SVG卡片中。这个解释采用了批判性和幽默的视角,试图揭示这个概念背后的一些潜在问题。`);
+  });
+
+  it('should removeLinkBreaks for lobeThinking', () => {
+    const input = `<lobeThinking>
+这个词汇涉及了
+`;
+
+    const output = processWithArtifact(input);
+
+    expect(output).toEqual(`<lobeThinking>这个词汇涉及了`);
+  });
+});

package/src/features/Conversation/components/ChatItem/utils.ts

@@ -0,0 +1,28 @@
+import { ARTIFACT_TAG_REGEX, ARTIFACT_THINKING_TAG_REGEX } from '@/const/plugin';
+
+/**
+ * Replace all line breaks in the matched `lobeArtifact` tag with an empty string
+ */
+export const processWithArtifact = (input: string = '') => {
+  let output = input;
+  const thinkMatch = ARTIFACT_THINKING_TAG_REGEX.exec(input);
+
+  // If the input contains the `lobeThinking` tag, replace all line breaks with an empty string
+  if (thinkMatch)
+    output = input.replace(ARTIFACT_THINKING_TAG_REGEX, (match) =>
+      match.replaceAll(/\r?\n|\r/g, ''),
+    );
+
+  const match = ARTIFACT_TAG_REGEX.exec(input);
+  // If the input contains the `lobeArtifact` tag, replace all line breaks with an empty string
+  if (match)
+    return output.replace(ARTIFACT_TAG_REGEX, (match) => match.replaceAll(/\r?\n|\r/g, ''));
+
+  // if not match, check if it's start with <lobeArtifact but not closed
+  const regex = /<lobeArtifact\b(?:(?!\/?>)[\S\s])*$/;
+  if (regex.test(output)) {
+    return output.replace(regex, '<lobeArtifact>');
+  }
+
+  return output;
+};

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -4,13 +4,13 @@ import { ActionIcon, Avatar, Grid } from '@lobehub/ui';
 import { Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { RefreshCw } from 'lucide-react';
+import Link from 'next/link';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import useSWR from 'swr';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { assistantService } from '@/services/assistant';
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
@@ -105,10 +105,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
           : assistantList
               .slice(sliceStart, sliceStart + agentLength)
               .map((item: DiscoverAssistantItem) => (
-                <InterceptingLink
-                  href={urlJoin('/discover/assistant/', item.identifier)}
-                  key={item.identifier}
-                >
+                <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
                   <Flexbox className={styles.card} gap={8} horizontal>
                     <Avatar avatar={item.meta.avatar} style={{ flex: 'none' }} />
                     <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
@@ -120,7 +117,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
                       </Paragraph>
                     </Flexbox>
                   </Flexbox>
-                </InterceptingLink>
+                </Link>
               ))}
       </Grid>
     </Flexbox>

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/Icon.tsx

@@ -0,0 +1,96 @@
+import { SiReact } from '@icons-pack/react-simple-icons';
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { CodeXml, GlobeIcon, ImageIcon, Loader2, OrigamiIcon } from 'lucide-react';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  container: css`
+    cursor: pointer;
+
+    margin-block-start: 12px;
+
+    color: ${token.colorText};
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${isDarkMode ? '' : token.colorFillSecondary};
+    }
+  `,
+
+  desc: css`
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 16px;
+    text-overflow: ellipsis;
+  `,
+}));
+
+interface ArtifactProps {
+  type: string;
+}
+
+const SIZE = 28;
+const ArtifactIcon = memo<ArtifactProps>(({ type }) => {
+  const { theme } = useStyles();
+
+  if (!type)
+    return (
+      <Icon
+        icon={Loader2}
+        size={{ fontSize: SIZE }}
+        spin
+        style={{ color: theme.colorTextSecondary }}
+      />
+    );
+
+  switch (type) {
+    case 'application/lobe.artifacts.code': {
+      return (
+        <Icon
+          icon={CodeXml}
+          size={{ fontSize: SIZE }}
+          style={{ color: theme.colorTextSecondary }}
+        />
+      );
+    }
+
+    case 'application/lobe.artifacts.react': {
+      return <SiReact size={SIZE} style={{ color: theme.colorTextSecondary }} />;
+    }
+
+    case 'image/svg+xml': {
+      return (
+        <Icon
+          icon={ImageIcon}
+          size={{ fontSize: SIZE }}
+          style={{ color: theme.colorTextSecondary }}
+        />
+      );
+    }
+    case 'text/html': {
+      return (
+        <Icon
+          icon={GlobeIcon}
+          size={{ fontSize: SIZE }}
+          style={{ color: theme.colorTextSecondary }}
+        />
+      );
+    }
+    default: {
+      return (
+        <Icon color={theme.purple} icon={OrigamiIcon} size={{ fontSize: SIZE, strokeWidth: 1.2 }} />
+      );
+    }
+  }
+});
+
+export default ArtifactIcon;

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/index.tsx

@@ -0,0 +1,129 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Loader2 } from 'lucide-react';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
+import { dotLoading } from '@/styles/loading';
+
+import { MarkdownElementProps } from '../../type';
+import ArtifactIcon from './Icon';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  avatar: css`
+    background: ${token.colorFillQuaternary};
+    border-inline-end: 1px solid ${token.colorSplit};
+  `,
+  container: css`
+    cursor: pointer;
+
+    margin-block-start: 12px;
+
+    color: ${token.colorText};
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+    box-shadow: ${isDarkMode ? token.boxShadowSecondary : token.boxShadowTertiary};
+
+    &:hover {
+      background: ${token.colorFillQuaternary};
+    }
+  `,
+  desc: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    text-overflow: ellipsis;
+  `,
+}));
+
+interface ArtifactProps extends MarkdownElementProps {
+  identifier: string;
+  title: string;
+  type: string;
+}
+
+const Render = memo<ArtifactProps>(({ identifier, title, type, children, id }) => {
+  const { t } = useTranslation('chat');
+  const { styles, cx } = useStyles();
+
+  const hasChildren = !!children;
+  const str = ((children as string) || '').toString?.();
+
+  const [isGenerating, isArtifactTagClosed, currentArtifactMessageId, openArtifact, closeArtifact] =
+    useChatStore((s) => {
+      return [
+        chatSelectors.isMessageGenerating(id)(s),
+        chatPortalSelectors.isArtifactTagClosed(id)(s),
+        chatPortalSelectors.artifactMessageId(s),
+        s.openArtifact,
+        s.closeArtifact,
+      ];
+    });
+
+  const openArtifactUI = () => {
+    openArtifact({ id, identifier, title, type });
+  };
+
+  useEffect(() => {
+    if (!hasChildren || !isGenerating) return;
+
+    openArtifactUI();
+  }, [isGenerating, hasChildren, str, identifier, title, type, id]);
+
+  return (
+    <p>
+      <Flexbox
+        className={styles.container}
+        gap={16}
+        onClick={() => {
+          if (currentArtifactMessageId === id) {
+            closeArtifact();
+          } else {
+            openArtifactUI();
+          }
+        }}
+        width={'100%'}
+      >
+        <Flexbox align={'center'} flex={1} horizontal>
+          <Center className={styles.avatar} height={64} horizontal width={64}>
+            <ArtifactIcon type={type} />
+          </Center>
+          <Flexbox gap={4} paddingBlock={8} paddingInline={12}>
+            {!title && isGenerating ? (
+              <Flexbox className={cx(dotLoading)} horizontal>
+                {t('artifact.generating')}
+              </Flexbox>
+            ) : (
+              <Flexbox className={cx(styles.title)}>{title || t('artifact.unknownTitle')}</Flexbox>
+            )}
+            {hasChildren && (
+              <Flexbox className={styles.desc} horizontal>
+                {identifier} ·{' '}
+                <Flexbox gap={2} horizontal>
+                  {!isArtifactTagClosed && (
+                    <div>
+                      <Icon icon={Loader2} spin />
+                    </div>
+                  )}
+                  {str?.length}
+                </Flexbox>
+              </Flexbox>
+            )}
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </p>
+  );
+});
+
+export default Render;

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/index.ts

@@ -0,0 +1,10 @@
+import Component from './Render';
+import rehypePlugin from './rehypePlugin';
+
+const AntArtifactElement = {
+  Component,
+  rehypePlugin,
+  tag: 'lobeArtifact',
+};
+
+export default AntArtifactElement;

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/rehypePlugin.ts

@@ -0,0 +1,74 @@
+import { SKIP, visit } from 'unist-util-visit';
+
+import { ARTIFACT_TAG } from '@/const/plugin';
+
+function rehypeAntArtifact() {
+  return (tree: any) => {
+    visit(tree, (node, index, parent) => {
+      if (node.type === 'element' && node.tagName === 'p' && node.children.length > 0) {
+        const firstChild = node.children[0];
+        if (firstChild.type === 'raw' && firstChild.value.startsWith(`<${ARTIFACT_TAG}`)) {
+          // 提取 lobeArtifact 的属性
+          const attributes: Record<string, string> = {};
+          const attributeRegex = /(\w+)="([^"]*)"/g;
+          let match;
+          while ((match = attributeRegex.exec(firstChild.value)) !== null) {
+            attributes[match[1]] = match[2];
+          }
+
+          // 创建新的 lobeArtifact 节点
+          const newNode = {
+            children: [
+              {
+                type: 'text',
+                value: node.children
+                  .slice(1, -1)
+                  .map((child: any) => {
+                    if (child.type === 'raw') {
+                      return child.value;
+                    } else if (child.type === 'text') {
+                      return child.value;
+                    } else if (child.type === 'element' && child.tagName === 'a') {
+                      return child.children[0].value;
+                    }
+                    return '';
+                  })
+                  .join('')
+                  .trim(),
+              },
+            ],
+            properties: attributes,
+            tagName: ARTIFACT_TAG,
+            type: 'element',
+          };
+
+          // 替换原来的 p 节点
+          parent.children.splice(index, 1, newNode);
+          return [SKIP, index];
+        }
+      }
+      // 如果字符串是 <lobeArtifact identifier="ai-new-interpretation" type="image/svg+xml" title="人工智能新解释">
+      // 得到的节点就是：
+      // {
+      //   type: 'raw',
+      //   value:
+      //     '<lobeArtifact identifier="ai-new-interpretation" type="image/svg+xml" title="人工智能新解释">',
+      // }
+      else if (node.type === 'raw' && node.value.startsWith(`<${ARTIFACT_TAG}`)) {
+        // 创建新的 lobeArtifact 节点
+        const newNode = {
+          children: [],
+          properties: {},
+          tagName: ARTIFACT_TAG,
+          type: 'element',
+        };
+
+        // 替换原来的 p 节点
+        parent.children.splice(index, 1, newNode);
+        return [SKIP, index];
+      }
+    });
+  };
+}
+
+export default rehypeAntArtifact;