Update index.html

index.html

@@ -34,10 +34,10 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 
 /* --- MAIN LAYOUT (CHAT + WORKSPACE) --- */
 .shell{position:relative;z-index:1;display:flex;height:100vh;width:100vw;overflow:hidden;}
-.sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);flex-shrink:0;}
+.sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);flex-shrink:0;z-index:30;}
 .main-wrapper{flex:1;display:flex;position:relative;overflow:hidden;}
 .chat-main{flex:1;display:flex;flex-direction:column;background:transparent;position:relative;min-width:300px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
-.workspace{width:0;background:#fafafa;border-left:1px solid var(--border-light);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:-10px 0 30px rgba(0,0,0,0.02);}
+.workspace{width:0;background:#fafafa;border-left:1px solid var(--border-light);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:-10px 0 30px rgba(0,0,0,0.02);z-index:25;}
 .workspace.open{width:50%;}
 
 /* --- SIDEBAR & BRANDING --- */
@@ -47,14 +47,27 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 .logo-text{line-height:1.2;}
 .logo-name{font-family:var(--font-sans);font-weight:800;font-size:18px;color:var(--text-main);letter-spacing:-0.5px;}
 .logo-sub{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
-.settings{padding:20px;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
+.settings{padding:20px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap: 20px;}
 .settings::-webkit-scrollbar{width:4px;}
 .settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
-.brand-box {background: #ffffff;border: 1px solid var(--border-light);border-radius: var(--radius-md);padding: 24px 16px;text-align: center;box-shadow: var(--shadow-sm);margin-top:20px;}
+
+/* Custom Toggle Switch for Thinking */
+.toggle-wrapper {display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 16px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);}
+.toggle-label {font-size: 13px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
+.toggle-label span {font-size: 11px; color: var(--text-muted); font-weight: 500; display: block; margin-top: 2px;}
+.switch {position: relative; display: inline-block; width: 44px; height: 24px;}
+.switch input {opacity: 0; width: 0; height: 0;}
+.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e5ea; transition: .4s; border-radius: 24px;}
+.slider:before {position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
+input:checked + .slider {background-color: var(--accent-green);}
+input:checked + .slider:before {transform: translateX(20px);}
+
+.brand-box {background: #ffffff;border: 1px solid var(--border-light);border-radius: var(--radius-md);padding: 24px 16px;text-align: center;box-shadow: var(--shadow-sm);margin-top:auto;}
 .brand-box img {width: 70px; height: 70px; border-radius: 16px; object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
 .brand-box h3 {font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px;}
 .brand-box p {font-size: 10px; font-weight: 600; color: var(--accent-green); line-height: 1.4; letter-spacing: 0.5px;}
-.clear-btn{width:100%;padding:12px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:auto;}
+
+.clear-btn{width:100%;padding:12px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;}
 .clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;}
 
 /* --- CHAT AREA --- */
@@ -65,32 +78,45 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 .messages::-webkit-scrollbar{width:6px;}
 .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
 
-.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;margin:auto;animation:fadeIn 0.5s ease-out;width:100%;max-width:600px;}
-@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
+/* Welcome Screen & Prompts */
+.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;margin:auto;animation:fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;width:100%;max-width:650px;}
+@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
 .welcome-logo{width:80px;height:80px;border-radius:24px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;border:1px solid var(--border-light);}
 .welcome-title{font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:12px;}
-.welcome-sub{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:32px;}
-
-.msg{display:flex;gap:16px;animation:msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;max-width:85%;}
-@keyframes msgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
+.welcome-sub{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:32px;max-width: 500px;}
+.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;}
+.ex-card{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:16px;cursor:pointer;text-align:left;transition:all 0.2s;box-shadow:var(--shadow-sm);}
+.ex-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent);}
+.ex-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
+.ex-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
+
+/* Messages */
+.msg{display:flex;gap:16px;animation:msgIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;max-width:85%;}
+@keyframes msgIn{from{opacity:0;transform:translateY(15px) scale(0.96);}to{opacity:1;transform:none;}}
 .msg.user{flex-direction:row-reverse;align-self:flex-end;}
 .msg.bot{align-self:flex-start;}
 .avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;overflow:hidden;}
 .msg.user .avatar{background:#f0f0f0;color:var(--text-main);border:1px solid var(--border-light);}
 .msg.bot .avatar{border:1px solid var(--border-light);background:#fff;padding:2px;}
 .msg.bot .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
-.body{display:flex;flex-direction:column;gap:6px;max-width:100%;}
+.body{display:flex;flex-direction:column;gap:6px;max-width:100%; width: 100%;}
 .msg.user .body{align-items:flex-end;}
 
-.bubble{padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-main);position:relative;}
+.bubble{padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-main);position:relative;word-break:break-word;overflow-wrap:anywhere;}
 .msg.user .bubble{background:var(--text-main);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:var(--shadow-sm);}
 .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;}
 
 /* BOT ACTIONS (Copy Button below text) */
