added functionality to remove the user-assistant message pair

src/components/Sidebar/chat/ChatList.tsx

@@ -7,12 +7,14 @@ import remarkBreaks from 'remark-breaks'
 import rehypeRaw from 'rehype-raw'
 import { ChatMessage, ChatRole } from '../../../hooks/useCurrentChat'
 import FilePreviewBar from './FilePreviewBar'
+import { RiCloseLine } from 'react-icons/ri'
 
 interface ChatListProps {
   messages: ChatMessage[]
+  removeMessagePair: (timestamp: number) => void
 }
 
-const ChatList = ({ messages }: ChatListProps) => {
+const ChatList = ({ messages, removeMessagePair }: ChatListProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -50,9 +52,18 @@ const ChatList = ({ messages }: ChatListProps) => {
           .map((msg, i) => (
             <div
               data-user={msg.role === ChatRole.USER ? 'true' : undefined}
-              className="markdown cdx-px-4 cdx-py-2 data-[user]:cdx-border-l-2 cdx-border-blue-400 data-[user]:cdx-bg-black/5 data-[user]:dark:cdx-bg-neutral-900/50 cdx-max-w-[400px]"
+              className="markdown cdx-group cdx-relative cdx-px-4 cdx-py-2 data-[user]:cdx-border-l-2 cdx-border-blue-400 data-[user]:cdx-bg-black/5 data-[user]:dark:cdx-bg-neutral-900/50 cdx-max-w-[400px]"
               key={`${msg.timestamp}-${i}`}
             >
+              {msg.role === ChatRole.USER && (
+                <button
+                  type="button"
+                  onClick={() => removeMessagePair(msg.timestamp)}
+                  className="cdx-absolute group-hover:cdx-visible cdx-invisible cdx-right-2 cdx-top-2 cdx-p-0.5 cdx-bg-black/20 cdx-rounded"
+                >
+                  <RiCloseLine />
+                </button>
+              )}
               <ReactMarkdown
                 remarkPlugins={[remarkGfm, remarkBreaks]}
                 rehypePlugins={[rehypeRaw]}

src/components/Sidebar/chat/index.tsx

@@ -10,13 +10,19 @@ interface ChatProps {
 }
 
 const Chat = ({ settings }: ChatProps) => {
-  const { messages, submitQuery, clearMessages, generating, cancelRequest } =
-    useChatCompletion({
-      model: settings.chat.modal,
-      apiKey: settings.chat.openAIKey!,
-      mode: settings.chat.mode,
-      systemPrompt: SYSTEM_PROMPT,
-    })
+  const {
+    messages,
+    submitQuery,
+    clearMessages,
+    generating,
+    cancelRequest,
+    removeMessagePair,
+  } = useChatCompletion({
+    model: settings.chat.modal,
+    apiKey: settings.chat.openAIKey!,
+    mode: settings.chat.mode,
+    systemPrompt: SYSTEM_PROMPT,
+  })
 
   useEffect(() => {
     const handleWindowMessage = (event: MessageEvent) => {
@@ -37,7 +43,7 @@ const Chat = ({ settings }: ChatProps) => {
 
   return (
     <>
-      <ChatList messages={messages} />
+      <ChatList messages={messages} removeMessagePair={removeMessagePair} />
       <SidebarInput
         loading={generating}
         submitMessage={submitQuery}

src/hooks/useChatCompletion.ts

@@ -37,6 +37,7 @@ export const useChatCompletion = ({
     addNewMessage,
     commitToStoredMessages,
     clearMessages,
+    removeMessagePair,
   } = useCurrentChat()
   const [generating, setGenerating] = useState(false)
 
@@ -124,5 +125,12 @@ export const useChatCompletion = ({
     setGenerating(false)
   }
 
-  return { messages, submitQuery, generating, cancelRequest, clearMessages }
+  return {
+    messages,
+    submitQuery,
+    generating,
+    cancelRequest,
+    clearMessages,
+    removeMessagePair,
+  }
 }

src/hooks/useCurrentChat.ts

@@ -134,6 +134,16 @@ export const useCurrentChat = () => {
     setMessages((m) => [...m, newMessage])
   }
 
+  const removeMessagePair = (timestamp: number) => {
+    setMessages((p) => {
+      const index = p.findIndex((msg) => msg.timestamp === timestamp)
+      if (index === -1 || p[index].role !== ChatRole.USER) return p
+      p.splice(index, 2) // remove the user message and the assistant message
+      return [...p]
+    })
+    commitToStoredMessages()
+  }
+
   const commitToStoredMessages = async () => {
     if (!currentChatIdRef.current) return
     setStorage(getStoredChatKey(currentChatIdRef.current), messagesRef.current)
@@ -152,5 +162,6 @@ export const useCurrentChat = () => {
     commitToStoredMessages,
     clearMessages,
     currentChatId,
+    removeMessagePair,
   }
 }