@memori.ai/memori-react 7.26.2 → 7.27.1

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

@@ -7627,6 +7627,238 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ChatBubble with output code unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container"
+  >
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+      title="Memori"
+    >
+      <img
+        alt="Memori"
+        class="memori-chat--bubble-avatar-img"
+        src="https://aisuru.com/images/aisuru/square_logo.png"
+      />
+    </picture>
+    <div
+      class="memori-chat--bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <div
+        class="memori-chat--bubble-content"
+        dir="auto"
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </p>
+        
+
+        <h1>
+          titolo
+        </h1>
+        
+
+        <p>
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+        
+
+        <p>
+          <output
+            class="memori-output"
+          >
+            { "data": [ 0, 1, 2 ] }
+          </output>
+        </p>
+      </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copyRawCode"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 9.5 8 12l2 2.5"
+              />
+              <path
+                d="m14 9.5 2 2.5-2 2.5"
+              />
+              <rect
+                height="18"
+                rx="2"
+                width="18"
+                x="3"
+                y="3"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ChatBubble with reasoning unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container"
+  >
+    <picture
+      class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
+      title="Memori"
+    >
+      <img
+        alt="Memori"
+        class="memori-chat--bubble-avatar-img"
+        src="https://aisuru.com/images/aisuru/square_logo.png"
+      />
+    </picture>
+    <div
+      class="memori-chat--bubble memori-chat--with-addon transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <div
+        class="memori-chat--bubble-content"
+        dir="auto"
+      >
+        <details
+          class="memori-think"
+        >
+          <summary>
+            reasoning
+          </summary>
+          Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development. Its purpose is to permit a page layout to be designed, independently of the copy that will subsequently populate it, or to demonstrate various fonts of a typeface without meaningful text that could be distracting. More at WikipediaDicta sequi dignissimos quis earum. Quis vel sint voluptas eos ex assumenda. Similique sed modi deleniti et ut quas cumque. Quaerat quis labore ut asperiores aliquid. Voluptatem similique nostrum neque culpa. Ex et iste voluptas est itaque aut aliquam. Qui error perspiciatis aut fuga maiores sint aut aspernatur. Veritatis ipsam iure voluptas asperiores consequuntur unde consequatur vitae. Sequi doloremque inventore reiciendis doloremque voluptates. Quidem repellendus id maxime. Fuga autem quam reiciendis provident in ad. Quia ut nihil voluptate voluptas ipsa porro. Magnam assumenda earum ipsam quisquam aut perspiciatis officiis. Et totam deleniti sed quisquam repellat. Ducimus nostrum voluptatem deleniti sed. Et accusamus temporibus occaecati. Est explicabo vel eum animi deleniti. Qui vel totam est officiis ducimus eligendi iure. Impedit eum ipsa omnis qui dolorem nobis at inventore. Aliquid aliquam esse neque ut vel magni accusamus. Et quia quas consectetur. Dolor dolorum sunt aut enim et quam ut expedita. Quia ut odio totam mollitia. Qui tempore quia quaerat quis enim. Numquam quasi maiores ipsa qui illo. Ea iste iure in corporis non nihil molestias quisquam. Sed suscipit esse dolorem omnis dolore aut. Enim eos id eligendi doloremque.
+        </details>
+        
+Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+      </div>
+      <div
+        class="memori-chat--bubble-addon"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copy"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-button--icon-only memori-chat--bubble-action-icon"
+          title="copyRawCode"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 9.5 8 12l2 2.5"
+              />
+              <path
+                d="m14 9.5 2 2.5-2 2.5"
+              />
+              <rect
+                height="18"
+                rx="2"
+                width="18"
+                x="3"
+                y="3"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ChatBubble with translation and original unchanged 1`] = `
 <div>
   <div

package/src/components/Header/Header.stories.tsx

@@ -58,6 +58,8 @@ const Template: Story<Props> = args => {
         setControlsPosition={() => {}}
         hideEmissions={false}
         setHideEmissions={() => {}}
+        setAvatarType={() => {}}
+        setEnablePositionControls={() => {}}
       />
       <LoginDrawer
         tenant={tenant}
@@ -68,7 +70,11 @@ const Template: Story<Props> = args => {
           setShowLoginDrawer(false);
         }}
         onLogout={() => setShowLoginDrawer(false)}
