@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -1,233 +0,0 @@
-import {
-  SearchMatches,
-  Message,
-} from '@memori.ai/memori-api-client/dist/types';
-import { useCallback, useEffect, useState } from 'react';
-import memoriApiClient from '@memori.ai/memori-api-client';
-import Drawer from '../ui/Drawer';
-import Spin from '../ui/Spin';
-import Expandable from '../ui/Expandable';
-import toast from 'react-hot-toast';
-import { getErrori18nKey } from '../../helpers/error';
-import { useTranslation } from 'react-i18next';
-import Snippet from '../Snippet/Snippet';
-import MediaWidget from '../MediaWidget/MediaWidget';
-import Card from '../ui/Card';
-import { stripAllInternalTags } from '../../helpers/message';
-
-export interface Props {
-  sessionID: string;
-  message: Message;
-  initialMatches?: SearchMatches[];
-  visible?: boolean;
-  closeDrawer: () => void;
-  client?: ReturnType<typeof memoriApiClient>;
-  _TEST_loading?: boolean;
-}
-
-const addQuestionMark = (question: string) =>
-  question.endsWith('?') ? question : `${question}?`;
-
-const WhyThisAnswer = ({
-  message,
-  sessionID,
-  visible = true,
-  initialMatches = [],
-  closeDrawer,
-  client,
-  _TEST_loading = false,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const searchMemory = client?.search.searchMemory;
-  const sanitizedQuestionAnswered = stripAllInternalTags(
-    message.questionAnswered || ''
-  );
-
-  const [matches, setMatches] = useState<SearchMatches[]>(initialMatches);
-  const [loading, setLoading] = useState(_TEST_loading);
-
-  /**
-   * Fetch matching memories
-   */
-  const fetchMemories = useCallback(async () => {
-    setLoading(true);
-
-    if (_TEST_loading || !searchMemory) return;
-
-    try {
-      const { matches, ...response } = await searchMemory(sessionID, {
-        searchType: 'Semantic',
-        numberOfResults: 3,
-        text: sanitizedQuestionAnswered,
-        date: message.date,
-        placeName: message.placeName,
-        placeLatitude: message.placeLatitude,
-        placeLongitude: message.placeLongitude,
-        placeUncertaintyKm: message.placeUncertaintyKm,
-        contextVars: message.contextVars,
-        tag: message.tag,
-        memoryTags: message.memoryTags,
-      });
-
-      if (response.resultCode !== 0) {
-        console.error(response);
-        toast.error(t(getErrori18nKey(response.resultCode)));
-      } else {
-        setMatches(matches ?? []);
-      }
-    } catch (err) {
-      console.error('WHYTHISANSWER/FETCH', err);
-      setMatches(initialMatches ?? []);
-    }
-
-    setLoading(false);
-  }, [message, sessionID]);
-  useEffect(() => {
-    fetchMemories();
-  }, [fetchMemories, message, sessionID]);
-
-  return (
-    <Drawer
-      open={visible}
-      width="80%"
-      animated={false}
-      className="memori-whythisanswer-drawer"
-      onClose={() => closeDrawer()}
-      title={t('whyThisAnswer')}
-    >
-      <p>{t('whyThisAnswerHelper')}</p>
-
-      {sanitizedQuestionAnswered && (
-        <p className="memori--whythisanswer-question-answered">
-          <strong>{t('question') || 'Question'}:</strong>{' '}
-          {sanitizedQuestionAnswered}
-        </p>
-      )}
-
-      <Spin primary spinning={loading}>
-        {!loading && matches.length === 0 && (
-          <p role="info" className="memori--whythisanswer-no-results">
-            {t('nothingFound')}
-          </p>
-        )}
-        {loading && matches.length === 0 && (
-          <ul className="memori--whythisanswer-list memori--whythisanswer-skeleton">
-            <li>
-              <div className="memori--whythisanswer-title">
-                <span className="memori--whythisanswer-confidence">
-                  <span className="memori--whythisanswer-skeleton-text"></span>
-                </span>
-                <div className="memori--whythisanswer-title-text">
-                  <p className="memori--whythisanswer-skeleton-text"></p>
-                </div>
-              </div>
-              <p>
-                <div className="memori--whythisanswer-skeleton-text"></div>
-                <div className="memori--whythisanswer-skeleton-text"></div>
-                <div className="memori--whythisanswer-skeleton-text"></div>
-              </p>
-              <div className="memori--whythisanswer-skeleton-block"></div>
-            </li>
-            <li>
-              <div className="memori--whythisanswer-title">
-                <span className="memori--whythisanswer-confidence">
-                  <span className="memori--whythisanswer-skeleton-text"></span>
-                </span>
-                <div className="memori--whythisanswer-title-text">
-                  <p className="memori--whythisanswer-skeleton-text"></p>
-                  <p className="memori--whythisanswer-skeleton-text"></p>
-                </div>
-              </div>
-              <p>
-                <div className="memori--whythisanswer-skeleton-text"></div>
-                <div className="memori--whythisanswer-skeleton-text"></div>
-              </p>
-              <div className="memori--whythisanswer-skeleton-block"></div>
-            </li>
-          </ul>
-        )}
-        {matches.length > 0 && (
-          <ul className="memori--whythisanswer-list">
-            {matches.map(m => (
-              <li key={m.memory.memoryID}>
-                <div className="memori--whythisanswer-title">
-                  <span className="memori--whythisanswer-confidence">
-                    {m.confidenceLevel}
-                  </span>
-                  <div className="memori--whythisanswer-title-text">
-                    <div className="memori--whythisanswer-title-text-top-container">
-                      <p>
-                        <strong>{addQuestionMark(m.memory.title ?? '')}</strong>
-                      </p>
-                    </div>
-                    <p>
-                      {m.memory.titleVariants
-                        ?.map(t => addQuestionMark(t))
-                        ?.join(' | ')}
-                    </p>
-                    {(m.memory.receiverName || m.memory.receiverTag) && (
-                      <p className="memori--whythisanswer-title-text-top">
-                        {t('receiverLabel')}: {m.memory.receiverTag}{' '}
-                        {m.memory.receiverName}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                {m.memory.contextVars && (
-                  <div className="memori--whythisanswer-contextvars">
-                    {Object.entries(m.memory.contextVars || {}).map(
-                      ([key, value]) => (
-                        <Card
-                          key={key}
-                          className="memori--whythisanswer-contextvars-card"
-                        >
-                          <span>
-                            {key}: {value?.toString() || '✔️'}
-                          </span>
-                        </Card>
-                      )
-                    )}
-                  </div>
-                )}
-                {m.memory.answers?.map((a, i) => (
-                  <p key={i} className="memori--whythisanswer-answer">
-                    <Expandable mode="rows" rows={3}>
-                      {stripAllInternalTags(a.text || '')}
-                    </Expandable>
-                  </p>
-                ))}
-
-                <MediaWidget
-                  links={m.memory.media?.filter(
-                    m => m.mimeType === 'text/html'
-                  )}
-                />
-
-                {m.memory.media
-                  ?.filter(m => m.mimeType === 'text/plain')
-                  ?.map(m => (
-                    <Expandable
-                      mode="rows"
-                      rows={2}
-                      key={m.mediumID}
-                      lineHeightMultiplier={2}
-                      innerClassName="memori--whythisanswer-snippet-expandable"
-                    >
-                      <Snippet
-                        key={m.mediumID}
-                        medium={m}
-                        showCopyButton={false}
-                      />
-                    </Expandable>
-                  ))}
-              </li>
-            ))}
-          </ul>
-        )}
-      </Spin>
-    </Drawer>
-  );
-};
-
-export default WhyThisAnswer;

package/src/components/WhyThisAnswer/__snapshots__/WhyThisAnswer.test.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders WhyThisAnswer hidden unchanged 1`] = `<div />`;
-
-exports[`renders WhyThisAnswer loading unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders WhyThisAnswer visible unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders WhyThisAnswer with data unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;

package/src/components/icons/AI.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-const AI = ({ className, title }: { className?: string; title?: string }) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    aria-label={title}
-  >
-    <g fill="currentColor" fillRule="evenodd" clipRule="evenodd">
-      <path
-        fillRule="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"
-        clipRule="evenodd"
-      ></path>
-      <path
-        fillRule="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"
-        clipRule="evenodd"
-      ></path>
-      <path
-        fillRule="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"
-        clipRule="evenodd"
-      ></path>
-    </g>
-  </svg>
-);
-
-export default AI;

package/src/components/icons/Alert.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-const Alert = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    width="800px"
-    height="800px"
-    viewBox="0 0 24 24"
-    fill="none"
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    aria-label={title}
-    color="currentColor"
-  >
-    <path
-      d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default Alert;

package/src/components/icons/ArrowUp.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const ArrowUp = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="2"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M12 19V5M5 12l7-7 7 7"></path>
-  </svg>
-);
-
-export default ArrowUp;

package/src/components/icons/Bug.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-const Bug = ({ className, title }: { className?: string; title?: string }) => (
-  <svg
-    width="800px"
-    height="800px"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    aria-label={title}
-    color="currentColor"
-  >
-    <path
-      d="M19 15V11.9375C19 9.76288 17.2371 8 15.0625 8H8.9375C6.76288 8 5 9.76288 5 11.9375V15C5 18.866 8.13401 22 12 22C15.866 22 19 18.866 19 15Z"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M16.5 8.5V7.5C16.5 5.01472 14.4853 3 12 3C9.51472 3 7.5 5.01472 7.5 7.5V8.5"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M19 14H22"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M5 14H2"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M14.5 3.5L17 2"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M9.5 3.5L7 2"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M20.5 20.0002L18.5 19.2002"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M20.5 7.9998L18.5 8.7998"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M3.5 20.0002L5.5 19.2002"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M3.5 7.9998L5.5 8.7998"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <path
-      d="M12 21.5V15"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-export default Bug;

package/src/components/icons/Chat.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-const ChatRound = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    width="24"
-    height="24"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    aria-label={title}
-  >
-    <path
-      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22Z"
-      stroke="currentColor"
-      stroke-width="1.5"
-    />
-  </svg>
-);
-
-export default ChatRound;

package/src/components/icons/ChevronDown.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-const ChevronDown= ({
-    className,
-    title,
-  }: {
-    className?: string;
-    title?: string;
-  }) => (
-  <svg
-    fill="#000000"
-    xmlns="http://www.w3.org/2000/svg"
-    width="800px"
-    height="800px"
-    viewBox="0 0 52 52"
-    enableBackground="new 0 0 52 52"
-    xmlSpace="preserve"
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M47.6,17.8L27.1,38.5c-0.6,0.6-1.6,0.6-2.2,0L4.4,17.8c-0.6-0.6-0.6-1.6,0-2.2l2.2-2.2 c0.6-0.6,1.6-0.6,2.2,0l16.1,16.3c0.6,0.6,1.6,0.6,2.2,0l16.1-16.2c0.6-0.6,1.6-0.6,2.2,0l2.2,2.2C48.1,16.3,48.1,17.2,47.6,17.8z" />
-  </svg>
-);
-export default ChevronDown;

package/src/components/icons/ChevronLeft.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const ChevronLeft = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="2"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M15 18L9 12 15 6"></path>
-  </svg>
-);
-
-export default ChevronLeft;

