## Context
Part of some minor improvements to the AI Assistant - this one's about
adding some keyboard shortcuts
## Changes involved
- Added keyboard shortcut for "New chat"
<img width="212" height="96" alt="image"
src="https://github.com/user-attachments/assets/e9c3bd63-adbc-4b05-8c52-1baed67e365a"
/>
- Also added a small animation for the "How can I assist you?" text for
visual indication when moving between chats that might not have a
conversation yet
- Added keyboard shortcut for "Permission settings"
<img width="236" height="86" alt="image"
src="https://github.com/user-attachments/assets/337da009-5979-4910-9292-73cc4d7f7cce"
/>
- Show keyboard shortcut for "Close Assistant"
<img width="165" height="88" alt="image"
src="https://github.com/user-attachments/assets/b45a4f5a-8e12-45f1-8fdb-a18c0deedb02"
/>
- Fix `ExpandingTextArea` height calculation logic issue
- If you open and close the Assistant panel a number of times, the
height of the input field isn't consistent, so this fixes that
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Added keyboard shortcuts for starting a new AI Assistant chat and
opening permission settings.
- Header actions now display shortcut hints and support keyboard access.
- **Improvements**
- Enhanced accessibility with labels for chat edit controls (save,
cancel, edit, delete).
- Chat onboarding now remounts when switching active chats.
- Improved chat popover alignment.
- Escape now blurs the message input; textarea resizing is more reliable
during content/layout changes.
- **Bug Fixes**
- Updated onboarding loading behavior based on the lints loading state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
When Assistant requests confirmation to run a query or deploy an edge
function if the user doesn't skip or run and instead sends a follow-up
message it errors out. This allows follow-up messages and treats them as
"skips" which means adjusting confirmation message state as part of the
follow-up. This also uses toModelOutput to cleanse data based on
permissions.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Enhanced tool approval workflow: pending approvals are now
automatically resolved as denied when submitting new messages
* Improved chat input state management with better handling of approval
states
* Customizable loading messages for tool operations
* **Bug Fixes**
* Fixed chat input availability during pending tool approval states
* Improved tool execution feedback during approval workflows
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46052?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
We're exploring support for newer models like
[gpt-5.4-nano](https://openai.com/index/introducing-gpt-5-4-mini-and-nano/)
in Assistant. This model doesn't support the `'minimal'` reasoning
effort level we use for gpt-5-mini which leads to vague errors.
<img width="595" height="263" alt="CleanShot 2026-03-18 at 17 13 05@2x"
src="https://github.com/user-attachments/assets/cf7c2370-322d-4a8a-be55-23e680db0aa0"
/>
Also, we've [previously
discussed](https://supabase.slack.com/archives/C0161K73J1J/p1771544464850199?thread_ts=1771493920.775699&cid=C0161K73J1J)
that reasoning adds unnecessary latency to otherwise simple AI
completion endpoints like `title-v2`. We want more control of reasoning
level independent of model/endpoint.
This PR aims to solve both problems by:
- making reasoning effort configurable on a per-request basis
- adding compile-time guardrails to prevent selecting an incompatible
reasoning level for models
- adding a `DEFAULT_COMPLETION_MODEL` with minimal reasoning that we can
update with newer models that support disabling reasoning (independent
of Assistant chat model reasoning)
Other improvements to our model config logic:
- Fixes bug in `onboarding/design.ts` and `assistant.eval.ts` where
`providerOptions` was being dropped
- `getModel()` now returns a bundled `modelParams` object (spread into
AI SDK calls) so `providerOptions` can't be accidentally omitted (this
[has happened
before](https://supabase.slack.com/archives/C0161K73J1J/p1771518443534309?thread_ts=1771493920.775699&cid=C0161K73J1J))
- Introduces an `ASSISTANT_MODELS` registry as a single source of truth
for assistant model config, eliminating hardcoded model IDs across the
codebase
- Aligns free/pro model conditional logic with `assistant.advance_model`
entitlement naming conventions instead of the `isLimited` pattern
- Adds `console.error` logging of Assistant stream errors so we can
interpret reasoning effort compatibility errors in the future (instead
of just opaque "Sorry, I'm having trouble responding right now" card)
- Removes unnecessary type casts and generally making the model config
logic stricter
- Removes pre-existing dead code: `anthropic` provider variant in
`GetModelParams` / `PROVIDERS` registry that was never implemented in
`getModel()`
Now if you try to select an unsupported reasoning level you get a type
error:
<img width="1306" height="320" alt="CleanShot 2026-03-20 at 14 37 24@2x"
src="https://github.com/user-attachments/assets/a6ac234b-5ea5-4d81-8e01-ac4be34a0800"
/>
And if for some reason an invalid reasoning level slips through, you now
get a server-side error surfacing the issue:
<img width="1268" height="204" alt="CleanShot 2026-03-20 at 14 58 14@2x"
src="https://github.com/user-attachments/assets/aadc1b7a-9495-475f-9741-39979bd27cd7"
/>
I've tested gpt-5 and gpt-5-mini are still working on the staging
preview and verified the models were selected properly in Braintrust
logs. Both models are available on my Pro test account, and my Free test
account shows the Pro upgrade CTA.
Closes AI-446
Closes AI-551
* add delete chat message functionality
* Implement message editing functionality in AIAssistant
* add functionality to delete messages in AI Assistant chat in assistant state
* remove duplicated `text-xs` class
* add a 'group' class for improved styling and refining action button visibility on hover
* Refine action button visibility in AIAssistantPanel to show only for user messages on hover, improving user experience.
* remove `"` from the message to edit
* Enhance editing message display in AIAssistantPanel by updating styling for improved visibility and user experience.
* Refactor AIAssistantPanel state management by simplifying original message content initialization and clarifying comments for better code readability.
* clean up action button rendering in AIAssistantPanel message component
* adjust the chat message layout (space)
* simplify the editing mode message
* show the edit button even when user is already in the edit mode
* Update AssistantChatForm styling for editing mode, positioning the editing message above the input field without changing the layout
* use `ButtonTooltip` for edit button to show tooltip
* simplify the condiiton to show the edit buton
* add the delete action button
* Refactor action button rendering in AIAssistantPanel to improve clarity and maintainability. Ensure buttons are only shown for user messages on hover, and simplify the conditional rendering logic.
* Remove commented-out code for cleaner implementation.
* improve unused onDeleteAfter prop and consolidating delete logic into a single `deleteMessageFromHere` function for improved clarity
* abort streaming when a user deletes a message
* delete unnecessary `originalMessageContent` state variable
* delete `confirmEdit` and move its logic into `sendMessageToAssistant`
* add `strokeWidth={1.5}` to `Pencil` icon
* add `opacity-50` to any messages that are after the message being edited, and it cancels the edit when those messages are clicked
* add a pulse animation to the user’s message being edited
* add more space between mesages and `AssistantChatForm`
* add framer-motion animation to `Editing message` element
* update strokeWidth of Trash2 icon in Message component for better visibility
* refactor Message component to make onDelete prop required
* add `DeleteMessageConfirmModal` for message deletion confirmation in Message component
* refactor message deletion logic in AIAssistant component to streamline editing process
* cancel editing when a user clicks the edit button again or the edit button in subsequent messages
* Add success toast notification for message deletion
* add Pencil icon to AIAssistantPanel component and fixed duplicated tailwind class
* Update AIAssistantPanel to use the Pencil icon
* Refactor AIAssistant to set editing message content from text parts
* Remove unused `reload` prop from AIAssistant component
* `setIsSticky(false)` when a user deletes all the messages or clear the chat to remove the `ArrowDown` icon scroll down button
* refactor: remove deleteMessagesBefore function from AiAssistantState
* refactor: simplify AssistantChatForm layout by removing unnecessary `z-index`
* enable the input field when a user wants to edit the message while the response is streaming
* Smol fixes
* remove conosle log
* Add state for resubmitting in AI Assistant panel
* Remove classes that hide the focus styles + fix focusing when editing message to ensure cursor is at the end of the text
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* style: update `ExpandingTextArea` focus styles
* revert the changes on `index.tsx`
* add `focus:border-control` to text-area component
* remove `overflow-hidden` from `form` to show box-shadow
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Implement message editing functionality in AIAssistant
* add functionality to delete messages in AI Assistant chat in assistant state
* remove duplicated `text-xs` class
* add a 'group' class for improved styling and refining action button visibility on hover
* Refine action button visibility in AIAssistantPanel to show only for user messages on hover, improving user experience.
* remove `"` from the message to edit
* Enhance editing message display in AIAssistantPanel by updating styling for improved visibility and user experience.
* Refactor AIAssistantPanel state management by simplifying original message content initialization and clarifying comments for better code readability.
* clean up action button rendering in AIAssistantPanel message component
* adjust the chat message layout (space)
* simplify the editing mode message
* show the edit button even when user is already in the edit mode
* Update AssistantChatForm styling for editing mode, positioning the editing message above the input field without changing the layout
* use `ButtonTooltip` for edit button to show tooltip
* simplify the condiiton to show the edit buton
* delete unnecessary `originalMessageContent` state variable
* delete `confirmEdit` and move its logic into `sendMessageToAssistant`
* add `strokeWidth={1.5}` to `Pencil` icon
* add `opacity-50` to any messages that are after the message being edited, and it cancels the edit when those messages are clicked
* add a pulse animation to the user’s message being edited
* add more space between mesages and `AssistantChatForm`
* add framer-motion animation to `Editing message` element
* cancel editing when a user clicks the edit button again or the edit button in subsequent messages
* add Pencil icon to AIAssistantPanel component and fixed duplicated tailwind class
* Update AIAssistantPanel to use the Pencil icon
* Refactor AIAssistant to set editing message content from text parts
* Minor changes
* nit
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* get `stop()` from useChat and use it
* Implement abort signal in `generate-v4` API
* Enhance `onStop` functionality in AIAssistant to store partial message when aborted
* Update dependencies in AIAssistant to include `updateMessage` in effect hook (lint warning fix)
* change onStop prop to be required in AssistantChatForm
* add comment for saving partial AI responses
* remove redundant text size class
* Make onStop prop optional in AssistantChatForm and conditionally render stop button
* Add loading spinner to stop button in AssistantChatForm
* simplify opacity handling for submit button
* Add tooltips
* Improve UI error handler for assistant panel
* Small tweak
* Filter out any tool calls that are streaming in generate-v4, happens when aborting the assistant while a tool is being called
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Joshen Lim
