refactor: first pass rewrite

client/src/components/Artifacts/Artifact.tsx

@@ -1,34 +1,72 @@
+import { useEffect, useCallback } from 'react';
 import { visit } from 'unist-util-visit';
-import type { Plugin } from 'unified';
-import type { Root } from 'mdast';
+import { useSetRecoilState } from 'recoil';
+import { artifactsState, artifactIdsState } from '~/store/artifacts';
+import type { Pluggable } from 'unified';
 
-export function artifactPlugin() {
+export const artifactPlugin: Pluggable = () => {
   return (tree) => {
-    visit(
-      tree,
-      ['textDirective', 'leafDirective', 'containerDirective'],
-      (node) => {
-        node.data = {
-          hName: node.name,
-          hProperties: node.attributes,
-          ...node.data,
-        };
-        return node;
-      },
-    );
+    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], (node) => {
+      node.data = {
+        hName: node.name,
+        hProperties: node.attributes,
+        ...node.data,
+      };
+      return node;
+    });
   };
-}
+};
+
+export function Artifact({ node, ...props }) {
+  const setArtifacts = useSetRecoilState(artifactsState);
+  const setArtifactIds = useSetRecoilState(artifactIdsState);
+
+  const updateArtifact = useCallback(() => {
+    const content =
+      props.children && typeof props.children === 'string'
+        ? props.children
+        : props.children?.props?.children || '';
+
+    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();
+
+    setArtifacts((prevArtifacts) => {
+      if (prevArtifacts[artifactKey] && prevArtifacts[artifactKey].content === content) {
+        return prevArtifacts;
+      }
+
+      return {
+        ...prevArtifacts,
+        [artifactKey]: {
+          id: artifactKey,
+          identifier,
+          title,
+          type,
+          content,
+        },
+      };
+    });
+
+    setArtifactIds((prevIds) => {
+      if (!prevIds.includes(artifactKey)) {
+        return [...prevIds, artifactKey];
+      }
+      return prevIds;
+    });
+  }, [props, setArtifacts, setArtifactIds]);
+
+  useEffect(() => {
+    updateArtifact();
+  }, [updateArtifact]);
 
-export function artifact({ node, ...props }) {
-  // if (props.className === 'artifact') {
-  console.dir(props, { depth: null });
   return (
     <div className="artifact">
-      <h3>{props.dataIdentifier}</h3>
-      <p>Type: {props.dataType}</p>
+      <b>{props.title || 'Untitled Artifact'}</b>
+      <p>Type: {props.type || 'unknown'}</p>
+      <p>Identifier: {props.identifier || 'No identifier'}</p>
       {props.children}
     </div>
   );
-  // }
-  // return <div {...props} />;
-}
+}

client/src/components/Artifacts/Artifacts.tsx

