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")}
+ />
+
+
+
+
+ >
);
};