@opencorestack/opengridx 3.4.0 → 3.5.0

package/lib/ai/promptHandler.ts

@@ -0,0 +1,109 @@
+// createGridAiPromptHandler: the `aiAssistant.onPrompt` function for an app's own model. It builds the
+// schema once, calls the app's `callModel`, reads the reply (an object, JSON text, or text with a fenced
+// JSON block) and returns the validated, branded result. The grid never sees the raw reply.
+import type { GridAiPromptContext, GridAiPromptResult } from '../types';
+import { brandGridAiValidated } from '../utils/aiBrand';
+import { hasOwn, isPlainObject } from './columns';
+import { getGridAiSchema } from './schema';
+import type { GridAiColumn, GridAiPartOptions, GridAiPromptHandlerOptions, GridAiValidationError } from './types';
+import { validateGridAiState } from './validate';
+
+const FENCE = '```';
+
+/** A DOMException named `AbortError`, as `fetch` rejects with. */
+export function abortError(): Error {
+  return typeof DOMException === 'function'
+    ? new DOMException('The operation was aborted.', 'AbortError')
+    : Object.assign(new Error('The operation was aborted.'), { name: 'AbortError' });
+}
+
+/**
+ * Splits a text reply into the JSON it holds and the text around it: the whole text when it starts
+ * with `{`, else the first fenced block (with no language or `json`). A plain loop, no regex.
+ */
+export function readModelText(text: string): { json: string | null; message: string } {
+  const trimmed = text.trim();
+  if (trimmed.startsWith('{')) return { json: trimmed, message: '' };
+  const open = text.indexOf(FENCE);
+  const lineEnd = open < 0 ? -1 : text.indexOf('\n', open + FENCE.length);
+  const close = lineEnd < 0 ? -1 : text.indexOf(FENCE, lineEnd + 1);
+  const lang = close < 0 ? '' : text.slice(open + FENCE.length, lineEnd).trim().toLowerCase();
+  if (close < 0 || (lang !== '' && lang !== 'json')) return { json: null, message: trimmed };
+  return {
+    json: text.slice(lineEnd + 1, close),
+    message: `${text.slice(0, open)}${text.slice(close + FENCE.length)}`.trim(),
+  };
+}
+
+function errorText(error: unknown): string {
+  if (error instanceof Error && error.message) return error.message;
+  return typeof error === 'string' && error ? error : 'Unknown error';
+}
+
+/** A branded result with an empty state: nothing to apply, the errors explain why. */
+function emptyResult(errors: GridAiValidationError[], message?: string): GridAiPromptResult {
+  const result: GridAiPromptResult = { state: brandGridAiValidated({}), errors };
+  if (message) result.message = message;
+  return brandGridAiValidated(result);
+}
+
+/** Validates a model reply into a branded result. Never throws. */
+export function readModelReply(reply: unknown, columns: readonly GridAiColumn[], parts: GridAiPartOptions): GridAiPromptResult {
+  let json: unknown = reply;
+  let message = '';
+  if (typeof reply === 'string') {
+    const text = readModelText(reply);
+    if (text.json === null) return emptyResult([], text.message || undefined);
+    json = text.json;
+    message = text.message;
+  } else if (isPlainObject(reply) && hasOwn(reply, 'message') && typeof reply.message === 'string') {
+    // A reply such as { filterModel, message: 'Showing paid orders' }: the message is not state.
+    const { message: text, ...rest } = reply;
+    json = rest;
+    message = text as string;
+  }
+  const result: GridAiPromptResult = validateGridAiState(json, columns, parts);
+  if (message) result.message = message;
+  return result;
+}
+
+/**
+ * Builds `aiAssistant.onPrompt` for your own model. On each prompt it calls
+ * `callModel({ prompt, schema, currentState, history }, { signal })`, reads the reply (a state object,
+ * a JSON string, or a fenced JSON block inside text), validates it with `validateGridAiState` and
+ * returns the branded result. A `callModel` throw or rejection becomes
+ * `{ state: {}, errors: [{ path: '', message }] }`; an abort rejects with an `AbortError`.
+ * @since v3.5
+ */
+export function createGridAiPromptHandler<C extends GridAiColumn>(
+  options: GridAiPromptHandlerOptions<C>,
+): (prompt: string, context: GridAiPromptContext) => Promise<GridAiPromptResult> {
+  const { columns, callModel, parts, schemaOptions = {} } = options;
+  const partOptions: GridAiPartOptions = { include: parts ?? schemaOptions.include, exclude: schemaOptions.exclude };
+  const schema = getGridAiSchema(columns, { ...schemaOptions, ...partOptions });
+
+  return async (prompt, context) => {
+    const signal = context?.signal ?? new AbortController().signal;
+    if (signal.aborted) throw abortError();
+    // Stop resolves the prompt at once, even when callModel ignores the signal.
+    const aborted = new Promise<never>((_, reject) => {
+      signal.addEventListener('abort', () => reject(abortError()), { once: true });
+    });
+    aborted.catch(() => undefined);
+    let reply: unknown;
+    try {
+      const request = {
+        prompt: String(prompt),
+        schema,
+        currentState: context?.currentState ?? {},
+        history: Array.isArray(context?.history) ? context.history : [],
+      };
+      reply = await Promise.race([callModel(request, { signal }), aborted]);
+    } catch (error) {
+      if (signal.aborted) throw abortError();
+      return emptyResult([{ path: '', message: `The model call failed: ${errorText(error)}` }]);
+    }
+    if (signal.aborted) throw abortError();
+    return readModelReply(reply, columns, partOptions);
+  };
+}

