Ask ai dark theme and session clearing

data/tech-stack-data/1-0-0-beta.json

@@ -61,56 +61,48 @@
         {
           "name": "React",
           "version": "v19.2.3",
-
           "description": "Platform for building desktop web applications",
           "link": "https://react.dev/"
         },
         {
           "name": "Next Js",
           "version": "v16.1.1",
-
           "description": "React framework that helps to build fast web apps",
           "link": "https://nextjs.org/"
         },
         {
           "name": "Material UI",
           "version": "v6.3.1",
-
           "description": "Ready to use Material Design components",
           "link": "https://mui.com/material-ui/"
         },
         {
           "name": "D3",
           "version": "v7.8.5",
-
           "description": "JavaScript library for manipulating documents based on data.",
           "link": "https://d3js.org/"
         },
         {
           "name": "NVD3",
           "version": "v1.8.16",
-
           "description": "Re-usable charts for D3.js.",
           "link": "https://nvd3.org/"
         },
         {
           "name": "Fullcalendar",
           "version": "v6.1.15",
-
           "description": "Full-sized drag & drop event calendar.",
           "link": "https://fullcalendar.io/"
         },
         {
           "name": "Lodash (lodash-es)",
           "version": "v4.17.21",
-
           "description": "A modern JavaScript utility library delivering modularity, performance, & extras.",
           "link": "https://lodash.com/"
         },
         {
           "name": "Moment",
           "version": "v2.30.1",
-
           "description": "Parse, validate, manipulate, and display dates and times in JavaScript",
           "link": "https://momentjs.com/"
         }
@@ -127,6 +119,12 @@
           "description": "Platform for universal React applications.",
           "link": "https://expo.dev/",
           "version": "54.0.12"
+        },
+        {
+          "name": "UI Kitten",
+          "description": "React Native UI library based on Eva Design System for building rich cross-platform mobile applicationss.",
+          "link": "https://akveo.github.io/react-native-ui-kitten/",
+          "version": "1.0.0"
         }
       ]
     },
@@ -452,4 +450,4 @@
       "Java": []
     }
   }
-}
+}

src/components/MDXComponents/VideoCard/VideoCard.css

@@ -156,6 +156,17 @@
   transform: scale(1.05);
 }
 
