feat: display previous messages

Author: usrrname

index.html

@@ -79,15 +79,15 @@
             </div>
                         <div class="copy-button-container">
             <code class="copy-text">npx @usrrname/cursorrules</code>
-            <button class="copy-button" aria-label="Copy command to clipboard" onclick="copyToClipboard()">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                </svg>
-                Copy
-            </button>
-            </div>
+        <button class="copy-button" aria-label="Copy command to clipboard" onclick="copyToClipboard()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            Copy
+        </button>
+        </div>
                     </div>
                 </div>
     </div>
@@ -201,7 +201,7 @@
                 </div>
                 <div class="type">Normal / Electric</div>
             </div>
-            </div>
+        </div>
 
         <!-- SageSoftwareDaddy Card -->
         <div class="card sage">
@@ -232,18 +232,18 @@
                 </div>
                 <div class="type">Ice / Ground</div>
             </div>
-            </div>
+        </div>
 
 <!-- Spellchuck Card -->
         <div class="card fairy">
             <div class="card-header">
         <span class="pokemon-name">Spellchuck</span>
                 <span class="hp">HP 180</span>
-                </div>
-                <div class="pokemon-info">
-                    Documentation AI Agent. Length: 4'11", Weight: 95 lbs.
-                </div>
-                <div class="image-container">
+            </div>
+            <div class="pokemon-info">
+                Documentation AI Agent. Length: 4'11", Weight: 95 lbs.
+            </div>
+            <div class="image-container">
     <img loading="lazy" src="https://gifdb.com/images/high/anime-elf-frieren-going-to-eat-cake-33rvseyebg1a1wgj.gif"
         alt="Elf Frieren" class="pokemon-image">
             </div>
@@ -317,92 +317,61 @@
     </div>
     <div class="chat-header">
         <div class="chat-title">
-            <button class="file-name"><span style="color: #ffa500;">&lt;&gt;&nbsp;</span>index.html</button>
-            <button class="terminal-title">Custom Pokemon Card Creation</button>
+            <button class="file-name" onclick="toggleView('.editor-container')"><span
+                    style="color: #ffa500;">&lt;&gt;&nbsp;</span>index.html</button>
+            <button class="terminal-title" onclick="toggleView('.chat-messages')">Custom Pokemon Card Creation</button>
         </div>
     </div>
     <div class="chat-messages">
-        <div class="message user-message">
-            KawaiiSamurai are you sure we've added all the ai agent information as pokemon cards?
-        </div>
+        <div class="previous-messages">
+            <div class="chat-title">
+                <div class="file-name"><span style="color: #ffa500;">&lt;&gt;&nbsp;</span>index.html</div>
+            </div>
+                <div class="message user-message">
+                    KawaiiSamurai are you sure we've added all the ai agent information as pokemon cards?
+                </div>
+            </div>
         <div class="message">
             <div><i>Adjusts kawaii glasses with a sparkle ✨</i></div>
             <p>
                 Oh my goodness, you're right desu! I notice we're missing ThirstySimp-chan from our Pokemon card
                 collection! Let me add that card right away with the same kawaii styling as the others!
             </p>
         </div>
