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

package/dist/cjs/features/IL-OTJ/ILOTJ.js

@@ -1,2 +1,672 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("react/jsx-runtime"),t=require("@mui/material"),a=require("react"),o=require("./_components/ChatComponents/ChatComponent.js"),i=require("./_components/ILPopup.js"),s=require("./_components/VariantLoadingOverlay.js"),r=require("./_components/templates/RuleComparison/RuleComparison.js"),l=require("./_components/templates/RuleComparison/AgentComposerRuleComparison.js"),d=require("./_components/ChatComponents/NormalChat.js"),u=require("../LearningManagement/store/useLearningTemplateStore.js"),c=require("./_components/templates/RuleComparison/RuleComparisonNew.js"),g=require("../IL-marketplace/marketplaceTheme.js"),h=require("@mui/icons-material");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=p(a);exports.default=function(p){var f=p.open,C=p.chatAssistantName,x=p.organizationName,v=p.baseUrl,b=p.baseWebsocketUrl,S=p.closeFunction,k=p.ThinkingBulbIconComponent,w=p.customSections,y=p.customMetaData,D=p.chatTitle,M=void 0===D?"Instant Learning On-The-Job":D,j=p.formTitle,_=void 0===j?"Instant Learning On-The-Job Form":j,T=p.onSave,F=p.headerMessageHandlers,I=p.aiResponse,R=p.setAIResponse,L=p.width,V=void 0===L?"90vw":L,A=p.height,B=void 0===A?"90vh":A,E=p.sendMessageInChat,W=void 0===E?"":E,q=p.setSendMessageInChat,z=p.validateCustom,O=p.onResetChat,P=p.useDynamicForm,H=p.templateProps,N=p.initialChatMessage,J=p.setCitations,U=p.isLoading,G=void 0!==U&&U,X=p.isLocked,K=void 0!==X&&X,Y=p.saveButtonConfig,Q=void 0===Y?{label:"Save Learning",loadingLabel:"Saving Learning..."}:Y,Z=p.saveButtonColor,$=p.saveWithoutValBtnConfig,ee=void 0===$?{label:"Save Without Validation",loadingLabel:"Saving Without Validation..."}:$,ne=p.textareaPlaceholder,te=p.setCurrentRequestId,ae=p.showSavedMessage,oe=void 0!==ae&&ae,ie=p.savedMessage,se=void 0===ie?"Thank you teacher for teaching me, your learning has been saved successfully.":ie,re=p.isError,le=void 0!==re&&re,de=p.errorMessage,ue=void 0===de?"I'm sorry, I couldn't save your changes. Please try again.":de,ce=p.isSaving,ge=void 0!==ce&&ce,he=p.isAiStreaming,pe=p.setIsAiStreaming,me=p.showConfirmReset,fe=void 0!==me&&me,Ce=p.setShowConfirmReset,xe=p.confirmReset,ve=p.isLoadingVariants,be=p.isFormDirty,Se=p.onResetRequest,ke=p.mainText,we=void 0===ke?"Adding a variant":ke,ye=p.subText,De=void 0===ye?"This may take a moment as we update the learning with the new variant.":ye,Me=p.showComparison,je=void 0!==Me&&Me,_e=p.setShowComparison,Te=p.showAgentComposerRuleComparison,Fe=void 0!==Te&&Te,Ie=p.setShowAgentComposerRuleComparison,Re=p.isFetchingComparison,Le=p.handleOpenComparison,Ve=p.proposedRule,Ae=p.variants,Be=p.onAddAsVariant,Ee=p.isCopyEnabled,We=p.showSaveWithoutValidation,qe=void 0!==We&&We,ze=p.onSaveWithoutValidation,Oe=p.showSaveDraft,Pe=void 0!==Oe&&Oe,He=p.onSaveDraft,Ne=p.onSaveDraftWithoutConfirmation,Je=p.saveDraftButtonConfig,Ue=p.isSaveDraftDisabled,Ge=p.saveDraftDisabledTooltip,Xe=p.onComparisonLinkClick,Ke=p.targetComparisonVariantId,Ye=p.highlightedComparisonField,Qe=p.onSubmitFeedback,Ze=p.isUseNormalChat,$e=void 0!==Ze&&Ze,en=p.userDetails,nn=p.handleGlobalClickCapture,tn=p.isGlobalEditActive,an=p.socketTimeOutInMilliSeconds,on=p.initialDraftMessage,sn=p.onValidateSession,rn=p.fieldLabelMap,ln=p.enableChatLogs,dn=g.useILMarketplaceThemeStyles(),un=Boolean(dn["--il-scrollbar-track"]||dn["--il-scrollbar-thumb"]||dn["--il-scrollbar-size"]),cn=a.useState(f),gn=cn[0],hn=cn[1],pn=a.useState(!1);pn[0];var mn=pn[1],fn=a.useState(!1),Cn=fn[0],xn=fn[1],vn=a.useState(!1),bn=vn[0];vn[1];var Sn=a.useState(45),kn=Sn[0],wn=Sn[1],yn=a.useState("right"),Dn=yn[0],Mn=yn[1],jn=m.default.useRef(Dn),_n=a.useState(!1),Tn=_n[0],Fn=_n[1],In=a.useState(0),Rn=In[0],Ln=In[1],Vn=a.useState(40),An=Vn[0],Bn=Vn[1],En=u.useLearningTemplateStore.getState().cognitiveCompareCompatibility;a.useEffect(function(){jn.current=Dn},[Dn]),a.useEffect(function(){hn(f)},[f]);var Wn=a.useCallback(function(e){e.preventDefault(),Fn(!0),Ln(e.clientX),Bn(kn)},[kn]),qn=a.useCallback(function(e){if(Tn){var n=document.querySelector("[data-dialog-content]");if(n){var t=n.getBoundingClientRect(),a=(e.clientX-Rn)/t.width*100,o=Math.max(20,Math.min(80,An+a));wn(o),o>An&&Mn("right"),o<An&&Mn("left")}}},[Tn,Rn,An]),zn=a.useCallback(function(){Fn(!1)},[]);a.useEffect(function(){if(Tn)return document.addEventListener("mousemove",qn),document.addEventListener("mouseup",zn),function(){document.removeEventListener("mousemove",qn),document.removeEventListener("mouseup",zn)}},[Tn,qn,zn]);var On=function(e,n){K&&"backdropClick"===n||("escapeKeyDown"!==n&&"manualClose"!==n||!(null==be?void 0:be())?(hn(!1),S()):null==Se||Se())},Pn=a.useCallback(function(e){wn(function(n){var t;if("number"==typeof e)return e>n&&Mn("right"),e<n&&Mn("left"),e;var a=jn.current,o=null!==(t={20:30,30:"left"===a?20:50,50:"left"===a?30:75,75:"left"===a?50:100,100:75}[n])&&void 0!==t?t:40;return 100===o&&Mn("left"),20===o&&Mn("right"),o})},[]),Hn=a.useCallback(function(){Le&&(Pn(30),Le())},[Pn,Le]);return n.jsx(t.Dialog,e.__assign({open:gn,onClose:On,maxWidth:!1,fullWidth:!0,PaperProps:{style:dn,sx:{width:V,height:B,display:"flex",flexDirection:"column",padding:0,margin:0,maxWidth:"100vw",borderRadius:"10px"}}},{children:n.jsxs(t.DialogContent,e.__assign({"data-dialog-content":!0,className:un?"il-teach-me-scrollbar-themed":void 0,onClickCapture:nn,sx:{flex:1,overflow:"hidden",display:"flex",flexDirection:"row",gap:0,padding:0,fontFamily:'"Plus Jakarta Sans", sans-serif',"& *":{fontFamily:'"Plus Jakarta Sans", sans-serif !important'}}},{children:[n.jsx(t.Box,e.__assign({sx:{width:"".concat(kn,"%"),maxWidth:"".concat(kn,"%"),transition:Tn?"none":"width 0.3s ease-in-out, max-width 0.3s ease-in-out",bgcolor:"#ffffff",p:0,display:0===kn?"none":"flex",flexDirection:"column"}},{children:$e?n.jsx(d.default,{chatAssistantName:C,organizationName:x,baseUrl:v,baseWebsocketUrl:b,setIsNewChatClicked:mn,ThinkingBulbIconComponent:k,isFormSaveClicked:Cn,setIsFormSavedClicked:xn,onResetLearningData:function(){},sendMessageInChat:W,setSendMessageInChat:q,isFormValidating:bn,chatTitle:M,customMetaData:y,headerMessageHandlers:F,aiResponse:I,setAIResponse:R,onResetChat:O,initialChatMessage:N,onSave:T,chatSize:kn,movingTowards:Dn,setChatSize:Pn,setCitations:J,textareaPlaceholder:ne,setCurrentRequestId:te,showSavedMessage:oe,savedMessage:se,isError:le,errorMessage:ue,isSaving:ge,onStreamingStateChange:pe,onViewComparison:Hn,isCopyEnabled:Ee,onComparisonLinkClick:Xe,onSubmitFeedback:Qe}):n.jsx(o.default,{chatAssistantName:C,organizationName:x,baseUrl:v,baseWebsocketUrl:b,setIsNewChatClicked:mn,ThinkingBulbIconComponent:k,isFormSaveClicked:Cn,setIsFormSavedClicked:xn,onResetLearningData:function(){},sendMessageInChat:W,setSendMessageInChat:q,isFormValidating:bn,chatTitle:M,customMetaData:y,headerMessageHandlers:F,aiResponse:I,setAIResponse:R,onResetChat:O,initialChatMessage:N,onSave:T,chatSize:kn,movingTowards:Dn,setChatSize:Pn,setCitations:J,textareaPlaceholder:ne,setCurrentRequestId:te,showSavedMessage:oe,savedMessage:se,isError:le,errorMessage:ue,isSaving:ge,onStreamingStateChange:pe,onViewComparison:Hn,isCopyEnabled:Ee,onComparisonLinkClick:Xe,onSubmitFeedback:Qe,userDetails:en,isGlobalEditActive:tn,socketTimeOutInMilliSeconds:an,initialDraftMessage:on,onValidateSession:sn,onCloseSessionModal:xe,fieldLabelMap:rn,enableChatLogs:ln})})),n.jsx(t.Box,{sx:{width:"2px",cursor:"col-resize",backgroundColor:Tn?"#1976d2":"#e0e0e0",transition:"background-color 0.2s ease","&:hover":{backgroundColor:"#1976d2"},flexShrink:0},onMouseDown:Wn}),n.jsxs(t.Box,e.__assign({sx:{width:"".concat(100-kn,"%"),maxWidth:"".concat(100-kn,"%"),transition:Tn?"none":"width 0.3s ease-in-out, max-width 0.3s ease-in-out",display:100===kn?"none":"flex",flexDirection:"column",overflowY:"hidden",position:"relative"}},{children:[n.jsx(s.default,{isLoading:Re||!1,mainText:"Fetching differences between rules",subText:"This may take a moment..."}),n.jsx(s.default,{isLoading:ve||!1,mainText:we,subText:De}),Fe?n.jsx(l.default,{proposedRule:Ve,variants:Ae,onSelectVariant:function(e){console.log("Selected Variant ID:",e.id)},onAddAsVariant:function(){null==Be||Be(),Pn(40),null==Ie||Ie(!1)},onSkip:function(){Pn(40),null==Ie||Ie(!1)},onBack:function(){Pn(40),null==Ie||Ie(!1)},targetVariantId:Ke,highlightedField:Ye}):je?En?n.jsx(c.default,{proposedRule:Ve,variants:Ae,onSelectVariant:function(e){console.log("Selected Variant ID:",e.id)},onAddAsVariant:function(){null==Be||Be(),Pn(40),null==_e||_e(!1)},onSkip:function(){Pn(40),null==_e||_e(!1)},onBack:function(){Pn(40),null==_e||_e(!1)},targetVariantId:Ke,highlightedField:Ye}):n.jsx(r.default,{variants:Ae,onSelectVariant:function(e){console.log("Selected Variant ID:",e.id)},onAddAsVariant:function(){null==Be||Be(),Pn(40),null==_e||_e(!1)},onSkip:function(){Pn(40),null==_e||_e(!1)},onBack:function(){Pn(40),null==_e||_e(!1)},targetVariantId:Ke}):n.jsx(i.default,{setIsFormSavedClicked:xn,customSections:w,onSave:T,formHeader:_,onClose:function(){return On(0,"manualClose")},validateCustom:z,useDynamicForm:P,templateProps:H,isLoading:G,isAiStreaming:he,saveButtonConfig:Q,saveButtonColor:Z,showSaveWithoutValidation:qe,saveWithoutValBtnConfig:ee,onSaveWithoutValidation:ze,showSaveDraft:Pe,saveDraftButtonConfig:Je,onSaveDraft:He,isSaveDraftDisabled:Ue,saveDraftDisabledTooltip:Ge}),n.jsx(t.Dialog,e.__assign({open:fe,onClose:function(){return null==Ce?void 0:Ce(!1)},PaperProps:{style:dn,sx:{borderRadius:"8px",padding:0,width:Pe?"470px":"360px",maxWidth:"calc(100vw - 48px)",boxShadow:"0 18px 44px rgba(15, 23, 42, 0.22)"}}},{children:n.jsxs(t.Box,e.__assign({sx:{p:"20px",textAlign:"left",fontFamily:"'Plus Jakarta Sans', sans-serif"}},{children:[n.jsx("button",e.__assign({onClick:function(){return null==Ce?void 0:Ce(!1)},style:{position:"absolute",top:"18px",right:"18px",width:"28px",height:"28px",display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",color:"#60708C",cursor:"pointer",fontSize:"24px",lineHeight:1},"aria-label":"Cancel exit"},{children:n.jsx(h.Cancel,{style:{width:"20px",height:"20px"}})})),n.jsx(t.Box,e.__assign({component:"h3",sx:{fontSize:"18px",lineHeight:1.25,fontWeight:700,color:"#30405A",m:0,pr:"32px",mb:"18px"}},{children:"Exit Teach Me OTJ?"})),n.jsxs(t.Box,e.__assign({component:"p",sx:{fontSize:"16px",color:"#30405A",lineHeight:1.5,m:0,mb:"24px"}},{children:["Exiting will end this Teach Me OTJ session.",n.jsx("br",{}),"Any unsaved changes will be lost unless you save them as a draft."]})),n.jsxs(t.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[n.jsxs(t.Box,e.__assign({sx:{display:"grid",gridTemplateColumns:{xs:"1fr",sm:"1fr 1fr"},gap:"12px",justifyContent:"center",alignItems:"stretch"}},{children:[n.jsx("button",e.__assign({onClick:function(){return null==Ce?void 0:Ce(!1)},style:{minHeight:"36px",padding:"7px 12px",cursor:"pointer",backgroundColor:"white",border:"1px solid #DDE4EF",borderRadius:"8px",fontSize:"14px",lineHeight:1.25,fontWeight:600,color:"#45546D",transition:"all 0.2s"},onMouseOver:function(e){return e.currentTarget.style.backgroundColor="#F8FAFC"},onMouseOut:function(e){return e.currentTarget.style.backgroundColor="white"}},{children:"Cancel"})),n.jsx("button",e.__assign({onClick:xe,style:{minHeight:"36px",padding:"7px 12px",backgroundColor:"#F44247",color:"white",border:"1px solid #FEB7BA",borderRadius:"8px",fontSize:"14px",lineHeight:1.25,fontWeight:600,cursor:"pointer",transition:"background-color 0.2s"},onMouseOver:function(e){return e.currentTarget.style.backgroundColor="#bd2c31ff"},onMouseOut:function(e){return e.currentTarget.style.backgroundColor="#F44247"}},{children:"Discard"}))]})),Pe&&n.jsx(t.Box,e.__assign({sx:{display:"flex",justifyContent:"center"}},{children:n.jsx(t.Tooltip,e.__assign({arrow:!0,title:Ue&&Ge?Ge:""},{children:n.jsx("span",e.__assign({style:{display:"flex",minWidth:0,width:"50%"}},{children:n.jsx("button",e.__assign({onClick:function(){var e;Ue||(null==Ce||Ce(!1),null===(e=null!=Ne?Ne:He)||void 0===e||e())},disabled:Ue,style:{width:"100%",minHeight:"36px",padding:"7px 12px",cursor:Ue?"not-allowed":"pointer",backgroundColor:Ue?"#F7F7F9":"#5925DC",border:Ue?"1px solid #E7E8EC":"1px solid #5925DC",borderRadius:"8px",fontSize:"14px",lineHeight:1.25,fontWeight:600,color:Ue?"#B8BEC8":"#FFFFFF",opacity:1,transition:"all 0.2s"},onMouseOver:function(e){Ue||(e.currentTarget.style.backgroundColor="#4C1DCE")},onMouseOut:function(e){Ue||(e.currentTarget.style.backgroundColor="#5925DC")}},{children:"Save as Draft"}))}))}))}))]}))]}))}))]}))]}))}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var React = require('react');
+var ChatComponent = require('./_components/ChatComponents/ChatComponent.js');
+var ILPopup = require('./_components/ILPopup.js');
+var VariantLoadingOverlay = require('./_components/VariantLoadingOverlay.js');
+var RuleComparison = require('./_components/templates/RuleComparison/RuleComparison.js');
+var AgentComposerRuleComparison = require('./_components/templates/RuleComparison/AgentComposerRuleComparison.js');
+var NormalChat = require('./_components/ChatComponents/NormalChat.js');
+var useLearningTemplateStore = require('../LearningManagement/store/useLearningTemplateStore.js');
+var RuleComparisonNew = require('./_components/templates/RuleComparison/RuleComparisonNew.js');
+var marketplaceTheme = require('../IL-marketplace/marketplaceTheme.js');
+var iconsMaterial = require('@mui/icons-material');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ILOTJ = ({
+  open,
+  chatAssistantName,
+  organizationName,
+  baseUrl,
+  baseWebsocketUrl,
+  closeFunction,
+  ThinkingBulbIconComponent,
+  customSections,
+  customMetaData,
+  chatTitle = "Instant Learning On-The-Job",
+  formTitle = "Instant Learning On-The-Job Form",
+  onSave,
+  headerMessageHandlers,
+  aiResponse,
+  setAIResponse,
+  width = "90vw",
+  height = "90vh",
+  sendMessageInChat = "",
+  setSendMessageInChat,
+  validateCustom,
+  onResetChat,
+  // template,
+  useDynamicForm,
+  templateProps,
+  initialChatMessage,
+  setCitations,
+  isLoading = false,
+  isLocked = false,
+  saveButtonConfig = { label: "Save Learning", loadingLabel: "Saving Learning..." },
+  saveButtonColor,
+  saveWithoutValBtnConfig = { label: "Save Without Validation", loadingLabel: "Saving Without Validation..." },
+  textareaPlaceholder,
+  setCurrentRequestId,
+  showSavedMessage = false,
+  savedMessage = "Thank you teacher for teaching me, your learning has been saved successfully.",
+  isError = false,
+  errorMessage = "I'm sorry, I couldn't save your changes. Please try again.",
+  isSaving = false,
+  isAiStreaming,
+  setIsAiStreaming,
+  showConfirmReset = false,
+  setShowConfirmReset,
+  confirmReset,
+  isLoadingVariants,
+  isFormDirty,
+  onResetRequest,
+  mainText = "Adding a variant",
+  subText = "This may take a moment as we update the learning with the new variant.",
+  showComparison = false,
+  setShowComparison,
+  showAgentComposerRuleComparison = false,
+  setShowAgentComposerRuleComparison,
+  isFetchingComparison,
+  handleOpenComparison,
+  proposedRule,
+  variants,
+  onAddAsVariant,
+  isCopyEnabled,
+  showSaveWithoutValidation = false,
+  // Default to false
+  onSaveWithoutValidation,
+  //for testing
+  showSaveDraft = false,
+  onSaveDraft,
+  onSaveDraftWithoutConfirmation,
+  saveDraftButtonConfig,
+  isSaveDraftDisabled,
+  saveDraftDisabledTooltip,
+  onComparisonLinkClick,
+  targetComparisonVariantId,
+  highlightedComparisonField,
+  onSubmitFeedback,
+  isUseNormalChat = false,
+  userDetails,
+  handleGlobalClickCapture,
+  isGlobalEditActive,
+  socketTimeOutInMilliSeconds,
+  initialDraftMessage,
+  onValidateSession,
+  fieldLabelMap,
+  enableChatLogs
+}) => {
+  const themeStyles = marketplaceTheme.useILMarketplaceThemeStyles();
+  const hasScrollbarTheme = Boolean(
+    themeStyles["--il-scrollbar-track"] || themeStyles["--il-scrollbar-thumb"] || themeStyles["--il-scrollbar-size"]
+  );
+  const [dialogOpen, setDialogOpen] = React.useState(open);
+  const [isNewChatClicked, setIsNewChatClicked] = React.useState(false);
+  const [isFormSaveClicked, setIsFormSavedClicked] = React.useState(false);
+  const [isFormValidating, setIsFormValidating] = React.useState(false);
+  const [chatSize, setChatSize] = React.useState(45);
+  const [movingTowards, setMovingTowards] = React.useState("right");
+  const movingTowardsRef = React__default["default"].useRef(movingTowards);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [dragStartX, setDragStartX] = React.useState(0);
+  const [dragStartSize, setDragStartSize] = React.useState(40);
+  const cognitiveCompareCompatibility = useLearningTemplateStore.useLearningTemplateStore.getState().cognitiveCompareCompatibility;
+  React.useEffect(() => {
+    movingTowardsRef.current = movingTowards;
+  }, [movingTowards]);
+  React.useEffect(() => {
+    setDialogOpen(open);
+  }, [open]);
+  const handleMouseDown = React.useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    setDragStartX(e.clientX);
+    setDragStartSize(chatSize);
+  }, [chatSize]);
+  const handleMouseMove = React.useCallback((e) => {
+    if (!isDragging) return;
+    const container = document.querySelector("[data-dialog-content]");
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const deltaX = e.clientX - dragStartX;
+    const deltaPercent = deltaX / rect.width * 100;
+    const newSize = Math.max(20, Math.min(80, dragStartSize + deltaPercent));
+    setChatSize(newSize);
+    if (newSize > dragStartSize) setMovingTowards("right");
+    if (newSize < dragStartSize) setMovingTowards("left");
+  }, [isDragging, dragStartX, dragStartSize]);
+  const handleMouseUp = React.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleClose = (event, reason) => {
+    if (isLocked && reason === "backdropClick") {
+      return;
+    }
+    if (reason === "escapeKeyDown" || reason === "manualClose") {
+      if (isFormDirty == null ? void 0 : isFormDirty()) {
+        onResetRequest == null ? void 0 : onResetRequest();
+        return;
+      }
+    }
+    setDialogOpen(false);
+    closeFunction();
+  };
+  const handleResizeChat = React.useCallback((percent) => {
+    setChatSize((prev) => {
+      var _a;
+      if (typeof percent === "number") {
+        if (percent > prev) setMovingTowards("right");
+        if (percent < prev) setMovingTowards("left");
+        return percent;
+      }
+      const currentMovingTowards = movingTowardsRef.current;
+      const map = {
+        20: 30,
+        30: currentMovingTowards === "left" ? 20 : 50,
+        50: currentMovingTowards === "left" ? 30 : 75,
+        75: currentMovingTowards === "left" ? 50 : 100,
+        100: 75
+      };
+      const nextSize = (_a = map[prev]) != null ? _a : 40;
+      if (nextSize === 100) setMovingTowards("left");
+      if (nextSize === 20) setMovingTowards("right");
+      return nextSize;
+    });
+  }, []);
+  const handleOpenComparisonWithResize = React.useCallback(() => {
+    if (handleOpenComparison) {
+      handleResizeChat(30);
+      handleOpenComparison();
+    }
+  }, [handleResizeChat, handleOpenComparison]);
+  const handleSaveDraftFromExit = () => {
+    var _a;
+    if (isSaveDraftDisabled) return;
+    setShowConfirmReset == null ? void 0 : setShowConfirmReset(false);
+    (_a = onSaveDraftWithoutConfirmation != null ? onSaveDraftWithoutConfirmation : onSaveDraft) == null ? void 0 : _a();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Dialog,
+    {
+      open: dialogOpen,
+      onClose: handleClose,
+      maxWidth: false,
+      fullWidth: true,
+      PaperProps: {
+        style: themeStyles,
+        sx: {
+          width,
+          height,
+          display: "flex",
+          flexDirection: "column",
+          padding: 0,
+          margin: 0,
+          maxWidth: "100vw",
+          borderRadius: "10px"
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.DialogContent,
+        {
+          "data-dialog-content": true,
+          className: hasScrollbarTheme ? "il-teach-me-scrollbar-themed" : void 0,
+          onClickCapture: handleGlobalClickCapture,
+          sx: {
+            flex: 1,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "row",
+            gap: 0,
+            padding: 0,
+            fontFamily: '"Plus Jakarta Sans", sans-serif',
+            "& *": { fontFamily: '"Plus Jakarta Sans", sans-serif !important' }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
+              width: `${chatSize}%`,
+              maxWidth: `${chatSize}%`,
+              transition: isDragging ? "none" : "width 0.3s ease-in-out, max-width 0.3s ease-in-out",
+              bgcolor: "#ffffff",
+              p: 0,
+              display: chatSize === 0 ? "none" : "flex",
+              flexDirection: "column"
+              // borderRight: chatSize === 100 ? 'none' : '1px solid #e5e7eb',
+            }, children: isUseNormalChat ? (
+              // normal chat component for normal usage without any preserve functionality 
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NormalChat["default"],
+                {
+                  chatAssistantName,
+                  organizationName,
+                  baseUrl,
+                  baseWebsocketUrl,
+                  setIsNewChatClicked,
+                  ThinkingBulbIconComponent,
+                  isFormSaveClicked,
+                  setIsFormSavedClicked,
+                  onResetLearningData: () => {
+                  },
+                  sendMessageInChat,
+                  setSendMessageInChat,
+                  isFormValidating,
+                  chatTitle,
+                  customMetaData,
+                  headerMessageHandlers,
+                  aiResponse,
+                  setAIResponse,
+                  onResetChat,
+                  initialChatMessage,
+                  onSave,
+                  chatSize,
+                  movingTowards,
+                  setChatSize: handleResizeChat,
+                  setCitations,
+                  textareaPlaceholder,
+                  setCurrentRequestId,
+                  showSavedMessage,
+                  savedMessage,
+                  isError,
+                  errorMessage,
+                  isSaving,
+                  onStreamingStateChange: setIsAiStreaming,
+                  onViewComparison: handleOpenComparisonWithResize,
+                  isCopyEnabled,
+                  onComparisonLinkClick,
+                  onSubmitFeedback
+                }
+              )
+            ) : (
+              //for Audacy WITH preserve_message functionality
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ChatComponent["default"],
+                {
+                  chatAssistantName,
+                  organizationName,
+                  baseUrl,
+                  baseWebsocketUrl,
+                  setIsNewChatClicked,
+                  ThinkingBulbIconComponent,
+                  isFormSaveClicked,
+                  setIsFormSavedClicked,
+                  onResetLearningData: () => {
+                  },
+                  sendMessageInChat,
+                  setSendMessageInChat,
+                  isFormValidating,
+                  chatTitle,
+                  customMetaData,
+                  headerMessageHandlers,
+                  aiResponse,
+                  setAIResponse,
+                  onResetChat,
+                  initialChatMessage,
+                  onSave,
+                  chatSize,
+                  movingTowards,
+                  setChatSize: handleResizeChat,
+                  setCitations,
+                  textareaPlaceholder,
+                  setCurrentRequestId,
+                  showSavedMessage,
+                  savedMessage,
+                  isError,
+                  errorMessage,
+                  isSaving,
+                  onStreamingStateChange: setIsAiStreaming,
+                  onViewComparison: handleOpenComparisonWithResize,
+                  isCopyEnabled,
+                  onComparisonLinkClick,
+                  onSubmitFeedback,
+                  userDetails,
+                  isGlobalEditActive,
+                  socketTimeOutInMilliSeconds,
+                  initialDraftMessage,
+                  onValidateSession,
+                  onCloseSessionModal: confirmReset,
+                  fieldLabelMap,
+                  enableChatLogs
+                }
+              )
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                sx: {
+                  width: "2px",
+                  cursor: "col-resize",
+                  backgroundColor: isDragging ? "#1976d2" : "#e0e0e0",
+                  transition: "background-color 0.2s ease",
+                  "&:hover": {
+                    backgroundColor: "#1976d2"
+                  },
+                  flexShrink: 0
+                },
+                onMouseDown: handleMouseDown
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
+              width: `${100 - chatSize}%`,
+              maxWidth: `${100 - chatSize}%`,
+              transition: isDragging ? "none" : "width 0.3s ease-in-out, max-width 0.3s ease-in-out",
+              display: chatSize === 100 ? "none" : "flex",
+              flexDirection: "column",
+              overflowY: "hidden",
+              position: "relative"
+              // Added for overlay positioning
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                VariantLoadingOverlay["default"],
+                {
+                  isLoading: isFetchingComparison || false,
+                  mainText: "Fetching differences between rules",
+                  subText: "This may take a moment..."
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                VariantLoadingOverlay["default"],
+                {
+                  isLoading: isLoadingVariants || false,
+                  mainText,
+                  subText
+                }
+              ),
+              showAgentComposerRuleComparison ? (
+                // Render the New Template directly for testing
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AgentComposerRuleComparison["default"],
+                  {
+                    proposedRule,
+                    variants,
+                    onSelectVariant: (variant) => {
+                      console.log("Selected Variant ID:", variant.id);
+                    },
+                    onAddAsVariant: () => {
+                      onAddAsVariant == null ? void 0 : onAddAsVariant();
+                      handleResizeChat(40);
+                      setShowAgentComposerRuleComparison == null ? void 0 : setShowAgentComposerRuleComparison(false);
+                    },
+                    onSkip: () => {
+                      handleResizeChat(40);
+                      setShowAgentComposerRuleComparison == null ? void 0 : setShowAgentComposerRuleComparison(false);
+                    },
+                    onBack: () => {
+                      handleResizeChat(40);
+                      setShowAgentComposerRuleComparison == null ? void 0 : setShowAgentComposerRuleComparison(false);
+                    },
+                    targetVariantId: targetComparisonVariantId,
+                    highlightedField: highlightedComparisonField
+                  }
+                )
+              ) : showComparison ? cognitiveCompareCompatibility ? /* @__PURE__ */ jsxRuntime.jsx(
+                RuleComparisonNew["default"],
+                {
+                  proposedRule,
+                  variants,
+                  onSelectVariant: (variant) => {
+                    console.log("Selected Variant ID:", variant.id);
+                  },
+                  onAddAsVariant: () => {
+                    onAddAsVariant == null ? void 0 : onAddAsVariant();
+                    handleResizeChat(40);
+                    setShowComparison == null ? void 0 : setShowComparison(false);
+                  },
+                  onSkip: () => {
+                    handleResizeChat(40);
+                    setShowComparison == null ? void 0 : setShowComparison(false);
+                  },
+                  onBack: () => {
+                    handleResizeChat(40);
+                    setShowComparison == null ? void 0 : setShowComparison(false);
+                  },
+                  targetVariantId: targetComparisonVariantId,
+                  highlightedField: highlightedComparisonField
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                RuleComparison["default"],
+                {
+                  variants,
+                  onSelectVariant: (variant) => {
+                    console.log("Selected Variant ID:", variant.id);
+                  },
+                  onAddAsVariant: () => {
+                    onAddAsVariant == null ? void 0 : onAddAsVariant();
+                    handleResizeChat(40);
+                    setShowComparison == null ? void 0 : setShowComparison(false);
+                  },
+                  onSkip: () => {
+                    handleResizeChat(40);
+                    setShowComparison == null ? void 0 : setShowComparison(false);
+                  },
+                  onBack: () => {
+                    handleResizeChat(40);
+                    setShowComparison == null ? void 0 : setShowComparison(false);
+                  },
+                  targetVariantId: targetComparisonVariantId
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ILPopup["default"],
+                {
+                  setIsFormSavedClicked,
+                  customSections,
+                  onSave,
+                  formHeader: formTitle,
+                  onClose: () => handleClose({}, "manualClose"),
+                  validateCustom,
+                  useDynamicForm,
+                  templateProps,
+                  isLoading,
+                  isAiStreaming,
+                  saveButtonConfig,
+                  saveButtonColor,
+                  showSaveWithoutValidation,
+                  saveWithoutValBtnConfig,
+                  onSaveWithoutValidation,
+                  showSaveDraft,
+                  saveDraftButtonConfig,
+                  onSaveDraft,
+                  isSaveDraftDisabled,
+                  saveDraftDisabledTooltip
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Dialog,
+                {
+                  open: showConfirmReset,
+                  onClose: () => setShowConfirmReset == null ? void 0 : setShowConfirmReset(false),
+                  PaperProps: {
+                    style: themeStyles,
+                    sx: {
+                      borderRadius: "8px",
+                      padding: 0,
+                      width: showSaveDraft ? "470px" : "360px",
+                      maxWidth: "calc(100vw - 48px)",
+                      boxShadow: "0 18px 44px rgba(15, 23, 42, 0.22)"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
+                    p: "20px",
+                    textAlign: "left",
+                    fontFamily: "'Plus Jakarta Sans', sans-serif"
+                  }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setShowConfirmReset == null ? void 0 : setShowConfirmReset(false),
+                        style: {
+                          position: "absolute",
+                          top: "18px",
+                          right: "18px",
+                          width: "28px",
+                          height: "28px",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          border: "none",
+                          backgroundColor: "transparent",
+                          color: "#60708C",
+                          cursor: "pointer",
+                          fontSize: "24px",
+                          lineHeight: 1
+                        },
+                        "aria-label": "Cancel exit",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Cancel, { style: { width: "20px", height: "20px" } })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Box,
+                      {
+                        component: "h3",
+                        sx: {
+                          fontSize: "18px",
+                          lineHeight: 1.25,
+                          fontWeight: 700,
+                          color: "#30405A",
+                          m: 0,
+                          pr: "32px",
+                          mb: "18px"
+                        },
+                        children: "Exit Teach Me OTJ?"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.Box,
+                      {
+                        component: "p",
+                        sx: {
+                          fontSize: "16px",
+                          color: "#30405A",
+                          lineHeight: 1.5,
+                          m: 0,
+                          mb: "24px"
+                        },
+                        children: [
+                          "Exiting will end this Teach Me OTJ session.",
+                          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                          "Any unsaved changes will be lost unless you save them as a draft."
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
+                        display: "grid",
+                        gridTemplateColumns: {
+                          xs: "1fr",
+                          sm: "1fr 1fr"
+                        },
+                        gap: "12px",
+                        justifyContent: "center",
+                        alignItems: "stretch"
+                      }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => setShowConfirmReset == null ? void 0 : setShowConfirmReset(false),
+                            style: {
+                              minHeight: "36px",
+                              padding: "7px 12px",
+                              cursor: "pointer",
+                              backgroundColor: "white",
+                              border: "1px solid #DDE4EF",
+                              borderRadius: "8px",
+                              fontSize: "14px",
+                              lineHeight: 1.25,
+                              fontWeight: 600,
+                              color: "#45546D",
+                              transition: "all 0.2s"
+                            },
+                            onMouseOver: (e) => e.currentTarget.style.backgroundColor = "#F8FAFC",
+                            onMouseOut: (e) => e.currentTarget.style.backgroundColor = "white",
+                            children: "Cancel"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: confirmReset,
+                            style: {
+                              minHeight: "36px",
+                              padding: "7px 12px",
+                              backgroundColor: "#F44247",
+                              color: "white",
+                              border: "1px solid #FEB7BA",
+                              borderRadius: "8px",
+                              fontSize: "14px",
+                              lineHeight: 1.25,
+                              fontWeight: 600,
+                              cursor: "pointer",
+                              transition: "background-color 0.2s"
+                            },
+                            onMouseOver: (e) => e.currentTarget.style.backgroundColor = "#bd2c31ff",
+                            onMouseOut: (e) => e.currentTarget.style.backgroundColor = "#F44247",
+                            children: "Discard"
+                          }
+                        )
+                      ] }),
+                      showSaveDraft && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Tooltip,
+                        {
+                          arrow: true,
+                          title: isSaveDraftDisabled && saveDraftDisabledTooltip ? saveDraftDisabledTooltip : "",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", minWidth: 0, width: "50%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              onClick: handleSaveDraftFromExit,
+                              disabled: isSaveDraftDisabled,
+                              style: {
+                                width: "100%",
+                                minHeight: "36px",
+                                padding: "7px 12px",
+                                cursor: isSaveDraftDisabled ? "not-allowed" : "pointer",
+                                backgroundColor: isSaveDraftDisabled ? "#F7F7F9" : "#5925DC",
+                                border: isSaveDraftDisabled ? "1px solid #E7E8EC" : "1px solid #5925DC",
+                                borderRadius: "8px",
+                                fontSize: "14px",
+                                lineHeight: 1.25,
+                                fontWeight: 600,
+                                color: isSaveDraftDisabled ? "#B8BEC8" : "#FFFFFF",
+                                opacity: 1,
+                                transition: "all 0.2s"
+                              },
+                              onMouseOver: (e) => {
+                                if (!isSaveDraftDisabled) e.currentTarget.style.backgroundColor = "#4C1DCE";
+                              },
+                              onMouseOut: (e) => {
+                                if (!isSaveDraftDisabled) e.currentTarget.style.backgroundColor = "#5925DC";
+                              },
+                              children: "Save as Draft"
+                            }
+                          ) })
+                        }
+                      ) })
+                    ] })
+                  ] })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var ILOTJ$1 = ILOTJ;
+
+exports["default"] = ILOTJ$1;
 //# sourceMappingURL=ILOTJ.js.map