Enable Passing External Documents for Analysis in Code Sandbox (#960)

- Allow passing user files as input into code sandbox for analysis
- Update prompt to give more example of complex, multi-line code
- Simplify logic for model. Run one program at a time, 
  instead of allowing model to run multiple programs in parallel
- Show Code generated charts and docs in Reference pane of web app and make them downloaded

Author: debanjum

src/interface/web/app/common/chatFunctions.ts

@@ -139,33 +139,6 @@ export function processMessageChunk(
         if (onlineContext) currentMessage.onlineContext = onlineContext;
         if (context) currentMessage.context = context;
 
-        // Replace file links with base64 data
-        currentMessage.rawResponse = renderCodeGenImageInline(
-            currentMessage.rawResponse,
-            codeContext,
-        );
-
-        // Add code context files to the message
-        if (codeContext) {
-            Object.entries(codeContext).forEach(([key, value]) => {
-                value.results.output_files?.forEach((file) => {
-                    if (file.filename.endsWith(".png") || file.filename.endsWith(".jpg")) {
-                        // Don't add the image again if it's already in the message!
-                        if (!currentMessage.rawResponse.includes(`![${file.filename}](`)) {
-                            currentMessage.rawResponse += `\n\n![${file.filename}](data:image/png;base64,${file.b64_data})`;
-                        }
-                    } else if (
-                        file.filename.endsWith(".txt") ||
-                        file.filename.endsWith(".org") ||
-                        file.filename.endsWith(".md")
-                    ) {
-                        const decodedText = atob(file.b64_data);
-                        currentMessage.rawResponse += `\n\n\`\`\`\n${decodedText}\n\`\`\``;
-                    }
-                });
-            });
-        }
-
         // Mark current message streaming as completed
         currentMessage.completed = true;
     }
@@ -200,9 +173,13 @@ export function renderCodeGenImageInline(message: string, codeContext: CodeConte
     Object.values(codeContext).forEach((contextData) => {
         contextData.results.output_files?.forEach((file) => {
             const regex = new RegExp(`!?\\[.*?\\]\\(.*${file.filename}\\)`, "g");
-            if (file.filename.match(/\.(png|jpg|jpeg|gif|webp)$/i)) {
+            if (file.filename.match(/\.(png|jpg|jpeg)$/i)) {
                 const replacement = `![${file.filename}](data:image/${file.filename.split(".").pop()};base64,${file.b64_data})`;
                 message = message.replace(regex, replacement);
+            } else if (file.filename.match(/\.(txt|org|md|csv|json)$/i)) {
+                // render output files generated by codegen as downloadable links
+                const replacement = `![${file.filename}](data:text/plain;base64,${file.b64_data})`;
+                message = message.replace(regex, replacement);
             }
         });
     });

src/interface/web/app/common/iconUtils.tsx

@@ -40,7 +40,6 @@ import {
     Leaf,
     NewspaperClipping,
     OrangeSlice,
-    Rainbow,
     SmileyMelting,
     YinYang,
     SneakerMove,
@@ -247,6 +246,13 @@ function getIconFromFilename(
         case "doc":
         case "docx":
             return <MicrosoftWordLogo className={className} />;
+        case "csv":
+        case "json":
+            return <MathOperations className={className} />;
+        case "txt":
+            return <Notebook className={className} />;
+        case "py":
+            return <Code className={className} />;
         case "jpg":
         case "jpeg":
         case "png":

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -420,6 +420,24 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
                 message += `\n\n${inferredQueries[0]}`;
             }
         }
+
+        // Replace file links with base64 data
+        message = renderCodeGenImageInline(message, props.chatMessage.codeContext);
+
+        // Add code context files to the message
+        if (props.chatMessage.codeContext) {
+            Object.entries(props.chatMessage.codeContext).forEach(([key, value]) => {
+                value.results.output_files?.forEach((file) => {
+                    if (file.filename.endsWith(".png") || file.filename.endsWith(".jpg")) {
+                        // Don't add the image again if it's already in the message!
+                        if (!message.includes(`![${file.filename}](`)) {
+                            message += `\n\n![${file.filename}](data:image/png;base64,${file.b64_data})`;
+                        }
+                    }
+                });
+            });
+        }
+
         // Handle user attached images rendering
         let messageForClipboard = message;
         let messageToRender = message;
@@ -445,48 +463,6 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
             messageToRender = `${userImagesInHtml}${messageToRender}`;
         }
 
-        if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image") {
-            message = `![generated image](data:image/png;base64,${message})`;
-        } else if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image2") {
-            message = `![generated image](${message})`;
-        } else if (
-            props.chatMessage.intent &&
-            props.chatMessage.intent.type == "text-to-image-v3"
-        ) {
-            message = `![generated image](data:image/webp;base64,${message})`;
-        }
-        if (
-            props.chatMessage.intent &&
-            props.chatMessage.intent.type.includes("text-to-image") &&
-            props.chatMessage.intent["inferred-queries"]?.length > 0
-        ) {
-            message += `\n\n${props.chatMessage.intent["inferred-queries"][0]}`;
-        }
-
-        // Replace file links with base64 data
-        message = renderCodeGenImageInline(message, props.chatMessage.codeContext);
-
-        // Add code context files to the message
-        if (props.chatMessage.codeContext) {
-            Object.entries(props.chatMessage.codeContext).forEach(([key, value]) => {
-                value.results.output_files?.forEach((file) => {
-                    if (file.filename.endsWith(".png") || file.filename.endsWith(".jpg")) {
-                        // Don't add the image again if it's already in the message!
-                        if (!message.includes(`![${file.filename}](`)) {
-                            message += `\n\n![${file.filename}](data:image/png;base64,${file.b64_data})`;
-                        }
-                    } else if (
-                        file.filename.endsWith(".txt") ||
-                        file.filename.endsWith(".org") ||
-                        file.filename.endsWith(".md")
-                    ) {
-                        const decodedText = atob(file.b64_data);
-                        message += `\n\n\`\`\`\n${decodedText}\n\`\`\``;
-                    }
-                });
-            });
-        }
-
         // Set the message text
         setTextRendered(messageForClipboard);