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

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

@@ -1,2 +1,700 @@
-import{__assign as e,__rest as n,__spreadArray as i}from"tslib";import{jsx as r,jsxs as o}from"react/jsx-runtime";import{useState as t,useCallback as l,useEffect as a,useRef as s,useMemo as d}from"react";import{Box as c,Typography as p,TextareaAutosize as u,FormGroup as g,FormControlLabel as m,Checkbox as x}from"@mui/material";import{ChevronUp as f,ChevronDown as h}from"lucide-react";import{CognitiveDecisioningCard as v}from"@e-llm-studio/citation";import{DynamicArrow as y}from"./MarkdownComponents/MarkdownSelect.js";import{ButtonCognitiveIcon as b}from"./_svg/ButtonCognitiveIcon.js";import S from"./CitationLink.js";import{getCognitiveDecisioningThemeStyles as w}from"./cognitiveDecisioningThemeStyles.js";import{GapExplanationAccordion as F}from"./GapExplanationAccordion.js";import{getSourceFromUrl as k}from"./MarkdownComponents/MarkdownElements.js";var C=function(){return o("svg",e({width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"},{children:[r("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),r("polyline",{points:"12 5 19 12 12 19"})]}))},T=function(T){var R,B,D=T.gap,E=T.index,z=T.onUpdate,I=T.isEditable,W=T.citations,M=T.onTypeResponseClick,A=t(!1),j=A[0],L=A[1],_=t({}),G=_[0],H=_[1],O=s(null);a(function(){var e;0===E&&"text"===D.inputType&&I&&(null===(e=O.current)||void 0===e||e.focus())},[E,D.inputType,I]);var P=function(e){return e?e.replace(/\\n/g,"\n"):""},N=d(function(){var e;return P((null===(e=D.aiReasoning)||void 0===e?void 0:e.reason)||"")},[null===(R=D.aiReasoning)||void 0===R?void 0:R.reason]),U=d(function(){var e;return P((null===(e=D.aiReasoning)||void 0===e?void 0:e.gap)||"")},[null===(B=D.aiReasoning)||void 0===B?void 0:B.gap]),V=l(function(e,n){return W&&W.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},[W]),Y=d(function(){return{img:function(i){i.node;var o=n(i,["node"]);return r("img",e({},o,{style:{height:"100%",width:"100%",objectFit:"contain"},alt:(null==o?void 0:o.alt)||"",className:"w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto"}))},p:function(i){i.node;var o=n(i,["node"]);return r("p",e({},o,{style:{margin:0}},{children:null==o?void 0:o.children}))},code:function(i){i.node;var o=n(i,["node"]);return r("span",e({},o,{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==o?void 0:o.children}))},ol:function(i){i.node;var o=n(i,["node"]);return r("ol",e({},o,{style:{display:"flex",flexDirection:"column",gap:"1rem",listStyle:"decimal",paddingLeft:"2.5rem"}},{children:null==o?void 0:o.children}))},ul:function(i){i.node;var o=n(i,["node"]);return r("ol",e({},o,{style:{paddingLeft:"1.25rem",listStyleType:"decimal"}}))},li:function(i){i.node;var o=n(i,["node"]);return r("li",e({},o,{style:{marginBottom:"4px",listStyle:"decimal"}},{children:o.children}))},a:function(n){var i=n.href,o=n.children;if(!i)return r("a",{children:o});var t=i.match(/citationNumber=([^&]+)/);if(t&&S){var l=k(i),a=V(t[1],l);if(a)return r(S,{citation:a,linkTitle:o,fontSize:12})}return r("a",e({href:i,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}))}}},[V]),q=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}},J="checkbox"===D.inputType,K=function(e,n){if(I){if("typeYourAnswer"===n||"type your response"===e.trim().toLowerCase())return z(D.id,e),void(M&&M());if(J){var r=Array.isArray(D.userSelection)?D.userSelection:[],o=r.includes(e)?r.filter(function(n){return n!==e}):i(i([],r,!0),[e],!1);z(D.id,o)}else z(D.id,e)}};return r(c,e({sx:{bgcolor:"var(--il-surface, #FFFEFE)",color:"var(--il-foreground, #17212B)",overflow:"hidden"}},{children:o(c,e({sx:{display:"flex",flexDirection:"column",gap:"8px"}},{children:[r(c,e({sx:{display:"flex",flexDirection:"column",width:"100%"}},{children:o(p,e({component:"div",sx:{fontSize:"16px",fontWeight:400,color:"var(--il-foreground, #17212B)",lineHeight:1.5}},{children:[r("span",e({style:{color:"var(--il-danger, #8F2C23)",paddingRight:"2px"}},{children:"*"}))," ",E+1,". ",D.value,D.aiReasoning&&r(c,e({component:"span",sx:{display:"inline",verticalAlign:"middle",ml:.5}},{children:r(v,{headerIcon:r(b,{}),reasoning:N,reasoningTitle:"Decision Making Factors",reasoningSubtitle:"Why is this Suggested?",gapTitle:"Gaps in Decision",gapSubtitle:"What's missing or unclear?",gap:U,score:D.aiReasoning.score,isOpen:j,onToggle:function(){return L(function(e){return!e})},mdComponents:Y,styles:w()})}))]}))})),"text"===D.inputType?r(u,{ref:O,minRows:1,maxRows:10,value:D.userSelection||"",onChange:function(e){I&&z(D.id,e.target.value)},disabled:!I,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"}}):J?r(g,e({row:!0,sx:{gap:"16px",flexDirection:"column"}},{children:D.options.map(function(n,i){var t=q(n),l=t.text,a=t.reasoning,s=t.explanation,d=t.id,u=t.isRecommended,g="checkbox"===D.inputType?(D.userSelection||[]).includes(l):D.userSelection===l;return o(c,e({sx:{display:"flex",flexDirection:"column",width:"100%"}},{children:[r(m,{control:r(x,{checked:(D.userSelection||[]).includes(l),onChange:function(){return K(l,d)},value:l,size:"small",disabled:!I,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:o(c,e({sx:{display:"flex",alignItems:"center",gap:"6px",width:"100%"}},{children:[o(p,e({sx:{fontSize:"14px",color:"var(--il-foreground, #1E293B)",fontWeight:400}},{children:[l,u&&r("span",e({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"}))]})),(a||s)&&o(c,e({onClick:function(n){n.stopPropagation(),H(function(n){var r;return e(e({},n),((r={})[i]=!n[i],r))})},sx:{display:"flex",alignItems:"center",gap:"2px",cursor:"pointer",flexShrink:0}},{children:[r(b,{}),G[i]?r(f,{size:12,color:"var(--il-muted, #667085)"}):r(h,{size:12,color:"var(--il-muted, #667085)"})]}))]})),sx:{mr:0,ml:0,alignItems:"flex-start",width:"100%"}}),(a||s)&&G[i]&&o(c,e({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:[s&&r(F,{explanation:s,isSelected:g,onProceed:function(){return K(l)},proceedIcon:r(C,{})}),a&&r(v,{headerIcon:r(b,{}),reasoning:a.reason,gap:a.gap,reasoningTitle:"Decision Making Factors",reasoningSubtitle:"Why is this Suggested?",gapTitle:"Gaps in Decision",gapSubtitle:"What's missing or unclear?",score:a.score,isOpen:!0,onToggle:function(){return H(function(n){var r;return e(e({},n),((r={})[i]=!1,r))})},hideTrigger:!0,mdComponents:Y,styles:w({container:{border:"none",borderRadius:0,marginTop:0,marginBottom:0},header:{borderBottom:"none"},sectionButton:{padding:"16px"}})})]}))]}),i)})})):r(c,e({sx:{display:"flex",flexDirection:"column",gap:"8px"}},{children:D.options.map(function(n,i){var t=q(n),l=t.text,a=t.reasoning,s=t.explanation,d=t.id,u=t.isRecommended,g=D.userSelection===l;return o(c,e({sx:{display:"flex",flexDirection:"column",width:"100%"}},{children:[o(c,e({sx:{display:"flex",alignItems:"center",gap:"8px",width:"100%"}},{children:[o(c,e({onClick:function(){return K(l,d)},sx:{display:"flex",alignItems:"center",gap:"8px",padding:"8px",borderRadius:"8px",cursor:I?"pointer":"default",bgcolor:g?"color-mix(in srgb, var(--il-primary, #2563eb) 16%, var(--il-surface, #ffffff))":"transparent",border:"1px solid",borderColor:g?"var(--il-primary, #B2CCFF)":"transparent",transition:"all 0.15s ease-in-out",flex:1,boxSizing:"border-box"}},{children:[r(y,{isSelected:g,width:24,height:24}),o(p,e({sx:{fontSize:"14px",color:"var(--il-foreground, #344054)",fontWeight:500}},{children:[l,u&&r("span",e({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"}))]}))]})),(a||s)&&o(c,e({onClick:function(n){n.stopPropagation(),H(function(n){var r;return e(e({},n),((r={})[i]=!n[i],r))})},sx:{display:"flex",alignItems:"center",gap:"2px",cursor:"pointer",flexShrink:0}},{children:[r(b,{}),G[i]?r(f,{size:12,color:"var(--il-muted, #667085)"}):r(h,{size:12,color:"var(--il-muted, #667085)"})]}))]})),(a||s)&&G[i]&&o(c,e({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:[s&&r(c,e({sx:{borderBottom:a?"1px solid var(--il-border, #EAECF0)":"none"}},{children:r(F,{explanation:s,isSelected:g,onProceed:function(){return K(l)},proceedIcon:r(C,{})})})),a&&r(v,{reasoningTitle:"Decision Making Factors",reasoningSubtitle:"Why is this Suggested?",gapTitle:"Gaps in Decision",gapSubtitle:"What's missing or unclear?",headerIcon:r(b,{}),reasoning:a.reason,gap:a.gap,score:a.score,isOpen:!0,onToggle:function(){return H(function(n){var r;return e(e({},n),((r={})[i]=!1,r))})},hideTrigger:!0,mdComponents:Y,styles:w({container:{border:"none",borderRadius:0,marginTop:0,marginBottom:0},header:{borderBottom:"none"},sectionButton:{padding:"16px"}})})]}))]}),i)})}))]}))}))},R=function(n){var i=n.data,o=n.isLastMessage,s=n.onValidationChange,d=n.isSubmitted,p=n.citations,u=n.onTypeResponseClick,g=n.isGlobalEditActive,m=t(i.gaps.map(function(n){return e(e({},n),{userSelection:"checkbox"===n.inputType?[]:null})})),x=m[0],f=m[1],h=l(function(n,i){f(function(r){return r.map(function(r){return r.id===n?e(e({},r),{userSelection:i}):r})})},[]);a(function(){if(s){var e=x.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});s(e,x)}},[x,s]);var v=o&&!d&&!g;return r(c,e({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:r(c,e({sx:{display:"flex",flexDirection:"column",gap:"16px"}},{children:x.map(function(e,n){return r(T,{index:n,gap:e,onUpdate:h,isEditable:v,citations:p,onTypeResponseClick:u},e.id)})}))}))};export{R as CriticalGaps};
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { Box, Typography, TextareaAutosize, FormGroup, FormControlLabel, Checkbox } from '@mui/material';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import { CognitiveDecisioningCard } from '@e-llm-studio/citation';
+import { DynamicArrow } from './MarkdownComponents/MarkdownSelect.js';
+import { ButtonCognitiveIcon } from './_svg/ButtonCognitiveIcon.js';
+import CitationLink from './CitationLink.js';
+import { getCognitiveDecisioningThemeStyles } from './cognitiveDecisioningThemeStyles.js';
+import { GapExplanationAccordion } from './GapExplanationAccordion.js';
+import { getSourceFromUrl } from './MarkdownComponents/MarkdownElements.js';
+
+const ProceedArrow = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+  /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+] });
+const GapItem = ({ gap, index, onUpdate, isEditable, citations, onTypeResponseClick }) => {
+  var _a, _b;
+  const [showMainReasoning, setShowMainReasoning] = useState(false);
+  const [optionReasoningState, setOptionReasoningState] = useState({});
+  const textInputRef = useRef(null);
+  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 = useMemo(
+    () => {
+      var _a2;
+      return formatMarkdownSource(((_a2 = gap.aiReasoning) == null ? void 0 : _a2.reason) || "");
+    },
+    [(_a = gap.aiReasoning) == null ? void 0 : _a.reason]
+  );
+  const sanitizedGapReasoning = useMemo(
+    () => {
+      var _a2;
+      return formatMarkdownSource(((_a2 = gap.aiReasoning) == null ? void 0 : _a2.gap) || "");
+    },
+    [(_b = gap.aiReasoning) == null ? void 0 : _b.gap]
+  );
+  const getCitationByNumber = 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 = useMemo(() => ({
+    img: ({ node, ...props }) => /* @__PURE__ */ 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__ */ jsx("p", { ...props, style: { margin: 0 }, children: props == null ? void 0 : props.children }),
+    code: ({ node, ...props }) => /* @__PURE__ */ 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__ */ 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__ */ jsx("ol", { ...props, style: { paddingLeft: "1.25rem", listStyleType: "decimal" } }),
+    li: ({ node, ...props }) => /* @__PURE__ */ jsx("li", { ...props, style: { marginBottom: "4px", listStyle: "decimal" }, children: props.children }),
+    a: ({ href, children }) => {
+      if (!href) return /* @__PURE__ */ jsx("a", { children });
+      const match = href.match(/citationNumber=([^&]+)/);
+      if (match && CitationLink) {
+        const source = getSourceFromUrl(href);
+        const cit = getCitationByNumber(match[1], source);
+        if (cit) return /* @__PURE__ */ jsx(CitationLink, { citation: cit, linkTitle: children, fontSize: 12 });
+      }
+      return /* @__PURE__ */ 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__ */ jsx(
+    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__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", width: "100%" }, children: /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            component: "div",
+            sx: {
+              fontSize: "16px",
+              fontWeight: 400,
+              color: "var(--il-foreground, #17212B)",
+              lineHeight: 1.5
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--il-danger, #8F2C23)", paddingRight: "2px" }, children: "*" }),
+              " ",
+              index + 1,
+              ". ",
+              gap.value,
+              gap.aiReasoning && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: {
+                    display: "inline",
+                    verticalAlign: "middle",
+                    ml: 0.5
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    CognitiveDecisioningCard,
+                    {
+                      headerIcon: /* @__PURE__ */ jsx(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: getCognitiveDecisioningThemeStyles()
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        gap.inputType === "text" ? /* @__PURE__ */ jsx(
+          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__ */ jsx(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__ */ jsxs(
+            Box,
+            {
+              sx: { display: "flex", flexDirection: "column", width: "100%" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  FormControlLabel,
+                  {
+                    control: /* @__PURE__ */ jsx(
+                      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__ */ jsxs(
+                      Box,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          width: "100%"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            Typography,
+                            {
+                              sx: {
+                                fontSize: "14px",
+                                color: "var(--il-foreground, #1E293B)",
+                                fontWeight: 400
+                              },
+                              children: [
+                                text,
+                                isRecommended && /* @__PURE__ */ 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__ */ jsxs(
+                            Box,
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                setOptionReasoningState((prev) => ({
+                                  ...prev,
+                                  [idx]: !prev[idx]
+                                }));
+                              },
+                              sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "2px",
+                                cursor: "pointer",
+                                flexShrink: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}),
+                                optionReasoningState[idx] ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, color: "var(--il-muted, #667085)" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12, color: "var(--il-muted, #667085)" })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    sx: { mr: 0, ml: 0, alignItems: "flex-start", width: "100%" }
+                  }
+                ),
+                (reasoning || explanation) && optionReasoningState[idx] && /* @__PURE__ */ jsxs(
+                  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__ */ jsx(
+                        GapExplanationAccordion,
+                        {
+                          explanation,
+                          isSelected,
+                          onProceed: () => handleChange(text),
+                          proceedIcon: /* @__PURE__ */ jsx(ProceedArrow, {})
+                        }
+                      ),
+                      reasoning && /* @__PURE__ */ jsx(
+                        CognitiveDecisioningCard,
+                        {
+                          headerIcon: /* @__PURE__ */ jsx(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: getCognitiveDecisioningThemeStyles({
+                            container: { border: "none", borderRadius: 0, marginTop: 0, marginBottom: 0 },
+                            header: { borderBottom: "none" },
+                            sectionButton: { padding: "16px" }
+                          })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            },
+            idx
+          );
+        }) }) : /* @__PURE__ */ jsx(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__ */ jsxs(
+            Box,
+            {
+              sx: { display: "flex", flexDirection: "column", width: "100%" },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      width: "100%"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        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__ */ jsx(
+                              DynamicArrow,
+                              {
+                                isSelected,
+                                width: 24,
+                                height: 24
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Typography,
+                              {
+                                sx: {
+                                  fontSize: "14px",
+                                  color: "var(--il-foreground, #344054)",
+                                  fontWeight: 500
+                                },
+                                children: [
+                                  text,
+                                  isRecommended && /* @__PURE__ */ 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__ */ jsxs(
+                        Box,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setOptionReasoningState((prev) => ({
+                              ...prev,
+                              [idx]: !prev[idx]
+                            }));
+                          },
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "2px",
+                            cursor: "pointer",
+                            flexShrink: 0
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}),
+                            optionReasoningState[idx] ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, color: "var(--il-muted, #667085)" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12, color: "var(--il-muted, #667085)" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                (reasoning || explanation) && optionReasoningState[idx] && /* @__PURE__ */ jsxs(
+                  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__ */ jsx(Box, { sx: { borderBottom: reasoning ? "1px solid var(--il-border, #EAECF0)" : "none" }, children: /* @__PURE__ */ jsx(
+                        GapExplanationAccordion,
+                        {
+                          explanation,
+                          isSelected,
+                          onProceed: () => handleChange(text),
+                          proceedIcon: /* @__PURE__ */ jsx(ProceedArrow, {})
+                        }
+                      ) }),
+                      reasoning && /* @__PURE__ */ jsx(
+                        CognitiveDecisioningCard,
+                        {
+                          reasoningTitle: "Decision Making Factors",
+                          reasoningSubtitle: "Why is this Suggested?",
+                          gapTitle: "Gaps in Decision",
+                          gapSubtitle: "What's missing or unclear?",
+                          headerIcon: /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}),
+                          reasoning: reasoning.reason,
+                          gap: reasoning.gap,
+                          score: reasoning.score,
+                          isOpen: true,
+                          onToggle: () => setOptionReasoningState((prev) => ({
+                            ...prev,
+                            [idx]: false
+                          })),
+                          hideTrigger: true,
+                          mdComponents: markdownComponents,
+                          styles: 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] = useState(
+    data.gaps.map((g) => ({
+      ...g,
+      userSelection: g.inputType === "checkbox" ? [] : null
+    }))
+  );
+  const handleUpdate = useCallback((gapId, value) => {
+    setGapsState((prev) => {
+      const newState = prev.map(
+        (g) => g.id === gapId ? { ...g, userSelection: value } : g
+      );
+      return newState;
+    });
+  }, []);
+  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__ */ jsx(
+      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__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px"
+            },
+            children: gapsState.map((gap, index) => /* @__PURE__ */ jsx(
+              GapItem,
+              {
+                index,
+                gap,
+                onUpdate: handleUpdate,
+                isEditable,
+                citations,
+                onTypeResponseClick
+              },
+              gap.id
+            ))
+          }
+        )
+      }
+    )
+  );
+};
+
+export { CriticalGaps };
 //# sourceMappingURL=CriticalGaps.js.map