diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx index 6e7185ad5c..8ace0aa248 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx @@ -1,6 +1,7 @@ import { UserIcon } from "lucide-react"; import Link from "next/link"; import { useState } from "react"; +import formbricks from "@formbricks/js/app"; import { getPersonIdentifier } from "@formbricks/lib/person/utils"; import { timeSince } from "@formbricks/lib/time"; import { TAttributeClass } from "@formbricks/types/attribute-classes"; @@ -28,6 +29,8 @@ interface OpenTextSummaryProps { survey: TSurvey; attributeClasses: TAttributeClass[]; isAiEnabled: boolean; + productId: string; + productName: string; } export const OpenTextSummary = ({ @@ -36,6 +39,8 @@ export const OpenTextSummary = ({ survey, attributeClasses, isAiEnabled, + productId, + productName, }: OpenTextSummaryProps) => { const [visibleResponses, setVisibleResponses] = useState(10); const [activeTab, setActiveTab] = useState<"insights" | "responses">( @@ -65,6 +70,22 @@ export const OpenTextSummary = ({ }, ]; + const handleFeedback = (feedback: "positive" | "negative") => { + formbricks.track("Insight Feedback", { + hiddenFields: { + feedbackSentiment: feedback, + productId, + productName, + surveyId: survey.id, + surveyName: survey.name, + insightId: currentInsight?.id, + insightCategory: currentInsight?.category, + questionId: questionSummary.question.id, + environmentId, + }, + }); + }; + return (
{isAiEnabled && (
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx index 89b5f0c858..b479580be2 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList.tsx @@ -40,6 +40,7 @@ interface SummaryListProps { totalResponseCount: number; attributeClasses: TAttributeClass[]; isAiEnabled: boolean; + productName: string; } export const SummaryList = ({ @@ -50,6 +51,7 @@ export const SummaryList = ({ totalResponseCount, attributeClasses, isAiEnabled, + productName, }: SummaryListProps) => { const { setSelectedFilter, selectedFilter } = useResponseFilter(); const widgetSetupCompleted = @@ -134,6 +136,8 @@ export const SummaryList = ({ survey={survey} attributeClasses={attributeClasses} isAiEnabled={isAiEnabled} + productId={environment.productId} + productName={productName} /> ); } diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx index 03a223a642..31900435cb 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage.tsx @@ -48,6 +48,7 @@ interface SummaryPageProps { totalResponseCount: number; attributeClasses: TAttributeClass[]; isAiEnabled: boolean; + productName: string; } export const SummaryPage = ({ @@ -58,6 +59,7 @@ export const SummaryPage = ({ totalResponseCount, attributeClasses, isAiEnabled, + productName, }: SummaryPageProps) => { const params = useParams(); const sharingKey = params.sharingKey as string; @@ -177,6 +179,7 @@ export const SummaryPage = ({ totalResponseCount={totalResponseCount} attributeClasses={attributeClasses} isAiEnabled={isAiEnabled} + productName={productName} /> ); diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx index 5fcd47b446..57ec0933ac 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page.tsx @@ -100,6 +100,7 @@ const Page = async ({ params }) => { totalResponseCount={totalResponseCount} attributeClasses={attributeClasses} isAiEnabled={isAiEnabled} + productName={product.name} /> ); diff --git a/packages/ui/components/InsightSheet/index.tsx b/packages/ui/components/InsightSheet/index.tsx index d3be022426..c71f85adec 100644 --- a/packages/ui/components/InsightSheet/index.tsx +++ b/packages/ui/components/InsightSheet/index.tsx @@ -1,5 +1,6 @@ "use client"; +import { ThumbsDownIcon, ThumbsUpIcon } from "lucide-react"; import { useEffect, useState } from "react"; import Markdown from "react-markdown"; import { getFormattedErrorMessage } from "@formbricks/lib/actionClient/helper"; @@ -8,7 +9,7 @@ import { TDocument } from "@formbricks/types/documents"; import { TInsight } from "@formbricks/types/insights"; import { Badge } from "../Badge"; import { Card, CardContent, CardFooter } from "../Card"; -import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../Sheet"; +import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../Sheet"; import { getDocumentsByInsightIdSurveyIdQuestionIdAction } from "./actions"; interface InsightSheetProps { @@ -17,9 +18,17 @@ interface InsightSheetProps { insight: TInsight | null; surveyId: string; questionId: string; + handleFeedback: (feedback: "positive" | "negative") => void; } -export const InsightSheet = ({ isOpen, setIsOpen, insight, surveyId, questionId }: InsightSheetProps) => { +export const InsightSheet = ({ + isOpen, + setIsOpen, + insight, + surveyId, + questionId, + handleFeedback, +}: InsightSheetProps) => { const [documents, setDocuments] = useState([]); useEffect(() => { @@ -49,22 +58,31 @@ export const InsightSheet = ({ isOpen, setIsOpen, insight, surveyId, questionId if (!insight) { return null; } + + const handleFeedbackClick = (feedback: "positive" | "negative") => { + setIsOpen(false); + handleFeedback(feedback); + }; + return ( - setIsOpen(v)}> - - - - {insight.title} - {insight.category === "complaint" ? ( - - ) : insight.category === "featureRequest" ? ( - - ) : insight.category === "praise" ? ( - - ) : null} - - {insight.description} -
+ <> + setIsOpen(v)}> + + + + {insight.title} + {insight.category === "complaint" ? ( + + ) : insight.category === "featureRequest" ? ( + + ) : insight.category === "praise" ? ( + + ) : null} + + {insight.description} + + +
{documents.map((document) => ( @@ -86,8 +104,22 @@ export const InsightSheet = ({ isOpen, setIsOpen, insight, surveyId, questionId ))}
- -
-
+ + +
+

Did you find this insight helpful?

+ handleFeedbackClick("positive")} + /> + handleFeedbackClick("negative")} + /> +
+
+ + + ); };