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

package/dist/features/IL-OTJ/_components/templates/RuleComparison/AgentComposerRuleComparison.js

@@ -1,2 +1,663 @@
-import{__assign as e,__spreadArray as n,__rest as t}from"tslib";import{jsxs as i,jsx as r}from"react/jsx-runtime";import o,{useState as l,useRef as a,useEffect as d,useMemo as s}from"react";import{Box as c,Typography as p,IconButton as h,Skeleton as u}from"@mui/material";import{ArrowLeft as g,ArrowRight as f}from"lucide-react";import x from"../../_svg/SparkleIcon.js";import{CognitiveDecisioningCard as m}from"@e-llm-studio/citation";import{ButtonCognitiveIcon as b}from"../../_svg/ButtonCognitiveIcon.js";import{getCognitiveDecisioningThemeStyles as v}from"../../cognitiveDecisioningThemeStyles.js";var y=function(e,n){if(!n)return null;var t=new RegExp("<".concat(e,"[^>]*>([\\s\\S]*?)<\\/").concat(e,">"),"i"),i=n.match(t);return i?i[1].replace(/\\n/g,"\n"):null},w=function(e,n,t){var i=100*e;if(!t)return{bg:"#FFFFFF",border:"#E2E8F0",badgeBg:"#F1F5F9",badgeBorder:"#CBD5E1",badgeText:"#64748B",highlightBg:"transparent",label:"Not Defined"};var r=function(e){return e&&"null"!==e.toLowerCase()?e.split("_").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}).join(" "):"Different"}(n);return i>=70?{bg:"#FEF2F2",border:"#FEE2E2",badgeBg:"#FEF2F2",badgeBorder:"#FECACA",badgeText:"#B91C1C",highlightBg:"#FECACA",label:r}:i>=40?{bg:"#FFFCF6",border:"#FFDD80",badgeBg:"#FEF9C3",badgeBorder:"#FEF08A",badgeText:"#A16207",highlightBg:"#FDDEB3",label:r}:{bg:"#FFFFFF",border:"#E2E8F0",badgeBg:"#F1F5F9",badgeBorder:"#CBD5E1",badgeText:"#64748B",highlightBg:"transparent",label:r}},F=o.forwardRef(function(n,t){var o=n.label,l=n.content,a=n.highlights,d=void 0===a?[]:a,s=n.styleVariant,h=n.isHighlighted,u=void 0!==h&&h,g=Array.isArray(l)?l.join("\n"):l||"",f="#B91C1C"===s.badgeText?{borderColor:"#EF4444",shadow:"rgba(239, 68, 68, 0.25)"}:"#A16207"===s.badgeText?{borderColor:"#F59E0B",shadow:"rgba(245, 158, 11, 0.25)"}:{borderColor:"#6366F1",shadow:"rgba(99, 102, 241, 0.25)"};return i(c,e({sx:{mb:1.5}},{children:[r(p,e({sx:{fontSize:"12px",color:"#19213D",mb:.5,fontWeight:500,lineHeight:"130%"}},{children:o})),r(c,e({ref:t,sx:{p:"8px 12px",borderRadius:"6px",border:u?"1.5px solid ".concat(f.borderColor):"1px solid ".concat(s.border),boxShadow:u?"0px 0px 0px 2px ".concat(f.shadow):"none",bgcolor:s.bg,fontSize:"13px",color:"#0B0E1A",lineHeight:1.4,minHeight:"28px",display:"flex",alignItems:"center",whiteSpace:"pre-line",wordBreak:"break-word"}},{children:r(c,{children:function(){if(!g)return r(p,e({sx:{color:"#94A3B8",fontSize:"12px",fontStyle:"italic"}},{children:"Not Defined"}));if(!d||0===d.length)return g;var n=d.filter(function(e){return e&&e.length>0}).map(function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")});if(0===n.length)return g;var t=new RegExp("(".concat(n.join("|"),")"),"gi");return g.split(t).map(function(n,t){return d.some(function(e){return e&&e.toLowerCase()===n.toLowerCase()})?r(c,e({component:"span",sx:{bgcolor:s.highlightBg,borderRadius:"2px",px:"2px"}},{children:n}),t):n})}()})}))]}))}),_=function(n){var t=n.data,o=n.isSelected,l=n.isCognitiveOpen,a=n.onToggleCognitive,d=n.onClick,s=t.summaryText||t.description||"",h=s.match(/<ai_reasoning>([\s\S]*?)<\/ai_reasoning>/i),g=h?s.replace(h[0],"").trim():s,f=!!h;return i(c,e({id:"variant-card-".concat(t.id),onClick:d,sx:{minWidth:"280px",maxWidth:"280px",p:2,m:.5,bgcolor:o?"#EFF6FF99":"#FFFFFF",borderRadius:"8px",cursor:"pointer",transition:"all 0.2s",display:"flex",flexDirection:"column",gap:1,flexShrink:0,opacity:t.isLoading?.7:1,border:o?"1.4px solid #2563EB":null,boxShadow:o?"none":"0px 2px 4px 0px #19213D14","&:hover":{borderColor:o?"#2563EB":"#CBD5E1",boxShadow:o?"none":"0px 4px 8px 0px #19213D1F"}}},{children:[r(c,e({sx:{display:"flex",alignItems:"center",gap:1.5}},{children:t.isLoading?r(u,{variant:"rounded",width:80,height:20}):i(c,e({sx:{bgcolor:"#FEF2F2",color:"#B91C1C",fontSize:"11px",fontWeight:600,px:1,py:.5,borderRadius:"100px",border:"1px solid #FFE1E1"}},{children:[void 0!==t.similarity?t.similarity:0,"% Similarity"]}))})),i(c,e({sx:{display:"flex",flexDirection:"column",gap:1}},{children:[r(p,e({sx:{fontWeight:500,fontSize:"14px",color:"#19213D",lineHeight:1.2}},{children:t.title})),t.isLoading?i(c,{children:[r(u,{width:"90%"}),r(u,{width:"60%"})]}):i(p,e({sx:{fontWeight:400,fontSize:"13px",color:"#666F8D",display:"-webkit-box",lineHeight:1.4}},{children:[g,f&&i(c,e({component:"span",onClick:function(e){e.stopPropagation(),o||d(),a()},sx:{display:"inline-flex",alignItems:"center",gap:"4px",padding:"2px 6px",borderRadius:"4px",cursor:"pointer",transition:"all 0.2s ease",verticalAlign:"middle",marginLeft:"6px"}},{children:[r("div",e({style:{width:"13px",height:"13px",display:"flex",alignItems:"center"}},{children:r(b,{})})),r("svg",e({width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"#4B5563",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{transform:o&&l?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}},{children:r("path",{d:"M6 9l6 6 6-6"})}))]}))]}))]}))]}))},C=function(o){var u,C,B=o.proposedRule,E=o.variants,k=void 0===E?[]:E,S=o.onSelectVariant,A=o.onSkip,D=o.onBack,T=o.targetVariantId,z=o.highlightedField,L=l(T||null),W=L[0],I=L[1],R=l(!1),j=R[0],H=R[1],M=l(null),O=M[0],V=M[1],G=a(null),N=a(null),P=a(null),U=l([]),$=U[0],q=U[1],J=l(!1),X=J[0],Y=J[1],K=l(!1),Q=K[0],Z=K[1];d(function(){if(T&&I(T),V(null!=z?z:null),z){var e=setTimeout(function(){return V(null)},6e3);return function(){return clearTimeout(e)}}},[T,z]);var ee=s(function(){return n([],k,!0).sort(function(e,n){return(n.similarity||0)-(e.similarity||0)})},[k]),ne=s(function(){if(W){var e=String(W).trim();return k.find(function(n){return n.id&&String(n.id).trim()===e})||ee[0]}return ee.length>0?ee[0]:null},[W,k,ee]);d(function(){if(W&&G.current){var e=W.trim();setTimeout(function(){var n=document.getElementById("variant-card-".concat(e)),t=G.current;if(n&&t){var i=n.offsetLeft-t.offsetLeft-t.clientWidth/2+n.clientWidth/2;t.scrollTo({left:i,behavior:"smooth"})}},150)}},[W,ee]);var te=ne||{title:"",description:"",wta:"",wnta:""},ie=null==ne?void 0:ne.analysis,re=(null===(C=null===(u=null==ie?void 0:ie.rule_difference_comparison)||void 0===u?void 0:u.summary)||void 0===C?void 0:C.overall_summary)||"",oe=re.match(/<ai_reasoning>([\s\S]*?)<\/ai_reasoning>/i),le=!!oe,ae=oe?oe[1]:"",de=y("reason",ae)||"",se=y("gap",ae)||"",ce=y("relevance_score",ae)||"",pe=s(function(){return{ul:function(n){n.node;var i=t(n,["node"]);return r("ol",e({},i,{style:{paddingLeft:"1.25rem",listStyleType:"decimal",margin:0}}))},li:function(n){n.node;var i=t(n,["node"]);return r("li",e({},i,{style:{marginBottom:"4px",listStyleType:"decimal"}},{children:i.children}))},ol:function(n){n.node;var i=t(n,["node"]);return r("li",e({},i,{style:{marginBottom:"4px",listStyleType:"decimal"}},{children:i.children}))},a:function(n){var o=n.href,l=n.children,a=t(n,["href","children"]);if(!o)return r("a",e({},a,{children:l}));var d=o||"";try{d=decodeURIComponent(o)}catch(e){console.error("Error decoding href",e)}if(d.includes("variant_id=")){var s="",c="",p=d.match(/variant_id=([^?&]+)/);p&&(s=p[1]);var h=d.match(/field_name=([^&]+)/);return h&&(c=h[1]),i("button",e({type:"button",onClick:function(e){e.preventDefault(),e.stopPropagation(),I(s),V(c),setTimeout(function(){return V(null)},6e3)},style:{background:"none",border:"none",outline:"none",borderRadius:"6px",padding:"1px 4px",color:"#0F172A",cursor:"pointer",fontSize:"13px",fontWeight:500,display:"inline-flex",alignItems:"center",gap:"2px",margin:"0 1px",verticalAlign:"baseline",textDecoration:"none",boxShadow:"none",WebkitAppearance:"none",MozAppearance:"none"},title:"View Comparison"},{children:[l,r("svg",e({width:"13",height:"13",viewBox:"0 0 13 13",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:r("path",{d:"M10.2082 8.67708H2.0415M2.0415 8.67708L4.08317 6.63542M2.0415 8.67708L4.08317 10.7188M2.0415 3.57292H10.2082M10.2082 3.57292L8.1665 1.53125M10.2082 3.57292L8.1665 5.61458",stroke:"#0F172A",strokeWidth:"1.2",strokeLinecap:"round",strokeLinejoin:"round"})}))]}))}return r("a",e({href:o,target:"_blank",rel:"noopener noreferrer",style:{color:"#7C3AED"}},a,{children:l}))}}},[]),he=["title","description","when_to_apply","when_not_to_apply"],ue={title:a(null),description:a(null),wta:a(null),wnta:a(null)},ge={title:a(null),description:a(null),wta:a(null),wnta:a(null)};d(function(){if(O){var e="when_to_apply"===O?"wta":"when_not_to_apply"===O?"wnta":O,n=ue[e]||ge[e];n&&n.current&&setTimeout(function(){n.current.scrollIntoView({behavior:"smooth",block:"center"})},150)}},[O]);var fe=function(e){var n,t,i,r,o,l=null===(n=null==ie?void 0:ie.rule_difference_comparison)||void 0===n?void 0:n.fields,a="when_to_apply"===e?"wta":"when_not_to_apply"===e?"wnta":e,d=!(!B[a]&&!te[a]);if(!l||!l[e])return{score:0,relation:"",highlightsA:[],highlightsB:[],hasContent:!1};var s=l[e];if(s.mappings){var c=s.mappings[0]||{};return{score:s.score,relation:c.relation||"",highlightsA:(null===(t=c.highlights)||void 0===t?void 0:t.ruleA_spans)||[],highlightsB:(null===(i=c.highlights)||void 0===i?void 0:i.ruleB_spans)||[],hasContent:d}}return{score:s.score,relation:s.relation||"",highlightsA:(null===(r=s.highlights)||void 0===r?void 0:r.ruleA_spans)||[],highlightsB:(null===(o=s.highlights)||void 0===o?void 0:o.ruleB_spans)||[],hasContent:d}},xe=function(){if(P.current){var e=P.current.getBoundingClientRect(),n=[];he.forEach(function(t){var i="when_to_apply"===t?ue.wta:"when_not_to_apply"===t?ue.wnta:ue[t],r="when_to_apply"===t?ge.wta:"when_not_to_apply"===t?ge.wnta:ge[t];if(i.current&&r.current){var o=fe(t),l=w(o.score,o.relation,o.hasContent),a=i.current.getBoundingClientRect(),d=r.current.getBoundingClientRect();n.push({x1:a.right-e.left,y1:a.top+a.height/2-e.top,x2:d.left-e.left,y2:d.top+d.height/2-e.top,style:l})}}),q(n)}};d(function(){var e=setTimeout(xe,250);window.addEventListener("resize",xe);var n=null;return P.current&&(n=new ResizeObserver(function(){window.requestAnimationFrame(function(){xe()})})).observe(P.current),function(){clearTimeout(e),window.removeEventListener("resize",xe),n&&n.disconnect()}},[B,te,ie,j]),d(function(){var e=G.current;if(e){var n=function(){Y(e.scrollLeft>0),Z(e.scrollLeft+e.clientWidth<e.scrollWidth-1)};return n(),e.addEventListener("scroll",n),window.addEventListener("resize",n),function(){e.removeEventListener("scroll",n),window.removeEventListener("resize",n)}}},[ee]),d(function(){!W&&!T&&ee.length>0&&!ee[0].isLoading&&I(ee[0].id)},[ee,W,T]);var me=function(e){G.current&&G.current.scrollBy({left:"left"===e?-300:300,behavior:"smooth"})};return i(c,e({sx:{display:"flex",flexDirection:"column",height:"100%",bgcolor:"#F6F7F9B2",fontFamily:'"Plus Jakarta Sans", sans-serif',overflow:"hidden"}},{children:[i(c,e({sx:{px:2,py:1,display:"flex",alignItems:"center",justifyContent:"space-between",bgcolor:"#FFFFFF",border:"1.5px solid #EEF0F4"}},{children:[i(c,e({sx:{display:"flex",alignItems:"center",gap:1}},{children:[r(h,e({onClick:D,size:"small"},{children:r(g,{})})),r(p,e({sx:{fontSize:"16px",fontWeight:450,color:"#0F172A"}},{children:"Conflict Resolution"}))]})),r(h,e({onClick:A,size:"small"},{children:r(c,e({sx:{fontSize:24,lineHeight:.5}},{children:"×"}))}))]})),ee.length>0&&i(c,e({sx:{px:3,pb:.25}},{children:[i(c,e({sx:{display:"flex",alignItems:"center",justifyContent:"space-between",py:1}},{children:[r(p,e({sx:{fontSize:"13px",color:"#475569"}},{children:"Choose the guideline you want to compare with."})),i(c,e({sx:{display:"flex",gap:.5,flexShrink:0,ml:1}},{children:[r(h,e({onClick:function(){return me("left")},size:"small",disabled:!X},{children:r(g,{size:18})})),r(h,e({onClick:function(){return me("right")},size:"small",disabled:!Q},{children:r(f,{size:18})}))]}))]})),r(c,e({ref:G,sx:{display:"flex",gap:1,overflowX:"auto",pb:.05,"&::-webkit-scrollbar":{height:"6px"},"&::-webkit-scrollbar-track":{background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"transparent",borderRadius:"10px"},"&::-webkit-scrollbar-thumb:hover":{background:"transparent"}}},{children:ee.map(function(e){return r(_,{data:e,isSelected:(null==ne?void 0:ne.id)===e.id,isCognitiveOpen:j,onToggleCognitive:function(){H(function(e){var n=!e;return n&&N.current&&N.current.scrollTo({top:0,behavior:"smooth"}),n})},onClick:function(){return I((n=e).id),S(n),void H(!1);var n}},e.id)})}))]})),r(c,e({ref:N,sx:{flex:1,overflowY:"auto",py:1.5,px:3,display:"flex",justifyContent:"center",alignItems:"flex-start",bgcolor:"#FFFFFF",borderTop:re&&le&&j?"none":"1.5px solid #EEF0F4"}},{children:i(c,e({sx:{display:"flex",flexDirection:"column",width:"100%",maxWidth:"1200px"}},{children:[re&&le&&j&&r(c,e({sx:{width:"100%",pb:1,animation:"fadeIn 0.2s ease-out","& > div > button":{display:"none !important"},"& > div > div":{marginTop:"0px"}}},{children:r(m,{headerIcon:r(b,{}),reasoning:de,gap:se,score:ce,mdComponents:pe,isOpen:!0,onToggle:function(){return H(!1)},styles:v()})})),i(c,e({ref:P,sx:{display:"grid",gridTemplateColumns:"1fr auto 1fr",gap:"60px",maxWidth:"1200px",width:"100%",position:"relative"}},{children:[r("svg",e({style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:10}},{children:$.map(function(n,t){var o=(n.x1+n.x2)/2,l=(n.y1+n.y2)/2;return i("g",{children:[r("line",{x1:n.x1,y1:n.y1,x2:n.x2,y2:n.y2,stroke:n.style.badgeBorder,strokeWidth:"1"}),r("foreignObject",e({x:o-125,y:l-16,width:"250",height:"32"},{children:r(c,e({sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"}},{children:r(c,e({sx:{fontSize:"11px",bgcolor:n.style.badgeBg,color:n.style.badgeText,border:"1px solid ".concat(n.style.badgeBorder),borderRadius:"12px",px:1.5,py:.25,fontWeight:500,textAlign:"center",whiteSpace:"nowrap"}},{children:n.style.label}))}))}))]},t)})})),i(c,e({sx:{border:"1px dashed #B0B0B0",borderRadius:"8px",bgcolor:"#FFFFFF",display:"flex",flexDirection:"column",position:"relative",zIndex:2,filter:"drop-shadow(0px 2px 4px #F2F2F2)",minWidth:0}},{children:[r(c,e({sx:{p:"8px",bgcolor:"#F7F8FA",borderBottom:"1px dashed #B0B0B0",borderRadius:"8px 8px 0 0",display:"flex",minHeight:"24px",alignItems:"center"}},{children:r(p,e({sx:{fontSize:"16px",fontWeight:500,color:"#19213D"}},{children:"Conflicting Guideline 1"}))})),r(c,e({sx:{p:"12px",display:"flex",flexDirection:"column"}},{children:he.map(function(e){var n=fe(e),t=w(n.score,n.relation,n.hasContent),i="when_to_apply"===e?ue.wta:"when_not_to_apply"===e?ue.wnta:ue[e],o=B["when_to_apply"===e?"wta":"when_not_to_apply"===e?"wnta":e];return r(F,{ref:i,label:"when_to_apply"===e?"When to apply":"when_not_to_apply"===e?"When NOT to apply":"title"===e?"Guideline Title":"Guideline Description",content:o,highlights:n.highlightsA,styleVariant:t,isHighlighted:O===e},"left-".concat(e))})}))]})),r(c,{sx:{width:"1px"}}),i(c,e({sx:{border:"1px solid #E3E6EA",borderRadius:"8px",bgcolor:"#FFFFFF",boxShadow:"0px 1px 4px #F7F4FE",position:"relative",zIndex:2,display:"flex",flexDirection:"column",minWidth:0}},{children:[r(c,e({sx:{p:"8px",bgcolor:"#F7F8FA",borderBottom:"1px solid #E3E6EA",borderRadius:"8px 8px 0 0",minHeight:"24px",display:"flex",alignItems:"center"}},{children:i(p,e({sx:{fontSize:"16px",fontWeight:500,color:"#5928ED",display:"flex",alignItems:"center",gap:1}},{children:[r("div",e({style:{width:"18px",height:"18px",display:"flex",alignItems:"center",justifyContent:"center"}},{children:r(x,{})})),"Conflicting Guideline 2"]}))})),r(c,e({sx:{p:"12px",display:"flex",flexDirection:"column"}},{children:he.map(function(e){var n=fe(e),t=w(n.score,n.relation,n.hasContent),i="when_to_apply"===e?ge.wta:"when_not_to_apply"===e?ge.wnta:ge[e],o=te["when_to_apply"===e?"wta":"when_not_to_apply"===e?"wnta":e];return r(F,{ref:i,label:"when_to_apply"===e?"When to apply":"when_not_to_apply"===e?"When NOT to apply":"title"===e?"Guideline Title":"Guideline Description",content:o,highlights:n.highlightsB,styleVariant:t,isHighlighted:O===e},"right-".concat(e))})}))]}))]}))]}))}))]}))};export{C as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, useMemo } from 'react';
+import { Box, Typography, IconButton, Skeleton } from '@mui/material';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import SparkleIcon from '../../_svg/SparkleIcon.js';
+import { CognitiveDecisioningCard } from '@e-llm-studio/citation';
+import { ButtonCognitiveIcon } from '../../_svg/ButtonCognitiveIcon.js';
+import { getCognitiveDecisioningThemeStyles } from '../../cognitiveDecisioningThemeStyles.js';
+
+const formatRelationToLabel = (relation) => {
+  if (!relation || relation.toLowerCase() === "null") return "Different";
+  return relation.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+};
+const extractTag = (tag, content) => {
+  if (!content) return null;
+  const regex = new RegExp(`<${tag}[^>]*>([\\s\\S]*?)<\\/${tag}>`, "i");
+  const match = content.match(regex);
+  return match ? match[1].replace(/\\n/g, "\n") : null;
+};
+const getStyleForRelation = (score, relation, hasContent) => {
+  const percentage = score * 100;
+  if (!hasContent) {
+    return {
+      bg: "#FFFFFF",
+      border: "#E2E8F0",
+      badgeBg: "#F1F5F9",
+      badgeBorder: "#CBD5E1",
+      badgeText: "#64748B",
+      highlightBg: "transparent",
+      label: "Not Defined"
+    };
+  }
+  const displayLabel = formatRelationToLabel(relation);
+  if (percentage >= 70) {
+    return {
+      bg: "#FEF2F2",
+      border: "#FEE2E2",
+      badgeBg: "#FEF2F2",
+      badgeBorder: "#FECACA",
+      badgeText: "#B91C1C",
+      highlightBg: "#FECACA",
+      label: displayLabel
+    };
+  }
+  if (percentage >= 40) {
+    return {
+      bg: "#FFFCF6",
+      border: "#FFDD80",
+      badgeBg: "#FEF9C3",
+      badgeBorder: "#FEF08A",
+      badgeText: "#A16207",
+      highlightBg: "#FDDEB3",
+      label: displayLabel
+    };
+  }
+  return {
+    bg: "#FFFFFF",
+    border: "#E2E8F0",
+    badgeBg: "#F1F5F9",
+    badgeBorder: "#CBD5E1",
+    badgeText: "#64748B",
+    highlightBg: "transparent",
+    label: displayLabel
+  };
+};
+const Field = React__default.forwardRef(
+  ({ label, content, highlights = [], styleVariant, isHighlighted = false }, ref) => {
+    const textContent = Array.isArray(content) ? content.join("\n") : content || "";
+    const getGlowStyle = () => {
+      if (styleVariant.badgeText === "#B91C1C") {
+        return { borderColor: "#EF4444", shadow: "rgba(239, 68, 68, 0.25)" };
+      }
+      if (styleVariant.badgeText === "#A16207") {
+        return { borderColor: "#F59E0B", shadow: "rgba(245, 158, 11, 0.25)" };
+      }
+      return { borderColor: "#6366F1", shadow: "rgba(99, 102, 241, 0.25)" };
+    };
+    const glow = getGlowStyle();
+    const renderHighlightedText = () => {
+      if (!textContent) {
+        return /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              color: "#94A3B8",
+              fontSize: "12px",
+              fontStyle: "italic"
+            },
+            children: "Not Defined"
+          }
+        );
+      }
+      if (!highlights || highlights.length === 0) return textContent;
+      const escapedHighlights = highlights.filter((h) => h && h.length > 0).map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+      if (escapedHighlights.length === 0) return textContent;
+      const regex = new RegExp(`(${escapedHighlights.join("|")})`, "gi");
+      const parts = textContent.split(regex);
+      return parts.map((part, index) => {
+        const isHighlight = highlights.some(
+          (h) => h && h.toLowerCase() === part.toLowerCase()
+        );
+        return isHighlight ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: { bgcolor: styleVariant.highlightBg, borderRadius: "2px", px: "2px" },
+            children: part
+          },
+          index
+        ) : part;
+      });
+    };
+    return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "12px", color: "#19213D", mb: 0.5, fontWeight: 500, lineHeight: "130%" }, children: label }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref,
+          sx: {
+            p: "8px 12px",
+            borderRadius: "6px",
+            border: isHighlighted ? `1.5px solid ${glow.borderColor}` : `1px solid ${styleVariant.border}`,
+            boxShadow: isHighlighted ? `0px 0px 0px 2px ${glow.shadow}` : "none",
+            bgcolor: styleVariant.bg,
+            fontSize: "13px",
+            color: "#0B0E1A",
+            lineHeight: 1.4,
+            minHeight: "28px",
+            display: "flex",
+            alignItems: "center",
+            whiteSpace: "pre-line",
+            wordBreak: "break-word"
+          },
+          children: /* @__PURE__ */ jsx(Box, { children: renderHighlightedText() })
+        }
+      )
+    ] });
+  }
+);
+const VariantCard = ({
+  data,
+  isSelected,
+  isCognitiveOpen,
+  onToggleCognitive,
+  onClick
+}) => {
+  const rawSummary = data.summaryText || data.description || "";
+  const reasoningMatch = rawSummary.match(/<ai_reasoning>([\s\S]*?)<\/ai_reasoning>/i);
+  const cleanSummary = reasoningMatch ? rawSummary.replace(reasoningMatch[0], "").trim() : rawSummary;
+  const hasReasoning = !!reasoningMatch;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      id: `variant-card-${data.id}`,
+      onClick,
+      sx: {
+        minWidth: "280px",
+        maxWidth: "280px",
+        p: 2,
+        m: 0.5,
+        bgcolor: isSelected ? "#EFF6FF99" : "#FFFFFF",
+        borderRadius: "8px",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        flexShrink: 0,
+        opacity: data.isLoading ? 0.7 : 1,
+        border: isSelected ? "1.4px solid #2563EB" : null,
+        boxShadow: isSelected ? "none" : "0px 2px 4px 0px #19213D14",
+        "&:hover": {
+          borderColor: isSelected ? "#2563EB" : "#CBD5E1",
+          boxShadow: isSelected ? "none" : "0px 4px 8px 0px #19213D1F"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: data.isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 80, height: 20 }) : /* @__PURE__ */ jsxs(Box, { sx: { bgcolor: "#FEF2F2", color: "#B91C1C", fontSize: "11px", fontWeight: 600, px: 1, py: 0.5, borderRadius: "100px", border: "1px solid #FFE1E1" }, children: [
+          data.similarity !== void 0 ? data.similarity : 0,
+          "% Similarity"
+        ] }) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 500, fontSize: "14px", color: "#19213D", lineHeight: 1.2 }, children: data.title }),
+          data.isLoading ? /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: "90%" }),
+            /* @__PURE__ */ jsx(Skeleton, { width: "60%" })
+          ] }) : /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              sx: {
+                fontWeight: 400,
+                fontSize: "13px",
+                color: "#666F8D",
+                display: "-webkit-box",
+                lineHeight: 1.4
+              },
+              children: [
+                cleanSummary,
+                hasReasoning && /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    component: "span",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      if (!isSelected) onClick();
+                      onToggleCognitive();
+                    },
+                    sx: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      padding: "2px 6px",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      transition: "all 0.2s ease",
+                      verticalAlign: "middle",
+                      marginLeft: "6px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { style: { width: "13px", height: "13px", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}) }),
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "12",
+                          height: "12",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "#4B5563",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          style: {
+                            transform: isSelected && isCognitiveOpen ? "rotate(180deg)" : "rotate(0deg)",
+                            transition: "transform 0.2s ease"
+                          },
+                          children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const AgentComposerRuleComparison = ({
+  proposedRule,
+  variants = [],
+  onSelectVariant,
+  onSkip,
+  onBack,
+  targetVariantId,
+  highlightedField
+}) => {
+  var _a, _b;
+  const [selectedVariantId, setSelectedVariantId] = useState(targetVariantId || null);
+  const [isCognitiveOpen, setIsCognitiveOpen] = useState(false);
+  const [localHighlightField, setLocalHighlightField] = useState(null);
+  const scrollRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const containerRef = useRef(null);
+  const [lines, setLines] = useState([]);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  useEffect(() => {
+    if (targetVariantId) setSelectedVariantId(targetVariantId);
+    setLocalHighlightField(highlightedField != null ? highlightedField : null);
+    if (highlightedField) {
+      const timer = setTimeout(() => setLocalHighlightField(null), 6e3);
+      return () => clearTimeout(timer);
+    }
+  }, [targetVariantId, highlightedField]);
+  const sortedVariants = useMemo(() => {
+    return [...variants].sort((a, b) => (b.similarity || 0) - (a.similarity || 0));
+  }, [variants]);
+  const activeVariant = useMemo(() => {
+    if (selectedVariantId) {
+      const cleanTarget = String(selectedVariantId).trim();
+      return variants.find((v) => v.id && String(v.id).trim() === cleanTarget) || sortedVariants[0];
+    }
+    return sortedVariants.length > 0 ? sortedVariants[0] : null;
+  }, [selectedVariantId, variants, sortedVariants]);
+  useEffect(() => {
+    if (selectedVariantId && scrollRef.current) {
+      const cleanTargetId = selectedVariantId.trim();
+      setTimeout(() => {
+        const el = document.getElementById(`variant-card-${cleanTargetId}`);
+        const container = scrollRef.current;
+        if (el && container) {
+          const scrollPos = el.offsetLeft - container.offsetLeft - container.clientWidth / 2 + el.clientWidth / 2;
+          container.scrollTo({
+            left: scrollPos,
+            behavior: "smooth"
+          });
+        }
+      }, 150);
+    }
+  }, [selectedVariantId, sortedVariants]);
+  const existingRule = activeVariant || {
+    title: "",
+    description: "",
+    wta: "",
+    wnta: ""
+  };
+  const analysisData = activeVariant == null ? void 0 : activeVariant.analysis;
+  const overallSummaryRaw = ((_b = (_a = analysisData == null ? void 0 : analysisData.rule_difference_comparison) == null ? void 0 : _a.summary) == null ? void 0 : _b.overall_summary) || "";
+  const reasoningMatch = overallSummaryRaw.match(/<ai_reasoning>([\s\S]*?)<\/ai_reasoning>/i);
+  const hasReasoning = !!reasoningMatch;
+  const reasoningContent = reasoningMatch ? reasoningMatch[1] : "";
+  const reason = extractTag("reason", reasoningContent) || "";
+  const gap = extractTag("gap", reasoningContent) || "";
+  const score = extractTag("relevance_score", reasoningContent) || "";
+  const cardMdComponents = useMemo(
+    () => ({
+      ul: ({ node, ...props }) => /* @__PURE__ */ jsx("ol", { ...props, style: { paddingLeft: "1.25rem", listStyleType: "decimal", margin: 0 } }),
+      li: ({ node, ...props }) => /* @__PURE__ */ jsx("li", { ...props, style: { marginBottom: "4px", listStyleType: "decimal" }, children: props.children }),
+      ol: ({ node, ...props }) => /* @__PURE__ */ jsx("li", { ...props, style: { marginBottom: "4px", listStyleType: "decimal" }, children: props.children }),
+      a: ({ href, children, ...props }) => {
+        if (!href) return /* @__PURE__ */ jsx("a", { ...props, children });
+        let decodedHref = href || "";
+        try {
+          decodedHref = decodeURIComponent(href);
+        } catch (e) {
+          console.error("Error decoding href", e);
+        }
+        if (decodedHref.includes("variant_id=")) {
+          let variantId = "";
+          let fieldName = "";
+          const variantMatch = decodedHref.match(/variant_id=([^?&]+)/);
+          if (variantMatch) variantId = variantMatch[1];
+          const fieldMatch = decodedHref.match(/field_name=([^&]+)/);
+          if (fieldMatch) fieldName = fieldMatch[1];
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setSelectedVariantId(variantId);
+                setLocalHighlightField(fieldName);
+                setTimeout(() => setLocalHighlightField(null), 6e3);
+              },
+              style: {
+                background: "none",
+                border: "none",
+                outline: "none",
+                borderRadius: "6px",
+                padding: "1px 4px",
+                color: "#0F172A",
+                cursor: "pointer",
+                fontSize: "13px",
+                fontWeight: 500,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "2px",
+                margin: "0 1px",
+                verticalAlign: "baseline",
+                textDecoration: "none",
+                boxShadow: "none",
+                WebkitAppearance: "none",
+                MozAppearance: "none"
+              },
+              title: "View Comparison",
+              children: [
+                children,
+                /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M10.2082 8.67708H2.0415M2.0415 8.67708L4.08317 6.63542M2.0415 8.67708L4.08317 10.7188M2.0415 3.57292H10.2082M10.2082 3.57292L8.1665 1.53125M10.2082 3.57292L8.1665 5.61458", stroke: "#0F172A", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              ]
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", style: { color: "#7C3AED" }, ...props, children });
+      }
+    }),
+    []
+  );
+  const fieldKeys = ["title", "description", "when_to_apply", "when_not_to_apply"];
+  const leftRefs = {
+    title: useRef(null),
+    description: useRef(null),
+    wta: useRef(null),
+    wnta: useRef(null)
+  };
+  const rightRefs = {
+    title: useRef(null),
+    description: useRef(null),
+    wta: useRef(null),
+    wnta: useRef(null)
+  };
+  useEffect(() => {
+    if (localHighlightField) {
+      const refKey = localHighlightField === "when_to_apply" ? "wta" : localHighlightField === "when_not_to_apply" ? "wnta" : localHighlightField;
+      const targetRef = leftRefs[refKey] || rightRefs[refKey];
+      if (targetRef && targetRef.current) {
+        setTimeout(() => {
+          targetRef.current.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+        }, 150);
+      }
+    }
+  }, [localHighlightField]);
+  const getFieldData = (fieldKey) => {
+    var _a2, _b2, _c, _d, _e;
+    const fields = (_a2 = analysisData == null ? void 0 : analysisData.rule_difference_comparison) == null ? void 0 : _a2.fields;
+    const actualKey = fieldKey === "when_to_apply" ? "wta" : fieldKey === "when_not_to_apply" ? "wnta" : fieldKey;
+    const hasContent = !!(proposedRule[actualKey] || existingRule[actualKey]);
+    if (!fields || !fields[fieldKey]) {
+      return { score: 0, relation: "", highlightsA: [], highlightsB: [], hasContent: false };
+    }
+    const field = fields[fieldKey];
+    if (field.mappings) {
+      const mapping = field.mappings[0] || {};
+      return {
+        score: field.score,
+        relation: mapping.relation || "",
+        highlightsA: ((_b2 = mapping.highlights) == null ? void 0 : _b2.ruleA_spans) || [],
+        highlightsB: ((_c = mapping.highlights) == null ? void 0 : _c.ruleB_spans) || [],
+        hasContent
+      };
+    }
+    return {
+      score: field.score,
+      relation: field.relation || "",
+      highlightsA: ((_d = field.highlights) == null ? void 0 : _d.ruleA_spans) || [],
+      highlightsB: ((_e = field.highlights) == null ? void 0 : _e.ruleB_spans) || [],
+      hasContent
+    };
+  };
+  const calculateLines = () => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newLines = [];
+    fieldKeys.forEach((key) => {
+      const lRef = key === "when_to_apply" ? leftRefs.wta : key === "when_not_to_apply" ? leftRefs.wnta : leftRefs[key];
+      const rRef = key === "when_to_apply" ? rightRefs.wta : key === "when_not_to_apply" ? rightRefs.wnta : rightRefs[key];
+      if (lRef.current && rRef.current) {
+        const data = getFieldData(key);
+        const style = getStyleForRelation(data.score, data.relation, data.hasContent);
+        const leftRect = lRef.current.getBoundingClientRect();
+        const rightRect = rRef.current.getBoundingClientRect();
+        newLines.push({
+          x1: leftRect.right - containerRect.left,
+          y1: leftRect.top + leftRect.height / 2 - containerRect.top,
+          x2: rightRect.left - containerRect.left,
+          y2: rightRect.top + rightRect.height / 2 - containerRect.top,
+          style
+        });
+      }
+    });
+    setLines(newLines);
+  };
+  useEffect(() => {
+    const timer = setTimeout(calculateLines, 250);
+    window.addEventListener("resize", calculateLines);
+    let observer = null;
+    if (containerRef.current) {
+      observer = new ResizeObserver(() => {
+        window.requestAnimationFrame(() => {
+          calculateLines();
+        });
+      });
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("resize", calculateLines);
+      if (observer) observer.disconnect();
+    };
+  }, [proposedRule, existingRule, analysisData, isCognitiveOpen]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const update = () => {
+      setCanScrollLeft(el.scrollLeft > 0);
+      setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    };
+    update();
+    el.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+      el.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [sortedVariants]);
+  useEffect(() => {
+    if (!selectedVariantId && !targetVariantId && sortedVariants.length > 0 && !sortedVariants[0].isLoading) {
+      setSelectedVariantId(sortedVariants[0].id);
+    }
+  }, [sortedVariants, selectedVariantId, targetVariantId]);
+  const handleVariantClick = (variant) => {
+    setSelectedVariantId(variant.id);
+    onSelectVariant(variant);
+    setIsCognitiveOpen(false);
+  };
+  const scroll = (direction) => {
+    if (!scrollRef.current) return;
+    scrollRef.current.scrollBy({
+      left: direction === "left" ? -300 : 300,
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", bgcolor: "#F6F7F9B2", fontFamily: '"Plus Jakarta Sans", sans-serif', overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1, display: "flex", alignItems: "center", justifyContent: "space-between", bgcolor: "#FFFFFF", border: "1.5px solid #EEF0F4" }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: onBack, size: "small", children: /* @__PURE__ */ jsx(ArrowLeft, {}) }),
+        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "16px", fontWeight: 450, color: "#0F172A" }, children: "Conflict Resolution" })
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { onClick: onSkip, size: "small", children: /* @__PURE__ */ jsx(Box, { sx: { fontSize: 24, lineHeight: 0.5 }, children: "\xD7" }) })
+    ] }),
+    sortedVariants.length > 0 && /* @__PURE__ */ jsxs(Box, { sx: { px: 3, pb: 0.25 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", py: 1 }, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "13px", color: "#475569" }, children: "Choose the guideline you want to compare with." }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.5, flexShrink: 0, ml: 1 }, children: [
+          /* @__PURE__ */ jsx(IconButton, { onClick: () => scroll("left"), size: "small", disabled: !canScrollLeft, children: /* @__PURE__ */ jsx(ArrowLeft, { size: 18 }) }),
+          /* @__PURE__ */ jsx(IconButton, { onClick: () => scroll("right"), size: "small", disabled: !canScrollRight, children: /* @__PURE__ */ jsx(ArrowRight, { size: 18 }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: scrollRef,
+          sx: {
+            display: "flex",
+            gap: 1,
+            overflowX: "auto",
+            pb: 0.05,
+            "&::-webkit-scrollbar": { height: "6px" },
+            "&::-webkit-scrollbar-track": { background: "transparent" },
+            "&::-webkit-scrollbar-thumb": { background: "transparent", borderRadius: "10px" },
+            "&::-webkit-scrollbar-thumb:hover": { background: "transparent" }
+          },
+          children: sortedVariants.map((item) => /* @__PURE__ */ jsx(
+            VariantCard,
+            {
+              data: item,
+              isSelected: (activeVariant == null ? void 0 : activeVariant.id) === item.id,
+              isCognitiveOpen,
+              onToggleCognitive: () => {
+                setIsCognitiveOpen((prev) => {
+                  const next = !prev;
+                  if (next && scrollContainerRef.current) {
+                    scrollContainerRef.current.scrollTo({
+                      top: 0,
+                      behavior: "smooth"
+                    });
+                  }
+                  return next;
+                });
+              },
+              onClick: () => handleVariantClick(item)
+            },
+            item.id
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: scrollContainerRef,
+        sx: {
+          flex: 1,
+          overflowY: "auto",
+          py: 1.5,
+          px: 3,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "flex-start",
+          bgcolor: "#FFFFFF",
+          borderTop: overallSummaryRaw && hasReasoning && isCognitiveOpen ? "none" : "1.5px solid #EEF0F4"
+        },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", width: "100%", maxWidth: "1200px" }, children: [
+          overallSummaryRaw && hasReasoning && isCognitiveOpen && /* @__PURE__ */ jsx(Box, { sx: { width: "100%", pb: 1, animation: "fadeIn 0.2s ease-out", "& > div > button": { display: "none !important" }, "& > div > div": { marginTop: "0px" } }, children: /* @__PURE__ */ jsx(
+            CognitiveDecisioningCard,
+            {
+              headerIcon: /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}),
+              reasoning: reason,
+              gap,
+              score,
+              mdComponents: cardMdComponents,
+              isOpen: true,
+              onToggle: () => setIsCognitiveOpen(false),
+              styles: getCognitiveDecisioningThemeStyles()
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              ref: containerRef,
+              sx: { display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: "60px", maxWidth: "1200px", width: "100%", position: "relative" },
+              children: [
+                /* @__PURE__ */ jsx("svg", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 10 }, children: lines.map((line, index) => {
+                  const midX = (line.x1 + line.x2) / 2;
+                  const midY = (line.y1 + line.y2) / 2;
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("line", { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, stroke: line.style.badgeBorder, strokeWidth: "1" }),
+                    /* @__PURE__ */ jsx("foreignObject", { x: midX - 125, y: midY - 16, width: "250", height: "32", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx(Box, { sx: { fontSize: "11px", bgcolor: line.style.badgeBg, color: line.style.badgeText, border: `1px solid ${line.style.badgeBorder}`, borderRadius: "12px", px: 1.5, py: 0.25, fontWeight: 500, textAlign: "center", whiteSpace: "nowrap" }, children: line.style.label }) }) })
+                  ] }, index);
+                }) }),
+                /* @__PURE__ */ jsxs(Box, { sx: { border: "1px dashed #B0B0B0", borderRadius: "8px", bgcolor: "#FFFFFF", display: "flex", flexDirection: "column", position: "relative", zIndex: 2, filter: "drop-shadow(0px 2px 4px #F2F2F2)", minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { p: "8px", bgcolor: "#F7F8FA", borderBottom: "1px dashed #B0B0B0", borderRadius: "8px 8px 0 0", display: "flex", minHeight: "24px", alignItems: "center" }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "16px", fontWeight: 500, color: "#19213D" }, children: "Conflicting Guideline 1" }) }),
+                  /* @__PURE__ */ jsx(Box, { sx: { p: "12px", display: "flex", flexDirection: "column" }, children: fieldKeys.map((key) => {
+                    const data = getFieldData(key);
+                    const style = getStyleForRelation(data.score, data.relation, data.hasContent);
+                    const lRef = key === "when_to_apply" ? leftRefs.wta : key === "when_not_to_apply" ? leftRefs.wnta : leftRefs[key];
+                    const content = proposedRule[key === "when_to_apply" ? "wta" : key === "when_not_to_apply" ? "wnta" : key];
+                    return /* @__PURE__ */ jsx(
+                      Field,
+                      {
+                        ref: lRef,
+                        label: key === "when_to_apply" ? "When to apply" : key === "when_not_to_apply" ? "When NOT to apply" : key === "title" ? "Guideline Title" : "Guideline Description",
+                        content,
+                        highlights: data.highlightsA,
+                        styleVariant: style,
+                        isHighlighted: localHighlightField === key
+                      },
+                      `left-${key}`
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsx(Box, { sx: { width: "1px" } }),
+                /* @__PURE__ */ jsxs(Box, { sx: { border: "1px solid #E3E6EA", borderRadius: "8px", bgcolor: "#FFFFFF", boxShadow: "0px 1px 4px #F7F4FE", position: "relative", zIndex: 2, display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { p: "8px", bgcolor: "#F7F8FA", borderBottom: "1px solid #E3E6EA", borderRadius: "8px 8px 0 0", minHeight: "24px", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "16px", fontWeight: 500, color: "#5928ED", display: "flex", alignItems: "center", gap: 1 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { width: "18px", height: "18px", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(SparkleIcon, {}) }),
+                    "Conflicting Guideline 2"
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Box, { sx: { p: "12px", display: "flex", flexDirection: "column" }, children: fieldKeys.map((key) => {
+                    const data = getFieldData(key);
+                    const style = getStyleForRelation(data.score, data.relation, data.hasContent);
+                    const rRef = key === "when_to_apply" ? rightRefs.wta : key === "when_not_to_apply" ? rightRefs.wnta : rightRefs[key];
+                    const content = existingRule[key === "when_to_apply" ? "wta" : key === "when_not_to_apply" ? "wnta" : key];
+                    return /* @__PURE__ */ jsx(
+                      Field,
+                      {
+                        ref: rRef,
+                        label: key === "when_to_apply" ? "When to apply" : key === "when_not_to_apply" ? "When NOT to apply" : key === "title" ? "Guideline Title" : "Guideline Description",
+                        content,
+                        highlights: data.highlightsB,
+                        styleVariant: style,
+                        isHighlighted: localHighlightField === key
+                      },
+                      `right-${key}`
+                    );
+                  }) })
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+var AgentComposerRuleComparison$1 = AgentComposerRuleComparison;
+
+export { AgentComposerRuleComparison$1 as default };
 //# sourceMappingURL=AgentComposerRuleComparison.js.map