@keboola/design 2.0.1 → 3.0.0

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

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Upload } from '@keboola/design/icons';
-
-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">
-          <Upload className="tw-size-4" />
-        </Button>
-      </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">
-        <Upload className="tw-size-4" />
-      </Button>
-    ),
-  },
-};
-
-export const WithCustomMaxRows: Story = {
-  args: {
-    maxRows: 3,
-  },
-};

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

@@ -1,53 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { PromptInput } from './PromptInput';
-
-describe('<PromptInput />', () => {
-  it('does not call onAbort when Enter is pressed during streaming', () => {
-    const onAbort = vi.fn();
-    const onSend = vi.fn();
-
-    render(<PromptInput status="streaming" value="hello" onSend={onSend} onAbort={onAbort} />);
-
-    const textarea = screen.getByRole('textbox');
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-
-    expect(onAbort).not.toHaveBeenCalled();
-    expect(onSend).not.toHaveBeenCalled();
-  });
-
-  it('calls onAbort when the stop button is clicked during streaming', () => {
-    const onAbort = vi.fn();
-
-    render(<PromptInput status="streaming" value="" onAbort={onAbort} />);
-
-    const form = screen.getByTestId('prompt-input');
-    const button = form.querySelector('button[type="submit"]')!;
-    fireEvent.click(button);
-
-    expect(onAbort).toHaveBeenCalledOnce();
-  });
-
-  it('calls onSend when Enter is pressed in ready state', () => {
-    const onSend = vi.fn();
-
-    render(<PromptInput status="ready" value="hello" onSend={onSend} />);
-
-    const textarea = screen.getByRole('textbox');
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-
-    expect(onSend).toHaveBeenCalledWith('hello');
-  });
-
-  it('calls onContinue when Enter is pressed in interrupted state', () => {
-    const onContinue = vi.fn();
-
-    render(<PromptInput status="interrupted" value="" onContinue={onContinue} />);
-
-    const textarea = screen.getByRole('textbox');
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-
-    expect(onContinue).toHaveBeenCalledOnce();
-  });
-});

package/src/blocks/AIKit/PromptInput.tsx

@@ -1,218 +0,0 @@
-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();
-      if (status !== 'streaming') 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;

package/src/blocks/AIKit/PromptInputAction.tsx

@@ -1,18 +0,0 @@
-import type { ComponentProps, ElementRef, MouseEventHandler, Ref } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-type Props = ComponentProps<'button'>;
-
-export const PromptInputAction = ({
-  ref,
-  onMouseDown,
-  ...rest
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const handleOnMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {
-    // Prevents focus stealing by PromptInput.
-    event.stopPropagation();
-    onMouseDown?.(event);
-  };
-
-  return <Slot {...rest} ref={ref} onMouseDown={handleOnMouseDown}></Slot>;
-};

package/src/blocks/AIKit/PromptInputSubmit.tsx

@@ -1,59 +0,0 @@
-import type { ComponentProps, ElementRef, ReactNode, Ref } from 'react';
-
-import { Button } from '../../components/Button';
-import { Tooltip } from '../../components/Tooltip';
-import { CirclePause, Play, Send } from '../../icons';
-
-import { PromptInputAction } from './PromptInputAction';
-
-type SubmitStatus = 'submitted' | 'ready' | 'streaming' | 'interrupted';
-
-type Props = Pick<ComponentProps<typeof Button>, 'disabled'> & {
-  status?: SubmitStatus;
-};
-
-export const PromptInputSubmit = ({
-  ref,
-  disabled,
-  status = 'ready',
-}: Props & { ref?: Ref<ElementRef<'button'>> }) => {
-  const icon: ReactNode = (() => {
-    if (status === 'streaming') return <CirclePause className="tw-size-4" />;
-    if (status === 'interrupted') return <Play className="tw-size-4" />;
-    return <Send className="tw-size-4" />;
-  })();
-
-  const getTooltipText = () => {
-    if (status === 'streaming') return 'Stop';
-    if (status === 'interrupted') return 'Continue';
-    return undefined;
-  };
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <PromptInputAction>
-          <Button
-            ref={ref}
-            type="submit"
-            disabled={disabled}
-            size="icon-sm"
-            variant="invisible"
-            isLoading={status === 'submitted'}
-            className="tw-ml-auto tw-flex tw-items-center tw-rounded-lg [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600"
-          >
-            {/* Suppress the child icon while isLoading — Button already renders
-                the spinner; rendering both would double-stack glyphs. */}
-            {status !== 'submitted' && icon}
-          </Button>
-        </PromptInputAction>
-      </Tooltip.Trigger>
-
-      {getTooltipText() && (
-        <Tooltip.Content placement="top" variant="action">
-          {getTooltipText()}
-        </Tooltip.Content>
-      )}
-    </Tooltip.Root>
-  );
-};

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

