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/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);