@memori.ai/memori-react 7.1.2 → 7.2.0

package/src/components/ChatBubble/ChatBubble.css

@@ -101,7 +101,7 @@
     }
 }
 
-.memori-chat--bubble p + p {
+.memori-chat--bubble p+p {
     margin-top: 0.5em;
 }
 
@@ -148,18 +148,18 @@
     margin-left: auto;
 }
 
-.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon {
+.memori-chat--bubble .memori-chat--bubble-action-icon {
     display: flex;
     justify-content: flex-end;
     padding: 0;
     text-align: right;
 }
 
-.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
     padding: 3px;
 }
 
-.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon svg {
+.memori-chat--bubble .memori-chat--bubble-action-icon svg {
     overflow: visible;
     width: 1rem;
     height: 1rem;
@@ -182,16 +182,20 @@
     color: #333;
 }
 
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai svg {
+    width: 0.85rem;
+    height: 0.85rem;
+}
+
+.memori-chat--bubble-addon button.memori-chat--bubble-action-icon {
+    padding: 2.5px;
+}
+
 .memori-chat--bubble-addon .memori-chat--feedback button .memori-button--icon svg {
     width: 0.9rem;
     height: 0.9rem;
 }
 
-.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai svg {
-    width: 0.85rem;
-    height: 0.85rem;
-}
-
 .memori-chat--bubble-addon-separator {
     width: 1px;
     height: 1.5em;
@@ -262,6 +266,7 @@
 }
 
 @keyframes wave {
+
     0%,
     60%,
     100% {
@@ -279,4 +284,4 @@
 
 .memori-chat--bubble mjx-container[jax='CHTML'][display='true'] {
     text-align: left;
-}
+}

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -79,6 +79,17 @@ Initial.args = {
   },
 };
 
+export const CopyDisabled = Template.bind({});
+CopyDisabled.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+  },
+  showCopyButton: false,
+};
+
 export const GeneratedByAI = Template.bind({});
 GeneratedByAI.args = {
   memori,

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -57,6 +57,22 @@ it('renders ChatBubble with user msg unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders ChatBubble with copy disabled unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: false,
+        text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      }}
+      showCopyButton={false}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders ChatBubble with msg generated by AI unchanged', () => {
   const { container } = render(
     <ChatBubble

package/src/components/ChatBubble/ChatBubble.tsx

@@ -20,7 +20,10 @@ import DOMPurify from 'dompurify';
 import { cleanUrl } from '../../helpers/utils';
 import Button from '../ui/Button';
 import QuestionHelp from '../icons/QuestionHelp';
+import Copy from '../icons/Copy';
+import Code from '../icons/Code';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
+import { stripEmojis, escapeHTML, stripMarkdown } from '../../helpers/utils';
 
 import markedLinkifyIt from 'marked-linkify-it';
 import markedKatex from 'marked-katex-extension';
@@ -35,6 +38,7 @@ export interface Props {
   apiUrl?: string;
   showFeedback?: boolean;
   showWhyThisAnswer?: boolean;
+  showCopyButton?: boolean;
   simulateUserPrompt?: (msg: string) => void;
   showAIicon?: boolean;
   isFirst?: boolean;
@@ -81,6 +85,7 @@ const ChatBubble: React.FC<Props> = ({
   sessionID,
   showFeedback,
   showWhyThisAnswer = true,
+  showCopyButton = true,
   simulateUserPrompt,
   showAIicon = true,
   isFirst = false,
@@ -126,6 +131,12 @@ const ChatBubble: React.FC<Props> = ({
         .replace(/<p><\/p>/g, '<br>')
         .replace(/<p><br><\/p>/g, '<br>');
 
+  const plainText = message.fromUser
+    ? message.translatedText || message.text
+    : escapeHTML(
+        stripMarkdown(stripEmojis(message.translatedText || message.text))
+      );
+
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {
       // @ts-ignore
@@ -228,6 +239,7 @@ const ChatBubble: React.FC<Props> = ({
           className={cx('memori-chat--bubble', {
             'memori-chat--user-bubble': !!message.fromUser,
             'memori-chat--with-addon':
+              (!message.fromUser && showCopyButton) ||
               (message.generatedByAI && showAIicon) ||
               (showFeedback && simulateUserPrompt),
             'memori-chat--ai-generated': message.generatedByAI && showAIicon,
@@ -249,9 +261,35 @@ const ChatBubble: React.FC<Props> = ({
             className="memori-chat--bubble-content"
             dangerouslySetInnerHTML={{ __html: renderedText }}
           />
-          {((message.generatedByAI && showAIicon) ||
+          {((!message.fromUser && showCopyButton) ||
+            (message.generatedByAI && showAIicon) ||
             (showFeedback && simulateUserPrompt)) && (
             <div className="memori-chat--bubble-addon">
+              {!message.fromUser && showCopyButton && (
+                <Button
+                  ghost
+                  shape="circle"
+                  title={t('copy') || 'Copy'}
+                  className="memori-chat--bubble-action-icon"
+                  icon={<Copy aria-label={t('copy') || 'Copy'} />}
+                  onClick={() => navigator.clipboard.writeText(plainText)}
+                />
+              )}
+              {!message.fromUser &&
+                showCopyButton &&
+                plainText !== message.text && (
+                  <Button
+                    ghost
+                    shape="circle"
+                    title={t('copyRawCode') || 'Copy raw code'}
+                    className="memori-chat--bubble-action-icon"
+                    icon={
+                      <Code aria-label={t('copyRawCode') || 'Copy raw code'} />
+                    }
+                    onClick={() => navigator.clipboard.writeText(message.text)}
+                  />
+                )}
+
               {showFeedback && !!simulateUserPrompt && (
                 <FeedbackButtons
                   memori={memori}