feat: add chat message feedback button

memori-ai · Jan 4, 2023 · e74b391 · e74b391
1 parent da76587
commit e74b391
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/src/components/Chat/Chat.css b/src/components/Chat/Chat.css
@@ -115,3 +115,18 @@
 .memori-chat--known-tag {
     margin-right: 0.5rem;
 }
+
+.memori-chat--feedback {
+    padding: 0 3.5rem;
+    margin-bottom: 0.5em;
+}
+
+.memori-chat--feedback button {
+    opacity: 0.4;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.memori-chat--feedback button:hover,
+.memori-chat--feedback button:focus {
+    opacity: 1;
+}
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -13,6 +13,7 @@ import MediaWidget from '../MediaWidget/MediaWidget';
 import Button from '../ui/Button';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import ChatInputs from '../ChatInputs/ChatInputs';
+import Tooltip from '../ui/Tooltip';
 
 import './Chat.css';
 
@@ -222,6 +223,37 @@ const Chat: React.FC<Props> = ({
                     )}
                   </div>
                 )}
+              {index === history.length - 1 &&
+                dialogState?.state === 'R1' &&
+                !!dialogState?.lastMatchedMemoryID &&
+                dialogState?.confidenceLevel === 'HIGH' && (
+                  <div className="memori-chat--feedback">
+                    <Tooltip
+                      content={
+                        memori.culture === 'it-IT'
+                          ? 'Non è quello che ti ho chiesto'
+                          : memori.culture === 'fr-FR'
+                          ? "Ce n'est pas ce que je t'ai demandé"
+                          : "It's not what I asked"
+                      }
+                    >
+                      <Button
+                        ghost
+                        shape="circle"
+                        onClick={() =>
+                          simulateUserPrompt(
+                            memori.culture === 'it-IT'
+                              ? 'Non è quello che ti ho chiesto'
+                              : memori.culture === 'fr-FR'
+                              ? "Ce n'est pas ce que je t'ai demandé"
+                              : "It's not what I asked"
+                          )
+                        }
+                        icon={'🤔'}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
 
               <MediaWidget
                 simulateUserPrompt={simulateUserPrompt}