-        apiUrl="https://backend.memori.ai"
+        apiClient={
+          {
+            backend: {},
+          } as any
+        }
       />
     </I18nWrapper>
   );

package/src/components/Header/Header.tsx

@@ -48,6 +48,7 @@ export interface Props {
   loginToken?: string;
   user?: User;
   sessionID?: string;
+  fullScreenHandler?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Header: React.FC<Props> = ({
@@ -75,6 +76,7 @@ const Header: React.FC<Props> = ({
   loginToken,
   user,
   sessionID,
+  fullScreenHandler,
 }) => {
   const { t } = useTranslation();
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
@@ -137,30 +139,33 @@ const Header: React.FC<Props> = ({
               : t('fullscreenEnter') || 'Enter fullscreen'
           }
           icon={fullScreen ? <FullscreenExit /> : <Fullscreen />}
-          onClick={() => {
-            if (!document.fullscreenElement) {
-              const memoriWidget = document.querySelector('.memori-widget');
-              if (memoriWidget) {
-                // Set white background before entering fullscreen
-                (memoriWidget as HTMLElement).style.backgroundColor =
-                  '#FFFFFF';
-                memoriWidget.requestFullscreen().catch(err => {
-                  console.warn('Error attempting to enable fullscreen:', err);
+          onClick={
+            fullScreenHandler ||
+            (() => {
+              if (!document.fullscreenElement) {
+                const memoriWidget = document.querySelector('.memori-widget');
+                if (memoriWidget) {
+                  // Set white background before entering fullscreen
+                  (memoriWidget as HTMLElement).style.backgroundColor =
+                    '#FFFFFF';
+                  memoriWidget.requestFullscreen().catch(err => {
+                    console.warn('Error attempting to enable fullscreen:', err);
+                  });
+                }
+                setFullScreen(true);
+              } else if (document.exitFullscreen) {
+                const memoriWidget = document.querySelector('.memori-widget');
+                if (memoriWidget) {
+                  // Reset background on exit
+                  (memoriWidget as HTMLElement).style.backgroundColor = '';
+                }
+                document.exitFullscreen().catch(err => {
+                  console.warn('Error attempting to exit fullscreen:', err);
                 });
+                setFullScreen(false);
               }
-              setFullScreen(true);
-            } else if (document.exitFullscreen) {
-              const memoriWidget = document.querySelector('.memori-widget');
-              if (memoriWidget) {
-                // Reset background on exit
-                (memoriWidget as HTMLElement).style.backgroundColor = '';
-              }
-              document.exitFullscreen().catch(err => {
-                console.warn('Error attempting to exit fullscreen:', err);
-              });
-              setFullScreen(false);
-            }
-          }}
+            })
+          }
         />
       )}
       {memori.enableDeepThought && !!loginToken && user?.pAndCUAccepted && (

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -352,6 +352,7 @@ export interface LayoutProps {
   hasUserActivatedSpeak?: boolean;
   showUpload?: boolean;
   loading?: boolean;
+  onClickStart?: () => void;
 }
 
 export interface Props {
@@ -3654,6 +3655,7 @@ const MemoriWidget = ({
         sessionId={sessionId}
         hasUserActivatedSpeak={hasUserActivatedSpeak}
         loading={loading}
+        onClickStart={onClickStart}
       />
 
       <audio

package/src/components/ShareButton/ShareButton.css

@@ -65,3 +65,9 @@ a.memori-share-button--link {
     background: #fff;
     color: #000;
 }
+
+.memori-share-button--li-shared {
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--memori-primary);
+    margin-bottom: 0.5rem;
+}

package/src/components/ShareButton/ShareButton.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import I18nWrapper from '../../I18nWrapper';
 import ShareButton, { Props } from './ShareButton';
-import { tenant } from '../../mocks/data';
+import { tenant, memori, sessionID } from '../../mocks/data';
 
 import './ShareButton.css';
 
@@ -79,3 +79,20 @@ WithQrCodeAndOtherTenant.args = {
     theme: 'tailoor',
   },
 };
+
+export const WithMemoriAndSessionID = Template.bind({});
+WithMemoriAndSessionID.args = {
+  url: 'https://memori.ai',
+  memori,
+  sessionID,
+  showQrCode: false,
+};
+
+export const WithMemoriAndSessionIDAndQrCode = Template.bind({});
+WithMemoriAndSessionIDAndQrCode.args = {
+  url: 'https://memori.ai',
+  memori,
+  sessionID,
+  showQrCode: true,
+  align: 'right',
+};

package/src/components/ShareButton/ShareButton.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import ShareButton from './ShareButton';
-import { tenant } from '../../mocks/data';
+import { tenant, memori, sessionID } from '../../mocks/data';
 
 it('renders ShareButton unchanged', () => {
   const { container } = render(<ShareButton />);
@@ -44,3 +44,10 @@ it('renders ShareButton with other tenant img set unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders ShareButton with share chat unchanged', () => {
+  const { container } = render(
+    <ShareButton memori={memori} sessionID={sessionID} />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ShareButton/ShareButton.tsx

@@ -13,10 +13,12 @@ import { QRCodeCanvas } from 'qrcode.react';
 import { Menu } from '@headlessui/react';
 import Button from '../ui/Button';
 import cx from 'classnames';
-import { Tenant } from '@memori.ai/memori-api-client/dist/types';
+import { Tenant, Memori } from '@memori.ai/memori-api-client/dist/types';
 
 export interface Props {
   tenant?: Tenant;
+  memori?: Memori;
+  sessionID?: string;
   url?: string;
   title?: string;
   className?: string;
@@ -28,6 +30,8 @@ export interface Props {
 
 const ShareButton: React.FC<Props> = ({
   tenant,
+  memori,
+  sessionID,
   url,
   title = '',
   className,
@@ -36,7 +40,7 @@ const ShareButton: React.FC<Props> = ({
   showQrCode = true,
   align = 'right',
 }: Props) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [targetUrl, setTargetUrl] = useState(url);
 
   const qrImageURL = useMemo(
@@ -132,6 +136,33 @@ const ShareButton: React.FC<Props> = ({
         </div>
       </Menu.Button>
       <Menu.Items className="memori-share-button--overlay" as="ul">
+        {memori && sessionID && (
+          <Menu.Item
+            key="shared"
+            as="li"
+            className="memori-share-button--li memori-share-button--li-shared"
+          >
+            <a
+              className={cx(
+                'memori-button',
+                'memori-button--with-icon',
+                'memori-button--ghost',
+                'memori-button--padded',
+                'memori-share-button--link'
+              )}
+              href={`${baseUrl ?? 'https://www.aisuru.com'}/${
+                i18n.language === 'it' ? 'it' : 'en'
+              }/shared/${memori.ownerUserID}/${memori.memoriID}/${sessionID}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="memori-button--icon">
+                <Share />
+              </div>
+              {t('widget.shareChat') || 'Share chat'}
+            </a>
+          </Menu.Item>
+        )}
         <Menu.Item key="copy" as="li" className="memori-share-button--li">
           <Button
             className="memori-share-button--link"

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

@@ -140,6 +140,41 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ShareButton with share chat unchanged 1`] = `
+<div>
+  <div
+    class="memori-share-button"
+    data-headlessui-state=""
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori-button--primary"
+      data-headlessui-state=""
+      id="headlessui-menu-button-:rg:"
+      title="widget.share"
+      type="button"
+    >
+      <div
+        class="memori-button--icon"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          role="img"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders ShareButton with tenant img set unchanged 1`] = `
 <div>
   <div

package/src/components/UploadButton/UploadButton.tsx

@@ -125,11 +125,13 @@ const UploadButton: React.FC<UploadManagerProps> = ({
         .replace(/>/g, '&gt;');
     };
 
-    // ✅ MIGLIORE SOLUZIONE: Tag XML valido con attributi chiari
     const escapedFileName = escapeAttributeValue(file.name);
     const formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
+
 ${file.content}
+
 </document_attachment>`;
+
     //keep just the images in the documentPreviewFiles
     const imageFiles = documentPreviewFiles.filter(
       (file: any) => file.type === 'image'

package/src/components/layouts/HiddenChat.tsx

@@ -15,11 +15,13 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
   // startPanelProps,
   sessionId,
   hasUserActivatedSpeak,
+  onClickStart,
 }) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [fullScreen, setFullScreen] = useState(false);
   const [fullScreenAvailable, setFullScreenAvailable] = useState(false);
+  const hasStarted = useRef(false);
 
   // Use refs to store original sidebar properties to restore them later
   const originalSidebarStyles = useRef({
@@ -81,7 +83,13 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
     }
 
     setIsOpen(prev => {
-      return !prev;
+      const newIsOpen = !prev;
+      // Only call onClickStart when opening the sidebar for the first time
+      if (newIsOpen && !hasStarted.current && onClickStart) {
+        hasStarted.current = true;
+        onClickStart();
+      }
+      return newIsOpen;
     });
   };
 
@@ -188,25 +196,9 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
                   }}
                   {...headerProps}
                   className="memori-hidden-chat-layout-header--layout"
+                  fullScreenHandler={handleFullscreenToggle}
                 />
               )}
-              {fullScreenAvailable && (
-                <button
-                  className="memori-fullscreen-button memori-button--primary memori-button--icon"
-                  onClick={handleFullscreenToggle}
-                  title={
-                    fullScreen
-                      ? t('fullscreenExit') || 'Exit fullscreen'
-                      : t('fullscreenEnter') || 'Enter fullscreen'
-                  }
-                >
-                  {fullScreen ? (
-                    <FullscreenExit className="memori-icon" />
-                  ) : (
-                    <Fullscreen className="memori-icon" />
-                  )}
-                </button>
-              )}
             </div>
           </div>
           <div id="extension" />

package/src/components/layouts/layouts.stories.tsx

@@ -417,7 +417,7 @@ HiddenChat.args = {
   uiLang: 'it',
   showShare: true,
   showSettings: true,
-  autoStart: true,
+  // autoStart: true,
   // memori,
   // tenant,
   memori: {

package/src/helpers/message.ts

@@ -62,7 +62,8 @@ export const truncateMessage = (message: string) => {
 
 export const renderMsg = (
   text: string,
-  useMathFormatting = false
+  useMathFormatting = false,
+  reasoningText = 'Reasoning...'
 ): {
   text: string;
 } => {
@@ -74,6 +75,10 @@ export const renderMsg = (
         /\[([^\]]+)\]\(([^\)]+)\)/g,
         '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
       )
+      .replaceAll(
+        /<think>([\s\S]*?)<\/think>/g,
+        `<details class="memori-think"><summary>${reasoningText}</summary>$1</details>`
+      )
       .replaceAll(/```markdown([^```]+)```/g, '$1')
       .replaceAll('($', '( $')
       .replaceAll(':$', ': $')

package/src/helpers/utils.ts

@@ -4,6 +4,11 @@ import * as THREE from 'three';
 
 export const hasTouchscreen = (): boolean => {
   let hasTouchScreen = false;
+
+  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+    return hasTouchScreen;
+  }
+
   if ('maxTouchPoints' in navigator) {
     hasTouchScreen = navigator.maxTouchPoints > 0;
   } else if ('msMaxTouchPoints' in navigator) {

package/src/locales/de.json

@@ -45,6 +45,7 @@
   "memoriBlockedReasonExceedChats": "weil der monatliche Schwellenwert für erlaubte Chats überschritten wurde.",
   "memoriBlockedGiverHelper": "Sie können es weiterhin als Administrator verwalten, andere Benutzer können jedoch nicht damit interagieren.",
   "generatedByAI": "Von KI generierte Antworten können gelegentlich falsche Informationen generieren",
+  "reasoning": "Überlegung...",
   "whyThisAnswer": "Warum diese Antwort?",
   "whyThisAnswerHelper": "Diese Antwort wurde automatisch von einer künstlichen Intelligenz auf Basis dieser verifizierten Inhalte generiert.",
   "receiverLabel": "Zugewiesen an",
@@ -106,6 +107,7 @@
     "position": "Positionspräferenzen",
     "settings": "Einstellungen",
     "share": "Aktie",
+    "shareChat": "Chat teilen",
     "sendOnKeypress": "Drücken Sie zum Senden die Eingabetaste",
     "sendOnClick": "Klicken Sie auf Senden",
     "boardOfExperts": "Expertengremium",

package/src/locales/en.json

@@ -45,6 +45,7 @@
   "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",
+  "reasoning": "Reasoning...",
   "whyThisAnswer": "Why this answer?",
   "whyThisAnswerHelper": "This answer was generated automatically by an artificial intelligence based on these verified contents.",
   "receiverLabel": "Assigned to",
@@ -106,6 +107,7 @@
     "position": "Position preferences",
     "settings": "Settings",
     "share": "Share",
+    "shareChat": "Share chat",
     "sendOnKeypress": "Hit Enter to send",
     "sendOnClick": "Click on Submit",
     "boardOfExperts": "Board of experts",