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

package/dist/cjs/features/IL-OTJ/_components/CriticalGaps.js

@@ -1,2 +1,704 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("react/jsx-runtime"),i=require("react"),r=require("@mui/material"),o=require("lucide-react"),t=require("@e-llm-studio/citation"),s=require("./MarkdownComponents/MarkdownSelect.js"),a=require("./_svg/ButtonCognitiveIcon.js"),l=require("./CitationLink.js"),d=require("./cognitiveDecisioningThemeStyles.js"),c=require("./GapExplanationAccordion.js"),u=require("./MarkdownComponents/MarkdownElements.js"),p=function(){return n.jsxs("svg",e.__assign({width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"},{children:[n.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),n.jsx("polyline",{points:"12 5 19 12 12 19"})]}))},x=function(x){var g,m,f=x.gap,h=x.index,_=x.onUpdate,v=x.isEditable,y=x.citations,b=x.onTypeResponseClick,j=i.useState(!1),S=j[0],C=j[1],w=i.useState({}),F=w[0],B=w[1],k=i.useRef(null);i.useEffect(function(){var e;0===h&&"text"===f.inputType&&v&&(null===(e=k.current)||void 0===e||e.focus())},[h,f.inputType,v]);var T=function(e){return e?e.replace(/\\n/g,"\n"):""},D=i.useMemo(function(){var e;return T((null===(e=f.aiReasoning)||void 0===e?void 0:e.reason)||"")},[null===(g=f.aiReasoning)||void 0===g?void 0:g.reason]),R=i.useMemo(function(){var e;return T((null===(e=f.aiReasoning)||void 0===e?void 0:e.gap)||"")},[null===(m=f.aiReasoning)||void 0===m?void 0:m.gap]),E=i.useCallback(function(e,n){return y&&y.find(function(i){return i.customMetaData.citation_number&&"Cognitive Decisioning"!==i.customMetaData.citation_title&&i.customMetaData.source===n&&String(i.customMetaData.citation_number)===String(e)})||null},[y]),I=i.useMemo(function(){return{img:function(i){i.node;var r=e.__rest(i,["node"]);return n.jsx("img",e.__assign({},r,{style:{height:"100%",width:"100%",objectFit:"contain"},alt:(null==r?void 0:r.alt)||"",className:"w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto"}))},p:function(i){i.node;var r=e.__rest(i,["node"]);return n.jsx("p",e.__assign({},r,{style:{margin:0}},{children:null==r?void 0:r.children}))},code:function(i){i.node;var r=e.__rest(i,["node"]);return n.jsx("span",e.__assign({},r,{style:{maxWidth:"100%",wordWrap:"break-word",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"normal",overflow:"hidden",display:"inline-flex",fontSize:"1rem",lineHeight:"1.625rem"}},{children:null==r?void 0:r.children}))},ol:function(i){i.node;var r=e.__rest(i,["node"]);return n.jsx("ol",e.__assign({},r,{style:{display:"flex",flexDirection:"column",gap:"1rem",listStyle:"decimal",paddingLeft:"2.5rem"}},{children:null==r?void 0:r.children}))},ul:function(i){i.node;var r=e.__rest(i,["node"]);return n.jsx("ol",e.__assign({},r,{style:{paddingLeft:"1.25rem",listStyleType:"decimal"}}))},li:function(i){i.node;var r=e.__rest(i,["node"]);return n.jsx("li",e.__assign({},r,{style:{marginBottom:"4px",listStyle:"decimal"}},{children:r.children}))},a:function(i){var r=i.href,o=i.children;if(!r)return n.jsx("a",{children:o});var t=r.match(/citationNumber=([^&]+)/);if(t&&l.default){var s=u.getSourceFromUrl(r),a=E(t[1],s);if(a)return n.jsx(l.default,{citation:a,linkTitle:o,fontSize:12})}return n.jsx("a",e.__assign({href:r,target:"_blank",rel:"noopener noreferrer",className:"md-link inline-flex items-center gap-1 text-purple-700 hover:underline",style:{color:"var(--il-primary, #7C3AED)"}},{children:o}))}}},[E]),A=function(e){return"string"==typeof e?{text:e,reasoning:null,explanation:null,id:null,isRecommended:!1}:{text:e.text,reasoning:e.aiReasoning,explanation:e.explanation,id:e.id,isRecommended:e.is_recommended}},M="checkbox"===f.inputType,z=function(n,i){if(v){if("typeYourAnswer"===i||"type your response"===n.trim().toLowerCase())return _(f.id,n),void(b&&b());if(M){var r=Array.isArray(f.userSelection)?f.userSelection:[],o=r.includes(n)?r.filter(function(e){return e!==n}):e.__spreadArray(e.__spreadArray([],r,!0),[n],!1);_(f.id,o)}else _(f.id,n)}};return n.jsx(r.Box,e.__assign({sx:{bgcolor:"var(--il-surface, #FFFEFE)",color:"var(--il-foreground, #17212B)",overflow:"hidden"}},{children:n.jsxs(r.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:"8px"}},{children:[n.jsx(r.Box,e.__assign({sx:{display:"flex",flexDirection:"column",width:"100%"}},{children:n.jsxs(r.Typography,e.__assign({component:"div",sx:{fontSize:"16px",fontWeight:400,color:"var(--il-foreground, #17212B)",lineHeight:1.5}},{children:[n.jsx("span",e.__assign({style:{color:"var(--il-danger, #8F2C23)",paddingRight:"2px"}},{children:"*"}))," ",h+1,". ",f.value,f.aiReasoning&&n.jsx(r.Box,e.__assign({component:"span",sx:{display:"inline",verticalAlign:"middle",ml:.5}},{children:n.jsx(t.CognitiveDecisioningCard,{headerIcon:n.jsx(a.ButtonCognitiveIcon,{}),reasoning:D,reasoningTitle:"Decision Making Factors",reasoningSubtitle:"Why is this Suggested?",gapTitle:"Gaps in Decision",gapSubtitle:"What's missing or unclear?",gap:R,score:f.aiReasoning.score,isOpen:S,onToggle:function(){return C(function(e){return!e})},mdComponents:I,styles:d.getCognitiveDecisioningThemeStyles()})}))]}))})),"text"===f.inputType?n.jsx(r.TextareaAutosize,{ref:k,minRows:1,maxRows:10,value:f.userSelection||"",onChange:function(e){v&&_(f.id,e.target.value)},disabled:!v,placeholder:"Enter your input...",style:{width:"100%",minHeight:"30px",padding:"8px 12px",borderRadius:"6px",border:"1px solid var(--il-input-border, #CBD5E1)",background:"var(--il-input-bg, #FFFFFF)",color:"var(--il-input-fg, #17212B)",fontSize:"14px",resize:"none"}}):M?n.jsx(r.FormGroup,e.__assign({row:!0,sx:{gap:"16px",flexDirection:"column"}},{children:f.options.map(function(i,s){var l=A(i),u=l.text,x=l.reasoning,g=l.explanation,m=l.id,h=l.isRecommended,_="checkbox"===f.inputType?(f.userSelection||[]).includes(u):f.userSelection===u;return n.jsxs(r.Box,e.__assign({sx:{display:"flex",flexDirection:"column",width:"100%"}},{children:[n.jsx(r.FormControlLabel,{control:n.jsx(r.Checkbox,{checked:(f.userSelection||[]).includes(u),onChange:function(){return z(u,m)},value:u,size:"small",disabled:!v,sx:{p:0,mr:"7px",width:"17.5px",height:"17.5px","& .MuiSvgIcon-root":{fontSize:17.5},color:"var(--il-muted, #CBD5E1)","&.Mui-checked":{color:"var(--il-primary, #2563EB)"},alignSelf:"flex-start",mt:"2px"}}),label:n.jsxs(r.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:"6px",width:"100%"}},{children:[n.jsxs(r.Typography,e.__assign({sx:{fontSize:"14px",color:"var(--il-foreground, #1E293B)",fontWeight:400}},{children:[u,h&&n.jsx("span",e.__assign({style:{borderRadius:"100px",border:"1px solid var(--il-primary, #D1E0FF)",background:"color-mix(in srgb, var(--il-primary, #528BFF) 12%, var(--il-surface, #FFF))",color:"var(--il-primary, #528BFF)",padding:"2px 8px",paddingBottom:"3.5px",whiteSpace:"nowrap",textOverflow:"ellipsis",fontFamily:"Inter",fontSize:"12px",fontStyle:"normal",fontWeight:"500",lineHeight:"100%",marginLeft:"8px"}},{children:"Recommended"}))]})),(x||g)&&n.jsxs(r.Box,e.__assign({onClick:function(n){n.stopPropagation(),B(function(n){var i;return e.__assign(e.__assign({},n),((i={})[s]=!n[s],i))})},sx:{display:"flex",alignItems:"center",gap:"2px",cursor:"pointer",flexShrink:0}},{children:[n.jsx(a.ButtonCognitiveIcon,{}),F[s]?n.jsx(o.ChevronUp,{size:12,color:"var(--il-muted, #667085)"}):n.jsx(o.ChevronDown,{size:12,color:"var(--il-muted, #667085)"})]}))]})),sx:{mr:0,ml:0,alignItems:"flex-start",width:"100%"}}),(x||g)&&F[s]&&n.jsxs(r.Box,e.__assign({sx:{width:"100%",border:"1px solid var(--il-border, #EAECF0)",marginTop:"6px",borderRadius:"16px",overflow:"hidden",boxShadow:"0 1px 2px 0 rgba(16, 24, 40, 0.05)"}},{children:[g&&n.jsx(c.GapExplanationAccordion,{explanation:g,isSelected:_,onProceed:function(){return z(u)},proceedIcon:n.jsx(p,{})}),x&&n.jsx(t.CognitiveDecisioningCard,{headerIcon:n.jsx(a.ButtonCognitiveIcon,{}),reasoning:x.reason,gap:x.gap,reasoningTitle:"Decision Making Factors",reasoningSubtitle:"Why is this Suggested?",gapTitle:"Gaps in Decision",gapSubtitle:"What's missing or unclear?",score:x.score,isOpen:!0,onToggle:function(){return B(function(n){var i;return e.__assign(e.__assign({},n),((i={})[s]=!1,i))})},hideTrigger:!0,mdComponents:I,styles:d.getCognitiveDecisioningThemeStyles({container:{border:"none",borderRadius:0,marginTop:0,marginBottom:0},header:{borderBottom:"none"},sectionButton:{padding:"16px"}})})]}))]}),s)})})):n.jsx(r.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:"8px"}},{children:f.options.map(function(i,l){var u=A(i),x=u.text,g=u.reasoning,m=u.explanation,h=u.id,_=u.isRecommended,y=f.userSelection===x;return n.jsxs(r.Box,e.__assign({sx:{display:"flex",flexDirection:"column",width:"100%"}},{children:[n.jsxs(r.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:"8px",width:"100%"}},{children:[n.jsxs(r.Box,e.__assign({onClick:function(){return z(x,h)},sx:{display:"flex",alignItems:"center",gap:"8px",padding:"8px",borderRadius:"8px",cursor:v?"pointer":"default",bgcolor:y?"color-mix(in srgb, var(--il-primary, #2563eb) 16%, var(--il-surface, #ffffff))":"transparent",border:"1px solid",borderColor:y?"var(--il-primary, #B2CCFF)":"transparent",transition:"all 0.15s ease-in-out",flex:1,boxSizing:"border-box"}},{children:[n.jsx(s.DynamicArrow,{isSelected:y,width:24,height:24}),n.jsxs(r.Typography,e.__assign({sx:{fontSize:"14px",color:"var(--il-foreground, #344054)",fontWeight:500}},{children:[x,_&&n.jsx("span",e.__assign({style:{borderRadius:"100px",border:"1px solid var(--il-primary, #D1E0FF)",background:"color-mix(in srgb, var(--il-primary, #528BFF) 12%, var(--il-surface, #FFF))",color:"var(--il-primary, #528BFF)",padding:"2px 8px",paddingBottom:"3.5px",whiteSpace:"nowrap",textOverflow:"ellipsis",fontFamily:"Inter",fontSize:"12px",fontStyle:"normal",fontWeight:"500",lineHeight:"100%",marginLeft:"8px"}},{children:"Recommended"}))]}))]})),(g||m)&&n.jsxs(r.Box,e.__assign({onClick:function(n){n.stopPropagation(),B(function(n){var i;return e.__assign(e.__assign({},n),((i={})[l]=!n[l],i))})},sx:{display:"flex",alignItems:"center",gap:"2px",cursor:"pointer",flexShrink:0}},{children:[n.jsx(a.ButtonCognitiveIcon,{}),F[l]?n.jsx(o.ChevronUp,{size:12,color:"var(--il-muted, #667085)"}):n.jsx(o.ChevronDown,{size:12,color:"var(--il-muted, #667085)"})]}))]})),(g||m)&&F[l]&&n.jsxs(r.Box,e.__assign({sx:{width:"100%",border:"1px solid var(--il-border, #EAECF0)",marginTop:"6px",borderRadius:"16px",overflow:"hidden",boxShadow:"0 1px 2px 0 rgba(16, 24, 40, 0.05)"}},{children:[m&&n.jsx(r.Box,e.__assign({sx:{borderBottom:g?"1px solid var(--il-border, #EAECF0)":"none"}},{children:n.jsx(c.GapExplanationAccordion,{explanation:m,isSelected:y,onProceed:function(){return z(x)},proceedIcon:n.jsx(p,{})})})),g&&n.jsx(t.CognitiveDecisioningCard,{reasoningTitle:"Decision Making Factors",reasoningSubtitle:"Why is this Suggested?",gapTitle:"Gaps in Decision",gapSubtitle:"What's missing or unclear?",headerIcon:n.jsx(a.ButtonCognitiveIcon,{}),reasoning:g.reason,gap:g.gap,score:g.score,isOpen:!0,onToggle:function(){return B(function(n){var i;return e.__assign(e.__assign({},n),((i={})[l]=!1,i))})},hideTrigger:!0,mdComponents:I,styles:d.getCognitiveDecisioningThemeStyles({container:{border:"none",borderRadius:0,marginTop:0,marginBottom:0},header:{borderBottom:"none"},sectionButton:{padding:"16px"}})})]}))]}),l)})}))]}))}))};exports.CriticalGaps=function(o){var t=o.data,s=o.isLastMessage,a=o.onValidationChange,l=o.isSubmitted,d=o.citations,c=o.onTypeResponseClick,u=o.isGlobalEditActive,p=i.useState(t.gaps.map(function(n){return e.__assign(e.__assign({},n),{userSelection:"checkbox"===n.inputType?[]:null})})),g=p[0],m=p[1],f=i.useCallback(function(n,i){m(function(r){return r.map(function(r){return r.id===n?e.__assign(e.__assign({},r),{userSelection:i}):r})})},[]);i.useEffect(function(){if(a){var e=g.some(function(e){return"checkbox"===e.inputType?Array.isArray(e.userSelection)&&e.userSelection.length>0:"text"===e.inputType?null!==e.userSelection&&"string"==typeof e.userSelection&&""!==e.userSelection.trim():null!==e.userSelection&&""!==e.userSelection});a(e,g)}},[g,a]);var h=s&&!l&&!u;return n.jsx(r.Box,e.__assign({sx:{width:"100%",backgroundColor:"var(--il-surface, #FFFFFF)",color:"var(--il-foreground, #17212B)",borderRadius:"8px",border:"1px solid var(--il-border, #E3E6EA)",padding:"14px",marginTop:"12px"}},{children:n.jsx(r.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:"16px"}},{children:g.map(function(e,i){return n.jsx(x,{index:i,gap:e,onUpdate:f,isEditable:h,citations:d,onTypeResponseClick:c},e.id)})}))}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var lucideReact = require('lucide-react');
+var citation = require('@e-llm-studio/citation');
+var MarkdownSelect = require('./MarkdownComponents/MarkdownSelect.js');
+var ButtonCognitiveIcon = require('./_svg/ButtonCognitiveIcon.js');
+var CitationLink = require('./CitationLink.js');
+var cognitiveDecisioningThemeStyles = require('./cognitiveDecisioningThemeStyles.js');
+var GapExplanationAccordion = require('./GapExplanationAccordion.js');
+var MarkdownElements = require('./MarkdownComponents/MarkdownElements.js');
+
+const ProceedArrow = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 5 19 12 12 19" })
+] });
+const GapItem = ({ gap, index, onUpdate, isEditable, citations, onTypeResponseClick }) => {
+  var _a, _b;
+  const [showMainReasoning, setShowMainReasoning] = React.useState(false);
+  const [optionReasoningState, setOptionReasoningState] = React.useState({});
+  const textInputRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a2;
+    if (index === 0 && gap.inputType === "text" && isEditable) {
+      (_a2 = textInputRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, [index, gap.inputType, isEditable]);
+  const formatMarkdownSource = (content) => {
+    if (!content) return "";
+    return content.replace(/\\n/g, "\n");
+  };
+  const sanitizedReasoning = React.useMemo(
+    () => {
+      var _a2;
+      return formatMarkdownSource(((_a2 = gap.aiReasoning) == null ? void 0 : _a2.reason) || "");
+    },
+    [(_a = gap.aiReasoning) == null ? void 0 : _a.reason]
+  );
+  const sanitizedGapReasoning = React.useMemo(
+    () => {
+      var _a2;
+      return formatMarkdownSource(((_a2 = gap.aiReasoning) == null ? void 0 : _a2.gap) || "");
+    },
+    [(_b = gap.aiReasoning) == null ? void 0 : _b.gap]
+  );
+  const getCitationByNumber = React.useCallback((citationNumber, source) => {
+    if (!citations) return null;
+    return citations.find(
+      (c) => c.customMetaData.citation_number && c.customMetaData.citation_title !== "Cognitive Decisioning" && c.customMetaData.source === source && String(c.customMetaData.citation_number) === String(citationNumber)
+    ) || null;
+  }, [citations]);
+  const markdownComponents = React.useMemo(() => ({
+    img: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("img", { ...props, style: { height: "100%", width: "100%", objectFit: "contain" }, alt: (props == null ? void 0 : props.alt) || "", className: "w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto" }),
+    p: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { ...props, style: { margin: 0 }, children: props == null ? void 0 : props.children }),
+    code: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, style: { maxWidth: "100%", wordWrap: "break-word", overflowWrap: "break-word", wordBreak: "break-word", whiteSpace: "normal", overflow: "hidden", display: "inline-flex", fontSize: "1rem", lineHeight: "1.625rem" }, children: props == null ? void 0 : props.children }),
+    ol: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, style: { display: "flex", flexDirection: "column", gap: "1rem", listStyle: "decimal", paddingLeft: "2.5rem" }, children: props == null ? void 0 : props.children }),
+    ul: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, style: { paddingLeft: "1.25rem", listStyleType: "decimal" } }),
+    li: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, style: { marginBottom: "4px", listStyle: "decimal" }, children: props.children }),
+    a: ({ href, children }) => {
+      if (!href) return /* @__PURE__ */ jsxRuntime.jsx("a", { children });
+      const match = href.match(/citationNumber=([^&]+)/);
+      if (match && CitationLink["default"]) {
+        const source = MarkdownElements.getSourceFromUrl(href);
+        const cit = getCitationByNumber(match[1], source);
+        if (cit) return /* @__PURE__ */ jsxRuntime.jsx(CitationLink["default"], { citation: cit, linkTitle: children, fontSize: 12 });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", className: "md-link inline-flex items-center gap-1 text-purple-700 hover:underline", style: { color: "var(--il-primary, #7C3AED)" }, children });
+    }
+  }), [getCitationByNumber]);
+  const getOptionData = (opt) => {
+    if (typeof opt === "string") return { text: opt, reasoning: null, explanation: null, id: null, isRecommended: false };
+    return {
+      text: opt.text,
+      reasoning: opt.aiReasoning,
+      explanation: opt.explanation,
+      // This ensures the data from the JSON payload is captured
+      id: opt.id,
+      isRecommended: opt.is_recommended
+    };
+  };
+  const isMultiSelect = gap.inputType === "checkbox";
+  const handleTextChange = (event) => {
+    if (!isEditable) return;
+    onUpdate(gap.id, event.target.value);
+  };
+  const handleChange = (val, optId) => {
+    if (!isEditable) return;
+    if (optId === "typeYourAnswer" || val.trim().toLowerCase() === "type your response") {
+      onUpdate(gap.id, val);
+      if (onTypeResponseClick) onTypeResponseClick();
+      return;
+    }
+    if (isMultiSelect) {
+      const currentSelection = Array.isArray(gap.userSelection) ? gap.userSelection : [];
+      const newSelection = currentSelection.includes(val) ? currentSelection.filter((item) => item !== val) : [...currentSelection, val];
+      onUpdate(gap.id, newSelection);
+    } else {
+      onUpdate(gap.id, val);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      sx: {
+        // boxSizing: "border-box",
+        // border: "1px solid #F0F2F5",
+        // borderRadius: "8px",
+        // mb: "2px",
+        // pb: "14px",
+        bgcolor: "var(--il-surface, #FFFEFE)",
+        color: "var(--il-foreground, #17212B)",
+        // boxShadow: "0px 2px 4px rgba(25, 33, 61, 0.08)",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Typography,
+          {
+            component: "div",
+            sx: {
+              fontSize: "16px",
+              fontWeight: 400,
+              color: "var(--il-foreground, #17212B)",
+              lineHeight: 1.5
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--il-danger, #8F2C23)", paddingRight: "2px" }, children: "*" }),
+              " ",
+              index + 1,
+              ". ",
+              gap.value,
+              gap.aiReasoning && /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  component: "span",
+                  sx: {
+                    display: "inline",
+                    verticalAlign: "middle",
+                    ml: 0.5
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    citation.CognitiveDecisioningCard,
+                    {
+                      headerIcon: /* @__PURE__ */ jsxRuntime.jsx(ButtonCognitiveIcon.ButtonCognitiveIcon, {}),
+                      reasoning: sanitizedReasoning,
+                      reasoningTitle: "Decision Making Factors",
+                      reasoningSubtitle: "Why is this Suggested?",
+                      gapTitle: "Gaps in Decision",
+                      gapSubtitle: "What's missing or unclear?",
+                      gap: sanitizedGapReasoning,
+                      score: gap.aiReasoning.score,
+                      isOpen: showMainReasoning,
+                      onToggle: () => setShowMainReasoning((prev) => !prev),
+                      mdComponents: markdownComponents,
+                      styles: cognitiveDecisioningThemeStyles.getCognitiveDecisioningThemeStyles()
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        gap.inputType === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextareaAutosize,
+          {
+            ref: textInputRef,
+            minRows: 1,
+            maxRows: 10,
+            value: gap.userSelection || "",
+            onChange: handleTextChange,
+            disabled: !isEditable,
+            placeholder: "Enter your input...",
+            style: {
+              width: "100%",
+              minHeight: "30px",
+              padding: "8px 12px",
+              borderRadius: "6px",
+              border: "1px solid var(--il-input-border, #CBD5E1)",
+              background: "var(--il-input-bg, #FFFFFF)",
+              color: "var(--il-input-fg, #17212B)",
+              fontSize: "14px",
+              resize: "none"
+            }
+          }
+        ) : isMultiSelect ? /* @__PURE__ */ jsxRuntime.jsx(material.FormGroup, { row: true, sx: { gap: "16px", flexDirection: "column" }, children: gap.options.map((opt, idx) => {
+          const { text, reasoning, explanation, id, isRecommended } = getOptionData(opt);
+          const isSelected = gap.inputType === "checkbox" ? (gap.userSelection || []).includes(text) : gap.userSelection === text;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: { display: "flex", flexDirection: "column", width: "100%" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.FormControlLabel,
+                  {
+                    control: /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Checkbox,
+                      {
+                        checked: (gap.userSelection || []).includes(text),
+                        onChange: () => handleChange(text, id),
+                        value: text,
+                        size: "small",
+                        disabled: !isEditable,
+                        sx: {
+                          p: 0,
+                          mr: "7px",
+                          width: "17.5px",
+                          height: "17.5px",
+                          "& .MuiSvgIcon-root": { fontSize: 17.5 },
+                          color: "var(--il-muted, #CBD5E1)",
+                          "&.Mui-checked": { color: "var(--il-primary, #2563EB)" },
+                          alignSelf: "flex-start",
+                          mt: "2px"
+                        }
+                      }
+                    ),
+                    label: /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.Box,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          width: "100%"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            material.Typography,
+                            {
+                              sx: {
+                                fontSize: "14px",
+                                color: "var(--il-foreground, #1E293B)",
+                                fontWeight: 400
+                              },
+                              children: [
+                                text,
+                                isRecommended && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                                  borderRadius: "100px",
+                                  border: "1px solid var(--il-primary, #D1E0FF)",
+                                  background: "color-mix(in srgb, var(--il-primary, #528BFF) 12%, var(--il-surface, #FFF))",
+                                  color: "var(--il-primary, #528BFF)",
+                                  padding: "2px 8px",
+                                  paddingBottom: "3.5px",
+                                  whiteSpace: "nowrap",
+                                  textOverflow: "ellipsis",
+                                  fontFamily: "Inter",
+                                  fontSize: "12px",
+                                  fontStyle: "normal",
+                                  fontWeight: "500",
+                                  lineHeight: "100%",
+                                  marginLeft: "8px"
+                                }, children: "Recommended" })
+                              ]
+                            }
+                          ),
+                          (reasoning || explanation) && /* @__PURE__ */ jsxRuntime.jsxs(
+                            material.Box,
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                setOptionReasoningState((prev) => ({
+                                  ...prev,
+                                  [idx]: !prev[idx]
+                                }));
+                              },
+                              sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "2px",
+                                cursor: "pointer",
+                                flexShrink: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(ButtonCognitiveIcon.ButtonCognitiveIcon, {}),
+                                optionReasoningState[idx] ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 12, color: "var(--il-muted, #667085)" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, color: "var(--il-muted, #667085)" })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    sx: { mr: 0, ml: 0, alignItems: "flex-start", width: "100%" }
+                  }
+                ),
+                (reasoning || explanation) && optionReasoningState[idx] && /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    sx: {
+                      width: "100%",
+                      border: "1px solid var(--il-border, #EAECF0)",
+                      marginTop: "6px",
+                      borderRadius: "16px",
+                      overflow: "hidden",
+                      boxShadow: "0 1px 2px 0 rgba(16, 24, 40, 0.05)"
+                    },
+                    children: [
+                      explanation && /* @__PURE__ */ jsxRuntime.jsx(
+                        GapExplanationAccordion.GapExplanationAccordion,
+                        {
+                          explanation,
+                          isSelected,
+                          onProceed: () => handleChange(text),
+                          proceedIcon: /* @__PURE__ */ jsxRuntime.jsx(ProceedArrow, {})
+                        }
+                      ),
+                      reasoning && /* @__PURE__ */ jsxRuntime.jsx(
+                        citation.CognitiveDecisioningCard,
+                        {
+                          headerIcon: /* @__PURE__ */ jsxRuntime.jsx(ButtonCognitiveIcon.ButtonCognitiveIcon, {}),
+                          reasoning: reasoning.reason,
+                          gap: reasoning.gap,
+                          reasoningTitle: "Decision Making Factors",
+                          reasoningSubtitle: "Why is this Suggested?",
+                          gapTitle: "Gaps in Decision",
+                          gapSubtitle: "What's missing or unclear?",
+                          score: reasoning.score,
+                          isOpen: true,
+                          onToggle: () => setOptionReasoningState((prev) => ({
+                            ...prev,
+                            [idx]: false
+                          })),
+                          hideTrigger: true,
+                          mdComponents: markdownComponents,
+                          styles: cognitiveDecisioningThemeStyles.getCognitiveDecisioningThemeStyles({
+                            container: { border: "none", borderRadius: 0, marginTop: 0, marginBottom: 0 },
+                            header: { borderBottom: "none" },
+                            sectionButton: { padding: "16px" }
+                          })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            },
+            idx
+          );
+        }) }) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: "8px" }, children: gap.options.map((opt, idx) => {
+          const { text, reasoning, explanation, id, isRecommended } = getOptionData(opt);
+          const isSelected = gap.userSelection === text;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: { display: "flex", flexDirection: "column", width: "100%" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      width: "100%"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.Box,
+                        {
+                          onClick: () => handleChange(text, id),
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            padding: "8px",
+                            borderRadius: "8px",
+                            cursor: isEditable ? "pointer" : "default",
+                            bgcolor: isSelected ? "color-mix(in srgb, var(--il-primary, #2563eb) 16%, var(--il-surface, #ffffff))" : "transparent",
+                            border: "1px solid",
+                            borderColor: isSelected ? "var(--il-primary, #B2CCFF)" : "transparent",
+                            transition: "all 0.15s ease-in-out",
+                            flex: 1,
+                            boxSizing: "border-box"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              MarkdownSelect.DynamicArrow,
+                              {
+                                isSelected,
+                                width: 24,
+                                height: 24
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              material.Typography,
+                              {
+                                sx: {
+                                  fontSize: "14px",
+                                  color: "var(--il-foreground, #344054)",
+                                  fontWeight: 500
+                                },
+                                children: [
+                                  text,
+                                  isRecommended && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                                    borderRadius: "100px",
+                                    border: "1px solid var(--il-primary, #D1E0FF)",
+                                    background: "color-mix(in srgb, var(--il-primary, #528BFF) 12%, var(--il-surface, #FFF))",
+                                    color: "var(--il-primary, #528BFF)",
+                                    padding: "2px 8px",
+                                    paddingBottom: "3.5px",
+                                    whiteSpace: "nowrap",
+                                    textOverflow: "ellipsis",
+                                    fontFamily: "Inter",
+                                    fontSize: "12px",
+                                    fontStyle: "normal",
+                                    fontWeight: "500",
+                                    lineHeight: "100%",
+                                    marginLeft: "8px"
+                                  }, children: "Recommended" })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      (reasoning || explanation) && /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.Box,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setOptionReasoningState((prev) => ({
+                              ...prev,
+                              [idx]: !prev[idx]
+                            }));
+                          },
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "2px",
+                            cursor: "pointer",
+                            flexShrink: 0
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(ButtonCognitiveIcon.ButtonCognitiveIcon, {}),
+                            optionReasoningState[idx] ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 12, color: "var(--il-muted, #667085)" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, color: "var(--il-muted, #667085)" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                (reasoning || explanation) && optionReasoningState[idx] && /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    sx: {
+                      width: "100%",
+                      border: "1px solid var(--il-border, #EAECF0)",
+                      marginTop: "6px",
+                      borderRadius: "16px",
+                      overflow: "hidden",
+                      boxShadow: "0 1px 2px 0 rgba(16, 24, 40, 0.05)"
+                    },
+                    children: [
+                      explanation && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { borderBottom: reasoning ? "1px solid var(--il-border, #EAECF0)" : "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        GapExplanationAccordion.GapExplanationAccordion,
+                        {
+                          explanation,
+                          isSelected,
+                          onProceed: () => handleChange(text),
+                          proceedIcon: /* @__PURE__ */ jsxRuntime.jsx(ProceedArrow, {})
+                        }
+                      ) }),
+                      reasoning && /* @__PURE__ */ jsxRuntime.jsx(
+                        citation.CognitiveDecisioningCard,
+                        {
+                          reasoningTitle: "Decision Making Factors",
+                          reasoningSubtitle: "Why is this Suggested?",
+                          gapTitle: "Gaps in Decision",
+                          gapSubtitle: "What's missing or unclear?",
+                          headerIcon: /* @__PURE__ */ jsxRuntime.jsx(ButtonCognitiveIcon.ButtonCognitiveIcon, {}),
+                          reasoning: reasoning.reason,
+                          gap: reasoning.gap,
+                          score: reasoning.score,
+                          isOpen: true,
+                          onToggle: () => setOptionReasoningState((prev) => ({
+                            ...prev,
+                            [idx]: false
+                          })),
+                          hideTrigger: true,
+                          mdComponents: markdownComponents,
+                          styles: cognitiveDecisioningThemeStyles.getCognitiveDecisioningThemeStyles({
+                            container: { border: "none", borderRadius: 0, marginTop: 0, marginBottom: 0 },
+                            header: { borderBottom: "none" },
+                            sectionButton: { padding: "16px" }
+                          })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            },
+            idx
+          );
+        }) })
+      ] })
+    }
+  );
+};
+const CriticalGaps = ({
+  data,
+  isLastMessage,
+  onValidationChange,
+  isSubmitted,
+  citations,
+  onTypeResponseClick,
+  isGlobalEditActive
+}) => {
+  const [gapsState, setGapsState] = React.useState(
+    data.gaps.map((g) => ({
+      ...g,
+      userSelection: g.inputType === "checkbox" ? [] : null
+    }))
+  );
+  const handleUpdate = React.useCallback((gapId, value) => {
+    setGapsState((prev) => {
+      const newState = prev.map(
+        (g) => g.id === gapId ? { ...g, userSelection: value } : g
+      );
+      return newState;
+    });
+  }, []);
+  React.useEffect(() => {
+    if (!onValidationChange) return;
+    const isValid = gapsState.some((g) => {
+      if (g.inputType === "checkbox") {
+        return Array.isArray(g.userSelection) && g.userSelection.length > 0;
+      } else if (g.inputType === "text") {
+        return g.userSelection !== null && typeof g.userSelection === "string" && g.userSelection.trim() !== "";
+      } else {
+        return g.userSelection !== null && g.userSelection !== "";
+      }
+    });
+    onValidationChange(isValid, gapsState);
+  }, [gapsState, onValidationChange]);
+  const isEditable = isLastMessage && !isSubmitted && !isGlobalEditActive;
+  return (
+    // <Box
+    //   sx={{
+    //     display: "flex",
+    //     flexDirection: "column",
+    //     gap: "20px", // spacing between gap items
+    //     width: "100%",
+    //   }}
+    // >
+    //   <Box
+    //     onClick={() => setIsMainOpen(!isMainOpen)}
+    //     sx={{
+    //       display: "flex",
+    //       alignItems: "center",
+    //       justifyContent: "space-between",
+    //       cursor: "pointer",
+    //     }}
+    //   >
+    //     <Box sx={{ display: "flex", alignItems: "center", gap: "16px" }}>
+    //       <Box sx={{ display: "flex", alignItems: "center", gap: "8px" }}>
+    //         <Typography
+    //           sx={{
+    //             color: "#DC2626",
+    //             fontWeight: 500,
+    //             fontSize: "14px",
+    //             lineHeight: "17px",
+    //           }}
+    //         >
+    //           Critical Gaps
+    //         </Typography>
+    //         <Box
+    //           sx={{
+    //             bgcolor: "#FEF2F2",
+    //             color: "#DC2626",
+    //             px: "5px",
+    //             py: "2px",
+    //             borderRadius: "200px",
+    //             fontSize: "12px",
+    //             fontWeight: 600,
+    //             lineHeight: "130%",
+    //             minWidth: "20px",
+    //             textAlign: "center",
+    //           }}
+    //         >
+    //           {data.count}
+    //         </Box>
+    //       </Box>
+    //       <Box
+    //         sx={{
+    //           display: "inline-flex",
+    //           alignItems: "center",
+    //           gap: "2px",
+    //           px: "8px",
+    //           py: "5px",
+    //           // height: "20px",
+    //           bgcolor: "#FFFFFF",
+    //           border: "1px solid #C4B5FD",
+    //           borderRadius: "16px",
+    //           boxSizing: "border-box",
+    //         }}
+    //       >
+    //         <Box
+    //           sx={{
+    //             display: "flex",
+    //             alignItems: "center",
+    //             mr: "2px",
+    //             "& svg": {
+    //               width: "10px",
+    //               height: "10px",
+    //               color: "#7C3AED",
+    //             },
+    //           }}
+    //         >
+    //           <SparkleIcon />
+    //         </Box>
+    //         <Typography
+    //           sx={{
+    //             fontSize: "12px",
+    //             fontWeight: 500,
+    //             color: "#1E293B",
+    //             lineHeight: "150%",
+    //           }}
+    //         >
+    //           Decision Strength {data.decisionStrength}
+    //         </Typography>
+    //       </Box>
+    //     </Box>
+    //     <Box
+    //       sx={{
+    //         display: "flex",
+    //         "& svg": { width: 24, height: 24, color: "#1E293B" },
+    //       }}
+    //     >
+    //       {isMainOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+    //     </Box>
+    //   </Box>
+    //   <Collapse in={isMainOpen}>
+    //     <Box sx={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+    //       <Typography
+    //         sx={{
+    //           fontSize: "13px",
+    //           color: "#666F8D",
+    //           lineHeight: "20px",
+    //           fontWeight: 400,
+    //           letterSpacing: "-0.15px",
+    //           mt: "-6px",
+    //         }}
+    //       >
+    //         {data.value ||
+    //           "Shows missing information that can help me guide you better"}
+    //       </Typography>
+    //       {gapsState.map((gap: any, index: number) => (
+    //         <GapItem
+    //           key={gap.id}
+    //           index={index}
+    //           gap={gap}
+    //           onUpdate={handleUpdate}
+    //           isEditable={isEditable}
+    //           citations={citations}
+    //         />
+    //       ))}
+    //     </Box>
+    //   </Collapse>
+    // </Box>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          width: "100%",
+          backgroundColor: "var(--il-surface, #FFFFFF)",
+          color: "var(--il-foreground, #17212B)",
+          borderRadius: "8px",
+          border: "1px solid var(--il-border, #E3E6EA)",
+          padding: "14px",
+          marginTop: "12px"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px"
+            },
+            children: gapsState.map((gap, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              GapItem,
+              {
+                index,
+                gap,
+                onUpdate: handleUpdate,
+                isEditable,
+                citations,
+                onTypeResponseClick
+              },
+              gap.id
+            ))
+          }
+        )
+      }
+    )
+  );
+};
+
+exports.CriticalGaps = CriticalGaps;
 //# sourceMappingURL=CriticalGaps.js.map