@memori.ai/memori-react 8.7.0 → 8.7.2

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -417,6 +417,7 @@ export interface Props {
   applyVarsToRoot?: boolean;
   showFunctionCache?: boolean;
   authToken?: string;
+  __WEBCOMPONENT__?: boolean;
 }
 
 const MemoriWidget = ({
@@ -467,6 +468,7 @@ const MemoriWidget = ({
   additionalSettings,
   customMediaRenderer,
   userAvatar,
+  __WEBCOMPONENT__ = false,
   useMathFormatting = false,
   autoStart = false,
   applyVarsToRoot = false,
@@ -1196,6 +1198,13 @@ const MemoriWidget = ({
     });
   };
 
+  useEffect(() => {
+    if (initialSessionID) {
+      setSessionId(initialSessionID);
+      onClickStart(undefined, false, undefined, initialSessionID);
+    }
+  }, [initialSessionID]);
+
   /**
    * Opening Session
    */
@@ -2322,12 +2331,17 @@ const MemoriWidget = ({
    * Handles clicking the start button to begin or resume a session
    * @param session Optional existing session with dialog state and ID
    * @param initialSessionExpired Whether the initial session has expired
-   */
+   /**
+    * Handles clicking the start button to begin or resume a session
+    * @param session Optional existing session with dialog state and ID
+    * @param initialSessionExpired Whether the initial session has expired
+    */
   const onClickStart = useCallback(
     async (
       session?: { dialogState: DialogState; sessionID: string },
       initialSessionExpired = false,
-      chatLog?: ChatLog
+      chatLog?: ChatLog,
+      targetSessionID?: string
     ) => {
       // console.log('[onClickStart] Starting with params:', {
       //   session,
@@ -2350,7 +2364,7 @@ const MemoriWidget = ({
         undefined
       );
       let birth = birthDate || storageBirthDate || user?.birthDate;
-      if (!birth && autoStart && initialSessionID)
+      if (!birth && autoStart && (initialSessionID || targetSessionID))
         birth = '1970-01-01T10:24:03.845Z';
 
       const localPosition = getLocalConfig<Venue | undefined>(
@@ -2416,7 +2430,6 @@ const MemoriWidget = ({
         if (session?.dialogState) {
           // reset history
           if (!chatLog) {
-            // console.log('[onClickStart] No chat log, resetting history');
             setHistory([]);
 
             // Use translateAndSpeak which already handles the speaking
@@ -2470,7 +2483,7 @@ const MemoriWidget = ({
                   })
                 );
               } catch (e) {
-                console.error('[CLICK_START] Error translating messages:', e);
+                console.error('[onClickStart] Error translating messages:', e);
               }
             }
 
@@ -2488,16 +2501,16 @@ const MemoriWidget = ({
         } else if (session?.resultCode === 0) {
           await onClickStart((session as any) || undefined);
         } else {
-          // console.log('[onClickStart] Session creation failed');
           setLoading(false);
         }
 
         return;
       }
       // Handle initial session
-      else if (initialSessionID) {
+      else if (initialSessionID || targetSessionID) {
+        const sessionID = targetSessionID ?? initialSessionID;
         // check if session is valid and not expired
-        const { currentState, ...response } = await getSession(sessionID);
+        const { currentState, ...response } = await getSession(sessionID!);
 
         if (response.resultCode !== 0 || !currentState) {
           setGotErrorInOpening(true);
@@ -2525,11 +2538,11 @@ const MemoriWidget = ({
         ) {
           try {
             // reset tag
-            await changeTag(memori.engineMemoriID!, sessionID, '-');
+            await changeTag(memori.engineMemoriID!, sessionID!, '-');
             // change tag to receiver
             const session = await changeTag(
               memori.engineMemoriID!,
-              sessionID,
+              sessionID!,
               personification.tag,
               personification.pin
             );
@@ -2570,11 +2583,11 @@ const MemoriWidget = ({
         ) {
           try {
             // reset tag
-            await changeTag(memori.engineMemoriID!, sessionID, '-');
+            await changeTag(memori.engineMemoriID!, sessionID!, '-');
             // change tag to anonymous
             const session = await changeTag(
               memori.engineMemoriID!,
-              sessionID,
+              sessionID!,
               anonTag
             );
 
@@ -2607,7 +2620,7 @@ const MemoriWidget = ({
         // No tag changes needed
         else {
           try {
-            const { chatLogs } = await getSessionChatLogs(sessionID, sessionID);
+            const { chatLogs } = await getSessionChatLogs(sessionID!, sessionID!);
 
             const messages = chatLogs?.[0]?.lines.map(
               (l, i) =>
@@ -2643,13 +2656,13 @@ const MemoriWidget = ({
                   }))
                 );
               } catch (e) {
-                console.error('[CLICK_START] Error translating messages:', e);
+                console.error('[onClickStart] Error translating messages:', e);
               }
             }
 
             setHistory(translatedMessages);
           } catch (e) {
-            console.error('[CLICK_START] Error retrieving chat logs:', e);
+            console.error('[onClickStart] Error retrieving chat logs:', e);
           }
 
           if (
@@ -2657,6 +2670,7 @@ const MemoriWidget = ({
             !initialQuestion
           ) {
             // we have a history, don't push message
+            setHasUserActivatedSpeak(true);
             await translateAndSpeak(
               currentState,
               userLang,
@@ -2666,6 +2680,7 @@ const MemoriWidget = ({
               !!translatedMessages?.length
             );
           } else {
+            console.log('[onClickStart] Starting with initial question');
             // remove default initial message
             translatedMessages = [];
             setHistory([]);
@@ -2674,7 +2689,7 @@ const MemoriWidget = ({
 
             // we have no chat history, we start by initial question
             const response = await postTextEnteredEvent({
-              sessionId: sessionID,
+              sessionId: sessionID!,
               text: initialQuestion,
             });
 
@@ -2708,10 +2723,6 @@ const MemoriWidget = ({
   );
 
   useEffect(() => {
-    // Don't auto-start for HIDDEN_CHAT layout - let the layout handle it
-    // console.log('clickedStart', clickedStart);
-    // console.log('autoStart', autoStart);
-    // console.log('selectedLayout', selectedLayout);
     if (!clickedStart && autoStart && selectedLayout !== 'HIDDEN_CHAT') {
       onClickStart();
     }
@@ -2824,6 +2835,8 @@ const MemoriWidget = ({
   }, [tenant?.billingDelegation, deepThoughtEnabled]);
 
   useEffect(() => {
+    if (__WEBCOMPONENT__) return;
+
     const closeSession = () => {
       if (sessionId) {
         deleteSession(sessionId);

package/src/index.tsx

@@ -43,6 +43,7 @@ export interface Props {
   showDates?: boolean;
   showContextPerLine?: boolean;
   showSettings?: boolean;
+  __WEBCOMPONENT__?: boolean;
   showClear?: boolean;
   showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
@@ -149,10 +150,13 @@ const Memori: React.FC<Props> = ({
   useMathFormatting = false,
   autoStart,
   applyVarsToRoot = false,
+  __WEBCOMPONENT__ = false,
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [tenant, setTenant] = useState<Tenant>();
   const [provider, setProvider] = useState<string | undefined>();
+  const [sessionId, setSessionId] = useState<string | undefined>();
+
   const { t } = useTranslation();
 
   if (!((memoriID && ownerUserID) || (memoriName && ownerUserName))) {
@@ -241,6 +245,42 @@ const Memori: React.FC<Props> = ({
     fetchTenant();
   }, [fetchTenant]);
 
+  useEffect(() => {
+    const targetNode =
+      document.querySelector(`memori-client[memoriname="${memori?.name}"]`) ||
+      document.querySelector(`memori-client[memoriid="${memori?.memoriID}"]`) ||
+      document.querySelector('memori-client');
+    if (!targetNode) {
+      return;
+    }
+
+    const config = { attributes: true, childList: false, subtree: false };
+    const callback: MutationCallback = (mutationList, _observer) => {
+      for (const mutation of mutationList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName?.toLowerCase() === 'authtoken'
+        ) {
+          const target =
+            mutation.target.nodeName === 'MEMORI-CLIENT'
+              ? mutation.target
+              : mutation.target.parentElement;
+          // @ts-ignore
+          const targetSessionId = target.getAttribute('sessionid') || undefined;
+          if (target && targetSessionId) {
+            setSessionId(targetSessionId);
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(targetNode, config);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   /**
    * Sets the language in the i18n instance
    */
@@ -338,67 +378,71 @@ const Memori: React.FC<Props> = ({
     <I18nWrapper>
       <VisemeProvider>
         <ArtifactProvider>
-        <Toaster position="top-center" reverseOrder={true} />
-        {memori ? (
-          <MemoriWidget
-            // General props
-            layout={layout}
-            customLayout={customLayout}
-            height={height}
-            baseUrl={
-              baseURL ||
-              (tenantID.startsWith('https://') || tenantID.startsWith('http://')
-                ? tenantID
-                : `https://${tenantID}`)
-            }
-            apiURL={apiURL}
-            engineURL={engineURL}
-            memori={{
-              ...memori,
-              secretToken,
-            }}
-            ownerUserName={ownerUserName ?? memori.ownerUserName}
-            ownerUserID={ownerUserID ?? memori.ownerUserID}
-            tenant={tenant}
-            tenantID={tenantID}
-            sessionID={sessionID}
-            secret={secretToken}
-            ttsProvider={provider ? (provider as 'azure' | 'openai') : 'azure'}
-            integration={layoutIntegration}
-            authToken={authToken}
-            onStateChange={onStateChange}
-            additionalInfo={additionalInfo}
-            customMediaRenderer={customMediaRenderer}
-            additionalSettings={additionalSettings}
-            userAvatar={userAvatar}
-            applyVarsToRoot={applyVarsToRoot}
-            disableTextEnteredEvents={disableTextEnteredEvents}
-            // From layout, from client if allowed
-            {...clientAttributes}
-            // Client only
-            showOnlyLastMessages={showOnlyLastMessages}
-            showInputs={showInputs}
-            showDates={showDates}
-          />
-        ) : (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <p
+          <Toaster position="top-center" reverseOrder={true} />
+          {memori ? (
+            <MemoriWidget
+              // General props
+              layout={layout}
+              customLayout={customLayout}
+              height={height}
+              baseUrl={
+                baseURL ||
+                (tenantID.startsWith('https://') ||
+                tenantID.startsWith('http://')
+                  ? tenantID
+                  : `https://${tenantID}`)
+              }
+              apiURL={apiURL}
+              engineURL={engineURL}
+              memori={{
+                ...memori,
+                secretToken,
+              }}
+              __WEBCOMPONENT__={__WEBCOMPONENT__}
+              ownerUserName={ownerUserName ?? memori.ownerUserName}
+              ownerUserID={ownerUserID ?? memori.ownerUserID}
+              tenant={tenant}
+              tenantID={tenantID}
+              sessionID={sessionID ?? sessionId}
+              secret={secretToken}
+              ttsProvider={
+                provider ? (provider as 'azure' | 'openai') : 'azure'
+              }
+              integration={layoutIntegration}
+              authToken={authToken}
+              onStateChange={onStateChange}
+              additionalInfo={additionalInfo}
+              customMediaRenderer={customMediaRenderer}
+              additionalSettings={additionalSettings}
+              userAvatar={userAvatar}
+              applyVarsToRoot={applyVarsToRoot}
+              disableTextEnteredEvents={disableTextEnteredEvents}
+              // From layout, from client if allowed
+              {...clientAttributes}
+              // Client only
+              showOnlyLastMessages={showOnlyLastMessages}
+              showInputs={showInputs}
+              showDates={showDates}
+            />
+          ) : (
+            <div
               style={{
-                textAlign: 'center',
-                margin: '2rem auto',
-                textTransform: 'capitalize',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
               }}
             >
-              {t('loading') || 'Loading'}...
-            </p>
-          </div>
-        )}
+              <p
+                style={{
+                  textAlign: 'center',
+                  margin: '2rem auto',
+                  textTransform: 'capitalize',
+                }}
+              >
+                {t('loading') || 'Loading'}...
+              </p>
+            </div>
+          )}
         </ArtifactProvider>
       </VisemeProvider>
     </I18nWrapper>

package/src/styles.css

@@ -12,6 +12,7 @@
 @import url('./components/ui/Expandable.css');
 @import url('./components/ui/Slider.css');
 @import url('./components/ui/Alert.css');
+@import url('./components/ui/Dropdown.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');