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

package/dist/cjs/features/IL-OTJ/_components/MessageRendering/ClickableChatComponents.js

@@ -1,2 +1,617 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("react/jsx-runtime"),n=require("react"),i=require("../../helpers/utils.js"),o=require("../_svg/TickIcon.js"),t=require("../ChatComponents/ChatComponent.js"),a=require("../_svg/SparkleIcon.js"),s=require("lucide-react"),l=function(n){var i=n.label,o=n.onToggle,t=n.isSelected,a=n.disabled;return r.jsxs("div",e.__assign({style:{display:"inline-flex",alignItems:"center",cursor:a?"not-allowed":"pointer",margin:"8px 24px 8px 0",userSelect:"none",fontFamily:"Plus Jakarta Sans, sans-serif",fontSize:"14px",color:a?"var(--il-disabled, #9ca3af)":"var(--il-foreground, #000000de)",verticalAlign:"middle",opacity:a&&!t?.6:1},onClick:function(){return!a&&o(i,!t)}},{children:[r.jsx("div",e.__assign({style:{width:"18px",height:"18px",borderRadius:"4px",border:t?"none":"2px solid ".concat(a?"var(--il-disabled, #e5e7eb)":"var(--il-border, #cfd8dc)"),backgroundColor:t?a?"var(--il-disabled, #90caf9)":"var(--il-primary, #2661eb)":"transparent",display:"flex",alignItems:"center",justifyContent:"center",marginRight:"8px",transition:"all 0.2s ease",color:"var(--il-primary-fg, white)",flexShrink:0}},{children:t&&r.jsx("svg",e.__assign({width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:r.jsx("path",{d:"M10 3L4.5 8.5L2 6",stroke:"var(--il-primary-fg, white)",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}))})),r.jsx("span",{children:i})]}))};exports.ActionableButton=function(l){var d,c=l.node,u=l.className,g=l.children,p=l.handleStream,f=l.onAction,b=l.disabled,v=l.isStreamEnd,x=void 0===v||v,h=l.style;l.isLastMessage;var y=l.onTypeResponseClick,m=e.__rest(l,["node","className","children","handleStream","onAction","disabled","isStreamEnd","style","isLastMessage","onTypeResponseClick"]),_=i.extractTextFromChildren(g),k=n.useState(!1),C=k[0],j=k[1],w=n.useState(!1),F=w[0],T=w[1],S=n.useState(null),R=S[0],E=S[1],z=n.useState(!1),A=z[0],G=z[1],L=n.useState(""),W=L[0],M=L[1],I="typeYourAnswer"===((null===(d=null==c?void 0:c.properties)||void 0===d?void 0:d.id)||m.id)||"type your response"===_.toLowerCase().trim(),P=m["data-selected"],B="true"===P,D="true"===P||"false"===P,N=m["data-value"],q=n.useState(!1),J=q[0],H=q[1],K=B||I&&J;if(!1===x&&!b&&!D&&!I)return null;var U={padding:"0.3rem 0.8rem",borderRadius:"4px",fontSize:"0.9rem",fontWeight:"500",fontFamily:"Plus Jakarta Sans, sans-serif",display:"flex",alignItems:"center",gap:"6px",cursor:"pointer",transition:"all 0.2s ease",border:"1px solid"},O={display:"inline-block",width:"12px",height:"12px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite",flexShrink:0};if("clickable-button"===u){var Y=(null==m?void 0:m.isTesterGenie)&&(C||null!==R),$=b||D&&!B||Y,Q={background:(null==m?void 0:m.isTesterGenie)?"linear-gradient(135deg, #e0eaff, #ede9fe, #dbeafe, #e0eaff)":"var(--il-surface, #fff)",color:(null==m?void 0:m.isTesterGenie)?"var(--il-primary, #6d28d9)":"var(--il-foreground, #272727ff)",borderColor:(null==m?void 0:m.isTesterGenie)?"var(--il-primary, rgba(139, 92, 246, 0.35))":"var(--il-border, #272727ff)",cursor:"pointer",opacity:1};return D||I?Q=K?{background:"color-mix(in srgb, var(--il-success, #16a34a) 14%, transparent)",color:"var(--il-success, #047857)",borderColor:"var(--il-success, #55a78fff)",cursor:I?"pointer":"default",opacity:1}:{background:"var(--il-secondary-bg, #f3f4f6)",color:"var(--il-disabled, #64676A)",borderColor:"var(--il-border, #a8a8a8ff)",cursor:"default",opacity:.6}:(b||Y)&&(Q={background:"var(--il-secondary-bg, #f3f4f6)",color:"var(--il-disabled, #64676A)",borderColor:"var(--il-border, #C0C0C2)",cursor:"not-allowed",opacity:1}),r.jsxs(r.Fragment,{children:[r.jsx("style",{children:"\n                        @keyframes spin { to { transform: rotate(360deg); } }\n                        @keyframes tgShimmer {\n                            0%, 100% { background-position: 0% 50%; }\n                            50%       { background-position: 100% 50%; }\n                        }\n                    "}),r.jsx("button",e.__assign({className:u,onClick:function(r){return e.__awaiter(void 0,void 0,void 0,function(){var n,i,o,a;return e.__generator(this,function(e){switch(e.label){case 0:return r.preventDefault(),I?(H(!0),y&&y(),[2]):$?[2]:(n=N||_,f?(f(n),[3,8]):[3,1]);case 1:if(!(null==m?void 0:m.isTesterGenie))return[3,7];e.label=2;case 2:return e.trys.push([2,4,5,6]),j(!0),[4,t.autoGeneratePrompt(m.baseURL)];case 3:return i=e.sent(),E((null===(a=null==i?void 0:i.result)||void 0===a?void 0:a.Answer)||""),[3,6];case 4:return o=e.sent(),console.error("Error in TesterGenie click:",o),[3,6];case 5:return j(!1),[7];case 6:return[3,8];case 7:p(new KeyboardEvent("keydown",{key:"Enter"}),!1,n,j),e.label=8;case 8:return[2]}})})},disabled:$,style:(null==m?void 0:m.isTesterGenie)?e.__assign(e.__assign({padding:"0.3rem 0.8rem",margin:"10px 8px 8px 0",background:Q.background,backgroundSize:(null==m?void 0:m.isTesterGenie)?"250% 250%":void 0,animation:(null==m?void 0:m.isTesterGenie)&&!$?"tgShimmer 6s ease infinite":void 0,color:Q.color,border:"1.5px solid ".concat(Q.borderColor),borderRadius:"6px",cursor:Q.cursor,fontSize:"0.9rem",fontWeight:"500",transition:"color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease",fontFamily:"Plus Jakarta Sans, sans-serif",display:"flex",alignItems:"center",gap:"3px",pointerEvents:$?"none":"auto",opacity:Q.opacity,boxShadow:(null==m?void 0:m.isTesterGenie)?"0 1px 4px rgba(124, 58, 237, 0.1)":"none"},h),{marginLeft:"8px",width:"fit-content"}):e.__assign({display:"flex",alignItems:"center",padding:"5px 8px",background:K?"var(--il-hover, #EFF4FF)":"transparent",border:"1px solid ".concat(K?"var(--il-primary, #B2CCFF)":"transparent"),borderRadius:"6px",cursor:$?"not-allowed":"pointer",textAlign:"left",fontFamily:"Plus Jakarta Sans, sans-serif",opacity:$?.6:1},h),onMouseEnter:function(e){$||(null==m?void 0:m.isTesterGenie)||K||(e.currentTarget.style.background="var(--il-hover, #EFF4FF)",e.currentTarget.style.borderColor="var(--il-primary, #B2CCFF)")},onMouseLeave:function(e){$||(null==m?void 0:m.isTesterGenie)||K||(e.currentTarget.style.background="transparent",e.currentTarget.style.borderColor="transparent")}},m,{children:C&&(null==m?void 0:m.isTesterGenie)&&null===R?r.jsxs("span",e.__assign({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:[r.jsx("span",{style:O}),"Finding an interesting usecase to test..."]})):r.jsx(r.Fragment,{children:(null==m?void 0:m.isTesterGenie)?g:r.jsxs("div",e.__assign({style:{display:"flex",alignItems:"center",width:"100%"}},{children:[r.jsx("div",e.__assign({style:{width:"28px",height:"28px",borderRadius:"50%",border:K?"1px solid var(--il-border, #D0D5DD)":"1px solid var(--il-primary, #B2CCFF)",display:"flex",alignItems:"center",justifyContent:"center",marginRight:"12px",backgroundColor:K?"var(--il-hover, #D1E0FF)":"var(--il-surface, #fff)",flexShrink:0}},{children:r.jsx(s.ArrowRight,{color:K?"var(--il-primary, #004EEB)":"var(--il-muted, #667085)",size:20})})),r.jsx("span",e.__assign({style:{fontSize:"14px",color:"var(--il-foreground, #344054)",fontFamily:"Inter",fontWeight:"500"}},{children:g}))]}))})})),(null==m?void 0:m.isTesterGenie)&&null!==R&&r.jsxs("div",e.__assign({style:{marginTop:"6px",borderRadius:"8px",border:"1px solid var(--il-border, #e5e7eb)",background:"var(--il-surface, #f9fafb)",color:"var(--il-foreground, #111827)",padding:"14px 16px",maxWidth:"520px",fontFamily:"Plus Jakarta Sans, sans-serif"},onWheel:function(e){return e.stopPropagation()}},{children:[r.jsxs("p",e.__assign({style:{margin:"0 0 4px 0",fontSize:"1rem",color:"var(--il-foreground, #111827)"}},{children:[r.jsx("span",e.__assign({style:{height:"1.2em",width:"1.2em",marginRight:"4px"}},{children:r.jsx(a.default,{})})),"Your prompt is ready!"]})),r.jsx("p",e.__assign({style:{margin:"14px 0 14px 0",fontSize:"0.95rem",fontWeight:"600",color:"var(--il-foreground, #111827)",whiteSpace:"pre-wrap"}},{children:R})),r.jsx("p",e.__assign({style:{margin:"0 0 4px 0",fontSize:"1rem",color:"var(--il-foreground, #111827)",lineHeight:"1.55"}},{children:"Would you like to proceed with this prompt, or generate a new one?"})),r.jsxs("div",e.__assign({style:{display:"flex",gap:"6px",flexWrap:"wrap"}},{children:[r.jsxs("button",e.__assign({disabled:F||C,style:e.__assign(e.__assign({},U),{background:"linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))",color:"#5b21b6",borderColor:"#7c3aed",opacity:F||C?.6:1,cursor:F||C?"not-allowed":"pointer"}),onMouseEnter:function(e){F||C||(e.currentTarget.style.background="linear-gradient(to right, rgb(221, 214, 254), rgb(196, 181, 253))")},onMouseLeave:function(e){F||C||(e.currentTarget.style.background="linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))")},onClick:function(){p(new KeyboardEvent("keydown",{key:"Enter"}),!1,R,j),E(null),G(!1),M("")}},{children:[r.jsx(o.TickIcon,{color:"#5b21b6"})," Proceed"]})),r.jsx("button",e.__assign({disabled:F||C,style:e.__assign(e.__assign({},U),{background:F?"var(--il-secondary-bg, #f3f4f6)":"var(--il-surface, #fff)",color:F?"var(--il-disabled, #64676A)":"var(--il-foreground, #272727)",borderColor:"var(--il-border, #272727)",cursor:F||C?"not-allowed":"pointer",opacity:F||C?.7:1}),onMouseEnter:function(e){F||C||(e.currentTarget.style.background="linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))",e.currentTarget.style.borderColor="#7c3aed",e.currentTarget.style.color="#5b21b6")},onMouseLeave:function(e){F||C||(e.currentTarget.style.background="var(--il-surface, #fff)",e.currentTarget.style.borderColor="var(--il-border, #272727)",e.currentTarget.style.color="var(--il-foreground, #272727)")},onClick:function(){return e.__awaiter(void 0,void 0,void 0,function(){var r,n,i;return e.__generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,3,4]),T(!0),[4,t.autoGeneratePrompt(m.baseUrl,W||void 0)];case 1:return r=e.sent(),E((null===(i=null==r?void 0:r.result)||void 0===i?void 0:i.Answer)||""),[3,4];case 2:return n=e.sent(),console.error("Error regenerating prompt:",n),[3,4];case 3:return T(!1),[7];case 4:return[2]}})})}},{children:F?r.jsxs(r.Fragment,{children:[r.jsx("span",{style:O})," Regenerating..."]}):r.jsxs(r.Fragment,{children:[r.jsxs("svg",e.__assign({width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round",strokeLinejoin:"round",style:{flexShrink:0}},{children:[r.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),r.jsx("path",{d:"M3 3v5h5"})]})),"Regenerate"]})})),r.jsx("button",e.__assign({disabled:F||C,style:e.__assign(e.__assign({},U),{background:"var(--il-surface, #fff)",color:A?"var(--il-primary, #5b21b6)":"var(--il-muted, #64676A)",borderColor:A?"var(--il-primary, #7c3aed)":"var(--il-border, #C0C0C2)",cursor:F||C?"not-allowed":"pointer",opacity:F||C?.6:1}),onMouseEnter:function(e){F||C||(e.currentTarget.style.borderColor="var(--il-primary, #7c3aed)",e.currentTarget.style.color="var(--il-primary, #5b21b6)")},onMouseLeave:function(e){F||C||A||(e.currentTarget.style.borderColor="var(--il-border, #C0C0C2)",e.currentTarget.style.color="var(--il-muted, #64676A)")},onClick:function(){return G(function(e){return!e})}},{children:A?"✕    Hide Inputs":" Give Inputs"}))]})),A&&r.jsxs("div",e.__assign({style:{marginTop:"12px",paddingTop:"12px",borderTop:"1px solid var(--il-border, #e5e7eb)"}},{children:[r.jsx("p",e.__assign({style:{margin:"0 0 6px 0",fontSize:"1rem",color:"var(--il-muted, #6b7280)"}},{children:"Help us generate better prompt (optional)"})),r.jsx("textarea",{placeholder:"e.g. Provide usecases for seperation rules",value:W,onChange:function(e){return M(e.target.value)},rows:3,onKeyDown:function(e){e.stopPropagation()},onWheel:function(e){e.stopPropagation()},style:{width:"100%",minWidth:"420px",maxWidth:"100%",padding:"10px 12px",borderRadius:"6px",border:"1px solid var(--il-input-border, #d1d5db)",fontSize:"0.9rem",fontFamily:"Plus Jakarta Sans, sans-serif",color:"var(--il-input-fg, #111827)",background:"var(--il-input-bg, #fff)",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:"1.5",transition:"border-color 0.2s ease"},onFocus:function(e){e.currentTarget.style.borderColor="var(--il-focus, #7c3aed)"},onBlur:function(e){e.currentTarget.style.borderColor="var(--il-input-border, #d1d5db)"}}),r.jsxs("div",e.__assign({style:{display:"flex",gap:"8px",marginTop:"8px"}},{children:[r.jsx("button",e.__assign({disabled:C||!W.trim(),style:e.__assign(e.__assign({},U),{background:C||!W.trim()?"var(--il-secondary-bg, #f3f4f6)":"linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))",color:C||!W.trim()?"var(--il-disabled, #64676A)":"var(--il-primary, #5b21b6)",borderColor:C||!W.trim()?"var(--il-border, #C0C0C2)":"var(--il-primary, #7c3aed)",cursor:C||!W.trim()?"not-allowed":"pointer",opacity:C||!W.trim()?.7:1}),onMouseEnter:function(e){!C&&W.trim()&&(e.currentTarget.style.background="linear-gradient(to right, rgb(221, 214, 254), rgb(196, 181, 253))")},onMouseLeave:function(e){!C&&W.trim()&&(e.currentTarget.style.background="linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))")},onClick:function(){return e.__awaiter(void 0,void 0,void 0,function(){var r,n,i;return e.__generator(this,function(e){switch(e.label){case 0:return e.trys.push([0,2,3,4]),j(!0),[4,t.autoGeneratePrompt(m.baseUrl,W)];case 1:return r=e.sent(),E((null===(i=null==r?void 0:r.result)||void 0===i?void 0:i.Answer)||""),G(!1),[3,4];case 2:return n=e.sent(),console.error("Error generating with direction:",n),[3,4];case 3:return j(!1),[7];case 4:return[2]}})})}},{children:C?r.jsxs(r.Fragment,{children:[r.jsx("span",{style:O})," Generating..."]}):r.jsx(r.Fragment,{children:"✦ Generate"})})),r.jsx("button",e.__assign({disabled:C,style:e.__assign(e.__assign({},U),{background:"var(--il-surface, #fff)",color:"var(--il-muted, #64676A)",borderColor:"var(--il-border, #C0C0C2)",cursor:C?"not-allowed":"pointer",opacity:C?.5:1}),onMouseEnter:function(e){C||(e.currentTarget.style.borderColor="var(--il-border, #272727)",e.currentTarget.style.color="var(--il-foreground, #272727)")},onMouseLeave:function(e){C||(e.currentTarget.style.borderColor="var(--il-border, #C0C0C2)",e.currentTarget.style.color="var(--il-muted, #64676A)")},onClick:function(){return M("")}},{children:"Clear"}))]}))]}))]}))]})}return r.jsx("button",e.__assign({className:u},m,{children:g}))},exports.ActionableCheckbox=function(n){n.node;var o=n.className,t=n.children,a=n.selectedItems,s=n.onToggle,d=n.isSubmitted,c=n.disabled;e.__rest(n,["node","className","children","selectedItems","onToggle","isSubmitted","disabled"]);var u=i.extractTextFromChildren(t),g=u.trim();return"clickable-box"===o?d?a.includes(g)?r.jsxs("div",e.__assign({style:{display:"inline-flex",alignItems:"center",margin:"4px 24px 4px 0",color:"#2661eb",fontWeight:600,fontFamily:"Plus Jakarta Sans, sans-serif"}},{children:[r.jsx("span",e.__assign({style:{marginRight:"6px",fontSize:"16px"}},{children:"✓"}))," ",u]})):null:r.jsx(l,{label:u,isSelected:a.includes(g),onToggle:s,disabled:c}):r.jsx("span",e.__assign({className:o},{children:t}))},exports.CheckboxSelector=l,exports.RuleDisplay=function(n){var i=n.content,o=function(e){var r=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),n=new RegExp("<".concat(r,">([\\s\\S]*?)<\\/").concat(r,">"),"i"),o=i.match(n);return o?o[1].trim():"*No ".concat(e," tag found.*")},t=o("reasoning_new"),a=o("proposed_rule"),s=o("wta_new"),l=o("wnta_new");return r.jsxs("div",e.__assign({style:{padding:"16px 16px",maxWidth:"100%",border:"1px solid var(--il-primary, #A78BFA)",borderRadius:"8px",backgroundColor:"var(--il-primary-subtle, #F6F4FF)"}},{children:[r.jsx("div",e.__assign({style:{color:"var(--il-secondary-fg, #4B5563)",fontSize:"1rem",lineHeight:"1.5rem",marginBottom:"1rem",fontFamily:"inherit",maxWidth:"90%"}},{children:t})),r.jsxs("div",e.__assign({style:{border:"1px solid var(--il-border, #ddd)",borderRadius:"8px",padding:"16px",backgroundColor:"var(--il-surface, #FFFFFF)",color:"var(--il-foreground, #19213D)",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.05)"}},{children:[r.jsxs("div",e.__assign({style:{paddingLeft:"12px",marginBottom:"12px",fontFamily:"inherit"}},{children:[r.jsx("div",e.__assign({style:{fontSize:"14px",fontWeight:"400",color:"var(--il-muted, #666F8D)",fontFamily:"inherit"}},{children:"Proposed Rule"})),r.jsx("div",e.__assign({style:{fontSize:"0.95rem",color:"var(--il-foreground, #374151)",fontFamily:"inherit"}},{children:a}))]})),r.jsxs("div",e.__assign({style:{marginBottom:"12px",paddingLeft:"12px",fontFamily:"inherit"}},{children:[r.jsx("div",e.__assign({style:{fontSize:"14px",fontWeight:"400",color:"var(--il-muted, #666F8D)",fontFamily:"inherit"}},{children:"When to apply"})),r.jsx("div",e.__assign({style:{fontSize:"0.9rem",color:"var(--il-foreground, #374151)",fontFamily:"inherit"}},{children:s}))]})),r.jsxs("div",e.__assign({style:{paddingLeft:"12px",fontFamily:"inherit"}},{children:[r.jsx("div",e.__assign({style:{fontSize:"14px",fontWeight:"400",color:"var(--il-muted, #666F8D)",fontFamily:"inherit"}},{children:"When NOT to apply"})),r.jsx("div",e.__assign({style:{fontSize:"0.9rem",color:"var(--il-foreground, #374151)",fontFamily:"inherit"}},{children:l}))]}))]}))]}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var TickIcon = require('../_svg/TickIcon.js');
+var ChatComponent = require('../ChatComponents/ChatComponent.js');
+var SparkleIcon = require('../_svg/SparkleIcon.js');
+var lucideReact = require('lucide-react');
+var utils = require('../../helpers/utils.js');
+
+const RuleDisplay = ({ content }) => {
+  const extractTagContent = (tagName) => {
+    const escapedTitle = tagName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`<${escapedTitle}>([\\s\\S]*?)<\\/${escapedTitle}>`, "i");
+    const match = content.match(regex);
+    return match ? match[1].trim() : `*No ${tagName} tag found.*`;
+  };
+  const reasoning = extractTagContent("reasoning_new");
+  const proposedRule = extractTagContent("proposed_rule");
+  const whenToApply = extractTagContent("wta_new");
+  const whenNotToApply = extractTagContent("wnta_new");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 16px", maxWidth: "100%", border: "1px solid var(--il-primary, #A78BFA)", borderRadius: "8px", backgroundColor: "var(--il-primary-subtle, #F6F4FF)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--il-secondary-fg, #4B5563)", fontSize: "1rem", lineHeight: "1.5rem", marginBottom: "1rem", fontFamily: "inherit", maxWidth: "90%" }, children: reasoning }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: "1px solid var(--il-border, #ddd)", borderRadius: "8px", padding: "16px", backgroundColor: "var(--il-surface, #FFFFFF)", color: "var(--il-foreground, #19213D)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.05)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "12px", marginBottom: "12px", fontFamily: "inherit" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", fontWeight: "400", color: "var(--il-muted, #666F8D)", fontFamily: "inherit" }, children: "Proposed Rule" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.95rem", color: "var(--il-foreground, #374151)", fontFamily: "inherit" }, children: proposedRule })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "12px", paddingLeft: "12px", fontFamily: "inherit" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", fontWeight: "400", color: "var(--il-muted, #666F8D)", fontFamily: "inherit" }, children: "When to apply" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.9rem", color: "var(--il-foreground, #374151)", fontFamily: "inherit" }, children: whenToApply })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "12px", fontFamily: "inherit" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", fontWeight: "400", color: "var(--il-muted, #666F8D)", fontFamily: "inherit" }, children: "When NOT to apply" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.9rem", color: "var(--il-foreground, #374151)", fontFamily: "inherit" }, children: whenNotToApply })
+      ] })
+    ] })
+  ] });
+};
+const CheckboxSelector = ({ label, onToggle, isSelected, disabled }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        margin: "8px 24px 8px 0",
+        userSelect: "none",
+        fontFamily: "Plus Jakarta Sans, sans-serif",
+        fontSize: "14px",
+        color: disabled ? "var(--il-disabled, #9ca3af)" : "var(--il-foreground, #000000de)",
+        verticalAlign: "middle",
+        opacity: disabled && !isSelected ? 0.6 : 1
+      },
+      onClick: () => !disabled && onToggle(label, !isSelected),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          width: "18px",
+          height: "18px",
+          borderRadius: "4px",
+          border: isSelected ? "none" : `2px solid ${disabled ? "var(--il-disabled, #e5e7eb)" : "var(--il-border, #cfd8dc)"}`,
+          backgroundColor: isSelected ? disabled ? "var(--il-disabled, #90caf9)" : "var(--il-primary, #2661eb)" : "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: "8px",
+          transition: "all 0.2s ease",
+          color: "var(--il-primary-fg, white)",
+          flexShrink: 0
+        }, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3L4.5 8.5L2 6", stroke: "var(--il-primary-fg, white)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+      ]
+    }
+  );
+};
+const ActionableButton = ({ node, className, children, handleStream, onAction, disabled, isStreamEnd = true, style, isLastMessage, onTypeResponseClick, ...props }) => {
+  var _a;
+  const label = utils.extractTextFromChildren(children);
+  const [isGenerating, setIsGenerating] = React.useState(false);
+  const [isRegenerating, setIsRegenerating] = React.useState(false);
+  const [generatedPrompt, setGeneratedPrompt] = React.useState(null);
+  const [showInputField, setShowInputField] = React.useState(false);
+  const [promptDirection, setPromptDirection] = React.useState("");
+  const idAttr = ((_a = node == null ? void 0 : node.properties) == null ? void 0 : _a.id) || props.id;
+  const isTypeResponse = idAttr === "typeYourAnswer" || label.toLowerCase().trim() === "type your response";
+  const dataSelected = props["data-selected"];
+  const isSelected = dataSelected === "true";
+  const hasSelectionState = dataSelected === "true" || dataSelected === "false";
+  const hiddenValue = props["data-value"];
+  const [isTypeResponseClicked, setIsTypeResponseClicked] = React.useState(false);
+  const isSelectedVisual = isSelected || isTypeResponse && isTypeResponseClicked;
+  if (isStreamEnd === false && !disabled && !hasSelectionState && !isTypeResponse) {
+    return null;
+  }
+  const actionBtnBase = {
+    padding: "0.3rem 0.8rem",
+    borderRadius: "4px",
+    fontSize: "0.9rem",
+    fontWeight: "500",
+    fontFamily: "Plus Jakarta Sans, sans-serif",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    border: "1px solid"
+  };
+  const spinnerStyle = {
+    display: "inline-block",
+    width: "12px",
+    height: "12px",
+    border: "2px solid currentColor",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    animation: "spin 0.6s linear infinite",
+    flexShrink: 0
+  };
+  switch (className) {
+    case "clickable-button": {
+      const isTesterGenieDisabled = (props == null ? void 0 : props.isTesterGenie) && (isGenerating || generatedPrompt !== null);
+      const isEffectivelyDisabled = disabled || hasSelectionState && !isSelected || isTesterGenieDisabled;
+      let buttonStyle = {
+        background: (props == null ? void 0 : props.isTesterGenie) ? "linear-gradient(135deg, #e0eaff, #ede9fe, #dbeafe, #e0eaff)" : "var(--il-surface, #fff)",
+        color: (props == null ? void 0 : props.isTesterGenie) ? "var(--il-primary, #6d28d9)" : "var(--il-foreground, #272727ff)",
+        borderColor: (props == null ? void 0 : props.isTesterGenie) ? "var(--il-primary, rgba(139, 92, 246, 0.35))" : "var(--il-border, #272727ff)",
+        cursor: "pointer",
+        opacity: 1
+      };
+      if (hasSelectionState || isTypeResponse) {
+        if (isSelectedVisual) {
+          buttonStyle = {
+            background: "color-mix(in srgb, var(--il-success, #16a34a) 14%, transparent)",
+            color: "var(--il-success, #047857)",
+            borderColor: "var(--il-success, #55a78fff)",
+            cursor: isTypeResponse ? "pointer" : "default",
+            opacity: 1
+          };
+        } else {
+          buttonStyle = {
+            background: "var(--il-secondary-bg, #f3f4f6)",
+            color: "var(--il-disabled, #64676A)",
+            borderColor: "var(--il-border, #a8a8a8ff)",
+            cursor: "default",
+            opacity: 0.6
+          };
+        }
+      } else if (disabled || isTesterGenieDisabled) {
+        buttonStyle = {
+          background: "var(--il-secondary-bg, #f3f4f6)",
+          color: "var(--il-disabled, #64676A)",
+          borderColor: "var(--il-border, #C0C0C2)",
+          cursor: "not-allowed",
+          opacity: 1
+        };
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+                        @keyframes spin { to { transform: rotate(360deg); } }
+                        @keyframes tgShimmer {
+                            0%, 100% { background-position: 0% 50%; }
+                            50%       { background-position: 100% 50%; }
+                        }
+                    ` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className,
+            onClick: async (e) => {
+              var _a2;
+              e.preventDefault();
+              if (isTypeResponse) {
+                setIsTypeResponseClicked(true);
+                if (onTypeResponseClick) onTypeResponseClick();
+                return;
+              }
+              if (isEffectivelyDisabled) return;
+              const messageToSend = hiddenValue || label;
+              if (onAction) {
+                onAction(messageToSend);
+              } else if (props == null ? void 0 : props.isTesterGenie) {
+                try {
+                  setIsGenerating(true);
+                  const result = await ChatComponent.autoGeneratePrompt(props.baseURL);
+                  setGeneratedPrompt(((_a2 = result == null ? void 0 : result.result) == null ? void 0 : _a2.Answer) || "");
+                } catch (error) {
+                  console.error("Error in TesterGenie click:", error);
+                } finally {
+                  setIsGenerating(false);
+                }
+              } else {
+                handleStream(
+                  new KeyboardEvent("keydown", { key: "Enter" }),
+                  false,
+                  messageToSend,
+                  setIsGenerating
+                );
+              }
+            },
+            disabled: isEffectivelyDisabled,
+            style: (props == null ? void 0 : props.isTesterGenie) ? {
+              // ... Keep existing tester genie styles ...
+              padding: "0.3rem 0.8rem",
+              margin: "10px 8px 8px 0",
+              background: buttonStyle.background,
+              backgroundSize: (props == null ? void 0 : props.isTesterGenie) ? "250% 250%" : void 0,
+              animation: (props == null ? void 0 : props.isTesterGenie) && !isEffectivelyDisabled ? "tgShimmer 6s ease infinite" : void 0,
+              color: buttonStyle.color,
+              border: `1.5px solid ${buttonStyle.borderColor}`,
+              borderRadius: "6px",
+              cursor: buttonStyle.cursor,
+              fontSize: "0.9rem",
+              fontWeight: "500",
+              transition: "color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease",
+              fontFamily: "Plus Jakarta Sans, sans-serif",
+              display: "flex",
+              alignItems: "center",
+              gap: "3px",
+              pointerEvents: isEffectivelyDisabled ? "none" : "auto",
+              opacity: buttonStyle.opacity,
+              boxShadow: (props == null ? void 0 : props.isTesterGenie) ? "0 1px 4px rgba(124, 58, 237, 0.1)" : "none",
+              ...style,
+              marginLeft: "8px",
+              width: "fit-content"
+            } : {
+              display: "flex",
+              alignItems: "center",
+              padding: "5px 8px",
+              // Use isSelectedVisual
+              background: isSelectedVisual ? "var(--il-hover, #EFF4FF)" : "transparent",
+              border: `1px solid ${isSelectedVisual ? "var(--il-primary, #B2CCFF)" : "transparent"}`,
+              borderRadius: "6px",
+              cursor: isEffectivelyDisabled ? "not-allowed" : "pointer",
+              textAlign: "left",
+              fontFamily: "Plus Jakarta Sans, sans-serif",
+              opacity: isEffectivelyDisabled ? 0.6 : 1,
+              ...style
+            },
+            onMouseEnter: (e) => {
+              if (!isEffectivelyDisabled) {
+                if (props == null ? void 0 : props.isTesterGenie) ; else if (!isSelectedVisual) {
+                  e.currentTarget.style.background = "var(--il-hover, #EFF4FF)";
+                  e.currentTarget.style.borderColor = "var(--il-primary, #B2CCFF)";
+                }
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!isEffectivelyDisabled) {
+                if (props == null ? void 0 : props.isTesterGenie) ; else if (!isSelectedVisual) {
+                  e.currentTarget.style.background = "transparent";
+                  e.currentTarget.style.borderColor = "transparent";
+                }
+              }
+            },
+            ...props,
+            children: isGenerating && (props == null ? void 0 : props.isTesterGenie) && generatedPrompt === null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: spinnerStyle }),
+              "Finding an interesting usecase to test..."
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (props == null ? void 0 : props.isTesterGenie) ? children : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", width: "100%" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                width: "28px",
+                height: "28px",
+                borderRadius: "50%",
+                border: isSelectedVisual ? "1px solid var(--il-border, #D0D5DD)" : "1px solid var(--il-primary, #B2CCFF)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "12px",
+                backgroundColor: isSelectedVisual ? "var(--il-hover, #D1E0FF)" : "var(--il-surface, #fff)",
+                flexShrink: 0
+              }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { color: isSelectedVisual ? "var(--il-primary, #004EEB)" : "var(--il-muted, #667085)", size: 20 }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                fontSize: "14px",
+                color: "var(--il-foreground, #344054)",
+                fontFamily: "Inter",
+                fontWeight: "500"
+              }, children })
+            ] }) })
+          }
+        ),
+        (props == null ? void 0 : props.isTesterGenie) && generatedPrompt !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "6px",
+              borderRadius: "8px",
+              border: "1px solid var(--il-border, #e5e7eb)",
+              background: "var(--il-surface, #f9fafb)",
+              color: "var(--il-foreground, #111827)",
+              padding: "14px 16px",
+              maxWidth: "520px",
+              fontFamily: "Plus Jakarta Sans, sans-serif"
+            },
+            onWheel: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
+                margin: "0 0 4px 0",
+                fontSize: "1rem",
+                color: "var(--il-foreground, #111827)"
+              }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { height: "1.2em", width: "1.2em", marginRight: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx(SparkleIcon["default"], {}) }),
+                "Your prompt is ready!"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                margin: "14px 0 14px 0",
+                fontSize: "0.95rem",
+                fontWeight: "600",
+                color: "var(--il-foreground, #111827)",
+                whiteSpace: "pre-wrap"
+              }, children: generatedPrompt }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                margin: "0 0 4px 0",
+                fontSize: "1rem",
+                color: "var(--il-foreground, #111827)",
+                lineHeight: "1.55"
+              }, children: "Would you like to proceed with this prompt, or generate a new one?" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    disabled: isRegenerating || isGenerating,
+                    style: {
+                      ...actionBtnBase,
+                      background: "linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))",
+                      color: "#5b21b6",
+                      borderColor: "#7c3aed",
+                      opacity: isRegenerating || isGenerating ? 0.6 : 1,
+                      cursor: isRegenerating || isGenerating ? "not-allowed" : "pointer"
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isRegenerating && !isGenerating)
+                        e.currentTarget.style.background = "linear-gradient(to right, rgb(221, 214, 254), rgb(196, 181, 253))";
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isRegenerating && !isGenerating)
+                        e.currentTarget.style.background = "linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))";
+                    },
+                    onClick: () => {
+                      handleStream(
+                        new KeyboardEvent("keydown", { key: "Enter" }),
+                        false,
+                        generatedPrompt,
+                        setIsGenerating
+                      );
+                      setGeneratedPrompt(null);
+                      setShowInputField(false);
+                      setPromptDirection("");
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(TickIcon.TickIcon, { color: "#5b21b6" }),
+                      " Proceed"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    disabled: isRegenerating || isGenerating,
+                    style: {
+                      ...actionBtnBase,
+                      background: isRegenerating ? "var(--il-secondary-bg, #f3f4f6)" : "var(--il-surface, #fff)",
+                      color: isRegenerating ? "var(--il-disabled, #64676A)" : "var(--il-foreground, #272727)",
+                      borderColor: "var(--il-border, #272727)",
+                      cursor: isRegenerating || isGenerating ? "not-allowed" : "pointer",
+                      opacity: isRegenerating || isGenerating ? 0.7 : 1
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isRegenerating && !isGenerating) {
+                        e.currentTarget.style.background = "linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))";
+                        e.currentTarget.style.borderColor = "#7c3aed";
+                        e.currentTarget.style.color = "#5b21b6";
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isRegenerating && !isGenerating) {
+                        e.currentTarget.style.background = "var(--il-surface, #fff)";
+                        e.currentTarget.style.borderColor = "var(--il-border, #272727)";
+                        e.currentTarget.style.color = "var(--il-foreground, #272727)";
+                      }
+                    },
+                    onClick: async () => {
+                      var _a2;
+                      try {
+                        setIsRegenerating(true);
+                        const result = await ChatComponent.autoGeneratePrompt(props.baseUrl, promptDirection || void 0);
+                        setGeneratedPrompt(((_a2 = result == null ? void 0 : result.result) == null ? void 0 : _a2.Answer) || "");
+                      } catch (error) {
+                        console.error("Error regenerating prompt:", error);
+                      } finally {
+                        setIsRegenerating(false);
+                      }
+                    },
+                    children: isRegenerating ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: spinnerStyle }),
+                      " Regenerating..."
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2.2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          style: { flexShrink: 0 },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
+                          ]
+                        }
+                      ),
+                      "Regenerate"
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    disabled: isRegenerating || isGenerating,
+                    style: {
+                      ...actionBtnBase,
+                      background: "var(--il-surface, #fff)",
+                      color: showInputField ? "var(--il-primary, #5b21b6)" : "var(--il-muted, #64676A)",
+                      borderColor: showInputField ? "var(--il-primary, #7c3aed)" : "var(--il-border, #C0C0C2)",
+                      cursor: isRegenerating || isGenerating ? "not-allowed" : "pointer",
+                      opacity: isRegenerating || isGenerating ? 0.6 : 1
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isRegenerating && !isGenerating) {
+                        e.currentTarget.style.borderColor = "var(--il-primary, #7c3aed)";
+                        e.currentTarget.style.color = "var(--il-primary, #5b21b6)";
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isRegenerating && !isGenerating && !showInputField) {
+                        e.currentTarget.style.borderColor = "var(--il-border, #C0C0C2)";
+                        e.currentTarget.style.color = "var(--il-muted, #64676A)";
+                      }
+                    },
+                    onClick: () => setShowInputField((prev) => !prev),
+                    children: showInputField ? "\u2715    Hide Inputs" : " Give Inputs"
+                  }
+                )
+              ] }),
+              showInputField && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+                marginTop: "12px",
+                paddingTop: "12px",
+                borderTop: "1px solid var(--il-border, #e5e7eb)"
+              }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                  margin: "0 0 6px 0",
+                  fontSize: "1rem",
+                  color: "var(--il-muted, #6b7280)"
+                }, children: "Help us generate better prompt (optional)" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    placeholder: "e.g. Provide usecases for seperation rules",
+                    value: promptDirection,
+                    onChange: (e) => setPromptDirection(e.target.value),
+                    rows: 3,
+                    onKeyDown: (e) => {
+                      e.stopPropagation();
+                    },
+                    onWheel: (e) => {
+                      e.stopPropagation();
+                    },
+                    style: {
+                      width: "100%",
+                      minWidth: "420px",
+                      maxWidth: "100%",
+                      padding: "10px 12px",
+                      borderRadius: "6px",
+                      border: "1px solid var(--il-input-border, #d1d5db)",
+                      fontSize: "0.9rem",
+                      fontFamily: "Plus Jakarta Sans, sans-serif",
+                      color: "var(--il-input-fg, #111827)",
+                      background: "var(--il-input-bg, #fff)",
+                      resize: "vertical",
+                      outline: "none",
+                      boxSizing: "border-box",
+                      lineHeight: "1.5",
+                      transition: "border-color 0.2s ease"
+                    },
+                    onFocus: (e) => {
+                      e.currentTarget.style.borderColor = "var(--il-focus, #7c3aed)";
+                    },
+                    onBlur: (e) => {
+                      e.currentTarget.style.borderColor = "var(--il-input-border, #d1d5db)";
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      disabled: isGenerating || !promptDirection.trim(),
+                      style: {
+                        ...actionBtnBase,
+                        background: isGenerating || !promptDirection.trim() ? "var(--il-secondary-bg, #f3f4f6)" : "linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))",
+                        color: isGenerating || !promptDirection.trim() ? "var(--il-disabled, #64676A)" : "var(--il-primary, #5b21b6)",
+                        borderColor: isGenerating || !promptDirection.trim() ? "var(--il-border, #C0C0C2)" : "var(--il-primary, #7c3aed)",
+                        cursor: isGenerating || !promptDirection.trim() ? "not-allowed" : "pointer",
+                        opacity: isGenerating || !promptDirection.trim() ? 0.7 : 1
+                      },
+                      onMouseEnter: (e) => {
+                        if (!isGenerating && promptDirection.trim())
+                          e.currentTarget.style.background = "linear-gradient(to right, rgb(221, 214, 254), rgb(196, 181, 253))";
+                      },
+                      onMouseLeave: (e) => {
+                        if (!isGenerating && promptDirection.trim())
+                          e.currentTarget.style.background = "linear-gradient(to right, rgb(237, 233, 254), rgb(221, 214, 254))";
+                      },
+                      onClick: async () => {
+                        var _a2;
+                        try {
+                          setIsGenerating(true);
+                          const result = await ChatComponent.autoGeneratePrompt(props.baseUrl, promptDirection);
+                          setGeneratedPrompt(((_a2 = result == null ? void 0 : result.result) == null ? void 0 : _a2.Answer) || "");
+                          setShowInputField(false);
+                        } catch (error) {
+                          console.error("Error generating with direction:", error);
+                        } finally {
+                          setIsGenerating(false);
+                        }
+                      },
+                      children: isGenerating ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: spinnerStyle }),
+                        " Generating..."
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2726 Generate" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      disabled: isGenerating,
+                      style: {
+                        ...actionBtnBase,
+                        background: "var(--il-surface, #fff)",
+                        color: "var(--il-muted, #64676A)",
+                        borderColor: "var(--il-border, #C0C0C2)",
+                        cursor: isGenerating ? "not-allowed" : "pointer",
+                        opacity: isGenerating ? 0.5 : 1
+                      },
+                      onMouseEnter: (e) => {
+                        if (!isGenerating) {
+                          e.currentTarget.style.borderColor = "var(--il-border, #272727)";
+                          e.currentTarget.style.color = "var(--il-foreground, #272727)";
+                        }
+                      },
+                      onMouseLeave: (e) => {
+                        if (!isGenerating) {
+                          e.currentTarget.style.borderColor = "var(--il-border, #C0C0C2)";
+                          e.currentTarget.style.color = "var(--il-muted, #64676A)";
+                        }
+                      },
+                      onClick: () => setPromptDirection(""),
+                      children: "Clear"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      ] });
+    }
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("button", { className, ...props, children });
+  }
+};
+const ActionableCheckbox = ({ node, className, children, selectedItems, onToggle, isSubmitted, disabled, ...props }) => {
+  const label = utils.extractTextFromChildren(children);
+  const cleanLabel = label.trim();
+  switch (className) {
+    case "clickable-box":
+      if (isSubmitted) {
+        if (selectedItems.includes(cleanLabel)) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+            display: "inline-flex",
+            alignItems: "center",
+            margin: "4px 24px 4px 0",
+            color: "#2661eb",
+            fontWeight: 600,
+            fontFamily: "Plus Jakarta Sans, sans-serif"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: "6px", fontSize: "16px" }, children: "\u2713" }),
+            " ",
+            label
+          ] });
+        }
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CheckboxSelector,
+        {
+          label,
+          isSelected: selectedItems.includes(cleanLabel),
+          onToggle,
+          disabled
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children });
+  }
+};
+
+exports.ActionableButton = ActionableButton;
+exports.ActionableCheckbox = ActionableCheckbox;
+exports.CheckboxSelector = CheckboxSelector;
+exports.RuleDisplay = RuleDisplay;
 //# sourceMappingURL=ClickableChatComponents.js.map