Function: Add switch branch buttons

Author: ShenKSPZ

src/components/chat/ChatMessageArea.tsx

@@ -4,6 +4,7 @@ import { Send, Square, Copy, RotateCcw, Share2, Pencil, Loader2 } from 'lucide-r
 import MarkdownContent from './MarkdownContent';
 import MessageToolboxMenu, { ToolboxAction } from '../ui/MessageToolboxMenu';
 import { MessageHelper } from '../../services/message-helper';
+import { DatabaseIntegrationService } from '../../services/database-integration';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -43,7 +44,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
       setMessagesList(MessageHelper.mapMessagesTreeToList(activeConversation));
     }
   }, [activeConversation, activeConversation?.messages]);
-  
+
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
 
@@ -112,6 +113,63 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     return messagesList;
   }
 
+  const handleMessageIndexChange = async (messageId: string, isPrevious: boolean) => {
+    if (!activeConversation) return;
+
+    const message = messagesList.find(m => m.messageId === messageId);
+    if (!message || !message.fatherMessageId) return;
+
+    const fatherMessage = activeConversation.messages.get(message.fatherMessageId);
+    if (!fatherMessage) return;
+
+    const currentIndex = fatherMessage.childrenMessageIds.indexOf(messageId);
+    if (currentIndex <= 0 && isPrevious) return;
+    if (currentIndex >= fatherMessage.childrenMessageIds.length - 1 && !isPrevious) return;
+
+    // Create updated message
+    const updatedFatherMessage = {
+      ...fatherMessage,
+      preferIndex: currentIndex + (isPrevious ? -1 : 1),
+    };
+
+    // Update activeConversation
+    activeConversation.messages.set(updatedFatherMessage.messageId, updatedFatherMessage);
+
+    // Update database
+    const dbService = DatabaseIntegrationService.getInstance();
+    await dbService.updateChatMessage(
+      updatedFatherMessage.messageId,
+      updatedFatherMessage,
+      updatedFatherMessage.conversationId
+    );
+
+    setMessagesList(MessageHelper.mapMessagesTreeToList(activeConversation));
+  };
+
+  const getCurrentMessageIndex = (messageId: string) => {
+    const message = messagesList.find(m => m.messageId === messageId);
+    if (!message) return 0;
+    
+    const fatherMessage = messagesList.find(m => m.messageId === message.fatherMessageId);
+    if (fatherMessage) {
+      // Find the index of this message in the father's children
+      const index = fatherMessage.childrenMessageIds.indexOf(messageId);
+      return index >= 0 ? index : 0;
+    }
+    return 0;
+  }
+
+  const getTotalMessagesNumber = (messageId: string) => {
+    const message = messagesList.find(m => m.messageId === messageId);
+    if (!message) return 0;
+    
+    const fatherMessage = messagesList.find(m => m.messageId === message.fatherMessageId);
+    if (fatherMessage) {
+      return fatherMessage.childrenMessageIds.length;
+    }
+    return 0;
+  }
+
   // If no active conversation is selected
   if (!activeConversation) {
     return (
@@ -226,6 +284,10 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                     <MessageToolboxMenu 
                       actions={toolboxActions} 
                       className={`mr-1 ${hoveredMessageId === message.messageId ? 'opacity-100' : 'opacity-0'}`}
+                      currentMessageIndex={getCurrentMessageIndex(message.messageId)}
+                      totalMessages={getTotalMessagesNumber(message.messageId)}
+                      onPreviousMessageClick={() => handleMessageIndexChange(message.messageId, true)}
+                      onNextMessageClick={() => handleMessageIndexChange(message.messageId, false)}
                     />
                   </div>
                 </>

src/components/ui/MessageToolboxMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { LucideIcon } from 'lucide-react';
+import { ChevronLeft, ChevronRight, LucideIcon } from 'lucide-react';
 
 export interface ToolboxAction {
   id: string;
@@ -12,6 +12,10 @@ export interface ToolboxAction {
 interface MessageToolboxMenuProps {
   actions: ToolboxAction[];
   className?: string;
+  currentMessageIndex: number;
+  totalMessages: number;
+  onPreviousMessageClick: () => void;
+  onNextMessageClick: () => void;
 }
 
 /**
@@ -20,10 +24,22 @@ interface MessageToolboxMenuProps {
  */
 const MessageToolboxMenu: React.FC<MessageToolboxMenuProps> = ({
   actions,
-  className = ''
+  className = '',
+  currentMessageIndex,
+  totalMessages,
+  onPreviousMessageClick,
+  onNextMessageClick
 }) => {
   const [activeTooltip, setActiveTooltip] = useState<string | null>(null);
 
+  const handlePreviousMessageClick = () => {
+    onPreviousMessageClick();
+  };
+
+  const handleNextMessageClick = () => {
+    onNextMessageClick();
+  };
+
   return (
     <div
       className={`flex items-center justify-end space-x-1 transition-opacity duration-200 ${className}`}
@@ -55,6 +71,34 @@ const MessageToolboxMenu: React.FC<MessageToolboxMenuProps> = ({
           )}
         </div>
       ))}
+
+      {totalMessages > 1 && (
+        <>
+          <button
+            onClick={handlePreviousMessageClick}
+            className={`flex items-center justify-center p-1.5 text-gray-600 rounded hover:bg-gray-100 transition-colors cursor-pointer`}
+            title={'Previous Message'}
+            aria-label={'Previous Message'}
+            onMouseEnter={() => setActiveTooltip('previousMessage')}
+            onMouseLeave={() => setActiveTooltip(null)}
+          >
+            <ChevronLeft />
+          </button>
+
+          <span className='text-gray-600'>{currentMessageIndex + 1} / {totalMessages}</span>
+
+          <button
+            onClick={handleNextMessageClick}
+            className={`flex items-center justify-center p-1.5 text-gray-600 rounded hover:bg-gray-100 transition-colors cursor-pointer`}
+            title={'Next Message'}
+            aria-label={'Next Message'}
+            onMouseEnter={() => setActiveTooltip('nextMessage')}
+            onMouseLeave={() => setActiveTooltip(null)}
+          >
+            <ChevronRight />
+          </button>
+        </>
+      )}
     </div>
   );
 };