connect to BE

package.json

@@ -71,6 +71,7 @@
     "lucide-react": "^0.441.0",
     "next": "14.2.7",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-json-view": "^1.21.3",

src/agent/open-canvas/index.ts

@@ -1,11 +1,11 @@
 import { END, Send, START, StateGraph } from "@langchain/langgraph";
 import { DEFAULT_INPUTS } from "../../constants";
 import { customAction } from "./nodes/customAction";
-import { generateArtifact } from "./nodes/generateArtifact";
+import { generateArtifact } from "./nodes/generate-artifact";
 import { generateFollowup } from "./nodes/generateFollowup";
 import { generatePath } from "./nodes/generatePath";
 import { reflectNode } from "./nodes/reflect";
-import { rewriteArtifact } from "./nodes/rewriteArtifact";
+import { rewriteArtifact } from "./nodes/rewrite-artifact";
 import { rewriteArtifactTheme } from "./nodes/rewriteArtifactTheme";
 import { updateArtifact } from "./nodes/updateArtifact";
 import { replyToGeneralInput } from "./nodes/replyToGeneralInput";

src/agent/open-canvas/nodes/generate-artifact/index.ts

@@ -0,0 +1,61 @@
+import {
+  OpenCanvasGraphAnnotation,
+  OpenCanvasGraphReturnType,
+} from "../../state";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import {
+  getFormattedReflections,
+  getModelFromConfig,
+  getModelNameAndProviderFromConfig,
+  optionallyGetSystemPromptFromConfig,
+} from "@/agent/utils";
+import { ARTIFACT_TOOL_SCHEMA } from "./schemas";
+import { ArtifactV3 } from "@/types";
+import { createArtifactContent, formatNewArtifactPrompt } from "./utils";
+
+/**
+ * Generate a new artifact based on the user's query.
+ */
+export const generateArtifact = async (
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<OpenCanvasGraphReturnType> => {
+  const { modelName } = getModelNameAndProviderFromConfig(config);
+  const smallModel = await getModelFromConfig(config, 0.5);
+
+  const modelWithArtifactTool = smallModel.bindTools(
+    [
+      {
+        name: "generate_artifact",
+        schema: ARTIFACT_TOOL_SCHEMA,
+      },
+    ],
+    { tool_choice: "generate_artifact" }
+  );
+
+  const memoriesAsString = await getFormattedReflections(config);
+  const formattedNewArtifactPrompt = formatNewArtifactPrompt(
+    memoriesAsString,
+    modelName
+  );
+
+  const userSystemPrompt = optionallyGetSystemPromptFromConfig(config);
+  const fullSystemPrompt = userSystemPrompt
+    ? `${userSystemPrompt}\n${formattedNewArtifactPrompt}`
+    : formattedNewArtifactPrompt;
+
+  const response = await modelWithArtifactTool.invoke(
+    [{ role: "system", content: fullSystemPrompt }, ...state.messages],
+    { runName: "generate_artifact" }
+  );
+
+  const newArtifactContent = createArtifactContent(response.tool_calls?.[0]);
+  const newArtifact: ArtifactV3 = {
+    currentIndex: 1,
+    contents: [newArtifactContent],
+  };
+
+  return {
+    artifact: newArtifact,
+  };
+};

src/agent/open-canvas/nodes/generate-artifact/schemas.ts

@@ -0,0 +1,33 @@
+import { PROGRAMMING_LANGUAGES } from "@/types";
+import { z } from "zod";
+
+export const ARTIFACT_TOOL_SCHEMA = z.object({
+  type: z
+    .enum(["code", "text"])
+    .describe("The content type of the artifact generated."),
+  language: z
+    .enum(
+      PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
+        string,
+        ...string[],
+      ]
+    )
+    .optional()
+    .describe(
+      "The language/programming language of the artifact generated.\n" +
+        "If generating code, it should be one of the options, or 'other'.\n" +
+        "If not generating code, the language should ALWAYS be 'other'."
+    ),
+  isValidReact: z
+    .boolean()
+    .optional()
+    .describe(
+      "Whether or not the generated code is valid React code. Only populate this field if generating code."
+    ),
+  artifact: z.string().describe("The content of the artifact to generate."),
+  title: z
+    .string()
+    .describe(
+      "A short title to give to the artifact. Should be less than 5 words."
+    ),
+});

src/agent/open-canvas/nodes/generate-artifact/utils.ts

