Enhancement: Conversation Reset Reminder Modal

[marlonka]

What features would you like to see added?

I would love to see a subtle feature that periodically encourages users to start fresh chats after extended usage, specifically every 25 conversations. By doing so, users provide cleaner prompts and improve the clarity and relevance of the AI’s responses. Users in my librechat instance usually just make very long conversations otherwise.

More details

Background & Rationale:
As conversations grow longer, the AI model can struggle to maintain context and relevance. Starting anew every so often helps ensure higher-quality answers. Reminding users to begin a fresh chat after 25 conversations encourages them to restate their requests clearly, leading to more accurate and helpful results.

Key points:

• User Education: Teaches best practices for maintaining clarity in long AI-assisted discussions.
• Periodic Reminders: Non-intrusive, triggered every 25 conversations, reinforcing good prompt hygiene.

Modal Behavior:

• Trigger Condition: The modal appears whenever conversationCount % 25 === 0 and conversationCount > 0.
• User Flow:
  • Upon hitting the conversation milestone (e.g., the 25th conversation), the modal automatically appears.
  • The modal explains why starting a new chat is beneficial.
  • The user can choose “Start a New Chat” to immediately reset the context or simply close the modal and continue as is.

More details

Example Code Integration:
(remember: I just asked o1 to implement a feature, this for sure will not work in librechat without adjustments)

// UseReminderModal.tsx

import React from 'react'
import { 
  AlertDialog, 
  AlertDialogContent, 
  AlertDialogHeader, 
  AlertDialogTitle, 
  AlertDialogDescription, 
  AlertDialogFooter, 
  AlertDialogAction 
} from '@/components/ui/alert-dialog'

interface UseReminderModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onStartNewChat: () => void;
}

const UseReminderModal: React.FC<UseReminderModalProps> = ({ open, onOpenChange, onStartNewChat }) => {
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-lg mx-auto p-6 rounded-md shadow-md bg-white dark:bg-neutral-900">
        <AlertDialogHeader>
          <AlertDialogTitle className="text-xl font-bold">Refresh Your Approach for Better Answers</AlertDialogTitle>
        </AlertDialogHeader>
        <AlertDialogDescription className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">
          You’ve hit a milestone in this conversation!
          <br /><br />
          Long, continuous threads can confuse the AI and reduce answer quality. By starting a new chat and providing a more focused prompt, you help the AI provide clearer, more relevant, and more accurate responses.
          <br /><br />
          Consider summarizing the key points and starting fresh. A clean slate combined with a well-structured prompt leads to sharper insights and a better overall experience.
        </AlertDialogDescription>
        <AlertDialogFooter className="mt-4 flex justify-end space-x-2">
          <AlertDialogAction
            onClick={() => {
              onOpenChange(false);
              onStartNewChat();
            }}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"
          >
            Start a New Chat
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

export default UseReminderModal

Integration Example:

import React, { useState, useEffect } from 'react'
import UseReminderModal from './UseReminderModal'

const ParentComponent = () => {
  const [conversationCount, setConversationCount] = useState<number>(0)
  const [modalOpen, setModalOpen] = useState<boolean>(false)

  useEffect(() => {
    if (conversationCount > 0 && conversationCount % 25 === 0) {
      setModalOpen(true)
    }
  }, [conversationCount])

  const handleStartNewChat = () => {
    // Your logic to reset conversation context
  }

  return (
    <>
      {/* Existing UI */}
      <button onClick={() => setConversationCount(c => c + 1)}>Increment Conversation</button>

      <UseReminderModal
        open={modalOpen}
        onOpenChange={setModalOpen}
        onStartNewChat={handleStartNewChat}
      />
    </>
  )
}

export default ParentComponent

Testing & Validation:

• Manual Testing: Increment conversationCount and ensure the modal appears at multiples of 25.
• User Experience: Confirm that users can either start a new chat or close the modal and continue.
• Accessibility: Uses accessible components, supporting screen readers and keyboard navigation.

Which components are impacted by your request?

• General UI
• Conversation handling logic
• Modal/AlertDialog components

Code of Conduct
I agree to follow this project's Code of Conduct.

---

Request for Review
To: Danny Avila & LibreChat maintainers

Please review this proposal for integrating a "Conversation Reset Reminder Modal." This feature aligns with the project’s goal of delivering high-quality AI-assisted conversations. By periodically nudging users to refresh their context, we can improve the relevance and accuracy of responses. I welcome any feedback or suggestions for improvements.

Thank you for your time and consideration!

Which components are impacted by your request?

UI

Pictures

Code of Conduct

• I agree to follow this project's Code of Conduct