@memori.ai/memori-react 1.0.0-alpha.1

package/src/helpers/statistics.ts

@@ -0,0 +1,252 @@
+import {
+  Stats,
+  GamificationLevel,
+  EventLog,
+  UsersLog,
+  Memori,
+  Invitation,
+} from '@memori.ai/memori-api-client/dist/types';
+import memoriApiClient from '@memori.ai/memori-api-client';
+
+const { deleteSession, getStatistics, initSession } = memoriApiClient();
+
+const conversionTable: { [key: string]: number } = {
+  totalReceivers: 0.2,
+  receiversWithMemories: 0.4,
+  totalMemories: 0.2,
+  publicMemories: 0.4,
+  memoriesWithMedia: 0.4,
+  totalQuestions: 0.2,
+  publicQuestions: 0.3,
+  questionsWithMoreThanOneAnswer: 0.4,
+  totalStories: 0.2,
+  publicStories: 0.4,
+  storiesWithDate: 0.5,
+  storiesWithPlace: 0.4,
+  storiesWithDateAndPlace: 0.6,
+  unansweredQuestions: 0,
+  successfulCorrelations: 0,
+  failedCorrelations: 0,
+};
+
+export const BADGES_MAP: Map<number, string> = new Map([
+  [0, '🆕'],
+  [10, '🐹'],
+  [20, '🐇'],
+  [30, '🐰'],
+  [40, '💡'],
+  [50, '🏆'],
+  [60, '🏅'],
+  [70, '🥉'],
+  [80, '🥈'],
+  [90, '🥇'],
+  [100, '🔥'],
+  [110, '🎓'],
+  [120, '🤖'],
+  [130, '👾'],
+  [150, '🌍'],
+  [180, '💜'],
+  [200, '💙'],
+  [250, '🧡'],
+  [300, '💚'],
+  [350, '💛'],
+  [400, '💖'],
+  [450, '💝'],
+  [500, '🖤'],
+  [550, '❤️'],
+  [600, '🧠'],
+]);
+
+export const getBadge = (points: number): string => {
+  const unlockedBadges = Array.from(BADGES_MAP.keys()).filter(
+    (k: number) => k <= points
+  );
+
+  if (unlockedBadges.length > 0) {
+    const lastBadge = unlockedBadges[unlockedBadges.length - 1];
+    return BADGES_MAP.get(lastBadge) as string;
+  }
+
+  return '';
+};
+
+export const getNextBadge = (
+  badge: string
+): { points: number; badge: string } | undefined => {
+  if (badge === '🆕') {
+    return { points: 10, badge: '🐹' };
+  }
+  let nextBadgePoints;
+  let nextBadge;
+
+  let currentSeen = false;
+  for (const [key, value] of BADGES_MAP) {
+    if (currentSeen) {
+      nextBadgePoints = key;
+      nextBadge = value;
+      break;
+    }
+
+    if (value === badge) {
+      currentSeen = true;
+    }
+  }
+
+  return nextBadge && nextBadgePoints
+    ? {
+        points: nextBadgePoints,
+        badge: nextBadge,
+      }
+    : undefined;
+};
+
+export const getPointsForBadge = (badge: string): number => {
+  let points = 0;
+
+  for (const [key, value] of BADGES_MAP) {
+    if (value === badge) {
+      points = key;
+      break;
+    }
+  }
+
+  return points;
+};
+
+export const getPointsFromStats = (stats: Stats): number => {
+  let points = 0;
+  Object.entries(stats).forEach(stat => {
+    if (stat[0] in conversionTable) {
+      points += stat[1] * conversionTable[stat[0]];
+    }
+  });
+  return Math.trunc(points);
+};
+
+export const getGamificationLevel = (points: number): GamificationLevel => {
+  const roundedPoints = Math.round(points);
+  const badge = getBadge(roundedPoints);
+  const pointsForCurrentBadge = getPointsForBadge(badge);
+  const nextBadge = getNextBadge(badge);
+
+  return {
+    points: roundedPoints,
+    badge,
+    pointsForCurrentBadge,
+    nextBadge,
+  };
+};
+
+export const getGamificationLevelByStats = (
+  stats: Stats
+): GamificationLevel => {
+  const floatPoints = getPointsFromStats(stats);
+  const points = Math.round(floatPoints);
+  const badge = getBadge(points);
+  const pointsForCurrentBadge = getPointsForBadge(badge);
+  const nextBadge = getNextBadge(badge);
+
+  return {
+    points,
+    badge,
+    pointsForCurrentBadge,
+    nextBadge,
+  };
+};
+
+const groupBy = <T>(array: T[], predicate: (v: T) => string) =>
+  array.reduce((acc, value) => {
+    if (!acc[predicate(value)]) {
+      acc[predicate(value)] = [];
+    }
+    acc[predicate(value)].push(value);
+    return acc;
+  }, {} as { [key: string]: T[] });
+
+const removeDuplicates = (logs: EventLog[]): { [key: string]: number } => {
+  const filteredLogs = logs.filter(
+    log => log.eventType === 'MemoriOpened' && log.ipAddress !== null
+  );
+  const reducedLogs = filteredLogs.reduce(
+    (acc: { [key: string]: number }, o) => {
+      if (!acc[o.ipAddress as string]) {
+        acc[o.ipAddress as string] = 0;
+      }
+      acc[o.ipAddress as string] += 1;
+      return acc;
+    },
+    {}
+  );
+  return reducedLogs;
+};
+
+export const eventLogGroupUsersByDate = (eventLogs: EventLog[]): UsersLog[] => {
+  const mapped = eventLogs.map(event => ({
+    ...event,
+    timestamp: new Intl.DateTimeFormat('it', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    }).format(new Date(event.timestamp)),
+  }));
+  const grouped = groupBy(mapped, v => v.timestamp);
+
+  const userLogs: UsersLog[] = Object.keys(grouped).map(key => {
+    const reducedLogs = removeDuplicates(grouped[key]);
+    let countRecurrentUsers = 0;
+    for (const [, value] of Object.entries(reducedLogs)) {
+      if (Number(value) > 1) {
+        countRecurrentUsers += 1;
+      }
+    }
+    return {
+      timestamp: new Intl.DateTimeFormat('it', {
+        day: '2-digit',
+        month: '2-digit',
+      }).format(new Date(key)),
+      countRecurrentUsers,
+      countUsers: Object.keys(reducedLogs).length,
+    };
+  });
+  return userLogs;
+};
+
+export const getMemoriUnansQuestions = async (memori: Memori) => {
+  if (memori.privacyType === 'SECRET' || !memori.isGiver) return 0;
+  try {
+    if (!memori.giverTag && !!memori.receivedInvitations?.length) {
+      let giverInvitation = memori.receivedInvitations.find(
+        (i: Invitation) => i.type === 'GIVER' && i.state === 'ACCEPTED'
+      );
+
+      if (giverInvitation) {
+        memori.giverTag = giverInvitation.tag;
+        memori.giverPIN = giverInvitation.pin;
+      }
+    }
+
+    const { sessionID, currentState, ...response } = await initSession({
+      memoriID: memori.engineMemoriID ?? '',
+      password: memori.secretToken,
+      tag: memori.giverTag,
+      pin: memori.giverPIN,
+    });
+
+    if (response.resultCode !== 0 || !sessionID) {
+      return 0;
+    }
+
+    const { statistics, ...resp } = await getStatistics(sessionID);
+
+    await deleteSession(sessionID);
+
+    if (statistics && resp.resultCode === 0) {
+      return statistics.unansweredQuestions;
+    }
+
+    return 0;
+  } catch (e) {
+    console.log(e);
+    return 0;
+  }
+};