@@ -1,235 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Question } from './Question';
-
-const sampleOptions = [
-  {
-    id: 'aggregation',
-    label: 'Aggregation / Summarization',
-    description: 'Group, sum, average, count, data',
-  },
-  {
-    id: 'joining',
-    label: 'Joining / Merging tables',
-    description: 'Combine multiple tables together',
-  },
-  {
-    id: 'filtering',
-    label: 'Filtering / Cleaning',
-    description: 'Remove duplicates, filter rows, fix data quality',
-  },
-  {
-    id: 'custom-logic',
-    label: 'Custom business logic',
-    description: 'Apply specific calculations or business rules',
-  },
-  {
-    id: 'not-sure',
-    label: 'Not sure yet',
-    description: "I'd like to explore the data first and decide",
-  },
-];
-
-const decorator = (Story: React.ComponentType) => (
-  <div style={{ maxWidth: 800 }}>
-    <Story />
-  </div>
-);
-
-const questionMeta: Meta<typeof Question> = {
-  title: 'AI Kit/Question',
-  component: Question,
-  args: {
-    question: 'What kind of transformation do you need?',
-    header: 'Select all that apply',
-    options: sampleOptions,
-    showCustomAnswer: true,
-    showSkip: true,
-    multiSelect: true,
-  },
-  decorators: [decorator],
-};
-
-export default questionMeta;
-
-type QuestionStory = StoryObj<typeof Question>;
-
-export const Default: QuestionStory = {
-  render: (args) => {
-    const [selectedIds, setSelectedIds] = useState<readonly string[]>([]);
-    const [customAnswer, setCustomAnswer] = useState('');
-    return (
-      <Question
-        {...args}
-        selectedOptionIds={selectedIds}
-        onSelectionChange={setSelectedIds}
-        customAnswer={customAnswer}
-        onCustomAnswerChange={setCustomAnswer}
-        onClose={() => alert('Close')}
-        onNext={() => alert('Next')}
-        onSkip={() => alert('Skip')}
-      />
-    );
-  },
-};
-
-export const WithPreview: QuestionStory = {
-  render: (args) => {
-    const [selectedIds, setSelectedIds] = useState<readonly string[]>([]);
-    return (
-      <Question
-        {...args}
-        selectedOptionIds={selectedIds}
-        onSelectionChange={setSelectedIds}
-        onClose={() => alert('Close')}
-        onNext={() => alert('Next')}
-      />
-    );
-  },
-  args: {
-    question: 'Which approach should we use?',
-    header: 'Compare implementations',
-    options: [
-      {
-        id: 'simple',
-        label: 'Simple aggregation',
-        description: 'Basic GROUP BY with SUM',
-        preview: 'SELECT category, SUM(amount)\nFROM orders\nGROUP BY category',
-      },
-      {
-        id: 'window',
-        label: 'Window function',
-        description: 'Running total with OVER clause',
-        preview: [
-          'WITH monthly_totals AS (',
-          '  SELECT',
-          '    category,',
-          "    DATE_TRUNC('month', order_date) AS month,",
-          '    SUM(amount) AS monthly_amount,',
-          '    COUNT(DISTINCT customer_id) AS unique_customers',
-          '  FROM orders',
-          "  WHERE status = 'completed'",
-          "  GROUP BY category, DATE_TRUNC('month', order_date)",
-          ')',
-          'SELECT',
-          '  category,',
-          '  month,',
-          '  monthly_amount,',
-          '  unique_customers,',
-          '  SUM(monthly_amount) OVER (',
-          '    PARTITION BY category',
-          '    ORDER BY month',
-          '    ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW',
-          '  ) AS running_total',
-          'FROM monthly_totals',
-          'ORDER BY category, month',
-        ].join('\n'),
-      },
-    ],
-    multiSelect: true,
-    showCustomAnswer: false,
-  },
-};
-
-export const WithCustomRenderer: QuestionStory = {
-  render: (args) => {
-    const [selectedIds, setSelectedIds] = useState<readonly string[]>([]);
-    return (
-      <Question
-        {...args}
-        selectedOptionIds={selectedIds}
-        onSelectionChange={setSelectedIds}
-        renderPreview={(content) => (
-          <pre style={{ margin: 0, fontSize: 12, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
-            {content.split('\n').map((line, i) => (
-              <span key={i}>
-                {line
-                  .split(
-                    /(\b(?:SELECT|FROM|WHERE|GROUP BY|ORDER BY|AS|WITH|OVER|PARTITION BY|SUM|COUNT|DISTINCT|BETWEEN|AND|ROWS|UNBOUNDED|PRECEDING|CURRENT|ROW)\b)/,
-                  )
-                  .map((part, j) =>
-                    j % 2 === 1 ? (
-                      <span key={j} style={{ color: '#0369A1', fontWeight: 600 }}>
-                        {part}
-                      </span>
-                    ) : (
-                      part
-                    ),
-                  )}
-                {'\n'}
-              </span>
-            ))}
-          </pre>
-        )}
-        onClose={() => alert('Close')}
-        onNext={() => alert('Next')}
-      />
-    );
-  },
-  args: {
-    question: 'Which approach should we use?',
-    header: 'Compare implementations',
-    options: [
-      {
-        id: 'simple',
-        label: 'Simple aggregation',
-        description: 'Basic GROUP BY with SUM',
-        preview: 'SELECT category, SUM(amount)\nFROM orders\nGROUP BY category',
-      },
-      {
-        id: 'window',
-        label: 'Window function',
-        description: 'Running total with OVER clause',
-        preview: [
-          'WITH monthly_totals AS (',
-          '  SELECT',
-          '    category,',
-          '    SUM(amount) AS total',
-          '  FROM orders',
-          '  GROUP BY category',
-          ')',
-          'SELECT *,',
-          '  SUM(total) OVER (',
-          '    PARTITION BY category',
-          '    ORDER BY month',
-          '  ) AS running_total',
-          'FROM monthly_totals',
-        ].join('\n'),
-      },
-    ],
-    multiSelect: true,
-    showCustomAnswer: false,
-  },
-};
-
-export const SingleSelect: QuestionStory = {
-  render: (args) => {
-    const [selectedIds, setSelectedIds] = useState<readonly string[]>([]);
-    const [customAnswer, setCustomAnswer] = useState('');
-    return (
-      <Question
-        {...args}
-        selectedOptionIds={selectedIds}
-        onSelectionChange={setSelectedIds}
-        customAnswer={customAnswer}
-        onCustomAnswerChange={setCustomAnswer}
-        onClose={() => alert('Close')}
-        onNext={() => alert(`Submit: ${customAnswer || selectedIds.join(', ')}`)}
-        onSkip={() => alert('Skip')}
-      />
-    );
-  },
-  args: {
-    question: 'How would you like to proceed?',
-    header: undefined,
-    // Single-select still offers a free-text "Other": picking it expands the
-    // text box and reveals Submit instead of auto-advancing.
-    options: [
-      { id: 'yes', label: 'Yes, continue' },
-      { id: 'no', label: 'No, go back' },
-    ],
-    showCustomAnswer: true,
-    multiSelect: false,
-  },
-};