@lobehub/chat 1.18.2 → 1.19.0

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/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;

package/src/features/Conversation/components/MarkdownElements/LobeThinking/Render.tsx

@@ -0,0 +1,86 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BringToFrontIcon, ChevronDown, ChevronRight, Loader2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ARTIFACT_THINKING_TAG } from '@/const/plugin';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { dotLoading } from '@/styles/loading';
+
+import { MarkdownElementProps } from '../type';
+
+/**
+ * Replace all line breaks in the matched `lobeArtifact` tag with an empty string
+ */
+export const isLobeThinkingClosed = (input: string = '') => {
+  const openTag = `<${ARTIFACT_THINKING_TAG}>`;
+  const closeTag = `</${ARTIFACT_THINKING_TAG}>`;
+
+  return input.includes(openTag) && input.includes(closeTag);
+};
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    padding-block: 8px;
+    padding-inline: 12px;
+    padding-inline-end: 12px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorFillQuaternary};
+    border-radius: 8px;
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    font-size: 12px;
+    text-overflow: ellipsis;
+  `,
+}));
+
+const Render = memo<MarkdownElementProps>(({ children, id }) => {
+  const { t } = useTranslation('chat');
+  const { styles, cx } = useStyles();
+
+  const [isGenerating] = useChatStore((s) => {
+    const message = chatSelectors.getMessageById(id)(s);
+    return [!isLobeThinkingClosed(message?.content)];
+  });
+
+  const [showDetail, setShowDetail] = useState(false);
+
+  const expand = showDetail || isGenerating;
+  return (
+    <Flexbox
+      className={styles.container}
+      gap={16}
+      onClick={() => {
+        setShowDetail(!showDetail);
+      }}
+      width={'100%'}
+    >
+      <Flexbox distribution={'space-between'} flex={1} horizontal>
+        <Flexbox gap={8} horizontal>
+          <Icon icon={isGenerating ? Loader2Icon : BringToFrontIcon} spin={isGenerating} />
+          {isGenerating ? (
+            <span className={cx(dotLoading)}>{t('artifact.thinking')}</span>
+          ) : (
+            t('artifact.thought')
+          )}
+        </Flexbox>
+        <Icon icon={expand ? ChevronDown : ChevronRight} />
+      </Flexbox>
+      {expand && children}
+    </Flexbox>
+  );
+});
+
+export default Render;

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

@@ -0,0 +1,12 @@
+import { ARTIFACT_THINKING_TAG } from '@/const/plugin';
+
+import Component from './Render';
+import rehypePlugin from './rehypePlugin';
+
+const AntThinkingElement = {
+  Component,
+  rehypePlugin,
+  tag: ARTIFACT_THINKING_TAG,
+};
+
+export default AntThinkingElement;