feat: upgrades chat ui to v2 (#374)

Co-authored-by: Brace Sproul <[email protected]>

Author: Palashio

apps/web-v2/public/oap-logo-green.svg

@@ -1,19 +1,52 @@
 "use client";
-import React from "react";
-import { AgentsProvider } from "@/providers/Agents";
+
+import React, { useState, useMemo } from "react";
+import { AgentsProvider, useAgentsContext } from "@/providers/Agents";
 import DeepAgentChatPageContent from "@/features/chat";
+import { PageHeader } from "@/features/chat/components";
 import { Toaster } from "@/components/ui/sonner";
+import { useQueryState } from "nuqs";
+
+function DeepAgentChatPageInner(): React.ReactNode {
+  const [view, setView] = useState<"chat" | "workflow">("chat");
+  const [agentId] = useQueryState("agentId");
+  const { agents } = useAgentsContext();
+
+  const selectedAgent = useMemo(() => {
+    return agents.find((agent) => agent.assistant_id === agentId);
+  }, [agents, agentId]);
+
+  return (
+    <>
+      <PageHeader
+        view={view}
+        setView={setView}
+        assistantName={selectedAgent?.name}
+      />
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <DeepAgentChatPageContent
+          view={view}
+          onViewChange={setView}
+          hideInternalToggle={true}
+        />
+      </div>
+    </>
+  );
+}
+
 /**
  * Deep Agent Chat page (/chat).
  * Contains the deep agent chat interface.
  */
 export default function DeepAgentChatPage(): React.ReactNode {
   return (
     <React.Suspense fallback={<div>Loading chat...</div>}>
-      <AgentsProvider>
-        <DeepAgentChatPageContent />
-      </AgentsProvider>
-      <Toaster />
+      <div className="flex h-screen flex-col">
+        <AgentsProvider>
+          <DeepAgentChatPageInner />
+        </AgentsProvider>
+        <Toaster />
+      </div>
     </React.Suspense>
   );
 }

apps/web-v2/src/app/(app)/chat/page.tsx

@@ -17,8 +17,8 @@ import { HumanInterruptConfig } from "@/types/inbox";
 interface InterruptConfigDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  config: HumanInterruptConfig;
-  onInterruptChange: (config: HumanInterruptConfig) => void;
+  config: HumanInterruptConfig | boolean;
+  onInterruptChange: (config: HumanInterruptConfig | boolean) => void;
 }
 
 export function InterruptConfigDialog({
@@ -69,9 +69,21 @@ export function InterruptConfigDialog({
 
               <Switch
                 id="allow-accept"
-                checked={config.allow_accept}
+                checked={
+                  typeof config === "boolean" ? config : config.allow_accept
+                }
                 onCheckedChange={(checked) =>
-                  onInterruptChange({ ...config, allow_accept: checked })
+                  onInterruptChange({
+                    ...(typeof config === "boolean"
+                      ? {
+                          allow_edit: config,
+                          allow_ignore: config,
+                          allow_respond: config,
+                          allow_accept: config,
+                        }
+                      : config),
+                    allow_accept: checked,
+                  })
                 }
               />
             </div>
@@ -92,9 +104,21 @@ export function InterruptConfigDialog({
 
               <Switch
                 id="allow-respond"
-                checked={config.allow_respond}
+                checked={
+                  typeof config === "boolean" ? config : config.allow_respond
+                }
                 onCheckedChange={(checked) =>
-                  onInterruptChange({ ...config, allow_respond: checked })
+                  onInterruptChange({
+                    ...(typeof config === "boolean"
+                      ? {
+                          allow_edit: config,
+                          allow_ignore: config,
+                          allow_respond: config,
+                          allow_accept: config,
+                        }
+                      : config),
+                    allow_respond: checked,
+                  })
                 }
               />
             </div>
@@ -115,9 +139,21 @@ export function InterruptConfigDialog({
 
               <Switch
                 id="allow-edit"
-                checked={config.allow_edit}
+                checked={
+                  typeof config === "boolean" ? config : config.allow_edit
+                }
                 onCheckedChange={(checked) =>
-                  onInterruptChange({ ...config, allow_edit: checked })
+                  onInterruptChange({
+                    ...(typeof config === "boolean"
+                      ? {
+                          allow_edit: config,
+                          allow_ignore: config,
+                          allow_respond: config,
+                          allow_accept: config,
+                        }
+                      : config),
+                    allow_edit: checked,
+                  })
                 }
               />
             </div>

apps/web-v2/src/components/config-fields/interrupt-config-dialog.tsx

@@ -20,16 +20,17 @@ import { MCPConfig } from "@/types/deep-agent";
 const getInterruptConfig = (
   interruptConfig: Record<string, boolean | HumanInterruptConfig> | undefined,
   label: string,
-): HumanInterruptConfig => {
-  if (!interruptConfig || !(label in interruptConfig)) {
-    return {
-      allow_accept: false,
-      allow_ignore: false,
-      allow_respond: false,
-      allow_edit: false,
-    };
+): HumanInterruptConfig | false => {
+  // if there isn't an interrupt config, the tool doesn't exist yet, or it's set to false, return false.
+  if (
+    !interruptConfig ||
+    !(label in interruptConfig) ||
+    (typeof interruptConfig[label] === "boolean" && !interruptConfig[label])
+  ) {
+    return false;
   }
 
+  // Should always be true in this case
   if (typeof interruptConfig[label] === "boolean") {
     return {
       allow_accept: interruptConfig[label],
@@ -79,13 +80,17 @@ export function ConfigFieldTool({
     setValue(newValue);
   };
 
-  const handleInterruptConfigChange = (newConfig: HumanInterruptConfig) => {
+  const handleInterruptConfigChange = (
+    newConfig: HumanInterruptConfig | boolean,
+  ) => {
+    const allSetToFalse =
+      !newConfig || Object.values(newConfig).every((v) => !v);
     const newValue = {
       ...value,
       // Remove duplicates
       interrupt_config: {
         ...interruptConfig,
-        [label]: newConfig,
+        [label]: allSetToFalse ? false : newConfig,
       },
     };
 

apps/web-v2/src/components/config-fields/mcp.tsx

@@ -27,7 +27,7 @@ import _ from "lodash";
 import { ToolAuthRequiredAlert } from "./tool-auth-required-alert";
 import { AgentFormValues } from "./types";
 import { DeepAgentConfiguration } from "@/types/deep-agent";
-import { DEFAULT_FORM_CONFIG } from "./utils";
+import { DEFAULT_FORM_CONFIG, prepareConfigForSaving } from "./utils";
 
 interface CreateAgentDialogProps {
   agentId?: string;
@@ -92,7 +92,7 @@ function CreateAgentFormContent(props: {
       {
         name,
         description,
-        config,
+        config: prepareConfigForSaving(config),
       },
     );
 

apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/create-agent-dialog.tsx

@@ -21,7 +21,7 @@ import { useTriggers } from "@/hooks/use-triggers";
 import { useMCPContext } from "@/providers/MCP";
 import { useLangChainAuth } from "@/hooks/use-langchain-auth";
 import { ToolAuthRequiredAlert } from "./tool-auth-required-alert";
-import { getDefaultsFromAgent } from "./utils";
+import { getDefaultsFromAgent, prepareConfigForSaving } from "./utils";
 import { DeepAgentConfiguration } from "@/types/deep-agent";
 
 interface EditAgentDialogProps {
@@ -115,7 +115,10 @@ function EditAgentDialogContent({
     const updatedAgent = await updateAgent(
       agent.assistant_id,
       agent.deploymentId,
-      data,
+      {
+        ...data,
+        config: prepareConfigForSaving(data.config),
+      },
     );
 
     if (!updatedAgent) {

apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/edit-agent-dialog.tsx

@@ -27,3 +27,25 @@ export function getDefaultsFromAgent(agent: Agent): DeepAgentConfiguration {
       DEFAULT_FORM_CONFIG.triggers,
   };
 }
+
+export function prepareConfigForSaving(
+  config: DeepAgentConfiguration,
+): DeepAgentConfiguration {
+  if (!config.tools?.interrupt_config) {
+    return config;
+  }
+
+  if (Object.values(config.tools.interrupt_config).some((v) => !v)) {
+    return {
+      ...config,
+      tools: {
+        ...config.tools,
+        interrupt_config: Object.fromEntries(
+          Object.entries(config.tools.interrupt_config).filter(([_, v]) => v),
+        ),
+      },
+    };
+  }
+
+  return config;
+}

apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/utils.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from "./page-header";
+export { DeepAgentChatBreadcrumb } from "./breadcrumb";

apps/web-v2/src/features/chat/components/index.ts

@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+
+interface PageHeaderProps {
+  view: "chat" | "workflow";
+  setView: (v: "chat" | "workflow") => void;
+  assistantName?: string;
+}
+
+export function PageHeader({ view, setView, assistantName }: PageHeaderProps) {
+  return (
+    <header className="relative flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+      <div className="flex items-center gap-2 px-4">
+        <SidebarTrigger className="-ml-1" />
+        <span className="text-muted-foreground">›</span>
+        <span className="text-sm font-medium">
+          {assistantName || "main agent"}
+        </span>
+      </div>
+      <div className="absolute left-1/2 -translate-x-1/2">
+        <div
+          className="flex h-[24px] w-[134px] items-center gap-0 overflow-hidden rounded border bg-white p-[3px] text-[12px] shadow-sm"
+          style={{
+            borderColor: "D1D1D6",
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => setView("chat")}
+            className="flex h-full flex-1 items-center justify-center truncate rounded p-[3px]"
+            style={
+              view === "chat"
+                ? {
+                    background: "#F4F3FF",
+                  }
+                : undefined
+            }
+          >
+            Chat
+          </button>
+          <button
+            type="button"
+            onClick={() => setView("workflow")}
+            className="flex h-full flex-1 items-center justify-center truncate rounded p-[3px]"
+            style={
+              view === "workflow"
+                ? {
+                    background: "#F4F3FF",
+                  }
+                : undefined
+            }
+          >
+            Workflow
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

apps/web-v2/src/features/chat/components/page-header.tsx

@@ -16,7 +16,15 @@ import { DeepAgentChatBreadcrumb } from "@/features/chat/components/breadcrumb";
 /**
  * Deep Agent Chat page content that uses nuqs hooks.
  */
-export default function DeepAgentChatPageContent(): React.ReactNode {
+export default function DeepAgentChatPageContent({
+  view,
+  onViewChange,
+  hideInternalToggle,
+}: {
+  view?: "chat" | "workflow";
+  onViewChange?: (view: "chat" | "workflow") => void;
+  hideInternalToggle?: boolean;
+}): React.ReactNode {
   const { session } = useAuthContext();
 
   const { agents, loading } = useAgentsContext();
@@ -103,6 +111,9 @@ export default function DeepAgentChatPageContent(): React.ReactNode {
       mode="oap"
       SidebarTrigger={SidebarTrigger}
       DeepAgentChatBreadcrumb={DeepAgentChatBreadcrumb}
+      view={view}
+      onViewChange={onViewChange}
+      hideInternalToggle={hideInternalToggle}
     />
   );
 }