fix: Feedback fixes (DSN-2527) (#306)

voiceflow · Nov 13, 2024 · 8626fa1 · 8626fa1
1 parent 4aaa0b8
commit 8626fa1
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 29 deletions.
diff --git a/packages/chat/src/components/AgentMessage/AgentMessage.story.tsx b/packages/chat/src/components/AgentMessage/AgentMessage.story.tsx
@@ -31,15 +31,15 @@ export const Small: Story = {
 export const AIGenerated: Story = {
   args: {
     text: SAMPLE_SLATE_TEXT as unknown as string,
-    aiGenerated: true,
+    ai: true,
     generatedMessage: 'Generated by AI, double-check for accuracy.',
   },
 };
 
 export const WithLink: Story = {
   args: {
     text: SAMPLE_SLATE_TEXT,
-    aiGenerated: true,
+    ai: true,
     generatedMessage: 'Generated by AI, double-check for accuracy.',
     children: (
       <>

diff --git a/packages/chat/src/components/AgentMessage/index.tsx b/packages/chat/src/components/AgentMessage/index.tsx
@@ -7,7 +7,11 @@ import Markdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import remarkGfm from 'remark-gfm';
 
+import { FeedbackButton } from '../FeedbackButton';
+import type { IFeedbackButton } from '../FeedbackButton/FeedbackButton.interface';
+import { FeedbackButtonVariant } from '../FeedbackButton/FeedbackButton.interface';
 import { Icon } from '../Icon';
+import { feedbackContainer } from '../SystemResponse/styles.css';
 import {
   aiIconModifier,
   codeBlockContainer,
@@ -23,15 +27,25 @@ import { CopyButton } from './CopyButton';
 interface IAgentMessage {
   text: string | Text.SlateTextValue;
   children?: React.ReactNode;
-  aiGenerated?: boolean;
+  ai?: boolean;
   generatedMessage?: string;
+  /**
+   * If provided, will display {@link FeedbackButton} component.
+   * @default false
+   */
+  feedback?: IFeedbackButton | undefined;
+
+  isLast?: boolean;
+
   debug?: boolean;
 }
 
 export const AgentMessage: React.FC<IAgentMessage> = ({
   text,
   children,
-  aiGenerated,
+  ai,
+  feedback,
+  isLast,
   generatedMessage = 'Generated by AI, double-check for accuracy.',
 }) => {
   const content = typeof text === 'string' ? text : serializeToMarkdown(text);
@@ -72,12 +86,20 @@ export const AgentMessage: React.FC<IAgentMessage> = ({
         }}
       />
       {children && <div className={embeddedContent}>{children}</div>}
-      {aiGenerated && (
+      {ai && (
         <div className={generatedChin}>
           <Icon svg="ai" className={aiIconModifier} />
           <span>{generatedMessage}</span>
         </div>
       )}
+      {feedback && (
+        <div className={feedbackContainer({ isLast })}>
+          <FeedbackButton
+            {...feedback}
+            variant={isLast ? FeedbackButtonVariant.LAST_RESPONSE : FeedbackButtonVariant.PREVIOUS_RESPONSE}
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/packages/chat/src/components/SystemResponse/SystemMessage.tsx b/packages/chat/src/components/SystemResponse/SystemMessage.tsx
@@ -11,12 +11,12 @@ import { Avatar } from '../Avatar';
 import { Card } from '../Card';
 import { Carousel } from '../Carousel';
 import { FeedbackButton } from '../FeedbackButton';
-import type { IFeedbackButton } from '../FeedbackButton/FeedbackButton.interface';
+import { type IFeedbackButton } from '../FeedbackButton/FeedbackButton.interface';
 import { Image } from '../Image';
 import { MessageType } from './constants';
 import { ExtensionMessage } from './ExtensionMessage';
 import EndState from './state/end';
-import { feedbackContainer, hide, messageContainer, responseAvatar, systemMessageContainer } from './styles.css';
+import { hide, messageContainer, responseAvatar, systemMessageContainer } from './styles.css';
 import type { MessageProps } from './types';
 
 export interface SystemMessageProps extends React.PropsWithChildren {
@@ -62,11 +62,11 @@ export interface SystemMessageProps extends React.PropsWithChildren {
  */
 export const SystemMessage: React.FC<SystemMessageProps> = ({
   avatar,
-  feedback,
   message,
+  feedback,
+  isLast,
   withImage,
   children,
-  isLast,
 }) => {
   const { config } = useContext(RuntimeStateAPIContext);
 
@@ -80,19 +80,16 @@ export const SystemMessage: React.FC<SystemMessageProps> = ({
       <div className={messageContainer}>
         {children ??
           match(message)
-            .with({ type: MessageType.TEXT }, ({ text, ai }) => <AgentMessage text={text} aiGenerated={ai} />)
+            .with({ type: MessageType.TEXT }, ({ text, ai }) => (
+              <AgentMessage text={text} ai={ai} feedback={feedback} isLast={isLast} />
+            ))
             .with({ type: MessageType.IMAGE }, ({ url }) => <Image image={url} mode={config.render?.mode} />)
             .with({ type: MessageType.CARD }, (props) => <Card {...R.omit(props, ['type'])} />)
             .with({ type: MessageType.CAROUSEL }, (props) => <Carousel {...R.omit(props, ['type'])} />)
             .with({ type: MessageType.EXTENSION }, ({ payload }) => (
               <ExtensionMessage extension={payload.extension} trace={payload.trace} />
             ))
             .otherwise(() => null)}
-        {feedback && (
-          <div className={feedbackContainer({ isLast })}>
-            <FeedbackButton {...feedback} />
-          </div>
-        )}
       </div>
     </div>
   );

diff --git a/packages/chat/src/components/SystemResponse/SystemResponse.story.tsx b/packages/chat/src/components/SystemResponse/SystemResponse.story.tsx
@@ -174,6 +174,16 @@ export const MultipleWithFeedback: Story = {
   },
 };
 
+export const MultipleWithFeedbackAI: Story = {
+  args: {
+    feedback: {
+      onClick: () => null,
+    },
+    isLast: true,
+    messages: [CARD, { ...TEXT_MESSAGE, ai: true }],
+  },
+};
+
 export const PreviousMultipleWithFeedback: Story = {
   args: {
     feedback: {

diff --git a/packages/chat/src/components/SystemResponse/index.tsx b/packages/chat/src/components/SystemResponse/index.tsx
@@ -7,10 +7,10 @@ import { useAutoScroll } from '@/hooks/useAutoScroll';
 import { Button } from '../Button';
 import { ButtonVariant } from '../Button/constants';
 import { FeedbackButton } from '../FeedbackButton';
-import type { IFeedbackButton } from '../FeedbackButton/FeedbackButton.interface';
+import { FeedbackButtonVariant, type IFeedbackButton } from '../FeedbackButton/FeedbackButton.interface';
 import { useAnimatedMessages } from './hooks';
 import Indicator from './Indicator/Indicator';
-import { actionsContainer, responseContainer } from './styles.css';
+import { actionsContainer, feedbackContainer, responseContainer } from './styles.css';
 import type { SystemMessageProps } from './SystemMessage';
 import { SystemMessage } from './SystemMessage';
 import type { MessageProps } from './types';
@@ -105,6 +105,14 @@ export const SystemResponse: React.FC<SystemResponseProps> = ({
           key={index}
         />
       ))}
+      {feedback && complete && isLast && (
+        <div className={feedbackContainer({ isLast })}>
+          <FeedbackButton
+            {...feedback}
+            variant={isLast ? FeedbackButtonVariant.LAST_RESPONSE : FeedbackButtonVariant.PREVIOUS_RESPONSE}
+          />
+        </div>
+      )}
       {isLast && complete && !!actions.length && (
         <div className={actionsContainer}>
           {actions.map(({ request, name }, index) => (
@@ -114,7 +122,6 @@ export const SystemResponse: React.FC<SystemResponseProps> = ({
           ))}
         </div>
       )}
-
       {showIndicator && <Indicator avatar={avatar} />}
     </div>
   );

diff --git a/packages/chat/src/components/SystemResponse/styles.css.ts b/packages/chat/src/components/SystemResponse/styles.css.ts
@@ -35,6 +35,7 @@ export const systemMessageContainer = recipe({
 export const responseContainer = recipe({
   base: {
     display: 'block',
+    position: 'relative',
   },
   variants: {
     first: {
@@ -78,18 +79,23 @@ export const extensionMessageContainer = style({
 export const feedbackContainer = recipe({
   base: {
     marginTop: 6,
-    position: 'absolute',
+    zIndex: 1,
     transition: transition(['opacity']),
+    animation: `${fadeInSlideUp} .2s ease-in`,
   },
   variants: {
     isLast: {
       true: {
         opacity: 1,
+        marginLeft: MESSAGE_PADDING + SMALL_AVATAR_SIZE,
       },
       false: {
         opacity: 0,
+        position: 'absolute',
+        right: '-24px',
+        bottom: '-14px',
         selectors: {
-          [`${systemMessageContainer()}:hover &`]: {
+          [`${responseContainer()}:hover &`]: {
             opacity: 1,
           },
         },

diff --git a/packages/chat/src/views/ChatWindow/index.tsx b/packages/chat/src/views/ChatWindow/index.tsx
@@ -44,6 +44,9 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile }) => {
 
   if (!palette) return null;
 
+  // eslint-disable-next-line no-console
+  console.log({ assistant });
+
   return (
     <div style={assignInlineVars(PALETTE, { colors: palette })} className={chatWindow({ mobile: isMobile })}>
       <NewChat
@@ -83,15 +86,11 @@ export const ChatWindow: React.FC<ChatWindowProps> = ({ isMobile }) => {
                 {...R.omit(props, ['type'])}
                 avatar={assistant.avatar}
                 isFirst={turnIndex === 0}
-                feedback={
-                  assistant.feedback
-                    ? {
-                        onClick: (feedback: FeedbackName) => {
-                          runtime.feedback(feedback, props.messages, getPreviousUserTurn(turnIndex));
-                        },
-                      }
-                    : undefined
-                }
+                feedback={{
+                  onClick: (feedback: FeedbackName) => {
+                    runtime.feedback(feedback, props.messages, getPreviousUserTurn(turnIndex));
+                  },
+                }}
                 isLast={turnIndex === state.session.turns.length - 1}
               />
             ))