@e-llm-studio/instant-learning 1.3.2 → 1.3.3

package/dist/features/WtaWnta/_components/AgentDetailsForm.js

@@ -1,2 +1,975 @@
-import{__assign as e,__spreadArray as n}from"tslib";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import o,{useState as a,useRef as l,useEffect as s}from"react";import{Paper as c,Box as f,Typography as d,Tooltip as x,FormControl as p,InputLabel as u,Select as m,MenuItem as g,Button as h,CircularProgress as b,IconButton as y,Accordion as v,AccordionSummary as w,AccordionDetails as I,TextField as C}from"@mui/material";import S from"../../../CommonComponents/GradientSparkleIcon.js";import{Info as z,PenSquare as k,X as F,Check as R,ChevronDown as W,Lightbulb as A,Plus as D}from"lucide-react";import N from"../../../hooks/useDebounce.js";var T={"Azure OpenAI":["gpt-4o","gpt-4o-2024-08-06"],"VertexAI Anthropic":["claude-3.5-sonnet","claude-3-sonnet","claude-3-haiku","claude-3.5-haiku","claude-3.7-sonnet","claude-4-sonnet"],"Google VertexAI":["gemini-2.0-flash","gemini-2.5-flash-lite","gemini-2.5-pro","gemini-2.5-flash","gemini-1.5-pro","gemini-1.0-pro-002","gemini-1.0-pro","gemini-1.5-pro-001","gemini-1.5-pro-002","gemini-1.5-flash-001","gemini-1.5-flash-002"]},j=function(j){var P,M=j.formState,O=j.setFormState,B=j.config,H=j.isLoadingSuggestions,V=j.onSave,E=j.isSaving,Y=j.modelProvider,G=j.setModelProvider,J=j.modelName,q=j.setModelName,L=j.isCheckingExisting,U=j.suggestedFixes,_=j.onRejectFix,K=j.onAcceptFix,Q=j.isFixing,X=j.isValidDb,Z=j.isFormDirty,$=j.isSaveButtonDisabled,ee=j.onValidate;j.validationResponse,j.onFixConflicts;var ne=j.formCommand,te=j.setFormCommand,ie=j.className,re=j.showValidateButton,oe=j.isReadOnly,ae=void 0!==oe&&oe,le=a(!1),se=le[0],ce=le[1],fe=a(M),de=fe[0],xe=fe[1],pe=a({}),ue=pe[0],me=pe[1],ge=a({}),he=ge[0],be=ge[1],ye=a(null),ve=ye[0],we=ye[1],Ie=N(de,2500),Ce=l(null),Se=l(!1),ze=function(n,r){if(Q)return t(f,e({sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",flex:1,backgroundColor:"#ffffff",borderRadius:"8px",border:"1px solid #e5e7eb",p:2,textAlign:"center",mt:2}},{children:[t(f,e({sx:{display:"flex",alignItems:"center",gap:1.5,color:"#4338ca",mb:1}},{children:[i(b,{size:20,color:"inherit"}),t(d,e({sx:{fontSize:"1rem",fontWeight:600,fontFamily:"'Inter', sans-serif"}},{children:[i(S,{})," AI fixing Rules...."]}))]})),i(d,e({sx:{fontSize:"0.9rem",color:"#6b7280",fontFamily:"'Inter', sans-serif",mb:4}},{children:"Our AI is analyzing your requirements and creating new suggestions"})),t(d,e({sx:{fontSize:"0.85rem",color:"#9ca3af",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center",gap:"4px","@keyframes bounce":{"0%, 60%, 100%":{transform:"translateY(0)"},"30%":{transform:"translateY(-8px)"}},"& span":{display:"inline-block",animation:"bounce 1.4s infinite"},"& span:nth-of-type(1)":{animationDelay:"0s"},"& span:nth-of-type(2)":{animationDelay:"0.2s"},"& span:nth-of-type(3)":{animationDelay:"0.4s"}}},{children:[i("span",{children:"●"}),i("span",{children:"●"}),i("span",{children:"●"}),"Please wait..."]}))]}));var o=n[0];return o?t(f,e({sx:{mt:2,p:2,border:"1px dashed #6366f1",borderRadius:"8px",backgroundColor:"#f5f3ff"}},{children:[t(f,e({sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1.5}},{children:[t(d,e({variant:"subtitle2",sx:{fontWeight:600,color:"#4338ca",display:"flex",alignItems:"center",gap:1}},{children:[i(S,{}),"AI Suggestions"]})),t(f,e({sx:{display:"flex",alignItems:"center",gap:.5}},{children:[void 0!==o.score&&i(x,e({title:"AI Confidence Score",arrow:!0},{children:ke(o.score)})),i(x,e({title:"Reject this suggestion"},{children:i(y,e({size:"small",onClick:function(){return _(r,0)},sx:{color:"#ef4444"}},{children:i(F,{size:18})}))})),i(x,e({title:"Replace all current rules with this one"},{children:i(y,e({size:"small",onClick:function(){return K(r,o)},sx:{color:"#16a34a"}},{children:i(R,{size:18})}))}))]}))]})),i(c,e({elevation:0,sx:{p:"12px 16px",backgroundColor:"#fff",borderRadius:"8px",border:"1px solid #e0e0e0"}},{children:i(d,e({sx:{fontSize:"15px",color:"#1f2937",lineHeight:1.6}},{children:o.text}))})),o.reason&&t(v,e({expanded:he["".concat(r,"-").concat(0)]||!1,onChange:function(){return function(n,t){var i="".concat(n,"-").concat(t);be(function(n){var t;return e(e({},n),((t={})[i]=!n[i],t))})}(r,0)},disableGutters:!0,elevation:0,sx:{border:"1px solid #c7d2fe",borderRadius:"8px",overflow:"hidden",mt:1.5,"&:before":{display:"none"}}},{children:[i(w,e({expandIcon:i(W,{size:16,color:"#4f46e5"}),sx:{backgroundColor:"#eef2ff",minHeight:"auto","&.Mui-expanded":{borderBottom:"1px solid #c7d2fe",minHeight:"auto"},"& .MuiAccordionSummary-content":{margin:"10px 0px"}}},{children:t(d,e({sx:{fontSize:"0.85rem",fontWeight:600,color:"#4338ca",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center",gap:1}},{children:[i(A,{size:14}),"Decision Making Factors"]}))})),i(I,e({sx:{p:2,backgroundColor:"#fdfdff"}},{children:i(d,e({sx:{fontSize:"0.9rem",color:"#374151",fontFamily:"'Inter', sans-serif",lineHeight:1.6}},{children:o.reason}))}))]}))]})):null};s(function(){if(!se){xe(M);var e={wta:M.wta.map(function(e){return{text:e.text}}),wnta:M.wnta.map(function(e){return{text:e.text}})};Ce.current=JSON.stringify(e)}},[M,se]),s(function(){if(Se.current)Se.current=!1;else if(!(ve&&ve.wta.length>0&&0===Ie.wta.length)){if(ve){var e=Ie.wta.length-ve.wta.length;if(e>0)if(Ie.wta.slice(-e).every(function(e){return""===e.text.trim()}))return;var n=Ie.wnta.length-ve.wnta.length;if(n>0)if(Ie.wnta.slice(-n).every(function(e){return""===e.text.trim()}))return}var t={wta:Ie.wta.filter(function(e){return""!==e.text.trim()}).map(function(e){return{text:e.text}}),wnta:Ie.wnta.filter(function(e){return""!==e.text.trim()}).map(function(e){return{text:e.text}})},i=JSON.stringify(t);se&&!E&&ve&&i!==JSON.stringify(ve)&&i!==Ce.current&&(ee(Ie,J),Ce.current=i,console.log("Debounced validation useEffect triggered",{isEditing:se,isSaving:E,initialEditState:ve,debouncedTempFormState:Ie,lastValidatedStateRef:Ce.current}))}},[Ie,se,E,ve,J,ee]);s(function(){if("SYNC_SNAPSHOT"===ne){var e={wta:M.wta.map(function(e){return{text:e.text}}),wnta:M.wnta.map(function(e){return{text:e.text}})};Ce.current=JSON.stringify(e),te(null)}},[ne,M,te]);var ke=function(n){var r,o,a;return n>70?(r="#e9f5ea",o="#34a853",a="#34a853"):n>50?(r="#feefc3",o="#f9ab00",a="#f9ab00"):(r="#fbe9e7",o="#d93025",a="#d93025"),t(f,e({sx:{backgroundColor:r,color:o,borderRadius:"14px",padding:"4px 12px",display:"inline-flex",alignItems:"center",justifyContent:"center",fontWeight:600,fontSize:"12px",fontFamily:"'Inter', sans-serif",gap:"2px"}},{children:[i(S,{color:a}),"  ",n.toFixed(1),"%"]}))},Fe=function(r,a){return t(f,H?e({sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",flex:1,backgroundColor:"#ffffff",borderRadius:"8px",border:"1px solid #e5e7eb",p:2,textAlign:"center"}},{children:[t(f,e({sx:{display:"flex",alignItems:"center",gap:1.5,color:"#4338ca",mb:1}},{children:[i(b,{size:20,color:"inherit"}),t(d,e({sx:{fontSize:"1rem",fontWeight:600,fontFamily:"'Inter', sans-serif"}},{children:[i(S,{})," Generating AI Suggestions..."]}))]})),i(d,e({sx:{fontSize:"0.9rem",color:"#6b7280",fontFamily:"'Inter', sans-serif",mb:4}},{children:"Our AI is analyzing your requirements and creating personalized suggestions"})),t(d,e({sx:{fontSize:"0.85rem",color:"#9ca3af",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center",gap:"4px","@keyframes bounce":{"0%, 60%, 100%":{transform:"translateY(0)"},"30%":{transform:"translateY(-8px)"}},"& span":{display:"inline-block",animation:"bounce 1.4s infinite"},"& span:nth-of-type(1)":{animationDelay:"0s"},"& span:nth-of-type(2)":{animationDelay:"0.2s"},"& span:nth-of-type(3)":{animationDelay:"0.4s"}}},{children:[i("span",{children:"●"}),i("span",{children:"●"}),i("span",{children:"●"}),"Please wait..."]}))]}):L?e({sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",flex:1,backgroundColor:"#ffffff",borderRadius:"8px",border:"1px solid #e5e7eb",p:2,textAlign:"center"}},{children:[t(f,e({sx:{display:"flex",alignItems:"center",gap:1.5,color:"#4338ca",mb:1}},{children:[i(b,{size:20,color:"inherit"}),t(d,e({sx:{fontSize:"1rem",fontWeight:600,fontFamily:"'Inter', sans-serif"}},{children:[i(S,{})," Checking for existing rules..."]}))]})),i(d,e({sx:{fontSize:"0.9rem",color:"#6b7280",fontFamily:"'Inter', sans-serif",mb:4}},{children:"Comparing rules with other agents in the database."})),t(d,e({sx:{fontSize:"0.85rem",color:"#9ca3af",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center",gap:"4px","@keyframes bounce":{"0%, 60%, 100%":{transform:"translateY(0)"},"30%":{transform:"translateY(-8px)"}},"& span":{display:"inline-block",animation:"bounce 1.4s infinite"},"& span:nth-of-type(1)":{animationDelay:"0s"},"& span:nth-of-type(2)":{animationDelay:"0.2s"},"& span:nth-of-type(3)":{animationDelay:"0.4s"}}},{children:[i("span",{children:"●"}),i("span",{children:"●"}),i("span",{children:"●"}),"Please wait..."]}))]}):e({sx:{backgroundColor:"#f9fafb",borderRadius:"8px",border:"1px solid #e5e7eb",padding:"16px",display:"flex",flexDirection:"column",flex:1,opacity:E?.6:1,pointerEvents:E?"none":"auto"}},{children:[i(f,e({sx:{display:"flex",flexDirection:"column",gap:2,flex:1}},{children:r.length>0?r.map(function(r,l){return t(o.Fragment,{children:[t(f,e({sx:{backgroundColor:"#ffffff",borderRadius:"8px",border:"1px solid #e5e7eb",padding:"8px 12px",display:"flex",alignItems:"center",gap:2}},{children:[t(d,e({sx:{fontSize:"15px",fontWeight:500,color:"#6b7280"}},{children:[l+1,"."]})),se?i(C,{value:r.text,onChange:function(t){return function(t,i,r){xe(function(o){var a,l=n([],o[t],!0);return l[i]=e(e({},l[i]),{text:r}),e(e({},o),((a={})[t]=l,a))})}(a,l,t.target.value)},variant:"standard",multiline:!0,placeholder:"Enter a rule...",disabled:E,InputProps:{disableUnderline:!0},sx:{flex:1,fontSize:"15px"}}):i(d,e({sx:{fontSize:"15px",color:"#1f2937",flex:1,lineHeight:1.5,wordBreak:"break-word"}},{children:r.text})),void 0!==r.score&&i(x,e({title:"AI Confidence Score",arrow:!0},{children:ke(r.score)})),se&&i(y,e({size:"small",onClick:function(){return function(n,t){xe(function(i){var r;return e(e({},i),((r={})[n]=i[n].filter(function(e,n){return n!==t}),r))})}(a,l)},disabled:E,sx:{color:"#9ca3af","&:hover":{color:"#ef4444"}}},{children:i(F,{size:16})}))]})),r.reason&&!se&&t(v,e({expanded:ue["".concat(a,"-").concat(l)]||!1,onChange:function(){return function(n,t){var i="".concat(n,"-").concat(t);me(function(n){var t;return e(e({},n),((t={})[i]=!n[i],t))})}(a,l)},disableGutters:!0,elevation:0,sx:{border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",mt:1,"&:before":{display:"none"}}},{children:[i(w,e({expandIcon:i(W,{size:16,color:"#6b7280"}),sx:{backgroundColor:"#f2f2f3ff",minHeight:"auto","&.Mui-expanded":{borderBottom:"1px solid #e5e7eb",minHeight:"auto"},"& .MuiAccordionSummary-content":{margin:"10px 0px"}}},{children:t(d,e({sx:{fontSize:"0.85rem",fontWeight:600,color:"#4b5563",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center",gap:1}},{children:[i(A,{size:16})," ","wta"===a?"Reason behind When To Apply":"Reason behind When Not To Apply"]}))})),i(I,e({sx:{p:2,backgroundColor:"#ffffff"}},{children:i(d,e({sx:{fontSize:"0.9rem",color:"#374151",fontFamily:"'Inter', sans-serif",lineHeight:1.6}},{children:r.reason}))}))]}))]},l)}):i(f,e({sx:{flex:1,display:"flex",alignItems:"center",justifyContent:"center"}},{children:!se&&i(d,e({sx:{color:"#9ca3af",textAlign:"center"}},{children:"No rules defined."}))}))})),se&&i(h,e({startIcon:i(D,{size:16}),onClick:function(){return function(t){xe(function(i){var r;return e(e({},i),((r={})[t]=n(n([],i[t],!0),[{text:""}],!1),r))})}(a)},disabled:E,sx:{color:"#6366f1",fontSize:"15px",fontWeight:500,textTransform:"none",mt:r.length>0?2:0,alignSelf:"flex-start"}},{children:"Add Rule"}))]}))};return t(c,e({elevation:3,className:ie,sx:{padding:"24px",width:"100%",maxWidth:"1050px",margin:"20px",boxSizing:"border-box",borderRadius:"12px",position:"relative"}},{children:[t(f,e({sx:{display:"flex",flexDirection:{xs:"column",md:"row"},justifyContent:"space-between",alignItems:{xs:"flex-start",md:"center"},gap:2,mb:3}},{children:[i(f,{children:t(f,e({sx:{display:"flex",alignItems:"center",gap:1.5,flexWrap:"wrap"}},{children:[i(d,e({variant:"h5",component:"h2",gutterBottom:!0,sx:{display:"flex",fontWeight:"600",alignItems:"center",gap:1.5,fontFamily:"'Inter', sans-serif",mb:0}},{children:B.mainTitle})),i(x,e({title:B.mainTitleTooltip,arrow:!0,slotProps:{tooltip:{sx:{fontSize:"0.8rem",padding:"0.5rem",fontFamily:"'Inter', sans-serif"}}}},{children:i(z,{size:13,color:"#494d55ff",style:{cursor:"pointer"}})})),t(f,e({sx:{display:"inline-flex",alignItems:"center",gap:.5}},{children:[i(S,{}),i(f,e({component:"span",sx:{fontWeight:600,fontSize:"1rem",background:"linear-gradient(90deg, #6a11cb 0%, #2575fc 100%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",display:"inline-block"}},{children:"AI Suggested"}))]}))]}))}),t(f,e({sx:{display:"flex",flexDirection:{xs:"column",sm:"row"},gap:2,width:{xs:"100%",sm:"auto"}}},{children:[t(p,e({size:"small",sx:{minWidth:{xs:"100%",sm:180},flex:{sm:1}}},{children:[i(u,{children:"Model Provider"}),i(m,e({value:Y,label:"Model Provider",onChange:function(e){var n=e.target.value;G(n),q(T[n][0])}},{children:Object.keys(T).map(function(n){return i(g,e({value:n},{children:n}),n)})}))]})),t(p,e({size:"small",sx:{minWidth:{xs:"100%",sm:180},flex:{sm:1}}},{children:[i(u,{children:"Model Name"}),i(m,e({value:J,label:"Model Name",onChange:function(e){q(e.target.value)}},{children:null===(P=T[Y])||void 0===P?void 0:P.map(function(n){return i(g,e({value:n},{children:n}),n)})}))]}))]}))]})),t(f,e({sx:{display:"flex",flexDirection:{xs:"column",md:"row"},gap:"24px",alignItems:"stretch"}},{children:[t(f,e({sx:{flex:1,backgroundColor:"#ffffff",display:"flex",flexDirection:"column"}},{children:[t(d,e({variant:"subtitle1",sx:{fontWeight:600,marginBottom:"12px",color:"#1f2937",fontSize:"16px",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center"}},{children:["When to Apply ",i("span",e({style:{color:"red",marginRight:"8px"}},{children:"*"})),i(x,e({title:B.wtaTooltip,arrow:!0,slotProps:{tooltip:{sx:{fontSize:"0.8rem",padding:"0.5rem",fontFamily:"'Inter', sans-serif"}}}},{children:i(z,{size:13,color:"#494d55ff",style:{cursor:"pointer"}})}))]})),Fe(se?de.wta:M.wta,"wta"),!se&&ze(U.wta,"wta")]})),t(f,e({sx:{flex:1,backgroundColor:"#ffffff",display:"flex",flexDirection:"column"}},{children:[t(d,e({variant:"subtitle1",sx:{fontWeight:600,marginBottom:"12px",color:"#1f2937",fontSize:"16px",fontFamily:"'Inter', sans-serif",display:"flex",alignItems:"center"}},{children:["When Not To Apply",i(x,e({title:B.wntaTooltip,arrow:!0,slotProps:{tooltip:{sx:{fontSize:"0.8rem",padding:"0.5rem",fontFamily:"'Inter', sans-serif"}}}},{children:i(z,{size:13,color:"#494d55ff",style:{marginLeft:"8px",cursor:"pointer"}})}))]})),Fe(se?de.wnta:M.wnta,"wnta"),!se&&ze(U.wnta,"wnta")]}))]})),!ae&&i(f,e({sx:{display:"flex",justifyContent:"flex-end",mt:3}},{children:t(r,se?{children:[i(h,e({onClick:function(){Se.current=!1,xe(M),ce(!1),we(null),Ce.current=null},variant:"outlined",disabled:E,sx:{marginRight:"8px",borderColor:"#6b7280",color:"#6b7280",textTransform:"none",fontWeight:500,borderRadius:"8px",padding:"6px 16px",fontFamily:"'Inter', sans-serif","&:hover":{backgroundColor:"#f9fafb",borderColor:"#4b5563"}}},{children:"Cancel"})),i(h,e({onClick:function(){Se.current=!1;var e={wta:de.wta.filter(function(e){return""!==e.text.trim()}).map(function(e){return{text:e.text}}),wnta:de.wnta.filter(function(e){return""!==e.text.trim()}).map(function(e){return{text:e.text}})},n=JSON.stringify(e);n!==Ce.current&&(console.log("State changed on confirm, triggering immediate validation."),ee(e,J),Ce.current=n),O(e),ce(!1),we(null)},disabled:E,variant:"contained",sx:{backgroundColor:"#4f46e5",color:"white",textTransform:"none",fontWeight:500,borderRadius:"8px",padding:"6px 16px",fontFamily:"'Inter', sans-serif","&:hover":{backgroundColor:"#4338ca"}}},{children:"Confirm"}))]}:{children:[i(h,e({onClick:function(){Se.current=!0,xe(M);var e={wta:M.wta.map(function(e){return{text:e.text}}),wnta:M.wnta.map(function(e){return{text:e.text}})};we(e),ce(!0)},variant:"outlined",disabled:H||E||L,startIcon:i(k,{size:16}),sx:{marginRight:"8px",borderColor:"#6b7280",color:"#6b7280",textTransform:"none",fontWeight:500,borderRadius:"8px",padding:"6px 16px",fontFamily:"'Inter', sans-serif","&:hover":{backgroundColor:"#f9fafb",borderColor:"#4b5563"}}},{children:"Edit"})),re&&i(h,e({variant:"contained",onClick:function(){return V(M)},disabled:$,sx:{backgroundColor:"#4f46e5",color:"white",textTransform:"none",fontWeight:500,borderRadius:"8px",padding:"6px 16px",fontFamily:"'Inter', sans-serif","&:hover":{backgroundColor:"#4338ca"}}},{children:E?"Validating...":X&&!Z?"Save":"Validate"}))]})}))]}))};export{j as default};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { Paper, Box, Typography, Tooltip, FormControl, InputLabel, Select, MenuItem, Button, CircularProgress, IconButton, Accordion, AccordionSummary, AccordionDetails, TextField } from '@mui/material';
+import GradientSparkleIcon from '../../../CommonComponents/GradientSparkleIcon.js';
+import { Info, PenSquare, X, Check, ChevronDown, Lightbulb, Plus } from 'lucide-react';
+import useDebounce from '../../../hooks/useDebounce.js';
+
+const modelOptions = {
+  "Azure OpenAI": ["gpt-4o", "gpt-4o-2024-08-06"],
+  "VertexAI Anthropic": ["claude-3.5-sonnet", "claude-3-sonnet", "claude-3-haiku", "claude-3.5-haiku", "claude-3.7-sonnet", "claude-4-sonnet"],
+  "Google VertexAI": [
+    "gemini-2.0-flash",
+    "gemini-2.5-flash-lite",
+    "gemini-2.5-pro",
+    "gemini-2.5-flash",
+    "gemini-1.5-pro",
+    "gemini-1.0-pro-002",
+    "gemini-1.0-pro",
+    "gemini-1.5-pro-001",
+    "gemini-1.5-pro-002",
+    "gemini-1.5-flash-001",
+    "gemini-1.5-flash-002"
+  ]
+};
+const AgentDetailsForm = ({
+  formState,
+  setFormState,
+  config,
+  isLoadingSuggestions,
+  onSave,
+  isSaving,
+  modelProvider,
+  setModelProvider,
+  modelName,
+  setModelName,
+  isCheckingExisting,
+  suggestedFixes,
+  onRejectFix,
+  onAcceptFix,
+  isFixing,
+  isValidDb,
+  isFormDirty,
+  isSaveButtonDisabled,
+  onValidate,
+  // validation function for debouncing 
+  validationResponse,
+  // Destructure the new prop
+  onFixConflicts,
+  // Destructure the new prop
+  formCommand,
+  setFormCommand,
+  className,
+  showValidateButton,
+  isReadOnly = false
+  // Default to false
+}) => {
+  var _a;
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempFormState, setTempFormState] = useState(formState);
+  const [expandedReasons, setExpandedReasons] = useState({});
+  const [expandedFixReasons, setExpandedFixReasons] = useState({});
+  const [initialEditState, setInitialEditState] = useState(null);
+  const debouncedTempFormState = useDebounce(tempFormState, 2500);
+  const lastValidatedStateRef = useRef(null);
+  const isInitialEditRun = useRef(false);
+  const handleReasonToggle = (type, index) => {
+    const key = `${type}-${index}`;
+    setExpandedReasons((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+  const handleFixReasonToggle = (type, index) => {
+    const key = `${type}-${index}`;
+    setExpandedFixReasons((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+  const renderSuggestedFixes = (rules, type) => {
+    if (isFixing) {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            backgroundColor: "#ffffff",
+            borderRadius: "8px",
+            border: "1px solid #e5e7eb",
+            p: 2,
+            textAlign: "center",
+            mt: 2
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, color: "#4338ca", mb: 1 }, children: [
+              /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }),
+              /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "1rem", fontWeight: 600, fontFamily: "'Inter', sans-serif" }, children: [
+                /* @__PURE__ */ jsx(GradientSparkleIcon, {}),
+                " AI fixing Rules...."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "#6b7280", fontFamily: "'Inter', sans-serif", mb: 4 }, children: "Our AI is analyzing your requirements and creating new suggestions" }),
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                sx: {
+                  fontSize: "0.85rem",
+                  color: "#9ca3af",
+                  fontFamily: "'Inter', sans-serif",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  "@keyframes bounce": {
+                    "0%, 60%, 100%": { transform: "translateY(0)" },
+                    "30%": { transform: "translateY(-8px)" }
+                  },
+                  "& span": {
+                    display: "inline-block",
+                    animation: "bounce 1.4s infinite"
+                  },
+                  "& span:nth-of-type(1)": {
+                    animationDelay: "0s"
+                  },
+                  "& span:nth-of-type(2)": {
+                    animationDelay: "0.2s"
+                  },
+                  "& span:nth-of-type(3)": {
+                    animationDelay: "0.4s"
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+                  /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+                  /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+                  "Please wait..."
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    const rule = rules[0];
+    const index = 0;
+    if (!rule) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, p: 2, border: "1px dashed #6366f1", borderRadius: "8px", backgroundColor: "#f5f3ff" }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", sx: { fontWeight: 600, color: "#4338ca", display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(GradientSparkleIcon, {}),
+          "AI Suggestions"
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+          rule.score !== void 0 && /* @__PURE__ */ jsx(Tooltip, { title: "AI Confidence Score", arrow: true, children: renderBadge(rule.score) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Reject this suggestion", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onRejectFix(type, index), sx: { color: "#ef4444" }, children: /* @__PURE__ */ jsx(X, { size: 18 }) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: `Replace all current rules with this one`, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onAcceptFix(type, rule), sx: { color: "#16a34a" }, children: /* @__PURE__ */ jsx(Check, { size: 18 }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Paper,
+        {
+          elevation: 0,
+          sx: {
+            p: "12px 16px",
+            backgroundColor: "#fff",
+            borderRadius: "8px",
+            border: "1px solid #e0e0e0"
+          },
+          children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "15px", color: "#1f2937", lineHeight: 1.6 }, children: rule.text })
+        }
+      ),
+      rule.reason && /* @__PURE__ */ jsxs(
+        Accordion,
+        {
+          expanded: expandedFixReasons[`${type}-${index}`] || false,
+          onChange: () => handleFixReasonToggle(type, index),
+          disableGutters: true,
+          elevation: 0,
+          sx: {
+            border: "1px solid #c7d2fe",
+            borderRadius: "8px",
+            overflow: "hidden",
+            mt: 1.5,
+            "&:before": { display: "none" }
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              AccordionSummary,
+              {
+                expandIcon: /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: "#4f46e5" }),
+                sx: {
+                  backgroundColor: "#eef2ff",
+                  minHeight: "auto",
+                  "&.Mui-expanded": {
+                    borderBottom: "1px solid #c7d2fe",
+                    minHeight: "auto"
+                  },
+                  "& .MuiAccordionSummary-content": {
+                    margin: "10px 0px"
+                  }
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    sx: {
+                      fontSize: "0.85rem",
+                      fontWeight: 600,
+                      color: "#4338ca",
+                      fontFamily: "'Inter', sans-serif",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Lightbulb, { size: 14 }),
+                      "Decision Making Factors"
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(AccordionDetails, { sx: { p: 2, backgroundColor: "#fdfdff" }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "#374151", fontFamily: "'Inter', sans-serif", lineHeight: 1.6 }, children: rule.reason }) })
+          ]
+        }
+      )
+    ] });
+  };
+  useEffect(() => {
+    if (!isEditing) {
+      setTempFormState(formState);
+      const strippedState = {
+        wta: formState.wta.map((rule) => ({ text: rule.text })),
+        wnta: formState.wnta.map((rule) => ({ text: rule.text }))
+      };
+      lastValidatedStateRef.current = JSON.stringify(strippedState);
+    }
+  }, [formState, isEditing]);
+  useEffect(() => {
+    if (isInitialEditRun.current) {
+      isInitialEditRun.current = false;
+      return;
+    }
+    if (initialEditState && initialEditState.wta.length > 0 && debouncedTempFormState.wta.length === 0) {
+      return;
+    }
+    if (initialEditState) {
+      const numWtaAdded = debouncedTempFormState.wta.length - initialEditState.wta.length;
+      if (numWtaAdded > 0) {
+        const newWtaRules = debouncedTempFormState.wta.slice(-numWtaAdded);
+        const allNewRulesAreEmpty = newWtaRules.every((rule) => rule.text.trim() === "");
+        if (allNewRulesAreEmpty) {
+          return;
+        }
+      }
+      const numWntaAdded = debouncedTempFormState.wnta.length - initialEditState.wnta.length;
+      if (numWntaAdded > 0) {
+        const newWntaRules = debouncedTempFormState.wnta.slice(-numWntaAdded);
+        const allNewRulesAreEmpty = newWntaRules.every((rule) => rule.text.trim() === "");
+        if (allNewRulesAreEmpty) {
+          return;
+        }
+      }
+    }
+    const strippedDebouncedState = {
+      wta: debouncedTempFormState.wta.filter((rule) => rule.text.trim() !== "").map((rule) => ({ text: rule.text })),
+      wnta: debouncedTempFormState.wnta.filter((rule) => rule.text.trim() !== "").map((rule) => ({ text: rule.text }))
+    };
+    const stringifiedStrippedState = JSON.stringify(strippedDebouncedState);
+    if (!isEditing || isSaving || !initialEditState || stringifiedStrippedState === JSON.stringify(initialEditState) || stringifiedStrippedState === lastValidatedStateRef.current) {
+      return;
+    }
+    onValidate(debouncedTempFormState, modelName);
+    lastValidatedStateRef.current = stringifiedStrippedState;
+    console.log("Debounced validation useEffect triggered", {
+      isEditing,
+      isSaving,
+      initialEditState,
+      debouncedTempFormState,
+      lastValidatedStateRef: lastValidatedStateRef.current
+    });
+  }, [debouncedTempFormState, isEditing, isSaving, initialEditState, modelName, onValidate]);
+  const handleProviderChange = (event) => {
+    const newProvider = event.target.value;
+    setModelProvider(newProvider);
+    setModelName(modelOptions[newProvider][0]);
+  };
+  const handleModelNameChange = (event) => {
+    setModelName(event.target.value);
+  };
+  const handleItemChange = (type, index, value) => {
+    setTempFormState((prevState) => {
+      const newItems = [...prevState[type]];
+      newItems[index] = { ...newItems[index], text: value };
+      return {
+        ...prevState,
+        [type]: newItems
+      };
+    });
+  };
+  const handleAddItem = (type) => {
+    setTempFormState((prevState) => ({
+      ...prevState,
+      [type]: [...prevState[type], { text: "" }]
+    }));
+  };
+  const handleRemoveItem = (type, index) => {
+    setTempFormState((prevState) => ({
+      ...prevState,
+      [type]: prevState[type].filter((_, i) => i !== index)
+    }));
+  };
+  useEffect(() => {
+    if (formCommand === "SYNC_SNAPSHOT") {
+      const strippedState = {
+        wta: formState.wta.map((rule) => ({ text: rule.text })),
+        wnta: formState.wnta.map((rule) => ({ text: rule.text }))
+      };
+      lastValidatedStateRef.current = JSON.stringify(strippedState);
+      setFormCommand(null);
+    }
+  }, [formCommand, formState, setFormCommand]);
+  const handleEdit = () => {
+    isInitialEditRun.current = true;
+    setTempFormState(formState);
+    const strippedInitialState = {
+      wta: formState.wta.map((rule) => ({ text: rule.text })),
+      wnta: formState.wnta.map((rule) => ({ text: rule.text }))
+    };
+    setInitialEditState(strippedInitialState);
+    setIsEditing(true);
+  };
+  const handleConfirm = () => {
+    isInitialEditRun.current = false;
+    const newState = {
+      wta: tempFormState.wta.filter((rule) => rule.text.trim() !== "").map((rule) => ({ text: rule.text })),
+      // This strips the score/reason
+      wnta: tempFormState.wnta.filter((rule) => rule.text.trim() !== "").map((rule) => ({ text: rule.text }))
+      // This strips the score/reason
+    };
+    const stringifiedNewState = JSON.stringify(newState);
+    if (stringifiedNewState !== lastValidatedStateRef.current) {
+      console.log("State changed on confirm, triggering immediate validation.");
+      onValidate(newState, modelName);
+      lastValidatedStateRef.current = stringifiedNewState;
+    }
+    setFormState(newState);
+    setIsEditing(false);
+    setInitialEditState(null);
+  };
+  const handleCancel = () => {
+    isInitialEditRun.current = false;
+    setTempFormState(formState);
+    setIsEditing(false);
+    setInitialEditState(null);
+    lastValidatedStateRef.current = null;
+  };
+  const renderBadge = (value) => {
+    let backgroundColor;
+    let textColor;
+    let iconColor;
+    if (value > 70) {
+      backgroundColor = "#e9f5ea";
+      textColor = "#34a853";
+      iconColor = "#34a853";
+    } else if (value > 50) {
+      backgroundColor = "#feefc3";
+      textColor = "#f9ab00";
+      iconColor = "#f9ab00";
+    } else {
+      backgroundColor = "#fbe9e7";
+      textColor = "#d93025";
+      iconColor = "#d93025";
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          backgroundColor,
+          color: textColor,
+          borderRadius: "14px",
+          padding: "4px 12px",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontWeight: 600,
+          fontSize: "12px",
+          fontFamily: "'Inter', sans-serif",
+          gap: "2px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(GradientSparkleIcon, { color: iconColor }),
+          "  ",
+          value.toFixed(1),
+          "%"
+        ]
+      }
+    );
+  };
+  const renderRulesList = (rules, type) => {
+    if (isLoadingSuggestions) {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            // Changed from minHeight
+            backgroundColor: "#ffffff",
+            borderRadius: "8px",
+            border: "1px solid #e5e7eb",
+            p: 2,
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, color: "#4338ca", mb: 1 }, children: [
+              /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }),
+              /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "1rem", fontWeight: 600, fontFamily: "'Inter', sans-serif" }, children: [
+                /* @__PURE__ */ jsx(GradientSparkleIcon, {}),
+                " Generating AI Suggestions..."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "#6b7280", fontFamily: "'Inter', sans-serif", mb: 4 }, children: "Our AI is analyzing your requirements and creating personalized suggestions" }),
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                sx: {
+                  fontSize: "0.85rem",
+                  color: "#9ca3af",
+                  fontFamily: "'Inter', sans-serif",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  "@keyframes bounce": {
+                    "0%, 60%, 100%": { transform: "translateY(0)" },
+                    "30%": { transform: "translateY(-8px)" }
+                  },
+                  "& span": {
+                    display: "inline-block",
+                    animation: "bounce 1.4s infinite"
+                  },
+                  "& span:nth-of-type(1)": {
+                    animationDelay: "0s"
+                  },
+                  "& span:nth-of-type(2)": {
+                    animationDelay: "0.2s"
+                  },
+                  "& span:nth-of-type(3)": {
+                    animationDelay: "0.4s"
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+                  /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+                  /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+                  "Please wait..."
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    if (isCheckingExisting) {
+      return /* @__PURE__ */ jsxs(Box, { sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+        // Changed from minHeight
+        backgroundColor: "#ffffff",
+        borderRadius: "8px",
+        border: "1px solid #e5e7eb",
+        p: 2,
+        textAlign: "center"
+      }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, color: "#4338ca", mb: 1 }, children: [
+          /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }),
+          /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "1rem", fontWeight: 600, fontFamily: "'Inter', sans-serif" }, children: [
+            /* @__PURE__ */ jsx(GradientSparkleIcon, {}),
+            " Checking for existing rules..."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "#6b7280", fontFamily: "'Inter', sans-serif", mb: 4 }, children: "Comparing rules with other agents in the database." }),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            sx: {
+              fontSize: "0.85rem",
+              color: "#9ca3af",
+              fontFamily: "'Inter', sans-serif",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              "@keyframes bounce": {
+                "0%, 60%, 100%": { transform: "translateY(0)" },
+                "30%": { transform: "translateY(-8px)" }
+              },
+              "& span": {
+                display: "inline-block",
+                animation: "bounce 1.4s infinite"
+              },
+              "& span:nth-of-type(1)": {
+                animationDelay: "0s"
+              },
+              "& span:nth-of-type(2)": {
+                animationDelay: "0.2s"
+              },
+              "& span:nth-of-type(3)": {
+                animationDelay: "0.4s"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+              /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+              /* @__PURE__ */ jsx("span", { children: "\u25CF" }),
+              "Please wait..."
+            ]
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          backgroundColor: "#f9fafb",
+          borderRadius: "8px",
+          border: "1px solid #e5e7eb",
+          padding: "16px",
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          // Changed from minHeight and height
+          opacity: isSaving ? 0.6 : 1,
+          // Visually indicate disabled state
+          pointerEvents: isSaving ? "none" : "auto"
+          // --- 2. FREEZE SCREEN ---
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 2, flex: 1 }, children: rules.length > 0 ? rules.map((rule, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  backgroundColor: "#ffffff",
+                  borderRadius: "8px",
+                  border: "1px solid #e5e7eb",
+                  padding: "8px 12px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "15px", fontWeight: 500, color: "#6b7280" }, children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  isEditing ? /* @__PURE__ */ jsx(
+                    TextField,
+                    {
+                      value: rule.text,
+                      onChange: (e) => handleItemChange(type, index, e.target.value),
+                      variant: "standard",
+                      multiline: true,
+                      placeholder: "Enter a rule...",
+                      disabled: isSaving,
+                      InputProps: { disableUnderline: true },
+                      sx: {
+                        flex: 1,
+                        // '& .MuiInput-underline:before': { borderBottom: 'none' },
+                        // '& .MuiInput-underline:after': { borderBottom: 'none' },
+                        // '& .MuiInput-underline:hover:not(.Mui-disabled):before': { borderBottom: 'none' },
+                        fontSize: "15px"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "15px", color: "#1f2937", flex: 1, lineHeight: 1.5, wordBreak: "break-word" }, children: rule.text }),
+                  rule.score !== void 0 && /* @__PURE__ */ jsx(Tooltip, { title: "AI Confidence Score", arrow: true, children: renderBadge(rule.score) }),
+                  isEditing && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: () => handleRemoveItem(type, index),
+                      disabled: isSaving,
+                      sx: { color: "#9ca3af", "&:hover": { color: "#ef4444" } },
+                      children: /* @__PURE__ */ jsx(X, { size: 16 })
+                    }
+                  )
+                ]
+              }
+            ),
+            rule.reason && !isEditing && /* @__PURE__ */ jsxs(
+              Accordion,
+              {
+                expanded: expandedReasons[`${type}-${index}`] || false,
+                onChange: () => handleReasonToggle(type, index),
+                disableGutters: true,
+                elevation: 0,
+                sx: {
+                  border: "1px solid #e5e7eb",
+                  borderRadius: "8px",
+                  overflow: "hidden",
+                  mt: 1,
+                  "&:before": { display: "none" }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    AccordionSummary,
+                    {
+                      expandIcon: /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: "#6b7280" }),
+                      sx: {
+                        backgroundColor: "#f2f2f3ff",
+                        minHeight: "auto",
+                        "&.Mui-expanded": {
+                          borderBottom: "1px solid #e5e7eb",
+                          minHeight: "auto"
+                        },
+                        "& .MuiAccordionSummary-content": {
+                          margin: "10px 0px"
+                        }
+                      },
+                      children: /* @__PURE__ */ jsxs(
+                        Typography,
+                        {
+                          sx: {
+                            fontSize: "0.85rem",
+                            fontWeight: 600,
+                            color: "#4b5563",
+                            fontFamily: "'Inter', sans-serif",
+                            // Add these styles for alignment
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 1
+                            // Adds space between icon and text (1 = 8px by default)
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Lightbulb, { size: 16 }),
+                            " ",
+                            type === "wta" ? "Reason behind When To Apply" : "Reason behind When Not To Apply"
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AccordionDetails, { sx: { p: 2, backgroundColor: "#ffffff" }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.9rem", color: "#374151", fontFamily: "'Inter', sans-serif", lineHeight: 1.6 }, children: rule.reason }) })
+                ]
+              }
+            )
+          ] }, index)) : /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: !isEditing && /* @__PURE__ */ jsx(Typography, { sx: { color: "#9ca3af", textAlign: "center" }, children: "No rules defined." }) }) }),
+          isEditing && /* @__PURE__ */ jsx(
+            Button,
+            {
+              startIcon: /* @__PURE__ */ jsx(Plus, { size: 16 }),
+              onClick: () => handleAddItem(type),
+              disabled: isSaving,
+              sx: {
+                color: "#6366f1",
+                fontSize: "15px",
+                fontWeight: 500,
+                textTransform: "none",
+                mt: rules.length > 0 ? 2 : 0,
+                alignSelf: "flex-start"
+              },
+              children: "Add Rule"
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      elevation: 3,
+      className,
+      sx: {
+        padding: "24px",
+        width: "100%",
+        maxWidth: "1050px",
+        margin: "20px",
+        boxSizing: "border-box",
+        borderRadius: "12px",
+        position: "relative"
+        // Needed for positioning the buttons
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          display: "flex",
+          flexDirection: { xs: "column", md: "row" },
+          // Stack on mobile, row on desktop
+          justifyContent: "space-between",
+          alignItems: { xs: "flex-start", md: "center" },
+          // Align left on mobile, center on desktop
+          gap: 2,
+          // Add gap between stacked items
+          mb: 3
+        }, children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "h5",
+                component: "h2",
+                gutterBottom: true,
+                sx: {
+                  display: "flex",
+                  fontWeight: "600",
+                  alignItems: "center",
+                  gap: 1.5,
+                  fontFamily: "'Inter', sans-serif",
+                  mb: 0
+                },
+                children: config.mainTitle
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: config.mainTitleTooltip,
+                arrow: true,
+                slotProps: {
+                  tooltip: {
+                    sx: {
+                      fontSize: "0.8rem",
+                      padding: "0.5rem",
+                      fontFamily: "'Inter', sans-serif"
+                    }
+                  }
+                },
+                children: /* @__PURE__ */ jsx(Info, { size: 13, color: "#494d55ff", style: { cursor: "pointer" } })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ jsx(GradientSparkleIcon, {}),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: {
+                    fontWeight: 600,
+                    fontSize: "1rem",
+                    background: "linear-gradient(90deg, #6a11cb 0%, #2575fc 100%)",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    display: "inline-block"
+                  },
+                  children: "AI Suggested"
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs(Box, { sx: {
+            display: "flex",
+            flexDirection: { xs: "column", sm: "row" },
+            gap: 2,
+            width: { xs: "100%", sm: "auto" }
+          }, children: [
+            /* @__PURE__ */ jsxs(
+              FormControl,
+              {
+                size: "small",
+                sx: {
+                  minWidth: { xs: "100%", sm: 180 },
+                  flex: { sm: 1 }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(InputLabel, { children: "Model Provider" }),
+                  /* @__PURE__ */ jsx(Select, { value: modelProvider, label: "Model Provider", onChange: handleProviderChange, children: Object.keys(modelOptions).map((provider) => /* @__PURE__ */ jsx(MenuItem, { value: provider, children: provider }, provider)) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              FormControl,
+              {
+                size: "small",
+                sx: {
+                  minWidth: { xs: "100%", sm: 180 },
+                  flex: { sm: 1 }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(InputLabel, { children: "Model Name" }),
+                  /* @__PURE__ */ jsx(Select, { value: modelName, label: "Model Name", onChange: handleModelNameChange, children: (_a = modelOptions[modelProvider]) == null ? void 0 : _a.map((name) => /* @__PURE__ */ jsx(MenuItem, { value: name, children: name }, name)) })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          display: "flex",
+          flexDirection: { xs: "column", md: "row" },
+          gap: "24px",
+          alignItems: "stretch"
+        }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, backgroundColor: "#ffffff", display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "subtitle1",
+                sx: {
+                  fontWeight: 600,
+                  marginBottom: "12px",
+                  color: "#1f2937",
+                  fontSize: "16px",
+                  fontFamily: "'Inter', sans-serif",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  "When to Apply ",
+                  /* @__PURE__ */ jsx("span", { style: { color: "red", marginRight: "8px" }, children: "*" }),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: config.wtaTooltip,
+                      arrow: true,
+                      slotProps: {
+                        tooltip: {
+                          sx: {
+                            fontSize: "0.8rem",
+                            padding: "0.5rem",
+                            fontFamily: "'Inter', sans-serif"
+                          }
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(Info, { size: 13, color: "#494d55ff", style: { cursor: "pointer" } })
+                    }
+                  )
+                ]
+              }
+            ),
+            renderRulesList(isEditing ? tempFormState.wta : formState.wta, "wta"),
+            !isEditing && renderSuggestedFixes(suggestedFixes.wta, "wta")
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, backgroundColor: "#ffffff", display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "subtitle1",
+                sx: {
+                  fontWeight: 600,
+                  marginBottom: "12px",
+                  color: "#1f2937",
+                  fontSize: "16px",
+                  fontFamily: "'Inter', sans-serif",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  "When Not To Apply",
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: config.wntaTooltip,
+                      arrow: true,
+                      slotProps: {
+                        tooltip: {
+                          sx: {
+                            fontSize: "0.8rem",
+                            padding: "0.5rem",
+                            fontFamily: "'Inter', sans-serif"
+                          }
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(Info, { size: 13, color: "#494d55ff", style: { marginLeft: "8px", cursor: "pointer" } })
+                    }
+                  )
+                ]
+              }
+            ),
+            renderRulesList(isEditing ? tempFormState.wnta : formState.wnta, "wnta"),
+            !isEditing && renderSuggestedFixes(suggestedFixes.wnta, "wnta")
+          ] })
+        ] }),
+        !isReadOnly && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", mt: 3 }, children: !isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleEdit,
+              variant: "outlined",
+              disabled: isLoadingSuggestions || isSaving || isCheckingExisting,
+              startIcon: /* @__PURE__ */ jsx(PenSquare, { size: 16 }),
+              sx: {
+                marginRight: "8px",
+                borderColor: "#6b7280",
+                color: "#6b7280",
+                textTransform: "none",
+                fontWeight: 500,
+                borderRadius: "8px",
+                padding: "6px 16px",
+                fontFamily: "'Inter', sans-serif",
+                "&:hover": {
+                  backgroundColor: "#f9fafb",
+                  borderColor: "#4b5563"
+                }
+              },
+              children: "Edit"
+            }
+          ),
+          showValidateButton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              onClick: () => onSave(formState),
+              disabled: isSaveButtonDisabled,
+              sx: {
+                backgroundColor: "#4f46e5",
+                color: "white",
+                textTransform: "none",
+                fontWeight: 500,
+                borderRadius: "8px",
+                padding: "6px 16px",
+                fontFamily: "'Inter', sans-serif",
+                "&:hover": {
+                  backgroundColor: "#4338ca"
+                }
+              },
+              children: isSaving ? "Validating..." : isValidDb && !isFormDirty ? "Save" : "Validate"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleCancel,
+              variant: "outlined",
+              disabled: isSaving,
+              sx: {
+                marginRight: "8px",
+                borderColor: "#6b7280",
+                color: "#6b7280",
+                textTransform: "none",
+                fontWeight: 500,
+                borderRadius: "8px",
+                padding: "6px 16px",
+                fontFamily: "'Inter', sans-serif",
+                "&:hover": {
+                  backgroundColor: "#f9fafb",
+                  borderColor: "#4b5563"
+                }
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleConfirm,
+              disabled: isSaving,
+              variant: "contained",
+              sx: {
+                backgroundColor: "#4f46e5",
+                color: "white",
+                textTransform: "none",
+                fontWeight: 500,
+                borderRadius: "8px",
+                padding: "6px 16px",
+                fontFamily: "'Inter', sans-serif",
+                "&:hover": {
+                  backgroundColor: "#4338ca"
+                }
+              },
+              children: "Confirm"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+var AgentDetailsForm$1 = AgentDetailsForm;
+
+export { AgentDetailsForm$1 as default };
 //# sourceMappingURL=AgentDetailsForm.js.map