@keboola/design 1.0.0

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

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../components/Button';
+
+import { MessageBubble } from './MessageBubble';
+
+export default {
+  title: 'AI Kit/MessageBubble',
+  component: MessageBubble,
+  args: {
+    variant: 'assistant',
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['user', 'assistant'],
+    },
+    actions: {
+      control: false,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="tw-grid tw-gap-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MessageBubble>;
+
+type Story = StoryObj<typeof MessageBubble>;
+
+export const Assistant: Story = {
+  args: {
+    variant: 'assistant',
+    children: (
+      <>
+        Hello! I'm an AI assistant. How can I help you today? I can answer questions, help with
+        code, explain concepts, and much more.
+      </>
+    ),
+  },
+};
+
+export const User: Story = {
+  args: {
+    variant: 'user',
+    user: { name: 'John Doe', email: 'john@example.com' },
+    children: <>Can you help me write a function that calculates the factorial of a number?</>,
+  },
+};
+
+export const AssistantWithActions: Story = {
+  args: {
+    variant: 'assistant',
+    children: (
+      <div>
+        <p>Sure! Here's a factorial function in TypeScript:</p>
+        <pre className="tw-mt-2 tw-rounded tw-bg-neutral-100 tw-p-3 tw-text-sm">
+          {`function factorial(n: number): number {
+  if (n <= 1) return 1;
+  return n * factorial(n - 1);
+}`}
+        </pre>
+      </div>
+    ),
+    actions: (
+      <div className="tw-flex tw-gap-2">
+        <Button size="icon-sm" variant="outline" icon="copy" aria-label="Copy" />
+        <Button size="icon-sm" variant="outline" icon="thumbs-up" aria-label="Helpful" />
+        <Button size="icon-sm" variant="outline" icon="thumbs-down" aria-label="Not helpful" />
+      </div>
+    ),
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    variant: 'assistant',
+    children: (
+      <div className="tw-flex tw-flex-col tw-gap-3">
+        <p>Here are several key React performance optimization techniques:</p>
+        <ol className="tw-list-inside tw-list-decimal tw-space-y-2">
+          <li>
+            <strong>Use React.memo()</strong> - Wrap functional components to prevent unnecessary
+            re-renders when props haven't changed.
+          </li>
+          <li>
+            <strong>Use useMemo() and useCallback()</strong> - Memoize expensive calculations and
+            callback functions to maintain referential equality.
+          </li>
+          <li>
+            <strong>Code splitting with React.lazy()</strong> - Load components on demand to reduce
+            initial bundle size.
+          </li>
+          <li>
+            <strong>Virtualize long lists</strong> - Use libraries like react-window or
+            react-virtualized for rendering large datasets.
+          </li>
+          <li>
+            <strong>Avoid inline functions in JSX</strong> - Define callbacks outside of render to
+            prevent new function instances on each render.
+          </li>
+        </ol>
+      </div>
+    ),
+  },
+};
+
+const exampleUser = { name: 'User', email: 'user@example.com' };
+
+export const Conversation: Story = {
+  decorators: [],
+  render: () => (
+    <div className="tw-grid tw-gap-4">
+      <MessageBubble variant="user" user={exampleUser}>
+        <>What is the capital of France?</>
+      </MessageBubble>
+      <MessageBubble variant="assistant">
+        <>
+          The capital of France is <strong>Paris</strong>. It's located in the north-central part of
+          the country along the Seine River.
+        </>
+      </MessageBubble>
+      <MessageBubble variant="user" user={exampleUser}>
+        <>What's the population?</>
+      </MessageBubble>
+      <MessageBubble variant="assistant">
+        <>
+          Paris has a population of approximately 2.1 million people within the city limits. The
+          greater Paris metropolitan area (Ile-de-France) has over 12 million inhabitants, making it
+          one of the largest metropolitan areas in Europe.
+        </>
+      </MessageBubble>
+    </div>
+  ),
+};

package/src/blocks/AIKit/MessageBubble.tsx

@@ -0,0 +1,68 @@
+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'],
+        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

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

@@ -0,0 +1,241 @@
+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();
+  });
+});