Add Mem0 Demo (#2291)

examples/mem0-demo/components/mem0/markdown.css

@@ -0,0 +1,108 @@
+.token {
+    word-break: break-word; /* Break long words */
+    overflow-wrap: break-word; /* Wrap text if it's too long */
+    width: 100%;
+    white-space: pre-wrap;
+  }
+
+  .prose li p {
+    margin-top: -19px;
+  }
+
+  @keyframes highlightSweep {
+    0% {
+      transform: scaleX(0);
+      opacity: 0;
+    }
+    100% {
+      transform: scaleX(1);
+      opacity: 1;
+    }
+  }
+
+  .highlight-text {
+    display: inline-block;
+    position: relative;
+    font-weight: normal;
+    padding: 0;
+    border-radius: 4px;
+  }
+
+  .highlight-text::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgb(233 213 255 / 0.7);
+    transform-origin: left;
+    transform: scaleX(0);
+    opacity: 0;
+    z-index: -1;
+    border-radius: inherit;
+  }
+
+  @keyframes fontWeightAnimation {
+    0% {
+      font-weight: normal;
+      padding: 0;
+    }
+    100% {
+      font-weight: 600;
+      padding: 0 4px;
+    }
+  }
+
+  @keyframes backgroundColorAnimation {
+    0% {
+      background-color: transparent;
+    }
+    100% {
+      background-color: rgba(180, 231, 255, 0.7);
+    }
+  }
+
+  .highlight-text.animate {
+    animation: 
+      fontWeightAnimation 0.1s ease-out forwards,
+      backgroundColorAnimation 0.1s ease-out forwards;
+    animation-delay: 0.88s, 1.1s;
+  }
+
+  .highlight-text.dark {
+    background-color: rgba(213, 242, 255, 0.7);
+    color: #000;
+  }
+
+  .highlight-text.animate::before {
+    animation: highlightSweep 0.5s ease-out forwards;
+    animation-delay: 0.6s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+  }
+
+  :root[class~="dark"] .highlight-text::before {
+    background: rgb(88 28 135 / 0.5);
+  }
+
+  @keyframes blink {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+  }
+
+  .markdown-cursor {
+    display: inline-block;
+    animation: blink 0.8s ease-in-out infinite;
+    color: rgba(213, 242, 255, 0.7);
+    margin-left: 1px;
+    font-size: 1.2em;
+    line-height: 1;
+    vertical-align: baseline;
+    position: relative;
+    top: 2px;
+  }
+
+  :root[class~="dark"] .markdown-cursor {
+    color: #6366f1;
+  }