@neo4j-ndl/react 4.16.1 → 4.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/accordion/Accordion.js +2 -2
- package/lib/cjs/accordion/Accordion.js.map +1 -1
- package/lib/cjs/ai/file-tag/FileTag.js +2 -2
- package/lib/cjs/ai/file-tag/FileTag.js.map +1 -1
- package/lib/cjs/ai/image-tag/ImageTag.js +2 -2
- package/lib/cjs/ai/image-tag/ImageTag.js.map +1 -1
- package/lib/cjs/ai/presence/Presence.js +2 -2
- package/lib/cjs/ai/presence/Presence.js.map +1 -1
- package/lib/cjs/ai/preview/Preview.js +3 -2
- package/lib/cjs/ai/preview/Preview.js.map +1 -1
- package/lib/cjs/ai/prompt/Prompt.js +6 -3
- package/lib/cjs/ai/prompt/Prompt.js.map +1 -1
- package/lib/cjs/ai/reasoning/Reasoning.js +2 -2
- package/lib/cjs/ai/reasoning/Reasoning.js.map +1 -1
- package/lib/cjs/ai/tool-call/ToolCall.js +2 -2
- package/lib/cjs/ai/tool-call/ToolCall.js.map +1 -1
- package/lib/cjs/avatar/Avatar.js +2 -2
- package/lib/cjs/avatar/Avatar.js.map +1 -1
- package/lib/cjs/banner/Banner.js +12 -7
- package/lib/cjs/banner/Banner.js.map +1 -1
- package/lib/cjs/breadcrumbs/Breadcrumbs.js +2 -2
- package/lib/cjs/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/cjs/clipboard-button/ClipboardButton.js +2 -2
- package/lib/cjs/clipboard-button/ClipboardButton.js.map +1 -1
- package/lib/cjs/code-block/CodeBlock.js +3 -2
- package/lib/cjs/code-block/CodeBlock.js.map +1 -1
- package/lib/cjs/color-picker/ColorPicker.js +2 -2
- package/lib/cjs/color-picker/ColorPicker.js.map +1 -1
- package/lib/cjs/data-grid/Components.js +18 -11
- package/lib/cjs/data-grid/Components.js.map +1 -1
- package/lib/cjs/date-picker/DatePicker.js +8 -5
- package/lib/cjs/date-picker/DatePicker.js.map +1 -1
- package/lib/cjs/dialog/Dialog.js +8 -5
- package/lib/cjs/dialog/Dialog.js.map +1 -1
- package/lib/cjs/dismissible-tag/DismissibleTag.js +2 -2
- package/lib/cjs/dismissible-tag/DismissibleTag.js.map +1 -1
- package/lib/cjs/drawer/Drawer.js +2 -2
- package/lib/cjs/drawer/Drawer.js.map +1 -1
- package/lib/cjs/dropdown-button/DropdownButton.js +2 -2
- package/lib/cjs/dropdown-button/DropdownButton.js.map +1 -1
- package/lib/cjs/dropzone/Dropzone.js +5 -3
- package/lib/cjs/dropzone/Dropzone.js.map +1 -1
- package/lib/cjs/icon-button-array/IconButtonArray.js +6 -3
- package/lib/cjs/icon-button-array/IconButtonArray.js.map +1 -1
- package/lib/cjs/inline-edit/InlineEdit.js +6 -4
- package/lib/cjs/inline-edit/InlineEdit.js.map +1 -1
- package/lib/cjs/menu/Menu.js +4 -3
- package/lib/cjs/menu/Menu.js.map +1 -1
- package/lib/cjs/next/tree-view/TreeView.js +4 -3
- package/lib/cjs/next/tree-view/TreeView.js.map +1 -1
- package/lib/cjs/select/Overrides.js +4 -3
- package/lib/cjs/select/Overrides.js.map +1 -1
- package/lib/cjs/select/Select.js +2 -2
- package/lib/cjs/select/Select.js.map +1 -1
- package/lib/cjs/select-icon-button/SelectIconButton.js +2 -2
- package/lib/cjs/select-icon-button/SelectIconButton.js.map +1 -1
- package/lib/cjs/side-navigation/SideNavigation.js +4 -3
- package/lib/cjs/side-navigation/SideNavigation.js.map +1 -1
- package/lib/cjs/status-label/StatusLabel.js +10 -7
- package/lib/cjs/status-label/StatusLabel.js.map +1 -1
- package/lib/cjs/tabs/Tabs.js +4 -3
- package/lib/cjs/tabs/Tabs.js.map +1 -1
- package/lib/cjs/tag/Tag.js +2 -2
- package/lib/cjs/tag/Tag.js.map +1 -1
- package/lib/cjs/text-area/TextArea.js +3 -2
- package/lib/cjs/text-area/TextArea.js.map +1 -1
- package/lib/cjs/text-input/TextInput.js +6 -4
- package/lib/cjs/text-input/TextInput.js.map +1 -1
- package/lib/cjs/text-link/TextLink.js +3 -2
- package/lib/cjs/text-link/TextLink.js.map +1 -1
- package/lib/cjs/time-picker/TimePicker.js +3 -2
- package/lib/cjs/time-picker/TimePicker.js.map +1 -1
- package/lib/cjs/timezone-picker/TimeZonePicker.js +2 -2
- package/lib/cjs/timezone-picker/TimeZonePicker.js.map +1 -1
- package/lib/cjs/toast/Toast.js +6 -4
- package/lib/cjs/toast/Toast.js.map +1 -1
- package/lib/cjs/tree-view/TreeItemWrapper.js +2 -2
- package/lib/cjs/tree-view/TreeItemWrapper.js.map +1 -1
- package/lib/cjs/tree-view/TreeViewTextItem.js +3 -2
- package/lib/cjs/tree-view/TreeViewTextItem.js.map +1 -1
- package/lib/esm/accordion/Accordion.js +1 -1
- package/lib/esm/accordion/Accordion.js.map +1 -1
- package/lib/esm/ai/file-tag/FileTag.js +1 -1
- package/lib/esm/ai/file-tag/FileTag.js.map +1 -1
- package/lib/esm/ai/image-tag/ImageTag.js +1 -1
- package/lib/esm/ai/image-tag/ImageTag.js.map +1 -1
- package/lib/esm/ai/presence/Presence.js +1 -1
- package/lib/esm/ai/presence/Presence.js.map +1 -1
- package/lib/esm/ai/preview/Preview.js +2 -1
- package/lib/esm/ai/preview/Preview.js.map +1 -1
- package/lib/esm/ai/prompt/Prompt.js +4 -1
- package/lib/esm/ai/prompt/Prompt.js.map +1 -1
- package/lib/esm/ai/reasoning/Reasoning.js +1 -1
- package/lib/esm/ai/reasoning/Reasoning.js.map +1 -1
- package/lib/esm/ai/tool-call/ToolCall.js +1 -1
- package/lib/esm/ai/tool-call/ToolCall.js.map +1 -1
- package/lib/esm/avatar/Avatar.js +1 -1
- package/lib/esm/avatar/Avatar.js.map +1 -1
- package/lib/esm/banner/Banner.js +6 -1
- package/lib/esm/banner/Banner.js.map +1 -1
- package/lib/esm/breadcrumbs/Breadcrumbs.js +1 -1
- package/lib/esm/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/esm/clipboard-button/ClipboardButton.js +1 -1
- package/lib/esm/clipboard-button/ClipboardButton.js.map +1 -1
- package/lib/esm/code-block/CodeBlock.js +2 -1
- package/lib/esm/code-block/CodeBlock.js.map +1 -1
- package/lib/esm/color-picker/ColorPicker.js +1 -1
- package/lib/esm/color-picker/ColorPicker.js.map +1 -1
- package/lib/esm/data-grid/Components.js +8 -1
- package/lib/esm/data-grid/Components.js.map +1 -1
- package/lib/esm/date-picker/DatePicker.js +4 -1
- package/lib/esm/date-picker/DatePicker.js.map +1 -1
- package/lib/esm/dialog/Dialog.js +4 -1
- package/lib/esm/dialog/Dialog.js.map +1 -1
- package/lib/esm/dismissible-tag/DismissibleTag.js +1 -1
- package/lib/esm/dismissible-tag/DismissibleTag.js.map +1 -1
- package/lib/esm/drawer/Drawer.js +1 -1
- package/lib/esm/drawer/Drawer.js.map +1 -1
- package/lib/esm/dropdown-button/DropdownButton.js +1 -1
- package/lib/esm/dropdown-button/DropdownButton.js.map +1 -1
- package/lib/esm/dropzone/Dropzone.js +3 -1
- package/lib/esm/dropzone/Dropzone.js.map +1 -1
- package/lib/esm/icon-button-array/IconButtonArray.js +4 -1
- package/lib/esm/icon-button-array/IconButtonArray.js.map +1 -1
- package/lib/esm/inline-edit/InlineEdit.js +3 -1
- package/lib/esm/inline-edit/InlineEdit.js.map +1 -1
- package/lib/esm/menu/Menu.js +2 -1
- package/lib/esm/menu/Menu.js.map +1 -1
- package/lib/esm/next/tree-view/TreeView.js +2 -1
- package/lib/esm/next/tree-view/TreeView.js.map +1 -1
- package/lib/esm/select/Overrides.js +2 -1
- package/lib/esm/select/Overrides.js.map +1 -1
- package/lib/esm/select/Select.js +1 -1
- package/lib/esm/select/Select.js.map +1 -1
- package/lib/esm/select-icon-button/SelectIconButton.js +1 -1
- package/lib/esm/select-icon-button/SelectIconButton.js.map +1 -1
- package/lib/esm/side-navigation/SideNavigation.js +2 -1
- package/lib/esm/side-navigation/SideNavigation.js.map +1 -1
- package/lib/esm/status-label/StatusLabel.js +4 -1
- package/lib/esm/status-label/StatusLabel.js.map +1 -1
- package/lib/esm/tabs/Tabs.js +2 -1
- package/lib/esm/tabs/Tabs.js.map +1 -1
- package/lib/esm/tag/Tag.js +1 -1
- package/lib/esm/tag/Tag.js.map +1 -1
- package/lib/esm/text-area/TextArea.js +2 -1
- package/lib/esm/text-area/TextArea.js.map +1 -1
- package/lib/esm/text-input/TextInput.js +3 -1
- package/lib/esm/text-input/TextInput.js.map +1 -1
- package/lib/esm/text-link/TextLink.js +2 -1
- package/lib/esm/text-link/TextLink.js.map +1 -1
- package/lib/esm/time-picker/TimePicker.js +2 -1
- package/lib/esm/time-picker/TimePicker.js.map +1 -1
- package/lib/esm/timezone-picker/TimeZonePicker.js +1 -1
- package/lib/esm/timezone-picker/TimeZonePicker.js.map +1 -1
- package/lib/esm/toast/Toast.js +3 -1
- package/lib/esm/toast/Toast.js.map +1 -1
- package/lib/esm/tree-view/TreeItemWrapper.js +1 -1
- package/lib/esm/tree-view/TreeItemWrapper.js.map +1 -1
- package/lib/esm/tree-view/TreeViewTextItem.js +2 -1
- package/lib/esm/tree-view/TreeViewTextItem.js.map +1 -1
- package/lib/types/ai/file-tag/FileTag.d.ts.map +1 -1
- package/lib/types/ai/image-tag/ImageTag.d.ts.map +1 -1
- package/lib/types/ai/presence/Presence.d.ts.map +1 -1
- package/lib/types/ai/preview/Preview.d.ts.map +1 -1
- package/lib/types/ai/prompt/Prompt.d.ts.map +1 -1
- package/lib/types/ai/reasoning/Reasoning.d.ts.map +1 -1
- package/lib/types/ai/tool-call/ToolCall.d.ts.map +1 -1
- package/lib/types/banner/Banner.d.ts.map +1 -1
- package/lib/types/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/lib/types/code-block/CodeBlock.d.ts.map +1 -1
- package/lib/types/data-grid/Components.d.ts +1 -1
- package/lib/types/data-grid/Components.d.ts.map +1 -1
- package/lib/types/date-picker/DatePicker.d.ts.map +1 -1
- package/lib/types/dialog/Dialog.d.ts.map +1 -1
- package/lib/types/dropzone/Dropzone.d.ts.map +1 -1
- package/lib/types/icon-button-array/IconButtonArray.d.ts.map +1 -1
- package/lib/types/inline-edit/InlineEdit.d.ts.map +1 -1
- package/lib/types/menu/Menu.d.ts.map +1 -1
- package/lib/types/next/tree-view/TreeView.d.ts.map +1 -1
- package/lib/types/select/Overrides.d.ts.map +1 -1
- package/lib/types/side-navigation/SideNavigation.d.ts.map +1 -1
- package/lib/types/status-label/StatusLabel.d.ts.map +1 -1
- package/lib/types/tabs/Tabs.d.ts.map +1 -1
- package/lib/types/text-area/TextArea.d.ts.map +1 -1
- package/lib/types/text-input/TextInput.d.ts.map +1 -1
- package/lib/types/text-link/TextLink.d.ts.map +1 -1
- package/lib/types/time-picker/TimePicker.d.ts.map +1 -1
- package/lib/types/toast/Toast.d.ts.map +1 -1
- package/lib/types/tree-view/TreeView.d.ts.map +1 -1
- package/lib/types/tree-view/TreeViewTextItem.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
40
40
|
const react_1 = require("react");
|
|
41
41
|
const utils_1 = require("../_common/utils");
|
|
42
42
|
const divider_1 = require("../divider");
|
|
43
|
-
const
|
|
43
|
+
const ChevronDownIconOutline_1 = require("../icons/generated/heroIcons/ChevronDownIconOutline");
|
|
44
44
|
const typography_1 = require("../typography");
|
|
45
45
|
const accordion_context_1 = require("./accordion-context");
|
|
46
46
|
var AccordionSelector;
|
|
@@ -190,7 +190,7 @@ const BaseAccordionItem = ({ itemId, children, title, className = '', arrowPosit
|
|
|
190
190
|
'ndl-accordion-item-content-expanded': isExpanded,
|
|
191
191
|
'ndl-accordion-item-content-leading': arrowPosition === 'leading',
|
|
192
192
|
});
|
|
193
|
-
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, id: itemElementId }, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: headerClasses, id: headerElementId, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: `h${headingLevel}`, variant: titleTypographyVariant, className: "ndl-accordion-item-heading", children: (0, jsx_runtime_1.jsx)("button", { type: "button", id: buttonElementId, onClick: handleOnClick, className: buttonClasses, "aria-expanded": isExpanded, "aria-disabled": isDisabled, "aria-controls": panelElementId, disabled: isDisabled, children: (0, jsx_runtime_1.jsxs)("span", { className: iconClasses, children: [(0, jsx_runtime_1.jsx)("span", { className: titleClasses, children: title }), (0, jsx_runtime_1.jsx)(
|
|
193
|
+
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, id: itemElementId }, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: headerClasses, id: headerElementId, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: `h${headingLevel}`, variant: titleTypographyVariant, className: "ndl-accordion-item-heading", children: (0, jsx_runtime_1.jsx)("button", { type: "button", id: buttonElementId, onClick: handleOnClick, className: buttonClasses, "aria-expanded": isExpanded, "aria-disabled": isDisabled, "aria-controls": panelElementId, disabled: isDisabled, children: (0, jsx_runtime_1.jsxs)("span", { className: iconClasses, children: [(0, jsx_runtime_1.jsx)("span", { className: titleClasses, children: title }), (0, jsx_runtime_1.jsx)(ChevronDownIconOutline_1.ChevronDownIconOutline, { className: (0, classnames_1.default)('ndl-accordion-item-header-icon', {
|
|
194
194
|
'-n-rotate-180': isExpanded,
|
|
195
195
|
}) })] }) }) }), trailingContent && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: "div", variant: "body-medium", children: trailingContent }))] }), (0, jsx_runtime_1.jsx)("div", { id: panelElementId, ref: contentRef, className: contentClasses, "aria-hidden": !isExpanded, "aria-labelledby": buttonElementId, role: "region", children: (0, jsx_runtime_1.jsx)("div", { ref: innerContentRef, className: "ndl-accordion-item-content-inner", onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", className: "n-text-neutral-text-weak", as: "div", children: children }) }) }), hasDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, {})] })));
|
|
196
196
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.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 classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n type AccordionItemId,\n type AccordionItemProps,\n type AccordionProps,\n type ClassicItemProps,\n type IsMultiple,\n type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n Item = '.ndl-accordion-item',\n ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n accordionElement: Element,\n selector: string,\n direction: 'next' | 'prev' = 'next',\n): Element | null => {\n const itemParent = accordionElement.closest(AccordionSelector.Item);\n if (!itemParent) {\n return null;\n }\n\n return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n children,\n as,\n isMultiple,\n onChange,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n const accordionRef = useRef<U>(null);\n\n useImperativeHandle(ref, () => accordionRef.current!);\n\n const Component: React.ElementType = as || 'div';\n\n // The following function includes code needed to be\n // able to navigate with the arrow keys (not tab).\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const accordionElement = accordionRef.current;\n if (!accordionElement) {\n return;\n }\n const activeElement = document.activeElement as HTMLElement;\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'next',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'prev',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n activeElement.click();\n }\n };\n\n const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n const accordionButton = accordionHtmlElement\n .getElementsByClassName('ndl-accordion-item-header-button')\n .item(0);\n\n if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n accordionButton.focus();\n }\n };\n\n const classes = classNames('ndl-accordion', className);\n\n // Destructure and omit keys from DOM spread\n const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n restProps as Record<string, unknown> as {\n expandedItemIds?: T[];\n expandedItemId?: T | null;\n [key: string]: unknown;\n };\n\n const contextValue = isMultiple\n ? ({\n expandedItemIds,\n isMultiple,\n onChange,\n } as IsMultiple<T>)\n : ({\n expandedItemId,\n isMultiple,\n onChange,\n } as IsNotMultiple<T>);\n\n return (\n <Component\n className={classes}\n style={style}\n ref={accordionRef}\n onKeyDown={handleKeyDown}\n role=\"presentation\"\n {...restAccordionProps}\n {...htmlAttributes}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </Component>\n );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n itemId,\n children,\n title,\n className = '',\n arrowPosition = 'leading',\n isDisabled = false,\n onExpandedChange,\n htmlAttributes,\n style,\n as,\n titleTypographyVariant = 'subheading-medium',\n hasDivider = true,\n trailingContent,\n headingLevel = 2,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const innerContentRef = useRef<HTMLDivElement>(null);\n const itemElementId = createItemId('item', itemId);\n const headerElementId = createItemId('header', itemId);\n const buttonElementId = createItemId('button', itemId);\n const panelElementId = createItemId('panel', itemId);\n const Component: React.ElementType = as || 'div';\n\n const context = useAccordionContext();\n const { isMultiple } = context;\n\n const isExpanded = isMultiple\n ? context.expandedItemIds.includes(itemId)\n : context.expandedItemId === itemId;\n\n const handleOnClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n // Custom callback to call.\n if (onExpandedChange !== undefined) {\n onExpandedChange(!isExpanded);\n }\n\n if (isMultiple) {\n const { expandedItemIds, onChange }: IsMultiple<T> = context;\n // Multiple expanded.\n if (isExpanded) {\n // Remove from list.\n const newArray: T[] = expandedItemIds.filter(\n (activeId) => activeId !== itemId,\n );\n onChange(newArray);\n } else if (!isExpanded) {\n // Add to list.\n const newArray = [...expandedItemIds];\n newArray.push(itemId);\n onChange(newArray);\n }\n } else {\n const { onChange }: IsNotMultiple<T> = context;\n // Single expanded.\n if (isExpanded) {\n // Set null.\n onChange(null);\n } else if (!isExpanded) {\n // Set to id.\n onChange(itemId);\n }\n }\n\n // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n document.activeElement?.parentElement?.focus();\n }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n const classes = classNames('ndl-accordion-item', className, {\n 'ndl-accordion-item-disabled': isDisabled,\n 'ndl-accordion-item-expanded': isExpanded,\n });\n\n const headerClasses = classNames('ndl-accordion-item-header', {\n 'ndl-accordion-item-header-disabled': isDisabled,\n });\n\n const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n 'ndl-accordion-item-header-icon-wrapper-leading':\n arrowPosition === 'leading',\n });\n\n const buttonClasses = classNames('ndl-accordion-item-header-button', {\n 'ndl-accordion-item-header-button-disabled': isDisabled,\n });\n\n const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n 'ndl-accordion-item-header-button-title': isDisabled,\n 'ndl-accordion-item-header-button-title-leading':\n arrowPosition === 'leading',\n });\n\n const contentClasses = classNames('ndl-accordion-item-content', {\n 'ndl-accordion-item-content-expanded': isExpanded,\n 'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n });\n\n return (\n <Component\n className={classes}\n style={style}\n id={itemElementId}\n {...htmlAttributes}\n >\n <div className={headerClasses} id={headerElementId}>\n <Typography\n as={`h${headingLevel}`}\n variant={titleTypographyVariant}\n className=\"ndl-accordion-item-heading\"\n >\n <button\n type=\"button\"\n id={buttonElementId}\n onClick={handleOnClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n aria-disabled={isDisabled}\n aria-controls={panelElementId}\n disabled={isDisabled}\n >\n <span className={iconClasses}>\n <span className={titleClasses}>{title}</span>\n\n <ChevronDownIconOutline\n className={classNames('ndl-accordion-item-header-icon', {\n '-n-rotate-180': isExpanded,\n })}\n />\n </span>\n </button>\n </Typography>\n {trailingContent && (\n <Typography as=\"div\" variant=\"body-medium\">\n {trailingContent}\n </Typography>\n )}\n </div>\n\n <div\n id={panelElementId}\n ref={contentRef}\n className={contentClasses}\n aria-hidden={!isExpanded}\n aria-labelledby={buttonElementId}\n role=\"region\"\n >\n {/* The <div> element has a child <button> element that allows keyboard interaction */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={innerContentRef}\n className=\"ndl-accordion-item-content-inner\"\n onKeyDown={(event) => event.stopPropagation()}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weak\"\n as=\"div\"\n >\n {children}\n </Typography>\n </div>\n </div>\n {hasDivider && <Divider />}\n </Component>\n );\n};\n\nconst AccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-classic', className);\n\n return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n AccordionItemProps<T>,\n 'hasDivider'\n>;\n\nconst CleanItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-clean', className);\n\n return (\n <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n CleanItem: CleanItem,\n Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAEpC,iCAAiE;AAGjE,4CAA6C;AAC7C,wCAAqC;AACrC,gGAA6F;AAC7F,8CAA2C;AAC3C,2DAA4E;AAU5E,IAAK,iBAGJ;AAHD,WAAK,iBAAiB;IACpB,iDAA4B,CAAA;IAC5B,8FAAyE,CAAA;AAC3E,CAAC,EAHI,iBAAiB,KAAjB,iBAAiB,QAGrB;AAED,MAAM,gBAAgB,GAAG,CACvB,gBAAyB,EACzB,QAAgB,EAChB,YAA6B,MAAM,EACnB,EAAE;IAClB,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACpE,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,IAAA,iBAAS,EAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,SAAS,kBAAkB,CAGpD,EAU6C;QAV7C,EACA,QAAQ,EACR,EAAE,EACF,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAE0C,EAD1C,SAAS,cATZ,2FAUD,CADa;IAEZ,MAAM,YAAY,GAAG,IAAA,cAAM,EAAI,IAAI,CAAC,CAAC;IAErC,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAQ,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAsB,EAAE,IAAI,KAAK,CAAC;IAEjD,oDAAoD;IACpD,kDAAkD;IAClD,MAAM,aAAa,GAAG,CAAC,KAA0C,EAAE,EAAE;QACnE,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,MAAM,aAAa,GAAG,QAAQ,CAAC,aAA4B,CAAC;QAC5D,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,aAAa,EACb,iBAAiB,CAAC,eAAe,EACjC,MAAM,CACP,CAAC;YACF,MAAM,SAAS,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,iBAAiB,CAAC;YAEvD,IAAI,SAAS,IAAI,SAAS,YAAY,WAAW,EAAE,CAAC;gBAClD,kBAAkB,CAAC,SAAwB,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,aAAa,EACb,iBAAiB,CAAC,eAAe,EACjC,MAAM,CACP,CAAC;YACF,MAAM,SAAS,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,iBAAiB,CAAC;YAEvD,IAAI,SAAS,IAAI,SAAS,YAAY,WAAW,EAAE,CAAC;gBAClD,kBAAkB,CAAC,SAAwB,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,aAAa,CAAC,KAAK,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,oBAAiC,EAAE,EAAE;QAC/D,MAAM,eAAe,GAAG,oBAAoB;aACzC,sBAAsB,CAAC,kCAAkC,CAAC;aAC1D,IAAI,CAAC,CAAC,CAAC,CAAC;QAEX,IAAI,eAAe,KAAK,IAAI,IAAI,eAAe,YAAY,WAAW,EAAE,CAAC;YACvE,eAAe,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IAEvD,4CAA4C;IAC5C,MAAM,KACJ,SAIC,EALG,EAAE,eAAe,EAAE,cAAc,OAKpC,EALyC,kBAAkB,cAAxD,qCAA0D,CAK7D,CAAC;IAEJ,MAAM,YAAY,GAAG,UAAU;QAC7B,CAAC,CAAE;YACC,eAAe;YACf,UAAU;YACV,QAAQ;SACS;QACrB,CAAC,CAAE;YACC,cAAc;YACd,UAAU;YACV,QAAQ;SACY,CAAC;IAE3B,OAAO,CACL,uBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,cAAc,IACf,kBAAkB,EAClB,cAAc,cAElB,uBAAC,oCAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,QAAQ,GACiB,IAClB,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAmB,EAAE,EAAE,CACzD,oBAAoB,IAAI,MAAM,EAAE,EAAE,CAAC;AAErC,MAAM,iBAAiB,GAAG,CAGxB,EACA,MAAM,EACN,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,EAAE,EACd,aAAa,GAAG,SAAS,EACzB,UAAU,GAAG,KAAK,EAClB,gBAAgB,EAChB,cAAc,EACd,KAAK,EACL,EAAE,EACF,sBAAsB,GAAG,mBAAmB,EAC5C,UAAU,GAAG,IAAI,EACjB,eAAe,EACf,YAAY,GAAG,CAAC,GACiC,EAAE,EAAE;IACrD,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACvD,MAAM,eAAe,GAAG,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACrD,MAAM,SAAS,GAAsB,EAAE,IAAI,KAAK,CAAC;IAEjD,MAAM,OAAO,GAAG,IAAA,uCAAmB,GAAE,CAAC;IACtC,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAE/B,MAAM,UAAU,GAAG,UAAU;QAC3B,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC1C,CAAC,CAAC,OAAO,CAAC,cAAc,KAAK,MAAM,CAAC;IAEtC,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,2BAA2B;QAC3B,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACnC,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAkB,OAAO,CAAC;YAC7D,qBAAqB;YACrB,IAAI,UAAU,EAAE,CAAC;gBACf,oBAAoB;gBACpB,MAAM,QAAQ,GAAQ,eAAe,CAAC,MAAM,CAC1C,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,MAAM,CAClC,CAAC;gBACF,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACrB,CAAC;iBAAM,IAAI,CAAC,UAAU,EAAE,CAAC;gBACvB,eAAe;gBACf,MAAM,QAAQ,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC;gBACtC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACtB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,EAAE,QAAQ,EAAE,GAAqB,OAAO,CAAC;YAC/C,mBAAmB;YACnB,IAAI,UAAU,EAAE,CAAC;gBACf,YAAY;gBACZ,QAAQ,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC;iBAAM,IAAI,CAAC,UAAU,EAAE,CAAC;gBACvB,aAAa;gBACb,QAAQ,CAAC,MAAM,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,yFAAyF;QACzF,MAAA,MAAA,QAAQ,CAAC,aAAa,0CAAE,aAAa,0CAAE,KAAK,EAAE,CAAC;IACjD,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5E,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,EAAE;QAC1D,6BAA6B,EAAE,UAAU;QACzC,6BAA6B,EAAE,UAAU;KAC1C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,2BAA2B,EAAE;QAC5D,oCAAoC,EAAE,UAAU;KACjD,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,oBAAU,EAAC,wCAAwC,EAAE;QACvE,gDAAgD,EAC9C,aAAa,KAAK,SAAS;KAC9B,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,kCAAkC,EAAE;QACnE,2CAA2C,EAAE,UAAU;KACxD,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,wCAAwC,EAAE;QACxE,wCAAwC,EAAE,UAAU;QACpD,gDAAgD,EAC9C,aAAa,KAAK,SAAS;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE;QAC9D,qCAAqC,EAAE,UAAU;QACjD,oCAAoC,EAAE,aAAa,KAAK,SAAS;KAClE,CAAC,CAAC;IAEH,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,aAAa,IACb,cAAc,eAElB,iCAAK,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE,eAAe,aAChD,uBAAC,uBAAU,IACT,EAAE,EAAE,IAAI,YAAY,EAAE,EACtB,OAAO,EAAE,sBAAsB,EAC/B,SAAS,EAAC,4BAA4B,YAEtC,mCACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,eAAe,EACnB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,aAAa,mBACT,UAAU,mBACV,UAAU,mBACV,cAAc,EAC7B,QAAQ,EAAE,UAAU,YAEpB,kCAAM,SAAS,EAAE,WAAW,aAC1B,iCAAM,SAAS,EAAE,YAAY,YAAG,KAAK,GAAQ,EAE7C,uBAAC,+CAAsB,IACrB,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAgC,EAAE;4CACtD,eAAe,EAAE,UAAU;yCAC5B,CAAC,GACF,IACG,GACA,GACE,EACZ,eAAe,IAAI,CAClB,uBAAC,uBAAU,IAAC,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,YACvC,eAAe,GACL,CACd,IACG,EAEN,gCACE,EAAE,EAAE,cAAc,EAClB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,cAAc,iBACZ,CAAC,UAAU,qBACP,eAAe,EAChC,IAAI,EAAC,QAAQ,YAIb,gCACE,GAAG,EAAE,eAAe,EACpB,SAAS,EAAC,kCAAkC,EAC5C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,YAE7C,uBAAC,uBAAU,IACT,OAAO,EAAC,aAAa,EACrB,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,KAAK,YAEP,QAAQ,GACE,GACT,GACF,EACL,UAAU,IAAI,uBAAC,iBAAO,KAAG,KAChB,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAGpB,EAG+C,EAAE,EAAE;QAHnD,EACA,SAAS,OAEsC,EAD5C,SAAS,cAFZ,aAGD,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,SAAS,CAAC,CAAC;IAEpE,OAAO,uBAAC,iBAAiB,oBAAK,SAAS,IAAE,SAAS,EAAE,OAAO,IAAI,CAAC;AAClE,CAAC,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAO7C,MAAM,SAAS,GAAG,CAGhB,EAG6C,EAAE,EAAE;QAHjD,EACA,SAAS,OAEoC,EAD1C,SAAS,cAFZ,aAGD,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;IAElE,OAAO,CACL,uBAAC,iBAAiB,oBAAK,SAAS,IAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,CAC5E,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAE9C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;IAClD,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC;AAEM,8BAAS","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 classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n type AccordionItemId,\n type AccordionItemProps,\n type AccordionProps,\n type ClassicItemProps,\n type IsMultiple,\n type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n Item = '.ndl-accordion-item',\n ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n accordionElement: Element,\n selector: string,\n direction: 'next' | 'prev' = 'next',\n): Element | null => {\n const itemParent = accordionElement.closest(AccordionSelector.Item);\n if (!itemParent) {\n return null;\n }\n\n return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n children,\n as,\n isMultiple,\n onChange,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n const accordionRef = useRef<U>(null);\n\n useImperativeHandle(ref, () => accordionRef.current!);\n\n const Component: React.ElementType = as || 'div';\n\n // The following function includes code needed to be\n // able to navigate with the arrow keys (not tab).\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const accordionElement = accordionRef.current;\n if (!accordionElement) {\n return;\n }\n const activeElement = document.activeElement as HTMLElement;\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'next',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'prev',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n activeElement.click();\n }\n };\n\n const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n const accordionButton = accordionHtmlElement\n .getElementsByClassName('ndl-accordion-item-header-button')\n .item(0);\n\n if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n accordionButton.focus();\n }\n };\n\n const classes = classNames('ndl-accordion', className);\n\n // Destructure and omit keys from DOM spread\n const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n restProps as Record<string, unknown> as {\n expandedItemIds?: T[];\n expandedItemId?: T | null;\n [key: string]: unknown;\n };\n\n const contextValue = isMultiple\n ? ({\n expandedItemIds,\n isMultiple,\n onChange,\n } as IsMultiple<T>)\n : ({\n expandedItemId,\n isMultiple,\n onChange,\n } as IsNotMultiple<T>);\n\n return (\n <Component\n className={classes}\n style={style}\n ref={accordionRef}\n onKeyDown={handleKeyDown}\n role=\"presentation\"\n {...restAccordionProps}\n {...htmlAttributes}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </Component>\n );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n itemId,\n children,\n title,\n className = '',\n arrowPosition = 'leading',\n isDisabled = false,\n onExpandedChange,\n htmlAttributes,\n style,\n as,\n titleTypographyVariant = 'subheading-medium',\n hasDivider = true,\n trailingContent,\n headingLevel = 2,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const innerContentRef = useRef<HTMLDivElement>(null);\n const itemElementId = createItemId('item', itemId);\n const headerElementId = createItemId('header', itemId);\n const buttonElementId = createItemId('button', itemId);\n const panelElementId = createItemId('panel', itemId);\n const Component: React.ElementType = as || 'div';\n\n const context = useAccordionContext();\n const { isMultiple } = context;\n\n const isExpanded = isMultiple\n ? context.expandedItemIds.includes(itemId)\n : context.expandedItemId === itemId;\n\n const handleOnClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n // Custom callback to call.\n if (onExpandedChange !== undefined) {\n onExpandedChange(!isExpanded);\n }\n\n if (isMultiple) {\n const { expandedItemIds, onChange }: IsMultiple<T> = context;\n // Multiple expanded.\n if (isExpanded) {\n // Remove from list.\n const newArray: T[] = expandedItemIds.filter(\n (activeId) => activeId !== itemId,\n );\n onChange(newArray);\n } else if (!isExpanded) {\n // Add to list.\n const newArray = [...expandedItemIds];\n newArray.push(itemId);\n onChange(newArray);\n }\n } else {\n const { onChange }: IsNotMultiple<T> = context;\n // Single expanded.\n if (isExpanded) {\n // Set null.\n onChange(null);\n } else if (!isExpanded) {\n // Set to id.\n onChange(itemId);\n }\n }\n\n // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n document.activeElement?.parentElement?.focus();\n }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n const classes = classNames('ndl-accordion-item', className, {\n 'ndl-accordion-item-disabled': isDisabled,\n 'ndl-accordion-item-expanded': isExpanded,\n });\n\n const headerClasses = classNames('ndl-accordion-item-header', {\n 'ndl-accordion-item-header-disabled': isDisabled,\n });\n\n const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n 'ndl-accordion-item-header-icon-wrapper-leading':\n arrowPosition === 'leading',\n });\n\n const buttonClasses = classNames('ndl-accordion-item-header-button', {\n 'ndl-accordion-item-header-button-disabled': isDisabled,\n });\n\n const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n 'ndl-accordion-item-header-button-title': isDisabled,\n 'ndl-accordion-item-header-button-title-leading':\n arrowPosition === 'leading',\n });\n\n const contentClasses = classNames('ndl-accordion-item-content', {\n 'ndl-accordion-item-content-expanded': isExpanded,\n 'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n });\n\n return (\n <Component\n className={classes}\n style={style}\n id={itemElementId}\n {...htmlAttributes}\n >\n <div className={headerClasses} id={headerElementId}>\n <Typography\n as={`h${headingLevel}`}\n variant={titleTypographyVariant}\n className=\"ndl-accordion-item-heading\"\n >\n <button\n type=\"button\"\n id={buttonElementId}\n onClick={handleOnClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n aria-disabled={isDisabled}\n aria-controls={panelElementId}\n disabled={isDisabled}\n >\n <span className={iconClasses}>\n <span className={titleClasses}>{title}</span>\n\n <ChevronDownIconOutline\n className={classNames('ndl-accordion-item-header-icon', {\n '-n-rotate-180': isExpanded,\n })}\n />\n </span>\n </button>\n </Typography>\n {trailingContent && (\n <Typography as=\"div\" variant=\"body-medium\">\n {trailingContent}\n </Typography>\n )}\n </div>\n\n <div\n id={panelElementId}\n ref={contentRef}\n className={contentClasses}\n aria-hidden={!isExpanded}\n aria-labelledby={buttonElementId}\n role=\"region\"\n >\n {/* The <div> element has a child <button> element that allows keyboard interaction */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={innerContentRef}\n className=\"ndl-accordion-item-content-inner\"\n onKeyDown={(event) => event.stopPropagation()}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weak\"\n as=\"div\"\n >\n {children}\n </Typography>\n </div>\n </div>\n {hasDivider && <Divider />}\n </Component>\n );\n};\n\nconst AccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-classic', className);\n\n return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n AccordionItemProps<T>,\n 'hasDivider'\n>;\n\nconst CleanItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-clean', className);\n\n return (\n <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n CleanItem: CleanItem,\n Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
|
|
@@ -37,8 +37,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const react_1 = require("@neo4j-ndl/react");
|
|
40
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
41
|
+
const XMarkIconOutline_1 = require("../../icons/generated/heroIcons/XMarkIconOutline");
|
|
42
42
|
/**
|
|
43
43
|
* The component is used to display a file in a chat, or in a prompt.
|
|
44
44
|
* It can be removable and it can be loading.
|
|
@@ -52,7 +52,7 @@ const FileTag = (_a) => {
|
|
|
52
52
|
const file = `${fileName}.${fileType}`;
|
|
53
53
|
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", placement: "bottom", hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, (isRemovable ? {} : { onClick }), restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-file-tag-leading", children: isLoading ? (0, jsx_runtime_1.jsx)(react_1.LoadingSpinner, { size: "medium" }) : icon }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-file-tag-content", children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-ai-file-tag-content-title", children: fileName }), (0, jsx_runtime_1.jsx)("span", { className: "ndl-ai-file-tag-content-type", children: fileType === null || fileType === void 0 ? void 0 : fileType.toUpperCase() })] }), isRemovable && ((0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: onClick, description: null, htmlAttributes: {
|
|
54
54
|
'aria-label': `Remove ${file}`,
|
|
55
|
-
}, size: "small", className: "ndl-ai-file-tag-remove", children: (0, jsx_runtime_1.jsx)(
|
|
55
|
+
}, size: "small", className: "ndl-ai-file-tag-remove", children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, {}) }))] })) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: file })] }));
|
|
56
56
|
};
|
|
57
57
|
exports.FileTag = FileTag;
|
|
58
58
|
//# sourceMappingURL=FileTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileTag.js","sourceRoot":"","sources":["../../../../src/ai/file-tag/FileTag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA4E;AAC5E,
|
|
1
|
+
{"version":3,"file":"FileTag.js","sourceRoot":"","sources":["../../../../src/ai/file-tag/FileTag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA4E;AAC5E,4DAAoC;AAGpC,uFAAoF;AAiBpF;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,EAY8B,EAAE,EAAE;QAZlC,EACf,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,EACH,SAAS,GAAG,KAAK,OAE4B,EAD1C,SAAS,cAXG,sHAYhB,CADa;IAEZ,MAAM,SAAS,GAAG,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,IAAI,GAAG,GAAG,QAAQ,IAAI,QAAQ,EAAE,CAAC;IAEvC,OAAO,CACL,wBAAC,eAAO,IACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,aAEnC,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,wBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAEhC,SAAS,EACT,cAAc,eAElB,gCAAK,SAAS,EAAC,yBAAyB,YACrC,SAAS,CAAC,CAAC,CAAC,uBAAC,sBAAc,IAAC,IAAI,EAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,GAChD,EACN,iCAAK,SAAS,EAAC,yBAAyB,aACtC,iCAAM,SAAS,EAAC,+BAA+B,YAAE,QAAQ,GAAQ,EACjE,iCAAM,SAAS,EAAC,8BAA8B,YAC3C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAAE,GACnB,IACH,EACL,WAAW,IAAI,CACd,uBAAC,uBAAe,IACd,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE;gCACd,YAAY,EAAE,UAAU,IAAI,EAAE;6BAC/B,EACD,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,wBAAwB,YAElC,uBAAC,mCAAgB,KAAG,GACJ,CACnB,KACS,GACI,EAClB,uBAAC,eAAO,CAAC,OAAO,cAAE,IAAI,GAAmB,IACjC,CACX,CAAC;AACJ,CAAC,CAAC;AAEO,0BAAO","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 { CleanIconButton, LoadingSpinner, Tooltip } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type CommonProps } from '../../_common/types';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype FileTagProps = {\n /** The icon that represents the file type */\n icon: React.ReactNode;\n /** The name of the file */\n fileName: string;\n /** The type of the file, e.g. 'pdf', 'docx', 'txt', etc. */\n fileType: string;\n /** Callback function triggered either when the file tag is clicked, or when the remove button is clicked (if isRemovable is true) */\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Whether the file tag is removable */\n isRemovable?: boolean;\n /** Whether the file tag is loading */\n isLoading?: boolean;\n};\n\n/**\n * The component is used to display a file in a chat, or in a prompt.\n * It can be removable and it can be loading.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst FileTag = ({\n onClick,\n isRemovable = false,\n fileName,\n fileType,\n icon,\n className,\n style,\n htmlAttributes,\n ref,\n isLoading = false,\n ...restProps\n}: CommonProps<React.ElementType, FileTagProps>) => {\n const Component = isRemovable !== true ? 'button' : 'div';\n const classes = classNames('ndl-ai-file-tag', className);\n\n const file = `${fileName}.${fileType}`;\n\n return (\n <Tooltip\n type=\"simple\"\n placement=\"bottom\"\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger hasButtonWrapper>\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...(isRemovable ? {} : { onClick })}\n // what is read by screen readers here?\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-file-tag-leading\">\n {isLoading ? <LoadingSpinner size=\"medium\" /> : icon}\n </div>\n <div className=\"ndl-ai-file-tag-content\">\n <span className=\"ndl-ai-file-tag-content-title\">{fileName}</span>\n <span className=\"ndl-ai-file-tag-content-type\">\n {fileType?.toUpperCase()}\n </span>\n </div>\n {isRemovable && (\n <CleanIconButton\n onClick={onClick}\n description={null}\n htmlAttributes={{\n 'aria-label': `Remove ${file}`,\n }}\n size=\"small\"\n className=\"ndl-ai-file-tag-remove\"\n >\n <XMarkIconOutline />\n </CleanIconButton>\n )}\n </Component>\n </Tooltip.Trigger>\n <Tooltip.Content>{file}</Tooltip.Content>\n </Tooltip>\n );\n};\n\nexport { FileTag };\n"]}
|
|
@@ -37,8 +37,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const react_1 = require("@neo4j-ndl/react");
|
|
40
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
41
|
+
const XMarkIconOutline_1 = require("../../icons/generated/heroIcons/XMarkIconOutline");
|
|
42
42
|
/**
|
|
43
43
|
* The component is used to display an image in a chat, or in a prompt.
|
|
44
44
|
* It can be removable and it can be loading.
|
|
@@ -52,7 +52,7 @@ const ImageTag = (_a) => {
|
|
|
52
52
|
const image = `${fileName}.${fileType}`;
|
|
53
53
|
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", placement: "bottom", hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, (isRemovable ? {} : { onClick }), restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("img", { src: src, alt: alt }), isRemovable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-image-tag-remove-wrapper" }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: onClick, description: null, htmlAttributes: {
|
|
54
54
|
'aria-label': `Remove ${image}`,
|
|
55
|
-
}, size: "small", className: "ndl-ai-image-tag-remove", children: (0, jsx_runtime_1.jsx)(
|
|
55
|
+
}, size: "small", className: "ndl-ai-image-tag-remove", children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, {}) })] })), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-image-tag-loading-overlay", children: (0, jsx_runtime_1.jsx)(react_1.LoadingSpinner, { size: "medium" }) }))] })) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: image })] }));
|
|
56
56
|
};
|
|
57
57
|
exports.ImageTag = ImageTag;
|
|
58
58
|
//# sourceMappingURL=ImageTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageTag.js","sourceRoot":"","sources":["../../../../src/ai/image-tag/ImageTag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA4E;AAC5E,
|
|
1
|
+
{"version":3,"file":"ImageTag.js","sourceRoot":"","sources":["../../../../src/ai/image-tag/ImageTag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA4E;AAC5E,4DAAoC;AAGpC,uFAAoF;AAmBpF;;;;;GAKG;AACH,MAAM,QAAQ,GAAG,CAAC,EAa8B,EAAE,EAAE;QAblC,EAChB,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,KAAK,EACjB,GAAG,EACH,SAAS,EACT,KAAK,EACL,cAAc,OAEgC,EAD3C,SAAS,cAZI,4HAajB,CADa;IAEZ,MAAM,SAAS,GAAG,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1D,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAE1D,MAAM,KAAK,GAAG,GAAG,QAAQ,IAAI,QAAQ,EAAE,CAAC;IAExC,OAAO,CACL,wBAAC,eAAO,IACN,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,aAEnC,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,wBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAEhC,SAAS,EACT,cAAc,eAElB,gCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,EAC1B,WAAW,IAAI,CACd,6DACE,gCAAK,SAAS,EAAC,iCAAiC,GAAG,EACnD,uBAAC,uBAAe,IACd,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE;wCACd,YAAY,EAAE,UAAU,KAAK,EAAE;qCAChC,EACD,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,yBAAyB,YAEnC,uBAAC,mCAAgB,KAAG,GACJ,IACjB,CACJ,EACA,SAAS,IAAI,CACZ,gCAAK,SAAS,EAAC,kCAAkC,YAC/C,uBAAC,sBAAc,IAAC,IAAI,EAAC,QAAQ,GAAG,GAC5B,CACP,KACS,GACI,EAClB,uBAAC,eAAO,CAAC,OAAO,cAAE,KAAK,GAAmB,IAClC,CACX,CAAC;AACJ,CAAC,CAAC;AAEO,4BAAQ","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 { CleanIconButton, LoadingSpinner, Tooltip } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type CommonProps } from '../../_common/types';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype ImageTagProps = {\n /** The source of the image */\n src: string;\n /** The alt text of the image */\n alt: string;\n /** The name of the image */\n fileName: string;\n /** The type of the image, e.g. 'jpg', 'png', 'gif', etc. */\n fileType: string;\n /** Callback function triggered either when the image tag is clicked, or when the remove button is clicked (if isRemovable is true) */\n onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Whether the image tag is removable */\n isRemovable?: boolean;\n /** Whether the image tag is loading */\n isLoading?: boolean;\n};\n\n/**\n * The component is used to display an image in a chat, or in a prompt.\n * It can be removable and it can be loading.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ImageTag = ({\n src,\n fileName,\n fileType,\n alt,\n onClick,\n isRemovable = false,\n isLoading = false,\n ref,\n className,\n style,\n htmlAttributes,\n ...restProps\n}: CommonProps<React.ElementType, ImageTagProps>) => {\n const Component = isRemovable !== true ? 'button' : 'div';\n const classes = classNames('ndl-ai-image-tag', className);\n\n const image = `${fileName}.${fileType}`;\n\n return (\n <Tooltip\n type=\"simple\"\n placement=\"bottom\"\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger hasButtonWrapper>\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...(isRemovable ? {} : { onClick })}\n // what is read by screen readers here?\n {...restProps}\n {...htmlAttributes}\n >\n <img src={src} alt={alt} />\n {isRemovable && (\n <>\n <div className=\"ndl-ai-image-tag-remove-wrapper\" />\n <CleanIconButton\n onClick={onClick}\n description={null}\n htmlAttributes={{\n 'aria-label': `Remove ${image}`,\n }}\n size=\"small\"\n className=\"ndl-ai-image-tag-remove\"\n >\n <XMarkIconOutline />\n </CleanIconButton>\n </>\n )}\n {isLoading && (\n <div className=\"ndl-ai-image-tag-loading-overlay\">\n <LoadingSpinner size=\"medium\" />\n </div>\n )}\n </Component>\n </Tooltip.Trigger>\n <Tooltip.Content>{image}</Tooltip.Content>\n </Tooltip>\n );\n};\n\nexport { ImageTag };\n"]}
|
|
@@ -37,15 +37,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const react_1 = require("@neo4j-ndl/react");
|
|
40
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
41
|
+
const Neo4JAiColor_1 = require("../../icons/manual/Neo4JAiColor");
|
|
42
42
|
const Presence = (_a) => {
|
|
43
43
|
var { className, isThinking = false, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["className", "isThinking", "style", "htmlAttributes", "ref"]);
|
|
44
44
|
const classes = (0, classnames_1.default)('ndl-ai-presence', className, {
|
|
45
45
|
'ndl-thinking': isThinking === true,
|
|
46
46
|
});
|
|
47
47
|
const { theme } = (0, react_1.useNeedleTheme)();
|
|
48
|
-
const Component = theme === 'light' ?
|
|
48
|
+
const Component = theme === 'light' ? Neo4JAiColor_1.Neo4JAiColorLight : Neo4JAiColor_1.Neo4JAiColorDark;
|
|
49
49
|
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: classes, style: style, htmlAttributes: htmlAttributes }, (isThinking === true && {
|
|
50
50
|
'aria-hidden': 'false',
|
|
51
51
|
'aria-label': 'Thinking',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Presence.js","sourceRoot":"","sources":["../../../../src/ai/presence/Presence.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAkD;AAClD,
|
|
1
|
+
{"version":3,"file":"Presence.js","sourceRoot":"","sources":["../../../../src/ai/presence/Presence.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAkD;AAClD,4DAAoC;AAGpC,kEAGyC;AAOzC,MAAM,QAAQ,GAAG,CAAC,EAOkB,EAAE,EAAE;QAPtB,EAChB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,cAAc,EACd,GAAG,OAE+B,EAD/B,SAAS,cANI,6DAOjB,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE,SAAS,EAAE;QACvD,cAAc,EAAE,UAAU,KAAK,IAAI;KACpC,CAAC,CAAC;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,sBAAc,GAAE,CAAC;IAEnC,MAAM,SAAS,GACb,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,gCAAqB,CAAC,CAAC,CAAC,+BAAoB,CAAC;IAEnE,OAAO,CACL,uBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,IAC1B,CAAC,UAAU,KAAK,IAAI,IAAI;QAC1B,aAAa,EAAE,OAAO;QACtB,YAAY,EAAE,UAAU;QACxB,WAAW,EAAE,QAAQ;QACrB,IAAI,EAAE,QAAQ;KACf,CAAC,EACE,SAAS,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAIO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,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 { useNeedleTheme } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport type { CommonProps } from '../../_common/types';\nimport {\n Neo4JAiColorDark as Neo4JAiColorDarkIcon,\n Neo4JAiColorLight as Neo4JAiColorLightIcon,\n} from '../../icons/manual/Neo4JAiColor';\n\ntype PresenceProps = {\n /** Whether the AI is thinking. Animates the underlying SVG */\n isThinking?: boolean;\n};\n\nconst Presence = ({\n className,\n isThinking = false,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'svg', PresenceProps>) => {\n const classes = classNames('ndl-ai-presence', className, {\n 'ndl-thinking': isThinking === true,\n });\n const { theme } = useNeedleTheme();\n\n const Component =\n theme === 'light' ? Neo4JAiColorLightIcon : Neo4JAiColorDarkIcon;\n\n return (\n <Component\n ref={ref}\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...(isThinking === true && {\n 'aria-hidden': 'false',\n 'aria-label': 'Thinking',\n 'aria-live': 'polite',\n role: 'status',\n })}\n {...restProps}\n />\n );\n};\n\nPresence.displayName = 'Presence';\n\nexport { Presence };\n"]}
|
|
@@ -37,13 +37,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const react_1 = require("@neo4j-ndl/react");
|
|
40
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
42
41
|
const react_2 = require("react");
|
|
43
42
|
const react_syntax_highlighter_1 = require("react-syntax-highlighter");
|
|
44
43
|
const code_languages_1 = require("../../code-block/code-languages");
|
|
45
44
|
const ndl_code_dark_1 = __importDefault(require("../../code-block/themes/ndl-code-dark"));
|
|
46
45
|
const ndl_code_light_1 = __importDefault(require("../../code-block/themes/ndl-code-light"));
|
|
46
|
+
const CheckIconOutline_1 = require("../../icons/generated/heroIcons/CheckIconOutline");
|
|
47
|
+
const XMarkIconOutline_1 = require("../../icons/generated/heroIcons/XMarkIconOutline");
|
|
47
48
|
/**
|
|
48
49
|
* Component to use for previewing certain content in AI chat applications.
|
|
49
50
|
*
|
|
@@ -62,7 +63,7 @@ const PreviewConfirmation = (_a) => {
|
|
|
62
63
|
const classes = (0, classnames_1.default)('ndl-ai-preview-confirmation', className, {
|
|
63
64
|
'ndl-ai-preview-confirmation-footer': isFooter,
|
|
64
65
|
});
|
|
65
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [!(isFooter && status !== 'pending') && ((0, jsx_runtime_1.jsx)(react_1.Typography, { as: "div", variant: isFooter ? 'subheading-small' : 'body-medium', className: "ndl-ai-preview-confirmation-content", children: children })), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", as: "div", className: "ndl-ai-preview-confirmation-actions", children: [status === 'pending' && actions, status === 'confirmed' && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-preview-confirmation-confirm-reject", children: [(0, jsx_runtime_1.jsx)(
|
|
66
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [!(isFooter && status !== 'pending') && ((0, jsx_runtime_1.jsx)(react_1.Typography, { as: "div", variant: isFooter ? 'subheading-small' : 'body-medium', className: "ndl-ai-preview-confirmation-content", children: children })), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", as: "div", className: "ndl-ai-preview-confirmation-actions", children: [status === 'pending' && actions, status === 'confirmed' && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-preview-confirmation-confirm-reject", children: [(0, jsx_runtime_1.jsx)(CheckIconOutline_1.CheckIconOutline, { className: "ndl-ai-preview-confirmation-action-icon" }), confirmedActionText] })), status === 'rejected' && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-preview-confirmation-confirm-reject", children: [(0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, { className: "ndl-ai-preview-confirmation-action-icon" }), rejectedActionText] }))] })] })));
|
|
66
67
|
};
|
|
67
68
|
const PreviewCode = (_a) => {
|
|
68
69
|
var { code, language, label, isLoading = false, headerActions, theme, ref, style, className, htmlAttributes } = _a, restProps = __rest(_a, ["code", "language", "label", "isLoading", "headerActions", "theme", "ref", "style", "className", "htmlAttributes"]);
|
|
@@ -1 +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\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"]}
|
|
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 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';\nimport { CheckIconOutline } from '../../icons/generated/heroIcons/CheckIconOutline';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\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"]}
|
|
@@ -37,9 +37,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const react_1 = require("@neo4j-ndl/react");
|
|
40
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
42
41
|
const react_2 = require("react");
|
|
42
|
+
const ArrowSend_1 = __importDefault(require("../../icons/generated/custom/ArrowSend"));
|
|
43
|
+
const ArrowSmallUpIconOutline_1 = require("../../icons/generated/heroIcons/ArrowSmallUpIconOutline");
|
|
44
|
+
const StopCircleIconOutline_1 = require("../../icons/generated/heroIcons/StopCircleIconOutline");
|
|
45
|
+
const XMarkIconOutline_1 = require("../../icons/generated/heroIcons/XMarkIconOutline");
|
|
43
46
|
/**
|
|
44
47
|
* The component is used to display the prompt input for an LLM.
|
|
45
48
|
* It includes a textarea for the user to enter their prompt and a submit button.
|
|
@@ -139,7 +142,7 @@ const PromptComponent = (_a) => {
|
|
|
139
142
|
} }, textareaProps)), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-prompt-textarea-below", children: [Boolean(bottomContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-prompt-textarea-below-leading", children: bottomContent })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-prompt-textarea-below-trailing", children: [bottomTrailingContent, (0, jsx_runtime_1.jsx)(SubmitPromptButton, { isDisabled: isSubmitDisabled, isRunningPrompt: isRunningPrompt, onSubmit: onSubmitPrompt, onCancel: onCancelPrompt })] })] })] })] }), Boolean(disclaimer) && ((0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "ndl-ai-prompt-footer", children: disclaimer }))] })));
|
|
140
143
|
};
|
|
141
144
|
const SubmitPromptButton = ({ onSubmit, onCancel, isDisabled, isRunningPrompt, }) => {
|
|
142
|
-
return ((0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { className: "ndl-ai-prompt-submit-button", description: isRunningPrompt === true ? 'Stop' : 'Send', size: "small", isDisabled: isDisabled, onClick: isRunningPrompt === true ? onCancel : onSubmit, children: isRunningPrompt === true ? ((0, jsx_runtime_1.jsx)(
|
|
145
|
+
return ((0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { className: "ndl-ai-prompt-submit-button", description: isRunningPrompt === true ? 'Stop' : 'Send', size: "small", isDisabled: isDisabled, onClick: isRunningPrompt === true ? onCancel : onSubmit, children: isRunningPrompt === true ? ((0, jsx_runtime_1.jsx)(StopCircleIconOutline_1.StopCircleIconOutline, {})) : ((0, jsx_runtime_1.jsx)(ArrowSmallUpIconOutline_1.ArrowSmallUpIconOutline, {})) }));
|
|
143
146
|
};
|
|
144
147
|
const AgentSelect = ({ value, options = [], onChange }) => {
|
|
145
148
|
var _a, _b, _c;
|
|
@@ -168,7 +171,7 @@ const ContextTag = ({ children, onClose }) => {
|
|
|
168
171
|
else {
|
|
169
172
|
setIsTooltipOpen(false);
|
|
170
173
|
}
|
|
171
|
-
}, hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-prompt-context-tag", children: [(0, jsx_runtime_1.jsx)(
|
|
174
|
+
}, hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-prompt-context-tag", children: [(0, jsx_runtime_1.jsx)(ArrowSend_1.default, { className: "ndl-ai-prompt-context-tag-icon" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", className: "ndl-ai-prompt-context-tag-text", ref: textRef, children: children }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": `Remove context: ${children}`, className: "ndl-ai-prompt-context-tag-close-button", children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, { className: "ndl-ai-prompt-context-tag-icon" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: children })] }));
|
|
172
175
|
};
|
|
173
176
|
const Prompt = Object.assign(PromptComponent, {
|
|
174
177
|
ContextTag: ContextTag,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Prompt.js","sourceRoot":"","sources":["../../../../src/ai/prompt/Prompt.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAM0B;AAC1B,kDAKgC;AAChC,4DAAoC;AACpC,iCAAiE;AAuCjE;;;;;;GAMG;AACH,MAAM,eAAe,GAAG,CAAC,EAoBS,EAAE,EAAE;QApBb,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,UAAU,GAAG,KAAK,EAClB,eAAe,GAAG,KAAK,EACvB,cAAc,EACd,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,aAAa,EACb,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,UAAU,GAAG,qCAAqC,EAClD,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,EACH,aAAa,OAEmB,EAD7B,SAAS,cAnBW,gRAoBxB,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE,SAAS,EAAE;QACrD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IACtD,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAEhD,0BAA0B;IAC1B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,KAAK,GAAkB,IAAI,CAAC;QAEhC,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,gBAAgB,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBACtC,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC;gBACzC,MAAM,SAAS,GAAG,UAAU,CAC1B,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CACtD,CAAC;gBACF,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;gBAE1C,IAAI,YAAY,GAAG,SAAS,EAAE,CAAC;oBAC7B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;gBAC1C,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACnB,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC;YACD,KAAK,GAAG,qBAAqB,CAAC,aAAa,CAAC,CAAC;QAC/C,CAAC,CAAC;QAEF,gBAAgB;QAChB,aAAa,EAAE,CAAC;QAEhB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC,CAAC;QAC1D,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,cAAc,CAAC,CAAC;QAE9D,IAAI,gBAAgB,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACtC,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACjD,gBAAgB,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE;gBACjD,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACnB,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC;YACD,cAAc,CAAC,UAAU,EAAE,CAAC;YAC5B,gBAAgB,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qBAAqB;IACrB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACjC,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC9D,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC5C,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;QAE/B,IAAI,EAAE,KAAK,IAAI,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;YAClC,kDAAkD;YAClD,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAEzB,MAAM,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;YAEvC,IAAI,EAAE,CAAC,YAAY,IAAI,SAAS,EAAE,CAAC;gBACjC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;gBAC9B,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,GAAG,EAAE,IAAI,CAAC;YAChD,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;gBAC5B,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,CAAC;YAC1C,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,mEAAmE;IACnE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,oBAAoB,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAElC,MAAM,WAAW,GAAG,CAAC,CAAyC,EAAE,EAAE;QAChE,oBAAoB,EAAE,CAAC;QACvB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,eAElB,iCAAK,SAAS,EAAC,uBAAuB,aACnC,OAAO,CAAC,aAAa,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAC,sBAAsB,YAAE,aAAa,GAAO,CAC5D,EACD,iCAAK,SAAS,EAAC,6BAA6B,aACzC,OAAO,CAAC,UAAU,CAAC,IAAI,CACtB,gCACE,SAAS,EAAC,8BAA8B,EACxC,GAAG,EAAE,gBAAgB,YAEpB,UAAU,GACP,CACP,EACD,mDACE,WAAW,EAAC,cAAc,EAC1B,SAAS,EAAC,wBAAwB,EAClC,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oCACf,IACE,CAAC,CAAC,GAAG,KAAK,OAAO;wCACjB,CAAC,CAAC,CAAC,QAAQ;wCACX,gBAAgB,KAAK,IAAI,EACzB,CAAC;wCACD,CAAC,CAAC,cAAc,EAAE,CAAC;wCAEnB,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;4CAC7B,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,CAAC,CAAC,CAAC;wCACtB,CAAC;oCACH,CAAC;gCACH,CAAC,IACG,aAAa,EACjB,EACF,iCAAK,SAAS,EAAC,8BAA8B,aAC1C,OAAO,CAAC,aAAa,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAC,sCAAsC,YAClD,aAAa,GACV,CACP,EACD,iCAAK,SAAS,EAAC,uCAAuC,aACnD,qBAAqB,EACtB,uBAAC,kBAAkB,IACjB,UAAU,EAAE,gBAAgB,EAC5B,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,cAAc,EACxB,QAAQ,EAAE,cAAc,GACxB,IACE,IACF,IACF,IACF,EACL,OAAO,CAAC,UAAU,CAAC,IAAI,CACtB,uBAAC,kBAAU,IAAC,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,sBAAsB,YAC9D,UAAU,GACA,CACd,KACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAMhB,EAAE,EAAE;IACH,OAAO,CACL,uBAAC,uBAAe,IACd,SAAS,EAAC,6BAA6B,EACvC,WAAW,EAAE,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACvD,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,YAEtD,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,6BAAqB,KAAG,CAC1B,CAAC,CAAC,CAAC,CACF,uBAAC,+BAAuB,KAAG,CAC5B,GACe,CACnB,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAoB,EAAE,EAAE;;IAC1E,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,EAAE,CAAC;IAE7D,MAAM,eAAe,GAAG,CAAC,MAGxB,EAAE,EAAE;QACH,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,CAAC;QACnB,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACL,6DACE,uBAAC,sBAAc,IACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAC3C,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,SAAS,YAEb,YAAY,GACE,EACjB,uBAAC,YAAI,IACH,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,wBAAwB,YAEjC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,uBAAC,YAAI,CAAC,SAAS,IAEb,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,MAAM,CAAC,KAAK,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,IAHjC,MAAM,CAAC,KAAK,CAIjB,CACH,CAAC,GACG,IACN,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAmB,EAAE,EAAE;IAC5D,MAAM,OAAO,GAAG,IAAA,cAAM,EAAkB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,wBAAC,eAAO,IACN,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,aAAa,EACrB,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE;;YACvB,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,WAAW,GACf,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,WAAW;qBAC5B,MAAA,OAAO,CAAC,OAAO,0CAAE,WAAW,CAAA;oBAC5B,OAAO,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;gBAC5D,IAAI,WAAW,EAAE,CAAC;oBAChB,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,EACD,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,aAEnC,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,qBAAa,IAAC,SAAS,EAAC,gCAAgC,GAAG,EAC5D,uBAAC,kBAAU,IACT,OAAO,EAAC,aAAa,EACrB,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,OAAO,YAEX,QAAQ,GACE,EAEb,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACJ,mBAAmB,QAAQ,EAAE,EACzC,SAAS,EAAC,wCAAwC,YAElD,uBAAC,wBAAgB,IAAC,SAAS,EAAC,gCAAgC,GAAG,GACxD,IACL,GACU,EAClB,uBAAC,eAAO,CAAC,OAAO,cAAE,QAAQ,GAAmB,IACrC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IAC5C,UAAU,EAAE,UAAU;IACtB,MAAM,EAAE,WAAW;CACpB,CAAC,CAAC;AAEM,wBAAM","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 {\n CleanIconButton,\n DropdownButton,\n Menu,\n Tooltip,\n Typography,\n} from '@neo4j-ndl/react';\nimport {\n ArrowSendIcon,\n ArrowSmallUpIconOutline,\n StopCircleIconOutline,\n XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { CommonProps, HtmlAttributes } from '../../_common/types';\n\ntype PromptProps = {\n /** The prompt text */\n value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n /** Callback function called when the prompt text changes */\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n /** Maximum number of rows the textarea can expand to */\n maxRows?: number;\n /** Whether the textarea is disabled */\n isDisabled?: boolean;\n /** Whether the submit button is disabled */\n isSubmitDisabled?: boolean;\n /** Whether the submit button is \"running\". Shows a stop icon when true. */\n isRunningPrompt?: boolean;\n /** Callback function called when the submit button is clicked */\n onSubmitPrompt?: (\n e:\n | React.KeyboardEvent<HTMLTextAreaElement>\n | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => void;\n /** Callback function called when the cancel button is clicked */\n onCancelPrompt?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Content to display above the input card, e.g. a status message while a prompt is running */\n headerContent?: React.ReactNode;\n /** Content to display above the textarea */\n topContent?: React.ReactNode;\n /** Content to display below the textarea, on the leading side */\n bottomContent?: React.ReactNode;\n /** Content to display below the textarea, on the trailing side next to the submit button */\n bottomTrailingContent?: React.ReactNode;\n /** Disclaimer to display below the component */\n disclaimer?: React.ReactNode;\n /** Props for the textarea element */\n textareaProps?: HtmlAttributes<'textarea'>;\n};\n\n/**\n * The component is used to display the prompt input for an LLM.\n * It includes a textarea for the user to enter their prompt and a submit button.\n * It can also display content above and below the textarea, like uploaded files or a select for changing agents.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PromptComponent = ({\n value,\n onChange,\n maxRows = 5,\n isDisabled = false,\n isRunningPrompt = false,\n onSubmitPrompt,\n onCancelPrompt,\n isSubmitDisabled = false,\n headerContent,\n topContent,\n bottomContent,\n bottomTrailingContent,\n disclaimer = 'All information should be verified.',\n className,\n style,\n htmlAttributes,\n ref,\n textareaProps,\n ...restProps\n}: CommonProps<'div', PromptProps>) => {\n const classes = classNames('ndl-ai-prompt', className, {\n 'ndl-disabled': isDisabled,\n });\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const textareaAboveRef = useRef<HTMLDivElement>(null);\n const [lineHeight, setLineHeight] = useState(0);\n\n /** File overflow stuff */\n useEffect(() => {\n let rafId: number | null = null;\n\n const checkOverflow = () => {\n if (textareaAboveRef.current !== null) {\n const element = textareaAboveRef.current;\n const maxHeight = parseFloat(\n getComputedStyle(element).maxHeight.replace('px', ''),\n );\n const scrollHeight = element.scrollHeight;\n\n if (scrollHeight > maxHeight) {\n element.classList.add('ndl-can-scroll');\n } else {\n element.classList.remove('ndl-can-scroll');\n }\n }\n };\n\n const debouncedCheck = () => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n }\n rafId = requestAnimationFrame(checkOverflow);\n };\n\n // Initial check\n checkOverflow();\n\n const resizeObserver = new ResizeObserver(debouncedCheck);\n const mutationObserver = new MutationObserver(debouncedCheck);\n\n if (textareaAboveRef.current !== null) {\n resizeObserver.observe(textareaAboveRef.current);\n mutationObserver.observe(textareaAboveRef.current, {\n childList: true,\n subtree: true,\n });\n }\n\n return () => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n }\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n }, []);\n\n /** Textarea stuff */\n useEffect(() => {\n if (textareaRef.current !== null) {\n const computed = window.getComputedStyle(textareaRef.current);\n setLineHeight(parseInt(computed.lineHeight));\n }\n }, []);\n\n const adjustTextareaHeight = useCallback(() => {\n const ta = textareaRef.current;\n\n if (ta !== null && lineHeight > 0) {\n // Reset height so scrollHeight measures correctly\n ta.style.height = 'auto';\n\n const maxHeight = lineHeight * maxRows;\n\n if (ta.scrollHeight <= maxHeight) {\n ta.style.overflowY = 'hidden';\n ta.style.height = `${ta.scrollHeight + 12}px`;\n } else {\n ta.style.overflowY = 'auto';\n ta.style.height = `${maxHeight + 12}px`;\n }\n }\n }, [lineHeight, maxRows]);\n\n // Adjust height when prompt value changes (including when cleared)\n useEffect(() => {\n adjustTextareaHeight();\n }, [value, adjustTextareaHeight]);\n\n const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n adjustTextareaHeight();\n onChange?.(e);\n };\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-prompt-wrapper\">\n {Boolean(headerContent) && (\n <div className=\"ndl-ai-prompt-header\">{headerContent}</div>\n )}\n <div className=\"ndl-ai-prompt-wrapper-inner\">\n {Boolean(topContent) && (\n <div\n className=\"ndl-ai-prompt-textarea-above\"\n ref={textareaAboveRef}\n >\n {topContent}\n </div>\n )}\n <textarea\n placeholder=\"Ask anything\"\n className=\"ndl-ai-prompt-textarea\"\n rows={1}\n onChange={handleInput}\n value={value}\n ref={textareaRef}\n disabled={isDisabled}\n onKeyDown={(e) => {\n if (\n e.key === 'Enter' &&\n !e.shiftKey &&\n isSubmitDisabled !== true\n ) {\n e.preventDefault();\n\n if (isRunningPrompt !== true) {\n onSubmitPrompt?.(e);\n }\n }\n }}\n {...textareaProps}\n />\n <div className=\"ndl-ai-prompt-textarea-below\">\n {Boolean(bottomContent) && (\n <div className=\"ndl-ai-prompt-textarea-below-leading\">\n {bottomContent}\n </div>\n )}\n <div className=\"ndl-ai-prompt-textarea-below-trailing\">\n {bottomTrailingContent}\n <SubmitPromptButton\n isDisabled={isSubmitDisabled}\n isRunningPrompt={isRunningPrompt}\n onSubmit={onSubmitPrompt}\n onCancel={onCancelPrompt}\n />\n </div>\n </div>\n </div>\n </div>\n {Boolean(disclaimer) && (\n <Typography variant=\"body-small\" className=\"ndl-ai-prompt-footer\">\n {disclaimer}\n </Typography>\n )}\n </div>\n );\n};\n\nconst SubmitPromptButton = ({\n onSubmit,\n onCancel,\n isDisabled,\n isRunningPrompt,\n}: {\n isDisabled?: boolean;\n isRunningPrompt?: boolean;\n onSubmit?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n onCancel?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}) => {\n return (\n <CleanIconButton\n className=\"ndl-ai-prompt-submit-button\"\n description={isRunningPrompt === true ? 'Stop' : 'Send'}\n size=\"small\"\n isDisabled={isDisabled}\n onClick={isRunningPrompt === true ? onCancel : onSubmit}\n >\n {isRunningPrompt === true ? (\n <StopCircleIconOutline />\n ) : (\n <ArrowSmallUpIconOutline />\n )}\n </CleanIconButton>\n );\n};\n\ntype AgentSelectProps = {\n value: { label: React.ReactNode; value: string };\n options: Array<{ label: React.ReactNode; value: string }>;\n onChange: (option: { label: React.ReactNode; value: string }) => void;\n};\n\nconst AgentSelect = ({ value, options = [], onChange }: AgentSelectProps) => {\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const displayLabel = value?.label ?? options[0]?.label ?? '';\n\n const handleItemClick = (option: {\n label: React.ReactNode;\n value: string;\n }) => {\n onChange?.(option);\n setIsMenuOpen(false);\n };\n\n return (\n <>\n <DropdownButton\n size=\"small\"\n className=\"ndl-ai-prompt-dropdown-button\"\n onClick={() => setIsMenuOpen((old) => !old)}\n isOpen={isMenuOpen}\n ref={anchorRef}\n >\n {displayLabel}\n </DropdownButton>\n <Menu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n anchorRef={anchorRef}\n placement=\"top-start-bottom-start\"\n >\n {options.map((option) => (\n <Menu.RadioItem\n key={option.value}\n title={option.label}\n isChecked={value?.value === option.value}\n onClick={() => handleItemClick(option)}\n />\n ))}\n </Menu>\n </>\n );\n};\n\ntype ContextTagProps = {\n children?: string;\n onClose: () => void;\n};\n\nconst ContextTag = ({ children, onClose }: ContextTagProps) => {\n const textRef = useRef<HTMLSpanElement>(null);\n const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n return (\n <Tooltip\n type=\"simple\"\n isOpen={isTooltipOpen}\n onOpenChange={(isOpen) => {\n if (isOpen) {\n const isTruncated =\n textRef.current?.scrollWidth &&\n textRef.current?.clientWidth &&\n textRef.current.scrollWidth > textRef.current.clientWidth;\n if (isTruncated) {\n setIsTooltipOpen(true);\n }\n } else {\n setIsTooltipOpen(false);\n }\n }}\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger hasButtonWrapper>\n <div className=\"ndl-ai-prompt-context-tag\">\n <ArrowSendIcon className=\"ndl-ai-prompt-context-tag-icon\" />\n <Typography\n variant=\"body-medium\"\n className=\"ndl-ai-prompt-context-tag-text\"\n ref={textRef}\n >\n {children}\n </Typography>\n\n <button\n type=\"button\"\n onClick={onClose}\n aria-label={`Remove context: ${children}`}\n className=\"ndl-ai-prompt-context-tag-close-button\"\n >\n <XMarkIconOutline className=\"ndl-ai-prompt-context-tag-icon\" />\n </button>\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content>{children}</Tooltip.Content>\n </Tooltip>\n );\n};\n\nconst Prompt = Object.assign(PromptComponent, {\n ContextTag: ContextTag,\n Select: AgentSelect,\n});\n\nexport { Prompt };\n"]}
|
|
1
|
+
{"version":3,"file":"Prompt.js","sourceRoot":"","sources":["../../../../src/ai/prompt/Prompt.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 {\n CleanIconButton,\n DropdownButton,\n Menu,\n Tooltip,\n Typography,\n} from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { CommonProps, HtmlAttributes } from '../../_common/types';\nimport ArrowSendIcon from '../../icons/generated/custom/ArrowSend';\nimport { ArrowSmallUpIconOutline } from '../../icons/generated/heroIcons/ArrowSmallUpIconOutline';\nimport { StopCircleIconOutline } from '../../icons/generated/heroIcons/StopCircleIconOutline';\nimport { XMarkIconOutline } from '../../icons/generated/heroIcons/XMarkIconOutline';\n\ntype PromptProps = {\n /** The prompt text */\n value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n /** Callback function called when the prompt text changes */\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n /** Maximum number of rows the textarea can expand to */\n maxRows?: number;\n /** Whether the textarea is disabled */\n isDisabled?: boolean;\n /** Whether the submit button is disabled */\n isSubmitDisabled?: boolean;\n /** Whether the submit button is \"running\". Shows a stop icon when true. */\n isRunningPrompt?: boolean;\n /** Callback function called when the submit button is clicked */\n onSubmitPrompt?: (\n e:\n | React.KeyboardEvent<HTMLTextAreaElement>\n | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n ) => void;\n /** Callback function called when the cancel button is clicked */\n onCancelPrompt?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n /** Content to display above the input card, e.g. a status message while a prompt is running */\n headerContent?: React.ReactNode;\n /** Content to display above the textarea */\n topContent?: React.ReactNode;\n /** Content to display below the textarea, on the leading side */\n bottomContent?: React.ReactNode;\n /** Content to display below the textarea, on the trailing side next to the submit button */\n bottomTrailingContent?: React.ReactNode;\n /** Disclaimer to display below the component */\n disclaimer?: React.ReactNode;\n /** Props for the textarea element */\n textareaProps?: HtmlAttributes<'textarea'>;\n};\n\n/**\n * The component is used to display the prompt input for an LLM.\n * It includes a textarea for the user to enter their prompt and a submit button.\n * It can also display content above and below the textarea, like uploaded files or a select for changing agents.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst PromptComponent = ({\n value,\n onChange,\n maxRows = 5,\n isDisabled = false,\n isRunningPrompt = false,\n onSubmitPrompt,\n onCancelPrompt,\n isSubmitDisabled = false,\n headerContent,\n topContent,\n bottomContent,\n bottomTrailingContent,\n disclaimer = 'All information should be verified.',\n className,\n style,\n htmlAttributes,\n ref,\n textareaProps,\n ...restProps\n}: CommonProps<'div', PromptProps>) => {\n const classes = classNames('ndl-ai-prompt', className, {\n 'ndl-disabled': isDisabled,\n });\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const textareaAboveRef = useRef<HTMLDivElement>(null);\n const [lineHeight, setLineHeight] = useState(0);\n\n /** File overflow stuff */\n useEffect(() => {\n let rafId: number | null = null;\n\n const checkOverflow = () => {\n if (textareaAboveRef.current !== null) {\n const element = textareaAboveRef.current;\n const maxHeight = parseFloat(\n getComputedStyle(element).maxHeight.replace('px', ''),\n );\n const scrollHeight = element.scrollHeight;\n\n if (scrollHeight > maxHeight) {\n element.classList.add('ndl-can-scroll');\n } else {\n element.classList.remove('ndl-can-scroll');\n }\n }\n };\n\n const debouncedCheck = () => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n }\n rafId = requestAnimationFrame(checkOverflow);\n };\n\n // Initial check\n checkOverflow();\n\n const resizeObserver = new ResizeObserver(debouncedCheck);\n const mutationObserver = new MutationObserver(debouncedCheck);\n\n if (textareaAboveRef.current !== null) {\n resizeObserver.observe(textareaAboveRef.current);\n mutationObserver.observe(textareaAboveRef.current, {\n childList: true,\n subtree: true,\n });\n }\n\n return () => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n }\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n }, []);\n\n /** Textarea stuff */\n useEffect(() => {\n if (textareaRef.current !== null) {\n const computed = window.getComputedStyle(textareaRef.current);\n setLineHeight(parseInt(computed.lineHeight));\n }\n }, []);\n\n const adjustTextareaHeight = useCallback(() => {\n const ta = textareaRef.current;\n\n if (ta !== null && lineHeight > 0) {\n // Reset height so scrollHeight measures correctly\n ta.style.height = 'auto';\n\n const maxHeight = lineHeight * maxRows;\n\n if (ta.scrollHeight <= maxHeight) {\n ta.style.overflowY = 'hidden';\n ta.style.height = `${ta.scrollHeight + 12}px`;\n } else {\n ta.style.overflowY = 'auto';\n ta.style.height = `${maxHeight + 12}px`;\n }\n }\n }, [lineHeight, maxRows]);\n\n // Adjust height when prompt value changes (including when cleared)\n useEffect(() => {\n adjustTextareaHeight();\n }, [value, adjustTextareaHeight]);\n\n const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n adjustTextareaHeight();\n onChange?.(e);\n };\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-prompt-wrapper\">\n {Boolean(headerContent) && (\n <div className=\"ndl-ai-prompt-header\">{headerContent}</div>\n )}\n <div className=\"ndl-ai-prompt-wrapper-inner\">\n {Boolean(topContent) && (\n <div\n className=\"ndl-ai-prompt-textarea-above\"\n ref={textareaAboveRef}\n >\n {topContent}\n </div>\n )}\n <textarea\n placeholder=\"Ask anything\"\n className=\"ndl-ai-prompt-textarea\"\n rows={1}\n onChange={handleInput}\n value={value}\n ref={textareaRef}\n disabled={isDisabled}\n onKeyDown={(e) => {\n if (\n e.key === 'Enter' &&\n !e.shiftKey &&\n isSubmitDisabled !== true\n ) {\n e.preventDefault();\n\n if (isRunningPrompt !== true) {\n onSubmitPrompt?.(e);\n }\n }\n }}\n {...textareaProps}\n />\n <div className=\"ndl-ai-prompt-textarea-below\">\n {Boolean(bottomContent) && (\n <div className=\"ndl-ai-prompt-textarea-below-leading\">\n {bottomContent}\n </div>\n )}\n <div className=\"ndl-ai-prompt-textarea-below-trailing\">\n {bottomTrailingContent}\n <SubmitPromptButton\n isDisabled={isSubmitDisabled}\n isRunningPrompt={isRunningPrompt}\n onSubmit={onSubmitPrompt}\n onCancel={onCancelPrompt}\n />\n </div>\n </div>\n </div>\n </div>\n {Boolean(disclaimer) && (\n <Typography variant=\"body-small\" className=\"ndl-ai-prompt-footer\">\n {disclaimer}\n </Typography>\n )}\n </div>\n );\n};\n\nconst SubmitPromptButton = ({\n onSubmit,\n onCancel,\n isDisabled,\n isRunningPrompt,\n}: {\n isDisabled?: boolean;\n isRunningPrompt?: boolean;\n onSubmit?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n onCancel?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}) => {\n return (\n <CleanIconButton\n className=\"ndl-ai-prompt-submit-button\"\n description={isRunningPrompt === true ? 'Stop' : 'Send'}\n size=\"small\"\n isDisabled={isDisabled}\n onClick={isRunningPrompt === true ? onCancel : onSubmit}\n >\n {isRunningPrompt === true ? (\n <StopCircleIconOutline />\n ) : (\n <ArrowSmallUpIconOutline />\n )}\n </CleanIconButton>\n );\n};\n\ntype AgentSelectProps = {\n value: { label: React.ReactNode; value: string };\n options: Array<{ label: React.ReactNode; value: string }>;\n onChange: (option: { label: React.ReactNode; value: string }) => void;\n};\n\nconst AgentSelect = ({ value, options = [], onChange }: AgentSelectProps) => {\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const displayLabel = value?.label ?? options[0]?.label ?? '';\n\n const handleItemClick = (option: {\n label: React.ReactNode;\n value: string;\n }) => {\n onChange?.(option);\n setIsMenuOpen(false);\n };\n\n return (\n <>\n <DropdownButton\n size=\"small\"\n className=\"ndl-ai-prompt-dropdown-button\"\n onClick={() => setIsMenuOpen((old) => !old)}\n isOpen={isMenuOpen}\n ref={anchorRef}\n >\n {displayLabel}\n </DropdownButton>\n <Menu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n anchorRef={anchorRef}\n placement=\"top-start-bottom-start\"\n >\n {options.map((option) => (\n <Menu.RadioItem\n key={option.value}\n title={option.label}\n isChecked={value?.value === option.value}\n onClick={() => handleItemClick(option)}\n />\n ))}\n </Menu>\n </>\n );\n};\n\ntype ContextTagProps = {\n children?: string;\n onClose: () => void;\n};\n\nconst ContextTag = ({ children, onClose }: ContextTagProps) => {\n const textRef = useRef<HTMLSpanElement>(null);\n const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n return (\n <Tooltip\n type=\"simple\"\n isOpen={isTooltipOpen}\n onOpenChange={(isOpen) => {\n if (isOpen) {\n const isTruncated =\n textRef.current?.scrollWidth &&\n textRef.current?.clientWidth &&\n textRef.current.scrollWidth > textRef.current.clientWidth;\n if (isTruncated) {\n setIsTooltipOpen(true);\n }\n } else {\n setIsTooltipOpen(false);\n }\n }}\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger hasButtonWrapper>\n <div className=\"ndl-ai-prompt-context-tag\">\n <ArrowSendIcon className=\"ndl-ai-prompt-context-tag-icon\" />\n <Typography\n variant=\"body-medium\"\n className=\"ndl-ai-prompt-context-tag-text\"\n ref={textRef}\n >\n {children}\n </Typography>\n\n <button\n type=\"button\"\n onClick={onClose}\n aria-label={`Remove context: ${children}`}\n className=\"ndl-ai-prompt-context-tag-close-button\"\n >\n <XMarkIconOutline className=\"ndl-ai-prompt-context-tag-icon\" />\n </button>\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content>{children}</Tooltip.Content>\n </Tooltip>\n );\n};\n\nconst Prompt = Object.assign(PromptComponent, {\n ContextTag: ContextTag,\n Select: AgentSelect,\n});\n\nexport { Prompt };\n"]}
|
|
@@ -37,9 +37,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
37
37
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
38
|
*/
|
|
39
39
|
const react_1 = require("@neo4j-ndl/react");
|
|
40
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
40
|
const classnames_1 = __importDefault(require("classnames"));
|
|
42
41
|
const react_2 = require("react");
|
|
42
|
+
const ChevronDownIconOutline_1 = require("../../icons/generated/heroIcons/ChevronDownIconOutline");
|
|
43
43
|
const presence_1 = require("../presence");
|
|
44
44
|
const thinking_duration_formatter_1 = require("../thinking/thinking-duration-formatter");
|
|
45
45
|
/**
|
|
@@ -69,7 +69,7 @@ const ReasoningComponent = (_a) => {
|
|
|
69
69
|
type: 'button',
|
|
70
70
|
},
|
|
71
71
|
}
|
|
72
|
-
: { as: 'div', htmlAttributes: { id: buttonId } }), { children: isThinking === true ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(presence_1.Presence, { isThinking: isThinking, className: "ndl-ai-reasoning-presence" }), (0, jsx_runtime_1.jsxs)("span", { className: "ndl-ai-reasoning-header-text", children: [currentAction, "..."] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Thought for ", thinkingDuration, " ", unit] }), (0, jsx_runtime_1.jsx)(
|
|
72
|
+
: { as: 'div', htmlAttributes: { id: buttonId } }), { children: isThinking === true ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(presence_1.Presence, { isThinking: isThinking, className: "ndl-ai-reasoning-presence" }), (0, jsx_runtime_1.jsxs)("span", { className: "ndl-ai-reasoning-header-text", children: [currentAction, "..."] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Thought for ", thinkingDuration, " ", unit] }), (0, jsx_runtime_1.jsx)(ChevronDownIconOutline_1.ChevronDownIconOutline, { className: (0, classnames_1.default)('ndl-ai-reasoning-chevron', {
|
|
73
73
|
'ndl-expanded': isExpanded,
|
|
74
74
|
}) })] })) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-ai-reasoning-content', {
|
|
75
75
|
'ndl-expanded': shouldShowChildren,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAA8C;AAC9C,
|
|
1
|
+
{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 { Typography } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\nimport { useId, useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { ChevronDownIconOutline } from '../../icons/generated/heroIcons/ChevronDownIconOutline';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n /** What should be displayed inside the reasoning component. */\n children?: React.ReactNode;\n /** Whether the AI is thinking */\n isThinking?: boolean;\n /** The duration of the thinking in milliseconds */\n thinkingMs?: number;\n /** The current action the AI is performing */\n currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n isThinking = true,\n thinkingMs = 1000,\n currentAction = 'Thinking',\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n const classes = classNames('ndl-ai-reasoning', className);\n const [isExpanded, setIsExpanded] = useState(false);\n const shouldShowChildren = isExpanded && isThinking === false;\n const buttonId = useId();\n const panelId = useId();\n\n const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <Typography\n variant=\"label\"\n className={classNames('ndl-ai-reasoning-header', {\n 'ndl-expanded': isExpanded,\n })}\n {...(!isThinking\n ? {\n as: 'button',\n htmlAttributes: {\n 'aria-controls': panelId,\n 'aria-expanded': isExpanded,\n id: buttonId,\n onClick: () => setIsExpanded(!isExpanded),\n type: 'button',\n },\n }\n : { as: 'div', htmlAttributes: { id: buttonId } })}\n >\n {isThinking === true ? (\n <>\n <Presence\n isThinking={isThinking}\n className=\"ndl-ai-reasoning-presence\"\n />\n <span className=\"ndl-ai-reasoning-header-text\">\n {currentAction}...\n </span>\n </>\n ) : (\n <>\n <span>\n Thought for {thinkingDuration} {unit}\n </span>\n <ChevronDownIconOutline\n className={classNames('ndl-ai-reasoning-chevron', {\n 'ndl-expanded': isExpanded,\n })}\n />\n </>\n )}\n </Typography>\n <div\n className={classNames('ndl-ai-reasoning-content', {\n 'ndl-expanded': shouldShowChildren,\n })}\n inert={!shouldShowChildren}\n aria-hidden={!shouldShowChildren}\n aria-labelledby={buttonId}\n role=\"region\"\n id={panelId}\n >\n <div className=\"ndl-ai-reasoning-content-inner\">\n <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n </div>\n </div>\n </div>\n );\n};\n\ntype SectionProps = {\n /** The heading of the section */\n heading?: React.ReactNode;\n /** The children of the section */\n children?: React.ReactNode;\n /** The visual leading the section */\n leadingVisual?: React.ReactNode;\n // TODO v5: remove this prop\n /** Whether the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n isExpanded?: boolean;\n // TODO v5: remove this prop\n /** The default value of the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n isDefaultExpanded?: boolean;\n // TODO v5: remove this prop\n /** Callback function triggered when the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n heading,\n leadingVisual,\n children,\n className,\n style,\n htmlAttributes,\n ref,\n isExpanded: _isExpanded,\n isDefaultExpanded: _isDefaultExpanded,\n onExpandChange: _onExpandChange,\n ...restProps\n}: CommonProps<'div', SectionProps>) => {\n const classes = classNames('ndl-ai-reasoning-section', className);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-reasoning-section-header\">\n <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n <Typography variant=\"subheading-small\">{heading}</Typography>\n </div>\n <div className=\"ndl-ai-reasoning-section-content\">\n <div className=\"ndl-ai-reasoning-section-content-line-container\">\n <div className=\"ndl-ai-reasoning-section-content-line\" />\n </div>\n <div className=\"ndl-ai-reasoning-section-content-children\">\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nconst Footer = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n const classes = classNames('ndl-ai-reasoning-footer', className);\n return (\n <Typography\n as=\"div\"\n variant=\"body-small\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n Footer,\n Section,\n});\n\nexport { Reasoning };\n"]}
|