small fixes

helpers/tools.ts

@@ -178,7 +178,7 @@ For better results, you can specify the region parameter to get results from a s
         name: TOOL_SYSTEM_PROMPT_ENV_VAR,
         description: "System prompt for artifact code generator tool.",
         value:
-          "You are a code assistant that can generate and execute code using its tools. Don't generate code yourself, use the provided tools instead. Do not show the code or sandbox url in chat, just describe the steps to build the application based on the code that is generated by your tools.",
+          "You are a code assistant that can generate and execute code using its tools. Don't generate code yourself, use the provided tools instead. Do not show the code or sandbox url in chat, just describe the steps to build the application based on the code that is generated by your tools. Do not describe how to run the code, just the steps to build the application.",
       },
     ],
   },

templates/components/engines/typescript/agent/tools/code-generator.ts

@@ -33,7 +33,7 @@ port: Port number used by the resulted artifact. Null when no ports are exposed.
 file_path: Relative path to the file, including the file name.
 code: Code generated by the artifact. Only runnable code is allowed.
 
-Make sure to use the correct syntax for the programming language you're using.
+Make sure to use the correct syntax for the programming language you're using. Make sure to generate only one code file. If you need to use CSS, make sure to include the CSS in the code file using Tailwind CSS syntax.
 `;
 
 // detail information to execute code
@@ -62,7 +62,7 @@ export type CodeGeneratorToolParams = {
 const DEFAULT_META_DATA: ToolMetadata<JSONSchemaType<CodeGeneratorParameter>> =
   {
     name: "artifact",
-    description: `Generate a code artifact based on the input.`,
+    description: `Generate a code artifact based on the input. Don't call this tool if the user has not asked for code generation. E.g. if the user asks to write a description or specification, don't call this tool.`,
     parameters: {
       type: "object",
       properties: {

templates/components/llamaindex/typescript/streaming/annotations.ts

@@ -92,7 +92,6 @@ function retrieveLatestArtifact(messages: Message[]): MessageContentDetail[] {
     ) {
       const toolOutput = data.toolOutput as { output?: { code?: string } };
       if (toolOutput.output?.code) {
-        console.log("latestArtifact", toolOutput.output?.code);
         return [
           {
             type: "text",

templates/types/streaming/nextjs/app/components/ui/chat/widgets/Artifact.tsx

@@ -234,11 +234,19 @@ function RunTimeError({
 
 function CodeSandboxPreview({ url }: { url: string }) {
   const [loading, setLoading] = useState(true);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    if (!loading && iframeRef.current) {
+      iframeRef.current.focus();
+    }
+  }, [loading]);
 
   return (
     <>
       <iframe
         key={url}
+        ref={iframeRef}
         className="h-full w-full"
         sandbox="allow-forms allow-scripts allow-same-origin"
         loading="lazy"
@@ -367,9 +375,3 @@ function closePanel() {
     panel.classList.add("hidden");
   });
 }
-
-if (typeof window !== "undefined") {
-  document?.getElementById("chat-input")?.addEventListener("click", () => {
-    closePanel();
-  });
-}