Merge branch 'main' of https://github.com/langchain-ai/open-canvas in…

…to staging

README.md

@@ -2,7 +2,7 @@
 
 [TRY IT OUT HERE](https://opencanvas.langchain.com/)
 
-![Screenshot of app](./public/screenshot.jpg)
+![Screenshot of app](./public/screenshot.png)
 
 Open Canvas is an open source web application for collaborating with agents to better write documents. It is inspired by [OpenAI's "Canvas"](https://openai.com/index/introducing-canvas/), but with a few key differences.
 

src/agent/reflection/index.ts

@@ -45,7 +45,9 @@ export const reflect = async (
   const model = new ChatAnthropic({
     model: "claude-3-5-sonnet-20240620",
     temperature: 0,
-  }).bindTools([generateReflectionTool]);
+  }).bindTools([generateReflectionTool], {
+    tool_choice: "generate_reflections",
+  });
 
   const currentArtifactContent = state.artifact
     ? getArtifactContent(state.artifact)

src/agent/utils.ts

@@ -1,5 +1,6 @@
 import { BaseStore, LangGraphRunnableConfig } from "@langchain/langgraph";
 import { ArtifactCodeV3, ArtifactMarkdownV3, Reflections } from "../types";
+import { isArtifactCodeContent } from "@/lib/artifact_content_types";
 
 export const formatReflections = (
   reflections: Reflections,
@@ -24,11 +25,11 @@ export const formatReflections = (
 
   const styleString = `The following is a list of style guidelines previously generated by you:
 <style-guidelines>
-- ${reflections.styleRules.join("\n- ")}
+- ${reflections.styleRules?.length ? reflections.styleRules.join("\n- ") : "No style guidelines found."}
 </style-guidelines>`;
   const contentString = `The following is a list of memories/facts you previously generated about the user:
 <user-facts>
-- ${reflections.content.join("\n- ")}
+- ${reflections.content?.length ? reflections.content.join("\n- ") : "No memories/facts found."}
 </user-facts>`;
 
   if (extra?.onlyStyle) {
@@ -56,13 +57,13 @@ export const formatArtifactContent = (
 ): string => {
   let artifactContent: string;
 
-  if (content.type === "code") {
+  if (isArtifactCodeContent(content)) {
     artifactContent = shortenContent
-      ? content.code.slice(0, 500)
+      ? content.code?.slice(0, 500)
       : content.code;
   } else {
     artifactContent = shortenContent
-      ? content.fullMarkdown.slice(0, 500)
+      ? content.fullMarkdown?.slice(0, 500)
       : content.fullMarkdown;
   }
   return `Title: ${content.title}\nArtifact type: ${content.type}\nContent: ${artifactContent}`;

src/app/layout.tsx

@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Streaming UI chat",
-  description: "Streaming UI chat",
+  title: "Open Canvas",
+  description: "Open Canvas Chat UX by LangChain",
 };
 
 export default function RootLayout({

src/components/artifacts/actions_toolbar/code/index.tsx

@@ -157,11 +157,20 @@ export function CodeToolBar(props: CodeToolbarProps) {
           variant="outline"
           className={cn(
             "transition-colors w-[48px] h-[48px] p-0 rounded-xl",
-            props.isTextSelected ? "cursor-default" : "cursor-pointer"
+            props.isTextSelected
+              ? "cursor-default opacity-50 text-gray-400 hover:bg-background"
+              : "cursor-pointer"
           )}
           delayDuration={400}
         >
-          <Code className="w-[26px] h-[26px]" />
+          <Code
+            className={cn(
+              "w-[26px] h-[26px]",
+              props.isTextSelected
+                ? "text-gray-400"
+                : "hover:text-gray-900 transition-colors"
+            )}
+          />
         </TooltipIconButton>
       )}
     </div>

src/components/artifacts/actions_toolbar/custom/index.tsx

@@ -172,11 +172,20 @@ export function CustomQuickActions(props: CustomQuickActionsProps) {
           variant="outline"
           className={cn(
             "transition-colors w-[48px] h-[48px] p-0 rounded-xl",
-            props.isTextSelected ? "cursor-default" : "cursor-pointer"
+            props.isTextSelected
+              ? "cursor-default opacity-50 text-gray-400 hover:bg-background"
+              : "cursor-pointer"
           )}
           delayDuration={400}
         >
-          <WandSparkles className="w-[26px] h-[26px]" />
+          <WandSparkles
+            className={cn(
+              "w-[26px] h-[26px]",
+              props.isTextSelected
+                ? "text-gray-400"
+                : "hover:text-gray-900 transition-colors"
+            )}
+          />
         </TooltipIconButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="max-h-[600px] max-w-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">

src/components/artifacts/actions_toolbar/text/index.tsx

@@ -147,11 +147,20 @@ export function ActionsToolbar(props: ActionsToolbarProps) {
           variant="outline"
           className={cn(
             "transition-colors w-[48px] h-[48px] p-0 rounded-xl",
-            props.isTextSelected ? "cursor-default" : "cursor-pointer"
+            props.isTextSelected
+              ? "cursor-default opacity-50 text-gray-400 hover:bg-background"
+              : "cursor-pointer"
           )}
           delayDuration={400}
         >
-          <MagicPencilSVG className="w-[26px] h-[26px]" />
+          <MagicPencilSVG
+            className={cn(
+              "w-[26px] h-[26px]",
+              props.isTextSelected
+                ? "text-gray-400"
+                : "hover:text-gray-900 transition-colors"
+            )}
+          />
         </TooltipIconButton>
       )}
     </div>

src/constants.ts

@@ -1,5 +1,5 @@
 export const LANGGRAPH_API_URL =
-  process.env.LANGGRAPH_API_URL ?? "http://localhost:53974";
+  process.env.LANGGRAPH_API_URL ?? "http://localhost:57675";
 // 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";