Merge pull request langchain-ai#38 from langchain-ai/brace/always-exp…

…ose-reflections feat: Ensure reflections button is always exposed
run2ai-m · Oct 15, 2024 · 51838e8 · 51838e8
2 parents 3346696 + ad85c67
commit 51838e8
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 12 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -102,6 +102,10 @@ export default function Home() {
         )}
       >
         <ContentComposerChatInterface
+          handleGetReflections={getReflections}
+          handleDeleteReflections={deleteReflections}
+          reflections={reflections}
+          isLoadingReflections={isLoadingReflections}
           setSelectedArtifact={setSelectedArtifact}
           streamMessage={streamMessage}
           setArtifacts={setArtifacts}

diff --git a/src/components/ContentComposer.tsx b/src/components/ContentComposer.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/lib/convert_messages";
 import { GraphInput } from "@/hooks/useGraph";
 import { Toaster } from "./ui/toaster";
-import { Artifact, ProgrammingLanguageOptions } from "@/types";
+import { Artifact, ProgrammingLanguageOptions, Reflections } from "@/types";
 import { Thread } from "@langchain/langgraph-sdk";
 export interface ContentComposerChatInterfaceProps {
   messages: BaseMessage[];
@@ -31,6 +31,10 @@ export interface ContentComposerChatInterfaceProps {
     type: "text" | "code",
     language?: ProgrammingLanguageOptions
   ) => void;
+  isLoadingReflections: boolean;
+  reflections: (Reflections & { updatedAt: Date }) | undefined;
+  handleDeleteReflections: () => Promise<boolean>;
+  handleGetReflections: () => Promise<void>;
 }
 
 export function ContentComposerChatInterface(
@@ -78,6 +82,10 @@ export function ContentComposerChatInterface(
     <div className="h-full">
       <AssistantRuntimeProvider runtime={runtime}>
         <MyThread
+          handleGetReflections={props.handleGetReflections}
+          handleDeleteReflections={props.handleDeleteReflections}
+          reflections={props.reflections}
+          isLoadingReflections={props.isLoadingReflections}
           handleQuickStart={props.handleQuickStart}
           showNewThreadButton={props.showNewThreadButton}
           createThread={props.createThread}

diff --git a/src/components/Primitives.tsx b/src/components/Primitives.tsx
@@ -25,7 +25,8 @@ import { useArtifactToolUI } from "./ArtifactToolUI";
 import { Thread } from "@langchain/langgraph-sdk";
 import { useLangSmithLinkToolUI } from "./LangSmithLinkToolUI";
 import { ProgrammingLanguageList } from "./ProgrammingLanguageList";
-import { ProgrammingLanguageOptions } from "@/types";
+import { ProgrammingLanguageOptions, Reflections } from "@/types";
+import { ReflectionsDialog } from "./reflections-dialog/ReflectionsDialog";
 
 export interface MyThreadProps {
   setSelectedArtifact: (artifactId: string) => void;
@@ -35,6 +36,10 @@ export interface MyThreadProps {
     type: "text" | "code",
     language?: ProgrammingLanguageOptions
   ) => void;
+  isLoadingReflections: boolean;
+  reflections: (Reflections & { updatedAt: Date }) | undefined;
+  handleDeleteReflections: () => Promise<boolean>;
+  handleGetReflections: () => Promise<void>;
 }
 
 interface QuickStartButtonsProps {
@@ -128,7 +133,16 @@ export const MyThread: FC<MyThreadProps> = (props: MyThreadProps) => {
             <SquarePen />
           </TooltipIconButton>
         ) : (
-          <QuickStartButtons handleQuickStart={props.handleQuickStart} />
+          <div className="flex flex-row gap-2 items-center">
+            <ReflectionsDialog
+              handleGetReflections={props.handleGetReflections}
+              isLoadingReflections={props.isLoadingReflections}
+              reflections={props.reflections}
+              handleDeleteReflections={props.handleDeleteReflections}
+            />
+
+            <QuickStartButtons handleQuickStart={props.handleQuickStart} />
+          </div>
         )}
       </div>
       <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto scroll-smooth bg-inherit px-4 pt-8">

diff --git a/src/components/artifacts/ArtifactRenderer.tsx b/src/components/artifacts/ArtifactRenderer.tsx
@@ -258,12 +258,14 @@ export function ArtifactRenderer(props: ArtifactRendererProps) {
           </TooltipIconButton>
           <h1 className="text-xl font-medium">{props.artifact.title}</h1>
         </div>
-        <ReflectionsDialog
-          handleGetReflections={props.handleGetReflections}
-          isLoadingReflections={props.isLoadingReflections}
-          reflections={props.reflections}
-          handleDeleteReflections={props.handleDeleteReflections}
-        />
+        <div className="ml-auto mt-[10px] mr-[6px]">
+          <ReflectionsDialog
+            handleGetReflections={props.handleGetReflections}
+            isLoadingReflections={props.isLoadingReflections}
+            reflections={props.reflections}
+            handleDeleteReflections={props.handleDeleteReflections}
+          />
+        </div>
         {props.artifact.type === "text" ? (
           <div className="pr-[6px] pt-3 flex flex-row gap-4 items-center justify-end">
             <TooltipIconButton

diff --git a/src/components/reflections-dialog/ReflectionsDialog.tsx b/src/components/reflections-dialog/ReflectionsDialog.tsx
@@ -21,8 +21,12 @@ export interface ReflectionsProps {
 
 function NoReflections(props: Pick<ReflectionsProps, "handleGetReflections">) {
   return (
-    <div className="flex flex-col items-center mt-6 mb-[-24px] gap-2">
+    <div className="flex flex-col items-center mt-6 mb-[-24px] gap-3">
       <p>No reflections have been generated yet.</p>
+      <p className="text-sm text-gray-500">
+        Reflections generate after 30s of inactivity. If none appear, try again
+        later.
+      </p>
       <Button
         onClick={props.handleGetReflections}
         variant="secondary"
@@ -53,7 +57,7 @@ export function ReflectionsDialog(props: ReflectionsProps) {
       <DialogTrigger asChild>
         <div
           onClick={() => setOpen(true)}
-          className="ml-auto mt-[10px] mr-[6px] bg-white hover:bg-gray-50 text-black border border-gray-300 px-4 py-2 rounded-md shadow-sm transition-colors duration-200 cursor-pointer flex items-center space-x-2"
+          className="ml-auto bg-white hover:bg-gray-50 text-black border border-gray-300 px-4 py-2 rounded-md shadow-sm transition-colors duration-200 cursor-pointer flex items-center space-x-2"
         >
           <p className="text-sm font-light">Reflections</p>
         </div>

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,2 +1,2 @@
 export const LANGGRAPH_API_URL =
-  process.env.LANGGRAPH_API_URL ?? "http://localhost:52809";
+  process.env.LANGGRAPH_API_URL ?? "http://localhost:57227";