@@ -0,0 +1,39 @@
+import { NEW_ARTIFACT_PROMPT } from "../../prompts";
+import { ArtifactCodeV3, ArtifactMarkdownV3 } from "@/types";
+import { ToolCall } from "@langchain/core/messages/tool";
+
+export const formatNewArtifactPrompt = (
+  memoriesAsString: string,
+  modelName: string
+): string => {
+  return 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."
+      : ""
+  );
+};
+
+export const createArtifactContent = (
+  toolCall: ToolCall | undefined
+): ArtifactCodeV3 | ArtifactMarkdownV3 => {
+  const toolArgs = toolCall?.args;
+  const artifactType = toolArgs?.type;
+
+  if (artifactType === "code") {
+    return {
+      index: 1,
+      type: "code",
+      title: toolArgs?.title,
+      code: toolArgs?.artifact,
+      language: toolArgs?.language,
+    };
+  }
+
+  return {
+    index: 1,
+    type: "text",
+    title: toolArgs?.title,
+    fullMarkdown: toolArgs?.artifact,
+  };
+};

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

@@ -22,6 +22,7 @@ export const generatePath = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ) => {
+  console.log("config.configurable!!", config.configurable);
   if (state.highlightedCode) {
     return {
       next: "updateArtifact",

src/agent/open-canvas/nodes/rewrite-artifact/index.ts

@@ -0,0 +1,68 @@
+import {
+  OpenCanvasGraphAnnotation,
+  OpenCanvasGraphReturnType,
+} from "../../state";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { optionallyUpdateArtifactMeta } from "./update-meta";
+import { buildPrompt, createNewArtifactContent, validateState } from "./utils";
+import {
+  getFormattedReflections,
+  getModelFromConfig,
+  optionallyGetSystemPromptFromConfig,
+} from "@/agent/utils";
+import { isArtifactMarkdownContent } from "@/lib/artifact_content_types";
+
+export const rewriteArtifact = async (
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<OpenCanvasGraphReturnType> => {
+  const smallModelWithConfig = (await getModelFromConfig(config)).withConfig({
+    runName: "rewrite_artifact_model_call",
+  });
+  const memoriesAsString = await getFormattedReflections(config);
+  const { currentArtifactContent, recentHumanMessage } = validateState(state);
+
+  const artifactMetaToolCall = await optionallyUpdateArtifactMeta(
+    state,
+    config
+  );
+  const artifactType = artifactMetaToolCall?.args?.type;
+  const isNewType = artifactType !== currentArtifactContent.type;
+
+  const artifactContent = isArtifactMarkdownContent(currentArtifactContent)
+    ? currentArtifactContent.fullMarkdown
+    : currentArtifactContent.code;
+
+  const formattedPrompt = buildPrompt({
+    artifactContent,
+    memoriesAsString,
+    isNewType,
+    artifactMetaToolCall,
+  });
+
+  const userSystemPrompt = optionallyGetSystemPromptFromConfig(config);
+  const fullSystemPrompt = userSystemPrompt
+    ? `${userSystemPrompt}\n${formattedPrompt}`
+    : formattedPrompt;
+
+  const newArtifactResponse = await smallModelWithConfig.invoke([
+    { role: "system", content: fullSystemPrompt },
+    recentHumanMessage,
+  ]);
+
+  const newArtifactContent = createNewArtifactContent({
+    artifactType,
+    state,
+    currentArtifactContent,
+    artifactMetaToolCall,
+    newContent: newArtifactResponse.content as string,
+  });
+
+  return {
+    artifact: {
+      ...state.artifact,
+      currentIndex: state.artifact.contents.length + 1,
+      contents: [...state.artifact.contents, newArtifactContent],
+    },
+  };
+};

src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts

@@ -0,0 +1,22 @@
+import { PROGRAMMING_LANGUAGES } from "@/types";
+import { z } from "zod";
+
+export const OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA = z.object({
+  type: z.enum(["text", "code"]).describe("The type of the artifact content."),
+  title: z
+    .string()
+    .optional()
+    .describe(
+      "The new title to give the artifact. ONLY update this if the user is making a request which changes the subject/topic of the artifact."
+    ),
+  language: z
+    .enum(
+      PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
+        string,
+        ...string[],
+      ]
+    )
+    .describe(
+      "The language of the code artifact. This should be populated with the programming language if the user is requesting code to be written, or 'other', in all other cases."
+    ),
+});