@gravity-ui/aikit 1.7.0 → 1.9.0

package/README.md

@@ -185,10 +185,8 @@ If you're on Linux, you can run tests locally:
 ```bash
 # Install Playwright browsers (run once)
 npm run playwright:install
-
 # Run all component tests
 npm run playwright
-
 # Update screenshot baselines
 npm run playwright:update
 ```

package/dist/components/atoms/Alert/Alert.css

@@ -0,0 +1,28 @@
+.g-aikit-alert {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-alert__header {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-alert__text {
+  flex: 1;
+}
+.g-aikit-alert__icon {
+  flex-shrink: 0;
+}
+.g-aikit-alert__icon_variant_error {
+  color: var(--g-color-text-danger);
+}
+.g-aikit-alert__icon_variant_warning {
+  color: var(--g-color-text-warning-heavy);
+}
+.g-aikit-alert__icon_variant_info {
+  color: var(--g-color-text-info);
+}
+.g-aikit-alert__action {
+  margin-left: auto;
+}

package/dist/components/atoms/Alert/index.js

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 import { ChevronDown, ChevronUp, CircleExclamationFill, CircleInfoFill, TriangleExclamationFill, } from '@gravity-ui/icons';
 import { Button, Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Alert.scss';
+import './Alert.css';
 const b = block('alert');
 const statusIcons = {
     info: CircleInfoFill,

package/dist/components/atoms/ChatDate/ChatDate.css

@@ -0,0 +1,9 @@
+.g-aikit-chat-date {
+  color: var(--g-color-text-secondary);
+  font-family: var(--g-text-body-font-family);
+  font-size: var(--g-text-body-1-font-size);
+  font-style: normal;
+  font-weight: var(--g-text-body-font-weight);
+  line-height: var(--g-text-body-1-line-height);
+  display: inline-block;
+}

package/dist/components/atoms/ChatDate/ChatDate.js

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { useDateFormatter } from '../../../hooks';
 import { block } from '../../../utils/cn';
 import { i18n } from './i18n';
-import './ChatDate.scss';
+import './ChatDate.css';
 const b = block('chat-date');
 /**
  * ChatDate component displays formatted dates with optional time

package/dist/components/atoms/ContextIndicator/ContextIndicator.css

@@ -0,0 +1,66 @@
+.g-aikit-context-indicator__container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.g-aikit-context-indicator__container_orientation_horizontal {
+  flex-direction: row;
+}
+.g-aikit-context-indicator__container_orientation_horizontal.g-aikit-context-indicator__container_reversed {
+  flex-direction: row-reverse;
+}
+.g-aikit-context-indicator__container_orientation_vertical {
+  flex-direction: column;
+}
+.g-aikit-context-indicator__container_orientation_vertical.g-aikit-context-indicator__container_reversed {
+  flex-direction: column-reverse;
+}
+.g-aikit-context-indicator__progress {
+  --percentage: 0;
+  --progress-color: var(--g-aikit-ci-color-progress-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: relative;
+}
+.g-aikit-context-indicator__progress::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0.3;
+  background: var(--progress-color);
+  opacity: 0.3;
+}
+.g-aikit-context-indicator__progress::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 1;
+  background: conic-gradient(var(--progress-color) 0deg, var(--progress-color) calc(3.6deg * var(--percentage)), transparent calc(3.6deg * var(--percentage)), transparent 360deg);
+}
+.g-aikit-context-indicator__inner {
+  box-sizing: border-box;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  border-radius: 50%;
+  background: var(--g-aikit-color-bg-primary);
+  position: relative;
+  z-index: 1;
+}
+.g-aikit-context-indicator__value {
+  color: var(--g-color-text-primary);
+  font-family: var(--g-text-body-font-family);
+  font-size: var(--g-text-body-1-font-size);
+  font-style: normal;
+  font-weight: var(--g-text-body-font-weight);
+  line-height: var(--g-text-body-1-line-height);
+}
+.g-aikit-context-indicator__value::after {
+  content: "%";
+}

package/dist/components/atoms/ContextIndicator/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
 import { getProgressColor } from './utils';
-import './ContextIndicator.scss';
+import './ContextIndicator.css';
 const b = block('context-indicator');
 export const ContextIndicator = (props) => {
     const { className, qa, orientation = 'horizontal', reversed = false } = props;

package/dist/components/atoms/DiffStat/DiffStat.css

@@ -0,0 +1,23 @@
+.g-aikit-diff-stat {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--g-color-text-danger);
+  font-family: var(--g-text-code-font-family);
+  font-size: var(--g-text-code-inline-1);
+  font-style: normal;
+  font-weight: var(--g-text-code-font-weight);
+  line-height: var(--g-text-code-inline-1-line-height);
+}
+.g-aikit-diff-stat__added {
+  color: var(--g-color-text-positive-heavy);
+}
+.g-aikit-diff-stat__added_allow_sign::before {
+  content: "+";
+}
+.g-aikit-diff-stat__deleted {
+  color: var(--g-color-text-danger);
+}
+.g-aikit-diff-stat__deleted_allow_sign::before {
+  content: "-";
+}

package/dist/components/atoms/DiffStat/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './DiffStat.scss';
+import './DiffStat.css';
 const b = block('diff-stat');
 export const DiffStat = (props) => {
     const { added, deleted, className, style, qa } = props;

package/dist/components/atoms/Disclaimer/Disclaimer.css

@@ -0,0 +1,7 @@
+.g-aikit-disclaimer__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--g-aikit-disclaimer-gap);
+  align-self: stretch;
+}

package/dist/components/atoms/Disclaimer/Disclaimer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Disclaimer.scss';
+import './Disclaimer.css';
 const b = block('disclaimer');
 /**
  * Disclaimer component displays informational or warning messages

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.css

@@ -0,0 +1,3 @@
+.g-aikit-intersection-container {
+  width: 100%;
+}

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useIntersection } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './IntersectionContainer.scss';
+import './IntersectionContainer.css';
 const b = block('intersection-container');
 export const IntersectionContainer = ({ children, onIntersect, options, className, }) => {
     const [ref, setRef] = React.useState(null);

package/dist/components/atoms/Loader/Loader.css

@@ -0,0 +1,48 @@
+@keyframes pulse {
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 70%;
+  }
+  0% {
+    opacity: 40%;
+  }
+}
+.g-aikit-loader {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-loader__left, .g-aikit-loader__center, .g-aikit-loader__right {
+  background: var(--g-color-text-secondary);
+  border-radius: 50%;
+  animation: pulse ease 800ms infinite;
+}
+.g-aikit-loader_size_xs .g-aikit-loader__left,
+.g-aikit-loader_size_xs .g-aikit-loader__center,
+.g-aikit-loader_size_xs .g-aikit-loader__right {
+  width: 3px;
+  height: 3px;
+}
+.g-aikit-loader_size_s .g-aikit-loader__left,
+.g-aikit-loader_size_s .g-aikit-loader__center,
+.g-aikit-loader_size_s .g-aikit-loader__right {
+  width: 5px;
+  height: 5px;
+}
+.g-aikit-loader_size_m .g-aikit-loader__left,
+.g-aikit-loader_size_m .g-aikit-loader__center,
+.g-aikit-loader_size_m .g-aikit-loader__right {
+  width: 8px;
+  height: 8px;
+}
+.g-aikit-loader__left {
+  animation-delay: 200ms;
+}
+.g-aikit-loader__center {
+  animation-delay: 400ms;
+}
+.g-aikit-loader__right {
+  animation-delay: 600ms;
+}

package/dist/components/atoms/Loader/Loader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Spin } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Loader.scss';
+import './Loader.css';
 const b = block('loader');
 export function Loader({ view = 'streaming', size = 's', className, qa }) {
     if (view === 'streaming') {

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.css

@@ -0,0 +1,5 @@
+@import '@diplodoc/transform/dist/css/yfm.css';
+.g-aikit-markdown-renderer {
+  max-width: 100%;
+  color: var(--g-color-text-primary);
+}

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.js

@@ -4,7 +4,7 @@ import { useMarkdownTransform } from '../../../hooks/useMarkdownTransform';
 import { useRemend } from '../../../hooks/useRemend';
 import { block } from '../../../utils/cn';
 import { areOptionsEqual } from '../../../utils/markdownUtils';
-import './MarkdownRenderer.scss';
+import './MarkdownRenderer.css';
 const b = block('markdown-renderer');
 function MarkdownRendererComponent({ content, className, qa, transformOptions, shouldParseIncompleteMarkdown = false, }) {
     const closedContent = useRemend(content, shouldParseIncompleteMarkdown);

package/dist/components/atoms/MessageBalloon/MessageBalloon.css

@@ -0,0 +1,7 @@
+.g-aikit-message-balloon {
+  display: inline-block;
+  background-color: var(--g-color-base-info-light);
+  padding: var(--g-spacing-2) var(--g-spacing-3);
+  border-radius: var(--g-spacing-3) 0 var(--g-spacing-3) var(--g-spacing-3);
+  max-width: 100%;
+}

package/dist/components/atoms/MessageBalloon/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './MessageBalloon.scss';
+import './MessageBalloon.css';
 const b = block('message-balloon');
 export const MessageBalloon = (props) => {
     const { className, qa, children } = props;

package/dist/components/atoms/Shimmer/Shimmer.css

@@ -0,0 +1,18 @@
+.g-aikit-shimmer__container {
+  position: relative;
+  display: inline-block;
+  color: var(--g-aikit-text-primary, inherit);
+  mask-image: linear-gradient(90deg, var(--g-aikit-shimmer-color-from) 0%, var(--g-aikit-shimmer-color-from) 40%, var(--g-aikit-shimmer-color-to) 50%, var(--g-aikit-shimmer-color-from) 60%, var(--g-aikit-shimmer-color-from) 100%);
+  mask-size: var(--g-aikit-shimmer-gradient-size) 100%;
+  mask-clip: text;
+  animation: shimmer var(--g-aikit-shimmer-duration) infinite linear;
+}
+
+@keyframes shimmer {
+  0% {
+    mask-position: 200% 50%;
+  }
+  100% {
+    mask-position: 0% 50%;
+  }
+}

package/dist/components/atoms/Shimmer/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './Shimmer.scss';
+import './Shimmer.css';
 const b = block('shimmer');
 export const Shimmer = (props) => {
     const { className, qa, children } = props;

package/dist/components/atoms/SubmitButton/SubmitButton.css

@@ -0,0 +1,20 @@
+.g-aikit-submit-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.g-aikit-submit-button_size_s.g-aikit-submit-button_loading {
+  padding: 4px;
+}
+.g-aikit-submit-button_size_m.g-aikit-submit-button_loading {
+  padding: 6px;
+}
+.g-aikit-submit-button_size_l.g-aikit-submit-button_loading {
+  padding: 10px;
+}
+.g-aikit-submit-button__loader {
+  display: flex;
+}
+.g-aikit-submit-button__spinner {
+  --g-color-line-brand: var(--g-color-text-brand-contrast);
+}

package/dist/components/atoms/SubmitButton/SubmitButton.js

@@ -5,7 +5,7 @@ import { Icon, Spin } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { ActionButton } from '../ActionButton';
 import { i18n } from './i18n';
-import './SubmitButton.scss';
+import './SubmitButton.css';
 const b = block('submit-button');
 /**
  * Submit button component with state management through props

package/dist/components/atoms/ToolIndicator/ToolIndicator.css

@@ -0,0 +1,9 @@
+.g-aikit-tool-indicator__success {
+  color: var(--g-color-text-positive);
+}
+.g-aikit-tool-indicator__error {
+  color: var(--g-color-text-danger);
+}
+.g-aikit-tool-indicator__info {
+  color: var(--g-color-text-secondary);
+}

package/dist/components/atoms/ToolIndicator/index.js

@@ -3,7 +3,7 @@ import { CircleCheck, CircleInfo, CircleXmark } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { Loader } from '../Loader';
-import './ToolIndicator.scss';
+import './ToolIndicator.css';
 const b = block('tool-indicator');
 export const ToolIndicator = (props) => {
     const { status = 'info', className, qa } = props;

package/dist/components/molecules/BaseMessage/BaseMessage.css

@@ -0,0 +1,27 @@
+.g-aikit-base-message {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-1);
+  word-break: break-word;
+}
+.g-aikit-base-message_variant_user {
+  align-items: flex-end;
+  max-width: 90%;
+}
+.g-aikit-base-message_variant_system, .g-aikit-base-message_variant_assistant {
+  align-items: flex-start;
+}
+.g-aikit-base-message_btn-hover .g-aikit-base-message__actions {
+  visibility: hidden;
+}
+.g-aikit-base-message_btn-hover:hover .g-aikit-base-message__actions {
+  visibility: visible;
+}
+.g-aikit-base-message__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-3);
+}
+.g-aikit-base-message__actions_reverse {
+  flex-direction: row-reverse;
+}

package/dist/components/molecules/BaseMessage/__stories__/BaseMessage.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Variant: StoryObj<BaseMessageProps>;
 export declare const ShowActionsOnHover: StoryFn<BaseMessageProps>;
 export declare const ShowTimestamp: StoryObj<BaseMessageProps>;
 export declare const WithCustomAction: StoryFn<BaseMessageProps>;
+export declare const WithUserRating: StoryObj<BaseMessageProps>;

package/dist/components/molecules/BaseMessage/__stories__/BaseMessage.stories.js

@@ -50,6 +50,12 @@ const buttons = [
     // eslint-disable-next-line no-console
     { actionType: 'unlike', onClick: () => console.log('unlike') },
 ];
+const likeUnlikeButtons = [
+    // eslint-disable-next-line no-console
+    { actionType: 'like', onClick: () => console.log('like') },
+    // eslint-disable-next-line no-console
+    { actionType: 'unlike', onClick: () => console.log('unlike') },
+];
 export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args)) }));
 Playground.args = {
     children: 'My message',
@@ -75,3 +81,7 @@ export const WithCustomAction = (args) => (_jsx(ContentWrapper, { children: _jsx
                 // eslint-disable-next-line no-console
                 onClick: () => console.log('custom'), children: "Custom" }, "custom"),
         ], role: "assistant", children: 'Message with custom action button' })) }));
+export const WithUserRating = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "No rating", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: likeUnlikeButtons, role: "assistant", children: 'Message' })) }), _jsx(ShowcaseItem, { title: "Rated like", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: likeUnlikeButtons, role: "assistant", userRating: "like", children: 'Message' })) }), _jsx(ShowcaseItem, { title: "Rated dislike", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: likeUnlikeButtons, role: "assistant", userRating: "dislike", children: 'Message' })) })] })),
+    decorators: defaultDecorators,
+};

package/dist/components/molecules/BaseMessage/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ArrowRotateLeft, Copy as CopyIcon, Pencil, ThumbsDown, ThumbsUp, TrashBin, } from '@gravity-ui/icons';
+import { ArrowRotateLeft, Copy as CopyIcon, Pencil, ThumbsDown, ThumbsDownFill, ThumbsUp, ThumbsUpFill, TrashBin, } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
@@ -8,7 +8,7 @@ import { ActionButton } from '../../atoms';
 import { ChatDate } from '../../atoms/ChatDate';
 import { ButtonGroup } from '../ButtonGroup';
 import { i18n } from './i18n';
-import './BaseMessage.scss';
+import './BaseMessage.css';
 const b = block('base-message');
 export var BaseMessageActionType;
 (function (BaseMessageActionType) {
@@ -19,16 +19,8 @@ export var BaseMessageActionType;
     BaseMessageActionType["Unlike"] = "unlike";
     BaseMessageActionType["Delete"] = "delete";
 })(BaseMessageActionType || (BaseMessageActionType = {}));
-const BaseMessageActionIcons = {
-    [BaseMessageActionType.Copy]: CopyIcon,
-    [BaseMessageActionType.Edit]: Pencil,
-    [BaseMessageActionType.Retry]: ArrowRotateLeft,
-    [BaseMessageActionType.Like]: ThumbsUp,
-    [BaseMessageActionType.Unlike]: ThumbsDown,
-    [BaseMessageActionType.Delete]: TrashBin,
-};
 export const BaseMessage = (props) => {
-    const { className, qa, showActionsOnHover, actions, children, role: variant, showTimestamp, timestamp = '', } = props;
+    const { className, qa, showActionsOnHover, actions, children, role: variant, showTimestamp, timestamp = '', userRating, } = props;
     // Get tooltip text for action
     const getTooltipText = (actionType) => {
         if (!actionType) {
@@ -49,9 +41,7 @@ export const BaseMessage = (props) => {
                                 return _jsx(React.Fragment, { children: action }, index);
                             }
                             const tooltipText = getTooltipText(action.actionType);
-                            const defaultIcon = action.actionType
-                                ? BaseMessageActionIcons[action.actionType]
-                                : undefined;
+                            const defaultIcon = getDefaultIcon(action.actionType, userRating);
                             // Determine tooltip title
                             let tooltipTitle;
                             if (action.label) {
@@ -77,3 +67,21 @@ export const BaseMessage = (props) => {
                             return (_jsx(ActionButton, Object.assign({}, action, { tooltipTitle: tooltipTitle, view: action.view || 'flat-secondary', children: buttonContent }), action.actionType || index));
                         }) })] }))] }));
 };
+function getDefaultIcon(actionType, userRating) {
+    switch (actionType) {
+        case BaseMessageActionType.Copy:
+            return CopyIcon;
+        case BaseMessageActionType.Edit:
+            return Pencil;
+        case BaseMessageActionType.Retry:
+            return ArrowRotateLeft;
+        case BaseMessageActionType.Delete:
+            return TrashBin;
+        case BaseMessageActionType.Like:
+            return userRating === 'like' ? ThumbsUpFill : ThumbsUp;
+        case BaseMessageActionType.Unlike:
+            return userRating === 'dislike' ? ThumbsDownFill : ThumbsDown;
+        default:
+            return undefined;
+    }
+}

package/dist/components/molecules/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,13 @@
+.g-aikit-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-button-group_or_vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.g-aikit-button-group_or_horizontal {
+  flex-direction: row;
+  align-items: center;
+}

package/dist/components/molecules/ButtonGroup/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './ButtonGroup.scss';
+import './ButtonGroup.css';
 const b = block('button-group');
 export const ButtonGroup = (props) => {
     const { orientation = 'horizontal', className, qa, children } = props;

package/dist/components/molecules/PromptInputBody/PromptInputBody.css

@@ -0,0 +1,15 @@
+.g-aikit-prompt-input-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-self: stretch;
+}
+.g-aikit-prompt-input-body__textarea {
+  width: 100%;
+}
+.g-aikit-prompt-input-body__textarea-control {
+  resize: none;
+}
+.g-aikit-prompt-input-body .g-text-area_disabled {
+  --_--background-color: none;
+}

package/dist/components/molecules/PromptInputBody/PromptInputBody.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TextArea } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './PromptInputBody.scss';
+import './PromptInputBody.css';
 const b = block('prompt-input-body');
 /**
  * PromptInputBody component displays the main input area

package/dist/components/molecules/PromptInputFooter/PromptInputFooter.css

@@ -0,0 +1,18 @@
+.g-aikit-prompt-input-footer {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  align-self: stretch;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-prompt-input-footer__action-button {
+  color: var(--g-color-text-secondary);
+}
+.g-aikit-prompt-input-footer__action-button:hover {
+  color: var(--g-color-text-primary);
+}
+.g-aikit-prompt-input-footer__content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}

package/dist/components/molecules/PromptInputFooter/PromptInputFooter.js

@@ -6,7 +6,7 @@ import { ActionButton } from '../../atoms/ActionButton';
 import { SubmitButton } from '../../atoms/SubmitButton';
 import { ButtonGroup } from '../ButtonGroup';
 import { i18n } from './i18n';
-import './PromptInputFooter.scss';
+import './PromptInputFooter.css';
 const b = block('prompt-input-footer');
 /**
  * PromptInputFooter component displays the footer section with action icons

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.css

@@ -0,0 +1,21 @@
+.g-aikit-prompt-input-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--g-spacing-2);
+  align-self: stretch;
+}
+.g-aikit-prompt-input-header__context-items {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-1);
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+.g-aikit-prompt-input-header__context-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
 import { ContextIndicator } from '../../atoms/ContextIndicator';
 import { ContextItem } from '../../atoms/ContextItem';
-import './PromptInputHeader.scss';
+import './PromptInputHeader.css';
 const b = block('prompt-input-header');
 /**
  * PromptInputHeader component displays the header section of prompt input

package/dist/components/molecules/PromptInputPanel/PromptInputPanel.css

@@ -0,0 +1,7 @@
+.g-aikit-prompt-input-panel {
+  display: flex;
+  padding: var(--g-spacing-2);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}

package/dist/components/molecules/PromptInputPanel/PromptInputPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './PromptInputPanel.scss';
+import './PromptInputPanel.css';
 const b = block('prompt-input-panel');
 /**
  * PromptInputPanel component displays a panel with custom content