-
+>(function ConversationBubble(
+ { message, type, className, feedback, handleFeedback },
+ ref,
+) {
+ const [showFeedback, setShowFeedback] = useState(false);
+ const [overriddenFeedback, setOverriddenFeedback] = useState<
+ FEEDBACK | undefined
+ >(undefined);
+ const effectiveFeedback = overriddenFeedback ?? feedback;
+ let bubble;
+
+ if (type === 'QUESTION') {
+ bubble = (
+
+ );
+ } else {
+ bubble = (
setShowFeedback(true)}
+ onMouseLeave={() => setShowFeedback(false)}
>
- {type === 'ERROR' && (
-
![alert]({Alert})
- )}
-
{message}
+
+
+ {type === 'ERROR' && (
+
![alert]({Alert})
+ )}
+
{message}
+
+
+ setOverriddenFeedback('LIKE')}
+ >
+
+
+ setOverriddenFeedback('DISLIKE')}
+ >
+
-
- );
+ );
+ }
+ return bubble;
});
export default ConversationBubble;
-
-// TODO : split question and answer into two diff JSX
diff --git a/frontend/svg.d.ts b/frontend/svg.d.ts
new file mode 100644
index 0000000..6326494
--- /dev/null
+++ b/frontend/svg.d.ts
@@ -0,0 +1,7 @@
+declare module '*.svg' {
+ import * as React from 'react';
+
+ export const ReactComponent: React.FunctionComponent<
+ React.SVGProps