@gravity-ui/aikit 2.19.2 → 2.19.3-beta.af9c6fb1cce2b60fd6c198cca08d00a762b16671.0
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/build/cjs/components/molecules/ButtonGroup/ButtonGroup.css +1 -1
- package/build/cjs/components/molecules/Suggestions/Suggestions.css +4 -0
- package/build/cjs/components/molecules/Suggestions/Suggestions.js +1 -1
- package/build/cjs/components/molecules/Suggestions/Suggestions.js.map +1 -1
- package/build/cjs/components/organisms/Header/Header.css +23 -1
- package/build/cjs/components/organisms/Header/Header.js +6 -3
- package/build/cjs/components/organisms/Header/Header.js.map +1 -1
- package/build/cjs/components/organisms/Header/types.d.ts +2 -0
- package/build/cjs/components/organisms/Header/types.js.map +1 -1
- package/build/cjs/components/organisms/Header/useHeader.d.ts +1 -0
- package/build/cjs/components/organisms/Header/useHeader.js +2 -1
- package/build/cjs/components/organisms/Header/useHeader.js.map +1 -1
- package/build/cjs/components/organisms/PromptInput/PromptInput.css +2 -2
- package/build/cjs/components/pages/ChatContainer/ChatContainer.css +67 -5
- package/build/cjs/components/pages/ChatContainer/ChatContainer.js +6 -2
- package/build/cjs/components/pages/ChatContainer/ChatContainer.js.map +1 -1
- package/build/cjs/components/pages/ChatContainer/types.d.ts +18 -0
- package/build/cjs/components/pages/ChatContainer/types.js.map +1 -1
- package/build/cjs/components/templates/ChatContent/ChatContent.css +1 -1
- package/build/cjs/components/templates/History/ChatItem.d.ts +4 -1
- package/build/cjs/components/templates/History/ChatItem.js +10 -3
- package/build/cjs/components/templates/History/ChatItem.js.map +1 -1
- package/build/cjs/components/templates/History/History.css +22 -0
- package/build/cjs/components/templates/History/History.d.ts +2 -0
- package/build/cjs/components/templates/History/History.js +2 -2
- package/build/cjs/components/templates/History/History.js.map +1 -1
- package/build/cjs/components/templates/History/HistoryList.js +4 -2
- package/build/cjs/components/templates/History/HistoryList.js.map +1 -1
- package/build/cjs/package.json +1 -1
- package/build/cjs/themes/common.css +38 -2
- package/build/cjs/themes/variables.css +38 -2
- package/build/docs/components/molecules/ButtonGroup.md +3 -3
- package/build/docs/components/organisms/Header.md +15 -0
- package/build/docs/components/organisms/PromptInput.md +12 -10
- package/build/docs/components/pages/ChatContainer.md +120 -66
- package/build/docs/components/templates/ChatContent.md +5 -4
- package/build/docs/components/templates/History.md +59 -26
- package/build/docs/guides/THEMING.md +70 -19
- package/build/esm/components/molecules/ButtonGroup/ButtonGroup.css +1 -1
- package/build/esm/components/molecules/Suggestions/Suggestions.css +4 -0
- package/build/esm/components/molecules/Suggestions/Suggestions.js +1 -1
- package/build/esm/components/molecules/Suggestions/Suggestions.js.map +1 -1
- package/build/esm/components/organisms/Header/Header.css +23 -1
- package/build/esm/components/organisms/Header/Header.js +6 -3
- package/build/esm/components/organisms/Header/Header.js.map +1 -1
- package/build/esm/components/organisms/Header/types.d.ts +2 -0
- package/build/esm/components/organisms/Header/types.js.map +1 -1
- package/build/esm/components/organisms/Header/useHeader.d.ts +1 -0
- package/build/esm/components/organisms/Header/useHeader.js +2 -1
- package/build/esm/components/organisms/Header/useHeader.js.map +1 -1
- package/build/esm/components/organisms/PromptInput/PromptInput.css +2 -2
- package/build/esm/components/pages/ChatContainer/ChatContainer.css +67 -5
- package/build/esm/components/pages/ChatContainer/ChatContainer.js +6 -2
- package/build/esm/components/pages/ChatContainer/ChatContainer.js.map +1 -1
- package/build/esm/components/pages/ChatContainer/types.d.ts +18 -0
- package/build/esm/components/pages/ChatContainer/types.js.map +1 -1
- package/build/esm/components/templates/ChatContent/ChatContent.css +1 -1
- package/build/esm/components/templates/History/ChatItem.d.ts +4 -1
- package/build/esm/components/templates/History/ChatItem.js +10 -3
- package/build/esm/components/templates/History/ChatItem.js.map +1 -1
- package/build/esm/components/templates/History/History.css +22 -0
- package/build/esm/components/templates/History/History.d.ts +2 -0
- package/build/esm/components/templates/History/History.js +2 -2
- package/build/esm/components/templates/History/History.js.map +1 -1
- package/build/esm/components/templates/History/HistoryList.js +4 -2
- package/build/esm/components/templates/History/HistoryList.js.map +1 -1
- package/build/esm/package.json +1 -1
- package/build/esm/themes/common.css +38 -2
- package/build/esm/themes/variables.css +38 -2
- package/docs/THEMING.md +70 -19
- package/llms-full.txt +77 -25
- package/package.json +1 -1
|
@@ -152,10 +152,11 @@ See [MessageList documentation](../organisms/MessageList.md) for full props.
|
|
|
152
152
|
|
|
153
153
|
The component uses CSS variables for theming:
|
|
154
154
|
|
|
155
|
-
| Variable
|
|
156
|
-
|
|
|
157
|
-
| `--g-spacing-2`
|
|
158
|
-
| `--g-aikit-chat-content-background`
|
|
155
|
+
| Variable | Description |
|
|
156
|
+
| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
157
|
+
| `--g-spacing-2` | Gap between elements (default: 8px) |
|
|
158
|
+
| `--g-aikit-chat-content-background` | Background color for chat content area |
|
|
159
|
+
| `--g-aikit-chat-content-message-list-inline-padding` | Side padding of the message list (default: `--g-spacing-2`; in mobile mode `ChatContainer` rebinds it to `--g-aikit-chat-container-mobile-message-list-inline-padding`) |
|
|
159
160
|
|
|
160
161
|
```css
|
|
161
162
|
/* Example: Custom styling */
|
|
@@ -86,32 +86,37 @@ import ruLocale from 'dayjs/locale/ru.js';
|
|
|
86
86
|
|
|
87
87
|
## Props
|
|
88
88
|
|
|
89
|
-
| Prop | Type | Required | Default | Description
|
|
90
|
-
| -------------------------- | -------------------------------- | -------- | ------------------- |
|
|
91
|
-
| `chats` | `ChatType[]` | ✓ | - | Array of chat items
|
|
92
|
-
| `anchorElement` | `HTMLElement \| null` | ✓ | - | Anchor element for the popup
|
|
93
|
-
| `open` | `boolean` | - | `false` | Control popup open state
|
|
94
|
-
| `onOpenChange` | `(open: boolean) => void` | - | - | Callback when popup state changes
|
|
95
|
-
| `selectedChat` | `ChatType \| null` | - | - | Currently selected chat
|
|
96
|
-
| `onSelectChat` | `(chat) => void` | - | - | Callback when a chat is selected
|
|
97
|
-
| `onDeleteChat` | `(chat) => void` | - | - | Callback when a chat is deleted
|
|
98
|
-
| `onLoadMore` | `() => void` or `OnLoadMoreLazy` | - | - | Callback to load more chats (see Load modes)
|
|
99
|
-
| `hasMore` | `boolean` | - | `false` | Whether there are more chats to load
|
|
100
|
-
| `loadMode` | `'full' \| 'lazy'` | - | `'full'` | Load mode: button (full) or scroll (lazy)
|
|
101
|
-
| `searchable` | `boolean` | - | `true` | Enable search functionality
|
|
102
|
-
| `groupBy` | `'date' \| 'none'` | - | `'date'` | Group chats by date or show flat list
|
|
103
|
-
| `dateFormat` | `string` | - | `YYYY.MM.DD` | Dayjs format for non-relative date headers
|
|
104
|
-
| `dateLocale` | `string` | - | Browser | Locale for non-relative date headers
|
|
105
|
-
| `dateLocaleConfig` | `DateLocaleConfig` | - | - | Dayjs locale configuration for date headers
|
|
106
|
-
| `showActions` | `boolean` | - | `true` | Show action buttons (delete)
|
|
107
|
-
| `emptyPlaceholder` | `React.ReactNode` | - | - | Custom empty state placeholder
|
|
108
|
-
| `emptyFilteredPlaceholder` | `React.ReactNode` | - | - | Placeholder shown when search returns no results
|
|
109
|
-
| `loading` | `boolean` | - | `false` | Show loading state
|
|
110
|
-
| `className` | `string` | - | - | Additional CSS class
|
|
111
|
-
| `qa` | `string` | - | - | QA/test identifier
|
|
112
|
-
| `style` | `CSSProperties` | - | - | Inline styles
|
|
113
|
-
| `filterFunction` | `ChatFilterFunction` | - | `defaultChatFilter` | Custom filter function for search
|
|
114
|
-
| `size` | `'s' \| 'm' \| 'l' \| 'xl'` | - | `m`
|
|
89
|
+
| Prop | Type | Required | Default | Description |
|
|
90
|
+
| -------------------------- | -------------------------------- | -------- | ------------------- | --------------------------------------------------- |
|
|
91
|
+
| `chats` | `ChatType[]` | ✓ | - | Array of chat items |
|
|
92
|
+
| `anchorElement` | `HTMLElement \| null` | ✓ | - | Anchor element for the popup |
|
|
93
|
+
| `open` | `boolean` | - | `false` | Control popup open state |
|
|
94
|
+
| `onOpenChange` | `(open: boolean) => void` | - | - | Callback when popup state changes |
|
|
95
|
+
| `selectedChat` | `ChatType \| null` | - | - | Currently selected chat |
|
|
96
|
+
| `onSelectChat` | `(chat) => void` | - | - | Callback when a chat is selected |
|
|
97
|
+
| `onDeleteChat` | `(chat) => void` | - | - | Callback when a chat is deleted |
|
|
98
|
+
| `onLoadMore` | `() => void` or `OnLoadMoreLazy` | - | - | Callback to load more chats (see Load modes) |
|
|
99
|
+
| `hasMore` | `boolean` | - | `false` | Whether there are more chats to load |
|
|
100
|
+
| `loadMode` | `'full' \| 'lazy'` | - | `'full'` | Load mode: button (full) or scroll (lazy) |
|
|
101
|
+
| `searchable` | `boolean` | - | `true` | Enable search functionality |
|
|
102
|
+
| `groupBy` | `'date' \| 'none'` | - | `'date'` | Group chats by date or show flat list |
|
|
103
|
+
| `dateFormat` | `string` | - | `YYYY.MM.DD` | Dayjs format for non-relative date headers |
|
|
104
|
+
| `dateLocale` | `string` | - | Browser | Locale for non-relative date headers |
|
|
105
|
+
| `dateLocaleConfig` | `DateLocaleConfig` | - | - | Dayjs locale configuration for date headers |
|
|
106
|
+
| `showActions` | `boolean` | - | `true` | Show action buttons (delete) |
|
|
107
|
+
| `emptyPlaceholder` | `React.ReactNode` | - | - | Custom empty state placeholder |
|
|
108
|
+
| `emptyFilteredPlaceholder` | `React.ReactNode` | - | - | Placeholder shown when search returns no results |
|
|
109
|
+
| `loading` | `boolean` | - | `false` | Show loading state |
|
|
110
|
+
| `className` | `string` | - | - | Additional CSS class |
|
|
111
|
+
| `qa` | `string` | - | - | QA/test identifier |
|
|
112
|
+
| `style` | `CSSProperties` | - | - | Inline styles |
|
|
113
|
+
| `filterFunction` | `ChatFilterFunction` | - | `defaultChatFilter` | Custom filter function for search |
|
|
114
|
+
| `size` | `'s' \| 'm' \| 'l' \| 'xl'` | - | `m`, `xl` on mobile | Size of the list and of the row delete button |
|
|
115
|
+
| `showSheetTitle` | `boolean` | - | `true` | Show the mobile sheet title (stays in `aria-label`) |
|
|
116
|
+
|
|
117
|
+
Without an explicit `size` the list is `m` on desktop and `xl` in mobile mode, and the row delete
|
|
118
|
+
button follows it: `s` on desktop, `xl` with a `20px` icon on mobile, so a row keeps a comfortable
|
|
119
|
+
touch target. Pass `size` to opt out.
|
|
115
120
|
|
|
116
121
|
## Chat Type
|
|
117
122
|
|
|
@@ -355,6 +360,34 @@ The component uses CSS variables for theming:
|
|
|
355
360
|
| `--g-aikit-chat-history-max-height` | Maximum height of the chat history container (default: `560px`) |
|
|
356
361
|
| `--g-aikit-chat-history-item-height` | Height of chat content item (default: `24px`) |
|
|
357
362
|
|
|
363
|
+
### Mobile Sheet Variables
|
|
364
|
+
|
|
365
|
+
In mobile mode the history opens in a `Sheet`: the list is flush with the sheet edges, the search
|
|
366
|
+
field has no border, and chat names are `16px/24px`. `env(safe-area-inset-*)` is added by the
|
|
367
|
+
component. Every metric is a variable:
|
|
368
|
+
|
|
369
|
+
| Variable | Description |
|
|
370
|
+
| ------------------------------------------------- | ----------------------------------------------------------- |
|
|
371
|
+
| `--g-aikit-history-sheet-inline-padding` | Side padding of the sheet (default: `var(--g-spacing-3)`) |
|
|
372
|
+
| `--g-aikit-history-sheet-bottom-padding` | Bottom padding of the sheet (default: `var(--g-spacing-5)`) |
|
|
373
|
+
| `--g-aikit-history-sheet-list-padding` | Padding of the chat list (default: `0`) |
|
|
374
|
+
| `--g-aikit-history-sheet-filter-inline-padding` | Side padding of the search field (default: `0`) |
|
|
375
|
+
| `--g-aikit-history-sheet-filter-border-bottom` | Border under the search field (default: `none`) |
|
|
376
|
+
| `--g-aikit-history-sheet-item-inline-end-padding` | Padding between a row and the right edge (default: `0`) |
|
|
377
|
+
| `--g-aikit-history-mobile-item-font-size` | Chat name size (default: `16px`) |
|
|
378
|
+
| `--g-aikit-history-mobile-item-line-height` | Chat name line height (default: `24px`) |
|
|
379
|
+
|
|
380
|
+
To bring the desktop metrics back into the sheet:
|
|
381
|
+
|
|
382
|
+
```css
|
|
383
|
+
.g-root {
|
|
384
|
+
--g-aikit-history-sheet-list-padding: 0 var(--g-spacing-2) var(--g-spacing-2);
|
|
385
|
+
--g-aikit-history-sheet-filter-inline-padding: var(--g-spacing-2);
|
|
386
|
+
--g-aikit-history-sheet-filter-border-bottom: 1px solid var(--g-color-line-generic);
|
|
387
|
+
--g-aikit-history-sheet-item-inline-end-padding: var(--g-spacing-4);
|
|
388
|
+
}
|
|
389
|
+
```
|
|
390
|
+
|
|
358
391
|
```css
|
|
359
392
|
/* Example: Custom dimensions */
|
|
360
393
|
.custom-chat-history {
|
|
@@ -50,6 +50,23 @@ Defined under `.g-root`, applied regardless of theme.
|
|
|
50
50
|
| `--g-aikit-suggestions-box-shadow` | `0 3px 10px rgba(198,172,255,.52)` | Shadow on `Suggestions` items |
|
|
51
51
|
| `--g-aikit-header-background` | `none` | Header background |
|
|
52
52
|
|
|
53
|
+
The header menu is rendered as a `Sheet` in mobile mode; `env(safe-area-inset-*)` is added by the component:
|
|
54
|
+
|
|
55
|
+
| Variable | Default | Description |
|
|
56
|
+
| -------------------------------------------- | -------------------- | ---------------------------------- |
|
|
57
|
+
| `--g-aikit-header-menu-sheet-inline-padding` | `var(--g-spacing-5)` | Side padding of the menu sheet |
|
|
58
|
+
| `--g-aikit-header-menu-sheet-bottom-padding` | `var(--g-spacing-5)` | Bottom padding of the menu sheet |
|
|
59
|
+
| `--g-aikit-header-menu-item-min-height` | `44px` | Menu item height (touch target) |
|
|
60
|
+
| `--g-aikit-header-menu-item-inline-padding` | `6px` | Side padding of a menu item |
|
|
61
|
+
| `--g-aikit-header-menu-item-icon-gap` | `var(--g-spacing-4)` | Gap between the icon and the label |
|
|
62
|
+
| `--g-aikit-header-menu-item-font-size` | `16px` | Menu item font size in the sheet |
|
|
63
|
+
|
|
64
|
+
### Button Group
|
|
65
|
+
|
|
66
|
+
| Variable | Default | Description |
|
|
67
|
+
| ---------------------------- | -------------------- | ----------------------------------------------------------------------------- |
|
|
68
|
+
| `--g-aikit-button-group-gap` | `var(--g-spacing-1)` | Gap between buttons; the mobile chat header raises it to `var(--g-spacing-2)` |
|
|
69
|
+
|
|
53
70
|
### Context Indicator
|
|
54
71
|
|
|
55
72
|
| Variable | Default | Description |
|
|
@@ -75,11 +92,26 @@ Defined under `.g-root`, applied regardless of theme.
|
|
|
75
92
|
| `--g-aikit-history-max-height` | `605px` | History popup max height |
|
|
76
93
|
| `--g-aikit-history-item-height` | `24px` | Row height |
|
|
77
94
|
|
|
95
|
+
In mobile mode the history is a `Sheet`; these tokens shape it, `env(safe-area-inset-*)` is added by the component:
|
|
96
|
+
|
|
97
|
+
| Variable | Default | Description |
|
|
98
|
+
| ------------------------------------------------- | -------------------- | ---------------------------------------- |
|
|
99
|
+
| `--g-aikit-history-sheet-inline-padding` | `var(--g-spacing-3)` | Side padding of the sheet |
|
|
100
|
+
| `--g-aikit-history-sheet-bottom-padding` | `var(--g-spacing-5)` | Bottom padding of the sheet |
|
|
101
|
+
| `--g-aikit-history-sheet-list-padding` | `0` | Padding of the chat list inside a sheet |
|
|
102
|
+
| `--g-aikit-history-sheet-filter-inline-padding` | `0` | Side padding of the search field |
|
|
103
|
+
| `--g-aikit-history-sheet-filter-border-bottom` | `none` | Border under the search field |
|
|
104
|
+
| `--g-aikit-history-sheet-item-inline-end-padding` | `0` | Padding between a row and the right edge |
|
|
105
|
+
| `--g-aikit-history-mobile-item-font-size` | `16px` | Chat name size in mobile mode |
|
|
106
|
+
| `--g-aikit-history-mobile-item-line-height` | `24px` | Chat name line height in mobile mode |
|
|
107
|
+
|
|
78
108
|
### Prompt Input
|
|
79
109
|
|
|
80
|
-
| Variable | Default
|
|
81
|
-
| ----------------------------------------- |
|
|
82
|
-
| `--g-aikit-prompt-input-panel-max-height` | `500px`
|
|
110
|
+
| Variable | Default | Description |
|
|
111
|
+
| ----------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------ |
|
|
112
|
+
| `--g-aikit-prompt-input-panel-max-height` | `500px` | Max height of expandable panel |
|
|
113
|
+
| `--g-aikit-prompt-input-simple-padding` | `var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-3)` | Padding of the `simple` view |
|
|
114
|
+
| `--g-aikit-prompt-input-full-padding` | `var(--g-spacing-2)` | Padding of the `full` view |
|
|
83
115
|
|
|
84
116
|
### Empty Container
|
|
85
117
|
|
|
@@ -101,22 +133,41 @@ Mobile mode uses a parallel set of tokens, applied by the component itself:
|
|
|
101
133
|
|
|
102
134
|
### Chat Content / Container
|
|
103
135
|
|
|
104
|
-
| Variable
|
|
105
|
-
|
|
|
106
|
-
| `--g-aikit-chat-content-background`
|
|
107
|
-
| `--g-aikit-chat-content-padding`
|
|
108
|
-
| `--g-aikit-chat-
|
|
109
|
-
| `--g-aikit-chat-container-
|
|
110
|
-
| `--g-aikit-chat-container-mobile-
|
|
111
|
-
| `--g-aikit-chat-container-mobile-
|
|
112
|
-
| `--g-aikit-chat-container-mobile-
|
|
113
|
-
| `--g-aikit-chat-container-
|
|
114
|
-
| `--g-aikit-chat-container-
|
|
115
|
-
| `--g-aikit-chat-container-
|
|
116
|
-
| `--g-aikit-chat-container-
|
|
117
|
-
| `--g-aikit-chat-container-
|
|
118
|
-
| `--g-aikit-chat-container-
|
|
119
|
-
| `--g-aikit-chat-container-footer-
|
|
136
|
+
| Variable | Default | Description |
|
|
137
|
+
| ------------------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
|
138
|
+
| `--g-aikit-chat-content-background` | `var(--g-color-base-background)` | Content area background |
|
|
139
|
+
| `--g-aikit-chat-content-padding` | derived | Content area padding |
|
|
140
|
+
| `--g-aikit-chat-content-message-list-inline-padding` | `var(--g-spacing-2)` | Side padding of the message list |
|
|
141
|
+
| `--g-aikit-chat-container-background` | `var(--g-color-base-background)` | Container background |
|
|
142
|
+
| `--g-aikit-chat-container-mobile-font-size` | `16px` | Body text size in mobile mode |
|
|
143
|
+
| `--g-aikit-chat-container-mobile-line-height` | `24px` | Body line height in mobile mode |
|
|
144
|
+
| `--g-aikit-chat-container-mobile-body-2-font-size` | `16px` | `body-2` text size in mobile mode |
|
|
145
|
+
| `--g-aikit-chat-container-mobile-body-2-line-height` | `20px` | `body-2` line height in mobile mode |
|
|
146
|
+
| `--g-aikit-chat-container-mobile-padding` | `var(--g-spacing-4)` | Base layout padding in mobile mode |
|
|
147
|
+
| `--g-aikit-chat-container-mobile-empty-container-padding` | `80px var(--g-spacing-4) 0` | Empty-state padding inside a mobile chat |
|
|
148
|
+
| `--g-aikit-chat-container-mobile-message-list-inline-padding` | `calc(var(--g-aikit-layout-base-padding-m) + var(--g-spacing-2))` | Message list side padding in mobile mode; the calc resolves against `.g-root` values to `20px` |
|
|
149
|
+
| `--g-aikit-chat-container-header-background` | `var(--g-color-base-background)` | Header band background |
|
|
150
|
+
| `--g-aikit-chat-container-content-background` | `var(--g-color-base-background)` | Content band background |
|
|
151
|
+
| `--g-aikit-chat-container-footer-background` | `var(--g-color-base-background)` | Footer band background |
|
|
152
|
+
| `--g-aikit-chat-container-content-empty-background` | `var(--g-color-base-background)` | Empty-state content background |
|
|
153
|
+
| `--g-aikit-chat-container-content-chat-background` | `var(--g-color-base-background)` | Active-chat content background |
|
|
154
|
+
| `--g-aikit-chat-container-footer-empty-background` | `var(--g-color-base-background)` | Empty-state footer background |
|
|
155
|
+
| `--g-aikit-chat-container-footer-chat-background` | `var(--g-color-base-background)` | Active-chat footer background |
|
|
156
|
+
|
|
157
|
+
Header and footer metrics, each with a `mobile-` counterpart applied in mobile mode:
|
|
158
|
+
|
|
159
|
+
| Variable | Default | Description |
|
|
160
|
+
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
|
|
161
|
+
| `--g-aikit-chat-container-header-height` | `auto` | Header height |
|
|
162
|
+
| `--g-aikit-chat-container-header-padding` | `var(--g-aikit-layout-base-padding-m)` | Header padding |
|
|
163
|
+
| `--g-aikit-chat-container-mobile-header-height` | `60px` | Minimum header height in mobile mode |
|
|
164
|
+
| `--g-aikit-chat-container-mobile-header-padding` | `var(--g-spacing-2) var(--g-spacing-3)` | Header padding in mobile mode |
|
|
165
|
+
| `--g-aikit-chat-container-footer-padding` | `var(--g-aikit-layout-base-padding-m)` | Footer padding |
|
|
166
|
+
| `--g-aikit-chat-container-footer-empty-padding` | `var(--g-aikit-chat-container-footer-padding)` | Footer padding on the welcome screen |
|
|
167
|
+
| `--g-aikit-chat-container-mobile-footer-padding` | `var(--g-spacing-4) var(--g-aikit-chat-container-mobile-padding) var(--g-spacing-2)` | Footer padding in mobile mode |
|
|
168
|
+
| `--g-aikit-chat-container-mobile-footer-empty-padding` | `var(--g-spacing-2) var(--g-aikit-chat-container-mobile-padding)` | Welcome-screen footer in mobile mode |
|
|
169
|
+
| `--g-aikit-chat-container-mobile-suggestions-max-height` | `40vh` | Max height of the suggestions block above the input in mobile mode; the block scrolls beyond it |
|
|
170
|
+
| `--g-aikit-chat-container-mobile-suggestions-title-min-height` | `48px` | Floor for the suggestions title above the input in mobile mode |
|
|
120
171
|
|
|
121
172
|
## Light Theme Overrides (`light.css`)
|
|
122
173
|
|
|
@@ -29,7 +29,7 @@ export function Suggestions(props) {
|
|
|
29
29
|
var _a;
|
|
30
30
|
const resolvedIcon = (_a = item.icon) !== null && _a !== void 0 ? _a : (isMobileAppearance && textAlign === 'left' ? 'right' : undefined);
|
|
31
31
|
const icon = resolvedIcon === 'none' ? undefined : resolvedIcon;
|
|
32
|
-
return (_jsx(ActionButton, { tooltipTitle: wrapText ? undefined : item.title, size: buttonSize, view: item.view || (isMobileAppearance ? 'normal' : 'outlined'), onClick: () => handleClick(item), className: b('button', { layout, mobile: isMobileAppearance }), width: "auto", children: _jsxs("div", { className: b('button-content', {
|
|
32
|
+
return (_jsx(ActionButton, { tooltipTitle: wrapText ? undefined : item.title, size: buttonSize, view: item.view || (isMobileAppearance ? 'normal' : 'outlined'), onClick: () => handleClick(item), className: b('button', { layout, mobile: isMobileAppearance, size: buttonSize }), width: "auto", children: _jsxs("div", { className: b('button-content', {
|
|
33
33
|
layout,
|
|
34
34
|
'text-align': icon ? undefined : textAlign,
|
|
35
35
|
}), children: [icon === 'left' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronLeft, size: iconSize }) })), _jsx(Text, { as: "div", variant: isMobileAppearance ? 'body-2' : undefined, className: b(wrapText ? 'button-text-wrap' : 'button-text'), children: item.title }), icon === 'right' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronRight, size: iconSize }) }))] }) }, item.id || index));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,+CAA4C;AAE7F,OAAO,EAAC,KAAK,EAAC,6BAA0B;AACxC,OAAO,EAAC,YAAY,EAAC,0CAAiC;AAEtD,2BAA4B;AAE5B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AA8B/B;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IAC/C,MAAM,EACF,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,EAAE,YAAY,EACtB,IAAI,EACJ,SAAS,EACT,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,kBAAkB,GAAG,QAAQ,IAAI,IAAI,KAAK,SAAS,CAAC;IAC1D,MAAM,QAAQ,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,kBAAkB,CAAC;IACpD,MAAM,UAAU,GAAG,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,KAAK,EAAE,IAAqB,EAAE,EAAE;;QAChD,MAAM,CAAA,MAAA,IAAI,CAAC,OAAO,qDAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA,CAAC;QACrD,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,IAAqB,EAAE,KAAa,EAAE,EAAE;;QAC1D,MAAM,YAAY,GACd,MAAA,IAAI,CAAC,IAAI,mCAAI,CAAC,kBAAkB,IAAI,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACpF,MAAM,IAAI,GAAG,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;QAEhE,OAAO,CACH,KAAC,YAAY,IAET,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC/C,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/D,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\nimport {Icon, Text, useMobile} from '@gravity-ui/uikit';\n\nimport {getControlIconSize, useMobileControlSize} from '../../../hooks/useMobileControlSize';\nimport type {SuggestionClickHandler, SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n /** Array of suggestion items to display */\n items: SuggestionsItem[];\n /** Callback function called when a suggestion is clicked */\n onClick: SuggestionClickHandler;\n /** Title to display above suggestions - can be string or custom React element */\n title?: React.ReactNode;\n /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n layout?: 'grid' | 'list';\n /** Text alignment inside buttons: 'left', 'center', or 'right'. A non-default value disables the mobile chevron */\n textAlign?: 'left' | 'center' | 'right';\n /**\n * Size of suggestion buttons. Defaults to `m`, or `xl` in mobile mode.\n * An explicit size also opts out of the rest of the mobile appearance:\n * `normal` view, text wrapping, chevron and `body-2` typography.\n */\n size?: ButtonButtonProps['size'];\n /** Enable text wrapping inside buttons instead of ellipsis. Defaults to true in mobile mode */\n wrapText?: boolean;\n /** Additional CSS class */\n className?: string;\n /** QA/test identifier */\n qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n const {\n items,\n onClick,\n title,\n layout = 'list',\n textAlign = 'left',\n wrapText: wrapTextProp,\n size,\n className,\n qa,\n } = props;\n\n const isMobile = useMobile();\n const isMobileAppearance = isMobile && size === undefined;\n const wrapText = wrapTextProp ?? isMobileAppearance;\n const buttonSize = useMobileControlSize(size, 'm', 'xl');\n const iconSize = getControlIconSize(buttonSize);\n\n const handleClick = async (item: SuggestionsItem) => {\n await item.onClick?.(item.title, item.id, item.data);\n await onClick(item.title, item.id, item.data);\n };\n\n const renderButton = (item: SuggestionsItem, index: number) => {\n const resolvedIcon =\n item.icon ?? (isMobileAppearance && textAlign === 'left' ? 'right' : undefined);\n const icon = resolvedIcon === 'none' ? undefined : resolvedIcon;\n\n return (\n <ActionButton\n key={item.id || index}\n tooltipTitle={wrapText ? undefined : item.title}\n size={buttonSize}\n view={item.view || (isMobileAppearance ? 'normal' : 'outlined')}\n onClick={() => handleClick(item)}\n className={b('button', {layout, mobile: isMobileAppearance, size: buttonSize})}\n width=\"auto\"\n >\n <div\n className={b('button-content', {\n layout,\n 'text-align': icon ? undefined : textAlign,\n })}\n >\n {icon === 'left' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronLeft} size={iconSize} />\n </div>\n )}\n <Text\n as=\"div\"\n variant={isMobileAppearance ? 'body-2' : undefined}\n className={b(wrapText ? 'button-text-wrap' : 'button-text')}\n >\n {item.title}\n </Text>\n {icon === 'right' && (\n <div className={b('button-icon')}>\n <Icon data={ChevronRight} size={iconSize} />\n </div>\n )}\n </div>\n </ActionButton>\n );\n };\n\n return (\n <div className={b('container', className)} data-qa={qa}>\n {title && (\n <div className={b('title')}>\n {typeof title === 'string' ? (\n <Text variant=\"body-1\" color=\"primary\">\n {title}\n </Text>\n ) : (\n title\n )}\n </div>\n )}\n <div className={b({layout})}>\n {items.map((item, index) => renderButton(item, index))}\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -46,5 +46,27 @@
|
|
|
46
46
|
flex-shrink: 0;
|
|
47
47
|
}
|
|
48
48
|
.g-aikit-header__menu-sheet-content {
|
|
49
|
-
padding
|
|
49
|
+
--g-sheet-content-padding: 0 max(var(--g-aikit-header-menu-sheet-inline-padding), env(safe-area-inset-right, 0px))
|
|
50
|
+
calc(var(--g-aikit-header-menu-sheet-bottom-padding) + env(safe-area-inset-bottom, 0px))
|
|
51
|
+
max(var(--g-aikit-header-menu-sheet-inline-padding), env(safe-area-inset-left, 0px));
|
|
52
|
+
--g-text-body-2-font-size: var(--g-aikit-header-menu-item-font-size);
|
|
53
|
+
}
|
|
54
|
+
.g-aikit-header__menu-sheet-content_without-title > .g-sheet__sheet-content-title {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
.g-aikit-header__menu-item {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
min-height: var(--g-aikit-header-menu-item-min-height);
|
|
61
|
+
padding-inline: var(--g-aikit-header-menu-item-inline-padding);
|
|
62
|
+
}
|
|
63
|
+
.g-aikit-header__menu-item-content {
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
width: 100%;
|
|
67
|
+
}
|
|
68
|
+
.g-aikit-header__menu-item-icon {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
margin-inline-end: var(--g-aikit-header-menu-item-icon-gap);
|
|
50
72
|
}
|
|
@@ -35,7 +35,7 @@ function getNormalizedMenuItem(item, menuItemQa) {
|
|
|
35
35
|
* @returns Header component
|
|
36
36
|
*/
|
|
37
37
|
export function Header(props) {
|
|
38
|
-
const { title, preview, icon, baseActions, additionalActions, actionsPlacement, actionsOrder, actionSize, isMobile, actionIcons, menuItems, menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, titlePosition, withIcon, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = useHeader(props);
|
|
38
|
+
const { title, preview, icon, baseActions, additionalActions, actionsPlacement, actionsOrder, actionSize, isMobile, actionIcons, menuItems, menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, showSheetTitle, titlePosition, withIcon, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = useHeader(props);
|
|
39
39
|
const [isMenuSheetVisible, setIsMenuSheetVisible] = useState(false);
|
|
40
40
|
const menuSheetId = useUniqId();
|
|
41
41
|
const iconSize = getControlIconSize(actionSize);
|
|
@@ -86,10 +86,12 @@ export function Header(props) {
|
|
|
86
86
|
const switcherTooltip = menuButtonTooltip !== null && menuButtonTooltip !== void 0 ? menuButtonTooltip : i18n('action-tooltip-menu');
|
|
87
87
|
const switcherQa = menuButtonQa !== null && menuButtonQa !== void 0 ? menuButtonQa : 'header-menu-button';
|
|
88
88
|
if (isMobile) {
|
|
89
|
-
return (_jsxs(React.Fragment, { children: [_jsx(ActionButton, { tooltipTitle: switcherTooltip, size: actionSize, view: "flat", className: b('action-button'), qa: switcherQa, onClick: () => setIsMenuSheetVisible(true), children: switcherContent }), _jsx(Sheet, { id: menuSheetId, title: i18n('menu-sheet-title'), visible: isMenuSheetVisible, onClose: () => setIsMenuSheetVisible(false), contentClassName: b('menu-sheet-content'
|
|
89
|
+
return (_jsxs(React.Fragment, { children: [_jsx(ActionButton, { tooltipTitle: switcherTooltip, size: actionSize, view: "flat", className: b('action-button'), qa: switcherQa, onClick: () => setIsMenuSheetVisible(true), children: switcherContent }), _jsx(Sheet, { id: menuSheetId, title: i18n('menu-sheet-title'), visible: isMenuSheetVisible, onClose: () => setIsMenuSheetVisible(false), contentClassName: b('menu-sheet-content', {
|
|
90
|
+
'without-title': !showSheetTitle,
|
|
91
|
+
}), qa: "header-menu-sheet-container", children: _jsx(Menu, { size: "xl", qa: "header-menu-sheet", children: normalizedMenuItems.map((item) => (_jsx(Menu.Item, { className: b('menu-item'), disabled: item.disabled, qa: item.qa, onClick: () => {
|
|
90
92
|
setIsMenuSheetVisible(false);
|
|
91
93
|
item.onClick();
|
|
92
|
-
}, children: item.label }, item.id))) }) })] }));
|
|
94
|
+
}, children: _jsxs("span", { className: b('menu-item-content'), children: [item.icon ? (_jsx("span", { className: b('menu-item-icon'), children: item.icon })) : null, item.label] }) }, item.id))) }) })] }));
|
|
93
95
|
}
|
|
94
96
|
return (_jsx(DropdownMenu, { items: dropdownMenuItems, renderSwitcher: (switcherProps) => (_jsx(ActionButton, Object.assign({}, switcherProps, { tooltipTitle: switcherTooltip, size: actionSize, view: "flat", className: b('action-button'), qa: switcherQa, children: switcherContent }))) }));
|
|
95
97
|
}, [
|
|
@@ -103,6 +105,7 @@ export function Header(props) {
|
|
|
103
105
|
menuButtonIcon,
|
|
104
106
|
menuButtonQa,
|
|
105
107
|
menuButtonTooltip,
|
|
108
|
+
showSheetTitle,
|
|
106
109
|
]);
|
|
107
110
|
const [leftBaseActions, rightBaseActions] = useMemo(() => {
|
|
108
111
|
const left = [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\n\nimport {\n ChevronsCollapseUpRight,\n ChevronsExpandUpRight,\n ClockArrowRotateLeft,\n Ellipsis,\n Plus,\n Sparkles,\n Xmark,\n} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, Menu, Sheet, Text, useUniqId} from '@gravity-ui/uikit';\n\nimport {Action} from 'src/types';\n\nimport {getControlIconSize} from '../../../hooks/useMobileControlSize';\nimport {isActionConfig} from '../../../utils/actionUtils';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\nimport {ButtonGroup} from '../../molecules/ButtonGroup';\n\nimport {i18n} from './i18n';\nimport {\n HeaderAction,\n HeaderActionGroup,\n type HeaderActionOrderItem,\n type HeaderMenuItem,\n type HeaderProps,\n} from './types';\nimport {ActionItem, useHeader} from './useHeader';\n\nimport './Header.scss';\n\nconst b = block('header');\n\n// Icons for base actions\nconst ACTION_ICONS: Record<HeaderAction, typeof Xmark> = {\n [HeaderAction.NewChat]: Plus,\n [HeaderAction.History]: ClockArrowRotateLeft,\n [HeaderAction.Folding]: ChevronsCollapseUpRight, // Default icon, will be switched based on state\n [HeaderAction.Close]: Xmark,\n};\n\n// Icons for folding states\nconst FOLDING_ICONS = {\n collapsed: ChevronsExpandUpRight,\n opened: ChevronsCollapseUpRight,\n};\n\ntype NormalizedMenuItem = HeaderMenuItem & {qa: string};\n\nfunction getNormalizedMenuItem(\n item: HeaderMenuItem,\n menuItemQa: HeaderProps['menuItemQa'],\n): NormalizedMenuItem {\n return {...item, qa: menuItemQa?.[item.id] ?? `header-menu-item-${item.id}`};\n}\n\n/**\n * Header component for displaying chat header with navigation and actions\n *\n * @param props - Component props\n * @returns Header component\n */\nexport function Header(props: HeaderProps) {\n const {\n title,\n preview,\n icon,\n baseActions,\n additionalActions,\n actionsPlacement,\n actionsOrder,\n actionSize,\n isMobile,\n actionIcons,\n menuItems,\n menuButtonTooltip,\n menuButtonIcon,\n menuButtonQa,\n menuItemQa,\n titlePosition,\n withIcon,\n showTitle = true,\n className,\n historyButtonRef,\n qa,\n actionQa,\n actionTooltipTexts,\n } = useHeader(props);\n\n const [isMenuSheetVisible, setIsMenuSheetVisible] = useState(false);\n const menuSheetId = useUniqId();\n\n const iconSize = getControlIconSize(actionSize);\n\n // Determine class for title positioning\n const titlePositionClass = b('title-container', {position: titlePosition});\n\n const iconElement = icon ? (\n <div className={b('icon')}>{icon}</div>\n ) : (\n <Icon data={Sparkles} size={16} />\n );\n\n // Render base action\n const renderBaseAction = useCallback(\n (action: ActionItem, ref?: React.RefObject<HTMLElement>) => {\n const actionId = action.id as HeaderAction;\n const IconComponent =\n actionIcons?.[actionId] ??\n (actionId === HeaderAction.Folding && action.foldingState\n ? FOLDING_ICONS[action.foldingState]\n : ACTION_ICONS[actionId]);\n\n if (!IconComponent) {\n return null;\n }\n\n // Get tooltip text\n let tooltipKey = `action-tooltip-${action.id}`;\n let tooltipOverride: string | undefined;\n if (action.id === HeaderAction.Folding && action.foldingState) {\n tooltipKey = `action-tooltip-folding-${action.foldingState}`;\n tooltipOverride = actionTooltipTexts?.[HeaderAction.Folding]?.[action.foldingState];\n } else {\n tooltipOverride =\n actionTooltipTexts?.[action.id as Exclude<HeaderAction, HeaderAction.Folding>];\n }\n\n // Determine ref for history button\n const buttonRef = action.id === HeaderAction.History ? ref : undefined;\n\n return (\n <ActionButton\n key={action.id}\n ref={buttonRef as React.Ref<HTMLButtonElement>}\n tooltipTitle={tooltipOverride ?? i18n(tooltipKey as Parameters<typeof i18n>[0])}\n size={actionSize}\n view=\"flat\"\n onClick={action.onClick}\n className={b('action-button')}\n qa={actionQa?.[action.id as HeaderAction] ?? `header-action-${action.id}`}\n >\n <Icon data={IconComponent} size={iconSize} />\n </ActionButton>\n );\n },\n [actionIcons, actionQa, actionSize, actionTooltipTexts, iconSize],\n );\n\n // Render additional action\n const renderAdditionalAction = useCallback(\n (action: Action, index: number) => {\n const id = `additional-${index}`;\n\n if (!isActionConfig(action)) {\n return <React.Fragment key={id}>{action}</React.Fragment>;\n }\n\n return (\n <ActionButton\n key={`${index}`}\n {...action}\n view={action.view || 'flat'}\n size={action.size ?? actionSize}\n >\n {action.icon || action.label}\n </ActionButton>\n );\n },\n [actionSize],\n );\n\n const normalizedMenuItems = useMemo(\n () => menuItems.map((item) => getNormalizedMenuItem(item, menuItemQa)),\n [menuItems, menuItemQa],\n );\n\n const dropdownMenuItems = useMemo(\n () =>\n normalizedMenuItems.map((item) => ({\n text: item.label,\n action: item.onClick,\n disabled: item.disabled,\n qa: item.qa,\n ...(item.icon ? {iconStart: item.icon} : {}),\n })),\n [normalizedMenuItems],\n );\n\n const headerMenu = useMemo(() => {\n if (normalizedMenuItems.length === 0) {\n return null;\n }\n\n const switcherContent = menuButtonIcon ?? <Icon data={Ellipsis} size={iconSize} />;\n const switcherTooltip = menuButtonTooltip ?? i18n('action-tooltip-menu');\n const switcherQa = menuButtonQa ?? 'header-menu-button';\n\n if (isMobile) {\n return (\n <React.Fragment>\n <ActionButton\n tooltipTitle={switcherTooltip}\n size={actionSize}\n view=\"flat\"\n className={b('action-button')}\n qa={switcherQa}\n onClick={() => setIsMenuSheetVisible(true)}\n >\n {switcherContent}\n </ActionButton>\n <Sheet\n id={menuSheetId}\n title={i18n('menu-sheet-title')}\n visible={isMenuSheetVisible}\n onClose={() => setIsMenuSheetVisible(false)}\n contentClassName={b('menu-sheet-content')}\n qa=\"header-menu-sheet-container\"\n >\n <Menu size=\"xl\" qa=\"header-menu-sheet\">\n {normalizedMenuItems.map((item) => (\n <Menu.Item\n key={item.id}\n disabled={item.disabled}\n iconStart={item.icon}\n qa={item.qa}\n onClick={() => {\n setIsMenuSheetVisible(false);\n item.onClick();\n }}\n >\n {item.label}\n </Menu.Item>\n ))}\n </Menu>\n </Sheet>\n </React.Fragment>\n );\n }\n\n return (\n <DropdownMenu\n items={dropdownMenuItems}\n renderSwitcher={(switcherProps) => (\n <ActionButton\n {...switcherProps}\n tooltipTitle={switcherTooltip}\n size={actionSize}\n view=\"flat\"\n className={b('action-button')}\n qa={switcherQa}\n >\n {switcherContent}\n </ActionButton>\n )}\n />\n );\n }, [\n actionSize,\n iconSize,\n isMobile,\n isMenuSheetVisible,\n menuSheetId,\n dropdownMenuItems,\n normalizedMenuItems,\n menuButtonIcon,\n menuButtonQa,\n menuButtonTooltip,\n ]);\n\n const [leftBaseActions, rightBaseActions] = useMemo(() => {\n const left: ActionItem[] = [];\n const right: ActionItem[] = [];\n baseActions.forEach((action) => {\n (actionsPlacement.base?.[action.id as HeaderAction] === 'left' ? left : right).push(\n action,\n );\n });\n return [left, right];\n }, [actionsPlacement.base, baseActions]);\n\n const renderActions = (side: 'left' | 'right') => {\n const sideAdditionalActions =\n (actionsPlacement.additional ?? 'right') === side ? additionalActions : [];\n const sideMenu = (actionsPlacement.menu ?? 'right') === side ? headerMenu : null;\n const sideBaseActions = side === 'left' ? leftBaseActions : rightBaseActions;\n if (sideAdditionalActions.length === 0 && !sideMenu && sideBaseActions.length === 0) {\n return null;\n }\n const legacyOrder: HeaderActionOrderItem[] = [\n ...(sideAdditionalActions.length > 0 ? [HeaderActionGroup.Additional] : []),\n ...(sideMenu ? [HeaderActionGroup.Menu] : []),\n ...sideBaseActions.map((action) => action.id as HeaderAction),\n ];\n const requestedOrder = actionsOrder[side] ?? [];\n const available = new Set(legacyOrder);\n const ordered = [...new Set([...requestedOrder, ...legacyOrder])].filter((item) =>\n available.has(item),\n );\n\n const renderOrderedAction = (item: HeaderActionOrderItem) => {\n if (item === HeaderActionGroup.Additional) {\n return sideAdditionalActions.map((action, index) =>\n renderAdditionalAction(action, index),\n );\n }\n if (item === HeaderActionGroup.Menu) {\n return <React.Fragment key=\"menu\">{sideMenu}</React.Fragment>;\n }\n const action = sideBaseActions.find((candidate) => candidate.id === item);\n return action ? renderBaseAction(action, historyButtonRef) : null;\n };\n\n return <ButtonGroup>{ordered.map(renderOrderedAction)}</ButtonGroup>;\n };\n\n const leftActions = renderActions('left');\n const rightActions = renderActions('right');\n\n return (\n <div className={b('', className)} data-qa={qa}>\n {(withIcon || leftActions) && (\n <div className={b('left')}>\n {withIcon && iconElement}\n {leftActions}\n </div>\n )}\n\n {/* Center part: title with preview */}\n {showTitle && (\n <div className={titlePositionClass}>\n {title && (\n <Text title={title} as=\"div\" variant=\"subheader-2\" className={b('title')}>\n {title}\n </Text>\n )}\n {preview && <div className={b('preview')}>{preview}</div>}\n </div>\n )}\n\n {rightActions}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\n\nimport {\n ChevronsCollapseUpRight,\n ChevronsExpandUpRight,\n ClockArrowRotateLeft,\n Ellipsis,\n Plus,\n Sparkles,\n Xmark,\n} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, Menu, Sheet, Text, useUniqId} from '@gravity-ui/uikit';\n\nimport {Action} from 'src/types';\n\nimport {getControlIconSize} from '../../../hooks/useMobileControlSize';\nimport {isActionConfig} from '../../../utils/actionUtils';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\nimport {ButtonGroup} from '../../molecules/ButtonGroup';\n\nimport {i18n} from './i18n';\nimport {\n HeaderAction,\n HeaderActionGroup,\n type HeaderActionOrderItem,\n type HeaderMenuItem,\n type HeaderProps,\n} from './types';\nimport {ActionItem, useHeader} from './useHeader';\n\nimport './Header.scss';\n\nconst b = block('header');\n\n// Icons for base actions\nconst ACTION_ICONS: Record<HeaderAction, typeof Xmark> = {\n [HeaderAction.NewChat]: Plus,\n [HeaderAction.History]: ClockArrowRotateLeft,\n [HeaderAction.Folding]: ChevronsCollapseUpRight, // Default icon, will be switched based on state\n [HeaderAction.Close]: Xmark,\n};\n\n// Icons for folding states\nconst FOLDING_ICONS = {\n collapsed: ChevronsExpandUpRight,\n opened: ChevronsCollapseUpRight,\n};\n\ntype NormalizedMenuItem = HeaderMenuItem & {qa: string};\n\nfunction getNormalizedMenuItem(\n item: HeaderMenuItem,\n menuItemQa: HeaderProps['menuItemQa'],\n): NormalizedMenuItem {\n return {...item, qa: menuItemQa?.[item.id] ?? `header-menu-item-${item.id}`};\n}\n\n/**\n * Header component for displaying chat header with navigation and actions\n *\n * @param props - Component props\n * @returns Header component\n */\nexport function Header(props: HeaderProps) {\n const {\n title,\n preview,\n icon,\n baseActions,\n additionalActions,\n actionsPlacement,\n actionsOrder,\n actionSize,\n isMobile,\n actionIcons,\n menuItems,\n menuButtonTooltip,\n menuButtonIcon,\n menuButtonQa,\n menuItemQa,\n showSheetTitle,\n titlePosition,\n withIcon,\n showTitle = true,\n className,\n historyButtonRef,\n qa,\n actionQa,\n actionTooltipTexts,\n } = useHeader(props);\n\n const [isMenuSheetVisible, setIsMenuSheetVisible] = useState(false);\n const menuSheetId = useUniqId();\n\n const iconSize = getControlIconSize(actionSize);\n\n // Determine class for title positioning\n const titlePositionClass = b('title-container', {position: titlePosition});\n\n const iconElement = icon ? (\n <div className={b('icon')}>{icon}</div>\n ) : (\n <Icon data={Sparkles} size={16} />\n );\n\n // Render base action\n const renderBaseAction = useCallback(\n (action: ActionItem, ref?: React.RefObject<HTMLElement>) => {\n const actionId = action.id as HeaderAction;\n const IconComponent =\n actionIcons?.[actionId] ??\n (actionId === HeaderAction.Folding && action.foldingState\n ? FOLDING_ICONS[action.foldingState]\n : ACTION_ICONS[actionId]);\n\n if (!IconComponent) {\n return null;\n }\n\n // Get tooltip text\n let tooltipKey = `action-tooltip-${action.id}`;\n let tooltipOverride: string | undefined;\n if (action.id === HeaderAction.Folding && action.foldingState) {\n tooltipKey = `action-tooltip-folding-${action.foldingState}`;\n tooltipOverride = actionTooltipTexts?.[HeaderAction.Folding]?.[action.foldingState];\n } else {\n tooltipOverride =\n actionTooltipTexts?.[action.id as Exclude<HeaderAction, HeaderAction.Folding>];\n }\n\n // Determine ref for history button\n const buttonRef = action.id === HeaderAction.History ? ref : undefined;\n\n return (\n <ActionButton\n key={action.id}\n ref={buttonRef as React.Ref<HTMLButtonElement>}\n tooltipTitle={tooltipOverride ?? i18n(tooltipKey as Parameters<typeof i18n>[0])}\n size={actionSize}\n view=\"flat\"\n onClick={action.onClick}\n className={b('action-button')}\n qa={actionQa?.[action.id as HeaderAction] ?? `header-action-${action.id}`}\n >\n <Icon data={IconComponent} size={iconSize} />\n </ActionButton>\n );\n },\n [actionIcons, actionQa, actionSize, actionTooltipTexts, iconSize],\n );\n\n // Render additional action\n const renderAdditionalAction = useCallback(\n (action: Action, index: number) => {\n const id = `additional-${index}`;\n\n if (!isActionConfig(action)) {\n return <React.Fragment key={id}>{action}</React.Fragment>;\n }\n\n return (\n <ActionButton\n key={`${index}`}\n {...action}\n view={action.view || 'flat'}\n size={action.size ?? actionSize}\n >\n {action.icon || action.label}\n </ActionButton>\n );\n },\n [actionSize],\n );\n\n const normalizedMenuItems = useMemo(\n () => menuItems.map((item) => getNormalizedMenuItem(item, menuItemQa)),\n [menuItems, menuItemQa],\n );\n\n const dropdownMenuItems = useMemo(\n () =>\n normalizedMenuItems.map((item) => ({\n text: item.label,\n action: item.onClick,\n disabled: item.disabled,\n qa: item.qa,\n ...(item.icon ? {iconStart: item.icon} : {}),\n })),\n [normalizedMenuItems],\n );\n\n const headerMenu = useMemo(() => {\n if (normalizedMenuItems.length === 0) {\n return null;\n }\n\n const switcherContent = menuButtonIcon ?? <Icon data={Ellipsis} size={iconSize} />;\n const switcherTooltip = menuButtonTooltip ?? i18n('action-tooltip-menu');\n const switcherQa = menuButtonQa ?? 'header-menu-button';\n\n if (isMobile) {\n return (\n <React.Fragment>\n <ActionButton\n tooltipTitle={switcherTooltip}\n size={actionSize}\n view=\"flat\"\n className={b('action-button')}\n qa={switcherQa}\n onClick={() => setIsMenuSheetVisible(true)}\n >\n {switcherContent}\n </ActionButton>\n <Sheet\n id={menuSheetId}\n title={i18n('menu-sheet-title')}\n visible={isMenuSheetVisible}\n onClose={() => setIsMenuSheetVisible(false)}\n contentClassName={b('menu-sheet-content', {\n 'without-title': !showSheetTitle,\n })}\n qa=\"header-menu-sheet-container\"\n >\n <Menu size=\"xl\" qa=\"header-menu-sheet\">\n {normalizedMenuItems.map((item) => (\n <Menu.Item\n key={item.id}\n className={b('menu-item')}\n disabled={item.disabled}\n qa={item.qa}\n onClick={() => {\n setIsMenuSheetVisible(false);\n item.onClick();\n }}\n >\n <span className={b('menu-item-content')}>\n {item.icon ? (\n <span className={b('menu-item-icon')}>{item.icon}</span>\n ) : null}\n {item.label}\n </span>\n </Menu.Item>\n ))}\n </Menu>\n </Sheet>\n </React.Fragment>\n );\n }\n\n return (\n <DropdownMenu\n items={dropdownMenuItems}\n renderSwitcher={(switcherProps) => (\n <ActionButton\n {...switcherProps}\n tooltipTitle={switcherTooltip}\n size={actionSize}\n view=\"flat\"\n className={b('action-button')}\n qa={switcherQa}\n >\n {switcherContent}\n </ActionButton>\n )}\n />\n );\n }, [\n actionSize,\n iconSize,\n isMobile,\n isMenuSheetVisible,\n menuSheetId,\n dropdownMenuItems,\n normalizedMenuItems,\n menuButtonIcon,\n menuButtonQa,\n menuButtonTooltip,\n showSheetTitle,\n ]);\n\n const [leftBaseActions, rightBaseActions] = useMemo(() => {\n const left: ActionItem[] = [];\n const right: ActionItem[] = [];\n baseActions.forEach((action) => {\n (actionsPlacement.base?.[action.id as HeaderAction] === 'left' ? left : right).push(\n action,\n );\n });\n return [left, right];\n }, [actionsPlacement.base, baseActions]);\n\n const renderActions = (side: 'left' | 'right') => {\n const sideAdditionalActions =\n (actionsPlacement.additional ?? 'right') === side ? additionalActions : [];\n const sideMenu = (actionsPlacement.menu ?? 'right') === side ? headerMenu : null;\n const sideBaseActions = side === 'left' ? leftBaseActions : rightBaseActions;\n if (sideAdditionalActions.length === 0 && !sideMenu && sideBaseActions.length === 0) {\n return null;\n }\n const legacyOrder: HeaderActionOrderItem[] = [\n ...(sideAdditionalActions.length > 0 ? [HeaderActionGroup.Additional] : []),\n ...(sideMenu ? [HeaderActionGroup.Menu] : []),\n ...sideBaseActions.map((action) => action.id as HeaderAction),\n ];\n const requestedOrder = actionsOrder[side] ?? [];\n const available = new Set(legacyOrder);\n const ordered = [...new Set([...requestedOrder, ...legacyOrder])].filter((item) =>\n available.has(item),\n );\n\n const renderOrderedAction = (item: HeaderActionOrderItem) => {\n if (item === HeaderActionGroup.Additional) {\n return sideAdditionalActions.map((action, index) =>\n renderAdditionalAction(action, index),\n );\n }\n if (item === HeaderActionGroup.Menu) {\n return <React.Fragment key=\"menu\">{sideMenu}</React.Fragment>;\n }\n const action = sideBaseActions.find((candidate) => candidate.id === item);\n return action ? renderBaseAction(action, historyButtonRef) : null;\n };\n\n return <ButtonGroup>{ordered.map(renderOrderedAction)}</ButtonGroup>;\n };\n\n const leftActions = renderActions('left');\n const rightActions = renderActions('right');\n\n return (\n <div className={b('', className)} data-qa={qa}>\n {(withIcon || leftActions) && (\n <div className={b('left')}>\n {withIcon && iconElement}\n {leftActions}\n </div>\n )}\n\n {/* Center part: title with preview */}\n {showTitle && (\n <div className={titlePositionClass}>\n {title && (\n <Text title={title} as=\"div\" variant=\"subheader-2\" className={b('title')}>\n {title}\n </Text>\n )}\n {preview && <div className={b('preview')}>{preview}</div>}\n </div>\n )}\n\n {rightActions}\n </div>\n );\n}\n"]}
|
|
@@ -64,6 +64,8 @@ export type HeaderProps = {
|
|
|
64
64
|
menuButtonQa?: string;
|
|
65
65
|
/** data-qa overrides per menu item id (default: `header-menu-item-${id}`) */
|
|
66
66
|
menuItemQa?: Partial<Record<string, string>>;
|
|
67
|
+
/** Show the mobile menu sheet title (default: `true`); it stays in `aria-label` either way */
|
|
68
|
+
showSheetTitle?: boolean;
|
|
67
69
|
/**
|
|
68
70
|
* Notification callback fired by ChatContainer when the history popup is toggled
|
|
69
71
|
* via the Header action button. Receives the next open state (the value the chat
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/types.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED,mFAAmF;AACnF,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,8CAAyB,CAAA;AAC7B,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B","sourcesContent":["import type {ButtonButtonProps, IconData} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nexport type HeaderMenuItem = {\n id: string;\n label: string;\n onClick: () => void;\n disabled?: boolean;\n /** Optional leading icon (rendered only when provided) */\n icon?: React.ReactNode;\n};\n\nexport enum HeaderAction {\n NewChat = 'newChat',\n History = 'history',\n Folding = 'folding',\n Close = 'close',\n}\n\n/** Composite and service action groups that can participate in header ordering. */\nexport enum HeaderActionGroup {\n Menu = 'menu',\n Additional = 'additional',\n}\n\nexport type HeaderActionSide = 'left' | 'right';\n\nexport type HeaderActionsPlacement = {\n /** Side for individual built-in actions. Unspecified actions stay on the right. */\n base?: Partial<Record<HeaderAction, HeaderActionSide>>;\n /** Side for the menu button. */\n menu?: HeaderActionSide;\n /** Side for the whole additional actions group. */\n additional?: HeaderActionSide;\n};\n\nexport type HeaderActionOrderItem = HeaderAction | HeaderActionGroup;\n\nexport type HeaderActionsOrder = Partial<\n Record<HeaderActionSide, readonly HeaderActionOrderItem[]>\n>;\n\nexport type HeaderActionTooltipTexts = Partial<\n Record<Exclude<HeaderAction, HeaderAction.Folding>, string>\n> & {\n /** Tooltip texts for {@link HeaderAction.Folding}. */\n [HeaderAction.Folding]?: Partial<Record<'collapsed' | 'opened', string>>;\n};\n\nexport type HeaderProps = {\n // Content\n icon?: React.ReactNode;\n title?: string;\n preview?: React.ReactNode;\n\n // Actions\n baseActions?: HeaderAction[];\n handleNewChat?: () => void;\n handleHistoryToggle?: () => void;\n handleFolding?: (value: 'collapsed' | 'opened') => void;\n handleClose?: () => void;\n additionalActions?: Action[];\n actionsPlacement?: HeaderActionsPlacement;\n /** Order of action groups on each side. Unlisted available actions keep their legacy order. */\n actionsOrder?: HeaderActionsOrder;\n /** Default size for built-in, menu, and configured additional action buttons. */\n actionSize?: ButtonButtonProps['size'];\n /** Custom icons for built-in actions. Unspecified actions keep their default icons. */\n actionIcons?: Partial<Record<HeaderAction, IconData>>;\n\n /**\n * Menu items for the \"...\" dropdown. Labels and handlers are provided by the consumer.\n * The menu button is rendered only when the array is non-empty.\n */\n menuItems?: HeaderMenuItem[];\n /** Tooltip for the menu button (default: built-in i18n) */\n menuButtonTooltip?: string;\n /** Custom menu button icon (default: horizontal Ellipsis) */\n menuButtonIcon?: React.ReactNode;\n /** data-qa for the menu button (default: `header-menu-button`) */\n menuButtonQa?: string;\n /** data-qa overrides per menu item id (default: `header-menu-item-${id}`) */\n menuItemQa?: Partial<Record<string, string>>;\n\n /**\n * Notification callback fired by ChatContainer when the history popup is toggled\n * via the Header action button. Receives the next open state (the value the chat\n * will be in after the toggle).\n */\n onHistoryToggle?: (open: boolean) => void;\n\n // Refs\n historyButtonRef?: React.RefObject<HTMLElement>;\n\n // Folding state\n foldingState?: 'collapsed' | 'opened';\n\n // Display settings\n titlePosition?: 'left' | 'center'; // default: left\n withIcon?: boolean; // default: true\n showTitle?: boolean; // default: true - controls visibility of title and preview\n\n className?: string;\n\n /** QA/test identifier on header root */\n qa?: string;\n /** Per base action `data-qa` (defaults to `header-action-${id}`) */\n actionQa?: Partial<Record<HeaderAction, string>>;\n /**\n * Override tooltip texts per base action. When a value is undefined, the built-in\n * localized string is used (e.g. `i18n('action-tooltip-newChat')`).\n */\n actionTooltipTexts?: HeaderActionTooltipTexts;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/types.ts"],"names":[],"mappings":"AAaA,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED,mFAAmF;AACnF,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,8CAAyB,CAAA;AAC7B,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B","sourcesContent":["import type {ButtonButtonProps, IconData} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nexport type HeaderMenuItem = {\n id: string;\n label: string;\n onClick: () => void;\n disabled?: boolean;\n /** Optional leading icon (rendered only when provided) */\n icon?: React.ReactNode;\n};\n\nexport enum HeaderAction {\n NewChat = 'newChat',\n History = 'history',\n Folding = 'folding',\n Close = 'close',\n}\n\n/** Composite and service action groups that can participate in header ordering. */\nexport enum HeaderActionGroup {\n Menu = 'menu',\n Additional = 'additional',\n}\n\nexport type HeaderActionSide = 'left' | 'right';\n\nexport type HeaderActionsPlacement = {\n /** Side for individual built-in actions. Unspecified actions stay on the right. */\n base?: Partial<Record<HeaderAction, HeaderActionSide>>;\n /** Side for the menu button. */\n menu?: HeaderActionSide;\n /** Side for the whole additional actions group. */\n additional?: HeaderActionSide;\n};\n\nexport type HeaderActionOrderItem = HeaderAction | HeaderActionGroup;\n\nexport type HeaderActionsOrder = Partial<\n Record<HeaderActionSide, readonly HeaderActionOrderItem[]>\n>;\n\nexport type HeaderActionTooltipTexts = Partial<\n Record<Exclude<HeaderAction, HeaderAction.Folding>, string>\n> & {\n /** Tooltip texts for {@link HeaderAction.Folding}. */\n [HeaderAction.Folding]?: Partial<Record<'collapsed' | 'opened', string>>;\n};\n\nexport type HeaderProps = {\n // Content\n icon?: React.ReactNode;\n title?: string;\n preview?: React.ReactNode;\n\n // Actions\n baseActions?: HeaderAction[];\n handleNewChat?: () => void;\n handleHistoryToggle?: () => void;\n handleFolding?: (value: 'collapsed' | 'opened') => void;\n handleClose?: () => void;\n additionalActions?: Action[];\n actionsPlacement?: HeaderActionsPlacement;\n /** Order of action groups on each side. Unlisted available actions keep their legacy order. */\n actionsOrder?: HeaderActionsOrder;\n /** Default size for built-in, menu, and configured additional action buttons. */\n actionSize?: ButtonButtonProps['size'];\n /** Custom icons for built-in actions. Unspecified actions keep their default icons. */\n actionIcons?: Partial<Record<HeaderAction, IconData>>;\n\n /**\n * Menu items for the \"...\" dropdown. Labels and handlers are provided by the consumer.\n * The menu button is rendered only when the array is non-empty.\n */\n menuItems?: HeaderMenuItem[];\n /** Tooltip for the menu button (default: built-in i18n) */\n menuButtonTooltip?: string;\n /** Custom menu button icon (default: horizontal Ellipsis) */\n menuButtonIcon?: React.ReactNode;\n /** data-qa for the menu button (default: `header-menu-button`) */\n menuButtonQa?: string;\n /** data-qa overrides per menu item id (default: `header-menu-item-${id}`) */\n menuItemQa?: Partial<Record<string, string>>;\n /** Show the mobile menu sheet title (default: `true`); it stays in `aria-label` either way */\n showSheetTitle?: boolean;\n\n /**\n * Notification callback fired by ChatContainer when the history popup is toggled\n * via the Header action button. Receives the next open state (the value the chat\n * will be in after the toggle).\n */\n onHistoryToggle?: (open: boolean) => void;\n\n // Refs\n historyButtonRef?: React.RefObject<HTMLElement>;\n\n // Folding state\n foldingState?: 'collapsed' | 'opened';\n\n // Display settings\n titlePosition?: 'left' | 'center'; // default: left\n withIcon?: boolean; // default: true\n showTitle?: boolean; // default: true - controls visibility of title and preview\n\n className?: string;\n\n /** QA/test identifier on header root */\n qa?: string;\n /** Per base action `data-qa` (defaults to `header-action-${id}`) */\n actionQa?: Partial<Record<HeaderAction, string>>;\n /**\n * Override tooltip texts per base action. When a value is undefined, the built-in\n * localized string is used (e.g. `i18n('action-tooltip-newChat')`).\n */\n actionTooltipTexts?: HeaderActionTooltipTexts;\n};\n"]}
|
|
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
|
|
|
2
2
|
import { useMobile } from '@gravity-ui/uikit';
|
|
3
3
|
import { HeaderAction } from "./types.js";
|
|
4
4
|
export function useHeader(props) {
|
|
5
|
-
const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], actionsPlacement = {}, actionsOrder = {}, actionSize: actionSizeProp, actionIcons, menuItems = [], menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, titlePosition = 'left', withIcon = true, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = props;
|
|
5
|
+
const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], actionsPlacement = {}, actionsOrder = {}, actionSize: actionSizeProp, actionIcons, menuItems = [], menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, showSheetTitle = true, titlePosition = 'left', withIcon = true, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = props;
|
|
6
6
|
const isMobile = useMobile();
|
|
7
7
|
const actionSize = actionSizeProp !== null && actionSizeProp !== void 0 ? actionSizeProp : (isMobile ? 'xl' : 'm');
|
|
8
8
|
// Build base actions
|
|
@@ -63,6 +63,7 @@ export function useHeader(props) {
|
|
|
63
63
|
menuButtonIcon,
|
|
64
64
|
menuButtonQa,
|
|
65
65
|
menuItemQa,
|
|
66
|
+
showSheetTitle,
|
|
66
67
|
};
|
|
67
68
|
}
|
|
68
69
|
//# sourceMappingURL=useHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeader.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/useHeader.ts"],"names":[],"mappings":"AAAA,OAAc,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAI5C,OAAO,EAAC,YAAY,EAAwC,mBAAgB;AAS5E,MAAM,UAAU,SAAS,CAAC,KAAkB;
|
|
1
|
+
{"version":3,"file":"useHeader.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/useHeader.ts"],"names":[],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\n\nimport {useMobile} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nimport {HeaderAction, type HeaderMenuItem, type HeaderProps} from './types';\n\nexport type ActionItem = {\n id: string;\n type: 'base' | 'additional';\n onClick?: () => void;\n foldingState?: 'collapsed' | 'opened';\n};\n\nexport function useHeader(props: HeaderProps): {\n title: string | undefined;\n preview: React.ReactNode | undefined;\n icon: React.ReactNode | undefined;\n baseActions: ActionItem[];\n additionalActions: Action[];\n actionsPlacement: NonNullable<HeaderProps['actionsPlacement']>;\n actionsOrder: NonNullable<HeaderProps['actionsOrder']>;\n actionSize: NonNullable<HeaderProps['actionSize']>;\n isMobile: boolean;\n actionIcons?: HeaderProps['actionIcons'];\n titlePosition: 'left' | 'center';\n withIcon: boolean;\n showTitle: boolean;\n className?: string;\n historyButtonRef?: React.RefObject<HTMLElement>;\n qa?: string;\n actionQa?: HeaderProps['actionQa'];\n actionTooltipTexts?: HeaderProps['actionTooltipTexts'];\n menuItems: HeaderMenuItem[];\n menuButtonTooltip?: string;\n menuButtonIcon?: React.ReactNode;\n menuButtonQa?: string;\n menuItemQa?: HeaderProps['menuItemQa'];\n showSheetTitle: boolean;\n} {\n const {\n icon,\n title,\n preview,\n baseActions = [],\n handleNewChat,\n handleHistoryToggle,\n handleClose,\n handleFolding,\n foldingState = 'opened',\n additionalActions = [],\n actionsPlacement = {},\n actionsOrder = {},\n actionSize: actionSizeProp,\n actionIcons,\n menuItems = [],\n menuButtonTooltip,\n menuButtonIcon,\n menuButtonQa,\n menuItemQa,\n showSheetTitle = true,\n titlePosition = 'left',\n withIcon = true,\n showTitle = true,\n className,\n historyButtonRef,\n qa,\n actionQa,\n actionTooltipTexts,\n } = props;\n\n const isMobile = useMobile();\n const actionSize = actionSizeProp ?? (isMobile ? 'xl' : 'm');\n\n // Build base actions\n const baseActionsList = useMemo(() => {\n const actions: ActionItem[] = [];\n\n baseActions.forEach((action) => {\n if (action === HeaderAction.Folding) {\n if (handleFolding) {\n actions.push({\n id: action,\n type: 'base',\n onClick: () => {\n const newState = foldingState === 'opened' ? 'collapsed' : 'opened';\n handleFolding(newState);\n },\n foldingState,\n });\n }\n return;\n }\n\n const actionMap: Partial<Record<HeaderAction, () => void>> = {\n [HeaderAction.NewChat]: handleNewChat,\n [HeaderAction.History]: handleHistoryToggle,\n [HeaderAction.Close]: handleClose,\n };\n\n const handler = actionMap[action];\n if (handler) {\n actions.push({\n id: action,\n type: 'base',\n onClick: handler,\n });\n }\n });\n\n return actions;\n }, [baseActions, handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState]);\n\n return {\n title,\n preview,\n icon,\n baseActions: baseActionsList,\n additionalActions,\n actionsPlacement,\n actionsOrder,\n actionSize,\n isMobile,\n actionIcons,\n titlePosition,\n withIcon,\n showTitle,\n className,\n historyButtonRef,\n qa,\n actionQa,\n actionTooltipTexts,\n menuItems,\n menuButtonTooltip,\n menuButtonIcon,\n menuButtonQa,\n menuItemQa,\n showSheetTitle,\n };\n}\n"]}
|