🚀 feat: Artifact Editing & Downloads (#5428)

* refactor: expand container

* chore: bump @codesandbox/sandpack-react to latest

* WIP: first pass, show editor

* feat: implement ArtifactCodeEditor and ArtifactTabs components for enhanced artifact management

* refactor: fileKey

* refactor: auto scrolling code editor and add messageId to artifact

* feat: first pass, editing artifact

* feat: first pass, robust artifact replacement

* fix: robust artifact replacement & re-render when expected

* feat: Download Artifacts

* refactor: improve artifact editing UX

* fix: layout shift of new download button

* fix: enhance missing output checks and logging in StreamRunManager

client/src/Providers/ArtifactContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, ReactNode, useCallback, useRef } from 'react';
+
+type TArtifactContext = {
+  getNextIndex: (skip: boolean) => number;
+  resetCounter: () => void;
+};
+
+export const ArtifactContext = createContext<TArtifactContext>({} as TArtifactContext);
+export const useArtifactContext = () => useContext(ArtifactContext);
+
+export function ArtifactProvider({ children }: { children: ReactNode }) {
+  const counterRef = useRef(0);
+
+  const getNextIndex = useCallback((skip: boolean) => {
+    if (skip) {
+      return counterRef.current;
+    }
+    const nextIndex = counterRef.current;
+    counterRef.current += 1;
+    return nextIndex;
+  }, []);
+
+  const resetCounter = useCallback(() => {
+    counterRef.current = 0;
+  }, []);
+
+  return (
+    <ArtifactContext.Provider value={{ getNextIndex, resetCounter }}>
+      {children}
+    </ArtifactContext.Provider>
+  );
+}

client/src/Providers/CodeBlockContext.tsx

@@ -3,7 +3,6 @@ import { createContext, useContext, ReactNode, useCallback, useRef } from 'react
 type TCodeBlockContext = {
   getNextIndex: (skip: boolean) => number;
   resetCounter: () => void;
-  // codeBlocks: Map<number, string>;
 };
 
 export const CodeBlockContext = createContext<TCodeBlockContext>({} as TCodeBlockContext);
@@ -11,7 +10,6 @@ export const useCodeBlockContext = () => useContext(CodeBlockContext);
 
 export function CodeBlockProvider({ children }: { children: ReactNode }) {
   const counterRef = useRef(0);
-  // const codeBlocks = useRef(new Map<number, string>()).current;
 
   const getNextIndex = useCallback((skip: boolean) => {
     if (skip) {

client/src/Providers/EditorContext.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface EditorContextType {
+  isMutating: boolean;
+  setIsMutating: React.Dispatch<React.SetStateAction<boolean>>;
+  currentCode?: string;
+  setCurrentCode: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+
+const EditorContext = createContext<EditorContextType | undefined>(undefined);
+
+export function EditorProvider({ children }: { children: React.ReactNode }) {
+  const [isMutating, setIsMutating] = useState(false);
+  const [currentCode, setCurrentCode] = useState<string | undefined>();
+
+  return (
+    <EditorContext.Provider value={{ isMutating, setIsMutating, currentCode, setCurrentCode }}>
+      {children}
+    </EditorContext.Provider>
+  );
+}
+
+export function useEditorContext() {
+  const context = useContext(EditorContext);
+  if (context === undefined) {
+    throw new Error('useEditorContext must be used within an EditorProvider');
+  }
+  return context;
+}

client/src/Providers/index.ts

@@ -7,6 +7,7 @@ export * from './ToastContext';
 export * from './SearchContext';
 export * from './FileMapContext';
 export * from './AddedChatContext';
+export * from './EditorContext';
 export * from './ChatFormContext';
 export * from './BookmarkContext';
 export * from './MessageContext';
@@ -16,6 +17,7 @@ export * from './AgentsContext';
 export * from './AssistantsMapContext';
 export * from './AnnouncerContext';
 export * from './AgentsMapContext';
+export * from './ArtifactContext';
 export * from './CodeBlockContext';
 export * from './ToolCallsMapContext';
 export * from './SetConvoContext';