@memori.ai/memori-react 8.30.1 → 8.32.0

package/src/components/MemoriArtifactSystem/ArtifactDrawer.stories.tsx

@@ -790,6 +790,43 @@ function hello() {
 This project helps you build amazing applications.
 </output>`;
 
+const markdownCustomArtifact = `<output class="memori-artifact" data-mimetype="markdown" data-title="CUSTOM_MARKDOWN_TEST.md">
+# Custom Markdown Rendering Test
+
+## Text formatting
+Use **bold**, *italic*, and \`inline code\` in the same sentence.
+
+## Checklist
+- [x] Parse headings
+- [x] Render lists
+- [ ] Verify custom table support
+
+## Table
+| Feature | Expected |
+| --- | --- |
+| Link rendering | Opens in a new tab |
+| Code block | Preserves indentation |
+| Blockquote | Styled correctly |
+
+## Blockquote
+> This is a quoted note to verify markdown styling in preview mode.
+
+## Code block
+\`\`\`ts
+type User = {
+  id: string;
+  name: string;
+  active: boolean;
+};
+
+const toLabel = (user: User) => \`\${user.name} (\${user.id})\`;
+\`\`\`
+
+## Links
+- [Memori website](https://memori.ai)
+- [Example docs](https://example.com/docs)
+</output>`;
+
 const cssArtifact = `<output class="memori-artifact" data-mimetype="css">
 /* Modern CSS Grid Layout */
 .container {
@@ -1112,6 +1149,40 @@ This includes all the essential sections for a project README with proper format
   ),
 };
 
+export const MarkdownCustomRendering: Story = {
+  args: {},
+  render: () => (
+    <Chat
+      memori={mockMemori}
+      tenant={mockTenant}
+      sessionID="test-session"
+      history={[
+        {
+          text: `I generated a custom markdown artifact to validate rendering behavior:
+
+${markdownCustomArtifact}
+
+Please check preview and code tabs to verify the output.`,
+          fromUser: false,
+          timestamp: new Date().toISOString(),
+        },
+      ]}
+      pushMessage={mockPushMessage}
+      simulateUserPrompt={mockSimulateUserPrompt}
+      onChangeUserMessage={mockOnChangeUserMessage}
+      sendMessage={mockSendMessage}
+      setEnableFocusChatInput={mockSetEnableFocusChatInput}
+      stopAudio={mockStopAudio}
+      startListening={mockStartListening}
+      stopListening={mockStopListening}
+      setSendOnEnter={mockSetSendOnEnter}
+      setAttachmentsMenuOpen={mockSetAttachmentsMenuOpen}
+      showInputs={false}
+      isChatlogPanel={false}
+    />
+  ),
+};
+
 export const CSSStyles: Story = {
   args: {},
   render: () => (

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx

@@ -13,6 +13,7 @@ import Code from '../../../icons/Code';
 import { PreviewIcon } from '../../../icons/Preview';
 import Snippet from '../../../Snippet/Snippet';
 import { Medium } from '@memori.ai/memori-api-client/dist/types';
+import { renderMsg } from '../../../../helpers/message';
 
 const ArtifactPreview: React.FC<{
   artifact: ArtifactData;
@@ -41,15 +42,22 @@ const ArtifactPreview: React.FC<{
           />
         );
 
-      case 'markdown':
+      case 'markdown': {
+        const { text: renderedMarkdown } = renderMsg(
+          artifact.content,
+          false,
+          'Reasoning...',
+          false
+        );
         return (
           <div
             className="memori-artifact-preview-markdown"
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(artifact.content),
+              __html: renderedMarkdown,
             }}
           />
         );
+      }
         
       default:
         return (
@@ -63,28 +71,6 @@ const ArtifactPreview: React.FC<{
     }
   }, [artifact]);
 
-  /**
-   * Basic markdown rendering
-   */
-  const renderMarkdown = useCallback((markdown: string): string => {
-    return markdown
-      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
-      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
-      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-      .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
-      .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
-      .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
-      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-      .replace(/\*(.*?)\*/g, '<em>$1</em>')
-      .replace(/`(.*?)`/g, '<code>$1</code>')
-      .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
-      .replace(
-        /\[([^\]]+)\]\(([^)]+)\)/g,
-        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
-      )
-      .replace(/\n/g, '<br>');
-  }, []);
-
   const mapArtifactMimeTypeToSnippetMimeType = useCallback(
     (mimeType: string) => {
       switch (mimeType) {

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -2896,6 +2896,7 @@ const MemoriWidget = ({
     showSettings: showSettings ?? integrationConfig?.showSettings ?? true,
     showChatHistory:
       showChatHistory ?? integrationConfig?.showChatHistory ?? true,
+    showMessageConsumption: enableMessageConsumption,
     hasUserActivatedSpeak,
     showReload: selectedLayout === 'TOTEM',
     showClear: showClear ?? integrationConfig?.showClear ?? false,

package/src/components/icons/GasStation.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+const GasStation = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={800}
+    height={800}
+    fill="none"
+    viewBox="0 0 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      stroke="currentColor"
+      strokeWidth={1.5}
+      d="M16 22V8c0-2.828 0-4.243-.879-5.121C14.243 2 12.828 2 10 2H9c-2.828 0-4.243 0-5.121.879C3 3.757 3 5.172 3 8v14"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth={1.5}
+      d="M11 6H8c-.943 0-1.414 0-1.707.293C6 6.586 6 7.057 6 8c0 .943 0 1.414.293 1.707C6.586 10 7.057 10 8 10h3c.943 0 1.414 0 1.707-.293C13 9.414 13 8.943 13 8c0-.943 0-1.414-.293-1.707C12.414 6 11.943 6 11 6Z"
+    />
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={1.5}
+      d="M7 17h5M17 22H2M19.5 4l1.233.986c.138.11.207.166.27.222a3 3 0 0 1 .992 2.066c.005.084.005.172.005.348V18.5a1.5 1.5 0 0 1-3 0v-.071c0-.79-.64-1.429-1.429-1.429H16"
+    />
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={1.5}
+      d="M22 8h-1.5A1.5 1.5 0 0 0 19 9.5v2.419a1.5 1.5 0 0 0 1.026 1.423L22 14"
+    />
+  </svg>
+)
+export default GasStation;

package/src/components/layouts/chat.css

@@ -18,6 +18,16 @@
     transition: all 0.05s ease-in-out;
 }
 
+.memori-chat-layout--header .memori-header {
+    display: inline-flex;
+    width: calc(50% - 1rem);
+    max-width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.2rem;
+}
+
 .memori-chat-layout--header-with-artifact {
     display: none;
 }
@@ -144,6 +154,10 @@
 }
 
 @media (max-width: 870px) {
+    .memori-chat-layout--header .memori-header {
+        width: 100%;
+    }
+
     .memori-chat-layout .memori--powered-by {
         top: 3.5rem;
         bottom: auto;

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

@@ -52,6 +52,7 @@ DefaultLayout.args = {
   showLogin: true,
   multilingual: true,
   avatar3dHidden: true,
+  showMessageConsumption: true,
 };
 
 
@@ -227,18 +228,17 @@ HiddenChat.args = {
 export const ZoomedFullBody = Template.bind({});
 ZoomedFullBody.args = {
   ...DefaultLayout.args,
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  showAudio: true,
-  enableAudio: true,
-  integration: {
-    
-  },
-  memori: {
-    ...memori,
-    voiceType: 'FEMALE',
-  },
-  tenant,
-  layout: 'ZOOMED_FULL_BODY',
+  memoriName: "Layout Storybook",
+  ownerUserName: "Andrea-Patini",
+  memoriID: "ae20fc5a-cc15-4db9-b7dd-2cd4a621b85e",
+  ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
+  tenantID: "aisuru-staging.aclambda.online",
+  engineURL: "https://engine-staging.memori.ai/memori/v2",
+  apiURL: "https://backend-staging.memori.ai/api/v2",
+  baseURL: "http://localhost:3000",
+  layout: "FULLPAGE",
+  uiLang: "IT",
+  spokenLang: "IT",
+  integrationID: "32922e14-24d6-4f5f-a06b-d963da14a658",
+  showSettings: true
 };

package/src/locales/de.json

@@ -383,6 +383,7 @@
     "co2": "CO2",
     "water": "Wasser",
     "usageBadgesHint": "Klicke auf einen dieser Buttons, um mehr Informationen zu sehen",
+    "totalChatConsumptionTitle": "Gesamter Chat-Verbrauch",
     "impactComparisonUnavailable": "Indikativer Vergleich nicht verfuegbar.",
     "impactComparisonEnergy": "Indikativer Vergleich: in etwa wie eine 10-W-LED-Lampe fuer {{duration}} eingeschaltet lassen.",
     "impactComparisonCo2": "Indikativer Vergleich: etwa {{distance}} mit einem durchschnittlichen Benzinauto gefahren.",

package/src/locales/en.json

@@ -454,6 +454,7 @@
     "co2": "CO2",
     "water": "Water",
     "usageBadgesHint": "Click one of these buttons to show more information",
+    "totalChatConsumptionTitle": "Total Chat Consumption",
     "impactComparisonUnavailable": "Indicative comparison unavailable.",
     "impactComparisonEnergy": "Indicative comparison: roughly like keeping a 10 W LED bulb on for {{duration}}.",
     "impactComparisonCo2": "Indicative comparison: about {{distance}} traveled by an average gasoline car.",

package/src/locales/es.json

@@ -410,6 +410,7 @@
     "co2": "CO2",
     "water": "Agua",
     "usageBadgesHint": "Haz clic en uno de estos botones para ver más información",
+    "totalChatConsumptionTitle": "Consumo Total del Chat",
     "impactComparisonUnavailable": "Comparacion indicativa no disponible.",
     "impactComparisonEnergy": "Comparacion indicativa: aproximadamente como mantener encendida una bombilla LED de 10 W durante {{duration}}.",
     "impactComparisonCo2": "Comparacion indicativa: aproximadamente {{distance}} recorridos en un coche de gasolina promedio.",

package/src/locales/fr.json

@@ -418,6 +418,7 @@
     "co2": "CO2",
     "water": "Eau",
     "usageBadgesHint": "Cliquez sur un de ces boutons pour afficher plus d'informations",
+    "totalChatConsumptionTitle": "Consommation Totale du Chat",
     "impactComparisonUnavailable": "Comparaison indicative non disponible.",
     "impactComparisonEnergy": "Comparaison indicative : environ comme laisser allumee une ampoule LED de 10 W pendant {{duration}}.",
     "impactComparisonCo2": "Comparaison indicative : environ {{distance}} parcourus en voiture essence moyenne.",

package/src/locales/it.json

@@ -451,6 +451,7 @@
     "co2": "CO2",
     "water": "Acqua",
     "usageBadgesHint": "Clicca uno di questi pulsanti per mostrare maggiori informazioni",
+    "totalChatConsumptionTitle": "Consumo Totale Chat",
     "impactComparisonUnavailable": "Confronto indicativo non disponibile.",
     "impactComparisonEnergy": "Confronto indicativo: circa quanto tenere accesa una lampadina LED da 10 W per {{duration}}.",
     "impactComparisonCo2": "Confronto indicativo: circa {{distance}} percorsi in auto a benzina media.",

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.30.1';
+export const version = '8.32.0';