package/src/components/icons/ChevronRight.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const ChevronRight = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="2"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M9 18L15 12 9 6"></path>
-  </svg>
-);
-
-export default ChevronRight;

package/src/components/icons/ChevronUp.tsx

@@ -1,24 +0,0 @@
-import * as React from "react"
-const ChevronUp = ({
-    className,
-    title,
-  }: {
-    className?: string;
-    title?: string;
-  }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlSpace="preserve"
-    width={800}
-    height={800}
-    viewBox="0 0 52 52"
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    className={className}
-    aria-label={title}
-  >
-    <path d="m4.4 34.2 20.5-20.7c.6-.6 1.6-.6 2.2 0l20.5 20.7c.6.6.6 1.6 0 2.2l-2.2 2.2c-.6.6-1.6.6-2.2 0L27.1 22.2c-.6-.6-1.6-.6-2.2 0L8.8 38.5c-.6.6-1.6.6-2.2 0l-2.2-2.2c-.5-.6-.5-1.5 0-2.1z" />
-  </svg>
-)
-export default ChevronUp

package/src/components/icons/Clear.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const Clear = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-.3 1.5-.4 3-.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-.1 4.4-.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"></path>
-  </svg>
-);
-
-export default Clear;

package/src/components/icons/Close.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-const Close = ({
-  className,
-  title,
-  bold = false,
-}: {
-  className?: string;
-  title?: string;
-  bold?: boolean;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    focusable="false"
-    role="img"
-    className={className}
-    aria-label={title}
-  >
-    <path 
-      d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-      strokeWidth={bold ? 2 : 0}
-      stroke={bold ? "currentColor" : "none"}
-      fill={bold ? "none" : "currentColor"}
-    />
-  </svg>
-);
-
-export default Close;

package/src/components/icons/Code.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Code = ({ className, title }: { className?: string; title?: string }) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    focusable="false"
-    role="img"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M10 9.5 8 12l2 2.5" />
-    <path d="m14 9.5 2 2.5-2 2.5" />
-    <rect width="18" height="18" x="3" y="3" rx="2" />
-  </svg>
-);
-
-export default Code;

package/src/components/icons/Copy.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const Copy = ({ className, title }: { className?: string; title?: string }) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="1.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    focusable="false"
-    role="img"
-    className={className}
-    aria-label={title}
-  >
-    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-  </svg>
-);
-
-export default Copy;