From e1a814abd6b4c9491d8541b9e559bbe9bdfe5ee7 Mon Sep 17 00:00:00 2001
From: jwlee64 <josiah.lee@wandb.com>
Date: Wed, 20 Nov 2024 13:46:31 -0800
Subject: [PATCH] add to sidebar, and add open in playground button

---
 .../components/FancyPage/useProjectSidebar.ts |  8 ++++++
 .../Home/Browse3/pages/CallPage/CallPage.tsx  | 28 +++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/weave-js/src/components/FancyPage/useProjectSidebar.ts b/weave-js/src/components/FancyPage/useProjectSidebar.ts
index 92d8d7a7a50..24a45c7f159 100644
--- a/weave-js/src/components/FancyPage/useProjectSidebar.ts
+++ b/weave-js/src/components/FancyPage/useProjectSidebar.ts
@@ -212,6 +212,13 @@ export const useProjectSidebar = (
             isShown: isWeaveOnly,
             iconName: IconNames.CubeContainer,
           },
+          {
+            type: 'button' as const,
+            name: 'Playground',
+            slug: 'weave/playground',
+            isShown: isWeaveOnly,
+            iconName: IconNames.RobotServiceMember,
+          },
           {
             type: 'menuPlaceholder' as const,
             // name: 'More',
@@ -224,6 +231,7 @@ export const useProjectSidebar = (
               // 'weave/scorers', // Hiding until we want to release
               'weave/operations',
               'weave/objects',
+              'weave/playground',
             ],
           },
         ];
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
index 7bf7b17f4bf..f5f5f0a4307 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
@@ -1,6 +1,7 @@
 import Box from '@mui/material/Box';
 import {useViewerInfo} from '@wandb/weave/common/hooks/useViewerInfo';
 import {Loading} from '@wandb/weave/components/Loading';
+import {urlPrefixed} from '@wandb/weave/config';
 import {useViewTraceEvent} from '@wandb/weave/integrations/analytics/useViewEvents';
 import React, {FC, useCallback, useContext, useEffect, useState} from 'react';
 import {useHistory} from 'react-router-dom';
@@ -71,6 +72,14 @@ const useCallTabs = (call: CallSchema) => {
   const codeURI = call.opVersionRef;
   const {entity, project, callId} = call;
   const weaveRef = makeRefCall(entity, project, callId);
+
+  const handleOpenInPlayground = () => {
+    window.open(
+      urlPrefixed(`/${entity}/${project}/weave/playground/${callId}`),
+      '_blank'
+    );
+  };
+
   return [
     // Disabling Evaluation tab until it's better for single evaluation
     ...(false && isEvaluateOp(call.spanName)
@@ -97,11 +106,20 @@ const useCallTabs = (call: CallSchema) => {
           {
             label: 'Chat',
             content: (
-              <ScrollableTabContent>
-                <Tailwind>
-                  <CallChat call={call.traceCall!} />
-                </Tailwind>
-              </ScrollableTabContent>
+              <>
+                <Button
+                  variant="secondary"
+                  startIcon="sandbox-playground"
+                  className="m-16 mb-8"
+                  onClick={handleOpenInPlayground}>
+                  Open chat in playground
+                </Button>
+                <ScrollableTabContent>
+                  <Tailwind>
+                    <CallChat call={call.traceCall!} />
+                  </Tailwind>
+                </ScrollableTabContent>
+              </>
             ),
           },
         ]