@@ -2,21 +2,19 @@ import React, { useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import { Sandpack } from '@codesandbox/sandpack-react';
-import {
-  SandpackPreview,
-  SandpackProvider,
-} from '@codesandbox/sandpack-react/unstyled';
+import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
 import { mapCodeFiles, sharedOptions, sharedFiles, sharedProps } from '~/utils/artifacts';
 import store from '~/store';
 
 export function CodeViewer({ showEditor = false }: { showEditor?: boolean }) {
-  const codeBlockIds = useRecoilValue(store.codeBlockIdsState);
-  const codeBlocks = useRecoilValue(store.codeBlocksState);
+  const artifactIds = useRecoilValue(store.artifactIdsState);
+  const artifacts = useRecoilValue(store.artifactsState);
 
-  const files = useMemo(() => mapCodeFiles(codeBlockIds, codeBlocks), [codeBlockIds, codeBlocks]);
+  // const files = useMemo(() => mapCodeFiles(artifactIds, artifacts), [artifactIds, artifacts]);
 
-  console.log('CODE FILES & blocks', files, codeBlocks);
-  if ((Object.keys(files)).length === 0) {
+  // console.log('CODE FILES & blocks', files, artifacts);
+  const files = {};
+  if (Object.keys(files).length === 0) {
     return null;
   }
 
@@ -55,32 +53,34 @@ export function CodeViewer({ showEditor = false }: { showEditor?: boolean }) {
 
 export default function Artifacts() {
   const [activeTab, setActiveTab] = useState('code');
-  const codeBlockIds = useRecoilValue(store.codeBlockIdsState);
-  const codeBlocks = useRecoilValue(store.codeBlocksState);
+  const artifactIds = useRecoilValue(store.artifactIdsState);
+  const artifacts = useRecoilValue(store.artifactsState);
 
-  const files = useMemo(() => mapCodeFiles(codeBlockIds, codeBlocks), [codeBlockIds, codeBlocks]);
-  const firstFileContent = Object.values(files)[0] || '';
+  // const files = useMemo(() => mapCodeFiles(artifactIds, artifacts), [artifactIds, artifacts]);
+  // const firstFileContent = Object.values(files)[0] || '';
+
+  const firstFileContent = '';
 
   return (
-    <div className="flex h-full flex-col text-text-primary text-xl w-full rounded-xl py-2">
-      <div className="bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col h-full">
-        <Tabs.Root value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
+    <div className="flex h-full w-full flex-col rounded-xl py-2 text-xl text-text-primary">
+      <div className="flex h-full flex-col overflow-hidden rounded-lg bg-gray-800 shadow-lg">
+        <Tabs.Root value={activeTab} onValueChange={setActiveTab} className="flex h-full flex-col">
           <Tabs.List className="flex bg-gray-700">
             <Tabs.Trigger
               value="code"
-              className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:outline-none focus:text-white"
+              className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:text-white focus:outline-none"
             >
               Code
             </Tabs.Trigger>
             <Tabs.Trigger
               value="preview"
-              className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:outline-none focus:text-white"
+              className="px-4 py-2 text-sm font-medium text-gray-300 hover:text-white focus:text-white focus:outline-none"
             >
               Preview
             </Tabs.Trigger>
           </Tabs.List>
           <Tabs.Content value="code" className="flex-grow overflow-auto">
-            <pre className="h-full bg-gray-900 p-4 rounded text-sm overflow-auto">
+            <pre className="h-full overflow-auto rounded bg-gray-900 p-4 text-sm">
               <code>{firstFileContent}</code>
             </pre>
           </Tabs.Content>

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -10,7 +10,7 @@ import remarkDirective from 'remark-directive';
 import type { PluggableList, Pluggable } from 'unified';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
 import { CodeBlockArtifact, CodeMarkdown } from '~/components/Artifacts/Code';
-import { artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
+import { Artifact as artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { useFileDownload } from '~/data-provider';
 import useLocalize from '~/hooks/useLocalize';
@@ -156,11 +156,13 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
   return (
     <ReactMarkdown
       remarkPlugins={[
-        /* @ts-ignore */
         remarkDirective,
+        /* @ts-ignore */
         supersub,
         remarkGfm,
+        /* @ts-ignore */
         [remarkMath, { singleDollarTextMath: true }],
+        /* @ts-ignore */
         artifactPlugin,
       ]}
       /* @ts-ignore */

client/src/components/Chat/Presentation.tsx

@@ -24,7 +24,7 @@ export default function Presentation({
   const { data: startupConfig } = useGetStartupConfig();
   const codeArtifacts = useRecoilValue(store.codeArtifacts);
   const hideSidePanel = useRecoilValue(store.hideSidePanel);
-  const codeBlockIds = useRecoilValue(store.codeBlockIdsState);
+  const codeBlockIds = useRecoilValue(store.artifactIdsState);
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
     [startupConfig],

client/src/store/artifacts.ts

@@ -1,27 +1,38 @@
-// client/src/store/artifacts.ts
 import { atom } from 'recoil';
-import type { CodeBlock } from '~/common';
+import { logger } from '~/utils';
+export interface Artifact {
+  identifier?: string;
+  title: string;
+  type: string;
+  content: string;
+}
 
-export const codeBlocksState = atom<Record<string, CodeBlock>>({
-  key: 'codeBlocksState',
+export const artifactsState = atom<Record<string, Artifact>>({
+  key: 'artifactsState',
   default: {},
   effects: [
     ({ onSet, node }) => {
       onSet(async (newValue) => {
-        console.log('Recoil Effect: Setting codeBlocksState', { key: node.key, newValue });
+        logger.log('artifacts', 'Recoil Effect: Setting artifactsState', {
+          key: node.key,
+          newValue,
+        });
       });
     },
   ] as const,
 });
 
-export const codeBlockIdsState = atom<string[]>({
-  key: 'codeBlockIdsState',
+export const artifactIdsState = atom<string[]>({
+  key: 'artifactIdsState',
   default: [],
   effects: [
     ({ onSet, node }) => {
       onSet(async (newValue) => {
-        console.log('Recoil Effect: Setting codeBlockIdsState', { key: node.key, newValue });
+        logger.log('artifacts', 'Recoil Effect: Setting artifactIdsState', {
+          key: node.key,
+          newValue,
+        });
       });
     },
   ] as const,
-});
+});