-.msg-actions{display:flex;gap:8px;margin-top:4px;padding-left:12px;opacity:0;transition:opacity 0.2s;}
+.msg-actions{display:flex;gap:8px;margin-top:4px;padding-left:12px;opacity:0.7;transition:opacity 0.2s;}
 .msg.bot:hover .msg-actions{opacity:1;}
-.action-btn{background:transparent;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;transition:all 0.2s;}
-.action-btn:hover{background:var(--bg-secondary);color:var(--text-main);}
+.action-btn{background:var(--bg-secondary);border:1px solid var(--border-light);color:var(--text-main);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;transition:all 0.2s;}
+.action-btn:hover{background:#e5e5ea;transform:translateY(-1px);}
+
+/* Reasoning / Thinking Box */
+.think-box {background: #fdfdfd;border: 1px solid var(--border-light);border-left: 4px solid var(--accent-green);border-radius: 8px;padding: 14px 16px;margin-bottom: 16px;font-family: var(--font-mono);font-size: 13.5px;color: var(--text-muted);line-height: 1.5;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
+.think-title {font-weight: 600; color: var(--text-main); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans);}
+/* Controlled by body class */
+body:not(.show-thinking) .think-box {display: none;}
 
 /* Markdown inside bubble */
 .bubble p{margin-bottom:12px;}
@@ -98,38 +124,35 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 .bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:3px 6px;border-radius:6px;font-size:0.85em;color:#e83e8c;}
 .msg.user .bubble code{background:rgba(255,255,255,0.2);color:#fff;}
 .bubble img{max-width:100%;border-radius:12px;margin:10px 0;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);}
-
-/* Generated Image Loader */
-.img-loader {display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,153,51,0.1);border:1px solid rgba(255,153,51,0.3);border-radius:12px;color:var(--accent);font-weight:600;font-size:14px;margin-bottom:10px;}
-.spinner {width:20px;height:20px;border:3px solid rgba(255,153,51,0.3);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;}
-@keyframes spin{to{transform:rotate(360deg);}}
+.bubble pre {display: none;} /* Native pre hidden since we override code blocks */
 
 /* Workspace Trigger Card in Chat */
-.ws-trigger-card {background: var(--bg-secondary);border: 1px solid var(--border-light);border-radius: 12px;padding: 16px;margin: 12px 0;display: flex;align-items: center;justify-content: space-between;}
+.ws-trigger-card {background: var(--bg-secondary);border: 1px solid var(--border-light);border-radius: 12px;padding: 16px;margin: 12px 0;display: flex;align-items: center;justify-content: space-between;box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);}
 .ws-trigger-info {display: flex;align-items: center;gap: 12px;}
