AI Summaries + first Step Superhuman

2026-03-27 09:52:48 -05:00 · 2023-02-15 17:27:45 +01:00
parent ea15e662bf
commit 81da4ea5c8
3 changed files with 155 additions and 21 deletions
--- a/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
+++ b/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 import FilterNavigation from "../shared/FilterNavigation";
+import { BrainIcon, Button } from "@formbricks/ui";

 const limitFields = ["role"];

@@ -98,29 +99,38 @@ export default function SegmentResults() {
                </EmptyPageFiller>
              ) : (
                <>
-                  <div className="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
-                    <div className="flex flex-col items-center justify-center rounded-lg bg-white p-2 shadow-sm">
-                      <h3 className="text-sm font-medium text-slate-800">All</h3>
-                      <h3 className="text-xs font-light text-slate-800">
-                        ({submissions.length} submissions)
-                      </h3>
-                      <Pie submissions={submissions} schema={form.schema} fieldName={"disappointment"} />
-                    </div>
-                    <div className="flex flex-col items-center justify-center rounded-lg bg-white p-2 shadow-sm">
-                      <h3 className="text-sm font-medium text-slate-800">Most disappointed segment</h3>
-                      <h3 className="text-xs font-light text-slate-800">
-                        ({filteredSubmissions.length} submissions)
-                      </h3>
-                      <Pie
-                        submissions={filteredSubmissions}
-                        schema={form.schema}
-                        fieldName={"disappointment"}
-                      />
+                  <div className="mb-4 rounded-lg bg-white p-6 shadow-sm">
+                    <h2 className="my-4 text-xl font-bold text-slate-600">Step 1: Find happiest users</h2>
+                    <p className="mb-6 pr-3 text-slate-800">
+                      To separate signal from noise, you only look at the feedback from the segment with the
+                      highest &apos;very disappointed&apos; score. These are your happiest users. Your
+                      happiest users are most likely to be long-term customers:
+                    </p>
+
+                    <div className="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+                      <div className="flex flex-col items-center justify-center rounded-lg bg-slate-50 p-2 shadow-sm">
+                        <h3 className="text-sm font-medium text-slate-800">All</h3>
+                        <h3 className="text-xs font-light text-slate-800">
+                          ({submissions.length} submissions)
+                        </h3>
+                        <Pie submissions={submissions} schema={form.schema} fieldName={"disappointment"} />
+                      </div>
+                      <div className="flex flex-col items-center justify-center rounded-lg bg-slate-50 p-2 shadow-sm">
+                        <h3 className="text-sm font-medium text-slate-800">Most disappointed segment</h3>
+                        <h3 className="text-xs font-light text-slate-800">
+                          ({filteredSubmissions.length} submissions)
+                        </h3>
+                        <Pie
+                          submissions={filteredSubmissions}
+                          schema={form.schema}
+                          fieldName={"disappointment"}
+                        />
+                      </div>
                    </div>
                  </div>
                  <div className="mb-4 rounded-lg bg-white p-6 shadow-sm">
                    <h2 className="my-4 text-xl font-bold text-slate-600">
-                      Step 1: Double down on what they love
+                      Step 2: Double down on what they love
                    </h2>
                    <p className="mb-6 pr-3 text-slate-800">
                      Your first priority is making your happiest users happier. By deepening the value they
@@ -133,6 +143,22 @@ export default function SegmentResults() {
                        (like it happened to Mixpanel).
                      </a>
                    </p>
+                    <div className="rounded-lg bg-slate-200 p-4 font-mono shadow-sm">
+                      <div className="mb-2 flex">
+                        <BrainIcon className="mr-2 h-6 w-6" />
+                        <p className="">Main Benefit Summary (AI-powered)</p>
+                      </div>
+                      <p className="my-4 text-sm">
+                        The best is that I can get a quick overview of all my transactions. The best is that I
+                        can get a quick overview of all my transactions. The best is that I can get a quick
+                        overview of all my transactions.
+                      </p>
+                      <div className="text-right">
+                        <Button variant="primary" className="">
+                          Regenerate
+                        </Button>
+                      </div>
+                    </div>

                    <div className="my-4 rounded-lg bg-white">
                      <div className="text-md rounded-t-lg bg-slate-100 p-4 font-bold  text-slate-600">
@@ -193,14 +219,32 @@ export default function SegmentResults() {

                  <div className="mb-4 rounded-lg bg-white p-6 shadow-sm">
                    <h2 className="my-4 text-xl font-bold text-slate-600">
-                      Step 2: Fix what&apos;s holding them back
+                      Step 3: Fix what&apos;s holding them back
                    </h2>
                    <p className="mb-6 pr-3 text-slate-800">
                      Your second priority is to increase the amount of people who would be &apos;very
                      disappointed&apos; when they could no longer use your product. This helps you craft a
                      product for a wider audience.
                    </p>
-
+                    <div className="rounded-lg bg-slate-200 p-4 font-mono shadow-sm">
+                      <div className="mb-2 flex">
+                        <BrainIcon className="mr-2 h-6 w-6" />
+                        <p className="">Next Action Steps (AI-powered)</p>
+                      </div>
+                      <p className="my-4 text-sm">
+                        Based on the submissions below, we suggest targeting these three aspects first:
+                        <ul className="my-2 ml-5 list-disc">
+                          <li>Fix this quick and easy</li>
+                          <li>Fix this quick and easy</li>
+                          <li>Fix this quick and easy</li>
+                        </ul>
+                      </p>
+                      <div className="text-right">
+                        <Button variant="primary" className="">
+                          Regenerate
+                        </Button>
+                      </div>
+                    </div>
                    <div className="my-4 rounded-lg bg-white">
                      <div className="text-md rounded-t-lg bg-slate-100 p-4 font-bold  text-slate-600">
                        How can we improve our service for you?
--- a/packages/ui/src/icons/BrainIcon.tsx
+++ b/packages/ui/src/icons/BrainIcon.tsx
@@ -0,0 +1,89 @@
+export function BrainIcon(props: any) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <defs />
+      <title>{"study-brain"}</title>
+      <path
+        d="M20.72,14.98A3.735,3.735,0,0,1,17.75,21c-.11,0-.22-.02-.33-.03a1.89,1.89,0,0,1,.08.53,2,2,0,0,1-3.91.6,3.36,3.36,0,0,1-3.18,0,2,2,0,0,1-3.91-.6,1.89,1.89,0,0,1,.08-.53c-.11.01-.22.03-.33.03a3.735,3.735,0,0,1-2.97-6.02,2.987,2.987,0,0,1,0-5.96A3.735,3.735,0,0,1,6.25,3c.11,0,.22.02.33.03A1.836,1.836,0,0,1,6.5,2.5a2,2,0,0,1,4-.1,3.013,3.013,0,0,1,3,0,2,2,0,0,1,4,.1,1.836,1.836,0,0,1-.08.53c.11-.01.22-.03.33-.03a3.735,3.735,0,0,1,2.97,6.02,2.987,2.987,0,0,1,0,5.96Z"
+        fill="#00e6ca"
+      />
+      <path
+        d="M12,2a3.026,3.026,0,0,0-1.5.4,2,2,0,0,0-4,.1,1.836,1.836,0,0,0,.08.53C6.47,3.02,6.36,3,6.25,3A3.735,3.735,0,0,0,3.28,9.02a2.987,2.987,0,0,0,0,5.96A3.735,3.735,0,0,0,6.25,21c.11,0,.22-.02.33-.03a1.89,1.89,0,0,0-.08.53,2,2,0,0,0,3.91.6,3.377,3.377,0,0,0,1.59.4Z"
+        fill="#c4f0eb"
+      />
+      <path
+        d="M9.477,17.251A3.251,3.251,0,0,0,6.227,14c-.053,0-.1.013-.153.016"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.14,19.62a1.991,1.991,0,0,1,1.27,2.48"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.5,2.4v.1A2,2,0,0,1,9.14,4.39"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.074,9.986c.052,0,.1.015.153.015a3.251,3.251,0,0,0,3.25-3.25"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.523,17.251A3.251,3.251,0,0,1,17.773,14c.053,0,.1.013.153.016"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.72,14.98A3.735,3.735,0,0,1,17.75,21c-.11,0-.22-.02-.33-.03a1.89,1.89,0,0,1,.08.53,2,2,0,0,1-3.91.6,3.36,3.36,0,0,1-3.18,0,2,2,0,0,1-3.91-.6,1.89,1.89,0,0,1,.08-.53c-.11.01-.22.03-.33.03a3.735,3.735,0,0,1-2.97-6.02,2.987,2.987,0,0,1,0-5.96A3.735,3.735,0,0,1,6.25,3c.11,0,.22.02.33.03A1.836,1.836,0,0,1,6.5,2.5a2,2,0,0,1,4-.1,3.013,3.013,0,0,1,3,0,2,2,0,0,1,4,.1,1.836,1.836,0,0,1-.08.53c.11-.01.22-.03.33-.03a3.735,3.735,0,0,1,2.97,6.02,2.987,2.987,0,0,1,0,5.96Z"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.59,22.1a1.991,1.991,0,0,1,1.27-2.48"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.5,2.4v.1a2,2,0,0,0,1.36,1.89"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.926,9.986c-.052,0-.1.015-.153.015a3.251,3.251,0,0,1-3.25-3.25"
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1={12}
+        y1={7.001}
+        x2={12}
+        y2={17.501}
+        fill="none"
+        stroke="#0f172a"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -4,6 +4,7 @@ export * from "./Confetti";
 /* Icons */
 export * from "./icons/BackIcon";
 export * from "./icons/BugIcon";
+export * from "./icons/BrainIcon";
 export * from "./icons/BugBlueIcon";
 export * from "./icons/ComplimentIcon";
 export * from "./icons/CustomersIcon";