@memori.ai/memori-react 6.3.0 → 6.4.0

package/esm/components/WhyThisAnswer/WhyThisAnswer.d.ts

@@ -0,0 +1,11 @@
+import { SearchMatches, Message } from '@memori.ai/memori-api-client/dist/types';
+export interface Props {
+    apiURL: string;
+    sessionID: string;
+    message: Message;
+    initialMatches?: SearchMatches[];
+    visible?: boolean;
+    closeDrawer: () => void;
+}
+declare const WhyThisAnswer: ({ message, apiURL, sessionID, visible, initialMatches, closeDrawer, }: Props) => JSX.Element;
+export default WhyThisAnswer;

package/esm/components/WhyThisAnswer/WhyThisAnswer.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+const addQuestionMark = (question) => question.endsWith('?') ? question : `${question}?`;
+const WhyThisAnswer = ({ message, apiURL, sessionID, visible = true, initialMatches = [], closeDrawer, }) => {
+    const { t } = useTranslation();
+    const client = memoriApiClient(apiURL);
+    const searchMemory = client.search.searchMemory;
+    const [matches, setMatches] = useState(initialMatches);
+    const [loading, setLoading] = useState(false);
+    const fetchMemories = useCallback(async () => {
+        setLoading(true);
+        try {
+            const { matches, ...response } = await searchMemory(sessionID, {
+                searchType: 'Semantic',
+                numberOfResults: 5,
+                text: message.questionAnswered,
+                date: message.date,
+                placeName: message.placeName,
+                placeLatitude: message.placeLatitude,
+                placeLongitude: message.placeLongitude,
+                placeUncertaintyKm: message.placeUncertaintyKm,
+                contextVars: message.contextVars,
+            });
+            if (response.resultCode !== 0) {
+                console.error(response);
+                toast.error(t(getErrori18nKey(response.resultCode)));
+            }
+            else {
+                setMatches(matches !== null && matches !== void 0 ? matches : []);
+            }
+        }
+        catch (err) {
+            console.error('WHYTHISANSWER/FETCH', err);
+            setMatches(initialMatches !== null && initialMatches !== void 0 ? initialMatches : []);
+        }
+        setLoading(false);
+    }, [message, sessionID]);
+    useEffect(() => {
+        fetchMemories();
+    }, [fetchMemories, message, sessionID]);
+    return (_jsxs(Drawer, { open: visible, width: "80%", animated: false, className: "memori-whythisanswer-drawer", onClose: () => closeDrawer(), title: t('whyThisAnswer'), children: [_jsx("p", { children: t('whyThisAnswerHelper') }), message.questionAnswered && (_jsxs("p", { className: "memori--whythisanswer-question-answered", children: [_jsxs("strong", { children: [t('question') || 'Question', ":"] }), ' ', message.questionAnswered] })), _jsxs(Spin, { spinning: loading, children: [!loading && matches.length === 0 && (_jsx("p", { role: "info", className: "memori--whythisanswer-no-results", children: t('nothingFound') })), matches.length > 0 && (_jsx("ul", { className: "memori--whythisanswer-list", children: matches.map(m => {
+                            var _a, _b, _c, _d, _e, _f;
+                            return (_jsxs("li", { children: [_jsxs("div", { className: "memori--whythisanswer-title", children: [_jsx("span", { className: "memori--whythisanswer-confidence", children: m.confidenceLevel }), _jsxs("div", { className: "memori--whythisanswer-title-text", children: [_jsx("p", { children: _jsx("strong", { children: addQuestionMark((_a = m.memory.title) !== null && _a !== void 0 ? _a : '') }) }), _jsx("p", { children: (_c = (_b = m.memory.titleVariants) === null || _b === void 0 ? void 0 : _b.map(t => addQuestionMark(t))) === null || _c === void 0 ? void 0 : _c.join(' | ') })] })] }), (_d = m.memory.answers) === null || _d === void 0 ? void 0 : _d.map((a, i) => (_jsx("p", { className: "memori--whythisanswer-answer", children: _jsx(Expandable, { rows: 3, children: a.text }) }, i))), !!((_f = (_e = m.memory.media) === null || _e === void 0 ? void 0 : _e.filter(m => m.mimeType === 'text/plain')) === null || _f === void 0 ? void 0 : _f.length) && (_jsx(Snippet, { medium: {
+                                            mediumID: m.memory.memoryID,
+                                            mimeType: 'text/plain',
+                                            content: m.memory.media.filter(m => m.mimeType === 'text/plain')[0].content,
+                                        }, showCopyButton: false, showLineNumbers: false }))] }, m.memory.memoryID));
+                        }) }))] })] }));
+};
+export default WhyThisAnswer;
+//# sourceMappingURL=WhyThisAnswer.js.map