-.ws-trigger-icon {width: 40px;height: 40px;border-radius: 10px;background: #fff;display: flex;align-items: center;justify-content: center;font-size: 20px;box-shadow: var(--shadow-sm);border: 1px solid var(--border-light);}
+.ws-trigger-icon {width: 44px;height: 44px;border-radius: 10px;background: #fff;display: flex;align-items: center;justify-content: center;font-size: 22px;box-shadow: var(--shadow-sm);border: 1px solid var(--border-light);}
 .ws-trigger-text h4 {font-size: 14px;font-weight: 600;margin-bottom: 2px;}
-.ws-trigger-text p {font-size: 12px;color: var(--text-muted);font-family: var(--font-mono);}
-.ws-btn {padding: 8px 16px;background: var(--text-main);color: #fff;border: none;border-radius: 8px;font-size: 13px;font-weight: 500;cursor: pointer;transition: transform 0.2s;}
-.ws-btn:hover {transform: scale(1.05);}
+.ws-trigger-text p {font-size: 12px;color: var(--text-muted);font-family: var(--font-mono);text-transform: uppercase;}
+.ws-btn {padding: 8px 16px;background: var(--text-main);color: #fff;border: none;border-radius: 8px;font-size: 13px;font-weight: 600;cursor: pointer;transition: all 0.2s;}
+.ws-btn:hover {transform: scale(1.05); background: var(--accent);}
 
-/* Typing indicator */
+/* Typing & Cursor */
+.blinking-cursor {display: inline-block; width: 8px; height: 16px; background: var(--accent); margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: middle;}
+@keyframes blink { 50% { opacity: 0; } }
 .typing{display:flex;align-items:center;gap:6px;padding:4px;}
 .typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1.4s infinite ease-in-out both;}
 .typing span:nth-child(1){animation-delay:-0.32s;}.typing span:nth-child(2){animation-delay:-0.16s;}
 @keyframes bounce{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}}
 
-/* --- SCROLL TO BOTTOM BUTTON --- */
-.scroll-bottom-btn {position:absolute;bottom:100px;right:40px;width:40px;height:40px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-main);opacity:0;pointer-events:none;transform:translateY(20px);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index:20;}
-.scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateY(0);}
-.scroll-bottom-btn:hover {background:#fff;transform:translateY(-3px);}
+/* --- SCROLL TO BOTTOM BUTTON (Centered) --- */
+.scroll-bottom-btn {position:absolute;bottom:120px;left:50%;width:44px;height:44px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-main);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index:20;}
+.scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
+.scroll-bottom-btn:hover {background:#fff;transform:translateX(-50%) translateY(-3px);box-shadow:var(--shadow-lg);}
 
-/* --- INPUT AREA (WITH INTEGRATED ATTACHMENT) --- */
+/* --- INPUT AREA --- */
 .input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);position:relative;z-index:20;}
 .input-wrap{display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s, border-color 0.3s;}
 .input-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 12px 40px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,153,51,0.1);}
 
-/* Image Preview Inside Input */
 .img-prev-inline{display:none;padding:12px 20px 0;align-items:center;gap:12px;}
 .img-prev-inline.show{display:flex;animation:fadeIn 0.3s;}
 .inline-th{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border-light);}
@@ -138,26 +161,21 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 .inline-rm{background:rgba(0,0,0,0.05);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
 .inline-rm:hover{background:#ff3b30;color:#fff;}
 
-.input-row{display:flex;align-items:flex-end;gap:12px;padding:10px 14px 10px 20px;}
-.chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--text-main);line-height:1.5;resize:none;max-height:200px;min-height:24px;padding:10px 0;}
+.input-row{display:flex;align-items:flex-end;gap:12px;padding:12px 16px 12px 20px;}
+.chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--text-main);line-height:1.5;resize:none;max-height:200px;min-height:24px;padding:8px 0;}
 .chat-ta::placeholder{color:var(--text-muted);}
-.input-acts{display:flex;align-items:center;gap:8px;padding-bottom:6px;}
 
-/* Modern Attachment Button */
-.attach-btn{width:36px;height:36px;border-radius:12px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;position:relative;overflow:hidden;}
+/* Modern Attachment & Send */
+.attach-btn{width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;position:relative;overflow:hidden;padding-bottom:4px;}
 .attach-btn:hover{background:rgba(0,0,0,0.04);color:var(--text-main);}
 .attach-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;}
 .attach-btn svg{width:20px;height:20px;}
 
-/* Tiranga Gradient Send Button */
-.send-btn{width:40px;height:40px;border-radius:14px;border:none;background:linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);position:relative;}
-.send-btn::before{content:'';position:absolute;inset:1px;background:#1d1d1f;border-radius:13px;transition:opacity 0.3s;} /* Dark inner to make icon pop, or keep gradient */
-/* Let's make the arrow black on the gradient, no dark inner needed */
-.send-btn::before{display:none;}
-.send-btn svg{width:18px;height:18px;fill:#1d1d1f;z-index:1;transition:transform 0.2s;}
-.send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);}
+.send-btn{width:42px;height:42px;border-radius:14px;border:none;background:linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
+.send-btn svg{width:18px;height:18px;fill:#1d1d1f;transition:transform 0.2s;}
+.send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);transform:translateY(-1px);}
 .send-btn:hover svg{transform:translate(2px, -2px);}
