Ask page (RAG)

"use client"
// app/AskPage.tsx: add once, in app/layout.tsx
import { useEffect } from "react"
import { mountAskPage } from "@yuktishaalaa/ask-page"

export default function AskPage() {
  useEffect(() => {
    mountAskPage({
      modes: ["fast", "balanced"],   // what visitors may pick
      questions: [{ text: "How do I apply?", path: "/scheme" }],
    })
  }, [])
  return null
}

<!-- before </body>: adds the "Ask this page" button -->
<script>
  window.YuktaiAskConfig = {
    modes: ["fast", "balanced"],
    questions: [{ text: "How do I apply?", path: "/scheme" }]
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/ask-page/dist/ask-page.global.js" defer></script>

<!-- mark anything private: it is never read -->
<div data-ask-private>…</div>

import { AskPage } from "@yuktishaalaa/ask-page"

const page = new AskPage({ config: { modes: ["fast"] } })
const a = await page.ask("How do I install it?")
a.text      // the answer
a.kind      // "quote" | "ai" | "shortcut" | "unknown"
a.sources   // [{ ref: "Installation", excerpt, elements }]

import { askWithGraph, AskPageRetriever } from "@yuktishaalaa/ask-page/langgraph"

// the same five steps as a LangGraph.js StateGraph
const answer = await askWithGraph(page, "How do I install it?")

// or a LangChain retriever over the current page
const docs = await new AskPageRetriever(page, 5).invoke("model download size")

const page = new YuktaiAsk.AskPage()
const a = await page.ask("How do I install it?")
console.log(a.text, a.sources.map(s => s.ref))

"use client"
import { useMemo, useState } from "react"
import { createContextIndex } from "@yuktishaalaa/yuktai"

const documents = [
  { id: "leave", text: "Leave policy: every employee gets 24 days of paid leave a year." },
  { id: "wfh", text: "Work from home: staff may work from home two days a week." },
]

export function AskHelp() {
  // includePage: true also indexes the visible page text
  const index = useMemo(() => createContextIndex({ documents, includePage: false, engine: "rust" }), [])
  const [answer, setAnswer] = useState("")
  async function onAsk(question: string) {
    const r = await index.ask(question, { k: 4 })   // { answer, hits: [{ id, text, score }], generated }
    setAnswer(r.answer)
  }
  return (/* your input + <p aria-live="polite">{answer}</p> */ null)
}

<script>
  const index = yuktai.createContextIndex({
    documents: [
      { id: "leave", text: "Leave policy: every employee gets 24 days of paid leave a year." },
      { id: "wfh", text: "Work from home: staff may work from home two days a week." }
    ],
    includePage: false,      // true: also index the visible page text
    // rows, columns, rowKey: also index grid data
    engine: "rust"           // "ts" | "rust" | "auto"
  })

  const r = await index.ask("How many leave days do I get?", { k: 4 })
  r.answer   // quoted from the best passages, nothing invented
  r.hits     // [{ id, source, text, score }]
  index.search("leave days", 3)   // ranked passages only
</script>

// Chrome built-in AI (Gemini Nano). Falls back to the quoted answer when it is not available.
export async function generate(question: string, context: string) {
  const LM = (globalThis as any).LanguageModel
  if (!LM) throw new Error("No on-device model")
  const session = await LM.create()
  return session.prompt(
    "Answer only from these passages. If they do not answer it, say so.\n\n" + context + "\n\nQuestion: " + question
  )
}

// const r = await index.ask(question, { generate })   → r.generated === true

async function generate(question, context) {
  if (!window.LanguageModel) throw new Error("No on-device model")
  const session = await LanguageModel.create()
  return session.prompt("Answer only from these passages.\n\n" + context + "\n\nQuestion: " + question)
}
const r = await index.ask("How many leave days do I get?", { generate })

// The 🛠 page tools use the same hook:
window.YUKTAI_CONFIG = { showPageTools: true, generate }

"use client"
import { askAboutPage, analyzePage } from "@yuktishaalaa/yuktai"

const r = await askAboutPage("Which fields are missing labels?")
// { intent, answer, targets, suggestions }
const outline = analyzePage()   // title, language, headings, landmarks, counts …

const r = await yuktai.askAboutPage("Which fields are missing labels?")
const outline = yuktai.analyzePage()

"use client"
import { AgenticPanel } from "@yuktishaalaa/yuktai"

export default function Help() {
  return <AgenticPanel defaultTab="ask" engine="rust" />
}

// or site-wide, a floating 💬 button:
// <YuktAIWrapper showRag engine="rust">{children}</YuktAIWrapper>

<div id="ask"></div>
<script>
  yuktai.mountAgenticPanel("#ask", { defaultTab: "ask", engine: "rust" })
</script>