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

package/dist/features/DocumentLearning/_components/MessageRendering.js

@@ -1,2 +1,696 @@
-import{__spreadArray as e,__assign as n,__rest as r}from"tslib";import{jsx as i,jsxs as t,Fragment as o}from"react/jsx-runtime";import l,{useState as a,useEffect as s,useCallback as c,useRef as d,useMemo as u}from"react";import g from"react-markdown";import f from"rehype-raw";var p=function(e){var r=e.label,o=e.onToggle,l=a(!1),c=l[0],u=l[1],g=d(null);return s(function(){var e=g.current;e&&c&&(e.style.boxShadow="0 2px 8px rgba(0, 0, 0, 0.1)",e.style.transform="scale(1)",e.style.backgroundColor="#E8F5E9",e.style.color="#2E7D32")},[c]),t("span",n({ref:g,onClick:function(){var e=!c;console.log("newstate: ",e),u(e),o(r,e)},style:{cursor:"pointer",backgroundColor:c?"#E8F5E9":"#fff",color:c?"#2E7D32":"#000000de",transition:"all 0.2s ease-in-out",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)",transform:"scale(1)"},onMouseEnter:function(e){c||(e.currentTarget.style.boxShadow="0 4px 12px rgba(30, 136, 229, 0.3)",e.currentTarget.style.transform="scale(1.02)",e.currentTarget.style.backgroundColor="#f0f7ff",e.currentTarget.style.color="#1E88E5")},onMouseLeave:function(e){c||(e.currentTarget.style.boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)",e.currentTarget.style.transform="scale(1)",e.currentTarget.style.backgroundColor="#fbfaff",e.currentTarget.style.color="#000000de")}},{children:[i("span",n({style:{fontWeight:"bold",fontSize:"16px",transition:"all 0.3s ease",transform:c?"scale(1.2)":"scale(1)",opacity:c?1:.9,paddingLeft:"0.25rem",paddingRight:"0.25rem"}},{children:c?"✓":"+"})),i("span",{children:r})]}))};function m(e){return"string"==typeof e?e:Array.isArray(e)?e.map(m).join(""):"object"==typeof e&&null!==e&&"props"in e?m(e.props.children):""}var y=function(e){var r=e.label,o=e.onToggle,l=e.isSelected,c=void 0!==l&&l,u=a(c),g=u[0],f=u[1],p=d(null);s(function(){f(c)},[c]);return s(function(){var e=p.current;e&&g&&(e.style.boxShadow="0 2px 8px rgba(0, 0, 0, 0.1)",e.style.transform="scale(1)",e.style.backgroundColor="#E8F5E9",e.style.color="#2E7D32")},[g]),t("span",n({ref:p,onClick:function(){var e=!g;console.log("newstate: ",e),f(e),o(m(r),e)},style:{cursor:"pointer",backgroundColor:g?"#E8F5E9":"#fff",color:g?"#2E7D32":"#000000de",transition:"all 0.2s ease-in-out",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)",transform:"scale(1)"},onMouseEnter:function(e){g||(e.currentTarget.style.boxShadow="0 4px 12px rgba(30, 136, 229, 0.3)",e.currentTarget.style.transform="scale(1.02)",e.currentTarget.style.backgroundColor="#f0f7ff",e.currentTarget.style.color="#1E88E5")},onMouseLeave:function(e){g||(e.currentTarget.style.boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)",e.currentTarget.style.transform="scale(1)",e.currentTarget.style.backgroundColor="#fbfaff",e.currentTarget.style.color="#000000de")}},{children:[i("span",n({style:{fontWeight:"bold",fontSize:"16px",transition:"all 0.3s ease",transform:g?"scale(1.2)":"scale(1)",opacity:g?1:.9,paddingLeft:"0.25rem",paddingRight:"0.25rem"}},{children:g?"✓":"+"})),i("span",{children:r})]}))},h=function(h){var b=h.index,v=h.content,x=h.messages,w=h.handleStream,k=h.scrollToBottom,S=a([]),A=S[0],E=S[1],T=a(!1),C=T[0],W=T[1],L=a(!1),j=L[0],F=L[1],D=a([]),N=D[0],M=D[1],R=a(!1),z=R[0],O=R[1],B=a(!1),P=B[0],I=B[1],J=a({}),K=J[0],U=J[1],Y=a([]),Z=Y[0],H=Y[1],q=a([]),G=q[0],Q=q[1],V=a(v),X=V[0],$=V[1];s(function(){j||$(v)},[v,j]);var _=c(function(n,r){var i=Array.isArray(n)?n[0]:n;W(!0),E(function(n){return r?n.includes(i)?n:e(e([],n,!0),[i],!1):n.filter(function(e){return e!==i})})},[]),ee=c(function(n,r){var i=Array.isArray(n)?n[0]:n;O(!0),M(function(n){return r?n.includes(i)?n:e(e([],n,!0),[i],!1):n.filter(function(e){return e!==i})}),null==k||k()},[k]),ne=c(function(e,r,i){var t=Array.isArray(r)?r[0]:r;te[e]?(U(function(r){var o=n({},r);Object.keys(te).forEach(function(r){r!==e&&o[r]&&(o[r]=n(n({},o[r]),{selected:[],showSelected:!1}))});var l=o[e]||{selected:[],showSelected:!1,submitted:!1},a=i?[t]:[];return o[e]=n(n({},l),{selected:a,showSelected:a.length>0}),o}),null==k||k()):console.error("Configuration not found for tagType: ".concat(e))},[k]),re=c(function(e){return K[e]||{selected:[],showSelected:!1,submitted:!1}},[K]),ie=c(function(e,r){U(function(i){var t;return n(n({},i),((t={})[e]=n(n({},i[e]||{selected:[],showSelected:!1,submitted:!1}),r),t))})},[]),te={deletesimilarlearning:{group:"similarLearning",action:"delete",displayName:"Delete similar learning"},mergesimilarlearning:{group:"similarLearning",action:"merge",displayName:"Merge similar learning"},editsimilarlearning:{group:"similarLearning",action:"edit",displayName:"Edit similar learning"},deletesimilarlearnings:{group:"similarLearnings",action:"delete",displayName:"Delete similar learnings"},mergesimilarlearnings:{group:"similarLearnings",action:"merge",displayName:"Merge similar learnings"},editsimilarlearnings:{group:"similarLearnings",action:"edit",displayName:"Edit similar learnings"},deleteconflictinglearning:{group:"conflictingLearning",action:"delete",displayName:"Delete conflicting learning"},editconflictinglearning:{group:"conflictingLearning",action:"edit",displayName:"Edit conflicting learning"},deleteconflictinglearnings:{group:"conflictingLearnings",action:"delete",displayName:"Delete conflicting learnings"},editconflictinglearnings:{group:"conflictingLearnings",action:"edit",displayName:"Edit conflicting learnings"}},oe=c(function(e){var o=function(o){o.node;var l=r(o,["node"]),a=l.label||l.children||"Unknown label",s=Array.isArray(a)?a[0]:a,c=re(e),d=Object.keys(te).some(function(n){return n!==e&&re(n).submitted});return c.submitted?c.selected.includes(s)?t("span",n({style:{backgroundColor:"#E8F5E9",color:"#2E7D32",padding:"4px 8px",borderRadius:"4px",fontWeight:"500",display:"inline-block",margin:"2px"}},{children:["✓ ",a]})):null:d?null:i(y,{label:a,isSelected:c.selected.includes(s),onToggle:function(n,r){ne(e,n,r)}})};return o.isLearningTag=!0,o},[re,ne]),le=c(function(e){return Object.keys(te).some(function(e){return re(e).submitted})?l.Children.toArray(e).filter(function(e){if(!e||"object"!=typeof e)return!0;var n=function(e){return!!e&&(!(!e.type||!e.type.isLearningTag)||!(!e.props||!e.props.children)&&(Array.isArray(e.props.children)?e.props.children:[e.props.children]).some(function(e){return n(e)}))};if(!n(e)){var r=m(e).trim();return!(!r||0===r.length)}for(var i=function(n,r){var i=re(n);if(i.submitted&&i.selected.length>0){var t=m(e);return{value:i.selected.some(function(e){return t.includes(e)})}}},t=0,o=Object.entries(te);t<o.length;t++){var l=o[t],a=l[0];l[1];var s=i(a);if("object"==typeof s)return s.value}return!1}):l.Children.toArray(e)},[re]),ae=d(v);s(function(){ae.current!==v&&(U({}),ae.current=v)},[v]);var se=u(function(){return{img:function(e){e.node;var t=r(e,["node"]);return i("img",n({},t,{style:{height:"100%",width:"100%",objectFit:"contain"},alt:(null==t?void 0:t.alt)||"",className:"w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto"}))},p:function(e){e.node;var t=r(e,["node"]);return i("p",n({},t,{style:{maxWidth:"100%",wordWrap:"break-word",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"normal",overflow:"hidden",display:"block",fontSize:"1rem",lineHeight:"1.625rem",marginBottom:"1rem",marginTop:"10px"}},{children:null==t?void 0:t.children}))},code:function(e){e.node;var t=r(e,["node"]);return i("span",n({},t,{style:{maxWidth:"100%",wordWrap:"break-word",overflowWrap:"break-word",wordBreak:"break-word",whiteSpace:"normal",overflow:"hidden",display:"inline-flex",fontSize:"1rem",lineHeight:"1.625rem"}},{children:null==t?void 0:t.children}))},ol:function(e){e.node;var t=r(e,["node"]),o=le(null==t?void 0:t.children);return i("ol",n({},t,{style:{display:"flex",flexDirection:"column",gap:"1rem",listStyle:"decimal",paddingLeft:"2.5rem"}},{children:o}))},ul:function(e){e.node;var t=r(e,["node"]),o=le(null==t?void 0:t.children);return i("ul",n({},t,{style:{display:"flex",flexDirection:"column",gap:"1rem",listStyle:"decimal",paddingLeft:"2.5rem"}},{children:o}))},wta:function(e){e.node;var o=r(e,["node"]);o.key||o["data-key"];var l=o.label||o.children||"Unknown label",a=Array.isArray(l)?l[0]:l;return j?A.includes(a)?t("span",n({style:{backgroundColor:"#E8F5E9",color:"#2E7D32",padding:"4px 8px",borderRadius:"4px",fontWeight:"500",display:"inline-block",margin:"2px"}},{children:["✓ ",l]})):null:i(p,{label:l,onToggle:function(e,n){_(e,n)}})},editwta:function(e){e.node;var o=r(e,["node"]);o.key||o["data-key"];var l=o.label||o.children||"Unknown label",a=Array.isArray(l)?l[0]:l;return P?N.includes(a)?t("span",n({style:{backgroundColor:"#E8F5E9",color:"#2E7D32",padding:"4px 8px",borderRadius:"4px",fontWeight:"500",display:"inline-block",margin:"2px"}},{children:["✓ ",l]})):null:i(y,{label:l,onToggle:function(e,n){ee(e,n)}})},deletesimilarlearning:oe("deletesimilarlearning"),mergesimilarlearning:oe("mergesimilarlearning"),editsimilarlearning:oe("editsimilarlearning"),deletesimilarlearnings:oe("deletesimilarlearnings"),mergesimilarlearnings:oe("mergesimilarlearnings"),editsimilarlearnings:oe("editsimilarlearnings"),deleteconflictinglearning:oe("deleteconflictinglearning"),editconflictinglearning:oe("editconflictinglearning"),deleteconflictinglearnings:oe("deleteconflictinglearnings"),editconflictinglearnings:oe("editconflictinglearnings")}},[v,x,G,K,le,oe]);!function(e,n){s(function(){for(var r,i=0,t=(null===(r=e[e.length-1])||void 0===r?void 0:r.orchestratorAndAgentsMessages)||[];i<t.length;i++){for(var o=t[i],l=(null==o?void 0:o.responsedata)||"",a=/<wta>([\s\S]*?)<\/wta>/gi,s=[],c=void 0;null!==(c=a.exec(l));)console.log("match wta suggestion",c),s.push(c[1]);s.length&&n(s)}},[e,n])}(x,H);!function(e){s(function(){for(var n,r=0,i=(null===(n=e[e.length-1])||void 0===n?void 0:n.orchestratorAndAgentsMessages)||[];r<i.length;r++){for(var t=i[r],o=(null==t?void 0:t.responsedata)||"",l=/<editwta>([\s\S]*?)<\/editwta>/gi,a=[],s=void 0;null!==(s=l.exec(o));)console.log("match wta suggestion",s),a.push(s[1]);a.length&&Q(a)}},[e,Q])}(x);var ce=u(function(){if(!Array.isArray(A)||!Array.isArray(Z))return"";var e=A.map(function(e){return Z.indexOf(e)}).filter(function(e){return-1!==e}).map(function(e){return e+1});return e.join(" and ")},[A,Z]),de=u(function(){if(!Array.isArray(N)||!Array.isArray(G))return"";var e=N.map(function(e){var n;return null===(n=G.map(function(e){return null==e?void 0:e.replaceAll("**","")}))||void 0===n?void 0:n.indexOf(e)}).filter(function(e){return-1!==e}).map(function(e){return e+1});return e.join(" and ")},[N,G]);return t(o,{children:[i(g,n({components:se,rehypePlugins:[f]},{children:X}),b),i("div",n({style:{display:"flex",maxWidth:"100%"}},{children:i("div",n({style:{width:"100%"}},{children:(null==A?void 0:A.length)>0&&C?t("span",{children:["It looks like you've chosen ",A.length>1?"suggestions":"suggestion"," ",ce,". Would you like me to proceed with them?",i("p",{children:i("button",n({style:{padding:"0.5rem 1rem",margin:"1rem 0rem",backgroundColor:"#4CAF50",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",fontSize:"0.75rem",fontWeight:"500",boxShadow:"0 2px 5px rgba(0, 0, 0, 0.2)",transition:"background-color 0.3s",fontFamily:"Plus Jakarta Sans, sans-serif"},onClick:function(e){var n,r=A.map(function(e){return"<wta>".concat(e,"</wta>")}).join(" "),i=X.replace(/<wta>[\s\S]*?<\/wta>(?:\s*(?:or\s*)?<wta>[\s\S]*?<\/wta>)*/g,r);$(i),F(!0),W(!1),w(new KeyboardEvent("keydown",{key:"Enter"}),!1,"Add when to apply conditions ".concat(null===(n=A.join(" or "))||void 0===n?void 0:n.replace(/\b\d+[A-Z]?\.\s*/g,"")))}},{children:"Yes"}))})]}):i("span",{})}))})),i("div",n({style:{display:"flex",maxWidth:"100%"}},{children:i("div",n({style:{width:"100%"}},{children:(null==N?void 0:N.length)>0&&z?t("span",{children:["It looks like you've chosen ",N.length>1?"options":"option"," ",de,". Would you like me to proceed with them?",i("p",{children:i("button",n({style:{padding:"0.5rem 1rem",margin:"1rem 0rem",backgroundColor:"#4CAF50",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",fontSize:"0.75rem",fontWeight:"500",boxShadow:"0 2px 5px rgba(0, 0, 0, 0.2)",transition:"background-color 0.3s",fontFamily:"Plus Jakarta Sans, sans-serif"},onClick:function(e){var n;w(new KeyboardEvent("keydown",{key:"Enter"}),!1,"".concat(null===(n=N.join(" or "))||void 0===n?void 0:n.replace(/\b\d+[A-Z]?\.\s*/g,""))),O(!1),I(!0)}},{children:"Yes"}))})]}):i("span",{})}))})),function(){var e=Object.entries(K).filter(function(e){e[0];var n=e[1];return n.selected.length>0&&n.showSelected});if(0===e.length)return null;var r=e[0],o=r[0],l=r[1],a=te[o];return i("div",n({style:{display:"flex",maxWidth:"100%"}},{children:i("div",n({style:{width:"100%"}},{children:t("span",{children:["It looks like you've chosen ",l.selected.length>1?"options":"option"," for ",a.displayName,". Would you like me to proceed with them?",i("p",{children:i("button",n({style:{padding:"0.5rem 1rem",margin:"1rem 0rem",backgroundColor:"#4CAF50",color:"white",border:"none",borderRadius:"8px",cursor:"pointer",fontSize:"0.75rem",fontWeight:"500",boxShadow:"0 2px 5px rgba(0, 0, 0, 0.2)",transition:"background-color 0.3s",fontFamily:"Plus Jakarta Sans, sans-serif"},onClick:function(e){var n;w(new KeyboardEvent("keydown",{key:"Enter"}),!1,"".concat(null===(n=l.selected.join(" or "))||void 0===n?void 0:n.replace(/\b\d+[A-Z]?\.\s*/g,""))),ie(o,{showSelected:!1,submitted:!0})}},{children:"Yes"}))})]})}))}))}()]})};export{h as default};
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+const ToggleSelector = ({ label, onToggle }) => {
+  const [selected, setSelected] = useState(false);
+  const spanRef = useRef(null);
+  const handleChange = () => {
+    const newState = !selected;
+    console.log("newstate: ", newState);
+    setSelected(newState);
+    onToggle(label, newState);
+  };
+  useEffect(() => {
+    const el = spanRef.current;
+    if (el && selected) {
+      el.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.1)";
+      el.style.transform = "scale(1)";
+      el.style.backgroundColor = "#E8F5E9";
+      el.style.color = "#2E7D32";
+    }
+  }, [selected]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: spanRef,
+      onClick: handleChange,
+      style: {
+        cursor: "pointer",
+        backgroundColor: selected ? "#E8F5E9" : "#fff",
+        //fbfaff
+        color: selected ? "#2E7D32" : "#000000de",
+        transition: "all 0.2s ease-in-out",
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+        // default shadow
+        transform: "scale(1)"
+        // make sure it resets after hover
+      },
+      onMouseEnter: (e) => {
+        if (!selected) {
+          e.currentTarget.style.boxShadow = "0 4px 12px rgba(30, 136, 229, 0.3)";
+          e.currentTarget.style.transform = "scale(1.02)";
+          e.currentTarget.style.backgroundColor = "#f0f7ff";
+          e.currentTarget.style.color = "#1E88E5";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!selected) {
+          e.currentTarget.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.2)";
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.backgroundColor = "#fbfaff";
+          e.currentTarget.style.color = "#000000de";
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontWeight: "bold",
+              fontSize: "16px",
+              // color: selected ? '#2E7D32' : '#888',
+              transition: "all 0.3s ease",
+              transform: selected ? "scale(1.2)" : "scale(1)",
+              opacity: selected ? 1 : 0.9,
+              paddingLeft: "0.25rem",
+              paddingRight: "0.25rem"
+            },
+            children: selected ? "\u2713" : "+"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+};
+function extractTextFromChildren(children) {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join("");
+  }
+  if (typeof children === "object" && children !== null && "props" in children) {
+    return extractTextFromChildren(children.props.children);
+  }
+  return "";
+}
+const ToggleSelectorForEdit = ({ label, onToggle, isSelected = false }) => {
+  const [selected, setSelected] = useState(isSelected);
+  const spanRef = useRef(null);
+  useEffect(() => {
+    setSelected(isSelected);
+  }, [isSelected]);
+  const handleChange = () => {
+    const newState = !selected;
+    console.log("newstate: ", newState);
+    setSelected(newState);
+    onToggle(extractTextFromChildren(label), newState);
+  };
+  useEffect(() => {
+    const el = spanRef.current;
+    if (el && selected) {
+      el.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.1)";
+      el.style.transform = "scale(1)";
+      el.style.backgroundColor = "#E8F5E9";
+      el.style.color = "#2E7D32";
+    }
+  }, [selected]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: spanRef,
+      onClick: handleChange,
+      style: {
+        cursor: "pointer",
+        backgroundColor: selected ? "#E8F5E9" : "#fff",
+        //fbfaff
+        color: selected ? "#2E7D32" : "#000000de",
+        transition: "all 0.2s ease-in-out",
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+        // default shadow
+        transform: "scale(1)"
+        // make sure it resets after hover
+      },
+      onMouseEnter: (e) => {
+        if (!selected) {
+          e.currentTarget.style.boxShadow = "0 4px 12px rgba(30, 136, 229, 0.3)";
+          e.currentTarget.style.transform = "scale(1.02)";
+          e.currentTarget.style.backgroundColor = "#f0f7ff";
+          e.currentTarget.style.color = "#1E88E5";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!selected) {
+          e.currentTarget.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.2)";
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.backgroundColor = "#fbfaff";
+          e.currentTarget.style.color = "#000000de";
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontWeight: "bold",
+              fontSize: "16px",
+              // color: selected ? '#2E7D32' : '#888',
+              transition: "all 0.3s ease",
+              transform: selected ? "scale(1.2)" : "scale(1)",
+              opacity: selected ? 1 : 0.9,
+              paddingLeft: "0.25rem",
+              paddingRight: "0.25rem"
+            },
+            children: selected ? "\u2713" : "+"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+};
+const MessageRendering = ({ index, content, messages, handleStream, scrollToBottom }) => {
+  const [selectedWTA, setSelectedWTA] = useState([]);
+  const [showSelectedWTA, setShowSelectedWTA] = useState(false);
+  const [wtaSubmitted, setWtaSubmitted] = useState(false);
+  const [selectedEditWTA, setSelectedEditWTA] = useState([]);
+  const [showSelectedEditWTA, setShowSelectedEditWTA] = useState(false);
+  const [editWtaSubmitted, setEditWtaSubmitted] = useState(false);
+  const [newLearningTagsState, setNewLearningTagsState] = useState({});
+  const [suggestedWta, setSuggestedWta] = useState([]);
+  const [suggestedEditWta, setSuggestedEditWta] = useState([]);
+  const [currentContent, setCurrentContent] = useState(content);
+  useEffect(() => {
+    if (!wtaSubmitted) {
+      setCurrentContent(content);
+    }
+  }, [content, wtaSubmitted]);
+  const addWhenToApplyCondition = useCallback((text, isToggleOn) => {
+    const cleanText = Array.isArray(text) ? text[0] : text;
+    setShowSelectedWTA(true);
+    setSelectedWTA((prev) => {
+      if (isToggleOn) {
+        return prev.includes(cleanText) ? prev : [...prev, cleanText];
+      } else {
+        return prev.filter((item) => item !== cleanText);
+      }
+    });
+  }, []);
+  const editWhenToApplyCondition = useCallback((text, isToggleOn) => {
+    const cleanText = Array.isArray(text) ? text[0] : text;
+    setShowSelectedEditWTA(true);
+    setSelectedEditWTA((prev) => {
+      if (isToggleOn) {
+        return prev.includes(cleanText) ? prev : [...prev, cleanText];
+      } else {
+        return prev.filter((item) => item !== cleanText);
+      }
+    });
+    scrollToBottom == null ? void 0 : scrollToBottom();
+  }, [scrollToBottom]);
+  const handleNewLearningTag = useCallback((tagType, text, isToggleOn) => {
+    const cleanText = Array.isArray(text) ? text[0] : text;
+    const currentTagConfig = newLearningTagConfig[tagType];
+    if (!currentTagConfig) {
+      console.error(`Configuration not found for tagType: ${tagType}`);
+      return;
+    }
+    setNewLearningTagsState((prev) => {
+      const newState = { ...prev };
+      Object.keys(newLearningTagConfig).forEach((key) => {
+        if (key !== tagType) {
+          if (newState[key]) {
+            newState[key] = { ...newState[key], selected: [], showSelected: false };
+          }
+        }
+      });
+      const currentState = newState[tagType] || { selected: [], showSelected: false, submitted: false };
+      const newSelected = isToggleOn ? [cleanText] : [];
+      newState[tagType] = {
+        ...currentState,
+        selected: newSelected,
+        showSelected: newSelected.length > 0
+      };
+      return newState;
+    });
+    scrollToBottom == null ? void 0 : scrollToBottom();
+  }, [scrollToBottom]);
+  const getNewLearningTagState = useCallback((tagType) => {
+    return newLearningTagsState[tagType] || { selected: [], showSelected: false, submitted: false };
+  }, [newLearningTagsState]);
+  const updateNewLearningTagState = useCallback((tagType, updates) => {
+    setNewLearningTagsState((prev) => ({
+      ...prev,
+      [tagType]: {
+        ...prev[tagType] || { selected: [], showSelected: false, submitted: false },
+        ...updates
+      }
+    }));
+  }, []);
+  const newLearningTagConfig = {
+    "deletesimilarlearning": { group: "similarLearning", action: "delete", displayName: "Delete similar learning" },
+    "mergesimilarlearning": { group: "similarLearning", action: "merge", displayName: "Merge similar learning" },
+    "editsimilarlearning": { group: "similarLearning", action: "edit", displayName: "Edit similar learning" },
+    "deletesimilarlearnings": { group: "similarLearnings", action: "delete", displayName: "Delete similar learnings" },
+    "mergesimilarlearnings": { group: "similarLearnings", action: "merge", displayName: "Merge similar learnings" },
+    "editsimilarlearnings": { group: "similarLearnings", action: "edit", displayName: "Edit similar learnings" },
+    "deleteconflictinglearning": { group: "conflictingLearning", action: "delete", displayName: "Delete conflicting learning" },
+    "editconflictinglearning": { group: "conflictingLearning", action: "edit", displayName: "Edit conflicting learning" },
+    "deleteconflictinglearnings": { group: "conflictingLearnings", action: "delete", displayName: "Delete conflicting learnings" },
+    "editconflictinglearnings": { group: "conflictingLearnings", action: "edit", displayName: "Edit conflicting learnings" }
+  };
+  const createNewLearningTagComponent = useCallback((tagType) => {
+    const LearningTag = ({ node, ...props }) => {
+      const label = props.label || props.children || "Unknown label";
+      const cleanLabel = Array.isArray(label) ? label[0] : label;
+      const tagState = getNewLearningTagState(tagType);
+      const hasAnyOtherSubmitted = Object.keys(newLearningTagConfig).some(
+        (otherTag) => otherTag !== tagType && getNewLearningTagState(otherTag).submitted
+      );
+      if (tagState.submitted) {
+        if (tagState.selected.includes(cleanLabel)) {
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                backgroundColor: "#E8F5E9",
+                color: "#2E7D32",
+                padding: "4px 8px",
+                borderRadius: "4px",
+                fontWeight: "500",
+                display: "inline-block",
+                margin: "2px"
+              },
+              children: [
+                "\u2713 ",
+                label
+              ]
+            }
+          );
+        }
+        return null;
+      }
+      if (hasAnyOtherSubmitted) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        ToggleSelectorForEdit,
+        {
+          label,
+          isSelected: tagState.selected.includes(cleanLabel),
+          onToggle: (text, isToggleOn) => {
+            handleNewLearningTag(tagType, text, isToggleOn);
+          }
+        }
+      );
+    };
+    LearningTag.isLearningTag = true;
+    return LearningTag;
+  }, [getNewLearningTagState, handleNewLearningTag]);
+  const filterListItemsWithHiddenTags = useCallback((children) => {
+    const hasAnySubmitted = Object.keys(newLearningTagConfig).some(
+      (tagType) => getNewLearningTagState(tagType).submitted
+    );
+    if (!hasAnySubmitted) {
+      return React__default.Children.toArray(children);
+    }
+    return React__default.Children.toArray(children).filter((child) => {
+      if (!child || typeof child !== "object") return true;
+      const containsLearningTag = (node) => {
+        if (!node) return false;
+        if (node.type && node.type.isLearningTag) {
+          return true;
+        }
+        if (node.props && node.props.children) {
+          const children2 = Array.isArray(node.props.children) ? node.props.children : [node.props.children];
+          return children2.some((grandchild) => containsLearningTag(grandchild));
+        }
+        return false;
+      };
+      const hasLearningTag = containsLearningTag(child);
+      if (!hasLearningTag) {
+        const childText = extractTextFromChildren(child).trim();
+        if (!childText || childText.length === 0) {
+          return false;
+        }
+        return true;
+      }
+      for (const [tagType, config] of Object.entries(newLearningTagConfig)) {
+        const tagState = getNewLearningTagState(tagType);
+        if (tagState.submitted && tagState.selected.length > 0) {
+          const childText = extractTextFromChildren(child);
+          const hasSelectedOption = tagState.selected.some(
+            (selected) => childText.includes(selected)
+          );
+          return hasSelectedOption;
+        }
+      }
+      return false;
+    });
+  }, [getNewLearningTagState]);
+  const prevContentRef = useRef(content);
+  useEffect(() => {
+    if (prevContentRef.current !== content) {
+      setNewLearningTagsState({});
+      prevContentRef.current = content;
+    }
+  }, [content]);
+  const markdownComponents = useMemo(() => ({
+    img: ({ node, ...props }) => /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        style: {
+          height: "100%",
+          width: "100%",
+          objectFit: "contain"
+          // To handle aspect ratio
+        },
+        alt: (props == null ? void 0 : props.alt) || "",
+        className: "w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto"
+      }
+    ),
+    p: ({ node, ...props }) => {
+      return /* @__PURE__ */ jsx(
+        "p",
+        {
+          ...props,
+          style: {
+            maxWidth: "100%",
+            wordWrap: "break-word",
+            // Ensures long words wrap
+            overflowWrap: "break-word",
+            // Alternative for word wrapping
+            wordBreak: "break-word",
+            // Force breaking long unbreakable strings
+            whiteSpace: "normal",
+            // Default wrapping behavior
+            overflow: "hidden",
+            // Hides any unexpected overflow
+            display: "block",
+            // Ensures proper behavior of p tags
+            fontSize: "1rem",
+            // Equivalent to Tailwind 'text-base'
+            lineHeight: "1.625rem",
+            // Equivalent to Tailwind 'leading-relaxed'
+            marginBottom: "1rem",
+            // Equivalent to Tailwind 'mb-4'
+            marginTop: "10px"
+          },
+          children: props == null ? void 0 : props.children
+        }
+      );
+    },
+    code: ({ node, ...props }) => {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...props,
+          style: {
+            maxWidth: "100%",
+            wordWrap: "break-word",
+            // Ensures long words wrap
+            overflowWrap: "break-word",
+            // Alternative for word wrapping
+            wordBreak: "break-word",
+            // Force breaking long unbreakable strings
+            whiteSpace: "normal",
+            // Default wrapping behavior
+            overflow: "hidden",
+            // Hides any unexpected overflow
+            display: "inline-flex",
+            // Ensures proper behavior of p tags
+            fontSize: "1rem",
+            // Equivalent to Tailwind 'text-base'
+            lineHeight: "1.625rem"
+            // Equivalent to Tailwind 'leading-relaxed'
+          },
+          children: props == null ? void 0 : props.children
+        }
+      );
+    },
+    ol: ({ node, ...props }) => {
+      const filteredChildren = filterListItemsWithHiddenTags(props == null ? void 0 : props.children);
+      return /* @__PURE__ */ jsx(
+        "ol",
+        {
+          ...props,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            listStyle: "decimal",
+            paddingLeft: "2.5rem"
+          },
+          children: filteredChildren
+        }
+      );
+    },
+    ul: ({ node, ...props }) => {
+      const filteredChildren = filterListItemsWithHiddenTags(props == null ? void 0 : props.children);
+      return /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ...props,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            listStyle: "decimal",
+            paddingLeft: "2.5rem"
+          },
+          children: filteredChildren
+        }
+      );
+    },
+    wta: ({ node, ...props }) => {
+      props.key || props["data-key"];
+      const label = props.label || props.children || "Unknown label";
+      const cleanLabel = Array.isArray(label) ? label[0] : label;
+      if (wtaSubmitted) {
+        if (selectedWTA.includes(cleanLabel)) {
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                backgroundColor: "#E8F5E9",
+                color: "#2E7D32",
+                padding: "4px 8px",
+                borderRadius: "4px",
+                fontWeight: "500",
+                display: "inline-block",
+                margin: "2px"
+              },
+              children: [
+                "\u2713 ",
+                label
+              ]
+            }
+          );
+        }
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        ToggleSelector,
+        {
+          label,
+          onToggle: (text, isToggleOn) => {
+            addWhenToApplyCondition(text, isToggleOn);
+          }
+        }
+      );
+    },
+    editwta: ({ node, ...props }) => {
+      props.key || props["data-key"];
+      const label = props.label || props.children || "Unknown label";
+      const cleanLabel = Array.isArray(label) ? label[0] : label;
+      if (editWtaSubmitted) {
+        if (selectedEditWTA.includes(cleanLabel)) {
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                backgroundColor: "#E8F5E9",
+                color: "#2E7D32",
+                padding: "4px 8px",
+                borderRadius: "4px",
+                fontWeight: "500",
+                display: "inline-block",
+                margin: "2px"
+              },
+              children: [
+                "\u2713 ",
+                label
+              ]
+            }
+          );
+        }
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        ToggleSelectorForEdit,
+        {
+          label,
+          onToggle: (text, isToggleOn) => {
+            editWhenToApplyCondition(text, isToggleOn);
+          }
+        }
+      );
+    },
+    // New learning tags components - using generic factory
+    deletesimilarlearning: createNewLearningTagComponent("deletesimilarlearning"),
+    mergesimilarlearning: createNewLearningTagComponent("mergesimilarlearning"),
+    editsimilarlearning: createNewLearningTagComponent("editsimilarlearning"),
+    deletesimilarlearnings: createNewLearningTagComponent("deletesimilarlearnings"),
+    mergesimilarlearnings: createNewLearningTagComponent("mergesimilarlearnings"),
+    editsimilarlearnings: createNewLearningTagComponent("editsimilarlearnings"),
+    deleteconflictinglearning: createNewLearningTagComponent("deleteconflictinglearning"),
+    editconflictinglearning: createNewLearningTagComponent("editconflictinglearning"),
+    deleteconflictinglearnings: createNewLearningTagComponent("deleteconflictinglearnings"),
+    editconflictinglearnings: createNewLearningTagComponent("editconflictinglearnings")
+  }), [content, messages, suggestedEditWta, newLearningTagsState, filterListItemsWithHiddenTags, createNewLearningTagComponent]);
+  const useParsedWtaSuggestions = (messages2, setSuggestedWta2) => {
+    useEffect(() => {
+      var _a;
+      const orchestratorAndAgentsMessages = ((_a = messages2[messages2.length - 1]) == null ? void 0 : _a.orchestratorAndAgentsMessages) || [];
+      for (const msg of orchestratorAndAgentsMessages) {
+        const responseData = (msg == null ? void 0 : msg.responsedata) || "";
+        const regex = /<wta>([\s\S]*?)<\/wta>/gi;
+        const matches = [];
+        let match;
+        while ((match = regex.exec(responseData)) !== null) {
+          console.log("match wta suggestion", match);
+          matches.push(match[1]);
+        }
+        if (matches.length) {
+          setSuggestedWta2(matches);
+        }
+      }
+    }, [messages2, setSuggestedWta2]);
+  };
+  useParsedWtaSuggestions(messages, setSuggestedWta);
+  const useParsedEditWtaSuggestions = (messages2, setSuggestedWta2) => {
+    useEffect(() => {
+      var _a;
+      const orchestratorAndAgentsMessages = ((_a = messages2[messages2.length - 1]) == null ? void 0 : _a.orchestratorAndAgentsMessages) || [];
+      for (const msg of orchestratorAndAgentsMessages) {
+        const responseData = (msg == null ? void 0 : msg.responsedata) || "";
+        const regex = /<editwta>([\s\S]*?)<\/editwta>/gi;
+        const matches = [];
+        let match;
+        while ((match = regex.exec(responseData)) !== null) {
+          console.log("match wta suggestion", match);
+          matches.push(match[1]);
+        }
+        if (matches.length) {
+          setSuggestedEditWta(matches);
+        }
+      }
+    }, [messages2, setSuggestedEditWta]);
+  };
+  useParsedEditWtaSuggestions(messages);
+  const selectedIndices = useMemo(() => {
+    if (!Array.isArray(selectedWTA) || !Array.isArray(suggestedWta)) return "";
+    const indices = selectedWTA.map((wta) => {
+      const index2 = suggestedWta.indexOf(wta);
+      return index2;
+    }).filter((index2) => index2 !== -1).map((index2) => index2 + 1);
+    return indices.join(" and ");
+  }, [selectedWTA, suggestedWta]);
+  const selectedEditIndices = useMemo(() => {
+    if (!Array.isArray(selectedEditWTA) || !Array.isArray(suggestedEditWta)) return "";
+    const indices = selectedEditWTA.map((wta) => {
+      var _a;
+      const index2 = (_a = suggestedEditWta.map((ewta) => ewta == null ? void 0 : ewta.replaceAll("**", ""))) == null ? void 0 : _a.indexOf(wta);
+      return index2;
+    }).filter((index2) => index2 !== -1).map((index2) => index2 + 1);
+    return indices.join(" and ");
+  }, [selectedEditWTA, suggestedEditWta]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ReactMarkdown, { components: markdownComponents, rehypePlugins: [rehypeRaw], children: currentContent }, index),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", maxWidth: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: (selectedWTA == null ? void 0 : selectedWTA.length) > 0 && showSelectedWTA ? /* @__PURE__ */ jsxs("span", { children: [
+      "It looks like you've chosen ",
+      selectedWTA.length > 1 ? "suggestions" : "suggestion",
+      " ",
+      selectedIndices,
+      ". Would you like me to proceed with them?",
+      /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("button", { style: {
+        padding: "0.5rem 1rem",
+        margin: "1rem 0rem",
+        backgroundColor: "#4CAF50",
+        color: "white",
+        border: "none",
+        borderRadius: "8px",
+        cursor: "pointer",
+        fontSize: "0.75rem",
+        fontWeight: "500",
+        boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+        transition: "background-color 0.3s",
+        fontFamily: "Plus Jakarta Sans, sans-serif"
+      }, onClick: (e) => {
+        var _a;
+        const newWtaString = selectedWTA.map((label) => `<wta>${label}</wta>`).join(" ");
+        const wtaBlockRegex = /<wta>[\s\S]*?<\/wta>(?:\s*(?:or\s*)?<wta>[\s\S]*?<\/wta>)*/g;
+        const updatedContent = currentContent.replace(wtaBlockRegex, newWtaString);
+        setCurrentContent(updatedContent);
+        setWtaSubmitted(true);
+        setShowSelectedWTA(false);
+        handleStream(new KeyboardEvent("keydown", { key: "Enter" }), false, `Add when to apply conditions ${(_a = selectedWTA.join(" or ")) == null ? void 0 : _a.replace(/\b\d+[A-Z]?\.\s*/g, "")}`);
+      }, children: "Yes" }) })
+    ] }) : /* @__PURE__ */ jsx("span", {}) }) }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", maxWidth: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: (selectedEditWTA == null ? void 0 : selectedEditWTA.length) > 0 && showSelectedEditWTA ? /* @__PURE__ */ jsxs("span", { children: [
+      "It looks like you've chosen ",
+      selectedEditWTA.length > 1 ? "options" : "option",
+      " ",
+      selectedEditIndices,
+      ". Would you like me to proceed with them?",
+      /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("button", { style: {
+        padding: "0.5rem 1rem",
+        margin: "1rem 0rem",
+        backgroundColor: "#4CAF50",
+        color: "white",
+        border: "none",
+        borderRadius: "8px",
+        cursor: "pointer",
+        fontSize: "0.75rem",
+        fontWeight: "500",
+        boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+        transition: "background-color 0.3s",
+        fontFamily: "Plus Jakarta Sans, sans-serif"
+      }, onClick: (e) => {
+        var _a;
+        handleStream(new KeyboardEvent("keydown", { key: "Enter" }), false, `${(_a = selectedEditWTA.join(" or ")) == null ? void 0 : _a.replace(/\b\d+[A-Z]?\.\s*/g, "")}`);
+        setShowSelectedEditWTA(false);
+        setEditWtaSubmitted(true);
+      }, children: "Yes" }) })
+    ] }) : /* @__PURE__ */ jsx("span", {}) }) }),
+    (() => {
+      const activeTags = Object.entries(newLearningTagsState).filter(
+        ([tagType2, tagState2]) => tagState2.selected.length > 0 && tagState2.showSelected
+      );
+      if (activeTags.length === 0) return null;
+      const [tagType, tagState] = activeTags[0];
+      const config = newLearningTagConfig[tagType];
+      return /* @__PURE__ */ jsx("div", { style: { display: "flex", maxWidth: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs("span", { children: [
+        "It looks like you've chosen ",
+        tagState.selected.length > 1 ? "options" : "option",
+        " for ",
+        config.displayName,
+        ". Would you like me to proceed with them?",
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("button", { style: {
+          padding: "0.5rem 1rem",
+          margin: "1rem 0rem",
+          backgroundColor: "#4CAF50",
+          color: "white",
+          border: "none",
+          borderRadius: "8px",
+          cursor: "pointer",
+          fontSize: "0.75rem",
+          fontWeight: "500",
+          boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+          transition: "background-color 0.3s",
+          fontFamily: "Plus Jakarta Sans, sans-serif"
+        }, onClick: (e) => {
+          var _a;
+          handleStream(new KeyboardEvent("keydown", { key: "Enter" }), false, `${(_a = tagState.selected.join(" or ")) == null ? void 0 : _a.replace(/\b\d+[A-Z]?\.\s*/g, "")}`);
+          updateNewLearningTagState(tagType, { showSelected: false, submitted: true });
+        }, children: "Yes" }) })
+      ] }) }) });
+    })()
+  ] });
+};
+var MessageRendering$1 = MessageRendering;
+
+export { MessageRendering$1 as default };
 //# sourceMappingURL=MessageRendering.js.map