@redocly/theme 0.59.0-next.2 → 0.59.0-rc.1
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/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js +1 -1
- package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js +1 -1
- package/lib/components/Catalog/CatalogTagsWithTooltip.js +1 -1
- package/lib/components/Dropdown/Dropdown.d.ts +2 -16
- package/lib/components/Dropdown/Dropdown.js +5 -5
- package/lib/components/Menu/MenuItem.js +1 -1
- package/lib/components/OpenApiDocs/hooks/AdditionalOverviewInfo.d.ts +1 -0
- package/lib/components/OpenApiDocs/hooks/AdditionalOverviewInfo.js +11 -0
- package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.d.ts +1 -0
- package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.js +5 -0
- package/lib/components/Search/SearchAiConversationInput.d.ts +1 -2
- package/lib/components/Search/SearchAiConversationInput.js +3 -11
- package/lib/components/Search/SearchDialog.js +3 -6
- package/lib/components/Search/variables.js +1 -5
- package/lib/components/Select/variables.js +2 -2
- package/lib/components/Tag/Tag.js +4 -4
- package/lib/core/constants/search.d.ts +4 -5
- package/lib/core/constants/search.js +5 -4
- package/lib/core/hooks/use-tabs.d.ts +2 -3
- package/lib/core/hooks/use-tabs.js +57 -115
- package/lib/core/types/hooks.d.ts +2 -2
- package/lib/ext/process-scorecard.d.ts +5 -0
- package/lib/ext/process-scorecard.js +11 -0
- package/lib/icons/AiStarsIcon/AiStarsIcon.js +2 -11
- package/lib/icons/RedoclyIcon/RedoclyIcon.js +7 -4
- package/lib/index.d.ts +2 -0
- package/lib/index.js +2 -0
- package/lib/markdoc/components/Tabs/TabList.d.ts +1 -3
- package/lib/markdoc/components/Tabs/TabList.js +47 -197
- package/lib/markdoc/components/Tabs/Tabs.d.ts +1 -2
- package/lib/markdoc/components/Tabs/Tabs.js +12 -57
- package/package.json +3 -3
- package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx +1 -1
- package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx +1 -1
- package/src/components/Catalog/CatalogTagsWithTooltip.tsx +5 -1
- package/src/components/Dropdown/Dropdown.tsx +79 -84
- package/src/components/Menu/MenuItem.tsx +0 -1
- package/src/components/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx +9 -0
- package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx +1 -0
- package/src/components/Search/SearchAiConversationInput.tsx +2 -12
- package/src/components/Search/SearchDialog.tsx +3 -6
- package/src/components/Search/variables.ts +1 -5
- package/src/components/Select/variables.ts +2 -2
- package/src/components/Tag/Tag.tsx +6 -6
- package/src/core/constants/search.ts +4 -8
- package/src/core/hooks/use-tabs.ts +86 -168
- package/src/core/types/hooks.ts +1 -5
- package/src/ext/process-scorecard.ts +13 -0
- package/src/icons/AiStarsIcon/AiStarsIcon.tsx +2 -11
- package/src/icons/RedoclyIcon/RedoclyIcon.tsx +22 -4
- package/src/index.ts +2 -0
- package/src/markdoc/components/Tabs/TabList.tsx +105 -312
- package/src/markdoc/components/Tabs/Tabs.tsx +11 -136
|
@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
|
|
|
13
13
|
const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
|
|
14
14
|
function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
|
|
15
15
|
return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
|
|
16
|
-
react_1.default.createElement(Tabs_1.Tabs, { key: entity.id,
|
|
16
|
+
react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
|
|
17
17
|
react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
|
|
18
18
|
react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
|
|
19
19
|
react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },
|
package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js
CHANGED
|
@@ -40,7 +40,7 @@ const teamColumns = [
|
|
|
40
40
|
];
|
|
41
41
|
function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
|
|
42
42
|
return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
|
|
43
|
-
react_1.default.createElement(Tabs_1.Tabs, {
|
|
43
|
+
react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
|
|
44
44
|
react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
|
|
45
45
|
react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
|
|
46
46
|
react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
|
|
@@ -14,7 +14,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
|
|
|
14
14
|
if (!items || items.length === 0) {
|
|
15
15
|
if (showPlaceholder) {
|
|
16
16
|
return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
|
|
17
|
-
react_1.default.createElement(Tag_1.Tag, { style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
|
|
17
|
+
react_1.default.createElement(Tag_1.Tag, { variant: "outline", style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
|
|
18
18
|
}
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { PropsWithChildren } from 'react';
|
|
2
|
+
import type { PropsWithChildren, JSX } from 'react';
|
|
3
3
|
export type DropdownProps = PropsWithChildren<{
|
|
4
4
|
trigger: React.ReactNode;
|
|
5
5
|
triggerEvent?: 'click' | 'hover';
|
|
@@ -13,18 +13,4 @@ export type DropdownProps = PropsWithChildren<{
|
|
|
13
13
|
onClick?: (event: React.UIEvent) => void;
|
|
14
14
|
onClose?: () => void;
|
|
15
15
|
}>;
|
|
16
|
-
export declare
|
|
17
|
-
trigger: React.ReactNode;
|
|
18
|
-
triggerEvent?: "click" | "hover";
|
|
19
|
-
placement?: "top" | "bottom";
|
|
20
|
-
alignment?: "start" | "end";
|
|
21
|
-
active?: boolean;
|
|
22
|
-
closeOnClick?: boolean;
|
|
23
|
-
dataAttributes?: Record<string, string>;
|
|
24
|
-
className?: string;
|
|
25
|
-
withArrow?: boolean;
|
|
26
|
-
onClick?: (event: React.UIEvent) => void;
|
|
27
|
-
onClose?: () => void;
|
|
28
|
-
} & {
|
|
29
|
-
children?: React.ReactNode | undefined;
|
|
30
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
export declare function Dropdown({ children, className, active, trigger, triggerEvent, closeOnClick, withArrow, dataAttributes, placement, alignment, onClick, onClose, }: DropdownProps): JSX.Element;
|
|
@@ -36,13 +36,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
36
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.Dropdown =
|
|
39
|
+
exports.Dropdown = Dropdown;
|
|
40
40
|
const react_1 = __importStar(require("react"));
|
|
41
41
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
42
42
|
const hooks_1 = require("../../core/hooks");
|
|
43
43
|
const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
|
|
44
44
|
const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
|
|
45
|
-
|
|
45
|
+
function Dropdown({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, }) {
|
|
46
46
|
const dropdownRef = (0, react_1.useRef)(null);
|
|
47
47
|
const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
|
|
48
48
|
const handleOpen = () => {
|
|
@@ -65,13 +65,13 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
|
|
|
65
65
|
handleToggle(event);
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
|
-
(0, hooks_1.useOutsideClick)(
|
|
68
|
+
(0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
|
|
69
69
|
const triggerChild = react_1.default.Children.only(trigger);
|
|
70
70
|
const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
|
|
71
|
-
return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref:
|
|
71
|
+
return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
|
|
72
72
|
dropdownTrigger,
|
|
73
73
|
react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, isOpen: isOpen, onClick: closeOnClick ? handleChildClick : undefined }, children)));
|
|
74
|
-
}
|
|
74
|
+
}
|
|
75
75
|
const DropdownWrapper = styled_components_1.default.div `
|
|
76
76
|
--button-gap: var(--spacing-xxs);
|
|
77
77
|
|
|
@@ -81,7 +81,7 @@ function MenuItem(props) {
|
|
|
81
81
|
};
|
|
82
82
|
const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
|
|
83
83
|
const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
|
|
84
|
-
const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label"
|
|
84
|
+
const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
|
|
85
85
|
hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
|
|
86
86
|
react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
|
|
87
87
|
react_1.default.createElement(MenuItemLabelTextWrapper, null,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AdditionalOverviewInfo: any;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// interface AdditionalOverviewInfoProps {
|
|
3
|
+
// info: any;
|
|
4
|
+
// }
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.AdditionalOverviewInfo = void 0;
|
|
7
|
+
// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
|
|
8
|
+
// return null;
|
|
9
|
+
// }
|
|
10
|
+
exports.AdditionalOverviewInfo = null;
|
|
11
|
+
//# sourceMappingURL=AdditionalOverviewInfo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AfterOpenApiDescription: any;
|
|
@@ -4,7 +4,6 @@ type SearchAiConversationInputProps = {
|
|
|
4
4
|
isGeneratingResponse: boolean;
|
|
5
5
|
placeholder?: string;
|
|
6
6
|
className?: string;
|
|
7
|
-
disabled?: boolean;
|
|
8
7
|
};
|
|
9
|
-
export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder,
|
|
8
|
+
export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, }: SearchAiConversationInputProps): JSX.Element;
|
|
10
9
|
export {};
|
|
@@ -43,7 +43,7 @@ const constants_1 = require("../../core/constants");
|
|
|
43
43
|
const Button_1 = require("../../components/Button/Button");
|
|
44
44
|
const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
|
|
45
45
|
const hooks_1 = require("../../core/hooks");
|
|
46
|
-
function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder,
|
|
46
|
+
function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, }) {
|
|
47
47
|
const { useTranslate } = (0, hooks_1.useThemeHooks)();
|
|
48
48
|
const { translate } = useTranslate();
|
|
49
49
|
const inputRef = (0, react_1.useRef)(null);
|
|
@@ -57,8 +57,6 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
|
|
|
57
57
|
}
|
|
58
58
|
}, [isGeneratingResponse]);
|
|
59
59
|
const handleSendMessage = () => {
|
|
60
|
-
if (disabled)
|
|
61
|
-
return;
|
|
62
60
|
setQuery('');
|
|
63
61
|
onMessageSent(query);
|
|
64
62
|
};
|
|
@@ -67,9 +65,9 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
|
|
|
67
65
|
handleSendMessage();
|
|
68
66
|
}
|
|
69
67
|
};
|
|
70
|
-
const isDisabled =
|
|
68
|
+
const isDisabled = isGeneratingResponse || query.trim().length === 0;
|
|
71
69
|
return (react_1.default.createElement(SearchAiConversationInputWrapper, { "data-component-name": "Search/SearchAiConversationInput", className: className },
|
|
72
|
-
react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled:
|
|
70
|
+
react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled: isGeneratingResponse, maxLength: constants_1.AI_SEARCH_MAX_MESSAGE_LENGTH }),
|
|
73
71
|
react_1.default.createElement(SendButton, { disabled: isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
|
|
74
72
|
? '--button-content-color-disabled'
|
|
75
73
|
: 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: handleSendMessage })));
|
|
@@ -100,10 +98,6 @@ const ConversationInput = styled_components_1.default.input `
|
|
|
100
98
|
border-color: var(--search-ai-conversation-input-border-color-focus);
|
|
101
99
|
}
|
|
102
100
|
|
|
103
|
-
&:disabled {
|
|
104
|
-
background-color: var(--search-ai-conversation-input-bg-color-disabled);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
101
|
&:focus:disabled {
|
|
108
102
|
border-color: var(--search-ai-conversation-input-border-color-disabled);
|
|
109
103
|
}
|
|
@@ -118,8 +112,6 @@ const SendButton = (0, styled_components_1.default)(Button_1.Button) `
|
|
|
118
112
|
display: flex;
|
|
119
113
|
align-items: center;
|
|
120
114
|
justify-content: center;
|
|
121
|
-
border-radius: var(--search-ai-conversation-input-send-button-border-radius);
|
|
122
|
-
padding: var(--search-ai-conversation-input-send-button-padding);
|
|
123
115
|
|
|
124
116
|
&:hover {
|
|
125
117
|
background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
|
|
@@ -66,13 +66,12 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
|
|
|
66
66
|
const products = useProducts();
|
|
67
67
|
const currentProduct = useCurrentProduct();
|
|
68
68
|
const [product, setProduct] = (0, react_1.useState)(currentProduct);
|
|
69
|
-
const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
|
|
70
69
|
const [mode, setMode] = (0, react_1.useState)(initialMode);
|
|
71
70
|
const autoSearchDisabled = mode !== 'search';
|
|
72
|
-
const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled
|
|
71
|
+
const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
|
|
73
72
|
const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
|
|
74
73
|
const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
|
|
75
|
-
const aiSearch = useAiSearch({ filter }
|
|
74
|
+
const aiSearch = useAiSearch({ filter });
|
|
76
75
|
const searchInputRef = (0, react_1.useRef)(null);
|
|
77
76
|
const modalRef = (0, react_1.useRef)(null);
|
|
78
77
|
const aiQueryRef = (0, react_1.useRef)(null);
|
|
@@ -127,11 +126,10 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
|
|
|
127
126
|
totalResults: results.length.toString(),
|
|
128
127
|
index: index.toString(),
|
|
129
128
|
searchEngine: mode,
|
|
130
|
-
searchSessionId,
|
|
131
129
|
});
|
|
132
130
|
onClose();
|
|
133
131
|
} }));
|
|
134
|
-
}, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode
|
|
132
|
+
}, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode]);
|
|
135
133
|
const showLoadMore = (0, react_1.useCallback)((groupKey, currentCount = 0) => {
|
|
136
134
|
const groupFacet = facets.find((facet) => facet.field === groupField);
|
|
137
135
|
let needLoadMore = false;
|
|
@@ -236,7 +234,6 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
|
|
|
236
234
|
telemetry.sendSearchRecentClickedMessage({
|
|
237
235
|
query,
|
|
238
236
|
index: index.toString(),
|
|
239
|
-
searchSessionId,
|
|
240
237
|
});
|
|
241
238
|
setQuery(query);
|
|
242
239
|
focusSearchInput();
|
|
@@ -173,7 +173,6 @@ exports.search = (0, styled_components_1.css) `
|
|
|
173
173
|
--search-ai-assistant-bg-color: var(--layer-color);
|
|
174
174
|
--search-ai-assistant-text-color: var(--text-color-primary);
|
|
175
175
|
--search-ai-assistant-border: 1px solid var(--border-color-primary);
|
|
176
|
-
--search-ai-assistant-message-max-width: 80%;
|
|
177
176
|
|
|
178
177
|
--search-ai-resources-gap: var(--spacing-base);
|
|
179
178
|
--search-ai-resources-title-font-weight: var(--font-weight-medium);
|
|
@@ -235,7 +234,6 @@ exports.search = (0, styled_components_1.css) `
|
|
|
235
234
|
* @tokens AI Search Conversation Input
|
|
236
235
|
*/
|
|
237
236
|
--search-ai-conversation-input-bg-color: var(--bg-color);
|
|
238
|
-
--search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
|
|
239
237
|
--search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
|
|
240
238
|
--search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
|
|
241
239
|
--search-ai-conversation-input-border-radius: var(--border-radius-lg);
|
|
@@ -245,12 +243,10 @@ exports.search = (0, styled_components_1.css) `
|
|
|
245
243
|
--search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
|
|
246
244
|
|
|
247
245
|
--search-ai-conversation-input-send-button-right: 12px;
|
|
248
|
-
--search-ai-conversation-input-send-button-padding: 5px;
|
|
249
246
|
--search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
|
|
250
247
|
--search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
|
|
251
248
|
--search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
|
|
252
249
|
--search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
|
|
253
|
-
--search-ai-conversation-input-send-button-border-radius: var(--border-radius);
|
|
254
250
|
|
|
255
251
|
/**
|
|
256
252
|
* @tokens AI Search Response
|
|
@@ -283,7 +279,7 @@ exports.search = (0, styled_components_1.css) `
|
|
|
283
279
|
|
|
284
280
|
--search-ai-suggestions-gap: var(--spacing-sm);
|
|
285
281
|
--search-ai-suggestions-margin-left: var(--spacing-xs);
|
|
286
|
-
--search-ai-suggestion-item-gap: var(--spacing-
|
|
282
|
+
--search-ai-suggestion-item-gap: var(--spacing-xs);
|
|
287
283
|
|
|
288
284
|
--search-ai-suggestions-title-text-color: var(--text-color-description);
|
|
289
285
|
--search-ai-suggestions-title-font-size: var(--font-size-base);
|
|
@@ -12,7 +12,7 @@ exports.select = (0, styled_components_1.css) `
|
|
|
12
12
|
--select-text-color: var(--text-color-secondary); // @presenter Color
|
|
13
13
|
--select-border-radius: var(--border-radius); // @presenter BorderRadius
|
|
14
14
|
--select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
|
|
15
|
-
|
|
15
|
+
|
|
16
16
|
--select-input-padding-vertical: 6px; // @presenter Spacing
|
|
17
17
|
--select-input-padding-horizontal: 6px; // @presenter Spacing
|
|
18
18
|
--select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
|
|
@@ -40,7 +40,7 @@ exports.select = (0, styled_components_1.css) `
|
|
|
40
40
|
--select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
|
|
41
41
|
--select-list-item-bg-color-active: transparent; // @presenter Color
|
|
42
42
|
--select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
|
|
43
|
-
--select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
|
|
43
|
+
--select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
|
|
44
44
|
|
|
45
45
|
--select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
|
|
46
46
|
// @tokens End
|
|
@@ -132,20 +132,20 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
|
|
|
132
132
|
|
|
133
133
|
color: var(--tag-color);
|
|
134
134
|
background-color: ${({ variant }) => variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
|
|
135
|
-
${({ borderless
|
|
135
|
+
${({ borderless }) => borderless
|
|
136
136
|
? ''
|
|
137
|
-
: `border: var(--tag-border-width) var(--tag-border-style)
|
|
137
|
+
: `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
|
|
138
138
|
border-radius: var(--tag-border-radius);
|
|
139
139
|
|
|
140
140
|
svg {
|
|
141
141
|
width: var(--tag-icon-width);
|
|
142
142
|
height: var(--tag-icon-height);
|
|
143
143
|
}
|
|
144
|
-
|
|
144
|
+
/*
|
|
145
145
|
&:hover {
|
|
146
146
|
background-color: ${({ variant }) => variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
|
|
147
147
|
border-color: ${({ variant }) => variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
|
|
148
|
-
}
|
|
148
|
+
} */
|
|
149
149
|
|
|
150
150
|
&:focus-visible {
|
|
151
151
|
outline: 1px solid var(--tag-border-color-focused);
|
|
@@ -6,11 +6,10 @@ export declare enum AiSearchError {
|
|
|
6
6
|
EmptyResponse = "empty_response",
|
|
7
7
|
ErrorProcessingResponse = "error_processing_response"
|
|
8
8
|
}
|
|
9
|
-
export declare const AiSearchConversationRole
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
|
|
9
|
+
export declare const enum AiSearchConversationRole {
|
|
10
|
+
USER = "user",
|
|
11
|
+
ASSISTANT = "assistant"
|
|
12
|
+
}
|
|
14
13
|
export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
|
|
15
14
|
export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
|
|
16
15
|
export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
|
|
@@ -9,10 +9,11 @@ var AiSearchError;
|
|
|
9
9
|
AiSearchError["EmptyResponse"] = "empty_response";
|
|
10
10
|
AiSearchError["ErrorProcessingResponse"] = "error_processing_response";
|
|
11
11
|
})(AiSearchError || (exports.AiSearchError = AiSearchError = {}));
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
var AiSearchConversationRole;
|
|
13
|
+
(function (AiSearchConversationRole) {
|
|
14
|
+
AiSearchConversationRole["USER"] = "user";
|
|
15
|
+
AiSearchConversationRole["ASSISTANT"] = "assistant";
|
|
16
|
+
})(AiSearchConversationRole || (exports.AiSearchConversationRole = AiSearchConversationRole = {}));
|
|
16
17
|
const defaultErrorConfig = {
|
|
17
18
|
headerKey: 'search.ai.error.header',
|
|
18
19
|
headerDefault: 'Oops! Something went wrong.',
|
|
@@ -4,19 +4,18 @@ type UseTabsProps = {
|
|
|
4
4
|
totalTabs: number;
|
|
5
5
|
containerRef?: React.RefObject<HTMLElement | null>;
|
|
6
6
|
};
|
|
7
|
-
|
|
7
|
+
export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
|
|
8
8
|
setTabRef: (element: HTMLButtonElement | null, index: number) => void;
|
|
9
9
|
onTabClick: (labelOrIndex: string | number) => void;
|
|
10
10
|
handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
|
|
11
11
|
visibleTabs: number[];
|
|
12
12
|
overflowTabs: number[];
|
|
13
|
-
|
|
13
|
+
allTabsHidden: boolean;
|
|
14
14
|
};
|
|
15
15
|
type UseActiveTabProps = {
|
|
16
16
|
initialTab: string;
|
|
17
17
|
tabsId?: string;
|
|
18
18
|
};
|
|
19
|
-
export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }: UseTabsProps): UseTabsReturn;
|
|
20
19
|
export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
|
|
21
20
|
activeTab: string;
|
|
22
21
|
setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;
|