feat: edit message and delete

web-app/src/containers/MessageItem.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { memo, useState, useCallback } from 'react'
 import type { UIMessage, ChatStatus } from 'ai'
 import { RenderMarkdown } from './RenderMarkdown'
 import { cn } from '@/lib/utils'
@@ -9,31 +9,33 @@
   ReasoningContent,
   ReasoningTrigger,
 } from '@/ai-elements/reasoning'
 import {
   Tool,
   ToolContent,
   ToolHeader,
   ToolInput,
   ToolOutput,
 } from '@/ai-elements/tool'
 import { CopyButton } from './CopyButton'
 import { AvatarEmoji } from '@/containers/AvatarEmoji'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { IconRefresh, IconPaperclip } from '@tabler/icons-react'
+import { EditMessageDialog } from '@/containers/dialogs/EditMessageDialog'
+import { DeleteMessageDialog } from '@/containers/dialogs/DeleteMessageDialog'
 import TokenSpeedIndicator from '@/containers/TokenSpeedIndicator'
 import { extractFilesFromPrompt, FileMetadata } from '@/lib/fileMetadata'
 import { useMemo } from 'react'
 
 const CHAT_STATUS = {
   STREAMING: 'streaming',
   SUBMITTED: 'submitted',
 } as const
 
 const CONTENT_TYPE = {
   TEXT: 'text',
   FILE: 'file',
   REASONING: 'reasoning',
 } as const
 
 export type MessageItemProps = {
   message: UIMessage
@@ -42,30 +44,56 @@
   status: ChatStatus
   reasoningContainerRef?: React.RefObject<HTMLDivElement | null>
   onRegenerate?: (messageId: string) => void
+  onEdit?: (messageId: string, newText: string) => void
+  onDelete?: (messageId: string) => void
   assistant?: { avatar?: React.ReactNode; name?: string }
   showAssistant?: boolean
 }
 
 export const MessageItem = memo(
   ({
     message,
     isLastMessage,
     status,
     reasoningContainerRef,
     onRegenerate,
+    onEdit,
+    onDelete,
     assistant,
     showAssistant,
   }: MessageItemProps) => {
     const selectedModel = useModelProvider((state) => state.selectedModel)
     const [previewImage, setPreviewImage] = useState<{
       url: string
       filename?: string
     } | null>(null)
 
     const handleRegenerate = useCallback(() => {
       onRegenerate?.(message.id)
     }, [onRegenerate, message.id])
 
+    const handleEdit = useCallback(
+      (newText: string) => {
+        onEdit?.(message.id, newText)
+      },
+      [onEdit, message.id]
+    )
+
+    const handleDelete = useCallback(() => {
+      onDelete?.(message.id)
+    }, [onDelete, message.id])
+
+    // Get image URLs from file parts for the edit dialog
+    const imageUrls = useMemo(() => {
+      return message.parts
+        .filter((part) => {
+          if (part.type !== 'file') return false
+          const filePart = part as { type: 'file'; url?: string; mediaType?: string }
+          return filePart.url && filePart.mediaType?.startsWith('image/')
+        })
+        .map((part) => (part as { url: string }).url)
+    }, [message.parts])
+
     const isStreaming = isLastMessage && status === CHAT_STATUS.STREAMING
 
     // Extract file metadata from message text (for user messages with attachments)
@@ -341,17 +369,17 @@
           <div className="flex items-center justify-end gap-2 text-main-view-fg/60 text-xs mt-2">
             <CopyButton text={getFullTextContent()} />
 
-            {selectedModel &&
-              onRegenerate &&
-              status !== CHAT_STATUS.STREAMING && (
-                <button
-                  className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-                  onClick={handleRegenerate}
-                  title="Regenerate from this message"
-                >
-                  <IconRefresh size={16} />
-                </button>
-              )}
+            {onEdit && status !== CHAT_STATUS.STREAMING && (
+              <EditMessageDialog
+                message={getFullTextContent()}
+                imageUrls={imageUrls.length > 0 ? imageUrls : undefined}
+                onSave={handleEdit}
+              />
+            )}
+
+            {onDelete && status !== CHAT_STATUS.STREAMING && (
+              <DeleteMessageDialog onDelete={handleDelete} />
+            )}
           </div>
         )}
 
@@ -367,11 +395,22 @@
               >
                 <CopyButton text={getFullTextContent()} />
 
