Merge pull request #29 from langchain-ai/brace/sidebar-improvements

fix: Improve sidebar
langchain-ai · Jan 15, 2025 · 54a8769 · 54a8769
2 parents c0a2814 + 2b25bb2
commit 54a8769
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 55 deletions.
diff --git a/src/components/agent-inbox/components/add-agent-inbox-dialog.tsx b/src/components/agent-inbox/components/add-agent-inbox-dialog.tsx
@@ -131,9 +131,13 @@ export function AddAgentInboxDialog({
             <Label htmlFor="graph-id" className="text-right">
               Assistant/Graph ID <span className="text-red-500">*</span>
             </Label>
+            <p className="text-xs text-muted-foreground">
+              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="graph-id"
-              placeholder="email_assistant"
+              placeholder="my_graph"
               className="col-span-3"
               required
               value={graphId}
@@ -144,6 +148,10 @@ export function AddAgentInboxDialog({
             <Label htmlFor="deployment-url" className="text-right">
               Deployment URL <span className="text-red-500">*</span>
             </Label>
+            <p className="text-xs text-muted-foreground">
+              This is the URL of your LangGraph deployment. Can be a local, or
+              production deployment.
+            </p>
             <Input
               id="deployment-url"
               placeholder="https://my-agent.default.us.langgraph.app"
@@ -157,9 +165,12 @@ export function AddAgentInboxDialog({
             <Label htmlFor="name" className="text-right">
               Name
             </Label>
+            <p className="text-xs text-muted-foreground">
+              Optional name for the inbox. Used in the sidebar.
+            </p>
             <Input
               id="name"
-              placeholder="Email Assistant"
+              placeholder="My Agent"
               className="col-span-3"
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -169,7 +180,7 @@ export function AddAgentInboxDialog({
             <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>
+                  LangSmith 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

diff --git a/src/components/app-sidebar/index.tsx b/src/components/app-sidebar/index.tsx
@@ -21,6 +21,12 @@ 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 {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
 
 const gradients = [
   "linear-gradient(to right, #FF416C, #FF4B2B)", // Red-Orange
@@ -76,60 +82,54 @@ export function AppSidebar() {
                   return (
                     <SidebarMenuItem
                       key={`graph-id-${item.graphId}-${idx}`}
-                      className={item.selected ? "bg-gray-100 rounded-md" : ""}
+                      className={cn(
+                        "flex items-center w-full",
+                        item.selected ? "bg-gray-100 rounded-md" : ""
+                      )}
                     >
-                      <SidebarMenuButton
-                        onClick={() => changeAgentInbox(item.id, true)}
+                      <TooltipProvider>
+                        <Tooltip delayDuration={200}>
+                          <TooltipTrigger asChild>
+                            <SidebarMenuButton
+                              onClick={() => changeAgentInbox(item.id, true)}
+                            >
+                              <div
+                                className="w-6 h-6 rounded-md flex-shrink-0 flex items-center justify-center text-white"
+                                style={{
+                                  background:
+                                    gradients[
+                                      hashString(item.graphId) %
+                                        gradients.length
+                                    ],
+                                }}
+                              >
+                                {label.slice(0, 1).toUpperCase()}
+                              </div>
+                              <span
+                                className={cn(
+                                  "truncate min-w-0 font-medium",
+                                  item.selected ? "text-black" : "text-gray-600"
+                                )}
+                              >
+                                {label}
+                              </span>
+                            </SidebarMenuButton>
+                          </TooltipTrigger>
+                          <TooltipContent>{label}</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                      <TooltipIconButton
+                        variant="ghost"
+                        tooltip="Delete"
+                        className="text-gray-800 hover:text-red-500 transition-colors ease-in-out duration-200"
+                        delayDuration={100}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deleteAgentInbox(item.id);
+                        }}
                       >
-                        <div
-                          className="w-6 h-6 rounded-md flex items-center justify-center text-white"
-                          style={{
-                            background:
-                              gradients[
-                                hashString(item.graphId) % gradients.length
-                              ],
-                          }}
-                        >
-                          {label.slice(0, 1).toUpperCase()}
-                        </div>
-                        <span
-                          className={cn(
-                            "font-medium",
-                            item.selected ? "text-black" : "text-gray-600"
-                          )}
-                        >
-                          {label}
-                        </span>
-                        <span className="flex flex-row gap-1 items-center justify-end ml-auto">
-                          {/* TODO: This is a button nested inside a button. This is bad and should be fixed. */}
-                          <TooltipIconButton
-                            variant="ghost"
-                            tooltip="Delete"
-                            className="text-gray-800 hover:text-red-500 transition-colors ease-in-out duration-200"
-                            delayDuration={100}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              deleteAgentInbox(item.id);
-                            }}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </TooltipIconButton>
-
-                          {/* TODO: Implement editing inboxes */}
-                          {/* <TooltipIconButton
-                            className="text-gray-800 hover:text-blue-500 transition-colors ease-in-out duration-200"
-                            tooltip="Edit"
-                            delayDuration={100}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              push(`/edit`);
-                            }}
-                            variant="link"
-                          >
-                            <Edit2 className="w-4 h-4" />
-                          </TooltipIconButton> */}
-                        </span>
-                      </SidebarMenuButton>
+                        <Trash2 className="w-4 h-4" />
+                      </TooltipIconButton>
                     </SidebarMenuItem>
                   );
                 })}