🪄 feat: Code Artifacts (#3798)

* feat: Add CodeArtifacts component to Beta settings tab * chore: Update npm dependency to @codesandbox/sandpack-react@2.18.2 * WIP: artifacts first pass * WIP first pass remark-directive * chore: revert markdown to original component + new artifacts rendering * refactor: first pass rewrite * refactor: add throttling * first pass styling * style: Add Radix Tabs, more styling changes * feat: second pass * style: code styling * fix: package markdown fixes * feat: Add useEffect hook to Artifacts component for visibility control, slide in animation * fix: only set artifact if there is content * refactor: typing and make latest artifact active if the number of artifacts changed * feat: artifacts + shadcnui * feat: Add Copy Code button to Artifacts component * feat: first pass streaming updates * refactor: optimize ordering of artifacts in Artifacts component * refactor: optimize ordering of artifacts and add latest artifact activation in Artifacts component * refactor: add order prop to Artifact * feat: update to latest, use update time for ordering * refactor: optimize ordering of artifacts and activate latest artifact in Artifacts component * wip: remove thinking text and artifact formatting if empty * refactor: optimize Markdown rendering and add support for code artifacts * feat: global state for current artifact Id and set on artifact preview click * refactor: Rename CodePreview component to ArtifactButton * refactor: apply growth to artifact frame so artifact preview can take full space * refactor: remove artifactIdsState * refactor: nullify artifact state and reset on empty conversation * feat: reset artifact state on conversation change * feat: artifacts system prompt in backend * refactor: update UI artifact toggle label to match localization key * style: remove ArtifactButton inline-block styling * feat: memoize ArtifactPreview, add html support * refactor: abstract out components * chore: bump react-resizable-panel * refactor: resizable panel order props * fix: side panel resizing crashes * style: temporarily remove scrolling, add better styling * chore: remove thinking for now * chore: preprocess artifacts for now * feat: Add auto scrolling to CodeMarkdown (artifacts) * feat: autoswitch to preview * feat: auto switch to code, adjust prompt, remove unused code * feat: refresh button * feat: open/close artifacts * wip: mermaid * refactor: w-fit Artifact button * chore: organize code * feat: first pass mermaid * refactor: improve panning logic in MermaidDiagram component * feat: center/zoom on first render * refactor: add centering with reset button * style: mermaid styling * refactor: add back MermaidDiagram * fix: static/html template * fix: mermaid * add examples to artifacts prompt * refactor: fix CodeBar plugin prop logic * refactor: remove unnecessary mention of artifacts when not requested * fix: remove preprocessCodeArtifacts function and fix imports * feat: improve artifacts guidelines and remove unnecessary mentions * refactor: improve artifacts guidelines and remove unnecessary mentions * chore: uninstall unused packages * chore: bump vite * chore: update three dependency to version 0.167.1 * refactor: move beta settings, add additional artifacts toggles * feat: artifacts mode toggles * refactor: adjust prompt * feat: shadcnui instructions * feat: code artifacts custom prompt mode * chore: Update artifacts UI labels and instructions localizations * refactor: Remove unused code in Markdown component
2026-03-06 00:00:18 +01:00 · 2024-08-27 17:03:16 -04:00 · 2024-08-27 17:03:16 -04:00 · 7c1ee242eb
commit 7c1ee242eb
parent 80e1bdc282
56 changed files with 11062 additions and 1043 deletions
--- a/client/src/components/Artifacts/Artifact.tsx
+++ b/client/src/components/Artifacts/Artifact.tsx
@ -0,0 +1,104 @@
+import React, { useEffect, useCallback, useRef, useState } from 'react';
+import throttle from 'lodash/throttle';
+import { visit } from 'unist-util-visit';
+import { useSetRecoilState } from 'recoil';
+import type { Pluggable } from 'unified';
+import type { Artifact } from '~/common';
+import { artifactsState } from '~/store/artifacts';
+import ArtifactButton from './ArtifactButton';
+import { logger } from '~/utils';
+
+export const artifactPlugin: Pluggable = () => {
+  return (tree) => {
+    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], (node) => {
+      node.data = {
+        hName: node.name,
+        hProperties: node.attributes,
+        ...node.data,
+      };
+      return node;
+    });
+  };
+};
+
+const extractContent = (
+  children: React.ReactNode | { props: { children: React.ReactNode } } | string,
+): string => {
+  if (typeof children === 'string') {
+    return children;
+  }
+  if (React.isValidElement(children)) {
+    return extractContent((children.props as { children?: React.ReactNode }).children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(extractContent).join('');
+  }
+  return '';
+};
+
+export function Artifact({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  node,
+  ...props
+}: Artifact & {
+  children: React.ReactNode | { props: { children: React.ReactNode } };
+  node: unknown;
+}) {
+  const setArtifacts = useSetRecoilState(artifactsState);
+  const [artifact, setArtifact] = useState<Artifact | null>(null);
+
+  const throttledUpdateRef = useRef(
+    throttle((updateFn: () => void) => {
+      updateFn();
+    }, 25),
+  );
+
+  const updateArtifact = useCallback(() => {
+    const content = extractContent(props.children);
+    logger.log('artifacts', 'updateArtifact: content.length', content.length);
+
+    if (!content || content.trim() === '') {
+      return;
+    }
+
+    const title = props.title ?? 'Untitled Artifact';
+    const type = props.type ?? 'unknown';
+    const identifier = props.identifier ?? 'no-identifier';
+    const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase();
+
+    throttledUpdateRef.current(() => {
+      const now = Date.now();
+
+      const currentArtifact: Artifact = {
+        id: artifactKey,
+        identifier,
+        title,
+        type,
+        content,
+        lastUpdateTime: now,
+      };
+
+      setArtifacts((prevArtifacts) => {
+        if (
+          prevArtifacts?.[artifactKey] != null &&
+          prevArtifacts[artifactKey].content === content
+        ) {
+          return prevArtifacts;
+        }
+
+        return {
+          ...prevArtifacts,
+          [artifactKey]: currentArtifact,
+        };
+      });
+
+      setArtifact(currentArtifact);
+    });
+  }, [props.type, props.title, setArtifacts, props.children, props.identifier]);
+
+  useEffect(() => {
+    updateArtifact();
+  }, [updateArtifact]);
+
+  return <ArtifactButton artifact={artifact} />;
+}