@marimo-team/frontend 0.19.3-dev14 → 0.19.3-dev19

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -19,6 +19,12 @@ export function useFocusFirstEditor() {
     const timeout = setTimeout(() => {
       // Let the DOM render
       requestAnimationFrame(() => {
+        // Skip auto-focus if the document doesn't have focus to avoid
+        // stealing focus from outside (e.g., when embedded in an iframe)
+        if (!document.hasFocus()) {
+          return;
+        }
+
         // Check if the URL contains a scrollTo parameter
         const hash = window.location.hash;
         const cellName = extractCellNameFromHash(hash);

package/src/core/cells/scrollCellIntoView.ts

@@ -53,8 +53,9 @@ export function focusAndScrollCellIntoView({
       Logger.warn("scrollCellIntoView: editor not found", cellId);
       return;
     }
-    // If already focused, do nothing.
-    if (editor.hasFocus) {
+    // Skip auto-focus if already focused, or if the document doesn't have
+    // focus to avoid stealing focus from outside (e.g., when embedded in an iframe)
+    if (editor.hasFocus || !document.hasFocus()) {
       return;
     }
 

package/src/plugins/impl/chat/chat-ui.tsx

@@ -75,12 +75,26 @@ interface Props extends PluginFunctions {
 export const Chatbot: React.FC<Props> = (props) => {
   const [input, setInput] = useState("");
   const [config, setConfig] = useState<ChatConfig>(props.config);
+  const [prevPropsConfig, setPrevPropsConfig] = useState<ChatConfig>(
+    props.config,
+  );
   const [files, setFiles] = useState<File[] | undefined>(undefined);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const codeMirrorInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  const configChanged = Object.keys(props.config).some(
+    (key) =>
+      props.config[key as keyof ChatConfig] !==
+      prevPropsConfig[key as keyof ChatConfig],
+  );
+
+  if (configChanged) {
+    setConfig(props.config);
+    setPrevPropsConfig(props.config);
+  }
+
   // Use a ref to avoid stale closure in the fetch callback
   const configRef = useRef<ChatConfig>(config);
   configRef.current = config;
@@ -739,7 +753,6 @@ const ConfigPopup: React.FC<{
   config: ChatConfig;
   onChange: (newConfig: ChatConfig) => void;
 }> = ({ config, onChange }) => {
-  const [localConfig, setLocalConfig] = useState<ChatConfig>(config);
   const [open, setOpen] = useState(false);
 
   const handleChange = (key: keyof ChatConfig, value: number | null) => {
@@ -754,8 +767,7 @@ const ConfigPopup: React.FC<{
       finalValue = clampedValue;
     }
 
-    const newConfig = { ...localConfig, [key]: finalValue };
-    setLocalConfig(newConfig);
+    const newConfig = { ...config, [key]: finalValue };
     onChange(newConfig);
   };
 
@@ -782,7 +794,7 @@ const ConfigPopup: React.FC<{
       <PopoverContent className="w-70 border">
         <div className="grid gap-3">
           <h4 className="font-bold leading-none">Configuration</h4>
-          {Objects.entries(localConfig).map(([key, value]) => (
+          {Objects.entries(config).map(([key, value]) => (
             <div key={key} className="grid grid-cols-3 items-center gap-1">
               <Label
                 htmlFor={key}