@keboola/design 1.0.0

package/src/blocks/AIKit/PromptInputAction.tsx

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,55 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { Button } from '../../components/Button';
+import { Tooltip } from '../../components/Tooltip';
+
+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 getIcon = () => {
+    if (status === 'streaming') return 'stop-circle';
+    if (status === 'interrupted') return 'play';
+    return 'paper-plane-top';
+  };
+
+  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'}
+            icon={getIcon()}
+            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"
+          />
+        </PromptInputAction>
+      </Tooltip.Trigger>
+
+      {getTooltipText() && (
+        <Tooltip.Content placement="top" variant="action">
+          {getTooltipText()}
+        </Tooltip.Content>
+      )}
+    </Tooltip.Root>
+  );
+};

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

@@ -0,0 +1,235 @@
+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,
+  },
+};

package/src/blocks/AIKit/Question.tsx

@@ -0,0 +1,323 @@
+import { type KeyboardEvent, type ReactNode, useState } from 'react';
+
+import { Button } from '../../components/Button';
+import { Checkbox } from '../../components/Checkbox';
+import { Icon } from '../../components/Icon';
+import { TextInput } from '../../components/Input';
+import { Progress } from '../../components/Progress';
+import { cn } from '../../utils';
+
+type QuestionOption = {
+  id: string;
+  label: string;
+  description?: string;
+  preview?: string;
+};
+
+type Props = {
+  question: string;
+  header?: string;
+  options: readonly QuestionOption[];
+  multiSelect?: boolean;
+  selectedOptionIds?: readonly string[];
+  onSelectionChange?: (selectedIds: readonly string[]) => void;
+  customAnswer?: string;
+  onCustomAnswerChange?: (value: string) => void;
+  showCustomAnswer?: boolean;
+  customAnswerPlaceholder?: string;
+  showSkip?: boolean;
+  onSkip?: () => void;
+  onClose?: () => void;
+  onNext?: () => void;
+  onPrevious?: () => void;
+  currentStep?: number;
+  totalSteps?: number;
+  renderPreview?: (content: string) => ReactNode;
+  className?: string;
+};
+
+const handleKeyDown = (callback: () => void) => (e: KeyboardEvent) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    callback();
+  }
+};
+
+export const Question = ({
+  question,
+  header,
+  options,
+  multiSelect = true,
+  selectedOptionIds = [],
+  onSelectionChange,
+  customAnswer = '',
+  onCustomAnswerChange,
+  showCustomAnswer = true,
+  customAnswerPlaceholder = 'Type your answer…',
+  showSkip = true,
+  onSkip,
+  onClose,
+  onNext,
+  onPrevious,
+  currentStep,
+  totalSteps,
+  renderPreview,
+  className,
+}: Props) => {
+  const [isCustomExpanded, setIsCustomExpanded] = useState(false);
+  const isCustomSelected = isCustomExpanded || customAnswer.length > 0;
+  const hasSteps = currentStep != null && totalSteps != null;
+  const progressValue = hasSteps ? (currentStep / totalSteps) * 100 : 0;
+  const isFirstStep = currentStep === 1;
+  const isLastStep = hasSteps && currentStep === totalSteps;
+
+  const handleOptionToggle = (optionId: string) => {
+    if (multiSelect) {
+      const isSelected = selectedOptionIds.includes(optionId);
+      const nextIds = isSelected
+        ? selectedOptionIds.filter((id) => id !== optionId)
+        : [...selectedOptionIds, optionId];
+      onSelectionChange?.(nextIds);
+    } else {
+      // Single-select: picking a real option deselects "Other" and drops any
+      // typed custom answer so it can't leak into the submitted answer.
+      setIsCustomExpanded(false);
+      onCustomAnswerChange?.('');
+      onSelectionChange?.([optionId]);
+    }
+  };
+
+  const handleCustomToggle = (checked: boolean) => {
+    setIsCustomExpanded(checked);
+    if (checked) {
+      // Single-select: "Other" and a real option are mutually exclusive.
+      if (!multiSelect) {
+        onSelectionChange?.([]);
+      }
+    } else {
+      onCustomAnswerChange?.('');
+    }
+  };
+
+  // Typing into (or focusing) the custom input selects "Other" directly — no
+  // need to click the row/checkbox first.
+  const handleCustomFocus = () => {
+    setIsCustomExpanded(true);
+    if (!multiSelect) {
+      onSelectionChange?.([]);
+    }
+  };
+
+  const handleCustomRowClick = () => {
+    // Multi-select: the row toggles the checkbox. Single-select: clicking only
+    // selects (never deselects, so a second click can't wipe typed text) —
+    // switch away by picking a real option instead.
+    if (multiSelect) {
+      handleCustomToggle(!isCustomSelected);
+    } else {
+      handleCustomFocus();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'tw-flex tw-max-w-[800px] tw-flex-col tw-gap-4 tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-border tw-bg-neutral-50 tw-shadow-lg',
+        className,
+      )}
+      data-testid="question-root"
+      data-question-step={currentStep}
+      data-question-total-steps={totalSteps}
+      data-question-multi-select={multiSelect}
+    >
+      <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-1">
+          <p className="tw-m-0 tw-text-base tw-font-semibold tw-leading-6 tw-text-neutral-800">
+            {question}
+          </p>
+          {header && <p className="tw-m-0 tw-text-xs tw-leading-4 tw-text-neutral-500">{header}</p>}
+        </div>
+        {onClose && (
+          <Button
+            argo
+            variant="outline"
+            size="icon-sm"
+            icon={['far', 'xmark']}
+            aria-label="Close"
+            onClick={onClose}
+            data-testid="question-close-button"
+          />
+        )}
+      </div>
+
+      <div className="tw-px-4">
+        <div className="tw-flex tw-flex-col tw-gap-4 tw-border-0 tw-border-l tw-border-solid tw-border-primary tw-px-4 tw-py-2">
+          {options.map((option) => (
+            <div
+              key={option.id}
+              className="tw--mx-2 tw--my-1.5 tw-flex tw-cursor-pointer tw-items-start tw-gap-2 tw-rounded-md tw-px-2 tw-py-1.5 hover:tw-bg-neutral-100"
+              onClick={() => handleOptionToggle(option.id)}
+              onKeyDown={handleKeyDown(() => handleOptionToggle(option.id))}
+              role="button"
+              tabIndex={0}
+              data-testid={`question-option-${option.id}`}
+            >
+              {multiSelect && (
+                <Checkbox
+                  checked={selectedOptionIds.includes(option.id)}
+                  onCheckedChange={() => handleOptionToggle(option.id)}
+                  onClick={(e) => e.stopPropagation()}
+                  className="tw-shrink-0"
+                />
+              )}
+              <div className="tw-flex tw-min-w-0 tw-flex-1 tw-items-start tw-gap-3">
+                <div className="tw-flex tw-flex-col tw-gap-1.5">
+                  <span className="tw-text-sm tw-font-medium tw-leading-none tw-text-neutral-800">
+                    {option.label}
+                  </span>
+                  {option.description && (
+                    <span className="tw-text-sm tw-font-normal tw-leading-5 tw-text-muted-foreground">
+                      {option.description}
+                    </span>
+                  )}
+                </div>
+                {option.preview && (
+                  <div
+                    className={cn(
+                      'tw-ml-auto tw-flex tw-max-h-40 tw-min-w-0 tw-max-w-[50%] tw-flex-col tw-overflow-hidden tw-rounded-md',
+                      !renderPreview &&
+                        'tw-overflow-auto tw-border tw-border-solid tw-border-neutral-200 tw-bg-white tw-p-2',
+                    )}
+                  >
+                    {renderPreview ? (
+                      renderPreview(option.preview)
+                    ) : (
+                      <pre className="tw-m-0 tw-overflow-visible tw-border-0 tw-bg-transparent tw-p-0 tw-font-mono tw-text-xs tw-leading-5 tw-text-neutral-700">
+                        {option.preview}
+                      </pre>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {showCustomAnswer && (
+            <div className="tw-flex tw-flex-col tw-gap-2">
+              <div
+                className="tw--mx-2 tw--my-1.5 tw-flex tw-cursor-pointer tw-items-start tw-gap-2 tw-rounded-md tw-px-2 tw-py-1.5 hover:tw-bg-neutral-100"
+                onClick={handleCustomRowClick}
+                onKeyDown={handleKeyDown(handleCustomRowClick)}
+                role="button"
+                tabIndex={0}
+              >
+                {/* Multi-select shows a checkbox alongside the option checkboxes.
+                    Single-select options auto-advance and carry no indicator, so
+                    "Other" is a plain clickable row that reveals the input below. */}
+                {multiSelect && (
+                  <Checkbox
+                    checked={isCustomSelected}
+                    onCheckedChange={handleCustomToggle}
+                    onClick={(e) => e.stopPropagation()}
+                    className="tw-shrink-0"
+                  />
+                )}
+                <span
+                  className={cn(
+                    'tw-text-sm tw-font-medium tw-leading-none',
+                    !multiSelect && isCustomSelected ? 'tw-text-primary' : 'tw-text-neutral-800',
+                  )}
+                >
+                  Other
+                </span>
+              </div>
+              {/* Always rendered and editable: typing or focusing selects "Other"
+                  directly, and keeping it mounted avoids layout shift. */}
+              <TextInput
+                value={customAnswer}
+                onValueChange={(value) => onCustomAnswerChange?.(value)}
+                onFocus={handleCustomFocus}
+                placeholder={customAnswerPlaceholder}
+                sizing="small"
+                testId="question-custom"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="tw-flex tw-flex-col">
+        {hasSteps && <Progress size="sm" value={progressValue} className="tw-rounded-none" />}
+
+        <div
+          className={cn(
+            'tw-flex tw-items-center tw-justify-end tw-gap-4 tw-px-4 tw-py-3',
+            !hasSteps && 'tw-border-0 tw-border-t tw-border-solid tw-border-neutral-100',
+          )}
+        >
+          {hasSteps && (
+            <div className="tw-flex tw-items-center tw-gap-2">
+              <button
+                type="button"
+                disabled={isFirstStep}
+                className="tailwindcss-preflight tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-transparent tw-p-0 disabled:tw-cursor-default"
+                onClick={onPrevious}
+                aria-label="Previous step"
+              >
+                <Icon
+                  icon="chevron-left"
+                  className={cn(
+                    'tw-size-4',
+                    isFirstStep ? 'tw-text-primary/25' : 'tw-text-primary',
+                  )}
+                />
+              </button>
+              <span className="tw-text-xs tw-leading-4 tw-text-neutral-500">
+                {currentStep} of {totalSteps}
+              </span>
+              <button
+                type="button"
+                disabled={currentStep === totalSteps}
+                className="tailwindcss-preflight tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-transparent tw-p-0 disabled:tw-cursor-default"
+                onClick={onNext}
+                aria-label="Next step"
+              >
+                <Icon
+                  icon="chevron-right"
+                  className={cn(
+                    'tw-size-4',
+                    currentStep === totalSteps ? 'tw-text-primary/25' : 'tw-text-primary',
+                  )}
+                />
+              </button>
+            </div>
+          )}
+          {showSkip && onSkip && (
+            <Button
+              argo
+              variant="outline"
+              size="small"
+              onClick={onSkip}
+              data-testid="question-skip-button"
+            >
+              Skip
+            </Button>
+          )}
+          {(multiSelect || isCustomSelected) && (
+            <Button
+              argo
+              variant="primary"
+              size="small"
+              onClick={onNext}
+              data-testid="question-next-button"
+            >
+              {isLastStep ? 'Submit' : 'Next'}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type { QuestionOption, Props as QuestionProps };