+/* ── Dark mode ──────────────────────────────────────────────── */
+[data-theme='dark'] .thumbnail-text {
+  color: #ffffff;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+}
+
+[data-theme='dark'] .thumbnail-subtext {
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
 @media (max-width: 640px) {
   .video-card-container {
     flex-direction: column-reverse;

src/css/custom.css

@@ -8,8 +8,8 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 :root {
-  --ifm-container-width-xl: 1440px;
-
+  --ifm-container-width-xl: 2000px;
+  --ifm-container-width:1600px;
   --ifm-color-primary: rgba(23, 148, 239, 1);
   --ifm-color-primary-hover: var(--ifm-color-secondary);
   --ifm-color-dark: rgba(24, 24, 27, 1);
@@ -204,6 +204,85 @@
   background-image: none;
 }
 
+/* ── Dropdown popover ──────────────────────────────────────── */
+[data-theme='dark'] .dropdown-popover {
+  background: #1e3050;
+  box-shadow:
+    0px 4px 8px 0px rgba(0, 0, 0, 0.3),
+    0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .dropdown-popover .popover-content {
+  box-shadow:
+    0px 4px 8px 0px rgba(0, 0, 0, 0.3),
+    0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .menu-item:hover {
+  background-color: rgba(76, 141, 255, 0.1);
+}
+
+[data-theme='dark'] .menu-label {
+  color: rgba(255, 255, 255, 0.85);
+}
+[data-theme='dark'] .launcher-ecosystem>div>button>div div {
+    background:rgba(255, 255, 255, 0.85) !important;
+} 
+[data-theme='dark'] .launcher-ecosystem>div>button:hover,[data-theme='dark'] .launcher-ecosystem>div>button:focus{
+   background:rgba(255, 255, 255, 0.2) !important;
+}
+
+/* ── Sidebar ───────────────────────────────────────────────── */
+[data-theme='dark'] .theme-doc-sidebar-container {
+  border-right-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Icon buttons ──────────────────────────────────────────── */
+[data-theme='dark'] button.btn.btn-icon:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Homepage search bar ───────────────────────────────────── */
+[data-theme='dark'] .top-banner-section .search-bar-with-ai {
+  background:
+    linear-gradient(#1a2d4a, #1a2d4a) padding-box,
+    conic-gradient(
+        from 187.27deg at 50% 50%,
+        #eead92 0deg,
+        #ff44ec 192.12deg,
+        #fe4ce5 221.27deg,
+        #6018dc 360deg
+      )
+      border-box;
+}
+
+[data-theme='dark'] .top-banner-section .search-bar-with-ai:hover {
+  background:
+    linear-gradient(#1a2d4a, #1a2d4a) padding-box,
+    conic-gradient(
+        from 220deg at 50% 50%,
+        #f2b29b 0deg,
+        #ff63f1 190deg,
+        #1694ef 225deg,
+        #1694ef 360deg
+      )
+      border-box;
+}
+
+[data-theme='dark'] .top-banner-section .text-greeting-desc {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+/* ── Navbar search hover ───────────────────────────────────── */
+[data-theme='dark'] .navbar .navbar__items .search-bar-with-ai .DocSearch-Button:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Footer ────────────────────────────────────────────────── */
+[data-theme='dark'] .footer .send-message-section {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
 .markdown h1:first-child,
 .markdown h1 {
   --ifm-h1-font-size: 2.5rem;
@@ -222,7 +301,8 @@ body {
     outline: none;
   }
 }
-.DocSearch-Hit-action-button:focus, .DocSearch-Hit-action-button:hover{
+.DocSearch-Hit-action-button:focus,
+.DocSearch-Hit-action-button:hover {
   background-color: rgba(255, 255, 255, 0.5) !important;
 }
 .line-clamp-1 {
@@ -337,6 +417,10 @@ span.DocSearch-Button-Keys {
   padding-right: 16px;
 }
 
+.top_nav + .container .thin-scrollbar ,.thin-scrollbar.theme-doc-toc-desktop{
+  top: calc(var(--ifm-navbar-height) + 2rem + var(--ifm-top-nav-height));
+}
+
 /* Navbar inner: relative so the center wrapper can be absolutely positioned */
 .navbar__inner {
   position: relative;
@@ -383,6 +467,9 @@ span.DocSearch-Button-Keys {
   vertical-align: bottom;
   margin-left: 6px;
 }
+[data-theme='dark'] .dropdown > .navbar__link:after {
+  background-image: url('/img/dropdown-white.svg');
+}
 
 .menu-wrapper {
   position: relative;
@@ -877,7 +964,7 @@ button.clean-btn.menu__caret::before {
   white-space: nowrap;
   flex-shrink: 0;
   transition:
-    background 0.2s ease,   
+    background 0.2s ease,
     border-color 0.2s ease;
 }
 

src/theme/Navbar/Content/index.js

@@ -95,7 +95,10 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          <AppLauncher excludeId="docs" />
+          <div className="launcher-ecosystem">
+            <AppLauncher excludeId="docs" />
+          </div>
+
           {/* <MenuSection /> */}
           <Link
             to="https://wavemaker.ai/ai-early-bird/"

src/theme/SearchBar/AIConversation.jsx

@@ -57,9 +57,12 @@ function resolveImageSrc(src) {
   ) {
     return src;
   }
-  // Strip leading ./ or ../
-  const cleaned = src.replace(/^(\.\.?\/)+/, '');
-  return `${GITHUB_RAW_BASE}${cleaned}`;
+  // Only prepend the repo base for already-resolved repo-relative asset paths.
+  // Raw doc-relative paths like ./assets/... lose their document context if we trim them.
+  if (src.startsWith('docs/') || src.startsWith('static/') || src.startsWith('blogs/')) {
+    return `${GITHUB_RAW_BASE}${src}`;
+  }
+  return src;
 }
 
 function buildMarkdownComponents(navigate) {
@@ -227,16 +230,43 @@ export default function AIConversation({
     [history],
   );
   const scrollRef = useRef(null);
+  // true once the user has scrolled up away from the bottom
+  const isUserScrolled = useRef(false);
+  const SCROLL_THRESHOLD = 80; // px from bottom before we consider it "scrolled away"
+
   // Mobile: only one message's sources can be expanded at a time
   const [expandedMobileId, setExpandedMobileId] = useState(null);
   const [feedbackPromptId, setFeedbackPromptId] = useState(null);
   const [feedbackReasonByMessage, setFeedbackReasonByMessage] = useState({});
 
+  // Detect when the user manually scrolls
   useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+      isUserScrolled.current = distFromBottom > SCROLL_THRESHOLD;
+    };
+    el.addEventListener('scroll', onScroll, { passive: true });
+    return () => el.removeEventListener('scroll', onScroll);
+  }, []);
+
+  // New message added (user query or completed AI response) → always scroll to
+  // bottom and reset the user-scrolled lock so streaming continues to follow.
+  useEffect(() => {
+    isUserScrolled.current = false;
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages, currentFragments, currentTraceSteps]);
+  }, [messages.length]);
+
+  // Streaming updates (fragments / trace steps) → only scroll if the user
+  // hasn't manually scrolled away to read earlier content.
+  useEffect(() => {
+    if (!isUserScrolled.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [currentFragments, currentTraceSteps]);
 
   const toggleMobileSources = (msgId) => {
     setExpandedMobileId((prev) => (prev === msgId ? null : msgId));
@@ -280,7 +310,6 @@ export default function AIConversation({
             feedbackPromptId === msg.id && msg.feedbackStatus !== 'submitted';
           const canRateMessage =
             msg.traceId &&
-            !isStreaming &&
             msg.feedbackStatus !== 'submitted' &&
             msg.feedbackStatus !== 'submitting';
 
@@ -535,7 +564,7 @@ export default function AIConversation({
             <div className={styles.agentHeader}>
               <div className={styles.agentIconCircle}>
                 <img
-                  src="/img/icon/AskAI-Icon.svg"
+                  src="/img/icon/doc-ai-agent.svg"
                   alt="AI"
                   width="18"
                   height="18"

src/theme/SearchBar/AIConverstion.module.css

@@ -22,6 +22,7 @@
   --shadow:
     0 8px 40px rgba(27, 67, 130, 0.14), 0 2px 12px rgba(27, 67, 130, 0.08);
   --shadow-card: 0 2px 8px rgba(27, 67, 130, 0.08);
+  --askai-source-card-label:rgba(90, 90, 90, 1);
 }
 
 /* Dark mode — follows Docusaurus [data-theme='dark'] convention */
@@ -44,6 +45,8 @@
   --purple: #a78bfa;
   --shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.3);
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --askai-source-card-label:rgba(255, 255, 255, 0.92);
+
 }
 
 /* OVERLAY */
@@ -312,12 +315,7 @@
 
 .msgUserBubble {
   background: rgba(255, 255, 255, 0.7);
-  border: 1.22px solid;
-  border-image-source: linear-gradient(
-    91.21deg,
-    #ffffff 0%,
-    rgba(255, 255, 255, 0.44) 94.21%
-  );
+  border: none;
   color: rgba(26, 26, 26, 1);
   border-radius: 12px;
   padding: 10px 14px;
@@ -383,7 +381,7 @@
   font-size: 10px;
   font-family: 'Inter', sans-serif;
   font-weight: 600;
-  color: rgba(90, 90, 90, 1);
+  color: var(--askai-source-card-label);
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -2107,7 +2105,7 @@
 .agentIconCircle {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   text-box-trim: trim-both;
 }
 
@@ -2122,6 +2120,7 @@
   font-family: 'Inter', sans-serif;
   color: var(--text);
   letter-spacing: -0.01em;
+  text-box-trim: trim-both;
 }
 
 /* ── Streaming circular loader ──────────────────────────────── */