@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.
Files changed (89) hide show
  1. package/README.md +0 -2
  2. package/dist/adapters/openai/helpers/mapOpenAIConversationsToChats.d.ts +3 -0
  3. package/dist/adapters/openai/helpers/mapOpenAIConversationsToChats.js +22 -0
  4. package/dist/adapters/openai/index.d.ts +5 -2
  5. package/dist/adapters/openai/index.js +2 -0
  6. package/dist/adapters/openai/types/index.d.ts +4 -1
  7. package/dist/adapters/openai/types/openAiTypes.d.ts +6 -0
  8. package/dist/adapters/openai/useOpenAIConversationsAdapter.d.ts +9 -0
  9. package/dist/adapters/openai/useOpenAIConversationsAdapter.js +15 -0
  10. package/dist/adapters/openai/useOpenAIResponsesAdapter.d.ts +1 -1
  11. package/dist/adapters/openai/useOpenAIResponsesAdapter.js +3 -3
  12. package/dist/components/atoms/Alert/Alert.css +28 -0
  13. package/dist/components/atoms/ChatDate/ChatDate.css +9 -0
  14. package/dist/components/atoms/ContextIndicator/ContextIndicator.css +66 -0
  15. package/dist/components/atoms/DiffStat/DiffStat.css +23 -0
  16. package/dist/components/atoms/Disclaimer/Disclaimer.css +7 -0
  17. package/dist/components/atoms/IntersectionContainer/IntersectionContainer.css +3 -0
  18. package/dist/components/atoms/Loader/Loader.css +48 -0
  19. package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.css +5 -0
  20. package/dist/components/atoms/MessageBalloon/MessageBalloon.css +7 -0
  21. package/dist/components/atoms/Shimmer/Shimmer.css +18 -0
  22. package/dist/components/atoms/SubmitButton/SubmitButton.css +20 -0
  23. package/dist/components/atoms/ToolIndicator/ToolIndicator.css +9 -0
  24. package/dist/components/molecules/BaseMessage/BaseMessage.css +26 -0
  25. package/dist/components/molecules/ButtonGroup/ButtonGroup.css +13 -0
  26. package/dist/components/molecules/PromptInputBody/PromptInputBody.css +15 -0
  27. package/dist/components/molecules/PromptInputFooter/PromptInputFooter.css +18 -0
  28. package/dist/components/molecules/PromptInputHeader/PromptInputHeader.css +21 -0
  29. package/dist/components/molecules/PromptInputPanel/PromptInputPanel.css +7 -0
  30. package/dist/components/molecules/Suggestions/Suggestions.css +71 -0
  31. package/dist/components/molecules/Tabs/Tabs.css +35 -0
  32. package/dist/components/molecules/ToolFooter/ToolFooter.css +10 -0
  33. package/dist/components/molecules/ToolHeader/ToolHeader.css +18 -0
  34. package/dist/components/molecules/ToolStatus/ToolStatus.css +1 -0
  35. package/dist/components/organisms/AssistantMessage/AssistantMessage.css +6 -0
  36. package/dist/components/organisms/Header/Header.css +40 -0
  37. package/dist/components/organisms/MessageList/MessageList.css +26 -0
  38. package/dist/components/organisms/PromptInput/PromptInput.css +50 -0
  39. package/dist/components/organisms/ThinkingMessage/ThinkingMessage.css +20 -0
  40. package/dist/components/organisms/ToolMessage/ToolMessage.css +13 -0
  41. package/dist/components/organisms/UserMessage/UserMessage.css +10 -0
  42. package/dist/components/pages/ChatContainer/ChatContainer.css +49 -0
  43. package/dist/components/templates/ChatContent/ChatContent.css +23 -0
  44. package/dist/components/templates/EmptyContainer/EmptyContainer.css +64 -0
  45. package/dist/components/templates/History/History.css +81 -0
  46. package/dist/demo/ContentWrapper/ContentWrapper.css +6 -0
  47. package/dist/demo/DocsDecorator/DocsDecorator.css +87 -0
  48. package/dist/demo/Showcase/Showcase.css +34 -0
  49. package/dist/demo/ShowcaseItem/ShowcaseItem.css +7 -0
  50. package/dist/demo/SwapArea/SwapArea.css +11 -0
  51. package/dist/styles/variables.css +1 -0
  52. package/package.json +5 -5
  53. package/dist/components/atoms/Alert/Alert.scss +0 -39
  54. package/dist/components/atoms/ChatDate/ChatDate.scss +0 -15
  55. package/dist/components/atoms/ContextIndicator/ContextIndicator.scss +0 -93
  56. package/dist/components/atoms/DiffStat/DiffStat.scss +0 -36
  57. package/dist/components/atoms/Disclaimer/Disclaimer.scss +0 -13
  58. package/dist/components/atoms/IntersectionContainer/IntersectionContainer.scss +0 -7
  59. package/dist/components/atoms/Loader/Loader.scss +0 -72
  60. package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.scss +0 -10
  61. package/dist/components/atoms/MessageBalloon/MessageBalloon.scss +0 -11
  62. package/dist/components/atoms/Shimmer/Shimmer.scss +0 -32
  63. package/dist/components/atoms/SubmitButton/SubmitButton.scss +0 -29
  64. package/dist/components/atoms/ToolIndicator/ToolIndicator.scss +0 -15
  65. package/dist/components/molecules/BaseMessage/BaseMessage.scss +0 -41
  66. package/dist/components/molecules/ButtonGroup/ButtonGroup.scss +0 -19
  67. package/dist/components/molecules/PromptInputBody/PromptInputBody.scss +0 -22
  68. package/dist/components/molecules/PromptInputFooter/PromptInputFooter.scss +0 -25
  69. package/dist/components/molecules/PromptInputHeader/PromptInputHeader.scss +0 -27
  70. package/dist/components/molecules/PromptInputPanel/PromptInputPanel.scss +0 -11
  71. package/dist/components/molecules/Suggestions/Suggestions.scss +0 -90
  72. package/dist/components/molecules/Tabs/Tabs.scss +0 -46
  73. package/dist/components/molecules/ToolFooter/ToolFooter.scss +0 -15
  74. package/dist/components/molecules/ToolHeader/ToolHeader.scss +0 -24
  75. package/dist/components/molecules/ToolStatus/ToolStatus.scss +0 -6
  76. package/dist/components/organisms/AssistantMessage/AssistantMessage.scss +0 -10
  77. package/dist/components/organisms/Header/Header.scss +0 -51
  78. package/dist/components/organisms/MessageList/MessageList.scss +0 -35
  79. package/dist/components/organisms/PromptInput/PromptInput.scss +0 -77
  80. package/dist/components/organisms/ThinkingMessage/ThinkingMessage.scss +0 -27
  81. package/dist/components/organisms/ToolMessage/ToolMessage.scss +0 -19
  82. package/dist/components/organisms/UserMessage/UserMessage.scss +0 -14
  83. package/dist/components/pages/ChatContainer/ChatContainer.scss +0 -60
  84. package/dist/components/templates/ChatContent/ChatContent.scss +0 -30
  85. package/dist/components/templates/EmptyContainer/EmptyContainer.scss +0 -86
  86. package/dist/components/templates/History/History.scss +0 -103
  87. package/dist/styles/_functions.scss +0 -5
  88. package/dist/styles/variables.scss +0 -1
  89. /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,6 @@
1
+ .g-aikit-assistant-message__content {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--g-spacing-3);
5
+ width: 100%;
6
+ }
@@ -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,10 @@
1
+ .g-aikit-user-message {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--g-spacing-1);
5
+ align-items: flex-end;
6
+ }
7
+
8
+ .g-aikit-user-message_format_plain {
9
+ white-space: pre-wrap;
10
+ }
@@ -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,6 @@
1
+ .content-wrapper {
2
+ padding: var(--g-spacing-4);
3
+ border: 2px dashed #9747ff;
4
+ border-radius: 12px;
5
+ width: fit-content;
6
+ }
@@ -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.6.0",
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.scss",
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:copy": "npm run build:copy:styles && npm run build:copy:themes && npm run build:copy:i18n",
62
- "build:copy:styles": "copyfiles -u 1 'src/**/*.scss' dist --exclude 'src/demo/**'",
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
- }