Website chat

import { TalqingClient } from "@talqing/sdk";
import { getSession } from "@/lib/auth"; // your own sign-in

const talqing = new TalqingClient({
  baseUrl: "https://api.talqing.com",
  token: process.env.TALQING_API_KEY,
});

const AGENT_ID = "6d3f2a10-9b74-4c58-8e21-40af7c9b1d35";

export async function POST() {
  const session = await getSession();
  if (!session) return new Response("Unauthorized", { status: 401 });

  const contact_key = `app-user:${session.userId}`;

  // Reuse the user's open chat: starting a new one ends it.
  const open = await talqing.chats.list({ contact_key, agent_id: AGENT_ID, status: "open", limit: 1 });
  const chat =
    open.items[0] ??
    (await talqing.chats.create({
      createChatRequest: {
        contact_key,
        agent_id: AGENT_ID,
        userdata: { name: session.name, plan: session.plan, account_id: session.accountId },
      },
    }));

  // { chat_id, token, expires_at, api_url } — pass it to the page unchanged.
  return Response.json(await talqing.chats.tokens.create({ chat_id: chat.id }));
}

"use client";

import { useEffect, useMemo, useState } from "react";
import { TalqingChat, type TalqingChatItem } from "@talqing/client";

type Bubble = { id: string; who: "you" | "agent"; text: string };

const toBubbles = (items: TalqingChatItem[]): Bubble[] =>
  items
    .filter((item) => item.type === "message" && item.text)
    .map((item) => ({ id: item.id, who: item.role === "user" ? "you" : "agent", text: item.text ?? "" }));

export default function Chat() {
  const chat = useMemo(
    () => new TalqingChat({ fetchToken: async () => (await fetch("/api/chat/token", { method: "POST" })).json() }),
    [],
  );
  const [bubbles, setBubbles] = useState<Bubble[]>([]);
  const [draft, setDraft] = useState("");
  const [streaming, setStreaming] = useState("");
  const [working, setWorking] = useState(false);
  const [ended, setEnded] = useState(false);

  // A reload picks the open chat back up.
  useEffect(() => {
    void chat.items().then((items) => setBubbles(toBubbles(items)));
  }, [chat]);

  async function send(event: React.FormEvent) {
    event.preventDefault();
    const text = draft.trim();
    if (!text) return;
    setDraft("");
    setWorking(true);

    const { events, result } = chat.send(text);
    let reply = "";
    for await (const frame of events) {
      if (frame.event === "assistant.delta") setStreaming((reply += frame.text)); // deltas append
    }
    const turn = await result;

    setStreaming("");
    setWorking(false);
    setBubbles((current) => [...current, ...toBubbles([turn.input, ...turn.items])]);
    if (turn.chat_status === "ended") setEnded(true);
  }

  return (
    <div>
      {bubbles.map((bubble) => (
        <p key={bubble.id}><strong>{bubble.who}:</strong> {bubble.text}</p>
      ))}
      {streaming && <p><strong>agent:</strong> {streaming}</p>}
      {working && !streaming && <p>Thinking…</p>}
      {ended ? (
        <p>This chat has ended.</p>
      ) : (
        <form onSubmit={send}>
          <input value={draft} onChange={(event) => setDraft(event.target.value)} />
          <button type="submit">Send</button>
        </form>
      )}
    </div>
  );
}

{
  "name": "get_account_summary",
  "description": "Look up this customer's plan, seat count, current usage and renewal date. Call it before answering anything about their account, their limits or their bill.",
  "json_schema": { "type": "object", "properties": {}, "required": [] },
  "operations": [
    {
      "kind": "http",
      "config": {
        "method": "GET",
        "url": "https://app.northwind.example/internal/accounts/{{userdata.account_id}}/summary",
        "headers": { "Authorization": "Bearer {{secrets.NORTHWIND_INTERNAL_TOKEN}}" },
        "timeout": 10
      }
    }
  ]
}