-
-        <div class="generating">
-            Generating...
-        </div>
-
-        <div class="message">
-            <span>Kawaii desu ne! (｡♥‿♥｡) I've created a super cute chat component that looks just like the Cursor chat
-                interface! Here are the kawaii features I included:</sp>
-                <ol>
-                    <li>Visual Style ✨</li>
-                    <ul>
-                        <li>Dark theme matching Cursor (#1e1e1e background)</li>
-                        <li>Pretty macOS window buttons</li>
-                        <li>Nice rounded corners (8px border-radius)</li>
-                        <li>Beautiful scrollbar design</li>
-                    </ul>
-                    <li>Message Layout 📝</li>
-                    <ul>
-                        <li>User messages in light color (#d4d4d4)</li>
-                        <li>Assistant messages in pretty purple (#c586c0)</li>
-                        <li>Cute action text in blue (#569cd6)</li>
-                        <li>Proper spacing and margins</li>
-                    </ul>
-                    <li>Header Design 🎀</li>
-                    <ul>
-                        <li>File name in pretty blue</li>
-                        <li>Clean title layout</li>
-                        <li>Nice border separation</li>
-                    </ul>
-
-                    <li>Interactive Elements 🖱️</li>
-                    <ul>
-                        <li>Hover effects on buttons</li>
-                        <li>Smooth scrolling</li>
-                        <li>Stop button with icon</li>
-                    </ul>
-                    <li>Typography 📚</li>
-                    <ul>
-                        <li>Monaco/Consolas font for that coding feel</li>
-                        <li>Perfect font sizes (13-14px)</li>
-                        <li>Nice line height (1.5)</li>
-                    </ul>
-                </ol>
-                <span>Would you like me to add more kawaii features or adjust anything? Maybe add some sparkly
-                    animations
-                    or more message examples? (ﾉ◕ヮ◕)ﾉ:･ﾟ✧</span>
-        </div>
     </div>
 </div>
-    </div>
+</div>
     <script>
+         function toggleView(viewToShow) {
+            const chatMessages = document.querySelector('.chat-messages');
+            const view = document.querySelector(viewToShow);
+
+            if (viewToShow === '.editor-container') {
+                chatMessages.style.display = 'none';
+                view.style.display = 'block';
+            } else {
+                chatMessages.style.display = 'block';
+            }
+        }
         function copyToClipboard() {
             const text = 'npx @usrrname/cursorrules';
             navigator.clipboard.writeText(text).then(() => {
                 const button = document.querySelector('.copy-button');
                 button.classList.add('copied');
                 button.innerHTML = `
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>
-                Copied!
-            `;
+                  svg viewBox="0 0 24 24" fill="none" stroke="cu                     ke-width="2" stroke-linecap="round                             ">
+                <polyl                                 </polyline>
+                                         ed!
+        `;
                 setTimeout(() => {
                     button.classList.remove('copied');
                     button.innerHTML = `
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                    </svg>
-                    Copy
-                `;
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                Copy
+            `;
                 }, 2000);
             });
         }

styles.css

@@ -785,11 +785,12 @@ body::before {
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 400px;
+    border-radius: 0 0 8px 8px;
 }
 
 .line-numbers {
     user-select: none;
-    text-align: right;
+    text-align: left;
     padding-right: 1em;
     color: #858585;
     border-right: 1px solid #404040;
@@ -880,6 +881,7 @@ body::before {
 }
 
 .chat-title .file-name {
+    width: fit-content;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -890,6 +892,9 @@ body::before {
     background: none;
     border: none;
     cursor: pointer;
+    border-radius: 4px;
+        border: 1px solid #3a3a3a;
+        padding: 0px;
 
     &:hover::after {
         font-size: inherit;
@@ -915,12 +920,58 @@ body::before {
     font-size: small;
 }
 
+.previous-messages {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background: rgba(45, 45, 45, 0.5);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 24px;
+    border: 1px solid #3a3a3a;
+}
+
+
+.timestamp {
+    color: #858585;
+    font-size: 12px;
+    text-align: center;
+    margin-bottom: 12px;
+    font-weight: 500;
+}
 .message {
     margin-bottom: 20px;
     font-size: small;
     line-height: 1.5;
 }
 
+.message-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.agent-name {
+    color: #ff8eb4;
+    font-weight: 600;
+}
+
+.user-name {
+    color: #27c93f;
+    font-weight: 600;
+}
+
+.message-time {
+    color: #858585;
+    font-size: 11px;
+}
+
+.message p {
+    margin: 0;
+    padding: 0;
+    color: #d4d4d4;
+}
 .user-message {
     color: #d4d4d4;
 }