refactor: remove useGetPlaygroundRuntime (#874)

Yonom · Sep 22, 2024 · 3970adc · 3970adc
1 parent 1a99132
commit 3970adc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 21 deletions.
diff --git a/.changeset/nine-toys-fly.md b/.changeset/nine-toys-fly.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-playground": patch
+---
+
+refactor: remove useGetPlaygroundRuntime
diff --git a/packages/react-playground/src/components/payload-editor-button.tsx b/packages/react-playground/src/components/payload-editor-button.tsx
@@ -13,14 +13,14 @@ import {
   requestOptionsFromOpenAI,
   requestOptionsToOpenAI,
 } from "../lib/converters";
-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";
+import { usePlaygroundRuntime } from "../lib/usePlaygroundRuntime";
 
 export const PayloadEditorButton: FC = () => {
-  const getPlaygroundRuntime = useGetPlaygroundRuntime();
+  const runtime = usePlaygroundRuntime();
 
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState("");
@@ -29,7 +29,6 @@ export const PayloadEditorButton: FC = () => {
     setIsOpen(open);
     if (!open) return;
 
-    const runtime = getPlaygroundRuntime();
     const config = runtime.useModelConfig.getState();
     const options: EdgeRuntimeRequestOptions = {
       modelName: config.config?.modelName ?? "gpt-4o",
@@ -51,7 +50,7 @@ export const PayloadEditorButton: FC = () => {
     }
 
     const options = requestOptionsFromOpenAI(jsonValue);
-    getPlaygroundRuntime().setRequestData(options);
+    runtime.setRequestData(options);
     setIsOpen(false);
   };
 

diff --git a/packages/react-playground/src/components/ui/assistant-ui/remove-content-part.tsx b/packages/react-playground/src/components/ui/assistant-ui/remove-content-part.tsx
@@ -2,15 +2,15 @@ import { useContentPartStore, useMessageStore } from "@assistant-ui/react";
 import { TooltipIconButton } from "./tooltip-icon-button";
 import { CircleXIcon } from "lucide-react";
 import { FC } from "react";
-import { useGetPlaygroundRuntime } from "../../../lib/usePlaygroundRuntime";
+import { usePlaygroundRuntime } from "../../../lib/usePlaygroundRuntime";
 
 export const RemoveContentPartButton: FC = () => {
-  const getPlaygroundRuntime = useGetPlaygroundRuntime();
+  const runtime = usePlaygroundRuntime();
 
   const messageStore = useMessageStore();
   const contentPartStore = useContentPartStore();
   const handleRemove = () => {
-    getPlaygroundRuntime().deleteContentPart(
+    runtime.deleteContentPart(
       messageStore.getState().message.id,
       contentPartStore.getState().part,
     );

diff --git a/packages/react-playground/src/components/ui/assistant-ui/thread.tsx b/packages/react-playground/src/components/ui/assistant-ui/thread.tsx
@@ -34,10 +34,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "../dropdown-menu";
-import {
-  useGetPlaygroundRuntime,
-  usePlaygroundRuntime,
-} from "../../../lib/usePlaygroundRuntime";
+import { usePlaygroundRuntime } from "../../../lib/usePlaygroundRuntime";
 import { ToolUI } from "./tool-ui";
 import { Text } from "./text";
 import {
@@ -222,13 +219,13 @@ const AddToolCallButton = () => {
 };
 
 const AddImageButton = () => {
-  const getPlaygroundRuntime = useGetPlaygroundRuntime();
+  const runtime = usePlaygroundRuntime();
   const messageStore = useMessageStore();
 
   const [isOpen, setIsOpen] = useState(false);
   const [imageUrl, setImageUrl] = useState("");
   const handleAddImage = () => {
-    getPlaygroundRuntime().addImage({
+    runtime.addImage({
       image: new URL(imageUrl).href,
       messageId: messageStore.getState().message.id,
     });
@@ -264,19 +261,19 @@ const AddImageButton = () => {
 };
 
 const Message: FC = () => {
-  const getPlaygroundRuntime = useGetPlaygroundRuntime();
+  const runtime = usePlaygroundRuntime();
   const messageStore = useMessageStore();
   const role = useMessage((m) => m.message.role);
   const status = useMessage((m) =>
     m.message.role === "assistant" ? m.message.status : null,
   );
 
   const handleDelete = () => {
-    getPlaygroundRuntime().deleteMessage(messageStore.getState().message.id);
+    runtime.deleteMessage(messageStore.getState().message.id);
   };
 
   const setRole = (role: "system" | "assistant" | "user") => {
-    getPlaygroundRuntime().setRole({
+    runtime.setRole({
       messageId: messageStore.getState().message.id,
       role,
     });

diff --git a/packages/react-playground/src/lib/usePlaygroundRuntime.tsx b/packages/react-playground/src/lib/usePlaygroundRuntime.tsx
@@ -1,11 +1,7 @@
 "use client";
-import { useThreadRuntime, useThreadRuntimeStore } from "@assistant-ui/react";
+import { useThreadRuntime } from "@assistant-ui/react";
 import { PlaygroundThreadRuntime } from "./playground-runtime";
 
-export const useGetPlaygroundRuntime = () => {
-  return useThreadRuntimeStore().getState as () => PlaygroundThreadRuntime;
-};
-
 export const usePlaygroundRuntime = () => {
   return useThreadRuntime() as PlaygroundThreadRuntime;
 };