@memori.ai/memori-react 8.8.5 → 8.9.0

package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.tsx

@@ -0,0 +1,373 @@
+import { useEffect, useRef } from 'react';
+import { useArtifact } from '../context/ArtifactContext';
+import type { ArtifactData } from '../types/artifact.types';
+import { Message } from '@memori.ai/memori-api-client/dist/types';
+
+// Queue for calls made before the component is ready
+const pendingCalls: Array<{ method: string; args: any[] }> = [];
+let isReady = false;
+
+/**
+ * Initialize the MemoriArtifactAPI stub on window
+ * This should be called as early as possible to prevent "undefined" errors
+ */
+export const initMemoriArtifactAPI = () => {
+  if (typeof window === 'undefined') return;
+  
+  // Only initialize if not already present
+  if ((window as any).MemoriArtifactAPI) {
+    return;
+  }
+
+  (window as any).MemoriArtifactAPI = {
+    _isReady: () => isReady,
+    _setReady: (ready: boolean) => { isReady = ready; },
+    _getPendingCalls: () => pendingCalls,
+    _clearPendingCalls: () => { pendingCalls.length = 0; },
+    
+    openArtifact: (artifact: ArtifactData) => {
+      if (!isReady) {
+        pendingCalls.push({ method: 'openArtifact', args: [artifact] });
+      }
+    },
+    createAndOpenArtifact: (content: string, mimeType?: string, title?: string) => {
+      if (!isReady) {
+        pendingCalls.push({ method: 'createAndOpenArtifact', args: [content, mimeType, title] });
+      }
+    },
+    createFromOutputElement: (outputElement: HTMLOutputElement) => {
+      if (!isReady) {
+        pendingCalls.push({ method: 'createFromOutputElement', args: [outputElement] });
+        return 'pending';
+      }
+      return 'not-ready';
+    },
+    closeArtifact: () => {
+      if (!isReady) {
+        pendingCalls.push({ method: 'closeArtifact', args: [] });
+      }
+    },
+    toggleFullscreen: () => {
+      if (!isReady) {
+        pendingCalls.push({ method: 'toggleFullscreen', args: [] });
+      }
+    },
+    getState: () => {
+      if (!isReady) {
+        return { currentArtifact: null, isDrawerOpen: false, isFullscreen: false };
+      }
+      return { currentArtifact: null, isDrawerOpen: false, isFullscreen: false };
+    },
+  };
+};
+
+// Initialize immediately when this module is loaded
+initMemoriArtifactAPI();
+
+/**
+ * Componente che espone le funzioni dell'Artifact System come API globale
+ * Questo permette di controllare gli artifacts da JavaScript vanilla esterno
+ */
+export const ArtifactAPIBridge = ({
+  pushMessage,
+}: {
+  pushMessage: (message: Message) => void;
+}) => {
+  const { openArtifact, closeArtifact, toggleFullscreen, state } =
+    useArtifact();
+  
+  const apiRef = useRef<any>(null);
+
+  useEffect(() => {
+    // Update API with actual implementations
+    if (typeof window !== 'undefined') {
+      const windowApi = (window as any).MemoriArtifactAPI;
+      
+      // Store reference to actual implementations
+      apiRef.current = {
+        /**
+         * Apri un artifact esistente
+         * @param artifact - Oggetto ArtifactData completo
+         */
+        openArtifact: (artifact: ArtifactData) => {
+          openArtifact(artifact);
+        },
+
+        /**
+         * Crea e apri un artifact con parametri semplici
+         * @param content - Contenuto dell'artifact (HTML, markdown, ecc.)
+         * @param mimeType - Tipo MIME (default: 'html')
+         * @param title - Titolo da mostrare (default: auto-generato)
+         */
+        createAndOpenArtifact: (
+          content: string,
+          mimeType: string = 'html',
+          title?: string
+        ) => {
+          const autoTitle = title || getTitleFromMimeType(mimeType);
+
+          // Create the artifact object
+          const artifact: ArtifactData = {
+            id: `artifact-${Date.now()}-${Math.random()
+              .toString(36)
+              .substr(2, 9)}`,
+            content,
+            mimeType,
+            title: autoTitle,
+            timestamp: new Date(),
+            size: content.length,
+          };
+
+          // Create wrapped message text for artifact detection
+          // Don't reassign content parameter - use a new variable
+          let messageText = content;
+          if (!messageText.includes('<output class="memori-artifact">')) {
+            messageText = `<output class="memori-artifact" data-mimetype="${mimeType}" data-title="${autoTitle}">${content}</output>`;
+          }
+
+          //we have to push in the history the artifact as message
+          pushMessage({
+            text: messageText,
+            timestamp: new Date().toISOString(),
+            fromUser: false as const,
+            media: [],
+            initial: false,
+            translatedText: undefined,
+            questionAnswered: undefined,
+            generatedByAI: false,
+            contextVars: undefined,
+            date: undefined,
+            placeName: undefined,
+            placeLatitude: undefined,
+            placeLongitude: undefined,
+            placeUncertaintyKm: undefined,
+          });
+
+          // Open the artifact immediately
+          openArtifact(artifact);
+        },
+
+        /**
+         * Crea un artifact da un elemento <output> esistente nel DOM
+         * @param outputElement - Elemento DOM <output class="memori-artifact">
+         * @returns artifactId
+         */
+        createFromOutputElement: (outputElement: HTMLOutputElement) => {
+          const content = outputElement.innerHTML;
+          const mimeType =
+            outputElement.getAttribute('data-mimetype') || 'html';
+          const title =
+            outputElement.getAttribute('data-title') ||
+            getTitleFromMimeType(mimeType);
+
+          // Nascondi l'elemento originale
+          outputElement.style.display = 'none';
+          outputElement.setAttribute('data-memori-processed', 'true');
+
+          const artifact: ArtifactData = {
+            id: `artifact-${Date.now()}-${Math.random()
+              .toString(36)
+              .substr(2, 9)}`,
+            content,
+            mimeType,
+            title,
+            timestamp: new Date(),
+            size: content.length,
+          };
+
+          // Create wrapped message text for artifact detection
+          // Don't reassign content - use a new variable
+          let messageText = content;
+          if (!messageText.includes('<output class="memori-artifact">')) {
+            messageText = `<output class="memori-artifact" data-mimetype="${mimeType}" data-title="${title}">${content}</output>`;
+          }
+
+          pushMessage({
+            text: messageText,
+            timestamp: new Date().toISOString(),
+            fromUser: false as const,
+            media: [],
+            initial: false,
+            translatedText: undefined,
+            questionAnswered: undefined,
+            generatedByAI: false,
+            contextVars: undefined,
+            date: undefined,
+            placeName: undefined,
+            placeLatitude: undefined,
+            placeLongitude: undefined,
+            placeUncertaintyKm: undefined,
+          });
+
+          // Open the artifact immediately
+          openArtifact(artifact);
+
+          return artifact.id;
+        },
+
+        /**
+         * Chiudi l'artifact drawer corrente
+         */
+        closeArtifact: () => {
+          closeArtifact();
+        },
+
+        /**
+         * Toggle fullscreen dell'artifact drawer
+         */
+        toggleFullscreen: () => {
+          toggleFullscreen();
+        },
+
+        /**
+         * Ottieni lo stato corrente del sistema artifacts
+         */
+        getState: () => {
+          return {
+            currentArtifact: state.currentArtifact,
+            isDrawerOpen: state.isDrawerOpen,
+            isFullscreen: state.isFullscreen,
+          };
+        },
+      };
+
+      // Update window API methods to use the real implementations
+      if (windowApi) {
+        windowApi.openArtifact = apiRef.current.openArtifact;
+        windowApi.createAndOpenArtifact = apiRef.current.createAndOpenArtifact;
+        windowApi.createFromOutputElement = apiRef.current.createFromOutputElement;
+        windowApi.closeArtifact = apiRef.current.closeArtifact;
+        windowApi.toggleFullscreen = apiRef.current.toggleFullscreen;
+        windowApi.getState = apiRef.current.getState;
+
+        // Mark API as ready
+        windowApi._setReady(true);
+        
+        // Process any pending calls that were queued before ready
+        const pendingCalls = windowApi._getPendingCalls();
+        if (pendingCalls.length > 0) {
+          pendingCalls.forEach((call: { method: string; args: any[] }) => {
+            try {
+              const method = (apiRef.current as any)[call.method];
+              if (method) {
+                method(...call.args);
+              }
+            } catch (error) {
+              // Swallow error, remove log
+            }
+          });
+          windowApi._clearPendingCalls();
+        }
+      } else {
+        // If windowApi doesn't exist yet, initialize it now
+        (window as any).MemoriArtifactAPI = {
+          ...apiRef.current,
+          _isReady: true,
+          _pendingCalls: [],
+          _setReady: (ready: boolean) => {
+            (window as any).MemoriArtifactAPI._isReady = ready;
+          },
+          _getPendingCalls: () => {
+            return (window as any).MemoriArtifactAPI._pendingCalls;
+          },
+          _clearPendingCalls: () => {
+            (window as any).MemoriArtifactAPI._pendingCalls = [];
+          },
+        };
+      }
+    }
+
+    return () => {
+      // Clean up the API on unmount
+      if (typeof window !== 'undefined') {
+        delete (window as any).MemoriArtifactAPI;
+      }
+    };
+  }, [openArtifact, closeArtifact, toggleFullscreen, state, pushMessage]);
+
+  return null;
+};
+
+// Helper functions
+function getTitleFromMimeType(mimeType: string): string {
+  if (mimeType.includes('html')) return 'HTML Document';
+  if (mimeType.includes('markdown')) return 'Markdown Document';
+  if (mimeType.includes('javascript')) return 'JavaScript Code';
+  if (mimeType.includes('python')) return 'Python Code';
+  if (mimeType.includes('json')) return 'JSON Data';
+  if (mimeType.includes('css')) return 'CSS Stylesheet';
+  if (mimeType.includes('typescript')) return 'TypeScript Code';
+  if (mimeType.includes('xml')) return 'XML Document';
+  if (mimeType.includes('svg')) return 'SVG Image';
+  return 'Document';
+}
+
+function createArtifactHandler(
+  content: string,
+  mimeType: string,
+  title: string
+): HTMLDivElement {
+  const handler = document.createElement('div');
+  handler.className = 'memori-artifact-handler';
+  handler.style.cssText = `
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    margin: 12px 0;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  `;
+
+  const icon = getIconForMimeType(mimeType);
+  const size = `${(content.length / 1024).toFixed(1)} KB`;
+
+  handler.innerHTML = `
+    <div style="font-size: 32px;">${icon}</div>
+    <div style="flex: 1;">
+      <div style="font-weight: 600; margin-bottom: 4px;">${escapeHtml(
+        title
+      )}</div>
+      <div style="font-size: 13px; color: #6b7280;">${mimeType} • ${size}</div>
+    </div>
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+    </div>
+  `;
+
+  handler.addEventListener('mouseenter', () => {
+    handler.style.background = '#faf5ff';
+    handler.style.borderColor = '#9333ea';
+  });
+
+  handler.addEventListener('mouseleave', () => {
+    handler.style.background = 'white';
+    handler.style.borderColor = '#e5e7eb';
+  });
+
+  return handler;
+}
+
+function getIconForMimeType(mimeType: string): string {
+  if (mimeType.includes('html')) return '🌐';
+  if (mimeType.includes('markdown')) return '📝';
+  if (mimeType.includes('javascript') || mimeType.includes('typescript'))
+    return '📜';
+  if (mimeType.includes('python')) return '🐍';
+  if (mimeType.includes('json')) return '📊';
+  if (mimeType.includes('css')) return '🎨';
+  if (mimeType.includes('xml')) return '📋';
+  if (mimeType.includes('svg')) return '🖼️';
+  return '📄';
+}
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -17,6 +17,7 @@ import {
   ChatLog,
 } from '@memori.ai/memori-api-client/src/types';
 import { ArtifactData } from '../MemoriArtifactSystem/types/artifact.types';
