@neo4j-ndl/react 4.14.5 → 4.15.0

package/lib/cjs/data-grid/stories/datagrid-using-editable-cells.story.js

@@ -22,93 +22,186 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const base_1 = require("@neo4j-ndl/base");
 const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
 const react_table_1 = require("@tanstack/react-table");
 const react_2 = require("react");
-const staticData_1 = require("./staticData");
+const ROLE_OPTIONS = [
+    { label: 'Admin', value: 'admin' },
+    { label: 'Editor', value: 'editor' },
+    { label: 'Viewer', value: 'viewer' },
+];
+const PERMISSION_OPTIONS = [
+    { label: 'Read', value: 'read' },
+    { label: 'Write', value: 'write' },
+    { label: 'Delete', value: 'delete' },
+];
+const LABEL_OPTIONS = [
+    { label: 'Person', value: 'person' },
+    { label: 'Movie', value: 'movie' },
+    { label: 'Director', value: 'director' },
+    { label: 'Actor', value: 'actor' },
+];
+const STATUS_OPTIONS = [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+    { label: 'Pending', value: 'pending' },
+];
+const VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);
+const LABEL_COLORS = {
+    actor: base_1.tokens.graph['7'],
+    director: base_1.tokens.graph['4'],
+    movie: base_1.tokens.graph['3'],
+    person: base_1.tokens.graph['1'],
+};
+// Render each selected value as a non-interactive GraphLabel (as a span)
+// instead of the default Tag chip, demonstrating the components override.
+const LabelMultiValue = (props) => ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { as: "span", type: "node", size: "small", color: LABEL_COLORS[props.data.value], children: props.data.label }));
+// The "Dallas Kuhn" row has a status that is not part of the available
+// options, so its dropdown cell renders in the error state.
+const DEMO_DATA = [
+    {
+        labels: ['person', 'actor'],
+        name: 'Alicia Sanford',
+        permissions: ['read', 'write'],
+        role: 'admin',
+        status: 'active',
+    },
+    {
+        labels: ['movie'],
+        name: 'Dallas Kuhn',
+        permissions: ['read'],
+        role: 'editor',
+        status: 'unknown',
+    },
+    {
+        labels: ['director'],
+        name: 'Susan Daugherty MD',
+        permissions: ['read', 'write', 'delete'],
+        role: 'viewer',
+        status: 'pending',
+    },
+    {
+        labels: ['person'],
+        name: 'Karen Huel',
+        permissions: ['read'],
+        role: 'editor',
+        status: 'inactive',
+    },
+    {
+        labels: ['movie', 'director'],
+        name: 'Ken Kessler',
+        permissions: ['write', 'delete'],
+        role: 'admin',
+        status: 'active',
+    },
+    {
+        labels: [],
+        name: 'Courtney McClure',
+        permissions: [],
+        role: 'viewer',
+        status: 'pending',
+    },
+];
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const Component = () => {
-    const [data, setData] = (0, react_2.useState)(staticData_1.TABLE_DEMO_DATA);
+    const [data, setData] = (0, react_2.useState)(DEMO_DATA);
+    const updateRow = (name, update) => {
+        setData((oldData) => oldData.map((row) => (row.name === name ? Object.assign(Object.assign({}, row), update) : row)));
+    };
     const COMMON_COLUMNS = [
+        // Editable inline text cell.
         columnHelper.accessor('name', {
             cell: (cell) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.InlineEditCell, { cell: cell, value: cell.getValue(), ariaLabel: "edit name" })),
             meta: {
                 isInlineEditCell: {
                     onEditChange: (newValue, cell) => {
-                        setData((oldData) => {
-                            return oldData.map((row) => {
-                                if (row.name === cell.row.original.name) {
-                                    return Object.assign(Object.assign({}, row), { name: newValue });
-                                }
-                                return row;
-                            });
-                        });
+                        updateRow(cell.row.original.name, { name: newValue });
                     },
                 },
             },
             minSize: 180,
             size: 220,
         }),
-        columnHelper.accessor('age', {
-            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: [
-                    {
-                        label: '12',
-                        value: '12',
-                    },
-                    {
-                        label: '32',
-                        value: '32',
-                    },
-                    {
-                        label: '37',
-                        value: '37',
+        // Default single-select dropdown.
+        columnHelper.accessor('role', {
+            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: ROLE_OPTIONS, ariaLabel: "select role" })),
+            meta: {
+                isDropDownCell: {
+                    onChange: (newValue, cell) => {
+                        if (newValue === undefined) {
+                            return;
+                        }
+                        updateRow(cell.row.original.name, { role: newValue });
                     },
-                    {
-                        label: '39',
-                        value: '39',
+                },
+            },
+            minSize: 160,
+            size: 180,
+        }),
+        // Default multi-select dropdown (default Tag chips).
+        columnHelper.accessor('permissions', {
+            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: PERMISSION_OPTIONS, ariaLabel: "select permissions" })),
+            enableSorting: false,
+            meta: {
+                isDropDownCell: {
+                    isMulti: true,
+                    onChange: (newValue, cell) => {
+                        updateRow(cell.row.original.name, { permissions: newValue });
                     },
-                    {
-                        label: '51',
-                        value: '51',
+                },
+            },
+            minSize: 220,
+            size: 260,
+        }),
+        // Multi-select dropdown with a custom MultiValue (GraphLabel chips).
+        columnHelper.accessor('labels', {
+            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: LABEL_OPTIONS, ariaLabel: "select labels", components: { MultiValue: LabelMultiValue } })),
+            enableSorting: false,
+            meta: {
+                isDropDownCell: {
+                    isMulti: true,
+                    onChange: (newValue, cell) => {
+                        updateRow(cell.row.original.name, { labels: newValue });
                     },
-                ], ariaLabel: "select age" })),
+                },
+            },
+            minSize: 240,
+            size: 280,
+        }),
+        // Single-select dropdown in an error state.
+        columnHelper.accessor('status', {
+            cell: (info) => {
+                const isInvalid = !VALID_STATUSES.includes(info.getValue());
+                const isPending = info.getValue() === 'pending';
+                const isInactive = info.getValue() === 'inactive';
+                const warningHelpText = ((0, jsx_runtime_1.jsxs)("span", { className: "n-flex n-items-center n-gap-token-2 n-text-warning-text", children: [(0, jsx_runtime_1.jsx)(icons_1.ExclamationTriangleIconSolid, { className: "n-size-token-16 n-text-warning-icon" }), "Inactive users cannot sign in"] }));
+                return ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: STATUS_OPTIONS, ariaLabel: "select status", errorText: isInvalid ? 'Please select a valid status' : undefined, helpText: isInactive
+                        ? warningHelpText
+                        : isPending
+                            ? 'Waiting for admin approval'
+                            : undefined }));
+            },
             meta: {
                 isDropDownCell: {
                     onChange: (newValue, cell) => {
                         if (newValue === undefined) {
-                            // No change
                             return;
                         }
-                        const parsedValue = parseInt(newValue, 10);
-                        if (isNaN(parsedValue)) {
-                            return;
-                        }
-                        setData((oldData) => {
-                            return oldData.map((row) => {
-                                if (row.name === cell.row.original.name) {
-                                    return Object.assign(Object.assign({}, row), { age: parsedValue });
-                                }
-                                return row;
-                            });
-                        });
+                        updateRow(cell.row.original.name, { status: newValue });
                     },
                 },
             },
