Merge pull request #9 from langchain-ai/dqbd/configurable-api-url

feat: add configurable URL
2025-03-04 17:45:22 +01:00
parent 2ef143e8ab f6a773348b
commit 3fc2df173c
5 changed files with 160 additions and 10 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "@langchain/langgraph-sdk": "*",
    "@langchain/openai": "^0.4.4",
    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.8",
    "@tailwindcss/postcss": "^4.0.9",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,6 +43,9 @@ importers:
      '@radix-ui/react-avatar':
        specifier: ^1.1.3
        version: 1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
      '@radix-ui/react-slot':
        specifier: ^1.1.2
        version: 1.1.2(@types/react@19.0.10)(react@19.0.0)
@@ -854,6 +857,19 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-label@2.1.2':
+    resolution: {integrity: sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-popover@1.1.6':
    resolution: {integrity: sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==}
    peerDependencies:
@@ -3773,6 +3789,15 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.0.10

+  '@radix-ui/react-label@2.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.10
+      '@types/react-dom': 19.0.4(@types/react@19.0.10)
+
  '@radix-ui/react-popover@1.1.6(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
    dependencies:
      '@radix-ui/primitive': 1.1.1
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -14,7 +14,6 @@ import {
 } from "@/lib/ensure-tool-responses";
 import { LangGraphLogoSVG } from "../icons/langgraph";
 import { TooltipIconButton } from "./tooltip-icon-button";
-import { ArrowDown, SquarePen } from "lucide-react";
 import { ArrowDown, LoaderCircle, SquarePen } from "lucide-react";
 import { StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
@@ -137,7 +136,9 @@ export function Thread() {
              onClick={() => setThreadId(null)}
            >
              <LangGraphLogoSVG width={32} height={32} />
-              <span className="text-xl font-medium">LangGraph Chat</span>
+              <span className="text-xl font-semibold tracking-tight">
+                LangGraph Chat
+              </span>
            </button>

            <TooltipIconButton
@@ -192,7 +193,9 @@ export function Thread() {
                {!threadId && (
                  <div className="flex gap-3 items-center">
                    <LangGraphLogoSVG className="flex-shrink-0 h-8" />
-                    <h1 className="text-2xl font-medium">LangGraph Chat</h1>
+                    <h1 className="text-2xl font-semibold tracking-tight">
+                      LangGraph Chat
+                    </h1>
                  </div>
                )}

--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
--- a/src/providers/Stream.tsx
+++ b/src/providers/Stream.tsx
@@ -6,6 +6,11 @@ import type {
  RemoveUIMessage,
 } from "@langchain/langgraph-sdk/react-ui/types";
 import { useQueryParam, StringParam } from "use-query-params";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { LangGraphLogoSVG } from "@/components/icons/langgraph";
+import { Label } from "@/components/ui/label";
+import { ArrowRight } from "lucide-react";

 const useTypedStream = useStream<
  { messages: Message[]; ui: UIMessage[] },
@@ -21,21 +26,23 @@ const useTypedStream = useStream<
 type StreamContextType = ReturnType<typeof useTypedStream>;
 const StreamContext = createContext<StreamContextType | undefined>(undefined);

-export const StreamProvider: React.FC<{ children: ReactNode }> = ({
+const StreamSession = ({
  children,
+  apiUrl,
+  assistantId,
+}: {
+  children: ReactNode;
+  apiUrl: string;
+  assistantId: string;
 }) => {
  const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
-
  const streamValue = useTypedStream({
-    apiUrl: "http://localhost:2024",
-    assistantId: "agent",
+    apiUrl,
+    assistantId,
    threadId: threadId ?? null,
    onThreadId: setThreadId,
  });

-  console.log("threadId", threadId);
-  console.log("streamValue", streamValue.values);
-
  return (
    <StreamContext.Provider value={streamValue}>
      {children}
@@ -43,6 +50,98 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
  );
 };

+export const StreamProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [apiUrl, setApiUrl] = useQueryParam("apiUrl", StringParam);
+  const [assistantId, setAssistantId] = useQueryParam(
+    "assistantId",
+    StringParam,
+  );
+
+  if (!apiUrl || !assistantId) {
+    return (
+      <div className="flex items-center justify-center min-h-screen w-screen p-4">
+        <div className="animate-in fade-in-0 zoom-in-95 flex flex-col border bg-background shadow-lg rounded-lg max-w-2xl">
+          <div className="flex flex-col gap-2 mt-14 p-6 border-b">
+            <div className="flex items-start flex-col gap-2">
+              <LangGraphLogoSVG className="h-7" />
+              <h1 className="text-xl font-semibold tracking-tight">
+                LangGraph Chat
+              </h1>
+            </div>
+            <p className="text-muted-foreground">
+              Welcome to LangGraph Chat! Before you get started, you need to
+              enter the URL of the deployment and the assistant / graph ID.
+            </p>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+
+              const form = e.target as HTMLFormElement;
+              const formData = new FormData(form);
+              const apiUrl = formData.get("apiUrl") as string;
+              const assistantId = formData.get("assistantId") as string;
+
+              setApiUrl(apiUrl);
+              setAssistantId(assistantId);
+              console.log({ apiUrl, assistantId });
+
+              form.reset();
+            }}
+            className="flex flex-col gap-6 p-6 bg-muted/50"
+          >
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="apiUrl">Deployment URL</Label>
+              <p className="text-muted-foreground text-sm">
+                This is the URL of your LangGraph deployment. Can be a local, or
+                production deployment.
+              </p>
+              <Input
+                id="apiUrl"
+                name="apiUrl"
+                className="bg-background"
+                defaultValue={apiUrl ?? "http://localhost:2024"}
+                onChange={(e) => setApiUrl(e.target.value)}
+              />
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="assistantId">Assistant / Graph ID</Label>
+              <p className="text-muted-foreground text-sm">
+                This is the ID of the graph (can be the graph name), or
+                assistant to fetch threads from, and invoke when actions are
+                taken.
+              </p>
+              <Input
+                id="assistantId"
+                name="assistantId"
+                className="bg-background"
+                defaultValue={assistantId ?? "agent"}
+                onChange={(e) => setAssistantId(e.target.value)}
+              />
+            </div>
+
+            <div className="flex justify-end mt-2">
+              <Button type="submit" size="lg">
+                Continue
+                <ArrowRight className="size-5" />
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <StreamSession apiUrl={apiUrl} assistantId={assistantId}>
+      {children}
+    </StreamSession>
+  );
+};
+
 // Create a custom hook to use the context
 export const useStreamContext = (): StreamContextType => {
  const context = useContext(StreamContext);