refactor(playground): make view payload / reset buttons less prominent (

#578)
assistant-ui · Jul 26, 2024 · 02e0152 · 02e0152
1 parent 4998cd4
commit 02e0152
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/.changeset/lazy-deers-tie.md b/.changeset/lazy-deers-tie.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-playground": patch
+---
+
+refactor: make view payload / reset buttons less prominent
diff --git a/packages/react-playground/src/components/payload-editor-button.tsx b/packages/react-playground/src/components/payload-editor-button.tsx
@@ -16,6 +16,8 @@ import {
 import { useGetPlaygroundRuntime } from "../lib/usePlaygroundRuntime";
 import { toCoreMessages, toLanguageModelTools } from "@assistant-ui/react";
 import { JSONEditor } from "./ui/assistant-ui/json-editor";
+import { TooltipIconButton } from "./ui/assistant-ui/tooltip-icon-button";
+import { EyeIcon } from "lucide-react";
 
 export const PayloadEditorButton: FC = () => {
   const getPlaygroundRuntime = useGetPlaygroundRuntime();
@@ -56,7 +58,13 @@ export const PayloadEditorButton: FC = () => {
   return (
     <Dialog open={isOpen} onOpenChange={handleOpen}>
       <DialogTrigger asChild>
-        <Button>View Payload</Button>
+        <TooltipIconButton
+          tooltip="View Payload"
+          variant="outline"
+          className="size-8 p-2"
+        >
+          <EyeIcon />
+        </TooltipIconButton>
       </DialogTrigger>
       <DialogContent
         className="max-w-2xl"

diff --git a/packages/react-playground/src/components/ui/assistant-ui/assistant-playground.tsx b/packages/react-playground/src/components/ui/assistant-ui/assistant-playground.tsx
@@ -24,7 +24,7 @@ import {
 } from "../select";
 import { Slider } from "../slider";
 import { usePlaygroundRuntime } from "../../../lib/usePlaygroundRuntime";
-import { CircleXIcon, FunctionSquareIcon } from "lucide-react";
+import { CircleXIcon, FunctionSquareIcon, TrashIcon } from "lucide-react";
 import { TooltipIconButton } from "./tooltip-icon-button";
 import { JSONEditor } from "./json-editor";
 
@@ -328,18 +328,28 @@ const Sidebar: FC<AssistantPlaygroundProps> = ({
   };
 
   return (
-    <div className="flex w-[300px] min-w-[300px] flex-col gap-4 px-4 py-4">
-      <PayloadEditorButton />
-      <Button onClick={handleReset}>Reset</Button>
-
-      <ModelSelector {...modelSelector} />
-      {apiKey && <APIKeyInput />}
-      <TemperatureSlider />
-      <MaxTokensSlider />
-
-      <div className="flex flex-col gap-2">
-        <p className="font-medium">Tools</p>
-        <ToolManager />
+    <div className="flex w-[300px] min-w-[300px] flex-col px-4 py-4">
+      <div className="flex justify-end gap-2">
+        <PayloadEditorButton />
+        <TooltipIconButton
+          onClick={handleReset}
+          tooltip="Reset"
+          variant="outline"
+          className="size-8 p-2"
+        >
+          <TrashIcon />
+        </TooltipIconButton>
+      </div>
+      <div className="flex flex-col gap-4">
+        <ModelSelector {...modelSelector} />
+        {apiKey && <APIKeyInput />}
+        <TemperatureSlider />
+        <MaxTokensSlider />
+
+        <div className="flex flex-col gap-2">
+          <p className="font-medium">Tools</p>
+          <ToolManager />
+        </div>
       </div>
     </div>
   );