@memori.ai/memori-react 8.2.0 → 8.4.0-rc.0

package/esm/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.css

@@ -0,0 +1,319 @@
+/**
+ * ArtifactHistory CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-history {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+}
+
+/* Header */
+.memori-artifact-history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--memori-button-border-color, #e9ecef);
+  margin-bottom: 1rem;
+}
+
+.memori-artifact-history-title {
+  margin: 0;
+  color: var(--memori-text-color, #333);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.memori-artifact-history-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.memori-artifact-history-clear-btn {
+  padding: 0.375rem;
+  border-radius: var(--memori-border-radius, 4px);
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.memori-artifact-history-clear-btn:hover {
+  border-color: var(--memori-error-color, #ff4d4f);
+  background: var(--memori-error-color, #ff4d4f);
+  color: white;
+}
+
+/* Empty State */
+.memori-artifact-history-empty {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  color: var(--memori-text-color, #666);
+  text-align: center;
+}
+
+.memori-artifact-history-empty-icon {
+  margin-bottom: 1rem;
+  font-size: 3rem;
+  opacity: 0.5;
+}
+
+.memori-artifact-history-empty-text {
+  margin: 0 0 0.5rem;
+  color: var(--memori-text-color, #333);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.memori-artifact-history-empty-subtext {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+/* History List */
+.memori-artifact-history-list {
+  flex: 1;
+  padding-right: 0.25rem;
+  overflow-y: auto;
+}
+
+.memori-artifact-history-item {
+  border: 1px solid var(--memori-button-border-color, #e9ecef);
+  border-radius: var(--memori-border-radius, 8px);
+  margin-bottom: 0.75rem;
+  animation: fadeInUp 0.4s ease forwards;
+  background: var(--memori-chat-bubble-bg, #fff);
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+}
+
+.memori-artifact-history-item:hover {
+  border-color: var(--memori-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.memori-artifact-history-item--active {
+  border-color: var(--memori-primary);
+  background: linear-gradient(135deg, var(--memori-primary) 0%, #764ba2 100%);
+  box-shadow: 0 4px 12px rgba(130, 70, 175, 0.3);
+  color: var(--memori-primary-text, #fff);
+}
+
+.memori-artifact-history-item--active:hover {
+  box-shadow: 0 6px 16px rgba(130, 70, 175, 0.4);
+  transform: translateY(-2px);
+}
+
+.memori-artifact-history-item-content {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  gap: 0.75rem;
+}
+
+.memori-artifact-history-item-icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.memori-artifact-history-item-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.memori-artifact-history-item-title {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-history-item-subtitle {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.75rem;
+  opacity: 0.7;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-history-item-meta {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.625rem;
+  gap: 0.5rem;
+  opacity: 0.6;
+}
+
+.memori-artifact-history-item-type {
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+.memori-artifact-history-item-custom-title {
+  overflow: hidden;
+  max-width: 100px;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  font-style: italic;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-history-item--active .memori-artifact-history-item-type,
+.memori-artifact-history-item--active .memori-artifact-history-item-custom-title {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.memori-artifact-history-item-actions {
+  flex-shrink: 0;
+}
+
+.memori-artifact-history-item-toggle {
+  padding: 0.375rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--memori-border-radius, 4px);
+  background: rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+
+.memori-artifact-history-item-toggle:hover {
+  background: rgba(0, 0, 0, 0.1);
+  transform: scale(1.05);
+}
+
+.memori-artifact-history-item--active .memori-artifact-history-item-toggle {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+
+.memori-artifact-history-item--active .memori-artifact-history-item-toggle:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* More Items Indicator */
+.memori-artifact-history-more {
+  padding: 1rem;
+  border-top: 1px solid var(--memori-button-border-color, #e9ecef);
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.memori-artifact-history-more-text {
+  margin: 0;
+  color: var(--memori-text-color, #666);
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scrollbar Styling */
+.memori-artifact-history-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.memori-artifact-history-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.memori-artifact-history-list::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: var(--memori-button-border-color, #e9ecef);
+}
+
+.memori-artifact-history-list::-webkit-scrollbar-thumb:hover {
+  background: var(--memori-text-color, #999);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .memori-artifact-history-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .memori-artifact-history-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .memori-artifact-history-item-content {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .memori-artifact-history-item-icon {
+    font-size: 1.25rem;
+  }
+
+  .memori-artifact-history-item-title {
+    font-size: 0.8125rem;
+  }
+
+  .memori-artifact-history-item-subtitle {
+    font-size: 0.6875rem;
+  }
+
+  .memori-artifact-history-item-meta {
+    font-size: 0.5625rem;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .memori-artifact-history-item {
+    border-color: var(--memori-button-border-color, #404040);
+    background: var(--memori-chat-bubble-bg, #1a1a1a);
+  }
+
+  .memori-artifact-history-item:hover {
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+  }
+
+  .memori-artifact-history-item-type,
+  .memori-artifact-history-item-custom-title {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .memori-artifact-history-item-toggle {
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .memori-artifact-history-item-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}

package/esm/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ArtifactHistoryProps } from '../../types/artifact.types';
+declare const ArtifactHistory: React.FC<ArtifactHistoryProps>;
+export default ArtifactHistory;

package/esm/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import Button from '../../../ui/Button';
+import Close from '../../../icons/Close';
+import Clear from '../../../icons/Clear';
+import ArrowUp from '../../../icons/ArrowUp';
+const ArtifactHistory = ({ history, onSelectArtifact, onClearHistory, maxItems = 50, }) => {
+    const { t } = useTranslation();
+    const formatBytes = useCallback((bytes) => {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }, []);
+    const formatTimestamp = useCallback((timestamp) => {
+        return timestamp.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }, []);
+    const handleSelectArtifact = useCallback((artifact) => {
+        onSelectArtifact(artifact);
+    }, [onSelectArtifact]);
+    const handleClearHistory = useCallback(() => {
+        if (onClearHistory && window.confirm(t('artifact.clearHistoryConfirm', 'Are you sure you want to clear all artifact history?') || 'Are you sure you want to clear all artifact history?')) {
+            onClearHistory();
+        }
+    }, [onClearHistory, t]);
+    const limitedHistory = useMemo(() => {
+        return history.slice(0, maxItems);
+    }, [history, maxItems]);
+    const hasMoreItems = useMemo(() => {
+        return history.length > maxItems;
+    }, [history.length, maxItems]);
+    if (history.length === 0) {
+        return (_jsxs("div", { className: "memori-artifact-history", children: [_jsx("div", { className: "memori-artifact-history-header", children: _jsx("h3", { className: "memori-artifact-history-title", children: t('artifact.history', 'Artifact History') }) }), _jsxs("div", { className: "memori-artifact-history-empty", children: [_jsx("div", { className: "memori-artifact-history-empty-icon", children: "\uD83D\uDCC4" }), _jsx("p", { className: "memori-artifact-history-empty-text", children: t('artifact.noHistory', 'No artifacts yet') }), _jsx("p", { className: "memori-artifact-history-empty-subtext", children: t('artifact.noHistorySubtext', 'Artifacts will appear here when generated') })] })] }));
+    }
+    return (_jsxs("div", { className: "memori-artifact-history", children: [_jsxs("div", { className: "memori-artifact-history-header", children: [_jsx("h3", { className: "memori-artifact-history-title", children: t('artifact.history', 'Artifact History') }), _jsx("div", { className: "memori-artifact-history-actions", children: onClearHistory && (_jsx(Button, { onClick: handleClearHistory, className: "memori-artifact-history-clear-btn", ghost: true, title: t('artifact.clearHistory', 'Clear history') || 'Clear history', children: _jsx(Clear, { className: "memori-artifact-history-clear-btn-icon" }) })) })] }), _jsxs("div", { className: "memori-artifact-history-list", children: [limitedHistory.map((artifact) => (_jsx("div", { className: cx('memori-artifact-history-item', {
+                            'memori-artifact-history-item--active': artifact.isActive,
+                        }), onClick: () => handleSelectArtifact(artifact), children: _jsxs("div", { className: "memori-artifact-history-item-content", children: [_jsx("div", { className: "memori-artifact-history-item-icon", children: artifact.typeInfo.icon }), _jsxs("div", { className: "memori-artifact-history-item-info", children: [_jsx("div", { className: "memori-artifact-history-item-title", children: artifact.title }), _jsxs("div", { className: "memori-artifact-history-item-subtitle", children: [t('artifact.generatedAt', 'Generated at'), " ", formatTimestamp(artifact.timestamp), " \u2022 ", formatBytes(artifact.size)] }), _jsxs("div", { className: "memori-artifact-history-item-meta", children: [_jsx("span", { className: "memori-artifact-history-item-type", children: artifact.typeInfo.name }), artifact.customTitle && (_jsx("span", { className: "memori-artifact-history-item-custom-title", children: artifact.customTitle }))] })] }), _jsx("div", { className: "memori-artifact-history-item-actions", children: _jsx(Button, { className: "memori-artifact-history-item-toggle", ghost: true, title: artifact.isActive ? (t('artifact.close', 'Close') || 'Close') : (t('artifact.open', 'Open') || 'Open'), children: artifact.isActive ? (_jsx(Close, { className: "memori-artifact-history-item-toggle-icon" })) : (_jsx(ArrowUp, { className: "memori-artifact-history-item-toggle-icon" })) }) })] }) }, artifact.id))), hasMoreItems && (_jsx("div", { className: "memori-artifact-history-more", children: _jsx("p", { className: "memori-artifact-history-more-text", children: t('artifact.moreItems', `+${history.length - maxItems} more items`) }) }))] })] }));
+};
+export default ArtifactHistory;
+//# sourceMappingURL=ArtifactHistory.js.map

package/esm/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtifactHistory.js","sourceRoot":"","sources":["../../../../../src/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.tsx"],"names":[],"mappings":"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"}