@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css

@@ -0,0 +1,346 @@
+/**
+ * ArtifactPreview CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-preview {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+}
+
+/* Tabs */
+.memori-artifact-tabs {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem;
+  /* border-bottom: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px) var(--memori-border-radius, 6px) 0 0;
+  background: var(--memori-inner-bg, #f8f9fa);
+  gap: 0.25rem;
+}
+
+.memori-artifact-tab-icon{
+  width: 16px;
+  height: 16px;
+}
+
+.memori-artifact-tab {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: var(--memori-border-radius, 4px);
+  background: transparent;
+  color: var(--memori-text-color, #666);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+/* .memori-artifact-tab:hover:not(.memori-artifact-tab--active) {
+  background: rgba(0, 123, 255, 0.05);
+  color: var(--memori-text-color, #333);
+} */
+
+.memori-artifact-tab--active, .memori-artifact-tab:hover, .memori-artifact-tab:active, .memori-artifact-tab:focus {
+  background: var(--memori-chat-bubble-bg, #fff);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: var(--memori-primary);
+}
+
+/* Content */
+.memori-artifact-content {
+  display: flex;
+  overflow: visible;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  border-radius: 0 0 var(--memori-border-radius, 6px) var(--memori-border-radius, 6px);
+  background: var(--memori-chat-bubble-bg, #fff);
+}
+
+.memori-artifact-tab-content {
+  display: none;
+  overflow: hidden;
+  min-height: 0;
+  flex: 1;
+}
+
+.memori-artifact-tab-content--active {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Code Content */
+.memori-artifact-code {
+  overflow: auto;
+  flex: 1;
+  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+  margin: 1rem;
+  background: var(--memori-chat-bubble-bg, #fff);
+}
+
+.memori-artifact-code-content {
+  padding: 1rem;
+  margin: 0;
+  color: var(--memori-text-color, #333);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Preview Content */
+.memori-artifact-preview-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+  /* margin: 1rem; */
+  margin-top: 1rem;
+  background: var(--memori-chat-bubble-bg, #fff);
+}
+
+/* Markdown Preview */
+.memori-artifact-preview-markdown {
+  height: 100%;
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: var(--memori-font-family);
+  line-height: 1.6;
+  overflow-y: scroll;
+}
+
+.memori-artifact-preview-markdown h1,
+.memori-artifact-preview-markdown h2,
+.memori-artifact-preview-markdown h3,
+.memori-artifact-preview-markdown h4,
+.memori-artifact-preview-markdown h5,
+.memori-artifact-preview-markdown h6 {
+  margin: 1.5rem 0 0.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.memori-artifact-preview-css-content h3 {
+  margin: 0 0 1rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.memori-artifact-preview-markdown h1:first-child,
+.memori-artifact-preview-markdown h2:first-child,
+.memori-artifact-preview-markdown h3:first-child {
+  margin-top: 0;
+}
+
+.memori-artifact-preview-markdown p {
+  margin: 0 0 1rem;
+}
+
+.memori-artifact-preview-markdown code {
+  padding: 0.125rem 0.25rem;
+  border-radius: 3px;
+  background: var(--memori-inner-bg, #f1f3f4);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875em;
+}
+
+.memori-artifact-preview-markdown pre {
+  padding: 1rem;
+  border-radius: var(--memori-border-radius, 6px);
+  margin: 1rem 0;
+  background: var(--memori-inner-bg, #f1f3f4);
+  overflow-x: auto;
+}
+
+.memori-artifact-preview-markdown pre code {
+  padding: 0;
+  background: none;
+}
+
+.memori-artifact-preview-markdown a {
+  color: var(--memori-primary);
+  text-decoration: none;
+}
+
+.memori-artifact-preview-markdown a:hover {
+  text-decoration: underline;
+}
+
+/* SVG Preview */
+.memori-artifact-preview-svg {
+  display: flex;
+  min-height: 200px;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.memori-artifact-preview-svg svg {
+  max-width: 100%;
+  max-height: 100%;
+  /* border: 1px solid var(--memori-buttonr-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+}
+
+/* CSS Preview */
+.memori-artifact-preview-css {
+  padding: 1rem;
+}
+
+.memori-artifact-preview-css-demo {
+  overflow: hidden;
+  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+}
+
+.memori-artifact-preview-css-content {
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: var(--memori-font-family);
+  line-height: 1.6;
+}
+
+.memori-artifact-preview-css-content p {
+  margin: 0 0 1rem;
+}
+
+.memori-artifact-preview-css-content button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--memori-border-radius, 4px);
+  margin: 0.5rem 0;
+  background: var(--memori-primary);
+  color: var(--memori-primary-text);
+  cursor: pointer;
+}
+
+.memori-artifact-preview-css-container {
+  padding: 1rem;
+  border-radius: var(--memori-border-radius, 4px);
+  margin: 1rem 0;
+  background: var(--memori-inner-bg, #f1f3f4);
+}
+
+/* Text Preview */
+.memori-artifact-preview-text {
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Syntax Highlighting */
+.memori-artifact--comment {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.memori-artifact--keyword {
+  color: #d73a49;
+  font-weight: 600;
+}
+
+.memori-artifact--string {
+  color: #032f62;
+}
+
+.memori-artifact--number {
+  color: #005cc5;
+  font-weight: 500;
+}
+
+.memori-artifact--function {
+  color: #6f42c1;
+  font-weight: 600;
+}
+
+.memori-artifact--operator {
+  color: #d73a49;
+}
+
+.memori-artifact--property {
+  color: #005cc5;
+}
+
+.memori-artifact--selector {
+  color: #6f42c1;
+  font-weight: 600;
+}
+
+.memori-artifact--tag {
+  color: #22863a;
+  font-weight: 600;
+}
+
+.memori-artifact--line-number {
+  margin-right: 1rem;
+  color: #6a737d;
+  user-select: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+
+  .memori-artifact-tab {
+    min-height: 42px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .memori-artifact-code,
+  .memori-artifact-preview-content {
+    margin: 0.5rem;
+  }
+
+  .memori-artifact-code-content {
+    padding: 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .memori-artifact-preview-markdown,
+  .memori-artifact-preview-css,
+  .memori-artifact-preview-text {
+    padding: 0.75rem;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .memori-artifact-tabs {
+    border-bottom-color: var(--memori-button-border-color, #404040);
+    background: rgba(255, 255, 255, 0.86);
+  }
+
+  /* .memori-artifact-tab--active {
+    background: var(--memori-chat-bubble-bg, #1a1a1a);
+  } */
+
+  .memori-artifact-code,
+  .memori-artifact-preview-content {
+    border-color: var(--memori-button-border-color, #404040);
+  }
+
+  .memori-artifact-preview-markdown code,
+  .memori-artifact-preview-css-demo {
+    border-color: var(--memori-button-border-color, #404040);
+    background: var(--memori-inner-bg, #2a2a2a);
+  }
+
+  .memori-artifact-preview-css-container {
+    background: var(--memori-inner-bg, #2a2a2a);
+  }
+}

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

@@ -0,0 +1,165 @@
+/**
+ * ArtifactPreview Component
+ * Displays artifact content with tabs for code and preview
+ * Following the project's component patterns and design system
+ */
+
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import Button from '../../../ui/Button';
+import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
+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';
+
+const ArtifactPreview: React.FC<{
+  artifact: ArtifactData;
+  activeTab: ArtifactTab;
+}> = ({ artifact, activeTab }) => {
+  const { t } = useTranslation();
+
+  /**
+   * Render preview content based on MIME type
+   */
+  const renderPreview = useCallback(() => {
+    switch (artifact.mimeType) {
+      case 'html':
+        return (
+          <iframe
+            srcDoc={artifact.content}
+            style={{
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              borderRadius: '6px',
+            }}
+            title={`${artifact.title} Preview`}
+          />
+        );
+
+      case 'markdown':
+        return (
+          <div
+            className="memori-artifact-preview-markdown"
+            dangerouslySetInnerHTML={{
+              __html: renderMarkdown(artifact.content),
+            }}
+          />
+        );
+
+      default:
+        return null;
+    }
+  }, [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) {
+        case 'javascript':
+          return 'text/javascript';
+        case 'typescript':
+          return 'text/ecmascript';
+        case 'html':
+          return 'application/xml';
+        case 'css':
+          return 'text/css';
+        case 'json':
+          return 'application/json';
+        case 'python':
+          return 'text/x-python';
+        case 'bash':
+          return 'application/x-sh';
+        case 'cpp':
+        case 'csharp':
+          return 'text/x-c++src';
+        case 'php':
+          return 'application/x-php';
+        case 'sql':
+          return 'text/x-sql';
+        case 'ruby':
+          return 'text/x-ruby';
+        default:
+          return 'text/plain';
+      }
+    },
+    []
+  );
+
+  const hasPreview =
+    artifact.mimeType === 'html' || artifact.mimeType === 'markdown';
+
+  return (
+    <div className="memori-artifact-preview">
+
+      {/* Content */}
+      <div className="memori-artifact-content">
+        {/* Code Tab */}
+        <div
+          className={cx('memori-artifact-tab-content', {
+            'memori-artifact-tab-content--active':
+              activeTab === 'code' || !hasPreview,
+          })}
+        >
+          <div className="memori-artifact-code">
+            <Snippet
+              showCopyButton={false}
+              medium={
+                {
+                  mediumID: artifact.id,
+                  mimeType: mapArtifactMimeTypeToSnippetMimeType(
+                    artifact.mimeType
+                  ),
+                  content: artifact.content,
+                  title: artifact.title,
+                  creationTimestamp: artifact.timestamp.toISOString(),
+                  creationName: 'System',
+                  lastChangeTimestamp: artifact.timestamp.toISOString(),
+                  lastChangeName: 'System',
+                } as Medium
+              }
+            />
+          </div>
+        </div>
+
+        {/* Preview Tab */}
+        {hasPreview && (
+          <div
+            className={cx('memori-artifact-tab-content', {
+              'memori-artifact-tab-content--active': activeTab === 'preview',
+            })}
+          >
+            <div className="memori-artifact-preview-content">
+              {renderPreview()}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ArtifactPreview;

package/src/components/MemoriArtifactSystem/context/ArtifactContext.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, useState, ReactNode, useCallback, useMemo } from 'react';
+import { ArtifactData, ArtifactSystemState } from '../types/artifact.types';
+
+interface ArtifactContextType {
+  state: ArtifactSystemState;
+  openArtifact: (artifact: ArtifactData) => void;
+  closeArtifact: () => void;
+  toggleFullscreen: () => void;
+}
+
+const ArtifactContext = createContext<ArtifactContextType | null>(null);
+
+export const ArtifactProvider = ({ children }: { children: ReactNode }) => {
+  const [state, setState] = useState<ArtifactSystemState>({
+    currentArtifact: null,
+    isDrawerOpen: false,
+    isFullscreen: false,
+  });
+
+  const openArtifact = useCallback((artifact: ArtifactData) => {
+    setState(() => {
+      return {
+        currentArtifact: artifact,
+        isDrawerOpen: true,
+        isFullscreen: false,
+      };
+    });
+  }, []);
+
+  const closeArtifact = useCallback(() => {
+    setState(prev => {
+      // if (!prev.isDrawerOpen) return prev;
+      return {
+        ...prev,
+        currentArtifact: null,
+        isDrawerOpen: false,
+        isFullscreen: false,
+      };
+    });
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    setState(prev => ({
+      ...prev,
+      isFullscreen: !prev.isFullscreen,
+    }));
+  }, []);
+
+  const contextValue = useMemo(() => ({
+    state,
+    openArtifact,
+    closeArtifact,
+    toggleFullscreen,
+  }), [state, openArtifact, closeArtifact, toggleFullscreen]);
+
+  return (
+    <ArtifactContext.Provider value={contextValue}>
+      {children}
+    </ArtifactContext.Provider>
+  );
+};
+
+export const useArtifact = () => {
+  const context = useContext(ArtifactContext);
+  if (!context) {
+    throw new Error('useArtifact must be used within ArtifactProvider');
+  }
+  return context;
+};

package/src/components/MemoriArtifactSystem/types/artifact.types.ts

@@ -0,0 +1,16 @@
+export interface ArtifactData {
+  id: string;
+  content: string;
+  mimeType: string;
+  title: string;
+  timestamp: Date;
+  size: number;
+}
+
+export interface ArtifactSystemState {
+  currentArtifact: ArtifactData | null;
+  isDrawerOpen: boolean;
+  isFullscreen: boolean;
+}
+
+export type ArtifactTab = 'code' | 'preview';

package/src/components/MemoriWidget/MemoriWidget.css

@@ -9,7 +9,7 @@
     box-sizing: border-box;
 }
 
-.memori-widget>.memori-spin {
+.memori-widget > .memori-spin {
     height: calc(100vh - 50px);
 }
 
@@ -180,7 +180,7 @@
     font-size: 1rem;
 }
 
-.memori--conversation-button+.memori--conversation-button {
+.memori--conversation-button + .memori--conversation-button {
     margin-left: 0.33rem;
 }
 
@@ -197,6 +197,12 @@
 }
 
 .memori.memori-widget.chat-focused .memori--powered-by,
-.memori.memori-widget.chat-focused .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
+.memori.memori-widget.chat-focused
+    .memori-website_assistant--close-button-wrapper
+    button.memori-website_assistant--close-button {
     display: none;
-}
+}
+
+.memori.memori--auto-start .memori--start-panel {
+    display: none;
+}