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

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

@@ -1,2 +1,166 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),i=require("react/jsx-runtime"),s=require("../../molecules/Sections/SectionWrapper.js"),n=require("../../_svg/CognitiveDecisioning.js"),o=require("lucide-react"),r=require("../../TooltipComponent.js");exports.ScopeSection=function(t){var a=t.id,l=t.title,d=void 0===l?"Scope":l,c=t.required,p=void 0!==c&&c,g=t.openSections,x=t.setOpenSections,u=t.scopeData,h=t.onScopeChange;t.stationOptions;var v=t.tierOptions,f=void 0===v?[]:v;t.stationLabel;var _=t.tierLabel,b=void 0===_?"Where should this rule apply?":_,y=t.highlights,j=void 0===y?{}:y,m=t.isOpen,S=t.onToggle,C=t.showCognitiveIcon,O=t.cognitiveIcon,w=t.tooltipDescription,I=t.errorMessage,k=t.stationErrorMessage,q=t.tierErrorMessage,z=e.__rest(t,["id","title","required","openSections","setOpenSections","scopeData","onScopeChange","stationOptions","tierOptions","stationLabel","tierLabel","highlights","isOpen","onToggle","showCognitiveIcon","cognitiveIcon","tooltipDescription","errorMessage","stationErrorMessage","tierErrorMessage"]);return i.jsx(s.SectionWrapper,e.__assign({id:a,title:d,required:p,openSections:g,setOpenSections:x},z,{children:i.jsxs("div",e.__assign({className:"scope-content"},{children:[f.length>0&&i.jsxs("div",e.__assign({className:"form-group"},{children:[i.jsxs("div",e.__assign({style:{display:"flex",alignItems:"center",gap:"4px",marginBottom:"4px"}},{children:[i.jsx("span",e.__assign({style:{color:"#8F2C23",lineHeight:1}},{children:"*"})),i.jsx("label",e.__assign({className:(null==z?void 0:z.readOnly)?"readOnly":"form-label",style:{margin:0}},{children:b}))]})),i.jsxs("div",e.__assign({style:{display:"flex",alignItems:"center",gap:"12px",flexWrap:"wrap"}},{children:[i.jsx("div",e.__assign({className:"checkbox-group",style:{display:"flex",gap:"16px"}},{children:f.map(function(s){var n,o,r=j["scope_".concat(s)],t="tier-".concat(a,"-").concat(s.replace(/\s+/g,"-").toLowerCase());return i.jsxs("div",e.__assign({className:"checkbox-item",style:{display:"flex",alignItems:"center",gap:"6px",position:"relative"}},{children:[i.jsx("input",{type:"radio",name:"scope-tiers-".concat(a),id:t,checked:null===(n=u.tiers)||void 0===n?void 0:n.includes(s),onChange:function(){h("tiers",[s])},disabled:(null==z?void 0:z.readOnly)||!1,style:{position:"absolute",opacity:0,cursor:"pointer",width:"16px",height:"16px",zIndex:1}}),i.jsx("div",e.__assign({style:{width:"16px",height:"16px",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s ease",boxShadow:r?"0 0 14px 4px rgba(37, 99, 235, 0.35)":"none",borderRadius:"50%"}},{children:(null===(o=u.tiers)||void 0===o?void 0:o.includes(s))?i.jsx("div",{style:{width:"16px",height:"16px",borderRadius:"50%",border:"5px solid var(--il-primary, #2563EB)",backgroundColor:"var(--il-surface, #ffffff)",boxSizing:"border-box"}}):i.jsx("div",{style:{width:"16px",height:"16px",border:"1px solid var(--il-border, #64748B)",borderRadius:"50%",backgroundColor:"var(--il-surface, #ffffff)",boxSizing:"border-box"}})})),i.jsx("label",e.__assign({style:{color:(null==z?void 0:z.readOnly)?"var(--il-disabled, #9CA3AF)":void 0,cursor:(null==z?void 0:z.readOnly)?"not-allowed":"pointer",margin:0,fontSize:"14px"},htmlFor:t},{children:s}))]}),t)})})),i.jsx("div",e.__assign({style:{width:"fit-content"}},{children:i.jsx(r.default,e.__assign({description:null!=w?w:""},{children:C&&i.jsxs("button",e.__assign({onClick:function(e){e.preventDefault(),null==S||S()},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:[O||i.jsx(n.default,{}),m?i.jsx(o.ChevronUpIcon,{size:16}):i.jsx(o.ChevronDownIcon,{size:16})]}))}))}))]})),q&&i.jsx("div",e.__assign({style:{color:"#ef4444",fontSize:"12px",marginTop:"4px"}},{children:q}))]})),I&&!k&&!q&&i.jsx("div",e.__assign({style:{color:"#ef4444",fontSize:"12px",marginTop:"4px"}},{children:I}))]}))}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var SectionWrapper = require('../../molecules/Sections/SectionWrapper.js');
+var CognitiveDecisioning = require('../../_svg/CognitiveDecisioning.js');
+var lucideReact = require('lucide-react');
+var TooltipComponent = require('../../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__ */ jsxRuntime.jsx(CognitiveDecisioning["default"], {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SectionWrapper.SectionWrapper,
+    {
+      id,
+      title,
+      required,
+      openSections,
+      setOpenSections,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "scope-content", children: [
+        tierOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#8F2C23", lineHeight: 1 }, children: "*" }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: (props == null ? void 0 : props.readOnly) ? "readOnly" : "form-label", style: { margin: 0 }, children: tierLabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "checkbox-item",
+                  style: { display: "flex", alignItems: "center", gap: "6px", position: "relative" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { width: "fit-content" }, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipComponent["default"], { description: tooltipDescription != null ? tooltipDescription : "", children: showCognitiveIcon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { size: 16 })
+                ]
+              }
+            ) }) })
+          ] }),
+          tierErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "4px" }, children: tierErrorMessage })
+        ] }),
+        errorMessage && !stationErrorMessage && !tierErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "4px" }, children: errorMessage })
+      ] })
+    }
+  );
+};
+
+exports.ScopeSection = ScopeSection;
 //# sourceMappingURL=ScopeSection.js.map

package/dist/cjs/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":["jsx","CognitiveDecisioning","SectionWrapper","jsxs","TooltipComponent","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

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

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

package/dist/cjs/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":["useState","useRef","useEffect","jsx","jsxs","SectionWrapper","Textarea","ButtonCognitiveIcon","Fragment","Check","X","Pencil","AlertTriangle","Loader2Icon"],"mappings":"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"}