chore: Regenerate all playbooks

nvidia/multi-agent-chatbot/README.md

@@ -119,8 +119,8 @@ Steps to completely remove the containers and free up resources.
 From the root directory of the multi-agent-chatbot project, run the following commands:
 
 ```bash
-docker compose -f docker-compose.yml -d docker-compose-models.yml down
-docker volume rm chatbot-spark_model-data chatbot-spark_postgres_data
+docker compose -f docker-compose.yml docker-compose-models.yml down
+docker volume rm chatbot-spark_postgres_data
 ```
 
 ## Step 9. Next steps

nvidia/multi-agent-chatbot/assets/README.md

@@ -85,6 +85,19 @@ You can either provide URLs or drag and drop images.
 Describe this image: https://en.wikipedia.org/wiki/London_Bridge#/media/File:London_Bridge_from_St_Olaf_Stairs.jpg
 
 
+## Cleanup
+
+Follow these steps to completely remove the containers and free up resources.
+
+From the root directory of the multi-agent-chatbot project, run the following commands:
+
+```bash
+docker compose -f docker-compose.yml docker-compose-models.yml down
+
+docker volume rm chatbot-spark_postgres_data
+```
+> **Note**: If you do not execute these commands containers, will continue to run and take up memory.
+
 ## Customizations
 
 ### Using different models

nvidia/multi-agent-chatbot/assets/frontend/src/components/QuerySection.tsx

@@ -22,8 +22,6 @@ import remarkGfm from 'remark-gfm'; // NEW
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; // NEW
 import { oneDark, oneLight, Dark, Light } from "react-syntax-highlighter/dist/esm/styles/prism"; // NEW
 import WelcomeSection from "./WelcomeSection";
-const isDark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
-
 
 export function makeChatTheme(isDark: boolean) {
   const base = isDark ? oneDark : oneLight;
@@ -62,10 +60,30 @@ export function makeChatTheme(isDark: boolean) {
     'attr-name': { ...(base['attr-name'] || {}), color: isDark ? "#e6b450" : "#6b4f00" },
   } as const;
 }
-const theme = makeChatTheme(isDark);
 
 function CodeBlockWithCopy({ code, language }: { code: string; language: string }) {
   const [copied, setCopied] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+
+  // Listen for theme changes
+  useEffect(() => {
+    const updateTheme = () => {
+      const darkMode = document.documentElement.classList.contains("dark");
+      setIsDark(darkMode);
+    };
+
+    // Set initial theme
+    updateTheme();
+
+    // Listen for changes to the document element's class list
+    const observer = new MutationObserver(updateTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   const handleCopy = async () => {
     try {
@@ -123,7 +141,7 @@ function CodeBlockWithCopy({ code, language }: { code: string; language: string
       </button>
       <SyntaxHighlighter
         language={language}
-        style={theme}
+        style={makeChatTheme(isDark)}
         PreTag="div"
         wrapLongLines
         showLineNumbers={false}
@@ -647,6 +665,10 @@ export default function QuerySection({
         )}
       </form>
       
+      <div className={styles.disclaimer}>
+        This is a concept demo to showcase multiple models and MCP use. It is not optimized for performance. Developers can customize and further optimize it for performance.
+      </div>
+      
       {inferenceStats.tokensPerSecond > 0 && (
         <div className={styles.inferenceStats}>
           {inferenceStats.tokensPerSecond} tokens/sec

nvidia/multi-agent-chatbot/assets/frontend/src/styles/QuerySection.module.css

@@ -1031,3 +1031,19 @@
   margin-bottom: 4px;
 }
 
+.disclaimer {
+  text-align: center;
+  font-size: 12px;
+  color: #6b7280;
+  padding: 2px 16px;
+  margin: -16px auto 0 auto;
+  max-width: 600px;
+  line-height: 1.4;
+  opacity: 0.8;
+  transition: color 0.3s ease;
+}
+
+:global(.dark) .disclaimer {
+  color: #9ca3af;
+}
+

nvidia/multi-agent-chatbot/assets/frontend/src/styles/WelcomeSection.module.css

@@ -28,7 +28,7 @@
 }
 
 .welcomeMessage {
-  font-size: 42px;
+  font-size: 28px;
   font-weight: 200;
   color: #1f2937;
   max-width: 800px;
@@ -162,7 +162,7 @@
   }
   
   .welcomeMessage {
-    font-size: 32px;
+    font-size: 24px;
     margin-bottom: 32px;
   }