Merge pull request #41 from NillionNetwork/feat/blog-and-fixes

feat/blog-and-fixes

Author: psofiterol

public/img/message_counter.png

@@ -10,6 +10,7 @@ import { useState } from "react";
 export default function ContentPolicy() {
   const [isExpandedFirst, setIsExpandedFirst] = useState(false);
   const [isExpandedSecond, setIsExpandedSecond] = useState(false);
+  const [isExpandedThird, setIsExpandedThird] = useState(false);
 
   return (
     <div className="min-h-screen bg-cream-50">
@@ -44,7 +45,154 @@ export default function ContentPolicy() {
 
           {/* Content */}
           <div className="prose prose-lg max-w-none space-y-8">
-            {/* First Article - New Post */}
+            {/* Newest Article - nilGPT v4 */}
+            <div className="bg-white border-4 border-navy-900 brutalist-shadow p-8 space-y-8">
+              <article className="space-y-8">
+                {/* Main Title */}
+                <h1 className="font-display font-black text-3xl lg:text-4xl text-navy-900 mb-6">
+                  nilGPT v4: Image uploads and bigger models
+                </h1>
+
+                {/* Date */}
+                <div className="text-navy-600 text-sm font-medium mb-8">
+                  September 11, 2025
+                </div>
+
+                {/* Introduction */}
+                <p className="text-navy-700 leading-relaxed mb-6">
+                  A new week comes with a new release of nilGPT. We're keeping
+                  up the rhythm and shipping fast. Every release takes us one
+                  step closer toward building the most privacy-preserving and
+                  capable AI assistant. We believe this is something that needs
+                  to exist for those sensitive questions that ChatGPT and others
+                  should never have their eyes on.
+                </p>
+
+                {/* Expandable Content */}
+                <div
+                  className={`overflow-hidden transition-all duration-500 ease-in-out ${
+                    isExpandedThird ? "max-h-none" : "max-h-0"
+                  }`}
+                >
+                  <p className="text-navy-700 leading-relaxed mb-4">
+                    Two weeks ago, we shipped attestation flows, giving you the
+                    ability to verify that nilGPT is running exactly the code we
+                    open-sourced. Last week, we rolled out the PWA, so you can
+                    install nilGPT directly on your mobile device for a more
+                    seamless experience.
+                  </p>
+
+                  <p className="text-navy-700 leading-relaxed mb-4">
+                    This week, we're turning up the dial again with two major
+                    new capabilities: bigger models and image uploads.
+                  </p>
+
+                  {/* Major Features Section */}
+                  <section className="mb-8">
+                    <h2 className="font-display font-bold text-2xl text-navy-900 mb-4">
+                      Major Features
+                    </h2>
+                    <p className="text-navy-700 leading-relaxed mb-4">
+                      The first big upgrade is the introduction of Gemma 3 27B,
+                      a state-of-the-art model that significantly increases the
+                      power of nilGPT. As a reminder, all of our models run on
+                      bare-metal servers inside TEEs (trusted execution
+                      environments). That means there is no reliance on
+                      third-party clouds, no hidden data pipelines, and the same
+                      uncompromising privacy guarantees we've promised from day
+                      one. With Gemma 3 27B, you get stronger reasoning, more
+                      detailed answers, and faster performance—all while keeping
+                      your data fully secure.
+                    </p>
+                    <p className="text-navy-700 leading-relaxed mb-4">
+                      The second major feature is the ability to upload images.
+                      For the first time, nilGPT can handle images as well as
+                      text. You can now upload screenshots, diagrams, or photos
+                      and interact with them directly in nilGPT.
+                    </p>
+                  </section>
+
+                  {/* More Improvements Section */}
+                  <section className="mb-8">
+                    <h2 className="font-display font-bold text-2xl text-navy-900 mb-4">
+                      More Improvements
+                    </h2>
+                    <p className="text-navy-700 leading-relaxed mb-4">
+                      Alongside these major features, we've added a set of
+                      smaller but useful improvements. You can now delete and
+                      rename chats, giving you more control over your chat
+                      history. On the landing page, a new counter shows the
+                      total number of messages sent with nilGPT since launch—a
+                      small but satisfying reminder of how quickly the community
+                      is growing.
+                    </p>
+
+                    {/* Message Counter Image */}
+                    <div className="my-8">
+                      <Image
+                        src="/img/message_counter.png"
+                        alt="nilGPT Message Counter"
+                        width={400}
+                        height={300}
+                        className="w-full max-w-md mx-auto h-auto border-2 border-navy-900 rounded-lg"
+                        priority
+                      />
+                    </div>
+
+                    <p className="text-navy-700 leading-relaxed mb-4">
+                      We've also introduced starter messages for each mode,
+                      designed to make it easier to get going with nilGPT right
+                      away.
+                    </p>
+
+                    {/* Starter Messages Image */}
+                    <div className="my-8">
+                      <Image
+                        src="/img/starter_messages.jpeg"
+                        alt="nilGPT Starter Messages"
+                        width={400}
+                        height={300}
+                        className="w-full max-w-md mx-auto h-auto border-2 border-navy-900 rounded-lg"
+                        priority
+                      />
+                    </div>
+                  </section>
+
+                  {/* Looking Ahead Section */}
+                  <section className="mb-8">
+                    <h2 className="font-display font-bold text-2xl text-navy-900 mb-4">
+                      Looking Ahead
+                    </h2>
+                    <p className="text-navy-700 leading-relaxed mb-4">
+                      In the near future, you will be able to search the web
+                      through nilGPT, extending the chatbot's knowledge base
+                      while still preserving the same guarantees of privacy and
+                      security.
+                    </p>
+                    <p className="text-navy-700 leading-relaxed mb-4">
+                      We're also working on voice mode, which will make
+                      conversations with nilGPT feel even more natural and
+                      seamless. The pace won't slow down.
+                    </p>
+                    <p className="text-navy-700 leading-relaxed">
+                      Expect more exciting updates in the weeks ahead.
+                    </p>
+                  </section>
+                </div>
+
+                {/* Toggle Button */}
+                <div className="text-center mt-6">
+                  <button
+                    onClick={() => setIsExpandedThird(!isExpandedThird)}
+                    className="bg-navy-900 text-cream-50 px-6 py-3 font-bold brutalist-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all duration-200 rounded-lg"
+                  >
+                    {isExpandedThird ? "Show Less" : "Read More"}
+                  </button>
+                </div>
+              </article>
+            </div>
+
+            {/* Second Article - Attestation Post */}
             <div className="bg-white border-4 border-navy-900 brutalist-shadow p-8 space-y-8">
               <article className="space-y-8">
                 {/* Main Title */}
@@ -297,7 +445,7 @@ export default function ContentPolicy() {
               </article>
             </div>
 
-            {/* Second Article - Original Post */}
+            {/* Third Article - Original Post */}
             <div className="bg-white border-4 border-navy-900 brutalist-shadow p-8 space-y-8">
               <article className="space-y-8">
                 {/* Main Title */}

public/img/starter_messages.jpeg

@@ -78,6 +78,18 @@ const AttestationModal = () => {
                   <code className="text-sm font-mono text-gray-600 bg-gray-100 px-1 py-0.5 rounded break-all">
                     https://nilgpt.xyz/nilcc/api/v1/report
                   </code>
+                  <Button
+                    onClick={() => getMeasurementHash()}
+                    disabled={isLoading}
+                    size="sm"
+                    className="flex items-center gap-2 ml-auto"
+                    data-umami-event="Fetch Attestation Clicked"
+                  >
+                    <RefreshCw
+                      className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
+                    />
+                    Fetch
+                  </Button>
                 </div>
               </div>
 
@@ -109,18 +121,6 @@ const AttestationModal = () => {
                   </div>
                 </div>
               )}
-              <Button
-                onClick={() => getMeasurementHash()}
-                disabled={isLoading}
-                size="sm"
-                className="flex items-center gap-2 ml-auto"
-                data-umami-event="Fetch Attestation Clicked"
-              >
-                <RefreshCw
-                  className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
-                />
-                Fetch
-              </Button>
             </div>
           </div>
         </div>

src/app/blog/page.tsx

@@ -71,7 +71,7 @@ export default function AuthModal({
           {mode === "signup" && (
             <div className="mb-4">
               <label className="block text-sm font-medium text-gray-700 mb-2">
-                Name
+                Username
               </label>
               <input
                 type="text"

src/components/AttestationModal.tsx

@@ -44,8 +44,12 @@ export function SecretKeyModal({ isOpen, onClose }: SecretKeyModalProps) {
         </h2>
         <p className="text-gray-700 mb-6 leading-relaxed">
           Please create or enter your passphrase. This can be any word or
-          phrase, and is used to encrypt all chat messages locally. Your
-          passphrase never leaves your browser. <br />
+          phrase, and is used to encrypt all chat messages locally.
+          <br />
+          <br />
+          Your passphrase never leaves your browser - it is stored in session
+          storage and deleted if you close the tab.
+          <br />
           <br /> Keep your passphrase secure. You&apos;ll need to use the same
           one every time you want to view a chat.
         </p>

src/components/auth/AuthModal.tsx

@@ -4,6 +4,9 @@ import {
   CheckIcon,
   EditIcon,
   EllipsisVertical,
+  LogOut,
+  Shield,
+  ShieldCheck,
   Trash2Icon,
   XIcon,
 } from "lucide-react";
@@ -13,10 +16,12 @@ import { usePathname, useRouter } from "next/navigation";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
+import { useApp } from "@/contexts/AppContext";
 import { useAuth } from "@/contexts/UnifiedAuthProvider";
 import { useEncryption } from "@/hooks/useEncryption";
 import { LocalStorageService } from "@/services/LocalStorage";
 import AttestationModal from "../AttestationModal";
+import { SecretKeyModal } from "../auth/SecretKeyModal";
 import { Button } from "../ui/button";
 import { Dialog, DialogTrigger } from "../ui/dialog";
 
@@ -31,7 +36,8 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ isCollapsed, onClose }) => {
-  const { user } = useAuth();
+  const { user, signOut } = useAuth();
+  const { setUserSecretKeySeed } = useApp();
   const router = useRouter();
   const pathname = usePathname();
   const { decrypt, hasSecretKey } = useEncryption();
@@ -41,6 +47,8 @@ const Sidebar: React.FC<SidebarProps> = ({ isCollapsed, onClose }) => {
   const [loading, setLoading] = useState(true);
   const [isCreatingChat, setIsCreatingChat] = useState(false);
   const [isAttestationModalOpen, setIsAttestationModalOpen] = useState(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [showSecretKeyModal, setShowSecretKeyModal] = useState(false);
   const [contextMenuChatId, setContextMenuChatId] = useState<string | null>(
     null,
   );
@@ -215,16 +223,19 @@ const Sidebar: React.FC<SidebarProps> = ({ isCollapsed, onClose }) => {
       if (contextMenuChatId) {
         setContextMenuChatId(null);
       }
+      if (isUserMenuOpen) {
+        setIsUserMenuOpen(false);
+      }
     };
 
-    if (contextMenuChatId) {
+    if (contextMenuChatId || isUserMenuOpen) {
       document.addEventListener("click", handleClickOutside);
     }
 
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, [contextMenuChatId]);
+  }, [contextMenuChatId, isUserMenuOpen]);
 
   const handleNewChat = async () => {
     setIsCreatingChat(true);
@@ -330,6 +341,26 @@ const Sidebar: React.FC<SidebarProps> = ({ isCollapsed, onClose }) => {
     setEditingTitle("");
   };
 
+  // User menu handlers
+  const handleChangePassphrase = () => {
+    // Clear the current passphrase from both context and session storage
+    setUserSecretKeySeed("");
+    sessionStorage.removeItem("userSecretKeySeed");
+    // Open the modal
+    setShowSecretKeyModal(true);
+    setIsUserMenuOpen(false);
+  };
+
+  const handleViewAttestation = () => {
+    setIsAttestationModalOpen(true);
+    setIsUserMenuOpen(false);
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    setIsUserMenuOpen(false);
+  };
+
   return (
     <div
       className={`
@@ -534,15 +565,54 @@ const Sidebar: React.FC<SidebarProps> = ({ isCollapsed, onClose }) => {
           <AttestationModal />
         </Dialog>
 
-        <div className="border-t border-neutral-600 shrink-0 py-3 p-4 ">
+        <div className="border-t border-neutral-600 shrink-0 py-3 p-4 relative">
           <div className="flex items-center space-x-3">
-            <div className="w-8 h-8 rounded-full bg-[#FFC971] flex items-center justify-center text-sm font-medium text-black shrink-0">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsUserMenuOpen(!isUserMenuOpen);
+              }}
+              className="w-8 h-8 rounded-full bg-[#FFC971] flex items-center justify-center text-sm font-medium text-black shrink-0 hover:bg-[#FFD584] transition-colors"
+            >
               {initials}
-            </div>
+            </button>
             <span className="text-md text-white truncate">{userName}</span>
           </div>
+
+          {/* User Menu Dropdown */}
+          {isUserMenuOpen && (
+            <div className="absolute bottom-full left-4 right-4 mb-2 bg-[#2a2a2a] border border-[#444] rounded-lg shadow-lg z-50">
+              <button
+                onClick={handleChangePassphrase}
+                className="w-full flex items-center gap-3 px-4 py-3 text-sm text-white hover:bg-[#333] rounded-t-lg transition-colors"
+              >
+                <Shield size={16} />
+                Change Passphrase
+              </button>
+              <button
+                onClick={handleViewAttestation}
+                className="w-full flex items-center gap-3 px-4 py-3 text-sm text-white hover:bg-[#333] transition-colors"
+              >
+                <ShieldCheck size={16} />
+                View Attestation
+              </button>
+              <button
+                onClick={handleSignOut}
+                className="w-full flex items-center gap-3 px-4 py-3 text-sm text-red-400 hover:bg-[#333] rounded-b-lg transition-colors"
+              >
+                <LogOut size={16} />
+                Sign Out
+              </button>
+            </div>
+          )}
         </div>
       </div>
+
+      {/* Secret Key Modal */}
+      <SecretKeyModal
+        isOpen={showSecretKeyModal}
+        onClose={() => setShowSecretKeyModal(false)}
+      />
     </div>
   );
 };

src/components/auth/SecretKeyModal.tsx

@@ -70,6 +70,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
     if (wasAuthenticated && !isCurrentlyAuthenticated) {
       setUserSecretKeySeed(null);
       sessionStorage.removeItem("userSecretKeySeed");
+      setIsSidebarCollapsed(true); // Collapse sidebar on sign out
     }
 
     // Update the previous state