@neo4j-ndl/react 4.17.0 → 4.18.0

package/lib/cjs/ai/chat-title/ChatTitle.js

@@ -0,0 +1,43 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const base_1 = require("@neo4j-ndl/base");
+const ChatTitle = (_a) => {
+    var { children, as, ref, style, className, htmlAttributes } = _a, restProps = __rest(_a, ["children", "as", "ref", "style", "className", "htmlAttributes"]);
+    const Component = as || 'span';
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, style: Object.assign({ backgroundClip: 'text', backgroundImage: `linear-gradient(to right, var(--theme-color-neutral-text-default), var(--theme-color-neutral-text-weaker))`, color: 'transparent', fontFamily: base_1.tokens.typography.display.fontFamily, fontSize: '1.5rem', fontWeight: base_1.tokens.weight.medium, letterSpacing: '0.016rem', lineHeight: 1.3333 }, style), className: className }, htmlAttributes, restProps, { children: children })));
+};
+exports.ChatTitle = ChatTitle;
+//# sourceMappingURL=ChatTitle.js.map

package/lib/cjs/ai/chat-title/ChatTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTitle.js","sourceRoot":"","sources":["../../../../src/ai/chat-title/ChatTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,0CAAyC;AAQlC,MAAM,SAAS,GAAG,CAAC,EAQuB,EAAE,EAAE;QAR3B,EACxB,QAAQ,EACR,EAAE,EACF,GAAG,EACH,KAAK,EACL,SAAS,EACT,cAAc,OAEiC,EAD5C,SAAS,cAPY,iEAQzB,CADa;IAEZ,MAAM,SAAS,GAAG,EAAE,IAAI,MAAM,CAAC;IAE/B,OAAO,CACL,uBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,KAAK,kBACH,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,4GAA4G,EAC7H,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,aAAM,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,EAChD,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,aAAM,CAAC,MAAM,CAAC,MAAM,EAChC,aAAa,EAAE,UAAU,EACzB,UAAU,EAAE,MAAM,IACf,KAAK,GAEV,SAAS,EAAE,SAAS,IAChB,cAAc,EACd,SAAS,cAEZ,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,SAAS,aAgCpB","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { tokens } from '@neo4j-ndl/base';\n\nimport { type PolymorphicCommonProps } from '../../_common/types';\n\ntype ChatTitleProps = {\n  children?: React.ReactNode;\n};\n\nexport const ChatTitle = ({\n  children,\n  as,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: PolymorphicCommonProps<'span', ChatTitleProps>) => {\n  const Component = as || 'span';\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        backgroundClip: 'text',\n        backgroundImage: `linear-gradient(to right, var(--theme-color-neutral-text-default), var(--theme-color-neutral-text-weaker))`,\n        color: 'transparent',\n        fontFamily: tokens.typography.display.fontFamily,\n        fontSize: '1.5rem', // same as title-2\n        fontWeight: tokens.weight.medium, // same as display\n        letterSpacing: '0.016rem', // same as title-2\n        lineHeight: 1.3333, // same as title-2\n        ...style,\n      }}\n      className={className}\n      {...htmlAttributes}\n      {...restProps}\n    >\n      {children}\n    </Component>\n  );\n};\n"]}

package/lib/cjs/ai/chat-title/index.js

@@ -0,0 +1,38 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChatTitle"), exports);
+//# sourceMappingURL=index.js.map

package/lib/cjs/ai/chat-title/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ai/chat-title/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,8CAA4B","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport * from './ChatTitle';\n"]}

package/lib/cjs/ai/chat-title/stories/chat-title-default.story.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const ai_1 = require("@neo4j-ndl/react/ai");
+const Component = () => {
+    return (0, jsx_runtime_1.jsx)(ai_1.ChatTitle, { children: "How can I help you today?" });
+};
+exports.default = Component;
+//# sourceMappingURL=chat-title-default.story.js.map

package/lib/cjs/ai/chat-title/stories/chat-title-default.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-title-default.story.js","sourceRoot":"","sources":["../../../../../src/ai/chat-title/stories/chat-title-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgD;AAEhD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,cAAS,4CAAsC,CAAC;AAC1D,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { ChatTitle } from '@neo4j-ndl/react/ai';\n\nconst Component = () => {\n  return <ChatTitle>How can I help you today?</ChatTitle>;\n};\n\nexport default Component;\n"]}

package/lib/cjs/ai/chat-title/stories/index.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatTitleDefaultSrc = exports.ChatTitleDefault = void 0;
+var chat_title_default_story_1 = require("./chat-title-default.story");
+Object.defineProperty(exports, "ChatTitleDefault", { enumerable: true, get: function () { return __importDefault(chat_title_default_story_1).default; } });
+const export_stories_utils_1 = require("../../../_common/export-stories-utils");
+const chat_title_default_story_raw_1 = __importDefault(require("./chat-title-default.story?raw"));
+exports.ChatTitleDefaultSrc = (0, export_stories_utils_1.removeLicenseHeader)(chat_title_default_story_raw_1.default);
+//# sourceMappingURL=index.js.map

package/lib/cjs/ai/chat-title/stories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/chat-title/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AAEpC,gFAA4E;AAC5E,kGAAoE;AAEvD,QAAA,mBAAmB,GAAG,IAAA,0CAAmB,EAAC,sCAAsB,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as ChatTitleDefault } from './chat-title-default.story';\n\nimport { removeLicenseHeader } from '../../../_common/export-stories-utils';\nimport ChatTitleDefaultSrcRaw from './chat-title-default.story?raw';\n\nexport const ChatTitleDefaultSrc = removeLicenseHeader(ChatTitleDefaultSrcRaw);\n"]}

package/lib/cjs/ai/index.js

@@ -20,7 +20,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Preview = exports.CodePreview = exports.ToolCall = exports.Reasoning = exports.Thinking = exports.Suggestion = exports.Response = exports.ImageTag = exports.FileTag = exports.MoreFiles = exports.UserBubble = exports.Prompt = exports.Presence = void 0;
+exports.ChatTitle = exports.Preview = exports.CodePreview = exports.ToolCall = exports.Reasoning = exports.Thinking = exports.Suggestion = exports.Response = exports.ImageTag = exports.FileTag = exports.MoreFiles = exports.UserBubble = exports.Prompt = exports.Presence = void 0;
 var presence_1 = require("./presence");
 Object.defineProperty(exports, "Presence", { enumerable: true, get: function () { return presence_1.Presence; } });
 var prompt_1 = require("./prompt");
@@ -47,4 +47,6 @@ var code_preview_1 = require("./code-preview");
 Object.defineProperty(exports, "CodePreview", { enumerable: true, get: function () { return code_preview_1.CodePreview; } });
 var preview_1 = require("./preview");
 Object.defineProperty(exports, "Preview", { enumerable: true, get: function () { return preview_1.Preview; } });
+var chat_title_1 = require("./chat-title");
+Object.defineProperty(exports, "ChatTitle", { enumerable: true, get: function () { return chat_title_1.ChatTitle; } });
 //# sourceMappingURL=index.js.map

package/lib/cjs/ai/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ai/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { Presence } from './presence';\nexport { Prompt } from './prompt';\nexport { UserBubble } from './user-bubble';\nexport { MoreFiles } from './more-files';\nexport { FileTag } from './file-tag';\nexport { ImageTag } from './image-tag';\nexport { Response } from './response';\nexport { Suggestion } from './suggestion';\nexport { Thinking } from './thinking';\nexport { Reasoning } from './reasoning';\nexport { ToolCall } from './tool-call';\nexport { CodePreview } from './code-preview';\nexport { Preview } from './preview';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ai/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,uCAAqC;AAA5B,mGAAA,OAAO,OAAA;AAChB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,2CAAyC;AAAhC,uGAAA,SAAS,OAAA","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { Presence } from './presence';\nexport { Prompt } from './prompt';\nexport { UserBubble } from './user-bubble';\nexport { MoreFiles } from './more-files';\nexport { FileTag } from './file-tag';\nexport { ImageTag } from './image-tag';\nexport { Response } from './response';\nexport { Suggestion } from './suggestion';\nexport { Thinking } from './thinking';\nexport { Reasoning } from './reasoning';\nexport { ToolCall } from './tool-call';\nexport { CodePreview } from './code-preview';\nexport { Preview } from './preview';\nexport { ChatTitle } from './chat-title';\n"]}

package/lib/cjs/ai/response/stories/response-full-example.story.js

@@ -81,7 +81,7 @@ const Component = () => {
             const newMessages = [...prev];
             const lastMessage = newMessages[newMessages.length - 1];
             if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) === 'assistant') {
-                lastMessage.done = true;
+                lastMessage.isDone = true;
             }
             return newMessages;
         });
