Merge staging into main

package.json

@@ -30,10 +30,10 @@
     "@codemirror/lang-rust": "^6.0.1",
     "@codemirror/lang-sql": "^6.8.0",
     "@codemirror/lang-xml": "^6.1.0",
-    "@langchain/anthropic": "^0.3.5",
+    "@langchain/anthropic": "^0.3.6",
     "@langchain/community": "^0.3.9",
     "@langchain/core": "^0.3.14",
-    "@langchain/google-genai": "^0.1.0",
+    "@langchain/google-genai": "^0.1.1",
     "@langchain/langgraph": "^0.2.18",
     "@langchain/langgraph-sdk": "^0.0.17",
     "@langchain/openai": "^0.3.11",
@@ -64,7 +64,7 @@
     "dotenv": "^16.4.5",
     "framer-motion": "^11.11.9",
     "js-cookie": "^3.0.5",
-    "langchain": "^0.3.4",
+    "langchain": "^0.3.5",
     "langsmith": "^0.1.61",
     "lodash": "^4.17.21",
     "lucide-react": "^0.441.0",

src/agent/open-canvas/nodes/generateArtifact.ts

@@ -1,4 +1,3 @@
-import { ChatOpenAI } from "@langchain/openai";
 import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
 import { NEW_ARTIFACT_PROMPT } from "../prompts";
 import {
@@ -9,8 +8,13 @@ import {
   Reflections,
 } from "../../../types";
 import { z } from "zod";
-import { ensureStoreInConfig, formatReflections } from "../../utils";
+import {
+  ensureStoreInConfig,
+  formatReflections,
+  getModelNameAndProviderFromConfig,
+} from "../../utils";
 import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { initChatModel } from "langchain/chat_models/universal";
 
 /**
  * Generate a new artifact based on the user's query.
@@ -19,9 +23,11 @@ export const generateArtifact = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ): Promise<OpenCanvasGraphReturnType> => {
-  const smallModel = new ChatOpenAI({
-    model: "gpt-4o-mini",
+  const { modelName, modelProvider } =
+    getModelNameAndProviderFromConfig(config);
+  const smallModel = await initChatModel(modelName, {
     temperature: 0.5,
+    modelProvider,
   });
 
   const store = ensureStoreInConfig(config);
@@ -80,6 +86,11 @@ export const generateArtifact = async (
   const formattedNewArtifactPrompt = NEW_ARTIFACT_PROMPT.replace(
     "{reflections}",
     memoriesAsString
+  ).replace(
+    "{disableChainOfThought}",
+    modelName.includes("claude")
+      ? "\n\nIMPORTANT: Do NOT preform chain of thought beforehand. Instead, go STRAIGHT to generating the tool response. This is VERY important."
+      : ""
   );
 
   const response = await modelWithArtifactTool.invoke(

src/agent/open-canvas/nodes/generatePath.ts

@@ -1,4 +1,3 @@
-import { ChatOpenAI } from "@langchain/openai";
 import {
   CURRENT_ARTIFACT_PROMPT,
   NO_ARTIFACT_PROMPT,
@@ -8,14 +7,20 @@ import {
 } from "../prompts";
 import { OpenCanvasGraphAnnotation } from "../state";
 import { z } from "zod";
-import { formatArtifactContentWithTemplate } from "../../utils";
+import {
+  formatArtifactContentWithTemplate,
+  getModelNameAndProviderFromConfig,
+} from "../../utils";
 import { getArtifactContent } from "../../../hooks/use-graph/utils";
+import { initChatModel } from "langchain/chat_models/universal";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
 
 /**
  * Routes to the proper node in the graph based on the user's query.
  */
 export const generatePath = async (
-  state: typeof OpenCanvasGraphAnnotation.State
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
 ) => {
   if (state.highlightedCode) {
     return {
@@ -88,10 +93,13 @@ export const generatePath = async (
     ? "rewriteArtifact"
     : "generateArtifact";
 
-  const modelWithTool = new ChatOpenAI({
-    model: "gpt-4o-mini",
+  const { modelName, modelProvider } =
+    getModelNameAndProviderFromConfig(config);
+  const model = await initChatModel(modelName, {
     temperature: 0,
-  }).withStructuredOutput(
+    modelProvider,
+  });
+  const modelWithTool = model.withStructuredOutput(
     z.object({
       route: z
         .enum(["respondToQuery", artifactRoute])

src/agent/open-canvas/nodes/rewriteArtifact.ts

@@ -1,4 +1,3 @@
-import { ChatOpenAI } from "@langchain/openai";
 import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
 import {
   GET_TITLE_TYPE_REWRITE_ARTIFACT,
@@ -53,26 +52,24 @@ export const rewriteArtifact = async (
         "The programming language of the code artifact. ONLY update this if the user is making a request which changes the programming language of the code artifact, or is asking for a code artifact to be generated."
       ),
   });
-  // TODO: Once Anthropic tool call streaming is supported, use the custom model here.
-  const toolCallingModel = new ChatOpenAI({
-    model: "gpt-4o-mini",
-    temperature: 0,
-  })
-    .bindTools([
-      {
-        name: "optionallyUpdateArtifactMeta",
-        schema: optionallyUpdateArtifactMetaSchema,
-        description: "Update the artifact meta information, if necessary.",
-      },
-    ])
-    .withConfig({ runName: "optionally_update_artifact_meta" });
-
   const { modelName, modelProvider } =
     getModelNameAndProviderFromConfig(config);
-  const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
+  const model = await initChatModel(modelName, {
+    temperature: 0,
     modelProvider,
   });
+  const toolCallingModel = model
+    .bindTools(
+      [
+        {
+          name: "optionallyUpdateArtifactMeta",
+          schema: optionallyUpdateArtifactMetaSchema,
+          description: "Update the artifact meta information, if necessary.",
+        },
+      ],
+      { tool_choice: "optionallyUpdateArtifactMeta" }
+    )
+    .withConfig({ runName: "optionally_update_artifact_meta" });
 
   const store = ensureStoreInConfig(config);
   const assistantId = config.configurable?.assistant_id;
@@ -139,7 +136,7 @@ export const rewriteArtifact = async (
         : ""
     );
 
-  const smallModelWithConfig = smallModel.withConfig({
+  const smallModelWithConfig = model.withConfig({
     runName: "rewrite_artifact_model_call",
   });
 

src/agent/open-canvas/prompts.ts

@@ -25,7 +25,8 @@ ${DEFAULT_CODE_PROMPT_RULES}
 You also have the following reflections on style guidelines and general memories/facts about the user to use when generating your response.
 <reflections>
 {reflections}
-</reflections>`;
+</reflections>
+{disableChainOfThought}`;
 
 export const UPDATE_HIGHLIGHTED_ARTIFACT_PROMPT = `You are an AI assistant, and the user has requested you make an update to a specific part of an artifact you generated in the past.
 

src/agent/utils.ts

@@ -114,13 +114,3 @@ export const getModelNameAndProviderFromConfig = (
 
   throw new Error("Unknown model provider");
 };
-
-export const getModelNameFromConfig = (
-  config: LangGraphRunnableConfig
-): string => {
-  const customModelName = config.configurable?.customModelName as string;
-  if (!customModelName) {
-    throw new Error("Model name is missing in config.");
-  }
-  return customModelName;
-};

src/components/artifacts/ArtifactLoading.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import { Skeleton } from "../ui/skeleton";
+
+export function ArtifactLoading() {
+  return (
+    <div className="w-full h-full flex flex-col">
+      <div className="flex items-center justify-between m-4">
+        <Skeleton className="w-56 h-10" />
+        <div className="flex items-center justify-center gap-2">
+          <Skeleton className="w-6 h-6" />
+          <Skeleton className="w-16 h-6" />
+          <Skeleton className="w-6 h-6" />
+        </div>
+        <div className="flex items-center justify-end gap-2">
+          <Skeleton className="w-10 h-10 rounded-md" />
+          <Skeleton className="w-10 h-10 rounded-md" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-1 m-4">
+        {Array.from({ length: 25 }).map((_, i) => (
+          <Skeleton
+            key={i}
+            className={cn(
+              "h-5",
+              ["w-1/4", "w-1/3", "w-2/5", "w-1/2", "w-3/5", "w-2/3", "w-3/4"][
+                Math.floor(Math.random() * 7)
+              ]
+            )}
+          />
+        ))}
+      </div>
+      <div className="flex items-center justify-end gap-2 mt-auto m-4">
+        <Skeleton className="w-12 h-12 rounded-2xl" />
+        <Skeleton className="w-12 h-12 rounded-2xl" />
+      </div>
+    </div>
+  );
+}

src/components/artifacts/ArtifactRenderer.tsx

@@ -39,6 +39,7 @@ import { TextRenderer } from "./TextRenderer";
 import { CustomQuickActions } from "./actions_toolbar/custom";
 import { getArtifactContent } from "@/hooks/use-graph/utils";
 import { isArtifactCodeContent } from "@/lib/artifact_content_types";
+import { ArtifactLoading } from "./ArtifactLoading";
 
 export interface ArtifactRendererProps {
   userId: string;
@@ -286,6 +287,11 @@ export function ArtifactRenderer(props: ArtifactRendererProps) {
   const currentArtifactContent = props.artifact
     ? getArtifactContent(props.artifact)
     : undefined;
+
+  if (!props.artifact || (!currentArtifactContent && props.isStreaming)) {
+    return <ArtifactLoading />;
+  }
+
   if (!props.artifact || !currentArtifactContent) {
     return <div className="w-full h-full"></div>;
   }

src/constants.ts

@@ -1,5 +1,5 @@
 export const LANGGRAPH_API_URL =
-  process.env.LANGGRAPH_API_URL ?? "http://localhost:54790";
+  process.env.LANGGRAPH_API_URL ?? "http://localhost:56993";
 // v2 is tied to the 'open-canvas-prod' deployment.
 export const ASSISTANT_ID_COOKIE = "oc_assistant_id_v2";
 // export const ASSISTANT_ID_COOKIE = "oc_assistant_id";
@@ -50,7 +50,7 @@ export const GEMINI_MODELS = [
     label: "Gemini 1.5 Flash",
   },
 ];
-export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = "claude-3-haiku-20240307";
+export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = "gpt-4o-mini";
 export type OPENAI_MODEL_NAMES = (typeof OPENAI_MODELS)[number]["name"];
 export type ANTHROPIC_MODEL_NAMES = (typeof ANTHROPIC_MODELS)[number]["name"];
 export type FIREWORKS_MODEL_NAMES = (typeof FIREWORKS_MODELS)[number]["name"];

src/hooks/use-graph/useGraph.tsx

@@ -327,7 +327,7 @@ export function useGraph(useGraphInput: UseGraphInput) {
 
             if (chunk.data.metadata.langgraph_node === "generateArtifact") {
               generateArtifactToolCallStr +=
-                chunk.data.data.chunk?.[1]?.tool_call_chunks?.[0]?.args;
+                chunk.data.data.chunk?.[1]?.tool_call_chunks?.[0]?.args || "";
               let newArtifactText: ArtifactToolResponse | undefined = undefined;
 
               // Attempt to parse the tool call chunk.
@@ -534,6 +534,7 @@ export function useGraph(useGraphInput: UseGraphInput) {
               chunk.data.name === "rewrite_artifact_model_call" &&
               rewriteArtifactMeta
             ) {
+              console.log("IN THIS NODE");
               if (!artifact) {
                 toast({
                   title: "Error",

yarn.lock

@@ -667,10 +667,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@langchain/anthropic@^0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@langchain/anthropic/-/anthropic-0.3.5.tgz#23413fa880c38b1c57d564c147f5399d504a56ee"
-  integrity sha512-AWlF8mSTcxlDdLD+FD9TYFnVaQSCp4foblCDzUR/Xnhn8IvZSzK+3nbxkdVM4a8LS+7GnxP9ED88ZAUvZSQmQg==
+"@langchain/anthropic@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@langchain/anthropic/-/anthropic-0.3.6.tgz#79daf63922a2623be4cdcc4d081db6f227059c52"
+  integrity sha512-xhTvWJIJLfJZwsLG0sWpGHVUmOMBZeKBPBDqjXSAoOWqb8THRu8NW0+4MA1W9Ol2e+gwW+jPSZZxxFuHpcbVzA==
   dependencies:
     "@anthropic-ai/sdk" "^0.27.3"
     fast-xml-parser "^4.4.1"
@@ -710,10 +710,10 @@
     zod "^3.22.4"
     zod-to-json-schema "^3.22.3"
 
-"@langchain/google-genai@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@langchain/google-genai/-/google-genai-0.1.0.tgz#89552873210d72a5834de20fcbef3e6753283344"
-  integrity sha512-6rIba77zJVMj+048tLfkCBrkFbfAMiT+AfLEsu5s+CFoFmXMiI/dbKeDL4vhUWrJVb9uL4ZZyrnl0nKxyEKYgA==
+"@langchain/google-genai@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@langchain/google-genai/-/google-genai-0.1.1.tgz#85528c64b518a285ec7d22a8793296f27cec27ff"
+  integrity sha512-uuZJXWXTTTx8FGmhr/utkpiKgOZU4EXvkPIq+opLhpzCN7hYQXXMAIykjZPhAyZjazga1jxH8YOiGonM/3jhDA==
   dependencies:
     "@google/generative-ai" "^0.7.0"
     zod-to-json-schema "^3.22.4"
@@ -4641,7 +4641,7 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
-"langchain@>=0.2.3 <0.4.0", langchain@^0.3.4:
+"langchain@>=0.2.3 <0.4.0":
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/langchain/-/langchain-0.3.4.tgz#092cc86fa07b134da2fecba8cfd8ee1280a73f85"
   integrity sha512-s0FAtrg22jgCSkuwhZdw4c+ksdGQjNCf2vCzV6qZpZohTKGsN7lgjWy+OpnG76L917P/l95qem+3wivS3tANXQ==
@@ -4659,6 +4659,24 @@ kleur@^4.0.3:
     zod "^3.22.4"
     zod-to-json-schema "^3.22.3"
 
+langchain@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/langchain/-/langchain-0.3.5.tgz#87b282454bc215b12b920d4dd5e35ed58030bad1"
+  integrity sha512-Gq0xC45Sq6nszS8kQG9suCrmBsuXH0INMmiF7D2TwPb6mtG35Jiq4grCk9ykpwPsarTHdty3SzUbII/FqiYSSw==
+  dependencies:
+    "@langchain/openai" ">=0.1.0 <0.4.0"
+    "@langchain/textsplitters" ">=0.0.0 <0.2.0"
+    js-tiktoken "^1.0.12"
+    js-yaml "^4.1.0"
+    jsonpointer "^5.0.1"
+    langsmith "^0.2.0"
+    openapi-types "^12.1.3"
+    p-retry "4"
+    uuid "^10.0.0"
+    yaml "^2.2.1"
+    zod "^3.22.4"
+    zod-to-json-schema "^3.22.3"
+
 langsmith@^0.1.61:
   version "0.1.61"
   resolved "https://registry.yarnpkg.com/langsmith/-/langsmith-0.1.61.tgz#4c3d2677fe79d9f936198918c3af6c48e54f79d7"
@@ -7114,6 +7132,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7202,6 +7221,7 @@ stringify-entities@^4.0.0:
     character-entities-legacy "^3.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==