@memori.ai/memori-react 7.32.2 → 7.32.4

package/src/components/ChatBubble/ChatBubble.css

@@ -179,6 +179,14 @@
     color: #000;
 }
 
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--debug {
+    color: var(--memori-error-color);
+}
+
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--debug svg {
+    color: currentColor;
+}
+
 .memori-chat--bubble-addon .memori-chat--feedback {
     display: flex;
     align-items: center;

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -186,6 +186,32 @@ WithAllAddonsContents.args = {
   simulateUserPrompt: () => {},
 };
 
+export const WithDebugButton = Template.bind({});
+WithDebugButton.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: false,
+    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    initial: false,
+    generatedByAI: true,
+    media: [
+      {
+        mediumID: 'c6851968-5d4d-409a-ae75-f22ec077efcd',
+        mimeType: 'text/plain',
+        content: 'Lorem ipsum dolor sit amet',
+        title: 'Function Cache Lorem ispum',
+        properties: {
+          functionCache: 'true',
+        },
+      },
+    ],
+  },
+  showFeedback: true,
+  showFunctionCache: true,
+  simulateUserPrompt: () => {},
+};
+
 export const FromUserWithAvatar = Template.bind({});
 FromUserWithAvatar.args = {
   memori,

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

@@ -144,6 +144,35 @@ it('renders ChatBubble with msg from BoE expert unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders ChatBubble with debug button unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      showFunctionCache
+      message={{
+        fromUser: false,
+        text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+        initial: false,
+        generatedByAI: true,
+        media: [
+          {
+            mediumID: 'c6851968-5d4d-409a-ae75-f22ec077efcd',
+            mimeType: 'text/plain',
+            content: 'Lorem ipsum dolor sit amet',
+            title: 'Function Cache Lorem ispum',
+            properties: {
+              functionCache: true,
+            },
+          },
+        ],
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('renders ChatBubble from user with avatar unchanged', () => {
   const { container } = render(
     <ChatBubble

package/src/components/ChatBubble/ChatBubble.tsx

@@ -6,6 +6,7 @@ import {
   Message,
   Tenant,
   User,
+  Medium,
 } from '@memori.ai/memori-api-client/dist/types';
 import { Props as MemoriProps } from '../MemoriWidget/MemoriWidget';
 import { Transition } from '@headlessui/react';
@@ -26,6 +27,7 @@ import { stripHTML, stripOutputTags } from '../../helpers/utils';
 import { renderMsg, truncateMessage } from '../../helpers/message';
 import Expandable from '../ui/Expandable';
 import Modal from '../ui/Modal';
+import MediaWidget from '../MediaWidget/MediaWidget';
 
 // Always import and load MathJax
 import { installMathJax } from '../../helpers/utils';
@@ -84,6 +86,7 @@ const ChatBubble: React.FC<Props> = ({
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
+  const [documentAttachments, setDocumentAttachments] = useState<(Medium & { type?: string })[]>([]);
 
   // Initialize MathJax on component mount
   useEffect(() => {
@@ -92,14 +95,41 @@ const ChatBubble: React.FC<Props> = ({
     }
   }, []);
 
-  const text = message.translatedText || message.text;
+  // Extract document attachments from text and convert them to media
+  useEffect(() => {
+    const text = message.translatedText || message.text;
+    const documentAttachmentRegex = /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
+    const attachments: (Medium & { type?: string })[] = [];
+    let match;
+
+    while ((match = documentAttachmentRegex.exec(text)) !== null) {
+      const [, filename, type, content] = match;
+      attachments.push({
+        mediumID: `doc_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        url: '',
+        mimeType: type,
+        title: filename,
+        content: content.trim(),
+        properties: { isDocumentAttachment: true },
+        type: 'document',
+      });
+    }
+
+    setDocumentAttachments(attachments);
+  }, [message.text, message.translatedText]);
+
+  // Clean text by removing document_attachment tags before rendering
+  const cleanText = (message.translatedText || message.text).replace(
+    /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g,
+    ''
+  );
   const { text: renderedText } = renderMsg(
-    text,
+    cleanText,
     useMathFormatting,
     t('reasoning') || 'Reasoning...'
   );
   const plainText = message.fromUser
-    ? truncateMessage(text)
+    ? truncateMessage(cleanText)
     : stripHTML(stripOutputTags(renderedText));
 
   // Format function cache content
@@ -146,7 +176,9 @@ const ChatBubble: React.FC<Props> = ({
 
       return () => clearTimeout(timer);
     }
-  }, [message.text, message.fromUser, renderedText]);
+  }, [cleanText, message.fromUser, renderedText]);
+
+  console.log('media',message?.media);
 
   return (
     <>
@@ -281,6 +313,7 @@ const ChatBubble: React.FC<Props> = ({
 
           {((!message.fromUser && showCopyButton) ||
             (message.generatedByAI && showAIicon) ||
+            (message.generatedByAI && showFunctionCache) ||
             (showFeedback && simulateUserPrompt)) && (
             <div className="memori-chat--bubble-addon">
               {!message.fromUser && showCopyButton && (
@@ -312,13 +345,15 @@ const ChatBubble: React.FC<Props> = ({
               {!message.fromUser &&
                 showFunctionCache &&
                 message.media?.some(
-                  m => m.properties?.functionCache === 'true'
+                  m =>
+                    Boolean(m.properties?.functionCache) ||
+                    m.properties?.functionCache === 'true'
                 ) && (
                   <Button
                     ghost
                     shape="circle"
                     title="Debug"
-                    className="memori-chat--bubble-action-icon"
+                    className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
                     icon={<Bug aria-label="Debug" />}
                     onClick={() => setOpenFunctionCache(true)}
                   />
@@ -462,6 +497,31 @@ const ChatBubble: React.FC<Props> = ({
         )}
       </Transition>
 
+      {/* Render document attachments as media */}
+      {documentAttachments.length > 0 && (
+        <MediaWidget
+          media={documentAttachments}
+          sessionID={sessionID}
+          baseUrl={baseUrl}
+          apiUrl={apiUrl}
+          fromUser={message.fromUser}
+        />
+      )}
+
+      {/* Render existing media */}
+      {message.media && message.media.length > 0 && (
+        <MediaWidget
+          media={message.media.filter(
+            m => m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
+          )}
+          links={message.media.filter(m => m.mimeType === 'text/html')}
+          sessionID={sessionID}
+          baseUrl={baseUrl}
+          apiUrl={apiUrl}
+          fromUser={message.fromUser}
+        />
+      )}
+
       {showingWhyThisAnswer && apiUrl && (
         <WhyThisAnswer
           visible={showingWhyThisAnswer}

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

@@ -6611,6 +6611,204 @@ exports[`renders ChatBubble with copy disabled unchanged 1`] = `
 </div>
 `;
 
+exports[`renders ChatBubble with debug button unchanged 1`] = `
+<div>
+  <div
+    class="memori-chat--bubble-container memori-chat--with-addon"
+  >
+    <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 memori-chat--ai-generated transition ease-in-out duration-300 opacity-0 scale-09 translate-x--30"
+    >
+      <div
+        class="memori-chat--bubble-content"
+        dir="auto"
+      >
+        <p>
+          Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
+        </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 memori-chat--bubble-action-icon--debug"
+          title="Debug"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              color="currentColor"
+              fill="none"
+              height="800px"
+              viewBox="0 0 24 24"
+              width="800px"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <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"
+                stroke-width="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"
+                stroke-width="1.5"
+              />
+              <path
+                d="M19 14H22"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M5 14H2"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M14.5 3.5L17 2"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M9.5 3.5L7 2"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M20.5 20.0002L18.5 19.2002"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M20.5 7.9998L18.5 8.7998"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M3.5 20.0002L5.5 19.2002"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M3.5 7.9998L5.5 8.7998"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+              <path
+                d="M12 21.5V15"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </span>
+        </button>
+        <div
+          class="memori-tooltip memori-tooltip--align-left memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+        >
+          <div
+            class="memori-tooltip--content"
+          >
+            generatedByAI
+          </div>
+          <div
+            class="memori-tooltip--trigger"
+          >
+            <span>
+              <svg
+                aria-label="generatedByAI"
+                fill="none"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  clip-rule="evenodd"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                >
+                  <path
+                    clip-rule="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"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="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"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="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"
+                    fill-rule="evenodd"
+                  />
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="memori-media-widget"
+  />
+</div>
+`;
+
 exports[`renders ChatBubble with initial msg unchanged 1`] = `
 <div>
   <div

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -693,7 +693,7 @@ const ChatHistoryDrawer = ({
                     <div className="memori-chat-history-drawer--card--content">
                       <div className="memori-chat-history-drawer--card--content--messages">
                         <Chat
-                          key={`${chatLog.lines[0].text}-${chatLog.lines[0].timestamp}`}
+                          key={`${chatLog.chatLogID}-${chatLog.lines.length}`}
                           baseUrl={baseUrl}
                           apiUrl={apiUrl}
                           memoriTyping={false}
@@ -704,7 +704,7 @@ const ChatHistoryDrawer = ({
                           showCopyButton={false}
                           showInputs={false}
                           history={chatLog.lines.map(line => ({
-                            text: truncateMessage(line.text),
+                            text: line.text, // Don't truncate to preserve document_attachment tags
                             contextVars: line.contextVars,
                             media: line.media as Medium[],
                             fromUser: line.inbound,
@@ -712,7 +712,6 @@ const ChatHistoryDrawer = ({
                           }))}
                           memori={memori}
                           sessionID={sessionId}
-                          setDialogState={() => {}}
                           pushMessage={() => {}}
                           simulateUserPrompt={() => {}}
                           setSendOnEnter={() => {}}

package/src/components/MediaWidget/LinkItemWidget.css

@@ -1,12 +1,21 @@
 .memori-link-items--grid {
     display: grid;
     padding: 1rem;
-    direction: rtl;
     grid-auto-flow: dense;
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 
+/* Allineamento link per messaggi dell'utente */
+.memori-link-items--grid.memori-link-items--user {
+    direction: rtl;
+}
+
+/* Allineamento link per messaggi dell'agente */
+.memori-link-items--grid.memori-link-items--agent {
+    direction: ltr;
+}
+
 .memori-link-item--card {
     height: 100%;
     margin-bottom: 1rem;

package/src/components/MediaWidget/LinkItemWidget.tsx

@@ -26,6 +26,7 @@ export interface Props {
   baseUrl?: string;
   descriptionOneLine?: boolean;
   onLinkPreviewInfo?: (linkPreviewInfo: ILinkPreviewInfo) => void;
+  fromUser?: boolean;
 }
 
 const getSiteInfo = async (url: string, baseUrl?: string) => {
@@ -167,10 +168,14 @@ const LinkItemWidget: React.FC<Props> = ({
   baseUrl,
   descriptionOneLine = false,
   onLinkPreviewInfo,
+  fromUser = false,
 }: Props) => {
   return (
     <Transition appear show as="div" className="memori-link-items">
-      <div className="memori-link-items--grid">
+      <div className={cx('memori-link-items--grid', {
+        'memori-link-items--user': fromUser,
+        'memori-link-items--agent': !fromUser,
+      })}>
         {items.map((item, index) => (
           <Transition.Child
             as="div"

package/src/components/MediaWidget/MediaItemWidget.css

@@ -1,12 +1,21 @@
 .memori-media-items--grid {
     display: grid;
     padding: 1rem;
-    direction: rtl;
     grid-auto-flow: dense;
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 
+/* Allineamento media per messaggi dell'utente */
+.memori-media-items--grid.memori-media-items--user {
+    direction: rtl;
+}
+
+/* Allineamento media per messaggi dell'agente */
+.memori-media-items--grid.memori-media-items--agent {
+    direction: ltr;
+}
+
 .memori-media-item--card {
     margin-bottom: 1rem;
 }
@@ -146,10 +155,117 @@ a.memori-media-item--link {
 }
 
 .memori-media-item-preview--modal {
-    z-index: 10000;
+    z-index: 1000;
+}
+
+.memori-media-item-preview--content {
+  max-height: 50vh;
+  padding: 1rem;
+  border: 1px solid var(--memori-border);
+  border-radius: 0.5rem;
+  background-color: var(--memori-background-color, #fff);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow-y: auto;
+}
+
+.memori-media-item-preview--text {
+    color: var(--memori-color-text);
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.memori-media-item-preview--text h1,
+.memori-media-item-preview--text h2,
+.memori-media-item-preview--text h3,
+.memori-media-item-preview--text h4,
+.memori-media-item-preview--text h5,
+.memori-media-item-preview--text h6 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    color: var(--memori-color-text);
+    font-weight: 600;
+}
+
+.memori-media-item-preview--text p {
+    margin-bottom: 1rem;
+}
+
+.memori-media-item-preview--text ul,
+.memori-media-item-preview--text ol {
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.memori-media-item-preview--text li {
+    margin-bottom: 0.25rem;
+}
+
+.memori-media-item-preview--text code {
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    background-color: var(--memori-primary-light);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875em;
+}
+
+.memori-media-item-preview--text pre {
+    padding: 1rem;
+    border: 1px solid var(--memori-border);
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    background-color: var(--memori-primary-light);
+    overflow-x: auto;
+}
+
+.memori-media-item-preview--text blockquote {
+    padding-left: 1rem;
+    border-left: 4px solid var(--memori-primary);
+    margin: 1rem 0;
+    color: var(--memori-color-text-secondary);
+    font-style: italic;
+}
+
+.memori-media-item-preview--text table {
     width: 100%;
-    max-width: 80%;
-    height: 100%;
-    max-height: 80%;
-    background: #fff;
+    margin: 1rem 0;
+    border-collapse: collapse;
+}
+
+.memori-media-item-preview--text th,
+.memori-media-item-preview--text td {
+    padding: 0.5rem;
+    border: 1px solid var(--memori-border);
+    text-align: left;
+}
+
+.memori-media-item-preview--text th {
+    background-color: var(--memori-primary-light);
+    font-weight: 600;
+}
+
+.memori-media-item-preview--text a {
+    color: var(--memori-primary);
+    text-decoration: underline;
+}
+
+.memori-media-item-preview--text a:hover {
+    text-decoration: none;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .memori-media-item-preview--text {
+    font-size: 0.8rem;
+  }
+  
+  .memori-media-item-preview--text pre {
+    padding: 0.75rem;
+  }
+  
+  .memori-media-item-preview--content {
+    max-height: 40vh;
+  }
 }