Add deep thinking option to docs home page chat (#339)

* Add deep thinking option

* Appease linter

Author: JakeSCahill

package-lock.json

@@ -23,7 +23,7 @@
     "@docsearch/js": "^3.3.3",
     "@fontsource/roboto": "~4.5",
     "@fontsource/roboto-mono": "~4.5",
-    "@kapaai/react-sdk": "^0.3.0",
+    "@kapaai/react-sdk": "^0.9.0",
     "autoprefixer": "~9.7",
     "babelify": "^10.0.0",
     "browser-pack-flat": "~3.4",

package.json

@@ -252,6 +252,60 @@ body.article.home {
   cursor: not-allowed;
 }
 
+.home .chat-footer-buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--spacings-spacing-sm);
+}
+
+.home .deep-thinking-button {
+  padding: 0 12px;
+  background: transparent;
+  border: 1px solid var(--body-font-color);
+  border-radius: var(--border-radius-radius-md);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  color: var(--body-font-color);
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.home .deep-thinking-button .button-icon-left {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+
+.home .deep-thinking-button .button-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.home .deep-thinking-button .button-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.home .deep-thinking-button:hover {
+  background: rgba(24, 24, 24, 0.05);
+  border-color: var(--body-font-color);
+  color: var(--body-font-color);
+}
+
+.home .deep-thinking-button.active {
+  background: rgba(218, 93, 8, 0.1);
+  border-color: var(--color-primitives-global-orange-orange-800);
+  color: var(--color-primitives-global-orange-orange-800);
+}
+
+.home .deep-thinking-button.active:hover {
+  background: rgba(218, 93, 8, 0.15);
+  border-color: var(--color-primitives-global-orange-orange-800);
+}
+
 .home .feedback-group {
   display: flex;
   gap: 5px;

src/css/home.css

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, Component } from 'react'
-import { useChat } from '@kapaai/react-sdk'
+import { useChat, useDeepThinking } from '@kapaai/react-sdk'
 import {
   ArrowUp,
   ArrowDown,
@@ -8,6 +8,7 @@ import {
   RefreshCcw,
   ClipboardCopy,
   CircleStop,
+  FileSearch,
 } from 'lucide-react'
 import DOMPurify from 'dompurify'
 import { Marked } from 'marked'
@@ -208,6 +209,8 @@ export default function ChatInterface() {
     isPreparingAnswer,
   } = useChat()
 
+  const deepThinking = useDeepThinking()
+
   const latestQA = conversation.getLatest()
 
   // Show/hide “scroll down” button
@@ -450,7 +453,12 @@ export default function ChatInterface() {
               )
             })}
             {isPreparingAnswer && (
-              <div className="loading">Preparing answer{dots}</div>
+              <div className="loading">
+                {deepThinking.active
+                  ? `Running deep thinking mode up to a minute. ${deepThinking.seconds}s…`
+                  : `Preparing answer${dots}`
+                }
+              </div>
             )}
           </div>
         </div>
@@ -504,10 +512,24 @@ export default function ChatInterface() {
                     <span className="button-text">Stop</span>
                   </button>
                 ) : (
-                  <button type="submit" className="main-button">
-                    <ArrowUp className="button-icon" />
-                    <span className="button-text">Submit</span>
-                  </button>
+                  <div className="chat-footer-buttons">
+                    <button
+                      type="button"
+                      onClick={deepThinking.toggle}
+                      className={`deep-thinking-button outlined ${deepThinking.active ? 'active' : ''}`}
+                      title="For harder questions. Search longer across all sources. Takes up to 1 minute."
+                    >
+                      <span className="button-icon-left">
+                        {/* Tabler FileSearch icon from lucide-react */}
+                        <FileSearch className="button-icon" />
+                      </span>
+                      <span className="button-text">Deep thinking</span>
+                    </button>
+                    <button type="submit" className="main-button">
+                      <ArrowUp className="button-icon" />
+                      <span className="button-text">Submit</span>
+                    </button>
+                  </div>
                 )}
               </div>
             </div>