Adding markdown in AI Message and Copy response

package.json

@@ -34,6 +34,7 @@
     "echarts-for-react": "^3.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "use-context-selector": "^2.0.0",
     "vite-plugin-dts": "^3.9.1"
   },

src/components/AIMessageTrendsFunnels.tsx

@@ -1,6 +1,9 @@
-import { Button, Flex, Image, Tooltip, Typography } from "antd";
+import { Button, Card, Flex, Image, Typography } from "antd";
 
-import { ArrowsClockwise } from "@phosphor-icons/react";
+import { ArrowClockwise, CheckCircle, Clipboard } from "@phosphor-icons/react";
+import { useState } from "react";
+import Markdown from "react-markdown";
+import "../customStyles.css";
 import { Funnels } from "./charts/Funnels";
 import { Trends } from "./charts/Trends";
 import { BaseMessage } from "./ChatScreenPA";
@@ -19,6 +22,7 @@ export function AIMessageTrendsFunnels<T extends BaseMessage>({
 }) {
   const content = messages[index]?.content;
   const isLastMessage = messages?.length - 1 === index;
+  const [isCopied, setIsCopied] = useState(false);
 
   const aiChatMessage = () => {
     const responseType = content?.query_response?.type;
@@ -27,7 +31,11 @@ export function AIMessageTrendsFunnels<T extends BaseMessage>({
 
     switch (responseType) {
       case "text":
-        return data;
+        return (
+          <Typography>
+            <Markdown>{data}</Markdown>
+          </Typography>
+        );
       case "trend":
         return (
           <Trends
@@ -43,12 +51,43 @@ export function AIMessageTrendsFunnels<T extends BaseMessage>({
           />
         );
       default:
-        return "I am not sure how to respond to that, can you please click the regenerate button and try again?";
+        return (
+          <Typography>
+            I am not sure how to respond to that, can you please try again?
+          </Typography>
+        );
     }
   };
 
+  const handleCopyToClipboard = () => {
+    let toBeSavedContent = "";
+
+    const responseType = content?.query_response?.type;
+    const data = content?.query_response?.data;
+
+    if (responseType === "text") {
+      toBeSavedContent = data;
+    } else if (responseType === "trend" || responseType === "funnel") {
+      toBeSavedContent = content?.query_response?.summary || "";
+    } else {
+      toBeSavedContent =
+        "I am not sure how to respond to that, can you please try again?";
+    }
+
+    navigator.clipboard.writeText(toBeSavedContent);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+  };
+
   return (
-    <Flex style={{ width: "90%" }} align="flex-start" gap={8}>
+    <Flex
+      style={{ width: "90%" }}
+      align="flex-start"
+      gap={8}
+      className="ai-message-wrapper"
+    >
       <Image
         src="/ai-icon.svg"
         height={40}
@@ -63,31 +102,65 @@ export function AIMessageTrendsFunnels<T extends BaseMessage>({
       <Flex
         vertical
         style={{
-          maxWidth: "100%",
+          width: "100%",
         }}
-        gap={2}
-        align="flex-end"
+        gap={14}
       >
-        <Flex
-          style={{
-            borderTopLeftRadius: 0,
-          }}
-        >
-          <Typography>{aiChatMessage()}</Typography>
-        </Flex>
+        {aiChatMessage()}
+
         {isLastMessage && (
-          <Tooltip title="Regenerate" placement="bottom">
-            <Button
-              onClick={() => {
-                handleRegenerateResponse(
-                  messages[messages.length - 2]?.content || ("" as string),
-                  true
-                );
-              }}
-              type="text"
-              icon={<ArrowsClockwise size={16} />}
-            />
-          </Tooltip>
+          <Card
+            className="ai-message-actions"
+            size="small"
+            style={{
+              width: "max-content",
+              backgroundColor: "var(--background)",
+              alignSelf: "flex-end",
+            }}
+            styles={{
+              body: {
+                padding: 3,
+              },
+            }}
+          >
+            <Flex>
+              <Button
+                size="small"
+                onClick={handleCopyToClipboard}
+                type="text"
+                icon={
+                  isCopied ? (
+                    <CheckCircle size={"0.7rem"} />
+                  ) : (
+                    <Clipboard size={"0.7rem"} />
+                  )
+                }
+                style={{
+                  fontSize: "0.7rem",
+                  color: "var(--secondary-text)",
+                }}
+              >
+                Copy
+              </Button>
+              <Button
+                size="small"
+                onClick={() => {
+                  handleRegenerateResponse(
+                    messages[messages.length - 2]?.content || ("" as string),
+                    true
+                  );
+                }}
+                type="text"
+                icon={<ArrowClockwise size={"0.7rem"} />}
+                style={{
+                  fontSize: "0.7rem",
+                  color: "var(--secondary-text)",
+                }}
+              >
+                Retry
+              </Button>
+            </Flex>
+          </Card>
         )}
       </Flex>
     </Flex>

src/components/WelcomeScreen.tsx

@@ -88,7 +88,6 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({
           <Typography.Text
             style={{
               marginTop: 0,
-              fontFamily: "Sedan",
             }}
             type="secondary"
           >

src/components/charts/Funnels.tsx

@@ -1,6 +1,7 @@
 import { Card, Flex, Typography } from "antd";
 import ReactECharts from "echarts-for-react";
 
+import Markdown from "react-markdown";
 import { useThemeManager } from "../useThemeManager";
 import getFunnelsChartOptions from "./getFunnelsChartOptions";
 
@@ -20,7 +21,13 @@ export function Funnels({
   });
 
   return (
-    <Flex vertical gap={16}>
+    <Flex
+      vertical
+      gap={16}
+      style={{
+        width: "100%",
+      }}
+    >
       <Card
         size="small"
         style={{
@@ -38,7 +45,9 @@ export function Funnels({
           opts={{ renderer: "canvas" }}
         />
       </Card>
-      <Typography>{chartResponse.summary}</Typography>
+      <Typography>
+        <Markdown>{chartResponse.summary}</Markdown>
+      </Typography>
     </Flex>
   );
 }

src/components/charts/Trends.tsx

@@ -1,5 +1,6 @@
 import { Card, Flex, Typography } from "antd";
 import ReactECharts from "echarts-for-react";
+import Markdown from "react-markdown";
 import { useThemeManager } from "../useThemeManager";
 import { getTrendsChartOptions } from "./getTrendsChartOptions";
 
@@ -19,7 +20,13 @@ export function Trends({
   });
 
   return (
-    <Flex vertical gap={16}>
+    <Flex
+      vertical
+      gap={16}
+      style={{
+        width: "100%",
+      }}
+    >
       <Card
         size="small"
         style={{
@@ -37,7 +44,9 @@ export function Trends({
           opts={{ renderer: "canvas" }}
         />
       </Card>
-      <Typography>{chartResponse.summary}</Typography>
+      <Typography>
+        <Markdown>{chartResponse.summary}</Markdown>
+      </Typography>
     </Flex>
   );
 }

src/customStyles.css

@@ -64,3 +64,12 @@ body {
     transform: rotate(360deg);
   }
 }
+
+.ai-message-actions {
+  opacity: 0;
+  transition: 0.2s ease-in-out;
+}
+
+.ai-message-wrapper:hover .ai-message-actions {
+  opacity: 1;
+}

src/stories/ChatScreenPA.stories.ts

@@ -35,7 +35,14 @@ export const TextResponse: Story = {
         type: "user",
       },
       {
-        content: "Hey",
+        content: {
+          query_configuration: null,
+          query_response: {
+            data: "Hello! How can I assist you with your product usage data today? I can help you analyze trends and funnels related to your product events. Do you have any specific events or sequences of events in mind?",
+            summary: "",
+            type: "efwoei",
+          },
+        },
         type: "ai",
       },
     ],