package/esm/components/WhyThisAnswer/WhyThisAnswer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WhyThisAnswer.js","sourceRoot":"","sources":["../../../src/components/WhyThisAnswer/WhyThisAnswer.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,KAAK,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAWzC,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE,CAC3C,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC;AAErD,MAAM,aAAa,GAAG,CAAC,EACrB,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,GAAG,IAAI,EACd,cAAc,GAAG,EAAE,EACnB,WAAW,GACL,EAAE,EAAE;IACV,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/B,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;IAEhD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAkB,cAAc,CAAC,CAAC;IACxE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAK9C,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC3C,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjB,IAAI;YACF,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,GAAG,MAAM,YAAY,CAAC,SAAS,EAAE;gBAC7D,UAAU,EAAE,UAAU;gBACtB,eAAe,EAAE,CAAC;gBAClB,IAAI,EAAE,OAAO,CAAC,gBAAgB;gBAC9B,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,SAAS,EAAE,OAAO,CAAC,SAAS;gBAC5B,aAAa,EAAE,OAAO,CAAC,aAAa;gBACpC,cAAc,EAAE,OAAO,CAAC,cAAc;gBACtC,kBAAkB,EAAE,OAAO,CAAC,kBAAkB;gBAC9C,WAAW,EAAE,OAAO,CAAC,WAAW;aACjC,CAAC,CAAC;YAEH,IAAI,QAAQ,CAAC,UAAU,KAAK,CAAC,EAAE;gBAC7B,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACxB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACtD;iBAAM;gBACL,UAAU,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,CAAC;aAC3B;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;YAC1C,UAAU,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC;SAClC;QAED,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IACzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAExC,OAAO,CACL,MAAC,MAAM,IACL,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,KAAK,EACf,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,aAEzB,sBAAI,CAAC,CAAC,qBAAqB,CAAC,GAAK,EAEhC,OAAO,CAAC,gBAAgB,IAAI,CAC3B,aAAG,SAAS,EAAC,yCAAyC,aACpD,6BAAS,CAAC,CAAC,UAAU,CAAC,IAAI,UAAU,SAAW,EAAC,GAAG,EAClD,OAAO,CAAC,gBAAgB,IACvB,CACL,EAED,MAAC,IAAI,IAAC,QAAQ,EAAE,OAAO,aACpB,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,CACnC,YAAG,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,kCAAkC,YACxD,CAAC,CAAC,cAAc,CAAC,GAChB,CACL,EACA,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,aAAI,SAAS,EAAC,4BAA4B,YACvC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;4BAAC,OAAA,CAChB,yBACE,eAAK,SAAS,EAAC,6BAA6B,aAC1C,eAAM,SAAS,EAAC,kCAAkC,YAC/C,CAAC,CAAC,eAAe,GACb,EACP,eAAK,SAAS,EAAC,kCAAkC,aAC/C,sBACE,2BAAS,eAAe,CAAC,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,mCAAI,EAAE,CAAC,GAAU,GACtD,EACJ,sBACG,MAAA,MAAA,CAAC,CAAC,MAAM,CAAC,aAAa,0CACnB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,0CAC5B,IAAI,CAAC,KAAK,CAAC,GACb,IACA,IACF,EACL,MAAA,CAAC,CAAC,MAAM,CAAC,OAAO,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,YAAW,SAAS,EAAC,8BAA8B,YACjD,KAAC,UAAU,IAAC,IAAI,EAAE,CAAC,YAAG,CAAC,CAAC,IAAI,GAAc,IADpC,CAAC,CAEL,CACL,CAAC,EAED,CAAC,CAAC,CAAA,MAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,0CACvD,MAAM,CAAA,IAAI,CACZ,KAAC,OAAO,IACN,MAAM,EAAE;4CACN,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;4CAC3B,QAAQ,EAAE,YAAY;4CACtB,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CACjC,CAAC,CAAC,CAAC,CAAC,OAAO;yCACb,EACD,cAAc,EAAE,KAAK,EACrB,eAAe,EAAE,KAAK,GACtB,CACH,KAnCM,CAAC,CAAC,MAAM,CAAC,QAAQ,CAoCrB,CACN,CAAA;yBAAA,CAAC,GACC,CACN,IACI,IACA,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/components/icons/QuestionHelp.d.ts

