feat: auto switch to code, adjust prompt, remove unused code

api/app/clients/prompts/artifacts.js

@@ -24,6 +24,7 @@ Artifacts are for substantial, self-contained content that users might modify or
 - If a user asks the assistant to "draw an SVG" or "make a website," the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions.
 - If asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for users.
 - The assistant errs on the side of simplicity and avoids overusing artifacts for content that can be effectively presented within the conversation.
+- Always provide complete, specific, and fully functional content without any placeholders, ellipses, or 'remains the same' comments.
 
 <artifact_instructions>
   When collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps:

client/src/components/Artifacts/Artifact.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useRef, useState } from 'react';
 import throttle from 'lodash/throttle';
 import { visit } from 'unist-util-visit';
-import { useSetRecoilState, useRecoilValue } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import type { Pluggable } from 'unified';
 import type { Artifact } from '~/common';
 import { artifactsState } from '~/store/artifacts';
@@ -45,7 +45,6 @@ export function Artifact({
   node: unknown;
 }) {
   const setArtifacts = useSetRecoilState(artifactsState);
-  const currentArtifacts = useRecoilValue(artifactsState);
   const [artifact, setArtifact] = useState<Artifact | null>(null);
 
   const throttledUpdateRef = useRef(

client/src/hooks/Artifacts/useArtifacts.ts

@@ -25,6 +25,7 @@ export default function useArtifacts() {
   const lastContentRef = useRef<string | null>(null);
   const prevConversationIdRef = useRef<string | null>(null);
   const hasEnclosedArtifactRef = useRef<boolean>(false);
+  const hasAutoSwitchedToCodeRef = useRef<boolean>(false);
 
   useEffect(() => {
     const resetState = () => {
@@ -75,8 +76,13 @@ export default function useArtifacts() {
         if (hasEnclosedArtifact && !hasEnclosedArtifactRef.current) {
           setActiveTab('preview');
           hasEnclosedArtifactRef.current = true;
-        } else {
-          setActiveTab('code');
+          hasAutoSwitchedToCodeRef.current = false;
+        } else if (!hasEnclosedArtifactRef.current && !hasAutoSwitchedToCodeRef.current) {
+          const artifactStartContent = latestArtifact?.content?.slice(0, 50) ?? '';
+          if (artifactStartContent.length > 0 && latestMessageText.includes(artifactStartContent)) {
+            setActiveTab('code');
+            hasAutoSwitchedToCodeRef.current = true;
+          }
         }
       }
     }
@@ -86,6 +92,7 @@ export default function useArtifacts() {
     if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
       lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
       hasEnclosedArtifactRef.current = false;
+      hasAutoSwitchedToCodeRef.current = false;
     }
   }, [latestMessage]);