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

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

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