@@ -0,0 +1,5 @@
+declare const QuestionHelp: ({ className, title, }: {
+    className?: string | undefined;
+    title?: string | undefined;
+}) => JSX.Element;
+export default QuestionHelp;

package/esm/components/icons/QuestionHelp.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const QuestionHelp = ({ className, title, }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", ...(!title ? { 'aria-hidden': 'true' } : {}), focusable: "false", role: "img", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", viewBox: "0 0 24 24", className: className, "aria-label": title, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" }), _jsx("path", { d: "M12 17L12.01 17" })] }));
+export default QuestionHelp;
+//# sourceMappingURL=QuestionHelp.js.map

package/esm/components/icons/QuestionHelp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionHelp.js","sourceRoot":"","sources":["../../../src/components/icons/QuestionHelp.tsx"],"names":[],"mappings":";AAEA,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,KAAK,GAIN,EAAE,EAAE,CAAC,CACJ,eACE,KAAK,EAAC,4BAA4B,KAC9B,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,KAAK,EACjB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,gBACR,KAAK,aAEjB,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,EACxC,eAAM,CAAC,EAAC,oCAAoC,GAAQ,EACpD,eAAM,CAAC,EAAC,iBAAiB,GAAQ,IAC7B,CACP,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/esm/components/ui/Expandable.css

@@ -0,0 +1,15 @@
+.memori-expandable {
+    line-height: 1;
+}
+
+.memori-expandable--inner {
+    overflow: hidden;
+    max-height: 9999px;
+    transition: max-height 0.2s ease-in-out;
+}
+
+.memori-expandable>button {
+    color: var(--memori-primary, #333);
+    font-size: 0.9em;
+    text-decoration: underline
+}

package/esm/components/ui/Expandable.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface Props {
+    rows: number;
+    className?: string;
+    innerClassName?: string;
+    btnClassName?: string;
+    defaultExpanded?: boolean;
+    expandSymbol?: (lang: string) => React.ReactNode;
+    collapseSymbol?: (lang: string) => React.ReactNode;
+    children: React.ReactNode;
+}
+declare const Expandable: ({ rows, className, innerClassName, btnClassName, defaultExpanded, expandSymbol, collapseSymbol, children, }: Props) => JSX.Element;
+export default Expandable;

package/esm/components/ui/Expandable.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Button from './Button';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+const Expandable = ({ rows, className, innerClassName, btnClassName, defaultExpanded = false, expandSymbol = () => '...', collapseSymbol = (lang) => lang === 'it' ? 'Mostra meno' : 'Show less', children, }) => {
+    const { i18n } = useTranslation();
+    const lang = i18n.language;
+    const collapseSymbolText = collapseSymbol(lang);
+    const expandSymbolText = expandSymbol(lang);
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const [needsExpanding, setNeedsExpanding] = useState(false);
+    const [rowHeight, setRowHeight] = useState(16);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            let height = ref.current.getBoundingClientRect().height;
+            let computedStyle = getComputedStyle(ref.current);
+            let elLineHeight = computedStyle.lineHeight;
+            let lineHeight = elLineHeight === 'normal' || !(elLineHeight === null || elLineHeight === void 0 ? void 0 : elLineHeight.length)
+                ? 1.2 * parseInt(computedStyle.fontSize, 10)
+                : parseInt(elLineHeight, 10);
+            console.table({
+                rows,
+                lineHeight,
+                height,
+                maxHeight: rows * lineHeight,
+                needsExpanding: height > rows * lineHeight,
+            });
+            setRowHeight(lineHeight);
+            if (height && height > rows * lineHeight) {
+                setNeedsExpanding(true);
+            }
+        }
+    }, [rows, ref.current]);
+    return (_jsxs("div", { className: cx('memori-expandable', className), children: [_jsx("div", { ref: ref, className: cx('memori-expandable--inner', innerClassName), style: {
+                    maxHeight: expanded || !needsExpanding ? '9999px' : `${rowHeight * rows}px`,
+                }, children: children }), needsExpanding && !expanded && (_jsx(Button, { ghost: true, padded: false, className: btnClassName, onClick: () => setExpanded(true), children: expandSymbolText })), needsExpanding && expanded && (_jsx(Button, { ghost: true, padded: false, className: btnClassName, onClick: () => setExpanded(false), children: collapseSymbolText }))] }));
+};
+export default Expandable;
+//# sourceMappingURL=Expandable.js.map

