@keboola/design 2.0.0 → 2.1.0

package/src/blocks/AIKit/MessageBubble.tsx

@@ -1,68 +0,0 @@
-import type { ComponentProps, PropsWithChildren, ReactNode } from 'react';
-import { cva } from 'class-variance-authority';
-
-import { Avatar } from '../../components/Avatar';
-
-const containerClasses = cva(['tw-flex', 'tw-max-w-full', 'tw-gap-4'], {
-  variants: {
-    variant: {
-      user: ['tw-justify-self-end', 'tw-flex-row-reverse'],
-      assistant: ['tw-justify-self-start', 'tw-w-full', 'tw-gap-3'],
-    },
-  },
-  defaultVariants: {
-    variant: 'assistant',
-  },
-});
-
-const contentClasses = cva(
-  [
-    'tw-flex',
-    'tw-flex-col',
-    'tw-gap-4',
-    'tw-break-words',
-    'tw-leading-relaxed',
-    'tw-text-neutral-800',
-    '[&_.tw-prose]:tw-text-neutral-800',
-  ],
-  {
-    variants: {
-      variant: {
-        assistant: ['tw-flex-1', 'tw-w-full', 'tw-min-w-0', '[&>*]:tw-min-w-0'],
-        user: [
-          'tw-max-w-screen-sm',
-          'tw-w-fit',
-          'tw-bg-neutral-50',
-          'tw-p-3',
-          'tw-rounded-2xl',
-          'tw-ml-6',
-          'tw-overflow-hidden',
-          'tw-break-anywhere',
-        ],
-      },
-    },
-
-    defaultVariants: {
-      variant: 'assistant',
-    },
-  },
-);
-
-type Props = {
-  variant: 'user' | 'assistant';
-  user?: ComponentProps<typeof Avatar>['user'];
-  actions?: ReactNode;
-  createdAt?: string;
-} & PropsWithChildren;
-
-export const MessageBubble = ({ variant, children, user, actions, createdAt }: Props) => {
-  return (
-    <div className={containerClasses({ variant })} data-testid={`chat-message-${variant}`}>
-      {variant === 'user' && <Avatar user={user} size={30} title={createdAt} />}
-      <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
-        <div className={contentClasses({ variant })}>{children}</div>
-        {actions}
-      </div>
-    </div>
-  );
-};

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

