iris-chatbot 4.1.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris-chatbot",
-  "version": "4.1.0",
+  "version": "5.0.1",
   "private": false,
   "description": "One-command installer for the Iris project template.",
   "bin": {

package/template/docs/plan-projects-sidebar-ui.md

@@ -0,0 +1,11 @@
+# Projects plan – Sidebar UI addendum
+
+When implementing the Sidebar for Projects, apply these UI details:
+
+1. **Folder icon**
+   - **Remove** the folder icon from chat/thread rows (individual chats).
+   - **Add** the folder icon next to **project names** (each project in the project list, including "Inbox" if shown as a project).
+
+2. **"Your Chats" label**
+   - Use the exact label **'Your Chats'** (title case).
+   - Do **not** render it in all caps: remove the `uppercase` class from the section heading (currently in Sidebar around line 86: `text-[11px] uppercase tracking-[0.18em]` → use the same size/tracking but drop `uppercase`) so it displays as **Your Chats**, not "YOUR CHATS".

package/template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "iris",
-  "version": "4.1.0",
+  "version": "5.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "iris",
-      "version": "4.1.0",
+      "version": "5.0.1",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.72.1",
         "clsx": "^2.1.1",

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris",
-  "version": "4.1.0",
+  "version": "5.0.1",
   "private": true,
   "description": "One-command installer for the Iris project template.",
   "engines": {

package/template/src/app/globals.css

@@ -3,7 +3,7 @@
 
 :root {
   --topbar-height: 64px;
-  --bg: #171819;
+  --bg: #212121;
   --bg-alt: #1b1c1d;
   --sidebar: #181818;
   --sidebar-border: #202020;
@@ -15,6 +15,7 @@
   --text-muted: #b1b7bf;
   --accent: #10a37f;
   --accent-2: #0e8e6f;
+  --accent-ring: var(--accent-2);
   --danger: #ef4444;
   --border: #2a2a2a;
   --border-strong: #3a3a3a;
@@ -38,7 +39,7 @@
 body {
   background: var(--bg);
   color: var(--text-primary);
-  font-family: var(--app-font, var(--font-sans));
+  font-family: var(--app-font, var(--font-poppins));
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -48,6 +49,21 @@ a {
   color: var(--accent);
 }
 
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+}
+
 .chat-shell {
   display: grid;
   grid-template-columns: 248px minmax(0, 1fr);
@@ -82,10 +98,21 @@ a {
   background: transparent !important;
   backdrop-filter: none;
   box-shadow: none;
-  position: sticky;
+  position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
   z-index: 40;
   height: var(--topbar-height);
+  pointer-events: none;
+}
+
+.topbar>*,
+.topbar button,
+.topbar a,
+.topbar [role="listbox"],
+.topbar [role="option"] {
+  pointer-events: auto;
 }
 
 
@@ -249,7 +276,7 @@ a {
 }
 
 .assistant-card .message-content {
-  color: #f8fafc;
+  color: var(--text-primary);
 }
 
 .message-loading-spinner {
@@ -271,7 +298,7 @@ a {
 .composer-bar {
   position: sticky;
   bottom: 0;
-  background: transparent;
+  background: var(--bg);
   z-index: 30;
 }
 
@@ -299,13 +326,14 @@ a {
   --sidebar: #ffffff;
   --sidebar-border: #e5e5e5;
   --panel: #ffffff;
-  --panel-2: #f0f0f0;
-  --panel-3: #e8e8e8;
+  --panel-2: #f6f6f6;
+  --panel-3: #f0f0f0;
   --text-primary: #111111;
   --text-secondary: #4a4a4a;
   --text-muted: #6f6f6f;
   --accent: #0e8e6f;
   --accent-2: #0b7a5f;
+  --accent-ring: color-mix(in srgb, var(--accent) 55%, #000);
   --danger: #dc2626;
   --border: #d5d5d5;
   --border-strong: #bdbdbd;
@@ -313,6 +341,51 @@ a {
   --user-bubble: #d7f2ea;
 }
 
+/* Dark mode: white button background (no data-theme or data-theme="dark") */
+:root .settings-tab-active,
+:root .settings-btn-accent {
+  background: white !important;
+  color: #111111 !important;
+}
+
+[data-theme="dark"] .settings-tab-active,
+[data-theme="dark"] .settings-btn-accent {
+  background: white !important;
+  color: #111111 !important;
+}
+
+/* Light mode: black for selected tab and Save button */
+[data-theme="light"] .settings-tab-active,
+[data-theme="light"] .settings-btn-accent {
+  background: #111111 !important;
+  color: #ffffff !important;
+}
+
+[data-theme="light"] .message-content pre,
+[data-theme="light"] .message-content pre code {
+  color: #e5e7eb;
+}
+
+[data-theme="light"] .message-content code {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--text-primary);
+}
+
+[data-theme="light"] .message-loading-spinner {
+  border-color: rgba(0, 0, 0, 0.15);
+  border-top-color: #111111;
+}
+
+[data-theme="light"] .send-button.active {
+  background: #111111;
+  color: #ffffff;
+  border-color: transparent;
+}
+
+[data-theme="light"] .send-button.active svg {
+  color: #ffffff;
+}
+
 .message-content h1,
 .message-content h2,
 .message-content h3,
@@ -506,12 +579,16 @@ a {
 }
 
 .composer {
-  background: var(--panel);
+  background: #303030;
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 10px 12px;
 }
 
+[data-theme="light"] .composer {
+  background: transparent;
+}
+
 .thread-shelf {
   margin-top: 12px;
   padding-top: 8px;
@@ -582,10 +659,22 @@ a {
   line-height: 1.4;
   padding-top: 7px;
   padding-bottom: 9px;
+  padding-left: 6px;
   /* One line by default; height grows with content in Composer.tsx */
   min-height: calc(1.4em + 7px + 9px);
 }
 
+.composer-textarea:focus,
+.composer-textarea:focus-visible {
+  box-shadow: none;
+}
+
+.search-modal-input:focus,
+.search-modal-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .send-button {
   height: 40px;
   width: 40px;
@@ -800,9 +889,174 @@ a {
 }
 
 .chat-scroll {
-  padding-top: calc(var(--topbar-height) - 20px);
+  padding-top: calc(var(--topbar-height) + 24px);
+  position: relative;
 }
 
 .chat-scroll.empty {
-  padding-top: var(--topbar-height);
+  padding-top: calc(var(--topbar-height) + 24px);
+}
+
+/* ─── Ask Selection Button ─── */
+
+.ask-selection-button {
+  position: absolute;
+  z-index: 50;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(50, 50, 50, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: #f0f0f0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
+  animation: ask-button-enter 0.18s ease-out;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ask-selection-button:hover {
+  background: rgba(60, 60, 60, 0.95);
+  border-color: rgba(255, 255, 255, 0.22);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
+  transform: translateX(-50%) translateY(-1px);
+}
+
+.ask-selection-button:active {
+  transform: translateX(-50%) translateY(0);
+  background: rgba(70, 70, 70, 0.95);
+}
+
+@keyframes ask-button-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px) scale(0.92);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+/* ─── Quoted Context Container ─── */
+
+.composer-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.quoted-context-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  margin-bottom: 0;
+  background: #2b2b2b;
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 18px 18px 0 0;
+  animation: quoted-context-enter 0.22s ease-out;
+}
+
+.quoted-context-container+.composer {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top-color: var(--border);
+}
+
+.quoted-context-content {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.quoted-context-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+
+.quoted-context-text {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}
+
+.quoted-context-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.quoted-context-dismiss:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+@keyframes quoted-context-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 200px;
+  }
+}
+
+/* ─── Light theme overrides ─── */
+
+[data-theme="light"] .ask-selection-button {
+  background: rgba(255, 255, 255, 0.94);
+  border-color: rgba(0, 0, 0, 0.12);
+  color: #111111;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="light"] .ask-selection-button:hover {
+  background: #ffffff;
+  border-color: rgba(0, 0, 0, 0.18);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .quoted-context-container {
+  background: transparent;
+}
+
+[data-theme="light"] .quoted-context-dismiss:hover {
+  background: rgba(0, 0, 0, 0.06);
 }

package/template/src/app/page.tsx

@@ -12,6 +12,8 @@ import {
   createNewThread,
   deleteConversation,
   deleteThread,
+  DEFAULT_ACCENT_DARK,
+  DEFAULT_ACCENT_LIGHT,
 } from "../lib/data";
 import { db } from "../lib/db";
 import {
@@ -122,7 +124,7 @@ export default function Home() {
             ? "var(--font-sora)"
             : settings.font === "space"
               ? "var(--font-space)"
-              : "var(--font-sans)";
+              : "var(--font-poppins)";
     document.documentElement.style.setProperty("--app-font", fontVar);
     document.body.style.fontFamily = fontVar;
   }, [settings, connectionOverrideId, setConnectionOverrideId]);
@@ -331,10 +333,23 @@ export default function Home() {
     <div
       className={`chat-shell ${sidebarCollapsed ? "collapsed" : ""}`}
       style={
-        {
-          "--accent": settings?.accentColor || "#66706e",
-          "--accent-2": settings?.accentColor || "#66706e",
-        } as CSSProperties
+        (() => {
+          const stored = settings?.accentColor || DEFAULT_ACCENT_DARK;
+          const isDefaultGray = stored === DEFAULT_ACCENT_DARK;
+          const isLight =
+            settings?.theme === "light" ||
+            (typeof document !== "undefined" &&
+              document.documentElement.dataset.theme === "light");
+          const effective =
+            isDefaultGray && isLight ? DEFAULT_ACCENT_LIGHT : stored;
+          return {
+            "--accent": effective,
+            "--accent-2": effective,
+            ...(isLight && {
+              "--accent-ring": "color-mix(in srgb, var(--accent) 55%, #000)",
+            }),
+          } as CSSProperties;
+        })()
       }
     >
       <Sidebar
@@ -387,7 +402,7 @@ export default function Home() {
         onOpenSearch={() => setSearchOpen(true)}
       />
 
-      <div className="flex h-screen min-w-0 flex-col overflow-hidden">
+      <div className="relative flex h-screen min-w-0 flex-col overflow-hidden">
         <TopBar
           connectionId={connection?.id ?? ""}
           connectionName={connection?.name ?? "No connection"}