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

package/dist/features/IL-OTJ/_components/organisms/ScopeSection/ScopeSection.js

@@ -1,2 +1,162 @@
-import{__rest as e,__assign as i}from"tslib";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{SectionWrapper as t}from"../../molecules/Sections/SectionWrapper.js";import n from"../../_svg/CognitiveDecisioning.js";import{ChevronUpIcon as l,ChevronDownIcon as s}from"lucide-react";import a from"../../TooltipComponent.js";var d=function(d){var p=d.id,c=d.title,g=void 0===c?"Scope":c,h=d.required,x=void 0!==h&&h,u=d.openSections,f=d.setOpenSections,v=d.scopeData,m=d.onScopeChange;d.stationOptions;var b=d.tierOptions,y=void 0===b?[]:b;d.stationLabel;var S=d.tierLabel,C=void 0===S?"Where should this rule apply?":S,O=d.highlights,w=void 0===O?{}:O,I=d.isOpen,k=d.onToggle,z=d.showCognitiveIcon,j=d.cognitiveIcon,D=d.tooltipDescription,L=d.errorMessage,M=d.stationErrorMessage,T=d.tierErrorMessage,E=e(d,["id","title","required","openSections","setOpenSections","scopeData","onScopeChange","stationOptions","tierOptions","stationLabel","tierLabel","highlights","isOpen","onToggle","showCognitiveIcon","cognitiveIcon","tooltipDescription","errorMessage","stationErrorMessage","tierErrorMessage"]);return o(t,i({id:p,title:g,required:x,openSections:u,setOpenSections:f},E,{children:r("div",i({className:"scope-content"},{children:[y.length>0&&r("div",i({className:"form-group"},{children:[r("div",i({style:{display:"flex",alignItems:"center",gap:"4px",marginBottom:"4px"}},{children:[o("span",i({style:{color:"#8F2C23",lineHeight:1}},{children:"*"})),o("label",i({className:(null==E?void 0:E.readOnly)?"readOnly":"form-label",style:{margin:0}},{children:C}))]})),r("div",i({style:{display:"flex",alignItems:"center",gap:"12px",flexWrap:"wrap"}},{children:[o("div",i({className:"checkbox-group",style:{display:"flex",gap:"16px"}},{children:y.map(function(e){var t,n,l=w["scope_".concat(e)],s="tier-".concat(p,"-").concat(e.replace(/\s+/g,"-").toLowerCase());return r("div",i({className:"checkbox-item",style:{display:"flex",alignItems:"center",gap:"6px",position:"relative"}},{children:[o("input",{type:"radio",name:"scope-tiers-".concat(p),id:s,checked:null===(t=v.tiers)||void 0===t?void 0:t.includes(e),onChange:function(){m("tiers",[e])},disabled:(null==E?void 0:E.readOnly)||!1,style:{position:"absolute",opacity:0,cursor:"pointer",width:"16px",height:"16px",zIndex:1}}),o("div",i({style:{width:"16px",height:"16px",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s ease",boxShadow:l?"0 0 14px 4px rgba(37, 99, 235, 0.35)":"none",borderRadius:"50%"}},{children:(null===(n=v.tiers)||void 0===n?void 0:n.includes(e))?o("div",{style:{width:"16px",height:"16px",borderRadius:"50%",border:"5px solid var(--il-primary, #2563EB)",backgroundColor:"var(--il-surface, #ffffff)",boxSizing:"border-box"}}):o("div",{style:{width:"16px",height:"16px",border:"1px solid var(--il-border, #64748B)",borderRadius:"50%",backgroundColor:"var(--il-surface, #ffffff)",boxSizing:"border-box"}})})),o("label",i({style:{color:(null==E?void 0:E.readOnly)?"var(--il-disabled, #9CA3AF)":void 0,cursor:(null==E?void 0:E.readOnly)?"not-allowed":"pointer",margin:0,fontSize:"14px"},htmlFor:s},{children:e}))]}),s)})})),o("div",i({style:{width:"fit-content"}},{children:o(a,i({description:null!=D?D:""},{children:z&&r("button",i({onClick:function(e){e.preventDefault(),null==k||k()},style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"2px",padding:"2px 6px ",flexShrink:0,border:"none",backgroundColor:"transparent",borderRadius:"4px",cursor:"pointer",outline:"none",maxWidth:"fit-content",transition:"background-color 0.2s ease",marginTop:"6px",marginLeft:"6px"}},{children:[j||o(n,{}),o(I?l:s,{size:16})]}))}))}))]})),T&&o("div",i({style:{color:"#ef4444",fontSize:"12px",marginTop:"4px"}},{children:T}))]})),L&&!M&&!T&&o("div",i({style:{color:"#ef4444",fontSize:"12px",marginTop:"4px"}},{children:L}))]}))}))};export{d as ScopeSection};
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SectionWrapper } from '../../molecules/Sections/SectionWrapper.js';
+import CognitiveDecisioning from '../../_svg/CognitiveDecisioning.js';
+import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
+import TooltipComponent from '../../TooltipComponent.js';
+
+const ScopeSection = ({
+  id,
+  title = "Scope",
+  required = false,
+  openSections,
+  setOpenSections,
+  scopeData,
+  onScopeChange,
+  stationOptions = [],
+  tierOptions = [],
+  stationLabel = "Stations",
+  tierLabel = "Where should this rule apply?",
+  highlights = {},
+  isOpen,
+  onToggle,
+  showCognitiveIcon,
+  cognitiveIcon,
+  tooltipDescription,
+  errorMessage,
+  stationErrorMessage,
+  tierErrorMessage,
+  ...props
+}) => {
+  const RenderIcon = () => cognitiveIcon || /* @__PURE__ */ jsx(CognitiveDecisioning, {});
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      id,
+      title,
+      required,
+      openSections,
+      setOpenSections,
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "scope-content", children: [
+        tierOptions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "form-group", children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#8F2C23", lineHeight: 1 }, children: "*" }),
+            /* @__PURE__ */ jsx("label", { className: (props == null ? void 0 : props.readOnly) ? "readOnly" : "form-label", style: { margin: 0 }, children: tierLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx("div", { className: "checkbox-group", style: { display: "flex", gap: "16px" }, children: tierOptions.map((tier) => {
+              var _a, _b;
+              const shouldGlow = highlights[`scope_${tier}`];
+              const uniqueKey = `tier-${id}-${tier.replace(/\s+/g, "-").toLowerCase()}`;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "checkbox-item",
+                  style: { display: "flex", alignItems: "center", gap: "6px", position: "relative" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: `scope-tiers-${id}`,
+                        id: uniqueKey,
+                        checked: (_a = scopeData.tiers) == null ? void 0 : _a.includes(tier),
+                        onChange: () => {
+                          onScopeChange("tiers", [tier]);
+                        },
+                        disabled: (props == null ? void 0 : props.readOnly) || false,
+                        style: {
+                          position: "absolute",
+                          opacity: 0,
+                          cursor: "pointer",
+                          width: "16px",
+                          height: "16px",
+                          zIndex: 1
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { style: {
+                      width: "16px",
+                      height: "16px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transition: "all 0.2s ease",
+                      boxShadow: shouldGlow ? "0 0 14px 4px rgba(37, 99, 235, 0.35)" : "none",
+                      borderRadius: "50%"
+                      // Make outer container circular
+                    }, children: ((_b = scopeData.tiers) == null ? void 0 : _b.includes(tier)) ? /* @__PURE__ */ jsx("div", { style: {
+                      width: "16px",
+                      height: "16px",
+                      borderRadius: "50%",
+                      border: "5px solid var(--il-primary, #2563EB)",
+                      // Thick border mimics a checked radio button
+                      backgroundColor: "var(--il-surface, #ffffff)",
+                      boxSizing: "border-box"
+                    } }) : /* @__PURE__ */ jsx("div", { style: {
+                      width: "16px",
+                      height: "16px",
+                      border: "1px solid var(--il-border, #64748B)",
+                      borderRadius: "50%",
+                      backgroundColor: "var(--il-surface, #ffffff)",
+                      boxSizing: "border-box"
+                    } }) }),
+                    /* @__PURE__ */ jsx(
+                      "label",
+                      {
+                        style: {
+                          color: (props == null ? void 0 : props.readOnly) ? "var(--il-disabled, #9CA3AF)" : void 0,
+                          cursor: (props == null ? void 0 : props.readOnly) ? "not-allowed" : "pointer",
+                          margin: 0,
+                          fontSize: "14px"
+                        },
+                        htmlFor: uniqueKey,
+                        children: tier
+                      }
+                    )
+                  ]
+                },
+                uniqueKey
+              );
+            }) }),
+            /* @__PURE__ */ jsx("div", { style: { width: "fit-content" }, children: /* @__PURE__ */ jsx(TooltipComponent, { description: tooltipDescription != null ? tooltipDescription : "", children: showCognitiveIcon && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: (e) => {
+                  e.preventDefault();
+                  onToggle == null ? void 0 : onToggle();
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "2px",
+                  padding: "2px 6px ",
+                  flexShrink: 0,
+                  border: "none",
+                  backgroundColor: "transparent",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  outline: "none",
+                  maxWidth: "fit-content",
+                  transition: "background-color 0.2s ease",
+                  marginTop: "6px",
+                  marginLeft: "6px"
+                },
+                children: [
+                  RenderIcon(),
+                  isOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+                ]
+              }
+            ) }) })
+          ] }),
+          tierErrorMessage && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "4px" }, children: tierErrorMessage })
+        ] }),
+        errorMessage && !stationErrorMessage && !tierErrorMessage && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "4px" }, children: errorMessage })
+      ] })
+    }
+  );
+};
+
+export { ScopeSection };
 //# sourceMappingURL=ScopeSection.js.map

package/dist/features/IL-OTJ/_components/organisms/ScopeSection/ScopeSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScopeSection.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ScopeSection.js","sources":["../../../../../../src/features/IL-OTJ/_components/organisms/ScopeSection/ScopeSection.tsx"],"sourcesContent":["import { SectionWrapper } from \"../../molecules/Sections/SectionWrapper\";\nimport { Dropdown } from \"../../atoms/Dropdown/Dropdown\";\nimport CognitiveDecisioning from \"../../_svg/CognitiveDecisioning\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport TooltipComponent from \"../../../../IL-OTJ/_components/TooltipComponent\"; \n\ninterface Option {\n  label: string;\n  value: string;\n}\n\ninterface ScopeSectionProps {\n  id: string;\n  title?: string;\n  required?: boolean;\n  openSections: Set<string>; \n  setOpenSections: React.Dispatch<React.SetStateAction<Set<string>>>;\n  scopeData: {\n    station?: string;\n    tiers?: string[];\n  };\n  onScopeChange: (field: string, value: any) => void;\n  stationOptions?: Option[];\n  tierOptions?: string[];\n  stationLabel?: string;\n  tierLabel?: string;\n  highlights?: Record<string, boolean>;\n  isOpen: boolean;\n  onToggle: () => void;\n  showCognitiveIcon: boolean;\n  cognitiveIcon?: React.ReactNode;\n  tooltipDescription: string;\n  stationErrorMessage?: string;\n  tierErrorMessage?: string;\n  errorMessage?: string;\n  readOnly?: boolean;\n}\n\nexport const ScopeSection = ({ \n  id,\n  title = \"Scope\", \n  required = false,\n  openSections,\n  setOpenSections,\n  scopeData, \n  onScopeChange, \n  stationOptions = [], \n  tierOptions = [],\n  stationLabel = \"Stations\",\n  tierLabel = \"Where should this rule apply?\",\n  highlights = {},\n  isOpen,\n  onToggle,\n  showCognitiveIcon,\n  cognitiveIcon,\n  tooltipDescription,\n  errorMessage,\n  stationErrorMessage,\n  tierErrorMessage,\n  ...props\n}: ScopeSectionProps) => {\n\n  // helper for the icon with fallback\n  const RenderIcon = () => cognitiveIcon || <CognitiveDecisioning />;\n\n  return (\n    <SectionWrapper \n      id={id} \n      title={title} \n      required={required}\n      openSections={openSections}\n      setOpenSections={setOpenSections}\n      {...props} \n    >\n      <div className=\"scope-content\">\n        {/* Optional Station Subsection */}\n        {/* {stationOptions.length > 0 && (\n          <div className=\"form-group\">\n            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '4px' }}>\n              <span style={{ color: '#8F2C23', lineHeight: 1 }}>*</span>\n              <label className={props?.readOnly ? 'readOnly' : 'form-label'} style={{ margin: 0 }}>\n                {stationLabel}\n              </label>\n            </div>\n            <Dropdown\n              value={scopeData.station || ''}\n              onChange={(e: any) => onScopeChange('station', e.target.value)}\n              options={stationOptions}\n              placeholder=\"Select a rule set\"\n              isHighlighted={highlights['scope_station']}\n              readOnly={props?.readOnly || false}\n            />\n            {stationErrorMessage && (\n                <div style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>\n                {stationErrorMessage}\n                </div>\n            )}\n          </div>\n        )} */}\n\n        {/* Optional Tier/Checkbox Subsection */}\n       {tierOptions.length > 0 && (\n          <div className=\"form-group\">\n            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '4px' }}>\n              <span style={{ color: '#8F2C23', lineHeight: 1 }}>*</span>\n              <label className={props?.readOnly ? 'readOnly' : 'form-label'} style={{ margin: 0 }}>\n                {tierLabel}\n              </label>\n            </div>\n            \n           \n            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>\n              \n             <div className='checkbox-group' style={{ display: 'flex', gap: '16px' }}>\n                {tierOptions.map((tier) => {\n                  const shouldGlow = highlights[`scope_${tier}`];\n                  const uniqueKey = `tier-${id}-${tier.replace(/\\s+/g, '-').toLowerCase()}`;\n                  return (\n                    <div \n                      className='checkbox-item' \n                      style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}\n                      key={uniqueKey}\n                    >\n                      <input\n                        type='radio' // Changed to radio\n                        name={`scope-tiers-${id}`} // Group name for radios\n                        id={uniqueKey}\n                        checked={scopeData.tiers?.includes(tier)}\n                        onChange={() => {\n                          // Set only the single selected tier in the array\n                          onScopeChange('tiers', [tier]); \n                        }}\n                        disabled={props?.readOnly || false}\n                        style={{ \n                          position: 'absolute',\n                          opacity: 0,\n                          cursor: 'pointer',\n                          width: '16px',\n                          height: '16px',\n                          zIndex: 1\n                        }}\n                      />\n                      <div style={{ \n                        width: '16px', \n                        height: '16px', \n                        display: 'flex', \n                        alignItems: 'center', \n                        justifyContent: 'center',\n                        transition: 'all 0.2s ease',\n                        boxShadow: shouldGlow ? '0 0 14px 4px rgba(37, 99, 235, 0.35)' : 'none',\n                        borderRadius: '50%', // Make outer container circular\n                      }}>\n                        {scopeData.tiers?.includes(tier) ? (\n                           <div style={{\n                            width: '16px',\n                            height: '16px',\n                            borderRadius: '50%',\n                            border: '5px solid var(--il-primary, #2563EB)', // Thick border mimics a checked radio button\n                            backgroundColor: 'var(--il-surface, #ffffff)',\n                            boxSizing: 'border-box'\n                          }} />\n                        ) : (\n                          <div style={{\n                            width: '16px',\n                            height: '16px',\n                            border: '1px solid var(--il-border, #64748B)',\n                            borderRadius: '50%',\n                            backgroundColor: 'var(--il-surface, #ffffff)',\n                            boxSizing: 'border-box'\n                          }} />\n                        )}\n                      </div>\n                      <label \n                        style={{\n                          color: props?.readOnly ? \"var(--il-disabled, #9CA3AF)\" : undefined,\n                          cursor: props?.readOnly ? \"not-allowed\" : \"pointer\",\n                          margin: 0, fontSize: '14px'\n                        }}\n                        htmlFor={uniqueKey} // Use uniqueKey directly\n                      >\n                        {tier}\n                      </label>\n                    </div>\n                  );\n                })}\n              </div>\n              \n            \n              <div style={{ width: 'fit-content' }}>\n                <TooltipComponent description={tooltipDescription ?? ''}>\n                  {showCognitiveIcon && (\n                    <button \n                      onClick={(e) => {\n                        e.preventDefault();\n                        onToggle?.();\n                      }}\n                      // onMouseEnter={(e) => {\n                      //   e.currentTarget.style.backgroundColor = '#EDE9FE';\n                      // }}\n                      // onMouseLeave={(e) => {\n                      //   e.currentTarget.style.backgroundColor = '#F5F3FF';\n                      // }}\n                      style={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        gap: '2px',\n                        padding: '2px 6px ',\n                        flexShrink: 0,\n                        border: 'none',\n                        backgroundColor: 'transparent',\n                        borderRadius: '4px',\n                        cursor: 'pointer',\n                        outline: 'none',\n                        maxWidth: 'fit-content',\n                        transition: 'background-color 0.2s ease',\n                        marginTop: '6px',\n                        marginLeft: '6px'\n                      }}\n                    >\n                      {RenderIcon()}\n                      {isOpen ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}\n                    </button>\n                  )}\n                </TooltipComponent>\n              </div>\n            </div>\n            {tierErrorMessage && (\n                <div style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>\n                {tierErrorMessage}\n                </div>\n            )}\n          </div>\n        )}\n        {/* Keeping generic errorMessage for backward compatibility if needed, or remove if fully deprecated */}\n        {errorMessage && !stationErrorMessage && !tierErrorMessage && (\n            <div style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>\n              {errorMessage}\n            </div>\n        )}\n      </div>\n    </SectionWrapper>\n  );\n};"],"names":[],"mappings":"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"}

package/dist/features/IL-OTJ/_components/organisms/TextSection/TextSection.js

@@ -1,2 +1,190 @@
-import{__rest as e,__assign as i}from"tslib";import{jsx as t,jsxs as n,Fragment as r}from"react/jsx-runtime";import{SectionWrapper as l}from"../../molecules/Sections/SectionWrapper.js";import{Textarea as o}from"../../atoms/Textarea/Textarea.js";import{ButtonCognitiveIcon as a}from"../../_svg/ButtonCognitiveIcon.js";import{useState as d,useRef as s,useEffect as c}from"react";import{Check as p,X as g,Pencil as f,AlertTriangle as u,Loader2Icon as m}from"lucide-react";var h=function(h){var v=h.rows,y=h.value,x=h.errorMessage,I=h.onChange,C=h.placeholder,b=h.title,w=h.subtitle,E=h.isHighlighted,S=h.isOpen,k=h.readOnly,O=h.showCognitiveIcon,T=h.onToggle,j=h.tooltipDescription,A=h.enableInlineEdit,z=h.setSendMessageInChat,D=h.isAiStreaming,M=h.fieldName,R=h.id,W=h.activeEditId,_=h.setActiveEditId,N=h.pendingEditId;h.setPendingEditId;var B=e(h,["rows","value","errorMessage","onChange","placeholder","title","subtitle","isHighlighted","isOpen","readOnly","showCognitiveIcon","onToggle","tooltipDescription","enableInlineEdit","setSendMessageInChat","isAiStreaming","fieldName","id","activeEditId","setActiveEditId","pendingEditId","setPendingEditId"]),H=d(null),P=H[0],K=H[1],L=d(!1),U=L[0],q=L[1],F=s(D);c(function(){F.current&&!D&&U&&q(!1),F.current=D},[D,U]);var G=null!==P,J=!!W&&W!==R&&A,Q=(null==P?void 0:P.trim())||"",V=Q===((null==y?void 0:y.trim())||"")||null!==P&&""===Q,X=k||D||A&&!G,Y=t("div",i({style:{display:"flex",alignItems:"center",width:"100%",justifyContent:"space-between"}},{children:t("span",{children:b})})),Z={display:"flex",alignItems:"center",justifyContent:"center",padding:"8px",border:"1px solid var(--il-border, #e5e7eb)",borderRadius:"8px",cursor:"pointer",width:"36px",height:"36px",backgroundColor:"var(--il-surface, #ffffff)"},$={cursor:V?"not-allowed":"pointer",opacity:V?.5:1};return n(l,i({},B,{readOnly:k,title:Y,subtitle:w,customStyles:{margin:"0 0.2rem 0.2rem 0.2rem"}},{children:[n("div",i({className:"textarea-wrapper",style:{display:"flex",alignItems:"flex-start",gap:"8px",width:"100%"},"data-edit-id":R},{children:[t("div",i({style:{flex:1,minWidth:0}},{children:t(o,{cognitiveIcon:t(a,{}),rows:v,placeholder:C,value:G?P:y,onChange:function(e){G?K(e.target.value):I&&I(e.target.value)},isHighlighted:E,isOpen:S,isReadOnly:k||D,inputReadOnly:X,onToggle:T,showCognitiveIcon:O,tooltipDescription:j,errorMessage:x})})),A&&!k&&t("div",i({style:{display:"flex",flexDirection:"row",gap:"8px",marginTop:"0px"}},{children:G?n(r,{children:[n("button",i({title:"Apply",onClick:function(){if(null!==P){if(P===(null!=y?y:""))return K(null),void(_&&_(null));if(z){var e="sk-".concat(Date.now(),"-").concat(Math.random().toString(36).slice(2,8)),i=M||"Description",t=P&&""!==P.trim()?"Update ".concat(i," with ").concat(P):"Remove ".concat(i);q(!0),z("__SKELETON__:".concat(e,":").concat(t))}K(null),_&&_(null)}},disabled:V,style:i(i(i({},Z),$),{backgroundColor:"var(--il-primary, #2563EB)",color:"var(--il-primary-fg, #ffffff)",width:"auto",padding:"8px 12px"})},{children:[t(p,{size:20,strokeWidth:2.5})," Apply"]})),t("button",i({title:"Cancel",onClick:function(){K(null),_&&_(null)},style:i(i({},Z),{borderColor:"var(--il-border,#E3E8E9)",color:"var(--il-danger,#dc2626)"})},{children:t(g,{size:20,strokeWidth:2.5})}))]}):t("button",i({title:J?"Save active edits first":"Edit",onClick:function(){W&&W!==R||(_&&_(R),K(null!=y?y:""))},disabled:D||J,style:i(i({},Z),{color:"var(--il-muted, #64748B)",cursor:D||J?"not-allowed":"pointer",opacity:D||J?.5:1})},{children:t(f,{size:20})}))}))]})),N===R&&G&&n("div",i({style:{display:"flex",alignItems:"center",gap:"6px",marginTop:"10px"}},{children:[t(u,{size:14,style:{color:"var(--il-warning,#c2410c)"}}),t("div",i({style:{color:"var(--il-warning,#c2410c)",fontSize:"13px"}},{children:"Pending - Changes not applied yet. Apply or discard them to continue."}))]})),U&&D&&A&&n(r,{children:[t("style",{children:"\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  "}),n("div",i({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",padding:"4px 0 12px 12px",color:"var(--il-muted, #141414)",fontSize:"13px",fontWeight:500,fontStyle:"italic",marginTop:"8px"}},{children:[t(m,{style:{marginRight:8,animation:"spin 1s linear infinite"}}),"Checking the correctness of your ",M||"description","..."]}))]})]}))};export{h as TextSection};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { SectionWrapper } from '../../molecules/Sections/SectionWrapper.js';
+import { Textarea } from '../../atoms/Textarea/Textarea.js';
+import { ButtonCognitiveIcon } from '../../_svg/ButtonCognitiveIcon.js';
+import { useState, useRef, useEffect } from 'react';
+import { Check, X, Pencil, AlertTriangle, Loader2Icon } from 'lucide-react';
+
+const TextSection = ({
+  rows,
+  value,
+  errorMessage,
+  onChange,
+  placeholder,
+  title,
+  subtitle,
+  isHighlighted,
+  isOpen,
+  readOnly,
+  showCognitiveIcon,
+  onToggle,
+  tooltipDescription,
+  enableInlineEdit,
+  setSendMessageInChat,
+  isAiStreaming,
+  fieldName,
+  id,
+  activeEditId,
+  setActiveEditId,
+  pendingEditId,
+  setPendingEditId,
+  ...props
+}) => {
+  const [draftValue, setDraftValue] = useState(null);
+  const [isPending, setIsPending] = useState(false);
+  const prevStreaming = useRef(isAiStreaming);
+  useEffect(() => {
+    const streamingFinished = prevStreaming.current && !isAiStreaming;
+    if (streamingFinished && isPending) {
+      setIsPending(false);
+    }
+    prevStreaming.current = isAiStreaming;
+  }, [isAiStreaming, isPending]);
+  const isEditing = draftValue !== null;
+  const isOtherFieldEditing = !!activeEditId && activeEditId !== id && enableInlineEdit;
+  const handleStartEdit = () => {
+    if (activeEditId && activeEditId !== id) return;
+    if (setActiveEditId) setActiveEditId(id);
+    setDraftValue(value != null ? value : "");
+  };
+  const handleCancel = () => {
+    setDraftValue(null);
+    if (setActiveEditId) setActiveEditId(null);
+  };
+  const handleSave = () => {
+    if (draftValue === null) return;
+    if (draftValue === (value != null ? value : "")) {
+      setDraftValue(null);
+      if (setActiveEditId) setActiveEditId(null);
+      return;
+    }
+    if (setSendMessageInChat) {
+      const skId = `sk-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      const fName = fieldName || "Description";
+      const msg = !draftValue || draftValue.trim() === "" ? `Remove ${fName}` : `Update ${fName} with ${draftValue}`;
+      setIsPending(true);
+      setSendMessageInChat(`__SKELETON__:${skId}:${msg}`);
+    }
+    setDraftValue(null);
+    if (setActiveEditId) setActiveEditId(null);
+  };
+  const draftValueTrimmed = (draftValue == null ? void 0 : draftValue.trim()) || "";
+  const valueTrimmed = (value == null ? void 0 : value.trim()) || "";
+  const isApplyBtnDisabled = draftValueTrimmed === valueTrimmed || draftValue !== null && draftValueTrimmed === "";
+  const isInputDisabled = readOnly || isAiStreaming || enableInlineEdit && !isEditing;
+  const loadingStyles = `
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+  `;
+  const titleContent = /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: "100%", justifyContent: "space-between" }, children: /* @__PURE__ */ jsx("span", { children: title }) });
+  const actionBtnStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "8px",
+    border: "1px solid var(--il-border, #e5e7eb)",
+    borderRadius: "8px",
+    cursor: "pointer",
+    width: "36px",
+    height: "36px",
+    backgroundColor: "var(--il-surface, #ffffff)"
+  };
+  const saveBtnStyle = {
+    cursor: isApplyBtnDisabled ? "not-allowed" : "pointer",
+    opacity: isApplyBtnDisabled ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ...props, readOnly, title: titleContent, subtitle, customStyles: { margin: "0 0.2rem 0.2rem 0.2rem" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "textarea-wrapper", style: { display: "flex", alignItems: "flex-start", gap: "8px", width: "100%" }, "data-edit-id": id, children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          cognitiveIcon: /* @__PURE__ */ jsx(ButtonCognitiveIcon, {}),
+          rows,
+          placeholder,
+          value: isEditing ? draftValue : value,
+          onChange: (e) => {
+            if (isEditing) {
+              setDraftValue(e.target.value);
+            } else if (onChange) {
+              onChange(e.target.value);
+            }
+          },
+          isHighlighted,
+          isOpen,
+          isReadOnly: readOnly || isAiStreaming,
+          inputReadOnly: isInputDisabled,
+          onToggle,
+          showCognitiveIcon,
+          tooltipDescription,
+          errorMessage
+        }
+      ) }),
+      enableInlineEdit && !readOnly && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "row", gap: "8px", marginTop: "0px" }, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            title: "Apply",
+            onClick: handleSave,
+            disabled: isApplyBtnDisabled,
+            style: { ...actionBtnStyle, ...saveBtnStyle, backgroundColor: "var(--il-primary, #2563EB)", color: "var(--il-primary-fg, #ffffff)", width: "auto", padding: "8px 12px" },
+            children: [
+              /* @__PURE__ */ jsx(Check, { size: 20, strokeWidth: 2.5 }),
+              " Apply"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            title: "Cancel",
+            onClick: handleCancel,
+            style: { ...actionBtnStyle, borderColor: "var(--il-border,#E3E8E9)", color: "var(--il-danger,#dc2626)" },
+            children: /* @__PURE__ */ jsx(X, { size: 20, strokeWidth: 2.5 })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          title: isOtherFieldEditing ? "Save active edits first" : "Edit",
+          onClick: handleStartEdit,
+          disabled: isAiStreaming || isOtherFieldEditing,
+          style: {
+            ...actionBtnStyle,
+            color: "var(--il-muted, #64748B)",
+            cursor: isAiStreaming || isOtherFieldEditing ? "not-allowed" : "pointer",
+            opacity: isAiStreaming || isOtherFieldEditing ? 0.5 : 1
+          },
+          children: /* @__PURE__ */ jsx(Pencil, { size: 20 })
+        }
+      ) })
+    ] }),
+    pendingEditId === id && isEditing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "10px" }, children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { size: 14, style: { color: "var(--il-warning,#c2410c)" } }),
+      /* @__PURE__ */ jsx("div", { style: { color: "var(--il-warning,#c2410c)", fontSize: "13px" }, children: "Pending - Changes not applied yet. Apply or discard them to continue." })
+    ] }),
+    isPending && isAiStreaming && enableInlineEdit && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: loadingStyles }),
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: "4px 0 12px 12px",
+        color: "var(--il-muted, #141414)",
+        fontSize: "13px",
+        fontWeight: 500,
+        fontStyle: "italic",
+        marginTop: "8px"
+      }, children: [
+        /* @__PURE__ */ jsx(Loader2Icon, { style: { marginRight: 8, animation: "spin 1s linear infinite" } }),
+        "Checking the correctness of your ",
+        fieldName || "description",
+        "..."
+      ] })
+    ] })
+  ] });
+};
+
+export { TextSection };
 //# sourceMappingURL=TextSection.js.map

package/dist/features/IL-OTJ/_components/organisms/TextSection/TextSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextSection.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"TextSection.js","sources":["../../../../../../src/features/IL-OTJ/_components/organisms/TextSection/TextSection.tsx"],"sourcesContent":["import { SectionWrapper } from \"../../molecules/Sections/SectionWrapper\";\nimport { Textarea } from \"../../atoms/Textarea/Textarea\";\nimport { ButtonCognitiveIcon } from \"../../_svg/ButtonCognitiveIcon\";\nimport { useState, useEffect, useRef } from \"react\";\nimport { Check, X, Pencil, Loader2Icon, AlertTriangle } from \"lucide-react\";\n\nexport const TextSection = ({ \n  rows, \n  value, \n  errorMessage, \n  onChange, \n  placeholder, \n  title,\n  subtitle,\n  isHighlighted, \n  isOpen, \n  readOnly, \n  showCognitiveIcon, \n  onToggle, \n  tooltipDescription,\n  enableInlineEdit,\n  setSendMessageInChat,\n  isAiStreaming,\n  fieldName,\n  id,\n  activeEditId,\n  setActiveEditId,\n  pendingEditId,\n  setPendingEditId,\n  ...props \n}: any) => {\n\n  const [draftValue, setDraftValue] = useState<string | null>(null); // Draft value for inline editing\n  const [isPending, setIsPending] = useState(false); // Indicates if a save operation is pending (checking correctness)\n  const prevStreaming = useRef(isAiStreaming);\n\n  useEffect(() => {\n    const streamingFinished = prevStreaming.current && !isAiStreaming;\n    if (streamingFinished && isPending) {\n      setIsPending(false);\n    }\n    prevStreaming.current = isAiStreaming;\n  }, [isAiStreaming, isPending]);\n\n  const isEditing = draftValue !== null;\n  const isOtherFieldEditing = !!activeEditId && activeEditId !== id && enableInlineEdit;\n\n  const handleStartEdit = () => {\n    if (activeEditId && activeEditId !== id) return;\n    if (setActiveEditId) setActiveEditId(id);\n    setDraftValue(value ?? '');\n  };\n\n  const handleCancel = () => {\n    setDraftValue(null);\n    if (setActiveEditId) setActiveEditId(null);\n  };\n\n  const handleSave = () => {\n    if (draftValue === null) return;\n\n    // No change — just exit without firing message\n    if (draftValue === (value ?? '')) {\n      setDraftValue(null);\n      if (setActiveEditId) setActiveEditId(null);\n      return;\n    }\n\n    if (setSendMessageInChat) {\n      const skId = `sk-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;\n      const fName = fieldName || 'Description';\n      const msg = (!draftValue || draftValue.trim() === '')\n        ? `Remove ${fName}`\n        : `Update ${fName} with ${draftValue}`;\n\n      setIsPending(true);\n      setSendMessageInChat(`__SKELETON__:${skId}:${msg}`);\n    }\n\n    // Immediately revert to old global value — AI will update it when done\n    setDraftValue(null);\n    if (setActiveEditId) setActiveEditId(null);\n  };\n  const draftValueTrimmed = draftValue?.trim() || '';\n  const valueTrimmed = value?.trim() || '';\n\n  // Disable if the value hasn't changed OR if the user cleared the required field\n  const isApplyBtnDisabled = draftValueTrimmed === valueTrimmed || (draftValue !== null && draftValueTrimmed === '');\n  // While AI is streaming the field should be locked (readOnly)\n  const isInputDisabled = readOnly || isAiStreaming || (enableInlineEdit && !isEditing);\n\n  const loadingStyles = `\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  `;\n\n  const titleContent = (\n    <div style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n      <span>{title}</span>\n    </div>\n  );\n\n  const actionBtnStyle = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: '8px',\n    border: '1px solid var(--il-border, #e5e7eb)',\n    borderRadius: '8px',\n    cursor: 'pointer',\n    width: '36px',\n    height: '36px',\n    backgroundColor: 'var(--il-surface, #ffffff)'\n  };\n\n  const saveBtnStyle = {\n    cursor: isApplyBtnDisabled ? 'not-allowed' : 'pointer',\n    opacity: isApplyBtnDisabled ? 0.5 : 1\n  }\n\n  return (\n    <SectionWrapper {...props} readOnly={readOnly} title={titleContent} subtitle={subtitle} customStyles={{margin: '0 0.2rem 0.2rem 0.2rem'}}>\n      <div className=\"textarea-wrapper\" style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', width: '100%' }} data-edit-id={id}>\n        <div style={{ flex: 1, minWidth: 0 }}>\n          <Textarea \n            cognitiveIcon={<ButtonCognitiveIcon />}\n            rows={rows}\n            placeholder={placeholder}\n            // Show draft while editing, otherwise show global value\n            value={isEditing ? draftValue : value}\n            onChange={(e: any) => {\n              if (isEditing) {\n                setDraftValue(e.target.value);\n              } else if (onChange) {\n                onChange(e.target.value);\n              }\n            }}\n            isHighlighted={isHighlighted}\n            isOpen={isOpen}\n            isReadOnly={readOnly || isAiStreaming}\n            inputReadOnly={isInputDisabled}\n            onToggle={onToggle}\n            showCognitiveIcon={showCognitiveIcon}\n            tooltipDescription={tooltipDescription}\n            errorMessage={errorMessage}\n          />\n        </div>\n\n        {/* Action Buttons for Inline Edit Mode */}\n        {enableInlineEdit && !readOnly && (\n          <div style={{ display: 'flex', flexDirection: 'row', gap: '8px', marginTop: '0px' }}>\n            {isEditing ? (\n              <>\n                <button\n                  title=\"Apply\"\n                  onClick={handleSave}\n                  disabled={isApplyBtnDisabled}\n                  style={{ ...actionBtnStyle, ...saveBtnStyle, backgroundColor: 'var(--il-primary, #2563EB)', color: 'var(--il-primary-fg, #ffffff)', width: 'auto', padding: '8px 12px' }}\n                >\n                  <Check size={20} strokeWidth={2.5} /> Apply\n                </button>\n                <button\n                  title=\"Cancel\"\n                  onClick={handleCancel}\n                  style={{ ...actionBtnStyle, borderColor: 'var(--il-border,#E3E8E9)', color: 'var(--il-danger,#dc2626)' }}\n                >\n                  <X size={20} strokeWidth={2.5} />\n                </button>\n              </>\n            ) : (\n              <button\n                title={isOtherFieldEditing ? \"Save active edits first\" : \"Edit\"}\n                onClick={handleStartEdit} \n                disabled={isAiStreaming || isOtherFieldEditing} \n                style={{ \n                  ...actionBtnStyle, \n                  color: 'var(--il-muted, #64748B)',\n                  cursor: isAiStreaming || isOtherFieldEditing ? 'not-allowed' : 'pointer',\n                  opacity: isAiStreaming || isOtherFieldEditing ? 0.5 : 1\n                }}\n              >\n                <Pencil size={20} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* Pending warning — user is editing but clicked away without applying */}\n      {pendingEditId === id && isEditing && (\n        <div style={{display: 'flex', alignItems: 'center', gap: '6px', marginTop: '10px'}}>\n          <AlertTriangle size={14} style={{color: 'var(--il-warning,#c2410c)'}}/>\n          <div style={{color: 'var(--il-warning,#c2410c)', fontSize: '13px'}}>\n            Pending - Changes not applied yet. Apply or discard them to continue.\n          </div>\n        </div>\n      )}\n\n      {/* AI processing indicator — only when THIS field fired */}\n      {isPending && isAiStreaming && enableInlineEdit && (\n        <>\n          <style>{loadingStyles}</style>\n          <div style={{\n            display: 'flex', alignItems: 'center', justifyContent: 'flex-start',\n            padding: '4px 0 12px 12px', color: 'var(--il-muted, #141414)', fontSize: '13px',\n            fontWeight: 500, fontStyle: 'italic', marginTop: '8px'\n          }}>\n            <Loader2Icon style={{ marginRight: 8, animation: 'spin 1s linear infinite' }} />\n            Checking the correctness of your {fieldName || 'description'}...\n          </div>\n        </>\n      )}\n    </SectionWrapper>\n  );\n};\n"],"names":[],"mappings":"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"}