-.send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);}
+.send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);transform:none;}
 
 .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
 
@@ -165,10 +183,10 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 .ws-hdr{padding:14px 20px;border-bottom:1px solid var(--border-light);background:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
 .ws-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
 .ws-actions{display:flex;gap:8px;}
-.ws-icon-btn{width:32px;height:32px;border-radius:8px;background:#f5f5f7;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-main);transition:all 0.2s;font-size:13px;}
+.ws-icon-btn{padding:6px 12px;border-radius:8px;background:var(--bg-secondary);border:1px solid var(--border-light);cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text-main);transition:all 0.2s;font-size:12px;font-weight:600;}
 .ws-icon-btn:hover{background:#e5e5ea;}
-.ws-close{background:transparent;color:var(--text-muted);}
-.ws-close:hover{color:#ff3b30;}
+.ws-close{padding:6px;background:transparent;border-color:transparent;}
+.ws-close:hover{color:#ff3b30;background:#fff0f0;}
 .ws-content{flex:1;overflow-y:auto;background:#fafafa;padding:20px;}
 .ws-content pre{margin:0;padding:20px;background:#fff;border:1px solid var(--border-light);border-radius:12px;font-family:var(--font-mono);font-size:14px;line-height:1.6;overflow-x:auto;box-shadow:var(--shadow-sm);}
 
@@ -180,11 +198,12 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
   .messages{padding:20px;}
   .input-container{padding:0 20px 20px;}
   .msg{max-width:95%;}
-  .scroll-bottom-btn{right:20px;bottom:90px;}
+  .scroll-bottom-btn{bottom:110px;}
 }
 </style>
 </head>
-<body>
+<!-- Body controls the thinking visibility -->
+<body class="show-thinking">
 
 <div class="bg">
   <div class="orb orb1"></div>
@@ -199,11 +218,24 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
         <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="logo-img">
         <div class="logo-text">
           <div class="logo-name">TIRANGA</div>
-          <div class="logo-sub">Workspace Edition</div>
+          <div class="logo-sub">Advanced Edition</div>
         </div>
       </div>
     </div>
+    
     <div class="settings">
+      <!-- Reasoning Toggle -->
+      <div class="toggle-wrapper">
+        <div class="toggle-label">
+          🧠 Reasoning Mode
+          <span>Show internal thinking</span>
+        </div>
+        <label class="switch">
+          <input type="checkbox" id="thinkingToggle" checked onchange="toggleThinking(this)">
+          <span class="slider"></span>
+        </label>
+      </div>
+
       <div class="brand-box">
           <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Identity">
           <h3>TIRANGA</h3>
@@ -227,20 +259,30 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
         <!-- Welcome Screen -->
         <div class="welcome" id="welcome">
           <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="welcome-logo">
-          <div class="welcome-title">Hello There</div>
-          <div class="welcome-sub"> I am TIRANGA. For your convenience, I have added new features like memory, workspace, and image generation. Tell me, what shall we create today?"</div>
+          <div class="welcome-title">Welcome, Divy Patel!</div>
+          <div class="welcome-sub">I am TIRANGA. I am equipped with advanced reasoning, workspace coding, and image generation. How can I assist you today?</div>
+          
+          <div class="ex-grid">
+            <div class="ex-card" onclick="sendEx('Write a python script for a simple HTTP server. Provide the code.')">
+              <div class="ex-title">💻 Code Generation</div>
+              <div class="ex-desc">Generate secure, workspace-ready code</div>
+            </div>
+            <div class="ex-card" onclick="sendEx('Create an image of a futuristic Indian city with flying cars, highly detailed, 8k resolution.')">
+              <div class="ex-title">🎨 Generate Images</div>
+              <div class="ex-desc">Stunning visuals using Pollinations AI</div>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Scroll to bottom button -->
+      <!-- Scroll to bottom button (Centered) -->
       <button class="scroll-bottom-btn" id="scrollBtn" onclick="forceScrollDown()">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
       </button>
 
       <!-- Input Area -->
       <div class="input-container">
         <div class="input-wrap">
-          <!-- Inline Image Preview -->
           <div class="img-prev-inline" id="imgPrev">
             <img class="inline-th" id="imgThumb" src="">
             <div class="inline-info">
@@ -260,7 +302,7 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
             </button>
           </div>
         </div>
-        <div class="input-hint">TIRANGA is engineered for extreme performance. Verified by Divy Bhai.</div>
+        <div class="input-hint">TIRANGA is engineered for extreme performance. Verified by Divy Patel.</div>
       </div>
     </main>
 
@@ -268,11 +310,11 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
     <aside class="workspace" id="workspace">
       <div class="ws-hdr">
         <div class="ws-title">
-          <span id="wsLangIcon">💻</span>
+          <span>💻</span>
           <span id="wsTitleText">Generated Code</span>
         </div>
         <div class="ws-actions">
-          <button class="ws-icon-btn" onclick="copyWorkspaceCode()" title="Copy Code">📋</button>
+          <button class="ws-icon-btn" onclick="copyWorkspaceCode()" id="wsCopyBtn">📋 Copy</button>
           <button class="ws-icon-btn ws-close" onclick="closeWorkspace()" title="Close">✕</button>
         </div>
       </div>
@@ -284,18 +326,24 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 </div>
 
 <script>
-// --- STATE MANAGEMENT & MEMORY ---
+// --- STATE MANAGEMENT ---
 const S = {
   history: [],
   pending: null,
   busy: false,
   isUserScrolling: false,
-  currentCode: "" // Holds the code currently in workspace
+  codeBlocks: [], // Securely stores raw code to prevent HTML escaping bugs
+  currentWorkspaceId: null
 };
 
-// Load Memory on Boot
+function toggleThinking(el) {
+  if(el.checked) document.body.classList.add('show-thinking');
+  else document.body.classList.remove('show-thinking');
+}
+
+// Memory initialization
 window.onload = () => {
-  const saved = localStorage.getItem('tiranga_chat_memory');
+  const saved = localStorage.getItem('tiranga_v3_memory');
   if(saved) {
     try {
       S.history = JSON.parse(saved);
@@ -305,21 +353,18 @@ window.onload = () => {
           if(msg.role === 'user') appendUserDOM(msg.content, msg.badge);
           else appendBotDOM(msg.content);
         });
+        setTimeout(forceScrollDown, 100);
       }
-    } catch(e) { console.error("Memory load failed", e); }
+    } catch(e) {}
   }
 };
 
 function saveMemory() {
-  // Keep last 20 messages to prevent local storage overflow
   const memToSave = S.history.slice(-20);
-  localStorage.setItem('tiranga_chat_memory', JSON.stringify(memToSave));
+  localStorage.setItem('tiranga_v3_memory', JSON.stringify(memToSave));
 }
-
 function clearMemory() {
-  localStorage.removeItem('tiranga_chat_memory');
-  S.history = [];
-  document.getElementById('msgs').innerHTML = '';
+  localStorage.removeItem('tiranga_v3_memory');
   location.reload();
 }
 
@@ -342,11 +387,10 @@ function removeImg(){S.pending=null;document.getElementById('imgPrev').classList
 function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
 function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';}
 
-// Scroll Handling
 function checkScroll() {
   const m = document.getElementById('msgs');
-  // If user scrolls up more than 50px from bottom, show button
-  const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 50;
+  // Show center button only if user scrolled UP more than 80px
+  const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 80;
   S.isUserScrolling = !isAtBottom;
   
   const btn = document.getElementById('scrollBtn');
@@ -357,6 +401,7 @@ function forceScrollDown(){
   const m=document.getElementById('msgs');
   m.scrollTo({top: m.scrollHeight, behavior: 'smooth'});
   S.isUserScrolling = false;
+  document.getElementById('scrollBtn').classList.remove('show');
 }
 function autoScroll() {
   if(!S.isUserScrolling) {
@@ -365,90 +410,75 @@ function autoScroll() {
   }
 }
 
-// --- COPY FUNCTIONALITY ---
+// --- COPY UTILS ---
 function copyText(btn, text) {
   navigator.clipboard.writeText(text);
   const orig = btn.innerHTML;
-  btn.innerHTML = "✓ Copied!";
+  btn.innerHTML = "✓ Copied";
   setTimeout(() => btn.innerHTML = orig, 2000);
 }
+function copyWorkspaceCode() {
+  if(S.currentWorkspaceId !== null) {
+    navigator.clipboard.writeText(S.codeBlocks[S.currentWorkspaceId].code);
+    const btn = document.getElementById('wsCopyBtn');
+    const orig = btn.innerHTML;
+    btn.innerHTML = "✓ Copied";
+    setTimeout(() => btn.innerHTML = orig, 2000);
+  }
+}
 
 // --- WORKSPACE LOGIC ---
-function openWorkspace(encodedCode, lang) {
-  const code = decodeURIComponent(encodedCode);
-  S.currentCode = code;
-  document.getElementById('wsTitleText').textContent = lang ? `Generated ${lang.toUpperCase()}` : "Generated Code";
+function openWorkspace(id) {
+  S.currentWorkspaceId = id;
+  const block = S.codeBlocks[id];
+  document.getElementById('wsTitleText').textContent = block.lang ? `Generated ${block.lang.toUpperCase()}` : "Generated Code";
+  
   const codeBlock = document.getElementById('wsCodeBlock');
-  codeBlock.className = `hljs language-${lang || 'plaintext'}`;
-  codeBlock.textContent = code;
+  codeBlock.className = `hljs language-${block.lang || 'plaintext'}`;
+  codeBlock.textContent = block.code;
   hljs.highlightElement(codeBlock);
   
   document.getElementById('workspace').classList.add('open');
-  // On mobile, close sidebar if open
-  if(window.innerWidth <= 850) {
-      document.getElementById('sidebar').classList.remove('show');
-  }
+  if(window.innerWidth <= 850) { document.getElementById('sidebar').classList.remove('show'); }
 }
-function closeWorkspace() {
-  document.getElementById('workspace').classList.remove('open');
-}
-function copyWorkspaceCode() {
-  navigator.clipboard.writeText(S.currentCode);
-  alert("Code Copied!"); // Native toast substitute
-}
-
-// --- IMAGE GENERATION INTERCEPTOR ---
-function isImageRequest(text) {
-  const t = text.toLowerCase();
-  const keywords = ['image', 'photo', 'picture', 'draw', 'generate', 'create', 'तस्वीर', 'चित्र', 'फोटो', 'बनाओ', 'बना'];
-  // Very basic intent check
-  if((t.includes('create') || t.includes('generate') || t.includes('draw') || t.includes('बनाओ') || t.includes('बना')) && 
-     (t.includes('image') || t.includes('photo') || t.includes('picture') || t.includes('तस्वीर') || t.includes('चित्र') || t.includes('फोटो'))) {
-      return true;
-  }
-  return false;
-}
-
-async function handleImageGeneration(msg) {
-  // Add User msg
-  appendUserDOM(msg);
-  S.history.push({role: 'user', content: msg});
+function closeWorkspace() { document.getElementById('workspace').classList.remove('open'); }
+
+// --- MARKED.JS CUSTOM RENDERER (Fixes the Workspace Bug Completely) ---
+const renderer = new marked.Renderer();
+renderer.code = function(token) {
+  // Marked v12 might pass object or string based on usage. Safely extract.
+  const codeText = typeof token === 'string' ? token : (token.text || '');
+  const language = typeof token === 'string' ? arguments[1] : (token.lang || '');
   
-  // Create Bot loader
-  const botDiv = document.createElement('div');botDiv.className='msg bot';
-  botDiv.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"><div class="img-loader"><div class="spinner"></div> 🇮🇳 TIRANGA is creating your image...</div></div></div>`;
-  document.getElementById('msgs').appendChild(botDiv);
-  forceScrollDown();
-
-  // Parse logic for Pollinations
-  const models = ['flux', 'flux-realism', 'flux-anime', 'flux-3d'];
-  let selectedModel = models[0]; // default
-  const tl = msg.toLowerCase();
-  if(tl.includes('real')) selectedModel = 'flux-realism';
-  if(tl.includes('anime')) selectedModel = 'flux-anime';
-  if(tl.includes('3d')) selectedModel = 'flux-3d';
+  const id = S.codeBlocks.length;
+  S.codeBlocks.push({ code: codeText, lang: language });
   
-  const seed = Math.floor(Math.random() * 100000);
-  const prompt = encodeURIComponent(msg);
-  const url = `https://image.pollinations.ai/prompt/${prompt}?seed=${seed}&model=${selectedModel}&width=1024&height=1024&nologo=true`;
-
-  // Create Image element
-  const img = new Image();
-  img.src = url;
-  img.onload = () => {
-    // Replace loader with image
-    botDiv.querySelector('.bubble').innerHTML = `<img src="${url}" alt="Generated Image"><p>Here is your image! (Model: ${selectedModel})</p>`;
-    
-    // Add to history
-    const finalHTML = botDiv.querySelector('.bubble').innerHTML;
-    S.history.push({role: 'bot', content: finalHTML, isRawHTML: true});
-    saveMemory();
-    forceScrollDown();
-  };
-  img.onerror = () => {
-    botDiv.querySelector('.bubble').innerHTML = `<p>Sorry, I couldn't generate the image right now.</p>`;
-    forceScrollDown();
-  };
+  // Return the Beautiful Trigger Card
+  return `
+    <div class="ws-trigger-card">
+      <div class="ws-trigger-info">
+        <div class="ws-trigger-icon">💻</div>
+        <div class="ws-trigger-text">
+          <h4>Code Generated</h4>
+          <p>${language || 'Snippet'}</p>
+        </div>
+      </div>
+      <button class="ws-btn" onclick="openWorkspace(${id})">View in Workspace</button>
+    </div>
+  `;
+};
+marked.use({ renderer });
+
+// Custom Thinking Parser
+function parseThinking(raw) {
+    const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/gi;
+    let text = raw;
+    let thinkContent = '';
+    text = text.replace(thinkRegex, (match, p1) => {
+        thinkContent += p1;
+        return ''; 
+    });
+    return { mainText: text.trim(), thinkText: thinkContent.trim() };
 }
 
 // --- MAIN CHAT LOGIC ---
@@ -457,12 +487,6 @@ async function sendMsg(){
   const inp=document.getElementById('chatInput');
   const msg=inp.value.trim();if(!msg && !S.pending)return;
   inp.value='';inp.style.height='auto';
-  
-  // Image Generation Intercept
-  if(!S.pending && isImageRequest(msg)) {
-      handleImageGeneration(msg);
-      return;
-  }
 
   document.getElementById('sendBtn').disabled=true;
   S.busy=true;
@@ -489,14 +513,23 @@ async function sendMsg(){
   document.getElementById('msgs').appendChild(botDiv);
   forceScrollDown();
 
-  const sysPrompt = "You are TIRANGA, a state-of-the-art AI assistant developed by Divy Patel at Vedika AI.  your default language is English. Be extremely respectful. Always show immense respect to India. Answer comprehensively.";
+  // Integrated Pollinations AI at Model Level (Using System Prompt constraints)
+  const sysPrompt = `You are TIRANGA, a state-of-the-art AI assistant. Developed by Divy Patel.
+  Always communicate respectfully.
+  
+  CRITICAL IMAGE GENERATION PROTOCOL:
+  If the user asks to generate, create, or draw an image/photo, you MUST generate the image by responding with a markdown image tag using Pollinations AI.
+  Format to use: ![TIRANGA is creating your image...](https://image.pollinations.ai/prompt/{URL_ENCODED_PROMPT}?width=1024&height=1024&nologo=true&model={MODEL})
+  Available models for {MODEL}: flux, flux-realism, flux-anime, flux-3d.
+  Choose the best model based on the prompt. Example: if user says anime, use flux-anime.
+  Always include this markdown tag when image generation is requested.`;
   
   const payload = {
       message: msg,
       attachments: attachments,
       system_prompt: sysPrompt,
       max_tokens: 4096,
-      temperature: 0.6
+      temperature: 0.7
   };
 
   try{
@@ -525,19 +558,22 @@ async function sendMsg(){
                     const dataObj = JSON.parse(dataStr);
                     if (dataObj.choices && dataObj.choices[0].delta.content) {
                         accumulatedText += dataObj.choices[0].delta.content;
-                        renderBotText(botDiv, accumulatedText);
+                        renderBotText(botDiv, accumulatedText, true);
                         autoScroll();
                     }
                 } catch (e) { }
             }
         }
     }
-    // Save to history after complete
+    // Final Render without cursor
+    renderBotText(botDiv, accumulatedText, false);
+    
+    // Save to history
     S.history.push({role: 'bot', content: accumulatedText});
     saveMemory();
 
   }catch(err){
-    renderBotText(botDiv,`**Error:** सर्वर से संपर्क नहीं हो पाया। कृपया दोबारा प्रयास करें।`);
+    renderBotText(botDiv,`**Error:** Server communication failed.`, false);
   }
 
   S.busy=false;
@@ -545,72 +581,65 @@ async function sendMsg(){
   autoScroll();
 }
 
-// --- DOM INJECTION (For rendering history and live messages) ---
+function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();}
+
+// --- DOM INJECTION ---
 function appendUserDOM(text, badgeText){
   let bHtml = badgeText ? `<div style="font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;">${esc(badgeText)}</div>` : '';
   const el=document.createElement('div');el.className='msg user';
   el.innerHTML=`<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`;
   document.getElementById('msgs').appendChild(el);
 }
+
 function appendBotDOM(content) {
   const el=document.createElement('div');el.className='msg bot';
-  // Check if content is raw HTML (from image generator)
-  if(content.includes('<img src="https://image.pollinations')) {
-      el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble">${content}</div></div>`;
-  } else {
-      el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"></div></div>`;
-      renderBotText(el, content);
-  }
+  el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"></div></div>`;
   document.getElementById('msgs').appendChild(el);
+  renderBotText(el, content, false);
 }
 
-// Custom Markdown rendering to extract code for Workspace
-function renderBotText(el, raw) {
+// Render Markdown + Thinking Toggle + Actions
+function renderBotText(el, raw, isStreaming) {
   const b = el.querySelector('.bubble');
   
-  // Custom parsing for code blocks to convert to Workspace Triggers
-  let processText = raw;
-  const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+  // 1. Separate Thinking and Main Text
+  const { mainText, thinkText } = parseThinking(raw);
   
-  processText = processText.replace(codeBlockRegex, (match, lang, code) => {
-      const encoded = encodeURIComponent(code).replace(/'/g, "%27");
-      return `
-      <div class="ws-trigger-card">
-        <div class="ws-trigger-info">
-          <div class="ws-trigger-icon">💻</div>
-          <div class="ws-trigger-text">
-            <h4>Code Generated</h4>
-            <p>${lang || 'snippet'}</p>
-          </div>
-        </div>
-        <button class="ws-btn" onclick="openWorkspace('${encoded}', '${lang}')">View in Workspace</button>
-      </div>`;
-  });
-
-  const html = marked.parse(processText);
+  // 2. Parse Markdown
+  let html = '';
   
-  // Adding the copy button below the bubble text
-  const cleanRaw = raw.replace(/"/g, '&quot;').replace(/'/g, "\\'");
-  const actionsHTML = `
-    <div class="msg-actions">
-      <button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
-  `;
+  // Attach Thinking block if exists
+  if (thinkText) {
+      html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`;
+  }
+  
+  html += marked.parse(mainText);
+  
+  // Add Blinking Cursor if streaming
+  if(isStreaming) {
+      html += '<span class="blinking-cursor"></span>';
+  }
   
   b.innerHTML = html;
   
-  // Append actions to the body (outside bubble)
+  // 3. Add Copy Action Button below bubble (only once streaming is done or if it's history load)
   let actionsDiv = el.querySelector('.msg-actions');
-  if(!actionsDiv) {
-      const body = el.querySelector('.body');
-      body.insertAdjacentHTML('beforeend', actionsHTML);
+  if(!isStreaming && !actionsDiv && mainText.trim().length > 0) {
+      const cleanRaw = mainText.replace(/"/g, '&quot;').replace(/'/g, "\\'").replace(/\n/g, '\\n');
+      const actionsHTML = `
+        <div class="msg-actions">
+          <button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 Text
+          </button>
+        </div>
+      `;
+      el.querySelector('.body').insertAdjacentHTML('beforeend', actionsHTML);
   }
 }
 
 function esc(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
 </script>
 </body>
-</html>
+</html>
+