diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx index 4474582f..bffb91d5 100644 --- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx +++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx @@ -91,6 +91,26 @@ export const WithResult: Story = { }, }; +export const Loading: Story = { + args: { + prompts: samplePrompts, + selectedPromptName: "translate", + getPromptState: { status: "pending" }, + }, +}; + +export const WithError: Story = { + args: { + prompts: samplePrompts, + selectedPromptName: "translate", + getPromptState: { + status: "error", + error: + 'Prompt "translate" requires argument "text" but none was provided. Please fill in all required arguments before submitting.', + }, + }, +}; + export const ListChanged: Story = { args: { prompts: samplePrompts, diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx index 634faefe..17cc8cf7 100644 --- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx +++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx @@ -1,5 +1,14 @@ import { useState } from "react"; -import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core"; +import { + Alert, + Card, + Flex, + Group, + Loader, + ScrollArea, + Stack, + Text, +} from "@mantine/core"; import type { GetPromptResult, Prompt, @@ -107,6 +116,21 @@ export function PromptsScreen({ } /> + {getPromptState?.status === "pending" && ( + + + + Loading prompt... + + + )} + {getPromptState?.status === "error" && ( + + + {getPromptState.error ?? "Failed to get prompt"} + + + )} {getPromptState?.result && (