useDeepThinking Hook

The useDeepThinking hook enables simple integration of Kapa’s deep thinking mode into your chat functionality.

Usage

import { useChat } from "@kapaai/react-sdk";

function ChatComponent() {
  const {
    active,
    toggle,
    activate,
    deactivate,
    seconds,
  } = useDeepThinking();

  // Use the hook values and functions to build your UI
  // ...
}

Return values

The useDeepThinking hook returns an object with the following properties:

Property	Type	Description
active	boolean	true when the deep thinking mode is activated for the next chat request.
toggle	() => void	Toggles the active state of the deep thinking mode.
activate	() => void	Activates the deep thinking mode.
deactivate	() => void	Deactivates the deep thinking mode.
seconds	number	The amount of seconds kapa is performing retrieval in deep thinking mode.

Examples

Basic chat interface

import React, { useState } from "react";
import { useChat } from "@kapaai/react-sdk";

function ChatInterface() {
  const [inputValue, setInputValue] = useState("");
  const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
    useChat();

  const deepThinking = useDeepThinking();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      submitQuery(inputValue);
      setInputValue("");
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {conversation.map((qa) => (
          <div key={qa.id || `temp-${qa.question}`}>
            <div className="user-message">{qa.question}</div>
            <div className="ai-message">
              {qa.answer || (isPreparingAnswer ? (deepThinking.active ? `Running deep thinking mode up to a minute. ${deepThinking.seconds.toString()}s…` : "Gathering sources...") : "")}
            </div>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit}>
        <input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Ask a question..."
          disabled={isGeneratingAnswer}
        />
        <button
          type="button"
          onClick={deepThinking.toggle}
          style={{
            border: deepThinking.active ? "1px solid blue" : undefined
          }}
        >
          Deep Thinking
        </button>
        {isPreparingAnswer || isGeneratingAnswer ? (
          <button type="button" onClick={stopGeneration}>
            Stop
          </button>
        ) : (
          <button type="submit">Send</button>
        )}
      </form>
    </div>
  );
}