From bfdc58fa4005418c920e0625af5d2d37f5999ce4 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Mon, 17 Feb 2025 16:37:54 +0530
Subject: [PATCH] Add tooltips and change section headings

---
 .../projects/[projectId]/playground/app.tsx   | 36 ++++++++++---------
 .../projects/[projectId]/workflow/copilot.tsx | 33 +++++++++--------
 .../[projectId]/workflow/entity_list.tsx      |  5 ++-
 .../projects/[projectId]/workflow/pane.tsx    | 28 ++++++++++++---
 .../[projectId]/workflow/workflow_editor.tsx  |  8 +++--
 5 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/apps/rowboat/app/projects/[projectId]/playground/app.tsx b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
index d7b9528a..eadf7014 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
@@ -98,22 +98,26 @@ export function App({
     }
 
     return (
-        <Pane title="Chat" actions={[
-            <ActionButton
-                key="new-chat"
-                icon={<MessageSquarePlusIcon size={16} />}
-                onClick={handleNewChatButtonClick}
-            >
-                New chat
-            </ActionButton>,
-            <ActionButton
-                key="simulate"
-                icon={<PlayIcon size={16} />}
-                onClick={handleSimulateButtonClick}
-            >
-                Simulate
-            </ActionButton>,
-        ]}>
+        <Pane 
+            title="PLAYGROUND" 
+            tooltip="Test your agents and see their responses in this interactive chat interface"
+            actions={[
+                <ActionButton
+                    key="new-chat"
+                    icon={<MessageSquarePlusIcon size={16} />}
+                    onClick={handleNewChatButtonClick}
+                >
+                    New chat
+                </ActionButton>,
+                <ActionButton
+                    key="simulate"
+                    icon={<PlayIcon size={16} />}
+                    onClick={handleSimulateButtonClick}
+                >
+                    Simulate
+                </ActionButton>,
+            ]}
+        >
             <div className="h-full overflow-auto">
                 {loadingChat && <div className="flex justify-center items-center h-full">
                     <Spinner />
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx b/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx
index 83848b14..93019573 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx
@@ -529,20 +529,25 @@ export function Copilot({
     setResponseError: (error: string | null) => void;
 }) {
     return (
-        <Pane fancy title="Copilot" actions={[
-            <ActionButton
-                key="ask"
-                primary
-                icon={
-                    <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h14m-7 7V5" />
-                    </svg>
-                }
-                onClick={onNewChat}
-            >
-                New
-            </ActionButton>
-        ]}>
+        <Pane 
+            fancy 
+            title="COPILOT" 
+            tooltip="Get AI assistance for creating and improving your multi-agent system"
+            actions={[
+                <ActionButton
+                    key="ask"
+                    primary
+                    icon={
+                        <svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h14m-7 7V5" />
+                        </svg>
+                    }
+                    onClick={onNewChat}
+                >
+                    New
+                </ActionButton>
+            ]}
+        >
             <App
                 projectId={projectId}
                 workflow={workflow}
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx b/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
index b0ebfc03..02a8ba52 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
@@ -105,7 +105,10 @@ export function EntityList({
     }, [selectedEntity]);
 
     return (
-        <Pane title="Index">
+        <Pane 
+            title="WORKFLOW" 
+            tooltip="Browse and manage your agents, tools, and prompts in this sidebar"
+        >
             <div className="overflow-auto flex flex-col gap-1 justify-start">
                 {/* Agents Section */}
                 <SectionHeader title="Agents" onAdd={() => onAddAgent({})} />
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/pane.tsx b/apps/rowboat/app/projects/[projectId]/workflow/pane.tsx
index a7ecd136..095349f2 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/pane.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/pane.tsx
@@ -1,26 +1,44 @@
 import clsx from "clsx";
+import { InfoIcon } from "lucide-react";
+import { Tooltip } from "@nextui-org/react";
 
 export function Pane({
     title,
     actions = null,
     children,
     fancy = false,
+    tooltip = null,
 }: {
     title: React.ReactNode;
     actions?: React.ReactNode[] | null;
     children: React.ReactNode;
     fancy?: boolean;
+    tooltip?: string | null;
 }) {
     return <div className={clsx("h-full flex flex-col overflow-auto rounded-md p-1", {
         "bg-gray-100": !fancy,
         "bg-blue-100": fancy,
     })}>
         <div className="shrink-0 flex justify-between items-center gap-2 px-2 py-1 rounded-t-sm">
-            <div className={clsx("text-xs font-semibold uppercase", {
-                "text-gray-400": !fancy,
-                "text-blue-500": fancy,
-            })}>
-                {title}
+            <div className="flex items-center gap-1">
+                <div className={clsx("text-xs font-semibold uppercase", {
+                    "text-gray-400": !fancy,
+                    "text-blue-500": fancy,
+                })}>
+                    {title}
+                </div>
+                {tooltip && (
+                    <Tooltip 
+                        content={tooltip}
+                        placement="right"
+                        className="cursor-help"
+                    >
+                        <InfoIcon size={12} className={clsx({
+                            "text-gray-400": !fancy,
+                            "text-blue-500": fancy,
+                        })} />
+                    </Tooltip>
+                )}
             </div>
             {!actions && <div className="w-4 h-4" />}
             {actions && <div className={clsx("rounded-md hover:text-gray-800 px-2 text-sm flex items-center gap-2", {
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
index 2a89661c..55988f14 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
@@ -29,6 +29,8 @@ import { BackIcon, HamburgerIcon, WorkflowIcon } from "../../../lib/components/i
 import { CopyIcon, Layers2Icon, RadioIcon, RedoIcon, Sparkles, UndoIcon } from "lucide-react";
 import { EntityList } from "./entity_list";
 import { CopilotMessage } from "../../../lib/types/copilot_types";
+import { InfoIcon } from "lucide-react";
+import { clsx } from "clsx";
 
 enablePatches();
 
@@ -760,7 +762,7 @@ export function WorkflowEditor({
                 </div>}
                 {!isLive && <>
                     <button
-                        className="p-1 text-gray-400 hover:text-black"
+                        className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
                         title="Undo"
                         disabled={state.currentIndex <= 0}
                         onClick={() => dispatch({ type: "undo" })}
@@ -768,7 +770,7 @@ export function WorkflowEditor({
                         <UndoIcon size={16} />
                     </button>
                     <button
-                        className="p-1 text-gray-400 hover:text-black"
+                        className="p-1 text-gray-400 hover:text-black hover:cursor-pointer"
                         title="Redo"
                         disabled={state.currentIndex >= state.patches.length}
                         onClick={() => dispatch({ type: "redo" })}
@@ -776,7 +778,7 @@ export function WorkflowEditor({
                         <RedoIcon size={16} />
                     </button>
                     <button
-                        className="p-1 text-blue-600 hover:text-blue-800"
+                        className="p-1 text-blue-600 hover:text-blue-800 hover:cursor-pointer"
                         title="Toggle Copilot"
                         onClick={() => setShowCopilot(!showCopilot)}
                     >