What's new in Grid v7.3.0

AI feature enhancements

The experimental AI feature introduced in 7.2.0 has been enhanced with new tools for the agent:

Column visibility management

The agent now supports showing and hiding columns. Users can ask the agent to show or hide specific columns in the grid, for example "hide the age column" or "show all hidden columns". The agent uses three new tools internally:

• getColumns – Reads the available columns and their current visibility state
• showColumn – Shows a hidden column
• hideColumn – Hides a visible column

The show/hide tools are only made available to the LLM after columns have been read, ensuring the agent always has accurate column information before making changes.

Token usage tracking

The AI feature now tracks token usage for each API response. Every AI message record stores inputTokens, outputTokens, and totalTokens, making it easy to monitor API consumption programmatically. When debugMode is enabled, each API call logs current and cumulative token usage to the browser console.

Structured tool responses

AI tool call responses now use a structured AIToolCallResult format internally ({ ok, message, data, error }). Tool functions can return either a plain string (wrapped as { ok: true, message }) or a AIToolCallResult object. Each API plugin (OpenAI, Anthropic, Google) converts this internal format to its native representation automatically.

New static helpers on AIHelper make it easy to create structured responses:

• AIHelper.error('message') – Creates an error response ({ ok: false, error: { message } })
• AIHelper.result(data, message?) – Creates a success response with a data payload ({ ok: true, data })

Async status messages

The AI chat bubble now shows contextual status messages throughout the entire prompt lifecycle. When a prompt is sent, the bubble shows "Thinking". During tool calls, it shows tool-specific messages like "Reading Records", "Updating Records", "Removing Records", "Adding Record", or "Filtering Records". After tool calls complete and responses are sent back to the LLM, it shows "Processing". A queue-based system ensures each status message is visible for a minimum time (minStatusDisplayTime, default 400ms) before the next one appears. The existing delay status texts ("Waiting", "Still waiting", etc.) continue to cycle when responses take longer than 3 seconds.

Inline confirmation dialogs

The AI feature's confirmation dialogs now render inline within the chat panel instead of as floating modal popups. This provides a more integrated experience where confirmations appear naturally in the conversation flow. The dialog automatically scrolls into view and supports responsive button labels via CSS container queries. When no chat panel is visible (e.g. voice-only mode), the dialog still falls back to a floating modal popup.

Ask user tool

The agent can now present the user with a set of clickable options when it needs a decision before proceeding. For example, when a request is ambiguous the agent can ask the user to pick from a list of choices. After the user selects an option, the conversation continues with a new response based on the selection.

Voice conversation improvements

The AI chat panel's voice conversation mode has been improved:

• Stop button for read-aloud – The stop button now remains visible and functional while the AI response is being read aloud, regardless of whether the read-aloud was triggered manually or automatically via autoReadAloud. Clicking stop interrupts the speech playback immediately.
• Stop audio on panel close – When the chat panel is closed, any ongoing recording and audio playback is automatically stopped. This behavior is controlled by the new stopAudioOnHide config (enabled by default).
• The autoRecord config now defaults to false.

Grouping

The agent can now group records by a field when the Group feature is enabled. Users can ask the agent to group data, for example "group by city" or "clear the grouping". Calling the tool without a field parameter clears all active groupers.

Planning tools

The AI agent can now break complex multi-step requests into a tracked plan, improving reliability — especially with smaller or less capable LLM models. When a user request requires several sequential actions (for example, "copy this event to every day of the week"), the agent creates a plan with individual steps, executes each one, and tracks progress.

Two new tools power this:

• createPlan – Outlines the steps needed to fulfill a multi-step request
• completePlanSteps – Marks steps as completed after executing the corresponding tool calls

Planning is enabled by default via the new planning config and can be toggled from the AI settings panel at runtime:

new Grid({
    features : {
        ai : {
            planning : false  // Disable planning tools
        }
    }
});

@ Mention support

The AI chat input now supports @ mentions for referencing data records directly in messages. Typing @ followed by at least one character searches the configured data models by their classDisplayName and shows a dropdown of matching records. The dropdown aligns to the @ character position and supports keyboard navigation (ArrowDown/ArrowUp), Enter/Tab to select, Escape to dismiss, and click selection.

When a message is sent, the field value contains structured tokens like {@:"Record Name", model:"ModelName", id:123} that the agent can interpret. Chat bubbles automatically detect and render these tokens as styled mention tags — both in local messages and in LLM responses that reference the same token format. Pasted content is sanitized to plain text.

The feature is enabled by default and can be disabled:

new Grid({
    features : {
        ai : {
            mentions : false,  // Disable @ mentions
            // ...
        }
    }
});

Prompt history

The AI chat panel supports ArrowUp/ArrowDown to cycle through previously sent messages. This was previously always enabled and automatically persisted to localStorage. It is now opt-in via the promptHistory config on the AI feature. Pass an array of strings (e.g. loaded from localStorage) to enable it, and listen to the promptHistoryUpdate event to persist changes:

new Grid({
    features : {
        ai : {
            promptHistory : JSON.parse(localStorage.getItem('prompt-history') || '[]'),
            listeners : {
                promptHistoryUpdate({ promptHistory }) {
                    localStorage.setItem('prompt-history', JSON.stringify(promptHistory));
                }
            }
        }
    }
});

When the field contains multiline text, ArrowUp/ArrowDown move the cursor between lines instead of navigating history. History navigation only activates when the cursor is on the first or last line and the field content has not been manually edited.

Re-implemented StickyCells feature

The StickyCells feature has been completely rewritten to make it easier to use. It now hooks into cell rendering to add an inner wrapper element automatically, and uses CSS translate to pin cell content to the top of the grid as rows scroll off the viewport. Stickiness can be toggled on a per-column basis using the new stickyContent config on columns.

Try it out in the live demo here: