Settings Panel

Web Search toggle and Precise/Creative mode selector for chat settings.

Web Search
Mode

Installation

npx shadcn add https://ui.adq.ai/api/r/settings-panel

Usage

import { SettingsPanel } from "@/components/chat/settings-panel";
import type { PromptMode } from "@/components/chat/settings-panel";
import { useState } from "react";

function MySettings() {
  const [webSearch, setWebSearch] = useState(false);
  const [mode, setMode] = useState<PromptMode>("precise");

  return (
    <SettingsPanel
      webSearch={webSearch}
      onWebSearchChange={setWebSearch}
      mode={mode}
      onModeChange={setMode}
    />
  );
}

Props

PropTypeDefaultDescription
webSearch*boolean—Whether web search is enabled.
onWebSearchChange*(val: boolean) => void—Callback when web search toggle changes.
mode*"precise" | "creative"—The current prompt mode.
onModeChange*(mode: "precise" | "creative") => void—Callback when the mode selection changes.