feat: add the markdown components (#655)

* chore: upate the gitignore

* chore: remove useless fiel

* Optimize the style building and increase style scope.

* chore: updage the git ignore

* fix: fix the style building

* chore: fix the style building

* feat: add the markdown components

* chore: update the doc

* style: tweak the them of the Markdown

* chore: remove the pro-editor

* fix: fix the markdown

* chore: update the assistant_start

* chore: update the icon

* chore: release @petercatai/[email protected]

* chore: fix ci

Author: xingwanying

.gitignore

@@ -62,4 +62,4 @@ next-env.d.ts
 .pytest_cache
 
 dist/
-lui/src/style.css
+assistant/src/style/global.css

assistant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petercatai/assistant",
-  "version": "2.0.12",
+  "version": "2.0.15",
   "description": "PeterCat Assistant Application",
   "repository": "https://github.com/petercat-ai/petercat.git",
   "license": "MIT",
@@ -12,16 +12,16 @@
       "import": "./dist/esm/index.js"
     },
     "./style": {
-      "import": "./dist/esm/style.css"
+      "import": "./dist/esm/style/global.css"
     }
   },
   "module": "dist/esm/index.js",
   "browser": "dist/umd/assistant.min.js",
   "types": "dist/esm/index.d.ts",
-  "style": "dist/esm/style.css",
+  "style": "dist/esm/style/global.css",
   "scripts": {
-    "build": "npm run build:css && cp ./src/style.css ./.dumi/tmp/style.css && father build",
-    "build:css": "tailwindcss -i tailwind.css -o ./src/style.css",
+    "build": "npm run build:css && cp ./src/style/global.css ./.dumi/tmp/global.css && father build",
+    "build:css": "tailwindcss -i tailwind.css -o ./src/style/global.css",
     "build:watch": "father dev",
     "dev": "dumi dev",
     "docs:build": "dumi build",
@@ -57,16 +57,21 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.5",
-    "@ant-design/pro-editor": "^1.1.1",
     "@ant-design/x": "^1.0.0",
     "@babel/runtime": "^7.18.0",
     "antd": "^5.15.3",
     "antd-style": "^3.6.1",
     "axios": "^1.6.7",
     "classnames": "^2.5.1",
     "dotenv": "^16.4.5",
+    "latest": "^0.2.0",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.0",
+    "react-markdown": "^8.0.7",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-highlight": "6.0.0",
+    "remark-gfm": "^3.0.1",
+    "remark-html": "^16.0.1",
     "swr": "^2.2.5",
     "tailwindcss": "^3.4.1",
     "tailwindcss-scoped-preflight": "^3.2.6"

assistant/scripts/prepend-tailwind-loader.js

@@ -1,3 +1,3 @@
 module.exports = (content) => {
-  return `import '../.dumi/tmp/style.css';\n${content}`;
+  return `import '../.dumi/tmp/global.css';\n${content}`;
 }

assistant/src/Assistant/index.md

@@ -28,7 +28,7 @@ export default () => {
       <a onClick={() => setToken('1234')}>点我变token{token}</a>
       <Assistant
         editBotId ={token}
-        apiUrl='/api/chat/stream_builder'
+        apiUrl='/api/chat/stream_qa'
         token='0553365a-edb1-435c-b69c-4c645290b86e'
         clearMessage={true}
       />
@@ -52,4 +52,4 @@ export default () => {
 | `disabled`             | `boolean`                 | `false`     | 是否禁用聊天输入区域，禁用后用户无法输入消息。                                        |
 | `disabledPlaceholder`  | `string`                  | `undefined` | 当聊天输入区域被禁用时显示的占位符文本。                                             |
 | `getToolsResult`       | `(response: any) => void` | `undefined` | 用于接收工具处理结果的回调函数。                                                     |
-| `bottom` | `number` | `120` | 聊天助手距离底部的距离，单位为像素。 |
+| `bottom` | `number` | `120` | 聊天助手距离底部的距离，单位为像素。 |

assistant/src/Assistant/index.tsx

@@ -1,22 +1,21 @@
 import { CloseCircleFilled } from '@ant-design/icons';
-import { ActionIcon } from '@ant-design/pro-editor';
 import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import Chat, { ChatProps } from '../Chat';
 import BubbleIcon from '../icons/BubbleIcon';
 
 export interface AssistantProps extends ChatProps {
-  showBubble: boolean;
-  isVisible: boolean;
+  showBubble?: boolean;
+  isVisible?: boolean;
   onClose?: () => void;
   bottom?: number;
 }
 
 const Assistant = (props: AssistantProps) => {
   const {
     showBubble = true,
-    isVisible,
+    isVisible = false,
     onClose,
     drawerWidth = 500,
     bottom = 120,
@@ -69,11 +68,8 @@ const Assistant = (props: AssistantProps) => {
     },
   );
 
-  if (typeof window === 'undefined') {
-    return;
-  }
   return (
-    <div className="petercat-lui-assistant">
+    <div className="petercat-assitant">
       <div
         className={cls}
         style={{
@@ -91,12 +87,11 @@ const Assistant = (props: AssistantProps) => {
               {...props}
               drawerWidth={drawerWidth}
             />
-            <div className="absolute top-0 right-0 m-1">
-              <ActionIcon
-                icon={<CloseCircleFilled />}
-                onClick={toggleDrawer}
-                className="w-6 h-6 text-black"
-              />
+            <div
+              className="absolute top-0 right-0 m-1 flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 hover:bg-gray-300 cursor-pointer transition-all duration-300"
+              onClick={toggleDrawer}
+            >
+              <CloseCircleFilled className="w-4 h-4 text-black" />
             </div>
           </>
         )}

assistant/src/Chat/components/MarkdownRender.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable react/no-danger */
-import { Markdown } from '@ant-design/pro-editor';
 import React from 'react';
+import Markdown from '../../Markdown';
 
 interface IProps {
   className?: string;
@@ -9,10 +8,8 @@ interface IProps {
 
 const MarkdownRender = React.memo((props: IProps) => (
   <Markdown
-    className="ant-pro-chat-list-item-message-content"
     style={{ overflowX: 'hidden', overflowY: 'auto' }}
-  >
-    {props.content}
-  </Markdown>
+    text={props.content}
+  />
 ));
 export default MarkdownRender;

assistant/src/Chat/components/UserContent.tsx

@@ -1,7 +1,7 @@
-import { Markdown } from '@ant-design/pro-editor';
 import { Image } from 'antd';
 import React, { type FC } from 'react';
 import { ImageURLContentBlock } from '../../interface';
+import MarkdownRender from './MarkdownRender';
 
 interface IProps {
   images: ImageURLContentBlock[];
@@ -23,16 +23,7 @@ const UserContent: FC<IProps> = ({ images, text }) => {
           }}
         />
       ))}
-      {text && (
-        <Markdown
-          style={{
-            overflowX: 'hidden',
-            overflowY: 'auto',
-          }}
-        >
-          {text}
-        </Markdown>
-      )}
+      {text && <MarkdownRender content={text} />}
     </div>
   );
 };

assistant/src/Chat/index.css

@@ -4,7 +4,7 @@ atomId: Chat
 
 # Chat
 
-Chat 是一个基于 @ant-design/x 和 @ant-design/pro-editor 构建的聊天组件，提供了丰富的功能和配置选项。它支持与一个基于 @ant-design/x 的聊天服务进行交互，并且可以渲染多种消息类型。
+Chat 是一个基于 @ant-design/x 构建的聊天组件，提供了丰富的功能和配置选项。它支持与一个基于 @ant-design/x 的聊天服务进行交互，并且可以渲染多种消息类型。
 
 ## 安装
 

assistant/src/Chat/index.md

@@ -23,7 +23,6 @@ import LoadingStart from './components/LoadingStart';
 import MarkdownRender from './components/MarkdownRender';
 import MySpinner from './components/MySpinner';
 import UserContent from './components/UserContent';
-import './index.css';
 import { UITemplateRender } from './template';
 
 const CANCEL_REASON = 'petercat user cancel';
@@ -299,26 +298,6 @@ const Chat: FC<ChatProps> = memo(
       };
     }, []);
 
-    useEffect(() => {
-      if (isEmpty(botDetail)) {
-        return;
-      }
-      try {
-        // @ts-ignore
-        const info = botDetail?.[0] as any;
-        setCurrentBotInfo({
-          assistantMeta: {
-            avatar: info.avatar,
-            title: info.name,
-          },
-          helloMessage: info.hello_message,
-          starters: info.starters || [],
-        });
-      } catch (e) {
-        console.error('botDetail effect', e);
-      }
-    }, [botDetail]);
-
     useEffect(() => {
       if (isEqual(currentBotInfo, currentBotInfoRef.current)) {
         return;
@@ -342,6 +321,26 @@ const Chat: FC<ChatProps> = memo(
       });
     }, [assistantMeta, helloMessage, starters]);
 
+    useEffect(() => {
+      if (isEmpty(botDetail)) {
+        return;
+      }
+      try {
+        // @ts-ignore
+        const info = botDetail?.[0] as any;
+        setCurrentBotInfo({
+          assistantMeta: {
+            avatar: info.avatar,
+            title: info.name,
+          },
+          helloMessage: info.hello_message,
+          starters: info.starters || [],
+        });
+      } catch (e) {
+        console.error('botDetail effect', e);
+      }
+    }, [botDetail]);
+
     // ============================ Roles =============================
     const roles: GetProp<typeof Bubble.List, 'roles'> = React.useMemo(() => {
       const {
@@ -509,7 +508,7 @@ const Chat: FC<ChatProps> = memo(
     // ============================ Render ============================
     return (
       <div
-        className="petercat-lui bg-[#FCFCFC] pt-2"
+        className="petercat-assitant bg-[#FCFCFC] pt-2"
         style={{
           ...style,
           minWidth: drawerWidth,

assistant/src/Chat/index.tsx

@@ -31,22 +31,24 @@ const GitInsight = (props: GitInsightProps) => {
   }, []);
 
   return (
-    <div className="flex justify-start items-center">
-      <div className="opacity-0 transform transition-opacity duration-500 delay-200 animate-fade-in">
-        <MemoizedCountCard type="star" count={starCount} />
-      </div>
-
-      {num0End && (
+    <div className="petercat-assitant">
+      <div className="flex justify-start items-center">
         <div className="opacity-0 transform transition-opacity duration-500 delay-200 animate-fade-in">
-          <MemoizedCountCard type="fork" count={forkCount} />
+          <MemoizedCountCard type="star" count={starCount} />
         </div>
-      )}
 
-      {num1End && (
-        <div className="opacity-0 transform transition-opacity duration-500 delay-200 animate-fade-in">
-          <MemoizedCountCard type="commit" count={commitCount} />
-        </div>
-      )}
+        {num0End && (
+          <div className="opacity-0 transform transition-opacity duration-500 delay-200 animate-fade-in">
+            <MemoizedCountCard type="fork" count={forkCount} />
+          </div>
+        )}
+
+        {num1End && (
+          <div className="opacity-0 transform transition-opacity duration-500 delay-200 animate-fade-in">
+            <MemoizedCountCard type="commit" count={commitCount} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };

assistant/src/GitInsight/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+// @ts-ignore
+import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import CopyButton from './CopyButton';
+
+const CodeBlock: React.FC<{
+  inline?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}> = ({ inline, className, children }) => {
+  const language = className?.replace('language-', '') || ''; // 提取语言信息
+  const codeContent = String(children).trim();
+
+  if (inline) {
+    return <code className="bg-gray-200  px-1 rounded">{children}</code>;
+  }
+
+  return (
+    <div className="relative group">
+      <SyntaxHighlighter language={language} style={vs} className="rounded-md">
+        {codeContent}
+      </SyntaxHighlighter>
+      <CopyButton content={codeContent} />
+    </div>
+  );
+};
+
+export default CodeBlock;

assistant/src/Markdown/CodeBlock.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+const CopyButton: React.FC<{ content: string }> = ({ content }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('copy', error);
+    }
+  };
+
+  return (
+    <button
+      className="absolute top-2 right-2 text-xs bg-gray-800 text-white p-1 rounded-md hover:bg-gray-700"
+      onClick={handleCopy}
+    >
+      {copied ? 'copied' : 'copy'}
+    </button>
+  );
+};
+
+export default CopyButton;