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

package/dist/cjs/features/InstantLearning/_components/GeneralizationAccordion.js

@@ -1,2 +1,554 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("react/jsx-runtime"),i=require("react"),a=require("@mui/material"),t=require("@mui/icons-material/Edit"),s=require("@mui/icons-material/Undo"),r=require("@mui/icons-material/Add"),o=require("@mui/icons-material/Cancel"),l=require("lucide-react");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(t),x=d(s),c=d(r),g=d(o);exports.default=function(t){var s=t.title,r=t.description,o=t.tags,d=t.appliedTags;t.hoveredWord;var p=t.isLoading,f=t.onApply,_=t.onUndo,h=t.onEditSave,m=t.onAddSave,y=t.setHoveredText,j=t.setHoveredTag,v=i.useState(!1),b=v[0],k=v[1],B=i.useState(!1),S=B[0],C=B[1],T=i.useState({index:null,originalKey:"",originalValue:"",editedKey:"",editedValue:""}),z=T[0],A=T[1],F=i.useState({key:"",value:""}),W=F[0],I=F[1],P=i.useState(""),M=P[0],w=P[1],J=i.useState(""),K=J[0],V=J[1],q=function(){if(null!==z.index)if(z.editedKey.trim()&&z.editedValue.trim()){var e=z.editedValue.trim();e.startsWith("<")&&e.endsWith(">")||(e="<".concat(e.replace(/[<>]/g,""),">"));var n=h(z.originalKey,z.editedKey,e);n.success?(A({index:null,originalKey:"",originalValue:"",editedKey:"",editedValue:""}),V("")):V(n.error||"An unknown error occurred.")}else V("Both fields are required.")},E=function(){A({index:null,originalKey:"",originalValue:"",editedKey:"",editedValue:""}),V("")},R=Object.entries(o).filter(function(e){var n=e[0];return!d.some(function(e){return e.original.toLowerCase()===n.toLowerCase()})}),L={p:"8px 12px",borderRadius:"8px",background:"#f1f5ff",textAlign:"center",fontFamily:"Plus Jakarta Sans",fontSize:"0.875rem",minHeight:"38px",display:"flex",alignItems:"center",justifyContent:"center",wordBreak:"break-word",border:"none",boxShadow:"none",cursor:"pointer","&:hover":{background:"#e4ebf9"}},D=e.__assign(e.__assign({},L),{color:"#5928ed",fontWeight:600}),H={p:"8px",borderRadius:"8px",background:"#f1f5ff",minHeight:"48px",display:"flex",alignItems:"center",justifyContent:"center",flex:1,"& .MuiOutlinedInput-root":{height:"100%",width:"95%",borderRadius:"8px",background:"white",fontFamily:"Plus Jakarta Sans",fontSize:"0.875rem",fontWeight:"normal",color:"text.primary",p:"8px 8px","& fieldset":{borderColor:"#5928ed"},"&.Mui-focused fieldset":{borderColor:"#5928ed",borderWidth:"1px"},"& input":{textAlign:"center",p:"0",height:"100%",boxSizing:"border-box"}},"&.value-pill .MuiOutlinedInput-root":{"& input":{color:"#5928ed",fontWeight:600}}},O={color:"#5928ed",textTransform:"none",fontFamily:"Plus Jakarta Sans",fontWeight:600,padding:"6px 8px",minWidth:"auto"};return n.jsxs(a.Accordion,e.__assign({expanded:b,onChange:function(e,n){return k(n)},sx:{backgroundColor:"#f7f9fe",border:"1px solid #adacd4",borderRadius:"8px",boxShadow:"none","&:before":{display:"none"}}},{children:[n.jsxs(a.AccordionSummary,e.__assign({expandIcon:n.jsx(l.ChevronDown,{size:20}),sx:{gap:1.5,"& .MuiAccordionSummary-content":{margin:"12px 0"}}},{children:[n.jsx(a.Box,e.__assign({sx:{marginRight:1.5}},{children:n.jsx(l.Sparkles,{size:24,color:"#5928ed"})})),n.jsxs(a.Box,{children:[n.jsx(a.Typography,e.__assign({sx:{fontWeight:600,fontFamily:"Plus Jakarta Sans"}},{children:s})),n.jsx(a.Typography,e.__assign({variant:"body2",sx:{color:"text.secondary",fontFamily:"Plus Jakarta Sans"}},{children:r}))]})]})),n.jsx(a.AccordionDetails,e.__assign({sx:{borderTop:"1px solid #adacd4",p:2,display:"flex",flexDirection:"column",gap:2}},{children:p?n.jsx(a.Box,e.__assign({sx:{display:"flex",justifyContent:"center",my:2}},{children:n.jsx(a.CircularProgress,{size:24})})):n.jsxs(n.Fragment,{children:[" ",n.jsxs(a.Box,e.__assign({sx:{border:"1px dashed #adacd4",borderRadius:"8px",p:2}},{children:[n.jsx(a.Typography,e.__assign({variant:"subtitle1",sx:{fontWeight:600,mb:1.5,fontFamily:"Plus Jakarta Sans",color:"#5928ed"}},{children:"Generalize"})),R.length>0?n.jsx(a.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:1.5}},{children:R.map(function(i,t){var s=i[0],r=i[1],o=z.index===t;return n.jsxs(a.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:1.5,flexWrap:"wrap"}},{children:[n.jsxs(a.Box,e.__assign({sx:{flex:1,display:"grid",gridTemplateColumns:"1fr auto 1fr",alignItems:"center",gap:1.5}},{children:[o?n.jsx(a.TextField,{size:"small",value:z.editedKey,onChange:function(n){A(function(i){return e.__assign(e.__assign({},i),{editedKey:n.target.value})}),V("")},sx:H,variant:"outlined"}):n.jsx(a.Box,e.__assign({sx:L,onMouseEnter:function(){return y(s)},onMouseLeave:function(){return y(null)}},{children:s})),n.jsx(a.Typography,e.__assign({sx:{color:"text.secondary",textAlign:"center",fontWeight:"bold",fontSize:"1.2rem"}},{children:"→"})),o?n.jsx(a.TextField,{size:"small",value:z.editedValue,onChange:function(n){A(function(i){return e.__assign(e.__assign({},i),{editedValue:n.target.value})}),V("")},sx:e.__assign(e.__assign({},H),{"& .MuiOutlinedInput-root input":{color:"#5928ed",fontWeight:600}}),variant:"outlined"}):n.jsx(a.Box,e.__assign({sx:D,onMouseEnter:function(){y(s),j(r)},onMouseLeave:function(){y(null),j(null)}},{children:r}))]})),n.jsx(a.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:.5}},{children:o?n.jsxs(n.Fragment,{children:[n.jsx(a.Tooltip,e.__assign({title:"Cancel"},{children:n.jsx(a.IconButton,e.__assign({onClick:E,size:"small"},{children:n.jsx(g.default,{})}))})),n.jsx(a.Button,e.__assign({onClick:q,size:"small",sx:e.__assign(e.__assign({},O),{padding:"6px 11px"})},{children:"Save"}))]}):n.jsxs(n.Fragment,{children:[n.jsx(a.Tooltip,e.__assign({title:"Edit"},{children:n.jsx(a.IconButton,e.__assign({onClick:function(){return function(e,n,i){A({index:i,originalKey:e,originalValue:n,editedKey:e,editedValue:n.replace(/[<>]/g,"")})}(s,r,t)},size:"small"},{children:n.jsx(u.default,{})}))})),n.jsx(a.Button,e.__assign({onClick:function(){return function(e,n){null!==z.index&&z.originalKey===e?(q(),f(z.editedKey,z.editedValue)):f(e,n)}(s,r)},size:"small",sx:O},{children:"Apply"}))]})})),o&&K&&n.jsx(a.Typography,e.__assign({variant:"caption",color:"error",sx:{fontFamily:"Plus Jakarta Sans",width:"100%",textAlign:"center",mt:1}},{children:K}))]}),s)})})):n.jsx(a.Box,e.__assign({sx:{display:"flex",justifyContent:"center",my:2}},{children:n.jsx(a.Typography,e.__assign({variant:"body2",sx:{color:"text.secondary",fontFamily:"Plus Jakarta Sans"}},{children:"No suggestions available for this content."}))}))]}))," ",S?n.jsxs(a.Box,e.__assign({sx:{border:"1px dashed #adacd4",borderRadius:"8px",p:2}},{children:[n.jsx(a.Typography,e.__assign({variant:"subtitle1",sx:{fontWeight:600,mb:1.5,fontFamily:"Plus Jakarta Sans",color:"#5928ed"}},{children:"Add Generalization"})),n.jsxs(a.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:1.5}},{children:[n.jsxs(a.Box,e.__assign({sx:{flex:1,display:"grid",gridTemplateColumns:"1fr auto 1fr",alignItems:"center",gap:1.5}},{children:[n.jsx(a.TextField,{fullWidth:!0,placeholder:"Enter phrase (e.g., laptop)",size:"small",value:W.key,onChange:function(n){I(function(i){return e.__assign(e.__assign({},i),{key:n.target.value})}),w("")},error:!!M,sx:{"& .MuiInputBase-input":{textAlign:"center"}}}),n.jsx(a.Typography,e.__assign({sx:{color:"text.secondary",textAlign:"center",fontWeight:"bold",fontSize:"1.2rem"}},{children:"→"})),n.jsx(a.TextField,{fullWidth:!0,placeholder:"Enter tag (e.g., device)",size:"small",value:W.value,onChange:function(n){I(function(i){return e.__assign(e.__assign({},i),{value:n.target.value})}),w("")},error:!!M,FormHelperTextProps:{sx:{fontFamily:"Plus Jakarta Sans",textAlign:"center"}},sx:{"& .MuiInputBase-input":{textAlign:"center",color:"#5928ed",fontWeight:600}}})]})),n.jsxs(a.Box,e.__assign({sx:{display:"flex",gap:1}},{children:[n.jsx(a.Button,e.__assign({variant:"outlined",onClick:function(){C(!1),w(""),I({key:"",value:""})},sx:{textTransform:"none",fontFamily:"Plus Jakarta Sans"}},{children:"Cancel"})),n.jsx(a.Button,e.__assign({variant:"contained",onClick:function(){if(W.key.trim()&&W.value.trim()){var e=W.value.trim();e.startsWith("<")&&e.endsWith(">")||(e="<".concat(e.replace(/[<>]/g,""),">"));var n=m(W.key,e);n.success?(I({key:"",value:""}),C(!1),w("")):w(n.error||"An unknown error occurred.")}else w("Both fields are required.")},sx:{textTransform:"none",fontFamily:"Plus Jakarta Sans"}},{children:"Save"}))]}))]})),M&&n.jsx(a.Typography,e.__assign({variant:"caption",color:"error",sx:{mt:1,fontFamily:"Plus Jakarta Sans",textAlign:"center",width:"100%"}},{children:M}))]})):n.jsx(a.Box,e.__assign({sx:{display:"flex",justifyContent:"center"}},{children:n.jsx(a.Button,e.__assign({startIcon:n.jsx(c.default,{}),onClick:function(){return C(!0)},variant:"outlined",size:"medium",sx:{textTransform:"none",fontFamily:"Plus Jakarta Sans",width:"100%",py:1}},{children:"Add Generalization"}))})),d.length>0&&n.jsxs(a.Box,e.__assign({sx:{border:"1px dashed #adacd4",borderRadius:"8px",p:2}},{children:[n.jsx(a.Typography,e.__assign({variant:"subtitle1",sx:{fontWeight:600,mb:1.5,fontFamily:"Plus Jakarta Sans",color:"#5928ed"}},{children:"Applied Generalizations"})),n.jsx(a.Box,e.__assign({sx:{display:"flex",flexDirection:"column",gap:1.5}},{children:d.map(function(i){return n.jsxs(a.Box,e.__assign({sx:{display:"flex",alignItems:"center",gap:1.5}},{children:[n.jsxs(a.Box,e.__assign({sx:{flex:1,display:"grid",gridTemplateColumns:"1fr auto 1fr",alignItems:"center",gap:1.5}},{children:[n.jsx(a.Box,e.__assign({sx:L,onMouseEnter:function(){return y(i.original)},onMouseLeave:function(){return y(null)}},{children:i.original})),n.jsx(a.Typography,e.__assign({sx:{color:"text.secondary",textAlign:"center",fontWeight:"bold",fontSize:"1.2rem"}},{children:"→"})),n.jsx(a.Box,e.__assign({sx:D,onMouseEnter:function(){y(i.replacement),j(i.replacement)},onMouseLeave:function(){y(null),j(null)}},{children:i.replacement}))]})),n.jsx(a.Box,e.__assign({sx:{display:"flex"}},{children:n.jsx(a.Button,e.__assign({startIcon:n.jsx(x.default,{}),onClick:function(){return _(i.original,i.replacement)},size:"small",sx:O},{children:"Undo"}))}))]}),i.replacement+i.original)})}))]}))]})}))]}))};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var EditIcon = require('@mui/icons-material/Edit');
+var UndoIcon = require('@mui/icons-material/Undo');
+var AddIcon = require('@mui/icons-material/Add');
+var CancelIcon = require('@mui/icons-material/Cancel');
+var lucideReact = require('lucide-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
+var UndoIcon__default = /*#__PURE__*/_interopDefaultLegacy(UndoIcon);
+var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
+var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
+
+const GeneralizationAccordion = ({
+  title,
+  description,
+  tags,
+  appliedTags,
+  hoveredWord,
+  isLoading,
+  onApply,
+  onUndo,
+  onEditSave,
+  onAddSave,
+  setHoveredText,
+  setHoveredTag
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [showAddForm, setShowAddForm] = React.useState(false);
+  const [editState, setEditState] = React.useState({
+    index: null,
+    originalKey: "",
+    originalValue: "",
+    editedKey: "",
+    editedValue: ""
+  });
+  const [newTag, setNewTag] = React.useState({ key: "", value: "" });
+  const [addError, setAddError] = React.useState("");
+  const [editError, setEditError] = React.useState("");
+  const handleApplyClick = (key, value) => {
+    if (editState.index !== null && editState.originalKey === key) {
+      handleSaveEditClick();
+      onApply(editState.editedKey, editState.editedValue);
+    } else {
+      onApply(key, value);
+    }
+  };
+  const handleEditClick = (key, value, index) => {
+    setEditState({
+      index,
+      originalKey: key,
+      originalValue: value,
+      editedKey: key,
+      editedValue: value.replace(/[<>]/g, "")
+      // Show value without brackets in edit input
+    });
+  };
+  const handleSaveEditClick = () => {
+    if (editState.index === null) return;
+    if (!editState.editedKey.trim() || !editState.editedValue.trim()) {
+      setEditError("Both fields are required.");
+      return;
+    }
+    let finalValue = editState.editedValue.trim();
+    if (!finalValue.startsWith("<") || !finalValue.endsWith(">")) {
+      finalValue = `<${finalValue.replace(/[<>]/g, "")}>`;
+    }
+    const result = onEditSave(
+      editState.originalKey,
+      editState.editedKey,
+      finalValue
+    );
+    if (result.success) {
+      setEditState({
+        index: null,
+        originalKey: "",
+        originalValue: "",
+        editedKey: "",
+        editedValue: ""
+      });
+      setEditError("");
+    } else {
+      setEditError(result.error || "An unknown error occurred.");
+    }
+  };
+  const handleCancelEditClick = () => {
+    setEditState({
+      index: null,
+      originalKey: "",
+      originalValue: "",
+      editedKey: "",
+      editedValue: ""
+    });
+    setEditError("");
+  };
+  const handleSaveNewTag = () => {
+    if (!newTag.key.trim() || !newTag.value.trim()) {
+      setAddError("Both fields are required.");
+      return;
+    }
+    let finalValue = newTag.value.trim();
+    if (!finalValue.startsWith("<") || !finalValue.endsWith(">")) {
+      finalValue = `<${finalValue.replace(/[<>]/g, "")}>`;
+    }
+    const result = onAddSave(newTag.key, finalValue);
+    if (result.success) {
+      setNewTag({ key: "", value: "" });
+      setShowAddForm(false);
+      setAddError("");
+    } else {
+      setAddError(result.error || "An unknown error occurred.");
+    }
+  };
+  const suggestedTags = Object.entries(tags).filter(
+    ([key]) => !appliedTags.some(
+      (tag) => tag.original.toLowerCase() === key.toLowerCase()
+    )
+  );
+  const pillStyle = {
+    p: "8px 12px",
+    borderRadius: "8px",
+    background: "#f1f5ff",
+    textAlign: "center",
+    fontFamily: "Plus Jakarta Sans",
+    fontSize: "0.875rem",
+    minHeight: "38px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    wordBreak: "break-word",
+    // For wrapping
+    border: "none",
+    boxShadow: "none",
+    cursor: "pointer",
+    "&:hover": {
+      background: "#e4ebf9"
+    }
+  };
+  const pillValueStyle = {
+    ...pillStyle,
+    color: "#5928ed",
+    fontWeight: 600
+  };
+  const editPillInputStyle = {
+    // Container for the TextField
+    p: "8px",
+    borderRadius: "8px",
+    background: "#f1f5ff",
+    minHeight: "48px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    // Styles for the actual MUI TextField
+    "& .MuiOutlinedInput-root": {
+      height: "100%",
+      width: "95%",
+      borderRadius: "8px",
+      background: "white",
+      fontFamily: "Plus Jakarta Sans",
+      fontSize: "0.875rem",
+      fontWeight: "normal",
+      color: "text.primary",
+      p: "8px 8px",
+      "& fieldset": {
+        borderColor: "#5928ed"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#5928ed",
+        borderWidth: "1px"
+      },
+      "& input": {
+        textAlign: "center",
+        p: "0",
+        height: "100%",
+        boxSizing: "border-box"
+      }
+    },
+    // Specific styles for the value pill (e.g., color)
+    "&.value-pill .MuiOutlinedInput-root": {
+      "& input": {
+        color: "#5928ed",
+        // Purple text for value
+        fontWeight: 600
+      }
+    }
+  };
+  const actionButtonStyle = {
+    color: "#5928ed",
+    textTransform: "none",
+    fontFamily: "Plus Jakarta Sans",
+    fontWeight: 600,
+    padding: "6px 8px",
+    minWidth: "auto"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Accordion,
+    {
+      expanded: isExpanded,
+      onChange: (_, expanded) => setIsExpanded(expanded),
+      sx: {
+        backgroundColor: "#f7f9fe",
+        // Light blue-ish background
+        border: "1px solid #adacd4",
+        // Solid blue-ish border
+        borderRadius: "8px",
+        boxShadow: "none",
+        "&:before": { display: "none" }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 20 }),
+            sx: {
+              gap: 1.5,
+              "& .MuiAccordionSummary-content": { margin: "12px 0" }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { marginRight: 1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 24, color: "#5928ed" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontWeight: 600, fontFamily: "Plus Jakarta Sans" }, children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    variant: "body2",
+                    sx: { color: "text.secondary", fontFamily: "Plus Jakarta Sans" },
+                    children: description
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.AccordionDetails, { sx: { borderTop: "1px solid #adacd4", p: 2, display: "flex", flexDirection: "column", gap: 2 }, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", justifyContent: "center", my: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24 }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px dashed #adacd4", borderRadius: "8px", p: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "subtitle1",
+                sx: { fontWeight: 600, mb: 1.5, fontFamily: "Plus Jakarta Sans", color: "#5928ed" },
+                children: "Generalize"
+              }
+            ),
+            suggestedTags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: suggestedTags.map(([key, value], index) => {
+              const isEditingThis = editState.index === index;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                    flexWrap: "wrap"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 1.5 }, children: [
+                      isEditingThis ? /* @__PURE__ */ jsxRuntime.jsx(
+                        material.TextField,
+                        {
+                          size: "small",
+                          value: editState.editedKey,
+                          onChange: (e) => {
+                            setEditState((prev) => ({
+                              ...prev,
+                              editedKey: e.target.value
+                            }));
+                            setEditError("");
+                          },
+                          sx: editPillInputStyle,
+                          variant: "outlined"
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Box,
+                        {
+                          sx: pillStyle,
+                          onMouseEnter: () => setHoveredText(key),
+                          onMouseLeave: () => setHoveredText(null),
+                          children: key
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "text.secondary", textAlign: "center", fontWeight: "bold", fontSize: "1.2rem" }, children: "\u2192" }),
+                      isEditingThis ? /* @__PURE__ */ jsxRuntime.jsx(
+                        material.TextField,
+                        {
+                          size: "small",
+                          value: editState.editedValue,
+                          onChange: (e) => {
+                            setEditState((prev) => ({
+                              ...prev,
+                              editedValue: e.target.value
+                            }));
+                            setEditError("");
+                          },
+                          sx: { ...editPillInputStyle, "& .MuiOutlinedInput-root input": { color: "#5928ed", fontWeight: 600 } },
+                          variant: "outlined"
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Box,
+                        {
+                          sx: pillValueStyle,
+                          onMouseEnter: () => {
+                            setHoveredText(key);
+                            setHoveredTag(value);
+                          },
+                          onMouseLeave: () => {
+                            setHoveredText(null);
+                            setHoveredTag(null);
+                          },
+                          children: value
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: isEditingThis ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Cancel", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: handleCancelEditClick, size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon__default["default"], {}) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Button,
+                        {
+                          onClick: handleSaveEditClick,
+                          size: "small",
+                          sx: { ...actionButtonStyle, padding: "6px 11px" },
+                          children: "Save"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Edit", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => handleEditClick(key, value, index), size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon__default["default"], {}) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Button,
+                        {
+                          onClick: () => handleApplyClick(key, value),
+                          size: "small",
+                          sx: actionButtonStyle,
+                          children: "Apply"
+                        }
+                      )
+                    ] }) }),
+                    isEditingThis && editError && /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        variant: "caption",
+                        color: "error",
+                        sx: {
+                          fontFamily: "Plus Jakarta Sans",
+                          width: "100%",
+                          textAlign: "center",
+                          mt: 1
+                        },
+                        children: editError
+                      }
+                    )
+                  ]
+                },
+                key
+              );
+            }) }) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", justifyContent: "center", my: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { color: "text.secondary", fontFamily: "Plus Jakarta Sans" }, children: "No suggestions available for this content." }) })
+          ] }),
+          " ",
+          showAddForm ? /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                border: "1px dashed #adacd4",
+                borderRadius: "8px",
+                p: 2
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    variant: "subtitle1",
+                    sx: { fontWeight: 600, mb: 1.5, fontFamily: "Plus Jakarta Sans", color: "#5928ed" },
+                    children: "Add Generalization"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 1.5 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.TextField,
+                      {
+                        fullWidth: true,
+                        placeholder: "Enter phrase (e.g., laptop)",
+                        size: "small",
+                        value: newTag.key,
+                        onChange: (e) => {
+                          setNewTag((prev) => ({ ...prev, key: e.target.value }));
+                          setAddError("");
+                        },
+                        error: !!addError,
+                        sx: {
+                          "& .MuiInputBase-input": { textAlign: "center" }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "text.secondary", textAlign: "center", fontWeight: "bold", fontSize: "1.2rem" }, children: "\u2192" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.TextField,
+                      {
+                        fullWidth: true,
+                        placeholder: "Enter tag (e.g., device)",
+                        size: "small",
+                        value: newTag.value,
+                        onChange: (e) => {
+                          setNewTag((prev) => ({ ...prev, value: e.target.value }));
+                          setAddError("");
+                        },
+                        error: !!addError,
+                        FormHelperTextProps: { sx: { fontFamily: "Plus Jakarta Sans", textAlign: "center" } },
+                        sx: {
+                          "& .MuiInputBase-input": { textAlign: "center", color: "#5928ed", fontWeight: 600 }
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", gap: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Button,
+                      {
+                        variant: "outlined",
+                        onClick: () => {
+                          setShowAddForm(false);
+                          setAddError("");
+                          setNewTag({ key: "", value: "" });
+                        },
+                        sx: { textTransform: "none", fontFamily: "Plus Jakarta Sans" },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Button,
+                      {
+                        variant: "contained",
+                        onClick: handleSaveNewTag,
+                        sx: { textTransform: "none", fontFamily: "Plus Jakarta Sans" },
+                        children: "Save"
+                      }
+                    )
+                  ] })
+                ] }),
+                addError && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    variant: "caption",
+                    color: "error",
+                    sx: {
+                      mt: 1,
+                      fontFamily: "Plus Jakarta Sans",
+                      textAlign: "center",
+                      width: "100%"
+                    },
+                    children: addError
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon__default["default"], {}),
+              onClick: () => setShowAddForm(true),
+              variant: "outlined",
+              size: "medium",
+              sx: {
+                textTransform: "none",
+                fontFamily: "Plus Jakarta Sans",
+                width: "100%",
+                py: 1
+                // Add padding
+              },
+              children: "Add Generalization"
+            }
+          ) }),
+          appliedTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px dashed #adacd4", borderRadius: "8px", p: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "subtitle1",
+                sx: { fontWeight: 600, mb: 1.5, fontFamily: "Plus Jakarta Sans", color: "#5928ed" },
+                children: "Applied Generalizations"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                sx: { display: "flex", flexDirection: "column", gap: 1.5 },
+                children: appliedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 1.5
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 1.5 }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Box,
+                          {
+                            sx: pillStyle,
+                            onMouseEnter: () => setHoveredText(tag.original),
+                            onMouseLeave: () => setHoveredText(null),
+                            children: tag.original
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "text.secondary", textAlign: "center", fontWeight: "bold", fontSize: "1.2rem" }, children: "\u2192" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Box,
+                          {
+                            sx: pillValueStyle,
+                            onMouseEnter: () => {
+                              setHoveredText(tag.replacement);
+                              setHoveredTag(tag.replacement);
+                            },
+                            onMouseLeave: () => {
+                              setHoveredText(null);
+                              setHoveredTag(null);
+                            },
+                            children: tag.replacement
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Button,
+                        {
+                          startIcon: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default["default"], {}),
+                          onClick: () => onUndo(tag.original, tag.replacement),
+                          size: "small",
+                          sx: actionButtonStyle,
+                          children: "Undo"
+                        }
+                      ) })
+                    ]
+                  },
+                  tag.replacement + tag.original
+                ))
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+var GeneralizationAccordion$1 = GeneralizationAccordion;
+
+exports["default"] = GeneralizationAccordion$1;
 //# sourceMappingURL=GeneralizationAccordion.js.map