From 8223dc763de99d22d65637652c3609133e6acc1b Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Wed, 30 Oct 2024 11:55:47 -0700
Subject: [PATCH] add regeneration clarity (#2986)

* add regeneration clarity

* minor udpate
---
 web/src/app/chat/RegenerateOption.tsx |  5 +++--
 web/src/app/chat/message/Messages.tsx | 30 ++++++++++++++++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/src/app/chat/RegenerateOption.tsx b/web/src/app/chat/RegenerateOption.tsx
index 8a9234b0a23..606f5ed589d 100644
--- a/web/src/app/chat/RegenerateOption.tsx
+++ b/web/src/app/chat/RegenerateOption.tsx
@@ -16,6 +16,7 @@ import { Hoverable } from "@/components/Hoverable";
 import { Popover } from "@/components/popover/Popover";
 import { StarFeedback } from "@/components/icons/icons";
 import { IconType } from "react-icons";
+import { FiRefreshCw } from "react-icons/fi";
 
 export function RegenerateDropdown({
   options,
@@ -68,7 +69,7 @@ export function RegenerateDropdown({
                 py-1.5 
                 "
       >
-        Pick a model
+        Regenerate with
       </p>
       {options.map((option, ind) => {
         const isSelected = option.value === selected;
@@ -92,7 +93,7 @@ export function RegenerateDropdown({
       content={
         <div onClick={() => toggleDropdownVisible(!isOpen)}>
           {!alternate ? (
-            <Hoverable size={16} icon={StarFeedback as IconType} />
+            <Hoverable size={16} icon={FiRefreshCw as IconType} />
           ) : (
             <Hoverable
               size={16}
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index 181e00845ee..8526be1b922 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -299,7 +299,9 @@ export const AIMessage = ({
       className={"py-5 ml-4 px-5 relative flex "}
     >
       <div
-        className={`mx-auto ${shared ? "w-full" : "w-[90%]"}  max-w-message-max`}
+        className={`mx-auto ${
+          shared ? "w-full" : "w-[90%]"
+        }  max-w-message-max`}
       >
         <div className={`desktop:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}>
           <div className="flex">
@@ -545,9 +547,21 @@ export const AIMessage = ({
                         className={`
                         absolute -bottom-5
                         z-10
-                        invisible ${(isHovering || isRegenerateHovered || settings?.isMobile) && "!visible"}
-                        opacity-0 ${(isHovering || isRegenerateHovered || settings?.isMobile) && "!opacity-100"}
-                        translate-y-2 ${(isHovering || settings?.isMobile) && "!translate-y-0"}
+                        invisible ${
+                          (isHovering ||
+                            isRegenerateHovered ||
+                            settings?.isMobile) &&
+                          "!visible"
+                        }
+                        opacity-0 ${
+                          (isHovering ||
+                            isRegenerateHovered ||
+                            settings?.isMobile) &&
+                          "!opacity-100"
+                        }
+                        translate-y-2 ${
+                          (isHovering || settings?.isMobile) && "!translate-y-0"
+                        }
                         transition-transform duration-300 ease-in-out 
                         flex md:flex-row gap-x-0.5 bg-background-125/40 -mx-1.5 p-1.5 rounded-lg
                         `}
@@ -703,9 +717,7 @@ export const HumanMessage = ({
   }, [isEditing]);
 
   const handleEditSubmit = () => {
-    if (editedContent.trim() !== content.trim()) {
-      onEdit?.(editedContent);
-    }
+    onEdit?.(editedContent);
     setIsEditing(false);
   };
 
@@ -721,7 +733,9 @@ export const HumanMessage = ({
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
-        className={`text-user-text mx-auto ${shared ? "w-full" : "w-[90%]"} max-w-[790px]`}
+        className={`text-user-text mx-auto ${
+          shared ? "w-full" : "w-[90%]"
+        } max-w-[790px]`}
       >
         <div className="xl:ml-8">
           <div className="flex flex-col mr-4">