package/lib/ai/types.ts

@@ -1,10 +1,14 @@
-import type {
-  GridAggregationModel,
-  GridColumnVisibilityModel,
-  GridFilterModel,
-  GridPivotModel,
-  GridRowGroupingModel,
-  GridSortItem,
+import type { GridAiPart, GridAiState, GridAiValidationError } from '../types';
+
+// The state types live with the grid's own types (lib/types), so the grid's `aiAssistant` prop can
+// use them without importing this entry point. They are type-only and re-exported from here.
+export type {
+  GridAiHistoryEntry,
+  GridAiPart,
+  GridAiPromptContext,
+  GridAiPromptResult,
+  GridAiState,
+  GridAiValidationError,
 } from '../types';
 
 /**
@@ -30,9 +34,6 @@ export interface GridAiColumn {
   isSpacer?: boolean;
 }
 
-/** A part of the grid state the model may change. */
-export type GridAiPart = 'filter' | 'sort' | 'grouping' | 'aggregation' | 'pivot' | 'columnVisibility';
-
 /** Chooses the parts of the state; `exclude` wins over `include`. Default: every part. */
 export interface GridAiPartOptions {
   include?: readonly GridAiPart[];
@@ -66,23 +67,86 @@ export interface GridAiSchema extends GridAiJsonSchema {
   properties: Record<string, GridAiJsonSchema>;
 }
 
-/** The validated state: only parts, fields, operators and values the columns allow. */
-export interface GridAiState {
-  filterModel?: GridFilterModel;
-  sortModel?: GridSortItem[];
-  rowGroupingModel?: GridRowGroupingModel;
-  aggregationModel?: GridAggregationModel;
-  pivotModel?: GridPivotModel;
-  columnVisibilityModel?: GridColumnVisibilityModel;
+/**
+ * The validated state and what was dropped. Since v3.5 the result and its `state` carry the brand
+ * `Symbol.for('opengridx.ai.validated')` (not enumerable), which the grid's `aiAssistant` checks.
+ */
+export interface GridAiValidationResult {
+  state: GridAiState;
+  errors: GridAiValidationError[];
 }
 
-/** One thing the validator dropped or could not use. `path` points into the model output. */
-export interface GridAiValidationError {
-  path: string;
-  message: string;
+/** What `callModel` receives: send it to your model. @since v3.5 */
+export interface GridAiModelRequest {
+  prompt: string;
+  /** `getGridAiSchema(columns, …)`: use it as the structured-output format. */
+  schema: GridAiSchema;
+  currentState: GridAiState;
+  history: { prompt: string; applied: GridAiState }[];
 }
 
-export interface GridAiValidationResult {
-  state: GridAiState;
-  errors: GridAiValidationError[];
+/** Options of `createGridAiPromptHandler`. @since v3.5 */
+export interface GridAiPromptHandlerOptions<C extends GridAiColumn = GridAiColumn> {
+  columns: readonly C[];
+  /**
+   * Calls your model. Resolve with its reply: a state object, a JSON string, or text with a fenced JSON
+   * block. A string `message` key next to the state, or the text around the JSON, is shown as the reply.
+   */
+  callModel: (request: GridAiModelRequest, options: { signal: AbortSignal }) => Promise<unknown>;
+  /** The parts the model may change (schema and validation). Default: every part. */
+  parts?: readonly GridAiPart[];
+  /** Options for the schema; its `include` / `exclude` also limit validation. */
+  schemaOptions?: GridAiSchemaOptions;
+}
+
+/**
+ * The part of `GridApi` the agent tools use. A grid's `apiRef.current` fits it.
+ * @since v3.5
+ */
+export interface GridAgentApi {
+  getGridAiState: () => GridAiState;
+  setFilterModel: (model: NonNullable<GridAiState['filterModel']>) => void;
+  setSortModel: (model: NonNullable<GridAiState['sortModel']>) => void;
+  setRowGroupingModel: (model: NonNullable<GridAiState['rowGroupingModel']>) => void;
+  setAggregationModel: (model: NonNullable<GridAiState['aggregationModel']>) => void;
+  setColumnVisibilityModel: (model: NonNullable<GridAiState['columnVisibilityModel']>) => void;
+  getAllFilteredRows: () => object[];
+}
+
+/** Options of `createGridAgentTools`. @since v3.5 */
+export interface GridAgentToolsOptions {
+  /** Adds `get_row_summary`, the one tool that sends row values to the model. Default: false. */
+  allowRowAccess?: boolean;
+  /** Fields `get_row_summary` returns. Default: every column the tools were given. */
+  fields?: readonly string[];
+  /** Most rows `get_row_summary` returns. Default: 20. */
+  maxRows?: number;
+}
+
+/** What every tool's `execute` resolves with. It never throws or rejects. @since v3.5 */
+export interface GridAgentToolResult {
+  ok: boolean;
+  /** The state the tool applied. */
+  applied?: GridAiState;
+  /** Why nothing was applied. */
+  errors?: GridAiValidationError[];
+  /** `get_grid_state`: the current models. */
+  state?: GridAiState;
+  /** `get_grid_state`: the columns the tools know. */
+  columns?: { field: string; headerName: string; type: string }[];
+  /** `get_row_summary`: the number of rows that pass the filter. */
+  rowCount?: number;
+  /** `get_row_summary`: the first rows, limited to the allowed fields. */
+  rows?: Record<string, unknown>[];
+}
+
+/**
+ * A tool in the shape most tool-calling APIs take: `name`, `description`, a JSON Schema for the input
+ * and `execute`. No SDK is involved. @since v3.5
+ */
+export interface GridAgentTool {
+  name: string;
+  description: string;
+  inputSchema: GridAiJsonSchema;
+  execute: (input: unknown) => Promise<GridAgentToolResult>;
 }

package/lib/ai/validate.ts

@@ -14,6 +14,7 @@ import type {
   GridSortItem,
 } from '../types';
 import { toLocalDateString } from '../utils/values';
+import { brandGridAiValidated } from '../utils/aiBrand';
 import { coerceBoolean, coerceValue } from './coerce';
 import {
   ALL_PARTS,
@@ -244,6 +245,9 @@ function readPart(ctx: Ctx, part: GridAiPart, raw: unknown, path: string, state:
  * parts, fields, operators and enum values are dropped, each with an error; values are coerced to
  * the column type (`"1,200"` → 1200, a date → `"YYYY-MM-DD"`); filter groups left empty are
  * removed. Never throws, and never returns a field the columns do not allow.
+ *
+ * The result and its `state` carry the brand `Symbol.for('opengridx.ai.validated')` (not enumerable):
+ * the grid's `aiAssistant` applies only a branded state. Spreading the result keeps `state` branded.
  * @since v3.4
  */
 export function validateGridAiState<C extends GridAiColumn>(
@@ -251,6 +255,12 @@ export function validateGridAiState<C extends GridAiColumn>(
   columns: readonly C[],
   options: GridAiValidateOptions = {},
 ): GridAiValidationResult {
+  const result = validate(json, columns, options);
+  brandGridAiValidated(result.state);
+  return brandGridAiValidated(result);
+}
+
+function validate(json: unknown, columns: readonly GridAiColumn[], options: GridAiValidateOptions): GridAiValidationResult {
   const ctx: Ctx = { errors: [], byField: new Map() };
   const state: GridAiState = {};
   try {

package/lib/components/AiAssistant/GridAiAssistantArea.tsx

@@ -0,0 +1,26 @@
+import type React from 'react';
+import type { GridAiAssistantPanelProps, GridSlots } from '../../types';
+import { GridAiAssistantPanel } from './GridAiAssistantPanel';
+
+interface GridAiAssistantAreaProps {
+    panelProps: GridAiAssistantPanelProps;
+    slot: GridSlots['aiAssistantPanel'];
+    slotProps: Record<string, unknown> | undefined;
+}
+
+/**
+ * Anchors the `aiAssistant` panel (or `slots.aiAssistantPanel`) under the toolbar, over the grid.
+ * Escape anywhere in it closes the panel.
+ */
+export function GridAiAssistantArea({ panelProps, slot: Slot, slotProps }: GridAiAssistantAreaProps) {
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key !== 'Escape') return;
+        event.stopPropagation();
+        panelProps.close();
+    };
+    return (
+        <div className="ogx-ai-anchor" onKeyDown={handleKeyDown}>
+            {Slot ? <Slot {...panelProps} {...slotProps} /> : <GridAiAssistantPanel {...panelProps} />}
+        </div>
+    );
+}

package/lib/components/AiAssistant/GridAiAssistantPanel.css

@@ -0,0 +1,171 @@
+/* aiAssistant panel (v3.5): anchored under the toolbar, over the grid body. */
+.ogx-ai-anchor {
+  position: relative;
+  height: 0;
+  z-index: 20;
+}
+.ogx-ai-panel {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  width: min(480px, calc(100% - 16px));
+  max-height: var(--ogx-ai-panel-max-height, 420px);
+  overflow: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: var(--ogx-overlay-background, var(--ogx-grid-background));
+  color: var(--ogx-grid-row-text);
+  border: 1px solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
+  border-radius: var(--ogx-border-radius-lg, 8px);
+  box-shadow: var(--ogx-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
+  font-size: var(--ogx-font-size-sm);
+}
+.ogx-ai-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ogx-ai-panel__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: var(--ogx-color-primary);
+}
+.ogx-ai-panel__close {
+  min-width: 28px;
+  font-size: 18px;
+  line-height: 1;
+}
+.ogx-ai-panel__form {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.ogx-ai-panel__input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.ogx-ai-panel__form > .ogx-button {
+  flex: 0 0 auto;
+}
+.ogx-ai-panel__mic {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ogx-ai-panel__mic--on {
+  color: var(--ogx-color-error);
+  border-color: var(--ogx-color-error);
+}
+.ogx-ai-panel__suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ogx-ai-panel__suggestion {
+  padding: 3px 10px;
+  border: 1px solid var(--ogx-border-color, var(--ogx-grid-border-color));
+  border-radius: var(--ogx-border-radius-round, 999px);
+  background: var(--ogx-grid-header-background);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.ogx-ai-panel__suggestion:hover:not(:disabled) {
+  background: var(--ogx-grid-row-hover-background);
+}
+.ogx-ai-panel__suggestion:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.ogx-ai-panel__suggestion:focus-visible,
+.ogx-ai-chip__remove:focus-visible,
+.ogx-ai-panel__history-item:focus-visible {
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: 1px;
+}
+.ogx-ai-panel__status {
+  color: var(--ogx-color-gray-600, #4b5563);
+}
+.ogx-ai-panel__status--error {
+  color: var(--ogx-color-error);
+}
+.ogx-ai-panel__message {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.ogx-ai-panel__changes {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ogx-ai-panel__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ogx-ai-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 10px;
+  border-radius: var(--ogx-border-radius-round, 999px);
+  background: var(--ogx-color-primary-light, #e0e7ff);
+  color: var(--ogx-color-primary-dark, #1e3a8a);
+}
+.ogx-ai-chip__remove {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ogx-ai-chip__remove:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+.ogx-ai-panel__errors {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--ogx-color-warning, #b45309);
+}
+.ogx-ai-panel__history-title {
+  font-weight: 600;
+  opacity: 0.7;
+  margin-bottom: 2px;
+}
+.ogx-ai-panel__history ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ogx-ai-panel__history-item {
+  padding: 2px 0;
+  border: none;
+  background: transparent;
+  color: var(--ogx-color-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ogx-toolbar__ai-btn {
+  width: auto;
+  gap: 4px;
+  padding: 0 10px;
+  font: inherit;
+  font-size: var(--ogx-font-size-sm);
+  font-weight: 600;
+  color: var(--ogx-color-primary);
+}

package/lib/components/AiAssistant/GridAiAssistantPanel.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { GridAiAssistantPanelProps } from '../../types';
+import { Button } from '../ui/Button';
+import { Input } from '../ui/Input';
+import { useSpeechInput } from './useSpeechInput';
+
+/** The sparkle of the Ask AI button and the panel title. */
+export function AiSparkleIcon() {
+    return (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z" />
+            <path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z" />
+        </svg>
+    );
+}
+
+function MicIcon() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true" focusable="false">
+            <rect x="9" y="3" width="6" height="11" rx="3" />
+            <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
+        </svg>
+    );
+}
+
+/**
+ * The built-in `aiAssistant` panel: prompt input (Enter sends), suggestions, microphone where the
+ * browser has speech recognition, Stop while a request runs, the reply, the applied changes as
+ * removable chips with Undo, what was ignored, and the session's earlier prompts.
+ */
+export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
+    const {
+        status, statusText, message, errors, chips, history, suggestions, placeholder, voiceAvailable, canUndo,
+        submit, stop, undo, removeChip, close,
+    } = props;
+    const [text, setText] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+    const speech = useSpeechInput(setText);
+    const running = status === 'running';
+
+    useEffect(() => {
+        if (inputRef.current) inputRef.current.focus();
+    }, []);
+
+    const send = (prompt: string) => {
+        setText(prompt);
+        submit(prompt);
+    };
+
+    // The control a click acts on goes away (Stop, a chip, Undo): focus stays in the panel.
+    const thenFocusInput = (action: () => void) => () => {
+        action();
+        if (inputRef.current) inputRef.current.focus();
+    };
+
+    const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        if (!running) submit(text);
+    };
+
+    return (
+        <div className="ogx-ai-panel" role="dialog" aria-label="Ask AI">
+            <div className="ogx-ai-panel__header">
+                <span className="ogx-ai-panel__title"><AiSparkleIcon />Ask AI</span>
+                <Button size="small" className="ogx-ai-panel__close" aria-label="Close" onClick={close}>×</Button>
+            </div>
+
+            <form className="ogx-ai-panel__form" onSubmit={handleSubmit}>
+                <Input
+                    ref={inputRef}
+                    className="ogx-ai-panel__input"
+                    value={text}
+                    placeholder={placeholder}
+                    aria-label="Prompt"
+                    autoComplete="off"
+                    onChange={(event) => setText(event.target.value)}
+                />
+                {voiceAvailable && (
+                    <Button
+                        size="small"
+                        variant="outlined"
+                        className={`ogx-ai-panel__mic${speech.listening ? ' ogx-ai-panel__mic--on' : ''}`}
+                        aria-label={speech.listening ? 'Stop dictation' : 'Dictate a prompt'}
+                        aria-pressed={speech.listening}
+                        onClick={speech.toggle}
+                    >
+                        <MicIcon />
+                    </Button>
+                )}
+                {/* Separate keys: one reused <button> would turn into the submit button during the Stop click and submit again. */}
+                {running
+                    ? <Button key="stop" size="small" variant="outlined" onClick={thenFocusInput(stop)}>Stop</Button>
+                    : <Button key="ask" size="small" variant="contained" color="primary" type="submit" disabled={text.trim() === ''}>Ask</Button>}
+            </form>
+
+            {suggestions.length > 0 && (
+                <div className="ogx-ai-panel__suggestions" aria-label="Suggestions" role="group">
+                    {suggestions.map((suggestion) => (
+                        <button key={suggestion} type="button" className="ogx-ai-panel__suggestion" disabled={running} onClick={() => send(suggestion)}>
+                            {suggestion}
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {statusText && <div className={`ogx-ai-panel__status ogx-ai-panel__status--${status}`}>{statusText}</div>}
+            {message && <p className="ogx-ai-panel__message">{message}</p>}
+
+            {(chips.length > 0 || canUndo) && (
+                <div className="ogx-ai-panel__changes">
+                    <ul className="ogx-ai-panel__chips" aria-label="Applied changes">
+                        {chips.map((chip) => (
+                            <li key={chip.id} className="ogx-ai-chip" data-part={chip.part}>
+                                <span className="ogx-ai-chip__label">{chip.label}</span>
+                                <button type="button" className="ogx-ai-chip__remove" aria-label={`Remove ${chip.label}`} onClick={thenFocusInput(() => removeChip(chip.id))}>×</button>
+                            </li>
+                        ))}
+                    </ul>
+                    {canUndo && <Button size="small" variant="outlined" className="ogx-ai-panel__undo" onClick={thenFocusInput(undo)}>Undo</Button>}
+                </div>
+            )}
+
+            {errors.length > 0 && (
+                <ul className="ogx-ai-panel__errors" aria-label="Ignored">
+                    {errors.map((error, i) => (
+                        <li key={`${error.path}:${i}`}>{error.path ? `Ignored: ${error.message}` : error.message}</li>
+                    ))}
+                </ul>
+            )}
+
+            {history.length > 0 && (
+                <div className="ogx-ai-panel__history">
+                    <div className="ogx-ai-panel__history-title">Earlier</div>
+                    <ul>
+                        {history.map((entry, i) => (
+                            <li key={`${i}:${entry.prompt}`}>
+                                <button type="button" className="ogx-ai-panel__history-item" onClick={() => setText(entry.prompt)}>{entry.prompt}</button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}