chore(ui): Playground: add copy button, tooltip on toggles (#3218)

* Added tooltip to Settings Tabs * Added copy control for messages * Added playground cost data * Use TraceCostStats - updated finish reason * Lint * Wrestling types * Lint fix * Casting * Revert changes to call stats
wandb · Dec 16, 2024 · dbfb7a7 · dbfb7a7
1 parent d33d87e
commit dbfb7a7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/...ponents/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx b/...ponents/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx
@@ -1,3 +1,4 @@
+import {toast} from '@wandb/weave/common/components/elements/Toast';
 import {Button} from '@wandb/weave/components/Button';
 import React from 'react';
 
@@ -26,8 +27,28 @@ export const PlaygroundMessagePanelButtons: React.FC<
 }) => {
   const {deleteMessage, deleteChoice, retry} = usePlaygroundContext();
 
+  const handleCopy = async () => {
+    if (contentRef.current?.textContent) {
+      try {
+        await navigator.clipboard.writeText(contentRef.current.textContent);
+        toast('Message copied to clipboard');
+      } catch (error) {
+        toast('Failed to copy message');
+      }
+    }
+  };
+
   return (
     <div className="ml-auto flex gap-4 rounded-lg pt-[8px]">
+      <Button
+        variant="quiet"
+        size="small"
+        startIcon="copy"
+        onClick={handleCopy}
+        tooltip={!hasContent ? 'No content to copy' : 'Copy message'}
+        disabled={!hasContent}>
+        Copy
+      </Button>
       <Button
         variant="quiet"
         size="small"

diff --git a/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/PlaygroundSettings.tsx b/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/PlaygroundSettings.tsx
@@ -1,4 +1,5 @@
 import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
 import {MOON_250} from '@wandb/weave/common/css/color.styles';
 import {Switch} from '@wandb/weave/components';
 import * as Tabs from '@wandb/weave/components/Tabs';
@@ -46,7 +47,9 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
               onClick={() => setSettingsTab(idx)}
               className="max-w-[120px]">
               {playgroundStates.length > 1 && <Tag label={`${idx + 1}`} />}
-              <span className="truncate">{state.model}</span>
+              <Tooltip title={state.model}>
+                <span className="truncate">{state.model}</span>
+              </Tooltip>
             </Tabs.Trigger>
           ))}
         </Tabs.List>