diff --git a/.changeset/nine-toys-fly.md b/.changeset/nine-toys-fly.md new file mode 100644 index 000000000..bd95b65c4 --- /dev/null +++ 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 index 933c73497..eec06e575 100644 --- 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 index 802ac2d4f..e54975ba7 100644 --- 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 index 0cbe7fc1c..835518c9f 100644 --- 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,7 +261,7 @@ 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) => @@ -272,11 +269,11 @@ const Message: FC = () => { ); 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 index b4292171f..7e579f21a 100644 --- 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; };