Merge branch 'lobehub:main' into database

LovelyGuYiMeng · Oct 5, 2024 · 17586c7 · 17586c7
2 parents be60849 + bdc4f4e
commit 17586c7
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.21.5](https://github.com/lobehub/lobe-chat/compare/v1.21.4...v1.21.5)
+
+<sup>Released on **2024-10-05**</sup>
+
+#### 💄 Styles
+
+- **misc**: Support shadcn in Artifacts.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Support shadcn in Artifacts, closes [#4256](https://github.com/lobehub/lobe-chat/issues/4256) ([863bae5](https://github.com/lobehub/lobe-chat/commit/863bae5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.21.4](https://github.com/lobehub/lobe-chat/compare/v1.21.3...v1.21.4)
 
 <sup>Released on **2024-10-02**</sup>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.21.4",
+  "version": "1.21.5",
   "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",

diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx
@@ -0,0 +1,51 @@
+import { SandpackLayout, SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react';
+import { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+import { createTemplateFiles } from './template';
+
+interface ReactRendererProps {
+  code: string;
+}
+
+const ReactRenderer = memo<ReactRendererProps>(({ code }) => {
+  const title = useChatStore(chatPortalSelectors.artifactTitle);
+
+  return (
+    <SandpackProvider
+      customSetup={{
+        dependencies: {
+          '@lshay/ui': 'latest',
+          '@radix-ui/react-alert-dialog': 'latest',
+          '@radix-ui/react-dialog': 'latest',
+          '@radix-ui/react-icons': 'latest',
+          'antd': 'latest',
+          'class-variance-authority': 'latest',
+          'clsx': 'latest',
+          'lucide-react': 'latest',
+          'recharts': 'latest',
+          'tailwind-merge': 'latest',
+        },
+      }}
+      files={{
+        'App.tsx': code,
+        ...createTemplateFiles({ title }),
+      }}
+      options={{
+        externalResources: ['https://cdn.tailwindcss.com'],
+        visibleFiles: ['App.tsx'],
+      }}
+      style={{ height: '100%' }}
+      template="vite-react-ts"
+      theme="auto"
+    >
+      <SandpackLayout style={{ height: '100%' }}>
+        <SandpackPreview style={{ height: '100%' }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+});
+
+export default ReactRenderer;
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts
@@ -0,0 +1,32 @@
+interface TemplateFilesParams {
+  title?: string;
+}
+export const createTemplateFiles = ({ title }: TemplateFilesParams = {}) => ({
+  'index.html': `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title || 'Artifacts App'}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
+`,
+  'vite.config.ts': {
+    code: `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@/components/ui': '@lshay/ui/components/default',
+    },
+  },
+});`,
+  },
+});