@@ -106,7 +106,7 @@ const Component = () => {
             let currentText = '';
             setMessages((prev) => [
                 ...prev,
-                { content: '', done: false, role: 'assistant', thinkingTime },
+                { content: '', isDone: false, role: 'assistant', thinkingTime },
             ]);
             // Simulate streaming
             intervalRef.current = setInterval(() => {
@@ -134,7 +134,7 @@ const Component = () => {
                         const newMessages = [...prev];
                         const lastMessage = newMessages[newMessages.length - 1];
                         if (lastMessage.role === 'assistant') {
-                            lastMessage.done = true;
+                            lastMessage.isDone = true;
                         }
                         return newMessages;
                     });
@@ -153,7 +153,7 @@ const Component = () => {
                                             }, children: "Generate a report" })] }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["You can also drag and drop files here, or", ' ', (0, jsx_runtime_1.jsx)(react_1.TextLink, { as: "button", type: "internal-underline", children: "browse" }), ". Supports CVG, MOV, PDF"] })] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-4 n-pb-4", children: [messages.map((msg, idx) => ((0, jsx_runtime_1.jsx)("div", { className: `n-flex ${msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'}`, children: msg.role === 'user' ? ((0, jsx_runtime_1.jsx)("div", { className: "n-max-w-[85%]", children: (0, jsx_runtime_1.jsx)(ai_1.UserBubble, { avatarProps: {
                                             name: 'NM',
                                             type: 'letters',
