feat: add deep thought disclaimer and indicators

memori-ai · Dec 15, 2023 · 551ad43 · 551ad43
1 parent 91be6f7
commit 551ad43
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 0 deletions.
diff --git a/src/components/MemoriWidget/MemoriWidget.tsx b/src/components/MemoriWidget/MemoriWidget.tsx
@@ -2647,6 +2647,7 @@ const MemoriWidget = ({
     clickedStart: clickedStart,
     onClickStart: onClickStart,
     initializeTTS: initializeTTS,
+    isUserLoggedIn: !!loginToken,
   };
 
   const chatProps: ChatProps = {

diff --git a/src/components/StartPanel/StartPanel.css b/src/components/StartPanel/StartPanel.css
@@ -173,4 +173,45 @@
     width: 1rem;
     height: 1rem;
     fill: #000;
+}
+
+.memori--deep-thought-disclaimer {
+    position: relative;
+    padding: 1em 1.5em;
+    border: 2px solid var(--memori-warning-color, #faad14);
+    border-radius: 10px;
+    margin-top: 1rem;
+    font-size: 0.8em;
+}
+
+.memori--deep-thought-disclaimer::before {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--memori-warning-color, #faad14);
+    content: '';
+    opacity: 0.2;
+}
+
+.memori--deep-thought-disclaimer h2 {
+    margin-top: 0;
+    margin-bottom: 0.5em;
+}
+
+.memori--deep-thought-disclaimer .memori-tooltip {
+    position: relative;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+    float: right;
+}
+
+.memori--deep-thought-disclaimer .memori-tooltip .memori-tooltip--trigger svg {
+    width: 1.25em;
+    height: 1.25em;
+    padding: 5px;
+    border: 1px solid #666;
+    border-radius: 50%;
 }
diff --git a/src/components/StartPanel/StartPanel.stories.tsx b/src/components/StartPanel/StartPanel.stories.tsx
@@ -190,6 +190,24 @@ WithAllTheBadges.args = {
   onClickStart: () => {},
 };
 
+export const WithDeepThoughtEnabled = Template.bind({});
+WithDeepThoughtEnabled.args = {
+  memori: {
+    ...memori,
+    enableDeepThought: true,
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+  isUserLoggedIn: true,
+};
+
 export const BoardOfExpert = Template.bind({});
 BoardOfExpert.args = {
   memori: {

diff --git a/src/components/StartPanel/StartPanel.test.tsx b/src/components/StartPanel/StartPanel.test.tsx
@@ -86,6 +86,28 @@ it('renders StartPanel for board of experts unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders StartPanel with deep thought enabled unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={{
+        ...memori,
+        enableDeepThought: true,
+      }}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+      isUserLoggedIn
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders StartPanel on instruct unchanged', () => {
   const { container } = render(
     <StartPanel

diff --git a/src/components/StartPanel/StartPanel.tsx b/src/components/StartPanel/StartPanel.tsx
@@ -15,6 +15,7 @@ import { chatLanguages } from '../../helpers/constants';
 import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
 import AI from '../icons/AI';
 import Group from '../icons/Group';
+import DeepThought from '../icons/DeepThought';
 import CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus';
 
 export interface Props {
@@ -35,6 +36,7 @@ export interface Props {
   onClickStart?: () => void;
   initializeTTS?: () => void;
   _TEST_forceProviderStatus?: string;
+  isUserLoggedIn?: boolean;
 }
 
 const StartPanel: React.FC<Props> = ({
@@ -54,6 +56,7 @@ const StartPanel: React.FC<Props> = ({
   onClickStart,
   initializeTTS,
   _TEST_forceProviderStatus,
+  isUserLoggedIn = false,
 }) => {
   const { t, i18n } = useTranslation();
   const [translatedDescription, setTranslatedDescription] = useState(
@@ -287,6 +290,25 @@ const StartPanel: React.FC<Props> = ({
               marginLeft
             />
           )}
+
+          {!!memori.enableDeepThought && !instruct && !!isUserLoggedIn && (
+            <div className="memori--deep-thought-disclaimer">
+              <Tooltip align="left" content={t('deepThoughtHelper')}>
+                <DeepThought />
+              </Tooltip>
+              <h2>{t('deepThoughtDisclaimerTitle')}</h2>
+              <p>{t('deepThoughtDisclaimer')}</p>
+              <p>
+                <a
+                  href="https://app.twincreator.com/en/privacy_and_cookie"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Privacy policy
+                </a>
+              </p>
+            </div>
+          )}
         </div>
       )}
     </div>

diff --git a/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap b/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap
@@ -553,6 +553,173 @@ exports[`renders StartPanel with completions enabled unchanged 1`] = `
 </div>
 `;
 
+exports[`renders StartPanel with deep thought enabled unchanged 1`] = `
+<div>
+  <div
+    class="memori--start-panel"
+  >
+    <div
+      class="memori--cover"
+    >
+      <div
+        class="memori--completions-enabled"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            completionsEnabled
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span
+              aria-label="completionsEnabled"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  clip-rule="evenodd"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M0 4a4 4 0 014-4h16a4 4 0 014 4v16a4 4 0 01-4 4H4a4 4 0 01-4-4zm4-2.4A2.4 2.4 0 001.6 4v16A2.4 2.4 0 004 22.4h16a2.4 2.4 0 002.4-2.4V4A2.4 2.4 0 0020 1.6z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M9.715 8.442a.798.798 0 00-1.43 0l-3.2 6.4a.799.799 0 101.431.716l.579-1.158h3.811l.578 1.158a.8.8 0 001.431-.716zm.391 4.358L9 10.589 7.894 12.8z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M17 8c.552 0 1 .358 1 .8v6.4c0 .442-.448.8-1 .8s-1-.358-1-.8V8.8c0-.442.448-.8 1-.8z"
+                    fill-rule="evenodd"
+                  />
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <picture
+      class="memori--avatar"
+    >
+      <source
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+      <img
+        alt="Memori"
+        src="https://app.twincreator.com/images/twincreator/square_logo.png"
+      />
+    </picture>
+    <h2
+      class="memori--title"
+    >
+      Memori
+    </h2>
+    <div
+      class="memori--description"
+    >
+      <p>
+        <span
+          class="memori--description-text"
+        >
+          Lorem ipsum.
+        </span>
+      </p>
+      <button
+        class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
+      >
+        write_and_speak.tryMeButton
+      </button>
+      <p
+        class="memori--start-description"
+      >
+        write_and_speak.pageTryMeExplanation
+      </p>
+      <div
+        class="memori--deep-thought-disclaimer"
+      >
+        <div
+          class="memori-tooltip memori-tooltip--align-left"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            deepThoughtHelper
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="3"
+              viewBox="0 0 48 48"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M30.106 48v-2.745a2.213 2.213 0 012.213-2.212h6.11a2.392 2.392 0 002.326-2.466v-3.223a1.834 1.834 0 01.459-1.145 2.912 2.912 0 00.712-1.926l-.007-.667a1.016 1.016 0 01.651-.952h1.067a1.363 1.363 0 001.051-.456 1.304 1.304 0 00.19-1.395 67.032 67.032 0 01-3.037-7.51 4.767 4.767 0 01-.217-1.507l-.002-4.994a14.513 14.513 0 00-.552-3.963l-.006-.022a13.959 13.959 0 00-3.137-5.702q-.479-.516-1.006-1.003a17.67 17.67 0 00-.677-.623A18.303 18.303 0 0024.194 1a19.617 19.617 0 00-12.539 4.489 17.555 17.555 0 00-3.945 21.69C9.945 31.507 11.694 38.622 12.14 46v2"
+                stroke-miterlimit="10"
+              />
+              <path
+                d="M27.917 12L31.417 12"
+              />
+              <path
+                d="M27.917 26L31.417 26"
+              />
+              <path
+                d="M29.667 12L29.667 26"
+              />
+              <path
+                d="M23.992 26L19.904 12 19.226 12 15.159 26"
+              />
+              <path
+                d="M16.854 21.133L22.276 21.133"
+              />
+            </svg>
+          </div>
+        </div>
+        <h2>
+          deepThoughtDisclaimerTitle
+        </h2>
+        <p>
+          deepThoughtDisclaimer
+        </p>
+        <p>
+          <a
+            href="https://app.twincreator.com/en/privacy_and_cookie"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Privacy policy
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders StartPanel with gamification level unchanged 1`] = `
 <div>
   <div

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -43,6 +43,10 @@
   "ageVerification": "Age verification",
   "ageVerificationText": "To interact with this Twin, you must be at least {{minAge}} years old.",
   "nsfw": "NSFW: This Twin contains adult contents",
+  "deepThought": "Deep Thought",
+  "deepThoughtHelper": "Allows to establish a unique relationship between the AI and the person who interrogates it, allowing the AI to remember this relationship and therefore supporting people with questions targeted to their experiences. Once people start their relationships, the creator of the AI will see their community grow with Followers and will be able to observe the known facts collected during the conversations.",
+  "deepThoughtDisclaimerTitle": "Deep Thought enabled",
+  "deepThoughtDisclaimer": "By continuing the conversation I authorize the processing of my personal data as specified in the information notice which I declare to have read.",
   "auth": {
     "title": "Authentication",
     "useRecoveryTokens": "Use recovery tokens",

diff --git a/src/locales/it.json b/src/locales/it.json
@@ -43,6 +43,10 @@
   "ageVerification": "Verifica dell'età",
   "ageVerificationText": "Per interagire con questo Twin, devi aver almeno {{minAge}} anni.",
   "nsfw": "NSFW: Questo Twin contiene contenuti per adulti",
+  "deepThought": "Pensiero profondo",
+  "deepThoughtHelper": "Permette di stabilire una relazione univoca tra l'IA e la persona che la interroga, permettendo all'IA memoria di questa relazione supportando quindi le persone con domande mirate alle loro esperienze. Una volta che le persone avvieranno le loro relazioni, il creatore delle AI vedrà la propria community crescere di Follower e potrà osservare i fatti noti raccolti durante le conversazioni.",
+  "deepThoughtDisclaimerTitle": "Pensiero profondo abilitato",
+  "deepThoughtDisclaimer": "Proseguendo nella conversazione autorizzo il trattamento dei miei dati personali così come specificato nell'informativa di cui dichiaro di aver preso visione.",
   "auth": {
     "title": "Autenticazione",
     "useRecoveryTokens": "Utilizza i token di recupero",

diff --git a/src/styles.css b/src/styles.css
@@ -86,4 +86,5 @@ body.sb-show-main #root,
     --memori-modal--width: 100%;
     --memori-modal--width--md: 80%;
     --memori-error-color: #ff4d4f;
+    --memori-warning-color: #faad14;
 }