package/src/helpers/translations.ts

@@ -0,0 +1,41 @@
+export type DeeplTranslation = {
+  detected_source_language: string;
+  text: string;
+};
+
+export const dialogKeywords = [
+  'va bene',
+  'no grazie',
+  'si',
+  'no',
+  'sì',
+  'arrivederci',
+  "non c'entrava",
+  'non mi è piaciuto',
+];
+
+export const getTranslation = async (
+  text: string,
+  to: string,
+  from?: string,
+  baseUrl?: string
+): Promise<DeeplTranslation> => {
+  const isReservedKeyword = dialogKeywords.indexOf(text.toLowerCase()) > -1;
+  const fromLanguage = isReservedKeyword ? 'IT' : from?.toUpperCase();
+  const deeplResult = await fetch(
+    `${baseUrl ||
+      'https://app.twincreator.com'}/api/translate?text=${encodeURIComponent(
+      text
+    )}&target_lang=${to.toUpperCase()}${
+      fromLanguage ? `&source_lang=${fromLanguage}` : ''
+    }`,
+    {
+      method: 'GET',
+      headers: {
+        Accept: '*/*',
+      },
+    }
+  );
+  const deeplResponse = await deeplResult.json();
+  return deeplResponse?.translations?.[0];
+};

package/src/helpers/utils.ts

