TaishiandJoshen Lim a8f6d85c49 Add message deletion functionality to AI Assistant (#37698)
* 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>
2025-08-25 17:51:29 +08:00
2025-07-28 21:35:33 +00:00
2025-07-14 16:29:01 -04:00
2025-06-17 11:08:46 +02:00
2024-01-10 13:34:41 +01:00
2021-07-25 12:45:26 +08:00
2023-03-11 19:47:56 +01:00

Supabase

Supabase is the Postgres development platform. We're building the features of Firebase using enterprise-grade open source tools.

  • Hosted Postgres Database. Docs
  • Authentication and Authorization. Docs
  • Auto-generated APIs.
  • Functions.
    • Database Functions. Docs
    • Edge Functions Docs
  • File Storage. Docs
  • AI + Vector/Embeddings Toolkit. Docs
  • Dashboard

Supabase Dashboard

Watch "releases" of this repo to get notified of major updates.

Watch this repo

Documentation

For full documentation, visit supabase.com/docs

To see how to Contribute, visit Getting Started

Community & Support

  • Community Forum. Best for: help with building, discussion about database best practices.
  • GitHub Issues. Best for: bugs and errors you encounter using Supabase.
  • Email Support. Best for: problems with your database or infrastructure.
  • Discord. Best for: sharing your applications and hanging out with the community.

How it works

Supabase is a combination of open source tools. We’re building the features of Firebase using enterprise-grade, open source products. If the tools and communities exist, with an MIT, Apache 2, or equivalent open license, we will use and support that tool. If the tool doesn't exist, we build and open source it ourselves. Supabase is not a 1-to-1 mapping of Firebase. Our aim is to give developers a Firebase-like developer experience using open source tools.

Architecture

Supabase is a hosted platform. You can sign up and start using Supabase without installing anything. You can also self-host and develop locally.

Architecture

  • Postgres is an object-relational database system with over 30 years of active development that has earned it a strong reputation for reliability, feature robustness, and performance.
  • Realtime is an Elixir server that allows you to listen to PostgreSQL inserts, updates, and deletes using websockets. Realtime polls Postgres' built-in replication functionality for database changes, converts changes to JSON, then broadcasts the JSON over websockets to authorized clients.
  • PostgREST is a web server that turns your PostgreSQL database directly into a RESTful API.
  • GoTrue is a JWT-based authentication API that simplifies user sign-ups, logins, and session management in your applications.
  • Storage a RESTful API for managing files in S3, with Postgres handling permissions.
  • pg_graphql a PostgreSQL extension that exposes a GraphQL API.
  • postgres-meta is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
  • Kong is a cloud-native API gateway.

Client libraries

Our approach for client libraries is modular. Each sub-library is a standalone implementation for a single external system. This is one of the ways we support existing tools.

Language Client Feature-Clients (bundled in Supabase client)
Supabase PostgREST GoTrue Realtime Storage Functions
⚡️ Official ⚡️
JavaScript (TypeScript) supabase-js postgrest-js gotrue-js realtime-js storage-js functions-js
Flutter supabase-flutter postgrest-dart gotrue-dart realtime-dart storage-dart functions-dart
Swift supabase-swift postgrest-swift auth-swift realtime-swift storage-swift functions-swift
Python supabase-py postgrest-py gotrue-py realtime-py storage-py functions-py
💚 Community 💚
C# supabase-csharp postgrest-csharp gotrue-csharp realtime-csharp storage-csharp functions-csharp
Go - postgrest-go gotrue-go - storage-go functions-go
Java - - gotrue-java - storage-java -
Kotlin supabase-kt postgrest-kt auth-kt realtime-kt storage-kt functions-kt
Ruby supabase-rb postgrest-rb - - - -
Rust - postgrest-rs - - - -
Godot Engine (GDScript) supabase-gdscript postgrest-gdscript gotrue-gdscript realtime-gdscript storage-gdscript functions-gdscript

Badges

Made with Supabase

[![Made with Supabase](https://supabase.com/badge-made-with-supabase.svg)](https://supabase.com)
<a href="https://supabase.com">
  <img
    width="168"
    height="30"
    src="https://supabase.com/badge-made-with-supabase.svg"
    alt="Made with Supabase"
  />
</a>

Made with Supabase (dark)

[![Made with Supabase](https://supabase.com/badge-made-with-supabase-dark.svg)](https://supabase.com)
<a href="https://supabase.com">
  <img
    width="168"
    height="30"
    src="https://supabase.com/badge-made-with-supabase-dark.svg"
    alt="Made with Supabase"
  />
</a>

Translations

Languages
TypeScript 59.5%
MDX 21.7%
JavaScript 17.6%
CSS 0.5%
Shell 0.4%
Other 0.2%