cr

src/components/thread/agent-inbox/components/state-view.tsx

@@ -244,7 +244,13 @@ export function StateView({
   }
 
   return (
-    <div className="overflow-y-auto pl-6 border-t-[1px] lg:border-t-[0px] lg:border-l-[1px] border-gray-100 flex flex-row gap-0 w-full">
+    <div
+      className={cn(
+        "flex flex-row gap-0 w-full",
+        view === "state" &&
+          "border-t-[1px] lg:border-t-[0px] lg:border-l-[1px] border-gray-100 ",
+      )}
+    >
       {view === "description" && (
         <div className="pt-6 pb-2">
           <MarkdownText>
@@ -253,7 +259,7 @@ export function StateView({
         </div>
       )}
       {view === "state" && (
-        <div className="flex flex-col items-start justify-start gap-1 pt-6 pb-2">
+        <div className="flex flex-col items-start justify-start gap-1">
           {Object.entries(values).map(([k, v], idx) => (
             <StateViewObject
               expanded={expanded}
@@ -264,7 +270,7 @@ export function StateView({
           ))}
         </div>
       )}
-      <div className="flex gap-2 items-start justify-end pt-6 pr-6">
+      <div className="flex gap-2 items-start justify-end">
         {view === "state" && (
           <Button
             onClick={() => setExpanded((prev) => !prev)}

src/components/thread/agent-inbox/components/thread-actions-view.tsx

@@ -102,7 +102,7 @@ export function ThreadActionsView({
   const actionsDisabled = loading || streaming;
 
   return (
-    <div className="flex flex-col min-h-full w-full p-12 gap-9">
+    <div className="flex flex-col min-h-full w-full gap-9">
       {/* Header */}
       <div className="flex flex-wrap items-center justify-between w-full gap-3">
         <div className="flex items-center justify-start gap-3">

src/components/thread/agent-inbox/index.tsx

@@ -1,7 +1,6 @@
 import { StateView } from "./components/state-view";
 import { ThreadActionsView } from "./components/thread-actions-view";
 import { useState } from "react";
-import { cn } from "@/lib/utils";
 import { HumanInterrupt } from "@langchain/langgraph/prebuilt";
 import { useStreamContext } from "@/providers/Stream";
 
@@ -11,7 +10,7 @@ interface ThreadViewProps {
 
 export function ThreadView({ interrupt }: ThreadViewProps) {
   const thread = useStreamContext();
-  const [showDescription, setShowDescription] = useState(true);
+  const [showDescription, setShowDescription] = useState(false);
   const [showState, setShowState] = useState(false);
   const showSidePanel = showDescription || showState;
 
@@ -36,33 +35,22 @@ export function ThreadView({ interrupt }: ThreadViewProps) {
   };
 
   return (
-    <div className="flex flex-col lg:flex-row w-full h-[750px] border-[1px] border-slate-200 rounded-2xl pb-4">
-      <div
-        className={cn(
-          "flex overflow-y-auto",
-          showSidePanel ? "lg:min-w-1/2 w-full" : "w-full",
-        )}
-      >
-        <ThreadActionsView
-          interrupt={interrupt}
-          handleShowSidePanel={handleShowSidePanel}
-          showState={showState}
-          showDescription={showDescription}
-        />
-      </div>
-      <div
-        className={cn(
-          showSidePanel ? "flex" : "hidden",
-          "overflow-y-auto lg:max-w-1/2 w-full",
-        )}
-      >
+    <div className="flex flex-col lg:flex-row w-full h-[80vh] p-8 bg-gray-50/50 rounded-2xl overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+      {showSidePanel ? (
         <StateView
           handleShowSidePanel={handleShowSidePanel}
           description={interrupt.description}
           values={thread.values}
           view={showState ? "state" : "description"}
         />
-      </div>
+      ) : (
+        <ThreadActionsView
+          interrupt={interrupt}
+          handleShowSidePanel={handleShowSidePanel}
+          showState={showState}
+          showDescription={showDescription}
+        />
+      )}
     </div>
   );
 }

tailwind.config.js

@@ -13,6 +13,10 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      components: {
+        ".scrollbar-pretty":
+          "overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",