package/esm/components/ui/Expandable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expandable.js","sourceRoot":"","sources":["../../../src/components/ui/Expandable.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/Table.css

@@ -1,6 +1,6 @@
 table.memori--table {
     --memori-table-spacing: 1rem;
-    --memori-table-border-color: hsl(205, 20%, 94%);
+    --memori-table-border-color: rgb(237, 240, 243);
     --memori-table-bg-color: rgb(246, 248, 249);
 
     margin: 1rem 0;
@@ -110,4 +110,4 @@ table.memori--table td.memori--table--column-right {
 
 .memori--table--date {
     white-space: nowrap;
-}
+}

package/esm/locales/en.json

@@ -33,6 +33,7 @@
     "showTranslatedText": "Show translation",
     "exactPosition": "Exact position",
     "uncertain": "Uncertain",
+    "question": "Question",
     "nothingFound": "Nothing found",
     "venue": "Venue",
     "searchVenue": "Search venue...",
@@ -42,6 +43,8 @@
     "memoriBlockedReasonExceedChats": "because it has exceeded the monthly threshold of allowed chats.",
     "memoriBlockedGiverHelper": "You can still manage it as administrator, but other users will not be able to interact with it.",
     "generatedByAI": "Answer generated by AI, may occasionally generate incorrect informations",
+    "whyThisAnswer": "Why this answer?",
+    "whyThisAnswerHelper": "This answer was generated automatically by an artificial intelligence based on these verified contents.",
     "completionsEnabled": "Advanced AI, can respond with automatically generated answers that may sometimes contain incorrect information",
     "completionProviderDown": "This Twin is integrated with a generative AI from {{provider}}, but it is currently unavailable. Try again later.",
     "completionProviderFallbackName": "an external provider",

package/esm/locales/it.json

@@ -33,6 +33,7 @@
     "showTranslatedText": "Mostra traduzione",
     "exactPosition": "Posizione esatta",
     "uncertain": "Incertezza",
+    "question": "Domanda",
     "nothingFound": "Nessun risultato",
     "venue": "Luogo",
     "searchVenue": "Cerca luogo...",
@@ -42,6 +43,8 @@
     "memoriBlockedReasonExceedChats": "perchè ha superato la soglia mensile di chat ammesse.",
     "memoriBlockedGiverHelper": "Puoi sempre gestirlo in qualità di amministratore, ma altri utenti non potranno interrogarlo.",
     "generatedByAI": "Risposta generata da IA, può talvolta generare informazioni non corrette",
+    "whyThisAnswer": "Perché questa risposta?",
+    "whyThisAnswerHelper": "Questa risposta è stata generata automaticamente da un'intelligenza artificiale sulla base di questi contenuti verificati.",
     "completionsEnabled": "IA evoluta, può rispondere con risposte generate automaticamente che talvolta potrebbero contenere informazioni non corrette",
     "completionProviderDown": "Questo Twin è integrato con una IA generativa di {{provider}}, ma al momento non è disponibile. Riprova più tardi.",
     "completionProviderFallbackName": "un provider esterno",

package/esm/styles.css

@@ -7,6 +7,7 @@
 @import url('./components/ui/Tooltip.css');
 @import url('./components/ui/Select.css');
 @import url('./components/ui/Table.css');
+@import url('./components/ui/Expandable.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
@@ -41,6 +42,7 @@
 @import url('./components/KnownFacts/KnownFacts.css');
 @import url('./components/LoginDrawer/LoginDrawer.css');
 @import url('./components/VenueWidget/VenueWidget.css');
+@import url('./components/WhyThisAnswer/WhyThisAnswer.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700');
@@ -76,11 +78,12 @@ body.sb-show-main #root,
     --memori-chat-bubble-bg: #fff;
     --memori-chat-user-bubble-bg: var(--memori-primary);
     --memori-text-color: #000;
+    --memori-border-radius: 5px;
     --memori-button-bg: #fff;
     --memori-button-text: #000;
     --memori-button-padding: 0.5rem 1.5rem;
     --memori-button-border-color: #d9d9d9;
-    --memori-button-radius: 5px;
+    --memori-button-radius: var(--memori-border-radius);
     --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
     --memori-blur-background: 0px;
     --memori-drawer--width: 80%;
@@ -99,4 +102,4 @@ body.sb-show-main #root,
     .mobile-hidden {
         display: none;
     }
-}
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.3.0",
+  "version": "6.4.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -291,7 +291,7 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.4",
-    "@memori.ai/memori-api-client": "^4.1.0",
+    "@memori.ai/memori-api-client": "^4.1.2",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.3.2",

package/src/components/Chat/Chat.tsx

@@ -202,6 +202,7 @@ const Chat: React.FC<Props> = ({
                 tenant={tenant}
                 baseUrl={baseUrl}
                 apiUrl={apiUrl}
+                sessionID={sessionID}
                 simulateUserPrompt={simulateUserPrompt}
                 showAIicon={showAIicon}
                 showFeedback={

package/src/components/ChatBubble/ChatBubble.css

@@ -146,17 +146,22 @@
     margin-left: auto;
 }
 
-.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-ai-icon {
+.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon {
     display: flex;
     justify-content: flex-end;
-    padding: 3px;
+    padding: 0;
     text-align: right;
 }
 
-.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-ai-icon svg {
+.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
+    padding: 3px;
+}
+
+.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon svg {
     overflow: visible;
-    width: 0.85rem;
-    height: 0.85rem;
+    width: 1rem;
+    height: 1rem;
+    color: #000;
 }
 
 .memori-chat--bubble-addon .memori-chat--feedback {
@@ -180,6 +185,11 @@
     height: 0.9rem;
 }
 
+.memori-chat--bubble.memori-chat--with-addon .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai svg {
+    width: 0.85rem;
+    height: 0.85rem;
+}
+
 .memori-chat--bubble-addon-separator {
     width: 1px;
     height: 1.5em;
@@ -260,4 +270,4 @@
     30% {
         transform: translateY(-10px);
     }
-}
+}

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import ChatBubble from './ChatBubble';
-import { memori, tenant } from '../../mocks/data';
+import { memori, tenant, sessionID } from '../../mocks/data';
 
 it('renders ChatBubble unchanged', () => {
   const { container } = render(
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       message={{
         fromUser: false,
         text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
@@ -25,6 +26,7 @@ it('renders ChatBubble with initial msg unchanged', () => {
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       message={{
         fromUser: false,
         text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
@@ -42,6 +44,7 @@ it('renders ChatBubble with user msg unchanged', () => {
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       message={{
         fromUser: true,
         text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
@@ -59,6 +62,7 @@ it('renders ChatBubble with msg generated by AI unchanged', () => {
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       message={{
         fromUser: true,
         text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
@@ -80,6 +84,7 @@ it('renders ChatBubble with msg from BoE expert unchanged', () => {
         enableBoardOfExperts: true,
       }}
       tenant={tenant}
+      sessionID={sessionID}
       apiUrl="https://backend.memori.ai"
       experts={[
         {
@@ -109,6 +114,7 @@ it('renders ChatBubble from user with avatar unchanged', () => {
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       user={{ avatarURL: 'https://picsum.photos/200' }}
       message={{
         fromUser: true,
@@ -127,6 +133,7 @@ it('renders ChatBubble from user with custom avatar unchanged', () => {
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       userAvatar="https://picsum.photos/200"
       message={{
         fromUser: true,
@@ -145,6 +152,7 @@ it('renders ChatBubble from user with avatar as react element unchanged', () =>
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       user={{ avatarURL: 'https://picsum.photos/200' }}
       userAvatar={<span>USER</span>}
       message={{
@@ -164,6 +172,7 @@ it('renders ChatBubble with markdown unchanged', () => {
     <ChatBubble
       memori={memori}
       tenant={tenant}
+      sessionID={sessionID}
       message={{
         fromUser: false,
         text: '## Test\n\nEcco tutte le possibili personalizzazioni che puoi applicare:\n\n- **Colletto**:\n - Girocollo\n - Scollo a V\n\n- **Manica**:\n - Manica Lunga\n - Manica Corta\n\n- **Taglia**:\n - XS\n - S\n - M\n - L\n - XL\n - XXL\n - 3XL\n\n- **Posizione Stampa**:\n - Fronte Petto\n - Retro Schiena\n - Fronte DX\n - Fronte SX\n\n- **Generazione Immagine**:\n - Prompt generazione immagine\n\nSeleziona le personalizzazioni che desideri applicare.\n\n[Vedi altro](https://memori.ai)',

package/src/components/ChatBubble/ChatBubble.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import cx from 'classnames';
 import {
   ExpertReference,
@@ -18,14 +18,19 @@ import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import { sanitize } from 'dompurify';
 import { cleanUrl } from '../../helpers/utils';
+import Button from '../ui/Button';
+import QuestionHelp from '../icons/QuestionHelp';
+import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
 
 export interface Props {
   message: Message;
   memori: Memori;
+  sessionID: string;
   tenant?: Tenant;
   baseUrl?: string;
   apiUrl?: string;
   showFeedback?: boolean;
+  showWhyThisAnswer?: boolean;
   simulateUserPrompt?: (msg: string) => void;
   showAIicon?: boolean;
   isFirst?: boolean;
@@ -61,7 +66,9 @@ const ChatBubble: React.FC<Props> = ({
   tenant,
   baseUrl,
   apiUrl,
+  sessionID,
   showFeedback,
+  showWhyThisAnswer = true,
   simulateUserPrompt,
   showAIicon = true,
   isFirst = false,
@@ -70,6 +77,7 @@ const ChatBubble: React.FC<Props> = ({
   experts,
 }) => {
   const { t } = useTranslation();
+  const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
 
   const renderedText = sanitize(
     (marked.parse(message.translatedText || message.text) as string)
@@ -187,11 +195,6 @@ const ChatBubble: React.FC<Props> = ({
             message.fromUser ? '30' : '-30'
           }`}
         >
-          {/*(message.translatedText || message.text)
-            .split(/\r\n|\r|\n/)
-            .map((row, index) => (
-              <p key={index}>{row}</p>
-            ))*/}
           <div dangerouslySetInnerHTML={{ __html: renderedText }} />
           {((message.generatedByAI && showAIicon) ||
             (showFeedback && simulateUserPrompt)) && (
@@ -211,13 +214,30 @@ const ChatBubble: React.FC<Props> = ({
                 <Tooltip
                   align="left"
                   content={t('generatedByAI')}
-                  className="memori-chat--bubble-ai-icon"
+                  className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
                 >
                   <span>
                     <AI title={t('generatedByAI') || undefined} />
                   </span>
                 </Tooltip>
               )}
+
+              {!message.fromUser &&
+                message.questionAnswered &&
+                apiUrl &&
+                showWhyThisAnswer && (
+                  <Button
+                    ghost
+                    shape="circle"
+                    title={t('whyThisAnswer') || undefined}
+                    className="memori-chat--bubble-action-icon"
+                    onClick={() => setShowingWhyThisAnswer(true)}
+                    disabled={showingWhyThisAnswer}
+                    icon={
+                      <QuestionHelp title={t('whyThisAnswer') || undefined} />
+                    }
+                  />
+                )}
             </div>
           )}
         </Transition.Child>
@@ -284,6 +304,16 @@ const ChatBubble: React.FC<Props> = ({
           </>
         )}
       </Transition>
+
+      {showingWhyThisAnswer && apiUrl && (
+        <WhyThisAnswer
+          visible={showingWhyThisAnswer}
+          message={message}
+          closeDrawer={() => setShowingWhyThisAnswer(false)}
+          apiURL={apiUrl}
+          sessionID={sessionID}
+        />
+      )}
     </>
   );
 };

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

@@ -339,7 +339,7 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
         class="memori-chat--bubble-addon"
       >
         <div
-          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-ai-icon"
+          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -421,7 +421,7 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
         class="memori-chat--bubble-addon"
       >
         <div
-          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-ai-icon"
+          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"

package/src/components/Header/Header.css

@@ -63,6 +63,12 @@
     white-space: nowrap;
 }
 
+@media (max-width: 768px) {
+    .memori-header--position .memori-header--position-placeName {
+        display: none;
+    }
+}
+
 .memori-header--position .memori-header--button {
     margin-right: 0.5rem;
     margin-left: 0.5rem;
@@ -76,4 +82,4 @@
 
 .memori-header .memori-header--button--position {
     margin-right: 0.25rem;
-}
+}

package/src/components/KnownFacts/KnownFacts.tsx

@@ -87,84 +87,6 @@ const KnownFacts = ({
   const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>(
     []
   );
-  // const rowSelection = {
-  //   selectedRowKeys,
-  //   onChange: setSelectedRowKeys,
-  // };
-
-  // const columns = [
-  //   {
-  //     title: t('knownFacts.text'),
-  //     dataIndex: 'text',
-  //   },
-  //   {
-  //     title: t('createdAt'),
-  //     dataIndex: 'creationTimestamp',
-  //     sorter: (a: KnownFact, b: KnownFact) =>
-  //       new Date(a.creationTimestamp ?? Date.now()).getTime() -
-  //       new Date(b.creationTimestamp ?? Date.now()).getTime(),
-  //     render: (creationTimestamp: Date) => (
-  //       <div className={styles.columnCentered}>
-  //         <span className={styles.date}>
-  //           {creationTimestamp
-  //             ? new Intl.DateTimeFormat('it', {
-  //                 dateStyle: 'short',
-  //                 timeStyle: 'short',
-  //               }).format(new Date(creationTimestamp))
-  //             : '-'}
-  //         </span>
-  //       </div>
-  //     ),
-  //   },
-  //   {
-  //     title: t('actions'),
-  //     key: 'action',
-  //     render: (_value: any, kf: KnownFact) => (
-  //       <div className={styles.actionColumn}>
-  //         <Button
-  //           danger
-  //           icon={<DeleteOutlined />}
-  //           disabled={selectedRowKeys?.length > 0}
-  //           title={t('delete') || 'Delete'}
-  //           onClick={() => {
-  //             kf.knownFactID &&
-  //               Modal.confirm({
-  //                 title: t('knownFacts.deleteConfirmTitle'),
-  //                 content: t('knownFacts.deleteConfirmMessage'),
-  //                 okText: t('confirm'),
-  //                 cancelText: t('cancel'),
-  //                 centered: true,
-  //                 autoFocusButton: 'cancel',
-  //                 onOk: async () => {
-  //                   try {
-  //                     const response = await deleteKnownFact(
-  //                       sessionID,
-  //                       kf.knownFactID
-  //                     );
-  //                     if (response.resultCode === 0) {
-  //                       toast.success(t('knownFacts.deleteSuccess'));
-  //                       setSelectedRowKeys([]);
-  //                       fetchKnownFacts();
-  //                     } else {
-  //                       console.error(response);
-  //                       toast.error(
-  //                         t(getErrori18nKey(response.resultCode), {
-  //                           ns: 'common',
-  //                         })
-  //                       );
-  //                     }
-  //                   } catch (_e) {
-  //                     let error = _e as Error;
-  //                     toast.error(t('Error') + error.message);
-  //                   }
-  //                 },
-  //               });
-  //           }}
-  //         />
-  //       </div>
-  //     ),
-  //   },
-  // ];
 
   return (
     <Drawer