@gravity-ui/aikit 1.6.0 → 1.8.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/README.md +0 -2
- package/dist/adapters/openai/helpers/mapOpenAIConversationsToChats.d.ts +3 -0
- package/dist/adapters/openai/helpers/mapOpenAIConversationsToChats.js +22 -0
- package/dist/adapters/openai/index.d.ts +5 -2
- package/dist/adapters/openai/index.js +2 -0
- package/dist/adapters/openai/types/index.d.ts +4 -1
- package/dist/adapters/openai/types/openAiTypes.d.ts +6 -0
- package/dist/adapters/openai/useOpenAIConversationsAdapter.d.ts +9 -0
- package/dist/adapters/openai/useOpenAIConversationsAdapter.js +15 -0
- package/dist/adapters/openai/useOpenAIResponsesAdapter.d.ts +1 -1
- package/dist/adapters/openai/useOpenAIResponsesAdapter.js +3 -3
- package/dist/components/atoms/Alert/Alert.css +28 -0
- package/dist/components/atoms/ChatDate/ChatDate.css +9 -0
- package/dist/components/atoms/ContextIndicator/ContextIndicator.css +66 -0
- package/dist/components/atoms/DiffStat/DiffStat.css +23 -0
- package/dist/components/atoms/Disclaimer/Disclaimer.css +7 -0
- package/dist/components/atoms/IntersectionContainer/IntersectionContainer.css +3 -0
- package/dist/components/atoms/Loader/Loader.css +48 -0
- package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.css +5 -0
- package/dist/components/atoms/MessageBalloon/MessageBalloon.css +7 -0
- package/dist/components/atoms/Shimmer/Shimmer.css +18 -0
- package/dist/components/atoms/SubmitButton/SubmitButton.css +20 -0
- package/dist/components/atoms/ToolIndicator/ToolIndicator.css +9 -0
- package/dist/components/molecules/BaseMessage/BaseMessage.css +26 -0
- package/dist/components/molecules/ButtonGroup/ButtonGroup.css +13 -0
- package/dist/components/molecules/PromptInputBody/PromptInputBody.css +15 -0
- package/dist/components/molecules/PromptInputFooter/PromptInputFooter.css +18 -0
- package/dist/components/molecules/PromptInputHeader/PromptInputHeader.css +21 -0
- package/dist/components/molecules/PromptInputPanel/PromptInputPanel.css +7 -0
- package/dist/components/molecules/Suggestions/Suggestions.css +71 -0
- package/dist/components/molecules/Tabs/Tabs.css +35 -0
- package/dist/components/molecules/ToolFooter/ToolFooter.css +10 -0
- package/dist/components/molecules/ToolHeader/ToolHeader.css +18 -0
- package/dist/components/molecules/ToolStatus/ToolStatus.css +1 -0
- package/dist/components/organisms/AssistantMessage/AssistantMessage.css +6 -0
- package/dist/components/organisms/Header/Header.css +40 -0
- package/dist/components/organisms/MessageList/MessageList.css +26 -0
- package/dist/components/organisms/PromptInput/PromptInput.css +50 -0
- package/dist/components/organisms/ThinkingMessage/ThinkingMessage.css +20 -0
- package/dist/components/organisms/ToolMessage/ToolMessage.css +13 -0
- package/dist/components/organisms/UserMessage/UserMessage.css +10 -0
- package/dist/components/pages/ChatContainer/ChatContainer.css +49 -0
- package/dist/components/templates/ChatContent/ChatContent.css +23 -0
- package/dist/components/templates/EmptyContainer/EmptyContainer.css +64 -0
- package/dist/components/templates/History/History.css +81 -0
- package/dist/demo/ContentWrapper/ContentWrapper.css +6 -0
- package/dist/demo/DocsDecorator/DocsDecorator.css +87 -0
- package/dist/demo/Showcase/Showcase.css +34 -0
- package/dist/demo/ShowcaseItem/ShowcaseItem.css +7 -0
- package/dist/demo/SwapArea/SwapArea.css +11 -0
- package/dist/styles/variables.css +1 -0
- package/package.json +5 -5
- package/dist/components/atoms/Alert/Alert.scss +0 -39
- package/dist/components/atoms/ChatDate/ChatDate.scss +0 -15
- package/dist/components/atoms/ContextIndicator/ContextIndicator.scss +0 -93
- package/dist/components/atoms/DiffStat/DiffStat.scss +0 -36
- package/dist/components/atoms/Disclaimer/Disclaimer.scss +0 -13
- package/dist/components/atoms/IntersectionContainer/IntersectionContainer.scss +0 -7
- package/dist/components/atoms/Loader/Loader.scss +0 -72
- package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.scss +0 -10
- package/dist/components/atoms/MessageBalloon/MessageBalloon.scss +0 -11
- package/dist/components/atoms/Shimmer/Shimmer.scss +0 -32
- package/dist/components/atoms/SubmitButton/SubmitButton.scss +0 -29
- package/dist/components/atoms/ToolIndicator/ToolIndicator.scss +0 -15
- package/dist/components/molecules/BaseMessage/BaseMessage.scss +0 -41
- package/dist/components/molecules/ButtonGroup/ButtonGroup.scss +0 -19
- package/dist/components/molecules/PromptInputBody/PromptInputBody.scss +0 -22
- package/dist/components/molecules/PromptInputFooter/PromptInputFooter.scss +0 -25
- package/dist/components/molecules/PromptInputHeader/PromptInputHeader.scss +0 -27
- package/dist/components/molecules/PromptInputPanel/PromptInputPanel.scss +0 -11
- package/dist/components/molecules/Suggestions/Suggestions.scss +0 -90
- package/dist/components/molecules/Tabs/Tabs.scss +0 -46
- package/dist/components/molecules/ToolFooter/ToolFooter.scss +0 -15
- package/dist/components/molecules/ToolHeader/ToolHeader.scss +0 -24
- package/dist/components/molecules/ToolStatus/ToolStatus.scss +0 -6
- package/dist/components/organisms/AssistantMessage/AssistantMessage.scss +0 -10
- package/dist/components/organisms/Header/Header.scss +0 -51
- package/dist/components/organisms/MessageList/MessageList.scss +0 -35
- package/dist/components/organisms/PromptInput/PromptInput.scss +0 -77
- package/dist/components/organisms/ThinkingMessage/ThinkingMessage.scss +0 -27
- package/dist/components/organisms/ToolMessage/ToolMessage.scss +0 -19
- package/dist/components/organisms/UserMessage/UserMessage.scss +0 -14
- package/dist/components/pages/ChatContainer/ChatContainer.scss +0 -60
- package/dist/components/templates/ChatContent/ChatContent.scss +0 -30
- package/dist/components/templates/EmptyContainer/EmptyContainer.scss +0 -86
- package/dist/components/templates/History/History.scss +0 -103
- package/dist/styles/_functions.scss +0 -5
- package/dist/styles/variables.scss +0 -1
- /package/dist/styles/{styles.scss → styles.css} +0 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.g-aikit-tool-header {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: space-between;
|
|
4
|
+
align-items: center;
|
|
5
|
+
height: 24px;
|
|
6
|
+
gap: var(--g-spacing-2);
|
|
7
|
+
}
|
|
8
|
+
.g-aikit-tool-header__left {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: var(--g-spacing-2);
|
|
13
|
+
}
|
|
14
|
+
.g-aikit-tool-header__right {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: var(--g-spacing-3);
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.g-aikit-header {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
gap: var(--g-spacing-2);
|
|
6
|
+
width: 100%;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
background: var(--g-aikit-header-background);
|
|
9
|
+
}
|
|
10
|
+
.g-aikit-header__icon {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
}
|
|
15
|
+
.g-aikit-header__title-container {
|
|
16
|
+
display: flex;
|
|
17
|
+
gap: var(--g-spacing-1);
|
|
18
|
+
flex: 1;
|
|
19
|
+
align-items: baseline;
|
|
20
|
+
}
|
|
21
|
+
.g-aikit-header__title-container_position_left {
|
|
22
|
+
justify-content: flex-start;
|
|
23
|
+
}
|
|
24
|
+
.g-aikit-header__title-container_position_center {
|
|
25
|
+
justify-content: center;
|
|
26
|
+
}
|
|
27
|
+
.g-aikit-header__title {
|
|
28
|
+
text-overflow: ellipsis;
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
}
|
|
33
|
+
.g-aikit-header__preview {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
}
|
|
38
|
+
.g-aikit-header__action-button {
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
.g-aikit-message-list {
|
|
2
|
+
overflow-y: auto;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
min-height: 0;
|
|
6
|
+
flex: 1;
|
|
7
|
+
align-self: stretch;
|
|
8
|
+
}
|
|
9
|
+
.g-aikit-message-list__messages {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: var(--g-spacing-4);
|
|
13
|
+
}
|
|
14
|
+
.g-aikit-message-list__retry-button {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: var(--g-spacing-1);
|
|
18
|
+
}
|
|
19
|
+
.g-aikit-message-list__loader, .g-aikit-message-list__error-alert {
|
|
20
|
+
margin-top: var(--g-spacing-4);
|
|
21
|
+
}
|
|
22
|
+
.g-aikit-message-list__load-trigger {
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
padding: var(--g-spacing-2);
|
|
26
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.g-aikit-prompt-input {
|
|
2
|
+
border-radius: var(--g-border-radius-xl);
|
|
3
|
+
border: 1px solid var(--g-color-line-generic);
|
|
4
|
+
background: var(--g-color-base-float);
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
.g-aikit-prompt-input_view_simple {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-3);
|
|
11
|
+
}
|
|
12
|
+
.g-aikit-prompt-input_view_full {
|
|
13
|
+
display: flex;
|
|
14
|
+
padding: var(--g-spacing-2);
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
align-items: flex-start;
|
|
17
|
+
gap: var(--g-spacing-2);
|
|
18
|
+
}
|
|
19
|
+
.g-aikit-prompt-input_view_full .g-aikit-prompt-input__textarea {
|
|
20
|
+
padding-top: 0;
|
|
21
|
+
}
|
|
22
|
+
.g-aikit-prompt-input__content {
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: flex-end;
|
|
25
|
+
gap: var(--g-spacing-2);
|
|
26
|
+
width: 100%;
|
|
27
|
+
}
|
|
28
|
+
.g-aikit-prompt-input__panel-wrapper {
|
|
29
|
+
background: var(--g-color-base-simple-hover-solid);
|
|
30
|
+
border-radius: var(--g-border-radius-xl);
|
|
31
|
+
}
|
|
32
|
+
.g-aikit-prompt-input__panel {
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out;
|
|
35
|
+
will-change: max-height, opacity, margin;
|
|
36
|
+
max-height: 0;
|
|
37
|
+
opacity: 0;
|
|
38
|
+
margin: 0;
|
|
39
|
+
}
|
|
40
|
+
.g-aikit-prompt-input__panel_open {
|
|
41
|
+
max-height: var(--g-aikit-prompt-input-panel-max-height);
|
|
42
|
+
opacity: 1;
|
|
43
|
+
}
|
|
44
|
+
.g-aikit-prompt-input__suggestions-wrapper {
|
|
45
|
+
align-self: stretch;
|
|
46
|
+
flex: 1;
|
|
47
|
+
}
|
|
48
|
+
.g-aikit-prompt-input__suggestions {
|
|
49
|
+
padding-bottom: var(--g-spacing-2);
|
|
50
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.g-aikit-thinking-message {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: var(--g-spacing-2);
|
|
5
|
+
padding: var(--g-spacing-1) 0 var(--g-spacing-1) var(--g-spacing-4);
|
|
6
|
+
border-left: 2px solid var(--g-color-line-generic);
|
|
7
|
+
}
|
|
8
|
+
.g-aikit-thinking-message__buttons {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: var(--g-spacing-2);
|
|
12
|
+
}
|
|
13
|
+
.g-aikit-thinking-message__container {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: var(--g-spacing-6);
|
|
17
|
+
}
|
|
18
|
+
.g-aikit-thinking-message__content {
|
|
19
|
+
color: var(--g-color-text-complementary);
|
|
20
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.g-aikit-tool-message {
|
|
2
|
+
padding: var(--g-spacing-2);
|
|
3
|
+
border-radius: var(--g-border-radius-xl);
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
.g-aikit-tool-message_waiting {
|
|
7
|
+
border-color: var(--g-color-line-brand);
|
|
8
|
+
}
|
|
9
|
+
.g-aikit-tool-message__container {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: var(--g-spacing-2);
|
|
13
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
.g-aikit-chat-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
width: 100%;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
background: var(--g-aikit-chat-container-background);
|
|
8
|
+
}
|
|
9
|
+
.g-aikit-chat-container__header {
|
|
10
|
+
display: flex;
|
|
11
|
+
padding: var(--g-aikit-layout-base-padding-m);
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
gap: var(--g-spacing-2);
|
|
15
|
+
align-self: stretch;
|
|
16
|
+
background: var(--g-aikit-chat-container-header-background);
|
|
17
|
+
}
|
|
18
|
+
.g-aikit-chat-container__content {
|
|
19
|
+
min-height: 0;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
align-items: flex-start;
|
|
23
|
+
align-self: stretch;
|
|
24
|
+
background: var(--g-aikit-chat-container-content-background);
|
|
25
|
+
padding: 0 var(--g-aikit-layout-base-padding-m) var(--g-spacing-4) var(--g-aikit-layout-base-padding-m);
|
|
26
|
+
gap: var(--g-spacing-2);
|
|
27
|
+
flex: 1 0 0;
|
|
28
|
+
}
|
|
29
|
+
.g-aikit-chat-container__content_view_empty {
|
|
30
|
+
background: var(--g-aikit-chat-container-content-empty-background);
|
|
31
|
+
}
|
|
32
|
+
.g-aikit-chat-container__content_view_chat {
|
|
33
|
+
background: var(--g-aikit-chat-container-content-chat-background);
|
|
34
|
+
}
|
|
35
|
+
.g-aikit-chat-container__footer {
|
|
36
|
+
display: flex;
|
|
37
|
+
padding: var(--g-aikit-layout-base-padding-m);
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
align-items: flex-start;
|
|
40
|
+
gap: var(--g-spacing-1);
|
|
41
|
+
align-self: stretch;
|
|
42
|
+
background: var(--g-aikit-chat-container-footer-background);
|
|
43
|
+
}
|
|
44
|
+
.g-aikit-chat-container__footer_view_empty {
|
|
45
|
+
background: var(--g-aikit-chat-container-footer-empty-background);
|
|
46
|
+
}
|
|
47
|
+
.g-aikit-chat-container__footer_view_chat {
|
|
48
|
+
background: var(--g-aikit-chat-container-footer-chat-background);
|
|
49
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.g-aikit-chat-content {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
background: var(--g-aikit-chat-content-background);
|
|
7
|
+
align-items: flex-start;
|
|
8
|
+
gap: var(--g-spacing-2);
|
|
9
|
+
flex: 1 0 0;
|
|
10
|
+
align-self: stretch;
|
|
11
|
+
}
|
|
12
|
+
.g-aikit-chat-content__message-list-container {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
align-items: flex-start;
|
|
16
|
+
gap: var(--g-spacing-4);
|
|
17
|
+
align-self: stretch;
|
|
18
|
+
flex: 1;
|
|
19
|
+
min-height: 0;
|
|
20
|
+
}
|
|
21
|
+
.g-aikit-chat-content__message-list {
|
|
22
|
+
padding: var(--g-spacing-2) var(--g-spacing-2) 0 var(--g-spacing-2);
|
|
23
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
.g-aikit-empty-container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
width: 100%;
|
|
6
|
+
background: var(--g-aikit-empty-container-background);
|
|
7
|
+
}
|
|
8
|
+
.g-aikit-empty-container__content {
|
|
9
|
+
flex: 1;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
align-self: stretch;
|
|
13
|
+
gap: var(--g-aikit-empty-container-content-gap);
|
|
14
|
+
padding: var(--g-aikit-empty-container-padding);
|
|
15
|
+
}
|
|
16
|
+
.g-aikit-empty-container__welcome-section {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
gap: var(--g-spacing-6);
|
|
20
|
+
}
|
|
21
|
+
.g-aikit-empty-container__text-container {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
gap: var(--g-spacing-3);
|
|
25
|
+
}
|
|
26
|
+
.g-aikit-empty-container__image-container {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex: 1;
|
|
29
|
+
}
|
|
30
|
+
.g-aikit-empty-container__image-container_align_left {
|
|
31
|
+
justify-content: flex-start;
|
|
32
|
+
}
|
|
33
|
+
.g-aikit-empty-container__image-container_align_center {
|
|
34
|
+
justify-content: center;
|
|
35
|
+
}
|
|
36
|
+
.g-aikit-empty-container__image-container_align_right {
|
|
37
|
+
justify-content: flex-end;
|
|
38
|
+
}
|
|
39
|
+
.g-aikit-empty-container__title_align_left, .g-aikit-empty-container__description_align_left {
|
|
40
|
+
text-align: left;
|
|
41
|
+
}
|
|
42
|
+
.g-aikit-empty-container__title_align_center, .g-aikit-empty-container__description_align_center {
|
|
43
|
+
text-align: center;
|
|
44
|
+
}
|
|
45
|
+
.g-aikit-empty-container__title_align_right, .g-aikit-empty-container__description_align_right {
|
|
46
|
+
text-align: right;
|
|
47
|
+
}
|
|
48
|
+
.g-aikit-empty-container__suggestions-section {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
gap: var(--g-spacing-3);
|
|
52
|
+
}
|
|
53
|
+
.g-aikit-empty-container__suggestions-title {
|
|
54
|
+
display: flex;
|
|
55
|
+
padding: 0 var(--g-spacing-2);
|
|
56
|
+
align-items: flex-start;
|
|
57
|
+
gap: var(--g-spacing-2);
|
|
58
|
+
align-self: stretch;
|
|
59
|
+
}
|
|
60
|
+
.g-aikit-empty-container__show-more {
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: flex-start;
|
|
63
|
+
padding-top: var(--g-spacing-2);
|
|
64
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
.g-aikit-history__container {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
width: var(--g-aikit-history-width);
|
|
5
|
+
background: var(--g-color-base-background);
|
|
6
|
+
}
|
|
7
|
+
.g-aikit-history__list-wrapper {
|
|
8
|
+
flex: 1;
|
|
9
|
+
}
|
|
10
|
+
.g-aikit-history__list {
|
|
11
|
+
padding: 0 calc(var(--g-spacing-base) * 2) 0 calc(var(--g-spacing-base) * 2);
|
|
12
|
+
overflow: auto;
|
|
13
|
+
max-height: var(--g-aikit-history-max-height);
|
|
14
|
+
}
|
|
15
|
+
.g-aikit-history__list-item {
|
|
16
|
+
border-radius: 6px;
|
|
17
|
+
}
|
|
18
|
+
.g-aikit-history__filter {
|
|
19
|
+
padding: calc(var(--g-spacing-base) * 2);
|
|
20
|
+
border-bottom: 1px solid var(--g-color-line-generic);
|
|
21
|
+
margin-bottom: 0;
|
|
22
|
+
}
|
|
23
|
+
.g-aikit-history__date-header {
|
|
24
|
+
display: flex;
|
|
25
|
+
padding: var(--g-spacing-3) var(--g-spacing-2) var(--g-spacing-1) var(--g-spacing-2);
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
align-items: flex-start;
|
|
28
|
+
gap: calc(var(--g-spacing-base) * 3);
|
|
29
|
+
align-self: stretch;
|
|
30
|
+
}
|
|
31
|
+
.g-aikit-history__chat-item {
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
display: flex;
|
|
34
|
+
padding: calc(var(--g-spacing-base) * 2) calc(var(--g-spacing-base) * 4);
|
|
35
|
+
align-items: center;
|
|
36
|
+
gap: calc(var(--g-spacing-base) * 4);
|
|
37
|
+
align-self: stretch;
|
|
38
|
+
flex: 1;
|
|
39
|
+
min-width: 0;
|
|
40
|
+
}
|
|
41
|
+
.g-aikit-history__chat-item_active .g-aikit-history__delete-button {
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
.g-aikit-history__chat-content {
|
|
45
|
+
height: var(--g-aikit-history-item-height);
|
|
46
|
+
flex: 1;
|
|
47
|
+
min-width: 0;
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
}
|
|
52
|
+
.g-aikit-history__chat-content > * {
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
text-overflow: ellipsis;
|
|
55
|
+
white-space: nowrap;
|
|
56
|
+
min-width: 0;
|
|
57
|
+
}
|
|
58
|
+
.g-aikit-history__icon-button {
|
|
59
|
+
color: var(--g-color-text-secondary);
|
|
60
|
+
}
|
|
61
|
+
.g-aikit-history__delete-button {
|
|
62
|
+
margin-left: calc(var(--g-spacing-base) * 2);
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
.g-aikit-history__empty {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
padding: calc(var(--g-spacing-base) * 8) calc(var(--g-spacing-base) * 4);
|
|
70
|
+
color: var(--g-color-text-secondary);
|
|
71
|
+
font-size: var(--g-text-body-2-font-size);
|
|
72
|
+
text-align: center;
|
|
73
|
+
flex: 1;
|
|
74
|
+
}
|
|
75
|
+
.g-aikit-history__loader-wrapper {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
padding: calc(var(--g-spacing-base) * 8) calc(var(--g-spacing-base) * 4);
|
|
80
|
+
flex: 1;
|
|
81
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p,
|
|
2
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator li:not([class*=g-aikit-]),
|
|
3
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator a:not([class*=g-aikit-]) {
|
|
4
|
+
font-family: var(--g-text-body-font-family);
|
|
5
|
+
font-weight: var(--g-text-body-font-weight);
|
|
6
|
+
font-size: var(--g-text-body-2-font-size);
|
|
7
|
+
line-height: var(--g-text-body-2-line-height);
|
|
8
|
+
}
|
|
9
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .sbdocs-wrapper {
|
|
10
|
+
padding: 0 40px;
|
|
11
|
+
}
|
|
12
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .sbdocs-content {
|
|
13
|
+
max-width: 800px;
|
|
14
|
+
}
|
|
15
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p,
|
|
16
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]),
|
|
17
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) {
|
|
18
|
+
margin: 4px 0;
|
|
19
|
+
}
|
|
20
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p + p, .docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p + ul, .docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p + ol,
|
|
21
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]) + p,
|
|
22
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]) + ul,
|
|
23
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]) + ol,
|
|
24
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) + p,
|
|
25
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) + ul,
|
|
26
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) + ol {
|
|
27
|
+
margin-block-start: 8px;
|
|
28
|
+
}
|
|
29
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator li + li:not([class*=g-aikit-]) {
|
|
30
|
+
margin-block-start: 4px;
|
|
31
|
+
}
|
|
32
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ul:not([class*=g-aikit-]),
|
|
33
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator ol:not([class*=g-aikit-]) {
|
|
34
|
+
padding-inline-start: 16px;
|
|
35
|
+
}
|
|
36
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h1 {
|
|
37
|
+
font-family: var(--g-text-display-font-family);
|
|
38
|
+
font-weight: var(--g-text-display-font-weight);
|
|
39
|
+
font-size: var(--g-text-display-3-font-size);
|
|
40
|
+
line-height: var(--g-text-display-3-line-height);
|
|
41
|
+
}
|
|
42
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h2 {
|
|
43
|
+
font-family: var(--g-text-display-font-family);
|
|
44
|
+
font-weight: var(--g-text-display-font-weight);
|
|
45
|
+
font-size: var(--g-text-display-1-font-size);
|
|
46
|
+
line-height: var(--g-text-display-1-line-height);
|
|
47
|
+
border: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
}
|
|
50
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h3 {
|
|
51
|
+
font-family: var(--g-text-header-font-family);
|
|
52
|
+
font-weight: var(--g-text-header-font-weight);
|
|
53
|
+
font-size: var(--g-text-header-2-font-size);
|
|
54
|
+
line-height: var(--g-text-header-2-line-height);
|
|
55
|
+
}
|
|
56
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h1,
|
|
57
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h2,
|
|
58
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator h3 {
|
|
59
|
+
margin-block: 40px 16px;
|
|
60
|
+
}
|
|
61
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator a:not([class*=g-aikit-]) {
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
touch-action: manipulation;
|
|
64
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
color: var(--g-color-text-link);
|
|
67
|
+
}
|
|
68
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator a:not([class*=g-aikit-]):hover {
|
|
69
|
+
color: var(--g-color-text-link-hover);
|
|
70
|
+
}
|
|
71
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator p code,
|
|
72
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator li:not([class*=g-aikit-]) code {
|
|
73
|
+
font-family: var(--g-text-code-font-family);
|
|
74
|
+
font-weight: var(--g-text-code-font-weight);
|
|
75
|
+
font-size: var(--g-text-code-inline-2-font-size);
|
|
76
|
+
line-height: var(--g-text-code-inline-2-line-height);
|
|
77
|
+
line-height: 1;
|
|
78
|
+
padding: 1px 4px;
|
|
79
|
+
background: var(--g-color-base-misc-light);
|
|
80
|
+
color: var(--g-color-text-misc);
|
|
81
|
+
}
|
|
82
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .docblock-source {
|
|
83
|
+
margin: 16px 0;
|
|
84
|
+
}
|
|
85
|
+
.docs-decorator.docs-decorator.docs-decorator.docs-decorator.docs-decorator .docs-example {
|
|
86
|
+
margin: 16px 0;
|
|
87
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.showcase {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
}
|
|
5
|
+
.showcase + .showcase {
|
|
6
|
+
margin-block-start: var(--g-spacing-9);
|
|
7
|
+
}
|
|
8
|
+
.showcase__title {
|
|
9
|
+
font-family: var(--g-text-display-font-family);
|
|
10
|
+
font-weight: var(--g-text-display-font-weight);
|
|
11
|
+
font-size: var(--g-text-display-2-font-size);
|
|
12
|
+
line-height: var(--g-text-display-2-line-height);
|
|
13
|
+
}
|
|
14
|
+
.showcase__description {
|
|
15
|
+
font-family: var(--g-text-body-font-family);
|
|
16
|
+
font-weight: var(--g-text-body-font-weight);
|
|
17
|
+
font-size: var(--g-text-body-2-font-size);
|
|
18
|
+
line-height: var(--g-text-body-2-line-height);
|
|
19
|
+
margin-block-start: var(--g-spacing-2);
|
|
20
|
+
color: var(--g-color-text-secondary);
|
|
21
|
+
}
|
|
22
|
+
.showcase__content {
|
|
23
|
+
flex-grow: 1;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-wrap: wrap;
|
|
26
|
+
gap: var(--g-spacing-6);
|
|
27
|
+
}
|
|
28
|
+
.showcase__content:not(:only-child) {
|
|
29
|
+
margin-block-start: var(--g-spacing-5);
|
|
30
|
+
}
|
|
31
|
+
.showcase_direction_column .showcase__content {
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
align-items: flex-start;
|
|
34
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
.showcase-item__title {
|
|
2
|
+
font-family: var(--g-text-subheader-font-family);
|
|
3
|
+
font-weight: var(--g-text-subheader-font-weight);
|
|
4
|
+
font-size: var(--g-text-subheader-3-font-size);
|
|
5
|
+
line-height: var(--g-text-subheader-3-line-height);
|
|
6
|
+
margin-block-end: var(--g-spacing-3);
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
.g-aikit-swap-area {
|
|
2
|
+
display: flex;
|
|
3
|
+
padding: 3px 6px;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
flex: 1 0 0;
|
|
7
|
+
align-self: stretch;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
border: 1px dashed var(--g-color-line-generic);
|
|
10
|
+
background: var(--g-color-base-generic);
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/aikit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Gravity UI base kit for building ai assistant chats",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
11
|
"default": "./dist/index.js"
|
|
12
12
|
},
|
|
13
|
-
"./styles": "./dist/styles/styles.
|
|
13
|
+
"./styles": "./dist/styles/styles.css",
|
|
14
14
|
"./themes/common": "./dist/themes/common.css",
|
|
15
15
|
"./themes/dark": "./dist/themes/dark.css",
|
|
16
16
|
"./themes/light": "./dist/themes/light.css",
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
"lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
|
|
56
56
|
"lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
|
|
57
57
|
"test": "npm run test:unit && npm run test:server:unit",
|
|
58
|
-
"build": "npm run build:clean && npm run build:ts && npm run build:copy && npm run build:server",
|
|
58
|
+
"build": "npm run build:clean && npm run build:ts && npm run build:compile:scss && npm run build:copy && npm run build:server",
|
|
59
59
|
"build:clean": "rm -rf dist",
|
|
60
60
|
"build:ts": "tsc",
|
|
61
|
-
"build:
|
|
62
|
-
"build:copy
|
|
61
|
+
"build:compile:scss": "sass --no-source-map --load-path=src --load-path=node_modules src:dist",
|
|
62
|
+
"build:copy": "npm run build:copy:themes && npm run build:copy:i18n",
|
|
63
63
|
"build:copy:themes": "copyfiles -u 1 'src/themes/**/*.css' dist",
|
|
64
64
|
"build:copy:i18n": "copyfiles -u 1 'src/**/i18n/*.json' dist",
|
|
65
65
|
"build:server": "tsc -p src/server/tsconfig.esm.json && tsc -p src/server/tsconfig.cjs.json",
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
@use '../../../styles/variables';
|
|
2
|
-
|
|
3
|
-
$block: '.#{variables.$ns}alert';
|
|
4
|
-
|
|
5
|
-
#{$block} {
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
gap: var(--g-spacing-2);
|
|
9
|
-
|
|
10
|
-
&__header {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
gap: var(--g-spacing-2);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&__text {
|
|
17
|
-
flex: 1;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&__icon {
|
|
21
|
-
flex-shrink: 0;
|
|
22
|
-
|
|
23
|
-
&_variant_error {
|
|
24
|
-
color: var(--g-color-text-danger);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&_variant_warning {
|
|
28
|
-
color: var(--g-color-text-warning-heavy);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&_variant_info {
|
|
32
|
-
color: var(--g-color-text-info);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&__action {
|
|
37
|
-
margin-left: auto;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
@use '../../../styles/variables';
|
|
2
|
-
|
|
3
|
-
$block: '.#{variables.$ns}chat-date';
|
|
4
|
-
|
|
5
|
-
#{$block} {
|
|
6
|
-
color: var(--g-color-text-secondary);
|
|
7
|
-
|
|
8
|
-
font-family: var(--g-text-body-font-family);
|
|
9
|
-
font-size: var(--g-text-body-1-font-size);
|
|
10
|
-
font-style: normal;
|
|
11
|
-
font-weight: var(--g-text-body-font-weight);
|
|
12
|
-
line-height: var(--g-text-body-1-line-height);
|
|
13
|
-
|
|
14
|
-
display: inline-block;
|
|
15
|
-
}
|