+import { ArtifactAPIBridge } from '../MemoriArtifactSystem/utils/ArtifactAPI';
 
 // Libraries
 import React, {
@@ -320,6 +321,18 @@ declare global {
     typeMessage: typeof typeMessage;
     typeMessageHidden: typeof typeMessageHidden;
     typeBatchMessages: typeof typeBatchMessages;
+    MemoriArtifactAPI?: {
+      openArtifact: (artifact: ArtifactData) => void;
+      createAndOpenArtifact: (content: string, mimeType?: string, title?: string) => void;
+      createFromOutputElement: (outputElement: HTMLOutputElement) => string;
+      closeArtifact: () => void;
+      toggleFullscreen: () => void;
+      getState: () => { 
+        currentArtifact: ArtifactData | null; 
+        isDrawerOpen: boolean; 
+        isFullscreen: boolean 
+      };
+    };
   }
 }
 window.getMemoriState = getMemoriState;
@@ -1725,7 +1738,6 @@ const MemoriWidget = ({
 
         if (isVisible && !isTabVisible) {
           // Tab became visible - start polling and send immediate date event
-          console.log('Tab is now active/visible - starting date polling');
           sendDateChangedEvent({
             sessionID: sessionId,
             state: currentDialogState,
@@ -1733,7 +1745,6 @@ const MemoriWidget = ({
           startDatePolling();
         } else if (!isVisible && isTabVisible) {
           // Tab became hidden - stop polling
-          console.log('Tab is now hidden - stopping date polling');
           stopDatePolling();
         }
 
@@ -1974,7 +1985,6 @@ const MemoriWidget = ({
     ]
   );
 
-
   const focusChatInput = () => {
     let textarea = document.querySelector(
       '#chat-fieldset textarea'
@@ -2901,7 +2911,8 @@ const MemoriWidget = ({
     layout,
     memoriTyping,
     typingText,
-    showTypingText: showTypingText ?? integrationConfig?.showTypingText ?? false,
+    showTypingText:
+      showTypingText ?? integrationConfig?.showTypingText ?? false,
     history: showFullHistory ? history : history.slice(-2),
     authToken:
       loginToken ?? userToken ?? additionalInfo?.loginToken ?? authToken,
@@ -3045,6 +3056,17 @@ const MemoriWidget = ({
         loading={loading}
       />
 
+      <ArtifactAPIBridge pushMessage={(message: Message) => {
+        setHistory(history => {
+          if (!history.length) return history;
+          const lastMessage = history[history.length - 1];
+          if (!lastMessage || lastMessage.fromUser) return history;
+          // Create a new message object with the updated text
+          const updatedLastMessage = { ...lastMessage, text: lastMessage.text + message.text };
+          return [...history.slice(0, -1), updatedLastMessage];
+        });
+      }} />
+
       <audio
         id="memori-audio"
         style={{ display: 'none' }}

package/src/components/Snippet/Snippet.tsx

@@ -5,6 +5,7 @@ import Copy from '../icons/Copy';
 import { prismSyntaxLangs } from '../../helpers/constants';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
+import { stripDocumentAttachmentTags, stripOutputTags } from '../../helpers/utils';
 
 export interface Props {
   medium: Medium;
@@ -107,8 +108,8 @@ const Snippet = ({
             }
           >
             {medium.content?.length && medium.content.length > 200 && preview
-              ? `${medium.content.slice(0, 200)}\n...`
-              : `${medium.content}`}
+              ? `${stripDocumentAttachmentTags(medium.content)?.slice(0, 200)}\n...`
+              : stripDocumentAttachmentTags(medium.content ?? '')}
           </code>
         </pre>
 

package/src/components/StartPanel/StartPanel.css

@@ -155,6 +155,20 @@
     color: #000;
 }
 
+.memori--language-chooser select optgroup {
+    background: #fff;
+    color: #666;
+    font-size: 0.9em;
+    font-style: normal;
+    font-weight: 700;
+}
+
+.memori--language-chooser select optgroup option {
+    padding-left: 0.5rem;
+    color: #000;
+    font-weight: 400;
+}
+
 .memori--completions-enabled,
 .memori--board-of-experts,
 .memori--nsfw {

package/src/components/StartPanel/StartPanel.tsx

@@ -11,7 +11,7 @@ import Tooltip from '../ui/Tooltip';
 import { getTranslation } from '../../helpers/translations';
 import Button from '../ui/Button';
 import Translation from '../icons/Translation';
-import { chatLanguages } from '../../helpers/constants';
+import { getGroupedChatLanguages } from '../../helpers/constants';
 import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
 import AI from '../icons/AI';
 import Group from '../icons/Group';
@@ -259,15 +259,28 @@ const StartPanel: React.FC<Props> = ({
                     setUserLang(e.target.value);
                   }}
                 >
-                  {chatLanguages.map(lang => (
-                    <option
-                      key={lang.value}
-                      value={lang.value}
-                      aria-label={lang.label}
-                    >
-                      {lang.label}
-                    </option>
-                  ))}
+                  <optgroup label={t('popularLanguages') || 'Popular'}>
+                    {getGroupedChatLanguages().popular.map(lang => (
+                      <option
+                        key={`popular-${lang.value}`}
+                        value={lang.value}
+                        aria-label={lang.label}
+                      >
+                        {lang.label}
+                      </option>
+                    ))}
+                  </optgroup>
+                  <optgroup label={t('allLanguages') || 'All Languages'}>
+                    {getGroupedChatLanguages().all.map(lang => (
+                      <option
+                        key={`all-${lang.value}`}
+                        value={lang.value}
+                        aria-label={lang.label}
+                      >
+                        {lang.label}
+                      </option>
+                    ))}
+                  </optgroup>
                 </select>
               </div>
             )}