Merge pull request langchain-ai#12 from langchain-ai/brace/fixes

fix: Series of ux/logic fixes

src/agent/index.ts

@@ -461,14 +461,26 @@ const generatePath = async (state: typeof GraphAnnotation.State) => {
     };
   }
 
+  // Use either the currently selected artifact, or the most recent artifact if no artifact is selected.
+  const selectedArtifact = state.selectedArtifactId
+    ? state.artifacts.find(
+        (artifact) => artifact.id === state.selectedArtifactId
+      )
+    : state.artifacts[state.artifacts.length - 1];
+
   // Call model and decide if we need to respond to a users query, or generate a new artifact
   const formattedPrompt = ROUTE_QUERY_PROMPT.replace(
     "{recentMessages}",
     state.messages
       .slice(-3)
       .map((message) => `${message._getType()}: ${message.content}`)
       .join("\n\n")
-  ).replace("{artifacts}", formatArtifacts(state.artifacts, true));
+  ).replace(
+    "{artifacts}",
+    selectedArtifact
+      ? formatArtifacts([selectedArtifact], true)
+      : "No artifacts found."
+  );
 
   const modelWithTool = new ChatOpenAI({
     model: "gpt-4o-mini",

src/agent/prompts.ts

@@ -110,9 +110,10 @@ export const ROUTE_QUERY_PROMPT = `You are an assistant tasked with routing the
 You should look at this message in isolation and determine where to best route there query.
 Your options are as follows:
 
-- 'updateArtifact': The user has requested some sort of change or edit to an existing artifact. Use their recent message and the currently selected artifact (if any) to determine what to do.
+- 'updateArtifact': The user has requested some sort of change or edit to an existing artifact. Use their recent message and the currently selected artifact (if any) to determine what to do. You should ONLY select this if the user has clearly requested a change to the artifact, otherwise you should lean towards either generating a new artifact or responding to their query.
+  It is very important you do not edit the artifact unless clearly requested by the user.
 - 'respondToQuery': The user has asked a question, or has submitted a general message which requires a response, but does not require updating or generating an entirely new artifact.
-- 'generateArtifact': The user has inputted a request which requires generating an entirely new artifact.
+- 'generateArtifact': The user has inputted a request which requires generating a new artifact.
 
 If you believe the user wants to update an existing artifact, you MUST also supply the ID of the artifact they are referring to.
 

src/app/api/[..._path]/route.ts

@@ -30,7 +30,7 @@ async function handleRequest(req: NextRequest, method: string) {
       options.body = await req.text();
     }
 
-    const apiUrl = process.env.LANGGRAPH_API_URL ?? "http://localhost:56645";
+    const apiUrl = process.env.LANGGRAPH_API_URL ?? "http://localhost:64102";
     const res = await fetch(`${apiUrl}/${path}${queryString}`, options);
 
     const headers = new Headers({

src/components/Primitives.tsx

@@ -93,7 +93,7 @@ const MyThreadWelcome: FC = () => {
 
 const MyComposer: FC = () => {
   return (
-    <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex w-full flex-wrap items-end rounded-lg border px-2.5 shadow-sm transition-colors ease-in">
+    <ComposerPrimitive.Root className="focus-within:border-aui-ring/20 flex w-full flex-wrap items-end rounded-lg border px-2.5 shadow-sm transition-colors ease-in bg-white">
       <ComposerPrimitive.Input
         autoFocus
         placeholder="Write a message..."

src/hooks/useGraph.tsx

@@ -62,9 +62,19 @@ export function useGraph() {
 
     const client = createClient();
 
+    const defaultInputs = {
+      selectedArtifactId: undefined,
+      highlighted: undefined,
+      next: undefined,
+      language: undefined,
+      artifactLength: undefined,
+      regenerateWithEmojis: undefined,
+      readingLevel: undefined,
+    };
+
     const input = {
-      // Ensure we remove this from the state, unless it's included in the params.
-      highlighted: params.highlighted ?? undefined,
+      // Ensure we set all existing values (except `artifacts` and `messages`) to undefined by default.
+      ...defaultInputs,
       messages: params.messages?.filter((msg) => {
         if (msg.role !== "assistant") {
           return true;
@@ -123,7 +133,8 @@ export function useGraph() {
                   },
                 ];
               });
-              if (!selectedArtifactId) {
+              // Ensure the newest generated artifact is selected when generating.
+              if (!selectedArtifactId || selectedArtifactId !== artifactId) {
                 setSelectedArtifactId(artifactId);
               }
             }