@@ -1,121 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { PlanApproval } from './PlanApproval';
-import { PlanRewritingIndicator } from './PlanRewritingIndicator';
-
-const samplePlanBody = (
-  <div className="tw-flex tw-flex-col tw-gap-3">
-    <p className="tw-m-0 tw-text-sm tw-font-semibold tw-text-neutral-800">
-      Audit plan for the KIO pipeline
-    </p>
-    <ol className="tw-m-0 tw-flex tw-flex-col tw-gap-2 tw-pl-5 tw-text-sm tw-text-neutral-700">
-      <li>Inspect the raw bucket schema and column types</li>
-      <li>List downstream transformations and their dependencies</li>
-      <li>Sample row counts per table and flag mismatches</li>
-      <li>Run referential integrity checks on the staging layer</li>
-      <li>Identify orphan rows and produce remediation suggestions</li>
-      <li>Summarize findings in a markdown report</li>
-      <li>Propose follow-up issues for owners to triage</li>
-      <li>Wait for approval before applying any fixes</li>
-    </ol>
-  </div>
-);
-
-const decorator = (Story: React.ComponentType) => (
-  <div style={{ maxWidth: 800 }}>
-    <Story />
-  </div>
-);
-
-const meta: Meta<typeof PlanApproval> = {
-  title: 'AI Kit/PlanApproval',
-  component: PlanApproval,
-  args: {
-    status: 'pending',
-    title: '8-step Audit plan for KIO pipeline covering',
-    summary: 'Short summary describing the high-level plan before the user expands the details.',
-    stepCount: 42,
-    planBody: samplePlanBody,
-  },
-  decorators: [decorator],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PlanApproval>;
-
-export const PendingCollapsed: Story = {
-  args: {
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const PendingExpanded: Story = {
-  args: {
-    defaultExpanded: true,
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const Approved: Story = {
-  args: {
-    status: 'approved',
-  },
-};
-
-export const Dismissed: Story = {
-  args: {
-    status: 'dismissed',
-  },
-};
-
-export const WithoutPlanBody: Story = {
-  args: {
-    planBody: undefined,
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const Submitting: Story = {
-  args: {
-    defaultExpanded: true,
-    isSubmitting: true,
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const PendingExpandedLongPlan: Story = {
-  args: {
-    defaultExpanded: true,
-    title: 'Plan: Migrate the analytics warehouse to BigQuery',
-    summary:
-      'A long, multi-stage migration plan whose markdown body is bigger than the card max-height — the plan body scrolls internally so the header and the Approve / Request Changes buttons remain visible without scrolling the chat viewport.',
-    stepCount: 42,
-    planBody: (
-      <div className="tw-flex tw-flex-col tw-gap-3">
-        {Array.from({ length: 40 }).map((_, index) => (
-          <p key={index} className="tw-m-0 tw-text-sm tw-text-neutral-700">
-            <strong>Step {index + 1}.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Curabitur efficitur, sapien id finibus consectetur, lorem velit egestas urna, in
-            placerat nulla nisi a augue. Nulla facilisi.
-          </p>
-        ))}
-      </div>
-    ),
-    onApprove: () => alert('Approved'),
-    onRequestChanges: (reason) => alert(`Request Changes: ${reason}`),
-    onClose: () => alert('Dismissed'),
-  },
-};
-
-export const Rewriting: StoryObj<typeof PlanRewritingIndicator> = {
-  render: () => <PlanRewritingIndicator />,
-};

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

@@ -1,241 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-
-import { PlanApproval } from './PlanApproval';
-
-const baseProps = {
-  title: 'Audit plan for KIO',
-  summary: 'Short summary',
-  stepCount: 8,
-};
-
-describe('<PlanApproval />', () => {
-  it('renders the pending state with status pill, step count, and approve/request actions', () => {
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        onApprove={vi.fn()}
-        onRequestChanges={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByText('Ready for approval')).toBeInTheDocument();
-    expect(screen.getByText('8 steps')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
-    expect(screen.getByRole('button', { name: 'Request Changes' })).toBeEnabled();
-    expect(screen.getByRole('button', { name: 'Dismiss plan' })).toBeEnabled();
-  });
-
-  it('renders the approved terminal state without action buttons or close', () => {
-    render(<PlanApproval {...baseProps} status="approved" planBody={<div>Body</div>} />);
-    expect(screen.getByText('Approved')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Request Changes' })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Dismiss plan' })).not.toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Show more/i })).toBeInTheDocument();
-  });
-
-  it('renders the dismissed terminal state with a Dismissed pill', () => {
-    render(<PlanApproval {...baseProps} status="dismissed" />);
-    expect(screen.getByText('Dismissed')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
-  });
-
-  it('renders the changes-requested terminal state with a Changes Requested pill', () => {
-    render(<PlanApproval {...baseProps} status="changes-requested" />);
-    expect(screen.getByText('Changes Requested')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Approve' })).not.toBeInTheDocument();
-  });
-
-  it('singularizes the step count when stepCount is 1', () => {
-    render(<PlanApproval {...baseProps} stepCount={1} status="pending" />);
-    expect(screen.getByText('1 step')).toBeInTheDocument();
-  });
-
-  it('omits the step count label when stepCount is missing or zero', () => {
-    const { rerender } = render(<PlanApproval title="t" summary="s" status="pending" />);
-    expect(screen.queryByText(/step/)).not.toBeInTheDocument();
-    rerender(<PlanApproval title="t" summary="s" stepCount={0} status="pending" />);
-    expect(screen.queryByText(/step/)).not.toBeInTheDocument();
-  });
-
-  it('toggles the plan body when Show more / Show less is clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        planBody={<div data-testid="plan-body">Whole plan</div>}
-      />,
-    );
-
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /Show more/i }));
-    expect(screen.getByTestId('plan-body')).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /Show less/i }));
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-  });
-
-  it('hides the Show more toggle when no plan body is provided', () => {
-    render(<PlanApproval {...baseProps} status="pending" />);
-    expect(screen.queryByRole('button', { name: /Show more/i })).not.toBeInTheDocument();
-  });
-
-  it('calls onApprove when the Approve button is clicked', async () => {
-    const onApprove = vi.fn();
-    const user = userEvent.setup();
-    render(<PlanApproval {...baseProps} status="pending" onApprove={onApprove} />);
-
-    await user.click(screen.getByRole('button', { name: 'Approve' }));
-    expect(onApprove).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onClose when the close button is clicked', async () => {
-    const onClose = vi.fn();
-    const user = userEvent.setup();
-    render(<PlanApproval {...baseProps} status="pending" onClose={onClose} />);
-
-    await user.click(screen.getByRole('button', { name: 'Dismiss plan' }));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('opens the change-request textarea and submits trimmed reason via onRequestChanges', async () => {
-    const onRequestChanges = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        defaultExpanded
-        planBody={<div>Body</div>}
-        onRequestChanges={onRequestChanges}
-      />,
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-
-    const textarea = screen.getByLabelText('What would you like to change in the plan?');
-    expect(textarea).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: 'Send change request' }));
-    expect(onRequestChanges).not.toHaveBeenCalled();
-
-    await user.type(textarea, '  please add a rollback step  ');
-    await user.click(screen.getByRole('button', { name: 'Send change request' }));
-
-    expect(onRequestChanges).toHaveBeenCalledTimes(1);
-    expect(onRequestChanges).toHaveBeenCalledWith('please add a rollback step');
-  });
-
-  it('disables Approve while composing a change request and re-enables on Cancel', async () => {
-    const onApprove = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        onApprove={onApprove}
-        onRequestChanges={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeEnabled();
-
-    await user.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeEnabled();
-    expect(screen.getByRole('button', { name: 'Request Changes' })).toBeInTheDocument();
-  });
-
-  it('auto-expands when Request Changes is clicked from the collapsed state', async () => {
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        planBody={<div data-testid="plan-body">Body</div>}
-        onRequestChanges={vi.fn()}
-      />,
-    );
-
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-    expect(screen.getByTestId('plan-body')).toBeInTheDocument();
-  });
-
-  it('disables all interactive controls while submitting', () => {
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        isSubmitting
-        onApprove={vi.fn()}
-        onRequestChanges={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByRole('button', { name: 'Approve' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Request Changes' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Dismiss plan' })).toBeDisabled();
-  });
-
-  it('submits change request on Enter and inserts a newline on Shift+Enter', async () => {
-    const onRequestChanges = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        defaultExpanded
-        planBody={<div>Body</div>}
-        onRequestChanges={onRequestChanges}
-      />,
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Request Changes' }));
-    const textarea = screen.getByLabelText('What would you like to change in the plan?');
-    await user.type(textarea, 'add rollback{Shift>}{Enter}{/Shift}step');
-    expect((textarea as HTMLTextAreaElement).value).toBe('add rollback\nstep');
-
-    fireEvent.keyDown(textarea, { key: 'Enter' });
-    expect(onRequestChanges).toHaveBeenCalledWith('add rollback\nstep');
-  });
-
-  it('respects controlled isExpanded and notifies onExpandToggle', async () => {
-    const onExpandToggle = vi.fn();
-    const user = userEvent.setup();
-    const { rerender } = render(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        isExpanded={false}
-        onExpandToggle={onExpandToggle}
-        planBody={<div data-testid="plan-body">Body</div>}
-      />,
-    );
-
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /Show more/i }));
-    expect(onExpandToggle).toHaveBeenCalledWith(true);
-    expect(screen.queryByTestId('plan-body')).not.toBeInTheDocument();
-
-    rerender(
-      <PlanApproval
-        {...baseProps}
-        status="pending"
-        isExpanded
-        onExpandToggle={onExpandToggle}
-        planBody={<div data-testid="plan-body">Body</div>}
-      />,
-    );
-    expect(screen.getByTestId('plan-body')).toBeInTheDocument();
-  });
-});