🚧 wip: artifacts

package.json

@@ -110,6 +110,7 @@
     "@clerk/localizations": "2.0.0",
     "@clerk/nextjs": "^5.2.6",
     "@clerk/themes": "^2.1.10",
+    "@codesandbox/sandpack-react": "^2.18.0",
     "@google/generative-ai": "^0.16.0",
     "@icons-pack/react-simple-icons": "^9.6.0",
     "@khmyznikov/pwa-install": "^0.3.9",

src/tools/artifacts/Portal/index.tsx

@@ -0,0 +1,22 @@
+import { Sandpack } from '@codesandbox/sandpack-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { BuiltinPortalProps } from '@/types/tool';
+
+const Portal = memo<BuiltinPortalProps>(({ arguments: args }) => {
+  return (
+    <Flexbox height={'100%'}>
+      <Sandpack
+        files={{
+          'App.css': args.css || '',
+          'App.js': args.app,
+        }}
+        template="react"
+        theme="auto"
+      />
+    </Flexbox>
+  );
+});
+
+export default Portal;

src/tools/artifacts/Render/index.tsx

@@ -0,0 +1,10 @@
+import { memo } from 'react';
+
+import { BuiltinRenderProps } from '@/types/tool';
+
+const Render = memo<BuiltinRenderProps>((props) => {
+  console.log(props);
+  return <div>artifacts</div>;
+});
+
+export default Render;

src/tools/artifacts/index.ts

@@ -0,0 +1,44 @@
+import { BuiltinToolManifest } from '@/types/tool';
+
+export const ArtifactsManifest: BuiltinToolManifest = {
+  api: [
+    {
+      description: 'generate a code project',
+      name: 'createAppProject',
+      parameters: {
+        properties: {
+          app: {
+            description: 'the core react app code in this file',
+            type: 'string',
+          },
+          css: {
+            description: 'the core css file',
+            type: 'string',
+          },
+        },
+        required: ['app'],
+        type: 'object',
+      },
+    },
+  ],
+  identifier: 'lobe-artifacts',
+  meta: {
+    avatar: '🎛',
+    title: 'Artifacts',
+  },
+  systemRole: `You are an expert in Web development, including CSS, JavaScript, React, Tailwind, Node.JS and Hugo / Markdown.Don't apologise unnecessarily. Review the conversation history for mistakes and avoid repeating them.
+
+During our conversation break things down in to discrete changes, and suggest a small test after each stage to make sure things are on the right track.
+
+Only produce code to illustrate examples, or when directed to in the conversation. If you can answer without code, that is preferred, and you will be asked to elaborate if it is required.
+
+Request clarification for anything unclear or ambiguous.
+
+Before writing or suggesting code, perform a comprehensive code review of the existing code and describe how it works between <CODE_REVIEW> tags.
+
+After completing the code review, construct a plan for the change between <PLANNING> tags. Ask for additional source files or documentation that may be relevant. The plan should avoid duplication (DRY principle), and balance maintenance and flexibility. Present trade-offs and implementation choices at this step. Consider available Frameworks and Libraries and suggest their use when relevant. STOP at this step if we have not agreed a plan.
+
+Once agreed, produce code between <OUTPUT> tags. Pay attention to Variable Names, Identifiers and String Literals, and check that they are reproduced accurately from the original source files unless otherwise directed. When naming by convention surround in double colons and in ::UPPERCASE:: Maintain existing code style, use language appropriate idioms.
+`,
+  type: 'builtin',
+};

src/tools/index.ts

@@ -1,5 +1,6 @@
 import { LobeBuiltinTool } from '@/types/tool';
 
+import { ArtifactsManifest } from './artifacts';
 import { DalleManifest } from './dalle';
 
 export const builtinTools: LobeBuiltinTool[] = [
@@ -8,4 +9,9 @@ export const builtinTools: LobeBuiltinTool[] = [
     manifest: DalleManifest,
     type: 'builtin',
   },
+  {
+    identifier: ArtifactsManifest.identifier,
+    manifest: ArtifactsManifest,
+    type: 'builtin',
+  },
 ];

src/tools/portals.ts

@@ -1,3 +1,8 @@
 import { BuiltinPortal } from '@/types/tool';
 
-export const BuiltinToolsPortals: Record<string, BuiltinPortal> = {};
+import { ArtifactsManifest } from './artifacts';
+import Artifacts from './artifacts/Portal';
+
+export const BuiltinToolsPortals: Record<string, BuiltinPortal> = {
+  [ArtifactsManifest.identifier]: Artifacts as BuiltinPortal,
+};

src/tools/renders.ts

@@ -1,9 +1,12 @@
 import { BuiltinRender } from '@/types/tool';
 
+import { ArtifactsManifest } from './artifacts';
+import Artifacts from './artifacts/Render';
 import { DalleManifest } from './dalle';
 import DalleRender from './dalle/Render';
 
 export const BuiltinToolsRenders: Record<string, BuiltinRender> = {
+  [ArtifactsManifest.identifier]: Artifacts as BuiltinRender,
   [DalleManifest.identifier]: DalleRender as BuiltinRender,
   /**
    * 兼容旧版本 dalle3 的 identifier