❤️

MichielMAnalytics · MichielMAnalytics · commit d8e2b0aff7dc · 2025-06-29T14:41:24.000+02:00
FEAT: added feedback button
diff --git a/api/server/controllers/EnterpriseContactController.js b/api/server/controllers/EnterpriseContactController.js
@@ -8,11 +8,12 @@ const {
 } = require('~/models/EnterpriseContact');
 
 /**
- * Creates a new enterprise contact
+ * Creates a new enterprise contact or general feedback
  */
 const createEnterpriseContactController = async (req, res) => {
   try {
     const {
+      feedbackType = 'enterprise',
       firstName,
       lastName,
       workEmail,
@@ -25,30 +26,47 @@ const createEnterpriseContactController = async (req, res) => {
       complianceNeeds = [],
       timeline,
       additionalInfo,
+      conversationId,
+      userId: bodyUserId,
     } = req.body;
 
-    // Validate required fields
-    if (!firstName || !lastName || !workEmail) {
-      return res.status(400).json({
-        error: 'Missing required fields: firstName, lastName, and workEmail are required',
-      });
+    // Get user info from authenticated user if available, fallback to body
+    const userId = req.user?._id?.toString() || req.user?.id?.toString() || bodyUserId;
+
+    // Validate required fields based on feedback type
+    if (feedbackType === 'enterprise') {
+      if (!firstName || !lastName || !workEmail) {
+        return res.status(400).json({
+          error:
+          'Missing required fields: firstName, lastName, and workEmail are required for enterprise contacts',
+        });
+      }
+    } else if (feedbackType === 'general') {
+      if (!additionalInfo || additionalInfo.trim().length === 0) {
+        return res.status(400).json({
+          error: 'Feedback content is required',
+        });
+      }
     }
 
-    // Check for existing contact with same email
-    const existingContact = await getEnterpriseContactById(workEmail);
-    if (existingContact) {
-      logger.info(`Duplicate enterprise contact submission for email: ${workEmail}`);
-      // Return success to avoid exposing existing contacts, but don't create duplicate
-      return res.status(200).json({
-        message: 'Contact submission received successfully',
-        contactId: existingContact.contactId,
-      });
+    // Check for existing contact with same email (only for enterprise contacts)
+    if (feedbackType === 'enterprise' && workEmail) {
+      const existingContact = await getEnterpriseContactById(workEmail);
+      if (existingContact) {
+        logger.info(`Duplicate enterprise contact submission for email: ${workEmail}`);
+        // Return success to avoid exposing existing contacts, but don't create duplicate
+        return res.status(200).json({
+          message: 'Contact submission received successfully',
+          contactId: existingContact.contactId,
+        });
+      }
     }
 
     const contactData = {
-      firstName: firstName.trim(),
-      lastName: lastName.trim(),
-      workEmail: workEmail.trim().toLowerCase(),
+      feedbackType,
+      firstName: firstName?.trim(),
+      lastName: lastName?.trim(),
+      workEmail: workEmail?.trim().toLowerCase(),
       phoneNumber: phoneNumber?.trim(),
       companyWebsite: companyWebsite?.trim(),
       problemToSolve: problemToSolve?.trim(),
@@ -58,14 +76,21 @@ const createEnterpriseContactController = async (req, res) => {
       complianceNeeds: Array.isArray(complianceNeeds) ? complianceNeeds : [],
       timeline,
       additionalInfo: additionalInfo?.trim(),
+      userId: userId?.toString(),
+      conversationId: conversationId?.trim(),
     };
 
     const contact = await createEnterpriseContact(contactData);
 
-    logger.info(`New enterprise contact created: ${contact.contactId} - ${workEmail}`);
+    logger.info(
+      `New ${feedbackType} contact created: ${contact.contactId} - ${workEmail || userId}`,
+    );
 
     res.status(201).json({
-      message: 'Contact submission received successfully',
+      message:
+        feedbackType === 'general'
+          ? 'Feedback submitted successfully'
+          : 'Contact submission received successfully',
       contactId: contact.contactId,
     });
   } catch (error) {
diff --git a/client/src/components/Chat/FeedbackButton.tsx b/client/src/components/Chat/FeedbackButton.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { useLocalize, useMediaQuery } from '~/hooks';
+import FeedbackModal from './FeedbackModal';
+
+interface FeedbackButtonProps {
+  conversationId?: string;
+}
+
+export default function FeedbackButton({ conversationId }: FeedbackButtonProps) {
+  const localize = useLocalize();
+  const [showFeedbackModal, setShowFeedbackModal] = useState(false);
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  // Only show button if we have a valid conversation
+  if (!conversationId || conversationId === 'new' || conversationId === 'search') {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setShowFeedbackModal(true)}
+        className={`inline-flex flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 ${
+          isSmallScreen ? 'size-10' : 'h-10 px-3'
+        }`}
+        aria-label="Send feedback"
+      >
+        <span className={isSmallScreen ? '' : 'mr-1'}>❤️</span>
+        {!isSmallScreen && <span className="text-sm font-medium">FEEDBACK</span>}
+      </button>
+      <FeedbackModal
+        open={showFeedbackModal}
+        onOpenChange={setShowFeedbackModal}
+        conversationId={conversationId}
+      />
+    </>
+  );
+}
diff --git a/client/src/components/Chat/FeedbackModal.tsx b/client/src/components/Chat/FeedbackModal.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { useAuthContext } from '~/hooks';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
+import { useToastContext } from '~/Providers';
+
+interface FeedbackModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  conversationId: string;
+}
+
+export default function FeedbackModal({ open, onOpenChange, conversationId }: FeedbackModalProps) {
+  const { user } = useAuthContext();
+  const { showToast } = useToastContext();
+  const [feedback, setFeedback] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!feedback.trim()) {
+      showToast({
+        message: 'Please enter your feedback',
+        status: 'error',
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch('/api/enterprise-contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          feedbackType: 'general',
+          additionalInfo: feedback,
+          conversationId,
+          userId: user?.id,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to submit feedback');
+      }
+
+      showToast({
+        message: 'Thank you for your feedback!',
+        status: 'success',
+      });
+
+      setFeedback('');
+      onOpenChange(false);
+    } catch (error) {
+      console.error('Error submitting feedback:', error);
+      showToast({
+        message: error instanceof Error ? error.message : 'Failed to submit feedback',
+        status: 'error',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!isSubmitting) {
+      setFeedback('');
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader className="px-6 pt-6">
+          <DialogTitle>Send Feedback</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="px-6 pb-6 space-y-4">
+          <div>
+            <label htmlFor="feedback" className="mb-2 block text-sm font-medium text-text-primary">
+              🔧 Your feedback will help us improve the product. 
+            </label>
+            <textarea
+              id="feedback"
+              value={feedback}
+              onChange={(e) => setFeedback(e.target.value)}
+              placeholder="Tell us what you think..."
+              rows={5}
+              className="w-full resize-none rounded-md border border-border-medium bg-surface-primary px-3 py-2 text-text-primary placeholder-text-secondary focus:border-border-heavy focus:outline-none focus:ring-1 focus:ring-border-heavy"
+              disabled={isSubmitting}
+            />
+          </div>
+          <div className="flex justify-center pt-4">
+            <button
+              type="submit"
+              disabled={isSubmitting || !feedback.trim()}
+              className="btn btn-primary"
+            >
+              {isSubmitting ? 'Submitting...' : 'Submit Feedback'}
+            </button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
@@ -6,6 +6,7 @@ import {
   Permissions,
   EModelEndpoint,
 } from 'librechat-data-provider';
+import { useRecoilValue } from 'recoil';
 import type { ContextType } from '~/common';
 import ModelSelector from './Menus/Endpoints/ModelSelector';
 import { PresetsMenu, HeaderNewChat, OpenSidebar, IntegrationsButton } from './Menus';
@@ -17,7 +18,9 @@ import BookmarkMenu from './Menus/BookmarkMenu';
 import { TemporaryChat } from './TemporaryChat';
 import AddMultiConvo from './AddMultiConvo';
 import HeaderAgentSelect from './HeaderAgentSelect';
+import FeedbackButton from './FeedbackButton';
 import { mapEndpoints } from '~/utils';
+import store from '~/store';
 
 const defaultInterface = getConfigDefaults().interface;
 
@@ -28,6 +31,7 @@ export default function Header() {
   const assistantsMap = useAssistantsMapContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
   const { data: endpoints = [] } = useGetEndpointsQuery({ select: mapEndpoints });
+  const conversation = useRecoilValue(store.conversationByIndex(0));
 
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
@@ -102,6 +106,7 @@ export default function Header() {
           {hasAccessToMultiConvo === true && <AddMultiConvo />}
           {isSmallScreen && (
             <>
+              <FeedbackButton conversationId={conversation?.conversationId} />
               <ExportAndShareMenu
                 isSharedButtonEnabled={startupConfig?.sharedLinksEnabled ?? false}
               />
@@ -111,6 +116,7 @@ export default function Header() {
         </div>
         {!isSmallScreen && (
           <div className="flex items-center gap-2">
+            <FeedbackButton conversationId={conversation?.conversationId} />
             <ExportAndShareMenu
               isSharedButtonEnabled={startupConfig?.sharedLinksEnabled ?? false}
             />
diff --git a/client/src/components/ui/index.ts b/client/src/components/ui/index.ts
@@ -41,6 +41,7 @@ export { default as ThemeSelector } from './ThemeSelector';
 export { default as SelectDropDown } from './SelectDropDown';
 export { default as MultiSelectPop } from './MultiSelectPop';
 export { default as ModelParameters } from './ModelParameters';
+export { default as DialogTemplate } from './DialogTemplate';
 export { default as OGDialogTemplate } from './OGDialogTemplate';
 export { default as InputWithDropdown } from './InputWithDropDown';
 export { default as SelectDropDownPop } from './SelectDropDownPop';
diff --git a/packages/data-schemas/src/schema/enterpriseContact.ts b/packages/data-schemas/src/schema/enterpriseContact.ts