@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+
+export const hasTouchscreen = (): boolean => {
+  let hasTouchScreen = false;
+  if ('maxTouchPoints' in navigator) {
+    hasTouchScreen = navigator.maxTouchPoints > 0;
+  } else if ('msMaxTouchPoints' in navigator) {
+    hasTouchScreen = (navigator as any).msMaxTouchPoints > 0;
+  } else {
+    const mQ =
+      window && 'matchMedia' in window && matchMedia('(pointer:coarse)');
+    if (mQ && mQ.media === '(pointer:coarse)') {
+      hasTouchScreen = !!mQ.matches;
+    } else if ('orientation' in window) {
+      hasTouchScreen = true; // deprecated, but good fallback
+    } else {
+      // Only as a last resort, fall back to user agent sniffing
+      var UA = (navigator as any)?.userAgent;
+      hasTouchScreen =
+        /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+        /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
+    }
+  }
+
+  //console.log('Has touch screen: ' + hasTouchScreen);
+  return hasTouchScreen;
+};
+
+export const iOS = (): boolean => {
+  let platform =
+    (navigator as any)?.userAgentData?.platform ||
+    navigator?.platform ||
+    'unknown';
+  let userAgent = (navigator as any)?.userAgent || 'unknown';
+
+  let isIOS =
+    [
+      'iPad Simulator',
+      'iPhone Simulator',
+      'iPod Simulator',
+      'iPad',
+      'iPhone',
+      'iPod',
+    ].includes(platform) ||
+    // iPad on iOS 13 detection
+    (userAgent.includes('Mac') && 'ontouchend' in document);
+
+  return isIOS;
+};
+export const isAndroid = (): boolean => {
+  let platform =
+    (navigator as any)?.userAgentData?.platform ||
+    navigator?.platform ||
+    'unknown';
+
+  let isAndroid =
+    platform.toLowerCase() === 'android' ||
+    navigator.userAgent.includes('Android');
+
+  //console.log('Is Android: ' + isAndroid);
+  return isAndroid;
+};
+
+export const pwdRegEx = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$_:;|,~+={}[]%^&*-]).{8,}$/;
+export const mailRegEx = /^\w+([.-]?[+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
+export const usernameRegEx = /^(?!.*\.\.)(?!.*\.$)[^\W][\w.+-]{3,32}$/;
+export const validURLRegEx = /^(ftp|http|https):\/\/[^ "]+$/;
+
+export const isValidUrl = (url: string) => {
+  try {
+    return Boolean(new URL(url));
+  } catch (e) {
+    return false;
+  }
+};
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export const stripDuplicates = (text: string) => {
+  if (
+    text
+      .slice(0, text.length / 2)
+      .trim()
+      .toLowerCase() ===
+    text
+      .slice(text.length / 2 + 1)
+      .trim()
+      .toLowerCase()
+  )
+    return text.slice(0, text.length / 2);
+  return text;
+};
+
+export const getFieldFromCustomData = (
+  fieldName: string,
+  data: string | undefined
+) => {
+  try {
+    if (data) {
+      const jsonData = JSON.parse(data);
+      return jsonData[fieldName];
+    }
+    return '';
+  } catch (error) {
+    return '';
+  }
+};
+
+export const stripObjNulls = (obj: { [key: string]: any }) => {
+  const newObj = { ...obj };
+  Object.keys(newObj).forEach(key => {
+    if (newObj[key] === null) {
+      delete newObj[key];
+    }
+  });
+  return newObj;
+};
+
+/**
+ * Find difference between two objects
+ * @param  {object} origObj - Source object to compare newObj against
+ * @param  {object} newObj  - New object with potential changes
+ * @return {object} differences
+ */
+export const difference = (
+  origObj: { [key: string]: any },
+  newObj: { [key: string]: any }
+): { [key: string]: any } =>
+  Object.keys(newObj).reduce((diffs, key) => {
+    let diff: { [key: string]: any } = { ...diffs };
+
+    if (origObj[key] !== newObj[key]) {
+      diff[key] = newObj[key];
+    }
+
+    return diff;
+  }, {});

package/src/i18n.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import it from './locales/it.json';
+import en from './locales/en.json';
+
+const resources = {
+  en: {
+    translation: en,
+  },
+  it: {
+    translation: it,
+  },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'en',
+  fallbackLng: 'it',
+  supportedLngs: ['en', 'it'],
+  nonExplicitSupportedLngs: true,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

package/src/index.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Memori as IMemori } from '@memori.ai/memori-api-client/dist/types';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import MemoriWidget from './components/MemoriWidget/MemoriWidget';
+
+import i18n from './i18n';
+import { useTranslation } from 'react-i18next';
+
+import '@fontsource/exo-2/200.css';
+import '@fontsource/exo-2/400.css';
+import '@fontsource/exo-2/700.css';
+
+export interface Props {
+  memoriName?: string | null;
+  memoriID?: string | null;
+  ownerUserName?: string | null;
+  ownerUserID?: string | null;
+  integrationID?: string;
+  tenantID: string;
+  secretToken?: string;
+  showShare?: boolean;
+  showSettings?: boolean;
+  baseURL?: string;
+  apiURL?: string;
+  tag?: string;
+  pin?: string;
+  showInstruct?: boolean;
+  context?: { [key: string]: string };
+  initialQuestion?: string;
+  uiLang?: 'en' | 'it';
+  spokenLang?: string;
+  AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
+}
+
+const getPreferredLanguages = () => {
+  const browserLanguage = navigator.language;
+  if (browserLanguage) {
+    let lng = browserLanguage.split('-')[0];
+    if (['en', 'it'].includes(lng)) {
+      return {
+        lng,
+        fallbackLng: lng === 'en' ? 'it' : 'en',
+      };
+    }
+  }
+  return {
+    lng: 'en',
+    fallbackLng: 'it',
+  };
+};
+
+const Memori: React.FC<Props> = ({
+  ownerUserName,
+  ownerUserID,
+  memoriName,
+  memoriID,
+  integrationID,
+  tenantID,
+  secretToken,
+  showShare = true,
+  showSettings = false,
+  baseURL,
+  apiURL = 'https://backend.memori.ai',
+  tag,
+  pin,
+  showInstruct = false,
+  context,
+  initialQuestion,
+  uiLang,
+  spokenLang,
+  AZURE_COGNITIVE_SERVICES_TTS_KEY,
+}) => {
+  const [memori, setMemori] = useState<IMemori>();
+  const { t } = useTranslation();
+
+  if (!((memoriID && ownerUserID) || (memoriName && ownerUserName))) {
+    throw new Error(
+      'Identifier pair required: please provide either memoriID and ownerUserID or memoriName and ownerUserName'
+    );
+  }
+
+  const client = memoriApiClient(apiURL);
+
+  /**
+   * Fetches the Memori data from the backend
+   */
+  const fetchMemori = useCallback(async () => {
+    if (memoriID && ownerUserID) {
+      const { memori, ...resp } = await client.backend.getMemoriByUserAndId(
+        tenantID,
+        ownerUserID,
+        memoriID
+      );
+
+      if (resp.resultCode === 0 && !!memori) {
+        setMemori(memori);
+      } else {
+        console.error('[MEMORI]', resp, memori);
+      }
+    } else if (memoriName && ownerUserName) {
+      const { memori, ...resp } = await client.backend.getMemori(
+        tenantID,
+        ownerUserName,
+        memoriName
+      );
+
+      if (resp.resultCode === 0 && !!memori) {
+        setMemori(memori);
+      } else {
+        console.error('[MEMORI]', resp, memori);
+      }
+    }
+  }, [memoriID, ownerUserID, memoriName, ownerUserName, tenantID]);
+  useEffect(() => {
+    fetchMemori();
+  }, [fetchMemori, tenantID]);
+
+  /**
+   * Sets the language in the i18n instance
+   */
+  useEffect(() => {
+    if (uiLang) {
+      // @ts-ignore
+      i18n.changeLanguage(uiLang.toLowerCase());
+    } else {
+      const { lng, fallbackLng } = getPreferredLanguages();
+      // @ts-ignore
+      i18n.changeLanguage(lng).catch(() => {
+        // @ts-ignore
+        i18n.changeLanguage(fallbackLng);
+      });
+    }
+  }, [uiLang]);
+
+  return memori ? (
+    <MemoriWidget
+      embed
+      baseUrl={
+        baseURL ||
+        (tenantID.startsWith('https://') ? tenantID : `https://${tenantID}`)
+      }
+      apiUrl={apiURL}
+      memori={{
+        ...memori,
+        secretToken,
+      }}
+      memoriLang={spokenLang ?? memori.culture?.split('-')?.[0]}
+      tenant={{
+        id: tenantID,
+        theme: 'twincreator',
+        config: {
+          name: tenantID,
+          showNewUser: false,
+          requirePosition: !!memori.needsPosition,
+        },
+      }}
+      showShare={showShare}
+      showSettings={showSettings}
+      showInstruct={showInstruct}
+      integration={memori?.integrations?.find(i =>
+        integrationID
+          ? i.integrationID === integrationID
+          : !!i.publish && i.type === 'LANDING_EXPERIENCE'
+      )}
+      initialContextVars={context}
+      initialQuestion={initialQuestion}
+      AZURE_COGNITIVE_SERVICES_TTS_KEY={AZURE_COGNITIVE_SERVICES_TTS_KEY}
+      {...(tag && pin ? { personification: { tag, pin } } : {})}
+    />
+  ) : (
+    <div>
+      <p style={{ textAlign: 'center', margin: '2rem auto' }}>
+        {t('loading')}...
+      </p>
+    </div>
+  );
+};
+
+export default Memori;