fix: Move add inbox button to below all inboxes in sidebar

langchain-ai · Mar 5, 2025 · 61eb2d3 · 61eb2d3
1 parent 3974faf
commit 61eb2d3
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -111,5 +111,6 @@
     "tsx": "^4.19.1",
     "typescript": "^5",
     "typescript-eslint": "^8.8.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/components/agent-inbox/components/add-agent-inbox-dialog.tsx b/src/components/agent-inbox/components/add-agent-inbox-dialog.tsx
@@ -21,12 +21,13 @@ import {
 import { PasswordInput } from "@/components/ui/password-input";
 
 export function AddAgentInboxDialog({
-  closeSettingsPopover,
   hideTrigger,
   langchainApiKey,
   handleChangeLangChainApiKey,
 }: {
-  closeSettingsPopover: () => void;
+  /**
+   * Whether or not to hide the dialog trigger button.
+   */
   hideTrigger?: boolean;
   langchainApiKey?: string;
   handleChangeLangChainApiKey?: (
@@ -70,8 +71,11 @@ export function AddAgentInboxDialog({
       description: "Agent inbox added successfully",
       duration: 3000,
     });
-    closeSettingsPopover();
     updateQueryParams(NO_INBOXES_FOUND_PARAM);
+
+    setGraphId("");
+    setDeploymentUrl("");
+    setName("");
     setOpen(false);
   };
 

diff --git a/src/components/agent-inbox/components/settings-popover.tsx b/src/components/agent-inbox/components/settings-popover.tsx
@@ -8,7 +8,6 @@ import {
 import { Settings } from "lucide-react";
 import React from "react";
 import { PillButton } from "@/components/ui/pill-button";
-import { AddAgentInboxDialog } from "./add-agent-inbox-dialog";
 import { Label } from "@/components/ui/label";
 import { useLocalStorage } from "../hooks/use-local-storage";
 import { INBOX_PARAM, LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY } from "../constants";
@@ -51,76 +50,65 @@ export function SettingsPopover() {
   };
 
   return (
-    <>
-      <Popover
-        open={open}
-        onOpenChange={(c) => {
-          if (!c && langchainApiKey && langchainApiKeyNotSet.current) {
-            // Try to fetch threads if the key was set for the first time.
-            langchainApiKeyNotSet.current = false;
-            const inboxParam = getSearchParam(INBOX_PARAM) as
-              | ThreadStatusWithAll
-              | undefined;
-            if (inboxParam) {
-              // Void and not await to avoid blocking the UI.
-              void fetchThreads(inboxParam);
-            }
+    <Popover
+      open={open}
+      onOpenChange={(c) => {
+        if (!c && langchainApiKey && langchainApiKeyNotSet.current) {
+          // Try to fetch threads if the key was set for the first time.
+          langchainApiKeyNotSet.current = false;
+          const inboxParam = getSearchParam(INBOX_PARAM) as
+            | ThreadStatusWithAll
+            | undefined;
+          if (inboxParam) {
+            // Void and not await to avoid blocking the UI.
+            void fetchThreads(inboxParam);
           }
-          setOpen(c);
-        }}
-      >
-        <PopoverTrigger asChild>
-          <PillButton
-            variant="outline"
-            className="flex gap-2 items-center justify-center text-gray-800 w-fit"
-            size="lg"
-          >
-            <Settings />
-            <span>Settings</span>
-          </PillButton>
-        </PopoverTrigger>
-        <PopoverContent className="w-80">
-          <div className="grid gap-4">
-            <div className="space-y-2">
-              <h4 className="font-medium leading-none">Settings</h4>
-              <p className="text-sm text-muted-foreground">
-                Configuration settings for Agent Inbox
-              </p>
-            </div>
-            <div className="flex flex-col items-start gap-4 w-full">
-              <div className="flex flex-col items-start gap-2 w-full">
-                <div className="flex flex-col gap-1 w-full items-start">
-                  <Label htmlFor="langchain-api-key">
-                    LangChain API Key <span className="text-red-500">*</span>
-                  </Label>
-                  <p className="text-xs text-muted-foreground">
-                    This value is stored in your browser&apos;s local storage
-                    and is only used to authenticate requests sent to your
-                    LangGraph server.
-                  </p>
-                </div>
-                <PasswordInput
-                  id="langchain-api-key"
-                  placeholder="lsv2_pt_..."
-                  className="min-w-full"
-                  required
-                  value={langchainApiKey}
-                  onChange={handleChangeLangChainApiKey}
-                />
+        }
+        setOpen(c);
+      }}
+    >
+      <PopoverTrigger asChild>
+        <PillButton
+          variant="outline"
+          className="flex gap-2 items-center justify-center text-gray-800 w-fit"
+          size="lg"
+        >
+          <Settings />
+          <span>Settings</span>
+        </PillButton>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Settings</h4>
+            <p className="text-sm text-muted-foreground">
+              Configuration settings for Agent Inbox
+            </p>
+          </div>
+          <div className="flex flex-col items-start gap-4 w-full">
+            <div className="flex flex-col items-start gap-2 w-full">
+              <div className="flex flex-col gap-1 w-full items-start">
+                <Label htmlFor="langchain-api-key">
+                  LangChain API Key <span className="text-red-500">*</span>
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  This value is stored in your browser&apos;s local storage and
+                  is only used to authenticate requests sent to your LangGraph
+                  server.
+                </p>
               </div>
-              <AddAgentInboxDialog
-                closeSettingsPopover={() => setOpen(false)}
+              <PasswordInput
+                id="langchain-api-key"
+                placeholder="lsv2_pt_..."
+                className="min-w-full"
+                required
+                value={langchainApiKey}
+                onChange={handleChangeLangChainApiKey}
               />
             </div>
           </div>
-        </PopoverContent>
-      </Popover>
-      <AddAgentInboxDialog
-        closeSettingsPopover={() => setOpen(false)}
-        hideTrigger
-        langchainApiKey={langchainApiKey}
-        handleChangeLangChainApiKey={handleChangeLangChainApiKey}
-      />
-    </>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
@@ -20,13 +20,18 @@ import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
 import { useThreadsContext } from "../agent-inbox/contexts/ThreadContext";
 import { prettifyText } from "../agent-inbox/utils";
 import { cn } from "@/lib/utils";
-import { AGENT_INBOX_GITHUB_README_URL } from "../agent-inbox/constants";
+import {
+  AGENT_INBOX_GITHUB_README_URL,
+  LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY,
+} from "../agent-inbox/constants";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "../ui/tooltip";
+import { AddAgentInboxDialog } from "../agent-inbox/components/add-agent-inbox-dialog";
+import { useLocalStorage } from "../agent-inbox/hooks/use-local-storage";
 
 const gradients = [
   "linear-gradient(to right, #FF416C, #FF4B2B)", // Red-Orange
@@ -63,6 +68,30 @@ function hashString(str: string): number {
 export function AppSidebar() {
   const { agentInboxes, changeAgentInbox, deleteAgentInbox } =
     useThreadsContext();
+  const [langchainApiKey, setLangchainApiKey] = React.useState("");
+  const { getItem, setItem } = useLocalStorage();
+
+  React.useEffect(() => {
+    try {
+      if (typeof window === "undefined" || langchainApiKey) {
+        return;
+      }
+
+      const langchainApiKeyLS = getItem(LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY);
+      if (langchainApiKeyLS) {
+        setLangchainApiKey(langchainApiKeyLS);
+      }
+    } catch (e) {
+      console.error("Error getting/setting LangChain API key", e);
+    }
+  }, [langchainApiKey]);
+
+  const handleChangeLangChainApiKey = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setLangchainApiKey(e.target.value);
+    setItem(LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY, e.target.value);
+  };
 
   return (
     <Sidebar className="border-r-[0px] bg-[#F9FAFB]">
@@ -133,6 +162,11 @@ export function AppSidebar() {
                     </SidebarMenuItem>
                   );
                 })}
+                <AddAgentInboxDialog
+                  hideTrigger={false}
+                  langchainApiKey={langchainApiKey}
+                  handleChangeLangChainApiKey={handleChangeLangChainApiKey}
+                />
               </div>
 
               <div className="flex flex-col gap-3 pl-7">