diff --git a/api/app/clients/prompts/artifacts.js b/api/app/clients/prompts/artifacts.js index e2b430e76a..bacdd9a811 100644 --- a/api/app/clients/prompts/artifacts.js +++ b/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. When collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps: diff --git a/client/src/components/Artifacts/Artifact.tsx b/client/src/components/Artifacts/Artifact.tsx index ac778b228c..a8ddc6e944 100644 --- a/client/src/components/Artifacts/Artifact.tsx +++ b/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(null); const throttledUpdateRef = useRef( diff --git a/client/src/hooks/Artifacts/useArtifacts.ts b/client/src/hooks/Artifacts/useArtifacts.ts index a87494f1a0..a60df713cc 100644 --- a/client/src/hooks/Artifacts/useArtifacts.ts +++ b/client/src/hooks/Artifacts/useArtifacts.ts @@ -25,6 +25,7 @@ export default function useArtifacts() { const lastContentRef = useRef(null); const prevConversationIdRef = useRef(null); const hasEnclosedArtifactRef = useRef(false); + const hasAutoSwitchedToCodeRef = useRef(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]);