@keboola/design 1.0.0

package/src/blocks/AIKit/PlanApproval.tsx

@@ -0,0 +1,345 @@
+import { type FormEvent, type KeyboardEvent, type ReactNode, useState } from 'react';
+
+import { Badge } from '../../components/Badge';
+import { Button } from '../../components/Button';
+import { Icon } from '../../components/Icon';
+import { cn } from '../../utils';
+import { Textarea } from '../Textarea';
+
+type PlanApprovalStatus = 'pending' | 'approved' | 'dismissed' | 'changes-requested';
+
+type PlanApprovalProps = {
+  status: PlanApprovalStatus;
+  title: string;
+  summary?: ReactNode;
+  stepCount?: number;
+  planBody?: ReactNode;
+
+  defaultExpanded?: boolean;
+  isExpanded?: boolean;
+  onExpandToggle?: (next: boolean) => void;
+
+  onApprove?: () => void;
+  onRequestChanges?: (reason: string) => void;
+  onClose?: () => void;
+  isSubmitting?: boolean;
+
+  pendingPillLabel?: string;
+  approvedPillLabel?: string;
+  dismissedPillLabel?: string;
+  changesRequestedPillLabel?: string;
+  approveLabel?: string;
+  requestChangesLabel?: string;
+  cancelLabel?: string;
+  showMoreLabel?: string;
+  showLessLabel?: string;
+  closeLabel?: string;
+  changeRequestPlaceholder?: string;
+  changeRequestSubmitLabel?: string;
+  stepCountLabel?: (count: number) => string;
+
+  className?: string;
+};
+
+const defaultStepCountLabel = (count: number) => `${count} step${count === 1 ? '' : 's'}`;
+
+const StatusPill = ({
+  status,
+  pendingLabel,
+  approvedLabel,
+  dismissedLabel,
+  changesRequestedLabel,
+}: {
+  status: PlanApprovalStatus;
+  pendingLabel: string;
+  approvedLabel: string;
+  dismissedLabel: string;
+  changesRequestedLabel: string;
+}) => {
+  if (status === 'approved') {
+    return (
+      <Badge color="green" variant="pill" className="tw-normal-case tw-tracking-normal">
+        {approvedLabel}
+      </Badge>
+    );
+  }
+  if (status === 'dismissed') {
+    return (
+      <Badge color="gray" variant="pill" className="tw-normal-case tw-tracking-normal">
+        {dismissedLabel}
+      </Badge>
+    );
+  }
+  if (status === 'changes-requested') {
+    return (
+      <Badge color="blue" variant="pill" className="tw-normal-case tw-tracking-normal">
+        {changesRequestedLabel}
+      </Badge>
+    );
+  }
+  return (
+    <Badge color="green" variant="pill" className="tw-normal-case tw-tracking-normal">
+      {pendingLabel}
+    </Badge>
+  );
+};
+
+const ExpandToggle = ({
+  isExpanded,
+  onToggle,
+  showMoreLabel,
+  showLessLabel,
+}: {
+  isExpanded: boolean;
+  onToggle: () => void;
+  showMoreLabel: string;
+  showLessLabel: string;
+}) => (
+  <button
+    type="button"
+    onClick={onToggle}
+    aria-expanded={isExpanded}
+    className="tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-secondary-500"
+  >
+    <span>{isExpanded ? showLessLabel : showMoreLabel}</span>
+    <Icon
+      icon="chevron-down"
+      className={cn('tw-size-3 tw-transition-transform', isExpanded && 'tw-rotate-180')}
+    />
+  </button>
+);
+
+export const PlanApproval = ({
+  status,
+  title,
+  summary,
+  stepCount,
+  planBody,
+
+  defaultExpanded = false,
+  isExpanded: isExpandedProp,
+  onExpandToggle,
+
+  onApprove,
+  onRequestChanges,
+  onClose,
+  isSubmitting = false,
+
+  pendingPillLabel = 'Ready for approval',
+  approvedPillLabel = 'Approved',
+  dismissedPillLabel = 'Dismissed',
+  changesRequestedPillLabel = 'Changes Requested',
+  approveLabel = 'Approve',
+  requestChangesLabel = 'Request Changes',
+  cancelLabel = 'Cancel',
+  showMoreLabel = 'Show more',
+  showLessLabel = 'Show less',
+  closeLabel = 'Dismiss plan',
+  changeRequestPlaceholder = 'What would you like to change in the plan?',
+  changeRequestSubmitLabel = 'Send change request',
+  stepCountLabel = defaultStepCountLabel,
+
+  className,
+}: PlanApprovalProps) => {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const isExpanded = isExpandedProp ?? uncontrolledExpanded;
+  const [isRequestingChanges, setIsRequestingChanges] = useState(false);
+  const [changeRequest, setChangeRequest] = useState('');
+
+  const isPending = status === 'pending';
+  const showActions = isPending && (onApprove || onRequestChanges);
+  const showClose = isPending && Boolean(onClose);
+  const canShowPlanBody = planBody != null;
+  const trimmedChangeRequest = changeRequest.trim();
+  const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;
+
+  const toggleExpanded = () => {
+    const next = !isExpanded;
+    if (isExpandedProp === undefined) {
+      setUncontrolledExpanded(next);
+    }
+    onExpandToggle?.(next);
+  };
+
+  const handleOpenRequestChanges = () => {
+    setIsRequestingChanges(true);
+    if (!isExpanded) {
+      toggleExpanded();
+    }
+  };
+
+  const handleCancelChangeRequest = () => {
+    setIsRequestingChanges(false);
+    setChangeRequest('');
+  };
+
+  const handleSubmitChangeRequest = (event?: FormEvent) => {
+    event?.preventDefault();
+    if (!canSubmitChangeRequest) return;
+    onRequestChanges?.(trimmedChangeRequest);
+  };
+
+  const handleTextareaKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmitChangeRequest();
+    }
+  };
+
+  return (
+    <section
+      aria-label={title}
+      className={cn(
+        'tw-flex tw-w-full tw-max-w-[800px] tw-flex-col tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-border tw-bg-neutral-50',
+        className,
+      )}
+      data-testid="plan-approval-root"
+      data-plan-status={status}
+    >
+      <div className="tw-flex tw-items-start tw-gap-2 tw-pl-4 tw-pr-2 tw-pt-4">
+        <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pb-4">
+          <div className="tw-flex tw-items-center tw-gap-3">
+            <StatusPill
+              status={status}
+              pendingLabel={pendingPillLabel}
+              approvedLabel={approvedPillLabel}
+              dismissedLabel={dismissedPillLabel}
+              changesRequestedLabel={changesRequestedPillLabel}
+            />
+            {stepCount != null && stepCount > 0 && (
+              <span className="tw-text-xs tw-leading-4 tw-text-neutral-500">
+                {stepCountLabel(stepCount)}
+              </span>
+            )}
+          </div>
+          <p className="tw-m-0 tw-text-base tw-font-semibold tw-leading-6 tw-text-neutral-800">
+            {title}
+          </p>
+        </div>
+        {showClose && (
+          <Button
+            argo
+            variant="outline"
+            size="icon-sm"
+            icon={['far', 'xmark']}
+            aria-label={closeLabel}
+            onClick={onClose}
+            disabled={isSubmitting}
+            data-testid="plan-close-button"
+          />
+        )}
+      </div>
+
+      {summary != null && (
+        <div
+          className={cn(
+            'tw-whitespace-pre-wrap tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-px-4 tw-pt-4 tw-text-sm tw-text-neutral-700',
+            isExpanded && canShowPlanBody ? 'tw-pb-4' : 'tw-pb-2',
+          )}
+        >
+          {summary}
+        </div>
+      )}
+
+      {isExpanded && canShowPlanBody && (
+        <div className="tw-max-h-[400px] tw-overflow-y-auto tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-p-4 tw-text-sm tw-text-neutral-700">
+          {planBody}
+        </div>
+      )}
+
+      {isRequestingChanges && isPending && (
+        <form
+          onSubmit={handleSubmitChangeRequest}
+          className="tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-px-4 tw-py-3"
+          aria-label={requestChangesLabel}
+        >
+          <div className="tw-relative">
+            <Textarea
+              value={changeRequest}
+              onValueChange={setChangeRequest}
+              placeholder={changeRequestPlaceholder}
+              maxRows={4}
+              autoFocus
+              onKeyDown={handleTextareaKeyDown}
+              containerClassName="tw-pr-12"
+              disabled={isSubmitting}
+              aria-label={changeRequestPlaceholder}
+              data-testid="plan-change-request-input"
+            />
+            <Button
+              argo
+              type="submit"
+              variant="invisible"
+              size="icon-sm"
+              icon="paper-plane-top"
+              aria-label={changeRequestSubmitLabel}
+              disabled={!canSubmitChangeRequest}
+              className="tw-absolute tw-right-2 tw-top-1/2 tw--translate-y-1/2 [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600"
+              data-testid="plan-change-request-submit"
+            />
+          </div>
+        </form>
+      )}
+
+      <div
+        className={cn(
+          'tw-flex tw-items-center tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100 tw-bg-white tw-px-4 tw-py-3',
+          canShowPlanBody ? 'tw-justify-between' : 'tw-justify-end',
+        )}
+      >
+        {canShowPlanBody && (
+          <ExpandToggle
+            isExpanded={isExpanded}
+            onToggle={toggleExpanded}
+            showMoreLabel={showMoreLabel}
+            showLessLabel={showLessLabel}
+          />
+        )}
+
+        {showActions && (
+          <div className="tw-flex tw-items-center tw-gap-2">
+            {isRequestingChanges ? (
+              <Button
+                argo
+                variant="outline"
+                size="small"
+                onClick={handleCancelChangeRequest}
+                disabled={isSubmitting}
+                data-testid="plan-cancel-button"
+              >
+                {cancelLabel}
+              </Button>
+            ) : (
+              onRequestChanges && (
+                <Button
+                  argo
+                  variant="outline"
+                  size="small"
+                  onClick={handleOpenRequestChanges}
+                  disabled={isSubmitting}
+                  data-testid="plan-request-changes-button"
+                >
+                  {requestChangesLabel}
+                </Button>
+              )
+            )}
+            {onApprove && (
+              <Button
+                argo
+                variant="primary"
+                size="small"
+                onClick={onApprove}
+                disabled={isSubmitting || isRequestingChanges}
+                data-testid="plan-approve-button"
+              >
+                {approveLabel}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export type { PlanApprovalStatus, PlanApprovalProps };

package/src/blocks/AIKit/PlanRewritingIndicator.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { PlanRewritingIndicator } from './PlanRewritingIndicator';
+
+describe('<PlanRewritingIndicator />', () => {
+  it('renders the default label', () => {
+    render(<PlanRewritingIndicator />);
+    expect(screen.getByText('Rewriting the plan...')).toBeInTheDocument();
+    expect(screen.getByTestId('plan-rewriting-indicator')).toBeInTheDocument();
+  });
+
+  it('renders a custom label', () => {
+    render(<PlanRewritingIndicator label="Updating plan..." />);
+    expect(screen.getByText('Updating plan...')).toBeInTheDocument();
+  });
+});

package/src/blocks/AIKit/PlanRewritingIndicator.tsx

@@ -0,0 +1,20 @@
+import { Icon } from '../../components/Icon';
+
+type PlanRewritingIndicatorProps = {
+  label?: string;
+};
+
+export const PlanRewritingIndicator = ({
+  label = 'Rewriting the plan...',
+}: PlanRewritingIndicatorProps) => (
+  <div
+    className="tw-flex tw-items-center tw-gap-2"
+    role="status"
+    data-testid="plan-rewriting-indicator"
+  >
+    <Icon icon="spinner" spin className="tw-size-4 tw-text-secondary-500" />
+    <span className="tw-text-sm tw-italic tw-text-secondary-500">{label}</span>
+  </div>
+);
+
+export type { PlanRewritingIndicatorProps };

package/src/blocks/AIKit/PromptInput.stories.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../components/Button';
+import { DropdownMenu } from '../../components/DropdownMenu';
+
+import { PromptInput } from './PromptInput';
+
+type PromptInputProps = ComponentProps<typeof PromptInput>;
+
+const sendMessage = () => new Promise((resolve) => setTimeout(resolve, 500));
+
+const PromptInputDemo = (props: PromptInputProps) => {
+  const [value, setValue] = useState('');
+  const [status, setStatus] = useState<PromptInputProps['status']>('ready');
+
+  const handleOnSend: PromptInputProps['onSend'] = () => {
+    setStatus('submitted');
+    sendMessage().then(() => {
+      setStatus('streaming');
+    });
+  };
+  const handleOnAbort: PromptInputProps['onAbort'] = () => {
+    setStatus('ready');
+  };
+
+  return (
+    <PromptInput
+      {...props}
+      onSend={handleOnSend}
+      onAbort={handleOnAbort}
+      status={status}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+
+export default {
+  title: 'AI Kit/PromptInput',
+  component: PromptInput,
+  render: PromptInputDemo,
+  args: {
+    variant: 'default',
+    placeholder: 'Send a message...',
+    disabled: false,
+    suffix: (
+      <PromptInput.Action>
+        <Button size="icon-sm" variant="invisible" icon="upload" />
+      </PromptInput.Action>
+    ),
+
+    prefix: (
+      <DropdownMenu>
+        <PromptInput.Action>
+          <DropdownMenu.Trigger asChild>
+            <button
+              type="button"
+              className="tw-text-nowrap tw-rounded-lg tw-px-1 tw-py-0.5 tw-text-neutral-400 tw-outline-none focus-within:tw-bg-neutral-100 hover:tw-bg-neutral-50"
+            >
+              @ context
+            </button>
+          </DropdownMenu.Trigger>
+        </PromptInput.Action>
+
+        <DropdownMenu.Content side="top" align="start">
+          <DropdownMenu.Group>
+            <DropdownMenu.Item>File A</DropdownMenu.Item>
+            <DropdownMenu.Item>File B</DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    ),
+  },
+} satisfies Meta<typeof PromptInput>;
+
+type Story = StoryObj<typeof PromptInput>;
+
+export const Basic: Story = {};
+
+export const Inline: Story = {
+  args: {
+    variant: 'inline',
+  },
+};
+
+export const Actions: Story = {
+  args: {
+    suffix: <Button size="icon-3xs" variant="inline" icon="upload" />,
+  },
+};
+
+export const WithCustomMaxRows: Story = {
+  args: {
+    maxRows: 3,
+  },
+};

package/src/blocks/AIKit/PromptInput.tsx

@@ -0,0 +1,218 @@
+import {
+  type ChangeEventHandler,
+  type ComponentProps,
+  type ElementRef,
+  type FormEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type ReactNode,
+  useId,
+  useRef,
+} from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import { TooltipProvider } from '../../components/Tooltip';
+import { cn } from '../../utils';
+
+import { PromptInputAction } from './PromptInputAction';
+import { PromptInputSubmit } from './PromptInputSubmit';
+
+const promptInputVariants = cva(
+  [
+    'tailwindcss-preflight',
+    'tw-relative',
+
+    'tw-flex',
+    'tw-gap-2',
+    'tw-justify-center',
+
+    // transparent border
+    'tw-border',
+    'tw-border-2',
+    'tw-border-transparent',
+    'tw-rounded-[14px]',
+
+    // Gradient background
+    'tw-bg-gradient-to-bl',
+    'tw-from-[#61E4FF]',
+    'tw-via-[#1F8FFF]',
+    'tw-to-[#7C5CFF]',
+
+    // For inside used white shadow
+    'tw-bg-origin-border',
+    'tw-shadow-[inset_0_100vw_white]',
+
+    // focus
+    'has-[textarea:focus]:tw-ring-4',
+    'has-[textarea:focus]:tw-ring-secondary-200',
+
+    'tw-cursor-text',
+    'tw-px-2',
+  ],
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: ['tw-flex-col', 'tw-pt-3', 'tw-pb-2'],
+        inline: ['tw-flex-row', 'tw-py-3', 'tw-items-center'],
+      },
+    },
+  },
+);
+
+const wrapperVariants = cva(null, {
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: 'tw-rounded-[14px]',
+      inline: '',
+    },
+  },
+});
+
+type Props = {
+  onSend?: (value: string) => void;
+  onAbort?: () => void;
+  onContinue?: () => void;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  defaultValue?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  variant?: 'default' | 'inline';
+  disableSubmit?: boolean;
+} & VariantProps<typeof promptInputVariants> &
+  Pick<
+    ComponentProps<typeof TextareaAutosize>,
+    'placeholder' | 'minRows' | 'maxRows' | 'disabled' | 'defaultValue' | 'autoFocus'
+  > &
+  ComponentProps<typeof PromptInputSubmit>;
+
+export const PromptInput = ({
+  onSend,
+  onAbort,
+  onContinue,
+  prefix,
+  variant,
+  suffix,
+  disabled,
+  disableSubmit,
+  value = '',
+  onValueChange,
+  status = 'ready',
+  maxRows = 6,
+  minRows,
+  ...textareaProps
+}: Props) => {
+  const defaultMinRows = variant === 'inline' ? 1 : 2;
+  const isDisabled =
+    (disabled || disableSubmit || !value.trim()) &&
+    status !== 'streaming' &&
+    status !== 'interrupted';
+
+  const textareaId = useId();
+  const textareaRef = useRef<ElementRef<'textarea'>>(null);
+
+  const handleSubmit = () => {
+    if (isDisabled) return;
+    if (status === 'streaming') onAbort?.();
+    if (status === 'interrupted') onContinue?.();
+    if (status === 'ready') onSend?.(value);
+  };
+
+  const handleOnSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    handleSubmit();
+  };
+
+  const handleOnChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    onValueChange?.(event.target.value);
+  };
+
+  const handleOnKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
+    if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const handleOnMouseDown: MouseEventHandler<HTMLFormElement> = (event) => {
+    // don't prevent default if the target is the textarea itself
+    if (event.target === textareaRef.current) return;
+
+    event.preventDefault();
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <TooltipProvider>
+      <div className={wrapperVariants({ variant })}>
+        {/*This is alright, just refocused into a textarea. */}
+        {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+        <form
+          data-testid="prompt-input"
+          data-status={status}
+          onMouseDown={handleOnMouseDown}
+          onSubmit={handleOnSubmit}
+          className={cn(
+            promptInputVariants({ variant }),
+            disabled &&
+              'tw-bg-none tw-border-neutral-200 tw-shadow-[inset_0_100vw_theme(colors.neutral.100)] tw-cursor-default',
+          )}
+        >
+          {prefix && <div className="tw-flex tw-items-center">{prefix}</div>}
+
+          <label htmlFor={textareaId} className="tw-sr-only">
+            Prompt Input
+          </label>
+          <TextareaAutosize
+            {...textareaProps}
+            disabled={disabled}
+            minRows={minRows ?? defaultMinRows}
+            maxRows={maxRows}
+            id={textareaId}
+            ref={textareaRef}
+            value={value}
+            onChange={handleOnChange}
+            onKeyDown={handleOnKeyDown}
+            className={cn(
+              'tw-resize-none',
+              'tw-outline-none',
+              'tw-w-full',
+              'tw-px-2',
+              'tw-bg-transparent',
+
+              // font
+              disabled ? 'tw-text-neutral-400' : 'tw-text-neutral-800',
+              'tw-text-sm',
+              'tw-font-sans',
+
+              'tw-transition-[width]',
+              'tw-delay-75',
+              'tw-ease-linear',
+              'tw-overflow-auto',
+            )}
+          />
+
+          <div
+            className={cn(
+              'tw-flex tw-items-center tw-gap-4',
+              variant === 'inline' ? 'tw-items-end' : 'tw-items-center',
+            )}
+          >
+            {suffix}
+            <PromptInputSubmit disabled={isDisabled} status={status} />
+          </div>
+        </form>
+      </div>
+    </TooltipProvider>
+  );
+};
+
+PromptInput.Action = PromptInputAction;