feat: add custom message component as prop

package-dist/AIMessageTrendsFunnels.d.ts

@@ -1,7 +1,8 @@
 import { BaseMessage } from './ChatScreenPA';
 
-export declare function AIMessageTrendsFunnels<T extends BaseMessage>({ index, messages, handleRegenerateResponse, }: {
+export declare function AIMessageTrendsFunnels<T extends BaseMessage>({ index, messages, showMessageActionCard, handleRegenerateResponse, }: {
     index: number;
     messages: T[];
+    showMessageActionCard?: boolean;
     handleRegenerateResponse: (userQuery: string, regenerateResponse?: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package-dist/ChatScreenPA.d.ts

@@ -1,11 +1,25 @@
+import { ReactNode } from 'react';
+
 export interface BaseMessage {
     content: any;
-    type: string;
+    type: 'ai' | 'human';
+}
+export interface CustomMessageComponentProp<T> {
+    type: 'ai' | 'human';
+    component: ({ index, message, handleSendFollowupMessage, }: {
+        message: T;
+        index?: number;
+        handleSendFollowupMessage?: (userQuery: string, regenerateResponse?: boolean) => void;
+    }) => ReactNode;
 }
 export interface ChatScreenPAProps<T> {
     messages: T[];
     handleSendFollowupMessage: (userQuery: string, regenerateResponse?: boolean) => void;
     isMessageLoading: boolean;
     setMessages: React.Dispatch<React.SetStateAction<T[]>>;
+    showMessageActionCard?: boolean;
+    hideActionCardItems?: ('copy' | 'regenerate')[];
+    customMessageComponent?: CustomMessageComponentProp<T>;
+    customMessageActionCardItem?: ReactNode[];
 }
-export declare function ChatScreenPA<T extends BaseMessage>({ messages, handleSendFollowupMessage, isMessageLoading, setMessages, }: ChatScreenPAProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ChatScreenPA<T extends BaseMessage>({ messages, handleSendFollowupMessage, isMessageLoading, setMessages, showMessageActionCard, hideActionCardItems, customMessageComponent, customMessageActionCardItem, }: ChatScreenPAProps<T>): import("react/jsx-runtime").JSX.Element;

package-dist/MessageActionCard.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BaseMessage } from './ChatScreenPA';
+
+export default function MessageActionCard<T extends BaseMessage>({ index, messages, handleRegenerateResponse, hideActionCardItems, customMessageActionCardItem, }: {
+    index: number;
+    messages: T[];
+    handleRegenerateResponse: (userQuery: string, regenerateResponse?: boolean) => void;
+    hideActionCardItems?: ('copy' | 'regenerate')[];
+    customMessageActionCardItem?: ReactNode[];
+}): import("react/jsx-runtime").JSX.Element;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-gallery",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "package-dist"

src/components/AIMessageTrendsFunnels.tsx

@@ -1,49 +1,49 @@
-import { Button, Card, Flex, Image, Typography } from "antd";
+import { Flex, Image, Typography } from 'antd';
 
-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";
+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';
+import MessageActionCard from './MessageActionCard';
 
 export function AIMessageTrendsFunnels<T extends BaseMessage>({
   index,
   messages,
+  showMessageActionCard,
   handleRegenerateResponse,
 }: {
   index: number;
   messages: T[];
+  showMessageActionCard?: boolean;
   handleRegenerateResponse: (
     userQuery: string,
-    regenerateResponse?: boolean
+    regenerateResponse?: boolean,
   ) => void;
 }) {
   const content = messages[index]?.content;
-  const isLastMessage = messages?.length - 1 === index;
-  const [isCopied, setIsCopied] = useState(false);
 
   const aiChatMessage = () => {
     const responseType = content?.query_response?.type;
     const data = content?.query_response?.data;
     const queryConfiguration = content?.query_configuration;
 
     switch (responseType) {
-      case "text":
+      case 'text':
         return (
           <Typography>
             <Markdown>{data}</Markdown>
           </Typography>
         );
-      case "trend":
+      case 'trend':
         return (
           <Trends
             chartResponse={content.query_response}
             queryConfiguration={queryConfiguration}
           />
         );
-      case "funnel":
+      case 'funnel':
         return (
           <Funnels
             chartResponse={content.query_response}
@@ -59,31 +59,9 @@ export function AIMessageTrendsFunnels<T extends BaseMessage>({
     }
   };
 
-  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%" }}
+      style={{ width: '90%' }}
       align="flex-start"
       gap={8}
       className="ai-message-wrapper"
@@ -93,74 +71,28 @@ export function AIMessageTrendsFunnels<T extends BaseMessage>({
         height={40}
         width={40}
         style={{
-          height: "2rem",
-          width: "2rem",
+          height: '2rem',
+          width: '2rem',
         }}
         preview={false}
       />
 
       <Flex
         vertical
         style={{
-          width: "100%",
+          width: '100%',
         }}
         gap={14}
       >
         {aiChatMessage()}
 
-        {isLastMessage && (
-          <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>
+        {showMessageActionCard && (
+          <MessageActionCard<T>
+            key={index}
+            index={index}
+            messages={messages}
+            handleRegenerateResponse={handleRegenerateResponse}
+          />
         )}
       </Flex>
     </Flex>