-            minSize: 80,
-        }),
-        columnHelper.accessor('cypherCommand', {
-            cell: (info) => info.getValue(),
-            minSize: 400,
-            size: 400,
+            minSize: 200,
+            size: 240,
         }),
     ];
     const table = (0, react_table_1.useReactTable)({
+        autoResetPageIndex: false,
         columnResizeMode: 'onChange',
         columns: COMMON_COLUMNS,
         data: data,
-        debugColumns: true,
-        debugHeaders: true,
-        debugTable: true,
         defaultColumn: {
             maxSize: 800,
             minSize: 80,

package/lib/cjs/data-grid/stories/datagrid-using-editable-cells.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-using-editable-cells.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n  const [data, setData] = useState(TABLE_DEMO_DATA);\n\n  const COMMON_COLUMNS = [\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    name: newValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={[\n            {\n              label: '12',\n              value: '12',\n            },\n            {\n              label: '32',\n              value: '32',\n            },\n            {\n              label: '37',\n              value: '37',\n            },\n            {\n              label: '39',\n              value: '39',\n            },\n            {\n              label: '51',\n              value: '51',\n            },\n          ]}\n          ariaLabel=\"select age\"\n        />\n      ),\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              // No change\n              return;\n            }\n\n            const parsedValue = parseInt(newValue, 10);\n\n            if (isNaN(parsedValue)) {\n              return;\n            }\n\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    age: parsedValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: COMMON_COLUMNS,\n    data: data,\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-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={true}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-using-editable-cells.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { tokens } from '@neo4j-ndl/base';\nimport { DataGrid, GraphLabel } from '@neo4j-ndl/react';\nimport { ExclamationTriangleIconSolid } from '@neo4j-ndl/react/icons';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\nimport { type MultiValueProps } from 'react-select';\n\ntype TestDataFormat = {\n  name: string;\n  role: string;\n  permissions: string[];\n  labels: string[];\n  status: string;\n};\n\nconst ROLE_OPTIONS = [\n  { label: 'Admin', value: 'admin' },\n  { label: 'Editor', value: 'editor' },\n  { label: 'Viewer', value: 'viewer' },\n];\n\nconst PERMISSION_OPTIONS = [\n  { label: 'Read', value: 'read' },\n  { label: 'Write', value: 'write' },\n  { label: 'Delete', value: 'delete' },\n];\n\nconst LABEL_OPTIONS = [\n  { label: 'Person', value: 'person' },\n  { label: 'Movie', value: 'movie' },\n  { label: 'Director', value: 'director' },\n  { label: 'Actor', value: 'actor' },\n];\n\nconst STATUS_OPTIONS = [\n  { label: 'Active', value: 'active' },\n  { label: 'Inactive', value: 'inactive' },\n  { label: 'Pending', value: 'pending' },\n];\n\nconst VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);\n\ntype DropDownOption = { value: string; label: string };\n\nconst LABEL_COLORS: Record<string, string> = {\n  actor: tokens.graph['7'],\n  director: tokens.graph['4'],\n  movie: tokens.graph['3'],\n  person: tokens.graph['1'],\n};\n\n// Render each selected value as a non-interactive GraphLabel (as a span)\n// instead of the default Tag chip, demonstrating the components override.\nconst LabelMultiValue = (props: MultiValueProps<DropDownOption, boolean>) => (\n  <GraphLabel\n    as=\"span\"\n    type=\"node\"\n    size=\"small\"\n    color={LABEL_COLORS[props.data.value]}\n  >\n    {props.data.label}\n  </GraphLabel>\n);\n\n// The \"Dallas Kuhn\" row has a status that is not part of the available\n// options, so its dropdown cell renders in the error state.\nconst DEMO_DATA: TestDataFormat[] = [\n  {\n    labels: ['person', 'actor'],\n    name: 'Alicia Sanford',\n    permissions: ['read', 'write'],\n    role: 'admin',\n    status: 'active',\n  },\n  {\n    labels: ['movie'],\n    name: 'Dallas Kuhn',\n    permissions: ['read'],\n    role: 'editor',\n    status: 'unknown',\n  },\n  {\n    labels: ['director'],\n    name: 'Susan Daugherty MD',\n    permissions: ['read', 'write', 'delete'],\n    role: 'viewer',\n    status: 'pending',\n  },\n  {\n    labels: ['person'],\n    name: 'Karen Huel',\n    permissions: ['read'],\n    role: 'editor',\n    status: 'inactive',\n  },\n  {\n    labels: ['movie', 'director'],\n    name: 'Ken Kessler',\n    permissions: ['write', 'delete'],\n    role: 'admin',\n    status: 'active',\n  },\n  {\n    labels: [],\n    name: 'Courtney McClure',\n    permissions: [],\n    role: 'viewer',\n    status: 'pending',\n  },\n];\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n  const [data, setData] = useState(DEMO_DATA);\n\n  const updateRow = (name: string, update: Partial<TestDataFormat>): void => {\n    setData((oldData) =>\n      oldData.map((row) => (row.name === name ? { ...row, ...update } : row)),\n    );\n  };\n\n  const COMMON_COLUMNS = [\n    // Editable inline text cell.\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            updateRow(cell.row.original.name, { name: newValue });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    // Default single-select dropdown.\n    columnHelper.accessor('role', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={ROLE_OPTIONS}\n          ariaLabel=\"select role\"\n        />\n      ),\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              return;\n            }\n            updateRow(cell.row.original.name, { role: newValue });\n          },\n        },\n      },\n      minSize: 160,\n      size: 180,\n    }),\n    // Default multi-select dropdown (default Tag chips).\n    columnHelper.accessor('permissions', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={PERMISSION_OPTIONS}\n          ariaLabel=\"select permissions\"\n        />\n      ),\n      enableSorting: false,\n      meta: {\n        isDropDownCell: {\n          isMulti: true,\n          onChange: (newValue, cell) => {\n            updateRow(cell.row.original.name, { permissions: newValue });\n          },\n        },\n      },\n      minSize: 220,\n      size: 260,\n    }),\n    // Multi-select dropdown with a custom MultiValue (GraphLabel chips).\n    columnHelper.accessor('labels', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={LABEL_OPTIONS}\n          ariaLabel=\"select labels\"\n          components={{ MultiValue: LabelMultiValue }}\n        />\n      ),\n      enableSorting: false,\n      meta: {\n        isDropDownCell: {\n          isMulti: true,\n          onChange: (newValue, cell) => {\n            updateRow(cell.row.original.name, { labels: newValue });\n          },\n        },\n      },\n      minSize: 240,\n      size: 280,\n    }),\n    // Single-select dropdown in an error state.\n    columnHelper.accessor('status', {\n      cell: (info) => {\n        const isInvalid = !VALID_STATUSES.includes(info.getValue());\n\n        const isPending = info.getValue() === 'pending';\n        const isInactive = info.getValue() === 'inactive';\n\n        const warningHelpText = (\n          <span className=\"n-flex n-items-center n-gap-token-2 n-text-warning-text\">\n            <ExclamationTriangleIconSolid className=\"n-size-token-16 n-text-warning-icon\" />\n            Inactive users cannot sign in\n          </span>\n        );\n\n        return (\n          <DataGrid.DropDownCell\n            cell={info}\n            options={STATUS_OPTIONS}\n            ariaLabel=\"select status\"\n            errorText={isInvalid ? 'Please select a valid status' : undefined}\n            helpText={\n              isInactive\n                ? warningHelpText\n                : isPending\n                  ? 'Waiting for admin approval'\n                  : undefined\n            }\n          />\n        );\n      },\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              return;\n            }\n            updateRow(cell.row.original.name, { status: newValue });\n          },\n        },\n      },\n      minSize: 200,\n      size: 240,\n    }),\n  ];\n  const table = useReactTable({\n    autoResetPageIndex: false,\n    columnResizeMode: 'onChange',\n    columns: COMMON_COLUMNS,\n    data: data,\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-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={true}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/ai/preview/Preview.js

@@ -97,9 +97,14 @@ const PreviewCode = (_a) => {
                             // wrapLongLines
                             codeTagProps: { className: 'n-ai-preview-code' }, showLineNumbers: false, children: code }) })] }))] })));
 };