-                {selectedModel && onRegenerate && !isStreaming && (
+                {onEdit && !isStreaming && (
+                  <EditMessageDialog
+                    message={getFullTextContent()}
+                    onSave={handleEdit}
+                  />
+                )}
+
+                {onDelete && !isStreaming && (
+                  <DeleteMessageDialog onDelete={handleDelete} />
+                )}
+
+                {selectedModel && onRegenerate && !isStreaming && isLastMessage && (
                   <button
                     className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
                     onClick={handleRegenerate}
-                    title="Regenerate from this message"
+                    title="Regenerate response"
                   >
                     <IconRefresh size={16} />
                   </button>

web-app/src/containers/dialogs/DeleteMessageDialog.tsx

@@ -12,11 +12,6 @@ import {
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { IconTrash } from '@tabler/icons-react'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
 
 interface DeleteMessageDialogProps {
   onDelete: () => void
@@ -39,26 +34,19 @@ export function DeleteMessageDialog({ onDelete }: DeleteMessageDialogProps) {
   }
 
   const trigger = (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div 
-          className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              setIsOpen(true)
-            }
-          }}
-        >
-          <IconTrash size={16} />
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{t('delete')}</p>
-      </TooltipContent>
-    </Tooltip>
+    <div
+      className="flex items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          setIsOpen(true)
+        }
+      }}
+    >
+      <IconTrash size={16} />
+    </div>
   )
 
   return (

web-app/src/containers/dialogs/EditMessageDialog.tsx

@@ -12,16 +12,11 @@ import {
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { IconPencil, IconX } from '@tabler/icons-react'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
 
 interface EditMessageDialogProps {
   message: string
   imageUrls?: string[]
-  onSave: (message: string, imageUrls?: string[]) => void
+  onSave: (message: string) => void
   triggerElement?: React.ReactNode
 }
 
@@ -53,14 +48,9 @@ export function EditMessageDialog({
 
   const handleSave = () => {
     const hasTextChanged = draft !== message && draft.trim()
-    const hasImageChanged =
-      JSON.stringify(imageUrls || []) !== JSON.stringify(keptImages)
 
-    if (hasTextChanged || hasImageChanged) {
-      onSave(
-        draft.trim() || message,
-        keptImages.length > 0 ? keptImages : undefined
-      )
+    if (hasTextChanged) {
+      onSave(draft.trim() || message)
       setIsOpen(false)
     }
   }
@@ -73,26 +63,19 @@ export function EditMessageDialog({
   }
 
   const defaultTrigger = (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className="flex outline-0 items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              setIsOpen(true)
-            }
-          }}
-        >
-          <IconPencil size={16} />
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>{t('edit')}</p>
-      </TooltipContent>
-    </Tooltip>
+    <div
+      className="flex outline-0 items-center gap-1 hover:text-accent transition-colors cursor-pointer group relative"
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          setIsOpen(true)
+        }
+      }}
+    >
+      <IconPencil size={16} />
+    </div>
   )
 
   return (

web-app/src/routes/threads/$threadId.tsx

@@ -33,7 +33,7 @@
   extractContentPartsFromUIMessage,
 } from '@/lib/messages'
 import { newUserThreadContent } from '@/lib/completion'
-import { ThreadMessage, MessageStatus, ChatCompletionRole } from '@janhq/core'
+import { ThreadMessage, MessageStatus, ChatCompletionRole, ContentType } from '@janhq/core'
 import { createImageAttachment } from '@/types/attachment'
 import {
   useChatAttachments,
@@ -566,7 +566,7 @@
   // Handle regenerate from any message (user or assistant)
   // - For user messages: keeps the user message, deletes all after, regenerates assistant response
   // - For assistant messages: finds the closest preceding user message, deletes from there
   const handleRegenerate = (messageId?: string) => {
     if (!languageModelId || !languageModelProvider) {
       console.warn('No language model available')
       return
@@ -613,6 +613,82 @@
     regenerate(messageId ? { messageId } : undefined)
   }
 
+  // Handle edit message - updates the message and regenerates from it
+  const handleEditMessage = useCallback(
+    (messageId: string, newText: string) => {
+      if (!languageModelId || !languageModelProvider) {
+        console.warn('No language model available')
+        return
+      }
+
+      const currentLocalMessages = useMessages.getState().getMessages(threadId)
+      const messageIndex = currentLocalMessages.findIndex(
+        (m) => m.id === messageId
+      )
+
+      if (messageIndex === -1) return
+
+      const originalMessage = currentLocalMessages[messageIndex]
+
+      // Update the message content
+      const updatedMessage = {
+        ...originalMessage,
+        content: [
+          {
+            type: ContentType.Text,
+            text: { value: newText, annotations: [] },
+          },
+        ],
+      }
+      updateMessage(updatedMessage)
+
+      // Update chat messages for UI
+      const updatedChatMessages = chatMessages.map((msg) => {
+        if (msg.id === messageId) {
+          return {
+            ...msg,
+            parts: [{ type: 'text' as const, text: newText }],
+          }
+        }
+        return msg
+      })
+      setChatMessages(updatedChatMessages)
+
+      // Delete all messages after this one and regenerate
+      const messagesToDelete = currentLocalMessages.slice(messageIndex + 1)
+      messagesToDelete.forEach((msg) => {
+        deleteMessage(threadId, msg.id)
+      })
+
+      // Regenerate from the edited message
+      regenerate({ messageId })
+    },
+    [
+      languageModelId,
+      languageModelProvider,
+      threadId,
+      updateMessage,
+      deleteMessage,
+      chatMessages,
+      setChatMessages,
+      regenerate,
+    ]
+  )
+
+  // Handle delete message
+  const handleDeleteMessage = useCallback(
+    (messageId: string) => {
+      deleteMessage(threadId, messageId)
+
+      // Update chat messages for UI
+      const updatedChatMessages = chatMessages.filter(
+        (msg) => msg.id !== messageId
+      )
+      setChatMessages(updatedChatMessages)
+    },
+    [threadId, deleteMessage, chatMessages, setChatMessages]
+  )
+
   // Handler for increasing context size
   const handleContextSizeIncrease = useCallback(async () => {
     if (!selectedModel) return
@@ -659,7 +735,7 @@
     setTimeout(() => {
       handleRegenerate()
     }, 1000)
-  }, [selectedModel, selectedProvider, getProviderByName, serviceHub])
+  }, [selectedModel, selectedProvider, getProviderByName, serviceHub, handleRegenerate])
 
   const threadModel = useMemo(() => thread?.model, [thread])
 
@@ -698,6 +774,8 @@
                     status={status}
                     reasoningContainerRef={reasoningContainerRef}
                     onRegenerate={handleRegenerate}
+                    onEdit={handleEditMessage}
+                    onDelete={handleDeleteMessage}
                   />
                 )
               })}