-                                        }, children: msg.content }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-full n-flex n-flex-col n-gap-2", children: [msg.thinkingTime !== undefined && ((0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: false, thinkingMs: msg.thinkingTime })), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2", children: [(0, jsx_runtime_1.jsx)(ai_1.Response, { children: msg.content }), msg.done === true && ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Dislike", children: (0, jsx_runtime_1.jsx)(icons_1.HandThumbDownIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Re-run", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowPathIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Copy", children: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}) })] }))] })] })) }, idx))), isThinking && (0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: true }), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "n-px-4 n-pt-4 n-pb-1 n-mt-auto", children: (0, jsx_runtime_1.jsx)(ai_1.Prompt, { value: prompt, onChange: (e) => setPrompt(e.target.value), onSubmitPrompt: () => handleSend(), onCancelPrompt: handleCancel, isRunningPrompt: isThinking || isStreaming, isSubmitDisabled: prompt.length === 0 && !(isThinking || isStreaming), bottomContent: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Add files", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}) }) }) })] }) }));
+                                        }, children: msg.content }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-full n-flex n-flex-col n-gap-2", children: [msg.thinkingTime !== undefined && ((0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: false, thinkingMs: msg.thinkingTime })), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2", children: [(0, jsx_runtime_1.jsx)(ai_1.Response, { children: msg.content }), msg.isDone === true && ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Dislike", children: (0, jsx_runtime_1.jsx)(icons_1.HandThumbDownIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Re-run", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowPathIconOutline, {}) }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { size: "small", description: "Copy", children: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}) })] }))] })] })) }, idx))), isThinking && (0, jsx_runtime_1.jsx)(ai_1.Thinking, { isThinking: true }), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "n-px-4 n-pt-4 n-pb-1 n-mt-auto", children: (0, jsx_runtime_1.jsx)(ai_1.Prompt, { value: prompt, onChange: (e) => setPrompt(e.target.value), onSubmitPrompt: () => handleSend(), onCancelPrompt: handleCancel, isRunningPrompt: isThinking || isStreaming, isSubmitDisabled: prompt.length === 0 && !(isThinking || isStreaming), bottomContent: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Add files", size: "small", children: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}) }) }) })] }) }));
 };
 exports.Component = Component;
 exports.default = exports.Component;

package/lib/cjs/ai/response/stories/response-full-example.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"response-full-example.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-full-example.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { CleanIconButton, TextLink, Typography } from '@neo4j-ndl/react';\nimport {\n  Prompt,\n  Response,\n  Suggestion,\n  Thinking,\n  UserBubble,\n} from '@neo4j-ndl/react/ai';\nimport {\n  ArrowPathIconOutline,\n  Cog6ToothIconOutline,\n  HandThumbDownIconOutline,\n  PlusIconOutline,\n  Square2StackIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useEffect, useRef, useState } from 'react';\n\nconst FAKE_RESPONSES = [\n  `Here is a simple response with some **bold text** and *italics*.`,\n  `Here is a list of items:\n- Item 1\n- Item 2\n- Item 3`,\n  `Here is a code block example:\n\n\\`\\`\\`typescript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\\`\\`\\`\n`,\n  `# Heading 1\n## Heading 2\n### Heading 3\n\nSome text under headings.`,\n  `You can also use tables:\n\n| Header 1 | Header 2 |\n|Data 1|Data 2|\n|Data 3|Data 4|\n`,\n];\n\nexport const Component = () => {\n  const [messages, setMessages] = useState<\n    {\n      role: 'user' | 'assistant';\n      content: string;\n      thinkingTime?: number;\n      done?: boolean;\n    }[]\n  >([]);\n  const [prompt, setPrompt] = useState('');\n  const [isThinking, setIsThinking] = useState(false);\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [responseIndex, setResponseIndex] = useState(0);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, isThinking]);\n\n  const handleCancel = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    setIsThinking(false);\n    setIsStreaming(false);\n\n    // Mark the last message as done if stopped\n    setMessages((prev) => {\n      const newMessages = [...prev];\n      const lastMessage = newMessages[newMessages.length - 1];\n      if (lastMessage?.role === 'assistant') {\n        lastMessage.done = true;\n      }\n      return newMessages;\n    });\n  };\n\n  const handleSend = (overridePrompt?: string) => {\n    const textToSend = overridePrompt || prompt;\n\n    if (!textToSend.trim()) {\n      return;\n    }\n\n    setMessages((prev) => [...prev, { content: textToSend, role: 'user' }]);\n    setPrompt('');\n    setIsThinking(true);\n    const startTime = Date.now();\n\n    // Simulate network delay (thinking time)\n    timeoutRef.current = setTimeout(() => {\n      const endTime = Date.now();\n      const thinkingTime = endTime - startTime;\n      setIsThinking(false);\n      setIsStreaming(true);\n\n      const responseText = FAKE_RESPONSES[responseIndex];\n      setResponseIndex((prev) => (prev + 1) % FAKE_RESPONSES.length);\n\n      let currentText = '';\n      setMessages((prev) => [\n        ...prev,\n        { content: '', done: false, role: 'assistant', thinkingTime },\n      ]);\n\n      // Simulate streaming\n      intervalRef.current = setInterval(() => {\n        if (currentText.length < responseText.length) {\n          // Add a few characters at a time to simulate chunks\n          // Ensure we don't split newlines incorrectly if that's an issue,\n          // but simple slicing should be fine as long as the source has \\n.\n          const chunk = responseText.slice(\n            currentText.length,\n            currentText.length + 2,\n          );\n          currentText += chunk;\n\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.content = currentText;\n            }\n            return newMessages;\n          });\n        } else {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n          }\n          setIsStreaming(false);\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.done = true;\n            }\n            return newMessages;\n          });\n        }\n      }, 50);\n    }, 2000);\n  };\n\n  return (\n    <section className=\"n-h-screen\">\n      <div className=\"n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak\">\n        <div className=\"n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3\">\n          <div className=\"n-ml-auto\">\n            <CleanIconButton description=\"settings\" tooltipProps={{}}>\n              <Cog6ToothIconOutline />\n            </CleanIconButton>\n            <CleanIconButton description=\"close\">\n              <XMarkIconOutline />\n            </CleanIconButton>\n          </div>\n        </div>\n        <div className=\"n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto\">\n          {messages.length === 0 ? (\n            <div className=\"n-flex n-flex-col \">\n              <div className=\"n-flex n-flex-col n-gap-12\">\n                <Typography variant=\"display\">\n                  Hi [User], how can I help you today?\n                </Typography>\n                <div className=\"n-flex n-flex-col n-gap-4\">\n                  <Typography variant=\"body-medium\">Suggestions</Typography>\n                  <Suggestion\n                    isPrimary\n                    onClick={() => {\n                      handleSend('I want to import data');\n                    }}\n                  >\n                    I want to import data\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Create an AI agent');\n                    }}\n                  >\n                    Create an AI agent\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Invite project members');\n                    }}\n                  >\n                    Invite project members\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Generate a report');\n                    }}\n                  >\n                    Generate a report\n                  </Suggestion>\n                </div>\n                <Typography variant=\"body-medium\">\n                  You can also drag and drop files here, or{' '}\n                  <TextLink as=\"button\" type=\"internal-underline\">\n                    browse\n                  </TextLink>\n                  . Supports CVG, MOV, PDF\n                </Typography>\n              </div>\n            </div>\n          ) : (\n            <div className=\"n-flex n-flex-col n-gap-4 n-pb-4\">\n              {messages.map((msg, idx) => (\n                <div\n                  key={idx}\n                  className={`n-flex ${\n                    msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'\n                  }`}\n                >\n                  {msg.role === 'user' ? (\n                    <div className=\"n-max-w-[85%]\">\n                      <UserBubble\n                        avatarProps={{\n                          name: 'NM',\n                          type: 'letters',\n                        }}\n                      >\n                        {msg.content}\n                      </UserBubble>\n                    </div>\n                  ) : (\n                    <div className=\"n-w-full n-flex n-flex-col n-gap-2\">\n                      {msg.thinkingTime !== undefined && (\n                        <Thinking\n                          isThinking={false}\n                          thinkingMs={msg.thinkingTime}\n                        />\n                      )}\n                      <div className=\"n-flex n-flex-col n-gap-2\">\n                        <Response>{msg.content}</Response>\n\n                        {msg.done === true && (\n                          <div className=\"n-flex n-flex-row n-gap-1.5\">\n                            <CleanIconButton size=\"small\" description=\"Dislike\">\n                              <HandThumbDownIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Re-run\">\n                              <ArrowPathIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Copy\">\n                              <Square2StackIconOutline />\n                            </CleanIconButton>\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              ))}\n              {isThinking && <Thinking isThinking={true} />}\n              <div ref={messagesEndRef} />\n            </div>\n          )}\n        </div>\n        <div className=\"n-px-4 n-pt-4 n-pb-1 n-mt-auto\">\n          <Prompt\n            value={prompt}\n            onChange={(e) => setPrompt(e.target.value)}\n            onSubmitPrompt={() => handleSend()}\n            onCancelPrompt={handleCancel}\n            isRunningPrompt={isThinking || isStreaming}\n            isSubmitDisabled={\n              prompt.length === 0 && !(isThinking || isStreaming)\n            }\n            bottomContent={\n              <CleanIconButton description=\"Add files\" size=\"small\">\n                <PlusIconOutline />\n              </CleanIconButton>\n            }\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"response-full-example.story.js","sourceRoot":"","sources":["../../../../../src/ai/response/stories/response-full-example.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { CleanIconButton, TextLink, Typography } from '@neo4j-ndl/react';\nimport {\n  Prompt,\n  Response,\n  Suggestion,\n  Thinking,\n  UserBubble,\n} from '@neo4j-ndl/react/ai';\nimport {\n  ArrowPathIconOutline,\n  Cog6ToothIconOutline,\n  HandThumbDownIconOutline,\n  PlusIconOutline,\n  Square2StackIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useEffect, useRef, useState } from 'react';\n\nconst FAKE_RESPONSES = [\n  `Here is a simple response with some **bold text** and *italics*.`,\n  `Here is a list of items:\n- Item 1\n- Item 2\n- Item 3`,\n  `Here is a code block example:\n\n\\`\\`\\`typescript\nconst greeting = \"Hello World\";\nconsole.log(greeting);\n\\`\\`\\`\n`,\n  `# Heading 1\n## Heading 2\n### Heading 3\n\nSome text under headings.`,\n  `You can also use tables:\n\n| Header 1 | Header 2 |\n|Data 1|Data 2|\n|Data 3|Data 4|\n`,\n];\n\nexport const Component = () => {\n  const [messages, setMessages] = useState<\n    {\n      role: 'user' | 'assistant';\n      content: string;\n      thinkingTime?: number;\n      isDone?: boolean;\n    }[]\n  >([]);\n  const [prompt, setPrompt] = useState('');\n  const [isThinking, setIsThinking] = useState(false);\n  const [isStreaming, setIsStreaming] = useState(false);\n  const [responseIndex, setResponseIndex] = useState(0);\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const scrollToBottom = () => {\n    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages, isThinking]);\n\n  const handleCancel = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    if (intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    setIsThinking(false);\n    setIsStreaming(false);\n\n    // Mark the last message as done if stopped\n    setMessages((prev) => {\n      const newMessages = [...prev];\n      const lastMessage = newMessages[newMessages.length - 1];\n      if (lastMessage?.role === 'assistant') {\n        lastMessage.isDone = true;\n      }\n      return newMessages;\n    });\n  };\n\n  const handleSend = (overridePrompt?: string) => {\n    const textToSend = overridePrompt || prompt;\n\n    if (!textToSend.trim()) {\n      return;\n    }\n\n    setMessages((prev) => [...prev, { content: textToSend, role: 'user' }]);\n    setPrompt('');\n    setIsThinking(true);\n    const startTime = Date.now();\n\n    // Simulate network delay (thinking time)\n    timeoutRef.current = setTimeout(() => {\n      const endTime = Date.now();\n      const thinkingTime = endTime - startTime;\n      setIsThinking(false);\n      setIsStreaming(true);\n\n      const responseText = FAKE_RESPONSES[responseIndex];\n      setResponseIndex((prev) => (prev + 1) % FAKE_RESPONSES.length);\n\n      let currentText = '';\n      setMessages((prev) => [\n        ...prev,\n        { content: '', isDone: false, role: 'assistant', thinkingTime },\n      ]);\n\n      // Simulate streaming\n      intervalRef.current = setInterval(() => {\n        if (currentText.length < responseText.length) {\n          // Add a few characters at a time to simulate chunks\n          // Ensure we don't split newlines incorrectly if that's an issue,\n          // but simple slicing should be fine as long as the source has \\n.\n          const chunk = responseText.slice(\n            currentText.length,\n            currentText.length + 2,\n          );\n          currentText += chunk;\n\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.content = currentText;\n            }\n            return newMessages;\n          });\n        } else {\n          if (intervalRef.current) {\n            clearInterval(intervalRef.current);\n          }\n          setIsStreaming(false);\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            const lastMessage = newMessages[newMessages.length - 1];\n            if (lastMessage.role === 'assistant') {\n              lastMessage.isDone = true;\n            }\n            return newMessages;\n          });\n        }\n      }, 50);\n    }, 2000);\n  };\n\n  return (\n    <section className=\"n-h-screen\">\n      <div className=\"n-w-[440px] n-h-full n-flex n-flex-col n-bg-neutral-bg-weak\">\n        <div className=\"n-flex n-flex-row n-border-b n-border-neutral-border-weak n-p-3\">\n          <div className=\"n-ml-auto\">\n            <CleanIconButton description=\"settings\" tooltipProps={{}}>\n              <Cog6ToothIconOutline />\n            </CleanIconButton>\n            <CleanIconButton description=\"close\">\n              <XMarkIconOutline />\n            </CleanIconButton>\n          </div>\n        </div>\n        <div className=\"n-p-4 n-flex n-flex-col n-grow n-overflow-y-auto\">\n          {messages.length === 0 ? (\n            <div className=\"n-flex n-flex-col \">\n              <div className=\"n-flex n-flex-col n-gap-12\">\n                <Typography variant=\"display\">\n                  Hi [User], how can I help you today?\n                </Typography>\n                <div className=\"n-flex n-flex-col n-gap-4\">\n                  <Typography variant=\"body-medium\">Suggestions</Typography>\n                  <Suggestion\n                    isPrimary\n                    onClick={() => {\n                      handleSend('I want to import data');\n                    }}\n                  >\n                    I want to import data\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Create an AI agent');\n                    }}\n                  >\n                    Create an AI agent\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Invite project members');\n                    }}\n                  >\n                    Invite project members\n                  </Suggestion>\n                  <Suggestion\n                    onClick={() => {\n                      handleSend('Generate a report');\n                    }}\n                  >\n                    Generate a report\n                  </Suggestion>\n                </div>\n                <Typography variant=\"body-medium\">\n                  You can also drag and drop files here, or{' '}\n                  <TextLink as=\"button\" type=\"internal-underline\">\n                    browse\n                  </TextLink>\n                  . Supports CVG, MOV, PDF\n                </Typography>\n              </div>\n            </div>\n          ) : (\n            <div className=\"n-flex n-flex-col n-gap-4 n-pb-4\">\n              {messages.map((msg, idx) => (\n                <div\n                  key={idx}\n                  className={`n-flex ${\n                    msg.role === 'user' ? 'n-justify-end' : 'n-justify-start'\n                  }`}\n                >\n                  {msg.role === 'user' ? (\n                    <div className=\"n-max-w-[85%]\">\n                      <UserBubble\n                        avatarProps={{\n                          name: 'NM',\n                          type: 'letters',\n                        }}\n                      >\n                        {msg.content}\n                      </UserBubble>\n                    </div>\n                  ) : (\n                    <div className=\"n-w-full n-flex n-flex-col n-gap-2\">\n                      {msg.thinkingTime !== undefined && (\n                        <Thinking\n                          isThinking={false}\n                          thinkingMs={msg.thinkingTime}\n                        />\n                      )}\n                      <div className=\"n-flex n-flex-col n-gap-2\">\n                        <Response>{msg.content}</Response>\n\n                        {msg.isDone === true && (\n                          <div className=\"n-flex n-flex-row n-gap-1.5\">\n                            <CleanIconButton size=\"small\" description=\"Dislike\">\n                              <HandThumbDownIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Re-run\">\n                              <ArrowPathIconOutline />\n                            </CleanIconButton>\n                            <CleanIconButton size=\"small\" description=\"Copy\">\n                              <Square2StackIconOutline />\n                            </CleanIconButton>\n                          </div>\n                        )}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              ))}\n              {isThinking && <Thinking isThinking={true} />}\n              <div ref={messagesEndRef} />\n            </div>\n          )}\n        </div>\n        <div className=\"n-px-4 n-pt-4 n-pb-1 n-mt-auto\">\n          <Prompt\n            value={prompt}\n            onChange={(e) => setPrompt(e.target.value)}\n            onSubmitPrompt={() => handleSend()}\n            onCancelPrompt={handleCancel}\n            isRunningPrompt={isThinking || isStreaming}\n            isSubmitDisabled={\n              prompt.length === 0 && !(isThinking || isStreaming)\n            }\n            bottomContent={\n              <CleanIconButton description=\"Add files\" size=\"small\">\n                <PlusIconOutline />\n              </CleanIconButton>\n            }\n          />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-search-and-filters.stories.js

@@ -49,11 +49,10 @@ const globalFilterFn = (row, columnId, filterValue) => {
     }
     return value === null || value === void 0 ? void 0 : value.toLowerCase().includes(search);
 };
-const OpenFilterMenuIconButton = ({ onClick, open, description, ref, }) => ((0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: ref, onClick: onClick, "aria-controls": open ? 'default-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open, description: description, size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.FunnelIconOutline, {}) }));
+const OpenFilterMenuIconButton = ({ onClick, isOpen, description, ref, }) => ((0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: ref, onClick: onClick, "aria-controls": isOpen ? 'default-menu' : undefined, "aria-haspopup": "true", "aria-expanded": isOpen, description: description, size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.FunnelIconOutline, {}) }));
 const Searchable = () => {
     const [anchorEl, setAnchorEl] = (0, react_2.useState)(null);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const open = Boolean(anchorEl);
+    const isOpen = Boolean(anchorEl);
     const ref = (0, react_2.useRef)(null);
     const [globalFilter, setGlobalFilter] = (0, react_2.useState)('');
     const [columnFilters, setColumnFilters] = (0, react_2.useState)([]);
@@ -151,7 +150,7 @@ const Searchable = () => {
         }
         return false;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col", ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16 n-pb-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { "aria-label": "Table search", value: globalFilter, placeholder: "Search", leadingElement: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isClearable: true, onChange: (e) => setGlobalFilter(e.target.value) }), (0, jsx_runtime_1.jsx)(OpenFilterMenuIconButton, { open: open, onClick: handleClick, description: "Filter Menu" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table }), (0, jsx_runtime_1.jsx)(react_1.Popover, { isOpen: open, anchorElement: anchorEl, onOpenChange: (isOpen) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col", ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16 n-pb-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { "aria-label": "Table search", value: globalFilter, placeholder: "Search", leadingElement: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isClearable: true, onChange: (e) => setGlobalFilter(e.target.value) }), (0, jsx_runtime_1.jsx)(OpenFilterMenuIconButton, { isOpen: isOpen, onClick: handleClick, description: "Filter Menu" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table }), (0, jsx_runtime_1.jsx)(react_1.Popover, { isOpen: isOpen, anchorElement: anchorEl, onOpenChange: (isOpen) => {
                     if (!isOpen) {
                         handleClose();
                     }

package/lib/cjs/data-grid/stories/datagrid-search-and-filters.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-search-and-filters.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-search-and-filters.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Checkbox,\n  CleanIconButton,\n  DataGrid,\n  Divider,\n  IconButton,\n  Popover,\n  TextButton,\n  TextInput,\n  Typography,\n} from '@neo4j-ndl/react';\nimport {\n  FunnelIconOutline,\n  MagnifyingGlassIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnFiltersState,\n  type ColumnMeta,\n  createColumnHelper,\n  type FilterFn,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nexport default {\n  component: DataGrid,\n  id: 'components-data-grid-search-and-filters',\n  parameters: {\n    chromatic: { delay: 1000 },\n    controls: { disable: true },\n  },\n  title: 'Components/DataGrid/Search And Filters',\n};\n\ninterface AgeFilterOptions {\n  min?: number;\n  max?: number;\n}\n\n/**\n * Custom global function as there is a bug in current version:\n * https://github.com/TanStack/table/issues/4280#issuecomment-1244878232\n */\nconst globalFilterFn: FilterFn<TestDataFormat> = (\n  row,\n  columnId,\n  filterValue: string,\n) => {\n  const search = filterValue.toLowerCase();\n\n  let value = row.getValue(columnId) as string;\n  if (typeof value === 'number') {\n    value = String(value);\n  }\n\n  return value?.toLowerCase().includes(search);\n};\n\nconst OpenFilterMenuIconButton = ({\n  onClick,\n  open,\n  description,\n  ref,\n}: {\n  open: boolean;\n} & Omit<React.ComponentProps<typeof IconButton>, 'children'>) => (\n  <IconButton\n    ref={ref}\n    onClick={onClick}\n    aria-controls={open ? 'default-menu' : undefined}\n    aria-haspopup=\"true\"\n    aria-expanded={open}\n    description={description}\n    size=\"medium\"\n  >\n    <FunnelIconOutline />\n  </IconButton>\n);\n\nexport const Searchable = () => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const open = Boolean(anchorEl);\n  const ref = useRef<HTMLDivElement>(null);\n  const [globalFilter, setGlobalFilter] = useState('');\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: false,\n    filterFns: {},\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    globalFilterFn: globalFilterFn,\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    state: {\n      columnFilters,\n      globalFilter,\n    },\n  });\n\n  const toggleAgeFilter = ({ min, max }: AgeFilterOptions) => {\n    const ageColumn = table.getColumn('age');\n\n    if (!ageColumn) {\n      return;\n    }\n\n    const currentFilter = ageColumn.getFilterValue() as\n      | [number?, number?]\n      | undefined;\n\n    // Helper function to determine the new filter value for a specific bound\n    const determineNewBound = (currentBound?: number, newBound?: number) => {\n      if (newBound !== undefined && currentBound === newBound) {\n        return undefined;\n      }\n      return newBound !== undefined ? newBound : currentBound;\n    };\n\n    const newFilter: [number?, number?] = [\n      determineNewBound(currentFilter?.[0], min),\n      determineNewBound(currentFilter?.[1], max),\n    ];\n\n    // Update the filter value in the table state\n    ageColumn.setFilterValue(\n      newFilter[0] === undefined && newFilter[1] === undefined\n        ? undefined\n        : newFilter,\n    );\n  };\n\n  const isAgeFilterApplied = (type: 'min' | 'max', value: number) => {\n    const ageFilter = columnFilters.find((filter) => filter.id === 'age');\n    if (ageFilter) {\n      const [min, max] = ageFilter.value as [number, number];\n      if (type === 'min') {\n        return min === value;\n      }\n      if (type === 'max') {\n        return max === value;\n      }\n    }\n    return false;\n  };\n\n  return (\n    <div className=\"n-flex n-flex-col\" ref={ref}>\n      <div className=\"n-flex n-flex-col n-gap-token-16 n-pb-token-16\">\n        <div className=\"n-flex n-gap-token-8\">\n          <TextInput\n            aria-label=\"Table search\"\n            value={globalFilter}\n            placeholder=\"Search\"\n            leadingElement={<MagnifyingGlassIconOutline />}\n            isClearable={true}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n          <OpenFilterMenuIconButton\n            open={open}\n            onClick={handleClick}\n            description=\"Filter Menu\"\n          />\n        </div>\n      </div>\n      <Divider />\n      <DataGrid isResizable={true} tableInstance={table} />\n      <Popover\n        isOpen={open}\n        anchorElement={anchorEl}\n        onOpenChange={(isOpen) => {\n          if (!isOpen) {\n            handleClose();\n          }\n        }}\n        offset={({ rects }) => ({\n          crossAxis: -rects.floating.width,\n        })}\n      >\n        <Popover.Content>\n          <div className=\"n-grid n-gap-token-16 n-p-token-24 n-w-[300px]\">\n            <div className=\"n-w-full n-flex n-justify-between n-items-center\">\n              <Typography variant=\"title-4\">Filter</Typography>\n              <CleanIconButton\n                onClick={handleClose}\n                description=\"Close filter menu\"\n                size=\"medium\"\n                htmlAttributes={{\n                  title: 'Close filter menu',\n                }}\n              >\n                <XMarkIconOutline />\n              </CleanIconButton>\n            </div>\n            <div className=\"n-flex n-flex-col n-gap-2\">\n              <Typography\n                variant=\"body-medium\"\n                className=\"n-text-neutral-text-weaker n-pb-token-4\"\n              >\n                Age\n              </Typography>\n              <Checkbox\n                isChecked={isAgeFilterApplied('min', 18)}\n                label=\"Age >= 18\"\n                onClick={() => toggleAgeFilter({ min: 18 })}\n              />\n              <Checkbox\n                isChecked={isAgeFilterApplied('max', 63)}\n                label=\"Age <= 63\"\n                onClick={() => toggleAgeFilter({ max: 63 })}\n              />\n            </div>\n            <TextButton\n              className=\"n-mt-token-32 n-justify-self-end\"\n              variant=\"danger\"\n              aria-label=\"Clear filters\"\n              onClick={() => {\n                table.resetColumnFilters();\n              }}\n            >\n              <Typography\n                variant=\"body-medium\"\n                className=\"n-text-danger-text n-font-bold\"\n              >\n                Clear all\n              </Typography>\n            </TextButton>\n          </div>\n        </Popover.Content>\n      </Popover>\n    </div>\n  );\n};\n\nexport const ColumnFiltering = () => {\n  const [tableData, setTableData] = useState(TABLE_DEMO_DATA);\n  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n    columnActions: {\n      actions: [\n        {\n          onClick: () => {\n            // Filter the input table data value, TABLE_DEMO_DATA\n            if (isAgeFilterApplied) {\n              setTableData(TABLE_DEMO_DATA);\n              setIsAgeFilterApplied(false);\n              return;\n            } else {\n              const filteredData = TABLE_DEMO_DATA.filter(\n                (data) => data.age >= 18,\n              );\n              setTableData(filteredData);\n              setIsAgeFilterApplied(true);\n            }\n          },\n          title: 'Age >= 18',\n        },\n      ],\n    },\n  };\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.getValue(),\n      header: () => <div>Age</div>,\n      meta: {\n        ...ColumnActions,\n      },\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: tableData,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32\">\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={true}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"datagrid-search-and-filters.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-search-and-filters.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  Checkbox,\n  CleanIconButton,\n  DataGrid,\n  Divider,\n  IconButton,\n  Popover,\n  TextButton,\n  TextInput,\n  Typography,\n} from '@neo4j-ndl/react';\nimport {\n  FunnelIconOutline,\n  MagnifyingGlassIconOutline,\n  XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnFiltersState,\n  type ColumnMeta,\n  createColumnHelper,\n  type FilterFn,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nexport default {\n  component: DataGrid,\n  id: 'components-data-grid-search-and-filters',\n  parameters: {\n    chromatic: { delay: 1000 },\n    controls: { disable: true },\n  },\n  title: 'Components/DataGrid/Search And Filters',\n};\n\ninterface AgeFilterOptions {\n  min?: number;\n  max?: number;\n}\n\n/**\n * Custom global function as there is a bug in current version:\n * https://github.com/TanStack/table/issues/4280#issuecomment-1244878232\n */\nconst globalFilterFn: FilterFn<TestDataFormat> = (\n  row,\n  columnId,\n  filterValue: string,\n) => {\n  const search = filterValue.toLowerCase();\n\n  let value = row.getValue(columnId) as string;\n  if (typeof value === 'number') {\n    value = String(value);\n  }\n\n  return value?.toLowerCase().includes(search);\n};\n\nconst OpenFilterMenuIconButton = ({\n  onClick,\n  isOpen,\n  description,\n  ref,\n}: {\n  isOpen: boolean;\n} & Omit<React.ComponentProps<typeof IconButton>, 'children'>) => (\n  <IconButton\n    ref={ref}\n    onClick={onClick}\n    aria-controls={isOpen ? 'default-menu' : undefined}\n    aria-haspopup=\"true\"\n    aria-expanded={isOpen}\n    description={description}\n    size=\"medium\"\n  >\n    <FunnelIconOutline />\n  </IconButton>\n);\n\nexport const Searchable = () => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n  const ref = useRef<HTMLDivElement>(null);\n  const [globalFilter, setGlobalFilter] = useState('');\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n  ) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: false,\n    filterFns: {},\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    globalFilterFn: globalFilterFn,\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onColumnFiltersChange: setColumnFilters,\n    onGlobalFilterChange: setGlobalFilter,\n    state: {\n      columnFilters,\n      globalFilter,\n    },\n  });\n\n  const toggleAgeFilter = ({ min, max }: AgeFilterOptions) => {\n    const ageColumn = table.getColumn('age');\n\n    if (!ageColumn) {\n      return;\n    }\n\n    const currentFilter = ageColumn.getFilterValue() as\n      | [number?, number?]\n      | undefined;\n\n    // Helper function to determine the new filter value for a specific bound\n    const determineNewBound = (currentBound?: number, newBound?: number) => {\n      if (newBound !== undefined && currentBound === newBound) {\n        return undefined;\n      }\n      return newBound !== undefined ? newBound : currentBound;\n    };\n\n    const newFilter: [number?, number?] = [\n      determineNewBound(currentFilter?.[0], min),\n      determineNewBound(currentFilter?.[1], max),\n    ];\n\n    // Update the filter value in the table state\n    ageColumn.setFilterValue(\n      newFilter[0] === undefined && newFilter[1] === undefined\n        ? undefined\n        : newFilter,\n    );\n  };\n\n  const isAgeFilterApplied = (type: 'min' | 'max', value: number) => {\n    const ageFilter = columnFilters.find((filter) => filter.id === 'age');\n    if (ageFilter) {\n      const [min, max] = ageFilter.value as [number, number];\n      if (type === 'min') {\n        return min === value;\n      }\n      if (type === 'max') {\n        return max === value;\n      }\n    }\n    return false;\n  };\n\n  return (\n    <div className=\"n-flex n-flex-col\" ref={ref}>\n      <div className=\"n-flex n-flex-col n-gap-token-16 n-pb-token-16\">\n        <div className=\"n-flex n-gap-token-8\">\n          <TextInput\n            aria-label=\"Table search\"\n            value={globalFilter}\n            placeholder=\"Search\"\n            leadingElement={<MagnifyingGlassIconOutline />}\n            isClearable={true}\n            onChange={(e) => setGlobalFilter(e.target.value)}\n          />\n          <OpenFilterMenuIconButton\n            isOpen={isOpen}\n            onClick={handleClick}\n            description=\"Filter Menu\"\n          />\n        </div>\n      </div>\n      <Divider />\n      <DataGrid isResizable={true} tableInstance={table} />\n      <Popover\n        isOpen={isOpen}\n        anchorElement={anchorEl}\n        onOpenChange={(isOpen) => {\n          if (!isOpen) {\n            handleClose();\n          }\n        }}\n        offset={({ rects }) => ({\n          crossAxis: -rects.floating.width,\n        })}\n      >\n        <Popover.Content>\n          <div className=\"n-grid n-gap-token-16 n-p-token-24 n-w-[300px]\">\n            <div className=\"n-w-full n-flex n-justify-between n-items-center\">\n              <Typography variant=\"title-4\">Filter</Typography>\n              <CleanIconButton\n                onClick={handleClose}\n                description=\"Close filter menu\"\n                size=\"medium\"\n                htmlAttributes={{\n                  title: 'Close filter menu',\n                }}\n              >\n                <XMarkIconOutline />\n              </CleanIconButton>\n            </div>\n            <div className=\"n-flex n-flex-col n-gap-2\">\n              <Typography\n                variant=\"body-medium\"\n                className=\"n-text-neutral-text-weaker n-pb-token-4\"\n              >\n                Age\n              </Typography>\n              <Checkbox\n                isChecked={isAgeFilterApplied('min', 18)}\n                label=\"Age >= 18\"\n                onClick={() => toggleAgeFilter({ min: 18 })}\n              />\n              <Checkbox\n                isChecked={isAgeFilterApplied('max', 63)}\n                label=\"Age <= 63\"\n                onClick={() => toggleAgeFilter({ max: 63 })}\n              />\n            </div>\n            <TextButton\n              className=\"n-mt-token-32 n-justify-self-end\"\n              variant=\"danger\"\n              aria-label=\"Clear filters\"\n              onClick={() => {\n                table.resetColumnFilters();\n              }}\n            >\n              <Typography\n                variant=\"body-medium\"\n                className=\"n-text-danger-text n-font-bold\"\n              >\n                Clear all\n              </Typography>\n            </TextButton>\n          </div>\n        </Popover.Content>\n      </Popover>\n    </div>\n  );\n};\n\nexport const ColumnFiltering = () => {\n  const [tableData, setTableData] = useState(TABLE_DEMO_DATA);\n  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n    columnActions: {\n      actions: [\n        {\n          onClick: () => {\n            // Filter the input table data value, TABLE_DEMO_DATA\n            if (isAgeFilterApplied) {\n              setTableData(TABLE_DEMO_DATA);\n              setIsAgeFilterApplied(false);\n              return;\n            } else {\n              const filteredData = TABLE_DEMO_DATA.filter(\n                (data) => data.age >= 18,\n              );\n              setTableData(filteredData);\n              setIsAgeFilterApplied(true);\n            }\n          },\n          title: 'Age >= 18',\n        },\n      ],\n    },\n  };\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.getValue(),\n      header: () => <div>Age</div>,\n      meta: {\n        ...ColumnActions,\n      },\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: tableData,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32\">\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={true}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n"]}