+const PreviewContent = (_a) => {
+    var { children, ref, style, className, htmlAttributes } = _a, restProps = __rest(_a, ["children", "ref", "style", "className", "htmlAttributes"]);
+    return (_jsx("div", Object.assign({ ref: ref, style: style, className: classNames('ndl-ai-preview-content', className) }, restProps, htmlAttributes, { children: children })));
+};
 export const Preview = Object.assign(PreviewComponent, {
     Code: PreviewCode,
     Confirmation: PreviewConfirmation,
+    Content: PreviewContent,
     Header: PreviewHeader,
 });
 //# sourceMappingURL=Preview.js.map

package/lib/esm/ai/preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../../src/ai/preview/Preview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport { CheckIconOutline, XMarkIconOutline } from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\n\ntype PreviewProps = {\n  children: React.ReactNode;\n};\n\n/**\n * Component to use for previewing certain content in AI chat applications.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PreviewComponent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype PreviewHeaderProps = {\n  children?: React.ReactNode;\n  actions?: React.ReactNode;\n};\n\nconst PreviewHeader = ({\n  children,\n  actions,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewHeaderProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-header', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"code\"\n        as=\"div\"\n        className=\"ndl-ai-preview-header-leading-content\"\n      >\n        {children}\n      </Typography>\n\n      {actions && (\n        <div className=\"ndl-ai-preview-header-actions\">{actions}</div>\n      )}\n    </div>\n  );\n};\n\ntype PreviewConfirmationProps = {\n  /** The content to display in the confirmation */\n  children?: React.ReactNode;\n  /** The actions to display in the confirmation, usually two buttons; one for confirming and one for rejecting. */\n  actions: React.ReactNode;\n  /** Whether the confirmation is used as a footer */\n  isFooter?: boolean;\n  /** The status of the confirmation */\n  status?: 'pending' | 'confirmed' | 'rejected';\n  /** The text to display for the confirmed status */\n  confirmedActionText?: string;\n  /** The text to display for the rejected status */\n  rejectedActionText?: string;\n};\n\nconst PreviewConfirmation = ({\n  children,\n  actions,\n  isFooter = false,\n  status = 'pending',\n  confirmedActionText = 'Action confirmed',\n  rejectedActionText = 'Action rejected',\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewConfirmationProps>) => {\n  const classes = classNames('ndl-ai-preview-confirmation', className, {\n    'ndl-ai-preview-confirmation-footer': isFooter,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {!(isFooter && status !== 'pending') && (\n        <Typography\n          as=\"div\"\n          variant={isFooter ? 'subheading-small' : 'body-medium'}\n          className=\"ndl-ai-preview-confirmation-content\"\n        >\n          {children}\n        </Typography>\n      )}\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"ndl-ai-preview-confirmation-actions\"\n      >\n        {status === 'pending' && actions}\n        {status === 'confirmed' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <CheckIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {confirmedActionText}\n          </div>\n        )}\n        {status === 'rejected' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <XMarkIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {rejectedActionText}\n          </div>\n        )}\n      </Typography>\n    </div>\n  );\n};\n\ntype PreviewCodeProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n};\n\nconst PreviewCode = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewCodeProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    PreviewCodeProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-code', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isLoading && (\n        <div className=\"ndl-ai-preview-code-loading\">\n          <LoadingSpinner size=\"medium\" />\n          <Typography variant=\"code\">\n            WRITING {language.toUpperCase()}\n          </Typography>\n        </div>\n      )}\n      {!isLoading && (\n        <>\n          <PreviewHeader\n            className=\"ndl-ai-preview-code-header\"\n            actions={\n              <>\n                <ClipboardButton\n                  textToCopy={code}\n                  type=\"clean-icon-button\"\n                  size=\"small\"\n                />\n                {headerActions}\n              </>\n            }\n          >\n            {language} {language.toLowerCase() === 'cypher' ? 'QUERY' : ''}\n            {label && (\n              <StatusLabel\n                variant={label === 'write' ? 'warning' : 'info'}\n                size=\"small\"\n                fill=\"semi-filled\"\n              >\n                {label.toUpperCase()}\n              </StatusLabel>\n            )}\n          </PreviewHeader>\n          <div className=\"ndl-ai-preview-code-content\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              codeTagProps={{ className: 'n-ai-preview-code' }}\n              showLineNumbers={false}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport const Preview = Object.assign(PreviewComponent, {\n  Code: PreviewCode,\n  Confirmation: PreviewConfirmation,\n  Header: PreviewHeader,\n});\n"]}
+{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../../src/ai/preview/Preview.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 {\n  ClipboardButton,\n  type CodeBlock,\n  LoadingSpinner,\n  StatusLabel,\n  Typography,\n  useNeedleTheme,\n} from '@neo4j-ndl/react';\nimport { CheckIconOutline, XMarkIconOutline } from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n\nimport { type CommonProps } from '../../_common/types';\nimport {\n  type LanguageProp,\n  Languages,\n  loadLanguage,\n} from '../../code-block/code-languages';\nimport ndlCodeDark from '../../code-block/themes/ndl-code-dark';\nimport ndlCodeLight from '../../code-block/themes/ndl-code-light';\n\ntype PreviewProps = {\n  children: React.ReactNode;\n};\n\n/**\n * Component to use for previewing certain content in AI chat applications.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PreviewComponent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype PreviewHeaderProps = {\n  children?: React.ReactNode;\n  actions?: React.ReactNode;\n};\n\nconst PreviewHeader = ({\n  children,\n  actions,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewHeaderProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-header', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Typography\n        variant=\"code\"\n        as=\"div\"\n        className=\"ndl-ai-preview-header-leading-content\"\n      >\n        {children}\n      </Typography>\n\n      {actions && (\n        <div className=\"ndl-ai-preview-header-actions\">{actions}</div>\n      )}\n    </div>\n  );\n};\n\ntype PreviewConfirmationProps = {\n  /** The content to display in the confirmation */\n  children?: React.ReactNode;\n  /** The actions to display in the confirmation, usually two buttons; one for confirming and one for rejecting. */\n  actions: React.ReactNode;\n  /** Whether the confirmation is used as a footer */\n  isFooter?: boolean;\n  /** The status of the confirmation */\n  status?: 'pending' | 'confirmed' | 'rejected';\n  /** The text to display for the confirmed status */\n  confirmedActionText?: string;\n  /** The text to display for the rejected status */\n  rejectedActionText?: string;\n};\n\nconst PreviewConfirmation = ({\n  children,\n  actions,\n  isFooter = false,\n  status = 'pending',\n  confirmedActionText = 'Action confirmed',\n  rejectedActionText = 'Action rejected',\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewConfirmationProps>) => {\n  const classes = classNames('ndl-ai-preview-confirmation', className, {\n    'ndl-ai-preview-confirmation-footer': isFooter,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={classes}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {!(isFooter && status !== 'pending') && (\n        <Typography\n          as=\"div\"\n          variant={isFooter ? 'subheading-small' : 'body-medium'}\n          className=\"ndl-ai-preview-confirmation-content\"\n        >\n          {children}\n        </Typography>\n      )}\n      <Typography\n        variant=\"body-medium\"\n        as=\"div\"\n        className=\"ndl-ai-preview-confirmation-actions\"\n      >\n        {status === 'pending' && actions}\n        {status === 'confirmed' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <CheckIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {confirmedActionText}\n          </div>\n        )}\n        {status === 'rejected' && (\n          <div className=\"ndl-ai-preview-confirmation-confirm-reject\">\n            <XMarkIconOutline className=\"ndl-ai-preview-confirmation-action-icon\" />\n            {rejectedActionText}\n          </div>\n        )}\n      </Typography>\n    </div>\n  );\n};\n\ntype PreviewCodeProps = {\n  /** The code content to display */\n  code: string;\n  /** The language of the code (e.g., 'cypher', 'python', 'javascript') */\n  language: React.ComponentProps<typeof CodeBlock>['language'];\n  /** The current state of the code block */\n  label?: 'read' | 'write';\n  /** Whether the code block is loading */\n  isLoading?: boolean;\n  /** The actions to display in the header. Should be small buttons or icon buttons only. */\n  headerActions?: React.ReactNode;\n  /** The theme of the code block */\n  theme?: 'ndl-code-dark' | 'ndl-code-light';\n};\n\nconst PreviewCode = ({\n  code,\n  language,\n  label,\n  isLoading = false,\n  headerActions,\n  theme,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewCodeProps>) => {\n  const [loadedLanguage, setLoadedLanguage] = useState<\n    PreviewCodeProps['language'] | null\n  >(null);\n  const { theme: ndlTheme } = useNeedleTheme();\n\n  useEffect(() => {\n    if (!language || !(Languages as readonly string[]).includes(language)) {\n      setLoadedLanguage('text');\n      return;\n    }\n\n    loadLanguage(language as LanguageProp)\n      .then((module) => {\n        SyntaxHighlighter.registerLanguage(language, module.default);\n        setLoadedLanguage(language);\n      })\n      .catch((err) => console.error(err));\n  }, [language]);\n\n  const getTheme = () => {\n    switch (theme) {\n      case 'ndl-code-dark':\n        return ndlCodeDark;\n      case 'ndl-code-light':\n        return ndlCodeLight;\n      default:\n        return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-code', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {isLoading && (\n        <div className=\"ndl-ai-preview-code-loading\">\n          <LoadingSpinner size=\"medium\" />\n          <Typography variant=\"code\">\n            WRITING {language.toUpperCase()}\n          </Typography>\n        </div>\n      )}\n      {!isLoading && (\n        <>\n          <PreviewHeader\n            className=\"ndl-ai-preview-code-header\"\n            actions={\n              <>\n                <ClipboardButton\n                  textToCopy={code}\n                  type=\"clean-icon-button\"\n                  size=\"small\"\n                />\n                {headerActions}\n              </>\n            }\n          >\n            {language} {language.toLowerCase() === 'cypher' ? 'QUERY' : ''}\n            {label && (\n              <StatusLabel\n                variant={label === 'write' ? 'warning' : 'info'}\n                size=\"small\"\n                fill=\"semi-filled\"\n              >\n                {label.toUpperCase()}\n              </StatusLabel>\n            )}\n          </PreviewHeader>\n          <div className=\"ndl-ai-preview-code-content\">\n            <SyntaxHighlighter\n              language={loadedLanguage ?? 'text'}\n              style={{\n                ...getTheme(),\n                'pre[class*=\"language-\"]': {\n                  border: 0,\n                  color: 'var(--theme-color-neutral-text-default)',\n                  lineHeight: '1',\n                  overflowX: 'auto',\n                  padding: 'var(--space-12)',\n                  width: 'fit-content',\n                },\n              }}\n              // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n              // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n              // wrapLongLines\n              codeTagProps={{ className: 'n-ai-preview-code' }}\n              showLineNumbers={false}\n            >\n              {code}\n            </SyntaxHighlighter>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\ntype PreviewContentProps = {\n  children?: React.ReactNode;\n};\n\nconst PreviewContent = ({\n  children,\n  ref,\n  style,\n  className,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', PreviewContentProps>) => {\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={classNames('ndl-ai-preview-content', className)}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const Preview = Object.assign(PreviewComponent, {\n  Code: PreviewCode,\n  Confirmation: PreviewConfirmation,\n  Content: PreviewContent,\n  Header: PreviewHeader,\n});\n"]}

package/lib/esm/ai/preview/stories/index.js

@@ -25,6 +25,8 @@ export { default as PreviewCodeLoading } from './preview-code-loading.story';
 export { default as PreviewCodeRead } from './preview-code-read.story';
 export { default as PreviewCodeWrite } from './preview-code-write.story';
 export { default as PreviewCodeLanguages } from './preview-code-languages.story';
+export { default as PreviewSimple } from './preview-simple.story';
+export { default as PreviewSimpleWithContent } from './preview-simple-with-content.story';
 import { removeLicenseHeader } from '../../../_common/export-stories-utils';
 import PreviewCodeConfirmationSrcRaw from './preview-code-confirmation.story?raw';
 import PreviewCodeLanguagesSrcRaw from './preview-code-languages.story?raw';
@@ -33,6 +35,8 @@ import PreviewCodeReadSrcRaw from './preview-code-read.story?raw';
 import PreviewCodeWriteSrcRaw from './preview-code-write.story?raw';
 import PreviewConfirmationStandaloneSrcRaw from './preview-confirmation-standalone.story?raw';
 import PreviewDataGridSrcRaw from './preview-data-grid.story?raw';
+import PreviewSimpleSrcRaw from './preview-simple.story?raw';
+import PreviewSimpleWithContentSrcRaw from './preview-simple-with-content.story?raw';
 export const PreviewDataGridSrc = removeLicenseHeader(PreviewDataGridSrcRaw);
 export const PreviewConfirmationStandaloneSrc = removeLicenseHeader(PreviewConfirmationStandaloneSrcRaw);
 export const PreviewCodeConfirmationSrc = removeLicenseHeader(PreviewCodeConfirmationSrcRaw);
@@ -40,4 +44,6 @@ export const PreviewCodeLoadingSrc = removeLicenseHeader(PreviewCodeLoadingSrcRa
 export const PreviewCodeReadSrc = removeLicenseHeader(PreviewCodeReadSrcRaw);
 export const PreviewCodeWriteSrc = removeLicenseHeader(PreviewCodeWriteSrcRaw);
 export const PreviewCodeLanguagesSrc = removeLicenseHeader(PreviewCodeLanguagesSrcRaw);
+export const PreviewSimpleSrc = removeLicenseHeader(PreviewSimpleSrcRaw);
+export const PreviewSimpleWithContentSrc = removeLicenseHeader(PreviewSimpleWithContentSrcRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/ai/preview/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,6BAA6B,MAAM,uCAAuC,CAAC;AAClF,OAAO,0BAA0B,MAAM,oCAAoC,CAAC;AAC5E,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AACpE,OAAO,mCAAmC,MAAM,6CAA6C,CAAC;AAC9F,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAElE,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,gCAAgC,GAAG,mBAAmB,CACjE,mCAAmC,CACpC,CAAC;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAC3D,6BAA6B,CAC9B,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,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 PreviewDataGrid } from './preview-data-grid.story';\nexport { default as PreviewConfirmationStandalone } from './preview-confirmation-standalone.story';\nexport { default as PreviewCodeConfirmation } from './preview-code-confirmation.story';\nexport { default as PreviewCodeLoading } from './preview-code-loading.story';\nexport { default as PreviewCodeRead } from './preview-code-read.story';\nexport { default as PreviewCodeWrite } from './preview-code-write.story';\nexport { default as PreviewCodeLanguages } from './preview-code-languages.story';\n\nimport { removeLicenseHeader } from '../../../_common/export-stories-utils';\nimport PreviewCodeConfirmationSrcRaw from './preview-code-confirmation.story?raw';\nimport PreviewCodeLanguagesSrcRaw from './preview-code-languages.story?raw';\nimport PreviewCodeLoadingSrcRaw from './preview-code-loading.story?raw';\nimport PreviewCodeReadSrcRaw from './preview-code-read.story?raw';\nimport PreviewCodeWriteSrcRaw from './preview-code-write.story?raw';\nimport PreviewConfirmationStandaloneSrcRaw from './preview-confirmation-standalone.story?raw';\nimport PreviewDataGridSrcRaw from './preview-data-grid.story?raw';\n\nexport const PreviewDataGridSrc = removeLicenseHeader(PreviewDataGridSrcRaw);\nexport const PreviewConfirmationStandaloneSrc = removeLicenseHeader(\n  PreviewConfirmationStandaloneSrcRaw,\n);\nexport const PreviewCodeConfirmationSrc = removeLicenseHeader(\n  PreviewCodeConfirmationSrcRaw,\n);\nexport const PreviewCodeLoadingSrc = removeLicenseHeader(\n  PreviewCodeLoadingSrcRaw,\n);\nexport const PreviewCodeReadSrc = removeLicenseHeader(PreviewCodeReadSrcRaw);\nexport const PreviewCodeWriteSrc = removeLicenseHeader(PreviewCodeWriteSrcRaw);\nexport const PreviewCodeLanguagesSrc = removeLicenseHeader(\n  PreviewCodeLanguagesSrcRaw,\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAE1F,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,6BAA6B,MAAM,uCAAuC,CAAC;AAClF,OAAO,0BAA0B,MAAM,oCAAoC,CAAC;AAC5E,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AACpE,OAAO,mCAAmC,MAAM,6CAA6C,CAAC;AAC9F,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,8BAA8B,MAAM,yCAAyC,CAAC;AAErF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,gCAAgC,GAAG,mBAAmB,CACjE,mCAAmC,CACpC,CAAC;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAC3D,6BAA6B,CAC9B,CAAC;AACF,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CACtD,wBAAwB,CACzB,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,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 PreviewDataGrid } from './preview-data-grid.story';\nexport { default as PreviewConfirmationStandalone } from './preview-confirmation-standalone.story';\nexport { default as PreviewCodeConfirmation } from './preview-code-confirmation.story';\nexport { default as PreviewCodeLoading } from './preview-code-loading.story';\nexport { default as PreviewCodeRead } from './preview-code-read.story';\nexport { default as PreviewCodeWrite } from './preview-code-write.story';\nexport { default as PreviewCodeLanguages } from './preview-code-languages.story';\nexport { default as PreviewSimple } from './preview-simple.story';\nexport { default as PreviewSimpleWithContent } from './preview-simple-with-content.story';\n\nimport { removeLicenseHeader } from '../../../_common/export-stories-utils';\nimport PreviewCodeConfirmationSrcRaw from './preview-code-confirmation.story?raw';\nimport PreviewCodeLanguagesSrcRaw from './preview-code-languages.story?raw';\nimport PreviewCodeLoadingSrcRaw from './preview-code-loading.story?raw';\nimport PreviewCodeReadSrcRaw from './preview-code-read.story?raw';\nimport PreviewCodeWriteSrcRaw from './preview-code-write.story?raw';\nimport PreviewConfirmationStandaloneSrcRaw from './preview-confirmation-standalone.story?raw';\nimport PreviewDataGridSrcRaw from './preview-data-grid.story?raw';\nimport PreviewSimpleSrcRaw from './preview-simple.story?raw';\nimport PreviewSimpleWithContentSrcRaw from './preview-simple-with-content.story?raw';\n\nexport const PreviewDataGridSrc = removeLicenseHeader(PreviewDataGridSrcRaw);\nexport const PreviewConfirmationStandaloneSrc = removeLicenseHeader(\n  PreviewConfirmationStandaloneSrcRaw,\n);\nexport const PreviewCodeConfirmationSrc = removeLicenseHeader(\n  PreviewCodeConfirmationSrcRaw,\n);\nexport const PreviewCodeLoadingSrc = removeLicenseHeader(\n  PreviewCodeLoadingSrcRaw,\n);\nexport const PreviewCodeReadSrc = removeLicenseHeader(PreviewCodeReadSrcRaw);\nexport const PreviewCodeWriteSrc = removeLicenseHeader(PreviewCodeWriteSrcRaw);\nexport const PreviewCodeLanguagesSrc = removeLicenseHeader(\n  PreviewCodeLanguagesSrcRaw,\n);\nexport const PreviewSimpleSrc = removeLicenseHeader(PreviewSimpleSrcRaw);\nexport const PreviewSimpleWithContentSrc = removeLicenseHeader(\n  PreviewSimpleWithContentSrcRaw,\n);\n"]}

package/lib/esm/ai/preview/stories/preview-simple-with-content.story.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { FilledButton, OutlinedButton, ReadOnlyTag } from '@neo4j-ndl/react';
+import { Preview } from '@neo4j-ndl/react/ai';
+import { DeploymentsIcon } from '@neo4j-ndl/react/icons';
+import { useState } from 'react';
+const Component = () => {
+    const [status, setStatus] = useState('pending');
+    return (_jsxs(Preview, { children: [_jsx(Preview.Header, { children: "CONNECT TO INSTANCE" }), _jsx(Preview.Content, { children: _jsx(ReadOnlyTag, { size: "small", leadingVisual: _jsx(DeploymentsIcon, {}), children: "Instance 1" }) }), _jsx(Preview.Confirmation, { status: status, isFooter: true, confirmedActionText: "Allowed action", rejectedActionText: "Skipped action", actions: _jsxs(_Fragment, { children: [_jsx(OutlinedButton, { variant: "neutral", size: "small", onClick: () => setStatus('rejected'), children: "Skip" }), _jsx(FilledButton, { variant: "primary", size: "small", onClick: () => setStatus('confirmed'), children: "Allow" })] }) })] }));
+};
+export default Component;
+//# sourceMappingURL=preview-simple-with-content.story.js.map

package/lib/esm/ai/preview/stories/preview-simple-with-content.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-simple-with-content.story.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-simple-with-content.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GACvB,QAAQ,CACN,SAAS,CACV,CAAC;IAEJ,OAAO,CACL,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,MAAM,sCAAqC,EACpD,KAAC,OAAO,CAAC,OAAO,cACd,KAAC,WAAW,IAAC,IAAI,EAAC,OAAO,EAAC,aAAa,EAAE,KAAC,eAAe,KAAG,2BAE9C,GACE,EAClB,KAAC,OAAO,CAAC,YAAY,IACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,EACd,mBAAmB,EAAC,gBAAgB,EACpC,kBAAkB,EAAC,gBAAgB,EACnC,OAAO,EACL,8BACE,KAAC,cAAc,IACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,qBAGrB,EACjB,KAAC,YAAY,IACX,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,sBAGxB,IACd,GAEiB,IAChB,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 { FilledButton, OutlinedButton, ReadOnlyTag } from '@neo4j-ndl/react';\nimport { Preview } from '@neo4j-ndl/react/ai';\nimport { DeploymentsIcon } from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [status, setStatus] =\n    useState<React.ComponentProps<typeof Preview.Confirmation>['status']>(\n      'pending',\n    );\n\n  return (\n    <Preview>\n      <Preview.Header>CONNECT TO INSTANCE</Preview.Header>\n      <Preview.Content>\n        <ReadOnlyTag size=\"small\" leadingVisual={<DeploymentsIcon />}>\n          Instance 1\n        </ReadOnlyTag>\n      </Preview.Content>\n      <Preview.Confirmation\n        status={status}\n        isFooter={true}\n        confirmedActionText=\"Allowed action\"\n        rejectedActionText=\"Skipped action\"\n        actions={\n          <>\n            <OutlinedButton\n              variant=\"neutral\"\n              size=\"small\"\n              onClick={() => setStatus('rejected')}\n            >\n              Skip\n            </OutlinedButton>\n            <FilledButton\n              variant=\"primary\"\n              size=\"small\"\n              onClick={() => setStatus('confirmed')}\n            >\n              Allow\n            </FilledButton>\n          </>\n        }\n      ></Preview.Confirmation>\n    </Preview>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/ai/preview/stories/preview-simple.story.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { FilledButton, OutlinedButton } from '@neo4j-ndl/react';
+import { Preview } from '@neo4j-ndl/react/ai';
+import { useState } from 'react';
+const Component = () => {
+    const [status, setStatus] = useState('pending');
+    return (_jsxs(Preview, { children: [_jsx(Preview.Header, { children: "CONNECT TO INSTANCE" }), _jsx(Preview.Confirmation, { status: status, isFooter: true, confirmedActionText: "Instance selected", rejectedActionText: "Skipped", actions: _jsxs(_Fragment, { children: [_jsx(OutlinedButton, { variant: "neutral", size: "small", onClick: () => setStatus('rejected'), children: "Skip" }), _jsx(FilledButton, { variant: "primary", size: "small", onClick: () => setStatus('confirmed'), children: "Select instance" })] }) })] }));
+};
+export default Component;
+//# sourceMappingURL=preview-simple.story.js.map

package/lib/esm/ai/preview/stories/preview-simple.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-simple.story.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-simple.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GACvB,QAAQ,CACN,SAAS,CACV,CAAC;IAEJ,OAAO,CACL,MAAC,OAAO,eACN,KAAC,OAAO,CAAC,MAAM,sCAAqC,EACpD,KAAC,OAAO,CAAC,YAAY,IACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,EACd,mBAAmB,EAAC,mBAAmB,EACvC,kBAAkB,EAAC,SAAS,EAC5B,OAAO,EACL,8BACE,KAAC,cAAc,IACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,qBAGrB,EACjB,KAAC,YAAY,IACX,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,gCAGxB,IACd,GAEiB,IAChB,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 { FilledButton, OutlinedButton } from '@neo4j-ndl/react';\nimport { Preview } from '@neo4j-ndl/react/ai';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [status, setStatus] =\n    useState<React.ComponentProps<typeof Preview.Confirmation>['status']>(\n      'pending',\n    );\n\n  return (\n    <Preview>\n      <Preview.Header>CONNECT TO INSTANCE</Preview.Header>\n      <Preview.Confirmation\n        status={status}\n        isFooter={true}\n        confirmedActionText=\"Instance selected\"\n        rejectedActionText=\"Skipped\"\n        actions={\n          <>\n            <OutlinedButton\n              variant=\"neutral\"\n              size=\"small\"\n              onClick={() => setStatus('rejected')}\n            >\n              Skip\n            </OutlinedButton>\n            <FilledButton\n              variant=\"primary\"\n              size=\"small\"\n              onClick={() => setStatus('confirmed')}\n            >\n              Select instance\n            </FilledButton>\n          </>\n        }\n      ></Preview.Confirmation>\n    </Preview>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/ai/prompt/Prompt.js

@@ -30,8 +30,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { CleanIconButton, DropdownButton, LoadingSpinner, Menu, OutlinedButton, Tooltip, Typography, } from '@neo4j-ndl/react';
-import { ArrowSendIcon, ArrowSmallUpIconOutline, StopIconOutline, XMarkIconOutline, } from '@neo4j-ndl/react/icons';
+import { CleanIconButton, DropdownButton, Menu, Tooltip, Typography, } from '@neo4j-ndl/react';
+import { ArrowSendIcon, ArrowSmallUpIconOutline, StopCircleIconOutline, XMarkIconOutline, } from '@neo4j-ndl/react/icons';
 import classNames from 'classnames';
 import { useCallback, useEffect, useRef, useState } from 'react';
 /**
@@ -42,7 +42,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * @alpha - Changes to this component may be breaking.
  */
 const PromptComponent = (_a) => {
-    var { value, onChange, maxRows = 5, isDisabled = false, isRunningPrompt = false, onSubmitPrompt, onCancelPrompt, isSubmitDisabled = false, topContent, bottomContent, disclaimer = 'All information should be verified.', className, style, htmlAttributes, ref, textareaProps } = _a, restProps = __rest(_a, ["value", "onChange", "maxRows", "isDisabled", "isRunningPrompt", "onSubmitPrompt", "onCancelPrompt", "isSubmitDisabled", "topContent", "bottomContent", "disclaimer", "className", "style", "htmlAttributes", "ref", "textareaProps"]);
+    var { value, onChange, maxRows = 5, isDisabled = false, isRunningPrompt = false, onSubmitPrompt, onCancelPrompt, isSubmitDisabled = false, headerContent, topContent, bottomContent, bottomTrailingContent, disclaimer = 'All information should be verified.', className, style, htmlAttributes, ref, textareaProps } = _a, restProps = __rest(_a, ["value", "onChange", "maxRows", "isDisabled", "isRunningPrompt", "onSubmitPrompt", "onCancelPrompt", "isSubmitDisabled", "headerContent", "topContent", "bottomContent", "bottomTrailingContent", "disclaimer", "className", "style", "htmlAttributes", "ref", "textareaProps"]);
     const classes = classNames('ndl-ai-prompt', className, {
         'ndl-disabled': isDisabled,
     });
@@ -121,9 +121,7 @@ const PromptComponent = (_a) => {
         adjustTextareaHeight();
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     };
-    return (_jsxs("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-ai-prompt-wrapper", children: [_jsx("div", { className: classNames('ndl-ai-prompt-loading-container', {
-                            'ndl-expanded': isRunningPrompt,
-                        }), "aria-hidden": !isRunningPrompt, inert: !isRunningPrompt, children: _jsx("div", { className: "ndl-ai-prompt-loading-shell", children: _jsxs("div", { className: "ndl-ai-prompt-loading-content", children: [_jsx(LoadingSpinner, { size: "medium" }), _jsxs(Typography, { variant: "body-medium", children: ["Working", _jsxs("span", { className: "ndl-ai-prompt-loading-dots", children: [_jsx("span", { children: "." }), _jsx("span", { children: "." }), _jsx("span", { children: "." })] })] })] }) }) }), _jsxs("div", { className: "ndl-ai-prompt-wrapper-inner", children: [Boolean(topContent) && (_jsx("div", { className: "ndl-ai-prompt-textarea-above", ref: textareaAboveRef, children: topContent })), _jsx("textarea", Object.assign({ placeholder: "Ask anything", className: "ndl-ai-prompt-textarea", rows: 1, onChange: handleInput, value: value, ref: textareaRef, disabled: isDisabled, onKeyDown: (e) => {
+    return (_jsxs("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-ai-prompt-wrapper", children: [Boolean(headerContent) && (_jsx("div", { className: "ndl-ai-prompt-header", children: headerContent })), _jsxs("div", { className: "ndl-ai-prompt-wrapper-inner", children: [Boolean(topContent) && (_jsx("div", { className: "ndl-ai-prompt-textarea-above", ref: textareaAboveRef, children: topContent })), _jsx("textarea", Object.assign({ placeholder: "Ask anything", className: "ndl-ai-prompt-textarea", rows: 1, onChange: handleInput, value: value, ref: textareaRef, disabled: isDisabled, onKeyDown: (e) => {
                                     if (e.key === 'Enter' &&
                                         !e.shiftKey &&
                                         isSubmitDisabled !== true) {
@@ -132,18 +130,10 @@ const PromptComponent = (_a) => {
                                             onSubmitPrompt === null || onSubmitPrompt === void 0 ? void 0 : onSubmitPrompt(e);
                                         }
                                     }
-                                } }, textareaProps)), _jsx("div", { className: "ndl-ai-prompt-textarea-below", children: Boolean(bottomContent) && (_jsx("div", { className: "ndl-ai-prompt-textarea-below-leading", children: bottomContent })) })] }), _jsx(SubmitPromptButton, { isDisabled: isSubmitDisabled, isRunningPrompt: isRunningPrompt, onSubmit: onSubmitPrompt, onCancel: onCancelPrompt })] }), Boolean(disclaimer) && (_jsx(Typography, { variant: "body-small", className: "ndl-ai-prompt-footer", children: disclaimer }))] })));
+                                } }, textareaProps)), _jsxs("div", { className: "ndl-ai-prompt-textarea-below", children: [Boolean(bottomContent) && (_jsx("div", { className: "ndl-ai-prompt-textarea-below-leading", children: bottomContent })), _jsxs("div", { className: "ndl-ai-prompt-textarea-below-trailing", children: [bottomTrailingContent, _jsx(SubmitPromptButton, { isDisabled: isSubmitDisabled, isRunningPrompt: isRunningPrompt, onSubmit: onSubmitPrompt, onCancel: onCancelPrompt })] })] })] })] }), Boolean(disclaimer) && (_jsx(Typography, { variant: "body-small", className: "ndl-ai-prompt-footer", children: disclaimer }))] })));
 };
 const SubmitPromptButton = ({ onSubmit, onCancel, isDisabled, isRunningPrompt, }) => {
-    return (_jsx("div", { className: classNames('ndl-ai-prompt-button-container', {
-            'ndl-in-loading': isRunningPrompt,
-        }), children: _jsxs(Tooltip, { type: "simple", isDisabled: isDisabled || isRunningPrompt, hoverDelay: { close: 0, open: 500 }, shouldCloseOnReferenceClick: true, children: [_jsx(Tooltip.Trigger, { hasButtonWrapper: true, children: _jsx("button", { type: "button", style: {
-                            borderRadius: isRunningPrompt
-                                ? 'var(--border-radius-sm)'
-                                : 'var(--border-radius-lg)',
-                        }, onClick: isRunningPrompt ? onCancel : onSubmit, disabled: isDisabled, "aria-label": isRunningPrompt ? 'Stop' : 'Send', children: isRunningPrompt === true ? (_jsx(OutlinedButton, { as: "div", variant: "neutral", className: "ndl-ai-prompt-stop-button", size: "small", leadingVisual: _jsx(StopIconOutline, {}), children: "Stop" })) : (_jsx(CleanIconButton, { description: "Send", as: "div", className: "ndl-ai-prompt-submit-button", size: "medium", isDisabled: isDisabled, htmlAttributes: {
-                                'aria-pressed': undefined,
-                            }, children: _jsx(ArrowSmallUpIconOutline, {}) })) }) }), _jsx(Tooltip.Content, { children: "Send" })] }) }));
+    return (_jsx(CleanIconButton, { className: "ndl-ai-prompt-submit-button", description: isRunningPrompt === true ? 'Stop' : 'Send', size: "small", isDisabled: isDisabled, onClick: isRunningPrompt === true ? onCancel : onSubmit, children: isRunningPrompt === true ? (_jsx(StopCircleIconOutline, {})) : (_jsx(ArrowSmallUpIconOutline, {})) }));
 };
 const AgentSelect = ({ value, options = [], onChange }) => {
     var _a, _b, _c;