feat(ui): improved dynamic prompts behaviour

- Bump `@invoke-ai/ui` for updated styles
- Update regex to parse prompts with newlines
- Update styling of overlay button when prompt has an error
- Fix bug where loading and error state sometimes weren't cleared

invokeai/frontend/web/package.json

@@ -57,7 +57,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.16",
-    "@invoke-ai/ui": "0.0.12",
+    "@invoke-ai/ui": "0.0.13",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "2.0.1",

invokeai/frontend/web/pnpm-lock.yaml

@@ -29,8 +29,8 @@ dependencies:
     specifier: ^5.0.16
     version: 5.0.16
   '@invoke-ai/ui':
-    specifier: 0.0.12
+    specifier: 0.0.13
-    version: 0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+    version: 0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
   '@mantine/form':
     specifier: 6.0.21
     version: 6.0.21(react@18.2.0)
@@ -3759,8 +3759,8 @@ packages:
       '@swc/helpers': 0.5.3
     dev: false
 
-  /@invoke-ai/ui@0.0.12(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
+  /@invoke-ai/ui@0.0.13(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-G0iPzGx1Nu7mHOZtwUYtqNWAqo2KnYGvs883w4WJwUpoCEbnaZd9Pi876UvOh9aNyjO93t/5ctIffkcYlDKGNg==}
+    resolution: {integrity: sha512-X4Txij2dMnzPUXTPhorBHezByJQ/ceyHxCM+zZ0gpFsSyXUieOFWjaSu+dAVpghS9y0dxFQGayHvNyX6VsX/PA==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
@@ -12063,7 +12063,7 @@ packages:
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.7
+      '@babel/runtime': 7.23.8
       react: 18.2.0
     dev: false
 
@@ -12158,7 +12158,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.7
+      '@babel/runtime': 7.23.8
       '@types/react': 18.2.48
       focus-lock: 1.0.0
       prop-types: 15.8.1

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts

@@ -46,14 +46,14 @@ export const addDynamicPromptsListener = () => {
 
       if (cachedPrompts) {
         dispatch(promptsChanged(cachedPrompts.prompts));
+        dispatch(parsingErrorChanged(cachedPrompts.error));
         return;
       }
 
       if (!getShouldProcessPrompt(state.generation.positivePrompt)) {
-        if (state.dynamicPrompts.isLoading) {
-          dispatch(isLoadingChanged(false));
-        }
         dispatch(promptsChanged([state.generation.positivePrompt]));
+        dispatch(parsingErrorChanged(undefined));
+        dispatch(isErrorChanged(false));
         return;
       }
 
@@ -78,7 +78,6 @@ export const addDynamicPromptsListener = () => {
         dispatch(promptsChanged(res.prompts));
         dispatch(parsingErrorChanged(res.error));
         dispatch(isErrorChanged(false));
-        dispatch(isLoadingChanged(false));
       } catch {
         dispatch(isErrorChanged(true));
         dispatch(isLoadingChanged(false));

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx

@@ -61,7 +61,12 @@ const ParamDynamicPromptsPreview = () => {
   }
 
   return (
-    <FormControl orientation="vertical" w="full" h="full">
+    <FormControl
+      orientation="vertical"
+      w="full"
+      h="full"
+      isInvalid={Boolean(parsingError || isError)}
+    >
       <InformationalPopover feature="dynamicPrompts" inPortal={false}>
         <FormLabel>{label}</FormLabel>
       </InformationalPopover>

invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx

@@ -13,7 +13,11 @@ const loadingStyles: SystemStyleObject = {
 export const ShowDynamicPromptsPreviewButton = memo(() => {
   const { t } = useTranslation();
   const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading);
+  const isError = useAppSelector((s) =>
+    Boolean(s.dynamicPrompts.isError || s.dynamicPrompts.parsingError)
+  );
   const { isOpen, onOpen } = useDynamicPromptsModal();
+
   return (
     <Tooltip
       label={
@@ -30,6 +34,7 @@ export const ShowDynamicPromptsPreviewButton = memo(() => {
         icon={<BsBracesAsterisk />}
         onClick={onOpen}
         sx={isLoading ? loadingStyles : undefined}
+        colorScheme={isError && !isLoading ? 'error' : 'base'}
       />
     </Tooltip>
   );

invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts

@@ -47,6 +47,7 @@ export const dynamicPromptsSlice = createSlice({
     },
     promptsChanged: (state, action: PayloadAction<string[]>) => {
       state.prompts = action.payload;
+      state.isLoading = false;
     },
     parsingErrorChanged: (
       state,

invokeai/frontend/web/src/features/dynamicPrompts/util/getShouldProcessPrompt.ts

@@ -1,3 +1,3 @@
-const hasOpenCloseCurlyBracesRegex = /.*\{.*\}.*/;
+const hasOpenCloseCurlyBracesRegex = /.*\{[\s\S]*\}.*/;
 export const getShouldProcessPrompt = (prompt: string): boolean =>
   hasOpenCloseCurlyBracesRegex.test(prompt);