@smart-cloud/ai-kit-ui 1.1.36 → 1.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart-cloud/ai-kit-ui",
-  "version": "1.1.36",
+  "version": "1.1.38",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,7 +20,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@mantine/colors-generator": "^8.3.14",
-    "@smart-cloud/ai-kit-core": "^1.1.17",
+    "@smart-cloud/ai-kit-core": "^1.1.18",
     "@smart-cloud/wpsuite-core": "^2.1.2",
     "@tabler/icons-react": "^3.36.1",
     "chroma-js": "^3.2.0",

package/src/ai-feature/AiFeature.tsx

@@ -303,6 +303,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
     default: defaults,
     onClose,
     onAccept,
+    onOptionsChanged,
     language,
     rootElement,
   } = props;
@@ -335,7 +336,7 @@ const AiFeatureBase: FC<AiFeatureProps & AiKitShellInjectedProps> = (props) => {
 
   const [state, setState] = useState<string>();
   const [featureOpen, setFeatureOpen] = useState<boolean>(!showOpenButton);
-  const [optionsOpen, setOptionsOpen] = useState<boolean>();
+  const [optionsOpen, setOptionsOpen] = useState<boolean>(false);
   const [backendConfigured, setBackendConfigured] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [generated, setGenerated] = useState<never | null>(null);
@@ -969,7 +970,6 @@ Follow these additional instructions: ${instructions}`
 
   useEffect(() => {
     if (
-      optionsOpen !== false ||
       !featureOpen ||
       !autoRun ||
       !canGenerate ||
@@ -997,7 +997,10 @@ Follow these additional instructions: ${instructions}`
   useEffect(() => {
     if (!allowOverrideParameters) return;
     if (mode === "proofread") return;
-    if (!canGenerate) setOptionsOpen(true);
+    if (!canGenerate) {
+      setOptionsOpen(true);
+      autoRunOnceRef.current = true;
+    }
   }, [allowOverrideParameters, canGenerate, mode]);
 
   useEffect(() => {
@@ -1219,7 +1222,7 @@ Follow these additional instructions: ${instructions}`
                         )}
                       </Group>
 
-                      <CollapseComponent in={optionsOpen === true}>
+                      <CollapseComponent in={optionsOpen}>
                         {optionsDisplay === "collapse" && <Divider my="sm" />}
                         <OptionsComponent gap="xs" justify="space-between">
                           {/* TOPIC */}
@@ -1247,7 +1250,11 @@ Follow these additional instructions: ${instructions}`
                                 value={text || ""}
                                 onChange={(
                                   e: React.ChangeEvent<HTMLInputElement>,
-                                ) => setText(e.target.value)}
+                                ) => {
+                                  const value = e.target.value;
+                                  setText(value);
+                                  onOptionsChanged?.({ text: value });
+                                }}
                               />
                             </Tooltip>
                           )}
@@ -1280,7 +1287,11 @@ Follow these additional instructions: ${instructions}`
                                   value={instructions || ""}
                                   onChange={(
                                     e: React.ChangeEvent<HTMLInputElement>,
-                                  ) => setInstructions(e.target.value)}
+                                  ) => {
+                                    const value = e.target.value;
+                                    setInstructions(value);
+                                    onOptionsChanged?.({ instructions: value });
+                                  }}
                                 />
                               </Tooltip>
                             )}
@@ -1319,9 +1330,11 @@ Follow these additional instructions: ${instructions}`
                                   ),
                                 ]}
                                 value={inputLanguage || "auto"}
-                                onChange={(value) =>
-                                  setInputLanguage(value as AiKitLanguageCode)
-                                }
+                                onChange={(value) => {
+                                  const val = value as AiKitLanguageCode;
+                                  setInputLanguage(val);
+                                  onOptionsChanged?.({ inputLanguage: val });
+                                }}
                               />
                             </Tooltip>
                           )}
@@ -1371,9 +1384,11 @@ Follow these additional instructions: ${instructions}`
                                   aiKit.settings.defaultOutputLanguage ||
                                   (mode === "rewrite" ? "auto" : "")
                                 }
-                                onChange={(value) =>
-                                  setOutputLanguage(value as AiKitLanguageCode)
-                                }
+                                onChange={(value) => {
+                                  const val = value as AiKitLanguageCode;
+                                  setOutputLanguage(val);
+                                  onOptionsChanged?.({ outputLanguage: val });
+                                }}
                               />
                             </Tooltip>
                           )}
@@ -1414,9 +1429,11 @@ Follow these additional instructions: ${instructions}`
                                   },
                                 ]}
                                 value={type || "key-points"}
-                                onChange={(value) =>
-                                  setType(value as SummarizerType)
-                                }
+                                onChange={(value) => {
+                                  const val = value as SummarizerType;
+                                  setType(val);
+                                  onOptionsChanged?.({ type: val });
+                                }}
                               />
                             </Tooltip>
                           )}
@@ -1478,9 +1495,13 @@ Follow these additional instructions: ${instructions}`
                                     tone ||
                                     (mode === "write" ? "neutral" : "as-is")
                                   }
-                                  onChange={(value) =>
-                                    setTone(value as WriterTone | RewriterTone)
-                                  }
+                                  onChange={(value) => {
+                                    const val = value as
+                                      | WriterTone
+                                      | RewriterTone;
+                                    setTone(val);
+                                    onOptionsChanged?.({ tone: val });
+                                  }}
                                 />
                               </Tooltip>
                             )}
@@ -1540,14 +1561,14 @@ Follow these additional instructions: ${instructions}`
                                     length ||
                                     (mode === "rewrite" ? "as-is" : "short")
                                   }
-                                  onChange={(value) =>
-                                    setLength(
-                                      value as
-                                        | WriterLength
-                                        | RewriterLength
-                                        | SummarizerLength,
-                                    )
-                                  }
+                                  onChange={(value) => {
+                                    const val = value as
+                                      | WriterLength
+                                      | RewriterLength
+                                      | SummarizerLength;
+                                    setLength(val);
+                                    onOptionsChanged?.({ length: val });
+                                  }}
                                 />
                               </Tooltip>
                             )}
@@ -1591,14 +1612,14 @@ Follow these additional instructions: ${instructions}`
                                       },
                                     ]}
                                     value={outputFormat || "markdown"}
-                                    onChange={(value) =>
-                                      setOutputFormat(
-                                        value as
-                                          | "plain-text"
-                                          | "markdown"
-                                          | "html",
-                                      )
-                                    }
+                                    onChange={(value) => {
+                                      const val = value as
+                                        | "plain-text"
+                                        | "markdown"
+                                        | "html";
+                                      setOutputFormat(val);
+                                      onOptionsChanged?.({ outputFormat: val });
+                                    }}
                                   />
                                 </Tooltip>
                               ))}